From 9b656647461e7c5d513358dcd7c35d0610f0f3d2 Mon Sep 17 00:00:00 2001
From: Matthew Meszaros <meszmatew@gmail.com>
Date: Wed, 27 May 2026 05:39:06 +0000
Subject: [PATCH] site: home pricing header redesign (cards untouched)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

User said the price boxes are good but the section header above them
was bad. Only the header block changes.

- Drop the brand-soft eyebrow chip and the italic flourish on
  'Predictable.' Both read as marketing-template noise.
- New eyebrow uses the standard site mono caps style:
  'Plans · billed per mailbox' in 10.5px sky-6.
- Headline rewritten to 'Pick a volume. Get every feature.' which
  states the actual product positioning (volume-priced, not
  feature-gated) instead of a vague adjective. Two-line break on
  sm+ so the line lengths balance; reflows on mobile.
- Headline scaled up the responsive ramp (40 / 52 / 64 px) so the
  section reads as a real chapter break rather than a small subsection.
- Subhead names every product surface that's bundled (warmup, sending,
  unified inbox, analytics, CRM, API), so the reason there is one
  number is obvious.
- New trust strip under the toggle: 14-day trial, one mailbox to start,
  no credit card, cancel any time. Four short reassurances, sky-color
  checks, dot separators, no banner theater.

Edge-to-edge card grid below is byte-for-byte unchanged.
---
 site/src/pages/index.astro | 39 +++++++++++++++++++++++++++++++-------
 1 file changed, 32 insertions(+), 7 deletions(-)

diff --git a/site/src/pages/index.astro b/site/src/pages/index.astro
index 3564e0f2..71f24fb5 100644
--- a/site/src/pages/index.astro
+++ b/site/src/pages/index.astro
@@ -744,15 +744,17 @@ const plans = [
     ============================================================ -->
     <section class="relative overflow-hidden border-y border-[color:var(--border)]" style="background: linear-gradient(180deg, var(--surface-2) 0%, #ffffff 100%);">
       <div class="container-page py-24 md:py-32 relative">
-        <div class="text-center max-w-2xl mx-auto">
-          <div class="inline-flex items-center gap-2 h-7 px-3 rounded-full bg-[color:var(--brand-soft)] ring-1 ring-[color:var(--brand)]/15 mb-4">
-            <span class="text-[11px] uppercase tracking-[0.16em] text-[color:var(--brand)] font-semibold">Pricing</span>
+        <div class="text-center max-w-3xl mx-auto">
+          <div class="text-[10.5px] uppercase tracking-[0.22em] font-mono text-[#0284c7]">
+            Plans · billed per mailbox
           </div>
-          <h2 class="text-[36px] md:text-[58px] font-semibold tracking-[-0.035em] leading-[1.02] text-heading">
-            Per mailbox. <span class="italic font-medium" style="color: var(--brand)">Predictable.</span>
+
+          <h2 class="mt-4 text-[40px] sm:text-[52px] md:text-[64px] font-semibold tracking-[-0.035em] leading-[1.02] text-heading">
+            Pick a volume.<br class="hidden sm:inline" /> Get every feature.
           </h2>
-          <p class="mt-5 text-[16.5px] text-foreground/75 leading-relaxed">
-            Warmup, sending, the inbox, analytics and CRM aren't separate line items. You pay for the mailboxes you connect.
+
+          <p class="mt-6 text-[16.5px] md:text-[17.5px] text-foreground/75 leading-relaxed max-w-xl mx-auto">
+            Warmup, sending, the unified inbox, analytics, CRM and the API are in every paid plan. What you pay reflects daily send volume only.
           </p>
 
           <!-- Premium segmented billing toggle — annual is the default -->
@@ -768,6 +770,29 @@ const plans = [
               Save 20%
             </span>
           </div>
+
+          <!-- Trust strip under the toggle: reassurance without theater. -->
+          <div class="mt-7 flex flex-wrap items-center justify-center gap-x-5 gap-y-2 text-[12.5px] text-foreground/70">
+            <span class="inline-flex items-center gap-1.5">
+              <Icon name="check" size={12} class="text-[color:var(--brand)]" />
+              14-day trial
+            </span>
+            <span class="text-foreground/30">·</span>
+            <span class="inline-flex items-center gap-1.5">
+              <Icon name="check" size={12} class="text-[color:var(--brand)]" />
+              One mailbox to start
+            </span>
+            <span class="text-foreground/30">·</span>
+            <span class="inline-flex items-center gap-1.5">
+              <Icon name="check" size={12} class="text-[color:var(--brand)]" />
+              No credit card
+            </span>
+            <span class="text-foreground/30">·</span>
+            <span class="inline-flex items-center gap-1.5">
+              <Icon name="check" size={12} class="text-[color:var(--brand)]" />
+              Cancel any time
+            </span>
+          </div>
         </div>
 
         <!-- Edge-to-edge grid: cards share borders via gap-px, no per-card ring.