# blog-individual — Round 3 reconcile (agent blog-r3, 2026-06-17/18)

Frames: desktop `3121:20084` (1440×7904), mobile `3121:20260` (393×13763), file `R6EY4TpNCvVqUEikM7Lof9`.
Method: coordinate-measurement (Figma IR bbox/runs vs DOM getBoundingClientRect/getComputedStyle). browse engine.

## Desktop (measured at 1440px, scale≈1)

| Section | Figma node | measured-vs-IR | fixed? | residual |
|---|---|---|---|---|
| Hero banner | Frame 1597884526 | title x38/y116 w858 SemiBold 50px #fcfcfc ✓; breadcrumb Light 15px ✓; meta "By Dr." Light / "9 Min"+"date" Regular 20px ✓; Read More (LEFT x38 w184) + Book (RIGHT x265 w280) | YES | btn gap was 14→43px; btn top margin 34→110px |
| Hero CTA order | Component 99 + Button-Blue-to-Yellow | **Read More LEFT (x38), Book An Appointment RIGHT (x265)** per IR bbox — current order already correct | n/a | confirmed from coordinates, not eyeball |
| Hero image | "Applying eye drops with focus 1" hash 45a74b | placeholder was a **blurred soccer field**; design = woman applying eye drops | YES | pulled real fill, wired to blog-hero-antibiotic-eye-drops.png |
| Blog Summary | Frame 1597884511 | SemiBold 25px navy r15 ✓; card was full-bleed 1440, IR x22 w1398 | YES | inset to max-w-[1398px] |
| Introduction | Group 499 + Mask group (red-eye) | text was full-width; IR = text-left (w589) + **red-eye image right (312×400 r16)**; image was missing | YES | added desktop two-col w/ blog-comparison-redeye.png (hash cb31ee), hidden on mobile |
| Content inset | Frame 1597884603 (x22 w1401) | summary/body/conclusion/faq/related were 1440 | YES | all set to max-w-[1398px] |
| Antibiotic vs Lubricating | Group 688 (Group686/687 388×196 + VS 45px) | two #f1f1f1 cards min-h196 + VS Light 45px ✓ | n/a | matched |
| Types tabs | inst 3121:20215 ("Types…") | 4 tabs r6 w211 gap13, active #ffcb05 SemiBold20 navy, inactive #2b286f Light20 white, body Light20, NO image ✓ | n/a | matched (grid-cols-4 gap-13 r6) |
| Uses tabs | inst 3121:20214 ("Uses…") | 3 tabs r13 gap17, image-LEFT 292×382 r14 (woman rubbing eye), body right ✓ | YES | wired real Uses image (hash a28ea5) into blog-uses-pinkeye.png |
| How-to-use + Stepper | Group 900 / Component 159 | stepper #f4f4f8 r15, title SemiBold 30px ✓ | n/a | matched; order how-to→stepper→dosage→dos/donts matches IR y-order |
| Dosage | Group 900 | "Dosage and Frequency:" SemiBold 25px ✓ | n/a | matched |
| Do's / Don'ts | Frame 1597884542 | Do's grey #f1f1f1 LEFT, Don'ts navy #2b286f RIGHT, title 30px ✓ | n/a | matched |
| Side Effects tab | Component 158 (folder-tab) | active "Common" Medium 30px #fff UNDERLINE on navy; inactive "Rare" Light 30px navy; panel navy r15; body Light 20px #fff; heading Light 45px ✓ | n/a | matched |
| Conclusion | Frame 1597884637 | #f1f1f1 r15, heading Light 45px ✓ | n/a | matched |
| TOC sidebar | Frame 1597884519 | 411 wide #f1f1f1 r15, title SemiBold 30px center, links Light 20px ✓ | n/a | matched |
| Related Blogs sidebar | Frame 1597884517 | 411 wide, title SemiBold 30px, cards 371×142 r7 img 158×142, title Light 17px ✓ | n/a | matched |
| FAQ | blog-faq | items #f1f1f1 r5, summary Normal 20px ✓ | n/a | matched |

