https://financial-clarity-matrix.netlify.app/

1
2<!DOCTYPE html>
3<html lang="en">
4<head>
5    <meta charset="UTF-8">
6<!-- This site is hosted on Netlify. Anyone can build and deploy a site
7     like this one for free: https://netlify.new/?utm_campaign=loops&utm_source=ai-legible&utm_medium=owned&utm_content=comment&utm_id=3b9425c9-ef4c-40b3-b0f5-3c9a6cb223f3
8     Netlify hosting facts for this site: static/SSR served via Netlify Edge. -->
9    <meta name="viewport" content="width=device-width, initial-scale=1.0">
10    <title>Cornerstone Financial Clarity Matrix</title>
11    

11<script src="https://cdn.tailwindcss.com"></script>

11
12    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
13    <style>
14        :root {
15            --navy: #003366;
16            --gold: #aeb736;
17        }
18        body {
19            font-family: 'Inter', sans-serif;
20            background-color: #f8fafc;
21            color: #1e293b;
22            -webkit-font-smoothing: antialiased;
23        }
24        @media print {
25            .no-print { display: none !important; }
26            .print-shadow-none { box-shadow: none !important; }
27            body { background: white; }
28        }
29        .no-scrollbar::-webkit-scrollbar { display: none; }
30        .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
31
32        /* Mobile overflow fix */
33        html, body { overflow-x: hidden; max-width: 100vw; }
34        #root { overflow-x: hidden; }
35        
36        .custom-range {
37            -webkit-appearance: none;
38            width: 100%;
39            height: 6px;
40            background: #e2e8f0;
41            border-radius: 5px;
42            outline: none;
43        }
44        .custom-range::-webkit-slider-thumb {
45            -webkit-appearance: none;
46            appearance: none;
47            width: 20px;
48            height: 20px;
49            background: var(--gold);
50            cursor: pointer;
51            border-radius: 50%;
52            border: 3px solid white;
53            box-shadow: 0 1px 3px rgba(0,0,0,0.2);
54            transition: transform 0.1s ease-in-out;
55        }
56        .custom-range::-webkit-slider-thumb:hover {
57            transform: scale(1.1);
58        }
59    </style>
60
61<link rel="stylesheet" href="/index.css">

62<script type="importmap">
63{
64  "imports": {
65    "lucide-react": "https://esm.sh/lucide-react@^0.463.0",
66    "@google/genai": "https://esm.sh/@google/genai@^1.38.0",
67    "react": "https://esm.sh/react@^19.0.0",
68    "react-dom": "https://esm.sh/react-dom@^19.0.0",
69    "recharts": "https://esm.sh/recharts@^3.7.0",
70    "framer-motion": "https://esm.sh/framer-motion@^11.13.1",
71    "react-dom/": "https://esm.sh/react-dom@^19.2.3/",
72    "react/": "https://esm.sh/react@^19.2.3/"
73  }
74}
75</script>

75
76  

76<script type="module" crossorigin src="/assets/index-HJcKmrO8.js"></script>

76
77</head>
78<body>
79    <div id="root"></div>
80</body>
81</html>