More UX updates.

Author: ProCO-RPHopkins

frontend/index.html

@@ -269,7 +269,9 @@ <h2 class="text-3xl font-bold mb-6 text-teal-600 dark:text-teal-300">Case Study
 
       <!-- Intro / Outcome -->
       <div class="grid md:grid-cols-3 gap-6 mb-10">
+        <!-- Intro summary -->
         <div class="md:col-span-2 bg-white dark:bg-slate-800 rounded-2xl p-6 ring-1 ring-gray-200 dark:ring-white/10">
+          <h3 class="font-semibold mb-2">Intro Summary</h3>
           <p class="text-gray-700 dark:text-white/85">
             A web platform for justice-impacted job seekers: save & track applications, analyze progress, and generate tailored résumés/cover letters with AI assistance.
           </p>
@@ -279,9 +281,11 @@ <h2 class="text-3xl font-bold mb-6 text-teal-600 dark:text-teal-300">Case Study
             <li>• Multi-model support (select different LLM providers) with safety guardrails.</li>
           </ul>
         </div>
-        <div class="bg-teal-50/60 dark:bg-teal-500/10 rounded-2xl p-6 ring-1 ring-teal-300/40 dark:ring-teal-400/20">
+
+        <!-- My Role — Context Engineer -->
+        <div class="bg-white dark:bg-slate-800 rounded-2xl p-6 ring-1 ring-gray-200 dark:ring-white/10">
           <h3 class="font-semibold mb-2">My Role — Context Engineer</h3>
-          <ul class="space-y-2 text-sm text-gray-800 dark:text-white/85">
+          <ul class="space-y-2 text-sm text-gray-700 dark:text-white/80">
             <li>• Designed prompt system & “context packs” for ranking and document generation.</li>
             <li>• Built guardrails (policy prompts + checks) and safe tool use patterns.</li>
             <li>• Set up evaluation loops: prompt tests, edge-case suites, and quality criteria.</li>

frontend/src/output.css

@@ -542,12 +542,6 @@
   .bg-rose-100 {
     background-color: var(--color-rose-100);
   }
-  .bg-teal-50\/60 {
-    background-color: color-mix(in srgb, oklch(98.4% 0.014 180.72) 60%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-teal-50) 60%, transparent);
-    }
-  }
   .bg-teal-100 {
     background-color: var(--color-teal-100);
   }
@@ -768,9 +762,6 @@
   .text-gray-700 {
     color: var(--color-gray-700);
   }
-  .text-gray-800 {
-    color: var(--color-gray-800);
-  }
   .text-gray-900 {
     color: var(--color-gray-900);
   }
@@ -842,12 +833,6 @@
   .ring-gray-300 {
     --tw-ring-color: var(--color-gray-300);
   }
-  .ring-teal-300\/40 {
-    --tw-ring-color: color-mix(in srgb, oklch(85.5% 0.138 181.071) 40%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      --tw-ring-color: color-mix(in oklab, var(--color-teal-300) 40%, transparent);
-    }
-  }
   .ring-teal-400 {
     --tw-ring-color: var(--color-teal-400);
   }
@@ -1172,14 +1157,6 @@
       }
     }
   }
-  .dark\:bg-teal-500\/10 {
-    @media (prefers-color-scheme: dark) {
-      background-color: color-mix(in srgb, oklch(70.4% 0.14 182.503) 10%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-teal-500) 10%, transparent);
-      }
-    }
-  }
   .dark\:bg-teal-500\/20 {
     @media (prefers-color-scheme: dark) {
       background-color: color-mix(in srgb, oklch(70.4% 0.14 182.503) 20%, transparent);
@@ -1311,14 +1288,6 @@
       }
     }
   }
-  .dark\:ring-teal-400\/20 {
-    @media (prefers-color-scheme: dark) {
-      --tw-ring-color: color-mix(in srgb, oklch(77.7% 0.152 181.912) 20%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--color-teal-400) 20%, transparent);
-      }
-    }
-  }
   .dark\:ring-white\/10 {
     @media (prefers-color-scheme: dark) {
       --tw-ring-color: color-mix(in srgb, #fff 10%, transparent);