# doctor-individual — Round 2 reconcile (fresh-eyes, by coordinates)

Date: 2026-06-17 · agent **doctor-r2** · desktop frame `3121:22256` (1440) · mobile frame `3121:22399` (393).
Method: Figma IR bbox/run-fonts/colors vs DOM `getBoundingClientRect`/`getComputedStyle` at 1440 & 393. Page was already
substantially built; this round measured every section against Figma and fixed the deltas found.

## Desktop (1440) — per section

| Section | Figma node | measured vs IR | fixed? | residual |
|---|---|---|---|---|
| Utility bar | Top Details `3121:22343` | bar #d9d9d9 1440×43; links Lato Reg 16px #434343 right-aligned | matched | — |
| Main nav | Menu `3121:22368` | h84 logo/cta; shared component | matched | — |
| Breadcrumb | Group 449 `3121:22360` | **was CENTERED x582** (flex-col child + mx-auto shrinks to content); Figma left x68 | **FIXED** add `w-full` → crumbs left at x0 | Figma indents x68 (~52px); I left-aligned to content column (x0) like the headings — minor indent diff |
| Hero left card | Hero Banner Left `3121:22271` | grey #f4f4f8 857×329 r28; subtitle Poppins Reg 25px, H1 SemiBold 56px, meta 29px (42+Years SemiBold / of Experience Reg) all #2b286f | matched (h1 56/600, sub 25/400, meta 29 ✓) | Figma grey card is exactly 329 tall with the 4 jumplink pills overlapping its bottom edge / below it; my card min-h 329 grows to ~432 to contain the pills (grey bg extends behind them). Visual-only; geometry of text matches |
| Hero right card | Hero Banner Right `3121:22266` | 525×679 navy/photo, r28; photo is a CROP of the doctor | matched (525×679, r28) | photo asset `hero-mahipal-sachdev.png` is a real 910×1365 portrait — correct subject |
| Specialization | Frame 1597884548 + heading | heading Poppins Light 69px ls-4% lh90 TITLE #2b286f; cards 406×106 r15 #f1f1f1, icon 86×86 round, text Poppins SemiBold 25px TITLE; 2-col gap 57 | matched (69/300, card 106/r15, icon 86 round, text 25/600; `lg:gap-x-[59px]`≈57) | — |
| Qualification/Experience | Qualification DESKTOP `3121:14923` | card 414×567 r15; header 414×79 navy, Poppins Light 39px white TITLE; body Poppins Light 21px TITLE #2b286f; gap 44 | matched (h79/39px/300; body 21/300; `lg:gap-[43px]`≈44) | — |
| Booking sidebar | Frame 1597884546 | navy 467 r15; labels Poppins Reg 18px white; inputs 410×45 r7 white-1px; placeholder Poppins Light 15px #fafaff; submit Poppins **Light 22px** #2b286f on #ffcb05 410×55 r7 | matched (467/r15, submit 22/300) | inputs h45 in Figma vs my h45 ✓ (page had h-[45px]); r7 ✓ |
| Research & Designation | Frame 1597884547 | heading Light 69px; 2 cols Poppins Light TITLE #2b286f — **left col 24px, right col 25px**; dotted divider #ebeaea 3px | matched (`lg:text-[24px]` / `lg:text-[25px]`, `border-dotted border-[#EBEAEA] border-l-[3px]`) | — |
| Awards & Recognition | Group 599 / Component 116 | heading Light 69px; card grey rect 206×192 r15, badge 43×43 at x81, text Poppins Light 17px TITLE centered, gap 11; arrows Ellipse 43×43 white #2b286f-1px **inside** at x≈15 / x≈1350 | **FIXED** arrows were `-left-2/-right-2` poking 8px past viewport (docW 1448) → `left-0/right-0` + track `lg:mx-[56px]` so cards start after the arrow; overflow now 0 | my card grey is 228 tall vs Figma 192 (Figma grey excludes the badge zone above; badge floats over the top). Visual-only; width 205≈206 ✓ |
| Callback form | Form `3124:58347` | white card 478×439 r11; "Could not find" Poppins Light 22px lh75; "Request a Callback" Reg 38px; inputs 391×42 r6 Poppins Light 19px #919191; phone prefix 63px "+91" #000; CTA navy #2b286f white "Book An appointment" Light 20px 239×42 r6 | matched (478/439/r11; 22px/38px; 391w; 63w; CTA navy/white 239/20px) | shared component — matches |
| Footer / Sticky | Footer `3121:48248` | shared reused components | matched | — |

### Desktop hover/interaction (variant IR diffed + triggered in browser)
| Element | Figma variant | delta | wired? | proof (computed style after $B hover) |
|---|---|---|---|---|
| Jumplink pill | `3121:15373` | white→#ffcb05 fill, border drops, text Poppins **Light→Medium 500** (color/size stay) | yes (existing `hover:bg/border-[#ffcb05] hover:font-medium`) | bg `rgb(255,203,5)`, border same, fw `500`, color navy — **FIRES, matches** |
| Booking submit | Component 185 → `3121:14558` | text Light→**Medium 500**, NO scale, fill stays #ffcb05 | yes (`.booking-sidebar .cta-submit:hover` Light→Medium, no scale, in custom.css) | bg `rgb(255,203,5)`, fw `500`, transform `none` — **FIRES, matches** |
| Awards arrow | `Right` group | Figma arrow has **ON_CLICK only**, no hover variant | my `hover:bg-[#ffcb05]` is an enhancement (consistent w/ pill) | bg→`rgb(255,203,5)` — fires; harmless addition |
| Qual card | `3121:14923` (Default) / `…14934` | hover variant **identical to default** (no visible delta) | n/a — correctly static | — |
| Award card | `3121:14760` etc. | hover variant **identical to default** (same fill/text/badge) | n/a — correctly static | — |
| Callback submit | Button-CTA → `1:465` | variant is the yellow/navy (mobile) state; desktop default = navy/white | desktop keeps navy/white, no distorting scale | bg navy, color white, transform `none` — fires, no scale smell |