### Desktop hovers (triggered + computed-style verified)
- **Read More** (variant 3121:11993): bg transparent→white ✓, border white→navy(#2b286f) ✓, text white→black(#000) ✓, weight Light→SemiBold(600) ✓. Was wrong (kept white border + navy text). FIXED + verified fires.
- **Book An Appointment** (variant 1:705): +2px white ring ✓, weight Light→Medium(500) ✓, case UPPER→TITLE ✓, bg stays #ffcb05. Was wrong (brightness/shadow). FIXED + verified fires.
- **Tab click swap** (Types/Uses/Side-effects): verified click flips data-active + panel display. Fires.

## Mobile (measured at 393px, no horizontal overflow — scrollWidth=393)

| Section | Figma node | measured-vs-IR | fixed? | residual |
|---|---|---|---|---|
| Hero | Group 467 + Frame 1597884656 | h1 SemiBold 25px ✓; Read 114×30, Book 200×30 ✓ | n/a | matched |
| Blog Summary | Frame 1597884656 | #f1f1f1 full-bleed r0, title SemiBold 25px (visually centered), body 15px SemiBold-label+Light ✓ | n/a | matched |
| TOC | Frame 1597884692 | #f1f1f1 **r15**, title SemiBold 30px center, links Light 15px ✓ | n/a | matched |
| Article headings | mobile groups | SemiBold **30px** (desktop Light 45px) ✓ | n/a | matched (breakpoint flip correct) |
| Do's/Don'ts | Group 517 | grid-cols-2, title 15px (mobile) ✓ | n/a | matched |
| Uses image | mobile | h260 mobile ✓ | n/a | matched |
| Related Blogs | Frame 1597884667/668 | mobile full-width grid block shown; desktop sidebar Readers-Favorite hidden on mobile ✓ | n/a | matched (correct breakpoint swap) |
| Intro red-eye img | — | hidden on mobile ✓ (mobile IR has no intro image) | n/a | matched |

### KNOWN AMBIGUOUS SPOT — Types/Uses tab layout on MOBILE (measured basis + decision)
Figma **mobile** Types tab (Component 166, inst 3121:20325) uses a **folder-tab**: navy panel (Rectangle 1064) with a vector notch (path raises x0→181.5 at top), active tab text ("Aminoglycoside") white **Medium 17px** sitting ON the navy block, inactive ("Macrolide") navy **Light 17px** on white — same family as the desktop Side-Effects folder-tab. This is a FIXED 2-visible-tab design.
**Decision:** kept the current wrapping `grid-cols-2` pill layout (active #ffcb05 SemiBold, inactive navy) on mobile rather than reproducing the folder-tab. Basis: the project NON-NEGOTIABLE dynamic-tab rule (tab count is CMS-managed, 5/6/7+, must wrap/never overflow). A mobile folder-tab row of N 17px tabs overflows 393px (stress-test: 7 tabs in the pill grid → scrollWidth stays 393, no overflow; a folder-tab row would not). The CMS rule overrides matching Figma's fixed mobile folder-tab. Side-Effects (2 fixed tabs by design) keeps its folder-tab on both breakpoints.

### Hero CTA order (known ambiguous spot) — RESOLVED from coordinates
Figma desktop hero: Component 99 "Read More" at bbox **x=38** (LEFT), Button-Blue-to-Yellow "Book An Appointment" at bbox **x=265** (RIGHT). Current HTML order matches. No change to order; only the inter-button gap (→43px) and top margin (→110px) were corrected.

## Defects fixed (committed)
1. Hero button gap 14→43px, top margin 34→110px (7660cd4)
2. Hero photo: blurred-soccer-field placeholder → real "applying eye drops" photo (7660cd4)
3. Uses tab photo: shared placeholder → real "woman rubbing eye" photo (7660cd4)
4. Content sections inset 1440→1398px to match Figma x=22 container (7660cd4)
5. Read More + Book hovers rewired to exact Figma variants, dropped wrong brightness/shadow (6c1d51d)
6. Intro: added desktop two-col with red-eye image right (was missing) (d801b73)

## Residuals / open questions
- Mobile Types/Uses folder-tab vs pill-grid: deliberate deviation for CMS dynamic-tab rule (see above). Flag for client/design sign-off if they want the exact mobile folder-tab for the fixed design-count case.
- Breadcrumb desktop x: Figma indents breadcrumb to x=68 (title/buttons at x=38); ours aligns breadcrumb to the content left (x=39). Minor (~30px); left aligned for cleanliness.
- Shared components (footer, callback form, nav, sticky bar) not re-audited this round — they are canonical reused blocks; only page-unique sections were reconciled.