Fix font family and weight in outcome visualization components

- Explicitly set font-family to Plus Jakarta Sans to ensure consistent rendering
- Change percentage text from font-bold to font-normal (weight 400) for lighter appearance
- Fix "3" character rendering with proper rounded top instead of flat top
- Keep modal header at font-extrabold for proper emphasis

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

Author: lucbrinkman

components/OutcomeBarGraph.tsx

@@ -35,6 +35,7 @@ export default function OutcomeBarGraph({
         <button
           onClick={() => setIsModalOpen(true)}
           className="w-10 h-32 bg-gray-900 border border-gray-800 rounded-lg overflow-hidden flex flex-col hover:border-gray-600 transition-colors cursor-pointer"
+          style={{ fontFamily: "'Plus Jakarta Sans', sans-serif" }}
         >
           {/* Good outcomes (top) */}
           {goodPercent > 0 && (
@@ -47,7 +48,7 @@ export default function OutcomeBarGraph({
               }}
             >
               {goodPercent > 15 && (
-                <span className="absolute inset-0 flex items-center justify-center text-base font-bold text-black">
+                <span className="absolute inset-0 flex items-center justify-center text-base font-normal text-black">
                   {goodPercent.toFixed(0)}
                 </span>
               )}
@@ -65,7 +66,7 @@ export default function OutcomeBarGraph({
               }}
             >
               {ambivalentPercent > 15 && (
-                <span className="absolute inset-0 flex items-center justify-center text-base font-bold text-black">
+                <span className="absolute inset-0 flex items-center justify-center text-base font-normal text-black">
                   {ambivalentPercent.toFixed(0)}
                 </span>
               )}
@@ -83,7 +84,7 @@ export default function OutcomeBarGraph({
               }}
             >
               {existentialPercent > 15 && (
-                <span className="absolute inset-0 flex items-center justify-center text-base font-bold text-black">
+                <span className="absolute inset-0 flex items-center justify-center text-base font-normal text-black">
                   {existentialPercent.toFixed(0)}
                 </span>
               )}

components/OutcomeDetailModal.tsx

@@ -72,7 +72,7 @@ export function OutcomeDetailModal({
         title={`${label}: ${categoryPercent}%`}
       >
         {heightPercent > 8 && (
-          <div className="absolute inset-0 flex items-center justify-center text-sm font-bold text-black">
+          <div className="absolute inset-0 flex items-center justify-center text-sm font-normal text-black">
             {label} - {categoryPercent}%
           </div>
         )}
@@ -85,6 +85,7 @@ export function OutcomeDetailModal({
       className="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
       onMouseDown={handleBackdropMouseDown}
       onMouseUp={handleBackdropMouseUp}
+      style={{ fontFamily: "'Plus Jakarta Sans', sans-serif" }}
     >
       <div
         className="bg-gray-900 rounded-lg shadow-xl max-w-4xl w-full mx-4 border border-gray-700"
@@ -93,7 +94,7 @@ export function OutcomeDetailModal({
       >
         {/* Header */}
         <div className="flex items-center justify-between p-6 border-b border-gray-800">
-          <h2 className="text-2xl font-bold text-white">
+          <h2 className="text-2xl font-extrabold text-white">
             Outcome Distribution
           </h2>
           <button