diff --git a/demo-video/src/BrightClauseDemo.tsx b/demo-video/src/BrightClauseDemo.tsx
index 1ae7db4..6967e33 100644
--- a/demo-video/src/BrightClauseDemo.tsx
+++ b/demo-video/src/BrightClauseDemo.tsx
@@ -21,7 +21,7 @@ const SLIDE_T = 20;
 
 export const BrightClauseDemo: React.FC = () => {
   return (
-    <AbsoluteFill style={{ backgroundColor: "#06060a" }}>
+    <AbsoluteFill style={{ backgroundColor: "#0d0b08" }}>
       <TransitionSeries>
         {/* Intro */}
         <TransitionSeries.Sequence durationInFrames={INTRO} premountFor={30}>
diff --git a/demo-video/src/styles.ts b/demo-video/src/styles.ts
index 1798cc5..fe17abf 100644
--- a/demo-video/src/styles.ts
+++ b/demo-video/src/styles.ts
@@ -1,9 +1,9 @@
 import { CSSProperties } from "react";
 
 export const colors = {
-  bg: "#06060a",
-  bgCard: "#0d0d14",
-  bgCardHover: "#12121c",
+  bg: "#0d0b08",
+  bgCard: "#14120e",
+  bgCardHover: "#1c1a15",
   border: "#1a1a2e",
   borderLight: "#252540",
   accent: "#c9a227",
diff --git a/frontend/src/app/analytics/page.tsx b/frontend/src/app/analytics/page.tsx
index a5c2b43..5b219ed 100644
--- a/frontend/src/app/analytics/page.tsx
+++ b/frontend/src/app/analytics/page.tsx
@@ -228,7 +228,7 @@ export default function AnalyticsPage() {
                 className="col-span-2 lg:col-span-1 card p-6"
               >
                 <div className="text-center">
-                  <div className="text-[10px] font-mono uppercase tracking-widest text-ink-500 mb-3">
+                  <div className="text-[11px] font-mono uppercase tracking-widest text-ink-500 mb-3">
                     Portfolio Health
                   </div>
                   <div className="relative w-24 h-24 mx-auto">
@@ -249,7 +249,7 @@ export default function AnalyticsPage() {
                       </span>
                     </div>
                   </div>
-                  <p className="text-[10px] text-ink-500 mt-2 font-mono uppercase">
+                  <p className="text-[11px] text-ink-500 mt-2 font-mono uppercase">
                     {portfolioStats.healthScore >= 70 ? 'Good Standing' : portfolioStats.healthScore >= 40 ? 'Needs Review' : 'At Risk'}
                   </p>
                 </div>
@@ -282,7 +282,7 @@ export default function AnalyticsPage() {
                   <p className={`text-2xl font-bold font-mono ${riskConfig[level].color}`}>
                     {portfolioStats[level]}
                   </p>
-                  <p className="text-[10px] text-ink-500 font-mono uppercase tracking-wide mt-1">
+                  <p className="text-[11px] text-ink-500 font-mono uppercase tracking-wide mt-1">
                     {riskConfig[level].label} Risk
                   </p>
                 </motion.div>
@@ -304,7 +304,7 @@ export default function AnalyticsPage() {
                       Clause types vs. documents &middot; {loadingAnalyses ? 'Loading...' : `${docAnalyses.length} contracts`}
                     </p>
                   </div>
-                  <div className="flex items-center gap-3 text-[10px] font-mono uppercase">
+                  <div className="flex items-center gap-3 text-[11px] font-mono uppercase">
                     {(['critical', 'high', 'medium', 'low'] as RiskLevel[]).map(level => (
                       <div key={level} className="flex items-center gap-1.5">
                         <div className={`w-3 h-3 rounded-sm ${riskCellColors[level]}`} />
@@ -323,17 +323,17 @@ export default function AnalyticsPage() {
                 <table className="w-full text-sm">
                   <thead>
                     <tr className="border-b border-ink-800/30">
-                      <th className="sticky left-0 bg-ink-950 z-10 px-4 py-3 text-left text-[10px] font-mono uppercase tracking-widest text-ink-500 min-w-[180px]">
+                      <th className="sticky left-0 bg-ink-950 z-10 px-4 py-3 text-left text-[11px] font-mono uppercase tracking-widest text-ink-500 min-w-[180px]">
                         Document
                       </th>
                       {allClauseTypes.map(type => (
                         <th key={type} className="px-2 py-3 text-center min-w-[70px]">
-                          <span className="text-[9px] font-mono uppercase tracking-wide text-ink-500 whitespace-nowrap">
+                          <span className="text-[11px] font-mono uppercase tracking-wide text-ink-500 whitespace-nowrap">
                             {formatClauseType(type)}
                           </span>
                         </th>
                       ))}
-                      <th className="px-4 py-3 text-center text-[10px] font-mono uppercase tracking-widest text-ink-500">
+                      <th className="px-4 py-3 text-center text-[11px] font-mono uppercase tracking-widest text-ink-500">
                         Overall
                       </th>
                     </tr>
@@ -359,7 +359,7 @@ export default function AnalyticsPage() {
                                 initial={{ scale: 0 }}
                                 animate={{ scale: 1 }}
                                 transition={{ delay: rowIdx * 0.02 + allClauseTypes.indexOf(type) * 0.01 }}
-                                className={`w-8 h-8 rounded-md mx-auto flex items-center justify-center text-[10px] font-mono font-bold
+                                className={`w-8 h-8 rounded-md mx-auto flex items-center justify-center text-[11px] font-mono font-bold
                                   ${topRisk ? riskCellColors[topRisk] : riskCellColors.none}
                                   ${topRisk ? 'text-ink-100' : 'text-ink-700'}`}
                                 title={clauseData ? `${clauseData.total} clause(s) - ${topRisk || 'unknown'} risk` : 'Not found'}
@@ -370,7 +370,7 @@ export default function AnalyticsPage() {
                           )
                         })}
                         <td className="px-4 py-3 text-center">
-                          <span className={`inline-flex px-2.5 py-1 rounded-md text-[10px] font-mono font-bold uppercase tracking-wide
+                          <span className={`inline-flex px-2.5 py-1 rounded-md text-[11px] font-mono font-bold uppercase tracking-wide
                             ${summary?.overall_risk ? riskConfig[summary.overall_risk]?.color : 'text-ink-500'}
                             ${summary?.overall_risk ? riskConfig[summary.overall_risk]?.bg + '/10' : 'bg-ink-800/30'}`}>
                             {summary?.overall_risk || '?'}
@@ -415,7 +415,7 @@ export default function AnalyticsPage() {
                         <div className="flex items-center justify-between mb-1">
                           <span className="text-xs font-medium text-ink-300">{formatClauseType(type)}</span>
                           <div className="flex items-center gap-2">
-                            <span className={`text-[10px] font-mono ${topRisk ? riskConfig[topRisk]?.color : 'text-ink-500'}`}>
+                            <span className={`text-[11px] font-mono ${topRisk ? riskConfig[topRisk]?.color : 'text-ink-500'}`}>
                               {topRisk?.toUpperCase() || 'N/A'}
                             </span>
                             <span className="text-xs font-mono text-ink-400">{data.total}</span>
@@ -423,10 +423,10 @@ export default function AnalyticsPage() {
                         </div>
                         <div className="h-2 bg-ink-800/50 rounded-full overflow-hidden">
                           <motion.div
-                            initial={{ width: 0 }}
-                            animate={{ width: `${pct}%` }}
+                            initial={{ scaleX: 0 }}
+                            animate={{ scaleX: pct / 100 }}
                             transition={{ delay: 0.4 + i * 0.03, duration: 0.5 }}
-                            className={`h-full rounded-full ${topRisk ? riskConfig[topRisk]?.bg : 'bg-ink-600'}`}
+                            className={`h-full w-full rounded-full origin-left ${topRisk ? riskConfig[topRisk]?.bg : 'bg-ink-600'}`}
                             style={{ opacity: 0.6 }}
                           />
                         </div>
@@ -480,7 +480,7 @@ export default function AnalyticsPage() {
                               <span className="text-xs font-semibold uppercase tracking-wide text-ink-200">
                                 {formatClauseType(highlight.clause_type)}
                               </span>
-                              <span className={`text-[9px] font-mono uppercase px-1.5 py-0.5 rounded ${
+                              <span className={`text-[11px] font-mono uppercase px-1.5 py-0.5 rounded ${
                                 highlight.risk_level === 'critical'
                                   ? 'bg-red-500/15 text-red-400'
                                   : 'bg-orange-500/15 text-orange-400'
@@ -542,7 +542,7 @@ export default function AnalyticsPage() {
                       >
                         <div className="flex items-center justify-between">
                           <div className="flex items-center gap-3">
-                            <span className="px-2 py-0.5 rounded text-[10px] font-mono uppercase bg-ink-800/50 text-ink-400">
+                            <span className="px-2 py-0.5 rounded text-[11px] font-mono uppercase bg-ink-800/50 text-ink-400">
                               {entity.entity_type}
                             </span>
                             <span className="text-sm font-medium text-ink-200">{entity.normalized_name}</span>
@@ -598,15 +598,15 @@ export default function AnalyticsPage() {
                 <table className="w-full text-sm">
                   <thead>
                     <tr className="border-b border-ink-800/30">
-                      <th className="px-6 py-3 text-left text-[10px] font-mono uppercase tracking-widest text-ink-500">Document</th>
-                      <th className="px-4 py-3 text-center text-[10px] font-mono uppercase tracking-widest text-ink-500">Clauses</th>
-                      <th className="px-4 py-3 text-center text-[10px] font-mono uppercase tracking-widest text-red-400/70">Crit</th>
-                      <th className="px-4 py-3 text-center text-[10px] font-mono uppercase tracking-widest text-orange-400/70">High</th>
-                      <th className="px-4 py-3 text-center text-[10px] font-mono uppercase tracking-widest text-amber-400/70">Med</th>
-                      <th className="px-4 py-3 text-center text-[10px] font-mono uppercase tracking-widest text-emerald-400/70">Low</th>
-                      <th className="px-4 py-3 text-center text-[10px] font-mono uppercase tracking-widest text-ink-500">Overall</th>
-                      <th className="px-4 py-3 text-center text-[10px] font-mono uppercase tracking-widest text-ink-500">Risk Bar</th>
-                      <th className="px-4 py-3 text-right text-[10px] font-mono uppercase tracking-widest text-ink-500"></th>
+                      <th className="px-6 py-3 text-left text-[11px] font-mono uppercase tracking-widest text-ink-500">Document</th>
+                      <th className="px-4 py-3 text-center text-[11px] font-mono uppercase tracking-widest text-ink-500">Clauses</th>
+                      <th className="px-4 py-3 text-center text-[11px] font-mono uppercase tracking-widest text-red-400/70">Crit</th>
+                      <th className="px-4 py-3 text-center text-[11px] font-mono uppercase tracking-widest text-orange-400/70">High</th>
+                      <th className="px-4 py-3 text-center text-[11px] font-mono uppercase tracking-widest text-amber-400/70">Med</th>
+                      <th className="px-4 py-3 text-center text-[11px] font-mono uppercase tracking-widest text-emerald-400/70">Low</th>
+                      <th className="px-4 py-3 text-center text-[11px] font-mono uppercase tracking-widest text-ink-500">Overall</th>
+                      <th className="px-4 py-3 text-center text-[11px] font-mono uppercase tracking-widest text-ink-500">Risk Bar</th>
+                      <th className="px-4 py-3 text-right text-[11px] font-mono uppercase tracking-widest text-ink-500"></th>
                     </tr>
                   </thead>
                   <tbody className="divide-y divide-ink-800/20">
@@ -634,7 +634,7 @@ export default function AnalyticsPage() {
                             <td className="px-4 py-3 text-center text-xs font-mono text-amber-400">{summary?.risk_summary.medium || 0}</td>
                             <td className="px-4 py-3 text-center text-xs font-mono text-emerald-400">{summary?.risk_summary.low || 0}</td>
                             <td className="px-4 py-3 text-center">
-                              <span className={`inline-flex px-2 py-0.5 rounded text-[10px] font-mono font-bold uppercase
+                              <span className={`inline-flex px-2 py-0.5 rounded text-[11px] font-mono font-bold uppercase
                                 ${summary?.overall_risk ? riskConfig[summary.overall_risk]?.color : 'text-ink-500'}
                                 ${summary?.overall_risk ? riskConfig[summary.overall_risk]?.bg + '/10' : 'bg-ink-800/30'}`}>
                                 {summary?.overall_risk || '?'}
diff --git a/frontend/src/app/compare/page.tsx b/frontend/src/app/compare/page.tsx
index a956bba..82bb5bb 100644
--- a/frontend/src/app/compare/page.tsx
+++ b/frontend/src/app/compare/page.tsx
@@ -196,7 +196,7 @@ function ComparePageContent() {
               )}
               <span className="text-sm text-ink-200 font-medium max-w-[200px] truncate">{cd.doc.filename}</span>
               {cd.summary && (
-                <span className={`text-[10px] font-mono uppercase px-1.5 py-0.5 rounded
+                <span className={`text-[11px] font-mono uppercase px-1.5 py-0.5 rounded
                   ${cd.summary.overall_risk ? riskConfig[cd.summary.overall_risk]?.color : 'text-ink-500'}
                   ${cd.summary.overall_risk ? riskConfig[cd.summary.overall_risk]?.bg + '/15' : 'bg-ink-800/30'}`}>
                   {cd.summary.overall_risk}
@@ -251,7 +251,7 @@ function ComparePageContent() {
                             <FileText className="w-4 h-4 text-ink-500 shrink-0" />
                             <div className="flex-1 min-w-0">
                               <p className="text-sm text-ink-200 truncate">{doc.filename}</p>
-                              <p className="text-[10px] text-ink-500 font-mono">
+                              <p className="text-[11px] text-ink-500 font-mono">
                                 {doc.page_count ? `${doc.page_count} pages` : 'Unknown pages'} &middot; {doc.chunk_count} chunks
                               </p>
                             </div>
@@ -333,17 +333,17 @@ function ComparePageContent() {
                 <table className="w-full text-sm">
                   <thead>
                     <tr className="border-b border-ink-800/30">
-                      <th className="sticky left-0 bg-ink-950 z-10 px-6 py-3 text-left text-[10px] font-mono uppercase tracking-widest text-ink-500 min-w-[160px]">
+                      <th className="sticky left-0 bg-ink-950 z-10 px-6 py-3 text-left text-[11px] font-mono uppercase tracking-widest text-ink-500 min-w-[160px]">
                         Clause Type
                       </th>
                       {compareDocs.map(cd => (
                         <th key={cd.doc.id} className="px-4 py-3 text-center min-w-[180px]">
                           <div className="flex flex-col items-center gap-1">
-                            <span className="text-[10px] font-mono text-ink-400 truncate max-w-[160px]">
+                            <span className="text-[11px] font-mono text-ink-400 truncate max-w-[160px]">
                               {cd.doc.filename}
                             </span>
                             {cd.summary && (
-                              <span className={`text-[9px] font-mono uppercase px-1.5 py-0.5 rounded
+                              <span className={`text-[11px] font-mono uppercase px-1.5 py-0.5 rounded
                                 ${riskConfig[cd.summary.overall_risk]?.color}
                                 ${riskConfig[cd.summary.overall_risk]?.bg}/15`}>
                                 {cd.summary.overall_risk}
@@ -384,12 +384,12 @@ function ComparePageContent() {
                                       cellData.topRisk === 'medium' ? 'bg-amber-500/40' :
                                       'bg-emerald-500/30'
                                     }`} />
-                                    <span className="text-[10px] font-mono font-bold uppercase">{cellData.topRisk}</span>
+                                    <span className="text-[11px] font-mono font-bold uppercase">{cellData.topRisk}</span>
                                   </div>
-                                  <span className="text-[10px] text-ink-500 font-mono">{cellData.breakdown.total} clause(s)</span>
+                                  <span className="text-[11px] text-ink-500 font-mono">{cellData.breakdown.total} clause(s)</span>
                                 </button>
                               ) : (
-                                <span className="inline-flex items-center gap-1 text-[10px] text-ink-600 font-mono">
+                                <span className="inline-flex items-center gap-1 text-[11px] text-ink-600 font-mono">
                                   <span className="w-2 h-2 rounded-sm bg-ink-800/50" />
                                   Not found
                                 </span>
@@ -412,7 +412,7 @@ function ComparePageContent() {
                                     {cellData.clauses.slice(0, 3).map((clause) => (
                                       <div key={clause.id} className="p-2.5 bg-ink-800/30 rounded-lg">
                                         {clause.risk_level && (
-                                          <span className={`text-[9px] font-mono uppercase px-1.5 py-0.5 rounded mb-1.5 inline-block
+                                          <span className={`text-[11px] font-mono uppercase px-1.5 py-0.5 rounded mb-1.5 inline-block
                                             ${riskConfig[clause.risk_level as RiskLevel]?.color}
                                             ${riskConfig[clause.risk_level as RiskLevel]?.bg}/15`}>
                                             {clause.risk_level}
@@ -426,7 +426,7 @@ function ComparePageContent() {
                                   </div>
                                   <Link
                                     href={`/documents/${cd.doc.id}`}
-                                    className="flex items-center justify-center gap-1.5 mt-3 text-[10px] text-accent hover:text-accent-light transition-colors"
+                                    className="flex items-center justify-center gap-1.5 mt-3 text-[11px] text-accent hover:text-accent-light transition-colors"
                                   >
                                     <Eye className="w-3 h-3" />
                                     View Full Document
@@ -483,7 +483,7 @@ function ComparePageContent() {
                           <div className="flex items-center gap-2 mb-3">
                             <AlertTriangle className="w-4 h-4 text-amber-400" />
                             <span className="text-sm font-medium text-ink-200">{doc.filename}</span>
-                            <span className="text-[10px] text-ink-500 font-mono">
+                            <span className="text-[11px] text-ink-500 font-mono">
                               missing {missing.length} clause type{missing.length !== 1 ? 's' : ''}
                             </span>
                           </div>
@@ -491,7 +491,7 @@ function ComparePageContent() {
                             {missing.map(type => (
                               <span
                                 key={type}
-                                className="text-[10px] font-mono px-2.5 py-1 bg-amber-500/10 border border-amber-500/20 rounded-md text-amber-400"
+                                className="text-[11px] font-mono px-2.5 py-1 bg-amber-500/10 border border-amber-500/20 rounded-md text-amber-400"
                               >
                                 {formatClauseType(type)}
                               </span>
diff --git a/frontend/src/app/dashboard/page.tsx b/frontend/src/app/dashboard/page.tsx
index 2f4d900..4e2c9de 100644
--- a/frontend/src/app/dashboard/page.tsx
+++ b/frontend/src/app/dashboard/page.tsx
@@ -22,12 +22,6 @@ const riskColors: Record<RiskLevel, string> = {
   low: 'text-emerald-400 bg-emerald-500/10 border-emerald-500/20',
 }
 
-const riskAccentBorder: Record<RiskLevel, string> = {
-  critical: 'border-l-red-500',
-  high: 'border-l-orange-500',
-  medium: 'border-l-amber-500',
-  low: 'border-l-emerald-500',
-}
 
 function formatRelativeTime(iso: string): string {
   const now = Date.now()
@@ -469,6 +463,7 @@ function DashboardContent() {
         </motion.div>
 
         {/* Search Results */}
+        <div aria-live="polite">
         <AnimatePresence>
           {searchResults.length > 0 && (
             <motion.div
@@ -504,7 +499,7 @@ function DashboardContent() {
                       <div className="flex items-center justify-between mb-2">
                         <span className="text-sm font-semibold text-accent">{result.document_name}</span>
                         <div className="flex items-center gap-2">
-                          <span className="text-[10px] text-ink-500">Relevance</span>
+                          <span className="text-[11px] text-ink-500">Relevance</span>
                           <span className="text-xs text-ink-300 bg-ink-800/50 px-2 py-0.5 rounded">
                             {(result.combined_score * 100).toFixed(0)}%
                           </span>
@@ -518,6 +513,7 @@ function DashboardContent() {
             </motion.div>
           )}
         </AnimatePresence>
+        </div>
 
         {/* Main Grid */}
         <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
@@ -578,7 +574,7 @@ function DashboardContent() {
 
                       {/* Value outcome steps */}
                       <div className="mt-8 pt-6 border-t border-ink-800/40">
-                        <p className="text-[10px] text-ink-500 mb-3">What you get</p>
+                        <p className="text-[11px] text-ink-500 mb-3">What you get</p>
                         <div className="flex items-center justify-center gap-3 text-[11px] text-ink-400">
                           <span className="flex items-center gap-1.5">
                             <FileText className="w-3 h-3 text-amber-500/70" />
@@ -619,8 +615,8 @@ function DashboardContent() {
                       className={`px-6 py-5 cursor-pointer transition-all duration-200 relative group
                                 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/50
                                 ${selectedDoc === doc.id
-                                  ? 'bg-accent/5 border-l-3 border-accent'
-                                  : 'hover:bg-ink-900/30 border-l-3 border-transparent hover:border-ink-600'
+                                  ? 'bg-accent/5 ring-1 ring-inset ring-accent/25'
+                                  : 'hover:bg-ink-900/30'
                                 }`}
                     >
                       <div className="flex items-start justify-between gap-4">
@@ -668,7 +664,7 @@ function DashboardContent() {
                                   }[risk]
                                   return (
                                     <motion.span
-                                      className={`shrink-0 text-[10px] font-semibold uppercase tracking-wider px-1.5 py-0.5 rounded ${badge}`}
+                                      className={`shrink-0 text-[11px] font-semibold uppercase tracking-wider px-1.5 py-0.5 rounded ${badge}`}
                                       initial={{ opacity: 0, scale: 0.7 }}
                                       animate={{ opacity: 1, scale: 1 }}
                                       transition={{ duration: 0.2, ease: [0.25, 1, 0.5, 1] }}
@@ -753,8 +749,8 @@ function DashboardContent() {
             </div>
           </div>
 
-          {/* Risk Analysis Panel - Enhanced & Data Dense */}
-          <div className="lg:col-span-1" data-tour="analysis">
+          {/* Risk Analysis Panel */}
+          <div className="lg:col-span-1" data-tour="analysis" aria-live="polite">
             <AnimatePresence mode="wait">
               {(selectedDoc && selectedAnalysis) || (!selectedDoc && portfolioRisk) ? (
                 <motion.div
@@ -785,13 +781,18 @@ function DashboardContent() {
                     const highlights = selectedAnalysis ? selectedAnalysis.high_risk_highlights : portfolioRisk!.highlights
                     return (
                       <div className="p-6 space-y-6">
-                        {/* Overall Risk - Left-border treatment */}
+                        {/* Overall Risk */}
                         <motion.div
-                          className={`flex items-center gap-4 pl-5 py-3 border-l-4 ${riskAccentBorder[overallRisk] ?? 'border-l-ink-600'}`}
+                          className="flex items-center gap-4 py-3"
                           initial={{ opacity: 0, x: -8 }}
                           animate={{ opacity: 1, x: 0 }}
                           transition={{ duration: 0.35, ease: [0.25, 1, 0.5, 1] }}
                         >
+                          <div className={`w-3.5 h-3.5 rounded-full shrink-0 ${
+                            overallRisk === 'critical' ? 'bg-red-500 shadow-[0_0_8px_rgba(239,68,68,0.4)]' :
+                            overallRisk === 'high' ? 'bg-orange-500 shadow-[0_0_8px_rgba(249,115,22,0.4)]' :
+                            overallRisk === 'medium' ? 'bg-amber-500' : 'bg-emerald-500'
+                          }`} />
                           <div>
                             <div className={`text-3xl font-bold uppercase tracking-tight ${
                               overallRisk === 'critical' ? 'text-red-400' :
@@ -822,7 +823,7 @@ function DashboardContent() {
                                 transition={{ delay: idx * 0.06, duration: 0.3, ease: [0.25, 1, 0.5, 1] }}
                               >
                                 <div className={`text-2xl font-bold tabular-nums ${color}`}>{riskCounts[level]}</div>
-                                <div className="text-[10px] text-ink-600 mt-0.5 capitalize">{level}</div>
+                                <div className="text-[11px] text-ink-600 mt-0.5 capitalize">{level}</div>
                               </motion.div>
                             ))}
                           </div>
diff --git a/frontend/src/app/deals/[id]/page.tsx b/frontend/src/app/deals/[id]/page.tsx
index 4dbdbb1..5f32d4d 100644
--- a/frontend/src/app/deals/[id]/page.tsx
+++ b/frontend/src/app/deals/[id]/page.tsx
@@ -249,7 +249,7 @@ export default function DealDetailPage() {
             </div>
             <div className="flex items-center gap-4 mt-2">
               {(['critical', 'high', 'medium', 'low'] as RiskLevel[]).map((level) => (
-                <span key={level} className={`text-[10px] font-mono ${riskColors[level].split(' ')[0]}`}>
+                <span key={level} className={`text-[11px] font-mono ${riskColors[level].split(' ')[0]}`}>
                   {level}: {deal.risk_summary[level] || 0}
                 </span>
               ))}
diff --git a/frontend/src/app/deals/page.tsx b/frontend/src/app/deals/page.tsx
index 1c75539..1c85462 100644
--- a/frontend/src/app/deals/page.tsx
+++ b/frontend/src/app/deals/page.tsx
@@ -152,7 +152,7 @@ export default function DealsPage() {
                 ].map(({ label, icon: Icon }) => (
                   <div key={label} className="p-2.5 rounded-lg border border-ink-800/30">
                     <Icon className="w-4 h-4 text-ink-500 mx-auto mb-1" />
-                    <p className="text-[10px] font-mono text-ink-500 uppercase">{label}</p>
+                    <p className="text-[11px] font-mono text-ink-500 uppercase">{label}</p>
                   </div>
                 ))}
               </div>
@@ -198,12 +198,12 @@ export default function DealsPage() {
                   {deal.documents.length > 0 && (
                     <div className="mt-2 flex flex-wrap gap-1">
                       {deal.documents.slice(0, 3).map((doc) => (
-                        <span key={doc.id} className="text-[10px] text-ink-400 bg-ink-800/50 px-2 py-0.5 rounded truncate max-w-[120px]">
+                        <span key={doc.id} className="text-[11px] text-ink-400 bg-ink-800/50 px-2 py-0.5 rounded truncate max-w-[120px]">
                           {doc.filename}
                         </span>
                       ))}
                       {deal.document_count > 3 && (
-                        <span className="text-[10px] text-ink-500 px-1">+{deal.document_count - 3} more</span>
+                        <span className="text-[11px] text-ink-500 px-1">+{deal.document_count - 3} more</span>
                       )}
                     </div>
                   )}
diff --git a/frontend/src/app/documents/[id]/chat-panel.tsx b/frontend/src/app/documents/[id]/chat-panel.tsx
index 164b47f..4e22ef3 100644
--- a/frontend/src/app/documents/[id]/chat-panel.tsx
+++ b/frontend/src/app/documents/[id]/chat-panel.tsx
@@ -146,7 +146,7 @@ export function ChatPanel({ documentId }: { documentId: string }) {
                           <span
                             key={j}
                             className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full
-                                       bg-ink-800/50 text-[10px] text-ink-500 font-mono"
+                                       bg-ink-800/50 text-[11px] text-ink-500 font-mono"
                             title={src.content}
                           >
                             <FileText className="w-3 h-3" />
diff --git a/frontend/src/app/documents/[id]/graph/page.tsx b/frontend/src/app/documents/[id]/graph/page.tsx
index 27dd272..7c7f13b 100644
--- a/frontend/src/app/documents/[id]/graph/page.tsx
+++ b/frontend/src/app/documents/[id]/graph/page.tsx
@@ -885,7 +885,7 @@ export default function GraphPage() {
                                 </div>
                                 <ChevronRight className="w-3.5 h-3.5 text-ink-600 group-hover:text-accent flex-shrink-0" />
                               </div>
-                              <div className="mt-1 flex items-center gap-1.5 text-[10px] text-ink-500">
+                              <div className="mt-1 flex items-center gap-1.5 text-[11px] text-ink-500">
                                 <span className="uppercase">{otherNode.type}</span>
                                 {edge.label && edge.label !== 'relates_to' && (
                                   <>
@@ -933,11 +933,11 @@ export default function GraphPage() {
                     <div className="grid grid-cols-2 gap-2">
                       <div className="p-2.5 bg-ink-900/30 rounded-lg text-center">
                         <p className="text-lg font-bold font-mono text-ink-200">{connectedCount}</p>
-                        <p className="text-[10px] text-ink-500 uppercase">Connections</p>
+                        <p className="text-[11px] text-ink-500 uppercase">Connections</p>
                       </div>
                       <div className="p-2.5 bg-ink-900/30 rounded-lg text-center">
                         <p className="text-lg font-bold font-mono text-ink-200">{sameTypeCount}</p>
-                        <p className="text-[10px] text-ink-500 uppercase">Same Type</p>
+                        <p className="text-[11px] text-ink-500 uppercase">Same Type</p>
                       </div>
                     </div>
                   )
@@ -1076,7 +1076,7 @@ export default function GraphPage() {
                                   <ChevronRight className="w-3.5 h-3.5 text-ink-600 flex-shrink-0" />
                                 </div>
                                 {edge.label && edge.label !== 'relates_to' && (
-                                  <span className="text-[10px] text-accent/70 mt-0.5 block">{edge.label.replace(/_/g, ' ')}</span>
+                                  <span className="text-[11px] text-accent/70 mt-0.5 block">{edge.label.replace(/_/g, ' ')}</span>
                                 )}
                               </button>
                             )
@@ -1102,11 +1102,11 @@ export default function GraphPage() {
                       <div className="grid grid-cols-2 gap-2">
                         <div className="p-2 bg-ink-800/30 rounded-lg text-center">
                           <p className="text-lg font-bold font-mono text-ink-200">{connectedCount}</p>
-                          <p className="text-[10px] text-ink-500 uppercase">Connections</p>
+                          <p className="text-[11px] text-ink-500 uppercase">Connections</p>
                         </div>
                         <div className="p-2 bg-ink-800/30 rounded-lg text-center">
                           <p className="text-lg font-bold font-mono text-ink-200">{sameTypeCount}</p>
-                          <p className="text-[10px] text-ink-500 uppercase">Same Type</p>
+                          <p className="text-[11px] text-ink-500 uppercase">Same Type</p>
                         </div>
                       </div>
                     )
diff --git a/frontend/src/app/documents/[id]/page.tsx b/frontend/src/app/documents/[id]/page.tsx
index 5fa99da..e6a21c3 100644
--- a/frontend/src/app/documents/[id]/page.tsx
+++ b/frontend/src/app/documents/[id]/page.tsx
@@ -58,7 +58,7 @@ function ByokForm({ onSubmit, initialKey, onCancel }: {
         }`}
       />
       {showValidationHint && (
-        <p className="text-[10px] text-red-400 mb-3">Key must start with &quot;sk-ant-&quot;</p>
+        <p className="text-[11px] text-red-400 mb-3">Key must start with &quot;sk-ant-&quot;</p>
       )}
       {!showValidationHint && <div className="mb-3" />}
       <div className="flex gap-2">
@@ -69,7 +69,7 @@ function ByokForm({ onSubmit, initialKey, onCancel }: {
           Cancel
         </button>
       </div>
-      <p className="text-[10px] text-ink-600 mt-3 text-center">
+      <p className="text-[11px] text-ink-600 mt-3 text-center">
         Get your key at <span className="text-ink-400">console.anthropic.com</span>
       </p>
     </form>
@@ -942,7 +942,7 @@ export default function DocumentDetailPage() {
                           const risk = riskConfig[clause.risk_level as RiskLevel] || riskConfig.low
                           return (
                             <div key={i} className="flex items-start gap-3 p-3 bg-ink-900/30 rounded-lg">
-                              <span className={`px-2 py-0.5 rounded-full text-[10px] font-medium uppercase ${risk.color} ${risk.bg}/10 flex-shrink-0 mt-0.5`}>
+                              <span className={`px-2 py-0.5 rounded-full text-[11px] font-medium uppercase ${risk.color} ${risk.bg}/10 flex-shrink-0 mt-0.5`}>
                                 {clause.risk_level}
                               </span>
                               <div>
diff --git a/frontend/src/app/documents/[id]/pdf-viewer.tsx b/frontend/src/app/documents/[id]/pdf-viewer.tsx
index 6f0aa4b..68870e5 100644
--- a/frontend/src/app/documents/[id]/pdf-viewer.tsx
+++ b/frontend/src/app/documents/[id]/pdf-viewer.tsx
@@ -61,7 +61,7 @@ export function PdfViewer({ documentId, clauses, activeClauseId, onClauseClick }
           ) : (
             sortedPages.map((page) => (
               <div key={page}>
-                <div className="px-4 py-2 bg-ink-900/30 text-[10px] font-mono uppercase tracking-wide text-ink-500 sticky top-0">
+                <div className="px-4 py-2 bg-ink-900/30 text-[11px] font-mono uppercase tracking-wide text-ink-500 sticky top-0">
                   {page === 0 ? 'Unknown Page' : `Page ${page}`}
                 </div>
                 {clausesByPage[page].map((clause) => {
diff --git a/frontend/src/app/documents/[id]/timeline.tsx b/frontend/src/app/documents/[id]/timeline.tsx
index 7bcabaa..def2014 100644
--- a/frontend/src/app/documents/[id]/timeline.tsx
+++ b/frontend/src/app/documents/[id]/timeline.tsx
@@ -60,7 +60,7 @@ export function Timeline({ documentId }: { documentId: string }) {
         {Object.entries(typeConfig)
           .filter(([type]) => events.some(e => e.type === type))
           .map(([type, config]) => (
-            <span key={type} className="flex items-center gap-1.5 text-[10px] text-ink-400">
+            <span key={type} className="flex items-center gap-1.5 text-[11px] text-ink-400">
               <span className={`w-2 h-2 rounded-full ${config.bg}`} />
               {config.label}
             </span>
@@ -102,7 +102,7 @@ export function Timeline({ documentId }: { documentId: string }) {
                         <AlertTriangle className="w-3 h-3 text-amber-400" />
                       )}
                       {event.page_number != null && (
-                        <span className="text-[10px] text-ink-600 font-mono">p.{event.page_number}</span>
+                        <span className="text-[11px] text-ink-600 font-mono">p.{event.page_number}</span>
                       )}
                     </div>
                     <p className="text-sm text-ink-200 mt-0.5 font-medium truncate">
diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index b1130b0..372726f 100644
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -7,27 +7,27 @@
   --font-body: 'DM Sans', -apple-system, sans-serif;
   --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
 
-  /* Dark theme (default) — RGB triplets for Tailwind opacity support */
-  --ink-50: 247 247 248;
-  --ink-100: 238 238 240;
-  --ink-200: 217 217 222;
-  --ink-300: 184 184 193;
-  --ink-400: 145 145 159;
-  --ink-500: 140 140 158;
-  --ink-600: 93 93 108;
-  --ink-700: 76 76 88;
-  --ink-800: 65 65 75;
-  --ink-900: 57 57 65;
-  --ink-925: 40 40 48;
-  --ink-950: 24 24 27;
-
-  --bg-primary: #0a0a0c;
-  --bg-secondary: #111114;
-  --bg-tertiary: #18181b;
-  --text-primary: #f4f4f5;
-  --text-secondary: #a1a1aa;
-  --text-muted: #71717a;
-  --border: #27272a;
+  /* Dark theme (default) — warm ink palette echoing gold/cream editorial identity */
+  --ink-50: 248 247 244;
+  --ink-100: 240 238 234;
+  --ink-200: 222 219 213;
+  --ink-300: 190 186 178;
+  --ink-400: 154 148 138;
+  --ink-500: 148 143 132;
+  --ink-600: 138 133 124;
+  --ink-700: 84 79 70;
+  --ink-800: 72 67 58;
+  --ink-900: 62 58 52;
+  --ink-925: 44 41 36;
+  --ink-950: 26 24 21;
+
+  --bg-primary: #0d0b08;
+  --bg-secondary: #14120e;
+  --bg-tertiary: #1c1a15;
+  --text-primary: #f5f4f1;
+  --text-secondary: #a8a49c;
+  --text-muted: #7a7770;
+  --border: #2c2922;
   --accent: #c9a227;
 }
 
@@ -62,8 +62,8 @@ html.light {
   --ink-200: 52 52 78;
   --ink-300: 74 74 106;
   --ink-400: 100 100 130;
-  --ink-500: 122 122 142;
-  --ink-600: 165 165 180;
+  --ink-500: 105 105 125;
+  --ink-600: 140 140 155;
   --ink-700: 200 196 188;
   --ink-800: 212 207 197;
   --ink-900: 240 237 230;
@@ -96,20 +96,20 @@ html.light {
   animation: shimmer 1.8s ease-in-out infinite;
 }
 
-/* Dark frame — preserves dark palette for product previews on light pages */
+/* Dark frame — preserves warm dark palette for product previews on light pages */
 .theme-dark-frame {
-  --ink-50: 247 247 248;
-  --ink-100: 238 238 240;
-  --ink-200: 217 217 222;
-  --ink-300: 184 184 193;
-  --ink-400: 145 145 159;
-  --ink-500: 140 140 158;
-  --ink-600: 93 93 108;
-  --ink-700: 76 76 88;
-  --ink-800: 65 65 75;
-  --ink-900: 57 57 65;
-  --ink-925: 40 40 48;
-  --ink-950: 24 24 27;
+  --ink-50: 248 247 244;
+  --ink-100: 240 238 234;
+  --ink-200: 222 219 213;
+  --ink-300: 190 186 178;
+  --ink-400: 154 148 138;
+  --ink-500: 148 143 132;
+  --ink-600: 138 133 124;
+  --ink-700: 84 79 70;
+  --ink-800: 72 67 58;
+  --ink-900: 62 58 52;
+  --ink-925: 44 41 36;
+  --ink-950: 26 24 21;
   --accent: #c9a227;
 }
 
@@ -188,7 +188,7 @@ body {
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: #3f3f46;
+  background: #46433c;
 }
 
 /* Risk glow effects */
@@ -296,9 +296,9 @@ body {
 .skeleton {
   background: linear-gradient(
     90deg,
-    rgba(39, 39, 42, 0.4) 25%,
-    rgba(63, 63, 70, 0.4) 50%,
-    rgba(39, 39, 42, 0.4) 75%
+    rgba(44, 41, 36, 0.4) 25%,
+    rgba(62, 58, 52, 0.4) 50%,
+    rgba(44, 41, 36, 0.4) 75%
   );
   background-size: 200% 100%;
   animation: shimmer 1.8s ease-in-out infinite;
diff --git a/frontend/src/app/hero-visual.tsx b/frontend/src/app/hero-visual.tsx
index 290c8af..842d8d2 100644
--- a/frontend/src/app/hero-visual.tsx
+++ b/frontend/src/app/hero-visual.tsx
@@ -59,10 +59,8 @@ export function HeroVisual() {
       transition={{ delay: 0.5, duration: 0.8, ease: [0.22, 1, 0.36, 1] }}
       className="relative"
     >
-      <div className="absolute -inset-10 bg-accent/5 blur-[80px] rounded-full pointer-events-none" />
-
       <div className="relative bg-ink-950/80 border border-ink-700/40 rounded-2xl backdrop-blur-xl overflow-hidden
-                      shadow-[0_20px_60px_rgba(0,0,0,0.5),0_0_40px_rgba(201,162,39,0.05)]">
+                      shadow-[0_20px_60px_rgba(0,0,0,0.5),0_0_80px_rgba(201,162,39,0.08)]">
         {/* Browser chrome */}
         <div className="flex items-center gap-2 px-4 py-2.5 border-b border-ink-800/40 bg-ink-900/60">
           <div className="flex gap-1.5">
@@ -71,7 +69,7 @@ export function HeroVisual() {
             <div className="w-2.5 h-2.5 rounded-full bg-ink-700/80" />
           </div>
           <div className="flex-1 flex justify-center">
-            <div className="px-4 py-1 bg-ink-800/50 rounded-md text-[10px] text-ink-500 font-mono">
+            <div className="px-4 py-1 bg-ink-800/50 rounded-md text-[11px] text-ink-500 font-mono">
               brightclause.com/documents/acme-techstart-ma
             </div>
           </div>
@@ -83,10 +81,10 @@ export function HeroVisual() {
           <div className="lg:col-span-3 p-5 lg:p-6 lg:border-r border-ink-800/30">
             <div className="flex items-start justify-between mb-5">
               <div>
-                <p className="text-[10px] text-ink-500 uppercase tracking-wider font-mono mb-1">Document Analysis</p>
+                <p className="text-[11px] text-ink-500 uppercase tracking-wider font-mono mb-1">Document Analysis</p>
                 <p className="text-sm font-medium text-ink-200">Acme Corp &ndash; TechStart Service Agreement</p>
               </div>
-              <span className="px-2.5 py-1 rounded-lg bg-orange-500/15 text-orange-400 text-[10px] font-mono font-bold uppercase tracking-wide
+              <span className="px-2.5 py-1 rounded-lg bg-orange-500/15 text-orange-400 text-[11px] font-mono font-bold uppercase tracking-wide
                              shadow-[0_0_12px_rgba(249,115,22,0.15)] border border-orange-500/20 shrink-0 ml-4">
                 HIGH RISK
               </span>
@@ -104,13 +102,13 @@ export function HeroVisual() {
                   >
                     {r.count}
                   </motion.p>
-                  <p className="text-[9px] text-ink-500 uppercase tracking-wider font-mono mt-0.5">{r.level}</p>
+                  <p className="text-[11px] text-ink-500 uppercase tracking-wider font-mono mt-0.5">{r.level}</p>
                   <div className="h-1.5 bg-ink-800/50 rounded-full mt-2 overflow-hidden">
                     <motion.div
-                      initial={{ width: 0 }}
-                      animate={{ width: `${(r.count / maxCount) * 100}%` }}
+                      initial={{ scaleX: 0 }}
+                      animate={{ scaleX: r.count / maxCount }}
                       transition={{ delay: 0.8 + i * 0.15, duration: 0.6, ease: 'easeOut' }}
-                      className={`h-full rounded-full ${r.color}`}
+                      className={`h-full w-full rounded-full origin-left ${r.color}`}
                       style={{ opacity: 0.7 }}
                     />
                   </div>
@@ -119,7 +117,7 @@ export function HeroVisual() {
             </div>
 
             {/* Clause list */}
-            <p className="text-[10px] text-ink-500 uppercase tracking-wider font-mono mb-2">Extracted Clauses</p>
+            <p className="text-[11px] text-ink-500 uppercase tracking-wider font-mono mb-2">Extracted Clauses</p>
             <div className="space-y-1.5">
               {mockClauses.map((c, i) => (
                 <motion.div
@@ -127,13 +125,13 @@ export function HeroVisual() {
                   initial={{ opacity: 0, x: -10 }}
                   animate={{ opacity: 1, x: 0 }}
                   transition={{ delay: 1.2 + i * 0.08 }}
-                  className="flex items-center justify-between py-2 px-3 bg-ink-800/40 rounded-lg border border-ink-700/30"
+                  className="flex items-center justify-between py-2 px-3 bg-ink-800/30 rounded-lg"
                 >
                   <div className="flex items-center gap-2.5 min-w-0">
-                    <span className="text-[10px] text-ink-400 font-mono shrink-0">{c.section}</span>
+                    <span className="text-[11px] text-ink-400 font-mono shrink-0">{c.section}</span>
                     <span className="text-xs text-ink-100 truncate">{c.type}</span>
                   </div>
-                  <span className={`text-[9px] font-mono font-bold uppercase px-1.5 py-0.5 rounded shrink-0 ml-2 ${clauseColors[c.risk]}`}>
+                  <span className={`text-[11px] font-mono font-bold uppercase px-1.5 py-0.5 rounded shrink-0 ml-2 ${clauseColors[c.risk]}`}>
                     {c.risk}
                   </span>
                 </motion.div>
@@ -144,8 +142,8 @@ export function HeroVisual() {
           {/* Right: Knowledge Graph */}
           <div className="lg:col-span-2 p-5 lg:p-6 border-t lg:border-t-0 border-ink-800/30 flex flex-col">
             <div className="flex items-center justify-between mb-3">
-              <p className="text-[10px] text-ink-500 uppercase tracking-wider font-mono">Knowledge Graph</p>
-              <p className="text-[10px] text-ink-600 font-mono">6 entities &middot; 7 relations</p>
+              <p className="text-[11px] text-ink-500 uppercase tracking-wider font-mono">Knowledge Graph</p>
+              <p className="text-[11px] text-ink-600 font-mono">6 entities &middot; 7 relations</p>
             </div>
 
             <div className="flex-1 flex items-center justify-center">
@@ -198,7 +196,7 @@ export function HeroVisual() {
               {entityLegend.map(t => (
                 <div key={t.label} className="flex items-center gap-1.5">
                   <div className={`w-1.5 h-1.5 rounded-full ${t.color}`} />
-                  <span className="text-[9px] text-ink-500 font-mono">{t.label}</span>
+                  <span className="text-[11px] text-ink-500 font-mono">{t.label}</span>
                 </div>
               ))}
             </div>
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
index 3efbc15..c241ac9 100644
--- a/frontend/src/app/layout.tsx
+++ b/frontend/src/app/layout.tsx
@@ -59,7 +59,7 @@ export const metadata: Metadata = {
   alternates: { canonical: 'https://brightclause.com' },
   robots: { index: true, follow: true },
   verification: { google: 'hjZkahLqQJUWRBpHS6iz4i4zyuy4MEC5WqFCRmbgFek' },
-  other: { 'theme-color': '#0a0a1a' },
+  other: { 'theme-color': '#0d0b08' },
   manifest: '/manifest.json',
   appleWebApp: {
     capable: true,
diff --git a/frontend/src/app/obligations/page.tsx b/frontend/src/app/obligations/page.tsx
index b9396cb..67a3378 100644
--- a/frontend/src/app/obligations/page.tsx
+++ b/frontend/src/app/obligations/page.tsx
@@ -258,10 +258,10 @@ export default function ObligationsPage() {
                             <div className="flex-1 min-w-0">
                               <p className="text-sm text-ink-100 leading-relaxed">{ob.description}</p>
                               <div className="flex flex-wrap items-center gap-2 mt-2">
-                                <span className={`px-2 py-0.5 rounded-full text-[10px] font-mono uppercase border ${sCfg.bg} ${sCfg.color}`}>
+                                <span className={`px-2 py-0.5 rounded-full text-[11px] font-mono uppercase border ${sCfg.bg} ${sCfg.color}`}>
                                   {sCfg.label}
                                 </span>
-                                <span className={`px-2 py-0.5 rounded-full text-[10px] font-mono uppercase ${cfg.bg} ${cfg.color}`}>
+                                <span className={`px-2 py-0.5 rounded-full text-[11px] font-mono uppercase ${cfg.bg} ${cfg.color}`}>
                                   {cfg.label}
                                 </span>
                                 {ob.due_date && (
diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index aa81c89..68b9b21 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -161,22 +161,19 @@ function TrustCard({ signal, index }: { signal: typeof trustSignals[number]; ind
       transition={{ delay: index * 0.1 }}
       className="p-6 bg-ink-900/30 border border-ink-800/40 rounded-xl group hover:border-accent/30 transition-all"
     >
-      <motion.div
-        className="w-11 h-11 rounded-xl bg-accent/10 text-accent flex items-center justify-center mb-4 group-hover:bg-accent/20 transition-colors"
-        animate={{ y: [0, -2, 0] }}
-        transition={{ duration: 3, repeat: Infinity, ease: 'easeInOut', delay: index * 0.5 }}
-      >
-        <signal.Icon className="w-5 h-5" />
-      </motion.div>
-      <div className="mb-3">
-        <span className="font-display text-2xl font-bold text-accent tabular-nums">
-          {signal.statPrefix ?? ''}{signal.statDisplay ?? count}{signal.statSuffix}
-        </span>
-        <span className="text-xs text-ink-500 ml-2 font-mono uppercase tracking-wider">
-          {signal.statLabel}
-        </span>
+      <div className="flex items-start gap-4 mb-3">
+        <div
+          className="w-11 h-11 rounded-xl bg-accent/10 text-accent flex items-center justify-center shrink-0 group-hover:bg-accent/20 transition-colors"
+        >
+          <signal.Icon className="w-5 h-5" />
+        </div>
+        <div className="min-w-0">
+          <h3 className="font-display text-base font-semibold text-ink-100">{signal.title}</h3>
+          <span className="text-xs font-mono text-accent/80 bg-accent/8 px-1.5 py-0.5 rounded mt-1 inline-block">
+            {signal.statPrefix ?? ''}{signal.statDisplay ?? count}{signal.statSuffix} {signal.statLabel}
+          </span>
+        </div>
       </div>
-      <h3 className="font-display text-base font-semibold text-ink-100 mb-2">{signal.title}</h3>
       <p className="text-sm text-ink-500 leading-relaxed">{signal.description}</p>
     </motion.div>
   )
@@ -357,7 +354,7 @@ export default function LandingPage() {
                       <item.Icon className="w-6 h-6" />
                     </div>
                     <div className="absolute -top-2 -right-2 w-5 h-5 rounded-full bg-ink-950 border border-accent/40 flex items-center justify-center">
-                      <span className="text-[9px] font-mono text-accent font-bold leading-none">{String(i + 1).padStart(2, '0')}</span>
+                      <span className="text-[11px] font-mono text-accent font-bold leading-none">{String(i + 1).padStart(2, '0')}</span>
                     </div>
                   </div>
                   <h3 className="font-display text-sm font-semibold text-ink-100 mb-1">{item.title}</h3>
@@ -436,26 +433,32 @@ export default function LandingPage() {
             </div>
           </div>
 
-          {/* Remaining 9 features — compact */}
-          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
-            {features.slice(3).map((feature, i) => (
-              <motion.div
-                key={i}
-                initial={{ opacity: 0, y: 16 }}
-                whileInView={{ opacity: 1, y: 0 }}
-                viewport={{ once: true }}
-                transition={{ delay: i * 0.04 }}
-                className="flex items-start gap-4 p-5 bg-ink-900/20 border border-ink-800/40 rounded-xl hover:border-accent/20 hover:bg-ink-900/40 transition-all group"
-              >
-                <div className="w-9 h-9 rounded-lg bg-accent/10 text-accent flex items-center justify-center shrink-0 group-hover:bg-accent/20 transition-colors">
-                  <feature.Icon className="w-4 h-4" />
-                </div>
-                <div className="min-w-0">
-                  <h3 className="font-display text-sm font-semibold text-ink-100 mb-1">{feature.title}</h3>
-                  <p className="text-xs text-ink-500 leading-relaxed">{feature.description}</p>
-                </div>
-              </motion.div>
-            ))}
+          {/* Remaining 9 features — alternating wide/compact rhythm */}
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+            {features.slice(3).map((feature, i) => {
+              const isWide = i % 3 === 0
+              return (
+                <motion.div
+                  key={i}
+                  initial={{ opacity: 0, y: 16 }}
+                  whileInView={{ opacity: 1, y: 0 }}
+                  viewport={{ once: true }}
+                  transition={{ delay: i * 0.04 }}
+                  className={`${isWide
+                    ? 'sm:col-span-2 flex items-center gap-6 p-6 bg-ink-900/30 border border-ink-800/50'
+                    : 'flex items-start gap-4 p-5 bg-ink-900/20 border border-ink-800/40'
+                  } rounded-xl hover:border-accent/20 hover:bg-ink-900/40 transition-all group`}
+                >
+                  <div className={`${isWide ? 'w-11 h-11 rounded-xl' : 'w-9 h-9 rounded-lg'} bg-accent/10 text-accent flex items-center justify-center shrink-0 group-hover:bg-accent/20 transition-colors`}>
+                    <feature.Icon className={isWide ? 'w-5 h-5' : 'w-4 h-4'} />
+                  </div>
+                  <div className="min-w-0">
+                    <h3 className={`font-display ${isWide ? 'text-base' : 'text-sm'} font-semibold text-ink-100 mb-1`}>{feature.title}</h3>
+                    <p className={`${isWide ? 'text-sm' : 'text-xs'} text-ink-500 leading-relaxed`}>{feature.description}</p>
+                  </div>
+                </motion.div>
+              )
+            })}
           </div>
         </div>
       </section>
@@ -605,7 +608,7 @@ export default function LandingPage() {
                   >
                     <div className={`w-0.5 self-stretch ${tier.bar} opacity-70`} />
                     <div className="flex-1 px-5 py-3 flex items-center gap-4">
-                      <span className="text-[10px] font-mono uppercase tracking-[0.12em] w-[5.5rem] shrink-0 text-ink-500">
+                      <span className="text-[11px] font-mono uppercase tracking-[0.12em] w-[5.5rem] shrink-0 text-ink-500">
                         {tier.label}
                       </span>
                       <div className="flex gap-2 flex-wrap">
diff --git a/frontend/src/app/providers.tsx b/frontend/src/app/providers.tsx
index b194816..3837730 100644
--- a/frontend/src/app/providers.tsx
+++ b/frontend/src/app/providers.tsx
@@ -1,12 +1,15 @@
 'use client'
 
+import { MotionConfig } from 'framer-motion'
 import { ToastProvider } from '@/lib/toast'
 import { ThemeProvider } from '@/lib/theme'
 
 export function Providers({ children }: { children: React.ReactNode }) {
   return (
     <ThemeProvider>
-      <ToastProvider>{children}</ToastProvider>
+      <MotionConfig reducedMotion="user">
+        <ToastProvider>{children}</ToastProvider>
+      </MotionConfig>
     </ThemeProvider>
   )
 }
diff --git a/frontend/src/components/DemoVideoModal.tsx b/frontend/src/components/DemoVideoModal.tsx
index 8054787..60a600a 100644
--- a/frontend/src/components/DemoVideoModal.tsx
+++ b/frontend/src/components/DemoVideoModal.tsx
@@ -144,7 +144,7 @@ export const DemoVideoModal: React.FC<DemoVideoModalProps> = ({ open, onClose })
         )}
 
         {/* Player container */}
-        <div className="rounded-2xl overflow-hidden border border-ink-800/50 shadow-2xl shadow-black/50 bg-[#06060a]">
+        <div className="rounded-2xl overflow-hidden border border-ink-800/50 shadow-2xl shadow-black/50 bg-[#0d0b08]">
           <Player
             ref={playerRef}
             component={BrightClauseDemo}
@@ -181,8 +181,8 @@ export const DemoVideoModal: React.FC<DemoVideoModalProps> = ({ open, onClose })
                   <div className={`absolute inset-0 ${isPast ? 'bg-accent/50' : 'bg-ink-800/40'}`} />
                   {isActive && (
                     <div
-                      className="absolute inset-y-0 left-0 bg-accent transition-[width] duration-100"
-                      style={{ width: `${progressInScene}%` }}
+                      className="absolute inset-0 bg-accent origin-left transition-transform duration-100"
+                      style={{ transform: `scaleX(${progressInScene / 100})` }}
                     />
                   )}
                   {i > 0 && <div className="absolute left-0 inset-y-0 w-px bg-ink-700/30" />}
@@ -200,7 +200,7 @@ export const DemoVideoModal: React.FC<DemoVideoModalProps> = ({ open, onClose })
                 <button
                   key={scene.name}
                   onClick={() => handleSeekToScene(scene.from)}
-                  className={`text-[10px] sm:text-xs font-mono py-2 transition-colors truncate
+                  className={`text-[11px] sm:text-xs font-mono py-2 transition-colors truncate
                     ${isActive ? 'text-accent font-bold' : 'text-ink-600 hover:text-ink-300'}`}
                   style={{ width: `${widthPct}%` }}
                 >
diff --git a/frontend/src/components/HeroVideoPlayer.tsx b/frontend/src/components/HeroVideoPlayer.tsx
index 08b0e60..89839f9 100644
--- a/frontend/src/components/HeroVideoPlayer.tsx
+++ b/frontend/src/components/HeroVideoPlayer.tsx
@@ -135,17 +135,12 @@ export const HeroVideoPlayer: React.FC<HeroVideoPlayerProps> = ({ onDismiss }) =
       )}
 
       <div className={isExpanded ? 'fixed inset-0 z-[60] flex items-center justify-center' : 'relative'}>
-        {/* Glow behind video (hidden when expanded) */}
-        {!isExpanded && (
-          <div className="absolute -inset-10 bg-accent/5 blur-[80px] rounded-full pointer-events-none" />
-        )}
-
         <div
           ref={containerRef}
           className={`relative bg-ink-950 overflow-hidden flex flex-col
             ${isExpanded
               ? 'w-full h-full'
-              : 'bg-ink-950/80 border border-ink-700/40 rounded-2xl backdrop-blur-xl shadow-[0_20px_60px_rgba(0,0,0,0.5),0_0_40px_rgba(201,162,39,0.05)]'
+              : 'bg-ink-950/80 border border-ink-700/40 rounded-2xl backdrop-blur-xl shadow-[0_20px_60px_rgba(0,0,0,0.5),0_0_80px_rgba(201,162,39,0.08)]'
             }`}
         >
           {/* Browser chrome header */}
@@ -156,7 +151,7 @@ export const HeroVideoPlayer: React.FC<HeroVideoPlayerProps> = ({ onDismiss }) =
               <div className="w-2.5 h-2.5 rounded-full bg-green-500/60" />
             </div>
             <div className="flex-1 flex justify-center">
-              <div className="px-4 py-1 bg-ink-800/50 rounded-md text-[10px] text-ink-500 font-mono">
+              <div className="px-4 py-1 bg-ink-800/50 rounded-md text-[11px] text-ink-500 font-mono">
                 brightclause.com — Demo
               </div>
             </div>
@@ -218,13 +213,13 @@ export const HeroVideoPlayer: React.FC<HeroVideoPlayerProps> = ({ onDismiss }) =
                   <div className={`absolute inset-0 ${isPast ? 'bg-accent/50' : 'bg-ink-800/40'}`} />
                   {isActive && (
                     <div
-                      className="absolute inset-y-0 left-0 bg-accent transition-[width] duration-100"
-                      style={{ width: `${progressInScene}%` }}
+                      className="absolute inset-0 bg-accent origin-left transition-transform duration-100"
+                      style={{ transform: `scaleX(${progressInScene / 100})` }}
                     />
                   )}
                 </div>
                 {/* Label */}
-                <span className={`font-mono truncate text-[9px] py-2.5 px-1 text-center
+                <span className={`font-mono truncate text-[11px] py-2.5 px-1 text-center
                   ${isActive ? 'text-accent' : 'text-ink-600 hover:text-ink-400'}`}>
                   {scene.name}
                 </span>
diff --git a/frontend/src/components/ScreenshotShowcase.tsx b/frontend/src/components/ScreenshotShowcase.tsx
index 28ddfb0..6fb350d 100644
--- a/frontend/src/components/ScreenshotShowcase.tsx
+++ b/frontend/src/components/ScreenshotShowcase.tsx
@@ -109,7 +109,7 @@ export function ScreenshotShowcase() {
   const showcaseCard = (
     <div
       className="rounded-2xl overflow-hidden border border-ink-700/40 shadow-[0_20px_60px_rgba(0,0,0,0.3),0_0_40px_rgba(201,162,39,0.04)] theme-dark-frame"
-      style={{ backgroundColor: '#080d18' }}
+      style={{ backgroundColor: '#0d0b08' }}
       onMouseEnter={() => setPaused(true)}
       onMouseLeave={() => setPaused(false)}
     >
@@ -121,7 +121,7 @@ export function ScreenshotShowcase() {
           <div className="w-2.5 h-2.5 rounded-full bg-green-500/60" />
         </div>
         <div className="flex-1 flex justify-center">
-          <div className="px-4 py-1 bg-ink-800/50 rounded-md text-[10px] text-ink-500 font-mono">
+          <div className="px-4 py-1 bg-ink-800/50 rounded-md text-[11px] text-ink-500 font-mono">
             brightclause.com/{SCREENS[active].id === 'dashboard' ? '' : SCREENS[active].id}
           </div>
         </div>
@@ -159,7 +159,6 @@ export function ScreenshotShowcase() {
               fill
               className="object-cover object-top"
               sizes="(max-width: 1200px) 100vw, 1152px"
-              unoptimized
               priority={active === 0}
             />
           </motion.div>
diff --git a/frontend/src/components/demo-video/BrightClauseDemo.tsx b/frontend/src/components/demo-video/BrightClauseDemo.tsx
index 84bfe8e..21e291c 100644
--- a/frontend/src/components/demo-video/BrightClauseDemo.tsx
+++ b/frontend/src/components/demo-video/BrightClauseDemo.tsx
@@ -20,7 +20,7 @@ const SLIDE_T = 20;
 
 export const BrightClauseDemo: React.FC = () => {
   return (
-    <AbsoluteFill style={{ backgroundColor: "#06060a" }}>
+    <AbsoluteFill style={{ backgroundColor: "#0d0b08" }}>
       <TransitionSeries>
         {/* Intro */}
         <TransitionSeries.Sequence durationInFrames={INTRO} premountFor={30}>
diff --git a/frontend/src/components/demo-video/styles.ts b/frontend/src/components/demo-video/styles.ts
index a2549b5..414614e 100644
--- a/frontend/src/components/demo-video/styles.ts
+++ b/frontend/src/components/demo-video/styles.ts
@@ -1,9 +1,9 @@
 import { CSSProperties } from "react";
 
 export const colors = {
-  bg: "#06060a",
-  bgCard: "#0d0d14",
-  bgCardHover: "#12121c",
+  bg: "#0d0b08",
+  bgCard: "#14120e",
+  bgCardHover: "#1c1a15",
   border: "#1a1a2e",
   borderLight: "#252540",
   accent: "#c9a227",
diff --git a/frontend/src/lib/navigation.tsx b/frontend/src/lib/navigation.tsx
index ddcf6f9..1442962 100644
--- a/frontend/src/lib/navigation.tsx
+++ b/frontend/src/lib/navigation.tsx
@@ -43,7 +43,7 @@ export function Navigation({ children }: { children?: React.ReactNode }) {
               />
               <div className="hidden sm:block">
                 <span className="font-display text-xl font-bold tracking-tight text-ink-50">BrightClause</span>
-                <p className="text-[10px] text-ink-500 tracking-wide">Contract Intelligence</p>
+                <p className="text-[11px] text-ink-500 tracking-wide">Contract Intelligence</p>
               </div>
             </Link>
 
@@ -107,7 +107,7 @@ export function Navigation({ children }: { children?: React.ReactNode }) {
               <Link
                 key={href}
                 href={href}
-                className={`flex flex-1 flex-col items-center justify-center gap-1 py-2.5 text-[10px] font-medium transition-colors
+                className={`flex flex-1 flex-col items-center justify-center gap-1 py-2.5 text-[11px] font-medium transition-colors
                   ${active ? 'text-accent' : 'text-ink-500 hover:text-ink-200'}`}
               >
                 <Icon className={`w-5 h-5 ${active ? 'text-accent' : ''}`} aria-hidden="true" />
diff --git a/frontend/src/lib/toast.tsx b/frontend/src/lib/toast.tsx
index c7bbf17..018df53 100644
--- a/frontend/src/lib/toast.tsx
+++ b/frontend/src/lib/toast.tsx
@@ -108,7 +108,7 @@ export function ToastProvider({ children }: { children: React.ReactNode }) {
     <ToastContext.Provider value={contextValue}>
       {children}
       {mounted && createPortal(
-        <div className="fixed top-4 right-4 z-[100] flex flex-col gap-2 pointer-events-none">
+        <div className="fixed top-4 right-4 z-[100] flex flex-col gap-2 pointer-events-none" aria-live="polite" role="status">
           <AnimatePresence mode="popLayout">
             {toasts.map(t => (
               <div key={t.id} className="pointer-events-auto">
diff --git a/frontend/src/lib/walkthrough.tsx b/frontend/src/lib/walkthrough.tsx
index 83b3575..2b48437 100644
--- a/frontend/src/lib/walkthrough.tsx
+++ b/frontend/src/lib/walkthrough.tsx
@@ -206,9 +206,9 @@ export function WalkthroughOverlay({
           <div className="px-5">
             <div className="h-1 bg-ink-800 rounded-full overflow-hidden">
               <motion.div
-                className="h-full bg-accent rounded-full"
-                initial={{ width: 0 }}
-                animate={{ width: `${((step + 1) / totalSteps) * 100}%` }}
+                className="h-full w-full bg-accent rounded-full origin-left"
+                initial={{ scaleX: 0 }}
+                animate={{ scaleX: (step + 1) / totalSteps }}
                 transition={{ duration: 0.3 }}
               />
             </div>