# SRM Flagship Reverse Mortgage Landing Page — Design

**Date:** 2026-07-18
**Author:** Tyler Plack (via opencode brainstorming session)
**Status:** Approved for implementation planning

## Goal

One unified flagship reverse-mortgage landing page that synthesizes the proven winners from South River Mortgage's 10 existing IQ/landing variants into a single page that maximizes form-completion rate. Sits at a standalone URL (e.g. `/landing/flagship/` or a fresh path), wires into the existing `srm-instant-quote-backend.php` endpoint via `fetch()`.

Primary metric: **form completion rate** (qualified lead submissions / unique page views).
Secondary metrics: DNQ capture rate, insufficient-equity rescue uptake, scroll depth on long-form sections.

## Non-goals

- Phone OTP verification (per decision — fast submit over lead-quality gates; LO verifies downstream).
- Replacing the existing 10 variants (this is additive — flagship URL, others remain).
- New backend work (reuses existing `?action=lead`, `?action=unqualified_lead`, `?action=track_click`, `?action=social_proof_count`, `?action=quote`).
- WordPress theme integration (standalone HTML — no WP dependency, no jQuery).

## Stack

- **Standalone HTML5 + CSS + vanilla JS.** No jQuery, no WordPress, no framework.
- Self-contained single file (`index.html`) with inline `<style>` and `<script>` — or split into `index.html` / `styles.css` / `app.js`. Decide during planning; inline is simpler for one page.
- Fonts: Google Fonts (Inter + Plus Jakarta Sans), loaded with `preconnect` + `display=swap`.
- Icons: inline SVG (no icon font dependency).
- Phone validation: `libphonenumber-js` (ESM from CDN or vendored).
- Confetti: `canvas-confetti` from CDN.
- Wires into existing PHP backend at `https://southrivermortgage.com/wp-content/themes/south-river-mortgage-wp/srm-instant-quote-backend.php` (configurable via a `window.SRM_ENV.backend_url` constant).

## Brand system (locked from existing theme)

### Colors (CSS variables at `:root`)

| Token | Hex | Usage |
|---|---|---|
| `--srm-navy` | `#142F57` | Primary — hero bg, header, footer, form section bg |
| `--srm-blue` | `#3B7ADE` | Accent — progress bar, slider fill, table headers, focus ring `rgba(59,122,222,0.15)` |
| `--srm-blue-2` | `#2E5EB1` | Secondary blue — hover, gradient end |
| `--srm-amber` | `#F4B000` | Primary CTA pill — buttons, highlight numerals |
| `--srm-amber-hover` | `#FFD35E` | CTA hover state |
| `--srm-green` | `#5EBF40` | Trust — "SECURE" badge, success check icons, social-proof dots |
| `--srm-slate` | `#475569` | Body subtext on light bg |
| `--srm-muted` | `#8A96A9` | Muted paragraph text |
| `--ink` | `#0b2240` | Headings + body ink on light bg |
| `--soft` | `#FAFBFC` | Soft section background |
| `--ring` | `#E2E8F0` | Input borders on light bg |
| `--error` | `#ff474c` | Invalid input border + message |

### Typography

- **Headings (`h1`–`h6`):** `"Plus Jakarta Sans", Arial, Helvetica, sans-serif`, weight 800, letter-spacing `-0.01em`.
- **Body, inputs, buttons:** `"Inter", Arial, Helvetica, sans-serif`, weights 400/500/600/800.
- Fluid scale with `clamp()`:
  - `--font-h1: clamp(32px, 6vw, 54px)`
  - `--font-h2: clamp(26px, 4vw, 42px)`
  - `--font-h3: clamp(20px, 2.5vw, 30px)`
  - `--font-body: clamp(18px, 2vw, 20px)`
  - `--font-small: 14px`
- Hero h1 weight 900.

### Buttons / CTAs

- **Primary CTA pill** (used everywhere — hero continue, submit, bottom CTA):
  - `background: var(--srm-amber)`, `color: #08132A`, `border-radius: 9999px`, `padding: 0.9rem 1.25rem`, `font-weight: 800`, `letter-spacing: 0.04em`, `text-transform: uppercase`, `font-size: 14px`.
  - Hover: `background: var(--srm-amber-hover)`, `transform: translateY(-1px)`, `box-shadow: 0 4px 12px rgba(244,176,0,0.3)`.
  - Active: `transform: translateY(0)`.
