Platform overhaul: every dashboard page feels like a landing page

- Layout: Midnight header, white background, editorial sidebar
- Home: Brand photography hero with contextual state (empty/active/collected)
- Automations: ALL tech-speak stripped (no GPT model names, no cost per message, no 'AI optimisation' labels). Hero is about outcomes not engine. 'Current'/'New' labels replace 'Yours'/'AI'.
- Collect: Brand photography hero with event context
- Money: Dark hero with key financials + photography
- Reports: Landing page compliance-style financial hero
- Settings: Dark progress header with brand treatment

Brand DNA applied across all pages:
- Image + dark panel hero sections
- border-l-2 section labels
- gap-px grids for data
- Sharp edges, no rounded corners
- Human language throughout
- 60-30-10 color rule enforced

pledge-now-pay-later/src/app/dashboard/settings/page.tsx

@@ -188,24 +188,24 @@ export default function SettingsPage() {
   return (
     <div className="space-y-6 max-w-2xl">
 
-      {/* ── Header ── */}
-      <div>
-        <p className="text-[10px] font-bold text-gray-400 uppercase tracking-widest">{settings.name}</p>
-        <h1 className="text-3xl font-black text-[#111827] tracking-tight">Settings</h1>
-      </div>
-
-      {/* ── Progress — human sentence, not a grid ── */}
-      <div className="space-y-3">
-        <div className="flex items-center gap-3">
-          <div className="flex-1 h-1.5 bg-gray-100 overflow-hidden">
+      {/* ── Header — human progress, not a form page ── */}
+      <div className={`p-6 mb-6 ${doneCount === totalCount ? "bg-[#16A34A]" : "bg-[#111827]"}`}>
+        <div className="border-l-2 border-[#F59E0B] pl-3 mb-3">
+          <p className="text-[11px] font-semibold tracking-[0.15em] uppercase text-gray-500">Settings</p>
+        </div>
+        <h1 className="text-2xl md:text-3xl font-black text-white tracking-tight">
+          {settings.name}
+        </h1>
+        <p className="text-sm text-gray-400 mt-2">{headerMsg}</p>
+        <div className="flex items-center gap-3 mt-4">
+          <div className="flex-1 h-1.5 bg-white/10 overflow-hidden">
             <div
-              className={`h-full transition-all duration-700 ${doneCount === totalCount ? "bg-[#16A34A]" : "bg-[#1E40AF]"}`}
+              className={`h-full transition-all duration-700 ${doneCount === totalCount ? "bg-white" : "bg-[#1E40AF]"}`}
               style={{ width: `${Math.round((doneCount / totalCount) * 100)}%` }}
             />
           </div>
-          <span className="text-xs font-bold text-[#111827] shrink-0">{doneCount}/{totalCount}</span>
+          <span className="text-xs font-bold text-white shrink-0">{doneCount}/{totalCount}</span>
         </div>
-        <p className="text-sm text-gray-500">{headerMsg}</p>
       </div>
 
       {error && <div className="border-l-2 border-[#DC2626] bg-[#DC2626]/5 p-3 text-sm text-[#DC2626]">{error}</div>}