# doctor-individual — Round 1 reconcile (agent doctor-r1)

Desktop frame **3121:22256** (1440), mobile frame **3121:22399** (393).
Method: Figma IR (figma-connect MCP) bbox/runs/fills vs DOM getBoundingClientRect+getComputedStyle
(Chrome MCP slot), per section, both breakpoints. Numbers are Figma-px normalized.

## DESKTOP

| Section | Figma node | measured-vs-IR | fixed? | residual/question |
|---|---|---|---|---|
| Hero left card | Group "Left" 857x329 r28 #f4f4f8 | was stretching to 669h (grid) + element insets off | YES — `lg:items-start` + `min-h-329` + per-element insets (title pl16, exp pl30) | — |
| Hero title block | TEXT 44,71 — Padma Reg 25px + h1 SemiBold 56px #2b286f lh100 | matched (split div+h1, fine) | n/a | — |
| Hero experience | "42+ Years"(SemiBold) + "of Experience"(Reg) + "\| Delhi" Reg, Poppins 29px #2b286f | matched | n/a | — |
| Hero RIGHT photo card | Frame 525x679, photo CROP fill (turban doctor, black bg) | was **392h** + **WRONG subject** (clean-shaven white-coat man) | YES — h 392→679, swapped to Figma fill `hero-mahipal-sachdev.png` (downscaled 910x1365) | — |
| Hero jumplink pills | Comp145-148 124/287/255/90 h50 r7 navy-border, Light 22px, ls-4% | labels were "Specializations/Qualification"; widths off → 2-row wrap | YES — labels → "Specialities/Qualifications & Experience/Research & Designation/Awards"; gap tightened | wraps to 2 rows desktop (our text wider than Figma's; acceptable per dynamic-pill rule) |
| Hero pill HOVER | variant 3121:15373 → bg #ffcb05, text navy, weight Light→**Medium 500**, border→yellow | was navy-invert (`bg-#2b286f text-white`) — WRONG | YES — `hover:bg-#ffcb05 hover:border-#ffcb05 hover:font-medium`; **hover TRIGGERED & verified** (bg rgb(255,203,5), wt 500) | — |
| Specializations heading | "Specialization" Poppins Light 69px #2b286f TITLE lh90 | matched | n/a | — |
| Specialization cards | 7× 406x106 r15 #f1f1f1, icon 85-86 r-circle, label SemiBold 25px TITLE | matched (410x104 r15, icon 85, SemiBold 25px) | n/a | spec cards have NO Figma hover (reactions empty); our `hover:shadow-md` is a benign embellishment |
| Qualification/Experience cards | 414x567 r15 #f1f1f1, header navy h79 Light 39px white, body Light 21px #2b286f TITLE | matched (425x615 r15, hdr 79 Light 39 white, body Light 21 navy) | n/a | card taller (more list items than Figma fixed) — content-driven, fine |
| Booking sidebar | Frame 467x710, navy card r15, title SemiBold 22px white lh46, labels Reg 18px, inputs 410x42 r7 white-border, submit yellow 410x55 r7 | matched (467 r15 navy, title 22 SemiBold, label 18, input h45 r7, btn yellow r7) | n/a | — |
| Sidebar submit HOVER | variant 3124:14558 → yellow bg, navy text, weight Light→**Medium 500**, **NO scale** | global `.cta-submit:hover{scale(1.05)}` contradicted Figma | YES — `.booking-sidebar .cta-submit:hover{transform:none;font-weight:500}`; **verified** (transform none, wt 500) | — |
| Research & Designation | h2 Light 69px left; left col Light 24px, right col Light 25px #2b286f TITLE, dotted-round vertical divider #ebeaea w3 | matched typography; divider was `dashed` | YES — divider dashed→**dotted** | bullets present in Figma (kept list-disc) ✓ |
| Awards carousel | h2 Light 69px; cards 206x229 r15 #f1f1f1 gap11, badge 43x43, text Light 17px TITLE center; arrows 43x43 white/navy | matched (205x228 r15 gap11, badge 43, text Light 17, arrows 43 round) | n/a | badge straddles card top edge in Figma (y14 vs card y36); ours sits fully inside — minor decorative residual |
| Callback form (shared) | Form 1398x509 r30 + bg image; white card 478x439 r11; title Reg 38px #2b286f; subtitle Light 22px; inputs 391x42 r6; submit navy 239x42 r6 | hooks present (canonical); geometry matched | n/a | submit hover: Figma variant = yellow-invert, but **all 5 site pages use brightness/opacity** (canonical) — kept consistent; site-wide deviation, not page-specific |

Desktop scrollWidth 1433 vs client 1425 — the 8px is the carousel prev-arrow `-left-2` decorative offset in the container gutter (cards scroll inside `overflow-x-auto`, don't expand page). Acceptable.

## MOBILE (393)

Mobile is a DIFFERENT structure — pulled the mobile frame IR separately.

| Section | Figma node | measured-vs-IR | fixed? | residual |
|---|---|---|---|---|
| Hero grey card | Rect 344x205 r17 #f4f4f8, content inset x26 top y10 | was 317h, too much top pad | YES — `min-h-205` + `pt-10 px-26` + `gap-2` | — |
| Hero photo | Mask 344x367 r17, stacked BELOW grey card, gap 19 | was 260h, mt off | YES — h 367, grid `gap-y-19` | — |
| Hero title/exp | title Bold 30px lh37; exp Bold/Reg 18px lh52; padma Reg 15px lh22 | h1 Bold 30 ✓; "42+ Years" was SemiBold(600) | YES — span `font-bold lg:font-semibold` (mobile 700) | — |
| Hero pills | Comp89/151/152 BELOW photo: row1 Specialities+Qualification&Experience, row2 Research&Designation+Awards, h31 15px | were INSIDE grey card (wrong position) | YES — desktop ul `hidden lg:flex`; added mobile-only `flex lg:hidden` ul AFTER photo (text "Qualification & Experience" singular) | — |
| Booking sidebar | **ABSENT on mobile** — replaced by single button | full navy form rendered on mobile | YES — `aside` → `hidden lg:block`; added mobile `Book An Appointment` button (355x41 r10 yellow, Reg 18px navy) after Experience | — |
| Specialization | heading SemiBold 30px **CENTERED**; cards 1-col 293x76 r10, icon 68, label SemiBold 15px | heading was left | YES — heading `text-center lg:text-left`; cards already 1-col h76 r10 ✓ | — |
| Qualification/Experience | stacked 1-col 355x405 r10, hdr h63 SemiBold 30px white, body Light 15px lh25 | matched (mobile grid stacks; hdr 30 SemiBold, body 15) | n/a | — |
| Research | heading SemiBold 30px center; body Light **15px** lh25 1-col, "Load More" button | body was 16px; **all items shown** (Figma truncates + Load More) | PARTIAL — text 16→15px; divider hidden mobile ✓ | **Load More** progressive-disclosure (mobile shows ~9 items + button) NOT implemented — needs JS; our mobile shows all items in 1 col |
| Awards | heading center 30px; cards 146x160 1-col scroller | matched | n/a | — |
| Callback | full-bleed (r0, w393) | matched | n/a | — |

Mobile scrollWidth = clientWidth = 393 — NO horizontal overflow.

## Shared/reused (not re-reconciled — canonical, verified on other pages)
Utility-bar, main-nav, footer (15-footer), sticky-bar (16) — reused canonical components; left as-is.

## Open questions / deviations
1. **Callback submit hover**: Figma variant is a yellow-invert (navy→yellow bg, white→navy text). All 5 CFS pages currently use a brightness/opacity hover instead (canonical). Kept consistent with the site rather than deviate one page. Flag for a site-wide callback-hover pass if the invert is desired.
2. **Mobile Research "Load More"**: Figma mobile truncates the research list and shows a Load More button; we render all items. Needs JS to implement progressive disclosure (CMS list). Not built this round.
3. **Awards badge straddle**: Figma badge overlaps the card's top edge (~half above); ours sits inside. Minor decorative; left as-is to avoid scroll-track clipping.
4. Desktop pill labels are wider than Figma's shorter wording → 2-row wrap on desktop (Figma is 1 row). Acceptable under the dynamic-pill/CMS tolerance.