- **Secondary CTA** (ghost on navy): white border, white text, transparent bg.
- **Header phone CTA**: white bg, navy text, `border-radius: 6px`, `border: 2px solid #fff`, `padding: 12px 18px`. Phone: `(844) 230-6679`.

### Form-field style

- Height: 56px (desktop), 48px (mobile, `--touch`).
- Border: `1.5px solid var(--ring)` on light, `1.273px solid rgba(255,255,255,0.2)` on navy.
- Background: `#fff` on light, `rgba(196,203,215,0.10)` on navy.
- Text: `var(--ink)` on light, white on navy.
- Border radius: 12px.
- Padding: `0 16px`.
- Focus: `border-color: var(--srm-blue)`, `box-shadow: 0 0 0 4px rgba(59,122,222,0.15)`.
- Invalid: `border-color: var(--error)`, shake animation `@keyframes shake`.
- `<select>`: native appearance + custom chevron.
- Range sliders: custom — `--srm-blue` fill, `#ddd` track, 24px circular thumb, `box-shadow: 0 2px 8px rgba(46,94,177,0.4)`. Bubble tooltip above thumb shows formatted value.
- SECURE badge: `<span class="secure"><svg lock-icon></svg> SECURE</span>` absolutely positioned right of each PII input.

## Page architecture

12 sections, top to bottom. Always-on overlays are independent of the section stack.

### Section 1 — Sticky header (slim)

- Position: `sticky; top: 0; z-index: 100`.
- Background: `rgba(20, 47, 87, 0.96)` with `backdrop-filter: blur(8px)`.
- Left: SRM logo (white variant `logo-2.svg` for dark bg, 140px wide).
- Right: phone link `(844) 230-6679` (amber) + amber pill "Get Quote" (scrolls to form anchor).
- Mobile: hamburger hidden — phone + "Get Quote" only. No nav menu (PPC pattern — fewer leaks).
- Shrinks on scroll (logo 140px → 100px, padding 16px → 10px).

### Section 2 — Hero + 5-step form (above the fold)

- Background: `linear-gradient(135deg, #142F57 0%, #2E5EB1 100%)`. Height: `min(100vh, 900px)` desktop, auto mobile.
- Layout: single column, max-width 760px, centered. Form is the hero — no separate hero image.
- **Hero block:**
  - Trust pill above H1: `● Many Americans started their quote in the last 24h` — green dot, white text, `font-size: 13px`. Live count fetched from `?action=social_proof_count` (no state arg — global count, floor 12).
  - H1: `Get Your <span class="underline-amber">Free</span> Reverse Mortgage Quote` — `font-size: var(--font-h1)`, weight 900, white, hand-drawn amber SVG underline on "Free" (borrowed from conversion-optimized).
  - Subhead: `See your estimate in under 60 seconds. No SSN, no credit check, 100% free.` — Inter 500, 18px, `rgba(255,255,255,0.85)`.
