Page specifications

Three surfaces, three specs. Listing is browse-density. Details is conversion (download CTA prominence). Reader is comprehension (TOC + progress bar + body chrome). Each surface has a strict template.

Listing page

Hero

Brand eyebrow "FOUNDER FILES" + title + lede + filter pill row + "Available in EN, AR, FR" badge strip.

Featured file spotlight

`.card-editorial--spotlight` rendering of the featured file at the top. Larger cover preview, "Featured" eyebrow.

Filter row

Category · Language · Sponsorship status. Filter state persists in URL.

Card grid

`<app-founder-file-card *ngFor (download)="openDownload($event)">` 3-up desktop, 2-up tablet, 1-up mobile.

Download modal

<app-ff-download-modal *ngIf="modalOpen()">. Opens on any card’s Download CTA. Captures lead + consent.

Details page

Hero

2-column on desktop: 3:4 portrait cover (left, with editorial SVG fallback) + Title + brand-eyebrow with file number + dek + Best For block + Download / Open Reader CTAs + reading time + available-languages chip set.

What You’ll Learn

Numbered list of `learningPoints[]` from the file entity. 4-6 items, each one line.

Inside this file

TOC preview — lists section headings from `tocSections[]`. Each section links to its anchor in the reader.

Sponsor mini-row (conditional)

When `sponsorId` is set, renders sponsor tier chip + sponsor name + logo. Locale-aware.

Reader page

Sticky reader header

Back to details link + file title (compressed) + reading progress bar (0-100% based on scroll depth).

TOC sidebar

Sticky left rail on desktop. Lists all sections; current section gets active-state highlight (computed via IntersectionObserver on scroll).

Body sections

Each section has an anchor ID. HTML rendered via [innerHTML] + SafeHtmlPipe. `prose-editorial` typography class.

End-of-file CTAs

Download (if not yet downloaded), Next File (Phase 2), Share. Followed by Related Ecosystem Signals + Inline Signal CTA.