# Policy Analyser — Build Plan (Figma, per KDS)

Source: `/Users/ravia/Downloads/PolicyAnalyser (1).zip` → extract to `/tmp/policyanalyser_src/PolicyAnalyser/`
Self-contained HTML/CSS project, mirrors KDS token system. v2.0. Benign (marketing lead-gen funnel for health-insurance policy analysis). NOT malware.

## What it is
Lead-acquisition funnel: non-Kinko user uploads policy PDF → free score → lead capture → full report → 3 conversion CTAs.

## 7 mobile screens (funnel order)
1. Landing — hero value prop + Upload CTA + trust line + how-it-works (3 steps) + sample report card
2. Upload — drag/drop upload zone, PDF <10MB validation, progress, error, manual link
3. Confirm — policy details (read-only) + user context form (city, family size, age)
4. Preview — animated score + top 2 gaps + teaser + lead-capture CTA  ← INFOGRAPHIC HEAVY
5. Lead Capture — name(req), phone(req 10-digit), email(opt), trust + privacy
6. Full Report — score breakdown + at-a-glance stats + good(3)/not-good(2)/missing(3) + 18-feature table + recommendations + next steps  ← INFOGRAPHIC HEAVY
7. Three CTAs — talk to advisor / see Kinko plans / download report + disclaimer + footer

## 5 NEW components (approved) — build as INFOGRAPHIC-GRADE primitives
- score-gauge (was score-display): RADIAL gauge, arc fills w/ score, zone bands poor/avg/good/excellent. Variants: excellent 85-100, good 70-84, average 50-69, poor <50
- coverage-matrix / feature-table: 18-feature HEATMAP, green/amber/red cells + % bar. status success/warning/error
- gap-card: severity card + impact meter (₹ exposure), you-vs-recommended mini bar. Variants high/medium/low/strength
- recommendation-card: priority-coded high/medium/low + consider block
- upload-zone: drag/drop, states default/dragover/error/success/uploading

## Existing components (reuse from KDS): button, input, card, alert, label/chip, divider, icon-button

## INFOGRAPHIC DIRECTION (user directive 2026-06-01)
"Policy Analyser should be more infographic so end result is instantly understandable."
- Score = radial gauge w/ zone bands (not bare number)
- 18 features = coverage heatmap/matrix
- Gaps = severity cards w/ ₹ impact meter + you-vs-recommended bar
- Good/bad/missing = donut split + icon chips
- Report top = at-a-glance KPI tiles (mini gauge/sparkline)
- Rules: single green accent, hierarchy via weight/size NOT rainbow, feedback colors ONLY for severity status, one anchor number 28-40px w800 per viz, 10px uppercase muted labels

## KDS facts for build
- Main KDS file key: IDT7FF4CnWEMLfuwSCFQoa (37 pages — verified connected 2026-06-01)
- Mobile: 360px frame, NO emojis (use icon-holder SVG), body 12px / heading 14-16px, fit aspect w/o scroll, not crowded
- Font: Plus Jakarta Sans. Primary: --action-primary #009b1a
- Every icon uses .icon-holder wrapper
- KDS pages of interest: "Text Styles" 2135:1812, "Colors Foundations" 0:1, "Icon Foundations" 2199:3325, "Buttons 🟡" 2193:2997, "Cards 🟡" 2383:67950, "Input fields" 2199:75104, "✅ Border/Divider" 2174:2361, "Spacing" 2135:2331, "✅ Labels/Chips/Tags" 2232:3588, "✅ Alert" 3171:8
- Source emoji (📄) in stage-1 → DROP, use icon-holder

## Build approach
- Build Stage 1 FIRST as fidelity check, get approval, then 2-7.
- TARGET FILE: TBD — confirm with user (KDS main vs Insurance-App qZYjbIhYoF13d76vRViiZ0). Likely a dedicated page in KDS or Insurance-App.
- Each screen = 360px wrapper auto-layout, sections built incrementally, design-system variables/styles bound (no hardcoded hex/px).