- **Form block (5 steps):** See "Form wizard" section below.
- Below the form (still above fold on desktop): trust badge strip (BBB A+ · NMLS #1854524 · FHA-approved · Equal Housing Lender · 4.8★ from 2,500+ families) — inline SVG icons + text, white text on navy, 14px.

### Section 3 — Press-logo marquee

- Background: white. Padding: 32px 0.
- Label: `AS FEATURED ON` — 12px, letter-spacing 0.1em, `--srm-muted`.
- Auto-scrolling row of 3 SVG logos: HousingWire · Fox 5 · Yahoo Finance. (Omit CBS 17 + ABC 8 per existing homepage convention.)
- Pause on hover. CSS-only marquee (no JS).
- Scroll: `@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }` 30s linear infinite, duplicate the logo row for seamless loop.

### Section 4 — Stats band (4 cards)

- Background: `var(--srm-navy)`. Padding: 64px 0.
- 4-column grid desktop, 2-column mobile. Each card:
  - Big number in amber `--srm-amber`, weight 800, `font-size: clamp(32px, 4vw, 48px)`.
  - Label below in white, 14px, `letter-spacing: 0.04em`, uppercase.
- Cards: `98% Approval Rate` · `15,000+ Homeowners Helped` · `200+ Dedicated Employees` · `38 Years in Business`. (Same content as landing-page-long.php — **verify these numbers are still accurate before deploy**; if any are stale, update or replace with current SRM stats.)

### Section 5 — "What you can do with a reverse mortgage"

- Background: `var(--soft)`. Padding: 80px 0.
- H2: `Access the hidden equity inside your home` with amber SVG underline.
- Intro paragraph: 2-3 sentences, `--srm-slate`, 18px.
- 6-pill grid (3×2 desktop, 2×3 tablet, 1×6 mobile): each pill is a white card with blue icon, 16px label.
  - Federally insured
  - Access equity
  - No monthly payments
  - Stay in your home
  - Keep your deed
  - Financial safety nets

### Section 6 — Testimonials (5 review cards)

- Background: white. Padding: 80px 0.
- H2: `What our customers say` (amber underline on "customers").
- 5-card grid: 3 across desktop, 2 across tablet, 1 across mobile.
- Each card: 5 gold stars (`#FFD700`) · review text (italic, `--srm-slate`) · reviewer name + city + date closed.
- Sample reviewers (from landing-page-long.php): Mary L. (Annapolis, 2024), John B. (Baltimore, 2023), Carol P. (Arlington, 2024), Harold G. (Richmond, 2023), Susan F. (Trenton, 2024).
- "Read more reviews" link → `https://southrivermortgage.com/reviews/`.

### Section 7 — Video testimonial (Mrs. Jones)

- Background: `var(--srm-navy)`. Padding: 80px 0.
- 16:9 video player, max-width 800px, centered. Poster image + play button overlay.
- Caption below: `"And there's still going to be money left for my sons."` — Mrs. Jones, Maryland homeowner.
- Video asset: existing `images/Jones_2_video.m4v` from the theme directory — copy to the flagship's `/assets/` folder. **Falls back gracefully** — if asset missing, section collapses (CSS `:empty` or JS check) and testimonials section bumps up.
- Lazy-load: `<video preload="none">`, only load on first click of play button.

### Section 8 — "Here's how it works" (3-step explainer)

- Background: `var(--soft)`. Padding: 80px 0.
- H2: `Here's how it works`.
- 3-column grid, numbered cards (amber circle number + title + 1-sentence body):
  1. **Get your quote** — 60 seconds, no commitment.
  2. **Talk to a licensed specialist** — they'll walk you through the numbers.
  3. **Close in as few as 26 days** — sign and access your cash.

### Section 9 — FAQ accordion (tabbed)

- Background: white. Padding: 80px 0.
- H2: `Frequently asked questions`.
- Tab bar: `General · Savings · Taxes · Property · Referral`. Active tab = `--srm-blue` underline.
- Each tab contains 4-6 expandable questions. First 6 questions (across tabs) open by default for SEO crawl + reader momentum.
- FAQ content: copy verbatim from `home-ppc.php` FAQ section (What is a reverse mortgage, Who qualifies [age 55+, FHA guidelines], Do I still own my home, What happens if I sell, Why choose South River Mortgage [4th largest US reverse lender, 26-day avg closing]).
- Pure CSS `<details>`/`<summary>` for accordion — no JS, accessible by default.
- Tab switching: minimal JS (toggle `.active` class on tabs + tab-panes).

### Section 10 — Bottom CTA band

- Background: `var(--srm-navy)`. Padding: 100px 0.
- Centered content: H2 `Ready for your free quote?` (white, 36px) + amber pill button `Get My Free Quote →` (scrolls to top form, smooth-scroll behavior).
- Subtext: `It takes 60 seconds. No SSN, no credit check, 100% free.`

### Section 11 — Compliance footer

- Background: `rgba(11, 34, 64, 0.95)` (dark navy). Padding: 40px 20px. `border-top: 1px solid rgba(255,255,255,0.1)`.
- Centered, 13px, `color: rgba(255,255,255,0.85)`.
- Content (in order):
  1. SRM logo (white variant, 120px).
  2. Compliance line: `South River Mortgage, LLC · NMLS #1854524 · 1750 Forest Drive Suite #195, Annapolis, MD 21401`
  3. Equal Housing Lender logo (`equal-housing-lender.png`, 32px) inline.
  4. HECM disclosure: `These materials are not from HUD or FHA and were not approved by HUD or a government agency.`
  5. Links row (amber `#FFD44D`, underlined): `Licensing Information` · `Privacy Policy` · `For Licensing information, go to: www.NMLSConsumerAccess.org`
  6. Final copyright line: `© 2026 South River Mortgage, LLC. All rights reserved.`

## Form wizard (5 steps)

Single form, single screen position, multi-step. Steps toggle via `active` class. Progress bar at top of form: `--srm-blue` line, height 4px, width animates from 12% → 30% → 50% → 72% → 100%. localStorage persists state across reloads (`srm_flagship_quote_state` key). Once-per-day dedupe on submit (`srm_flagship_submitted_date`).

### Step 1 — State (progress 12%)

- Field: `<select name="state">` with all 50 states + DC, hardcoded `<option>` values (2-letter codes).
- Default: auto-detected via IP geolocation on page load. Client-side: `fetch(backend_url + '?action=geo_state')` → set `<select>.value`. Silent — no banner; user can override.
- Fallback (if geo fails): phone area code inference (built into backend's `getPPCGeoLocation`).
- Validation: required. Auto-advance on `change` event (no Continue button click needed).
- Microcopy under field: `We need your state because reverse mortgage rules vary by state.`

### Step 2 — Age (progress 30%)

- Field: `<select name="age">` with options "Less than 55" (value `54`) + 55 through 99.
- Validation: required. Auto-advance if value ≥ 55.
- **Branch if value = 54 (under 55):** reveal `inquiring_for` radio (Yes = 1 / No = 0).
  - If Yes → reveal `<select name="proxy_age">` (55-99). Required. Auto-advance.
  - If No → DNQ branch (see "DNQ handling" below).
- Microcopy: `Reverse mortgages are available to homeowners 55 and older. (In some states, 62.)`

### Step 3 — Mortgage balance (progress 50%)

- Field: `<input type="range" name="mortgage_balance" min="0" max="2000000" step="25000">`.
- UI: custom slider with value bubble tooltip (formatted `$XXX,XXX`), `+/-` steppers (±$25k), and preset chips below: `$0` · `$250k` · `$500k` · `$1M` · `I don't know`.
- "I don't know" chip → swaps slider for text input with helper copy `Best estimate is fine — we'll confirm later.` Sets hidden field `mortgage_balance_not_sure=1`.
- Validation: numeric, ≥ 0. Auto-advance on slider release (with 400ms debounce) OR Continue click (always present as fallback).
- Microcopy: `Include any mortgages, HELOCs, or liens on the property.`

### Step 4 — Home value + teaser reveal (progress 72%)

- Field: `<input type="range" name="home_value" min="0" max="2000000" step="25000">`.
- UI: same slider pattern. Presets: `$250k` · `$400k` · `$600k` · `$1M`.
- **On slider release:** compute `approximatePLF(age)` (age → PLF lookup table 0.30-0.47, same as conversion-optimized) and reveal teaser:
  > `Based on your age and home value, you may access approximately` **`$X – $Y`** `in tax-free cash.`
  - Computation: `base = home_value × PLF(age)`, `high = min(base, home_value - mortgage_balance)`, `low = high × 0.85`. Format with `$` + thousands separators. Big amber numerals.
- **Insufficient equity check:** if `mortgage_balance ≥ 0.80 × home_value` → show rescue screen (4 options, borrowed from conversion-optimized step 4-NA):
  1. **Home for Life (H4P)** — purchase a new home with a reverse mortgage. CTA → existing `/home-for-life/` page.
  2. **Free Retirement Solution guide** — email capture, Mailchimp "Free Guide" tag. Posts to `?action=mailchimp` with `extra_tags=flagship,Free Guide`.
  3. **Re-estimate with spouse** — reveal `spouse_age` select, recompute teaser.
  4. **Home-value watch** — email + threshold input. Stores to localStorage + posts to `?action=lead` with `lead_type=watch` flag (re-engage when AVM rises).
  - Each rescue option has its own micro-conversion. User can still close the rescue screen and re-enter home value to continue.
- Validation: numeric, ≥ $10,000, ≤ $10,000,000. Continue button present.
- Microcopy: `Best estimate — we'll confirm with a free appraisal later.`

### Step 5 — Contact (progress 100%)

- Fields on one screen (not three separate steps — reduces perception of length):
  - `first_name` — text, regex `^[A-Za-z\s'-]+$`, 2-30 chars, letters-only keydown filter.
  - `email` — email, regex `^[^@]+@[^@]+\.[^@]+$`. Email typo auto-suggest pill: if domain is Levenshtein-1 from a common domain (gmail/yahoo/outlook/hotmail/aol/icloud/me/live/comcast/verizon/att), show `Did you mean <suggested>?` clickable pill.
  - `phone` — `tel`, masked `(000) 000-0000` via custom mask function (no jQuery). `libphonenumber-js` validation: `parsePhoneNumberFromString(value, 'US').isValid()`. Normalize to E.164 on submit.
- SECURE badge right of each field.
- SMS consent checkbox (not required to submit):
  > `I agree that South River Mortgage, LLC may contact me by call and text at the number provided for marketing purposes. Message/data rates may apply. Reply STOP to cancel, HELP for help. Consent is not a condition of purchase. See our Privacy Policy.`
  - Inline link to `/privacy-policy/`.
- Submit button: amber pill `Get My Free Quote →`. Full width on mobile, auto width + center on desktop.
- On submit:
  1. Validate all fields. Show inline errors with red border + shake animation.
  2. POST to `backend_url + '?action=lead'` with payload (see "Lead payload" below).
  3. On success: confetti burst (canvas-confetti 2s) + completion screen.
  4. Fire dataLayer events `calc_lead_submitted`, `form_submit`, plus Google Ads conversion `AW-563882527/ZiXzCLn_ibIaEJ_U8IwC` via `gtag('event', 'conversion', {send_to: 'AW-563882527/ZiXzCLn_ibIaEJ_U8IwC'})`.
  5. Also fire `?action=mailchimp` with `extra_tags=Flagship,Online Application` (Mailchimp list `us12`, list ID `1f3861a2c2`).
  6. Also fire `?action=quote` to generate quote PDF, upload to S3, email to lead.
  7. Store `srm_flagship_submitted_date` in localStorage (date string) — once-per-day dedupe.
- Completion screen content:
  - Big checkmark icon (green).
  - `Thanks, <first_name>! Your quote is on its way.`
  - Teaser reprised: `Remember — you may access approximately` **`$X – $Y`** `in tax-free cash.`
  - `A licensed specialist will call you within 1 business day.`
  - Secondary CTA: `Want to talk sooner? Call (844) 230-6679` (amber link).

### DNQ handling (under-55, no proxy)

- Path triggered when `age = 54` and `inquiring_for = 0` (No).
- Action:
  1. POST to `backend_url + '?action=unqualified_lead'` with payload (see "DNQ payload" below).
  2. Mailchimp signup with `extra_tags=Flagship,DNQ` (so they can be re-engaged at 55).
  3. Show DNQ completion screen: `Thanks for checking! Reverse mortgages require the youngest homeowner to be 55+. We'll reach out when you're eligible.`
  4. Soft conversion: offer free guide PDF download (email already captured at step 5? No — DNQ branches before PII. Capture email here: small form `Email me when I qualify` + Mailchimp signup).
  5. NO ad conversion tracking fired (DNQ is not a qualified lead).
  6. NO quote PDF generated.

## Lead payload (`?action=lead`)

```json
POST srm-instant-quote-backend.php?action=lead
Content-Type: application/json

{
  "action": "lead",
  "state": "MD",
  "age": 67,
  "inquiring_for": 0,
  "proxy_age": null,
  "home_value": 450000,
  "mortgage_balance": 120000,
  "mortgage_balance_not_sure": 0,
  "first_name": "Tyler",
  "email": "tyler@example.com",
  "phone": "+14431234567",
  "sms_marketing_consent": 1,
  "teaser_low": 78000,
  "teaser_high": 92000,
  "funnel_path": "flagship",
  "segment": "SRM Flagship Landing Page",
  "visited_pages": ["landing/flagship (2026-07-18T10:00:00Z)"],
  "session_id": "uuid-v4",
  "submitted_at": "2026-07-18T10:01:23Z",
  "gclid": "EAIaIQ...",
  "gad_source": null,
  "gbraid": null,
  "wbraid": null,
  "fbclid": null,
  "msclkid": null,
  "fbp": "fb.1.1234567890.1234567890",
  "utm_source": "google",
  "utm_medium": "cpc",
  "utm_campaign": "reverse-mtg-brand",
  "utm_term": null,
  "utm_content": null
}
```

Backend dispatches on `action=lead` → calls `sendToDC()` → `buildDCData()` → ZeroBounce email validation (fail-open) → reverse phone append enrichment → state licensing routing (licensed → Demand Conversions queue; unlicensed → Longbridge forwarder) → local CSV log `logs/qualified-leads.csv`.

This payload matches the existing `buildDCData()` field contract exactly — no backend changes needed.

## DNQ payload (`?action=unqualified_lead`)

```json
POST srm-instant-quote-backend.php?action=unqualified_lead
Content-Type: application/json

{
  "action": "unqualified_lead",
  "email": "tyler@example.com",
  "first_name": "Tyler",
  "state": "MD",
  "age": 54,
  "age_under_55": true,
  "qualification_reason": "under_55",
  "home_value": null,
  "mortgage_balance": null,
  "segment": "SRM Flagship Landing Page - DNQ",
  "funnel_path": "flagship-dnq-under-55",
  "session_id": "uuid-v4",
  "submitted_at": "2026-07-18T10:01:23Z",
  "landing_page": "https://southrivermortgage.com/landing/flagship/",
  "referrer": "https://google.com/...",
  "client_ip": "(server-derived)",
  "user_agent": "(server-derived)",
  "gclid": null,
  "utm_source": "google"
  // ... same full attribution field list as qualified lead
}
```

Matches the existing `buildDCUnqualifiedData()` contract — no backend changes.

## Attribution / PPC wiring

- On page load (DOMContentLoaded + 100ms), auto-fire `?action=track_click` with:
  - All click IDs from URL: `gclid, gad_source, gbraid, wbraid, fbclid, msclkid`
  - `fbp` from `document.cookie` (regex `_fbp=([^;]+)`)
  - UTMs from URL or sessionStorage: `utm_source, utm_medium, utm_campaign, utm_term, utm_content`
  - `session_id` (uuid v4, stored in sessionStorage — persisted across the session)
  - `landing_page_variant` from `<meta name="landing-page-variant" content="flagship-v1">`
  - `page_url`, `referrer`, `user_agent`, browser data (screen, viewport, language, timezone, connection)
  - Use `keepalive: true` so request survives page unload.
- Click IDs are stored in localStorage (so they survive cross-session attribution) and included in the lead submission payload.
- UTMs are stored in sessionStorage (per-session attribution).

## Always-on overlays

### Exit-intent modal

- Triggers (borrowed from `js/exit-intent-iq.js`):
  - Desktop: `mouseleave` event when `e.clientY < 80` (top of viewport), 150ms delay.
  - Mobile: scroll-up past 120px then scroll-up > 50px, OR back-button press (`history.pushState`), OR 15s idle.
- Session storage key `srm_flagship_exit_shown_session` — show once per session.
- Content:
  - Green progress ring + "Hold on, you're almost there!"
  - `2,400+ homeowners quoted this month.`
  - `$96,000 average cash unlocked.`
  - Amber button `Finish My Quote →` (closes modal, scrolls to form).
  - Close X top-right.

### Social-proof popup

- Bottom-right toast on desktop, bottom full-width on mobile.
- 2.5s delay after page load, 40s auto-dismiss.
- Content: `🏠 You're in good company — <strong>X people in <state></strong> have already checked their home equity here.`
- State from `?action=geo_state`, count from `?action=social_proof_count&state=XX` (min floor 12).
- Session storage key `srm_social_proof_shown` — show once per session.

### Scroll-up sticky bar

- Hidden by default. Shows on scroll-up past 200px.
- Top of viewport, height 60px, white bg, border-bottom 1px.
- Content: `START HERE: Get cash out with a reverse mortgage` + amber pill `Check Eligibility ›` → scrolls to form.
- Close X top-right (session storage `srm_scrollup_dismissed`).

### Floating call button (mobile only)

- Fixed bottom-right, 56px circle, amber bg, white phone icon.
- Visible always on mobile (`< 768px`).
- Link: `tel:+18442306679`.
- Hidden on desktop (phone is in header).

### Mobile sticky mini-quote bar

- Bottom of viewport on mobile, height 60px.
- Shows live estimated `$X` once user has completed step 4 (home value + teaser).
- `Details` button opens slide-up sheet with teaser breakdown (low / high / age / state).
- Closes on submit or scroll-to-form.

## Conversion tactics summary (mapped to source variants)

| Tactic | Source variant | New role |
|---|---|---|
| Live trust counter (hero pill) | conversion-optimized | Hero pill above H1 |
| Sliders + presets + steppers | conversion-optimized | Steps 3 + 4 |
| Email typo auto-correct | conversion-optimized, IQ-B | Step 5 |
| Pre-PII teaser estimate | conversion-optimized, eligibility-quiz | Step 4 reveal |
| Insufficient-equity rescue (4 paths) | conversion-optimized | Step 4 NA branch |
| Phone E.164 normalize | conversion-optimized | Step 5 |
| SECURE badge | PPC-verified, IQ-B | Step 5 |
| Confetti on submit | footer.php | Step 5 success |
| Press-logo marquee | home.php | Section 3 |
| 4-card stats band | landing-page-long | Section 4 |
| 6-pill benefits grid | landing-page-long | Section 5 |
| 5-card testimonials | landing-page-long | Section 6 |
| Video testimonial | landing-page-long | Section 7 |
| 3-step explainer | landing-page-long | Section 8 |
| Tabbed FAQ accordion | home-ppc | Section 9 |
| Exit-intent modal | exit-intent-iq.js | Always-on overlay |
| Social-proof popup | social-proof-popup.js | Always-on overlay |
| Scroll-up sticky bar | footer.php | Always-on overlay |
| Floating call button | header.php | Mobile overlay |
| Mobile sticky mini-quote bar | modern | Mobile overlay |
| Once-per-day dedupe | IQ-B | All variants |
| localStorage resume | All IQ templates | Step restore on reload |
| Auto-fired `track_click` on load | ppc.js | PPC attribution |
| DNQ capture (under-55) | IQ-B | Step 2 branch |

## New vs. existing (delta from the 10 current variants)

| Aspect | Current variants | Flagship |
|---|---|---|
| Steps | 7-8 | **5** (PII consolidated, age branch absorbed) |
| Phone OTP | Some have it (ppc-verified, verified) | **None** (max conversion rate) |
| Teaser reveal | Step 6 | **Step 4** (earlier payoff) |
| "I don't know" path | None | **Yes** — step 3 mortgage balance |
| Insufficient-equity rescue | conversion-optimized only | **All traffic** — step 4 |
| Long-form content | Either IQ form OR long-form (separate pages) | **Both** — form above fold, long-form below |
| Tech | WordPress theme PHP + jQuery | **Standalone HTML + vanilla JS** |
| Files | ~10 templates | **1 page** (1 HTML + 1 CSS + 1 JS, or all inline) |

## Analytics / tracking

- GA4 measurement ID: `G-T3CXQ1C7VS` (existing). Loaded via gtag.js in `<head>`. (No GTM container ID was confirmed in the existing theme — gtag.js is used directly. If a GTM container exists, swap this line.)
- Page-type override: `data-page-type="calculator"`, `data-page-category="hecm"`.
- dataLayer events fired:
  - `page_view` (on load)
  - `calc_start` (first step interaction)
  - `step_view` (each step becomes active)
  - `form_error` (validation failure)
  - `calc_lead_submitted` (qualified submit)
  - `form_submit` (qualified submit)
  - `iq_exit_intent_shown`, `iq_exit_intent_continued`, `iq_exit_intent_dismissed`
  - `social_proof_shown`, `social_proof_dismissed`
  - `dnq_submitted` (under-55 DNQ)
  - `rescue_path_taken` (insufficient equity rescue — track which of the 4 options)
- Google Ads conversion label: `AW-563882527/ZiXzCLn_ibIaEJ_U8IwC` — fired on qualified submit only (not DNQ).
- Meta Pixel: `fbq('track', 'Lead')` on qualified submit only.

## SEO / meta

- `<title>`: `Reverse Mortgage Quote — Free, No SSN | South River Mortgage`
- `<meta name="description">`: `Get your free reverse mortgage quote in 60 seconds. No SSN, no credit check. See how much cash you can access. Licensed in 40+ states.`
- `<link rel="canonical">`: page URL.
- `<meta name="robots" content="index, follow">` (this is an organic flagship, not a PPC noindex variant).
- JSON-LD schema: `FAQPage` (wraps the FAQ accordion) + `FinancialProduct` (reverse mortgage) + `Organization` (SRM).
- Open Graph + Twitter Card meta with `og:image` pointing to a hero OG image (TBD — likely reuse `images/about-work-banner.png` or generate a new 1200×630 navy/amber hero).

## Accessibility

- All form fields have `<label>` associated via `for=`/`id`.
- All interactive elements keyboard-navigable. Slider supports arrow keys (native range input does this).
- Color contrast: navy bg + white text = 13.4:1 (WCAG AAA). Amber bg + navy ink text = 8.4:1 (WCAG AAA).
- `aria-live="polite"` on the teaser reveal area + social-proof popup + exit-intent modal.
- `aria-invalid="true"` on invalid fields, `aria-describedby` pointing to error message.
- All buttons have `:focus-visible` outlines (`2px solid var(--srm-amber)`, `2px offset`).
- FAQ uses native `<details>`/`<summary>` — works without JS.

## Performance targets

- LCP ≤ 2.5s on 4G mobile.
- FID ≤ 100ms.
- CLS ≤ 0.1 (no layout shift from slider thumbs, social proof popup, etc. — reserve space).
- JS bundle ≤ 30kb gzipped (excluding libphonenumber-js + canvas-confetti from CDN).
- Fonts: `preconnect` to Google Fonts, `font-display: swap`.
- Images: SVG (logos, icons), `<video preload="none">` (testimonials).
- No render-blocking JS.

## File structure (recommended)

```
flagship/
├── index.html              # Full page markup
├── styles.css              # All CSS (inline if preferred)
├── app.js                  # All JS (inline if preferred)
├── assets/
│   ├── logo-2.svg           # White logo (from existing theme)
│   ├── equal-housing-lender.png
│   ├── jones-testimonial.m4v   # From existing theme
│   └── hero-og.png             # New OG image (TBD)
└── README.md               # Deployment notes
```

## Deployment

- Host at `https://southrivermortgage.com/landing/flagship/` (or similar fresh URL).
- Backend URL configured via `window.SRM_ENV.backend_url = 'https://southrivermortgage.com/wp-content/themes/south-river-mortgage-wp/srm-instant-quote-backend.php'`.
- GTM container `GTM-T3CXQ1C7VS` loaded in `<head>`. **(Correction: theme uses GA4 `G-T3CXQ1C7VS` via gtag.js — load that instead. Update this line during planning.)**
- Mailchimp list ID `1f3861a2c2`, account `southrivermtg.us12`.
- No server-side changes required — reuses all existing backend endpoints.

## Open questions for implementation planning

1. Final URL path (`/landing/flagship/` vs `/instant-quote-flagship/` vs other) — decide in planning.
2. Inline `<style>`/`<script>` vs separate `styles.css`/`app.js` — inline is simpler for a single page; separate is easier to maintain. Recommend separate.
3. Host the `Jones_2_video.m4v` asset locally or stream from existing theme URL? Recommend local copy.
4. Need a new 1200×630 OG image? Use existing `about-work-banner.png` for v1, design a dedicated OG image in a follow-up.
5. A/B test plan: run flagship against the current `instant-quote-conversion-optimized` template as the A/B test champion? Or against `home-ppc.php`? Recommend conversion-optimized as the A/B baseline since it's the closest comparison.
6. Cookie consent / CCPA banner — does SRM's existing site already have one? If yes, reuse; if no, out of scope for this spec.

## Success criteria

- Form completion rate ≥ 8% (current variants reportedly range 4-7% based on observed IQ-B and conversion-optimized data).
- DNQ capture rate ≥ 25% of under-55 traffic (current variants drop these visitors entirely).
- Insufficient-equity rescue uptake ≥ 15% of near-DNQ traffic (currently near-zero — no rescue screen on most variants).
- LCP ≤ 2.5s on 4G mobile, CLS ≤ 0.1.
- Zero new backend endpoints required.
- Single deployable file/folder; no WordPress theme dependency.