# Agent brief — FINAL QA ROUND (capstone, after R1/R2/R3)

You are the **QA engineer of record** for ONE CFS page. R1/R2/R3 fresh-eyes reconcile passes
already ran and fixed drift. Your job is the final, zero-tolerance sign-off: catch ANY remaining
deviation from Figma — down to the smallest detail — fix the clear ones, adjudicate the ambiguous
ones, and certify the page section by section.

Unlike the blind R1–R3 agents, you ARE fully informed. Read:
- /home/mrwick/coding/fs/cfs/docs/_agent-reconcile-brief.md  (browser-queue protocol + per-engine cheat sheet)
- /home/mrwick/coding/fs/cfs/.claude/skills/reconcile-section/SKILL.md  (coordinate-measurement law)
- ALL prior round logs for YOUR page: `docs/inspection/<page>-round1.md`, `-round2.md`, `-round3.md`
- the page's section in `docs/2026-06-17-reconcile-accuracy.md` (residuals + open client questions)
Use those to find KNOWN soft spots — especially any item that FLIP-FLOPPED between rounds (e.g. a
heading text/name, a photo choice, a hover interpretation). Resolve each flip-flop by going back to
the Figma IR / node text as ground truth and locking the correct value, and say in your report which
way you resolved it and why.

## Acquire a browser slot first (queue protocol in the reconcile brief). Release at the end.

## The sweep — EXHAUSTIVE, section by section, desktop THEN mobile. Miss nothing.
For EACH section, top to bottom:
1. **Geometry** — every element bbox x/y/w/h, section order, gaps, padding, alignment, corner radius,
   dimensions — measured (getBoundingClientRect) vs IR, normalized to Figma px. No "looks right".
2. **Typography PER RUN** — every text node: fontFamily, size, weight, textCase, textDecoration,
   letterSpacing, lineHeight, color vs IR. Catch Lato-vs-Poppins, TITLE-case, per-run weight splits,
   ls/lh. getComputedStyle, not eyeballing.
3. **Color & fill** — every fill/stroke/border hex vs IR (backgrounds, text, dividers, icons).
4. **Images & icons** — correct SUBJECT vs Figma (not a stale/placeholder where the design specifies a
   real photo), object-fit, dimensions, and ICON fidelity (a chevron-vs-Figma-arrow, an svg vs the
   designed glyph). Note each deliberate functional-equivalent.
5. **EVERY interactive state** — for every button, link, card, tab, accordion, form field, nav item,
   sticky/floating action: TRIGGER hover AND (where applicable) active/focus/click, read computed
   style/rect, and confirm each delta matches the Figma hover/variant IR. Diff the variant if you
   haven't. A shared hover class is NOT proof — prove it fires. Verify tab switching for all panels,
   accordion open/close, form focus rings. Stress dynamic tabs (inject extras → no overflow).
6. **Responsive integrity** — at 393px confirm `document.documentElement.scrollWidth <= 393` (no
   horizontal overflow); confirm the mobile structure matches the MOBILE frame (not desktop shrunk).

## Output
- Fix every clear defect in `html/<page>.html` (+ css/custom.css if needed). Keep `<p>` bare. Commit.
- Write a FINAL QA CERTIFICATION to `docs/inspection/<page>-QA-final.md`:
  - a per-section table: section | geometry ✓/✗ | fonts ✓/✗ | color ✓/✗ | images ✓/✗ | hovers ✓/✗ |
    notes — with measured numbers for anything that wasn't already perfect;
  - a "flip-flops resolved" list (item → which value is correct per IR → what you set);
  - an explicit **hover inventory**: every interactive element on the page and the proven result of
    triggering its state;
  - residuals + consolidated client questions;
  - an overall verdict per breakpoint: PASS / PASS-WITH-RESIDUALS / NEEDS-WORK.
- Return a concise summary + the verdict. NEVER eyeball a screenshot for a measurement. State facts as
  facts, hypotheses as hypotheses; do not certify a section you didn't actually measure.