sync: Auto-sync from ACG-M-L5090 at 2026-03-10 19:11:00

Synced files:
- Quote wizard frontend (all components, hooks, types, config)
- API updates (config, models, routers, schemas, services)
- Client work (bg-builders, gurushow)
- Scripts (BGB Lesley termination, CIPP, Datto, migration)
- Temp files (Bardach contacts, VWP investigation, misc)
- Credentials and session logs
- Email service, PHP API, session logs

Machine: ACG-M-L5090
Timestamp: 2026-03-10 19:11:00

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

projects/msp-tools/quote-wizard/frontend/src/components/pricing/ExpandableInfo.tsx

@@ -21,22 +21,29 @@ export function ExpandableInfo({
   const [isExpanded, setIsExpanded] = useState(defaultExpanded);
 
   return (
-    <div className={cn('border border-gray-200 rounded-lg overflow-hidden', className)}>
+    <div className={cn('border border-gray-200/80 rounded-xl overflow-hidden bg-white shadow-card', className)}>
       <button
         type="button"
         onClick={() => setIsExpanded(!isExpanded)}
-        className="w-full flex items-center justify-between p-4 text-left hover:bg-gray-50 transition-colors"
+        className="w-full flex items-center justify-between p-4 text-left hover:bg-[#f8f9fb] transition-colors"
         aria-expanded={isExpanded}
       >
         <div className="flex items-center gap-3">
-          {icon || <HelpCircle className="w-5 h-5 text-[#fe7400]" />}
-          <span className="font-medium text-[#333d49]">{title}</span>
+          {icon || (
+            <div className="w-8 h-8 rounded-lg bg-[#fe7400]/8 flex items-center justify-center flex-shrink-0">
+              <HelpCircle className="w-4 h-4 text-[#fe7400]" />
+            </div>
+          )}
+          <span className="font-semibold text-[#333d49] text-sm"
+                style={{ fontFamily: "'Plus Jakarta Sans', sans-serif" }}>
+            {title}
+          </span>
         </div>
         <motion.div
           animate={{ rotate: isExpanded ? 180 : 0 }}
           transition={{ duration: 0.2 }}
         >
-          <ChevronDown className="w-5 h-5 text-gray-400" />
+          <ChevronDown className="w-4 h-4 text-gray-400" />
         </motion.div>
       </button>
 
@@ -48,8 +55,8 @@ export function ExpandableInfo({
             exit={{ height: 0, opacity: 0 }}
             transition={{ duration: 0.2 }}
           >
-            <div className="px-4 pb-4 pt-0 text-sm text-gray-600 border-t border-gray-100">
-              <div className="pt-4">{children}</div>
+            <div className="px-4 pb-4 pt-0 text-sm text-gray-500 border-t border-gray-100">
+              <div className="pt-4 leading-relaxed">{children}</div>
             </div>
           </motion.div>
         )}