# Per-Page Figma Verification Runbook

Turnkey plan to finish the section-by-section `verify_node` + desktop/mobile
reconcile pass on all 10 non-index pages (homepage already done). All migration
is COMPLETE (every page bare-CDN, 0 config tokens, render-verified). All
per-section previews are extracted under `html/_verify/<page>/`.

**Current state (2026-06-19):** full reconcile DONE for cataract, centre-cluster,
blogs, innov-eyes, eye-specialists, specialities, centre-individual, **doctor-individual
(manual)**, **blog-individual (manual)**, **About Us (manual)**, **News & Media (manual)**,
**city-individual (manual)** (12 pages).
**1 page to be done MANUALLY** (overnight 2026-06-18 auto work set aside per Arjun):
Contact Us — see the reconcile-status table below.

## To resume
1. Reconnect figma-connect MCP (`/mcp` in Claude Code) — bridge daemon is up.
2. Re-run the figma-connect plugin in the CFS file (or restart Figma) to clear
   the hung `exportAsync`.
3. Sanity-check export works: verify a known homepage node, then proceed.

## Desktop + Mobile reconcile status (updated 2026-06-17)
Full Figma reconcile = desktop AND mobile reconciled section-by-section to the
3121 frames + handover bundle shipped. Tracked via git commits.

| HTML page | Reconcile status | Commit |
|---|---|---|
| cataract | ✅ DONE | ba9b39c |
| centre-cluster | ✅ DONE | 7deefb7 |
| blogs | ✅ DONE | a30651f / dfc6b75 |
| innov-eyes | ✅ DONE | 84ad120 |
| eye-specialists | ✅ DONE | 8f57272…9f2480b |
| specialities | ✅ DONE | 8c354e5…bf3a8ce (desktop + mobile, all sections + hover states) |
| doctor-individual | ✅ DONE (manual 2026-06-18) | manual reconcile to 3121:22256 (desktop) + 3121:22399 (mobile): hero/spec/qual/research/awards, awards notch cards + medal hover (recolor+rotate) + working « / » slider, mobile pills/research/awards; partials regenerated; bundle cfs-handover-doctor-individual-2026-06-18.zip (2281554) |
| centre-individual | ✅ DONE | 92363ec…6f12c22 (desktop + mobile, all sections + map-hover/address + canonical card swap) |
| blog-individual | ✅ DONE (manual 2026-06-18) | manual desktop+mobile reconcile to 3121:20084 (desktop) + 3121:20260 (mobile): hero split, summary, intro image+mirror, comparison stacked, Why-not-viral, Types two folder-tabs, Uses bordered folder-tab, stepper, Dos/Donts overlap, Side Effects Common/Rare, Conclusion full-bleed, blog cards canonical, FAQ mobile; partials regenerated; bundle cfs-handover-blog-individual-2026-06-18.zip |
| city-individual | ✅ DONE (manual 2026-06-19) | desktop + mobile reconciled (frames 3121:* city); Specialties Available accordion fixed (2e0882e): open panel max-width 700px→100% fills the track for any CMS tab count (was 290px gray gap at 5 tabs), accordion container + first/last trigger rounding swapped to homepage's responsive scheme → flat full-bleed mobile bands (was curved), desktop unchanged; corner radii match index.html. Bundle cfs-handover-city-individual-2026-06-19.zip. |
| **About Us** (NEW) | ✅ DONE (manual 2026-06-19) | reconciled desktop (3121:22745) + mobile (3121:23680): hero (ls/lh/breadcrumb), equipment tabs (desktop single-row + inset panel / mobile two folder-tab groups), real per-tab + per-person Figma image crops, Why-CFS canonical swap, Avant-Garde Load More, Chairman (right-col fill / mobile full-bleed navy), team cards (no rest border, full-perimeter hover border, photo pop-out, 59px row gap), founded bold run, section-tabs hidden mobile, mobile team Load More (4+rest), callback + footer canonical. Bundle cfs-handover-about-us-2026-06-19.zip (bf44708). |
| **Contact Us** (NEW) | ⬜ NOT DONE — redo MANUALLY | overnight 2026-06-18 build set aside per Arjun (2026-06-18); to be done manually |
| **News & Media** (NEW) | ✅ DONE (manual 2026-06-19) | reconciled desktop + mobile: hero (navy card 628/gap45), centered tabs + panel switch, real Figma thumbnails (News + Press), globe source icon, pagination spacing, mobile "All News" SemiBold; canonical callback form + footer added. Bundle cfs-handover-news-media-2026-06-19.zip. Video tab empty in Figma (client Q). |

**Reconcile DONE: cataract, centre-cluster, blogs, innov-eyes, eye-specialists, specialities,
centre-individual, doctor-individual (manual 2026-06-18), blog-individual (manual 2026-06-18),
News & Media (manual 2026-06-19), About Us (manual 2026-06-19), city-individual (manual 2026-06-19) (12 pages).**
**To do MANUALLY (overnight 2026-06-18 work set aside per Arjun): Contact Us (1 page).** The overnight inspection docs under
`docs/inspection/` are kept as reference only — not treated as certified.

> NOTE (2026-06-17): centre-individual partials in `html/centre-individual-components/`
> are STALE relative to the reconciled page (hero rebuilt, mobile tabs/doctor cards,
> address strip). Regenerate them before the next handover bundle (CLAUDE.md step 0).

