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

Desktop frame **3121:22150**, mobile **3121:21144** (file R6EY4TpNCvVqUEikM7Lof9).
Browser engine: playwright slot (`city-r2`). Measured at 1440px / 393px with
getBoundingClientRect + getComputedStyle, normalized to Figma IR px. Page was already
substantially built; this round measured every section against IR and fixed the
mismatches found.

## Arbitrary-class sanity check (bare Play CDN)
Confirmed `lg:w-[400px]`, `lg:grid-cols-[964px_…]`, `lg:bg-[#2b286f]`, `rounded-[28px]`,
`lg:gap-x-[28px]`, `lg:gap-y-[13px]`, `text-[50px]`, `font-light` all take effect under
the bare CDN (verified via computed grid-template/gap/bg/radius). No silent no-ops; no
custom.css fallback needed for this page's arbitrary utilities.

## Desktop — per section

| Section | Figma node | measured vs IR | fixed? | residual |
|---|---|---|---|---|
| Utility bar / Nav | 22151 / 22245 | shared component, unchanged | — | — |
| Hero | 22164 | left card 964×381 #f4f4f8 r28 ✓; right navy 400 wide (Figma photo rect 397) ✓ h419; grid `964px 400px` gap16 ✓; H1 Poppins SemiBold 55px lh82 #2b286f ✓; subtitle Poppins Reg 27px ✓; form +91 Lato 18, button Lato Reg 24 ✓ | n/a | Figma right-frame is 525 wide (photo overlaps card by 107px); we use a 400 non-overlapping col. Cosmetic. |
| Breadcrumb | 22222 | Poppins Light 15px ls-4% TITLE; "Home" #000, "Eye Hospital in Mumbai" #636262 ✓ | n/a | Figma uses a faint 1px "Arrow 13" vector as separator; we use "›" char. Breadcrumb x=68 in frame vs our container-left ~37 (31px). Cosmetic. |
| About | 22183 | Poppins **Light 300** 20px JUSTIFIED TITLE #2b286f, w1364 ✓ (lh AUTO≈28, ours 30) | n/a | lh 30 vs ~28 (2px). |
| Centres heading | 22185 | Poppins Light 50px TITLE #2b286f centered ✓ | n/a | — |
| Centres grid/cards | 22185 | card Figma 421×315 r7; img 207; name Poppins Light 30px ls-4%; city 20px; book pill 139×28 r7 Light 12px; phone circle 28×28 ✓. col-gap 28 ✓, **row-gap was 28, Figma 13** | **YES** row-gap 28→13 | cards render 441 wide (3-col fill of wider container-inner) vs Figma 421 — fluid-vs-fixed, design intent (3 across) met. |
| Specialties | 22202 | container 1384×636 r20 #f1f1f1 ✓; 5 navy strips w92 colors #2b286f/#3a3692/#4641b4/#514cd0/#5b54eb ✓; vertical labels Poppins Light 36px ls-4% white ✓; active title 36px x132 y48 + body Poppins Light 20px TITLE #000 ✓ | n/a (all match) | — |
| Doctors | 22205 | heading Poppins Light 50px ✓; card 314×437 r17 #f1f1f1 gap41 ✓; img 227; degree Poppins Med 14 ls-4%; name 21 ls-4% #2b286f; exp bar "41+" SemiBold16 + " years…" Reg16 #fff; loc pill 90×29 r3 #d9d9d9 (bottom of photo); "Mumbai" Lato Reg 15; book Poppins Reg 13 #000 no-underline (cms class, verified on `<p>`) ✓ | n/a | — |
| FAQ | 22215 | heading Poppins Light 50px ✓; rows 1381×69 r5 #f1f1f1 gap13; question Poppins Reg 20px ls-4% TITLE #000 ✓ | n/a | — |
| Services strip | 22218 | heading Poppins Light 50px ✓; links Poppins Light 20px lh38 #2b286f ✓ | n/a | — |
| Callback form | 3124:58592 | card 478×439 r11; subtitle Poppins Light 22px; title Poppins Reg 38px; fields 391 wide (Figma h42, ours h40); +91/labels Poppins Light 19px #919191; submit 239 wide navy Light 20px white ✓ | n/a | field height 40 vs 42 (2px). |
| Footer / sticky | 48148 | shared component, unchanged | — | — |

