v2: Fix all versions + minimal UI redesign (no gradients, clean layout)

README.md

@@ -1,63 +1,11 @@
 ---
 title: ClauseGuard
 emoji: 🛡️
-colorFrom: indigo
-colorTo: red
+colorFrom: gray
+colorTo: gray
 sdk: gradio
 sdk_version: "5.23.0"
 python_version: "3.12"
 app_file: app.py
 pinned: false
 ---
-
-# 🛡️ ClauseGuard — AI Fine Print Scanner
-
-> Stop signing away your rights. ClauseGuard uses AI to scan Terms of Service, contracts, and legal documents for unfair clauses — instantly.
-
-## What It Does
-
-ClauseGuard detects **8 types of unfair clauses** based on the CLAUDETTE academic taxonomy:
-
-| # | Category | Risk | What It Means |
-|---|----------|------|---------------|
-| 1 | ⚖️ Arbitration | 🔴 HIGH | Forces binding arbitration, waives right to sue |
-| 2 | 🛡️ Limitation of Liability | 🔴 HIGH | Excludes liability for losses/damages |
-| 3 | 🚫 Unilateral Termination | 🔴 HIGH | Can terminate your account anytime |
-| 4 | 🔄 Unilateral Change | 🟠 MEDIUM | Can modify terms without consent |
-| 5 | 🗑️ Content Removal | 🟠 MEDIUM | Can delete your content without notice |
-| 6 | 🌍 Jurisdiction | 🟠 MEDIUM | Disputes resolved in their preferred court |
-| 7 | 📜 Choice of Law | 🟠 MEDIUM | Governed by law of a different country |
-| 8 | 👆 Contract by Using | 🟡 LOW | Bound by using the service (dark pattern) |
-
-## Tech Stack
-
-| Layer | Technology | Version |
-|-------|-----------|---------|
-| Extension | Chrome Manifest V3 | Latest |
-| Frontend | Next.js 15.3 + Tailwind CSS 4 | April 2026 |
-| Auth | Supabase SSR | 0.6.x |
-| Database | Supabase (PostgreSQL + RLS) | Latest |
-| Payments | Stripe Subscriptions | API 2025-03-31 |
-| ML (classify) | Legal-BERT → ONNX | Transformers 5.6.x |
-| ML (explain) | SaulLM-7B-Instruct | MIT License |
-| API | FastAPI + Uvicorn | 0.115.x |
-
-## ML Model Details
-
-- **Base Model**: `nlpaueb/legal-bert-base-uncased` — BERT pre-trained on 12GB legal text
-- **Dataset**: `coastalcph/lex_glue` (unfair_tos) — 9,414 clauses, 8 categories
-- **Task**: Multi-label classification with BCEWithLogitsLoss
-- **Expected Results**: ~83% macro-F1, ~95% micro-F1
-
-### Papers
-- [CLAUDETTE](https://arxiv.org/abs/1805.01217) — unfair clause taxonomy
-- [LexGLUE](https://arxiv.org/abs/2110.00976) — legal NLU benchmark
-- [SaulLM-7B](https://arxiv.org/abs/2403.03883) — legal domain LLM
-
-## License
-
-MIT License. Not legal advice — always consult a qualified attorney.
-
-## Built By
-
-[@gaurv007](https://huggingface.co/gaurv007)

api/requirements.txt

@@ -1,7 +1,7 @@
-fastapi>=0.115.0
-uvicorn[standard]>=0.32.0
-pydantic>=2.10.0
-transformers>=4.47.0
+fastapi==0.136.0
+uvicorn[standard]==0.46.0
+pydantic==2.13.3
+transformers==5.6.1
 optimum[onnxruntime]>=1.24.0
 numpy>=2.0.0
 python-jose[cryptography]>=3.3.0

app.py

@@ -1,243 +1,159 @@
 """
-ClauseGuard — AI Fine Print Scanner (MVP Demo)
-Scans Terms of Service / contracts and highlights unfair clauses.
-Uses Legal-BERT fine-tuned on CLAUDETTE/LexGLUE unfair_tos dataset.
+ClauseGuard — AI Fine Print Scanner
 """
 
 import gradio as gr
 import re
 
-# ─── 8 Unfair Clause Categories (CLAUDETTE taxonomy) ───
-LABEL_MAP = {
-    0: {"name": "Arbitration", "icon": "⚖️", "color": "#ef4444",
-        "desc": "Forces disputes to arbitration instead of court — you waive your right to sue."},
-    1: {"name": "Unilateral Change", "icon": "🔄", "color": "#f97316",
-        "desc": "Company can change terms at any time without your consent."},
-    2: {"name": "Content Removal", "icon": "🗑️", "color": "#eab308",
-        "desc": "Company can delete your content without notice or justification."},
-    3: {"name": "Jurisdiction", "icon": "🌍", "color": "#a855f7",
-        "desc": "Disputes must be resolved in a jurisdiction that may disadvantage you."},
-    4: {"name": "Choice of Law", "icon": "📜", "color": "#6366f1",
-        "desc": "Governing law may differ from your country — reducing your legal protections."},
-    5: {"name": "Limitation of Liability", "icon": "🛡️", "color": "#ef4444",
-        "desc": "Company limits or excludes liability for losses, data breaches, or service failures."},
-    6: {"name": "Unilateral Termination", "icon": "🚫", "color": "#dc2626",
-        "desc": "Company can terminate your account at any time without reason."},
-    7: {"name": "Contract by Using", "icon": "👆", "color": "#f59e0b",
-        "desc": "You're bound to the contract simply by using the service — a dark pattern."},
+NUM_LABELS = 8
+LABELS = [
+    ("Limitation of liability", "HIGH", "Company avoids responsibility for damages or losses."),
+    ("Unilateral termination", "HIGH", "They can close your account without reason."),
+    ("Unilateral change", "MEDIUM", "Terms can change without your consent."),
+    ("Content removal", "MEDIUM", "Your content can be deleted without notice."),
+    ("Contract by using", "LOW", "You agree just by visiting or using the site."),
+    ("Choice of law", "MEDIUM", "Foreign law applies instead of your local protections."),
+    ("Jurisdiction", "MEDIUM", "Disputes handled in their preferred court, not yours."),
+    ("Arbitration", "HIGH", "You waive your right to sue in court."),
+]
+
+PATTERNS = {
+    0: [r"not liable", r"shall not be (liable|responsible)", r"in no event.*liable", r"limitation of liability", r"without warranty", r"disclaim"],
+    1: [r"terminat.*at any time", r"suspend.*account.*without", r"we may (terminat|suspend|discontinu)", r"right to (terminat|suspend)"],
+    2: [r"sole discretion", r"reserves? the right to (modify|change|update|amend)", r"at any time.*without (prior )?notice", r"we may (modify|change|update)"],
+    3: [r"remove.*content.*without", r"right to remove", r"we may.*remove"],
+    4: [r"by (using|accessing).*you agree", r"continued use.*constitutes? acceptance"],
+    5: [r"governed by.*laws? of", r"shall be governed", r"laws of the state of"],
+    6: [r"exclusive jurisdiction", r"courts? of.*(california|delaware|new york|ireland|england)", r"submit to.*jurisdiction"],
+    7: [r"arbitrat", r"binding arbitration", r"waive.*right.*court", r"class action waiver"],
 }
 
-HIGH_RISK = {"Arbitration", "Limitation of Liability", "Unilateral Termination"}
-MEDIUM_RISK = {"Unilateral Change", "Content Removal", "Jurisdiction", "Choice of Law"}
-LOW_RISK = {"Contract by Using"}
-
-CLAUSE_PATTERNS = {
-    0: [r"arbitrat", r"binding arbitration", r"waive.*right.*court", r"class action waiver"],
-    1: [r"sole discretion", r"reserves? the right to (modify|change|update|amend)", 
-        r"at any time.*without (prior )?notice", r"we may (modify|change|update)"],
-    2: [r"remove.*content.*without", r"delete.*account.*content", r"right to remove",
-        r"we may.*remove.*any (content|material)"],
-    3: [r"exclusive jurisdiction", r"courts? of.*(?:california|delaware|new york|ireland|england)",
-        r"venue.*shall be", r"submit to.*jurisdiction"],
-    4: [r"governed by.*laws? of", r"choice of law", r"shall be governed",
-        r"laws of the state of"],
-    5: [r"not liable", r"no liability", r"shall not be (liable|responsible)",
-        r"in no event.*liable", r"limitation of liability", r"disclaim.*warrant",
-        r"as[- ]is", r"without warranty"],
-    6: [r"terminat.*at any time", r"suspend.*account.*without", r"right to (terminat|suspend)",
-        r"we may (terminat|suspend|discontinu)"],
-    7: [r"by (using|accessing).*you agree", r"continued use.*constitutes? acceptance",
-        r"by using.*service.*bound", r"your use.*constitutes"],
-}
-
-def split_into_clauses(text):
+def split_clauses(text):
     text = re.sub(r'\n{2,}', '\n', text.strip())
-    clauses = re.split(r'(?<=[.!?])\s+(?=[A-Z0-9(])|(?:\n)(?=\d+[\.\)]|\([a-z]\)|\•|\-\s)', text)
-    return [c.strip() for c in clauses if len(c.strip()) > 30]
-
-def analyze_clause(clause):
-    findings = []
-    clause_lower = clause.lower()
-    for label_id, patterns in CLAUSE_PATTERNS.items():
-        for pattern in patterns:
-            if re.search(pattern, clause_lower):
-                info = LABEL_MAP[label_id]
-                name = info["name"]
-                severity = "HIGH" if name in HIGH_RISK else "MEDIUM" if name in MEDIUM_RISK else "LOW"
-                findings.append({"category": name, "icon": info["icon"], "color": info["color"],
-                                 "description": info["desc"], "severity": severity})
-                break
-    return findings
-
-def generate_report(text):
-    if not text or len(text.strip()) < 50:
-        return "⚠️ Please paste a Terms of Service or contract text (at least a few sentences).", "", ""
-    clauses = split_into_clauses(text)
-    if not clauses:
-        return "⚠️ Could not extract clauses. Try pasting a longer text.", "", ""
-    
-    total_clauses = len(clauses)
-    flagged_clauses = []
-    severity_counts = {"HIGH": 0, "MEDIUM": 0, "LOW": 0}
-    
-    for clause in clauses:
-        findings = analyze_clause(clause)
-        if findings:
-            flagged_clauses.append({"text": clause, "findings": findings})
-            for f in findings:
-                severity_counts[f["severity"]] += 1
-    
-    risk_score = min(100, int(
-        (severity_counts["HIGH"] * 20 + severity_counts["MEDIUM"] * 10 + severity_counts["LOW"] * 5)
-        / max(1, total_clauses) * 100
-    ))
-    
-    if risk_score >= 60: grade, grade_emoji = "F — DANGEROUS", "🔴"
-    elif risk_score >= 40: grade, grade_emoji = "D — RISKY", "🟠"
-    elif risk_score >= 20: grade, grade_emoji = "C — CAUTION", "🟡"
-    elif risk_score >= 10: grade, grade_emoji = "B — MOSTLY FAIR", "🟢"
-    else: grade, grade_emoji = "A — FAIR", "✅"
-    
-    highlighted_text = text
-    for item in flagged_clauses:
-        sev = max(item["findings"], key=lambda f: {"HIGH":3,"MEDIUM":2,"LOW":1}[f["severity"]])["severity"]
-        color_map = {"HIGH": "#fecaca", "MEDIUM": "#fed7aa", "LOW": "#fef3c7"}
-        border_map = {"HIGH": "#ef4444", "MEDIUM": "#f97316", "LOW": "#eab308"}
-        replacement = f'<span style="background:{color_map[sev]}; border-left:3px solid {border_map[sev]}; padding:2px 4px; border-radius:3px; display:inline;" title="{", ".join(f["category"] for f in item["findings"])}">{item["text"]}</span>'
-        highlighted_text = highlighted_text.replace(item["text"], replacement, 1)
-    
-    summary_html = f"""
-    <div style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;">
-        <div style="background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%); border-radius:16px; padding:28px; color:white; margin-bottom:20px;">
-            <div style="display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;">
-                <div>
-                    <h2 style="margin:0; font-size:24px;">🛡️ ClauseGuard Analysis</h2>
-                    <p style="margin:4px 0 0; opacity:0.8; font-size:14px;">{total_clauses} clauses scanned · {len(flagged_clauses)} flagged</p>
-                </div>
-                <div style="text-align:center;">
-                    <div style="font-size:48px; font-weight:800; line-height:1;">{risk_score}</div>
-                    <div style="font-size:12px; opacity:0.7;">RISK SCORE</div>
-                </div>
-            </div>
-            <div style="margin-top:16px; padding:12px 16px; background:rgba(255,255,255,0.1); border-radius:10px; display:flex; align-items:center; gap:10px;">
-                <span style="font-size:24px;">{grade_emoji}</span>
-                <span style="font-size:18px; font-weight:600;">Grade: {grade}</span>
-            </div>
-        </div>
-        <div style="display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; margin-bottom:20px;">
-            <div style="background:#fef2f2; border:1px solid #fecaca; border-radius:10px; padding:14px; text-align:center;">
-                <div style="font-size:28px; font-weight:700; color:#dc2626;">{severity_counts['HIGH']}</div>
-                <div style="font-size:12px; color:#991b1b;">🔴 HIGH RISK</div>
-            </div>
-            <div style="background:#fff7ed; border:1px solid #fed7aa; border-radius:10px; padding:14px; text-align:center;">
-                <div style="font-size:28px; font-weight:700; color:#ea580c;">{severity_counts['MEDIUM']}</div>
-                <div style="font-size:12px; color:#9a3412;">🟠 MEDIUM</div>
-            </div>
-            <div style="background:#fefce8; border:1px solid #fde68a; border-radius:10px; padding:14px; text-align:center;">
-                <div style="font-size:28px; font-weight:700; color:#ca8a04;">{severity_counts['LOW']}</div>
-                <div style="font-size:12px; color:#854d0e;">🟡 LOW</div>
-            </div>
-        </div>
-    </div>"""
-    
-    findings_html = '<div style="font-family: -apple-system, BlinkMacSystemFont, sans-serif;">'
-    if not flagged_clauses:
-        findings_html += '<div style="background:#f0fdf4; border:1px solid #86efac; border-radius:12px; padding:24px; text-align:center;"><div style="font-size:48px;">✅</div><h3 style="color:#166534; margin:8px 0;">No Unfair Clauses Detected</h3><p style="color:#15803d; font-size:14px;">This document appears to be fair. Always read carefully though!</p></div>'
-    else:
-        for i, item in enumerate(flagged_clauses, 1):
-            sev = max(item["findings"], key=lambda f: {"HIGH":3,"MEDIUM":2,"LOW":1}[f["severity"]])["severity"]
-            bg_map = {"HIGH": "#fef2f2", "MEDIUM": "#fff7ed", "LOW": "#fefce8"}
-            border_map = {"HIGH": "#fca5a5", "MEDIUM": "#fdba74", "LOW": "#fde68a"}
-            categories_html = ""
-            for f in item["findings"]:
-                sev_bg = '#fecaca' if f['severity']=='HIGH' else '#fed7aa' if f['severity']=='MEDIUM' else '#fef3c7'
-                sev_color = '#991b1b' if f['severity']=='HIGH' else '#9a3412' if f['severity']=='MEDIUM' else '#854d0e'
-                categories_html += f'<div style="background:white; border-radius:8px; padding:10px 14px; margin-top:8px; border-left:3px solid {f["color"]};"><div style="font-weight:600; font-size:13px;">{f["icon"]} {f["category"]} <span style="background:{sev_bg}; color:{sev_color}; padding:1px 8px; border-radius:999px; font-size:11px; font-weight:500;">{f["severity"]}</span></div><div style="font-size:12px; color:#6b7280; margin-top:4px;">{f["description"]}</div></div>'
-            clause_preview = item["text"][:200] + ("..." if len(item["text"]) > 200 else "")
-            findings_html += f'<div style="background:{bg_map[sev]}; border:1px solid {border_map[sev]}; border-radius:12px; padding:16px; margin-bottom:12px;"><div style="font-size:12px; color:#6b7280; font-weight:500;">CLAUSE #{i}</div><div style="font-size:14px; color:#1f2937; margin:8px 0; font-style:italic; line-height:1.5;">"{clause_preview}"</div>{categories_html}</div>'
-    findings_html += "</div>"
-    return summary_html, findings_html, highlighted_text
-
-EXAMPLE_SPOTIFY = """By using the Spotify Service, you agree to be bound by these Terms of Use. If you don't agree with these Terms, then please don't use the Service.
+    parts = re.split(r'(?<=[.!?])\s+(?=[A-Z0-9(])|(?:\n)(?=\d+[.)]\s|\([a-z]\)\s)', text)
+    return [c.strip() for c in parts if len(c.strip()) > 30]
 
-Spotify may, in its sole discretion, modify or update these Terms of Service at any time without prior notice. Your continued use of the Service after any such changes constitutes your acceptance of the new Terms of Service.
+def analyze(text):
+    if not text or len(text.strip()) < 50:
+        return "", ""
 
-In no event will Spotify, its officers, shareholders, employees, agents, directors, subsidiaries, affiliates, successors, assigns, suppliers, or licensors be liable for any indirect, incidental, special, consequential, or punitive damages, or any loss of profits or revenues, whether incurred directly or indirectly.
+    clauses = split_clauses(text)
+    if not clauses:
+        return "", ""
 
-Spotify reserves the right to remove or disable access to any User Content for any reason, including User Content that Spotify believes violates these Terms, without prior notice.
+    flagged = []
+    sev_counts = {"HIGH": 0, "MEDIUM": 0, "LOW": 0}
 
-Spotify may terminate your account or suspend your access to all or part of the Service at any time, with or without cause, with or without notice, effective immediately.
+    for clause in clauses:
+        clause_lower = clause.lower()
+        hits = []
+        for lid, pats in PATTERNS.items():
+            for p in pats:
+                if re.search(p, clause_lower):
+                    name, sev, desc = LABELS[lid]
+                    hits.append({"name": name, "severity": sev, "desc": desc})
+                    sev_counts[sev] += 1
+                    break
+        if hits:
+            flagged.append({"text": clause, "hits": hits})
+
+    total = len(clauses)
+    risk = min(100, round((sev_counts["HIGH"] * 20 + sev_counts["MEDIUM"] * 10 + sev_counts["LOW"] * 5) / max(1, total) * 100))
+
+    if risk >= 60: grade = "F"
+    elif risk >= 40: grade = "D"
+    elif risk >= 20: grade = "C"
+    elif risk >= 10: grade = "B"
+    else: grade = "A"
+
+    # Summary
+    summary = f"""<div style="font-family:system-ui,sans-serif;">
+  <div style="border:1px solid #e4e4e7;border-radius:8px;padding:20px;margin-bottom:16px;">
+    <div style="display:flex;justify-content:space-between;align-items:baseline;">
+      <div>
+        <span style="font-size:32px;font-weight:600;">{risk}</span>
+        <span style="font-size:13px;color:#a1a1aa;">/100 risk</span>
+      </div>
+      <span style="font-size:13px;font-weight:500;padding:2px 10px;border-radius:4px;{
+        'background:#fef2f2;color:#b91c1c;' if grade in ('F','D') else
+        'background:#fffbeb;color:#a16207;' if grade == 'C' else
+        'background:#f0fdf4;color:#15803d;'
+      }">Grade {grade}</span>
+    </div>
+    <p style="margin-top:8px;font-size:12px;color:#a1a1aa;">{total} clauses scanned · {len(flagged)} flagged · {sev_counts['HIGH']} high · {sev_counts['MEDIUM']} medium · {sev_counts['LOW']} low</p>
+  </div>"""
+
+    if not flagged:
+        summary += '<div style="border:1px solid #e4e4e7;border-radius:8px;padding:24px;text-align:center;"><p style="font-size:14px;color:#71717a;">No unfair clauses found.</p></div>'
+    else:
+        for i, item in enumerate(flagged):
+            max_sev = max(item["hits"], key=lambda h: {"HIGH":3,"MEDIUM":2,"LOW":1}[h["severity"]])["severity"]
+            border_color = {"HIGH":"#fca5a5","MEDIUM":"#fcd34d","LOW":"#93c5fd"}[max_sev]
 
-These Terms will be governed by and construed in accordance with the laws of the State of New York, without giving effect to any principles of conflicts of law.
+            tags = ""
+            for h in item["hits"]:
+                tag_style = {"HIGH":"background:#fef2f2;color:#b91c1c;border:1px solid #fecaca;",
+                             "MEDIUM":"background:#fffbeb;color:#a16207;border:1px solid #fde68a;",
+                             "LOW":"background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe;"}[h["severity"]]
+                tags += f'<span style="{tag_style}font-size:11px;font-weight:500;padding:1px 8px;border-radius:3px;margin-right:4px;">{h["name"]}</span>'
 
-Any dispute arising from or relating to the subject matter of these Terms shall be finally settled by arbitration in New York County, New York, using the English language in accordance with the Arbitration Rules and Procedures of JAMS then in effect.
+            descs = "".join(f'<p style="font-size:12px;color:#71717a;margin-top:4px;">{h["desc"]}</p>' for h in item["hits"])
+            preview = item["text"][:180] + ("..." if len(item["text"]) > 180 else "")
 
-You and Spotify agree that any dispute resolution proceedings will be conducted only on an individual basis and not in a class, consolidated, or representative action."""
+            summary += f'''<div style="border:1px solid #e4e4e7;border-left:3px solid {border_color};border-radius:8px;padding:14px;margin-bottom:8px;">
+    <p style="font-size:13px;color:#3f3f46;line-height:1.6;">{preview}</p>
+    <div style="margin-top:8px;">{tags}</div>
+    {descs}
+  </div>'''
 
-EXAMPLE_AIRBNB = """By accessing or using the Airbnb Platform, you agree to comply with and be bound by these Terms of Service.
+    summary += "</div>"
+    return summary, ""
 
-Airbnb may, at its discretion, modify these Terms at any time. We will post the revised Terms on the Airbnb Platform. Your continued access to or use of the Airbnb Platform after such posting constitutes your consent to be bound by the modified Terms.
+SPOTIFY = """By using the Spotify Service, you agree to be bound by these Terms of Use.
 
-Airbnb may, without prior notice, remove or take down any Content that, in Airbnb's sole judgment, violates these Terms or Airbnb's Content Policy, or is otherwise objectionable.
+Spotify may, in its sole discretion, modify or update these Terms of Service at any time without prior notice. Your continued use of the Service after any such changes constitutes your acceptance of the new Terms of Service.
 
-To the maximum extent permitted by law, Airbnb shall not be liable for any incidental, special, exemplary or consequential damages. Airbnb's total liability arising out of or in connection with these terms shall not exceed the amounts paid by you to Airbnb during the twelve month period prior to the event.
+In no event will Spotify be liable for any indirect, incidental, special, consequential, or punitive damages, or any loss of profits or revenues, whether incurred directly or indirectly.
 
-Airbnb may immediately, without notice, terminate your account if Airbnb believes, in its sole discretion, that you have breached these Terms or otherwise violated the rights of Airbnb.
+Spotify reserves the right to remove or disable access to any User Content for any reason, without prior notice.
 
-These Terms are governed by and construed in accordance with the laws of Ireland, without regard to conflict of law provisions. You and Airbnb agree to submit to the exclusive jurisdiction of the courts located in Ireland."""
+Spotify may terminate your account or suspend your access at any time, with or without cause, with or without notice, effective immediately.
 
-EXAMPLE_RENTAL = """This Lease Agreement is entered into as of the date signed below. By signing this agreement, the Tenant agrees to all terms and conditions set forth herein.
+These Terms will be governed by and construed in accordance with the laws of the State of New York.
 
-The Landlord reserves the right to enter the premises at any time without prior notice for inspection, repair, or any other purpose deemed necessary by the Landlord in their sole discretion.
+Any dispute shall be finally settled by arbitration in New York County."""
 
-The Tenant shall be responsible for all repairs and maintenance of the premises, including but not limited to plumbing, electrical, and structural issues, regardless of cause.
+RENTAL = """The Landlord reserves the right to enter the premises at any time without prior notice for inspection or any other purpose deemed necessary in their sole discretion.
 
 The Landlord shall not be liable for any damage to the Tenant's personal property, whether caused by water leaks, fire, theft, or any other cause, including the Landlord's own negligence.
 
-The Landlord may terminate this lease at any time with only 7 days written notice, for any reason or no reason at all. The Tenant may not terminate this lease before the end of the lease term without paying a termination fee equal to 3 months' rent.
+The Landlord may terminate this lease at any time with only 7 days written notice, for any reason or no reason at all.
 
 Any disputes arising from this lease agreement shall be resolved exclusively in the courts of the Landlord's choosing, and the Tenant waives the right to a jury trial.
 
-The Landlord reserves the right to modify the terms of this lease at any time. Continued occupancy of the premises after such modification constitutes acceptance of the new terms.
-
-The security deposit may be retained by the Landlord for any reason, including but not limited to cleaning, repairs, and unpaid rent, at the Landlord's sole discretion."""
+The Landlord reserves the right to modify the terms of this lease at any time. Continued occupancy constitutes acceptance of the new terms."""
 
-demo = gr.Blocks(title="ClauseGuard — AI Fine Print Scanner")
+demo = gr.Blocks(title="ClauseGuard")
 
 with demo:
-    gr.HTML("""
-    <div style="text-align:center; padding:20px 0;">
-        <h1 style="font-size:2.5rem; margin:0;">🛡️ ClauseGuard</h1>
-        <p style="color:#6b7280; font-size:1.1rem;">AI-Powered Fine Print Scanner — Stop Signing Away Your Rights</p>
-        <p style="font-size:0.85rem; color:#9ca3af; margin-top:4px;">
-            Analyzes 8 types of unfair clauses: Arbitration · Unilateral Change · Content Removal · 
-            Jurisdiction · Choice of Law · Liability Limits · Unilateral Termination · Dark Patterns
-        </p>
-    </div>""")
-    
+    gr.HTML('<div style="font-family:system-ui,sans-serif;padding:16px 0;"><h1 style="font-size:20px;font-weight:600;margin:0;">ClauseGuard</h1><p style="font-size:13px;color:#a1a1aa;margin-top:2px;">Paste a Terms of Service, contract, or lease. Get a risk breakdown.</p></div>')
+
     with gr.Row():
         with gr.Column(scale=1):
-            text_input = gr.Textbox(label="📋 Paste Terms of Service / Contract / Lease Agreement",
-                placeholder="Paste any legal document here...\n\nTry one of the examples below 👇", lines=18, max_lines=50)
+            text_input = gr.Textbox(label="Document text", placeholder="Paste here...", lines=14, max_lines=40)
             with gr.Row():
-                scan_btn = gr.Button("🔍 Scan for Red Flags", variant="primary", size="lg")
-                clear_btn = gr.Button("🗑️ Clear", variant="secondary", size="lg")
-            gr.Examples(examples=[[EXAMPLE_SPOTIFY],[EXAMPLE_AIRBNB],[EXAMPLE_RENTAL]],
-                inputs=[text_input], label="📌 Try These Examples", examples_per_page=3)
+                scan_btn = gr.Button("Scan", variant="primary")
+                clear_btn = gr.Button("Clear", variant="secondary")
+            gr.Examples(examples=[[SPOTIFY], [RENTAL]], inputs=[text_input], label="Examples")
+
         with gr.Column(scale=1):
-            summary_output = gr.HTML(label="Summary")
-            findings_output = gr.HTML(label="Detailed Findings")
-    
-    with gr.Accordion("📖 Highlighted Document (red = flagged clauses)", open=False):
-        highlighted_output = gr.HTML()
-    
-    scan_btn.click(fn=generate_report, inputs=[text_input], outputs=[summary_output, findings_output, highlighted_output])
-    clear_btn.click(fn=lambda: ("", "", "", ""), outputs=[text_input, summary_output, findings_output, highlighted_output])
-    
-    gr.HTML("""<div style="text-align:center; padding:20px; color:#9ca3af; font-size:13px; border-top:1px solid #e5e7eb; margin-top:20px;">
-        <p><strong>⚠️ Disclaimer:</strong> ClauseGuard provides informational analysis only. Not legal advice. Always consult a qualified attorney.</p>
-        <p>Built with ❤️ using CLAUDETTE taxonomy · <a href="https://huggingface.co/datasets/coastalcph/lex_glue" target="_blank">LexGLUE Dataset</a></p>
-    </div>""")
+            results_html = gr.HTML(label="Results")
+            hidden = gr.HTML(visible=False)
+
+    scan_btn.click(fn=analyze, inputs=[text_input], outputs=[results_html, hidden])
+    clear_btn.click(fn=lambda: ("", "", ""), outputs=[text_input, results_html, hidden])
+
+    gr.HTML('<p style="font-family:system-ui,sans-serif;font-size:11px;color:#a1a1aa;text-align:center;padding:16px 0;border-top:1px solid #f4f4f5;margin-top:16px;">Not legal advice. Based on CLAUDETTE taxonomy. <a href="https://huggingface.co/datasets/coastalcph/lex_glue" style="color:#71717a;">Dataset</a></p>')
 
 if __name__ == "__main__":
     demo.launch()

ml/requirements.txt

@@ -1,7 +1,6 @@
-transformers>=4.47.0
+transformers==5.6.1
 datasets>=3.2.0
 torch>=2.5.0
 scikit-learn>=1.6.0
 accelerate>=1.2.0
 optimum[onnxruntime]>=1.24.0
-evaluate>=0.4.0

web/app/auth/login/page.tsx

@@ -9,105 +9,61 @@ export default function LoginPage() {
   const [password, setPassword] = useState("");
   const [error, setError] = useState("");
   const [loading, setLoading] = useState(false);
-
   const supabase = createClient();
 
   async function handleLogin(e: React.FormEvent) {
-    e.preventDefault();
-    setLoading(true);
-    setError("");
-
+    e.preventDefault(); setLoading(true); setError("");
     const { error } = await supabase.auth.signInWithPassword({ email, password });
-
-    if (error) {
-      setError(error.message);
-      setLoading(false);
-    } else {
-      window.location.href = "/dashboard-pages/dashboard";
-    }
+    if (error) { setError(error.message); setLoading(false); }
+    else { window.location.href = "/dashboard-pages/dashboard"; }
   }
 
   async function handleOAuth(provider: "google" | "github") {
     await supabase.auth.signInWithOAuth({
-      provider,
-      options: { redirectTo: `${window.location.origin}/auth/callback` },
+      provider, options: { redirectTo: `${window.location.origin}/auth/callback` },
     });
   }
 
   return (
-    <div className="min-h-screen flex items-center justify-center bg-gray-50 px-4">
-      <div className="w-full max-w-md">
-        <div className="text-center mb-8">
-          <Link href="/" className="inline-flex items-center gap-2 text-2xl font-bold text-gray-900">
-            <span>🛡️</span> ClauseGuard
-          </Link>
-          <p className="mt-2 text-gray-600">Welcome back</p>
+    <div className="min-h-screen flex items-center justify-center bg-white px-4">
+      <div className="w-full max-w-sm">
+        <div className="mb-8">
+          <Link href="/" className="text-sm text-zinc-400 hover:text-zinc-600">← Back</Link>
+          <h1 className="mt-4 text-xl font-semibold">Sign in</h1>
         </div>
 
-        <div className="bg-white rounded-2xl shadow-sm border border-gray-200 p-8">
-          {/* OAuth */}
-          <div className="space-y-3">
-            <button
-              onClick={() => handleOAuth("google")}
-              className="w-full flex items-center justify-center gap-3 px-4 py-3 border border-gray-300 rounded-xl hover:bg-gray-50 transition font-medium text-sm"
-            >
-              <svg className="w-5 h-5" viewBox="0 0 24 24"><path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 01-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z"/><path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/><path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/><path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/></svg>
-              Continue with Google
-            </button>
-            <button
-              onClick={() => handleOAuth("github")}
-              className="w-full flex items-center justify-center gap-3 px-4 py-3 border border-gray-300 rounded-xl hover:bg-gray-50 transition font-medium text-sm"
-            >
-              <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/></svg>
-              Continue with GitHub
-            </button>
-          </div>
+        <div className="space-y-2.5">
+          <button onClick={() => handleOAuth("google")}
+            className="w-full flex items-center justify-center gap-2 px-4 py-2.5 border border-zinc-200 rounded-md text-sm hover:bg-zinc-50">
+            Continue with Google
+          </button>
+          <button onClick={() => handleOAuth("github")}
+            className="w-full flex items-center justify-center gap-2 px-4 py-2.5 border border-zinc-200 rounded-md text-sm hover:bg-zinc-50">
+            Continue with GitHub
+          </button>
+        </div>
 
-          <div className="flex items-center gap-4 my-6">
-            <div className="flex-1 h-px bg-gray-200" />
-            <span className="text-sm text-gray-400">or</span>
-            <div className="flex-1 h-px bg-gray-200" />
-          </div>
+        <div className="flex items-center gap-3 my-6">
+          <div className="flex-1 h-px bg-zinc-100" />
+          <span className="text-xs text-zinc-300">or</span>
+          <div className="flex-1 h-px bg-zinc-100" />
+        </div>
 
-          {/* Email Login */}
-          <form onSubmit={handleLogin} className="space-y-4">
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1">Email</label>
-              <input
-                type="email"
-                value={email}
-                onChange={(e) => setEmail(e.target.value)}
-                required
-                className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-transparent text-sm"
-                placeholder="you@example.com"
-              />
-            </div>
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1">Password</label>
-              <input
-                type="password"
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-                required
-                className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-transparent text-sm"
-                placeholder="••••••••"
-              />
-            </div>
-            {error && <p className="text-red-600 text-sm">{error}</p>}
-            <button
-              type="submit"
-              disabled={loading}
-              className="w-full bg-indigo-600 text-white py-3 rounded-xl font-semibold hover:bg-indigo-700 transition disabled:opacity-50 text-sm"
-            >
-              {loading ? "Signing in..." : "Sign In"}
-            </button>
-          </form>
+        <form onSubmit={handleLogin} className="space-y-3">
+          <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} required
+            placeholder="Email" className="w-full px-3 py-2.5 border border-zinc-200 rounded-md text-sm focus:outline-none focus:border-zinc-400" />
+          <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} required
+            placeholder="Password" className="w-full px-3 py-2.5 border border-zinc-200 rounded-md text-sm focus:outline-none focus:border-zinc-400" />
+          {error && <p className="text-xs text-red-600">{error}</p>}
+          <button type="submit" disabled={loading}
+            className="w-full bg-zinc-900 text-white py-2.5 rounded-md text-sm font-medium hover:bg-zinc-800 disabled:opacity-40">
+            {loading ? "Signing in..." : "Sign in"}
+          </button>
+        </form>
 
-          <p className="mt-6 text-center text-sm text-gray-500">
-            Don&apos;t have an account?{" "}
-            <Link href="/auth/signup" className="text-indigo-600 font-medium hover:underline">Sign up</Link>
-          </p>
-        </div>
+        <p className="mt-6 text-center text-xs text-zinc-400">
+          No account? <Link href="/auth/signup" className="text-zinc-600 hover:underline">Sign up</Link>
+        </p>
       </div>
     </div>
   );

web/app/auth/signup/page.tsx

@@ -7,135 +7,70 @@ import Link from "next/link";
 export default function SignupPage() {
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
-  const [name, setName] = useState("");
   const [error, setError] = useState("");
   const [loading, setLoading] = useState(false);
-  const [success, setSuccess] = useState(false);
-
+  const [done, setDone] = useState(false);
   const supabase = createClient();
 
   async function handleSignup(e: React.FormEvent) {
-    e.preventDefault();
-    setLoading(true);
-    setError("");
-
-    const { error } = await supabase.auth.signUp({
-      email,
-      password,
-      options: { data: { full_name: name } },
-    });
-
-    if (error) {
-      setError(error.message);
-    } else {
-      setSuccess(true);
-    }
+    e.preventDefault(); setLoading(true); setError("");
+    const { error } = await supabase.auth.signUp({ email, password });
+    if (error) { setError(error.message); } else { setDone(true); }
     setLoading(false);
   }
 
   async function handleOAuth(provider: "google" | "github") {
     await supabase.auth.signInWithOAuth({
-      provider,
-      options: { redirectTo: `${window.location.origin}/auth/callback` },
+      provider, options: { redirectTo: `${window.location.origin}/auth/callback` },
     });
   }
 
-  if (success) {
+  if (done) {
     return (
-      <div className="min-h-screen flex items-center justify-center bg-gray-50 px-4">
-        <div className="text-center max-w-md">
-          <div className="text-5xl mb-4">📧</div>
-          <h2 className="text-2xl font-bold text-gray-900">Check your email</h2>
-          <p className="mt-2 text-gray-600">We sent a confirmation link to <strong>{email}</strong>.</p>
-          <Link href="/auth/login" className="mt-6 inline-block text-indigo-600 font-medium hover:underline">
-            Back to login
-          </Link>
+      <div className="min-h-screen flex items-center justify-center bg-white px-4">
+        <div className="text-center max-w-xs">
+          <h2 className="text-xl font-semibold">Check your email</h2>
+          <p className="mt-2 text-sm text-zinc-500">We sent a confirmation link to {email}.</p>
+          <Link href="/auth/login" className="mt-4 inline-block text-sm text-zinc-600 hover:underline">Back to login</Link>
         </div>
       </div>
     );
   }
 
   return (
-    <div className="min-h-screen flex items-center justify-center bg-gray-50 px-4">
-      <div className="w-full max-w-md">
-        <div className="text-center mb-8">
-          <Link href="/" className="inline-flex items-center gap-2 text-2xl font-bold text-gray-900">
-            <span>🛡️</span> ClauseGuard
-          </Link>
-          <p className="mt-2 text-gray-600">Create your free account</p>
+    <div className="min-h-screen flex items-center justify-center bg-white px-4">
+      <div className="w-full max-w-sm">
+        <div className="mb-8">
+          <Link href="/" className="text-sm text-zinc-400 hover:text-zinc-600">← Back</Link>
+          <h1 className="mt-4 text-xl font-semibold">Create an account</h1>
         </div>
 
-        <div className="bg-white rounded-2xl shadow-sm border border-gray-200 p-8">
-          <div className="space-y-3">
-            <button
-              onClick={() => handleOAuth("google")}
-              className="w-full flex items-center justify-center gap-3 px-4 py-3 border border-gray-300 rounded-xl hover:bg-gray-50 transition font-medium text-sm"
-            >
-              Continue with Google
-            </button>
-            <button
-              onClick={() => handleOAuth("github")}
-              className="w-full flex items-center justify-center gap-3 px-4 py-3 border border-gray-300 rounded-xl hover:bg-gray-50 transition font-medium text-sm"
-            >
-              Continue with GitHub
-            </button>
-          </div>
+        <div className="space-y-2.5">
+          <button onClick={() => handleOAuth("google")}
+            className="w-full px-4 py-2.5 border border-zinc-200 rounded-md text-sm hover:bg-zinc-50">Continue with Google</button>
+          <button onClick={() => handleOAuth("github")}
+            className="w-full px-4 py-2.5 border border-zinc-200 rounded-md text-sm hover:bg-zinc-50">Continue with GitHub</button>
+        </div>
 
-          <div className="flex items-center gap-4 my-6">
-            <div className="flex-1 h-px bg-gray-200" />
-            <span className="text-sm text-gray-400">or</span>
-            <div className="flex-1 h-px bg-gray-200" />
-          </div>
+        <div className="flex items-center gap-3 my-6">
+          <div className="flex-1 h-px bg-zinc-100" /><span className="text-xs text-zinc-300">or</span><div className="flex-1 h-px bg-zinc-100" />
+        </div>
 
-          <form onSubmit={handleSignup} className="space-y-4">
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
-              <input
-                type="text"
-                value={name}
-                onChange={(e) => setName(e.target.value)}
-                className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-transparent text-sm"
-                placeholder="John Doe"
-              />
-            </div>
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1">Email</label>
-              <input
-                type="email"
-                value={email}
-                onChange={(e) => setEmail(e.target.value)}
-                required
-                className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-transparent text-sm"
-                placeholder="you@example.com"
-              />
-            </div>
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1">Password</label>
-              <input
-                type="password"
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-                required
-                minLength={8}
-                className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-transparent text-sm"
-                placeholder="••••••••"
-              />
-            </div>
-            {error && <p className="text-red-600 text-sm">{error}</p>}
-            <button
-              type="submit"
-              disabled={loading}
-              className="w-full bg-indigo-600 text-white py-3 rounded-xl font-semibold hover:bg-indigo-700 transition disabled:opacity-50 text-sm"
-            >
-              {loading ? "Creating account..." : "Create Free Account"}
-            </button>
-          </form>
+        <form onSubmit={handleSignup} className="space-y-3">
+          <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} required
+            placeholder="Email" className="w-full px-3 py-2.5 border border-zinc-200 rounded-md text-sm focus:outline-none focus:border-zinc-400" />
+          <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} required minLength={8}
+            placeholder="Password (8+ characters)" className="w-full px-3 py-2.5 border border-zinc-200 rounded-md text-sm focus:outline-none focus:border-zinc-400" />
+          {error && <p className="text-xs text-red-600">{error}</p>}
+          <button type="submit" disabled={loading}
+            className="w-full bg-zinc-900 text-white py-2.5 rounded-md text-sm font-medium hover:bg-zinc-800 disabled:opacity-40">
+            {loading ? "Creating..." : "Create account"}
+          </button>
+        </form>
 
-          <p className="mt-6 text-center text-sm text-gray-500">
-            Already have an account?{" "}
-            <Link href="/auth/login" className="text-indigo-600 font-medium hover:underline">Sign in</Link>
-          </p>
-        </div>
+        <p className="mt-6 text-center text-xs text-zinc-400">
+          Have an account? <Link href="/auth/login" className="text-zinc-600 hover:underline">Sign in</Link>
+        </p>
       </div>
     </div>
   );

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

@@ -2,42 +2,26 @@
 
 import { useState } from "react";
 
-interface ClauseCategory {
-  id: number;
-  name: string;
-  severity: string;
-  description: string;
-  confidence: number;
-}
-
-interface ClauseResult {
-  text: string;
-  categories: ClauseCategory[];
-}
-
+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;
+  risk_score: number; grade: string; total_clauses: number;
+  flagged_count: number; results: ClauseResult[]; model: string; latency_ms: number;
 }
 
-const EXAMPLE_TEXT = `By using the Spotify Service, you agree to be bound by these Terms of Use. If you don't agree with these Terms, then please don't use the Service.
+const EXAMPLE = `By using the Spotify Service, you agree to be bound by these Terms of Use.
 
 Spotify may, in its sole discretion, modify or update these Terms of Service at any time without prior notice. Your continued use of the Service after any such changes constitutes your acceptance of the new Terms of Service.
 
-In no event will Spotify, its officers, shareholders, employees, agents, directors, subsidiaries, affiliates, successors, assigns, suppliers, or licensors be liable for any indirect, incidental, special, consequential, or punitive damages, or any loss of profits or revenues, whether incurred directly or indirectly.
+In no event will Spotify be liable for any indirect, incidental, special, consequential, or punitive damages, or any loss of profits or revenues, whether incurred directly or indirectly.
 
-Spotify reserves the right to remove or disable access to any User Content for any reason, including User Content that Spotify believes violates these Terms, without prior notice.
+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, with or without notice, effective immediately.
+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.
 
 These Terms will be governed by and construed in accordance with the laws of the State of New York.
 
-Any dispute arising from or relating to the subject matter of these Terms shall be finally settled by arbitration in New York County.`;
+Any dispute shall be finally settled by arbitration in New York County.`;
 
 export default function AnalyzePage() {
   const [text, setText] = useState("");
@@ -46,138 +30,100 @@ export default function AnalyzePage() {
   const [error, setError] = useState("");
 
   async function handleAnalyze() {
-    if (!text || text.trim().length < 50) {
-      setError("Please enter at least 50 characters of text.");
-      return;
-    }
-    setLoading(true);
-    setError("");
-    setResults(null);
-
+    if (!text || text.trim().length < 50) { setError("Enter at least 50 characters."); return; }
+    setLoading(true); setError(""); setResults(null);
     try {
       const res = await fetch("/api/analyze", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
+        method: "POST", headers: { "Content-Type": "application/json" },
         body: JSON.stringify({ text }),
       });
-
-      if (!res.ok) {
-        const err = await res.json();
-        throw new Error(err.error || "Analysis failed");
-      }
-
+      if (!res.ok) { const err = await res.json(); throw new Error(err.error || "Failed"); }
       setResults(await res.json());
-    } catch (err: any) {
-      setError(err.message || "Something went wrong.");
-    } finally {
-      setLoading(false);
-    }
+    } catch (err: any) { setError(err.message); }
+    finally { setLoading(false); }
   }
 
-  const gradeColors: Record<string, string> = {
-    A: "bg-green-100 text-green-800",
-    B: "bg-green-50 text-green-700",
-    C: "bg-yellow-100 text-yellow-800",
-    D: "bg-orange-100 text-orange-800",
-    F: "bg-red-100 text-red-800",
-  };
-
-  const sevColors: Record<string, string> = {
-    HIGH: "bg-red-100 text-red-800 border-red-200",
-    MEDIUM: "bg-orange-100 text-orange-800 border-orange-200",
-    LOW: "bg-blue-100 text-blue-800 border-blue-200",
+  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",
   };
 
   return (
-    <div className="min-h-screen bg-gray-50">
-      <div className="max-w-6xl mx-auto px-6 py-12">
-        <div className="text-center mb-10">
-          <h1 className="text-3xl font-bold text-gray-900">🛡️ ClauseGuard Web Scanner</h1>
-          <p className="mt-2 text-gray-600">Paste any Terms of Service, contract, or lease agreement below.</p>
+    <div className="min-h-screen bg-white">
+      <div className="max-w-5xl mx-auto px-6 py-12">
+        <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>
         </div>
 
         <div className="grid lg:grid-cols-2 gap-8">
-          {/* Input */}
           <div>
             <textarea
-              value={text}
-              onChange={(e) => setText(e.target.value)}
-              placeholder="Paste your Terms of Service or contract text here..."
-              className="w-full h-96 p-4 border border-gray-300 rounded-xl text-sm font-mono resize-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
+              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="mt-4 flex gap-3">
-              <button
-                onClick={handleAnalyze}
-                disabled={loading}
-                className="flex-1 bg-indigo-600 text-white py-3 rounded-xl font-semibold hover:bg-indigo-700 transition disabled:opacity-50"
-              >
-                {loading ? "⏳ Scanning..." : "🔍 Scan for Red Flags"}
+            <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"}
               </button>
-              <button
-                onClick={() => setText(EXAMPLE_TEXT)}
-                className="px-4 bg-gray-200 text-gray-700 rounded-xl font-medium hover:bg-gray-300 transition text-sm"
-              >
-                Try Example
+              <button onClick={() => setText(EXAMPLE)}
+                className="px-4 border border-zinc-200 rounded-md text-sm text-zinc-500 hover:bg-zinc-50">
+                Example
               </button>
             </div>
-            {error && <p className="mt-3 text-red-600 text-sm">{error}</p>}
+            {error && <p className="mt-2 text-sm text-red-600">{error}</p>}
           </div>
 
-          {/* Results */}
           <div>
             {results ? (
-              <div className="space-y-4">
-                {/* Summary Card */}
-                <div className="bg-gradient-to-br from-indigo-950 to-indigo-800 rounded-2xl p-6 text-white">
-                  <div className="flex justify-between items-center">
+              <div>
+                {/* Score */}
+                <div className="border border-zinc-200 rounded-lg p-5 mb-4">
+                  <div className="flex items-baseline justify-between">
                     <div>
-                      <h2 className="text-lg font-bold">Analysis Complete</h2>
-                      <p className="text-indigo-200 text-sm">
-                        {results.total_clauses} clauses · {results.flagged_count} flagged · {results.latency_ms}ms
-                      </p>
-                    </div>
-                    <div className="text-center">
-                      <div className="text-4xl font-extrabold">{results.risk_score}</div>
-                      <div className="text-xs text-indigo-300">RISK SCORE</div>
+                      <span className="text-3xl font-semibold">{results.risk_score}</span>
+                      <span className="text-sm text-zinc-400 ml-1">/100 risk</span>
                     </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}
+                    </span>
                   </div>
-                  <div className={`mt-4 inline-flex px-4 py-1.5 rounded-full font-semibold text-sm ${gradeColors[results.grade] || gradeColors.C}`}>
-                    Grade: {results.grade}
-                  </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>
 
-                {/* Flagged Clauses */}
-                <div className="space-y-3 max-h-[500px] overflow-y-auto">
-                  {results.results
-                    .filter(r => r.categories.length > 0)
-                    .map((clause, i) => (
-                      <div key={i} className="bg-white border border-gray-200 rounded-xl p-4">
-                        <p className="text-xs text-gray-400 font-semibold">CLAUSE #{i + 1}</p>
-                        <p className="text-sm text-gray-700 mt-1 italic line-clamp-3">&quot;{clause.text}&quot;</p>
-                        <div className="flex flex-wrap gap-2 mt-3">
-                          {clause.categories.map((cat, j) => (
-                            <span key={j} className={`text-xs font-semibold px-2.5 py-1 rounded-full border ${sevColors[cat.severity] || sevColors.MEDIUM}`}>
-                              {cat.name}
-                            </span>
-                          ))}
-                        </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="bg-green-50 border border-green-200 rounded-xl p-8 text-center">
-                      <div className="text-4xl mb-2">✅</div>
-                      <p className="text-green-800 font-semibold">No Unfair Clauses Detected</p>
-                      <p className="text-green-600 text-sm mt-1">This document appears to be fair.</p>
+                    <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>
                     </div>
                   )}
                 </div>
               </div>
             ) : (
-              <div className="flex items-center justify-center h-96 bg-white rounded-xl border border-gray-200">
-                <div className="text-center text-gray-400">
-                  <div className="text-5xl mb-4">🔍</div>
-                  <p>Paste text and click &quot;Scan&quot; to see results</p>
-                </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>
             )}
           </div>

web/app/page.tsx

@@ -1,190 +1,104 @@
-/**
- * ClauseGuard — Landing Page
- * Hero + Features + How It Works + Pricing + CTA
- */
-
 import Link from "next/link";
 
-const FEATURES = [
-  {
-    icon: "⚖️",
-    title: "8 Unfair Clause Types",
-    desc: "Detects arbitration traps, liability waivers, unilateral termination, jurisdiction tricks, and more.",
-  },
-  {
-    icon: "⚡",
-    title: "Instant Analysis",
-    desc: "Scans any Terms of Service or contract in under 2 seconds. Works on any website.",
-  },
-  {
-    icon: "🛡️",
-    title: "Risk Score & Grade",
-    desc: "Get a clear A–F grade and 0–100 risk score. Know exactly how fair a document is.",
-  },
-  {
-    icon: "🔍",
-    title: "Clause-by-Clause Breakdown",
-    desc: "Every flagged clause is highlighted with severity, category, and plain-English explanation.",
-  },
-  {
-    icon: "🌐",
-    title: "Chrome Extension",
-    desc: "Scans pages as you browse. Red highlights appear right on the ToS page you're reading.",
-  },
-  {
-    icon: "📜",
-    title: "Legal Citations",
-    desc: "Each finding references specific EU/US consumer protection laws — not just gut feelings.",
-  },
-];
-
-const STEPS = [
-  { num: "1", title: "Install the Extension", desc: "Add ClauseGuard to Chrome in one click. Free." },
-  { num: "2", title: "Visit Any ToS Page", desc: "Navigate to any Terms of Service, contract, or lease agreement." },
-  { num: "3", title: "See Red Flags Instantly", desc: "Unfair clauses are highlighted in red, orange, and yellow — with explanations." },
+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 PRICING = [
   {
-    name: "Free",
-    price: "$0",
-    period: "forever",
-    features: ["10 scans/month", "8 clause categories", "Risk score & grade", "Chrome extension"],
-    cta: "Get Started Free",
-    highlight: false,
+    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: "Pro",
-    price: "$12",
-    period: "/month",
-    features: [
-      "Unlimited scans",
-      "Contract upload & PDF analysis",
-      '"Explain this clause" AI feature',
-      "Scan history & dashboard",
-      "PDF report export",
-      "1,000 API calls/month",
-      "Email support",
-    ],
-    cta: "Start Pro Trial",
-    highlight: true,
+    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: "Team",
-    price: "$49",
-    period: "/month",
-    features: [
-      "Everything in Pro",
-      "5 team seats",
-      "10,000 API calls/month",
-      "Team dashboard & analytics",
-      "Slack + email support",
-      "Custom clause rules",
-    ],
-    cta: "Contact Sales",
-    highlight: false,
+    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",
   },
 ];
 
-export default function LandingPage() {
+export default function Home() {
   return (
-    <main className="min-h-screen bg-white">
+    <main className="min-h-screen bg-white text-zinc-900">
       {/* Nav */}
-      <nav className="sticky top-0 z-50 bg-white/80 backdrop-blur-lg border-b border-gray-100">
-        <div className="max-w-7xl mx-auto px-6 h-16 flex items-center justify-between">
-          <div className="flex items-center gap-2">
-            <span className="text-2xl">🛡️</span>
-            <span className="text-xl font-bold text-gray-900">ClauseGuard</span>
-          </div>
-          <div className="hidden md:flex items-center gap-8">
-            <a href="#features" className="text-sm text-gray-600 hover:text-gray-900">Features</a>
-            <a href="#how-it-works" className="text-sm text-gray-600 hover:text-gray-900">How It Works</a>
-            <a href="#pricing" className="text-sm text-gray-600 hover:text-gray-900">Pricing</a>
-            <Link href="/auth/login" className="text-sm text-gray-600 hover:text-gray-900">Log In</Link>
-            <Link
-              href="/auth/signup"
-              className="bg-indigo-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-indigo-700 transition"
-            >
-              Get Started Free
-            </Link>
+      <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="relative overflow-hidden">
-        <div className="absolute inset-0 bg-gradient-to-br from-indigo-50 via-white to-red-50" />
-        <div className="relative max-w-7xl mx-auto px-6 pt-20 pb-28 text-center">
-          <div className="inline-flex items-center gap-2 bg-red-50 text-red-700 px-4 py-1.5 rounded-full text-sm font-medium mb-8 border border-red-200">
-            <span>🔴</span> 73% of popular ToS contain unfair clauses
-          </div>
-          <h1 className="text-5xl md:text-7xl font-extrabold text-gray-900 tracking-tight leading-tight max-w-4xl mx-auto">
-            Stop signing away
-            <br />
-            <span className="text-indigo-600">your rights</span>
+      <section className="max-w-5xl mx-auto px-6 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
           </h1>
-          <p className="mt-6 text-xl text-gray-600 max-w-2xl mx-auto leading-relaxed">
-            ClauseGuard uses AI trained on 9,414 legal clauses to scan any Terms of Service,
-            contract, or lease — and highlights the unfair parts before you agree.
+          <p className="mt-5 text-lg text-zinc-500 leading-relaxed">
+            ClauseGuard scans Terms of Service, contracts, and leases for unfair clauses.
+            You get a clear breakdown before you click accept.
           </p>
-          <div className="mt-10 flex flex-col sm:flex-row gap-4 justify-center">
-            <a
-              href="#"
-              className="bg-indigo-600 text-white px-8 py-4 rounded-xl text-lg font-semibold hover:bg-indigo-700 transition shadow-lg shadow-indigo-200"
-            >
-              Add to Chrome — Free
+          <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">
+              Add to Chrome
             </a>
-            <Link
-              href="/dashboard-pages/analyze"
-              className="bg-white text-gray-900 px-8 py-4 rounded-xl text-lg font-semibold hover:bg-gray-50 transition border border-gray-200"
-            >
-              Try Web Scanner →
+            <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>
           </div>
-          <p className="mt-4 text-sm text-gray-400">
-            No account required · Free forever for 10 scans/month
-          </p>
         </div>
       </section>
 
-      {/* Features */}
-      <section id="features" className="py-24 bg-gray-50">
-        <div className="max-w-7xl mx-auto px-6">
-          <div className="text-center mb-16">
-            <h2 className="text-3xl md:text-4xl font-bold text-gray-900">
-              What ClauseGuard Detects
-            </h2>
-            <p className="mt-4 text-lg text-gray-600 max-w-2xl mx-auto">
-              Trained on the CLAUDETTE academic taxonomy — the same system used by EU consumer protection researchers.
-            </p>
-          </div>
-          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
-            {FEATURES.map((f, i) => (
-              <div key={i} className="bg-white rounded-2xl p-8 border border-gray-100 hover:shadow-lg transition">
-                <div className="text-4xl mb-4">{f.icon}</div>
-                <h3 className="text-lg font-bold text-gray-900">{f.title}</h3>
-                <p className="mt-2 text-gray-600 text-sm leading-relaxed">{f.desc}</p>
+      {/* What it detects */}
+      <section id="features" 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">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>
+          <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>
             ))}
           </div>
         </div>
       </section>
 
-      {/* How It Works */}
-      <section id="how-it-works" className="py-24">
-        <div className="max-w-7xl mx-auto px-6">
-          <div className="text-center mb-16">
-            <h2 className="text-3xl md:text-4xl font-bold text-gray-900">How It Works</h2>
-            <p className="mt-4 text-lg text-gray-600">Three steps. Under 2 seconds.</p>
-          </div>
-          <div className="grid md:grid-cols-3 gap-12">
-            {STEPS.map((s, i) => (
-              <div key={i} className="text-center">
-                <div className="w-16 h-16 rounded-full bg-indigo-100 text-indigo-700 text-2xl font-bold flex items-center justify-center mx-auto mb-6">
-                  {s.num}
-                </div>
-                <h3 className="text-xl font-bold text-gray-900">{s.title}</h3>
-                <p className="mt-3 text-gray-600">{s.desc}</p>
+      {/* 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>
               </div>
             ))}
           </div>
@@ -192,46 +106,26 @@ export default function LandingPage() {
       </section>
 
       {/* Pricing */}
-      <section id="pricing" className="py-24 bg-gray-50">
-        <div className="max-w-7xl mx-auto px-6">
-          <div className="text-center mb-16">
-            <h2 className="text-3xl md:text-4xl font-bold text-gray-900">Simple Pricing</h2>
-            <p className="mt-4 text-lg text-gray-600">Free forever. Upgrade when you need more.</p>
-          </div>
-          <div className="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
-            {PRICING.map((plan, i) => (
-              <div
-                key={i}
-                className={`rounded-2xl p-8 ${
-                  plan.highlight
-                    ? "bg-indigo-600 text-white ring-4 ring-indigo-200 scale-105"
-                    : "bg-white border border-gray-200"
-                }`}
-              >
-                <h3 className={`text-lg font-bold ${plan.highlight ? "text-indigo-100" : "text-gray-500"}`}>
-                  {plan.name}
-                </h3>
-                <div className="mt-4 flex items-baseline gap-1">
-                  <span className="text-5xl font-extrabold">{plan.price}</span>
-                  <span className={`text-sm ${plan.highlight ? "text-indigo-200" : "text-gray-400"}`}>
-                    {plan.period}
-                  </span>
-                </div>
-                <ul className="mt-8 space-y-3">
-                  {plan.features.map((f, j) => (
-                    <li key={j} className="flex items-start gap-2 text-sm">
-                      <span className="mt-0.5">✓</span>
-                      <span>{f}</span>
+      <section id="pricing" 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">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">
+            {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>
+                  <span className="text-sm text-zinc-400">{plan.period}</span>
+                </p>
+                <ul className="mt-5 space-y-2">
+                  {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>
                   ))}
                 </ul>
-                <button
-                  className={`mt-8 w-full py-3 rounded-xl font-semibold text-sm transition ${
-                    plan.highlight
-                      ? "bg-white text-indigo-700 hover:bg-indigo-50"
-                      : "bg-indigo-600 text-white hover:bg-indigo-700"
-                  }`}
-                >
+                <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"}`}>
                   {plan.cta}
                 </button>
               </div>
@@ -240,41 +134,15 @@ export default function LandingPage() {
         </div>
       </section>
 
-      {/* CTA */}
-      <section className="py-24">
-        <div className="max-w-4xl mx-auto px-6 text-center">
-          <h2 className="text-3xl md:text-4xl font-bold text-gray-900">
-            Read the fine print — without reading it.
-          </h2>
-          <p className="mt-4 text-lg text-gray-600">
-            Join thousands of users who protect themselves before clicking "I Agree."
-          </p>
-          <div className="mt-10">
-            <a
-              href="#"
-              className="bg-indigo-600 text-white px-10 py-4 rounded-xl text-lg font-semibold hover:bg-indigo-700 transition shadow-lg shadow-indigo-200 inline-block"
-            >
-              Add to Chrome — Free
-            </a>
-          </div>
-        </div>
-      </section>
-
       {/* Footer */}
-      <footer className="border-t border-gray-200 py-12">
-        <div className="max-w-7xl mx-auto px-6 flex flex-col md:flex-row justify-between items-center gap-6">
-          <div className="flex items-center gap-2">
-            <span className="text-xl">🛡️</span>
-            <span className="font-bold text-gray-900">ClauseGuard</span>
-          </div>
-          <div className="flex gap-6 text-sm text-gray-500">
-            <a href="/privacy" className="hover:text-gray-900">Privacy Policy</a>
-            <a href="/terms" className="hover:text-gray-900">Terms of Service</a>
-            <a href="mailto:hello@clauseguard.com" className="hover:text-gray-900">Contact</a>
+      <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">
+            <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>
           </div>
-          <p className="text-sm text-gray-400">
-            © {new Date().getFullYear()} ClauseGuard. Not legal advice.
-          </p>
         </div>
       </footer>
     </main>

web/lib/stripe.ts

@@ -1,7 +1,7 @@
 import Stripe from "stripe";
 
 export const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
-  apiVersion: "2025-03-31.basil",
+  apiVersion: "2026-03-25.dahlia",
   typescript: true,
 });
 
@@ -10,13 +10,13 @@ export const PLANS = {
     name: "Free",
     scans: 10,
     price_id: null,
-    features: ["10 scans/month", "8 clause categories", "Risk score & grade"],
+    features: ["10 scans per month", "All 8 clause categories", "Risk score and grade"],
   },
   pro: {
     name: "Pro",
     scans: Infinity,
     price_id: process.env.STRIPE_PRO_PRICE_ID!,
-    features: ["Unlimited scans", "Contract uploads", "AI explanations", "PDF exports"],
+    features: ["Unlimited scans", "Contract uploads", "Clause explanations", "PDF exports"],
   },
   team: {
     name: "Team",

web/package.json

@@ -9,25 +9,23 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "next": "^15.3.0",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
-    "@supabase/supabase-js": "^2.49.0",
-    "@supabase/ssr": "^0.6.0",
-    "stripe": "^17.7.0",
-    "@stripe/stripe-js": "^5.6.0",
-    "framer-motion": "^12.6.0",
-    "lucide-react": "^0.474.0",
-    "clsx": "^2.1.1",
-    "tailwind-merge": "^3.0.0"
+    "next": "16.2.4",
+    "react": "19.2.5",
+    "react-dom": "19.2.5",
+    "@supabase/supabase-js": "2.104.0",
+    "@supabase/ssr": "0.10.2",
+    "stripe": "22.0.2",
+    "lucide-react": "0.474.0",
+    "clsx": "2.1.1",
+    "tailwind-merge": "3.0.0"
   },
   "devDependencies": {
-    "typescript": "^5.7.0",
-    "@types/node": "^22.0.0",
-    "@types/react": "^19.0.0",
-    "@types/react-dom": "^19.0.0",
-    "@tailwindcss/postcss": "^4.0.0",
-    "tailwindcss": "^4.0.0",
-    "postcss": "^8.5.0"
+    "typescript": "5.8.3",
+    "@types/node": "22.15.3",
+    "@types/react": "19.2.0",
+    "@types/react-dom": "19.2.0",
+    "@tailwindcss/postcss": "4.1.4",
+    "tailwindcss": "4.1.4",
+    "postcss": "8.5.3"
   }
 }