diff --git a/website/.vitepress/config.mts b/website/.vitepress/config.mts
index fa9d8f4441..74058d4cca 100644
--- a/website/.vitepress/config.mts
+++ b/website/.vitepress/config.mts
@@ -160,14 +160,13 @@ export default defineConfig({
     },
     logo: '/img/brand/logo.svg',
     nav: [
-      { text: 'Sync', link: '/sync', activeMatch: '/sync' },
-      { text: 'Products', link: '/products', activeMatch: '/products' },
-      { text: 'Cloud', link: '/cloud', activeMatch: '/cloud' },
-      { text: 'Docs', link: '/docs/intro', activeMatch: '/docs/' },
-      { text: 'Demos', link: '/demos', activeMatch: '/demos' },
-      { text: 'Blog', link: '/blog', activeMatch: '/blog' },
-      { text: 'About', link: '/about/community', activeMatch: '/about/' },
-      { component: 'NavSignupButton' },
+      { text: 'Product', link: '/product/electric', activeMatch: '/product/' },
+      { text: 'Pricing', link: '/pricing', activeMatch: '/pricing' },
+      { text: 'Docs', link: '/docs/intro', activeMatch: '/docs/'},
+      { text: 'Demos', link: '/demos', activeMatch: '/demos'},
+      { text: 'Blog', link: '/blog', activeMatch: '/blog'},
+      { text: 'About', link: '/about/community', activeMatch: '/about/'},
+      { component: 'NavSignupButton' }
     ],
     search: {
       provider: 'local',
@@ -196,49 +195,6 @@ export default defineConfig({
           ],
         },
       ],
-      '/use-cases': [
-        {
-          text: 'Use cases',
-          items: [
-            {
-              text: 'Replace data fetching with data sync',
-              link: '/use-cases/data-sync',
-            },
-            {
-              text: 'Build resilient software that works offline',
-              link: '/use-cases/local-first-software',
-            },
-            // {
-            //   text: 'Provision data into dev and test environments',
-            //   link: '/use-cases/dev-and-test'
-            // },
-            //{
-            //  text: 'Add multi-user collaboration to your apps',
-            //  link: '/use-cases/multi-user'
-            //},
-            {
-              text: 'Automate cache invalidation',
-              link: '/use-cases/cache-invalidation',
-            },
-            //{
-            //  text: 'Hydrating edge workers',
-            //  link: '/use-cases/edge-workers'
-            //},
-            //{
-            //  text: 'Partial replicas for distributed cloud services',
-            //  link: '/use-cases/cloud-services'
-            //},
-            {
-              text: 'Retrieve data for local AI',
-              link: '/use-cases/local-ai',
-            },
-            {
-              text: 'Reduce your cloud costs',
-              link: '/use-cases/cloud-costs',
-            },
-          ],
-        },
-      ],
       '/docs': [
         {
           text: 'Docs',
diff --git a/website/.vitepress/theme/Layout.vue b/website/.vitepress/theme/Layout.vue
index aeac4693e6..00a53c9ada 100644
--- a/website/.vitepress/theme/Layout.vue
+++ b/website/.vitepress/theme/Layout.vue
@@ -58,12 +58,13 @@ onMounted(() => {
     getComputedStyle(document.documentElement).getPropertyValue('--vp-nav-height')
   )
 })
+const shouldShowReleasebanner = frontmatter.hideReleaseBanner || !hasSidebar
 </script>
 
 <template>
   <Layout :class="!hasSidebar ? 'nav-relative' : ''">
     <template #layout-top>
-      <template v-if="!hasSidebar">
+      <template v-if="shouldShowReleasebanner">
         <ReleaseBanner />
       </template>
     </template>
diff --git a/website/.vitepress/theme/custom.css b/website/.vitepress/theme/custom.css
index 1abade0d8b..4b442f59dd 100644
--- a/website/.vitepress/theme/custom.css
+++ b/website/.vitepress/theme/custom.css
@@ -683,10 +683,10 @@ span.no-visual {
   color: var(--vp-c-bg);
 }
 .VPButton.small {
-  border-radius: 16px;
-  padding: 0 16px;
-  line-height: 34px;
-  font-size: 13.5px;
+  border-radius: 15px;
+  padding: 0 15px;
+  line-height: 30px;
+  font-size: 13px;
 }
 .VPButton.vspace {
   margin-top: 6px;
diff --git a/website/about/contact.md b/website/about/contact.md
index 0ac0cc6c0b..302ed1bf0b 100644
--- a/website/about/contact.md
+++ b/website/about/contact.md
@@ -2,25 +2,30 @@
 title: Contact
 description: >-
   Get in touch with us by email or say hello on our community Discord.
-image: /img/about/vizinada.jpg
+image: /img/about/golden-gate-bridge.jpg
 outline: deep
 ---
 
 <figure class="page-image">
-  <a href="/img/about/vizinada.lg.jpg" class="no-visual">
-    <img src="/img/about/vizinada.jpg" />
+  <a href="/img/about/golden-gate-bridge.lg.jpg" class="no-visual">
+    <img src="/img/about/golden-gate-bridge.jpg" />
   </a>
 </figure>
 
 # Contact us
 
-ElectricSQL is a [UK registered company](https://find-and-update.company-information.service.gov.uk/company/13573370) headquartered in [Istria](https://www.istra.hr/en/explore-istria).
+ElectricSQL is a US Delaware corp headquartered in the San Francisco Bay Area.
+<span class="no-wrap">Our team</span> works across US and European timezones.
 
 Get in touch by email on [info@electric-sql.com](mailto:info@electric-sql.com) or join our [community Discord](https://discord.electric-sql.com).
 
+## Sales
+
+Contact [sales@electric-sql.com](mailto:sales@electric-sql.com).
+
 ## Press
 
-For media enquiries, please contact us on [press@electric-sql.com](mailto:press@electric-sql.com).
+Contact [press@electric-sql.com](mailto:press@electric-sql.com).
 
 ## Logos
 
diff --git a/website/cloud/usage.md b/website/cloud/usage.md
index 7f6b7e4ab5..6708fd3e68 100644
--- a/website/cloud/usage.md
+++ b/website/cloud/usage.md
@@ -79,7 +79,7 @@ Once connected you should see your source details akin to the screenshot below.
 
 <img alt="Source details in cloud dashboard" src="/static/img/docs/cloud/source-details.png" />
 
-It shouldn't take long before the source `state` becomes `active` and you're ready to make your first API request.
+When the source `state` is `active`, you're ready to make your first API request.
 
 ### Making API Requests
 
@@ -170,6 +170,18 @@ export async function GET(req: Request) {
 
 ### Pricing
 
-Electric Cloud is currently free in public BETA. We'll be launching low-cost, usage-based pricing soon (by the end of Q3 2025).
+Electric Cloud has a generous free tier and paid plans with usage limits and other features. See the [Pricing page](/pricing) for more details.
 
-Electric Cloud will always provide a generous free tier, so many apps will roll over with zero cost. If your plan is to use Electric in a larger app (more than 1,000 monthly active users) please reach out to make sure we can fully support you and to get a sense of what the future pricing will be like.
\ No newline at end of file
+### Support
+
+Let us know if you have any questions. We'll be very happy to help. You can ask questions on [Discord](https://discord.electric-sql.com) or email us directly at [sales@electric-sql.com](mailto:sales@electric-sql.com).
+
+<div class="actions cta-actions page-footer-actions left">
+  <div class="action cloud-cta">
+    <VPButton
+        href="/product/cloud/sign-up"
+        text="Sign-up for Cloud"
+        theme="brand"
+    />
+  </div>
+</div>
diff --git a/website/data/plans/accelerate.yaml b/website/data/plans/accelerate.yaml
new file mode 100644
index 0000000000..8bd7ae366d
--- /dev/null
+++ b/website/data/plans/accelerate.yaml
@@ -0,0 +1,15 @@
+name: 'Accelerate'
+order: 40
+type: service
+
+who: 'Lorem ipsum dolor sit amet'
+featuresTitle: 'Direct access'
+features:
+  - 'Lorem ipsum'
+  - 'Lorem ipsum'
+  - 'Lorem ipsum'
+
+ctaText: 'Contact sales'
+ctaHref: '/about/contact#sales'
+ctaTheme: 'alt'
+priceColor: 'ddn'
diff --git a/website/data/plans/enterprise.yaml b/website/data/plans/enterprise.yaml
new file mode 100644
index 0000000000..d2fcbc3a49
--- /dev/null
+++ b/website/data/plans/enterprise.yaml
@@ -0,0 +1,29 @@
+name: 'Enterprise'
+order: 50
+type: enterprise
+
+who: 'Lorem ipsum dolor sit amet'
+featuresTitle: 'Bespoke solutions'
+features:
+  - 'Lorem ipsum'
+  - 'Lorem ipsum'
+  - 'Lorem ipsum'
+
+limits:
+  maxDatabases: 'Unlimited'
+  streamTTL: 'Unlimited'
+
+  maxShapes: 'Unlimited'
+  maxUsersPerWorkspace: 'Unlimited'
+
+featureGates:
+  postgresSubqueries: true
+
+commitment: 'Custom'
+support: 'Custom'
+
+ctaText: 'Contact sales'
+ctaTextSmall: 'Contact'
+ctaHref: '/about/contact#sales'
+ctaTheme: 'alt'
+priceColor: 'ddn'
diff --git a/website/data/plans/payg.yaml b/website/data/plans/payg.yaml
new file mode 100644
index 0000000000..4fcfe9acbb
--- /dev/null
+++ b/website/data/plans/payg.yaml
@@ -0,0 +1,38 @@
+name: 'Pay as you go'
+order: 10
+type: tier
+
+monthlyFee: 0
+discountPercent: 0
+priceQualifier: '/ month'
+
+limits:
+  maxDatabases: 10
+  streamTTL: 'Up to 7 days'
+  maxShapes: 10000
+  maxUsersPerWorkspace: 50
+
+featureGates:
+  postgresSubqueries: false
+
+commitment: 'None'
+support: 'Community (Discord)'
+
+who: 'Developers getting started or projects with low usage'
+pricingTitle: 'Usage-based pricing'
+pricing:
+  - '$1 per 1M writes (Durable Streams)'
+  - '$3 per 1M writes (Postgres Sync)'
+  - '$0.10 per GB-month storage'
+
+featuresTitle: 'Includes'
+features:
+  - 'Up to 10 databases'
+  - '**Unlimited** Durable Streams'
+  - 'Up to 10K shapes'
+  - 'Community support (Discord)'
+
+ctaText: 'Sign up now'
+ctaTextSmall: 'Sign up'
+ctaHref: 'https://dashboard.electric-sql.cloud'
+ctaTheme: 'brand'
diff --git a/website/data/plans/pro.yaml b/website/data/plans/pro.yaml
new file mode 100644
index 0000000000..3c2041dd9d
--- /dev/null
+++ b/website/data/plans/pro.yaml
@@ -0,0 +1,41 @@
+name: 'Pro'
+order: 20
+type: tier
+
+monthlyFee: 249
+discountPercent: 10
+priceQualifier: '/ month'
+
+limits:
+  maxDatabases: 50
+  streamTTL: 'User-defined'
+  maxShapes: 100000
+  maxUsersPerWorkspace: 50
+
+featureGates:
+  postgresSubqueries: true
+
+commitment: '6 months'
+support: 'Priority email'
+
+who: 'Growing teams that need higher limits and priority support'
+pricingTitle: 'Usage-based pricing'
+pricing:
+  - '$1 per 1M writes (Durable Streams)'
+  - '$3 per 1M writes (Postgres Sync)'
+  - '$0.10 per GB-month storage'
+  - '10% discount on metered usage'
+
+featuresTitle: 'Includes'
+features:
+  - 'Up to 50 databases'
+  - '**Unlimited** Durable Streams'
+  - 'Up to 100K shapes'
+  - '6-month commitment, auto-renew'
+  - 'Early access to features'
+  - 'Priority email support'
+
+ctaText: 'Sign up now'
+ctaTextSmall: 'Sign up'
+ctaHref: 'https://dashboard.electric-sql.cloud?plan=pro'
+ctaTheme: 'brand'
diff --git a/website/data/plans/scale.yaml b/website/data/plans/scale.yaml
new file mode 100644
index 0000000000..d55609263c
--- /dev/null
+++ b/website/data/plans/scale.yaml
@@ -0,0 +1,41 @@
+name: 'Scale'
+order: 30
+type: tier
+
+monthlyFee: 1999
+discountPercent: 20
+priceQualifier: '/ month'
+
+limits:
+  maxDatabases: 'Unlimited'
+  streamTTL: 'User-defined'
+  maxShapes: 'Unlimited'
+  maxUsersPerWorkspace: 50
+
+featureGates:
+  postgresSubqueries: true
+
+commitment: '12 months'
+support: 'Direct access to founders'
+
+who: 'High-traffic products that need maximum capacity and hands-on support'
+pricingTitle: 'Usage-based pricing'
+pricing:
+  - '$1 per 1M writes (Durable Streams)'
+  - '$3 per 1M writes (Postgres Sync)'
+  - '$0.10 per GB-month storage'
+  - '20% discount on metered usage'
+
+featuresTitle: 'Includes'
+features:
+  - '**Unlimited** databases'
+  - '**Unlimited** Durable Streams'
+  - '**Unlimited** shapes'
+  - '12-month commitment, auto-renew'
+  - 'Early access to features'
+  - 'Direct access to founders'
+
+ctaText: 'Sign up now'
+ctaTextSmall: 'Sign up'
+ctaHref: 'https://dashboard.electric-sql.cloud?plan=scale'
+ctaTheme: 'brand'
diff --git a/website/data/pricing.data.ts b/website/data/pricing.data.ts
new file mode 100644
index 0000000000..7d6df36e92
--- /dev/null
+++ b/website/data/pricing.data.ts
@@ -0,0 +1,52 @@
+import fs from 'node:fs'
+import path from 'node:path'
+import { parse } from 'yaml'
+
+export default {
+  watch: [`./plans/*.yaml`, `./pricing.yaml`],
+
+  load(files) {
+    // Separate global config from plan files
+    const configFile = files.find(
+      (f) => f.endsWith(`pricing.yaml`) && !f.includes(`plans/`)
+    )
+    const planFiles = files.filter((f) => f !== configFile)
+
+    const config = parse(fs.readFileSync(configFile, `utf-8`))
+
+    const plans = planFiles
+      .map((file) => {
+        const slug = path.basename(file, `.yaml`)
+        const data = parse(fs.readFileSync(file, `utf-8`))
+
+        // Derive effective rates for tier plans (per-service write rates)
+        if (data.type === `tier` && data.discountPercent !== undefined) {
+          const discount = data.discountPercent / 100
+          data.effectiveDurableStreamsWriteRate = +(
+            config.baseRates.durableStreamsWritesPerMillion *
+            (1 - discount)
+          ).toFixed(4)
+          data.effectivePostgresSyncWriteRate = +(
+            config.baseRates.postgresSyncWritesPerMillion *
+            (1 - discount)
+          ).toFixed(4)
+          data.effectiveRetentionRate = +(
+            config.baseRates.retentionPerGBMonth *
+            (1 - discount)
+          ).toFixed(4)
+        }
+
+        return { slug, ...data }
+      })
+      .sort((a, b) => (a.order || 999) - (b.order || 999))
+
+    const tiers = plans.filter((p) => p.type === `tier`)
+    const services = plans.filter((p) => p.type === `service`)
+    const enterprise = plans.filter((p) => p.type === `enterprise`)
+    const comparisonPlans = plans.filter(
+      (p) => p.type === `tier` || p.type === `enterprise`
+    )
+
+    return { config, plans, tiers, services, enterprise, comparisonPlans }
+  },
+}
diff --git a/website/data/pricing.yaml b/website/data/pricing.yaml
new file mode 100644
index 0000000000..ef645cf728
--- /dev/null
+++ b/website/data/pricing.yaml
@@ -0,0 +1,49 @@
+# Base rates (PAYG, before any discount)
+# Postgres Sync writes carry a premium because filtering shapes is
+# significantly more compute-intensive than appending to a durable stream.
+baseRates:
+  durableStreamsWritesPerMillion: 1   # $1 per 1M durable-stream writes (baseline)
+  postgresSyncWritesPerMillion: 3     # $3 per 1M Postgres-sync writes (premium)
+  retentionPerGBMonth: 0.10           # $0.10 per GB-month (same for both services)
+
+# Write unit definition
+writeUnitSizeKB: 10 # Each write is up to 10KB; larger messages auto-chunk
+
+# PAYG waiver
+paygWaiverThreshold: 5 # Bills under $5/mo waived (display-only; authoritative billing threshold is defined in the billing system)
+
+# Calculator feature checkboxes
+# Each defines: label, description, minimumTier
+# Valid minimumTier values: payg | pro | scale (must match plan file slugs)
+calculatorFeatures:
+  - id: premiumSupport
+    label: 'Premium support'
+    description: 'Priority email support'
+    minimumTier: pro
+  - id: networkSecurity
+    label: 'Network security controls'
+    description: 'VPC peering and IP allowlists'
+    minimumTier: pro
+  - id: earlyAccess
+    label: 'Early feature access'
+    description: 'Access to beta features'
+    minimumTier: pro
+  - id: founderAccess
+    label: 'Direct access to founders'
+    description: 'Proactive hands-on support'
+    minimumTier: scale
+
+# Workload scenarios for comparison table (placeholder — human fills in real numbers)
+workloadScenarios:
+  - id: appDev
+    label: 'Typical app development'
+    description: 'Lorem ipsum dolor sit amet'
+    durableStreamsWritesPerMonth: null  # Human fills in
+    postgresSyncWritesPerMonth: null    # Human fills in
+    retentionGB: null                   # Human fills in
+  - id: aiStreaming
+    label: 'AI token streaming'
+    description: 'Lorem ipsum dolor sit amet'
+    durableStreamsWritesPerMonth: null  # Human fills in
+    postgresSyncWritesPerMonth: null    # Human fills in
+    retentionGB: null                   # Human fills in
diff --git a/website/pricing.md b/website/pricing.md
new file mode 100644
index 0000000000..379cfb60bd
--- /dev/null
+++ b/website/pricing.md
@@ -0,0 +1,408 @@
+---
+layout: home
+title: Pricing
+description: >-
+  Electric Cloud has usage-based pricing with unlimited data delivery. Pay for writes and retention, not egress.
+hideReleaseBanner: true
+---
+
+<script setup>
+import Section from './src/components/home/Section.vue'
+import PricingCard from './src/components/pricing/PricingCard.vue'
+import ComparisonTable from './src/components/pricing/ComparisonTable.vue'
+import PricingCalculator from './src/components/pricing/PricingCalculator.vue'
+import { data as pricing } from './data/pricing.data.ts'
+
+import LogoStrip from '/static/img/blog/electric-beta-release/logo-strip.svg'
+import LogoStripSm from '/static/img/blog/electric-beta-release/logo-strip.sm.svg'
+import LogoStripXs from '/static/img/blog/electric-beta-release/logo-strip.xs.svg'
+import LogoStripXxs from '/static/img/blog/electric-beta-release/logo-strip.xxs.svg'
+
+const tiers = pricing.tiers
+const services = pricing.services
+const enterprise = pricing.enterprise
+const comparisonPlans = pricing.comparisonPlans
+const config = pricing.config
+</script>
+
+<Section :actions="[]">
+  <template #title>
+    Placeholder hero title
+  </template>
+  <template #tagline>
+    Placeholder hero tagline for the
+    <a href="/product/cloud">Electric Cloud</a>
+    pricing page.
+  </template>
+  <div class="ingress-egress-illustration">
+    <p class="illustration-placeholder">[Ingress/Egress illustration — to be designed]</p>
+  </div>
+  <div class="pricing-grid">
+    <PricingCard
+      v-for="tier in tiers"
+      :key="tier.slug"
+      :plan="tier"
+    />
+  </div>
+</Section>
+
+<figure class="logo-strap">
+  <img :src="LogoStrip" class="hidden-md" />
+  <img :src="LogoStripXxs" class="block-md hidden-sm logo-strap-md" />
+  <img :src="LogoStripXxs" class="block-sm hidden-md logo-strap-sm" />
+</figure>
+
+<Section :actions="[]">
+  <template #title>Need more support?</template>
+  <template #tagline>Placeholder tagline</template>
+  <div class="support-card">
+    <div class="support-options">
+      <div class="support-option">
+        <h3>Accelerate</h3>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+      </div>
+      <div class="support-option">
+        <h3>Enterprise</h3>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+      </div>
+    </div>
+    <div class="support-cta">
+      <VPButton href="/about/contact#sales" text="Contact sales" theme="alt" />
+    </div>
+  </div>
+</Section>
+
+<div class="open-source-strap">
+  <div class="section-head">
+    <h1>Unlimited data delivery</h1>
+    <p>
+      We don't charge for egress, data delivery, fan-out, active users,
+      concurrent users, clients, connections, seats, apps, sources — or monthly
+      bills under $5/month.
+    </p>
+  </div>
+  <div class="section-head" style="margin-top: 24px;">
+    <h2 style="font-size: 1.25rem; margin-bottom: 12px;">Using existing CDN infrastructure</h2>
+    <p>
+      We uniquely can do this because we deliver real-time data through
+      existing CDN infrastructure. Using caching and request-collapsing to handle
+      concurrency at the CDN layer.
+    </p>
+  </div>
+  <div class="strap-actions">
+    <div class="action">
+      <VPButton
+        href="https://dashboard.electric-sql.cloud"
+        text="Sign up"
+        theme="brand"
+      />
+      &nbsp;
+      <VPButton
+        href="/docs/api/http"
+        text="Learn more"
+        theme="alt"
+      />
+    </div>
+  </div>
+</div>
+
+<Section :actions="[]">
+  <template #override-title>
+    <h1 id="details">
+      Compare plans
+    </h1>
+  </template>
+  <template #tagline>
+    Dive into the details to see
+    <span class="no-wrap-xs">
+      what's
+      <span class="no-wrap">
+        right for you</span></span>.
+  </template>
+  <ComparisonTable :comparisonPlans="comparisonPlans" :config="config" />
+</Section>
+
+<Section :actions="[]">
+  <template #title>
+    Model your workload
+  </template>
+  <template #tagline>
+    Use our calculator to find the right plan<span class="hidden-sm">
+      for your&nbsp;workload</span>.
+  </template>
+  <PricingCalculator />
+</Section>
+
+<div class="open-source-strap">
+  <div class="section-head">
+    <h1>Get in touch</h1>
+    <p>
+      Let's chat
+      <span class="hidden-sm">
+        through your requirements and
+      </span>
+      <span class="inline-sm">
+        to
+      </span>
+      <span class="no-wrap-sm">
+        see
+        <span class="no-wrap-xs">
+          how we can&nbsp;help</span></span>.
+    </p>
+  </div>
+  <div class="strap-actions">
+    <div class="action">
+      <VPButton
+        href="/about/contact#sales"
+        text="Contact sales"
+        theme="brand"
+      />
+      &nbsp;
+      <VPButton
+          href="https://discord.electric-sql.com"
+          text="Ask on Discord"
+          theme="alt"
+      />
+    </div>
+  </div>
+</div>
+
+<Section :actions="[]">
+  <template #title>Frequently asked questions</template>
+  <div class="faq-list">
+    <details class="faq-item">
+      <summary>Lorem ipsum question one?</summary>
+      <p>Lorem ipsum answer one. Placeholder content to be replaced.</p>
+    </details>
+    <details class="faq-item">
+      <summary>Lorem ipsum question two?</summary>
+      <p>Lorem ipsum answer two. Placeholder content to be replaced.</p>
+    </details>
+    <details class="faq-item">
+      <summary>Lorem ipsum question three?</summary>
+      <p>Lorem ipsum answer three. Placeholder content to be replaced.</p>
+    </details>
+    <details class="faq-item">
+      <summary>Lorem ipsum question four?</summary>
+      <p>Lorem ipsum answer four. Placeholder content to be replaced.</p>
+    </details>
+    <details class="faq-item">
+      <summary>Lorem ipsum question five?</summary>
+      <p>Lorem ipsum answer five. Placeholder content to be replaced.</p>
+    </details>
+  </div>
+</Section>
+
+<style>
+  @supports (overflow: clip) {
+    @media (max-width: 959px) {
+      .Layout {
+        /* Enables sticky header support for the comparison table */
+        overflow-x: clip !important;
+      }
+    }
+  }
+</style>
+
+<style scoped>
+.pricing-grid {
+  margin: 40px 0 40px;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 24px;
+  align-items: start;
+}
+
+@media (max-width: 805px) and (min-width: 530px) {
+  .pricing-grid {
+    grid-template-columns: 1fr 1fr;
+    gap: 22px;
+  }
+}
+
+@media (max-width: 529px) {
+  .pricing-grid {
+    grid-template-columns: 1fr;
+    gap: 24px;
+  }
+}
+
+.page-section {
+  padding: 10px 0;
+}
+
+.page-section:has(.comparison-table) {
+  padding-top: 50px;
+}
+
+.open-source-strap {
+  margin: 50px -400px 50px;
+  padding: 90px 400px 106px;
+  background: var(--vp-sidebar-bg-color);
+}
+
+.open-source-strap .section-head {
+  max-width: 725px;
+}
+
+.open-source-strap .section-head h1 {
+  margin-bottom: 16px;
+}
+
+.open-source-strap .section-head p {
+  margin: 10px 0 !important;
+  color: var(--vp-c-text-2);
+  font-weight: 500;
+}
+
+.strap-actions {
+  margin-top: 24px;
+  display: flex;
+  justify-content: flex-start;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+
+@media (max-width: 959px) {
+  .page-section {
+    padding: 5px 0;
+  }
+
+  .page-section:has(.comparison-table) {
+    padding-top: 40px;
+  }
+
+  .open-source-strap {
+    margin: 50px -48px 60px;
+    padding: 80px 48px 70px;
+    text-align: center;
+  }
+
+  .open-source-strap .section-head {
+    text-align: center;
+    max-width: 635px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .strap-actions {
+    justify-content: center;
+  }
+}
+
+.logo-strap {
+  margin-top: 40px;
+  margin-bottom: 40px;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+.logo-strap-md,
+.logo-strap-sm {
+  width: 100%;
+  margin: 0 auto;
+}
+.logo-strap-md {
+  max-width: 384px;
+}
+.logo-strap-sm {
+  max-width: 320px;
+}
+
+.ingress-egress-illustration {
+  margin: 40px 0;
+  padding: 40px;
+  background: rgba(255, 255, 255, 0.03);
+  border: 0.5px solid rgba(255, 255, 255, 0.05);
+  border-radius: 12px;
+  text-align: center;
+}
+
+.illustration-placeholder {
+  color: var(--vp-c-text-3);
+  font-style: italic;
+}
+
+.support-card {
+  margin: 40px 0;
+  padding: 40px;
+  background: rgba(255, 255, 255, 0.03);
+  border: 0.5px solid rgba(255, 255, 255, 0.05);
+  border-radius: 12px;
+}
+
+.support-options {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 40px;
+  margin-bottom: 32px;
+}
+
+.support-option h3 {
+  font-size: 1.25rem;
+  font-weight: 650;
+  color: var(--vp-c-text-1);
+  margin-bottom: 12px;
+}
+
+.support-option p {
+  font-size: 0.875rem;
+  color: var(--vp-c-text-2);
+  line-height: 1.6;
+}
+
+.support-cta {
+  text-align: center;
+}
+
+@media (max-width: 639px) {
+  .support-options {
+    grid-template-columns: 1fr;
+    gap: 24px;
+  }
+}
+
+.faq-list {
+  margin: 40px 0;
+}
+
+.faq-item {
+  background: rgba(255, 255, 255, 0.03);
+  border: 0.5px solid rgba(255, 255, 255, 0.05);
+  border-radius: 8px;
+  margin-bottom: 12px;
+  overflow: hidden;
+}
+
+.faq-item summary {
+  padding: 16px 20px;
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+  cursor: pointer;
+  list-style: none;
+}
+
+.faq-item summary::-webkit-details-marker {
+  display: none;
+}
+
+.faq-item summary::before {
+  content: "+";
+  display: inline-block;
+  width: 20px;
+  font-weight: 400;
+  color: var(--vp-c-text-3);
+}
+
+.faq-item[open] summary::before {
+  content: "\2212";
+}
+
+.faq-item p {
+  padding: 0 20px 16px 40px;
+  font-size: 0.875rem;
+  color: var(--vp-c-text-2);
+  line-height: 1.6;
+}
+</style>
diff --git a/website/public/img/about/golden-gate-bridge.jpg b/website/public/img/about/golden-gate-bridge.jpg
new file mode 100644
index 0000000000..9be98e0d9f
Binary files /dev/null and b/website/public/img/about/golden-gate-bridge.jpg differ
diff --git a/website/public/img/about/golden-gate-bridge.lg.jpg b/website/public/img/about/golden-gate-bridge.lg.jpg
new file mode 100644
index 0000000000..1ebe40cc31
Binary files /dev/null and b/website/public/img/about/golden-gate-bridge.lg.jpg differ
diff --git a/website/src/components/SiteFooter.vue b/website/src/components/SiteFooter.vue
index fe50fac8fe..7b44d040f5 100644
--- a/website/src/components/SiteFooter.vue
+++ b/website/src/components/SiteFooter.vue
@@ -194,12 +194,7 @@
         License.
         <span class="no-wrap">
           © {{ new Date().getFullYear() }}
-          <a
-            href="https://find-and-update.company-information.service.gov.uk/company/13573370"
-            target="_blank"
-          >
-            Electric DB Limited</a
-          >.
+          Electric DB Inc.
         </span>
       </p>
     </div>
diff --git a/website/src/components/pricing/ComparisonTable.vue b/website/src/components/pricing/ComparisonTable.vue
new file mode 100644
index 0000000000..32124460ad
--- /dev/null
+++ b/website/src/components/pricing/ComparisonTable.vue
@@ -0,0 +1,567 @@
+<script setup>
+const { comparisonPlans, config } = defineProps(['comparisonPlans', 'config'])
+
+function formatNumber(num) {
+  if (typeof num === 'string') return num
+  if (num >= 1000000000) {
+    const value = num / 1000000000
+    return value % 1 === 0 ? value + 'B' : value.toFixed(1) + 'B'
+  }
+  if (num >= 1000000) {
+    const value = num / 1000000
+    return value % 1 === 0 ? value + 'M' : value.toFixed(1) + 'M'
+  }
+  if (num >= 1000) {
+    const value = num / 1000
+    return value % 1 === 0 ? value + 'K' : value.toFixed(1) + 'K'
+  }
+  return num.toString()
+}
+
+function formatLimitValue(val) {
+  if (typeof val === 'string') return val
+  return new Intl.NumberFormat('en-US').format(val)
+}
+
+function formatCurrency(amount, suffix) {
+  // Strip trailing zeros: $1/1M, $0.9/1M, $0.08/GB-mo
+  const str = amount % 1 === 0
+    ? '$' + amount
+    : '$' + parseFloat(amount.toFixed(4))
+  return str + suffix
+}
+
+function formatCheck(val) {
+  return val ? '\u2713' : '\u2014'
+}
+
+function formatFee(plan) {
+  if (plan.type === 'enterprise') return 'Custom'
+  if (typeof plan.monthlyFee === 'number') {
+    return new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: 'USD',
+      maximumFractionDigits: 0,
+    }).format(plan.monthlyFee)
+  }
+  return '\u2014'
+}
+
+function formatDiscount(plan) {
+  if (plan.type === 'enterprise') return 'Custom'
+  if (!plan.discountPercent) return '\u2014'
+  return plan.discountPercent + '%'
+}
+
+function formatDurableStreamsWriteRate(plan) {
+  if (plan.type === 'enterprise') return 'Custom'
+  return formatCurrency(plan.effectiveDurableStreamsWriteRate, '/1M')
+}
+
+function formatPostgresSyncWriteRate(plan) {
+  if (plan.type === 'enterprise') return 'Custom'
+  return formatCurrency(plan.effectivePostgresSyncWriteRate, '/1M')
+}
+
+function formatRetentionRate(plan) {
+  if (plan.type === 'enterprise') return 'Custom'
+  return formatCurrency(plan.effectiveRetentionRate, '/GB-mo')
+}
+
+function getCommitment(plan) {
+  return plan.commitment || '\u2014'
+}
+
+function getSupport(plan) {
+  return plan.support || '\u2014'
+}
+
+function getLimitValue(plan, key) {
+  if (!plan.limits) return '\u2014'
+  const val = plan.limits[key]
+  if (val === undefined || val === null) return '\u2014'
+  return formatLimitValue(val)
+}
+
+function getFeatureGate(plan, key) {
+  if (!plan.featureGates) return '\u2014'
+  return formatCheck(plan.featureGates[key])
+}
+
+function computeScenarioCost(plan, scenario) {
+  if (scenario.writesPerMonth === null || scenario.retentionGB === null) return '...'
+  if (plan.type === 'enterprise') return 'Custom'
+  const dsWrites = scenario.durableStreamsWritesPerMonth || 0
+  const pgWrites = scenario.postgresSyncWritesPerMonth || 0
+  const writeCost =
+    (dsWrites / 1000000) * plan.effectiveDurableStreamsWriteRate +
+    (pgWrites / 1000000) * plan.effectivePostgresSyncWriteRate
+  const retentionCost = scenario.retentionGB * plan.effectiveRetentionRate
+  const total = writeCost + retentionCost
+  return new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: 'USD',
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 2,
+  }).format(total)
+}
+</script>
+
+<template>
+  <div class="comparison-table">
+    <div class="table-header">
+      <div class="metric-column header-spacer"></div>
+      <div v-for="plan in comparisonPlans" :key="plan.slug" class="plan-column">
+        <div class="plan-name">{{ plan.name }}</div>
+        <VPButton
+          :href="plan.ctaHref"
+          :text="plan.ctaText"
+          :theme="plan.ctaTheme"
+          size="small"
+          class="cta-large"
+        />
+        <VPButton
+          :href="plan.ctaHref"
+          :text="plan.ctaTextSmall || plan.ctaText"
+          :theme="plan.ctaTheme"
+          size="small"
+          class="cta-small"
+        />
+      </div>
+    </div>
+
+    <!-- Group 1: Pricing -->
+    <div class="section first-section">
+      <div class="section-header">
+        <div class="section-title-wrapper">
+          <div class="section-title">Pricing</div>
+          <div class="section-tagline">
+            Usage-based pricing with volume discounts on higher tiers.
+          </div>
+        </div>
+        <div v-for="plan in comparisonPlans" :key="plan.slug" class="plan-column"></div>
+      </div>
+      <div class="metric-row">
+        <div class="metric-column metric-label">Monthly fee</div>
+        <div class="plan-column">
+          <div v-for="plan in comparisonPlans" :key="plan.slug" class="metric-value" :data-plan="plan.name">{{ formatFee(plan) }}</div>
+        </div>
+      </div>
+      <div class="metric-row">
+        <div class="metric-column metric-label">Usage discount</div>
+        <div class="plan-column">
+          <div v-for="plan in comparisonPlans" :key="plan.slug" class="metric-value" :data-plan="plan.name">{{ formatDiscount(plan) }}</div>
+        </div>
+      </div>
+      <div class="metric-row">
+        <div class="metric-column metric-label">Durable Streams writes</div>
+        <div class="plan-column">
+          <div v-for="plan in comparisonPlans" :key="plan.slug" class="metric-value" :data-plan="plan.name">{{ formatDurableStreamsWriteRate(plan) }}</div>
+        </div>
+      </div>
+      <div class="metric-row">
+        <div class="metric-column metric-label">Postgres Sync writes</div>
+        <div class="plan-column">
+          <div v-for="plan in comparisonPlans" :key="plan.slug" class="metric-value" :data-plan="plan.name">{{ formatPostgresSyncWriteRate(plan) }}</div>
+        </div>
+      </div>
+      <div class="metric-row">
+        <div class="metric-column metric-label">Retention</div>
+        <div class="plan-column">
+          <div v-for="plan in comparisonPlans" :key="plan.slug" class="metric-value" :data-plan="plan.name">{{ formatRetentionRate(plan) }}</div>
+        </div>
+      </div>
+      <div class="metric-row">
+        <div class="metric-column metric-label">Commitment</div>
+        <div class="plan-column">
+          <div v-for="plan in comparisonPlans" :key="plan.slug" class="metric-value" :data-plan="plan.name">{{ getCommitment(plan) }}</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Group 2: Limits & Features -->
+    <div class="section">
+      <div class="section-header">
+        <div class="section-title-wrapper">
+          <div class="section-title">Limits &amp; features</div>
+          <div class="section-tagline">
+            Resource limits and feature availability by plan.
+          </div>
+        </div>
+        <div v-for="plan in comparisonPlans" :key="plan.slug" class="plan-column"></div>
+      </div>
+      <div class="metric-row">
+        <div class="metric-column metric-label">Max databases</div>
+        <div class="plan-column">
+          <div v-for="plan in comparisonPlans" :key="plan.slug" class="metric-value" :data-plan="plan.name">{{ getLimitValue(plan, 'maxDatabases') }}</div>
+        </div>
+      </div>
+      <div class="metric-row">
+        <div class="metric-column metric-label">Max shapes</div>
+        <div class="plan-column">
+          <div v-for="plan in comparisonPlans" :key="plan.slug" class="metric-value" :data-plan="plan.name">{{ getLimitValue(plan, 'maxShapes') }}</div>
+        </div>
+      </div>
+      <div class="metric-row">
+        <div class="metric-column metric-label">Early access to features</div>
+        <div class="plan-column">
+          <div v-for="plan in comparisonPlans" :key="plan.slug" class="metric-value" :data-plan="plan.name">{{ getFeatureGate(plan, 'postgresSubqueries') }}</div>
+        </div>
+      </div>
+      <div class="metric-row">
+        <div class="metric-column metric-label">Support</div>
+        <div class="plan-column">
+          <div v-for="plan in comparisonPlans" :key="plan.slug" class="metric-value" :data-plan="plan.name">{{ getSupport(plan) }}</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Group 3: Workload Scenarios (placeholder) -->
+    <div v-if="config && config.workloadScenarios && config.workloadScenarios.length" class="section">
+      <div class="section-header">
+        <div class="section-title-wrapper">
+          <div class="section-title">Workload scenarios</div>
+          <div class="section-tagline">
+            Estimated monthly usage cost for typical workloads.
+          </div>
+        </div>
+        <div v-for="plan in comparisonPlans" :key="plan.slug" class="plan-column"></div>
+      </div>
+      <div v-for="scenario in config.workloadScenarios" :key="scenario.id" class="metric-row">
+        <div class="metric-column metric-label">{{ scenario.label }}</div>
+        <div class="plan-column">
+          <div v-for="plan in comparisonPlans" :key="plan.slug" class="metric-value" :data-plan="plan.name">{{ computeScenarioCost(plan, scenario) }}</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="cta-row">
+      <div class="metric-column"></div>
+      <div v-for="plan in comparisonPlans" :key="plan.slug" class="plan-column">
+        <VPButton
+          :href="plan.ctaHref"
+          :text="plan.ctaText"
+          :theme="plan.ctaTheme"
+          size="small"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.comparison-table {
+  margin: 40px 0;
+  background: rgba(255, 255, 255, 0.015);
+  border: 1.5px solid rgba(255, 255, 255, 0.08);
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+@media (max-width: 959px) {
+  .comparison-table {
+    overflow: visible;
+    position: relative;
+  }
+}
+
+.table-header {
+  display: grid;
+  grid-template-columns: 2fr repeat(4, 1fr);
+  border-bottom: 1.5px solid rgba(255, 255, 255, 0.08);
+  background: var(--vp-sidebar-bg-color);
+}
+
+.table-header .metric-column {
+  padding: 16px 14px 24px 20px;
+}
+
+.table-header .plan-column {
+  padding: 16px 14px 14px;
+  border-left: 1.5px solid rgba(255, 255, 255, 0.08);
+}
+
+.header-spacer {
+  grid-column: 1;
+}
+
+.plan-name {
+  font-size: 1.15rem;
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+  text-align: center;
+}
+
+.section {
+  border-top: 1.5px solid rgba(255, 255, 255, 0.08);
+}
+
+.first-section {
+  border-top: none;
+}
+
+.section:nth-child(odd) {
+  background: rgba(255, 255, 255, 0.0375);
+}
+
+.section-header {
+  display: grid;
+  grid-template-columns: 2fr repeat(4, 1fr);
+}
+
+.section-header .section-title-wrapper {
+  padding: 16px 16px 12px 16px;
+}
+
+.section-header .section-title {
+  font-size: 1.075rem;
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+  margin-bottom: 10px;
+}
+
+.section-header .section-tagline {
+  font-size: 0.775rem;
+  color: var(--vp-c-text-3);
+  line-height: 1.5;
+  max-width: 700px;
+}
+
+.section-header .plan-column {
+  padding: 10px;
+  border-left: 1.5px solid rgba(255, 255, 255, 0.08);
+}
+
+.metric-row {
+  display: grid;
+  grid-template-columns: 2fr 4fr;
+  border-top: 1.5px solid rgba(255, 255, 255, 0.08);
+}
+
+.metric-row:first-of-type {
+  border-top: none;
+}
+
+.metric-row .metric-column {
+  padding: 10px 14px 10px 16px;
+  text-align: left;
+}
+
+.metric-row:last-child .metric-column {
+  padding-bottom: 14px;
+}
+
+.metric-row .plan-column {
+  padding: 0;
+  border-left: 1.5px solid rgba(255, 255, 255, 0.08);
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 0;
+}
+
+.metric-row .plan-column .metric-value {
+  padding: 10px;
+  text-align: center;
+  border-left: 1.5px solid rgba(255, 255, 255, 0.08);
+}
+
+.metric-row .plan-column .metric-value:first-child {
+  border-left: none;
+}
+
+.metric-value {
+  font-size: 0.875rem;
+  color: var(--vp-c-text-1-5);
+  font-weight: 500;
+}
+
+.metric-label {
+  font-size: 0.875rem;
+  color: var(--vp-c-text-1);
+  font-weight: 500;
+}
+
+.cta-row {
+  display: grid;
+  grid-template-columns: 2fr repeat(4, 1fr);
+  border-top: 1.5px solid rgba(255, 255, 255, 0.1);
+}
+
+.cta-row .metric-column {
+  padding: 18px 14px 22px;
+}
+
+.cta-row .plan-column {
+  padding: 18px 14px 22px;
+  border-left: 1.5px solid rgba(255, 255, 255, 0.08);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+@media (max-width: 959px) {
+  .table-header {
+    display: flex;
+    width: 100%;
+    gap: 0;
+    position: -webkit-sticky;
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    background: var(--vp-sidebar-bg-color);
+    padding: 0;
+    border-bottom: 1.5px solid rgb(45, 45, 49);
+    border-radius: 12px 12px 0 0;
+  }
+
+  .table-header .header-spacer {
+    display: none;
+  }
+
+  .table-header .plan-column {
+    flex: 1;
+    padding: 0;
+    border-left: none;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .table-header .plan-name {
+    font-size: 0.95rem;
+    font-weight: 600;
+    text-align: center;
+    padding: 14px 8px 12px;
+  }
+
+  .table-header .plan-column .VPButton {
+    display: inline-flex;
+    margin: 0 0 19px;
+  }
+
+  .table-header .plan-column .cta-small {
+    display: none;
+  }
+
+  .first-section {
+    border-top: none;
+  }
+
+  .cta-row {
+    display: none;
+  }
+}
+
+@media (max-width: 759px) {
+  .table-header .plan-column .cta-large {
+    display: none;
+  }
+
+  .table-header .plan-column .cta-small {
+    display: inline-flex;
+  }
+
+  .section-header .section-tagline {
+    max-width: 450px;
+  }
+  .metric-value {
+    color: var(--vp-c-text-1-5);
+  }
+}
+
+@media (min-width: 960px) {
+  .table-header .plan-column .cta-large,
+  .table-header .plan-column .cta-small {
+    display: none;
+  }
+}
+
+@media (max-width: 959px) {
+  .section-header {
+    display: block;
+    border-bottom: none;
+  }
+
+  .section-header .section-title-wrapper {
+    padding: 18px 16px 16px;
+  }
+
+  .section-header .section-title {
+    font-size: 1rem;
+    margin-bottom: 8px;
+  }
+
+  .section-header .section-tagline {
+    font-size: 0.75rem;
+  }
+
+  .section-header .plan-column {
+    display: none;
+  }
+
+  .metric-row {
+    display: block;
+    border-width: 1px;
+  }
+
+  .metric-row .metric-column {
+    padding: 0;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  }
+
+  .metric-row .metric-label {
+    font-weight: 550;
+    font-size: 0.85rem;
+    padding: 12px 16px;
+    display: block;
+  }
+
+  .metric-row .plan-column {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 0;
+    padding: 0;
+    border-left: none;
+  }
+
+  .metric-row .plan-column .metric-value {
+    text-align: center;
+    padding: 10px 6px;
+    border-left: 1px solid rgba(255, 255, 255, 0.08);
+  }
+
+  .metric-row .plan-column .metric-value:first-child {
+    border-left: none;
+  }
+
+  .metric-row .plan-column .metric-value::before {
+    display: none;
+  }
+
+  .cta-row {
+    display: none;
+  }
+}
+
+@media (max-width: 639px) {
+  .table-header .plan-column:nth-child(5) {
+    display: none;
+  }
+
+  .section-header .plan-column:nth-child(5) {
+    display: none;
+  }
+
+  .metric-row .plan-column {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  .metric-row .plan-column .metric-value:nth-child(4) {
+    display: none;
+  }
+
+  .cta-row .plan-column:nth-child(5) {
+    display: none;
+  }
+}
+</style>
diff --git a/website/src/components/pricing/PricingCalculator.vue b/website/src/components/pricing/PricingCalculator.vue
new file mode 100644
index 0000000000..46d05f85c9
--- /dev/null
+++ b/website/src/components/pricing/PricingCalculator.vue
@@ -0,0 +1,449 @@
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { data as pricing } from '../../../data/pricing.data.ts'
+
+const config = pricing.config
+const tiers = pricing.tiers
+
+const PLAN_HIERARCHY = ['payg', 'pro', 'scale']
+
+// Validate calculator features at dev time
+onMounted(() => {
+  if (import.meta.env.DEV && config.calculatorFeatures) {
+    const slugs = tiers.map(t => t.slug)
+    for (const feature of config.calculatorFeatures) {
+      if (!slugs.includes(feature.minimumTier)) {
+        console.warn(`[PricingCalculator] Feature "${feature.id}" has minimumTier "${feature.minimumTier}" which doesn't match any loaded plan slug (${slugs.join(', ')})`)
+      }
+    }
+  }
+})
+
+// Inputs (per-service write volumes)
+const dsWritesPerMonth = ref(5000000)
+const pgWritesPerMonth = ref(5000000)
+const retentionGB = ref(50)
+
+// Feature checkbox state: { [featureId]: boolean }
+const featureChecks = ref(
+  Object.fromEntries((config.calculatorFeatures || []).map(f => [f.id, false]))
+)
+
+// Currency formatter
+const currencyFmt = new Intl.NumberFormat('en-US', {
+  style: 'currency',
+  currency: 'USD',
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 2,
+})
+
+function safeVal(v) {
+  const n = Number(v)
+  return (isNaN(n) || n < 0) ? 0 : n
+}
+
+// Compute costs for all tiers
+const tierCosts = computed(() => {
+  const dsW = safeVal(dsWritesPerMonth.value)
+  const pgW = safeVal(pgWritesPerMonth.value)
+  const r = safeVal(retentionGB.value)
+
+  return tiers.map(tier => {
+    const dsWriteCost = (dsW / 1000000) * tier.effectiveDurableStreamsWriteRate
+    const pgWriteCost = (pgW / 1000000) * tier.effectivePostgresSyncWriteRate
+    const writeCost = dsWriteCost + pgWriteCost
+    const retentionCost = r * tier.effectiveRetentionRate
+    const usageCost = writeCost + retentionCost
+
+    let totalCost
+    let waived = false
+    if (tier.slug === 'payg') {
+      if (usageCost < config.paygWaiverThreshold) {
+        totalCost = 0
+        waived = true
+      } else {
+        totalCost = usageCost
+      }
+    } else {
+      totalCost = Math.max(usageCost, tier.monthlyFee)
+    }
+
+    return {
+      tier,
+      dsWriteCost,
+      pgWriteCost,
+      writeCost,
+      retentionCost,
+      usageCost,
+      totalCost,
+      waived,
+    }
+  })
+})
+
+// Find minimum tier required by feature checkboxes
+const featureMinTierIndex = computed(() => {
+  let maxIndex = 0
+  for (const feature of (config.calculatorFeatures || [])) {
+    if (featureChecks.value[feature.id]) {
+      const idx = PLAN_HIERARCHY.indexOf(feature.minimumTier)
+      if (idx > maxIndex) maxIndex = idx
+    }
+  }
+  return maxIndex
+})
+
+// Recommended result
+const recommendation = computed(() => {
+  // Find cheapest tier
+  let best = tierCosts.value[0]
+  for (const tc of tierCosts.value) {
+    if (tc.totalCost < best.totalCost) {
+      best = tc
+    }
+  }
+
+  // Bump up if feature checkboxes require a higher tier
+  const bestIndex = PLAN_HIERARCHY.indexOf(best.tier.slug)
+  const requiredIndex = featureMinTierIndex.value
+  if (requiredIndex > bestIndex) {
+    best = tierCosts.value[requiredIndex]
+  }
+
+  return best
+})
+
+const formattedTotal = computed(() => {
+  return currencyFmt.format(recommendation.value.totalCost)
+})
+
+const breakdownText = computed(() => {
+  const r = recommendation.value
+  if (r.waived) return 'Under $5 \u2014 waived'
+  const w = currencyFmt.format(r.writeCost)
+  const ret = currencyFmt.format(r.retentionCost)
+  const total = currencyFmt.format(r.usageCost)
+  return `Writes: ${w} + Retention: ${ret} = ${total}`
+})
+
+const writeBreakdownText = computed(() => {
+  const r = recommendation.value
+  if (r.waived) return ''
+  const ds = currencyFmt.format(r.dsWriteCost)
+  const pg = currencyFmt.format(r.pgWriteCost)
+  return `Streams: ${ds} + Postgres Sync: ${pg}`
+})
+
+const planNote = computed(() => {
+  const r = recommendation.value
+  if (r.tier.slug === 'payg') return ''
+  const fee = currencyFmt.format(r.tier.monthlyFee)
+  if (r.usageCost <= r.tier.monthlyFee) {
+    return `The base plan cost of ${fee}, with no additional usage charges`
+  }
+  const extra = currencyFmt.format(r.usageCost - r.tier.monthlyFee)
+  return `The base plan cost of ${fee}, plus an additional ${extra} in usage fees`
+})
+</script>
+
+<template>
+  <div class="calculator-container">
+    <div class="calculator-inputs">
+      <div class="input-group">
+        <label class="input-label">
+          Durable Streams writes / month
+          <input
+            v-model.number="dsWritesPerMonth"
+            type="number"
+            class="input-field"
+            min="0"
+            step="1000000"
+          />
+        </label>
+      </div>
+      <div class="input-group">
+        <label class="input-label">
+          Postgres Sync writes / month
+          <input
+            v-model.number="pgWritesPerMonth"
+            type="number"
+            class="input-field"
+            min="0"
+            step="1000000"
+          />
+        </label>
+      </div>
+      <div class="input-group">
+        <label class="input-label">
+          Data retention (GB-months)
+          <input
+            v-model.number="retentionGB"
+            type="number"
+            class="input-field"
+            min="0"
+            step="10"
+          />
+        </label>
+      </div>
+      <div class="toggles-section">
+        <label v-for="feature in config.calculatorFeatures" :key="feature.id" class="toggle-label">
+          <input
+            v-model="featureChecks[feature.id]"
+            type="checkbox"
+            class="toggle-input"
+          />
+          <span class="toggle-text">{{ feature.label }}</span>
+        </label>
+      </div>
+    </div>
+    <div class="calculator-result">
+      <div :class="`result-content result-content-${recommendation.tier.ctaTheme}`">
+        <div class="result-header">
+          <h4 class="result-label">Recommended plan</h4>
+          <h2 :class="`result-plan-name result-plan-name-${recommendation.tier.ctaTheme}`">{{ recommendation.tier.name }}</h2>
+        </div>
+        <div class="result-pricing">
+          <div class="result-price">{{ formattedTotal }}</div>
+          <div class="result-period">/ month</div>
+        </div>
+        <div v-if="breakdownText" class="result-breakdown">{{ breakdownText }}</div>
+        <div v-if="writeBreakdownText" class="result-breakdown">{{ writeBreakdownText }}</div>
+        <div v-if="planNote" class="result-note">{{ planNote }}</div>
+        <div class="result-cta">
+          <VPButton
+            :href="recommendation.tier.ctaHref"
+            :text="recommendation.tier.ctaText"
+            theme="brand"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.calculator-container {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 40px;
+  margin: 40px 0;
+  padding: 40px;
+  background: rgba(255, 255, 255, 0.03);
+  border: 0.5px solid rgba(255, 255, 255, 0.05);
+  border-radius: 12px;
+}
+
+.calculator-inputs {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.calculator-title {
+  font-size: 1.5rem;
+  font-weight: 650;
+  color: var(--vp-c-text-1);
+  margin: 0;
+}
+
+.calculator-description {
+  font-size: 0.95rem;
+  color: var(--vp-c-text-2);
+  margin: 0;
+  line-height: 1.5;
+}
+
+.input-group {
+  display: flex;
+  flex-direction: column;
+}
+
+.input-label {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--vp-c-text-2);
+  margin-bottom: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.input-field {
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 6px;
+  padding: 9px 12px;
+  font-size: 0.875rem;
+  color: var(--vp-c-text-1);
+  font-family: inherit;
+  transition: border-color 0.2s, background 0.2s;
+}
+
+.input-field:focus {
+  outline: none;
+  border-color: var(--electric-color);
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.toggles-section {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-top: 0px;
+}
+
+.toggles-title {
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+  margin: 0 0 8px 0;
+}
+
+.toggle-label {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  cursor: pointer;
+  padding: 8px 0;
+}
+
+.toggle-input {
+  width: 18px;
+  height: 18px;
+  cursor: pointer;
+  accent-color: var(--electric-color);
+}
+
+.toggle-text {
+  font-size: 0.875rem;
+  color: var(--vp-c-text-2);
+  user-select: none;
+}
+
+.calculator-result {
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding-top: 20px;
+}
+
+.result-content {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 12px;
+  padding: 32px;
+  width: 100%;
+  text-align: center;
+}
+.result-content-brand {
+  border: 1px solid var(--electric-color);
+}
+.result-content-alt {
+  border: 1px solid var(--ddn-color);
+}
+
+.result-header {
+  margin-bottom: 20px;
+}
+
+.result-label {
+  font-size: 0.825rem;
+  font-weight: 500;
+  color: var(--vp-c-text-3);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin: 0;
+  line-height: 1.5;
+}
+
+.result-plan-name {
+  font-size: 2.25rem;
+  font-weight: 700;
+  margin: 0;
+}
+.result-plan-name-brand {
+  color: var(--electric-color);
+}
+.result-plan-name-alt {
+  color: var(--ddn-color);
+}
+
+.result-pricing {
+  margin-bottom: 16px;
+  display: flex;
+  align-items: baseline;
+  justify-content: center;
+  gap: 6px;
+}
+
+.result-price {
+  font-size: 2rem;
+  font-weight: 700;
+  color: var(--vp-c-text-1);
+  line-height: 1;
+}
+
+.result-period {
+  font-size: 1.1rem;
+  color: var(--vp-c-text-2);
+  font-weight: 500;
+}
+
+.result-breakdown {
+  font-size: 0.8rem;
+  color: var(--vp-c-text-3);
+  margin-bottom: 8px;
+  line-height: 1.5;
+}
+
+.result-note {
+  font-size: 0.8rem;
+  color: var(--vp-c-text-3);
+  margin-bottom: 24px;
+  line-height: 1.5;
+  font-style: italic;
+}
+
+.result-cta {
+  display: flex;
+  justify-content: center;
+}
+
+@media (max-width: 759px) {
+  .calculator-container {
+    grid-template-columns: 1fr;
+    gap: 24px;
+    padding: 32px 24px;
+  }
+
+  .calculator-result {
+    order: -1;
+    padding-top: 0;
+  }
+
+  .calculator-inputs {
+    gap: 12px;
+  }
+
+  .toggles-section {
+    gap: 4px;
+  }
+}
+
+@media (max-width: 529px) {
+  .calculator-container {
+    padding: 24px 20px;
+  }
+
+  .result-content {
+    padding: 24px 20px;
+  }
+
+  .result-plan-name {
+    font-size: 1.75rem;
+  }
+
+  .result-price {
+    font-size: 2rem;
+  }
+}
+</style>
diff --git a/website/src/components/pricing/PricingCard.vue b/website/src/components/pricing/PricingCard.vue
new file mode 100644
index 0000000000..302671af12
--- /dev/null
+++ b/website/src/components/pricing/PricingCard.vue
@@ -0,0 +1,145 @@
+<script setup>
+const { plan } = defineProps(['plan'])
+
+const priceColorVar = (plan.priceColor === 'ddn') ? 'var(--ddn-color)' : 'var(--electric-color)'
+
+function formatPrice(p) {
+  if (p.type === 'enterprise') return 'Custom'
+  if (p.type === 'service') return ''
+  if (typeof p.monthlyFee === 'number') {
+    return new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: 'USD',
+      maximumFractionDigits: 0,
+    }).format(p.monthlyFee)
+  }
+  return ''
+}
+
+function renderBold(text) {
+  return text.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
+}
+</script>
+
+<template>
+  <div class="pricing-card">
+    <div class="card-header">
+      <h3 class="card-name">{{ plan.name }}</h3>
+      <div class="card-price">
+        <span class="price-amount" :style="{ color: priceColorVar }">{{ formatPrice(plan) }}</span>
+        <span v-if="plan.priceQualifier" class="price-qualifier">{{ plan.priceQualifier }}</span>
+      </div>
+    </div>
+    <div class="card-content">
+      <div v-if="plan.who" class="card-who">
+        <slot name="who">For {{ plan.who }}</slot>
+      </div>
+      <div v-if="plan.pricing && plan.pricing.length" class="card-features">
+        <div v-if="plan.pricingTitle" class="features-title">
+          {{ plan.pricingTitle }}
+        </div>
+        <div v-for="item in plan.pricing" :key="item" class="feature-item">
+          <span v-html="renderBold(item)"></span>
+        </div>
+      </div>
+      <div v-if="plan.features && plan.features.length" class="card-features">
+        <div v-if="plan.featuresTitle" class="features-title">
+          {{ plan.featuresTitle }}
+        </div>
+        <div v-for="feature in plan.features" :key="feature" class="feature-item">
+          <a v-if="feature === 'Higher usage limits'" href="#details">{{ feature }}</a>
+          <span v-else v-html="renderBold(feature)"></span>
+        </div>
+      </div>
+    </div>
+    <div class="card-footer">
+      <VPButton
+        :href="plan.ctaHref"
+        :text="plan.ctaText"
+        :theme="plan.ctaTheme || 'brand'"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.pricing-card {
+  background: rgba(255, 255, 255, 0.03);
+  border: 0.5px solid rgba(255, 255, 255, 0.05);
+  border-radius: 12px;
+  padding: 32px 30px;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.card-header {
+  margin-bottom: 24px;
+}
+
+.card-name {
+  font-size: 1.4rem;
+  font-weight: 650;
+  margin: 2px 0 16px 0;
+  color: var(--vp-c-text-1);
+}
+
+.card-price {
+  display: flex;
+  align-items: baseline;
+  gap: 4px;
+}
+
+.price-amount {
+  font-size: 2rem;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.price-qualifier {
+  font-size: 1rem;
+  color: var(--vp-c-text-3);
+  font-weight: 500;
+}
+
+.card-content {
+  flex: 1;
+  margin-bottom: 24px;
+}
+
+.card-who {
+  font-size: 0.875rem;
+  color: var(--vp-c-text-1-5);
+  line-height: 1.5;
+  margin-bottom: 24px;
+}
+
+.card-features {
+  margin-top: 0;
+}
+
+.features-title {
+  font-size: 0.7rem;
+  font-weight: 600;
+  color: var(--vp-c-text-3);
+  margin-bottom: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.feature-item {
+  font-size: 0.875rem;
+  color: var(--vp-c-text-1-5);
+  margin-bottom: 8px;
+  line-height: 1.4;
+  font-weight: 400;
+}
+
+.card-footer {
+  margin-top: 6px;
+  margin-bottom: 6px;
+}
+</style>