Heading hierarchy supports content skimming

Web visitors skim before they read. Heading structure is how a skimmer navigates a page — they read only the headings to decide whether any section is worth their time. Headings that skip levels (h1 → h3 with no h2) break screen reader navigation and signal structural disorder. Vague headings — "Features", "Details", "Section 3" — provide no information to the skimmer, so every section looks equally irrelevant and nothing gets read. Descriptive headings form a readable summary of the page when taken in isolation: a visitor reading only the headings should be able to tell what the page is about. This is a prerequisite for accessibility, SEO, and basic readability.

Audit the heading sequence on the home page and marketing pages. Open browser DevTools and use the Accessibility tree or run document.querySelectorAll('h1,h2,h3') to see the heading order in isolation. Look for: level skips (h1 → h3), vague labels ("Features", "More", "Details"), and major page sections with no heading at all.

Rewrites for common vague headings:

"Features"      → "What you can do with [Product]"
"Details"       → "How the pricing works"
"More"          → "What else is included"
"Section 3"     → "Who this is built for"

In a Next.js App Router project, headings are typically in page components (app/page.tsx) or section components (components/FeaturesSection.tsx, components/PricingSection.tsx). Update the heading strings directly. If content is MDX-driven, edit the frontmatter or MDX body. Ensure every major page section has an <h2>, and sub-sections within it use <h3>.