casoon · Oct 28, 2026 · Oct 27, 2026 · Oct 28, 2026
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -53,6 +53,7 @@ and verification for each change is in the
 - **JSON:** Breaking: accessibility statements no longer claim conformance. `interpretation.accessibility_claim` gives result, scope and open manual review; `screen_reader.bfsg_compliance.verdict` is `no_violations_found`/`violations_found`/`incomplete` instead of `compliant`/`non_compliant`; both state `conformance` and `legal_applicability` as `not_determined`.
 - **Reports:** Risk rationales name controls without an accessible name and controls not operable by keyboard separately (`risk.keyboard_blocking_issues`), and neither they nor the verdict reasons state any longer that nameless controls cannot be operated or that tasks cannot be completed.
 - **Reports:** The expected impact of an action states the occurrences it addresses instead of "Fixes N occurrences; expected score impact: high", which no simulation backed.
+- **Project site:** The start page now carries a release teaser, an FAQ and an overview of the common CLI flags (theme 0.11.1).
 - **Reports:** "Source quality" is shown as "Technical preparation for machine processing", an unweighted indicator. Its score combines on-page consistency and publisher/security signals; structural signals (word count, headings, structured data, metadata) are listed as observed values without a rating. `source_quality.substance.score` is deprecated and removed in 2.0.
 - **Reports:** Consistency compares what a page can contradict on its own — declared language vs. `og:locale`, `<title>` vs. `og:title`, structured data vs. visible content — and weighs only the checks that applied.
 - **Reports:** The trust signal lists contact, imprint and privacy links that were not detected instead of reusing the UX trust score.

diff --git a/site/src/pages/index.astro b/site/src/pages/index.astro
@@ -1,20 +1,33 @@
 ---
+import { readFile } from 'node:fs/promises';
 import {
   Badge,
   Badges,
   BuildOutput,
   CodeBlock,
   Facts,
+  Faq,
   Features,
   Hero,
   Install,
+  Keymap,
   Quickstart,
+  ReleaseHighlights,
   Terminal,
 } from '@casoon/pages-theme/components';
 import Base from '@casoon/pages-theme/layouts/Base.astro';
 import { url } from '@casoon/pages-theme/url';
+import config from 'virtual:casoon-pages/config';
+import { parseChangelog } from '@casoon/pages-theme/lib/changelog';
 import { castDemo, fixture } from '../showcase';
 
+// Skip "Unreleased": it has no version to show as "New in v…" yet.
+const latestRelease = config.changelog
+  ? parseChangelog(await readFile(config.changelog, 'utf8')).find(
+      (r) => r.version.toLowerCase() !== 'unreleased'
+    )
+  : undefined;
+
 const quickstart = `# check which browser auditmysite will use
 auditmysite browser detect
 
@@ -124,6 +137,37 @@ auditmysite --sitemap https://example.com/sitemap.xml --max-pages 20`;
     <Terminal ansi={fixture('plan.txt')} />
   </BuildOutput>
 
