feat(pricing): single-row plans, relocate Arc/Cloud strip, simplify TCO (po-6sc)

- Remove ProductLines (Arc/Cloud disambiguation) from /pricing; relocate the
  canonical framing to a new docs page (/docs/products) + sidebar entry, plus an
  unobtrusive "Not sure which product?" link on pricing.
- Make all 5 plans fit one row on desktop: 5-col grid at lg, tighter card padding
  and price typography; sm 2-col, mobile stacked.
- Replace the per-competitor TCO table with a generic CostSavings section
  ("Customers report a 50-80% reduction") — no vendor names, no table.

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

Author: anuveyatsu

site/components/CostSavings.tsx

@@ -0,0 +1,52 @@
+import { useEffect, useRef } from 'react'
+import posthog from 'posthog-js'
+
+// Generic, high-level cost message (po-6sc §3). Replaces the per-competitor TCO table
+// (TcoComparison) — no vendor names, no figures table. Framed as "reported" / "typically"
+// to stay credible. Named comparisons live only on the dedicated /compare pages.
+export default function CostSavings() {
+  const ref = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const el = ref.current
+    if (!el || typeof IntersectionObserver === 'undefined') return
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            try {
+              posthog.capture('pricing_cost_savings_view')
+            } catch (_) {
+              /* never let analytics break the page */
+            }
+            observer.disconnect()
+          }
+        })
+      },
+      { threshold: 0.4 }
+    )
+    observer.observe(el)
+    return () => observer.disconnect()
+  }, [])
+
+  return (
+    <section
+      ref={ref}
+      className="mx-auto max-w-3xl px-4 sm:px-6 lg:px-12 mt-24 text-center"
+    >
+      <h2 className="text-3xl font-bold tracking-tight text-slate-900 dark:text-white sm:text-4xl">
+        Same job. A fraction of the invoice.
+      </h2>
+      <p className="mx-auto mt-6 text-2xl font-semibold tracking-tight text-slate-900 dark:text-white sm:text-3xl">
+        Customers report a{' '}
+        <span className="text-blue-600 dark:text-blue-400">50–80% reduction</span>{' '}
+        in total cost.
+      </p>
+      <p className="mx-auto mt-4 text-[17px] leading-relaxed text-slate-600 dark:text-slate-300">
+        Open-source economics change the math: no per-dataset caps, no quota
+        licensing, no license fees. You typically pay only for hosting,
+        compliance, and support — not for the right to publish your own data.
+      </p>
+    </section>
+  )
+}

site/components/PricingPlans.tsx

@@ -265,7 +265,7 @@ export default function PricingPlans() {
         </p>
       )}
 
-      <main className="relative mx-auto mt-10 grid max-w-md grid-cols-1 gap-y-8 lg:-mb-14 lg:max-w-none lg:grid-cols-2 custom:grid-cols-5 gap-3 px-1 dark:px-0">
+      <main className="relative mx-auto mt-10 grid max-w-md grid-cols-1 gap-y-8 lg:-mb-14 lg:max-w-none sm:grid-cols-2 lg:grid-cols-5 gap-3 px-1 dark:px-0">
         <div
           className="hidden lg:absolute lg:inset-x-px lg:bottom-0 lg:top-4 lg:block lg:rounded-2xl"
           aria-hidden="true"
@@ -306,7 +306,7 @@ export default function PricingPlans() {
                   {tier.badge}
                 </span>
               )}
-              <div className="p-8 lg:pt-12 xl:p-8 xl:pt-14 flex flex-col flex-1">
+              <div className="p-5 pt-10 lg:pt-12 flex flex-col flex-1">
                 <h3 id={tier.id} className="text-xl font-bold leading-6">
                   {tier.title}
                 </h3>
@@ -327,9 +327,9 @@ export default function PricingPlans() {
                 </h4>
 
                 <div className="flex flex-col gap-4 sm:justify-between lg:flex-col lg:items-stretch">
-                  <div className="flex items-center gap-x-4 min-h-[70px] sm:-mt-2">
+                  <div className="flex items-center gap-x-3 min-h-[70px] sm:-mt-2">
                     <p className="text-2xl xl:text-xl semi-bold tracking-tight">
-                      <span className="text-4xl font-bold tracking-tight">
+                      <span className="text-3xl xl:text-4xl font-bold tracking-tight">
                         {priceValue}
                       </span>
                     </p>

site/components/ProductLines.tsx

@@ -23,6 +23,10 @@
         "title": "Core concepts",
         "href": "/docs/core-concepts"
       },
