Demo spec — Pricing page before/after ("Quill" docs SaaS)

Single self-contained interactive HTML file: demo.html in this folder. On-screen artifact for Act Five of the pricing script. This one is WEB pages, not phones: two browser-window mockups (rounded chrome with traffic-light dots and a URL bar reading quill.app/pricing), BEFORE on top / AFTER below on wide screens is acceptable, but PREFER side-by-side at ≥1200px (they're wide artifacts; below that, stack). Labels: "BEFORE · every tier screams equally" / "AFTER · structure does the selling".

The app

"Quill" — collaborative docs for design teams. Clean editorial identity: ivory/white background inside pages, ink-navy text, one teal accent (#0D9488-ish), subtle serif for the logo wordmark, sans for UI. Premium B2B feel.

BEFORE page (sins only from our real audit sample — Sana/Runner patterns)

Header "Pricing" + countdown banner: "Offer ends in 04:59" (ticking, resets — same easter egg as the paywall demo)
FOUR tier cards, equal visual weight, REVERSE order (most expensive first): Scale $95.99/mo · Team $47.99/mo · Starter $23.99/mo · Free $0
No highlight, no badge, no billing toggle (tiny footnote: "annual billing available")
Differentiation via vague multipliers: "5x more usage", "14x more usage" — no definition
Enterprise buried in a text line at the bottom: "Need more? Give it a run →"
All monthly prices, charm endings everywhere Interactions: cards hover/click-select (nothing else changes — that's the point; a small tooltip on selection: "…and then what?")

AFTER page

Header "Pricing" + one line: "Simple per-seat pricing. No surprises."
Billing toggle, ANNUAL DEFAULT: [Monthly | Annual ·Save 20%·] — functional: switching updates every price on the page
THREE tier cards + one "Contact sales" card (visually lighter, rightmost):
Personal — Free · "For personal projects"
Pro — $12/seat/mo (annual) · $15 monthly · "For growing teams" · highlighted card, raised, teal border, badge "Most popular"
Business — $24/seat/mo (annual) · $30 monthly · "For organizations"
Contact sales — "Custom" · "Security reviews, SSO, dedicated support"
Annual state shows under each paid price: "billed annually — $144/seat" with honest strikethrough of the monthly-math total "~~$180~~" on Pro (12×15) and "~~$360~~ $288" on Business
A seat stepper on the Pro card (1–50): updates a live line "3 seats → $36/mo, billed $432/yr" (real math, both states)
Under the cards: 5-row feature comparison table (real differentiators: docs, guests, version history, SSO, audit log)
NO countdown, NO fake urgency Interactions: toggle + stepper + card selection all functional and consistent (selection updates a subtle "Continue with Pro →" bar).

Annotation layer

"Show annotations" toggle (default ON). Numbered pins matching Act Five: 1 structure/order (4-equal-reversed → 3+middle highlight), 2 the anchor (buried enterprise → visible Contact sales + honest strikethrough), 3 the default (monthly-first → annual default, Save 20%), 4 the digits ($23.99 → $12 round per-seat), 5 the pressure (countdown + "5x usage" → audience labels). Pin cards cite ONLY these stats, verbatim: - Same dress at $34/$39/$44: the $39 outsold the $34 (Anderson & Simester 2003 field experiments) - Real-estate experts' appraisals moved $7,379 by a fake listing price — and their reports "flatly denied" using it (Northcraft & Neale 1987) - Two cameras split 50/50; adding a $470 premium model moved the middle camera to 57% (Simonson & Tversky 1992) - Decoy effect with real/pictured products: 0 significant effects in 27 studies (Frederick, Lee & Baskin 2014) - Crossing $4.99→$5.00 hits demand like a 20-cent increase across 78M price observations (Strulov-Shlain 2023) - Our audit (n=60 top SaaS pricing pages, Aug 2026): 49% use only round prices; 83% of highlighted tiers sit in an interior position; 63% of toggles default to annual; countdown urgency appears on just 5%

Footer

"Built for the Build With Kris video 'The $39 Dress That Outsold the $34 One' — sources in the video description." Scoreboard: BEFORE — honest anchors 0 · pressure tactics 2 | AFTER — honest anchors 3 · pressure tactics 0.

Craft bar

Fully self-contained, system fonts + one @font-face-free serif fallback stack for the wordmark (e.g. Georgia), inline SVG only, responsive, premium. Page chrome adapts to prefers-color-scheme; the mockup pages stay light (editorial product). All arithmetic shown must be correct in both toggle states.