# Agent brief — CFS page reconcile (FRESH EYES)

Your job: reconcile ONE CFS page to its Figma design so it matches **pixel-faithfully**,
section by section. Treat this as a from-scratch reconcile — measure everything yourself
against Figma and fix every mismatch. Do not assume any part is already correct.

Read FIRST and obey:
- /home/mrwick/coding/fs/cfs/docs/_agent-reconcile-brief.md — browser-queue protocol (ACQUIRE a
  slot before any rendering, RELEASE at end) + per-engine cheat sheet.
- /home/mrwick/coding/fs/cfs/.claude/skills/reconcile-section/SKILL.md — the coordinate-measurement
  law. Follow it exactly.

Do NOT read any file under `docs/inspection/` and do NOT read
`docs/2026-06-17-reconcile-accuracy.md` — form your own independent judgement from Figma + the DOM.

## Order (NON-NEGOTIABLE — slow is correct)
1. **Desktop, section by section, top to bottom.** `get_node_outline(<desktop frame>)`, sort
   children by bbox.y → section list. For EACH section, finish it fully before the next:
   a. Pull the section IR — per element: bbox x/y/w/h, fill hex, stroke hex+weight, corner radius;
      per-RUN text: fontFamily, size, weight, textCase, textDecoration, letterSpacing, lineHeight,
      color. READ fontFamily + textCase PER NODE (reused components carry their own typography —
      Lato vs Poppins, TITLE-case). Iterate ALL runs, never just runs[0].
   b. Measure OUR render at 1440px (getBoundingClientRect + getComputedStyle), normalize to Figma
      px (scale = FIGMA_W / measured-section-width). Compare the NUMBERS.
   c. Fix every clear mismatch (size/weight/family/case/decoration/color/spacing/radius/dimensions/
      order/position). Position by Figma coordinates. Keep `<p>` BARE (CMS) — typography on the
      wrapper or a cms-* class.
   d. Images: confirm the correct SUBJECT vs Figma (not a stale/placeholder where the design
      specifies a real photo), object-fit, dimensions. Pull the real fill with get_image_to_disk
      (outDir = the page's assets dir) and wire it if wrong.
   e. **Hover/interaction for THIS section now:** for every interactive element (button, card,
      link, tab, accordion) find its hover/active variant via reactions → get_variant_set → diff
      default vs variant per element (per-run for text); wire each delta; then TRIGGER the
      hover/click in the browser and read computed style/rect to PROVE every delta fires. A shared
      hover class is NOT proof — verify it actually changes.
   f. Re-measure to confirm fixes. Then move to the next section.
2. **THEN mobile.** Switch to 393px, `get_node_outline(<mobile frame>)`, sort by bbox.y. Repeat the
   full per-section discipline against the MOBILE frame — it is often a DIFFERENT structure (pills
   vs grid, stacked, colour/size/weight flips); measure against mobile IR, not desktop values.
   Confirm `document.documentElement.scrollWidth <= 393` (no horizontal overflow).

Honor project rules: Tailwind CDN arbitrary values; bare `<p>`; dynamic tab counts must wrap, never
overflow (stress-test by injecting extra tabs).

## Output
- Fix defects in `html/<page>.html` (+ css/custom.css if needed). Commit your fixes (clear messages).
- Write your findings to the EXACT path given in your task prompt (a per-round file under
  docs/inspection/). Use a per-section table: section | Figma node | measured-vs-IR result | fixed?
  | residual/question. Be specific with numbers.
- Return a concise summary: sections checked, defects fixed, residuals, open questions.
- NEVER eyeball a screenshot to derive a measurement — IR + DOM rects only. State facts as facts,
  hypotheses as hypotheses. Don't claim a section matches without the measured numbers to back it.