# doctor-individual — FINAL QA CERTIFICATION (capstone, after R1/R2/R3)

Date: 2026-06-18 · QA engineer of record: **doctor-qa** · browser slot: **playwright** (queue mutex held + released).
Desktop frame **3121:22256** (1440) · mobile frame **3121:22399** (393), file `R6EY4TpNCvVqUEikM7Lof9`.
Method: Figma IR (`get_node`/`get_node_outline`/`get_variant_set`) bbox/per-run-font/fill/stroke/corner
vs DOM `getBoundingClientRect`+`getComputedStyle`, normalized to Figma px. Every hover/interaction
TRIGGERED and read back from computed style — not assumed from a shared class.

**Outcome: ZERO new defects found. No code change required.** R1–R3 had already converged the page.
All three inter-round flip-flops resolve to the *current build* being the correct one (the stale notes
were in the older accuracy doc, written by the original doctor-agent before R1's fixes).

## Per-section verdict — DESKTOP (1440)

| Section | geometry | fonts | color | images/icons | hovers | notes (measured) |
|---|---|---|---|---|---|---|
| Utility bar | ✓ | ✓ | ✓ | ✓ | ✓ | shared canonical; links Lato 16 #434343 right, hover underline |
| Main nav | ✓ | ✓ | ✓ | ✓ | ✓ | shared canonical |
| Breadcrumb | ✓ | ✓ | ✓ | n/a | ✓ | link **Poppins Light 15px capitalize** (R3 fix held, was Lato); current crumb **#636262** ✓; hover underline |
| Hero left card | ✓ | ✓ | ✓ | n/a | n/a | 857w, bg #f4f4f8, r28. h1 56/600 Poppins; subtitle 25/400; meta 29px per-run (42+Years **600** / of Experience **400** / Delhi **400**) lh46; pin 21×27. Card renders 374h vs IR 329 — auto-grows for pills (known cosmetic residual) |
| Hero right card | ✓ | n/a | ✓ | ✓ | n/a | 525×679 r28 black bg; photo `hero-mahipal-sachdev.png` correct subject, object-cover object-top |
| Jumplink pills | ✓ | ✓ | ✓ | n/a | ✓ | 4 pills SINGLE ROW (R3), h50 r7 1px navy, Poppins Light 22px. HOVER → bg #ffcb05, border #ffcb05, weight Light→**Medium 500**, color stays navy, size stays 22 (matches variant `3121:15373`) |
| Specialization | ✓ | ✓ | ✓ | ✓ | (embellish) | h2 69/300 ls-2.76 TITLE; 7 cards 417×106 r15 #f1f1f1, icon 86 circle, label 25/600 TITLE navy. No IR hover (benign `hover:shadow-md`) |
| Qualification / Experience | ✓ | ✓ | ✓ | n/a | n/a (static) | card r15 #f1f1f1; header h79 navy Poppins Light 39 white TITLE; body Light 21 navy. First item "MS OPHTHALMOLOGY" caps (R3) |
| Booking sidebar | ✓ | ✓ | ✓ | n/a | ✓ | 467 navy r15; title 22/600; labels Poppins 18/400 white; inputs 411×45 r7, focus-ring fires; submit 411×55 r7 #ffcb05 Light 22. SUBMIT HOVER → bg stays #ffcb05, weight Light→**Medium 500**, transform **none** (no scale) — matches variant `3124:14558`. Native required-field validation blocks empty submit (`checkValidity()`=false) |
| Research & Designation | ✓ | ✓ | ✓ | n/a | n/a | h2 69/300; left col Poppins Light **24px** TITLE navy, right col **25px**; divider **dotted** 3px #ebeaea (RESOLVED below) |
| Awards & Recognition | ✓ | ✓ | ✓ | ✓ | ✓ | h2 69/300; cards 205×228 r15 #f1f1f1; badge 43×43; text Light 17 TITLE center; arrows 43×43 round white 1px navy, INSIDE track (R2, overflow 0). HOVER → bg/border #ffcb05 (invented; IR arrow has ON_CLICK only). CLICK scrolls track (next 0→432, prev→216) |
| Callback form | ✓ | ✓ | ✓ | ✓ | ✓ | shared canonical `3124:58347`: card 478×439 r11, subtitle Light 22, title Reg 38, inputs h40 r6, CTA navy/white 239×42 Light 20 |
| Footer / Sticky | ✓ | ✓ | ✓ | ✓ | ✓ | shared canonical instances; footer action-item hover underline fires |

**Desktop overflow: `scrollWidth` 1425 = `clientWidth` 1425 → NO horizontal overflow.** Console: 0 errors.

## Per-section verdict — MOBILE (393)

| Section | geometry | fonts | color | images/icons | hovers | notes (measured) |
|---|---|---|---|---|---|---|
| Hero | ✓ | ✓ | ✓ | ✓ | n/a | grey card 348×205 r17 #f4f4f8; photo 348×367 r17 black stacked BELOW; h1 **30/700** Poppins; subtitle 15/400; meta 18px (42+Years **Bold 700** / rest 400) — mobile-Bold split held |
| Jumplink pills (mobile) | ✓ | ✓ | ✓ | n/a | ✓ | 4 pills, 2 rows, BELOW photo (y=734/773); 98×31 r7 Poppins Light 15px navy. Hover class present (yellow) |
| Specialization | ✓ | ✓ | ✓ | ✓ | — | h2 30/600 **CENTER**; cards 348×76 r10 single-col, icon 68 circle, label 15/600 |
| Qualification / Experience | ✓ | ✓ | ✓ | n/a | — | header h63 navy SemiBold **30** white CENTER (flips from desktop Light 39); card r10; body 15px |
| Book An Appointment (mobile CTA) | ✓ | ✓ | ✓ | n/a | ✓ | 348×41 r10 #ffcb05 Poppins Reg 18 navy; replaces sidebar (`aside` w=0 h=0, hidden) |
| Research | ✓ | ✓ | ✓ | n/a | ✓ | h2 30/600 CENTER; col1 Poppins Light 15px; col2 hidden behind **Load More** pill 120×29 r6 Light 18. Click reveals col2 (visW 0→348), label→"Load Less", toggles back. Desktop unaffected (`lg:!block`) |
| Awards | ✓ | ✓ | ✓ | ✓ | (touch) | h2 30/600 CENTER; cards 146×160 r15; badge **26×26**; text Light **12px** center; touch-scroll (arrows hidden on mobile by design) |
| Callback | ✓ | ✓ | ✓ | ✓ | ✓ | full-bleed w378 r0 #2b286f overlay; shared canonical responsive scale |
| Footer / Mobile menu / Task bar | ✓ | ✓ | ✓ | ✓ | ✓ | shared canonical |

**Mobile overflow: `scrollWidth` 378 = `clientWidth` 378 → NO horizontal overflow.** Structure matches the
MOBILE frame (stacked hero, pills below photo, sidebar→single CTA, centered headings, Load-More) — not a
shrunk desktop. Console: 0 errors.

## Flip-flops resolved (against Figma IR ground truth)

1. **Research vertical divider — `dotted` vs `dashed`.** IR `Line 39` (`3121:22261`) stroke = `cap: ROUND`,
   `dashes: [0,5]`, weight 3, hex #ebeaea. A 0-length dash with round caps renders as **round dots** →
   CSS `border-style: dotted` is the faithful match (not `dashed`, which draws rectangles).
   **Resolved: `dotted` is correct.** Current build = `lg:border-dotted border-[#EBEAEA] border-l-[3px]` ✓.
   (R1/R2/R3 right; the older accuracy-doc note "3px dashed" was wrong.)

2. **Booking submit hover — `scale(1.05)` vs no-scale+weight500.** IR variant `3124:14558` (booking submit
   hover) delta = weight Light→Medium 500, NO scale, fill stays #ffcb05. Current CSS `custom.css:624`
   `.booking-sidebar .cta-submit:hover { transform:none; font-weight:500 }` overrides the global
   `.cta-submit:hover{scale(1.05)}`. Triggered → bg #ffcb05, fw 500, transform **none**.
   **Resolved: no-scale + weight 500 is correct.** Current build ✓. (accuracy-doc's "scale kept" note was stale.)

3. **Mobile Research "Load More" — implemented vs not.** IR mobile (`3121:22449`) collapses col2 behind a
   Load-More pill. R1 + the accuracy doc said "not implemented"; R3 implemented it (HTML `data-research-more`
   button + `[data-research-more-list]` hidden, `js/main.js:852` toggle). Triggered click → reveals col2.
   **Resolved: implemented is correct & present.** Current build ✓.

## Full hover / interaction inventory (every interactive element, proven result)

| Element | trigger | proven result | source-of-truth |
|---|---|---|---|
| Utility links / nav links / footer links | hover | underline fires | shared canonical |
| Breadcrumb links | hover | underline fires | site affordance |
| Jumplink pill (desktop ×4) | hover | bg→#ffcb05, border→#ffcb05, fw 300→500, color/size stable | variant `3121:15373` MATCH |
| Jumplink pill (mobile ×4) | hover | yellow-fill hover class present (same rule) | same variant |
| Specialization card ×7 | hover | `shadow-md` (benign embellishment) | IR has NO hover variant |
| Qualification/Experience cards | — | static (no delta) | IR hover variant == default |
| Booking input ×4 (text/select/tel/email) | focus | focus:ring-2 box-shadow fires | — |
| Booking form submit | click (empty) | native validation blocks (`checkValidity()`=false) | required attrs |
| Booking submit | hover | bg stays #ffcb05, fw 300→500, transform none | variant `3124:14558` MATCH |
| Mobile "Book An Appointment" CTA | hover | `brightness-105` fires | site affordance |
| Awards prev/next arrow | hover | bg/border→#ffcb05 (invented) | IR arrow ON_CLICK only |
| Awards prev/next arrow | click | track scrolls (next 0→432, prev→216) | functional slider |
| Research "Load More" (mobile) | click | reveals col2 (visW 0→348), label toggles Load More⇄Load Less | mobile IR prototype |
| Callback submit | hover | brightness/shadow (canonical site pattern) | see residual #1 |
| Callback form | submit | `data-callback-form` JS handler | shared canonical |

## Residuals / deliberate deviations

1. **Callback submit hover** is the site-wide canonical brightness/shadow, not the Figma yellow-invert
   variant. Kept consistent across all 5 CFS pages; flag for a site-wide callback-hover pass if the invert
   is wanted. (Not page-specific.)
2. **Hero left card height** renders 374 (desktop) / 205 (mobile, fixed) vs desktop IR 329 — the card
   auto-grows to contain the jumplink pills, whose Figma rect overflows the grey card bottom. Text element
   positions match IR within 3px. Cosmetic.
3. **Mobile side gutter 15px** vs Figma ~24px — caused by the global `custom.css` `@media(max-width:1430px){.lg\:px-0{padding:15px!important}}` rule that clamps EVERY page. A cross-page decision, not a single-page fix (changing it regresses the other 10 pages). Flagged.
4. **Desktop fluid columns** (research 1fr/1fr, specialization 1fr) span the full 1440 container vs Figma's
   ~1375–1398 centered content frame, so they're ~3% wider. All fixed-px elements (hero 857/525, qual cards,
   booking 467, award 205) match exactly. Re-containering for <3% is a regression risk; left.
5. **Awards badge straddle**: Figma badge floats half-above the grey card top edge; ours sits inside the
   card. Decorative; left to avoid scroll-track clipping.
6. **Qualification/Experience body case**: source content is CMS rich-text; IR is uppercase via `textCase`,
   ours uses `capitalize`. Content-level, CMS-managed, not a design token.
7. **1024–~1430px viewport band** overflows (fixed-px desktop layout authored at 1440). Pre-existing across
   all CFS desktop pages; the two TARGET breakpoints (1440, 393) are clean.

## Consolidated client questions

- **Q1:** Should the **callback submit** hover be the Figma yellow-invert (site-wide change across 5 pages),
  or keep the current brightness/shadow? (residual #1)
- **Q2:** Should the **mobile side gutter** be 24px (per Figma) instead of the global 15px clamp?
  Cross-page change. (residual #3)
- **Q3:** Should unique desktop sections inset to ~1380 to match Figma's centered content frames, or keep
  full-1440? Fixed-px elements already match either way. (residual #4)

## Overall verdict

- **Desktop (1440): PASS** — every measured section matches IR within tolerance; all hovers/clicks/focus
  proven; no horizontal overflow; flip-flops resolved correct.
- **Mobile (393): PASS** — mobile-specific structure correct; Load-More + sidebar→CTA swap verified; all
  states fire; no horizontal overflow.

Residuals #1–#7 are deliberate / cross-page / cosmetic and are documented client questions, not defects.
**No code change was required this round; doctor-individual.html is unchanged and certified.**