# blog-individual — Round 1 reconcile (agent blog-r1, 2026-06-17)

Desktop frame **3121:20084** (1440), mobile frame **3121:20260** (393). File key R6EY4TpNCvVqUEikM7Lof9.
Measured via /browse (browse slot) getBoundingClientRect/getComputedStyle; IR via figma-connect get_node.

## Desktop (1440)

| Section | Figma node | measured-vs-IR | fixed? | residual / note |
|---|---|---|---|---|
| Hero title | Frame 1597884526 / "Antibiotic Eye Drops…" | h1 SemiBold 50px #fff case=ORIGINAL, x39 y123. Matched. | n/a | already correct |
| Hero "Book An Appointment" btn | Button-Blue to Yellow | was font-light **20px** tt:none; IR = Light **15px UPPER** ls-4% | YES | text-[15px] uppercase tracking-[-0.6px] |
| Hero "Read More" btn | Component 99 | Light 20px TITLE 184x55 r8 border white — matched | n/a | — |
| Hero breadcrumb | Group 449 | Light 15px capitalize matched (Figma sep = arrow vectors; we use › char) | n/a | minor sep glyph diff |
| Blog Summary card | Frame 1597884511 | title SemiBold 25px #2b286f TITLE ✓; body was font-**normal** 21px; IR = **Light** 21px lh36 | YES | body font-light, lh 37→36 |
| Article section headings (Introduction, What Are, How Do, Why Not Viral, How To Use, Dosage, Other Uses, Precautions, When To See) | Group 506/509/510 etc | desktop Light **45px** #2b286f case=TITLE lh68 — measured 45px/w300/capitalize/#2b286f ✓ | n/a | already correct (lg:font-light) |
| Article body paragraphs | same | Light 20px #2b286f TITLE justify ✓ | n/a | — |
| Antibiotic vs Lubricating | Group 514 (mobile) / desktop cards | headings Light 45px, "VS" 45px, cards #f1f1f1 r15 ✓ | n/a | — |
| Types tabs | INSTANCE 3121:20215 | 4 tabs 211x53 **r6**; active SemiBold #2b286f #ffcb05, inactive Light white #2b286f; tab text 20px. Had stray tracking-[-0.8px] (IR ls=0) | YES | removed tracking on Types tabs |
| Uses tabs | INSTANCE 3121:20214 | 3 tabs ~280x53 **r13**; image LEFT 292x382; same active/inactive scheme ✓ | n/a | — |
| Tab swap behaviour (Types+Uses) | data-tab-swap | clicked tab → bg #ffcb05, fw600, panel block — VERIFIED fires (after repaint) | n/a | — |
| Stepper "Step-by-Step Guide" | blog-stepper | h3 SemiBold #2b286f, dots, step text — present | n/a | not deep-measured; visually consistent |
| Do's / Don'ts | blog-dos-donts | grey #f1f1f1 / navy #2b286f cards, headings SemiBold 30px ✓ | n/a | — |
| Side Effects (purple tab-swap) | Component 158 (3121:…) | navy card r15; heading Light 45px #2b286f outside; active "Common" Medium(w500) 30px white UNDERLINE; inactive Light 30px. Measured active 30px/w500/white/underline ✓; click Rare → fires | n/a | inactive tab IR fill=#2b286f (invisible on navy) → kept text-white/70 as visible interpretation (NOTE for client) |
| Conclusion | Frame 1597884637 | grey #f1f1f1 r15; heading Light 45px; body Light 20px lh36 #2b286f ✓ | n/a | — |
| FAQ | Frame 7 (3121:20225) | heading Light 45px lh90 (mobile SemiBold 30px); items #f1f1f1 r5, question Regular 20px #000 lh37 TITLE ✓ (we use chevron svg vs Figma image arrow) | n/a | — |
| Sidebar "Related Blogs" widget | Frame 1597884517 | Figma heading = **"Related Blogs"** SemiBold 30px; page had **"Readers Favorite"** | YES | renamed to "Related Blogs"; cards 17px title / 10px meta ✓ |
| Full-width "blog-related" section | (NOT in Figma desktop — gap Concl→FAQ = 40px) | duplicated the sidebar widget on desktop | YES | set `lg:hidden` (mobile-only; see mobile note) |
| Callback form | Frame 3124:58452 | white card r11; "Request a Callback" Regular 38px #2b286f ✓; "Could not find…" Light 22px; submit 239x42. Canonical `callback-form__*` hooks present | n/a | hover fires brightness(1.05); `hover:shadow-md` did NOT render (CDN) — minor |
| Footer / Sticky bar / Nav / Utility | reused instances | present (shared components) | n/a | not re-reconciled (out of round-1 emphasis); render OK |

## Mobile (393)

| Section | Figma node | measured-vs-IR | fixed? | residual / note |
|---|---|---|---|---|
| No horizontal overflow | — | scrollWidth = 393 ✓ | n/a | — |
| Blog Summary title | Frame 1597884656 "Blog Summary" | IR SemiBold **25px**; page was 20px on mobile | YES | set text-[25px] (both bp) |
| Blog Summary body | same | IR mixed weights **15px** TITLE #2b286f; page was 16px | YES | text-[15px] lh24 mobile |
| TOC title | Frame 1597884692 "Table Of Content" | IR SemiBold **30px**; page was 24px mobile | YES | text-[30px] |
| TOC links | same | IR Light **15px** #2b286f TITLE; page was 16px mobile | YES | text-[15px] mobile (14 links) |
| Content headings | Group 514 etc | mobile = SemiBold 30px (vs desktop Light 45px) — page uses font-semibold text-[30px] ✓ | n/a | matches |
| Antibiotic vs Lubricating | Group 514 | mobile STACKED, cards r10, "vs" SemiBold 35px — page stacks (flex-col), r15 | partial | card radius r15 vs Figma r10 (minor, not changed) |
| FAQ | Frame 1597884437 | heading SemiBold 30px (2-line), items Light 15px #000 r5 — page uses font-semibold text-[30px] mobile ✓ | n/a | matches |
| Related content | Frame 1597884667 "Readers Favorite" + 1597884668 "Related Blogs" | mobile has TWO full-width stacked card sections (337x296, image-top 175px, title Medium 15px, white card navy-2w border r7). Page shows ONE full-width "Related Blogs" section (now mobile-only) + the stacked sidebar | partial | RESIDUAL: mobile should be two distinct full-width sections ("Readers Favorite" then "Related Blogs"); we render one. Card style (navy 2w border, image-top) also differs from current grey card. Client decision needed. |
| Callback card | Form 3121:20369 | h-auto on mobile (340px), yellow "Submit" — ✓ | n/a | — |

## Commits
1. hero book btn 15px UPPER + summary light + Types tabs ls=0
2. sidebar widget = "Related Blogs"; full-width related mobile-only (no desktop dup)
3. mobile summary title 25px/body 15px, TOC title 30px/links 15px

## Open questions for client
- Side-effects inactive tab: Figma fill #2b286f (navy) on a navy card = invisible. Kept white/70. Confirm intended muted colour.
- Mobile related content: Figma has two full-width sections ("Readers Favorite" + "Related Blogs") with navy-bordered image-top cards. Current page renders a single grey-card "Related Blogs" full-width on mobile. Confirm whether to split into two sections + restyle cards.
- FAQ/conclusion/etc Figma uses an image "Expand Arrow" icon; we use a chevron SVG (functional equivalent).

## Not deeply re-measured (render OK, shared components)
Nav, utility bar, footer, sticky bar, floating actions, stepper internals — present and visually consistent; not coordinate-audited this round.