Prompt it

Create an accessible, responsive table-of-contents component for a long help article or guide using semantic HTML and dependency-free vanilla CSS. Use a nav landmark with an accessible label, a clear “On this page” heading, and an ordered list of four native anchor links with short section labels, two-digit visual numbers hidden from assistive technology, and decorative arrows hidden from assistive technology. Provide matching section IDs and semantic headings/content so every link works without JavaScript. Style it as a calm white card with deep navy text, teal accents, subtle borders, and clear hover/focus states. Use a two-column link grid on wider screens and one column at 320px; prevent overflow and keep touch targets comfortably sized. Preserve readable contrast, keyboard navigation, visible focus, and reduced-motion preferences. Use system fonts only; no scripts, frameworks, or remote assets. Scope every custom selector under .cf-page-index or .cf-page-index__sections, and ensure every CSS class appears in the supplied HTML so editor changes update the live preview. Return complete HTML and CSS, then briefly explain how native anchors make the index work.