# Innov Eyes Page — Design Spec

**Page file:** `html/innov-eyes.html`
**Drupal route:** `/wavelight-plus-innov-eyes` (or `/specialities/innov-eyes`)
**Reference:** Figma CSS dump + screenshot supplied by client.

## Purpose

Deep-dive marketing landing page for Wavelight Plus InnovEyes Surgery — CFS's most advanced AI-driven LASIK procedure. The page educates users about the technology, eligibility, recovery, and pricing, with multiple booking CTAs.

## Section order

1. Utility bar (shared)
2. Main nav (shared) — active = Specialities
3. Breadcrumb — Home › Speciality › Wavelight Plus InnovEyes Surgery
4. Hero — heading + tagline + embedded callback form + patient photo + 3 stats row (500 Hz / 99%+ / 15 min)
5. See Beyond 6/6 Vision — heading + 2-col text + machine image
6. Understanding Vision Problems — heading + intro + diagram + 5 cards
7. What Makes InnovEyes Different — heading + intro + 2x2 purple cards
8. What Is Wavelight Plus InnovEyes Surgery — heading + intro + 3 yellow chips + body
9. Step-By-Step Procedure — heading + 7-step horizontal stepper + Step 1 detail
10. Core Technology — heading + 4 chip tabs (3D Ray Tracing / Digital Eye Twin / AI Treatment Plan / Advanced Laser Platform) + image + body
11. Specifications & Technical Highlights — 2-col table
12. Benefits — heading + bar chart + 7 benefit cards
13. Who Is Eligible — heading + intro + 2-card comparison + Determine Your Eligibility CTA bar
14. Outcomes & Success Rate — heading + 3 stat cards + Recovery Timeline 4-step stepper
15. Risks & Safety — heading + light burst image + 6-item bullet grid
16. Cost in India — heading + ₹1,30,000 banner + 5 factors row
17. InnovEyes vs Traditional LASIK — heading + intro + 5-col comparison table
18. Cost Comparison vs Other Procedures — heading + 2-col cost table
19. Why Choose Centre For Sight — purple full-width section + 4 cards + CTA
20. FAQ — 6-item native `<details>` accordion
21. Callback form (cross-page reuse)
22. Footer (shared)
23. Sticky bottom bar (shared, mobile-only)

## Visual decisions

| Decision | Choice |
|---|---|
| Active nav | Specialities |
| Tab swap | Reuses existing `[data-tab-swap]` JS for Core Technology section |
| Procedure stepper | 7 numbered circles connected by lines, only step 1 active in static |
| Recovery timeline | 4-step horizontal stepper, only step 1 (24 hours) at full opacity |
| Bar chart | Pure CSS — 4 vertical bars with progressive purple fill |
| Comparison table | InnovEyes column highlighted in `bg-accent`, others on `bg-[#f1f1f1]` |
| Why Choose CFS | Full-width purple section with translucent white cards |
| FAQ | Native `<details>`/`<summary>` (zero JS) |
| Callback form (bottom) | Cross-page copy of blogs callback form |

## Responsive

Single breakpoint `lg:` (1024px). Below `lg:`:
- Hero stacks
- 2-col text + image stacks
- 5-col comparison table needs horizontal scroll OR convert to mobile cards
- 7-step stepper compresses gaps but stays horizontal
- Bar chart stacks below benefit cards
- 2x2 purple cards stack vertically

## Out of scope

- Other treatment landing pages (LASIK / SMILE / Contoura / SILK) — same template, different content
- Schema markup — Drupal Metatag
- Multilingual variants — Drupal translation