UI overhaul: Lucide icons (no emojis), expandable clause cards, severity filters, progress bars, copy/PDF actions, shared nav, interactive hover states

extension/popup.html

@@ -6,183 +6,109 @@
   <title>ClauseGuard</title>
   <style>
     * { margin: 0; padding: 0; box-sizing: border-box; }
-    body {
-      width: 360px;
-      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-      background: #fafafa;
-      color: #1f2937;
-    }
-    .header {
-      background: linear-gradient(135deg, #1e1b4b, #312e81);
-      color: white;
-      padding: 20px;
-      text-align: center;
-    }
-    .header h1 { font-size: 20px; font-weight: 700; }
-    .header p { font-size: 12px; opacity: 0.8; margin-top: 4px; }
+    body { width: 340px; font-family: system-ui, -apple-system, sans-serif; background: #fff; color: #18181b; font-size: 13px; }
 
-    .status { padding: 16px 20px; }
-    .status-card {
-      background: white;
-      border: 1px solid #e5e7eb;
-      border-radius: 12px;
-      padding: 16px;
-      text-align: center;
-    }
-    .risk-score {
-      font-size: 48px;
-      font-weight: 800;
-      line-height: 1;
-    }
-    .risk-label { font-size: 12px; color: #6b7280; margin-top: 4px; }
-    .grade {
-      display: inline-flex;
-      align-items: center;
-      gap: 6px;
-      margin-top: 10px;
-      padding: 6px 14px;
-      border-radius: 999px;
-      font-weight: 600;
-      font-size: 14px;
-    }
-    .grade-f { background: #fef2f2; color: #dc2626; }
-    .grade-d { background: #fff7ed; color: #ea580c; }
-    .grade-c { background: #fefce8; color: #ca8a04; }
-    .grade-b { background: #f0fdf4; color: #16a34a; }
-    .grade-a { background: #f0fdf4; color: #16a34a; }
+    .header { padding: 16px 16px 12px; border-bottom: 1px solid #f4f4f5; display: flex; align-items: center; gap: 8px; }
+    .header svg { width: 18px; height: 18px; color: #18181b; }
+    .header h1 { font-size: 15px; font-weight: 600; }
 
-    .counts {
-      display: grid;
-      grid-template-columns: repeat(3, 1fr);
-      gap: 8px;
-      margin-top: 12px;
-    }
-    .count-box {
-      padding: 8px;
-      border-radius: 8px;
-      text-align: center;
-    }
-    .count-box .num { font-size: 20px; font-weight: 700; }
-    .count-box .label { font-size: 10px; font-weight: 500; }
-    .count-high { background: #fef2f2; color: #dc2626; }
-    .count-med { background: #fff7ed; color: #ea580c; }
-    .count-low { background: #fefce8; color: #ca8a04; }
+    .score-card { padding: 16px; }
+    .score-row { display: flex; align-items: baseline; justify-content: space-between; }
+    .score-num { font-size: 36px; font-weight: 600; letter-spacing: -1px; }
+    .score-label { font-size: 12px; color: #a1a1aa; margin-left: 4px; }
+    .grade { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 6px; border: 1px solid; }
+    .grade-f, .grade-d { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
+    .grade-c { background: #fffbeb; color: #a16207; border-color: #fde68a; }
+    .grade-b, .grade-a { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; }
 
-    .actions { padding: 0 20px 16px; }
-    .btn {
-      display: block;
-      width: 100%;
-      padding: 12px;
-      border: none;
-      border-radius: 10px;
-      font-size: 14px;
-      font-weight: 600;
-      cursor: pointer;
-      margin-bottom: 8px;
-      transition: opacity 0.15s;
-    }
-    .btn:hover { opacity: 0.9; }
-    .btn-primary { background: #4f46e5; color: white; }
-    .btn-secondary { background: #f3f4f6; color: #374151; }
-    .btn-danger { background: #fef2f2; color: #dc2626; }
+    .bar-wrap { margin-top: 10px; height: 4px; background: #f4f4f5; border-radius: 99px; overflow: hidden; }
+    .bar-fill { height: 100%; border-radius: 99px; transition: width 0.6s ease; }
+    .bar-red { background: #ef4444; }
+    .bar-amber { background: #f59e0b; }
+    .bar-green { background: #22c55e; }
 
-    .usage {
-      padding: 12px 20px;
-      border-top: 1px solid #e5e7eb;
-      font-size: 12px;
-      color: #6b7280;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-    }
-    .usage-bar {
-      width: 100px;
-      height: 4px;
-      background: #e5e7eb;
-      border-radius: 99px;
-      overflow: hidden;
-    }
-    .usage-bar-fill {
-      height: 100%;
-      background: #4f46e5;
-      border-radius: 99px;
-      transition: width 0.3s;
-    }
+    .counts { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; padding: 0 16px 12px; }
+    .count-box { text-align: center; padding: 8px 4px; border-radius: 8px; border: 1px solid #f4f4f5; }
+    .count-num { font-size: 18px; font-weight: 600; }
+    .count-label { font-size: 10px; margin-top: 2px; display: flex; align-items: center; justify-content: center; gap: 4px; }
+    .dot { width: 6px; height: 6px; border-radius: 50%; }
+    .dot-red { background: #ef4444; }
+    .dot-amber { background: #f59e0b; }
+    .dot-blue { background: #3b82f6; }
 
-    .empty-state {
-      padding: 40px 20px;
-      text-align: center;
-      color: #9ca3af;
-    }
-    .empty-state .icon { font-size: 40px; }
-    .empty-state p { margin-top: 8px; font-size: 13px; }
+    .actions { padding: 0 16px 12px; display: flex; flex-direction: column; gap: 6px; }
+    .btn { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px; border: none; border-radius: 8px; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.15s; }
+    .btn svg { width: 15px; height: 15px; }
+    .btn-primary { background: #18181b; color: #fff; }
+    .btn-primary:hover { background: #27272a; }
+    .btn-secondary { background: #f4f4f5; color: #3f3f46; }
+    .btn-secondary:hover { background: #e4e4e7; }
 
-    .footer {
-      padding: 12px 20px;
-      border-top: 1px solid #e5e7eb;
-      text-align: center;
-    }
-    .footer a {
-      color: #6366f1;
-      text-decoration: none;
-      font-size: 12px;
-      font-weight: 500;
-    }
-    .footer a:hover { text-decoration: underline; }
+    .usage { padding: 10px 16px; border-top: 1px solid #f4f4f5; display: flex; align-items: center; justify-content: space-between; }
+    .usage-text { font-size: 11px; color: #a1a1aa; }
+    .usage-bar { width: 80px; height: 3px; background: #f4f4f5; border-radius: 99px; overflow: hidden; }
+    .usage-fill { height: 100%; background: #18181b; border-radius: 99px; transition: width 0.3s; }
+
+    .empty { padding: 40px 16px; text-align: center; }
+    .empty svg { width: 32px; height: 32px; color: #d4d4d8; margin: 0 auto 8px; }
+    .empty p { color: #a1a1aa; font-size: 13px; }
+
+    .footer { padding: 8px 16px; border-top: 1px solid #f4f4f5; text-align: center; }
+    .footer a { color: #a1a1aa; text-decoration: none; font-size: 11px; }
+    .footer a:hover { color: #52525b; }
   </style>
 </head>
 <body>
   <div class="header">
-    <h1>🛡️ ClauseGuard</h1>
-    <p>AI Fine Print Scanner</p>
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/><path d="m9 12 2 2 4-4"/></svg>
+    <h1>ClauseGuard</h1>
   </div>
 
   <div id="results-view" style="display:none;">
-    <div class="status">
-      <div class="status-card">
-        <div class="risk-score" id="risk-score">—</div>
-        <div class="risk-label">RISK SCORE</div>
-        <div class="grade" id="grade-badge"></div>
-        <div class="counts">
-          <div class="count-box count-high">
-            <div class="num" id="count-high">0</div>
-            <div class="label">🔴 HIGH</div>
-          </div>
-          <div class="count-box count-med">
-            <div class="num" id="count-med">0</div>
-            <div class="label">🟠 MEDIUM</div>
-          </div>
-          <div class="count-box count-low">
-            <div class="num" id="count-low">0</div>
-            <div class="label">🟡 LOW</div>
-          </div>
-        </div>
+    <div class="score-card">
+      <div class="score-row">
+        <div><span class="score-num" id="risk-score">—</span><span class="score-label">/100 risk</span></div>
+        <span class="grade" id="grade-badge"></span>
       </div>
+      <div class="bar-wrap"><div class="bar-fill" id="bar-fill" style="width:0%"></div></div>
+    </div>
+    <div class="counts">
+      <div class="count-box"><div class="count-num" id="c-high">0</div><div class="count-label"><span class="dot dot-red"></span>High</div></div>
+      <div class="count-box"><div class="count-num" id="c-med">0</div><div class="count-label"><span class="dot dot-amber"></span>Medium</div></div>
+      <div class="count-box"><div class="count-num" id="c-low">0</div><div class="count-label"><span class="dot dot-blue"></span>Low</div></div>
     </div>
     <div class="actions">
-      <button class="btn btn-primary" id="btn-details">📋 View Full Details</button>
-      <button class="btn btn-secondary" id="btn-rescan">🔄 Re-scan Page</button>
+      <button class="btn btn-primary" id="btn-details">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>
+        View full details
+      </button>
+      <button class="btn btn-secondary" id="btn-rescan">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/></svg>
+        Re-scan page
+      </button>
     </div>
   </div>
 
   <div id="empty-view">
-    <div class="empty-state">
-      <div class="icon">🔍</div>
-      <p>No scan results for this page yet.</p>
+    <div class="empty">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><path d="M7 12h10"/></svg>
+      <p>No scan results yet.</p>
     </div>
     <div class="actions">
-      <button class="btn btn-primary" id="btn-scan">🔍 Scan This Page</button>
+      <button class="btn btn-primary" id="btn-scan">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><path d="M7 12h10"/></svg>
+        Scan this page
+      </button>
     </div>
   </div>
 
   <div class="usage">
-    <span id="usage-text">Free: 0/10 scans</span>
-    <div class="usage-bar"><div class="usage-bar-fill" id="usage-fill" style="width:0%"></div></div>
+    <span class="usage-text" id="usage-text">Free: 0/10 scans</span>
+    <div class="usage-bar"><div class="usage-fill" id="usage-fill" style="width:0%"></div></div>
   </div>
 
   <div class="footer">
-    <a href="https://clauseguard.com" target="_blank">clauseguard.com</a> ·
-    <a href="https://app.clauseguard.com/pricing" target="_blank">Upgrade to Pro</a>
+    <a href="https://clauseguard.com" target="_blank">clauseguard.com</a>
   </div>
 
   <script src="popup.js"></script>

extension/sidepanel.html

@@ -3,149 +3,84 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>ClauseGuard — Analysis</title>
+  <title>ClauseGuard</title>
   <style>
     * { margin: 0; padding: 0; box-sizing: border-box; }
-    body {
-      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-      background: #f8fafc;
-      color: #1e293b;
-      font-size: 14px;
-      line-height: 1.5;
-    }
+    body { font-family: system-ui, -apple-system, sans-serif; background: #fff; color: #18181b; font-size: 13px; }
 
-    .header {
-      background: linear-gradient(135deg, #1e1b4b, #312e81);
-      color: white;
-      padding: 20px;
-      position: sticky;
-      top: 0;
-      z-index: 10;
-    }
-    .header h1 { font-size: 18px; font-weight: 700; }
-    .header-meta { font-size: 12px; opacity: 0.7; margin-top: 4px; }
+    .header { padding: 14px 16px; border-bottom: 1px solid #f4f4f5; display: flex; align-items: center; gap: 8px; position: sticky; top: 0; background: #fff; z-index: 10; }
+    .header svg { width: 16px; height: 16px; }
+    .header-title { font-size: 14px; font-weight: 600; }
+    .header-meta { font-size: 11px; color: #a1a1aa; margin-left: auto; }
 
-    .summary {
-      display: grid;
-      grid-template-columns: 1fr 1fr 1fr;
-      gap: 8px;
-      padding: 16px;
-    }
-    .summary-box {
-      padding: 12px;
-      border-radius: 10px;
-      text-align: center;
-    }
-    .summary-box .num { font-size: 24px; font-weight: 700; }
-    .summary-box .label { font-size: 11px; font-weight: 500; margin-top: 2px; }
-    .sum-high { background: #fef2f2; color: #dc2626; }
-    .sum-med { background: #fff7ed; color: #ea580c; }
-    .sum-low { background: #fefce8; color: #ca8a04; }
+    .score-bar { padding: 12px 16px; border-bottom: 1px solid #f4f4f5; display: flex; align-items: center; gap: 12px; }
+    .grade-box { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; border: 1px solid; }
+    .grade-f, .grade-d { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
+    .grade-c { background: #fffbeb; color: #a16207; border-color: #fde68a; }
+    .grade-b, .grade-a { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; }
+    .score-info { flex: 1; }
+    .score-top { display: flex; justify-content: space-between; font-size: 11px; color: #a1a1aa; margin-bottom: 4px; }
+    .progress { height: 5px; background: #f4f4f5; border-radius: 99px; overflow: hidden; }
+    .progress-fill { height: 100%; border-radius: 99px; transition: width 0.5s ease; }
 
-    .clause-list { padding: 0 16px 16px; }
-    .clause-card {
-      background: white;
-      border: 1px solid #e2e8f0;
-      border-radius: 12px;
-      padding: 14px;
-      margin-bottom: 10px;
-      transition: box-shadow 0.2s;
-    }
-    .clause-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
-    .clause-card.severity-high { border-left: 4px solid #ef4444; }
-    .clause-card.severity-medium { border-left: 4px solid #f59e0b; }
-    .clause-card.severity-low { border-left: 4px solid #3b82f6; }
+    .filters { display: flex; gap: 4px; padding: 10px 16px; border-bottom: 1px solid #f4f4f5; overflow-x: auto; }
+    .filter-btn { padding: 5px 10px; border: 1px solid #e4e4e7; border-radius: 6px; background: #fff; font-size: 12px; cursor: pointer; white-space: nowrap; font-weight: 500; color: #71717a; transition: all 0.15s; display: flex; align-items: center; gap: 5px; }
+    .filter-btn:hover { background: #f4f4f5; }
+    .filter-btn.active { background: #18181b; color: #fff; border-color: #18181b; }
+    .filter-count { font-size: 10px; opacity: 0.6; }
+    .dot { width: 6px; height: 6px; border-radius: 50%; }
+    .dot-red { background: #ef4444; }
+    .dot-amber { background: #f59e0b; }
+    .dot-blue { background: #3b82f6; }
 
-    .clause-num { font-size: 11px; color: #94a3b8; font-weight: 600; text-transform: uppercase; }
-    .clause-text {
-      font-size: 13px;
-      color: #334155;
-      margin: 6px 0;
-      font-style: italic;
-      line-height: 1.6;
-    }
-    .clause-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
-    .tag {
-      font-size: 11px;
-      font-weight: 600;
-      padding: 3px 10px;
-      border-radius: 999px;
-    }
-    .tag-high { background: #fecaca; color: #991b1b; }
-    .tag-medium { background: #fed7aa; color: #9a3412; }
-    .tag-low { background: #dbeafe; color: #1e40af; }
+    .clause-list { padding: 8px; }
+    .clause-card { border: 1px solid #e4e4e7; border-radius: 10px; padding: 12px; margin-bottom: 6px; transition: all 0.15s; cursor: default; }
+    .clause-card:hover { border-color: #d4d4d8; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
+    .clause-card.sev-high { border-left: 3px solid #ef4444; }
+    .clause-card.sev-medium { border-left: 3px solid #f59e0b; }
+    .clause-card.sev-low { border-left: 3px solid #3b82f6; }
 
-    .clause-desc {
-      font-size: 12px;
-      color: #64748b;
-      margin-top: 6px;
-      padding: 8px 10px;
-      background: #f8fafc;
-      border-radius: 8px;
-      border-left: 3px solid #cbd5e1;
-    }
+    .clause-tags { display: flex; flex-wrap: wrap; gap: 4px; }
+    .tag { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 4px; border: 1px solid; display: inline-flex; align-items: center; gap: 3px; }
+    .tag svg { width: 10px; height: 10px; }
+    .tag-high { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
+    .tag-medium { background: #fffbeb; color: #a16207; border-color: #fde68a; }
+    .tag-low { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
 
-    .empty {
-      text-align: center;
-      padding: 60px 20px;
-      color: #94a3b8;
-    }
-    .empty .icon { font-size: 48px; margin-bottom: 12px; }
+    .clause-text { font-size: 12px; color: #3f3f46; margin-top: 8px; line-height: 1.6; }
+    .clause-desc { font-size: 11px; color: #71717a; margin-top: 6px; padding: 6px 8px; background: #fafafa; border-radius: 6px; line-height: 1.5; }
 
-    .filter-bar {
-      display: flex;
-      gap: 6px;
-      padding: 12px 16px;
-      overflow-x: auto;
-    }
-    .filter-btn {
-      padding: 6px 12px;
-      border: 1px solid #e2e8f0;
-      border-radius: 999px;
-      background: white;
-      font-size: 12px;
-      cursor: pointer;
-      white-space: nowrap;
-      font-weight: 500;
-      transition: all 0.15s;
-    }
-    .filter-btn:hover { background: #f1f5f9; }
-    .filter-btn.active { background: #4f46e5; color: white; border-color: #4f46e5; }
+    .empty { text-align: center; padding: 48px 16px; color: #a1a1aa; }
+    .empty svg { width: 36px; height: 36px; color: #d4d4d8; margin: 0 auto 10px; }
   </style>
 </head>
 <body>
   <div class="header">
-    <h1>🛡️ ClauseGuard Analysis</h1>
-    <div class="header-meta" id="meta"></div>
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/><path d="m9 12 2 2 4-4"/></svg>
+    <span class="header-title">ClauseGuard</span>
+    <span class="header-meta" id="meta"></span>
   </div>
 
-  <div class="summary" id="summary" style="display:none;">
-    <div class="summary-box sum-high">
-      <div class="num" id="s-high">0</div>
-      <div class="label">🔴 High Risk</div>
-    </div>
-    <div class="summary-box sum-med">
-      <div class="num" id="s-med">0</div>
-      <div class="label">🟠 Medium</div>
-    </div>
-    <div class="summary-box sum-low">
-      <div class="num" id="s-low">0</div>
-      <div class="label">🟡 Low</div>
+  <div class="score-bar" id="score-bar" style="display:none;">
+    <div class="grade-box" id="grade-box">—</div>
+    <div class="score-info">
+      <div class="score-top"><span>Risk Score</span><span id="score-num">0 / 100</span></div>
+      <div class="progress"><div class="progress-fill" id="progress-fill" style="width:0%"></div></div>
     </div>
   </div>
 
-  <div class="filter-bar" id="filters" style="display:none;">
+  <div class="filters" id="filters" style="display:none;">
     <button class="filter-btn active" data-filter="all">All</button>
-    <button class="filter-btn" data-filter="HIGH">🔴 High</button>
-    <button class="filter-btn" data-filter="MEDIUM">🟠 Medium</button>
-    <button class="filter-btn" data-filter="LOW">🟡 Low</button>
+    <button class="filter-btn" data-filter="HIGH"><span class="dot dot-red"></span>High <span class="filter-count" id="fc-high">0</span></button>
+    <button class="filter-btn" data-filter="MEDIUM"><span class="dot dot-amber"></span>Medium <span class="filter-count" id="fc-med">0</span></button>
+    <button class="filter-btn" data-filter="LOW"><span class="dot dot-blue"></span>Low <span class="filter-count" id="fc-low">0</span></button>
   </div>
 
   <div class="clause-list" id="clause-list"></div>
 
   <div class="empty" id="empty-state">
-    <div class="icon">🔍</div>
-    <p>Scan a page to see clause analysis here.</p>
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><path d="M7 12h10"/></svg>
+    <p>Scan a page to see the analysis.</p>
   </div>
 
   <script src="sidepanel.js"></script>

extension/sidepanel.js

@@ -1,17 +1,23 @@
 /**
- * ClauseGuard — Side Panel Script
- * Displays detailed clause analysis with filtering
+ * ClauseGuard — Side Panel (redesigned)
  */
 
-const CATEGORY_DESCRIPTIONS = {
-  "Limitation of liability": "Company limits or excludes liability for losses, data breaches, or service failures.",
-  "Unilateral termination": "Company can terminate your account at any time without reason.",
-  "Unilateral change": "Company can change terms at any time without your consent.",
-  "Content removal": "Company can delete your content without notice or justification.",
-  "Contract by using": "You're bound to the contract simply by using the service — a dark pattern.",
-  "Choice of law": "Governing law may differ from your country — reducing your legal protections.",
-  "Jurisdiction": "Disputes must be resolved in a jurisdiction that may disadvantage you.",
-  "Arbitration": "Forces disputes to arbitration instead of court — you waive your right to sue.",
+const DESCS = {
+  "Limitation of liability": "Company limits or excludes liability for losses or damages.",
+  "Unilateral termination": "They can close your account without reason.",
+  "Unilateral change": "Terms can change without your consent.",
+  "Content removal": "Your content can be deleted without notice.",
+  "Contract by using": "You agree just by visiting or using the site.",
+  "Choice of law": "Foreign law applies instead of your local protections.",
+  "Jurisdiction": "Disputes handled in their preferred court.",
+  "Arbitration": "You waive your right to sue in court.",
+};
+
+// SVG icons for severity
+const SEV_ICONS = {
+  HIGH: '<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>',
+  MEDIUM: '<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 8v4"/><path d="M12 16h.01"/></svg>',
+  LOW: '<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>',
 };
 
 let allClauses = [];
@@ -28,87 +34,87 @@ async function loadResults() {
   }
 
   document.getElementById("empty-state").style.display = "none";
-  document.getElementById("summary").style.display = "grid";
+  document.getElementById("score-bar").style.display = "flex";
   document.getElementById("filters").style.display = "flex";
 
-  document.getElementById("meta").textContent =
-    `${results.total_clauses} clauses scanned · ${results.flagged_count} flagged · Risk: ${results.risk_score}/100`;
+  // Meta
+  document.getElementById("meta").textContent = `${results.total_clauses} clauses · ${results.flagged_count} flagged`;
+
+  // Grade
+  const gb = document.getElementById("grade-box");
+  gb.textContent = results.grade;
+  gb.className = `grade-box grade-${results.grade.toLowerCase()}`;
+
+  // Score
+  document.getElementById("score-num").textContent = `${results.risk_score} / 100`;
+  const pf = document.getElementById("progress-fill");
+  pf.style.width = `${results.risk_score}%`;
+  pf.style.background = results.risk_score >= 60 ? "#ef4444" : results.risk_score >= 30 ? "#f59e0b" : "#22c55e";
 
-  // Count severities
+  // Counts
   const counts = { HIGH: 0, MEDIUM: 0, LOW: 0 };
   const flagged = results.results.filter(r => r.categories?.length > 0);
-  flagged.forEach(r => r.categories.forEach(c => counts[c.severity]++));
-
-  document.getElementById("s-high").textContent = counts.HIGH;
-  document.getElementById("s-med").textContent = counts.MEDIUM;
-  document.getElementById("s-low").textContent = counts.LOW;
+  flagged.forEach(r => r.categories.forEach(c => { if (counts[c.severity] !== undefined) counts[c.severity]++; }));
+  document.getElementById("fc-high").textContent = counts.HIGH;
+  document.getElementById("fc-med").textContent = counts.MEDIUM;
+  document.getElementById("fc-low").textContent = counts.LOW;
 
   allClauses = flagged;
-  renderClauses(flagged);
+  renderClauses();
 }
 
-function renderClauses(clauses) {
+function renderClauses() {
   const list = document.getElementById("clause-list");
-  list.innerHTML = "";
-
-  const filtered = currentFilter === "all"
-    ? clauses
-    : clauses.filter(c => c.categories.some(cat => cat.severity === currentFilter));
+  const filtered = currentFilter === "all" ? allClauses : allClauses.filter(c => c.categories.some(cat => cat.severity === currentFilter));
 
   if (filtered.length === 0) {
-    list.innerHTML = '<div style="text-align:center; padding:30px; color:#94a3b8;">No clauses match this filter.</div>';
+    list.innerHTML = '<div style="text-align:center;padding:24px;color:#a1a1aa;font-size:12px;">No clauses match this filter.</div>';
     return;
   }
 
-  filtered.forEach((clause, i) => {
-    const maxSev = getMaxSeverity(clause.categories);
-    const card = document.createElement("div");
-    card.className = `clause-card severity-${maxSev.toLowerCase()}`;
-    card.innerHTML = `
-      <div class="clause-num">Clause #${i + 1}</div>
-      <div class="clause-text">"${truncate(clause.text, 250)}"</div>
-      <div class="clause-tags">
-        ${clause.categories.map(c => `
-          <span class="tag tag-${c.severity.toLowerCase()}">${c.name}</span>
-        `).join("")}
-      </div>
-      ${clause.categories.map(c => `
-        <div class="clause-desc">
-          <strong>${c.name}:</strong> ${CATEGORY_DESCRIPTIONS[c.name] || c.name}
-        </div>
-      `).join("")}
-    `;
-    list.appendChild(card);
-  });
-}
+  list.innerHTML = filtered.map((clause, i) => {
+    const maxSev = clause.categories.reduce((m, c) => {
+      const o = { HIGH: 3, MEDIUM: 2, LOW: 1 };
+      return (o[c.severity] || 0) > (o[m] || 0) ? c.severity : m;
+    }, "LOW");
 
-function getMaxSeverity(categories) {
-  const order = { HIGH: 3, MEDIUM: 2, LOW: 1 };
-  return categories.reduce((max, c) => order[c.severity] > order[max] ? c.severity : max, "LOW");
-}
+    const tagMap = { HIGH: "tag-high", MEDIUM: "tag-medium", LOW: "tag-low" };
+
+    const tags = clause.categories.map(c =>
+      `<span class="tag ${tagMap[c.severity] || "tag-medium"}">${SEV_ICONS[c.severity] || ""} ${c.name}</span>`
+    ).join("");
+
+    const descs = clause.categories.map(c =>
+      `<div class="clause-desc">${DESCS[c.name] || c.name}</div>`
+    ).join("");
 
-function truncate(text, maxLen) {
-  return text.length > maxLen ? text.substring(0, maxLen) + "…" : text;
+    const text = clause.text.length > 200 ? clause.text.slice(0, 200) + "…" : clause.text;
+
+    return `
+      <div class="clause-card sev-${maxSev.toLowerCase()}">
+        <div class="clause-tags">${tags}</div>
+        <div class="clause-text">${text}</div>
+        ${descs}
+      </div>
+    `;
+  }).join("");
 }
 
-// ─── Filter buttons ───
+// Filters
 document.getElementById("filters").addEventListener("click", (e) => {
-  if (!e.target.matches(".filter-btn")) return;
+  const btn = e.target.closest(".filter-btn");
+  if (!btn) return;
   document.querySelectorAll(".filter-btn").forEach(b => b.classList.remove("active"));
-  e.target.classList.add("active");
-  currentFilter = e.target.dataset.filter;
-  renderClauses(allClauses);
+  btn.classList.add("active");
+  currentFilter = btn.dataset.filter;
+  renderClauses();
 });
 
-// ─── Listen for updates from background ───
+// Listen for updates
 chrome.storage.onChanged.addListener((changes) => {
   for (const key of Object.keys(changes)) {
-    if (key.startsWith("results_")) {
-      loadResults();
-      break;
-    }
+    if (key.startsWith("results_")) { loadResults(); break; }
   }
 });
 
-// ─── Init ───
 loadResults();

web/app/dashboard-pages/analyze/page.tsx

@@ -1,13 +1,35 @@
 "use client";
 
 import { useState } from "react";
+import {
+  ScanText, ScanLine, TriangleAlert, CircleAlert, CircleCheck, Info,
+  Download, FileDown, ChevronDown, ChevronUp, Highlighter, Copy, Check,
+  ShieldCheck, ShieldAlert, Scale, Gavel, Ban, Globe, Eye, Stamp, FileX
+} from "lucide-react";
 
-interface ClauseCategory { name: string; severity: string; confidence: number; }
-interface ClauseResult { text: string; categories: ClauseCategory[]; }
-interface AnalysisResult {
-  risk_score: number; grade: string; total_clauses: number;
-  flagged_count: number; results: ClauseResult[]; model: string; latency_ms: number;
-}
+interface Cat { name: string; severity: string; description?: string; confidence?: number; }
+interface Clause { text: string; categories: Cat[]; }
+interface Result { risk_score: number; grade: string; total_clauses: number; flagged_count: number; results: Clause[]; model: string; latency_ms: number; }
+
+const SEV_CONFIG: Record<string, { icon: any; label: string; text: string; bg: string; border: string; dot: string }> = {
+  HIGH: { icon: TriangleAlert, label: "High", text: "text-red-600", bg: "bg-red-50", border: "border-red-200", dot: "bg-red-500" },
+  MEDIUM: { icon: CircleAlert, label: "Medium", text: "text-amber-600", bg: "bg-amber-50", border: "border-amber-200", dot: "bg-amber-500" },
+  LOW: { icon: Info, label: "Low", text: "text-blue-600", bg: "bg-blue-50", border: "border-blue-200", dot: "bg-blue-500" },
+};
+
+const GRADE_STYLE: Record<string, string> = {
+  A: "bg-emerald-50 text-emerald-700 border-emerald-200",
+  B: "bg-emerald-50 text-emerald-700 border-emerald-200",
+  C: "bg-amber-50 text-amber-700 border-amber-200",
+  D: "bg-red-50 text-red-700 border-red-200",
+  F: "bg-red-50 text-red-700 border-red-200",
+};
+
+const CATEGORY_ICONS: Record<string, any> = {
+  "Arbitration": Scale, "Limitation of liability": ShieldAlert, "Unilateral termination": Ban,
+  "Unilateral change": FileX, "Content removal": Eye, "Jurisdiction": Globe,
+  "Choice of law": Gavel, "Contract by using": Stamp,
+};
 
 const EXAMPLE = `By using the Spotify Service, you agree to be bound by these Terms of Use.
 
@@ -17,7 +39,7 @@ In no event will Spotify be liable for any indirect, incidental, special, conseq
 
 Spotify reserves the right to remove or disable access to any User Content for any reason, without prior notice.
 
-Spotify may terminate your account or suspend your access to all or part of the Service at any time, with or without cause, effective immediately.
+Spotify may terminate your account or suspend your access at any time, with or without cause, with or without notice, effective immediately.
 
 These Terms will be governed by and construed in accordance with the laws of the State of New York.
 
@@ -25,105 +47,212 @@ Any dispute shall be finally settled by arbitration in New York County.`;
 
 export default function AnalyzePage() {
   const [text, setText] = useState("");
-  const [results, setResults] = useState<AnalysisResult | null>(null);
+  const [results, setResults] = useState<Result | null>(null);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState("");
+  const [expandedIdx, setExpandedIdx] = useState<number | null>(null);
+  const [filter, setFilter] = useState<string>("all");
+  const [copied, setCopied] = useState(false);
 
   async function handleAnalyze() {
     if (!text || text.trim().length < 50) { setError("Enter at least 50 characters."); return; }
-    setLoading(true); setError(""); setResults(null);
+    setLoading(true); setError(""); setResults(null); setExpandedIdx(null);
     try {
-      const res = await fetch("/api/analyze", {
-        method: "POST", headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ text }),
-      });
-      if (!res.ok) { const err = await res.json(); throw new Error(err.error || "Failed"); }
+      const res = await fetch("/api/analyze", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ text }) });
+      if (!res.ok) throw new Error((await res.json()).error || "Failed");
       setResults(await res.json());
-    } catch (err: any) { setError(err.message); }
+    } catch (e: any) { setError(e.message); }
     finally { setLoading(false); }
   }
 
-  const sevStyle: Record<string, string> = {
-    HIGH: "text-red-700 bg-red-50 border-red-200",
-    MEDIUM: "text-amber-700 bg-amber-50 border-amber-200",
-    LOW: "text-blue-700 bg-blue-50 border-blue-200",
-  };
+  async function handleDownloadPDF() {
+    if (!results) return;
+    try {
+      const res = await fetch("/api/pdf/report", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(results) });
+      const blob = await res.blob();
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a"); a.href = url; a.download = "clauseguard-report.pdf"; a.click();
+      URL.revokeObjectURL(url);
+    } catch {}
+  }
+
+  function handleCopy() {
+    if (!results) return;
+    const summary = `ClauseGuard Report\nRisk: ${results.risk_score}/100 (Grade ${results.grade})\n${results.flagged_count} of ${results.total_clauses} clauses flagged\n\n` +
+      results.results.filter(r => r.categories.length > 0).map((r, i) =>
+        `${i+1}. [${r.categories.map(c => c.name).join(", ")}] ${r.text.slice(0, 100)}...`
+      ).join("\n");
+    navigator.clipboard.writeText(summary);
+    setCopied(true); setTimeout(() => setCopied(false), 2000);
+  }
+
+  const flagged = results?.results.filter(r => r.categories.length > 0) || [];
+  const filtered = filter === "all" ? flagged : flagged.filter(r => r.categories.some(c => c.severity === filter));
+
+  const sevCounts = { HIGH: 0, MEDIUM: 0, LOW: 0 };
+  flagged.forEach(r => r.categories.forEach(c => { if (sevCounts[c.severity as keyof typeof sevCounts] !== undefined) sevCounts[c.severity as keyof typeof sevCounts]++; }));
 
   return (
     <div className="min-h-screen bg-white">
-      <div className="max-w-5xl mx-auto px-6 py-12">
+      <div className="max-w-6xl mx-auto px-5 py-10">
         <div className="mb-8">
-          <h1 className="text-2xl font-semibold tracking-tight">Scan a document</h1>
-          <p className="mt-1 text-sm text-zinc-500">Paste any Terms of Service, contract, or lease below.</p>
+          <h1 className="text-2xl font-semibold tracking-tight flex items-center gap-2">
+            <ScanText className="w-6 h-6 text-zinc-400" />
+            Scan a document
+          </h1>
+          <p className="mt-1 text-sm text-zinc-500">Paste Terms of Service, a contract, or a lease agreement.</p>
         </div>
 
-        <div className="grid lg:grid-cols-2 gap-8">
-          <div>
-            <textarea
-              value={text} onChange={(e) => setText(e.target.value)}
-              placeholder="Paste your text here..."
-              className="w-full h-80 p-4 border border-zinc-200 rounded-lg text-sm font-mono leading-relaxed resize-none focus:outline-none focus:border-zinc-400 placeholder:text-zinc-300"
-            />
+        <div className="grid lg:grid-cols-5 gap-6">
+          {/* Input — 2 cols */}
+          <div className="lg:col-span-2">
+            <textarea value={text} onChange={(e) => setText(e.target.value)}
+              placeholder="Paste your document text here..."
+              className="w-full h-[420px] p-4 border border-zinc-200 rounded-xl text-sm leading-relaxed resize-none focus:outline-none focus:ring-2 focus:ring-zinc-900/10 focus:border-zinc-300 placeholder:text-zinc-300 font-mono" />
             <div className="mt-3 flex gap-2">
               <button onClick={handleAnalyze} disabled={loading}
-                className="flex-1 bg-zinc-900 text-white py-2.5 rounded-md text-sm font-medium hover:bg-zinc-800 disabled:opacity-40">
-                {loading ? "Scanning..." : "Scan"}
+                className="flex-1 inline-flex items-center justify-center gap-2 bg-zinc-900 text-white py-2.5 rounded-lg text-sm font-medium hover:bg-zinc-800 disabled:opacity-40 transition-colors">
+                {loading ? <><ScanLine className="w-4 h-4 animate-pulse" /> Scanning...</> : <><ScanText className="w-4 h-4" /> Scan</>}
               </button>
               <button onClick={() => setText(EXAMPLE)}
-                className="px-4 border border-zinc-200 rounded-md text-sm text-zinc-500 hover:bg-zinc-50">
+                className="px-4 border border-zinc-200 rounded-lg text-sm text-zinc-500 hover:bg-zinc-50 transition-colors">
                 Example
               </button>
             </div>
-            {error && <p className="mt-2 text-sm text-red-600">{error}</p>}
+            {error && <p className="mt-2 text-sm text-red-600 flex items-center gap-1.5"><TriangleAlert className="w-3.5 h-3.5" />{error}</p>}
           </div>
 
-          <div>
+          {/* Results — 3 cols */}
+          <div className="lg:col-span-3">
             {results ? (
-              <div>
-                {/* Score */}
-                <div className="border border-zinc-200 rounded-lg p-5 mb-4">
-                  <div className="flex items-baseline justify-between">
+              <div className="space-y-4">
+                {/* Score card */}
+                <div className="border border-zinc-200 rounded-xl p-5">
+                  <div className="flex items-start justify-between">
                     <div>
-                      <span className="text-3xl font-semibold">{results.risk_score}</span>
-                      <span className="text-sm text-zinc-400 ml-1">/100 risk</span>
+                      <div className="flex items-baseline gap-2">
+                        <span className="text-4xl font-semibold tracking-tight">{results.risk_score}</span>
+                        <span className="text-sm text-zinc-400">/100 risk</span>
+                      </div>
+                      <div className="mt-2 h-1.5 w-48 bg-zinc-100 rounded-full overflow-hidden">
+                        <div className={`h-full rounded-full transition-all duration-700 ${
+                          results.risk_score >= 60 ? "bg-red-500" : results.risk_score >= 30 ? "bg-amber-400" : "bg-emerald-500"
+                        }`} style={{ width: `${results.risk_score}%` }} />
+                      </div>
                     </div>
-                    <span className={`text-sm font-medium px-2 py-0.5 rounded ${
-                      results.grade === "F" || results.grade === "D" ? "bg-red-50 text-red-700" :
-                      results.grade === "C" ? "bg-amber-50 text-amber-700" :
-                      "bg-emerald-50 text-emerald-700"
-                    }`}>
-                      Grade {results.grade}
+                    <div className="flex items-center gap-2">
+                      <span className={`text-sm font-semibold px-3 py-1 rounded-lg border ${GRADE_STYLE[results.grade] || GRADE_STYLE.C}`}>
+                        Grade {results.grade}
+                      </span>
+                    </div>
+                  </div>
+                  <div className="mt-4 flex items-center gap-4 text-xs text-zinc-400">
+                    <span>{results.total_clauses} clauses</span>
+                    <span className="w-px h-3 bg-zinc-200" />
+                    <span>{results.flagged_count} flagged</span>
+                    <span className="w-px h-3 bg-zinc-200" />
+                    <span>{results.latency_ms}ms</span>
+                    <span className="w-px h-3 bg-zinc-200" />
+                    <span className="flex items-center gap-1">
+                      {results.model === "ml" ? <Sparkles className="w-3 h-3" /> : null}
+                      {results.model === "ml" ? "Legal-BERT" : "Pattern matching"}
                     </span>
                   </div>
-                  <p className="mt-2 text-xs text-zinc-400">
-                    {results.total_clauses} clauses scanned · {results.flagged_count} flagged · {results.latency_ms}ms
-                  </p>
                 </div>
 
-                {/* Clauses */}
-                <div className="space-y-2 max-h-96 overflow-y-auto">
-                  {results.results.filter(r => r.categories.length > 0).map((clause, i) => (
-                    <div key={i} className="border border-zinc-200 rounded-lg p-4">
-                      <p className="text-sm text-zinc-700 leading-relaxed line-clamp-2">{clause.text}</p>
-                      <div className="flex flex-wrap gap-1.5 mt-2">
-                        {clause.categories.map((cat, j) => (
-                          <span key={j} className={`text-xs font-medium px-2 py-0.5 rounded border ${sevStyle[cat.severity] || sevStyle.MEDIUM}`}>
-                            {cat.name}
-                          </span>
-                        ))}
-                      </div>
-                    </div>
-                  ))}
-                  {results.flagged_count === 0 && (
-                    <div className="border border-zinc-200 rounded-lg p-8 text-center">
-                      <p className="text-sm text-zinc-500">No unfair clauses found. Looks fair.</p>
+                {/* Actions bar */}
+                <div className="flex items-center justify-between">
+                  <div className="flex gap-1">
+                    {[
+                      { key: "all", label: "All", count: flagged.length },
+                      { key: "HIGH", label: "High", count: sevCounts.HIGH },
+                      { key: "MEDIUM", label: "Medium", count: sevCounts.MEDIUM },
+                      { key: "LOW", label: "Low", count: sevCounts.LOW },
+                    ].map((f) => (
+                      <button key={f.key} onClick={() => setFilter(f.key)}
+                        className={`px-3 py-1.5 text-xs font-medium rounded-md transition-colors ${
+                          filter === f.key ? "bg-zinc-900 text-white" : "text-zinc-500 hover:bg-zinc-100"
+                        }`}>
+                        {f.label} {f.count > 0 && <span className="ml-1 opacity-60">{f.count}</span>}
+                      </button>
+                    ))}
+                  </div>
+                  <div className="flex gap-1.5">
+                    <button onClick={handleCopy} className="p-2 rounded-md hover:bg-zinc-100 text-zinc-400 hover:text-zinc-600 transition-colors" title="Copy summary">
+                      {copied ? <Check className="w-4 h-4 text-emerald-500" /> : <Copy className="w-4 h-4" />}
+                    </button>
+                    <button onClick={handleDownloadPDF} className="p-2 rounded-md hover:bg-zinc-100 text-zinc-400 hover:text-zinc-600 transition-colors" title="Download PDF">
+                      <FileDown className="w-4 h-4" />
+                    </button>
+                  </div>
+                </div>
+
+                {/* Clause list */}
+                <div className="space-y-2 max-h-[400px] overflow-y-auto pr-1">
+                  {filtered.length === 0 ? (
+                    <div className="border border-dashed border-zinc-200 rounded-xl p-10 text-center">
+                      <CircleCheck className="w-8 h-8 text-emerald-400 mx-auto mb-2" />
+                      <p className="text-sm text-zinc-500">{filter === "all" ? "No unfair clauses found." : "No clauses at this severity level."}</p>
                     </div>
-                  )}
+                  ) : filtered.map((clause, i) => {
+                    const maxSev = clause.categories.reduce((m, c) => {
+                      const order: Record<string, number> = { HIGH: 3, MEDIUM: 2, LOW: 1 };
+                      return (order[c.severity] || 0) > (order[m] || 0) ? c.severity : m;
+                    }, "LOW");
+                    const conf = SEV_CONFIG[maxSev] || SEV_CONFIG.MEDIUM;
+                    const isExpanded = expandedIdx === i;
+                    const CatIcon = CATEGORY_ICONS[clause.categories[0]?.name] || TriangleAlert;
+
+                    return (
+                      <div key={i}
+                        className={`border rounded-xl overflow-hidden transition-all ${conf.border} ${isExpanded ? "shadow-sm" : ""}`}>
+                        <button onClick={() => setExpandedIdx(isExpanded ? null : i)}
+                          className="w-full text-left p-4 flex items-start gap-3 hover:bg-zinc-50/50 transition-colors">
+                          <div className={`w-8 h-8 rounded-lg flex items-center justify-center shrink-0 ${conf.bg}`}>
+                            <CatIcon className={`w-4 h-4 ${conf.text}`} />
+                          </div>
+                          <div className="flex-1 min-w-0">
+                            <div className="flex items-center gap-2 flex-wrap">
+                              {clause.categories.map((cat, j) => {
+                                const s = SEV_CONFIG[cat.severity] || SEV_CONFIG.MEDIUM;
+                                return (
+                                  <span key={j} className={`text-[11px] font-medium px-2 py-0.5 rounded border ${s.bg} ${s.text} ${s.border}`}>
+                                    {cat.name}
+                                    {cat.confidence ? ` ${Math.round(cat.confidence * 100)}%` : ""}
+                                  </span>
+                                );
+                              })}
+                            </div>
+                            <p className="mt-1.5 text-sm text-zinc-600 leading-relaxed line-clamp-2">{clause.text}</p>
+                          </div>
+                          <div className="shrink-0 mt-1">
+                            {isExpanded ? <ChevronUp className="w-4 h-4 text-zinc-400" /> : <ChevronDown className="w-4 h-4 text-zinc-400" />}
+                          </div>
+                        </button>
+                        {isExpanded && (
+                          <div className="px-4 pb-4 pt-0 border-t border-zinc-100">
+                            <p className="text-sm text-zinc-700 leading-relaxed mt-3 font-mono bg-zinc-50 rounded-lg p-3">
+                              {clause.text}
+                            </p>
+                            {clause.categories.map((cat, j) => (
+                              <div key={j} className="mt-3 flex items-start gap-2">
+                                <TriangleAlert className={`w-3.5 h-3.5 mt-0.5 shrink-0 ${(SEV_CONFIG[cat.severity] || SEV_CONFIG.MEDIUM).text}`} />
+                                <p className="text-[13px] text-zinc-500 leading-relaxed">
+                                  <span className="font-medium text-zinc-700">{cat.name}:</span> {cat.description || "This clause may be unfair under consumer protection law."}
+                                </p>
+                              </div>
+                            ))}
+                          </div>
+                        )}
+                      </div>
+                    );
+                  })}
                 </div>
               </div>
             ) : (
-              <div className="border border-dashed border-zinc-200 rounded-lg h-80 flex items-center justify-center">
-                <p className="text-sm text-zinc-300">Results will appear here</p>
+              <div className="border border-dashed border-zinc-200 rounded-xl h-[420px] flex flex-col items-center justify-center">
+                <ScanText className="w-10 h-10 text-zinc-200 mb-3" />
+                <p className="text-sm text-zinc-300">Paste text and scan to see results</p>
               </div>
             )}
           </div>
@@ -132,3 +261,7 @@ export default function AnalyzePage() {
     </div>
   );
 }
+
+function Sparkles({ className }: { className?: string }) {
+  return <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"/><path d="M20 3v4"/><path d="M22 5h-4"/></svg>;
+}

web/app/layout.tsx

@@ -1,29 +1,27 @@
 import type { Metadata } from "next";
+import { Nav } from "@/components/nav";
 import "./globals.css";
 
 export const metadata: Metadata = {
   title: "ClauseGuard — AI Fine Print Scanner",
-  description:
-    "Stop signing away your rights. ClauseGuard uses AI to scan Terms of Service, contracts, and legal documents for unfair clauses — instantly.",
-  keywords: ["terms of service", "contract scanner", "legal AI", "unfair clauses", "fine print"],
+  description: "Scans Terms of Service, contracts, and leases for unfair clauses. Get a risk score before you click accept.",
+  keywords: ["terms of service scanner", "contract analyzer", "unfair clauses", "legal AI"],
   openGraph: {
-    title: "ClauseGuard — AI Fine Print Scanner",
-    description: "Stop signing away your rights. AI scans contracts for unfair clauses instantly.",
+    title: "ClauseGuard",
+    description: "Know what you are agreeing to.",
     url: "https://clauseguard.com",
     siteName: "ClauseGuard",
     type: "website",
   },
-  twitter: {
-    card: "summary_large_image",
-    title: "ClauseGuard — AI Fine Print Scanner",
-    description: "Stop signing away your rights.",
-  },
 };
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en">
-      <body className="antialiased">{children}</body>
+      <body className="antialiased text-zinc-900 bg-white">
+        <Nav />
+        {children}
+      </body>
     </html>
   );
 }

web/app/page.tsx

@@ -1,84 +1,100 @@
 import Link from "next/link";
+import {
+  ShieldCheck, ShieldAlert, Scale, Gavel, ScrollText, Handshake,
+  ScanText, FileCheck, TriangleAlert, ArrowRight, Zap, Eye, Download,
+  ChevronRight, Sparkles, Lock, Globe, Ban, FileX, Stamp
+} from "lucide-react";
 
-const CLAUSE_TYPES = [
-  { name: "Arbitration", desc: "Waives your right to sue in court" },
-  { name: "Liability limits", desc: "Company avoids responsibility for damages" },
-  { name: "Unilateral termination", desc: "They can close your account without reason" },
-  { name: "Unilateral change", desc: "Terms can change without your consent" },
-  { name: "Content removal", desc: "Your content deleted without notice" },
-  { name: "Jurisdiction", desc: "Disputes handled in their preferred court" },
-  { name: "Choice of law", desc: "Foreign law overrides your local protections" },
-  { name: "Contract by using", desc: "You agree just by visiting the site" },
+const CLAUSES = [
+  { icon: Scale, name: "Arbitration", desc: "Waives your right to sue in court", severity: "high" },
+  { icon: ShieldAlert, name: "Liability limits", desc: "Company avoids responsibility for damages", severity: "high" },
+  { icon: Ban, name: "Unilateral termination", desc: "They can close your account without reason", severity: "high" },
+  { icon: FileX, name: "Unilateral change", desc: "Terms can change without your consent", severity: "medium" },
+  { icon: Eye, name: "Content removal", desc: "Your content deleted without notice", severity: "medium" },
+  { icon: Globe, name: "Jurisdiction", desc: "Disputes handled in their preferred court", severity: "medium" },
+  { icon: Gavel, name: "Choice of law", desc: "Foreign law overrides your local protections", severity: "medium" },
+  { icon: Stamp, name: "Contract by using", desc: "You agree just by visiting the site", severity: "low" },
+];
+
+const STEPS = [
+  { icon: Download, title: "Install", desc: "Add the Chrome extension. Two clicks, no signup required." },
+  { icon: ScanText, title: "Browse normally", desc: "Visit any terms page. ClauseGuard scans it in the background." },
+  { icon: TriangleAlert, title: "See the flags", desc: "Unfair clauses get highlighted. Open the sidebar for the full breakdown." },
 ];
 
 const PRICING = [
   {
-    name: "Free", price: "$0", period: "", highlight: false,
-    features: ["10 scans per month", "All 8 clause types", "Risk score and grade", "Chrome extension"],
-    cta: "Get started",
+    name: "Free", price: "$0", period: "", highlight: false, cta: "Get started",
+    features: ["10 scans per month", "All 8 clause types", "Risk score and grade", "Chrome extension", "Local fallback"],
   },
   {
-    name: "Pro", price: "$12", period: "/mo", highlight: true,
-    features: ["Unlimited scans", "Upload contracts and leases", "Plain-English explanations", "Scan history and dashboard", "PDF report export", "Email support"],
-    cta: "Start free trial",
+    name: "Pro", price: "$12", period: "/mo", highlight: true, cta: "Start free trial",
+    features: ["Unlimited scans", "Upload contracts and leases", "AI clause explanations", "Scan history", "PDF report export", "Email scan reports", "Priority support"],
   },
   {
-    name: "Team", price: "$49", period: "/mo", highlight: false,
-    features: ["Everything in Pro", "5 seats", "10,000 API calls", "Shared dashboard", "Slack support"],
-    cta: "Talk to us",
+    name: "Team", price: "$49", period: "/mo", highlight: false, cta: "Talk to us",
+    features: ["Everything in Pro", "5 team seats", "10,000 API calls", "Shared dashboard", "Slack support", "Custom clause rules"],
   },
 ];
 
+const sevColor: Record<string, string> = {
+  high: "text-red-500 bg-red-50",
+  medium: "text-amber-500 bg-amber-50",
+  low: "text-blue-500 bg-blue-50",
+};
+
 export default function Home() {
   return (
     <main className="min-h-screen bg-white text-zinc-900">
-      {/* Nav */}
-      <nav className="border-b border-zinc-100">
-        <div className="max-w-5xl mx-auto px-6 h-14 flex items-center justify-between">
-          <span className="font-semibold tracking-tight">ClauseGuard</span>
-          <div className="hidden sm:flex items-center gap-6 text-sm text-zinc-500">
-            <a href="#features" className="hover:text-zinc-900">Features</a>
-            <a href="#pricing" className="hover:text-zinc-900">Pricing</a>
-            <Link href="/auth/login" className="hover:text-zinc-900">Log in</Link>
-            <Link href="/auth/signup" className="bg-zinc-900 text-white px-3.5 py-1.5 rounded-md text-sm hover:bg-zinc-800">Get started</Link>
-          </div>
-        </div>
-      </nav>
-
       {/* Hero */}
-      <section className="max-w-5xl mx-auto px-6 pt-24 pb-20">
+      <section className="max-w-6xl mx-auto px-5 pt-24 pb-20">
         <div className="max-w-2xl">
-          <p className="text-sm text-zinc-500 mb-4">Free Chrome extension</p>
-          <h1 className="text-4xl sm:text-5xl font-semibold tracking-tight leading-tight">
-            Know what you are agreeing to
+          <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full border border-zinc-200 text-[13px] text-zinc-500 mb-6">
+            <Sparkles className="w-3.5 h-3.5 text-zinc-400" />
+            Trained on 9,414 legal clauses
+          </div>
+          <h1 className="text-[42px] sm:text-5xl font-semibold tracking-tight leading-[1.1]">
+            Know what you are<br />agreeing to
           </h1>
-          <p className="mt-5 text-lg text-zinc-500 leading-relaxed">
+          <p className="mt-5 text-[17px] text-zinc-500 leading-relaxed max-w-lg">
             ClauseGuard scans Terms of Service, contracts, and leases for unfair clauses.
-            You get a clear breakdown before you click accept.
+            Get a clear risk score before you click accept.
           </p>
           <div className="mt-8 flex flex-wrap gap-3">
-            <a href="#" className="bg-zinc-900 text-white px-5 py-2.5 rounded-md font-medium text-sm hover:bg-zinc-800">
+            <a href="#" className="inline-flex items-center gap-2 bg-zinc-900 text-white px-5 py-2.5 rounded-lg text-sm font-medium hover:bg-zinc-800 transition-colors">
+              <Download className="w-4 h-4" />
               Add to Chrome
             </a>
-            <Link href="/dashboard-pages/analyze" className="border border-zinc-200 px-5 py-2.5 rounded-md font-medium text-sm hover:border-zinc-300 hover:bg-zinc-50">
-              Try the web scanner
+            <Link href="/dashboard-pages/analyze"
+              className="inline-flex items-center gap-2 border border-zinc-200 px-5 py-2.5 rounded-lg text-sm font-medium hover:bg-zinc-50 transition-colors">
+              Try the scanner
+              <ArrowRight className="w-4 h-4" />
             </Link>
           </div>
+          <p className="mt-4 text-xs text-zinc-400">No account needed for free tier</p>
         </div>
       </section>
 
       {/* What it detects */}
       <section id="features" className="border-t border-zinc-100">
-        <div className="max-w-5xl mx-auto px-6 py-20">
+        <div className="max-w-6xl mx-auto px-5 py-20">
+          <div className="flex items-center gap-2 mb-2">
+            <ShieldCheck className="w-4 h-4 text-zinc-400" />
+            <p className="text-[13px] font-medium text-zinc-400 uppercase tracking-wider">Detection</p>
+          </div>
           <h2 className="text-2xl font-semibold tracking-tight">Eight types of unfair clauses</h2>
-          <p className="mt-2 text-zinc-500 max-w-lg">
-            Based on the CLAUDETTE academic taxonomy used by EU consumer protection researchers.
+          <p className="mt-2 text-zinc-500 text-[15px] max-w-lg">
+            Based on the CLAUDETTE taxonomy — the same framework used by EU consumer protection researchers.
           </p>
-          <div className="mt-10 grid sm:grid-cols-2 lg:grid-cols-4 gap-px bg-zinc-100 border border-zinc-100 rounded-lg overflow-hidden">
-            {CLAUSE_TYPES.map((c) => (
-              <div key={c.name} className="bg-white p-5">
-                <p className="font-medium text-sm">{c.name}</p>
-                <p className="mt-1 text-sm text-zinc-500">{c.desc}</p>
+
+          <div className="mt-10 grid sm:grid-cols-2 lg:grid-cols-4 gap-3">
+            {CLAUSES.map((c) => (
+              <div key={c.name} className="group border border-zinc-100 rounded-xl p-4 hover:border-zinc-200 hover:shadow-sm transition-all cursor-default">
+                <div className={`w-8 h-8 rounded-lg flex items-center justify-center ${sevColor[c.severity]}`}>
+                  <c.icon className="w-4 h-4" />
+                </div>
+                <p className="mt-3 text-sm font-medium">{c.name}</p>
+                <p className="mt-1 text-[13px] text-zinc-500 leading-relaxed">{c.desc}</p>
               </div>
             ))}
           </div>
@@ -86,19 +102,25 @@ export default function Home() {
       </section>
 
       {/* How it works */}
-      <section className="border-t border-zinc-100">
-        <div className="max-w-5xl mx-auto px-6 py-20">
-          <h2 className="text-2xl font-semibold tracking-tight">How it works</h2>
-          <div className="mt-10 grid sm:grid-cols-3 gap-10">
-            {[
-              { step: "1", title: "Install", desc: "Add the Chrome extension. Takes two seconds." },
-              { step: "2", title: "Browse", desc: "Visit any terms page, contract, or lease agreement." },
-              { step: "3", title: "Read the flags", desc: "Unfair clauses are highlighted with severity and explanation." },
-            ].map((s) => (
-              <div key={s.step}>
-                <span className="inline-flex items-center justify-center w-7 h-7 rounded-full bg-zinc-100 text-xs font-semibold text-zinc-600">{s.step}</span>
-                <h3 className="mt-3 font-medium">{s.title}</h3>
-                <p className="mt-1 text-sm text-zinc-500 leading-relaxed">{s.desc}</p>
+      <section className="border-t border-zinc-100 bg-zinc-50/50">
+        <div className="max-w-6xl mx-auto px-5 py-20">
+          <div className="flex items-center gap-2 mb-2">
+            <Zap className="w-4 h-4 text-zinc-400" />
+            <p className="text-[13px] font-medium text-zinc-400 uppercase tracking-wider">How it works</p>
+          </div>
+          <h2 className="text-2xl font-semibold tracking-tight">Three steps, under two seconds</h2>
+
+          <div className="mt-10 grid sm:grid-cols-3 gap-8">
+            {STEPS.map((s, i) => (
+              <div key={s.title} className="relative">
+                <div className="w-10 h-10 rounded-xl bg-white border border-zinc-200 flex items-center justify-center shadow-sm">
+                  <s.icon className="w-5 h-5 text-zinc-600" />
+                </div>
+                <h3 className="mt-4 text-[15px] font-medium">{s.title}</h3>
+                <p className="mt-1.5 text-[13px] text-zinc-500 leading-relaxed">{s.desc}</p>
+                {i < 2 && (
+                  <ChevronRight className="hidden sm:block absolute top-4 -right-5 w-4 h-4 text-zinc-300" />
+                )}
               </div>
             ))}
           </div>
@@ -107,25 +129,36 @@ export default function Home() {
 
       {/* Pricing */}
       <section id="pricing" className="border-t border-zinc-100">
-        <div className="max-w-5xl mx-auto px-6 py-20">
+        <div className="max-w-6xl mx-auto px-5 py-20">
           <h2 className="text-2xl font-semibold tracking-tight">Pricing</h2>
-          <p className="mt-2 text-zinc-500">Free forever. Upgrade if you need more.</p>
-          <div className="mt-10 grid sm:grid-cols-3 gap-6">
+          <p className="mt-2 text-zinc-500 text-[15px]">Free forever. Upgrade when you need more.</p>
+
+          <div className="mt-10 grid sm:grid-cols-3 gap-5 max-w-4xl">
             {PRICING.map((plan) => (
-              <div key={plan.name} className={`rounded-lg p-6 ${plan.highlight ? "border-2 border-zinc-900" : "border border-zinc-200"}`}>
-                <p className="text-sm font-medium text-zinc-500">{plan.name}</p>
-                <p className="mt-2">
-                  <span className="text-3xl font-semibold">{plan.price}</span>
+              <div key={plan.name}
+                className={`rounded-xl p-6 transition-shadow ${
+                  plan.highlight
+                    ? "border-2 border-zinc-900 shadow-sm"
+                    : "border border-zinc-200"
+                }`}>
+                <p className="text-[13px] font-medium text-zinc-400">{plan.name}</p>
+                <p className="mt-2 flex items-baseline gap-1">
+                  <span className="text-3xl font-semibold tracking-tight">{plan.price}</span>
                   <span className="text-sm text-zinc-400">{plan.period}</span>
                 </p>
-                <ul className="mt-5 space-y-2">
+                <ul className="mt-5 space-y-2.5">
                   {plan.features.map((f) => (
-                    <li key={f} className="text-sm text-zinc-600 flex items-start gap-2">
-                      <span className="text-zinc-400 mt-0.5">—</span> {f}
+                    <li key={f} className="flex items-start gap-2.5 text-[13px] text-zinc-600">
+                      <FileCheck className="w-3.5 h-3.5 text-zinc-300 mt-0.5 shrink-0" />
+                      {f}
                     </li>
                   ))}
                 </ul>
-                <button className={`mt-6 w-full py-2 rounded-md text-sm font-medium ${plan.highlight ? "bg-zinc-900 text-white hover:bg-zinc-800" : "border border-zinc-200 hover:bg-zinc-50"}`}>
+                <button className={`mt-6 w-full py-2.5 rounded-lg text-[13px] font-medium transition-colors ${
+                  plan.highlight
+                    ? "bg-zinc-900 text-white hover:bg-zinc-800"
+                    : "border border-zinc-200 text-zinc-700 hover:bg-zinc-50"
+                }`}>
                   {plan.cta}
                 </button>
               </div>
@@ -134,11 +167,31 @@ export default function Home() {
         </div>
       </section>
 
+      {/* CTA */}
+      <section className="border-t border-zinc-100 bg-zinc-50/50">
+        <div className="max-w-6xl mx-auto px-5 py-16 text-center">
+          <Lock className="w-6 h-6 text-zinc-300 mx-auto mb-4" />
+          <h2 className="text-2xl font-semibold tracking-tight">Read the fine print without reading it</h2>
+          <p className="mt-2 text-[15px] text-zinc-500 max-w-md mx-auto">
+            Join thousands protecting themselves before clicking accept.
+          </p>
+          <div className="mt-6">
+            <a href="#" className="inline-flex items-center gap-2 bg-zinc-900 text-white px-6 py-3 rounded-lg text-sm font-medium hover:bg-zinc-800 transition-colors">
+              <Download className="w-4 h-4" />
+              Add to Chrome — free
+            </a>
+          </div>
+        </div>
+      </section>
+
       {/* Footer */}
       <footer className="border-t border-zinc-100">
-        <div className="max-w-5xl mx-auto px-6 py-8 flex flex-col sm:flex-row justify-between items-center gap-4">
-          <span className="text-sm text-zinc-400">ClauseGuard — not legal advice</span>
-          <div className="flex gap-5 text-sm text-zinc-400">
+        <div className="max-w-6xl mx-auto px-5 py-8 flex flex-col sm:flex-row justify-between items-center gap-4">
+          <div className="flex items-center gap-2">
+            <ShieldCheck className="w-4 h-4 text-zinc-300" />
+            <span className="text-[13px] text-zinc-400">ClauseGuard — not legal advice</span>
+          </div>
+          <div className="flex gap-5 text-[13px] text-zinc-400">
             <a href="/privacy" className="hover:text-zinc-600">Privacy</a>
             <a href="/terms" className="hover:text-zinc-600">Terms</a>
             <a href="mailto:hello@clauseguard.com" className="hover:text-zinc-600">Contact</a>

web/components/nav.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { ShieldCheck, Menu, X } from "lucide-react";
+import { useState } from "react";
+
+const links = [
+  { href: "/#features", label: "Features" },
+  { href: "/#pricing", label: "Pricing" },
+  { href: "/dashboard-pages/analyze", label: "Scanner" },
+];
+
+export function Nav() {
+  const [open, setOpen] = useState(false);
+  const pathname = usePathname();
+  const isDashboard = pathname?.startsWith("/dashboard");
+
+  return (
+    <nav className="sticky top-0 z-50 bg-white/80 backdrop-blur-md border-b border-zinc-100">
+      <div className="max-w-6xl mx-auto px-5 h-14 flex items-center justify-between">
+        <Link href="/" className="flex items-center gap-2">
+          <ShieldCheck className="w-5 h-5 text-zinc-900" strokeWidth={2.2} />
+          <span className="font-semibold text-[15px] tracking-tight text-zinc-900">ClauseGuard</span>
+        </Link>
+
+        {/* Desktop */}
+        <div className="hidden md:flex items-center gap-1">
+          {links.map((l) => (
+            <a key={l.href} href={l.href}
+              className="px-3 py-1.5 text-[13px] text-zinc-500 hover:text-zinc-900 rounded-md hover:bg-zinc-50 transition-colors">
+              {l.label}
+            </a>
+          ))}
+          <div className="w-px h-4 bg-zinc-200 mx-2" />
+          {isDashboard ? (
+            <Link href="/dashboard-pages/settings"
+              className="px-3 py-1.5 text-[13px] text-zinc-500 hover:text-zinc-900 rounded-md hover:bg-zinc-50">
+              Settings
+            </Link>
+          ) : (
+            <Link href="/auth/login"
+              className="px-3 py-1.5 text-[13px] text-zinc-500 hover:text-zinc-900 rounded-md hover:bg-zinc-50">
+              Log in
+            </Link>
+          )}
+          <Link href={isDashboard ? "/dashboard-pages/analyze" : "/auth/signup"}
+            className="ml-1 px-3.5 py-1.5 text-[13px] font-medium text-white bg-zinc-900 rounded-md hover:bg-zinc-800 transition-colors">
+            {isDashboard ? "New scan" : "Get started"}
+          </Link>
+        </div>
+
+        {/* Mobile toggle */}
+        <button className="md:hidden p-1.5 rounded-md hover:bg-zinc-100" onClick={() => setOpen(!open)}>
+          {open ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
+        </button>
+      </div>
+
+      {/* Mobile menu */}
+      {open && (
+        <div className="md:hidden border-t border-zinc-100 bg-white px-5 py-3 space-y-1">
+          {links.map((l) => (
+            <a key={l.href} href={l.href} onClick={() => setOpen(false)}
+              className="block px-3 py-2 text-sm text-zinc-600 rounded-md hover:bg-zinc-50">
+              {l.label}
+            </a>
+          ))}
+          <Link href="/auth/login" onClick={() => setOpen(false)}
+            className="block px-3 py-2 text-sm text-zinc-600 rounded-md hover:bg-zinc-50">Log in</Link>
+        </div>
+      )}
+    </nav>
+  );
+}