+  <Keymap
+    heading="Common flags"
+    groups={[
+      {
+        heading: 'What to audit',
+        items: [
+          { label: 'Sitemap, as one batch report', keys: ['-s', '<sitemap-url>'] },
+          { label: 'URL list from a file', keys: ['-u', '<file>'] },
+          { label: 'Same-domain crawl from the URL', keys: ['--crawl'] },
+          { label: 'Cap the number of pages', keys: ['-m', '<num>'] },
+        ],
+      },
+      {
+        heading: 'What to check',
+        items: [
+          { label: 'Add performance, SEO, security, mobile', keys: ['--full'] },
+          { label: 'WCAG level (AAA is incomplete)', keys: ['-l', 'A|AA|AAA'] },
+        ],
+      },
+      {
+        heading: 'What to write',
+        items: [
+          { label: 'Report format', keys: ['-f', 'json|pdf|table'] },
+          { label: 'Output file', keys: ['-o', '<file>'] },
+          { label: 'PDF language', keys: ['--lang', 'de|en'] },
+          { label: 'One JSON per page plus findings.jsonl', keys: ['--technician'] },
+        ],
+      },
+    ]}
+  />
+
   <Quickstart
     lead="Install the binary, make sure a Chrome is available, point it at a URL. The documentation covers batch modes, reports and CI."
     steps={[
@@ -190,6 +234,33 @@ auditmysite --sitemap https://example.com/sitemap.xml --max-pages 20`;
       </dd>
     </dl>
   </section>
+
+  {latestRelease && <ReleaseHighlights release={latestRelease} />}
+
+  <Faq
+    items={[
+      {
+        q: 'Does auditmysite download or install a browser automatically?',
+        a: 'No. It requires Chrome, Chromium, or a managed browser to already be present and exits with an error if none is found. auditmysite browser install fetches Chrome for Testing, but only when you run it yourself.',
+      },
+      {
+        q: 'Is the PDF report an accessibility statement I can publish?',
+        a: 'No. The EN 301 549 appendix and the JSON findings are a technical building block for a statement a person writes; the report explicitly does not claim conformance under BFSG or BITV 2.0.',
+      },
+      {
+        q: 'Does 100% automated pass mean the page is fully WCAG 2.2 AA compliant?',
+        a: "No. Of the 55 WCAG 2.2 A/AA success criteria, only 30 are counted as automated, and a criterion counts there only if a rule can actually report a violation. The other 25 are listed as requiring manual review, never silently marked as passed.",
+      },
+      {
+        q: 'Where do the WCAG rule ids and checks come from?',
+        a: 'From the barrierlab crates (a11y-rules, a11y-dom, accname, html-conform, and related crates), a shared Rust monorepo also used by astro-post-audit and LiveAudit, so the same rule id means the same thing across all three tools. Rule ids stay stable across auditmysite releases, with renames documented when a collision is fixed.',
+      },
+      {
+        q: 'Can it audit more than one page at a time?',
+        a: 'Yes. Point it at a sitemap, a URL file, or a seed URL with --crawl, and it writes one aggregated batch report with averages, ranking, and recurring issues across pages. --technician switches that same batch run to one JSON file per page plus a flat findings.jsonl instead.',
+      },
+    ]}
+  />
 </Base>
 
 <style>
@@ -233,6 +304,9 @@ auditmysite --sitemap https://example.com/sitemap.xml --max-pages 20`;
     font-size: 0.9rem;
     margin-top: 8px;
   }
+  .demo figcaption a {
+    text-decoration: underline;
+  }
   .limits .lead {
     color: var(--muted);
     margin: 0 0 20px;

diff --git a/site/vendor/pages-theme/README.md b/site/vendor/pages-theme/README.md
@@ -123,13 +123,19 @@ Import from `@casoon/pages-theme/components` in `.astro` files; available direct
 | Component | Use |
 | --- | --- |
 | `Hero` | Title, lead, default slot (install, badges), `output` slot (real output); `layout`, `command` and `tone` pick the variant |
+| `AnchorGrid` | Card grid under the hero, each linking to a section further down or out to a doc |
 | `Install` | Install command per ecosystem, CSS-only tabs, copy button; long commands wrap at spaces and after a `/` |
 | `Badge`, `Badges` | Static badges (no external badge services) |
-| `Facts` | Verifiable key figures |
-| `Features` | 3–5 core points |
+| `Facts` | Verifiable key figures; `layout="grid"` (tiles) or `"list"` (spec sheet) |
+| `Features` | Core points; `layout="numbered"` (3–5 items) or `"grid"` (an icon-tile catalog) |
+| `Spotlight` | Repeatable two-column feature section — eyebrow, title, lead, bullets, links, beside a media slot |
+| `Integrations` | Grid of what the project plugs into: icon tile, name, category |
 | `FileSet` | The files a run produced: `tabs`, `grid` or `rail` view |
 | `BuildOutput` | One real build output on the start page |
 | `Quickstart` | Steps, docs link, code slot |
+| `Keymap` | Keyboard shortcuts or CLI flags, grouped cards of label + `<kbd>` keys |
+| `ReleaseHighlights` | Teaser of one changelog release on the start page |
+| `Faq` | Native `<details>` accordion, no JS |
 | `CodeBlock` | Build-time highlighting (Shiki, theme-aware), copy button |
 | `Terminal` | `ansi` prop (converted at build time) or pre-rendered HTML as slot |
 | `Callout` | `note`, `tip`, `caution`, `deprecated` |

diff --git a/site/vendor/pages-theme/SOURCE b/site/vendor/pages-theme/SOURCE
@@ -1,6 +1,6 @@
-@casoon/pages-theme 0.8.3
-source: gh-pages-template@8287402
-synced: 2026-10-26
+@casoon/pages-theme 0.11.1
+source: gh-pages-template@717e8fe
+synced: 2026-10-27
 
 Vendored copy. Do not edit here: change the theme in gh-pages-template,
 then run scripts/sync-theme.sh <this repo>.
diff --git a/site/vendor/pages-theme/components/AnchorGrid.astro b/site/vendor/pages-theme/components/AnchorGrid.astro
@@ -0,0 +1,160 @@
+---
+/**
+ * Cards right under the hero, each jumping to a section further down the page (or out, to a
+ * doc). For projects with more than one entry point or audience — "what's in it for you,
+ * specifically" before the long-form pitch. The solid label pill reuses the Hero `step` pill;
+ * the tinted card background reuses the brand/accent-soft tokens Callout already carries.
+ */
+import config from 'virtual:casoon-pages/config';
+import { t } from '../lib/i18n';
+
+interface Props {
+  items: {
+    label: string;
+    title: string;
+    body: string;
+    href: string;
+    tone?: 'accent' | 'brand';
+  }[];
+  /** Section label above the grid. Omitted: the grid carries no heading of its own. */
+  heading?: string;
+}
+
+const TONES: Array<'accent' | 'brand'> = ['accent', 'brand'];
+const { items, heading } = Astro.props;
+---
+
+<nav class="anchor-grid" aria-label={heading ?? t(config.lang).overview}>
+  {heading && <p class="cp-label">{heading}</p>}
+  <ul>
+    {
+      items.map((item, i) => (
+        <li>
+          <a class={item.tone ?? TONES[i % TONES.length]} href={item.href}>
+            <span class="label">{item.label}</span>
+            <h3>{item.title}</h3>
+            <p>{item.body}</p>
+            <span class="go" aria-hidden="true">
+              →
+            </span>
+          </a>
+        </li>
+      ))
+    }
+  </ul>
+</nav>
+
+<style>
+  .anchor-grid {
+    max-width: var(--max);
+    margin: 0 auto;
+    padding: 0 24px 80px;
+  }
+  ul {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
+    gap: 18px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  a {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    height: 100%;
+    padding: 26px 60px 52px 26px;
+    border: 1px solid var(--border);
+    border-radius: 18px;
+    color: var(--text);
+    transition:
+      border-color 0.18s ease,
+      transform 0.18s ease,
+      box-shadow 0.18s ease;
+  }
+  a.accent {
+    background: var(--accent-soft);
+  }
+  a.brand {
+    background: var(--brand-soft);
+  }
+  a:hover {
+    box-shadow: var(--shadow);
+    transform: translateY(-3px);
+  }
+  a.accent:hover {
+    border-color: var(--accent);
+  }
+  a.brand:hover {
+    border-color: var(--brand);
+  }
+  .label {
+    display: inline-flex;
+    align-self: flex-start;
+    padding: 5px 13px;
+    border-radius: 999px;
+    font-family: var(--font-mono);
+    font-size: 11.5px;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    white-space: nowrap;
+    /* The page ground, not white: on the light brand/accent of the dark theme white falls below
+       4.5:1 — same reasoning as the Hero step pill. */
+    color: var(--bg);
+  }
+  .accent .label {
+    background: var(--accent);
+  }
+  .brand .label {
+    background: var(--brand);
+  }
+  h3 {
+    margin: 0;
+    color: var(--heading);
+    font-size: 18px;
+    font-weight: 600;
+    letter-spacing: -0.01em;
+    line-height: 1.25;
+  }
+  p {
+    margin: 0;
+    font-size: 14px;
+    line-height: 1.55;
+  }
+  .go {
+    position: absolute;
+    right: 22px;
+    bottom: 22px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 30px;
+    height: 30px;
+    border: 1px solid var(--border);
+    border-radius: 999px;
+    background: var(--surface);
+    color: var(--muted);
+    font-size: 15px;
+    line-height: 1;
+    transition:
+      color 0.18s ease,
+      border-color 0.18s ease,
+      background 0.18s ease,
+      transform 0.18s ease;
+  }
+  a.accent:hover .go,
+  a.accent:focus-visible .go {
+    border-color: var(--accent);
+    background: var(--accent);
+    color: var(--bg);
+    transform: translateX(2px);
+  }
+  a.brand:hover .go,
+  a.brand:focus-visible .go {
+    border-color: var(--brand);
+    background: var(--brand);
+    color: var(--bg);
+    transform: translateX(2px);
+  }
+</style>