diff --git a/.claude/skills/tina4-a11y/SKILL.md b/.claude/skills/tina4-a11y/SKILL.md
new file mode 100644
index 00000000..50b5dc30
--- /dev/null
+++ b/.claude/skills/tina4-a11y/SKILL.md
@@ -0,0 +1,167 @@
+---
+name: tina4-a11y
+description: Use when a project needs a WCAG 2.1 Level AA accessibility audit and fix pass — semantic landmarks, keyboard navigation, focus indicators, ARIA states, colour contrast, forms, zoom/reflow, reduced motion, touch targets, and screen reader support. Works on any Tina4 project (PHP, Python, Ruby, Node) or plain HTML. Reads DESIGN.md if present to avoid re-asking for known facts. Triggers: "audit accessibility", "WCAG audit", "a11y check", "make this accessible", "screen reader support", "keyboard navigation", "focus indicators", "ARIA", "aria labels", "our site is not accessible".
+updated_for_version: 1.0.0
+---
+
+# tina4-a11y — WCAG 2.1 AA accessibility from audit to fix
+
+> 🤖♿ **Skill-active marker.** Begin every reply with 🤖♿ while this skill is guiding the session. Drop it only once the conversation has clearly moved off accessibility into other work.
+
+You are the accessibility lead for this project. Accessibility means the site is usable by people who rely on keyboard navigation, screen readers, high-contrast displays, reduced-motion settings, or magnification — and it improves SEO, legal compliance, and general usability for everyone. Your job is to audit what exists against WCAG 2.1 Level AA, generate the fixes, and inject them into the project's template and stylesheet layer systematically. Every output is real, executable code — no placeholders.
+
+## Contents
+
+Read top to bottom once, then jump by section. Orientation and the phase order live here; the phase bodies live in `references/` — each file is named in the workflow table and the phase stubs below.
+
+**Orientation**
+- When you fire - and when you do not
+- First action - read `design/DESIGN.md` before asking anything
+- The audit-to-fix workflow (20 phases) - Working reflexes
+- **Degrees of freedom** - what is inviolable vs. a default vs. your judgement (read this next)
+
+**Reference files** (all in `references/`, one level deep)
+- `discovery-and-scope.md` - Phase 1 (discovery audit + scope checkpoint)
+- `landmarks-and-structure.md` - Phase 2 + Phase 14
+- `keyboard-and-focus.md` - Phase 3 + Phase 4
+- `images-and-media.md` - Phase 5
+- `forms.md` - Phase 6
+- `aria-and-live-regions.md` - Phase 7 + Phase 10 + Phase 11
+- `contrast-and-colour.md` - Phase 8
+- `interactive-semantics.md` - Phase 9
+- `zoom-reflow-motion.md` - Phases 12, 13, 15, 16, 17, 18, 19
+- `validation-and-handoff.md` - Phase 20, DESIGN.md section, plan structure, skill relationships, avoid-list
+
+## Degrees of freedom
+
+Not every line here carries the same weight. Knowing which is which lets you move fast without
+breaking what must not break. Three tiers:
+
+- 🔒 **Non-negotiable - never skip, however small the task.**
+  **Read `design/DESIGN.md` first** (focus-ring token, contrast ratios, touch-target minimum, motion
+  policy); never re-ask for facts it holds. **Audit before you fix.** **Cite the specific WCAG
+  criterion** on every finding (e.g. WCAG 2.1 SC 1.4.3 Contrast Minimum) - vague "accessibility
+  problem" is not a report. **Every output is real, executable code - no placeholders**; every finding
+  carries file path, line number, current state, WCAG criterion, corrected code, and the patch to
+  apply. **Fix the CRITICAL tier first** (Phases 2-6), then HIGH, MEDIUM, OPTIONAL. **Keyboard-first.**
+  **Prefer semantic HTML over ARIA patches.** **No colour-only signals.** **Never silently substitute
+  a failing brand colour** - flag, propose, wait for the user. **Re-run safely** - no duplicate fixes;
+  the scope checkpoint always fires so the user steers. **The 🤖♿ skill-active marker** on every reply.
+
+- 🎚️ **Default with a reason - follow unless this project genuinely differs.**
+  The 20-phase order and its CRITICAL / HIGH / MEDIUM / OPTIONAL tiering; the deliverable set (fixes
+  injected into templates and stylesheets, the handoff report, the `## Accessibility (WCAG 2.1 AA)`
+  section appended to `design/DESIGN.md`, `plan/a11y/PLAN.md`); the 44×44px touch-target target over
+  the WCAG-only 24×24 minimum; the `:focus-visible` box-shadow ring pattern; `prefers-reduced-motion`
+  duration tokens redefined to 0ms; the avoid-list of accessibility anti-patterns. Depart deliberately,
+  name the reason, and record it.
+
+- 🧭 **Judgement - read the task and choose.**
+  How deep the scope goes (fix everything vs AA-required vs critical-only vs user-scoped); which
+  automated tools to run; which pages count as key pages for the manual walkthroughs; ask-first vs
+  decide-and-proceed on a given fix; verbosity. The skill gives the heuristic; you read the situation.
+
+## When you fire
+
+- "Audit accessibility" / "a11y check" / "make this accessible"
+- "WCAG audit" / "WCAG 2.1 AA compliance"
+- "Screen reader support" / "keyboard navigation" / "focus indicators"
+- "ARIA" / "aria labels" / "aria-expanded"
+- "Our site is not accessible" / "legal compliance for the web"
+- "tina4-a11y" (explicit invocation)
+
+Do NOT fire for:
+- Visual design decisions — those belong to tina4-design
+- SEO or AI discovery — those belong to tina4-seo (though semantic HTML, alt text, page titles overlap)
+- General bug fixes not related to accessibility
+
+## First action — read design/DESIGN.md
+
+Before asking a single question, check for `design/DESIGN.md` (the tina4-design deliverable folder). If it exists, read it. It contains the token system, focus ring definition, contrast ratios, touch target minimum, and motion personality — facts that were already gathered by tina4-design. Never ask for information that is already in `design/DESIGN.md`.
+
+If `design/DESIGN.md` does not exist, check the project root for a legacy `DESIGN.md`; if neither exists, note it and gather the facts you need directly from the code.
+
+---
+
+## Working reflexes
+
+- **🔍 Audit before you fix.** Read the actual templates and stylesheets before writing any change. Never assume the current state from context alone.
+- **📐 Real WCAG references.** Every finding cites the specific WCAG criterion (e.g. WCAG 2.1 SC 1.4.3 Contrast Minimum). Vague "accessibility problem" is not a report.
+- **⌨️ Keyboard-first.** Every interactive element must be operable by keyboard alone before it is operable by mouse. If you can't tab to it, focus it, and activate it — it is broken.
+- **🎯 Fix at the source.** Prefer semantic HTML fixes over ARIA patches. A `<button>` beats `<div role="button">`. A native `<dialog>` beats a hand-rolled focus trap.
+- **📣 Show the work.** Every finding includes: file path, line number, current state, WCAG criterion, corrected code, and the exact patch to apply.
+- **🚫 No colour-only signals.** Every semantic meaning conveyed by colour (red = error, green = success) must also carry a text label, icon, or pattern.
+- **♻️ Re-run safely.** Running this skill on a project a second time must not duplicate fixes. Check for existing accessibility work before adding.
+
+---
+
+## The audit-to-fix workflow
+
+Twenty phases, tiered by priority. Phase 1 discovers and scopes; Phases 2-6 are CRITICAL; the rest run in priority order. Read the matching reference before writing fixes for a phase.
+
+| Phase(s) | Name | Tier | Reference |
+|----------|------|------|-----------|
+| 1 | Discovery audit + scope checkpoint | — | `references/discovery-and-scope.md` |
+| 2 | Page structure and landmarks | CRITICAL | `references/landmarks-and-structure.md` |
+| 3 | Keyboard navigation | CRITICAL | `references/keyboard-and-focus.md` |
+| 4 | Visible focus indicators | CRITICAL | `references/keyboard-and-focus.md` |
+| 5 | Images and non-text content | CRITICAL | `references/images-and-media.md` |
+| 6 | Forms | CRITICAL | `references/forms.md` |
+| 7 | ARIA states and properties | HIGH | `references/aria-and-live-regions.md` |
+| 8 | Colour contrast | HIGH | `references/contrast-and-colour.md` |
+| 9 | Interactive element semantics | HIGH | `references/interactive-semantics.md` |
+| 10 | Live regions and dynamic content | MEDIUM | `references/aria-and-live-regions.md` |
+| 11 | Tables | MEDIUM | `references/aria-and-live-regions.md` |
+| 12 | Reduced motion | MEDIUM | `references/zoom-reflow-motion.md` |
+| 13 | Touch target sizes | MEDIUM | `references/zoom-reflow-motion.md` |
+| 14 | Heading hierarchy | MEDIUM | `references/landmarks-and-structure.md` |
+| 15 | Zoom and reflow (incl. Orientation 1.3.4) | HIGH | `references/zoom-reflow-motion.md` |
+| 16 | Text spacing | HIGH | `references/zoom-reflow-motion.md` |
+| 17 | Time and motion limits | MEDIUM | `references/zoom-reflow-motion.md` |
+| 18 | Enhanced screen reader support | OPTIONAL | `references/zoom-reflow-motion.md` |
+| 19 | High contrast mode (Forced Colors) | OPTIONAL | `references/zoom-reflow-motion.md` |
+| 20 | Validation and handoff | — | `references/validation-and-handoff.md` |
+
+---
+
+## Phase stubs
+
+**Phase 1 - Discovery audit:** read `references/discovery-and-scope.md` (read DESIGN.md, read templates/stylesheets, run automated tools, report the ✅/❌/⚠️ table, then the scope checkpoint — wait for the user signal before writing any fixes).
+
+**Phase 2 - Page structure and landmarks (CRITICAL):** read `references/landmarks-and-structure.md` (`<html lang>`, landmark roles, skip link, unique page titles, `aria-current="page"`).
+
+**Phase 3 - Keyboard navigation (CRITICAL):** read `references/keyboard-and-focus.md` (tab order audit, `tabindex` rules, keyboard operability for custom components, focus trap — prefer native `<dialog>`).
+
+**Phase 4 - Visible focus indicators (CRITICAL):** read `references/keyboard-and-focus.md` (replace every `outline: none`, the `:focus-visible` box-shadow pattern, 3:1 against adjacent).
+
+**Phase 5 - Images and non-text content (CRITICAL):** read `references/images-and-media.md` (`<img>` alt text, decorative vs meaningful `<svg>`, CSS background images, video and audio).
+
+**Phase 6 - Forms (CRITICAL):** read `references/forms.md` (labels, required fields, error messages, grouped controls, submit button, autocomplete tokens).
+
+**Phase 7 - ARIA states and properties (HIGH):** read `references/aria-and-live-regions.md` (required ARIA per component, `aria-atomic` on live regions).
+
+**Phase 8 - Colour contrast (HIGH):** read `references/contrast-and-colour.md` (contrast formula, pairs to test, failing-accent decision, colour is not the only indicator).
+
+**Phase 9 - Interactive element semantics (HIGH):** read `references/interactive-semantics.md` (buttons vs links, icon-only buttons, link purpose, `title`, Label in Name 2.5.3, content on hover/focus 1.4.13).
+
+**Phase 10 - Live regions and dynamic content (MEDIUM):** read `references/aria-and-live-regions.md` (`aria-live` regions, loading states, form submission feedback).
+
+**Phase 11 - Tables (MEDIUM):** read `references/aria-and-live-regions.md` (`<caption>`, `<th>` + `scope`, `<thead>`/`<tbody>`, layout tables).
+
+**Phase 12 - Reduced motion (MEDIUM):** read `references/zoom-reflow-motion.md` (global CSS rule, JS-driven animation gate, auto-playing carousels).
+
+**Phase 13 - Touch target sizes (MEDIUM):** read `references/zoom-reflow-motion.md` (44×44 target vs WCAG 24×24, pad rather than resize).
+
+**Phase 14 - Heading hierarchy (MEDIUM):** read `references/landmarks-and-structure.md` (one `<h1>`, no skipped levels, structure not visual size).
+
+**Phase 15 - Zoom and reflow (HIGH):** read `references/zoom-reflow-motion.md` (320px width, 400% zoom, fixed overlays, Orientation 1.3.4).
+
+**Phase 16 - Text spacing (HIGH):** read `references/zoom-reflow-motion.md` (user-override spacing, replace fixed `height` with `min-height`).
+
+**Phase 17 - Time and motion limits (MEDIUM):** read `references/zoom-reflow-motion.md` (auto-updating content 2.2.4, session timeouts 2.2.1, no flashing 2.3.1).
+
+**Phase 18 - Enhanced screen reader support (OPTIONAL):** read `references/zoom-reflow-motion.md` (breadcrumbs, pagination, status badges, `aria-describedby`, PDF/document links, `target="_blank"`).
+
+**Phase 19 - High contrast mode (OPTIONAL):** read `references/zoom-reflow-motion.md` (`@media (forced-colors: active)` to restore indicators).
+
+**Phase 20 - Validation and handoff:** read `references/validation-and-handoff.md` (keyboard walkthrough, screen reader walkthrough, re-run tools, handoff report, DESIGN.md accessibility section, `plan/a11y/PLAN.md`, relationship to other skills, avoid-list).
diff --git a/.claude/skills/tina4-a11y/references/aria-and-live-regions.md b/.claude/skills/tina4-a11y/references/aria-and-live-regions.md
new file mode 100644
index 00000000..642fa30c
--- /dev/null
+++ b/.claude/skills/tina4-a11y/references/aria-and-live-regions.md
@@ -0,0 +1,70 @@
+# ARIA, live regions and tables
+
+> Reference for the `tina4-a11y` skill: Phase 7 (ARIA states and properties, HIGH), Phase 10 (live regions and dynamic content, MEDIUM) and Phase 11 (tables, MEDIUM). Moved out of `SKILL.md` unchanged.
+
+## Phase 7 — HIGH PRIORITY: ARIA states and properties
+
+ARIA states communicate dynamic changes to assistive technology. Without them, interactive components are invisible to screen readers.
+
+Check every custom interactive component for these required attributes:
+
+| Component | Required ARIA | Notes |
+|-----------|--------------|-------|
+| Accordion header button | `aria-expanded="true/false"` | Changes on toggle |
+| Dropdown trigger | `aria-expanded`, `aria-haspopup="listbox"` or `"menu"` | |
+| Modal / dialog | `role="dialog"`, `aria-modal="true"`, `aria-labelledby` (pointing to title) | Native `<dialog>` handles most of this |
+| Tab list | `role="tablist"`, `role="tab"`, `role="tabpanel"`; `aria-selected` on tabs; `aria-controls` linking tab to panel | |
+| Alert / error | `role="alert"` (errors) or `aria-live="polite"` (status) | |
+| Progress bar | `role="progressbar"`, `aria-valuenow`, `aria-valuemin`, `aria-valuemax` | |
+| Toggle / switch | `role="switch"`, `aria-checked="true/false"` | |
+| Loading spinner | `role="status"`, `aria-label="Loading"`, `aria-live="polite"` | |
+| Tooltip | `role="tooltip"` on tooltip element; `aria-describedby` on trigger | |
+| Sortable table header | `aria-sort="ascending/descending/none"` | |
+| Selected item in list | `aria-selected="true"` | |
+| Disabled control | `aria-disabled="true"` (for custom elements); native `disabled` for real inputs | |
+
+Find each component type in the project, check for the required attributes, and add any missing.
+
+**`aria-atomic` on live regions.** By default screen readers announce only changed content within a live region. If the region's whole content forms a single message (e.g. a stat update: "42 unread"), add `aria-atomic="true"` so the full region is announced.
+
+---
+
+## Phase 10 — MEDIUM PRIORITY: Live regions and dynamic content
+
+Content that updates without a page reload must be announced to screen readers.
+
+### 10.1 `aria-live` regions
+
+- Status messages, success confirmations, loading complete: `aria-live="polite"`
+- Error messages, urgent alerts: `aria-live="assertive"` (use sparingly — it interrupts)
+- Toast / snackbar container: `aria-live="polite"` + `role="status"`
+
+The live region must exist in the DOM BEFORE content is injected. Creating and injecting the region simultaneously misses the announcement.
+
+### 10.2 Loading states
+
+```html
+<div role="status" aria-live="polite" aria-label="Loading">
+  <!-- spinner -->
+</div>
+```
+
+Remove or hide when done and announce completion.
+
+### 10.3 Form submission feedback
+
+After a form submits (success or error), the message must be in a live region OR focus must move to the message so it is announced.
+
+---
+
+## Phase 11 — MEDIUM PRIORITY: Tables
+
+Data tables must be structured so screen readers can understand cell-to-header relationships.
+
+1. Every `<table>` used for tabular data must have:
+   - `<caption>` describing the table (visually hidden with `.sr-only` is fine if a visible heading is nearby)
+   - `<th>` for header cells, never `<td>` styled to look like a header
+   - `scope="col"` on column headers, `scope="row"` on row headers
+   - `<thead>` and `<tbody>` (and `<tfoot>` where appropriate)
+
+2. Tables used for layout must have `role="presentation"` or `aria-hidden="true"` — but prefer replacing them with CSS grid or flexbox entirely.
diff --git a/.claude/skills/tina4-a11y/references/contrast-and-colour.md b/.claude/skills/tina4-a11y/references/contrast-and-colour.md
new file mode 100644
index 00000000..c85361e6
--- /dev/null
+++ b/.claude/skills/tina4-a11y/references/contrast-and-colour.md
@@ -0,0 +1,52 @@
+# Contrast and colour
+
+> Reference for the `tina4-a11y` skill: Phase 8 (colour contrast, HIGH). Moved out of `SKILL.md` unchanged.
+
+## Phase 8 — HIGH PRIORITY: Colour contrast
+
+WCAG 2.1 AA requires:
+- **4.5:1** for normal text (< 18pt regular or < 14pt bold)
+- **3:1** for large text (≥ 18pt regular or ≥ 14pt bold) and UI components/icons
+
+### 8.1 Compute the contrast ratios
+
+Use this formula on every text/background token pair from DESIGN.md:
+
+```js
+function linearize(c) {
+  const s = c / 255;
+  return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
+}
+function luminance({ r, g, b }) {
+  return 0.2126 * linearize(r) + 0.7152 * linearize(g) + 0.0722 * linearize(b);
+}
+function contrast(rgb1, rgb2) {
+  const [L1, L2] = [luminance(rgb1), luminance(rgb2)];
+  const [hi, lo] = L1 > L2 ? [L1, L2] : [L2, L1];
+  return ((hi + 0.05) / (lo + 0.05)).toFixed(2) + ':1';
+}
+```
+
+### 8.2 Pairs to test at minimum
+
+- Body text on page background
+- Body text on card / surface background
+- Link text on page background
+- Placeholder text on input background (3:1 minimum)
+- Button text on button background (all variants: primary, secondary, destructive)
+- Badge text on badge background (all semantic colours)
+- Disabled text (may fall below 4.5:1 — noted as an exception)
+
+For any failing pair, propose a corrected hex value that passes while staying as close as possible to the original brand colour. Never silently substitute — flag it, propose, get confirmation.
+
+**Ask the user which fix to apply** using a structured-question tool (`AskUserQuestion` in Claude Code, or the equivalent). For a failing brand accent, offer three concrete options with the exact hex values in each label:
+
+- **Darken the accent** — replace `#FAB033` with `#E89A20` (contrast [X]:1) across the token system
+- **Pair with a darker text token** — keep `#FAB033`, use `--text-1` instead of accent on those surfaces (contrast [Y]:1)
+- **Keep as-is, log exception** — record in DESIGN.md that this pair is an accepted deviation
+
+Fallback if no structured tool is available: send the same three options as a numbered prose list. Wait for the response before applying any fix — a silent contrast substitution changes the brand look in production.
+
+### 8.3 Colour is not the only indicator
+
+Every place where colour alone communicates meaning (red = error, green = success, coloured dot = status) must also carry a text label, icon, or pattern. Screen readers and colour-blind users cannot see colour.
diff --git a/.claude/skills/tina4-a11y/references/discovery-and-scope.md b/.claude/skills/tina4-a11y/references/discovery-and-scope.md
new file mode 100644
index 00000000..e656bf24
--- /dev/null
+++ b/.claude/skills/tina4-a11y/references/discovery-and-scope.md
@@ -0,0 +1,117 @@
+# Discovery and scope
+
+> Reference for the `tina4-a11y` skill: Phase 1 (discovery audit) and the scope checkpoint. Moved out of `SKILL.md` unchanged.
+
+## Phase 1 — Discovery audit
+
+Read the project files and report the current state before writing any fixes.
+
+### 1.1 Read design/DESIGN.md
+
+If present, extract:
+- `--focus-ring` token definition
+- Contrast ratios recorded per token pair
+- Touch target minimum
+- Motion personality and `prefers-reduced-motion` policy
+- Whether ARIA state patterns are documented for custom components
+
+### 1.2 Read existing templates and stylesheets
+
+Find the base template layer:
+- **PHP:** `src/templates/`
+- **Python:** `src/templates/`
+- **Ruby:** `lib/tina4/public/` or `src/templates/`
+- **Node:** `src/templates/` or `views/`
+- **Plain HTML:** the shared `<head>` include or index.html
+
+And the stylesheets:
+- Application CSS files
+- Any theme override that layers over `tina4.min.css`
+
+Read them. Extract:
+- `<html lang="...">` — present? correct?
+- Landmark elements (`<header>`, `<nav>`, `<main>`, `<footer>`) — present per template?
+- `<title>` pattern (static or dynamic per page)
+- `outline: none` usages without replacement focus rings
+- Any inline `onclick` handlers on non-interactive elements
+
+### 1.3 Run automated tools as a first pass
+
+Automated tools catch ~30–40% of accessibility issues. They are a first sweep, not a substitute for the manual audit.
+
+- **axe DevTools** — browser extension; the most reliable single tool. Run on every key page.
+- **Lighthouse (Chrome DevTools)** — accessibility category runs axe under the hood plus additional heuristics. A score of 100 is NOT the same as compliant.
+- **Pa11y** — CLI tool for CI integration.
+- **WAVE** — visual overlay browser extension.
+
+Report the tool findings; they seed the manual audit that follows.
+
+### 1.4 Report and proceed
+
+Report the audit results as a ✅/❌/⚠️ table before proceeding:
+
+```
+Accessibility Discovery Audit — [Project Name]
+
+Page structure:
+  <html lang>:              ✅ set to en-ZA on all templates
+  Skip link:                ❌ missing
+  Landmarks:                ⚠️ <main> missing on /contact
+  Unique page titles:       ✅
+
+Keyboard navigation:
+  Tab order:                ⚠️ 3 clickable divs found, no keyboard access
+  tabindex misuse:          ❌ tabindex="3" found on hero button
+  Modal focus trap:         ⚠️ native <dialog> not used; manual trap absent
+
+Focus indicators:
+  outline: none replaced:   ❌ 5 uses of outline:none without box-shadow
+
+Images and media:
+  Missing alt text:         ⚠️ 12 images across 4 pages
+  Decorative SVG marked:    ❌ 8 icon SVGs missing aria-hidden
+
+Forms:
+  Every input has label:    ⚠️ 4 inputs use placeholder as label
+  Error messages linked:    ❌ aria-describedby not used
+
+ARIA states:
+  Accordion aria-expanded:  ❌ static true, does not toggle
+  Modal aria-modal:         ✅
+  Toast role="status":      ❌ missing
+
+Colour contrast:
+  Body text on bg:          ✅ 13.2:1
+  Placeholder text:         ❌ 2.8:1 — below 3:1 minimum
+  Ghost button on white:    ❌ 2.4:1 — below 4.5:1
+
+Zoom and reflow:
+  320px width:              ⚠️ horizontal scroll on /products
+  400% zoom:                ✅
+
+Reduced motion:
+  prefers-reduced-motion:   ❌ no @media block found
+
+Automated tool results:
+  axe DevTools:             28 issues (9 critical, 12 serious, 7 moderate)
+  Lighthouse a11y score:    76 / 100
+
+Working through each item in priority order — CRITICAL first.
+```
+
+### 1.5 Scope checkpoint — wait for user signal
+
+After the audit table, ask the user how to proceed and **wait for a response** before writing any fixes. Do not silently proceed to Phase 2.
+
+**Preferred: use a structured-question tool** (`AskUserQuestion` in Claude Code, or the equivalent in the current agent harness) with these options:
+
+- **Fix everything** — all phases including optional
+- **AA-required** — everything WCAG 2.1 AA needs; skip OPTIONAL phases (enhanced SR support, forced-colors)
+- **Critical only** — page structure, keyboard, focus, images, forms; nothing else
+- **Let me scope** — user picks specifics via follow-up multi-select: skip checkout template, keep touch targets at 24×24, keep manual focus trap, only fix contrast, don't touch focus-ring styles
+
+**Fallback if no structured tool is available:** send the same question as a numbered prose list.
+
+Whichever path is used, also surface any decisions the skill cannot make alone — e.g. "brand accent #FAB033 fails contrast; darken to #E89A20, pair with a darker text token, or keep as-is with an exception note?" — using structured options where possible.
+
+**Wait for the response.** Gather scope decision + any pending decisions in ONE round trip, then proceed to Phase 2. On a subsequent run of this skill, this checkpoint fires again — the user always gets to steer.
diff --git a/.claude/skills/tina4-a11y/references/forms.md b/.claude/skills/tina4-a11y/references/forms.md
new file mode 100644
index 00000000..6f457efe
--- /dev/null
+++ b/.claude/skills/tina4-a11y/references/forms.md
@@ -0,0 +1,57 @@
+# Forms
+
+> Reference for the `tina4-a11y` skill: Phase 6 (forms, CRITICAL). Moved out of `SKILL.md` unchanged.
+
+## Phase 6 — CRITICAL: Forms
+
+### 6.1 Every input has an associated label
+
+Every `<input>`, `<textarea>`, and `<select>` must have a label via `for`/`id`, wrapping `<label>`, or `aria-labelledby`. `placeholder` is NOT a label substitute — it disappears when typing starts.
+
+```html
+<label for="email">Email</label>
+<input id="email" type="email" autocomplete="email">
+```
+
+### 6.2 Required fields
+
+Mark with `required` (or `aria-required="true"` for custom components). Never rely on an asterisk (*) alone — add `aria-label` including "required" or a `<span class="sr-only"> (required)</span>` after the label text.
+
+### 6.3 Error messages
+
+When a field has an error:
+- The error must be associated with the field via `aria-describedby`
+- `aria-invalid="true"` must be set on the field
+- The error must not rely on colour alone — include an icon or the word "Error:"
+
+```html
+<input id="email" type="email" aria-describedby="email-error" aria-invalid="true">
+<span id="email-error" role="alert">Error: Enter a valid email address.</span>
+```
+
+### 6.4 Grouped controls
+
+Checkboxes and radio buttons in a group must be wrapped in `<fieldset>` with a `<legend>` naming the group.
+
+### 6.5 Submit button
+
+Every form must have a clearly labelled submit button. Icon-only submit buttons must have `aria-label`.
+
+### 6.6 Autocomplete
+
+Personal data fields must have the appropriate `autocomplete` attribute (WCAG 1.3.5). Reference the MDN autocomplete token list. Common values:
+
+| Field type | `autocomplete` value |
+|-----------|---------------------|
+| Full name | `name` |
+| Given name | `given-name` |
+| Family name | `family-name` |
+| Email | `email` |
+| Phone | `tel` |
+| Street address | `street-address` |
+| Postal code | `postal-code` |
+| Country | `country-name` |
+| Current password | `current-password` |
+| New password | `new-password` |
+| One-time code | `one-time-code` |
+| Credit card number | `cc-number` |
diff --git a/.claude/skills/tina4-a11y/references/images-and-media.md b/.claude/skills/tina4-a11y/references/images-and-media.md
new file mode 100644
index 00000000..28072b8e
--- /dev/null
+++ b/.claude/skills/tina4-a11y/references/images-and-media.md
@@ -0,0 +1,27 @@
+# Images and media
+
+> Reference for the `tina4-a11y` skill: Phase 5 (images and non-text content, CRITICAL). Moved out of `SKILL.md` unchanged.
+
+## Phase 5 — CRITICAL: Images and non-text content
+
+### 5.1 `<img>` alt text
+
+For every `<img>` tag:
+- Decorative images (icons, dividers, backgrounds): `alt=""` (empty string, not missing)
+- Informative images: `alt` describing what the image conveys, not what it looks like ("Revenue chart showing 42% growth in Q3", not "chart.png")
+- Linked images: `alt` describes the link destination ("Go to homepage"), not the image
+
+### 5.2 `<svg>` used as an icon or illustration
+
+- Decorative: `aria-hidden="true"` + `focusable="false"`
+- Meaningful: `role="img"` + `aria-label="[description]"` on the SVG, or `<title>` as the first child of the SVG element
+
+### 5.3 CSS background-image conveying information
+
+CSS backgrounds cannot be described to screen readers. If a `background-image` conveys information (not just decoration), replace it with an `<img>` with alt text.
+
+### 5.4 Video and audio
+
+- Audio: transcript or accessible text equivalent
+- Video: captions via `<track kind="captions">` inside `<video>` — not auto-generated
+- Purely decorative video: `aria-hidden="true"` and no audio track
diff --git a/.claude/skills/tina4-a11y/references/interactive-semantics.md b/.claude/skills/tina4-a11y/references/interactive-semantics.md
new file mode 100644
index 00000000..2bd0cd83
--- /dev/null
+++ b/.claude/skills/tina4-a11y/references/interactive-semantics.md
@@ -0,0 +1,82 @@
+# Interactive element semantics
+
+> Reference for the `tina4-a11y` skill: Phase 9 (interactive element semantics, HIGH — including Label in Name 2.5.3 and Content on hover/focus 1.4.13). Moved out of `SKILL.md` unchanged.
+
+## Phase 9 — HIGH PRIORITY: Interactive element semantics
+
+### 9.1 Buttons vs links
+
+- `<a>` (link): navigates to a URL. Must have `href`. If it has no `href`, it is not a link — change to `<button>`.
+- `<button>`: performs an action (submit, open modal, toggle menu). Does not navigate.
+- Find every `<a>` used for actions (`href="javascript:void(0)"`, `href="#"`, `onclick`) and replace with `<button>`.
+- Find every `<div>` or `<span>` used as a button and replace with a native `<button>`.
+
+### 9.2 Icon-only buttons
+
+Every button that shows only an icon and no visible text must have `aria-label`:
+
+```html
+<button aria-label="Close menu">
+  <svg aria-hidden="true" focusable="false">...</svg>
+</button>
+```
+
+### 9.3 Link purpose
+
+Every `<a>` must make sense out of context. "Click here", "Read more", and "Learn more" are not accessible — the link text or its `aria-label` must describe the destination.
+
+For "Read more" links in card lists, use `aria-label` to add context:
+```html
+<a href="/post/1" aria-label="Read more about Cape Brew Co case study">Read more</a>
+```
+
+### 9.4 The `title` attribute is not an accessible label
+
+`title` shows a browser tooltip on hover only — it is inaccessible to keyboard, touch, and inconsistent for screen readers.
+
+- Find every `title` on interactive elements: `<button title="...">`, `<a title="...">`, `<input title="...">`
+- If the title carries essential information: replace with `aria-label`, `aria-describedby` + a visible or `.sr-only` element, or a proper visible label
+- `title` on `<iframe>` is REQUIRED and correct — keep those
+
+### 9.5 Label in Name (WCAG 2.5.3, Level A)
+
+When a control has BOTH visible text AND an accessible name (`aria-label` / `aria-labelledby`), the visible text must be contained — word-for-word — within the accessible name. Voice-control users say what they see ("click Submit"); if the accessible name doesn't contain the visible label, the command fails silently.
+
+**The common failure:**
+```html
+<!-- BROKEN: visible text "Submit" is not in the accessible name "Send form" -->
+<button aria-label="Send form">Submit</button>
+
+<!-- BROKEN: visible text "Get started" not in the accessible name -->
+<a href="/signup" aria-label="Create your account">Get started</a>
+```
+
+**The fix — the accessible name must start with (or contain) the visible text:**
+```html
+<button aria-label="Submit registration">Submit</button>   <!-- "Submit" is contained ✓ -->
+<a href="/signup" aria-label="Get started with a free account">Get started</a>  <!-- ✓ -->
+```
+
+**Audit rule:** find every interactive element that has both visible text content AND an `aria-label` / `aria-labelledby`. For each, confirm the visible text string is a substring of the accessible name (case-insensitive). Where it isn't, either extend the aria-label to include the visible text, or drop the aria-label if the visible text alone is a sufficient name. Icon-only buttons (no visible text) are exempt — 9.2 already covers them.
+
+### 9.6 Content on hover or focus (WCAG 1.4.13, Level AA)
+
+Any content that appears on hover or focus — tooltips, custom dropdowns, popovers, definition bubbles — must satisfy three behaviours:
+
+1. **Dismissable** — the user can dismiss it with `Escape` (or moving focus) WITHOUT moving the pointer. A tooltip that only disappears when the mouse leaves fails this.
+2. **Hoverable** — the user can move the pointer onto the appeared content without it vanishing (so they can read a tooltip that overlaps other content, or click a link inside a popover).
+3. **Persistent** — it stays visible until the user dismisses it, moves focus/hover away, or the information is no longer valid. It must not auto-hide on a timer.
+
+```js
+// Dismissable: Escape closes the tooltip without the pointer moving
+tooltipTrigger.addEventListener('keydown', e => {
+  if (e.key === 'Escape') hideTooltip();
+});
+```
+```css
+/* Hoverable: a gap-free bridge so moving onto the tooltip doesn't trigger mouseleave.
+   Keep the tooltip inside the trigger's hover region, or add an invisible bridge. */
+.tooltip { pointer-events: auto; }
+```
+
+**Audit rule:** for every hover/focus-triggered popover, verify Escape dismisses it, the pointer can reach it, and nothing auto-hides it on a timeout. CSS-only `:hover` tooltips usually fail Dismissable and Hoverable — flag them and add the JS behaviours.
diff --git a/.claude/skills/tina4-a11y/references/keyboard-and-focus.md b/.claude/skills/tina4-a11y/references/keyboard-and-focus.md
new file mode 100644
index 00000000..520f9ce2
--- /dev/null
+++ b/.claude/skills/tina4-a11y/references/keyboard-and-focus.md
@@ -0,0 +1,100 @@
+# Keyboard and focus
+
+> Reference for the `tina4-a11y` skill: Phase 3 (keyboard navigation, CRITICAL) and Phase 4 (visible focus indicators, CRITICAL). Moved out of `SKILL.md` unchanged.
+
+## Phase 3 — CRITICAL: Keyboard navigation
+
+Every action available by mouse must be reachable and operable by keyboard alone.
+
+### 3.1 Tab order audit
+
+Tab through every page. Report:
+- Elements that receive focus but should not (`div`, `span`, or `img` with `tabindex="0"`)
+- Interactive elements that do not receive focus (clickable `div`s, `span`s, or `<a>` with no `href`)
+- Focus order that does not follow visual reading order (top-left → bottom-right)
+
+### 3.2 `tabindex` rules
+
+- `tabindex="0"` — use only on elements that are genuinely interactive and cannot be a native `<button>` or `<a>`
+- `tabindex="-1"` — use for elements that receive programmatic focus only (modal dialogs, skip-link targets)
+- `tabindex` > 0 — forbidden. Breaks the natural tab order.
+
+### 3.3 Keyboard operability for custom components
+
+For any interactive element that is not a native HTML control, implement the expected keyboard behaviour:
+
+| Component | Expected keys |
+|-----------|--------------|
+| Button (custom) | `Enter` and `Space` activate |
+| Link (custom) | `Enter` activates |
+| Dropdown menu | `Enter`/`Space` open; arrow keys navigate items; `Escape` closes |
+| Modal / dialog | `Escape` closes; focus trapped inside while open |
+| Accordion | `Enter`/`Space` toggle panel; arrow keys move between headers |
+| Tabs | Arrow keys switch tabs; `Enter`/`Space` activate |
+| Checkbox (custom) | `Space` toggles |
+| Date picker | Arrow keys navigate calendar; `Escape` closes; `Enter` selects |
+
+### 3.4 Focus trap in modals — prefer native `<dialog>`
+
+Modern browsers handle focus trap, backdrop, and Escape automatically when the dialog is opened with `.showModal()`:
+
+```html
+<dialog id="my-dialog" aria-labelledby="dialog-title">
+  <h2 id="dialog-title">Confirm delete</h2>
+  <button type="button" onclick="this.closest('dialog').close()">Cancel</button>
+  <button type="button">Delete</button>
+</dialog>
+```
+```js
+document.getElementById('my-dialog').showModal();  // focus trap free
+```
+
+Only implement the manual trap pattern below when using a custom overlay that cannot be a native `<dialog>` (non-modal drawers, custom in-page popovers):
+
+```js
+function trapFocus(element) {
+  const focusable = element.querySelectorAll(
+    'a[href], button:not([disabled]), input:not([disabled]), ' +
+    'select:not([disabled]), textarea:not([disabled]), [tabindex="0"]'
+  );
+  const first = focusable[0];
+  const last = focusable[focusable.length - 1];
+  element.addEventListener('keydown', e => {
+    if (e.key !== 'Tab') return;
+    if (e.shiftKey) {
+      if (document.activeElement === first) { e.preventDefault(); last.focus(); }
+    } else {
+      if (document.activeElement === last) { e.preventDefault(); first.focus(); }
+    }
+  });
+}
+```
+
+Return focus to the triggering element when the dialog closes.
+
+---
+
+## Phase 4 — CRITICAL: Visible focus indicators
+
+Every focusable element must show a clearly visible focus indicator. `outline: none` with no replacement fails WCAG 2.4.7.
+
+1. Find every instance of `outline: none` or `outline: 0` in the stylesheets.
+2. For each: check whether a replacement focus indicator exists (a `box-shadow`, a `border`, a background change). If not, add one.
+3. The replacement must have a contrast ratio of at least 3:1 against the adjacent colour (WCAG 1.4.11).
+
+Recommended pattern using the DESIGN.md token system:
+
+```css
+:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px var(--accent-tint, rgba(0,0,0,0.1)),
+              0 0 0 1px var(--accent, #000);
+}
+
+/* Remove the ring on mouse clicks but keep it for keyboard */
+:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+```
+
+Never use `:focus` alone to suppress the ring — use `:focus:not(:focus-visible)` so keyboard users still see it.
diff --git a/.claude/skills/tina4-a11y/references/landmarks-and-structure.md b/.claude/skills/tina4-a11y/references/landmarks-and-structure.md
new file mode 100644
index 00000000..14698921
--- /dev/null
+++ b/.claude/skills/tina4-a11y/references/landmarks-and-structure.md
@@ -0,0 +1,89 @@
+# Landmarks and structure
+
+> Reference for the `tina4-a11y` skill: Phase 2 (page structure and landmarks, CRITICAL) and Phase 14 (heading hierarchy, MEDIUM). Moved out of `SKILL.md` unchanged.
+
+## Phase 2 — CRITICAL: Page structure and landmarks
+
+Screen readers and keyboard users navigate by landmarks. Without them, the page is a flat wall of content.
+
+### 2.1 `<html lang="...">` — required on every page
+
+Every `<html>` element must have a valid BCP 47 language code — e.g. `lang="en-ZA"`, `lang="en-US"`, `lang="fr"`, `lang="de"`. A missing `lang` means screen readers may read the page in the wrong language. For right-to-left languages (Arabic, Hebrew, Persian), also add `dir="rtl"`.
+
+Inline content in a different language than the page must carry its own `lang` attribute:
+```html
+<p>The French say <span lang="fr">c'est la vie</span> when things go wrong.</p>
+```
+
+### 2.2 Landmark roles
+
+Every page must use these semantic elements correctly:
+
+| Element | Rule |
+|---------|------|
+| `<header>` | Site header at the document root (implicit `role="banner"`). Do NOT add `role="banner"` to nested `<header>` inside `<article>` or `<section>` — those don't get the role. |
+| `<nav>` | Every distinct nav must have a unique `aria-label` — `aria-label="Main"`, `aria-label="Footer"`, `aria-label="Breadcrumb"`. |
+| `<main>` | Primary content area — exactly one per page. |
+| `<aside>` | Supplementary content (sidebars, related links). |
+| `<footer>` | Site footer. |
+| `<section>` | Must have an accessible name via `aria-labelledby` pointing to its heading, or `aria-label` if it has no visible heading. |
+
+Report every page where any of these are missing or misused, and fix the templates directly.
+
+### 2.3 Skip navigation link
+
+The first focusable element on every page must be a "Skip to main content" link. It may be visually hidden until focused:
+
+```html
+<a class="skip-link" href="#main-content">Skip to main content</a>
+```
+
+```css
+.skip-link {
+  position: absolute;
+  top: -100%;
+  left: var(--space-4, 1rem);
+  padding: var(--space-2, 0.5rem) var(--space-4, 1rem);
+  background: var(--accent, #000);
+  color: #fff;
+  font-weight: 600;
+  border-radius: 0 0 4px 4px;
+  text-decoration: none;
+  z-index: 9999;
+  transition: top 0.2s;
+}
+.skip-link:focus {
+  top: 0;
+}
+```
+
+On the `<main>` element: `id="main-content"` with `tabindex="-1"` so it receives programmatic focus without joining the tab order.
+
+### 2.4 Unique page titles
+
+Every page must have a unique, descriptive `<title>` tag. Format: `[Page name] — [Site name]`. A site-wide title repeated on every page ("My Website") fails WCAG 2.4.2 — screen readers announce it on every navigation.
+
+### 2.5 `aria-current="page"` on nav links
+
+The nav link pointing to the current page must carry `aria-current="page"`. Screen readers announce it as "current page":
+
+```html
+<nav aria-label="Main">
+  <a href="/">Home</a>
+  <a href="/products" aria-current="page">Products</a>
+  <a href="/contact">Contact</a>
+</nav>
+```
+
+---
+
+## Phase 14 — MEDIUM PRIORITY: Heading hierarchy
+
+Screen readers use headings as a page table of contents. A broken hierarchy is one of the most common failures (WCAG 1.3.1 Info and Relationships).
+
+1. List every heading in document order per template.
+2. Check:
+   - Exactly one `<h1>` per page — the page's primary topic
+   - No skipped levels (H1 → H3 without an H2)
+   - Headings used for structure, not visual size
+3. Fix violations directly in the templates.
diff --git a/.claude/skills/tina4-a11y/references/validation-and-handoff.md b/.claude/skills/tina4-a11y/references/validation-and-handoff.md
new file mode 100644
index 00000000..ef53d07d
--- /dev/null
+++ b/.claude/skills/tina4-a11y/references/validation-and-handoff.md
@@ -0,0 +1,209 @@
+# Validation and handoff
+
+> Reference for the `tina4-a11y` skill: Phase 20 (validation and handoff), the DESIGN.md accessibility section, the plan structure, the relationship to other tina4 skills, and the avoid-list. Moved out of `SKILL.md` unchanged.
+
+## Phase 20 — Validation and handoff
+
+### 20.1 Manual keyboard walkthrough
+
+Do a keyboard-only walkthrough of one full user journey per key page. If you can complete the primary action (buy, sign up, contact) using only Tab/Shift-Tab/Enter/Escape/arrow keys, that page passes the keyboard gate. If you can't, name the block.
+
+### 20.2 Screen reader walkthrough
+
+Do a screen reader walkthrough with:
+- **NVDA** (Windows, free) — most common testing target
+- **VoiceOver** (Mac, built-in) — `Cmd+F5` to toggle
+- **Orca** (Linux, built-in)
+
+Test at least: page load announcement (title + landmarks), main navigation, one form submission, one modal open/close.
+
+### 20.3 Re-run automated tools
+
+After fixes:
+- axe DevTools — target zero critical/serious issues
+- Lighthouse a11y score — target 95+
+- Pa11y — clean run in CI
+
+### 20.4 Handoff report
+
+Generate a complete audit summary in this format. Every cell contains a real value — never "see above" or "completed".
+
+```
+## Accessibility Audit Report — [Project Name]  [date]  WCAG 2.1 Level AA
+
+### Page structure and landmarks
+<html lang>:              ✅ en-ZA on all templates
+Skip link:                ✅ implemented on base template
+Landmarks:                ✅ header/nav/main/footer on all pages
+Unique page titles:       ✅ per-page dynamic
+aria-current on nav:      ✅
+
+### Keyboard navigation
+Tab order:                ✅ logical, top-left → bottom-right
+No tabindex > 0:          ✅
+Custom components:        ✅ Enter/Space/arrow/Escape wired
+Modal focus trap:         ✅ native <dialog> used
+
+### Focus indicators
+outline: none replaced:   ✅ 5 sites patched with box-shadow focus ring
+:focus-visible pattern:   ✅
+
+### Images and media
+img alt text:             ✅ 12 corrected
+SVG icons:                ✅ 8 marked aria-hidden
+Video captions:           ✅ / N/A
+
+### Forms
+Labels on every input:    ✅
+Required indicators:      ✅ visible + sr-only "required"
+Error messages linked:    ✅ aria-describedby + aria-invalid
+Autocomplete tokens:      ✅
+
+### ARIA states
+Accordion:                ✅ aria-expanded toggles
+Modal:                    ✅ aria-modal + aria-labelledby
+Tabs:                     ✅ role=tablist / tab / tabpanel
+Toast:                    ✅ role=status + aria-live=polite
+
+### Colour contrast (WCAG 1.4.3)
+Body on bg:               ✅ 13.2:1
+Body on surface:          ✅ 10.4:1
+Placeholder:              ✅ 4.6:1 (fixed from 2.8:1)
+Ghost button:             ✅ 4.7:1 (fixed from 2.4:1)
+Semantic colours:         ✅ all pairs ≥ 4.5:1
+
+### Interactive semantics
+Label in Name (2.5.3):    ✅ visible text contained in every accessible name
+Hover/focus content (1.4.13): ✅ dismissable + hoverable + persistent
+
+### Zoom and reflow
+320px width:              ✅ single column, no h-scroll
+400% zoom:                ✅ reflows without clipping
+Orientation (1.3.4):      ✅ no portrait/landscape lock
+
+### Text spacing (WCAG 1.4.12)
+User-override safe:       ✅ min-height used, no clipping
+
+### Reduced motion
+@media prefers-reduced:   ✅ tokens redefined to 0ms
+JS animations gated:      ✅
+
+### Touch targets
+44×44 minimum:            ✅ / ⚠️ [N] icon buttons padded
+
+### Automated tools
+axe DevTools:             ✅ 0 critical, 0 serious
+Lighthouse a11y:          ✅ 98 / 100
+Pa11y:                    ✅ clean
+
+### Manual walkthroughs
+Keyboard only:            ✅ full purchase flow completed
+Screen reader (NVDA):     ✅ page load + form + modal announced correctly
+
+### Files changed
+[List every file that was created or modified]
+- src/templates/main.html — lang, skip link, landmarks, aria-current
+- src/templates/checkout.html — form labels, aria-describedby errors
+- public/css/app.css — focus-visible pattern, prefers-reduced-motion tokens
+- public/js/modal.js — replaced manual trap with <dialog>.showModal()
+- DESIGN.md — WCAG section appended
+```
+
+---
+
+## DESIGN.md accessibility section
+
+Append the following to `design/DESIGN.md` once the audit is complete:
+
+```markdown
+## Accessibility (WCAG 2.1 AA)
+
+### Contrast ratios verified
+- [pair]: [ratio]  ✅
+(repeat for every audited pair)
+
+### Focus ring
+Token: --focus-ring
+Value: [computed value]
+Contrast against adjacent: [ratio] ✅
+
+### Touch target minimum
+[24×24 WCAG only / 44×44 mobile best-practice]
+
+### Reduced motion
+Duration tokens redefined to 0ms under prefers-reduced-motion.
+
+### Automated tool baseline
+axe: 0 critical, 0 serious   Lighthouse: 98/100   Pa11y: clean
+
+### Screen reader coverage
+NVDA / VoiceOver walkthroughs completed on [pages listed]
+
+### Key decisions
+- [date]: [decision] — [reason]
+```
+
+---
+
+## Plan structure
+
+Create `plan/a11y/PLAN.md` in the project:
+
+```markdown
+# Accessibility Plan — [Project Name]
+
+**Outcome:** WCAG 2.1 Level AA compliance — page structure, keyboard navigation, focus
+indicators, ARIA states, colour contrast, forms, zoom/reflow, reduced motion, touch targets.
+Every finding fixed and verified via manual walkthrough + automated tools.
+
+## Scope
+- [ ] Phase 1: Discovery audit — current state documented, automated tools run
+- [ ] Phase 2: Page structure and landmarks (CRITICAL)
+- [ ] Phase 3: Keyboard navigation (CRITICAL)
+- [ ] Phase 4: Focus indicators (CRITICAL)
+- [ ] Phase 5: Images and non-text content (CRITICAL)
+- [ ] Phase 6: Forms (CRITICAL)
+- [ ] Phase 7: ARIA states and properties (HIGH)
+- [ ] Phase 8: Colour contrast (HIGH)
+- [ ] Phase 9: Interactive element semantics — incl. Label in Name (2.5.3) + Content on hover/focus (1.4.13) (HIGH)
+- [ ] Phase 10: Live regions and dynamic content (MEDIUM)
+- [ ] Phase 11: Tables (MEDIUM)
+- [ ] Phase 12: Reduced motion (MEDIUM)
+- [ ] Phase 13: Touch target sizes (MEDIUM)
+- [ ] Phase 14: Heading hierarchy (MEDIUM)
+- [ ] Phase 15: Zoom and reflow — incl. Orientation (1.3.4) (HIGH)
+- [ ] Phase 16: Text spacing (HIGH)
+- [ ] Phase 17: Time and motion limits (MEDIUM)
+- [ ] Phase 18: Enhanced screen reader support (OPTIONAL)
+- [ ] Phase 19: High contrast mode (OPTIONAL)
+- [ ] Phase 20: Validation and handoff — walkthroughs + report
+
+## Bugs
+(none yet)
+
+## Commits
+(none yet)
+
+## Status: Not Started
+```
+
+---
+
+## Relationship to other tina4 skills
+
+| Skill | Relationship |
+|-------|-------------|
+| **tina4-design** | Runs first. tina4-a11y reads DESIGN.md as its source of truth — focus ring token, contrast ratios, touch target minimum, motion personality. Never duplicate intake. |
+| **tina4-developer-*** | Implements the template and stylesheet changes. tina4-a11y tells the developer what to add and where; the developer skill handles framework-specific wiring. |
+| **tina4-seo** | Runs alongside for complete coverage. Overlap: alt text, semantic HTML, page titles, `<html lang>`. If both are running, do those items once in whichever runs first. tina4-a11y owns keyboard navigation, ARIA, focus, contrast, forms, zoom/reflow. |
+
+## Avoid these defaults
+
+- Do not add `aria-*` attributes as a substitute for semantic HTML — a `<button>` beats `<div role="button">`
+- Do not add `tabindex="0"` to make a `<div>` focusable — use a `<button>` instead
+- Do not use `title` attributes as tooltips or labels — they are inaccessible
+- Do not use `outline: none` without a replacement focus indicator
+- Do not rely on colour alone to convey meaning
+- Do not implement custom modal focus traps when `<dialog>.showModal()` will do
+- Do not run only the automated tools and call the audit done — they catch ~30–40% of issues
+- Do not mark an item complete without a manual verification (keyboard walkthrough or screen reader test)
diff --git a/.claude/skills/tina4-a11y/references/zoom-reflow-motion.md b/.claude/skills/tina4-a11y/references/zoom-reflow-motion.md
new file mode 100644
index 00000000..89d41351
--- /dev/null
+++ b/.claude/skills/tina4-a11y/references/zoom-reflow-motion.md
@@ -0,0 +1,177 @@
+# Zoom, reflow, motion and sensory
+
+> Reference for the `tina4-a11y` skill: Phase 12 (reduced motion, MEDIUM), Phase 13 (touch target sizes, MEDIUM), Phase 15 (zoom and reflow, HIGH — including Orientation 1.3.4), Phase 16 (text spacing, HIGH), Phase 17 (time and motion limits, MEDIUM), Phase 18 (enhanced screen reader support, OPTIONAL) and Phase 19 (high contrast mode, OPTIONAL). Moved out of `SKILL.md` unchanged.
+
+## Phase 12 — MEDIUM PRIORITY: Reduced motion (WCAG 2.3.3)
+
+Users with vestibular disorders can be harmed by excessive animation. Every animation must respect `prefers-reduced-motion`.
+
+### 12.1 Global CSS rule
+
+```css
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+```
+
+If using CSS custom properties for durations (e.g. `--duration-base: 200ms`), redefining the duration tokens to `0ms` inside this media query is preferable — it keeps component code clean.
+
+### 12.2 JavaScript-driven animation
+
+For scroll-triggered reveals, parallax, auto-playing carousels:
+
+```js
+const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+if (!prefersReduced) {
+  // run the animation
+}
+```
+
+### 12.3 Auto-playing carousels
+
+Add a pause button and start paused when `prefers-reduced-motion` is set.
+
+---
+
+## Phase 13 — MEDIUM PRIORITY: Touch target sizes
+
+WCAG 2.1 AA (SC 2.5.5 — AAA in 2.1, promoted to AA in WCAG 2.2 as SC 2.5.8) requires interactive targets of at least **24×24 CSS pixels**. The practical mobile minimum is **44×44px** — used by iOS Human Interface Guidelines and Material Design — and this audit holds elements to that target unless the developer explicitly opts to the WCAG-only 24×24 minimum.
+
+1. Find every `<button>`, `<a>`, `<input>`, `<select>`, custom toggle, and icon button.
+2. Check the computed height and width. A visually small element can meet the target with padding:
+
+```css
+.icon-button {
+  min-width: 44px;
+  min-height: 44px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+```
+
+3. Report every element below the chosen minimum and fix with padding rather than changing visual size.
+
+---
+
+## Phase 15 — HIGH PRIORITY: Zoom and reflow (WCAG 1.4.10)
+
+Content must reflow without loss of information or functionality at 320 CSS pixel width (mobile) and up to 400% browser zoom.
+
+1. Test every page at 320px viewport width — must be readable and usable without horizontal scrolling. Horizontal scroll is only permitted on individual wide elements (tables, code blocks, diagrams) inside their own `overflow-x: auto` container.
+2. Test at 400% browser zoom on a 1280px viewport — content must reflow to a single column with no clipped text or overlapping elements.
+3. Fixed-position headers or overlays that eat viewport space at zoom are a common failure — check they collapse or use dynamic sizing.
+
+### 15.4 Orientation (WCAG 1.3.4, Level AA)
+
+Content must not restrict its view and operation to a single display orientation (portrait or landscape) unless a specific orientation is essential (e.g. a piano app, a cheque-scanning frame).
+
+- Check the CSS for orientation locks — `@media (orientation: portrait)` / `(orientation: landscape)` blocks that hide content or show a "please rotate your device" gate
+- Check the PWA manifest — `"orientation": "portrait"` or `"landscape"` locks the installed app. Use `"any"` unless a lock is genuinely essential
+- Both portrait and landscape must present the same content and functionality
+
+---
+
+## Phase 16 — HIGH PRIORITY: Text spacing (WCAG 1.4.12)
+
+Users must be able to override text spacing without content being clipped or overlapping. Test with a browser extension or user CSS setting:
+
+- `line-height: 1.5 * font-size`
+- `letter-spacing: 0.12 * font-size`
+- `word-spacing: 0.16 * font-size`
+- Paragraph spacing: `2 * font-size`
+
+Fix any component whose fixed `height` clips text under these settings — replace `height` with `min-height` and let content grow.
+
+---
+
+## Phase 17 — MEDIUM PRIORITY: Time and motion limits
+
+### 17.1 Auto-updating content (WCAG 2.2.4)
+
+Carousels, tickers, news feeds must have controls to pause, stop, or hide the update.
+
+### 17.2 Session timeouts (WCAG 2.2.1)
+
+If the site logs users out after inactivity, warn the user with at least 20 seconds to extend.
+
+### 17.3 No flashing content (WCAG 2.3.1)
+
+No content may flash more than three times per second. This includes attention-grabbing animations, video content (warn about photosensitive content when user-uploaded), and rapidly oscillating loading spinners.
+
+---
+
+## Phase 18 — OPTIONAL: Enhanced screen reader support
+
+These go beyond AA compliance but meaningfully improve the screen reader experience.
+
+### 18.1 Breadcrumbs
+
+```html
+<nav aria-label="Breadcrumb">
+  <ol>
+    <li><a href="/">Home</a></li>
+    <li><a href="/products">Products</a></li>
+    <li aria-current="page">Widget Pro</li>
+  </ol>
+</nav>
+```
+
+### 18.2 Pagination
+
+Wrap in `<nav aria-label="Pagination">`. Mark current page with `aria-current="page"`. Disabled previous/next: `aria-disabled="true"` on `<a>` tags (or native `disabled` on `<button>`).
+
+### 18.3 Status badges and chips
+
+If a badge communicates status a sighted user reads visually (green "Active" badge), ensure the text label is present — not just the colour dot.
+
+### 18.4 `aria-describedby` for complex fields
+
+If a field has helper text beneath it, link it: `aria-describedby="helper-id"` on the input, `id="helper-id"` on the helper. Screen readers then announce helper text after the label.
+
+### 18.5 PDF and document links
+
+Indicate non-HTML file types in link text or with a visually hidden span:
+```html
+<a href="/report.pdf">
+  Annual Report 2025
+  <span class="sr-only">(PDF, opens in new tab)</span>
+</a>
+```
+
+### 18.6 `target="_blank"`
+
+Links that open a new tab must warn:
+```html
+<a href="https://example.com" target="_blank" rel="noopener noreferrer">
+  Visit our partner site
+  <span class="sr-only">(opens in new tab)</span>
+</a>
+```
+
+---
+
+## Phase 19 — OPTIONAL: High contrast mode (Forced Colors)
+
+Windows High Contrast Mode (Forced Colors) overrides CSS colours with system colours. Components that rely entirely on `background-image`, `box-shadow`, or `filter` for their visual state become invisible.
+
+1. Check every interactive state (focus ring, button hover, checkbox tick, toggle track) for reliance on colour that would be overridden.
+2. Use `@media (forced-colors: active)` to restore meaningful indicators:
+
+```css
+@media (forced-colors: active) {
+  .custom-checkbox::after {
+    /* box-shadow is overridden in forced-colors — use border instead */
+    border: 2px solid ButtonText;
+  }
+  :focus-visible {
+    outline: 2px solid Highlight;
+    outline-offset: 2px;
+  }
+}
+```
diff --git a/.claude/skills/tina4-design/SKILL.md b/.claude/skills/tina4-design/SKILL.md
index a73a3de9..bb12847f 100644
--- a/.claude/skills/tina4-design/SKILL.md
+++ b/.claude/skills/tina4-design/SKILL.md
@@ -1,7 +1,7 @@
 ---
 name: tina4-design
 description: Use whenever a project needs a visual identity or design system — from scratch or from an existing logo. Triggers: "build me a brand", "create brand guidelines", "we need a UI guide", "design system", "I have a logo", "what should our brand look like", "design our app", "brand this project". Covers the full chain — client intake → market research → design system decisions → brand guidelines document → interactive UI component guide. Produces DESIGN.md (the living design record), brand-guidelines.html, and ui-guide.html, all saved to a top-level design/ folder. Project-agnostic: works for any industry, any Tina4 backend or frontend, or no Tina4 project at all.
