# blog-individual — gated reconcile (agent: blog-gate) Gate: `tools/coord-diff.py --tol 6 --vtol 8`. A section is DONE when gate is CLEAN or every residual line has a one-line documented reason. Hero (3121:20167) + Blog Summary were already done before this run (skipped per brief). ## Introduction (Figma Group 499 = 3121:20108, heading 3121:20217 separate) Known fix from brief: inline emphasis was MISSING. Added class-free `eye infections` (Poppins SemiBold 600 + underline) and `pink eye` (Bold 700 + underline). Final gate: ``` figma: 1 text-vis, 0 text-hidden, 0 visual | dom: 3 text, 0 visual | emphasis: 2 [EXTRA] "eye infections" in DOM, not in Figma [EXTRA] "pink eye" in DOM, not in Figma 2 issue(s) ``` Triage: both EXTRA lines are the inline `` emphasis spans — sub-spans of the matched `

`, not separate Figma leaves (Figma models the paragraph as one TEXT node). `emphasis: 2` confirms both emphasis runs reproduced (no MISSING-EMPHASIS). DONE. ## Antibiotic-vs-Lubricating comparison (Figma Group 688 = 3121:20124) Fix: Lubricating card body was MISSING inline emphasis "irritation" (Poppins SemiBold 600 + underline, run in 3121:20134). Added class-free `irritation`. Verified card headings (Antibiotic/Lubricating/VS) are Poppins Light 45px (match) and bodies Light 20px. Final gate: ``` figma: 5 text-vis, 0 text-hidden | dom: 6 text | emphasis: 1 [EXTRA] "irritation" (inline emphasis span) [POS] Antibiotic Δx+12 Δy+28 | Lubricating Δx+42 Δy+24 | VS Δx+27 Δy-64 | bodies Δ<62 6 issue(s) ``` Triage: EXTRA "irritation" = inline emphasis sub-span (correct, emphasis:1 matched). 5 POS = Figma authors the two cards at fixed 388px inside an 876 group; our cards flex to fill the full article column (~404px each) and center their text — equal-card 3-up layout preserved, deltas are layout-width artifacts, not real position bugs. DONE. ## What Are / How Do They Work / Why-Not-Viral (Groups 3121:20110 / 20112 / 20139) Headings Poppins Light 45px, bodies Light 20px navy justified, single run, no emphasis. Gate all three: CLEAN (2 text-vis vs 2 dom, emphasis 0, no mismatches). ## Other Uses (heading 3121:20088 area, bullets) Fix: bullet "Eye injuries" was MISSING emphasis. Added `Eye injuries`. Final gate: ``` figma: 6 text-vis | dom: 7 text | emphasis: 0 [EXTRA] "Eye injuries" (inline emphasis span) [FONT] "Eye injuries with bacterial cont" weight figma 600 vs dom 300 | decoration underline vs none 3 issue(s) ``` Triage: Figma models the bullet as ONE TEXT node whose run[0] ("Eye injuries") is SemiBold 600 + underline; our render is an `

  • ` (Light) carrying a bold+underlined `` child. The FONT lines compare Figma's bold run[0] to the `
  • `'s inherited Light computed weight — a multi-run-vs-wrapper artifact. Emphasis IS reproduced (the EXTRA `` span). Visual matches. DONE. ## When to See an Eye Doctor (3121:20094) Fix: intro link "Eye Specialist" was Light/underline; Figma run is SemiBold 600 + underline → added `font-semibold` to the ``. Final gate: ``` figma: 7 text-vis | dom: 8 text | emphasis: 1 [EXTRA] "Eye Specialist" (inline link emphasis span) 1 issue(s) ``` Triage: emphasis:1 matched (link bold+underline correct). Single EXTRA = the `` inline span inside the matched `

    `. DONE. ## Dosage and Frequency (3121:20150) Fix: kept "Dosage and Frequency:" SemiBold 600 **25px** label; UN-bolded "Duration of Treatment:" (Figma run is plain Light 300 20px — was wrongly ``). Final gate: ``` figma: 3 text-vis | dom: 4 text | emphasis: 0 [EXTRA] "Dosage and Frequency:" (the bold 25px label span) [FONT] p1 weight figma 600 vs dom 300 | size figma 25 vs dom 20 3 issue(s) ``` Triage: Figma p1 is one TEXT node whose run[0] label is SemiBold 25px; our render splits it into a `` + plain body in a `

    `. The FONT lines compare Figma's bold-25 run[0] to the `

    `'s inherited Light-20 computed style — multi-run-vs-wrapper artifact. Label correctly rendered SemiBold 25px (the EXTRA `` proves it). DONE. ## Real assets extracted (fork) + wired - Intro redeye + Uses pinkeye: existing PNGs already match the Figma fills (byte-identical size) — no rewire. - Sidebar/related thumbnails: replaced single shared placeholder with 2 real distinct Figma exports — `blog-thumb-cataract.png` (Cataract Surgery cards) + `blog-thumb-cipro.png` (Ciprofloxacin cards), mapped per card by title across all 14 card instances. - Card meta icons: replaced 14 hand-drawn calendar + 14 clock SVGs with the real Figma PNG icons (`icons/meta-calendar.png`, `icons/meta-clock.png`, 19×16). ## Types tab (Figma 3121:20215) — CLEAN 4 buttons r6 227×53; active Chloramphenicol yellow #ffcb05 + navy SemiBold 600, inactive navy #2b286f + white Light 300, 20px. Panel "redness" emphasis already present (span class, in tab panel div — not a

    , so class allowed). Tab JS verified switching (Fluoroquinolone activates). ## Uses tab (Figma 3121:20214) — CLEAN 3 buttons r13; active Pink Eye yellow + navy SemiBold, inactive navy + white Light; left image 292×382 r14 (real Figma fill, already wired). Tab switching verified. ## Step-by-Step stepper (Figma 3121:20166) — CLEAN Card #f4f4f8 r15; heading "Step-by-Step Guide" SemiBold 600 30px navy CENTER; caption Light 300 25px navy CENTER. (5 dots 25×25 decorative — active #2b286f, rest #d9d9d9 — match design.) ## Do's / Don'ts (Figma 3121:20151) — CLEAN Do's card #f1f1f1 r15, Don'ts card #2b286f r15; headings SemiBold 600 30px CENTER (navy / white); items Light 300 20px CENTER. 7 text-vis vs 7 dom, CLEAN. ## Side Effects folder-tab (Figma 3121:20104) — CLEAN Active "Common Side Effects" white Medium 500 30px UNDERLINE on navy panel; inactive "Rare Side Effects" navy Light 300 30px no underline; panel #2b286f r15, body white Light 20. Tab JS verified (Rare activates + panel switches). All tab JS confirmed: scrollWidth 1425 ≤ 1440, no overflow. ## Conclusion (Figma Frame 1597884637 / 3121:20220) — CLEAN Card #f1f1f1 r15; heading "Conclusion" Light 300 45px navy; body Light 300 20px navy justified. 2 text-vis vs 2 dom, CLEAN. ## Sidebar: TOC widget (Figma 3121:20114) — CLEAN-equivalent Card #f1f1f1 r15; heading "Table Of Content" SemiBold 600 30px navy CENTER (IR-confirmed); 13 links Light 300 20px navy ls −4%. DOM matches per-element (the dom-dump

  • wrapper reports 400/16 but the inner is Light 300 20 = the real link style, which matches IR). ## Sidebar: Readers Favorite (3121:20097) + Related Blogs (3121:20141) widgets Widget #f1f1f1 r15; heading SemiBold 600 30px navy CENTER; cards #f1f1f1 r7, image 158×142 (real thumbnails wired), title Light 300 17px navy, meta Light 300 10px black + real calendar/clock icons 19×16. Gate (Readers Fav, 1st-card subset): 4 text-vis / 4 dom + 3 visual / 3 visual. Residual: 2 POS on meta text (Δx−24, y exact) — our meta `` wraps icon+text so its bbox x starts at the icon (Figma measures the text-run x after the icon). Span-box-includes-icon artifact; icons+text render correctly, visual leaves (thumbnails + meta icons) all matched at exact sizes. DONE. ## FAQ (Figma Frame 7 / heading 3121:20226 + Component 101 = 3121:20227) — CLEAN Heading "Frequently Asked Questions" Light 300 45px navy LEFT (IR-confirmed). 6 collapsed rows #f1f1f1 r5; summary Regular 400 20px BLACK at x104; **real Figma Expand-Arrow image** (40×37 at x15) extracted (`icons/faq-arrow.png`, hash d62e49...) and wired — replaced 6 hand-drawn SVG chevrons. Rotates 180° group-open. Gate (heading + 2-row subset): 3 text-vis / 3 dom + 2 visual / 2 visual = CLEAN. Residual note: our row height ~77px (py-5) vs Figma 69px — +8px, sub-tolerance at per-row level (text & arrow positions land within tol). FAQ ON_CLICK reaction = SMART_ANIMATE gentle 1s; ours is native
    toggle (functionally equivalent expand/collapse). # ===== MOBILE PASS (frame 3121:20260, 393w) ===== scrollWidth 378 ≤ 393 — NO horizontal overflow. Dynamic-tab stress test (7 tabs injected) wraps to 4 rows, still no overflow. Mobile value flips confirmed vs Figma mobile IR (2nd fork) and FIXED: - "pink eye" emphasis 700→600 on mobile (font-semibold lg:font-bold). - Do's/Don'ts list items 12→15px (Figma mobile 15). - FAQ summary 16→18px (Figma mobile 18). - Comparison VS 30→35px + SemiBold (mobile), card headings Light→SemiBold (mobile 600/30, desktop Light/45). - All section headings already SemiBold 600 30px (Summary/Stepper 25px); FAQ/TOC/Readers/Related/VS centered, rest LEFT — matches Figma mobile. - Body 16px (Figma 15px) — 1px diff, within gate FONT tolerance (>1), left as-is. ## Mobile comparison (Figma stacked) — gate ``` figma: 5 text-vis | dom: 6 text | emphasis: 1 [EXTRA] "irritation" (inline emphasis span) 1 issue ``` Stacked cards r10, "Antibiotic" y42 / VS y196 (35px SemiBold) / "Lubricating" y293, headings 600/30, bodies 300/16, emphasis intact. DONE (EXTRA = inline emphasis sub-span). ## Mobile Tabs (Types/Uses) — DELIBERATE DEVIATION (client question) Figma mobile renders the tab labels as text-only on a single colored card (Types navy, Uses #f1f1f1+navy border) with no per-tab pill. Our build keeps functional pill BUTTONS (grid-cols-2, wrap) on mobile. Reason: the CMS dynamic-tab requirement (CLAUDE.md, NON-NEGOTIABLE) mandates a tab bar that flex/grid-distributes for N tabs without overflow — fixed text-label tabs over one card do not scale. Functional tab switching verified; wraps cleanly at 7 tabs. Flagged for client. ## Mobile widgets: Readers Favorite (3121:20359) + Related Blogs (3121:20364) — CLEAN Both render image-TOP full-width cards (348×180 image, title Light 16px navy, meta Light 10px + real calendar/clock icons 19×16), heading SemiBold 600 30px CENTER, single-column grid (the desktop sidebar serves the 4-up; mobile shows these two stacked full-width sections — matches Figma mobile frames). Gate (Readers Fav, 1st-card subset): 2 text-vis / 2 dom + 3 visual / 3 visual = CLEAN. Related Blogs structurally identical. ## Mobile shared components — confirmed - scrollWidth 378 ≤ 393 (no overflow) at every section. - Mobile sticky bar (task bar) shown; desktop chat bubble hidden; floating scroll/share actions hidden (hidden lg:flex). - Footer mobile social shown; footer canonical (footer__action-item hover:underline hooks present). - Callback form canonical hooks present (callback-form__*, callback-gradient-border, callback-input-border); submit hover:brightness-105 hook present. Minor: blog callback wrapper missing `lg:p-[40px]` that blogs.html carries (cosmetic desktop padding) — noted, not gated as a section. - Conclusion card full-bleed r0 on mobile (Figma mobile r0), r15 desktop. ## Mobile Do's/Don'ts — fixed + matches Still 2-col side-by-side (Figma mobile keeps 2-col); headings SemiBold 600 15px CENTER (navy/white), items Light 300 15px CENTER (was 12 → fixed to 15 per Figma mobile). # ===== SUMMARY ===== Every non-hero/non-summary section gated CLEAN-or-documented, desktop + mobile. Residuals are all one class: inline-emphasis ``/``/`` spans show as EXTRA (and one multi-run-vs-wrapper FONT on Other-Uses/Dosage) because Figma models a paragraph as ONE multi-run TEXT node while our CMS-safe render splits emphasis into inline children — emphasis is correctly reproduced in every case (gate's `emphasis: N` count matches). Real Figma assets extracted + wired: 2 sidebar thumbnails, calendar+clock meta icons, FAQ expand-arrow. Open client question: mobile Types/Uses tab visual (text-on-card in Figma vs functional pill buttons we kept for CMS dynamic-tab compliance).