## Page → Figma frame (Page 3 → Screens section)
| HTML page | Figma desktop | Figma mobile | reconciled |
|---|---|---|---|
| cataract | 3121:27330 | 3121:27168 | ✅ |
| centre-cluster | 3121:27647 | 3121:28076 | ✅ |
| eye-specialists | 3121:29159 | 3121:28536 | ✅ |
| specialities | 3121:28300 | 3121:28402 | ✅ |
| blogs | 3121:29365 | 3121:29498 | ✅ |
| doctor-individual | 3121:22256 | 3121:22399 | ✅ |
| centre-individual | 3121:20464 | 3121:20565 | ✅ |
| blog-individual | 3121:20084 | 3121:20260 | ✅ |
| city-individual | 3121:22150 | 3121:21144 | ✅ |
| innov-eyes | 3121:25424 | 3121:23191 | ✅ |
| about-us (NEW) | 3121:22745 | 3121:23680 | ✅ |
| contact-us (NEW) | 3121:23946 | 3121:24843 | ✅ |
| news-media (NEW) | 3121:24934 | 3121:24028 | ✅ |

## Not yet built — designed in Figma, no HTML page (2026-06-17 audit)
Full enumeration of the Page 3 → "Screens" section (every 1440-wide frame) cross-checked
against `html/*.html`. All 11 built pages map cleanly (no orphans). Distinct page designs
with NO HTML page:

| Page | Figma desktop | Figma mobile | notes |
|---|---|---|---|
| About Us | 3121:22745 | 3121:23680 | ✅ BUILT `html/about-us.html` (desktop variant `3121:22745`; second variant `3121:22956` flagged for client) — see 2026-06-17-reconcile-accuracy.md |
| Contact Us | 3121:23946 | 3121:24843 | ✅ BUILT `html/contact-us.html` (desktop+mobile, hovers proven) — map is a live Google Maps iframe pending client embed URL; see 2026-06-17-reconcile-accuracy.md |
| News & Media | 3121:24934 | 3121:24028 | ✅ BUILT `html/news-media.html` — one page, 3 desktop tab states: News `3121:24934` / PR `3121:25016` / Video `3121:25098`; tab switch + card hover proven; Video panel empty in Figma (client Q); see 2026-06-17-reconcile-accuracy.md |

**Client said FOUR new pages; this audit finds THREE designed-but-unbuilt.** Ruled out as
the 4th: International Patients (`3121:27113`/`27989`/`28213` are 364px reused *section*
bands, not a page); Empanelments / Careers (nav items, NO Figma frame). The 4th is likely
a nav page not yet designed, or a variant counted separately — **confirm scope with client.**

## Per-section workflow (same as homepage)
For each `html/_verify/<page>/<slug>.html`:
1. `verify_node(<figma node>, {renderUrl}, projectRoot, viewport={node bbox w×h})`.
2. If `E_DIFF_SIZE_MISMATCH`, set viewport to the node's exact bbox; if a
   leading offset, add a PREVIEW_CSS entry to strip the section's top padding.
3. Read the diff; fix gross deviations (structural/layout); document residuals
   (photos, JS-decoration, text micro-positions are accepted, as on homepage).
4. Shared components (utility-bar, main-nav, footer, sticky-bar, callback-form,
   testimonials, doctor-cards, centres/Locations, blogs) are IDENTICAL markup to
   the homepage and already verified — confirm-by-equivalence, focus effort on
   each page's UNIQUE sections.

## cataract — fully mapped (frame 3121:27330) ✅ DONE — reference for section mapping
| our section (preview slug) | Figma node | viewport (w×h) | shared? |
|---|---|---|---|
| 01-utility-bar | 3121:27331 | 1440×43 | shared ✓ |
| 02-main-nav | 3121:27418 | 1440×82 | shared ✓ |
| 01-hero-banner | 3121:27345 | 1382×672 | UNIQUE |
| 02-understanding-cataract | 3121:27354 | 1398×980 | UNIQUE |
| 03-risk-factors | 3121:27394 | 1382×697 | UNIQUE |
| 04-surgery-types | 3121:27391 | 1398×780 | UNIQUE |
| 05-patient-journey | 3124:59740 | 1382×902 | UNIQUE |
| 07-vision-types | 3121:27361 | 1382×1010 | UNIQUE |
| 06-iol-benefits | 3121:27358 | 1398×801 | UNIQUE |
| 08-surgery-cost | 3121:27395 | 1398×516 | UNIQUE |
| 09-risks-prevention | 3121:27413 | 1398×699 | UNIQUE |
| 10-why-choose-us | 3121:27364 | 1254×265 | UNIQUE |
| 11-testimonials | 3121:27410 | 1399×599 | shared-ish |
| 12-video | 3121:27441 | 953×537 | UNIQUE |
| 13-eye-care-experts | 3124:60005 | 1390×992 | shared (doctor cards) |
| 14-centres | 3124:60271 | 1398×882 | shared (Locations) |
| 15-faq | 3121:27415 | 1272×819 | UNIQUE |
| 16-blogs | 3121:27386 | 1328×833 | shared-ish |
| 14-callback-form | 3124:58557 | 1398×509 | shared ✓ |
| 15-footer | 3121:47448 | 1440×494 | shared ✓ |

For the other 9 pages: get the frame outline (table above), sort children by
y-offset, match to preview slugs the same way, then run the workflow.