## Mobile (393) — per section

| Section | Figma node | measured vs IR | fixed? | residual |
|---|---|---|---|---|
| Hero | Frame 1597884433 `3121:22455` | grey card 344×205 r17 #f4f4f8 at x25; H1 Poppins **Bold 30px** ls-4% lh37; meta 18px (42+ Bold / Reg); subtitle Reg 15px; photo card 344×367 r17 navy; breadcrumb Poppins Light 15px TITLE | matched (h1 30/700, meta 18, sub 15, photo h367, r17) | **margin: Figma 25px vs my 15px** — see global-rule note below |
| Jumplink pills (mobile) | Component 89 | pill 101×31 r7 #2b286f-1px, "X" Poppins Light 15px ls-4% TITLE #2b286f | matched (`h-[31px] text-[15px] rounded-[7px] font-light tracking-[-0.6px]`) | — |
| Specialization | (cards reflow) | heading SemiBold 30px CENTER; cards 76 tall, text 15px | matched (heading 30/600 center, card h76, text 15) | — |
| Qualification MOBILE | `3121:22400` | card r**10**; header h63 navy "Qualification" Poppins **SemiBold 30px** white; body Poppins Light **15px** lh25 TITLE | matched (`rounded-[10px]`, header `font-semibold text-[30px] h-[63px]`, body `text-[15px]`) | — |
| Experience MOBILE | `3121:22405` | same pattern | matched | — |
| Research mobile | Frame 1597884554 | single column, Poppins Light #2b286f | matched (stacks) | — |
| Awards mobile | Frame 1597884553 `3121:22446` | card 146×**160**; badge **26×26**; text Poppins Light **12px** TITLE; arrows 23×23 shown | **FIXED** badge was 48→**26px**, text was 14→**12px** (lh 18) | mobile arrows (23×23) hidden on my touch-scroll carousel (`hidden lg:flex`) — left for touch swipe; noted |
| Callback mobile | Form `3121:22480` | white card 332×432 r11 centered; "Could not find" Light **20px** CENTER; "Request a Callback" Reg **27px** CENTER; submit yellow "Submit" Light 16px 268×42 r6; inputs 265×42 r6 | mostly matched (centered, yellow Submit 16px, inputs h42/r6) | subtitle mobile 18px vs Figma 20px; "Request a Callback" mobile 24px vs Figma 27px (≤3px, shared component's responsive scale — left) |
| Footer / Mobile menu / Task bar | Component 82/Footer, Mobile-Menu | shared reused | matched | — |

No horizontal overflow at 393 (docW=393) or 1440 (docW=1440).

## Arbitrary-class / CDN sanity (requested)
- `px-6` → 24px, `lg:px-0` etc. resolve correctly under bare Play CDN (verified on a real in-page element, not injection — injected classes aren't JIT-scanned, so test on real DOM).
- `lg:grid-cols-[857px_525px]`, `lg:w-[467px]`, `bg-white`, `rounded-[15px]`, `mx-[56px]`: all take effect (measured).
- **Global rule `css/custom.css:960` `@media (max-width:1430px){ .lg\:px-0{ padding:15px !important } }`** clamps every `px-6 lg:px-0` section to **15px** side padding below 1430px, overriding the `px-6` (24px) intent. Figma mobile margin is **25px**. So mobile gutters render 15px (10px tighter than Figma each side). This is a **global, all-pages rule** — NOT changed from this single-page reconcile to avoid regressing the other 10 pages; flagged for a cross-page decision.

## Open questions / deliberate deviations
1. **Mobile side margin 15px vs Figma 25px** — caused by the global `.lg\:px-0` !important rule (above). Needs a cross-page call before changing.
2. **1024–~1430px viewport band overflows** (docW 1432 at vw 1024): the desktop hero `lg:grid-cols-[857px_525px]` (=1402px fixed) and nav assume ≥~1440. The `lg:` prefix activates at 1024 but the design is authored at 1440. Pre-existing, affects all fixed-px desktop CFS pages. The two TARGET breakpoints (1440, 393) are clean. Not re-architected here.
3. **Awards card grey-rect height**: Figma grey is 192 (badge floats above it, total component 228); my card grey bg is the full 228 with badge inside the top. Visual-only; geometry matches at the card level.
4. **Mobile carousel arrows** (23×23 in Figma) hidden on mobile in favor of native touch-scroll — conventional; flagged.

## Commits this round
- `857b2e8` mobile award badge 48→26 + text 14→12
- (prior) breadcrumb `w-full` + awards arrows inside / `lg:mx-[56px]` (kill 8px desktop overflow)