# blog-individual — Round 2 reconcile (fresh eyes)

Reconciled `html/blog-individual.html` against Figma desktop **3121:20084** and mobile **3121:20260**
(file `R6EY4TpNCvVqUEikM7Lof9`), section by section, by COORDINATES (IR bbox/runs vs DOM
getBoundingClientRect/getComputedStyle). Engine: chrome slot. Page was already substantially built;
measured every section both breakpoints and fixed the proven mismatches.

## Desktop (1440)

| Section | Figma node | measured vs IR | fixed? | residual |
|---|---|---|---|---|
| Hero | Frame 1597884526 (3121:20167) | H1 50px w600 #fff (IR #fcfcfc), crumb Light 15px, meta Light/20px ✓. **Button order WRONG**: IR Read More LEFT x=38, Book RIGHT x=265; build had Book left | ✓ swapped order | H1 color #fff vs IR #fcfcfc (Δ3, kept white) |
| Blog Summary | Frame 1597884511 | box #f1f1f1 r15, head SemiBold 25px TITLE, body 21px w/ SemiBold lead-ins ✓ | n/a | — |
| Article headings | 3121:20217/20213/20216 | Poppins **Light 45px** TITLE ls-4% #2b286f ✓ (build `lg:font-light text-[45px] capitalize`) | n/a | — |
| Body paragraphs | various | Poppins Light 20px TITLE #2b286f justify ✓ | n/a | — |
| Types tab section | 3121:20215 | **IR = full-width 4 tabs (r6, h53, 20px) + full-width body, NO image**; build had a side image + narrow tabs | ✓ rebuilt full-width, removed image, restored SemiBold-underline "redness" run | — |
| Uses tab section | 3121:20214 | **IR = full-width 3-tab row (r13) ON TOP, then image-left (292×382 r14) + text-right**; build had tabs nested in right col | ✓ rebuilt: tabs full-width top, image-left grid below | — |
| Step-by-step / Dosage / Do's-Don'ts | Group 900 | SemiBold 30px heads, Wash Light 25px, Dosage lead-in SemiBold **25px**, Do's/Don'ts SemiBold 30px ✓ | n/a | — |
| Side Effects | Component 158 (1650:16203) | **IR = "folder-tab": active tab = navy block (rounded top) white **Medium 30px** UNDERLINE; inactive = navy Light 30px on WHITE; navy panel below**. Build had flat box + underline tabs | ✓ rebuilt as folder-tab; swap fires both ways (measured) | non-default (Rare-active) panel top-left corner cosmetic |
| TOC widget | Frame 1597884519 (3121:20115) | box #f1f1f1 r15 411w; head SemiBold 30px CENTER; links Light 20px TITLE #2b286f ✓ (411 measured) | n/a | — |
| Related Blogs widget | Frame 1597884517 | head SemiBold 30px center; card title Light 17px; date/read Light 10px ✓ | n/a | — |
| Conclusion | Frame 1597884637 | box #f1f1f1 r15; head Light 45px ✓; body 20px ✓ | n/a | — |
| FAQ | Frame 7 (3121:20225) | head **Light 45px** TITLE LEFT; items #f1f1f1 r5, q **Regular 20px black**, **arrow on LEFT** (x=15). Build had chevron RIGHT + section shrank to 659px (flex-col child) | ✓ chevron→left, `w-full`, 10px gap | — |
| Callback form | Form 3124:58452 | card 478×439, submit 239×42 navy/white 20px r6, title 38px ✓; hover brightness+shadow FIRES (measured) | n/a (canonical) | — |
| Footer / nav / sticky | shared | canonical reused components | n/a | — |

Hovers triggered + measured: hero Read More (transparent→white bg, white→navy) ✓; callback submit
(brightness 1.05 + shadow) ✓; side-effects tab swap (both directions, navy-bg/underline/weight toggle) ✓.

## Mobile (393)

| Section | Figma node | measured vs IR | fixed? | residual |
|---|---|---|---|---|
| Hero | Group 467 / 3121:20399 | H1 SemiBold **25px** (build had 32px); meta Light **12px** (had 16px); Read More **114×30** + Book **200×30** r5 in a ROW (had full-width stacked h50); crumb 12px | ✓ all | photo is full-bleed-bg vs Figma rounded-card-with-margins (kept overlay adaptation) |
| Blog Summary | Frame 1597884656 | full-bleed #f1f1f1 **r0**, head SemiBold 25px **CENTERED**, body 15px; build was rounded+left | ✓ full-bleed + centered head on mobile | body 15 vs build 16 (Δ1, kept) |
| Do's/Don'ts | Frame 1597884610 | **2-col on mobile** (build stacked); head SemiBold **15px** (had 24); items Light **12px** (had 16) | ✓ grid-cols-2 + 15/12px | — |
| Conclusion | Frame 1597884638 | full-bleed #f1f1f1 r0, head LEFT; build rounded+inset | ✓ full-bleed on mobile | — |
| FAQ | Frame 1597884437 | head **CENTERED** SemiBold 30px (build left); chevron left ✓ | ✓ centered on mobile | — |
| TOC / Related order | mobile frame y-order | Figma: summary→**TOC**→article→…→Related(full-width). Build stacked sidebar (TOC+Related) AFTER article, and showed Related TWICE (sidebar + full-width) | ✓ TOC moved above article (order utils); sidebar Related hidden on mobile (full-width serves it) | — |
| Types / Uses tabs | Frame 1597884660 (Component 163) | **Figma mobile = light folder-card (#f1f1f1, 1px navy border, r15, notched top) with plain-text tabs (active Medium 17px), image 288×216 inside, body 15px**. Build renders navy-pill grid + stacked image | NOT rebuilt | **Residual: mobile tab visual differs (navy pills vs Figma light folder-card). Tabs FUNCTION + content correct; swap fires; wraps for dynamic counts.** Flag if exact mobile treatment required. |

Dynamic tabs: injected 7 tabs into Types → grid wraps to multiple rows, **no horizontal overflow**.
`document.documentElement.scrollWidth == 393` (no overflow) verified after every mobile change.

## Residuals / open questions
1. **Mobile Types/Uses tab visual** — Figma uses a light bordered folder-card; build uses the desktop
   navy-pill grid reflowed. Functional + content-correct. Rebuild deferred (risk to working desktop);
   flag if the mobile folder-card look is required.
2. **Mobile hero photo** — Figma is a rounded photo *card* with side margins; build keeps a full-bleed
   bg-cover with gradient + white overlay (content matches). Cosmetic.
3. **Full-bleed mobile sections render with a uniform ~15px side gutter** (summary/conclusion/FAQ all
   show paddingLeft 15px despite `px-0`/`px-6` classes — same on FAQ `px-6`). Source not located in
   custom.css; consistent across sections, harmless. Hypothesis: Play-CDN/emulation artifact — to verify.
4. **Body text 15px (mobile IR) vs build 16px** — left at 16px (1px, visually identical, used site-wide).
5. **Hero H1 #fff vs IR #fcfcfc** — 1.2% lighter; kept pure white.

## Commits
- hero button order + Types/Uses tab layout
- FAQ chevron-left + full-width + side-effects folder-tab
- mobile hero (h1 25 / meta 12 / small buttons)
- mobile Do's/Don'ts 2-col 15/12px
- mobile ordering (TOC above article, no Related dup) + summary/conclusion full-bleed + FAQ centered