### Desktop hovers (TRIGGERED + measured, not assumed)
- **Doctor card** (`.doctor-card`, canonical hooks present): loc-bar #d9d9d9→**#ffcb05**; city #000→**#2b286f**; image→**scale(1.13)**; pin #000→#2b286f and 10×14→**13×18**; "41+" 16→**23px**; book→**15px no-underline**. All fire. ✓
- **Centre card** (`.centre-loc-card`): name→**underline**; arrow→width 7px opacity 1 (expands); phone btn bg→**#2b286f**, path fill→**white**; image→scale(1.13). All fire. ✓

## Mobile — per section (frame 3121:21144, measured at 393px)

| Section | Figma node | measured vs IR | fixed? |
|---|---|---|---|
| Hero | 21145 | card 344 wide r17 #f4f4f8 h~203; H1 Poppins **Bold 38px** ls-4%; subtitle Poppins Reg 18px; photo 344×367 r17 #2b286f; order card→photo→form ✓ | n/a |
| Breadcrumb | 21145 | Poppins Light 15px ✓ | n/a |
| About | 21145(568) | Poppins Light 15px TITLE #2b286f ✓ | n/a |
| Centres | 21145(569) | heading Poppins **SemiBold 30px**; card 294×315(→348 fluid) r10 **border #2b286f**; name Poppins Light 20px **UNDERLINE**; city Light 15px; book pill Poppins **Med 8px**; phone navy 23×23 ✓; single column ✓ | n/a |
| Doctors | 21191 | heading Poppins SemiBold **35px**; horizontal card photo-left 131px min-h276 #f1f1f1 r10; degree Lato Light 12px; name Poppins Med 21px; loc pill **#ffcb05** yellow; "Mumbai" Lato 15px; book Lato Reg 14px **underline**; exp bar "42+ years" Lato **Black 13** + " of experience" Reg 13; **chips were Poppins, Figma Lato 11px** | **YES** chips→Lato 11px |
| FAQ | 21325 | heading Poppins SemiBold 30px; rows r5 #f1f1f1; **question was Poppins Reg 16px, Figma Light 15px** | **YES** mobile→Light 15px (desktop unchanged) |
| Services strip | 21328 | heading Poppins SemiBold 30px ✓; links Poppins Light 15px lh30 #2b286f ✓ | n/a |
| Callback form | 21331 | title Poppins 24px etc., card content ✓ | n/a |

No horizontal overflow at 393px (`scrollWidth` = 378). No horizontal overflow at 1440px.

## Fixes committed (3 edits, 2 commits)
1. Centres desktop grid row-gap 28→13px (col-gap stays 28).
2. Mobile FAQ question Poppins Light 15px (desktop 20px Regular preserved).
3. Mobile doctor speciality chips Lato 11px (desktop chips stay Poppins 13px).

## Residuals / open questions (all cosmetic, not blocking)
- Centre cards render 441 wide vs Figma 421 (3-col fill of the wider container-inner).
  Hypothesis: design intent is "3 across"; matching exact 421 would need fixed-width
  tracks + centering and leaves a gutter. Left as-is (fluid). Client question if exact px wanted.
- Hero desktop right photo: Figma overlaps the card by 107px (525-wide frame over 964 card);
  we use a clean 400-wide non-overlapping column. Visual is equivalent; flag if overlap wanted.
- About-text line-height 30 vs Figma AUTO (~28); callback field height 40 vs 42 — 2px each.
- Breadcrumb separator is "›" char vs Figma's faint hairline vector; breadcrumb left x ~37 vs 68.
- Services strip is center-aligned in our build; mobile Figma text-align is LEFT (desktop center).
  Reads fine centered; left as center for visual symmetry.