# doctor-individual — Round 3 reconcile (agent doctor-r3)

Frames: desktop **3121:22256**, mobile **3121:22399** (file R6EY4TpNCvVqUEikM7Lof9).
Method: coordinate measurement (Figma IR vs DOM getBoundingClientRect/getComputedStyle), section by section, both breakpoints. Browser engine: chrome (queue slot).

The page was already substantially built; this round measured every section against IR and fixed the mismatches below.

## Desktop

| Section | Figma node | measured-vs-IR | fixed? | residual |
|---|---|---|---|---|
| Breadcrumb | Group 449 (3121:22360) | font was **Lato**; IR = Poppins Light 15px ls-0.6 TITLE. Current crumb was black; IR = #636262 | YES (added `font-['Poppins']`; current crumb → `#636262`) | — |
| Hero left card | "Left" [0,60 857x329] | card width 857 ✓; title 2-run Poppins (Reg 25 + SemiBold 56) ✓ | n/a | card renders 374h vs IR 329 — Figma's fixed rect is shorter than its content (pills overflow card bottom by ~25px in Figma); our flex auto-grows. Positions match within 3px. |
| Hero jump pills | Component 145-148 [y364 h50 r7 bd#2b286f Light 22 ls-0.88] | our pills `px-14` → 142/302/271/106 wide → **wrapped to 2 rows**; IR widths 124/287/255/90 single row | YES (`lg:px-6 lg:gap-16 lg:tracking-[-0.88px] flex-nowrap whitespace-nowrap`) → 126/285/254/90, single row | pills have NO Figma hover variant (empty reactions); kept existing invented yellow hover |
| Experience bar | Group 600 "42+ Years" SemiBold 29 + "of Experience" Reg 29 | desktop weight 600 ✓ | n/a | — |
| Specialization | heading Light 69 ls-2.76 TITLE; cards Group 569.. 406x106 r15 #f1f1f1, icon 86 r-full, text SemiBold 25 TITLE | heading ✓; cards 417x106 r15 ✓ (gap 59 vs IR 57) | n/a | gap 59 vs 57 (2px, fluid col) |
| Qualification/Experience | INSTANCE 414x567 r15, header Light 39 h79 #2b286f, body Light 21 TITLE | header/body ✓; first body item "MS Ophthalmology" rendered title-case vs IR all-caps "MS OPHTHALMOLOGY" | YES (item → "MS OPHTHALMOLOGY") | content is CMS rich-text |
| Booking sidebar | Frame 1597884546 card 467x601 r15, title SemiBold 22, labels Reg 18, submit Light 22 #ffcb05 r7 h55 | width 467 ✓, title 22 ✓, submit 55 ✓ | n/a | — |
| Research & Designation | Frame 1597884547: left col Light 24, right col Light 25, dotted divider #ebeaea 3w | cols 24/25 ✓, dotted divider ✓; **bullets** confirmed present in Figma render (list markers, not text runs) | n/a (already correct) | fluid cols ~3% wider (container, see below) |
| Awards | Group 599: heading Light 69; cards Component 126.. 206x229 r15 #f1f1f1 gap11; badge 43; arrows 43 ellipse white bd#2b286f | cards 205x228 r15 ✓ gap11 ✓ arrow 43 ✓ | n/a | arrows have no IR hover variant; kept invented yellow hover |
| Callback | Form 3124:58347 (shared canonical): card 478x439 r11, subtitle Light 22 ls-0.88, title Reg 38 ls-1.52, submit Light 20 #2b286f r6 239x42 | matches canonical city-individual byte-for-byte | n/a | input h 40 vs IR 42 (2px) — kept canonical to avoid forking shared component |
| Footer / Utility / Nav / Sticky | shared instances | byte-identical to city-individual canonical (only aria-current differs) | n/a | — |

### Container width (systematic, all unique sections)
Our unique sections use `max-w-[var(--container-site)]` (1440) + `lg:px-0`, so content spans full 1440 (1425 minus scrollbar). Figma content frames are ~1375-1398 wide centered (≈28-32px side margin). Fixed-px elements (hero 857 card, qual 414 cards, booking 467, award 205 cards) already match exactly; only the FLUID columns (research 1fr/1fr, specialization 1fr) stretch ~3%. Not changed — would require re-containering all sections (regression risk) for a <3% delta. Residual noted.

## Mobile (393px)

| Section | Figma node | measured-vs-IR | fixed? | residual |
|---|---|---|---|---|
| Hero | Frame 1597884433: grey card 344x205 r17, photo 344x367 r17, name Bold 30, "42+ Years" Bold 18, subtitle Reg 15 | h1 30 Bold ✓, exp 18 Bold/Reg ✓, subtitle 15 ✓, photo 367 ✓; order card→photo→pills ✓ | n/a | side margin 15px (site-wide `.lg:px-0`→15px @≤1430 rule) vs IR ~24px — global convention, not changed |
| Jump pills | Component 151/152 188x31 r7 bd#2b286f Light 15 | our 31h r7 15px ✓, wrap to 2 rows ✓ | n/a | — |
| Specialization | Frame 1597884551: heading SemiBold 30 TITLE centered; cards 76h r10, icon 68, text SemiBold 15 | heading 30 centered ✓; cards 76h r10 single-col ✓ icon 68 ✓ text 15 ✓ | n/a | — |
| Qualification/Experience MOBILE | 3121:22400/22405: card r10, header bar h63 SemiBold 30 white, body Light 15 lh25 TITLE | header h63 30 ✓, body 15 ✓, stacked ✓ | n/a | — |
| Book An Appointment (mobile CTA) | Group 554: 41h r10 #ffcb05, Reg 18 #2b286f centered | `.cta-mobile-book` 41h r10 18 ✓ | n/a | — |
| Research MOBILE | Frame 1597884554: heading SemiBold 30 lh38 centered; **single column** Light 15 lh25; **Load More** pill 132x29 r6 bd#2b286f Light 18 reveals 2nd col | our build showed ALL 16 items, **no Load More**; IR shows col1 + Load More that reveals col2 | YES (col2 `hidden lg:!block`, mobile-only Load More button + JS toggle; desktop unaffected) | — |
| Awards MOBILE | Frame 1597884553: heading SemiBold 30 centered; cards 146x160 gap20; arrows 23 | cards 146x160 ✓; **gap was 8, IR 20** | YES (mobile `gap-[20px]`) | mobile arrows hidden (touch-scroll) — deliberate; arrows are 23px in IR |
| Callback MOBILE | Form 3121:22480: subtitle Light 20, title Reg 27, inputs Light 15, submit Light 16 | shared canonical responsive scale gives 18/24 at base, 15/19 inputs | n/a | 2-3px deltas (20→18 subtitle, 27→24 title, 15→19 name input) kept at canonical to avoid forking shared callback |

No horizontal overflow at 393 (scrollWidth=393). Total height 4857 (IR mobile frame 5270; difference is the collapsed Load-More 2nd column + 15px gutters).

## Hover/interaction verification
- Hero pills: no Figma hover variant (empty reactions) → invented yellow-fill hover; Tailwind rules confirmed compiled. Not a Figma-verified hover.
- Awards arrows: no IR hover variant → kept invented yellow hover (functional slider controls).
- Research Load More: verified click reveals col2 (7 items) on mobile, hidden+button hidden on desktop (`lg:!block`).
- Shared callback/footer/nav hovers: canonical component (byte-identical to city-individual), not re-derived.

## Commits
- hero pills single-row + breadcrumb current crumb #636262
- qualification first item caps
- breadcrumb Poppins font + mobile research Load More (HTML + js/main.js)
- mobile awards gap 20px

## Open questions
- Container width: should unique sections inset to ~1380 (`--container-inner`) to match Figma's centered content frames, or keep full 1440? Left full to avoid broad regression; fixed-px elements already match.
- Mobile side gutter is 15px site-wide (custom.css `@media ≤1430 .lg:px-0`) vs Figma ~24px — global convention; not page-specific.