+      {
+        "title": "PortalJS vs Arc vs Cloud",
+        "href": "/docs/products"
+      },
       {
         "title": "Architecture decision framework",
         "href": "/docs/architecture/decision-framework"

site/components/TcoComparison.tsx

@@ -0,0 +1,63 @@
+---
+metatitle: PortalJS vs Arc vs Cloud – Which product is which?
+metadescription: PortalJS is the open-source framework; PortalJS Arc is the default managed layer (zero-infra, edge-served portals); PortalJS Cloud is a managed CKAN backend you attach to Arc when a program needs heavy cataloging. How the three fit together.
+title: PortalJS vs Arc vs Cloud
+description: One open-source framework, two managed layers. How PortalJS, PortalJS Arc, and PortalJS Cloud fit together — and which one you actually need.
+---
+
+There are three names in the PortalJS world — **PortalJS**, **PortalJS Arc**, and
+**PortalJS Cloud**. Most of the time you only need to know one of them. This page
+explains what each is and how they layer, so you can pick without second-guessing.
+
+> [!info] Short version
+> **PortalJS** is the open-source framework (own the code, host anywhere).
+> **PortalJS Arc** is the default managed way to run it (zero-infra, edge-served).
+> **PortalJS Cloud** is a managed CKAN backend you *attach* to Arc when a program
+> needs heavy cataloging infrastructure. Start on Arc; add Cloud only if you need it.
+
+## One framework, two managed layers
+
+| Product          | What it is                       | When you want it                                                                 |
+| ---------------- | -------------------------------- | -------------------------------------------------------------------------------- |
+| **PortalJS**     | Open-source framework            | You want to own the code and host anywhere. Free forever, MIT licensed.          |
+| **PortalJS Arc** | The default managed layer        | You want a portal live without running infrastructure — AI-built, edge-served, in-browser querying. |
+| **PortalJS Cloud** | Managed backend (CKAN)         | Your program needs a heavy cataloging backend. Attach it to any Arc portal — same frontend, no rebuild. |
+
+### PortalJS — the framework
+
+The open-source project: a lightweight Next.js + Tailwind + React template plus a set
+of agentic skills. Own every line, host it anywhere, pay nothing. See
+[Get started](/docs/quickstart) and [/opensource](/opensource).
+
+### PortalJS Arc — the default managed layer
+
+Zero-infra managed portals: [`/portaljs-deploy`](/docs/skills/portaljs-deploy) builds a
+static export and serves it from Cloudflare's edge, with in-browser querying over your
+data. It's the default way to run PortalJS when you don't want to manage servers. See
+[PortalJS Arc](/docs/arc).
+
+Architecturally, Arc is the **publish / explore / share** layer that sits on top of a
+compute+storage backend. Its built-in zero-infra stack (object storage on R2, edge
+hosting, client-side DuckDB-Wasm compute) covers the self-serve and small-to-mid case
+with nothing to provision. When data outgrows the browser, the compute backend is
+pluggable behind the same catalog UX.
+
+### PortalJS Cloud — the managed backend
+
+A managed **CKAN** backend for programs that need heavy cataloging infrastructure. You
+don't start here — you *attach* it to an Arc portal when a program needs it, keeping the
+same frontend with no rebuild. See [Backends](/docs/backends) for how PortalJS stays
+decoupled from whatever catalog you run.
+
+## How they compose
+
+```
+PortalJS (open-source framework)
+   └── run it your way:
+        ├── self-host anywhere            (free)
+        └── PortalJS Arc  (managed, default)
+              └── attach PortalJS Cloud   (managed CKAN backend) — only if you need it
+```
+
+Start on Arc. Attach a managed CKAN backend (Cloud) when your program needs one — same
+frontend, no rebuild. For plans and pricing, see [Pricing](/pricing).

site/content/assets/docs-sidebar.json

@@ -1,7 +1,6 @@
 import Layout from '@/components/Layout'
 import PricingPlans from '@/components/PricingPlans'
-import ProductLines from '@/components/ProductLines'
-import TcoComparison from '@/components/TcoComparison'
+import CostSavings from '@/components/CostSavings'
 import AddOns from '@/components/AddOns'
 import { generateNextSeo } from 'next-seo/pages';
 import Head from 'next/head';
@@ -48,9 +47,17 @@ export default function Pricing() {
                 Our plans cover all ranges of budgets and needs
               </p>
             </div>
-            <ProductLines />
             <PricingPlans />
-            <TcoComparison />
+            <p className="mx-auto mt-8 lg:mt-24 text-center text-[15px] text-slate-600 dark:text-slate-300">
+              Not sure which product?{' '}
+              <Link
+                href="/docs/products"
+                className="text-blue-600 dark:text-blue-400 underline"
+              >
+                PortalJS vs Arc vs Cloud →
+              </Link>
+            </p>
+            <CostSavings />
           </div>
         </div>
         <div className="relative" id="addons">