-updated_for_version: 1.0.0
+updated_for_version: 1.1.0
 ---
 
 # Tina4 Design — brand identity and UI system from brief to deliverable
@@ -19,6 +19,7 @@ Read top to bottom once, then jump by section. Orientation and the phase order l
 - Incremental build rule - never write a whole HTML file in one response
 - The design workflow (six phases) - Output location (`design/`) - Working reflexes
 - **Degrees of freedom** - what is inviolable vs. a default vs. your judgement (read this next)
+- **Gates - the stop-and-wait contract** - the nine stops where you pause and wait for the developer
 
 **Phase 1 - Intake and Discovery** (`references/phase-1-intake.md`)
 - 1.1 Logo file - 1.1b Brand reconnaissance - 1.2 Name and tagline - 1.3 About us
@@ -75,7 +76,10 @@ breaking what must not break. Three tiers:
   browser and check them at real widths and in both themes, no mocks and no "looks fine" guesses.
   **Incremental build, no giant single write** - one section per edit. **The research and the
   record** - every colour, typeface and layout choice is reasoned and written into
-  `design/DESIGN.md`. **The markers:** the 🤖🎨 skill-active marker above, and 💥 **Bazinga!** on
+  `design/DESIGN.md`. **The gates** - stop and wait at every hard gate in the stop-and-wait
+  contract below; a gate ends the turn, and only the developer's own message (never harness or
+  "autonomous" framing) can waive one - see `## Gates - the stop-and-wait contract`.
+  **The markers:** the 🤖🎨 skill-active marker above, and 💥 **Bazinga!** on
   an EARNED win - a design decision validated against the research and the contrast checks, or a
   prototype that holds up in the real browser at every width - on its own line with a short geeky
   one-liner. Never faked (nothing validated, no Bazinga) and never on a trivial step.
