The conversion principle and the surfaces that apply it (advisor, /out gateway, provider plan cards, provider template). NOTE: the provider-template section shipped the TrustScore hero, but its Jul 21 tweak — open the score breakdown by default + swap the assessment/pricing sections — has NOT shipped (live to-do, owned by the provider-redesign worker).
Consolidated from conversion-principle-dream-and-proof.md · status: active
One line, two placements. It governs every conversion surface on the site — the advisor, the /out gateway, provider plan cards, pricing sections, and the FAQ objection bucket.
The two are a pair: doubt is answered with proof on the way to the price, where the dream closes.
| Surface | Where the price is (→ dream) | Where the doubt is (→ proof) |
|---|---|---|
Advisor (homepage-advisor-hero) | stepPrice currently just lists plans — lead it with the use-case outcome (the gatewayFacts/verdictMetric already written per use-case) before the number. Copy the free use-case's "risk-free upgrade" pattern. | The blocker question is the doubt. Wire real proof into REASSURE — speed → Speed Lab RANK; trust → audit + auditor; any → the provider's trust score + rating/review count (data already on each provider object). |
/out gateway | The interstitial before the affiliate jump — restate the dream (the use-case benefit) beside the offer, not just "continue". | Guarantee + rank + rating as the proof strip. |
| Provider plan cards | planCheck reassurance → make it the outcome ("unbuffered 4K across every region"), not the feature. | Trust score, rank, audit date near the price. |
| FAQ objection bucket | — | Every objection answer = proof (rank / study / audit / guarantee), per faq-authoring-rules.md Rule 3. |
Provenance-safe, verifiable — this is what "proof" means here (never "we tested / N Mbps", per faq-authoring-rules.md Rule 4):
getSpeedLabData()): "ranks #1 of 22."methodology.md).The use-case outcome, already written in use-cases.ts (gatewayFacts, verdictMetric) and use-case-stats.ts (before/after):
If either answer is "just a claim / just a cost," the surface isn't done.
Consolidated from hero-trustscore-redesign.md · status: done
Replace the provider-hero's three separate pills (VPN.com trust score → #our-assessment, Apple rating, Google rating) plus the standalone <StoreReviews> row with ONE unified, beautiful component that combines real-user proof + our editorial score, and lets a click drill into per-metric scores. Fixes the "3 pills feel like 3 sections" + "Nord looks off" concerns. Fable-specced 2026-07-14.
Provider.astro:267–282 renders: a trust-score pill (→ #our-assessment, "a lot of reading"), then a separate StoreReviews variant="detailed" row. Three same-weight pills competing; reviews disconnected from the score; the assessment section is a wall of text with no per-metric entry point.
New src/components/TrustScore.astro — a capsule + expandable breakdown panel + inline script.
rounded-pill capsule, two cells + divider (same shell as today's pill, so the hero language consolidates rather than changes):
App Store · Google Play. This attribution is mandatory — the raw "Rated 4.6 on average" copy over-claims (it's app-store data, not VPN.com reviews → review-site FTC/E-E-A-T risk).VPN.com Trust Score + score /100 + tier word (reuse provider.exceptional/excellent/veryGood/good, existing ≥90/≥80/≥70 thresholds) + chevron.<button aria-expanded aria-controls>. Click (NO hover-open — a11y/touch trap) expands an in-flow panel below it (no popover/focus-trap needed). Panel = up to 6 metric rows, each an <a href="#assessment-{id}"> with a progress-bar (fill width = score%, colored by the existing chipColor thresholds: ≥0.85 success, 0.65–0.85 heading-neutral, <0.65 discount). Footer: "Read the full assessment →".#assessment-speed, Servers→#assessment-network, Security & Privacy→#assessment-security, Streaming→#assessment-streaming, Ease of Use→#assessment-ease, Trust & Value→#assessment-trust. Add these ids + scroll-margin-top:5.5rem to the six review-card articles in ProviderReview.astro. Omit any metric whose card won't render (e.g. speedTested===false) — never a bar to a missing anchor.New src/data/assessment-scores.ts — shared derivation of the six section scores, imported by BOTH TrustScore.astro and ProviderReview.astro so hero bars and assessment cards can't drift. Returns { id, labelKey, score, max, anchor }[] from rating.categories + speedTested.
Modified Provider.astro — swap lines 267–282 for <TrustScore lang={lang} … />. StoreReviews.astro stays (gateway/picker use it); only the hero usage is removed.
Fallbacks (the all-providers/Nord consistency fix): no store ratings → right cell only; no rating → left cell only, non-interactive; never an empty capsule.
trust.breakdownTitle ("Score breakdown"), trust.toggleHint ("View score breakdown", visually-hidden), trust.readFull ("Read the full assessment →", RTL-flip arrow for ar/fa). Metric labels + tier words reuse existing keys. App Store · Google Play = hardcoded brand names (not translated). No em dashes in any translation.
assessment-scores.ts first; refactor ProviderReview.astro to consume it (scores byte-identical before/after — snapshot a page to confirm).scroll-margin-top on the six cards.npm run build, translation-qa.mjs, a11y-audit.mjs (the disclosure button/panel is new axe surface), keyboard pass (Tab/Enter/Escape), RTL /fa/ spot-check, dark mode.Status: parked, ready to build on green-light.