MemBox Website Patches — 2026-04-22 (Claude review pass)

Goal: Fix the issues identified in the site review — pricing alignment with
the "for life" positioning, duplicate hero images, broken HTML, diluted use-case
list, missing social proof, and a tightened Resources page.

Files changed (full overwrite):
  - index.html
  - resources.html
  - assets/css/styles.css   (additions appended to end — existing rules untouched)

---- Homepage (index.html) ----

Head:
  - Removed the duplicate <meta name="description"> tag (there were two,
    which confuses search engines).
  - Removed stray </meta> closing tags that were orphaning block tags.
  - Removed the three identical preload hints for heroscreenshot that all
    declared type="image/avif" while pointing to a .webp — now one correct
    preload.
  - Fixed twitter:card meta tags that were self-closed incorrectly.
  - Removed the broken in-head <script type="application/ld+json"> that
    duplicated the main structured-data block and had an outdated description.

Structural HTML bugs:
  - Removed the DUPLICATE <section id="how"> — there were two sections with
    the same id, which is invalid HTML. Kept the "4-step" version and renamed
    the detailed schedule section to id="schedule".

Hero:
  - Cut the long two-sentence subhead to one sentence: "A flashcard app built
    for word-for-word memory of the scriptures, quotes, and texts you want to
    keep for life." The detailed "how" content moved down to #schedule.
  - Replaced the three identical <img> tags in the fanned hero mock with
    three DIFFERENT screenshots (review, hero, memorize). This was the
    "duplicate screenshot" bug visible in the live site — the mocks were
    designed to show three phones but all pointed at the same file.
  - Rewrote the hero pricing microcopy to LEAD with the lifetime unlock and
    fall back to annual as the on-ramp. Monthly was removed from the hero.

New: Trust band section right after the hero with three small stat cards
("iOS / 8 / 0") — gives a quick visual anchor for credibility without
requiring real review counts yet.

New: Story preview now includes a real pull-quote card styled with a red
left rule. The "I grew up thinking I was dumb" line is now treated as the
hook it is, not a plain paragraph.

Who it's for (use-cases):
  - Trimmed from EIGHT cards (including "Tire sizes & specs", which diluted
    focus) down to FOUR stronger positions:
    1. Scripture & sacred texts
    2. Quotes & speeches
    3. Language learners
    4. Names, dates & the details of a life
  - Rewrote each card's microcopy to be emotionally specific rather than
    generic "keep X at your fingertips" phrasing.

NEW: Dedicated Pricing section (#pricing) with three cards:
  - Lifetime unlock $24.99 CAD — marked as "Hero offer" with a blue border,
    lifted card, and a "Hero offer" ribbon pill in the top-right.
  - Annual $12.99 CAD/year — "On-ramp" kicker.
  - Free $0 / 100 active cards — "Always free" kicker.
  - Monthly is mentioned only in a fineprint line below the cards. This keeps
    it available without letting it compete with the lifetime hero.
  - The Pricing section now actually exists on the page — the nav link #pricing
    previously had no corresponding anchor.

FAQ:
  - Added: "Why offer a 'lifetime' option on a mobile app?" — explicitly ties
    the lifetime unlock to the brand promise.

Support section:
  - Reduced the "Now available on the App Store" language to one appearance
    in the hero and one soft mention in the support CTA. The triplicate
    repetition is gone.

Schema.org / JSON-LD:
  - Replaced the broken downloadUrl ("https://#/P6W1rwxH" — clearly
    corrupted) with the real App Store URL.
  - Changed @type from "SoftwareApplication" to "MobileApplication".
  - Added an offers array listing all three price points in CAD so Google
    can surface pricing in rich results.

Nav:
  - Added "Resources" to the primary nav (previously reachable only via the
    hero button — a major page effectively hidden from most visitors).

Footer:
  - Added a Free Resources link to the footer badges row.

---- Resources page (resources.html) ----

Hero:
  - Stronger headline: "Start memorizing in sixty seconds." The old
    "Free MemBox resources" was factual but flat.
  - Subhead now leads with practical benefit: free packs plus AI prompts
    you can drop straight into MemBox.
  - Replaced the weak "Back to homepage" primary button with two real
    action chips: "Browse scripture packs" (primary) and "Jump to AI prompts"
    (ghost). The "Back to homepage" moved to a small CTA at the bottom.
  - Added a trust row under the hero.

Starter packs:
  - Added a kicker to each pack card ("For guided memorization" vs
    "For traditional scripture drill") so the user understands the
    difference at a glance.
  - Made the download buttons the primary style so they stand out.

AI prompts:
  - Added kickers ("Option 1 — easiest", "Option 2 — downloadable file")
    to orient users.
  - Copy button restyled: pill-shaped, top-right, flips to "Copied ✓" with
    a green background on click. Uses the already-present JS — just
    upgraded the UX.

CTA:
  - New closing CTA section: "Ready to start?" with App Store badge and a
    secondary link back to the homepage.

Navigation:
  - Resources link in the nav now shows aria-current="page" so it's
    correctly marked as the active page for accessibility.

---- CSS additions ----

All new rules appended to the end of assets/css/styles.css so existing
styles are untouched. New classes added:

  .trust-band, .trust-band__grid, .trust-band__item, .trust-band__stat,
  .trust-band__label            (3-up stat band under hero)

  .pullquote, .story-card       (styled quote in story preview)

  .pricing-grid, .pricing-card,
  .pricing-card--hero, .price,
  .price__amount, .price__unit,
  .price-list, .btn--primary    (pricing cards with hero emphasis)

  .copy-block, .copy-btn        (prettier code blocks + copy button
                                 for Resources page AI prompts)

Dark mode rules included for all new components.

---- Deploy notes ----

  1. Drop the contents of this zip into the site root (or git-commit and push).
  2. Purge the CDN cache if you have one so the updated index.html and CSS
     propagate.
  3. Re-run Google Rich Results Test on the homepage to confirm the new Offer
     nodes are picked up.
  4. Check Safari iOS for the hero — the three fanned phones should now
     actually show three different screens.
  5. Optional: When you have real App Store reviews, replace the trust band's
     "iOS / 8 / 0" stats with an App Store rating and review count.