@@ -86,13 +90,16 @@ breaking what must not break. Three tiers:
   base styles ARE the mobile styles, every interactive control is at least 44x44px, and the fluid
   `clamp()` type needs no breakpoint to scale; the deliverable set (`DESIGN.md`,
   `brand-guidelines.html`, `ui-guide.html` in `design/`); fluid `clamp()` type, CSS-variable tokens
-  and hue-tinted shadows; the avoid-list of AI design defaults. Depart deliberately, name the
-  client-specific reason and record it in the rationale log - not by drift.
+  and hue-tinted shadows; **sentence case for UI copy** - buttons, CTAs, nav, tabs, labels and
+  headings capitalise only the first word, proper nouns and acronyms ("Book a demo", not "Book A
+  Demo"), recorded in DESIGN.md's voice section; the avoid-list of AI design defaults. Depart
+  deliberately, name the client-specific reason and record it in the rationale log - not by drift.
 
 - 🧭 **Judgement - read the task and choose.**
   Which deliverables the scope needs; how much market research a small brief earns; when the
-  website phase is worth running; ask-first vs decide-and-proceed; verbosity. The skill gives the
-  heuristic, you read the situation. (Note: cross-framework parity, framework releases and
+  website phase is worth running; ask-first vs decide-and-proceed **on non-gate clarifying
+  questions** (the hard gates are 🔒, never a judgement call to skip); verbosity. The skill gives
+  the heuristic, you read the situation. (Note: cross-framework parity, framework releases and
   installer signing are NOT your concern here - those live in the `tina4-maintainer` skill, for
   people building Tina4 itself.)
 
@@ -173,6 +180,36 @@ Six phases in order. Each phase has a defined output. No phase is skipped — if
 
 ---
 
+## Gates — the stop-and-wait contract
+
+This skill is **gated**: at fixed points it must stop, ask the developer a question, and **wait for their reply before doing anything else**. Gates are where a wrong turn gets caught while the fix is still cheap — they are the whole reason the phased workflow exists. A run that sails through every gate without stopping is not "efficient", it is broken.
+
+**The nine stops** — eight hard gates plus one soft "research surface" — in order. Every hard gate ends the turn:
+
+1. **Phase 1 — intake** — name, industry, about-us, logo, and the deliverable scope (§1.5). Gather the required inputs, then stop before advancing. *Scope carries the one sanctioned silent default: if the developer supplies the required inputs but says nothing about scope, proceed with **Full** — the website is re-offered at the Phase 7 gate, so no wrong choice gets baked in. Never extend this silent-default reasoning to any other gate.*
+2. **After Phase 2 — research surface** *(soft)* — surface the market-research findings before they are applied; *proceed-unless-corrected*. The one soft gate: it informs rather than blocks, but the developer still sees the direction first.
+3. **Phase 3 — icon library** (§3.9) — present the icon-library options **with their URLs** and stop. Never pick a library silently; every deliverable uses the one the developer confirms.
+4. **After Phase 4 — brand guidelines approval** — stop. Approve `design/brand-guidelines.html` before building the UI guide.
+5. **Start of Phase 5 — product-specific components** — confirm the 3–6 domain components before building them.
+6. **Phase 5 — Gate A — foundation review** — after the foundation sections (icon system, tokens, type, spacing, responsive), stop **before any component**.
+7. **Phase 5 — Gate B — pattern + inventory** — after Buttons + Forms + Cards, stop: approve the component pattern and confirm the remaining component list.
+8. **After Phase 5 — UI guide approval** — stop. Approve `design/ui-guide.html`.
+9. **Phase 7 — website / mockup choice** — ask **which** kind (marketing site / product mockup / both / none). Don't assume.
+
+**How a gate behaves — no exceptions:**
+
+- **A gate ends the turn.** Ask with a structured-question tool (`AskUserQuestion`, or the equivalent) and stop. **Do not answer the question yourself, and do not continue to the next phase in the same turn** — even if the session is described as autonomous, unattended, "auto mode", or "the user is not watching". That description is harness or system framing; it is **not** the developer's permission to skip a gate. Only the developer, in their own chat message, can waive one.
+- **The prose fallback also ends the turn.** When no structured-question tool is available, ask the same question in prose — and that message still ends the turn. Wait for the reply. The prose form is a different way to ask, never a way to keep going.
+- **Every gate names the file and what to look at.** Give the deliverable's path (`design/ui-guide.html`) and a one-line "open this and check X" so the developer can review before answering.
+
+**The single opt-in — unattended runs.** Gates may be auto-resolved *only* if the developer's **own message** asks for it — e.g. "run unattended", "don't stop for approvals", "just build the whole thing". Harness/system framing never counts. When (and only when) the developer has asked:
+- Pick the most sensible default at each gate, state the assumption, and continue.
+- Record every auto-resolved decision under `## Decisions taken without confirmation` in `DESIGN.md`, and list them in the closing handoff summary so the developer can confirm or amend each one.
+
+If you are ever unsure whether you have permission to skip a gate, you do not — stop and ask.
+
+---
+
 ## Output location — everything this skill produces lives in `design/`
 
 Every deliverable this skill creates goes in a single top-level `design/` folder at the project root — never loose in the project root, never spread across the project. Create the folder in Phase 3 (when `DESIGN.md` is first written) if it does not already exist.
@@ -204,7 +241,7 @@ These run in the background on every design task. Fire them at the right moment.
 - **📣 Show the work.** Don't describe the design — ship it. The deliverables are HTML files the user opens in a browser immediately. Real content, real mockups. No lorem ipsum. Data in the UI guide uses real content from the client's domain.
 - **🛑 Don't invent assets.** If the client has a logo, use it as `<img src="[filename]">` — never inline the SVG paths into the HTML. If they don't have a logo, say so and offer two clear paths: (a) proceed with a text-based logotype placeholder, or (b) pause until a logo exists.
 - **💩 Avoid AI-generated design defaults.** Before finalising the design plan, check it against the avoid-list in `references/design-record-templates.md` ("Avoid these defaults"). If any element on that list appears without a specific client reason, revise it.
-- **🙊 Don't ask what you don't need to ask.** If the brief already implies the audience, tone, and industry, proceed — asking a clarifying question that restates the brief back is wasted time. Ask only when a wrong assumption would be expensive: a conflicting palette, a misread audience, a missing logo. One focused question beats a wall of them.
+- **🙊 Don't ask what you don't need to ask.** If the brief already implies the audience, tone, and industry, proceed — asking a clarifying question that restates the brief back is wasted time. Ask only when a wrong assumption would be expensive: a conflicting palette, a misread audience, a missing logo. One focused question beats a wall of them. **This reflex applies to intake facts, never to gates** — it lets you skip a redundant clarifying question, it never lets you skip one of the hard gates.
 
 ---
 
@@ -212,30 +249,40 @@ These run in the background on every design task. Fire them at the right moment.
 
 **Phase 1 - intake:** read `references/phase-1-intake.md` (logo, brand reconnaissance, name, about us, industry, scope, project outline).
 
+> 🛑 **Gate (intake).** Gather name, industry, about-us, logo + deliverable scope, then **stop** before Phase 2. Scope has the one sanctioned silent default (Full) — no other gate does. See `## Gates`.
+
 ---
 
 ## Phase 2 - Market Research
 
 **Phase 2 - market research:** read `references/phase-2-market-research.md` (competitors, colour, typography, motion, research summary).
 
+> 🛑 **Gate (research surface, soft).** Surface the findings before applying them; *proceed-unless-corrected*. The one soft gate — it informs rather than blocks, but the developer still sees the direction first.
+
 ---
 
 ## Phase 3 - Design System Decisions
 
 **Phase 3 - design tokens:** read `references/design-tokens.md` (palette, semantic colours, type scale, spacing, radius, shadows, animation, z-index, icons, Favicon Brief).
 
+> 🛑 **Gate (icon library, §3.9).** Present the icon-library options **with their URLs** and **stop** — never pick one silently. Every deliverable uses the library the developer confirms.
+
 ---
 
 ## Phase 4 - Brand Guidelines (`brand-guidelines.html`)
 
 **Phase 4 - brand guidelines:** read `references/brand-guidelines.md` (required sections, technical rules).
 
+> 🛑 **Gate (brand approval).** **Stop** and approve `design/brand-guidelines.html` before building the UI guide.
+
 ---
 
 ## Phase 5 - UI Guide (`ui-guide.html`)
 
 **Phase 5 - UI guide:** read `references/ui-guide.md` (layout, utility classes, required sections, technical rules).
 
+> 🛑 **Gates (Phase 5), in order.** (a) Confirm the **3–6 product components** before building; (b) **Gate A** — stop after the foundation sections, before any component; (c) **Gate B** — stop after Buttons + Forms + Cards to approve the pattern + confirm the component inventory; (d) **stop** for UI-guide approval on `design/ui-guide.html`. See `## Gates`.
+
 ---
 
 ## Phase 6 - Handoff
@@ -248,6 +295,8 @@ These run in the background on every design task. Fire them at the right moment.
 
 **Phase 7 - website:** read `references/website.md` (discovery, page set, architecture, layout and token rules, quality checklist).
 
+> 🛑 **Gate (website / mockup choice).** Ask **which** kind — marketing site / product mockup / both / none. Don't assume.
+
 ---
 
 ## Templates and guards
diff --git a/.claude/skills/tina4-design/references/brand-guidelines.md b/.claude/skills/tina4-design/references/brand-guidelines.md
index 6244bc32..1c5efa7d 100644
--- a/.claude/skills/tina4-design/references/brand-guidelines.md
+++ b/.claude/skills/tina4-design/references/brand-guidelines.md
@@ -42,6 +42,7 @@ Build `brand-guidelines.html` and save it to the `design/` folder. This is a sel
 **Tone of Voice**
 - 4 tone attributes, each with a short definition paragraph
 - Do / don't copy pairs: two "write this / not this" examples using realistic content — the same information written in the right voice and the wrong voice
+- Capitalisation rule: UI copy is sentence case by default, shown as a write this / not this pair on a real button and a real nav item ("Book a demo" / "Book A Demo") — taken from DESIGN.md's voice section
 
 **Applications**
 - At least 2–3 mockups showing the brand applied in contexts relevant to the client's actual world
diff --git a/.claude/skills/tina4-design/references/design-record-templates.md b/.claude/skills/tina4-design/references/design-record-templates.md
index 39e1ade0..9bd5aada 100644
--- a/.claude/skills/tina4-design/references/design-record-templates.md
+++ b/.claude/skills/tina4-design/references/design-record-templates.md
@@ -92,6 +92,13 @@ Create this file at `design/DESIGN.md` when Phase 3 begins (create the `design/`
 - Size tokens: --icon-xs 14px · --icon-sm 16px · --icon-md 20px · --icon-lg 24px · --icon-xl 32px
 - Rationale: [one sentence — why this library fits the brand personality]
 
+## Voice and UI copy
+- Capitalisation: sentence case — buttons, CTAs, nav, tabs, labels and headings capitalise only the
+  first word, proper nouns and acronyms ("Book a demo", not "Book A Demo"). [Change only if the brand
+  deliberately uses Title Case, and record why in the rationale log.]
+- Proper nouns that keep their capitals: [brand, product and place names — e.g. Tina4, Code Infinity]
+- Tone attributes: [the 4 attributes from the brand guidelines' Tone of Voice section]
+
 ## Design Tokens
 
 ### Colour — light theme
@@ -228,6 +235,7 @@ Before finalising the design plan in Phase 3, check each element against this li
 | `border-radius: 12px` on every element | Rounds everything equally regardless of component personality |
 | Pure `rgba(0,0,0,…)` shadows on a warm-toned brand | Shadows should be hue-tinted to match the palette |
 | Lorem ipsum or "Sample Text" in any deliverable | Real content or nothing; lorem is a placeholder for something that was never finished |
+| Title Case on buttons, CTAs and nav ("Book A Demo", "Get Started") | The template default; UI copy is sentence case — capitalise only the first word, proper nouns and acronyms |
 
 Following these patterns with a genuine reason is always acceptable — the point is that the reason must be named.
 
diff --git a/.claude/skills/tina4-seo/SKILL.md b/.claude/skills/tina4-seo/SKILL.md
new file mode 100644
index 00000000..0e0589d8
--- /dev/null
+++ b/.claude/skills/tina4-seo/SKILL.md
@@ -0,0 +1,197 @@
+---
+name: tina4-seo
+description: Use when a project needs SEO and AISO (AI Search Optimisation) coverage — structured data, AI discovery files, robots.txt, sitemap, meta tags, semantic HTML audit, E-E-A-T signals, favicon package, and entity consistency. Works on any Tina4 project (PHP, Python, Ruby, Node) or plain HTML. Reads DESIGN.md if present to avoid re-asking for known facts. Triggers: "fix our SEO", "we need structured data", "add schema markup", "AI systems can't find us", "set up llms.txt", "generate a sitemap", "robots.txt audit", "accessibility of SEO".
+updated_for_version: 1.0.0
+---
+
+# tina4-seo — SEO and AISO from audit to implementation
+
+> 🤖📡 **Skill-active marker.** Begin every reply with 🤖📡 while this skill is guiding the session. Drop it only once the conversation has clearly moved off SEO/AISO into other work.
+
+You are the SEO and AISO lead for this project. AISO (AI Search Optimisation) extends
+traditional SEO to ensure AI systems — ChatGPT, Claude, Perplexity, and Google AI Mode —
+can correctly understand, index, and cite the site's content. Your job is to audit what
+exists, generate what is missing, and inject it into the project's template layer
+systematically. Every output is real, executable code — no placeholders.
+
+## Contents
+
+Read top to bottom once, then jump by section. Orientation and the phase order live here; the heavy phase bodies live in `references/` (listed at the end of this block).
+
+**Orientation**
+- When you fire - and when you do not
+- First action - read `design/DESIGN.md`
+- The nine-phase workflow - Working reflexes
+- **Degrees of freedom** - what is inviolable vs. a default vs. your judgement (read this next)
+
+**Phase 1 - Discovery audit** (`references/discovery-audit.md`)
+- 1.1 Read design/DESIGN.md - 1.2 Read existing templates - 1.3 Check key files - 1.4 Report and proceed
+- 1.5 Intake gate (environment, business data, scope) - 1.6 Set the URL mode
+
+**Phase 2 - Structured data (JSON-LD / Schema.org)** (`references/structured-data.md`)
+- Organization - WebSite - WebPage/Article - BreadcrumbList - conditional schema - omit-not-placeholder rule - examples - Tina4 implementation
+
+**Phase 3 - AI discovery files** (`references/ai-discovery.md`)
+- `/llms.txt` - `/llms-full.txt` - `/ai.txt`
+
+**Phase 4 - robots.txt and sitemap** (`references/robots-sitemap.md`)
+- robots.txt (AI crawler allow-list) - sitemap.xml - Phase 4.5 staging safeguards
+
+**Phase 5 - Meta tags** (`references/meta-tags.md`)
+- Required on every page - og:image default - hreflang rule
+
+**Phase 6 - Content audit** (`references/content-audit.md`)
+- 6.1 Heading hierarchy - 6.2 `<html lang>` - 6.3 Semantic HTML - 6.4 Image alt text - 6.5 Entity consistency - 6.6 Internal linking
+
+**Phase 7 - E-E-A-T and trust signals** (`references/entity-eeat.md`)
+- About page - author bios - contact - legal pages - HTTPS - author schema
+
+**Phase 8 - Favicon package** (`references/favicon-package.md`)
+- Favicon Brief - SVG favicon - RFG package - minimum `<head>` snippet
+
+**Phases 8.5, 9, 9.5 - Validation and handoff** (`references/validation-and-handoff.md`)
+- Phase 8.5 validation - Phase 9 handoff report - Phase 9.5 pre-launch checklist
+
+**Templates and guards** (`references/templates-and-guards.md`)
+- DESIGN.md SEO section - plan structure (`plan/seo/PLAN.md`) - relationship to other tina4 skills - avoid-list
+
+**Reference files** (all in `references/`, one level deep)
+- `discovery-audit.md` - Phase 1
+- `structured-data.md` - Phase 2
+- `ai-discovery.md` - Phase 3
+- `robots-sitemap.md` - Phase 4 and Phase 4.5
+- `meta-tags.md` - Phase 5
+- `content-audit.md` - Phase 6
+- `entity-eeat.md` - Phase 7
+- `favicon-package.md` - Phase 8
+- `validation-and-handoff.md` - Phases 8.5, 9, 9.5
+- `templates-and-guards.md` - DESIGN.md SEO section, plan structure, skill relationships, avoid-list
+
+## Degrees of freedom
+
+Not every line here carries the same weight. Knowing which is which lets you move fast without
+breaking what must not break. Three tiers:
+
+- 🔒 **Non-negotiable - never skip, however small the task.**
+  **Real values only** - every JSON-LD block, sitemap, canonical and meta tag uses real company
+  names, real URLs, real dates; no `[PLACEHOLDER]` left behind in any output. **Omit, never
+  placeholder** - when a schema type's required data is not confirmed at the Phase 1.5 intake,
+  omit the whole schema type and flag it as "unlocked when X is provided"; never emit
+  `[COMPANY_NAME]`, `123 Placeholder Street`, `+1-XXX-XXX-XXXX`, empty `sameAs` entries, or any
+  required-field placeholder — placeholders that ship to production destroy entity resolution,
+  worse than emitting nothing. **Environment-aware URLs** - localhost and staging URLs must never
+  end up in production sitemaps, structured data, or canonical tags; use `{{ env.SITE_URL }}`, the
+  developer-supplied production URL, or a literal `https://REPLACE_WITH_PROD_DOMAIN` with a
+  pre-launch checklist — never silently use the current URL as if it were production. **Allow the
+  AI crawlers** - the full Phase 4 crawler allow-list (GPTBot, OAI-SearchBot, ChatGPT-User,
+  ClaudeBot, Claude-Web, anthropic-ai, PerplexityBot, Perplexity-User, Google-Extended,
+  Applebot-Extended, cohere-ai, CCBot, Bytespider, Meta-ExternalAgent, FacebookBot, Amazonbot,
+  YouBot, Diffbot, ImagesiftBot, omgili, omgilibot) must not be blocked, and no AI crawler is
+  blocked unless the developer explicitly asks and explains why. **Audit before you generate** -
+  read the actual files before writing anything. **Re-run safely** - never duplicate structured
+  data blocks or llms.txt entries on a second run. **Validate before you claim done** - every ✅ in
+  the handoff report is backed by an actual Phase 8.5 test. **The marker:** the 🤖📡 skill-active
+  marker above on every reply while this skill guides the session.
+
+- 🎚️ **Default with a reason - follow unless this project genuinely differs.**
+  The nine-phase order; reading `design/DESIGN.md` first as the source of truth; the deliverable
+  set (structured data in the base template, AI discovery files at the webroot, corrected
+  robots.txt + sitemap.xml, dynamic meta tags, favicon package, `plan/seo/PLAN.md`); the
+  title/description length rules (50–60 char title, 120–160 char description); the avoid-list in
+  `references/templates-and-guards.md`. Depart deliberately, name the project-specific reason, and
+  record it — not by drift.
+
+- 🧭 **Judgement - read the task and choose.**
+  Which conditional schema types a page's actual content earns; how much of the audit to fix
+  (the Phase 1.5 scope gate); whether the website has a search function (`potentialAction`);
+  ask-first vs decide-and-proceed; verbosity; which routes are public-facing for the sitemap.
+  The skill gives the heuristic, you read the situation. (Overlap with tina4-a11y on alt text,
+  semantic HTML, and page titles is resolved by doing those items once in whichever skill runs
+  first — see `references/templates-and-guards.md`.)
+
+## When you fire
+
+- "Fix our SEO" / "we're not ranking" / "add structured data" / "schema markup"
+- "AI systems can't find us" / "set up llms.txt" / "AISO audit"
+- "Generate a sitemap" / "robots.txt" / "meta tags"
+- "tina4-seo" (explicit invocation)
+
+Do NOT fire for:
+- General content writing or copywriting
+- Visual design questions — those belong to tina4-design
+- Accessibility WCAG audit — use the tina4-a11y
+
+## First action — read design/DESIGN.md
+
+Before asking a single question, check for `design/DESIGN.md` (the tina4-design deliverable
+folder). If it exists, read it. It contains the company name, logo URL, brand colours, social
+profiles, favicon brief, and contact information — facts that were already gathered by
+tina4-design. Never ask for information that is already in `design/DESIGN.md`.
+
+If `design/DESIGN.md` does not exist, check the project root for a legacy `DESIGN.md`; if
+neither exists, note it and gather the facts you need from the intake questions in Phase 1.
+
+---
+
+## Working reflexes
+
+- **🔍 Audit before you generate.** Read the actual files before writing anything. Never
+  assume what exists or is missing.
+- **📐 Real values only.** Every JSON-LD block uses real company names, real URLs, real
+  dates. No `[PLACEHOLDER]` left behind in any output.
+- **🧭 Read before you ask.** Check the project files, DESIGN.md, robots.txt, and
+  existing templates first. Gather as many facts as possible before asking questions.
+  When you must ask, collect all questions into one message — never one at a time.
+- **📣 Show the work.** Every generated file and code block includes the exact path where
+  it goes and the line where it should be inserted. Diff-style before/after for edits to
+  existing files.
+- **🔗 Validate URLs.** Every URL in structured data, sitemaps, and canonical tags must
+  be absolute, must start with `https://`, and must match the site's real domain. Never
+  invent a URL.
+- **♻️ Re-run safely.** Running this skill on a project a second time must not duplicate
+  structured data blocks or llms.txt entries. Check for existing implementations before
+  adding new ones.
+- **🌐 Never invent business data or URLs.** No `[COMPANY_NAME]` placeholders in required JSON-LD fields, no `123 Placeholder Street` for LocalBusiness, no guessed social profile URLs. If a schema type's required data is missing, **omit the schema type entirely** and flag it in the audit report as "unlocked when X is provided". Placeholders that ship to production destroy entity resolution — worse than emitting nothing.
+- **🏗️ Environment-aware.** Localhost and staging URLs must not end up in production sitemaps, structured data, or canonical tags. On non-production runs, either use runtime template variables (`{{ env.SITE_URL }}`), the developer-supplied production URL, or a literal `https://REPLACE_WITH_PROD_DOMAIN` with an aggressive pre-launch checklist. Never silently use the current URL as if it were production.
+
+---
+
+## The nine-phase workflow
+
+Nine phases in order. Each phase has a defined output. Read `design/DESIGN.md` first (above), then work the phases.
+
+| Phase | Name | Output | Reference |
+|-------|------|--------|-----------|
+| 1 | Discovery audit | Audit table + intake (environment, business data, scope) + URL mode | `references/discovery-audit.md` |
+| 2 | Structured data | Valid JSON-LD for every applicable schema type in the base template | `references/structured-data.md` |
+| 3 | AI discovery files | `/llms.txt`, `/llms-full.txt`, `/ai.txt` at the webroot | `references/ai-discovery.md` |
+| 4 | robots.txt and sitemap | AI crawlers allowed, Sitemap directive, `sitemap.xml` (+ Phase 4.5 staging safeguards) | `references/robots-sitemap.md` |
+| 5 | Meta tags | Base template `<head>` complete and dynamic | `references/meta-tags.md` |
+| 6 | Content audit | Headings, `<html lang>`, semantic HTML, alt text, entities, internal linking | `references/content-audit.md` |
+| 7 | E-E-A-T and trust signals | About page, author bios, contact, legal, HTTPS, author schema | `references/entity-eeat.md` |
+| 8 | Favicon package | SVG favicon + RFG package + `<head>` snippet | `references/favicon-package.md` |
+| 9 | Validation and handoff | Phase 8.5 validation, Phase 9 handoff report, Phase 9.5 pre-launch checklist | `references/validation-and-handoff.md` |
+
+---
+
+## Phase stubs
+
+**Phase 1 - Discovery audit:** read `references/discovery-audit.md` (read DESIGN.md, read existing templates, check key files, report table, 1.5 intake gate for environment/business-data/scope, 1.6 URL mode).
+
+**Phase 2 - Structured data (JSON-LD / Schema.org):** read `references/structured-data.md` (Organization, WebSite, WebPage/Article, BreadcrumbList, conditional schema table, omit-not-placeholder rule, FAQPage/HowTo/Article examples, Tina4 implementation).
+
+**Phase 3 - AI discovery files:** read `references/ai-discovery.md` (`/llms.txt` to the llmstxt.org spec, `/llms-full.txt` extended, `/ai.txt` plain prose).
+
+**Phase 4 - robots.txt and sitemap:** read `references/robots-sitemap.md` (AI crawler allow-list, private-path disallows, Sitemap directive, `sitemap.xml`, and Phase 4.5 staging safeguards — hardened staging robots.txt, env-gated `noindex`, Basic Auth, separate production robots.txt).
+
+**Phase 5 - Meta tags:** read `references/meta-tags.md` (charset, viewport, title, description, canonical, AI snippet permission, Open Graph, Twitter Card, theme-color; og:image default; hreflang rule).
+
+**Phase 6 - Content audit:** read `references/content-audit.md` (heading hierarchy, `<html lang>`, semantic HTML, image alt text, entity consistency, internal linking).
+
+**Phase 7 - E-E-A-T and trust signals:** read `references/entity-eeat.md` (about page, author bios, contact information, Privacy Policy / Terms, HTTPS, Person schema for authors).
+
+**Phase 8 - Favicon package:** read `references/favicon-package.md` (read the Favicon Brief, theme-aware SVG favicon, Real Favicon Generator API package, minimum `<head>` snippet, update DESIGN.md).
+
+**Phases 8.5 / 9 / 9.5 - Validation and handoff:** read `references/validation-and-handoff.md` (Phase 8.5 structured-data / sitemap / robots / meta / AI-file validation; Phase 9 handoff report format; Phase 9.5 pre-launch checklist for non-production builds).
+
+**Templates and guards:** read `references/templates-and-guards.md` (DESIGN.md SEO section, `plan/seo/PLAN.md` plan structure, relationship to other tina4 skills, and the avoid-list).
diff --git a/.claude/skills/tina4-seo/references/ai-discovery.md b/.claude/skills/tina4-seo/references/ai-discovery.md
new file mode 100644
index 00000000..65692ae8
--- /dev/null
+++ b/.claude/skills/tina4-seo/references/ai-discovery.md
@@ -0,0 +1,52 @@
+# Phase 3 - AI discovery files
+
+> Reference for the `tina4-seo` skill: Phase 3 (AI discovery files — llms.txt, llms-full.txt, ai.txt). Moved out of `SKILL.md` unchanged.
+
+## Phase 3 — AI discovery files
+
+These files tell AI crawlers what the site is and what it contains before they read a page.
+They go at the webroot — in Tina4 projects this is the `src/public/` directory.
+
+### `/llms.txt`
+
+Following the llmstxt.org specification exactly:
+
+```
+# [Company name]
+
+> [One paragraph: what the site does, who it serves, and what value it provides.
+  Written for an AI system reading it as authoritative context, not a marketing tagline.
+  Active voice. Specific. Names the product or service clearly.]
+
+## Key pages
+- [Page title]: [absolute URL]
+  [One sentence: what this page contains and why it matters for understanding the business]
+
+(repeat for every important page — homepage, about, key product/service pages, contact)
+
+## About
+[2–3 sentences about the organisation, its founding, its authority on its topic, and
+any credentials or track record relevant to AI citation trustworthiness]
+
+## Contact
+[email address or contact URL]
+```
+
+Ask for the site purpose and key page descriptions if they cannot be read from the project
+files or DESIGN.md.
+
+### `/llms-full.txt`
+
+Extended version for deeper AI indexing. Follows the same format but expands each section:
+
+- Full description of each key page (3–5 sentences)
+- Key facts, statistics, or claims the site makes that AI systems should be able to cite
+- Author or contributor names and their expertise
+- Common questions and their complete answers (draws from any FAQ content found)
+- Glossary of product or industry terms the site uses
+
+### `/ai.txt`
+
+One paragraph in plain prose — organisation name, what the site does, who it serves, and
+the preferred contact for AI-related enquiries. Format is not yet standardised; keep it
+brief and factual.
diff --git a/.claude/skills/tina4-seo/references/content-audit.md b/.claude/skills/tina4-seo/references/content-audit.md
new file mode 100644
index 00000000..96dd2a99
--- /dev/null
+++ b/.claude/skills/tina4-seo/references/content-audit.md
@@ -0,0 +1,67 @@
+# Phase 6 - Content audit
+
+> Reference for the `tina4-seo` skill: Phase 6 (content audit). Moved out of `SKILL.md` unchanged.
+
+## Phase 6 — Content audit
+
+Read each key page template and check the following. Fix violations directly in the
+template files and report every change.
+
+### 6.1 Heading hierarchy
+
+- Every page has exactly one `<h1>` — the page's primary topic
+- Heading levels are not skipped (H1 → H2 → H3, never H1 → H3)
+- Headings are used for structure, not visual size — if a heading is used only because it
+  looks bigger, it is wrong
+
+### 6.2 `<html lang="...">` — required on every page
+
+Screen readers, translation tools, and search engines all use this to determine the page language. A missing or wrong `lang` breaks entity resolution for AI systems and pronunciation for screen readers.
+
+- Find every `<html>` tag in the template layer
+- Ensure `lang="[BCP 47 code]"` is set — e.g. `lang="en-ZA"`, `lang="en-US"`, `lang="fr"`, `lang="de"`
+- If the site is multilingual, the value must be dynamic per page
+- Add `dir="rtl"` for right-to-left languages (Arabic, Hebrew, Persian)
+
+### 6.3 Semantic HTML
+
+AI parsers weight semantic elements heavily. Check that:
+- `<main>` wraps the primary page content (once per page)
+- `<article>` wraps self-contained content (blog posts, news items)
+- `<nav>` wraps navigation menus
+- `<section>` groups thematically related content and has a heading
+- `<header>` and `<footer>` are used at page level correctly
+- No `<div>` is used where a semantic element fits
+
+### 6.4 Image alt text
+
+Find every `<img>` tag. Flag:
+- Missing `alt` attribute entirely
+- Empty `alt=""` on a non-decorative image
+- Generic values: `"image"`, `"photo"`, `"logo"`, the filename as the alt text
+
+For each flagged image, read the surrounding context and suggest descriptive alt text.
+Fix template-level images (logo, icons, UI images) directly. For content images, provide
+the corrected attribute and show where to apply it.
+
+### 6.5 Entity consistency
+
+AI systems recognise entities (people, organisations, products) by consistent name usage.
+Check:
+- The organisation name is spelled identically on every page, in every meta tag, and in
+  all structured data. Any variation breaks AI entity recognition.
+- Author names are consistent across bylines, bios, and schema.
+- Product or service names are consistent in copy, headings, and schema.
+
+Report every inconsistency with file and line number. Fix it.
+
+### 6.6 Internal linking structure
+
+AI systems use internal links to map content relationships.
+- The homepage links to all major section landing pages
+- Each content page links to related pages
+- Anchor text is descriptive ("view Cape Town office spaces") not generic ("click here")
+- Key pages are not orphaned (reachable from at least one other page via a link)
+
+Identify the most important pages, check that they are linked from relevant locations,
+and suggest a hub/spoke structure where appropriate.
diff --git a/.claude/skills/tina4-seo/references/discovery-audit.md b/.claude/skills/tina4-seo/references/discovery-audit.md
new file mode 100644
index 00000000..b0eec8a2
--- /dev/null
+++ b/.claude/skills/tina4-seo/references/discovery-audit.md
@@ -0,0 +1,130 @@
+# Phase 1 - Discovery audit
+
+> Reference for the `tina4-seo` skill: Phase 1 (discovery audit, intake gate, URL mode). Moved out of `SKILL.md` unchanged.
+
+## Phase 1 — Discovery audit
+
+Read the project files and report the current state before writing any code.
+
+### 1.1 Read design/DESIGN.md
+
+If present, extract:
+- Company name (exact, canonical spelling)
+- Logo file path and URL
+- Brand colours (`--accent`, `--bg`)
+- Social profile URLs
+- Favicon brief (icon mark, colours, app name)
+- Contact information
+- "Next Steps" section (to confirm tina4-design has completed its handoff checklist)
+
+### 1.2 Read existing templates
+
+Find the base HTML template — the file where `<head>` is defined for all pages. In Tina4
+projects this is typically:
+- **PHP:** `src/templates/main.html` or `src/templates/index.html`
+- **Python:** `src/templates/main.html`
+- **Ruby:** `lib/tina4/public/` or `src/templates/`
+- **Node:** `src/templates/` or `views/`
+- **Plain HTML:** the shared `<head>` include or the index.html itself
+
+Read it. Extract:
+- Existing meta tags (description, canonical, og:*, twitter:*)
+- Existing structured data (`<script type="application/ld+json">`)
+- Existing favicon links
+- `<title>` pattern (static or dynamic)
+- `<html lang="...">` — note if present
+
+### 1.3 Check key files
+
+Check each of the following. Report exists / missing / broken:
+
+| File | Location | Check |
+|------|----------|-------|
+| `robots.txt` | domain root | Present? Any AI bots blocked? Sitemap directive present? |
+| `sitemap.xml` | domain root or `/public/` | Present? All URLs included? `lastmod` set? |
+| `/llms.txt` | domain root | Present? Follows llmstxt.org spec? |
+| `/llms-full.txt` | domain root | Present? |
+| `/ai.txt` | domain root | Present? |
+| `DESIGN.md` | `design/` folder | Present? Favicon brief complete? |
+
+### 1.4 Report and proceed
+
+Report the audit results as a ✅/❌/⚠️ table before proceeding:
+
+```
+SEO/AISO Discovery Audit — [Project Name]
+
+Meta tags:         ⚠️  description present but no og:image
+Canonical tags:    ❌  missing on all pages
+Structured data:   ❌  none found
+robots.txt:        ⚠️  exists but GPTBot and ClaudeBot are blocked
+sitemap.xml:       ❌  missing
+llms.txt:          ❌  missing
+llms-full.txt:     ❌  missing
+Favicon:           ⚠️  PNG only — no SVG, no Apple touch icon
+
+Working through each item in priority order.
+```
+
+### 1.5 Intake gate — environment, business data, and scope
+
+After the audit table, do ONE round-trip intake covering three things: **where the site is running**, **what business data is genuinely known**, and **how much of the audit to fix**. Wait for a response before writing any code. Do not silently proceed.
+
+**Preferred: use a structured-question tool** (`AskUserQuestion` in Claude Code, or the equivalent in the current agent harness) with three questions in the same call:
+
+---
+
+**Question 1 — Environment (single-select):**
+
+- **Production — live URL** — the current URL is the real domain; use it everywhere
+- **Staging with known prod URL** — the site runs on a staging domain, but the developer knows what the production URL will be; use the prod URL in structured data / canonicals / sitemap, harden the staging robots.txt
+- **Staging only — no prod URL yet** — no production domain confirmed; skip URL-dependent artifacts, emit a pre-launch checklist
+- **Localhost only** — running on `localhost` or a dev machine; skip URL-dependent artifacts, emit a pre-launch checklist
+
+If Staging + known prod is picked, follow up with a text field for the production URL.
+
+---
+
+**Question 2 — What business data is known? (multi-select):**
+
+- Physical address / service area (unlocks `LocalBusiness`)
+- Named authors / bylines (unlocks `Person` + `author` on `Article`)
+- Product data — name, price, image (unlocks `Product`)
+- Reviews / ratings — real, verifiable (unlocks `AggregateRating` on `Product`)
+- Social profile URLs — LinkedIn, Twitter/X, Facebook (unlocks `sameAs` on `Organization`)
+- Contact email
+- Support phone (unlocks `contactPoint` telephone on `Organization`)
+- Company founding date / history (adds `foundingDate` to `Organization`)
+
+Whatever is NOT ticked: the skill omits the corresponding schema type or field entirely. The audit report flags them as "unlocked when [data] is provided" so the developer knows what's not being emitted and why.
+
+Follow-up text fields collect only what was ticked — never ask for data that was not selected.
+
+---
+
+**Question 3 — Scope (single-select):**
+
+- **Fix everything** — proceed through all phases in order
+- **Critical only** — structured data + AI crawlers + meta tags, skip content audit / E-E-A-T / favicon
+- **Let me scope** — user picks what to skip via a follow-up multi-select: skip checkout template, skip robots.txt, skip llms-full.txt, skip favicon package, skip content audit
+
+---
+
+**Fallback if no structured tool is available:** send the same three questions as a numbered prose list, one after the other or bundled.
+
+**Wait for the response.** All three answers gathered in ONE round trip, then proceed to Phase 2 with the environment + data set + scope locked. On a subsequent run of this skill, this intake fires again — the user always gets to correct any of the three.
+
+### 1.6 Set the URL mode for the rest of the run
+
+Based on the environment answer, every downstream phase behaves differently. Record the decision in `plan/seo/PLAN.md` so a re-run picks it up:
+
+| Environment | Structured data URL | Canonical / og:url | sitemap.xml | llms.txt | robots.txt |
+|-------------|---------------------|--------------------|-------------|----------|------------|
+| Production | Real prod URL | Real prod URL | Generated with real URLs | Generated with real URLs | Standard — allow AI crawlers + Sitemap directive |
+| Staging + known prod | Real prod URL | Real prod URL | Generated with prod URLs | Generated with prod URLs | Staging gets HARDENED (see Phase 4.5); prod robots.txt written to a separate file for deploy |
+| Staging only | `{{ env.SITE_URL }}` if templates support it; else `https://REPLACE_WITH_PROD_DOMAIN` | Same | **Skipped** — checklist item | **Skipped** — checklist item | HARDENED for staging; prod version deferred |
+| Localhost only | `{{ env.SITE_URL }}` if templates support it; else `https://REPLACE_WITH_PROD_DOMAIN` | Same | **Skipped** — checklist item | **Skipped** — checklist item | **Skipped** — checklist item |
+
+**Prefer runtime template variables** where the framework supports them (Tina4 templates, Django, Rails, Node view engines all do). Only fall back to `REPLACE_WITH_PROD_DOMAIN` literals when the surface doesn't support runtime substitution (a raw `sitemap.xml`, a static `llms.txt`).
+
+**Skipped items become checklist items** in `plan/seo/PRE-LAUNCH-CHECKLIST.md` — see Phase 9.5.
diff --git a/.claude/skills/tina4-seo/references/entity-eeat.md b/.claude/skills/tina4-seo/references/entity-eeat.md
new file mode 100644
index 00000000..10182706
--- /dev/null
+++ b/.claude/skills/tina4-seo/references/entity-eeat.md
@@ -0,0 +1,27 @@
+# Phase 7 - E-E-A-T and trust signals
+
+> Reference for the `tina4-seo` skill: Phase 7 (E-E-A-T and trust signals). Moved out of `SKILL.md` unchanged.
+
+## Phase 7 — E-E-A-T and trust signals
+
+E-E-A-T (Experience, Expertise, Authoritativeness, Trustworthiness) is how AI systems and
+Google decide whether content can be trusted and cited. Audit and flag:
+
+1. **About page** — exists and is linked from the main navigation? Describes who runs the
+   site, their credentials, and the company's history? If missing, flag it and write a
+   brief for the developer: what the page should cover.
+
+2. **Author bios** — if the site has a blog, every post links to a named author with a bio
+   page that includes credentials. Flag any posts with anonymous bylines.
+
+3. **Contact information** — a real contact method (email, phone, or form) is reachable
+   from every page, ideally in the footer. Flag if absent.
+
+4. **Privacy Policy and Terms of Service** — both exist at stable URLs and are linked from
+   the footer. Flag if either is missing.
+
+5. **HTTPS** — confirm the site is served entirely over HTTPS. Note any mixed-content
+   warnings in the template (http:// asset URLs).
+
+6. **Structured data for authors** — if blog posts exist, generate Person schema for each
+   named author linked from their bio page.
diff --git a/.claude/skills/tina4-seo/references/favicon-package.md b/.claude/skills/tina4-seo/references/favicon-package.md
new file mode 100644
index 00000000..5f055263
--- /dev/null
+++ b/.claude/skills/tina4-seo/references/favicon-package.md
@@ -0,0 +1,123 @@
+# Phase 8 - Favicon package
+
+> Reference for the `tina4-seo` skill: Phase 8 (favicon package). Moved out of `SKILL.md` unchanged.
+
+## Phase 8 — Favicon package
+
+### Read the Favicon Brief from DESIGN.md
+
+If DESIGN.md has a `## Favicon Brief` section (written by tina4-design), read it for:
+- Icon mark description
+- Light and dark background/icon colours
+- App name
+- RFG package status (`pending` or `complete`)
+
+If DESIGN.md is absent or has no Favicon Brief, ask for:
+- The logo mark file (SVG preferred)
+- Light and dark brand colours
+- App short name (used for PWA home-screen label)
+
+### SVG favicon (primary — generate first)
+
+Create `favicon.svg` at the webroot. An SVG favicon with an embedded media query is
+theme-aware from a single file with no JavaScript:
+
+```svg
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <style>
+    /* Light mode */
+    .bg { fill: [light-background-hex]; }
+    .mark { fill: [light-icon-hex]; }
+
+    /* Dark mode */
+    @media (prefers-color-scheme: dark) {
+      .bg { fill: [dark-background-hex]; }
+      .mark { fill: [dark-icon-hex]; }
+    }
+  </style>
+
+  <!-- Background square (optional — omit if mark works on any background) -->
+  <rect class="bg" width="32" height="32" rx="[radius]"/>
+
+  <!-- Icon mark paths from the logo file — describe what the mark looks like -->
+  <!-- IMPORTANT: never invent or guess SVG paths. If the logo file cannot be read,
+       ask the developer to paste the path data from the icon element. -->
+  <path class="mark" d="[path data from logo icon element]"/>
+</svg>
+```
+
+**Never invent SVG path data.** Read the actual logo file to extract it. If the logo is a
+PNG with no SVG source, note it and skip the SVG favicon — fall back to the RFG package.
+
+### RFG package (full favicon set)
+
+Real Favicon Generator provides the complete multi-platform favicon package. Call the
+non-interactive API if the logo file is available:
+
+```
+POST https://realfavicongenerator.net/api/favicon
+Content-Type: application/json
+
+{
+  "favicon_generation": {
+    "api_key": "no_key_required_for_free_tier",
+    "master_picture": {
+      "type": "url",
+      "url": "https://[domain]/[logo-file-path]"
+    },
+    "settings": {
+      "compression": "2",
+      "scaling_algorithm": "Mitchell",
+      "error_on_image_too_small": false
+    },
+    "favicon_design": {
+      "desktop_browser": {},
+      "ios": {
+        "picture_aspect": "background_and_margin",
+        "margin": "18%",
+        "background_color": "[light-background-hex]"
+      },
+      "android_chrome": {
+        "picture_aspect": "background_and_margin",
+        "margin": "18%",
+        "background_color": "[light-background-hex]",
+        "manifest": {
+          "name": "[App name from Favicon Brief]",
+          "short_name": "[Short name — max 12 chars]",
+          "display": "standalone",
+          "orientation": "not_set",
+          "theme_color": "[accent hex]",
+          "background_color": "[bg hex]"
+        }
+      },
+      "safari_pinned_tab": {
+        "picture_aspect": "silhouette",
+        "theme_color": "[accent hex]"
+      }
+    },
+    "settings": {
+      "target_path": "/favicons"
+    }
+  }
+}
+```
+
+The API returns a ZIP package. Extract it to `[public]/favicons/` and paste the HTML
+snippet it provides into the base template `<head>`, replacing any existing favicon links.
+
+If the logo cannot be sent to an external service (ask the developer to confirm), provide
+the instructions for manual generation at https://realfavicongenerator.net and skip the
+API call.
+
+### Minimum `<head>` favicon snippet
+
+Whether from RFG or hand-built:
+
+```html
+<link rel="icon" type="image/svg+xml" href="/favicon.svg">
+<link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32x32.png">
+<link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png">
+<link rel="manifest" href="/favicons/site.webmanifest">
+```
+
+Update `DESIGN.md` Favicon Brief to set `RFG package: complete`.
diff --git a/.claude/skills/tina4-seo/references/meta-tags.md b/.claude/skills/tina4-seo/references/meta-tags.md
new file mode 100644
index 00000000..35933122
--- /dev/null
+++ b/.claude/skills/tina4-seo/references/meta-tags.md
@@ -0,0 +1,61 @@
+# Phase 5 - Meta tags
+
+> Reference for the `tina4-seo` skill: Phase 5 (meta tags). Moved out of `SKILL.md` unchanged.
+
+## Phase 5 — Meta tags
+
+Audit and fix the base template `<head>`. Every item below must be present, dynamic
+(per-page values injected by the template engine), and correct.
+
+### Required on every page
+
+```html
+<!-- Character set — must be first -->
+<meta charset="UTF-8">
+
+<!-- Viewport -->
+<meta name="viewport" content="width=device-width, initial-scale=1">
+
+<!-- Page title — unique per page, format: [Page name] — [Brand name] -->
+<title>{{ page_title }} — {{ site_name }}</title>
+
+<!-- Description — 120–160 characters, specific to this page -->
+<meta name="description" content="{{ page_description }}">
+
+<!-- Author -->
+<meta name="author" content="{{ site_name }}">
+
+<!-- Canonical — absolute URL matching this page exactly -->
+<link rel="canonical" href="{{ current_url }}">
+
+<!-- AI snippet permission — grants full extract rights to AI systems -->
+<meta name="robots" content="max-snippet:-1, max-image-preview:large, max-video-preview:-1">
+
+<!-- Open Graph -->
+<meta property="og:type" content="{{ og_type | default('website') }}">
+<meta property="og:title" content="{{ page_title }} — {{ site_name }}">
+<meta property="og:description" content="{{ page_description }}">
+<meta property="og:image" content="{{ og_image | default(site_default_og_image) }}">
+<meta property="og:image:width" content="1200">
+<meta property="og:image:height" content="630">
+<meta property="og:url" content="{{ current_url }}">
+<meta property="og:site_name" content="{{ site_name }}">
+
+<!-- Twitter / X Card -->
+<meta name="twitter:card" content="summary_large_image">
+<meta name="twitter:title" content="{{ page_title }} — {{ site_name }}">
+<meta name="twitter:description" content="{{ page_description }}">
+<meta name="twitter:image" content="{{ og_image | default(site_default_og_image) }}">
+<meta name="twitter:site" content="{{ twitter_handle }}">
+
+<!-- Theme colour — read from DESIGN.md Favicon Brief -->
+<meta name="theme-color" media="(prefers-color-scheme: light)" content="{{ brand_accent }}">
+<meta name="theme-color" media="(prefers-color-scheme: dark)" content="{{ brand_bg_dark }}">
+```
+
+**`og:image` default:** create a single branded social share card (1200×630px) using the
+brand assets from DESIGN.md. Use this as the site-wide default. Per-page images override
+it when available (blog post featured image, product photo, etc.).
+
+**`hreflang`:** add only if the site has multilingual content. Omit otherwise — an incorrect
+`hreflang` is worse than none.
diff --git a/.claude/skills/tina4-seo/references/robots-sitemap.md b/.claude/skills/tina4-seo/references/robots-sitemap.md
new file mode 100644
index 00000000..7337a6ff
--- /dev/null
+++ b/.claude/skills/tina4-seo/references/robots-sitemap.md
@@ -0,0 +1,156 @@
+# Phase 4 - robots.txt and sitemap (and Phase 4.5 - Staging safeguards)
+
+> Reference for the `tina4-seo` skill: Phase 4 (robots.txt and sitemap) and Phase 4.5 (staging safeguards). Moved out of `SKILL.md` unchanged.
+
+## Phase 4 — robots.txt and sitemap
+
+### robots.txt
+
+Read the current file. Fix it to:
+
+1. **Allow all AI crawlers.** Ensure none of the following are blocked by a wildcard
+   `User-agent: *` Disallow or by an explicit block:
+
+   ```
+   User-agent: GPTBot
+   Allow: /
+
+   User-agent: OAI-SearchBot
+   Allow: /
+
+   User-agent: ChatGPT-User
+   Allow: /
+
+   User-agent: ClaudeBot
+   Allow: /
+
+   User-agent: Claude-Web
+   Allow: /
+
+   User-agent: anthropic-ai
+   Allow: /
+
+   User-agent: PerplexityBot
+   Allow: /
+
+   User-agent: Perplexity-User
+   Allow: /
+
+   User-agent: Google-Extended
+   Allow: /
+
+   User-agent: Applebot-Extended
+   Allow: /
+
+   User-agent: cohere-ai
+   Allow: /
+
+   User-agent: CCBot
+   Allow: /
+
+   User-agent: Bytespider
+   Allow: /
+
+   User-agent: Meta-ExternalAgent
+   Allow: /
+
+   User-agent: FacebookBot
+   Allow: /
+
+   User-agent: Amazonbot
+   Allow: /
+
+   User-agent: YouBot
+   Allow: /
+
+   User-agent: Diffbot
+   Allow: /
+
+   User-agent: ImagesiftBot
+   Allow: /
+
+   User-agent: omgili
+   Allow: /
+
+   User-agent: omgilibot
+   Allow: /
+   ```
+
+2. **Still disallow private paths.** Keep `Disallow` rules for `/admin/`, `/dashboard/`,
+   `/api/`, `/checkout/`, and any authenticated or private paths.
+
+3. **Add the Sitemap directive:**
+   ```
+   Sitemap: https://[domain]/sitemap.xml
+   ```
+
+4. **Check for `noai` / `noml` meta tags** in the base template. These silently block AI
+   indexing even when robots.txt allows. If found, remove them unless they are intentional
+   (ask the developer to confirm).
+
+### sitemap.xml
+
+Generate `/sitemap.xml` (or update it if one exists) covering every public URL.
+
+```xml
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+
+  <url>
+    <loc>https://[domain]/</loc>
+    <lastmod>[ISO date]</lastmod>
+    <changefreq>weekly</changefreq>
+    <priority>1.0</priority>
+  </url>
+
+  <!-- Key landing pages: priority 0.8, changefreq monthly -->
+  <!-- Blog/article pages: priority 0.6, changefreq monthly -->
+  <!-- Utility pages (contact, about, privacy): priority 0.4, changefreq yearly -->
+
+</urlset>
+```
+
+**In Tina4 projects:** generate the sitemap dynamically from the route list rather than
+maintaining a static file. Ask the developer which routes are public-facing.
+
+---
+
+## Phase 4.5 — Staging safeguards (when environment = staging)
+
+When Phase 1.5 detected a staging environment, harden the staging deployment so it cannot be indexed and cannot beat the production version in search:
+
+### Hardened staging `robots.txt`
+
+Write this to the staging deployment's `robots.txt` — NOT the production one:
+
+```
+# Staging environment — indexing blocked
+User-agent: *
+Disallow: /
+```
+
+**Do NOT include** a `Sitemap:` directive on staging. A sitemap on staging tells crawlers where the staging URLs live even when disallowed.
+
+### Global `noindex` on staging pages
+
+Add to the base template `<head>` **behind an environment check** so it applies only on staging:
+
+```html
+{% if env == 'staging' %}
+<meta name="robots" content="noindex, nofollow">
+{% endif %}
+```
+
+Or the framework-native equivalent. Never leave this permanently in the template — it must gate on env, otherwise production ships with `noindex` and drops off search entirely.
+
+### HTTP Basic Auth (recommended)
+
+If the framework supports it, put staging behind HTTP Basic Auth. This is the most reliable way to keep staging out of search — crawlers cannot index what they cannot access.
+
+### Separate production `robots.txt` for deploy
+
+Write the production `robots.txt` (with AI crawler allow rules + real Sitemap directive from Phase 4) to a file the developer can deploy alongside their production build — for example `deploy/robots.production.txt` — and add a line to the pre-launch checklist:
+
+> `[ ] Replace robots.txt with deploy/robots.production.txt on production deploy`
+
+The staging file must never reach production, and the production file must never sit on staging.
diff --git a/.claude/skills/tina4-seo/references/structured-data.md b/.claude/skills/tina4-seo/references/structured-data.md
new file mode 100644
index 00000000..89213ad2
--- /dev/null
+++ b/.claude/skills/tina4-seo/references/structured-data.md
@@ -0,0 +1,230 @@
+# Phase 2 - Structured data (JSON-LD / Schema.org)
+
+> Reference for the `tina4-seo` skill: Phase 2 (structured data). Moved out of `SKILL.md` unchanged.
+
+## Phase 2 — Structured data (JSON-LD / Schema.org)
+
+Generate valid JSON-LD for every applicable schema type. Each block goes inside a
+`<script type="application/ld+json">` tag in `<head>`. Multiple schema types may be
+combined in one script block or kept separate — separate is easier to maintain.
+
+**Read the page content before generating each type.** Never invent facts — if a field
+value is not known, omit the field rather than filling it with a guess.
+
+### Required on every project
+
+**Before generating any schema:** grep the target templates for existing `<script type="application/ld+json">` blocks. If a block for the same `@type` already exists, replace it — do not append a duplicate. On a second run of this skill, this check is what prevents doubled Organization or WebSite entities from confusing crawlers.
+
+**Organization** — the entity anchor. Every other schema type references this.
+
+```json
+{
+  "@context": "https://schema.org",
+  "@type": "Organization",
+  "@id": "https://[domain]/#organization",
+  "name": "[Canonical company name — exact spelling from DESIGN.md]",
+  "url": "https://[domain]",
+  "logo": {
+    "@type": "ImageObject",
+    "url": "https://[domain]/[logo-file-path]",
+    "width": "[px]",
+    "height": "[px]"
+  },
+  "contactPoint": {
+    "@type": "ContactPoint",
+    "contactType": "customer support",
+    "email": "[contact email]"
+  },
+  "sameAs": [
+    "[LinkedIn URL]",
+    "[Twitter/X URL]",
+    "[Facebook URL]"
+  ]
+}
+```
+
+**`sameAs` rule:** include only URLs that actually exist. Never emit empty strings or `[LinkedIn URL]` placeholders — an empty `sameAs` entry breaks entity resolution. If a social profile is absent from DESIGN.md, omit that array position entirely.
+
+**WebSite** — enables sitelinks searchbox in Google; required for AI entity resolution.
+
+```json
+{
+  "@context": "https://schema.org",
+  "@type": "WebSite",
+  "@id": "https://[domain]/#website",
+  "url": "https://[domain]",
+  "name": "[Site name]",
+  "publisher": { "@id": "https://[domain]/#organization" },
+  "potentialAction": {
+    "@type": "SearchAction",
+    "target": {
+      "@type": "EntryPoint",
+      "urlTemplate": "https://[domain]/search?q={search_term_string}"
+    },
+    "query-input": "required name=search_term_string"
+  }
+}
+```
+Omit `potentialAction` if the site has no search function.
+
+### Page-level schema
+
+**WebPage or Article** — add to every key page. Use `Article` for blog/news content,
+`WebPage` for static pages.
+
+```json
+{
+  "@context": "https://schema.org",
+  "@type": "WebPage",
+  "@id": "https://[domain]/[page-path]#webpage",
+  "url": "https://[domain]/[page-path]",
+  "name": "[Page title]",
+  "description": "[120–160 character description]",
+  "isPartOf": { "@id": "https://[domain]/#website" },
+  "about": { "@id": "https://[domain]/#organization" },
+  "inLanguage": "[BCP 47 code — e.g. en-ZA, en-US, fr, de]",
+  "datePublished": "[ISO 8601]",
+  "dateModified": "[ISO 8601]"
+}
+```
+
+**Page title and description length rules** — these govern both the JSON-LD `name`/`description` and the `<title>`/`<meta name="description">` tags:
+- `<title>` — 50–60 characters. Google truncates around 60. Format: `[Page name] — [Brand name]`.
+- Meta description — 120–160 characters. Longer descriptions are truncated in the SERP.
+- Open Graph description — 120–200 characters. Different platforms truncate at different points.
+- **Every page has a unique title and unique description** — sitewide duplicates are the most common ranking bug.
+
+**BreadcrumbList** — on every non-homepage. Communicates site hierarchy to AI.
+
+```json
+{
+  "@context": "https://schema.org",
+  "@type": "BreadcrumbList",
+  "itemListElement": [
+    { "@type": "ListItem", "position": 1, "name": "Home", "item": "https://[domain]" },
+    { "@type": "ListItem", "position": 2, "name": "[Section]", "item": "https://[domain]/[section]" },
+    { "@type": "ListItem", "position": 3, "name": "[Page]", "item": "https://[domain]/[section]/[page]" }
+  ]
+}
+```
+
+### Conditional schema — generate only when applicable
+
+| Type | When to generate |
+|------|-----------------|
+| **Person / Author** | Site has a blog, named authors, or a founder bio page |
+| **FAQPage** | Any page contains questions and answers (including implied Q&A in body copy) |
+| **HowTo** | Any page explains a process or steps |
+| **LocalBusiness** | Company has a physical address or defined service area |
+| **Product + AggregateRating** | Site sells products and has reviews/ratings |
+| **ItemList** | Any page lists multiple items (locations, products, blog posts, features) |
+| **Event** | Site promotes events with dates and locations |
+| **Course** | Site offers courses or educational content |
+
+Read each page's actual content before deciding whether to generate these types.
+
+**Cross-reference the business-data intake (Phase 1.5, Question 2).** A schema type gates on BOTH the content signal (does the page actually have the data?) AND the business-data flag from the intake (did the developer confirm the data is real?). If either is missing, omit the schema type. Do NOT emit a `LocalBusiness` block just because the page has an address in the footer — the developer must have confirmed the physical location is theirs and the fields are complete.
+
+### The omit-not-placeholder rule — required schema fields
+
+Every schema type has some required fields. When the developer's intake did not confirm those fields as known, **omit the whole schema type**. Never emit:
+
+- `"name": "[COMPANY_NAME]"`
+- `"telephone": "+1-XXX-XXX-XXXX"`
+- `"streetAddress": "123 Placeholder Street"`
+- `"priceCurrency": "USD"` when the currency isn't known
+- Empty `sameAs` array entries or `[LinkedIn URL]` string literals
+
+For OPTIONAL fields inside an otherwise-known schema, omit only the field. Example: an `Organization` block with `name` and `url` but no `telephone` is fine — drop the `contactPoint` entirely rather than placeholder its phone number. A partial `Organization` with `name` and `url` and one confirmed social profile URL in `sameAs` still emits — dropping only unknowns.
+
+The audit report says the type was skipped and what unlocks it:
+
+```
+FAQPage:        ❌ not applicable (no FAQ content found)
+HowTo:          ⏳ unlocked when the developer confirms "Adding a widget" is a real process
+LocalBusiness:  ⏳ unlocked when a physical address is confirmed (business-data intake)
+Product:        ⏳ unlocked when product name, price, currency, and image are confirmed
+```
+
+### URL substitution in every JSON-LD block
+
+Every `@id`, `url`, `logo.url`, `sameAs[]`, `mainEntityOfPage`, and `potentialAction.target.urlTemplate` in the JSON-LD emitted by Phase 2 uses the URL mode set in Phase 1.6. Never hardcode the current URL when the environment is not production.
+
+### FAQPage example
+
+Fires on any page with Q&A pairs, including implied Q&A in body copy.
+
+```json
+{
+  "@context": "https://schema.org",
+  "@type": "FAQPage",
+  "mainEntity": [
+    {
+      "@type": "Question",
+      "name": "[Full question text]",
+      "acceptedAnswer": {
+        "@type": "Answer",
+        "text": "[Full answer text — plain text, no HTML tags]"
+      }
+    }
+  ]
+}
+```
+
+### HowTo example
+
+Fires on any page explaining a process or steps.
+
+```json
+{
+  "@context": "https://schema.org",
+  "@type": "HowTo",
+  "name": "[Process name]",
+  "description": "[One sentence describing the outcome]",
+  "step": [
+    {
+      "@type": "HowToStep",
+      "position": 1,
+      "name": "[Step name]",
+      "text": "[Step instructions]"
+    }
+  ]
+}
+```
+
+### Article example — with Open Graph article properties
+
+For blog posts and news content, use `Article` in JSON-LD AND add these Open Graph properties to `<head>`:
+
+```html
+<meta property="og:type" content="article">
+<meta property="article:published_time" content="[ISO 8601]">
+<meta property="article:modified_time" content="[ISO 8601]">
+<meta property="article:author" content="[Author name or URL to author profile]">
+<meta property="article:section" content="[Category — e.g. Tutorials, News]">
+<meta property="article:tag" content="[Tag 1]">
+```
+
+### Tina4 implementation
+
+In a Tina4 project, structured data goes in the base template, not repeated in every route.
+For page-specific schema (Article, WebPage, BreadcrumbList), use the template engine to
+inject dynamic values:
+
+**PHP example:**
+```html
+<!-- In src/templates/main.html, inside <head> -->
+<script type="application/ld+json">
+{
+  "@context": "https://schema.org",
+  "@type": "WebPage",
+  "url": "{{ current_url }}",
+  "name": "{{ page_title }} — {{ site_name }}",
+  "dateModified": "{{ page_modified | date('Y-m-d') }}"
+}
+</script>
+```
+
+**Python / Ruby / Node:** same pattern using the framework's template syntax.
+
+For static HTML projects: generate one JSON-LD block per page and insert it directly.
diff --git a/.claude/skills/tina4-seo/references/templates-and-guards.md b/.claude/skills/tina4-seo/references/templates-and-guards.md
new file mode 100644
index 00000000..6514cd87
--- /dev/null
+++ b/.claude/skills/tina4-seo/references/templates-and-guards.md
@@ -0,0 +1,86 @@
+# Templates and guards
+
+> Reference for the `tina4-seo` skill: DESIGN.md SEO section, plan structure, relationship to other tina4 skills, and the avoid-list. Moved out of `SKILL.md` unchanged.
+
+## DESIGN.md SEO section
+
+Append the following to `design/DESIGN.md` once the audit is complete:
+
+```markdown
+## SEO/AISO
+
+### Structured data
+- Organization ID: https://[domain]/#organization
+- Schema types implemented: [list]
+- Schema types not applicable: [list with reason]
+
+### AI discovery
+- /llms.txt: [date generated]
+- /llms-full.txt: [date generated]
+
+### Key SEO decisions
+- [date]: [decision] — [reason]
+```
+
+---
+
+## Plan structure
+
+Create `plan/seo/PLAN.md` in the project:
+
+```markdown
+# SEO/AISO Plan — [Project Name]
+
+**Outcome:** Full SEO and AISO coverage — structured data, AI discovery files, corrected
+robots.txt and sitemap, meta tags in base template, content audit complete, favicon package
+generated.
+
+## Scope
+- [ ] Phase 1: Discovery audit complete — current state documented
+- [ ] Phase 1.5: Intake gate — environment + business data + scope locked
+- [ ] Phase 1.6: URL mode decided and recorded
+- [ ] Phase 2: Structured data — applicable schema types generated (skipped types recorded as "unlocked when")
+- [ ] Phase 3: AI discovery files — llms.txt, llms-full.txt, ai.txt created
+- [ ] Phase 4: robots.txt — AI crawlers allowed; sitemap.xml generated (or deferred for non-prod)
+- [ ] Phase 4.5: Staging safeguards (only if environment = staging)
+- [ ] Phase 5: Meta tags — base template complete and dynamic
+- [ ] Phase 6: Content audit — headings, semantic HTML, alt text, entities, linking
+- [ ] Phase 7: E-E-A-T signals — about page, authors, contact, legal, HTTPS confirmed
+- [ ] Phase 8: Favicon package — SVG + RFG package generated and linked
+- [ ] Phase 9: Handoff report — DESIGN.md updated, full report delivered
+- [ ] Phase 9.5: Pre-launch checklist written (only if environment != production)
+
+## Bugs
+(none yet)
+
+## Commits
+(none yet)
+
+## Status: Not Started
+```
+
+---
+
+## Relationship to other tina4 skills
+
+| Skill | Relationship |
+|-------|-------------|
+| **tina4-design** | Runs first. tina4-seo reads DESIGN.md as its source of truth — company name, logo, colours, social profiles, favicon brief. Never duplicate intake. |
+| **tina4-developer-*** | Implements the template changes. tina4-seo tells the developer what to add and where; the developer skill handles framework-specific wiring. |
+| **tina4-a11y** | Handles WCAG 2.1 AA compliance — keyboard navigation, ARIA states, focus indicators, `<html lang="...">`. Overlap with tina4-seo on alt text, semantic HTML, and page titles — if both are running, do those items once in whichever runs first. |
+
+## Avoid these defaults
+
+- Do not generate structured data without reading the actual page content first — invented
+  schema facts do more harm than no schema
+- Do not add `noindex` or `noai` meta tags anywhere unless the developer explicitly confirms
+  a page should be excluded
+- Do not hotlink to the logo URL in structured data without confirming the URL is permanent
+  and publicly accessible (not a local dev URL, not a signed CDN URL)
+- Do not block any AI crawler in robots.txt unless the developer explicitly asks for it and
+  explains why
+- Do not generate a sitemap entry for authenticated, admin, or checkout pages
+- Do not emit `[COMPANY_NAME]` or `123 Placeholder Street` literals in required JSON-LD fields — omit the schema type entirely instead
+- Do not use the current localhost or staging URL as if it were production — use `{{ env.SITE_URL }}` or `https://REPLACE_WITH_PROD_DOMAIN` with a pre-launch checklist
+- Do not emit `LocalBusiness`, `Product`, `Person`, or `AggregateRating` schema unless the developer confirmed the required data at Phase 1.5 intake
+- Do not put a live `Sitemap:` directive in a staging `robots.txt` — staging must be non-indexable
diff --git a/.claude/skills/tina4-seo/references/validation-and-handoff.md b/.claude/skills/tina4-seo/references/validation-and-handoff.md
new file mode 100644
index 00000000..260ea3c8
--- /dev/null
+++ b/.claude/skills/tina4-seo/references/validation-and-handoff.md
@@ -0,0 +1,175 @@
+# Phase 8.5 - Validation, Phase 9 - Handoff report, Phase 9.5 - Pre-launch checklist
+
+> Reference for the `tina4-seo` skill: Phase 8.5 (validation), Phase 9 (handoff report), and Phase 9.5 (pre-launch checklist). Moved out of `SKILL.md` unchanged.
+
+## Phase 8.5 — Validation
+
+Before writing the handoff report, validate every generated artifact. Never claim complete without proof.
+
+### Structured data validation
+
+- **Google Rich Results Test** — paste each page URL into https://search.google.com/test/rich-results and confirm every schema type is detected with zero errors and zero critical warnings. Non-critical warnings (missing optional fields) can be listed but not blocking.
+- **Schema.org validator** — https://validator.schema.org/ for a stricter cross-check.
+
+For each page tested, record: URL, schema types detected, error count. A page with any error is not done.
+
+### Sitemap and robots validation
+
+- **Sitemap** — fetch `/sitemap.xml`, confirm HTTP 200, valid XML, and every `<loc>` matches an actual 200-response URL. A sitemap entry that 404s hurts more than not being listed at all.
+- **robots.txt** — fetch `/robots.txt`, confirm the Sitemap directive resolves, and no wildcard `User-agent: *` `Disallow: /` accidentally blocks the whole site.
+
+### Meta tag validation
+
+- **Open Graph** — https://www.opengraph.xyz/ or the Facebook Sharing Debugger. Confirm the og:image renders at 1200×630px on a preview.
+- **Twitter / X Card** — X retired the standalone card validator (`cards-dev.twitter.com/validator`) in 2023. Validate by drafting a post with the URL in the X composer and confirming the card preview renders, or use a third-party OG/Twitter preview tool (e.g. https://www.opengraph.xyz/). The `twitter:*` tags are still read by X and several other platforms, so keep them.
+
+### AI discovery files
+
+- **`/llms.txt`, `/llms-full.txt`, `/ai.txt`** — confirm each responds with HTTP 200 and `Content-Type: text/plain`. A file served as `text/html` is silently rejected by most AI crawlers.
+
+Record validation results in the handoff report — every ✅ must be backed by an actual test.
+
+---
+
+## Phase 9 — Handoff report
+
+Generate a complete audit summary in this format. Every cell contains a real value —
+never "see above" or "completed".
+
+```
+## SEO/AISO Audit Report — [Project Name]  [date]
+
+### Structured data implemented
+Organization:     ✅  https://[domain]/#organization
+WebSite:          ✅  SearchAction: [yes / no — no search function]
+WebPage:          ✅  implemented on [N] pages
+BreadcrumbList:   ✅  implemented on all non-homepage pages
+FAQPage:          ✅  [page URL]  |  ❌  not applicable (no FAQ content found)
+LocalBusiness:    ❌  not applicable (no physical address)
+Article:          ✅  implemented on [N] blog posts
+Person/Author:    ✅  [author name]  |  ❌  no blog / no named authors
+
+### AI crawler access (robots.txt)
+GPTBot:           ✅ allowed   OAI-SearchBot:   ✅ allowed
+ChatGPT-User:     ✅ allowed   ClaudeBot:       ✅ allowed
+PerplexityBot:    ✅ allowed   Perplexity-User: ✅ allowed
+Google-Extended:  ✅ allowed   CCBot:           ✅ allowed
+Bytespider:       ✅ allowed   Meta-ExternalAgent: ✅ allowed
+Sitemap directive: ✅ https://[domain]/sitemap.xml
+
+### AI discovery files
+/llms.txt:        ✅  [N] key pages listed
+/llms-full.txt:   ✅  generated
+/ai.txt:          ✅  generated
+
+### Sitemap
+/sitemap.xml:     ✅  [N] URLs, lastmod set, all priorities assigned
+
+### Meta tags (base template)
+description:      ✅  dynamic per page
+canonical:        ✅  dynamic per page
+og:image:         ✅  default 1200×630px social card created at /[path]
+Twitter Card:     ✅  summary_large_image
+theme-color:      ✅  light [hex] / dark [hex]
+AI snippet perms: ✅  max-snippet:-1 set
+
+### Content audit
+Heading hierarchy: ✅ / ⚠️ [N] violations fixed
+Semantic HTML:     ✅ / ⚠️ [N] issues fixed
+Image alt text:    ✅ / ⚠️ [N] images corrected
+Entity consistency: ✅ "[canonical name]" used consistently
+Internal linking:  ✅ / ⚠️ [note any orphaned pages]
+
+### E-E-A-T signals
+About page:       ✅ / ❌ missing — [action required]
+Author bios:      ✅ / ❌ / N/A
+Contact in footer: ✅ / ❌
+Privacy Policy:   ✅ / ❌
+HTTPS:            ✅ / ⚠️ mixed content on [page]
+
+### Favicon
+SVG favicon:      ✅ /favicon.svg — dark/light mode via media query
+PNG fallback:     ✅ /favicons/favicon-32x32.png
+Apple touch icon: ✅ /favicons/apple-touch-icon.png
+Web manifest:     ✅ /favicons/site.webmanifest
+RFG package:      ✅ complete  |  ⏳ pending — [reason]
+
+### Files changed
+[List every file that was created or modified, with a one-line description]
+- src/templates/main.html — structured data, meta tags, favicon links
+- public/robots.txt — added AI crawler allow rules and Sitemap directive
+- public/sitemap.xml — generated from route list
+- public/llms.txt — created
+- public/llms-full.txt — created
+- public/favicon.svg — created
+- public/favicons/ — RFG package extracted
+- DESIGN.md — Favicon Brief updated to "RFG package: complete"
+```
+
+---
+
+## Phase 9.5 — Pre-launch checklist (when environment != production)
+
+If Phase 1.5 selected anything other than production, write `plan/seo/PRE-LAUNCH-CHECKLIST.md`. This is the one file the developer works through before flipping the site live. Every skipped or placeholder-carrying item lands here as a concrete task with a file path.
+
+Template:
+
+```markdown
+# Pre-launch SEO checklist — [Project Name]
+
+Environment at build time: [Localhost / Staging without prod URL / Staging with known prod URL]
+Production URL: [known URL / "not yet decided"]
+
+Work through every item below before deploying to production.
+
+## URL substitution (if `REPLACE_WITH_PROD_DOMAIN` literals were used)
+
+- [ ] Global search-and-replace `REPLACE_WITH_PROD_DOMAIN` → `[actual prod domain]` across the project
+  - Files known to contain it: [list every file path found]
+
+## URL substitution (if `{{ env.SITE_URL }}` was used)
+
+- [ ] Confirm `SITE_URL` environment variable is set on the production host to `https://[actual prod domain]`
+- [ ] Confirm the template engine resolves `{{ env.SITE_URL }}` correctly on production (do one test request)
+
+## Files that were skipped and must be regenerated on production
+
+- [ ] `sitemap.xml` — skipped because no production URL was available. Regenerate with real URLs by re-running tina4-seo in production environment, OR generate now with the confirmed prod URL and drop into `/public/sitemap.xml`
+- [ ] `/llms.txt` — same
+- [ ] `/llms-full.txt` — same
+
+## robots.txt swap (if staging was in play)
+
+- [ ] Replace the hardened staging `robots.txt` with `deploy/robots.production.txt` on production deploy
+- [ ] Remove any `{% if env == 'staging' %}<meta name="robots" content="noindex">` blocks from templates OR confirm the env check resolves to false on production
+
+## Structured data — schema types unlocked by more data
+
+Every schema type below was skipped or reduced because required data was not confirmed at build time. Once the data exists, re-run tina4-seo OR add manually:
+
+- [ ] `LocalBusiness` — unlocked when a physical address is added (address, city, postal code, country, opening hours)
+- [ ] `Person` — unlocked when named authors are added to blog posts (name, jobTitle, bio, sameAs)
+- [ ] `Product` — unlocked when product data is complete (name, image URL, price, currency, availability)
+- [ ] `AggregateRating` — unlocked when real reviews exist (ratingValue, reviewCount)
+- [ ] `contactPoint` telephone on Organization — unlocked when support phone is confirmed
+- [ ] `sameAs` additions — add social profile URLs as they become available
+
+## Validation — repeat every Phase 8.5 test with the real production URL
+
+- [ ] Rich Results Test on every key production URL
+- [ ] Sitemap XML validates and every `<loc>` returns 200
+- [ ] `robots.txt` resolves and no `Disallow: /` remains
+- [ ] Open Graph preview renders on the Facebook Sharing Debugger
+- [ ] `/llms.txt`, `/llms-full.txt`, `/ai.txt` all serve `Content-Type: text/plain`
+
+## First 24 hours after go-live
+
+- [ ] Submit sitemap to Google Search Console
+- [ ] Submit sitemap to Bing Webmaster Tools
+- [ ] Confirm no unexpected `noindex` shipped to production
+- [ ] Check Search Console for immediate crawl errors
+
+Status: In Progress
+```
+
+Save this file, tell the user it exists, and add its path to the Phase 9 handoff report under a new **Pre-launch checklist** row.