Details + Reader

Two surfaces per file: Details (marketing surface) at /:lang/founder-files/{slug}, and Reader (long-form reading surface) at /:lang/founder-files/{slug}/read. Details has the hero cover, learning points, sponsor block, "What you’ll get", download CTA → consent modal → lead capture. Reader is the actual reading experience with TOC + progress bar + sectioned body.

Details page sections

1. A · Breadcrumb (Home → Founder Files → {title})
2. B · Hero (3:4 cover left + title H1 + best-for tagline + meta-row right)
3. C · Best For block (3-5 bullets: "Pre-seed B2B founders" / "Writing first investor deck" / "Looking for term-sheet clarity")
4. D · Sponsor mini-row (only when sponsored — see §9.5)
5. E · Learning points (5-8 bullets: "How to size a market in under 48 hours" / "Why most term sheets break on liquidation prefs")
6. F · What you’ll get (downloadable artifacts: PDF, template, checklist)
7. G · Author byline (<app-founder-card variant="inline"> per author)
8. H · Download CTA → consent modal → lead capture → email send
9. I · Read online CTA (routes to /read sub-surface)
10. J · Related files (same category, 3-card rail)
11. K · Connected signals (events / opportunities the file references)
12. L · Footer

H · Download flow (consent-gated)

Step 1 — Click Download

Opens <app-founder-file-download-modal> with file context (cover + title + sponsor when applicable).

Step 2 — Modal fields

Email (required, validated), Name (required), Role (required, dropdown: founder/operator/investor/student/other), Country (required, dropdown), Stage (optional), consentPlatform (required true), consentPartners (optional). Submit disabled until required fields valid + consentPlatform checked.

Step 3 — Submit

POST /api/founder-files/{id}/leads. Body: { email, name, role, country, stage?, consentPlatform, consentPartners, source: 'details' | 'reader' }. Server: writes to FounderFileLead, increments FounderFile.DownloadCount, queues email job. consentPartners=true → also queues sponsor-CRM webhook.

Step 4 — Confirmation

Modal flips to success state: "Check your email — {filename}.pdf is on its way." + CTA "Read online now" routing to /read.

Reader page sections (/:lang/founder-files/{slug}/read)

• A · Reading-progress bar (sticky top, 3px tall)
• B · Header (back to details CTA + title + author byline)
• C · Table of contents (sticky on desktop, drawer on mobile, generated from <h2> blocks in body)
• D · Body (sanitised HTML, supports h2-h4, p, ul/ol, blockquote, figure, a, em, strong, code, callouts via custom data-callout attribute)
• E · Inline downloadable artifacts (PDF/template/checklist as in-body download buttons)
• F · Author section at end (full bio + LinkedIn)
• G · Related files + Connected signals (same as details J + K)