@eric-emg/symphiq-components 1.2.519 → 1.2.520

package/fesm2022/symphiq-components.mjs

@@ -2063,12 +2063,23 @@ class HeaderScrollService {
             this.consecutiveDirectionCount = 0;
             if (finalDesiredState) {
                 const beforeScroll = window.scrollY;
-                window.scrollBy(0, this.HEADER_HEIGHT_DIFF);
-                this.log('Scroll compensation applied', {
-                    before: beforeScroll,
-                    after: window.scrollY,
-                    compensation: this.HEADER_HEIGHT_DIFF
-                });
+                const windowHeight = window.innerHeight;
+                const documentHeight = document.documentElement.scrollHeight;
+                const maxScroll = documentHeight - windowHeight - this.HEADER_HEIGHT_DIFF;
+                if (beforeScroll < maxScroll) {
+                    window.scrollBy(0, this.HEADER_HEIGHT_DIFF);
+                    this.log('Scroll compensation applied', {
+                        before: beforeScroll,
+                        after: window.scrollY,
+                        compensation: this.HEADER_HEIGHT_DIFF
+                    });
+                }
+                else {
+                    this.log('Scroll compensation skipped - near bottom of page', {
+                        beforeScroll,
+                        maxScroll
+                    });
+                }
             }
             setTimeout(() => {
                 this.isProgrammaticScroll = false;
@@ -2113,12 +2124,25 @@ class HeaderScrollService {
         this.consecutiveDirectionCount = 0;
         if (desiredState) {
             const beforeScroll = window.scrollY;
-            window.scrollBy(0, this.HEADER_HEIGHT_DIFF);
-            this.log('Scroll compensation applied', {
-                before: beforeScroll,
-                after: window.scrollY,
-                compensation: this.HEADER_HEIGHT_DIFF
-            });
+            const windowHeight = window.innerHeight;
+            const documentHeight = document.documentElement.scrollHeight;
+            const maxScroll = documentHeight - windowHeight - this.HEADER_HEIGHT_DIFF;
+            if (beforeScroll < maxScroll) {
+                window.scrollBy(0, this.HEADER_HEIGHT_DIFF);
+                this.log('Scroll compensation applied', {
+                    before: beforeScroll,
+                    after: window.scrollY,
+                    compensation: this.HEADER_HEIGHT_DIFF
+                });
+            }
+            else {
+                this.log('Scroll compensation skipped - near bottom of page', {
+                    beforeScroll,
+                    maxScroll,
+                    documentHeight,
+                    windowHeight
+                });
+            }
         }
         setTimeout(() => {
             this.isProgrammaticScroll = false;
@@ -52488,15 +52512,469 @@ class FocusAreaToolsModalComponent {
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FocusAreaToolsModalComponent, { className: "FocusAreaToolsModalComponent", filePath: "lib/components/create-account-dashboard/focus-area-tools-modal.component.ts", lineNumber: 149 }); })();
 
+function SearchButtonComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span");
+    i0.ɵɵtext(1, "Search");
+    i0.ɵɵelementEnd();
+} }
+class SearchButtonComponent {
+    constructor() {
+        this.isLightMode = input(false, ...(ngDevMode ? [{ debugName: "isLightMode" }] : []));
+        this.minimized = input(false, ...(ngDevMode ? [{ debugName: "minimized" }] : []));
+        this.title = input('Search (/ or Cmd+K)', ...(ngDevMode ? [{ debugName: "title" }] : []));
+        this.searchClick = output();
+        this.buttonClass = computed(() => {
+            if (this.isLightMode()) {
+                return 'bg-slate-100 text-slate-700 hover:bg-slate-200 hover:text-slate-900';
+            }
+            return 'bg-slate-800 text-slate-300 hover:bg-slate-700 hover:text-white';
+        }, ...(ngDevMode ? [{ debugName: "buttonClass" }] : []));
+    }
+    static { this.ɵfac = function SearchButtonComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SearchButtonComponent)(); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SearchButtonComponent, selectors: [["symphiq-search-button"]], inputs: { isLightMode: [1, "isLightMode"], minimized: [1, "minimized"], title: [1, "title"] }, outputs: { searchClick: "searchClick" }, decls: 4, vars: 9, consts: [["type", "button", 3, "click", "ngClass", "title"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"]], template: function SearchButtonComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "button", 0);
+            i0.ɵɵlistener("click", function SearchButtonComponent_Template_button_click_0_listener() { return ctx.searchClick.emit(); });
+            i0.ɵɵnamespaceSVG();
+            i0.ɵɵelementStart(1, "svg", 1);
+            i0.ɵɵelement(2, "path", 2);
+            i0.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(3, SearchButtonComponent_Conditional_3_Template, 2, 0, "span");
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵclassMap(ctx.minimized() ? "cursor-pointer p-2 rounded-lg transition-all duration-200 hover:scale-110" : "cursor-pointer flex items-center gap-2 px-3 py-1.5 rounded-lg text-xs font-medium transition-all duration-200 hover:scale-105");
+            i0.ɵɵproperty("ngClass", ctx.buttonClass())("title", ctx.title());
+            i0.ɵɵadvance();
+            i0.ɵɵclassProp("w-5", ctx.minimized())("h-5", ctx.minimized());
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(!ctx.minimized() ? 3 : -1);
+        } }, dependencies: [CommonModule, i1$1.NgClass], styles: ["[_nghost-%COMP%]{display:contents}"], changeDetection: 0 }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SearchButtonComponent, [{
+        type: Component,
+        args: [{ selector: 'symphiq-search-button', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule], template: `
+    <button
+      type="button"
+      (click)="searchClick.emit()"
+      [ngClass]="buttonClass()"
+      [title]="title()"
+      [class]="minimized() ? 'cursor-pointer p-2 rounded-lg transition-all duration-200 hover:scale-110' : 'cursor-pointer flex items-center gap-2 px-3 py-1.5 rounded-lg text-xs font-medium transition-all duration-200 hover:scale-105'">
+      <svg class="w-4 h-4" [class.w-5]="minimized()" [class.h-5]="minimized()" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
+      </svg>
+      @if (!minimized()) {
+        <span>Search</span>
+      }
+    </button>
+  `, styles: [":host{display:contents}\n"] }]
+    }], null, { isLightMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLightMode", required: false }] }], minimized: [{ type: i0.Input, args: [{ isSignal: true, alias: "minimized", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], searchClick: [{ type: i0.Output, args: ["searchClick"] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SearchButtonComponent, { className: "SearchButtonComponent", filePath: "lib/components/shared/search-button.component.ts", lineNumber: 30 }); })();
+
+function DashboardHeaderComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "div", 6);
+} }
+function DashboardHeaderComponent_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 7)(1, "symphiq-search-button", 16);
+    i0.ɵɵlistener("searchClick", function DashboardHeaderComponent_Conditional_11_Template_symphiq_search_button_searchClick_1_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSearchClick()); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(2, "button", 17);
+    i0.ɵɵlistener("click", function DashboardHeaderComponent_Conditional_11_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onViewModeClick()); });
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(3, "svg", 18);
+    i0.ɵɵelement(4, "path", 19)(5, "path", 20);
+    i0.ɵɵelementEnd();
+    i0.ɵɵnamespaceHTML();
+    i0.ɵɵelementStart(6, "span");
+    i0.ɵɵtext(7);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("isLightMode", ctx_r1.isLightMode());
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.getViewModeButtonClasses());
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(ctx_r1.viewModeLabel());
+} }
+function DashboardHeaderComponent_Conditional_12_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 21)(1, "div", 22);
+    i0.ɵɵtext(2, "Generated At");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 23);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(ctx_r1.metaLabelClass());
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassMap(ctx_r1.headerTitleClass());
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r1.formattedGeneratedDate());
+} }
+function DashboardHeaderComponent_Conditional_12_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 21)(1, "div", 22);
+    i0.ɵɵtext(2, "Requested by");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 23);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    let tmp_4_0;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(ctx_r1.metaLabelClass());
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassMap(ctx_r1.headerTitleClass());
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate2("", (tmp_4_0 = ctx_r1.requestedByUser()) == null ? null : tmp_4_0.firstName, " ", (tmp_4_0 = ctx_r1.requestedByUser()) == null ? null : tmp_4_0.lastName);
+} }
+function DashboardHeaderComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 8);
+    i0.ɵɵconditionalCreate(1, DashboardHeaderComponent_Conditional_12_Conditional_1_Template, 5, 5, "div", 21);
+    i0.ɵɵconditionalCreate(2, DashboardHeaderComponent_Conditional_12_Conditional_2_Template, 5, 6, "div", 21);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.formattedGeneratedDate() ? 1 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.requestedByUser() ? 2 : -1);
+} }
+function DashboardHeaderComponent_Conditional_19_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 24);
+    i0.ɵɵtext(1, "\u2014");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(2, "span", 25);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngClass", ctx_r1.isLightMode() ? "text-slate-400" : "text-slate-500");
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngClass", ctx_r1.getCondensedSubtitleClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.subtitle(), " ");
+} }
+function DashboardHeaderComponent_Conditional_21_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 26);
+    i0.ɵɵtext(1, "\u203A");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(2, "span", 26);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("opacity-0", ctx_r1.subsectionFading())("opacity-100", !ctx_r1.subsectionFading());
+    i0.ɵɵproperty("ngClass", ctx_r1.isLightMode() ? "text-slate-400" : "text-slate-500");
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("opacity-0", ctx_r1.subsectionFading())("opacity-100", !ctx_r1.subsectionFading());
+    i0.ɵɵproperty("ngClass", ctx_r1.isLightMode() ? "text-slate-500" : "text-slate-500");
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.currentSubsection(), " ");
+} }
+function DashboardHeaderComponent_Conditional_21_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 15)(1, "span", 26);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(3, DashboardHeaderComponent_Conditional_21_Conditional_3_Template, 4, 11);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("opacity-0", ctx_r1.sectionFading())("opacity-100", !ctx_r1.sectionFading());
+    i0.ɵɵproperty("ngClass", ctx_r1.isLightMode() ? "text-slate-600 font-medium" : "text-slate-400 font-medium");
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.currentSection(), " ");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.currentSubsection() ? 3 : -1);
+} }
+function DashboardHeaderComponent_Conditional_22_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "symphiq-search-button", 27);
+    i0.ɵɵlistener("searchClick", function DashboardHeaderComponent_Conditional_22_Template_symphiq_search_button_searchClick_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSearchClick()); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(1, "button", 28);
+    i0.ɵɵlistener("click", function DashboardHeaderComponent_Conditional_22_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onViewModeClick()); });
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(2, "svg", 18);
+    i0.ɵɵelement(3, "path", 19)(4, "path", 20);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("isLightMode", ctx_r1.isLightMode())("minimized", true);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.getViewModeButtonClasses());
+} }
+class DashboardHeaderComponent {
+    constructor() {
+        this.requestedByUser = input(...(ngDevMode ? [undefined, { debugName: "requestedByUser" }] : []));
+        this.createdDate = input(...(ngDevMode ? [undefined, { debugName: "createdDate" }] : []));
+        this.title = input('', ...(ngDevMode ? [{ debugName: "title" }] : []));
+        this.subtitle = input('', ...(ngDevMode ? [{ debugName: "subtitle" }] : []));
+        this.viewMode = input(ViewModeEnum.LIGHT, ...(ngDevMode ? [{ debugName: "viewMode" }] : []));
+        this.viewModeLabel = input('View Mode', ...(ngDevMode ? [{ debugName: "viewModeLabel" }] : []));
+        this.currentSection = input(...(ngDevMode ? [undefined, { debugName: "currentSection" }] : []));
+        this.currentSubsection = input(...(ngDevMode ? [undefined, { debugName: "currentSubsection" }] : []));
+        this.sectionFading = input(false, ...(ngDevMode ? [{ debugName: "sectionFading" }] : []));
+        this.subsectionFading = input(false, ...(ngDevMode ? [{ debugName: "subsectionFading" }] : []));
+        this.isLoading = input(...(ngDevMode ? [undefined, { debugName: "isLoading" }] : []));
+        this.showControls = input(true, ...(ngDevMode ? [{ debugName: "showControls" }] : []));
+        this.searchClick = output();
+        this.viewModeClick = output();
+        this.headerScrollService = inject(HeaderScrollService);
+        this.isLightMode = computed(() => this.viewMode() === ViewModeEnum.LIGHT, ...(ngDevMode ? [{ debugName: "isLightMode" }] : []));
+        this.dateFormatCache = new StringMemoizeCache();
+        this.formattedGeneratedDate = computed(() => {
+            let formatted = '';
+            const createdDate = this.createdDate();
+            if (createdDate) {
+                formatted = this.formatDate(createdDate.toISOString());
+            }
+            return formatted;
+        }, ...(ngDevMode ? [{ debugName: "formattedGeneratedDate" }] : []));
+        this.headerTitleClass = computed(() => this.isLightMode() ? 'text-slate-900' : 'text-white', ...(ngDevMode ? [{ debugName: "headerTitleClass" }] : []));
+        this.metaLabelClass = computed(() => this.isLightMode() ? 'text-slate-600' : 'text-slate-500', ...(ngDevMode ? [{ debugName: "metaLabelClass" }] : []));
+    }
+    onSearchClick() {
+        this.searchClick.emit();
+    }
+    onViewModeClick() {
+        this.viewModeClick.emit();
+    }
+    formatDate(dateString) {
+        // Cache date formatting operations
+        return this.dateFormatCache.get(dateString, (date) => new Date(date).toLocaleDateString('en-US', {
+            year: 'numeric',
+            month: 'long',
+            day: 'numeric',
+        }));
+    }
+    getHeaderClasses() {
+        return this.isLightMode()
+            ? 'bg-white/95 backdrop-blur-md shadow-sm border-b border-slate-200'
+            : 'bg-slate-900/95 backdrop-blur-md shadow-sm border-b border-slate-800';
+    }
+    getMainTitleClasses() {
+        return this.isLightMode()
+            ? 'text-3xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent'
+            : 'text-3xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent';
+    }
+    getSubtitleClasses() {
+        return this.isLightMode()
+            ? 'text-slate-600 mt-1 text-sm'
+            : 'text-slate-400 mt-1 text-sm';
+    }
+    getCondensedTitleClasses() {
+        return this.isLightMode()
+            ? 'text-xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent'
+            : 'text-xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent';
+    }
+    getCondensedSubtitleClasses() {
+        return this.isLightMode()
+            ? 'text-sm text-slate-500'
+            : 'text-sm text-slate-400';
+    }
+    getViewModeButtonClasses() {
+        return this.isLightMode()
+            ? 'bg-slate-100 hover:bg-slate-200 text-slate-700 border border-slate-200'
+            : 'bg-slate-800 hover:bg-slate-700 text-slate-300 border border-slate-700';
+    }
+    static { this.ɵfac = function DashboardHeaderComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || DashboardHeaderComponent)(); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DashboardHeaderComponent, selectors: [["symphiq-dashboard-header"]], inputs: { requestedByUser: [1, "requestedByUser"], createdDate: [1, "createdDate"], title: [1, "title"], subtitle: [1, "subtitle"], viewMode: [1, "viewMode"], viewModeLabel: [1, "viewModeLabel"], currentSection: [1, "currentSection"], currentSubsection: [1, "currentSubsection"], sectionFading: [1, "sectionFading"], subsectionFading: [1, "subsectionFading"], isLoading: [1, "isLoading"], showControls: [1, "showControls"] }, outputs: { searchClick: "searchClick", viewModeClick: "viewModeClick" }, decls: 23, vars: 27, consts: [[1, "sticky", "top-0", "z-50", "overflow-hidden", 2, "transition", "height 300ms ease-in-out", 3, "ngClass"], [1, "transition-opacity", "duration-300", "ease-in-out", "h-full"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-4", "h-full", "flex", "items-center"], [1, "flex", "items-center", "justify-between", "w-full"], [1, "flex", "items-center", "gap-3"], [3, "ngClass"], ["title", "Refreshing data...", 1, "animate-spin", "w-4", "h-4", "border-2", "border-blue-500/30", "border-t-blue-500", "rounded-full"], [1, "flex", "items-center", "gap-2"], [1, "flex", "flex-col", "gap-4", "min-w-[180px]"], [1, "absolute", "inset-x-0", "top-0", "transition-opacity", "duration-300", "ease-in-out"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-2"], [1, "flex", "items-center", "justify-between"], [1, "flex", "items-center", "gap-3", "flex-1", "min-w-0", "mr-4"], [1, "flex-shrink-0", "!mb-0", 3, "ngClass"], [1, "flex", "items-center", "gap-4"], [1, "flex", "items-center", "gap-2", "text-sm", "flex-shrink-0"], [3, "searchClick", "isLightMode"], ["type", "button", 1, "cursor-pointer", "flex", "items-center", "gap-2", "px-3", "py-1.5", "rounded-lg", "text-xs", "font-medium", "transition-all", "duration-200", "hover:scale-105", 3, "click", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M15 12a3 3 0 11-6 0 3 3 0 016 0z"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"], [1, "text-left", "sm:text-right"], [1, "text-xs", "sm:text-sm"], [1, "text-sm", "sm:text-base", "font-medium"], [1, "hidden", "sm:inline", 3, "ngClass"], [1, "hidden", "sm:block", "truncate", "min-w-0", 3, "ngClass"], [1, "transition-opacity", "duration-300", 3, "ngClass"], [3, "searchClick", "isLightMode", "minimized"], ["type", "button", 1, "cursor-pointer", "flex", "items-center", "gap-2", "px-2", "py-1.5", "rounded-lg", "text-xs", "font-medium", "transition-all", "duration-200", "hover:scale-105", 3, "click", "ngClass"]], template: function DashboardHeaderComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "header", 0)(1, "div", 1)(2, "div", 2)(3, "div", 3)(4, "div")(5, "div", 4)(6, "h1", 5);
+            i0.ɵɵtext(7);
+            i0.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(8, DashboardHeaderComponent_Conditional_8_Template, 1, 0, "div", 6);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(9, "p", 5);
+            i0.ɵɵtext(10);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵconditionalCreate(11, DashboardHeaderComponent_Conditional_11_Template, 8, 3, "div", 7);
+            i0.ɵɵconditionalCreate(12, DashboardHeaderComponent_Conditional_12_Template, 3, 2, "div", 8);
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(13, "div", 9)(14, "div", 10)(15, "div", 11)(16, "div", 12)(17, "h1", 13);
+            i0.ɵɵtext(18);
+            i0.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(19, DashboardHeaderComponent_Conditional_19_Template, 4, 3);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(20, "div", 14);
+            i0.ɵɵconditionalCreate(21, DashboardHeaderComponent_Conditional_21_Template, 4, 7, "div", 15);
+            i0.ɵɵconditionalCreate(22, DashboardHeaderComponent_Conditional_22_Template, 5, 3);
+            i0.ɵɵelementEnd()()()()();
+        } if (rf & 2) {
+            i0.ɵɵstyleProp("height", ctx.headerScrollService.isScrolled() ? "52px" : "100px");
+            i0.ɵɵproperty("ngClass", ctx.getHeaderClasses());
+            i0.ɵɵadvance();
+            i0.ɵɵclassProp("opacity-0", ctx.headerScrollService.isScrolled())("pointer-events-none", ctx.headerScrollService.isScrolled())("opacity-100", !ctx.headerScrollService.isScrolled());
+            i0.ɵɵadvance(5);
+            i0.ɵɵproperty("ngClass", ctx.getMainTitleClasses());
+            i0.ɵɵadvance();
+            i0.ɵɵtextInterpolate1(" ", ctx.title(), " ");
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.isLoading() ? 8 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngClass", ctx.getSubtitleClasses());
+            i0.ɵɵadvance();
+            i0.ɵɵtextInterpolate1(" ", ctx.subtitle(), " ");
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.showControls() ? 11 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.formattedGeneratedDate() || ctx.requestedByUser() ? 12 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵclassProp("opacity-0", !ctx.headerScrollService.isScrolled())("pointer-events-none", !ctx.headerScrollService.isScrolled())("opacity-100", ctx.headerScrollService.isScrolled());
+            i0.ɵɵadvance(4);
+            i0.ɵɵproperty("ngClass", ctx.getCondensedTitleClasses());
+            i0.ɵɵadvance();
+            i0.ɵɵtextInterpolate1(" ", ctx.title(), " ");
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.subtitle() ? 19 : -1);
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.currentSection() ? 21 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.showControls() ? 22 : -1);
+        } }, dependencies: [CommonModule, i1$1.NgClass, SearchButtonComponent], encapsulation: 2, changeDetection: 0 }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DashboardHeaderComponent, [{
+        type: Component,
+        args: [{
+                selector: 'symphiq-dashboard-header',
+                standalone: true,
+                imports: [CommonModule, SearchButtonComponent],
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: `
+    <header [ngClass]="getHeaderClasses()" class="sticky top-0 z-50 overflow-hidden" [style.height]="headerScrollService.isScrolled() ? '52px' : '100px'" style="transition: height 300ms ease-in-out;">
+        <!-- Expanded Header (default state) -->
+        <div
+          class="transition-opacity duration-300 ease-in-out h-full"
+          [class.opacity-0]="headerScrollService.isScrolled()"
+          [class.pointer-events-none]="headerScrollService.isScrolled()"
+          [class.opacity-100]="!headerScrollService.isScrolled()">
+          <div
+            class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 h-full flex items-center">
+          <div class="flex items-center justify-between w-full">
+            <div>
+              <div class="flex items-center gap-3">
+                <h1 [ngClass]="getMainTitleClasses()">
+                  {{ title() }}
+                </h1>
+                @if (isLoading()) {
+                  <div class="animate-spin w-4 h-4 border-2 border-blue-500/30 border-t-blue-500 rounded-full" title="Refreshing data..."></div>
+                }
+              </div>
+              <p [ngClass]="getSubtitleClasses()">
+                {{ subtitle() }}
+              </p>
+            </div>
+            @if (showControls()) {
+              <div class="flex items-center gap-2">
+                <symphiq-search-button
+                  [isLightMode]="isLightMode()"
+                  (searchClick)="onSearchClick()"
+                />
+                <button
+                  type="button"
+                  (click)="onViewModeClick()"
+                  [ngClass]="getViewModeButtonClasses()"
+                  class="cursor-pointer flex items-center gap-2 px-3 py-1.5 rounded-lg text-xs font-medium transition-all duration-200 hover:scale-105">
+                  <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
+                  </svg>
+                  <span>{{ viewModeLabel() }}</span>
+                </button>
+              </div>
+            }
+            @if (formattedGeneratedDate() || requestedByUser()) {
+              <div class="flex flex-col gap-4 min-w-[180px]">
+                @if (formattedGeneratedDate()) {
+                  <div class="text-left sm:text-right">
+                    <div [class]="metaLabelClass()" class="text-xs sm:text-sm">Generated At</div>
+                    <div [class]="headerTitleClass()" class="text-sm sm:text-base font-medium">{{ formattedGeneratedDate() }}</div>
+                  </div>
+                }
+                @if (requestedByUser()) {
+                  <div class="text-left sm:text-right">
+                    <div [class]="metaLabelClass()" class="text-xs sm:text-sm">Requested by</div>
+                    <div [class]="headerTitleClass()" class="text-sm sm:text-base font-medium">{{ requestedByUser()?.firstName }} {{ requestedByUser()?.lastName }}</div>
+                  </div>
+                }
+              </div>
+            }
+          </div>
+          </div>
+        </div>
+
+        <!-- Condensed Header (scrolled state) -->
+        <div
+          class="absolute inset-x-0 top-0 transition-opacity duration-300 ease-in-out"
+          [class.opacity-0]="!headerScrollService.isScrolled()"
+          [class.pointer-events-none]="!headerScrollService.isScrolled()"
+          [class.opacity-100]="headerScrollService.isScrolled()">
+          <div
+            class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-2">
+          <div class="flex items-center justify-between">
+            <div class="flex items-center gap-3 flex-1 min-w-0 mr-4">
+              <h1 [ngClass]="getCondensedTitleClasses()" class="flex-shrink-0 !mb-0">
+                {{ title() }}
+              </h1>
+              @if (subtitle()) {
+                <span [ngClass]="isLightMode() ? 'text-slate-400' : 'text-slate-500'" class="hidden sm:inline">—</span>
+                <span [ngClass]="getCondensedSubtitleClasses()" class="hidden sm:block truncate min-w-0">
+                  {{ subtitle() }}
+                </span>
+              }
+            </div>
+            <div class="flex items-center gap-4">
+              @if (currentSection()) {
+                <div class="flex items-center gap-2 text-sm flex-shrink-0">
+                  <span [ngClass]="isLightMode() ? 'text-slate-600 font-medium' : 'text-slate-400 font-medium'" class="transition-opacity duration-300" [class.opacity-0]="sectionFading()" [class.opacity-100]="!sectionFading()">
+                    {{ currentSection() }}
+                  </span>
+                  @if (currentSubsection()) {
+                    <span [ngClass]="isLightMode() ? 'text-slate-400' : 'text-slate-500'" class="transition-opacity duration-300" [class.opacity-0]="subsectionFading()" [class.opacity-100]="!subsectionFading()">›</span>
+                    <span [ngClass]="isLightMode() ? 'text-slate-500' : 'text-slate-500'" class="transition-opacity duration-300" [class.opacity-0]="subsectionFading()" [class.opacity-100]="!subsectionFading()">
+                      {{ currentSubsection() }}
+                    </span>
+                  }
+                </div>
+              }
+              @if (showControls()) {
+                <symphiq-search-button
+                  [isLightMode]="isLightMode()"
+                  [minimized]="true"
+                  (searchClick)="onSearchClick()"
+                />
+                <button
+                  type="button"
+                  (click)="onViewModeClick()"
+                  [ngClass]="getViewModeButtonClasses()"
+                  class="cursor-pointer flex items-center gap-2 px-2 py-1.5 rounded-lg text-xs font-medium transition-all duration-200 hover:scale-105">
+                  <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
+                  </svg>
+                </button>
+              }
+            </div>
+          </div>
+          </div>
+        </div>
+    </header>
+  `
+            }]
+    }], null, { requestedByUser: [{ type: i0.Input, args: [{ isSignal: true, alias: "requestedByUser", required: false }] }], createdDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "createdDate", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], viewModeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewModeLabel", required: false }] }], currentSection: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentSection", required: false }] }], currentSubsection: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentSubsection", required: false }] }], sectionFading: [{ type: i0.Input, args: [{ isSignal: true, alias: "sectionFading", required: false }] }], subsectionFading: [{ type: i0.Input, args: [{ isSignal: true, alias: "subsectionFading", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], showControls: [{ type: i0.Input, args: [{ isSignal: true, alias: "showControls", required: false }] }], searchClick: [{ type: i0.Output, args: ["searchClick"] }], viewModeClick: [{ type: i0.Output, args: ["viewModeClick"] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DashboardHeaderComponent, { className: "DashboardHeaderComponent", filePath: "lib/components/shared/dashboard-header.component.ts", lineNumber: 134 }); })();
+
 const _c0$E = ["shopNameInput"];
 const _forTrack0$B = ($index, $item) => $item.focusAreaDomain;
-function SymphiqCreateAccountDashboardComponent_Conditional_22_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 13);
-    i0.ɵɵelement(1, "symphiq-indeterminate-spinner", 17);
-    i0.ɵɵelementStart(2, "div", 18)(3, "h2", 19);
+function SymphiqCreateAccountDashboardComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 8);
+    i0.ɵɵelement(1, "symphiq-indeterminate-spinner", 12);
+    i0.ɵɵelementStart(2, "div", 13)(3, "h2", 14);
     i0.ɵɵtext(4, " Your account is being created ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "p", 20);
+    i0.ɵɵelementStart(5, "p", 15);
     i0.ɵɵtext(6, " Please wait while we set everything up for you... ");
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
@@ -52508,54 +52986,54 @@ function SymphiqCreateAccountDashboardComponent_Conditional_22_Template(rf, ctx)
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r0.sectionDescriptionClasses());
 } }
-function SymphiqCreateAccountDashboardComponent_Conditional_23_Conditional_1_Conditional_27_Template(rf, ctx) { if (rf & 1) {
+function SymphiqCreateAccountDashboardComponent_Conditional_9_Conditional_1_Conditional_27_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0, " Shopify ");
 } }
-function SymphiqCreateAccountDashboardComponent_Conditional_23_Conditional_1_Conditional_28_Template(rf, ctx) { if (rf & 1) {
+function SymphiqCreateAccountDashboardComponent_Conditional_9_Conditional_1_Conditional_28_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(3);
     i0.ɵɵtextInterpolate1(" ", ctx_r0.accountData().otherPlatformName || "Other", " ");
 } }
-function SymphiqCreateAccountDashboardComponent_Conditional_23_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+function SymphiqCreateAccountDashboardComponent_Conditional_9_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 21)(1, "div", 23)(2, "div", 24)(3, "div")(4, "h2", 19);
+    i0.ɵɵelementStart(0, "div", 16)(1, "div", 18)(2, "div", 19)(3, "div")(4, "h2", 14);
     i0.ɵɵtext(5, " Shop Details ");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(6, "p", 1);
     i0.ɵɵtext(7, " Your shop information ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "button", 25);
-    i0.ɵɵlistener("click", function SymphiqCreateAccountDashboardComponent_Conditional_23_Conditional_1_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.enableEditMode()); });
+    i0.ɵɵelementStart(8, "button", 20);
+    i0.ɵɵlistener("click", function SymphiqCreateAccountDashboardComponent_Conditional_9_Conditional_1_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.enableEditMode()); });
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(9, "svg", 26);
-    i0.ɵɵelement(10, "path", 27);
+    i0.ɵɵelementStart(9, "svg", 21);
+    i0.ɵɵelement(10, "path", 22);
     i0.ɵɵelementEnd();
     i0.ɵɵtext(11, " Edit ");
     i0.ɵɵelementEnd()();
     i0.ɵɵnamespaceHTML();
-    i0.ɵɵelementStart(12, "div", 28)(13, "div")(14, "label", 29);
+    i0.ɵɵelementStart(12, "div", 23)(13, "div")(14, "label", 24);
     i0.ɵɵtext(15, " Shop Name ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(16, "p", 20);
+    i0.ɵɵelementStart(16, "p", 15);
     i0.ɵɵtext(17);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(18, "div")(19, "label", 29);
+    i0.ɵɵelementStart(18, "div")(19, "label", 24);
     i0.ɵɵtext(20, " Shop URL ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(21, "a", 30);
+    i0.ɵɵelementStart(21, "a", 25);
     i0.ɵɵtext(22);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(23, "div")(24, "label", 29);
+    i0.ɵɵelementStart(23, "div")(24, "label", 24);
     i0.ɵɵtext(25, " Shop Platform ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(26, "p", 20);
-    i0.ɵɵconditionalCreate(27, SymphiqCreateAccountDashboardComponent_Conditional_23_Conditional_1_Conditional_27_Template, 1, 0)(28, SymphiqCreateAccountDashboardComponent_Conditional_23_Conditional_1_Conditional_28_Template, 1, 1);
+    i0.ɵɵelementStart(26, "p", 15);
+    i0.ɵɵconditionalCreate(27, SymphiqCreateAccountDashboardComponent_Conditional_9_Conditional_1_Conditional_27_Template, 1, 0)(28, SymphiqCreateAccountDashboardComponent_Conditional_9_Conditional_1_Conditional_28_Template, 1, 1);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(29, "div")(30, "label", 29);
+    i0.ɵɵelementStart(29, "div")(30, "label", 24);
     i0.ɵɵtext(31, " Company Name ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(32, "p", 20);
+    i0.ɵɵelementStart(32, "p", 15);
     i0.ɵɵtext(33);
     i0.ɵɵelementEnd()()()()();
 } if (rf & 2) {
@@ -52594,44 +53072,44 @@ function SymphiqCreateAccountDashboardComponent_Conditional_23_Conditional_1_Tem
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r0.accountData().companyName, " ");
 } }
-function SymphiqCreateAccountDashboardComponent_Conditional_23_Conditional_2_Conditional_15_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 36);
+function SymphiqCreateAccountDashboardComponent_Conditional_9_Conditional_2_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 31);
     i0.ɵɵtext(1, " Shop name is required ");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(3);
     i0.ɵɵproperty("ngClass", ctx_r0.errorClasses());
 } }
-function SymphiqCreateAccountDashboardComponent_Conditional_23_Conditional_2_Conditional_25_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 36);
+function SymphiqCreateAccountDashboardComponent_Conditional_9_Conditional_2_Conditional_25_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 31);
     i0.ɵɵtext(1, " Shop URL is required ");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(3);
     i0.ɵɵproperty("ngClass", ctx_r0.errorClasses());
 } }
-function SymphiqCreateAccountDashboardComponent_Conditional_23_Conditional_2_Conditional_36_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "div", 46);
+function SymphiqCreateAccountDashboardComponent_Conditional_9_Conditional_2_Conditional_36_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "div", 41);
 } }
-function SymphiqCreateAccountDashboardComponent_Conditional_23_Conditional_2_Conditional_44_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "div", 46);
+function SymphiqCreateAccountDashboardComponent_Conditional_9_Conditional_2_Conditional_44_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "div", 41);
 } }
-function SymphiqCreateAccountDashboardComponent_Conditional_23_Conditional_2_Conditional_48_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 36);
+function SymphiqCreateAccountDashboardComponent_Conditional_9_Conditional_2_Conditional_48_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 31);
     i0.ɵɵtext(1, " Platform name is required ");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(4);
     i0.ɵɵproperty("ngClass", ctx_r0.errorClasses());
 } }
-function SymphiqCreateAccountDashboardComponent_Conditional_23_Conditional_2_Conditional_48_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div")(1, "label", 33);
+function SymphiqCreateAccountDashboardComponent_Conditional_9_Conditional_2_Conditional_48_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div")(1, "label", 28);
     i0.ɵɵtext(2, " Platform Name ");
-    i0.ɵɵelementStart(3, "span", 34);
+    i0.ɵɵelementStart(3, "span", 29);
     i0.ɵɵtext(4, "*");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelement(5, "input", 55);
-    i0.ɵɵconditionalCreate(6, SymphiqCreateAccountDashboardComponent_Conditional_23_Conditional_2_Conditional_48_Conditional_6_Template, 2, 1, "p", 36);
+    i0.ɵɵelement(5, "input", 50);
+    i0.ɵɵconditionalCreate(6, SymphiqCreateAccountDashboardComponent_Conditional_9_Conditional_2_Conditional_48_Conditional_6_Template, 2, 1, "p", 31);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(3);
@@ -52642,79 +53120,79 @@ function SymphiqCreateAccountDashboardComponent_Conditional_23_Conditional_2_Con
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r0.isFieldInvalid("otherPlatformName") ? 6 : -1);
 } }
-function SymphiqCreateAccountDashboardComponent_Conditional_23_Conditional_2_Conditional_60_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 36);
+function SymphiqCreateAccountDashboardComponent_Conditional_9_Conditional_2_Conditional_60_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 31);
     i0.ɵɵtext(1, " Company name is required ");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(3);
     i0.ɵɵproperty("ngClass", ctx_r0.errorClasses());
 } }
-function SymphiqCreateAccountDashboardComponent_Conditional_23_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+function SymphiqCreateAccountDashboardComponent_Conditional_9_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 21)(1, "div", 23)(2, "div", 31)(3, "h2", 19);
+    i0.ɵɵelementStart(0, "div", 16)(1, "div", 18)(2, "div", 26)(3, "h2", 14);
     i0.ɵɵtext(4, " Shop Details ");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(5, "p", 1);
     i0.ɵɵtext(6, " Enter your shop details to get started with Symphiq ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "form", 32)(8, "div")(9, "label", 33);
+    i0.ɵɵelementStart(7, "form", 27)(8, "div")(9, "label", 28);
     i0.ɵɵtext(10, " Shop Name ");
-    i0.ɵɵelementStart(11, "span", 34);
+    i0.ɵɵelementStart(11, "span", 29);
     i0.ɵɵtext(12, "*");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelement(13, "input", 35, 0);
-    i0.ɵɵconditionalCreate(15, SymphiqCreateAccountDashboardComponent_Conditional_23_Conditional_2_Conditional_15_Template, 2, 1, "p", 36);
+    i0.ɵɵelement(13, "input", 30, 0);
+    i0.ɵɵconditionalCreate(15, SymphiqCreateAccountDashboardComponent_Conditional_9_Conditional_2_Conditional_15_Template, 2, 1, "p", 31);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(16, "div")(17, "label", 33);
+    i0.ɵɵelementStart(16, "div")(17, "label", 28);
     i0.ɵɵtext(18, " Shop URL ");
-    i0.ɵɵelementStart(19, "span", 34);
+    i0.ɵɵelementStart(19, "span", 29);
     i0.ɵɵtext(20, "*");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(21, "div", 37)(22, "span", 38);
+    i0.ɵɵelementStart(21, "div", 32)(22, "span", 33);
     i0.ɵɵtext(23, " https:// ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(24, "input", 39);
+    i0.ɵɵelement(24, "input", 34);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(25, SymphiqCreateAccountDashboardComponent_Conditional_23_Conditional_2_Conditional_25_Template, 2, 1, "p", 36);
+    i0.ɵɵconditionalCreate(25, SymphiqCreateAccountDashboardComponent_Conditional_9_Conditional_2_Conditional_25_Template, 2, 1, "p", 31);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(26, "div")(27, "label", 40);
+    i0.ɵɵelementStart(26, "div")(27, "label", 35);
     i0.ɵɵtext(28, " Shop Platform ");
-    i0.ɵɵelementStart(29, "span", 34);
+    i0.ɵɵelementStart(29, "span", 29);
     i0.ɵɵtext(30, "*");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(31, "div", 41)(32, "label", 42);
-    i0.ɵɵelement(33, "input", 43);
-    i0.ɵɵelementStart(34, "div", 44)(35, "div", 45);
-    i0.ɵɵconditionalCreate(36, SymphiqCreateAccountDashboardComponent_Conditional_23_Conditional_2_Conditional_36_Template, 1, 0, "div", 46);
+    i0.ɵɵelementStart(31, "div", 36)(32, "label", 37);
+    i0.ɵɵelement(33, "input", 38);
+    i0.ɵɵelementStart(34, "div", 39)(35, "div", 40);
+    i0.ɵɵconditionalCreate(36, SymphiqCreateAccountDashboardComponent_Conditional_9_Conditional_2_Conditional_36_Template, 1, 0, "div", 41);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(37, "div", 47)(38, "div", 48);
+    i0.ɵɵelementStart(37, "div", 42)(38, "div", 43);
     i0.ɵɵtext(39, " Shopify ");
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵelementStart(40, "label", 42);
-    i0.ɵɵelement(41, "input", 43);
-    i0.ɵɵelementStart(42, "div", 44)(43, "div", 45);
-    i0.ɵɵconditionalCreate(44, SymphiqCreateAccountDashboardComponent_Conditional_23_Conditional_2_Conditional_44_Template, 1, 0, "div", 46);
+    i0.ɵɵelementStart(40, "label", 37);
+    i0.ɵɵelement(41, "input", 38);
+    i0.ɵɵelementStart(42, "div", 39)(43, "div", 40);
+    i0.ɵɵconditionalCreate(44, SymphiqCreateAccountDashboardComponent_Conditional_9_Conditional_2_Conditional_44_Template, 1, 0, "div", 41);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(45, "div", 47)(46, "div", 48);
+    i0.ɵɵelementStart(45, "div", 42)(46, "div", 43);
     i0.ɵɵtext(47, " Other ");
     i0.ɵɵelementEnd()()()()()();
-    i0.ɵɵconditionalCreate(48, SymphiqCreateAccountDashboardComponent_Conditional_23_Conditional_2_Conditional_48_Template, 7, 3, "div");
-    i0.ɵɵelementStart(49, "div")(50, "label", 33);
+    i0.ɵɵconditionalCreate(48, SymphiqCreateAccountDashboardComponent_Conditional_9_Conditional_2_Conditional_48_Template, 7, 3, "div");
+    i0.ɵɵelementStart(49, "div")(50, "label", 28);
     i0.ɵɵtext(51, " Company Name ");
-    i0.ɵɵelementStart(52, "span", 34);
+    i0.ɵɵelementStart(52, "span", 29);
     i0.ɵɵtext(53, "*");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelement(54, "input", 49);
-    i0.ɵɵelementStart(55, "div", 50)(56, "label", 51)(57, "input", 52);
-    i0.ɵɵlistener("change", function SymphiqCreateAccountDashboardComponent_Conditional_23_Conditional_2_Template_input_change_57_listener() { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.toggleSameAsShopName()); });
+    i0.ɵɵelement(54, "input", 44);
+    i0.ɵɵelementStart(55, "div", 45)(56, "label", 46)(57, "input", 47);
+    i0.ɵɵlistener("change", function SymphiqCreateAccountDashboardComponent_Conditional_9_Conditional_2_Template_input_change_57_listener() { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.toggleSameAsShopName()); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(58, "span", 53);
+    i0.ɵɵelementStart(58, "span", 48);
     i0.ɵɵtext(59, " Same as Shop Name ");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵconditionalCreate(60, SymphiqCreateAccountDashboardComponent_Conditional_23_Conditional_2_Conditional_60_Template, 2, 1, "p", 36);
+    i0.ɵɵconditionalCreate(60, SymphiqCreateAccountDashboardComponent_Conditional_9_Conditional_2_Conditional_60_Template, 2, 1, "p", 31);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(61, "input", 54);
+    i0.ɵɵelement(61, "input", 49);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     let tmp_19_0;
@@ -52780,8 +53258,8 @@ function SymphiqCreateAccountDashboardComponent_Conditional_23_Conditional_2_Tem
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(ctx_r0.isFieldInvalid("companyName") ? 60 : -1);
 } }
-function SymphiqCreateAccountDashboardComponent_Conditional_23_Conditional_3_Conditional_12_For_6_Conditional_6_For_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 66);
+function SymphiqCreateAccountDashboardComponent_Conditional_9_Conditional_3_Conditional_12_For_6_Conditional_6_For_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 61);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -52791,12 +53269,12 @@ function SymphiqCreateAccountDashboardComponent_Conditional_23_Conditional_3_Con
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", tool_r5, " ");
 } }
-function SymphiqCreateAccountDashboardComponent_Conditional_23_Conditional_3_Conditional_12_For_6_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 63)(1, "span", 64);
+function SymphiqCreateAccountDashboardComponent_Conditional_9_Conditional_3_Conditional_12_For_6_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 58)(1, "span", 59);
     i0.ɵɵtext(2, "Tools:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 65);
-    i0.ɵɵrepeaterCreate(4, SymphiqCreateAccountDashboardComponent_Conditional_23_Conditional_3_Conditional_12_For_6_Conditional_6_For_5_Template, 2, 2, "span", 66, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementStart(3, "div", 60);
+    i0.ɵɵrepeaterCreate(4, SymphiqCreateAccountDashboardComponent_Conditional_9_Conditional_3_Conditional_12_For_6_Conditional_6_For_5_Template, 2, 2, "span", 61, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const focusArea_r6 = i0.ɵɵnextContext().$implicit;
@@ -52806,14 +53284,14 @@ function SymphiqCreateAccountDashboardComponent_Conditional_23_Conditional_3_Con
     i0.ɵɵadvance(3);
     i0.ɵɵrepeater(focusArea_r6.tools);
 } }
-function SymphiqCreateAccountDashboardComponent_Conditional_23_Conditional_3_Conditional_12_For_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 59)(1, "div", 60)(2, "h4", 61);
+function SymphiqCreateAccountDashboardComponent_Conditional_9_Conditional_3_Conditional_12_For_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 54)(1, "div", 55)(2, "h4", 56);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "span", 62);
+    i0.ɵɵelementStart(4, "span", 57);
     i0.ɵɵtext(5, " Engaged ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(6, SymphiqCreateAccountDashboardComponent_Conditional_23_Conditional_3_Conditional_12_For_6_Conditional_6_Template, 6, 1, "div", 63);
+    i0.ɵɵconditionalCreate(6, SymphiqCreateAccountDashboardComponent_Conditional_9_Conditional_3_Conditional_12_For_6_Conditional_6_Template, 6, 1, "div", 58);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const focusArea_r6 = ctx.$implicit;
@@ -52828,13 +53306,13 @@ function SymphiqCreateAccountDashboardComponent_Conditional_23_Conditional_3_Con
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(focusArea_r6.tools && focusArea_r6.tools.length > 0 ? 6 : -1);
 } }
-function SymphiqCreateAccountDashboardComponent_Conditional_23_Conditional_3_Conditional_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 31)(1, "h3", 56);
-    i0.ɵɵelement(2, "span", 57);
+function SymphiqCreateAccountDashboardComponent_Conditional_9_Conditional_3_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 26)(1, "h3", 51);
+    i0.ɵɵelement(2, "span", 52);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 58);
-    i0.ɵɵrepeaterCreate(5, SymphiqCreateAccountDashboardComponent_Conditional_23_Conditional_3_Conditional_12_For_6_Template, 7, 5, "div", 59, _forTrack0$B);
+    i0.ɵɵelementStart(4, "div", 53);
+    i0.ɵɵrepeaterCreate(5, SymphiqCreateAccountDashboardComponent_Conditional_9_Conditional_3_Conditional_12_For_6_Template, 7, 5, "div", 54, _forTrack0$B);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(3);
@@ -52845,8 +53323,8 @@ function SymphiqCreateAccountDashboardComponent_Conditional_23_Conditional_3_Con
     i0.ɵɵadvance(2);
     i0.ɵɵrepeater(ctx_r0.engagedFocusAreas());
 } }
-function SymphiqCreateAccountDashboardComponent_Conditional_23_Conditional_3_Conditional_13_For_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 69)(1, "h4", 61);
+function SymphiqCreateAccountDashboardComponent_Conditional_9_Conditional_3_Conditional_13_For_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 64)(1, "h4", 56);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -52858,13 +53336,13 @@ function SymphiqCreateAccountDashboardComponent_Conditional_23_Conditional_3_Con
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r0.getFocusAreaTitle(focusArea_r7.focusAreaDomain), " ");
 } }
-function SymphiqCreateAccountDashboardComponent_Conditional_23_Conditional_3_Conditional_13_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 31)(1, "h3", 56);
-    i0.ɵɵelement(2, "span", 67);
+function SymphiqCreateAccountDashboardComponent_Conditional_9_Conditional_3_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 26)(1, "h3", 51);
+    i0.ɵɵelement(2, "span", 62);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 68);
-    i0.ɵɵrepeaterCreate(5, SymphiqCreateAccountDashboardComponent_Conditional_23_Conditional_3_Conditional_13_For_6_Template, 3, 3, "div", 69, _forTrack0$B);
+    i0.ɵɵelementStart(4, "div", 63);
+    i0.ɵɵrepeaterCreate(5, SymphiqCreateAccountDashboardComponent_Conditional_9_Conditional_3_Conditional_13_For_6_Template, 3, 3, "div", 64, _forTrack0$B);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(3);
@@ -52875,8 +53353,8 @@ function SymphiqCreateAccountDashboardComponent_Conditional_23_Conditional_3_Con
     i0.ɵɵadvance(2);
     i0.ɵɵrepeater(ctx_r0.interestedFocusAreas());
 } }
-function SymphiqCreateAccountDashboardComponent_Conditional_23_Conditional_3_Conditional_14_For_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 72)(1, "span", 64);
+function SymphiqCreateAccountDashboardComponent_Conditional_9_Conditional_3_Conditional_14_For_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 67)(1, "span", 59);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -52888,13 +53366,13 @@ function SymphiqCreateAccountDashboardComponent_Conditional_23_Conditional_3_Con
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r0.getFocusAreaTitle(focusArea_r8.focusAreaDomain), " ");
 } }
-function SymphiqCreateAccountDashboardComponent_Conditional_23_Conditional_3_Conditional_14_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div")(1, "h3", 56);
-    i0.ɵɵelement(2, "span", 70);
+function SymphiqCreateAccountDashboardComponent_Conditional_9_Conditional_3_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div")(1, "h3", 51);
+    i0.ɵɵelement(2, "span", 65);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 71);
-    i0.ɵɵrepeaterCreate(5, SymphiqCreateAccountDashboardComponent_Conditional_23_Conditional_3_Conditional_14_For_6_Template, 3, 3, "div", 72, _forTrack0$B);
+    i0.ɵɵelementStart(4, "div", 66);
+    i0.ɵɵrepeaterCreate(5, SymphiqCreateAccountDashboardComponent_Conditional_9_Conditional_3_Conditional_14_For_6_Template, 3, 3, "div", 67, _forTrack0$B);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(3);
@@ -52905,25 +53383,25 @@ function SymphiqCreateAccountDashboardComponent_Conditional_23_Conditional_3_Con
     i0.ɵɵadvance(2);
     i0.ɵɵrepeater(ctx_r0.notInterestedFocusAreas());
 } }
-function SymphiqCreateAccountDashboardComponent_Conditional_23_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+function SymphiqCreateAccountDashboardComponent_Conditional_9_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 22)(1, "div", 23)(2, "div", 24)(3, "div")(4, "h2", 19);
+    i0.ɵɵelementStart(0, "div", 17)(1, "div", 18)(2, "div", 19)(3, "div")(4, "h2", 14);
     i0.ɵɵtext(5, " Focus Areas ");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(6, "p", 1);
     i0.ɵɵtext(7, " Your marketing and operational focus areas ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "button", 25);
-    i0.ɵɵlistener("click", function SymphiqCreateAccountDashboardComponent_Conditional_23_Conditional_3_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.enableFocusAreasEditMode()); });
+    i0.ɵɵelementStart(8, "button", 20);
+    i0.ɵɵlistener("click", function SymphiqCreateAccountDashboardComponent_Conditional_9_Conditional_3_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.enableFocusAreasEditMode()); });
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(9, "svg", 26);
-    i0.ɵɵelement(10, "path", 27);
+    i0.ɵɵelementStart(9, "svg", 21);
+    i0.ɵɵelement(10, "path", 22);
     i0.ɵɵelementEnd();
     i0.ɵɵtext(11, " Edit ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(12, SymphiqCreateAccountDashboardComponent_Conditional_23_Conditional_3_Conditional_12_Template, 7, 2, "div", 31);
-    i0.ɵɵconditionalCreate(13, SymphiqCreateAccountDashboardComponent_Conditional_23_Conditional_3_Conditional_13_Template, 7, 2, "div", 31);
-    i0.ɵɵconditionalCreate(14, SymphiqCreateAccountDashboardComponent_Conditional_23_Conditional_3_Conditional_14_Template, 7, 2, "div");
+    i0.ɵɵconditionalCreate(12, SymphiqCreateAccountDashboardComponent_Conditional_9_Conditional_3_Conditional_12_Template, 7, 2, "div", 26);
+    i0.ɵɵconditionalCreate(13, SymphiqCreateAccountDashboardComponent_Conditional_9_Conditional_3_Conditional_13_Template, 7, 2, "div", 26);
+    i0.ɵɵconditionalCreate(14, SymphiqCreateAccountDashboardComponent_Conditional_9_Conditional_3_Conditional_14_Template, 7, 2, "div");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
@@ -52943,38 +53421,38 @@ function SymphiqCreateAccountDashboardComponent_Conditional_23_Conditional_3_Tem
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r0.notInterestedFocusAreas().length > 0 ? 14 : -1);
 } }
-function SymphiqCreateAccountDashboardComponent_Conditional_23_Conditional_4_For_13_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "div", 76);
+function SymphiqCreateAccountDashboardComponent_Conditional_9_Conditional_4_For_13_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "div", 71);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(4);
     i0.ɵɵproperty("ngClass", ctx_r0.dividerClasses());
 } }
-function SymphiqCreateAccountDashboardComponent_Conditional_23_Conditional_4_For_13_Template(rf, ctx) { if (rf & 1) {
+function SymphiqCreateAccountDashboardComponent_Conditional_9_Conditional_4_For_13_Template(rf, ctx) { if (rf & 1) {
     const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "symphiq-focus-area-question", 75);
-    i0.ɵɵlistener("statusChange", function SymphiqCreateAccountDashboardComponent_Conditional_23_Conditional_4_For_13_Template_symphiq_focus_area_question_statusChange_0_listener($event) { const domain_r10 = i0.ɵɵrestoreView(_r9).$implicit; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onFocusAreaStatusChange(domain_r10, $event)); })("toolsClick", function SymphiqCreateAccountDashboardComponent_Conditional_23_Conditional_4_For_13_Template_symphiq_focus_area_question_toolsClick_0_listener() { const domain_r10 = i0.ɵɵrestoreView(_r9).$implicit; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onFocusAreaToolsClick(domain_r10)); });
+    i0.ɵɵelementStart(0, "symphiq-focus-area-question", 70);
+    i0.ɵɵlistener("statusChange", function SymphiqCreateAccountDashboardComponent_Conditional_9_Conditional_4_For_13_Template_symphiq_focus_area_question_statusChange_0_listener($event) { const domain_r10 = i0.ɵɵrestoreView(_r9).$implicit; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onFocusAreaStatusChange(domain_r10, $event)); })("toolsClick", function SymphiqCreateAccountDashboardComponent_Conditional_9_Conditional_4_For_13_Template_symphiq_focus_area_question_toolsClick_0_listener() { const domain_r10 = i0.ɵɵrestoreView(_r9).$implicit; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onFocusAreaToolsClick(domain_r10)); });
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(1, SymphiqCreateAccountDashboardComponent_Conditional_23_Conditional_4_For_13_Conditional_1_Template, 1, 1, "div", 76);
+    i0.ɵɵconditionalCreate(1, SymphiqCreateAccountDashboardComponent_Conditional_9_Conditional_4_For_13_Conditional_1_Template, 1, 1, "div", 71);
 } if (rf & 2) {
     const domain_r10 = ctx.$implicit;
-    const ɵ$index_356_r11 = ctx.$index;
+    const ɵ$index_331_r11 = ctx.$index;
     const ctx_r0 = i0.ɵɵnextContext(3);
     i0.ɵɵproperty("focusAreaDomain", domain_r10)("selectedStatus", ctx_r0.getFocusAreaStatus(domain_r10))("selectedTools", ctx_r0.getFocusAreaTools(domain_r10))("viewMode", ctx_r0.viewMode())("title", ctx_r0.getFocusAreaTitle(domain_r10))("description", ctx_r0.getFocusAreaDescription(domain_r10));
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ɵ$index_356_r11 < ctx_r0.allFocusAreaDomains().length - 1 ? 1 : -1);
+    i0.ɵɵconditional(ɵ$index_331_r11 < ctx_r0.allFocusAreaDomains().length - 1 ? 1 : -1);
 } }
-function SymphiqCreateAccountDashboardComponent_Conditional_23_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 22)(1, "div", 23)(2, "div", 31)(3, "div", 73)(4, "div")(5, "h2", 19);
+function SymphiqCreateAccountDashboardComponent_Conditional_9_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 17)(1, "div", 18)(2, "div", 26)(3, "div", 68)(4, "div")(5, "h2", 14);
     i0.ɵɵtext(6, " Focus Areas ");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(7, "p", 1);
     i0.ɵɵtext(8, " Tell us about your marketing and operational focus areas ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(9, "div", 74);
+    i0.ɵɵelementStart(9, "div", 69);
     i0.ɵɵtext(10);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(11, "div", 28);
-    i0.ɵɵrepeaterCreate(12, SymphiqCreateAccountDashboardComponent_Conditional_23_Conditional_4_For_13_Template, 2, 7, null, null, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementStart(11, "div", 23);
+    i0.ɵɵrepeaterCreate(12, SymphiqCreateAccountDashboardComponent_Conditional_9_Conditional_4_For_13_Template, 2, 7, null, null, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
@@ -52992,12 +53470,12 @@ function SymphiqCreateAccountDashboardComponent_Conditional_23_Conditional_4_Tem
     i0.ɵɵadvance(2);
     i0.ɵɵrepeater(ctx_r0.allFocusAreaDomains());
 } }
-function SymphiqCreateAccountDashboardComponent_Conditional_23_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 14);
-    i0.ɵɵconditionalCreate(1, SymphiqCreateAccountDashboardComponent_Conditional_23_Conditional_1_Template, 34, 18, "div", 21);
-    i0.ɵɵconditionalCreate(2, SymphiqCreateAccountDashboardComponent_Conditional_23_Conditional_2_Template, 62, 35, "div", 21);
-    i0.ɵɵconditionalCreate(3, SymphiqCreateAccountDashboardComponent_Conditional_23_Conditional_3_Template, 15, 8, "div", 22);
-    i0.ɵɵconditionalCreate(4, SymphiqCreateAccountDashboardComponent_Conditional_23_Conditional_4_Template, 14, 7, "div", 22);
+function SymphiqCreateAccountDashboardComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 9);
+    i0.ɵɵconditionalCreate(1, SymphiqCreateAccountDashboardComponent_Conditional_9_Conditional_1_Template, 34, 18, "div", 16);
+    i0.ɵɵconditionalCreate(2, SymphiqCreateAccountDashboardComponent_Conditional_9_Conditional_2_Template, 62, 35, "div", 16);
+    i0.ɵɵconditionalCreate(3, SymphiqCreateAccountDashboardComponent_Conditional_9_Conditional_3_Template, 15, 8, "div", 17);
+    i0.ɵɵconditionalCreate(4, SymphiqCreateAccountDashboardComponent_Conditional_9_Conditional_4_Template, 14, 7, "div", 17);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -53010,62 +53488,62 @@ function SymphiqCreateAccountDashboardComponent_Conditional_23_Template(rf, ctx)
     i0.ɵɵadvance();
     i0.ɵɵconditional(!ctx_r0.accountData() || ctx_r0.focusAreasEditMode() ? 4 : -1);
 } }
-function SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+function SymphiqCreateAccountDashboardComponent_Conditional_11_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r13 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 81);
-    i0.ɵɵlistener("click", function SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_3_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r13); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.focusAreasEditMode() ? ctx_r0.cancelFocusAreasEditMode() : ctx_r0.cancelEditMode()); });
+    i0.ɵɵelementStart(0, "button", 76);
+    i0.ɵɵlistener("click", function SymphiqCreateAccountDashboardComponent_Conditional_11_Conditional_3_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r13); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.focusAreasEditMode() ? ctx_r0.cancelFocusAreasEditMode() : ctx_r0.cancelEditMode()); });
     i0.ɵɵtext(1, " Cancel ");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("ngClass", ctx_r0.cancelButtonClasses());
 } }
-function SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_5_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+function SymphiqCreateAccountDashboardComponent_Conditional_11_Conditional_5_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0, " Saving Focus Areas... ");
 } }
-function SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_5_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+function SymphiqCreateAccountDashboardComponent_Conditional_11_Conditional_5_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0, " Updating Account... ");
 } }
-function SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_5_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+function SymphiqCreateAccountDashboardComponent_Conditional_11_Conditional_5_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0, " Creating Account... ");
 } }
-function SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+function SymphiqCreateAccountDashboardComponent_Conditional_11_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(0, "svg", 82);
-    i0.ɵɵelement(1, "circle", 83)(2, "path", 84);
+    i0.ɵɵelementStart(0, "svg", 77);
+    i0.ɵɵelement(1, "circle", 78)(2, "path", 79);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(3, SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_5_Conditional_3_Template, 1, 0)(4, SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_5_Conditional_4_Template, 1, 0)(5, SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_5_Conditional_5_Template, 1, 0);
+    i0.ɵɵconditionalCreate(3, SymphiqCreateAccountDashboardComponent_Conditional_11_Conditional_5_Conditional_3_Template, 1, 0)(4, SymphiqCreateAccountDashboardComponent_Conditional_11_Conditional_5_Conditional_4_Template, 1, 0)(5, SymphiqCreateAccountDashboardComponent_Conditional_11_Conditional_5_Conditional_5_Template, 1, 0);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(3);
     i0.ɵɵconditional(ctx_r0.focusAreasEditMode() ? 3 : ctx_r0.accountData() && ctx_r0.editMode() ? 4 : 5);
 } }
-function SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_6_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+function SymphiqCreateAccountDashboardComponent_Conditional_11_Conditional_6_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0, " Save Focus Areas ");
 } }
-function SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_6_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+function SymphiqCreateAccountDashboardComponent_Conditional_11_Conditional_6_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0, " Save Changes ");
 } }
-function SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_6_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+function SymphiqCreateAccountDashboardComponent_Conditional_11_Conditional_6_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0, " Create Account ");
 } }
-function SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_6_Conditional_0_Template, 1, 0)(1, SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_6_Conditional_1_Template, 1, 0)(2, SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_6_Conditional_2_Template, 1, 0);
+function SymphiqCreateAccountDashboardComponent_Conditional_11_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, SymphiqCreateAccountDashboardComponent_Conditional_11_Conditional_6_Conditional_0_Template, 1, 0)(1, SymphiqCreateAccountDashboardComponent_Conditional_11_Conditional_6_Conditional_1_Template, 1, 0)(2, SymphiqCreateAccountDashboardComponent_Conditional_11_Conditional_6_Conditional_2_Template, 1, 0);
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(3, "svg", 85);
-    i0.ɵɵelement(4, "path", 86);
+    i0.ɵɵelementStart(3, "svg", 80);
+    i0.ɵɵelement(4, "path", 81);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵconditional(ctx_r0.focusAreasEditMode() ? 0 : ctx_r0.accountData() && ctx_r0.editMode() ? 1 : 2);
 } }
-function SymphiqCreateAccountDashboardComponent_Conditional_25_Template(rf, ctx) { if (rf & 1) {
+function SymphiqCreateAccountDashboardComponent_Conditional_11_Template(rf, ctx) { if (rf & 1) {
     const _r12 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 16)(1, "div", 77)(2, "div", 78);
-    i0.ɵɵconditionalCreate(3, SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_3_Template, 2, 1, "button", 79);
-    i0.ɵɵelementStart(4, "button", 80);
-    i0.ɵɵlistener("click", function SymphiqCreateAccountDashboardComponent_Conditional_25_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r12); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.focusAreasEditMode() ? ctx_r0.handleSaveFocusAreas() : ctx_r0.handleContinue()); });
-    i0.ɵɵconditionalCreate(5, SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_5_Template, 6, 1)(6, SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_6_Template, 5, 1);
+    i0.ɵɵelementStart(0, "div", 11)(1, "div", 72)(2, "div", 73);
+    i0.ɵɵconditionalCreate(3, SymphiqCreateAccountDashboardComponent_Conditional_11_Conditional_3_Template, 2, 1, "button", 74);
+    i0.ɵɵelementStart(4, "button", 75);
+    i0.ɵɵlistener("click", function SymphiqCreateAccountDashboardComponent_Conditional_11_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r12); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.focusAreasEditMode() ? ctx_r0.handleSaveFocusAreas() : ctx_r0.handleContinue()); });
+    i0.ɵɵconditionalCreate(5, SymphiqCreateAccountDashboardComponent_Conditional_11_Conditional_5_Template, 6, 1)(6, SymphiqCreateAccountDashboardComponent_Conditional_11_Conditional_6_Template, 5, 1);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -53454,21 +53932,6 @@ class SymphiqCreateAccountDashboardComponent {
             ? 'min-h-screen'
             : 'min-h-screen';
     }
-    getHeaderClasses() {
-        return this.isLightMode()
-            ? 'bg-white/80 backdrop-blur-md border-b border-slate-200'
-            : 'bg-slate-900/80 backdrop-blur-md border-b border-slate-700';
-    }
-    getMainTitleClasses() {
-        return this.isLightMode()
-            ? 'text-4xl font-bold bg-gradient-to-r from-blue-600 to-cyan-600 bg-clip-text text-transparent'
-            : 'text-4xl font-bold bg-gradient-to-r from-blue-400 to-cyan-400 bg-clip-text text-transparent';
-    }
-    getSubtitleClasses() {
-        return this.isLightMode()
-            ? 'text-slate-600 text-lg mt-2'
-            : 'text-slate-400 text-lg mt-2';
-    }
     containerClasses() {
         return this.isLightMode()
             ? 'bg-white border-slate-200'
@@ -53694,30 +54157,23 @@ class SymphiqCreateAccountDashboardComponent {
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.shopNameInput = _t.first);
         } }, hostBindings: function SymphiqCreateAccountDashboardComponent_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("scroll", function SymphiqCreateAccountDashboardComponent_scroll_HostBindingHandler($event) { return ctx.onScroll($event); }, i0.ɵɵresolveWindow);
-        } }, inputs: { embedded: [1, "embedded"], parentHeaderOffset: [1, "parentHeaderOffset"], viewMode: [1, "viewMode"], scrollEvent: [1, "scrollEvent"], scrollElement: [1, "scrollElement"], accountData: [1, "accountData"], forDemo: [1, "forDemo"], showNextStepAction: [1, "showNextStepAction"], maxAccessibleStepId: [1, "maxAccessibleStepId"] }, outputs: { onCreateAccount: "onCreateAccount", stepClick: "stepClick", nextStepClick: "nextStepClick" }, decls: 26, vars: 48, consts: [["shopNameInput", ""], [3, "ngClass"], [1, "h-full", "transition-all", "duration-200", "ease-out", 3, "ngClass"], [1, "animated-bubbles", 2, "position", "fixed", "top", "0", "left", "0", "right", "0", "bottom", "0", "width", "100vw", "height", "100vh", "z-index", "1", "pointer-events", "none"], [1, "relative", "z-[51]"], [1, "sticky", "top-0", "z-50", 3, "ngClass"], [1, "transition-all", "duration-300", "ease-in-out", "overflow-hidden"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-8"], [1, "flex", "items-center", "justify-between"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-3"], [1, "flex-1", "min-w-0", "mr-4"], [3, "stepClick", "nextStepClick", "viewMode", "currentStepId", "showNextStepAction", "forDemo", "maxAccessibleStepId"], [1, "relative", "pb-32"], [1, "flex", "flex-col", "items-center", "justify-center", "min-h-[60vh]", "gap-6"], [1, "max-w-3xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-8"], [3, "close", "save", "isOpen", "focusAreaDomain", "focusAreaTitle", "selectedTools", "viewMode"], [1, "fixed", "bottom-0", "left-0", "right-0", "z-50", "border-t", "backdrop-blur-sm", 3, "ngClass"], ["size", "large", 3, "viewMode"], [1, "text-center"], [1, "text-2xl", "font-bold", "mb-2", 3, "ngClass"], [1, "text-base", 3, "ngClass"], [1, "rounded-2xl", "border", "shadow-lg", "overflow-hidden", "mb-8", 3, "ngClass"], [1, "rounded-2xl", "border", "shadow-lg", "overflow-hidden", 3, "ngClass"], [1, "px-8", "py-8", 3, "ngClass"], [1, "flex", "items-start", "justify-between", "mb-6"], ["type", "button", 1, "px-4", "py-2", "rounded-lg", "font-medium", "text-sm", "transition-all", "duration-200", "hover:scale-105", "flex", "items-center", "gap-2", "cursor-pointer", 3, "click", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"], [1, "space-y-4"], [1, "block", "text-sm", "font-medium", "mb-1", 3, "ngClass"], ["target", "_blank", "rel", "noopener noreferrer", 1, "text-base", "hover:underline", 3, "href", "ngClass"], [1, "mb-6"], [1, "space-y-6", 3, "formGroup"], [1, "block", "text-sm", "font-semibold", "mb-2", 3, "ngClass"], [1, "text-red-500"], ["type", "text", "formControlName", "shopName", "placeholder", "Enter your shop name", 1, "w-full", "px-4", "py-3", "rounded-lg", "border-2", "transition-all", "duration-200", "focus:outline-none", "focus:ring-2", 3, "ngClass"], [1, "mt-1", "text-sm", 3, "ngClass"], [1, "flex", "items-center"], [1, "px-4", "py-3", "rounded-l-lg", "border-2", "border-r-0", "text-sm", "font-medium", 3, "ngClass"], ["type", "text", "formControlName", "shopUrl", "placeholder", "yourshop.com", 1, "flex-1", "px-4", "py-3", "rounded-r-lg", "border-2", "transition-all", "duration-200", "focus:outline-none", "focus:ring-2", 3, "ngClass"], [1, "block", "text-sm", "font-semibold", "mb-3", 3, "ngClass"], [1, "grid", "grid-cols-1", "sm:grid-cols-2", "gap-4"], [1, "cursor-pointer", 3, "ngClass"], ["type", "radio", "formControlName", "shopPlatform", 1, "sr-only", 3, "value"], [1, "flex", "items-center", "gap-3", "p-4", "rounded-lg", "border-2", "transition-all", "duration-200"], [1, "w-5", "h-5", "rounded-full", "border-2", "flex", "items-center", "justify-center", "flex-shrink-0", 3, "ngClass"], [1, "w-3", "h-3", "rounded-full", "bg-current"], [1, "flex-1"], [1, "font-semibold", 3, "ngClass"], ["type", "text", "formControlName", "companyName", "placeholder", "Enter company name", 1, "w-full", "px-4", "py-3", "rounded-lg", "border-2", "transition-all", "duration-200", "focus:outline-none", "focus:ring-2", 3, "ngClass", "readonly"], [1, "mt-2"], [1, "flex", "items-center", "gap-2", "cursor-pointer"], ["type", "checkbox", 1, "w-4", "h-4", "rounded", "border-2", "transition-all", "duration-200", 3, "change", "checked", "ngClass"], [1, "text-sm", 3, "ngClass"], ["formControlName", "website", "tabindex", "-1", "autocomplete", "off", 1, "absolute", "-left-[9999px]", "opacity-0"], ["type", "text", "formControlName", "otherPlatformName", "placeholder", "Enter platform name (e.g., WooCommerce, Magento)", 1, "w-full", "px-4", "py-3", "rounded-lg", "border-2", "transition-all", "duration-200", "focus:outline-none", "focus:ring-2", 3, "ngClass"], [1, "text-base", "font-bold", "mb-3", "flex", "items-center", "gap-2", 3, "ngClass"], [1, "w-2", "h-2", "rounded-full", "bg-emerald-500"], [1, "space-y-3"], [1, "p-4", "rounded-lg", "border-l-4", 3, "ngClass"], [1, "flex", "items-start", "justify-between", "mb-2"], [1, "font-semibold", "text-sm", 3, "ngClass"], [1, "px-2", "py-0.5", "rounded", "text-xs", "font-semibold", "whitespace-nowrap", 3, "ngClass"], [1, "flex", "items-center", "gap-2", "mt-2"], [1, "text-xs", "font-medium", 3, "ngClass"], [1, "flex", "flex-wrap", "gap-1.5"], [1, "px-2", "py-0.5", "rounded", "text-xs", 3, "ngClass"], [1, "w-2", "h-2", "rounded-full", "bg-blue-500"], [1, "grid", "grid-cols-1", "sm:grid-cols-2", "gap-3"], [1, "p-3", "rounded-lg", "border-l-4", 3, "ngClass"], [1, "w-2", "h-2", "rounded-full", "bg-slate-400"], [1, "grid", "grid-cols-2", "sm:grid-cols-3", "gap-2"], [1, "p-2", "rounded", "text-center", 3, "ngClass"], [1, "flex", "items-start", "justify-between"], [1, "px-4", "py-2", "rounded-lg", "text-sm", "font-semibold", "whitespace-nowrap", 3, "ngClass"], [3, "statusChange", "toolsClick", "focusAreaDomain", "selectedStatus", "selectedTools", "viewMode", "title", "description"], [1, "my-4", 3, "ngClass"], [1, "max-w-3xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-4"], [1, "flex", "items-center", "gap-3"], ["type", "button", 1, "px-6", "py-4", "rounded-xl", "font-bold", "text-base", "transition-all", "duration-200", "flex", "items-center", "justify-center", "gap-2", "cursor-pointer", "hover:scale-105", 3, "ngClass"], ["type", "button", 1, "flex-1", "px-6", "py-4", "rounded-xl", "font-bold", "text-lg", "transition-all", "duration-200", "flex", "items-center", "justify-center", "gap-3", "shadow-lg", 3, "click", "disabled", "ngClass"], ["type", "button", 1, "px-6", "py-4", "rounded-xl", "font-bold", "text-base", "transition-all", "duration-200", "flex", "items-center", "justify-center", "gap-2", "cursor-pointer", "hover:scale-105", 3, "click", "ngClass"], ["fill", "none", "viewBox", "0 0 24 24", 1, "w-6", "h-6", "animate-spin"], ["cx", "12", "cy", "12", "r", "10", "stroke", "currentColor", "stroke-width", "4", 1, "opacity-25"], ["fill", "currentColor", "d", "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z", 1, "opacity-75"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 7l5 5m0 0l-5 5m5-5H6"]], template: function SymphiqCreateAccountDashboardComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { embedded: [1, "embedded"], parentHeaderOffset: [1, "parentHeaderOffset"], viewMode: [1, "viewMode"], scrollEvent: [1, "scrollEvent"], scrollElement: [1, "scrollElement"], accountData: [1, "accountData"], forDemo: [1, "forDemo"], showNextStepAction: [1, "showNextStepAction"], maxAccessibleStepId: [1, "maxAccessibleStepId"] }, outputs: { onCreateAccount: "onCreateAccount", stepClick: "stepClick", nextStepClick: "nextStepClick" }, decls: 12, vars: 24, consts: [["shopNameInput", ""], [3, "ngClass"], [1, "h-full", "transition-all", "duration-200", "ease-out", 3, "ngClass"], [1, "animated-bubbles", 2, "position", "fixed", "top", "0", "left", "0", "right", "0", "bottom", "0", "width", "100vw", "height", "100vh", "z-index", "1", "pointer-events", "none"], [1, "relative", "z-[51]"], [3, "title", "subtitle", "viewMode", "showControls"], [3, "stepClick", "nextStepClick", "viewMode", "currentStepId", "showNextStepAction", "forDemo", "maxAccessibleStepId"], [1, "relative", "pb-32"], [1, "flex", "flex-col", "items-center", "justify-center", "min-h-[60vh]", "gap-6"], [1, "max-w-3xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-8"], [3, "close", "save", "isOpen", "focusAreaDomain", "focusAreaTitle", "selectedTools", "viewMode"], [1, "fixed", "bottom-0", "left-0", "right-0", "z-50", "border-t", "backdrop-blur-sm", 3, "ngClass"], ["size", "large", 3, "viewMode"], [1, "text-center"], [1, "text-2xl", "font-bold", "mb-2", 3, "ngClass"], [1, "text-base", 3, "ngClass"], [1, "rounded-2xl", "border", "shadow-lg", "overflow-hidden", "mb-8", 3, "ngClass"], [1, "rounded-2xl", "border", "shadow-lg", "overflow-hidden", 3, "ngClass"], [1, "px-8", "py-8", 3, "ngClass"], [1, "flex", "items-start", "justify-between", "mb-6"], ["type", "button", 1, "px-4", "py-2", "rounded-lg", "font-medium", "text-sm", "transition-all", "duration-200", "hover:scale-105", "flex", "items-center", "gap-2", "cursor-pointer", 3, "click", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"], [1, "space-y-4"], [1, "block", "text-sm", "font-medium", "mb-1", 3, "ngClass"], ["target", "_blank", "rel", "noopener noreferrer", 1, "text-base", "hover:underline", 3, "href", "ngClass"], [1, "mb-6"], [1, "space-y-6", 3, "formGroup"], [1, "block", "text-sm", "font-semibold", "mb-2", 3, "ngClass"], [1, "text-red-500"], ["type", "text", "formControlName", "shopName", "placeholder", "Enter your shop name", 1, "w-full", "px-4", "py-3", "rounded-lg", "border-2", "transition-all", "duration-200", "focus:outline-none", "focus:ring-2", 3, "ngClass"], [1, "mt-1", "text-sm", 3, "ngClass"], [1, "flex", "items-center"], [1, "px-4", "py-3", "rounded-l-lg", "border-2", "border-r-0", "text-sm", "font-medium", 3, "ngClass"], ["type", "text", "formControlName", "shopUrl", "placeholder", "yourshop.com", 1, "flex-1", "px-4", "py-3", "rounded-r-lg", "border-2", "transition-all", "duration-200", "focus:outline-none", "focus:ring-2", 3, "ngClass"], [1, "block", "text-sm", "font-semibold", "mb-3", 3, "ngClass"], [1, "grid", "grid-cols-1", "sm:grid-cols-2", "gap-4"], [1, "cursor-pointer", 3, "ngClass"], ["type", "radio", "formControlName", "shopPlatform", 1, "sr-only", 3, "value"], [1, "flex", "items-center", "gap-3", "p-4", "rounded-lg", "border-2", "transition-all", "duration-200"], [1, "w-5", "h-5", "rounded-full", "border-2", "flex", "items-center", "justify-center", "flex-shrink-0", 3, "ngClass"], [1, "w-3", "h-3", "rounded-full", "bg-current"], [1, "flex-1"], [1, "font-semibold", 3, "ngClass"], ["type", "text", "formControlName", "companyName", "placeholder", "Enter company name", 1, "w-full", "px-4", "py-3", "rounded-lg", "border-2", "transition-all", "duration-200", "focus:outline-none", "focus:ring-2", 3, "ngClass", "readonly"], [1, "mt-2"], [1, "flex", "items-center", "gap-2", "cursor-pointer"], ["type", "checkbox", 1, "w-4", "h-4", "rounded", "border-2", "transition-all", "duration-200", 3, "change", "checked", "ngClass"], [1, "text-sm", 3, "ngClass"], ["formControlName", "website", "tabindex", "-1", "autocomplete", "off", 1, "absolute", "-left-[9999px]", "opacity-0"], ["type", "text", "formControlName", "otherPlatformName", "placeholder", "Enter platform name (e.g., WooCommerce, Magento)", 1, "w-full", "px-4", "py-3", "rounded-lg", "border-2", "transition-all", "duration-200", "focus:outline-none", "focus:ring-2", 3, "ngClass"], [1, "text-base", "font-bold", "mb-3", "flex", "items-center", "gap-2", 3, "ngClass"], [1, "w-2", "h-2", "rounded-full", "bg-emerald-500"], [1, "space-y-3"], [1, "p-4", "rounded-lg", "border-l-4", 3, "ngClass"], [1, "flex", "items-start", "justify-between", "mb-2"], [1, "font-semibold", "text-sm", 3, "ngClass"], [1, "px-2", "py-0.5", "rounded", "text-xs", "font-semibold", "whitespace-nowrap", 3, "ngClass"], [1, "flex", "items-center", "gap-2", "mt-2"], [1, "text-xs", "font-medium", 3, "ngClass"], [1, "flex", "flex-wrap", "gap-1.5"], [1, "px-2", "py-0.5", "rounded", "text-xs", 3, "ngClass"], [1, "w-2", "h-2", "rounded-full", "bg-blue-500"], [1, "grid", "grid-cols-1", "sm:grid-cols-2", "gap-3"], [1, "p-3", "rounded-lg", "border-l-4", 3, "ngClass"], [1, "w-2", "h-2", "rounded-full", "bg-slate-400"], [1, "grid", "grid-cols-2", "sm:grid-cols-3", "gap-2"], [1, "p-2", "rounded", "text-center", 3, "ngClass"], [1, "flex", "items-start", "justify-between"], [1, "px-4", "py-2", "rounded-lg", "text-sm", "font-semibold", "whitespace-nowrap", 3, "ngClass"], [3, "statusChange", "toolsClick", "focusAreaDomain", "selectedStatus", "selectedTools", "viewMode", "title", "description"], [1, "my-4", 3, "ngClass"], [1, "max-w-3xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-4"], [1, "flex", "items-center", "gap-3"], ["type", "button", 1, "px-6", "py-4", "rounded-xl", "font-bold", "text-base", "transition-all", "duration-200", "flex", "items-center", "justify-center", "gap-2", "cursor-pointer", "hover:scale-105", 3, "ngClass"], ["type", "button", 1, "flex-1", "px-6", "py-4", "rounded-xl", "font-bold", "text-lg", "transition-all", "duration-200", "flex", "items-center", "justify-center", "gap-3", "shadow-lg", 3, "click", "disabled", "ngClass"], ["type", "button", 1, "px-6", "py-4", "rounded-xl", "font-bold", "text-base", "transition-all", "duration-200", "flex", "items-center", "justify-center", "gap-2", "cursor-pointer", "hover:scale-105", 3, "click", "ngClass"], ["fill", "none", "viewBox", "0 0 24 24", 1, "w-6", "h-6", "animate-spin"], ["cx", "12", "cy", "12", "r", "10", "stroke", "currentColor", "stroke-width", "4", 1, "opacity-25"], ["fill", "currentColor", "d", "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z", 1, "opacity-75"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 7l5 5m0 0l-5 5m5-5H6"]], template: function SymphiqCreateAccountDashboardComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 1)(1, "div");
             i0.ɵɵelement(2, "div", 2);
             i0.ɵɵelementEnd();
             i0.ɵɵelement(3, "div", 3);
-            i0.ɵɵelementStart(4, "div", 4)(5, "header", 5)(6, "div", 6)(7, "div", 7)(8, "div", 8)(9, "div")(10, "h1", 1);
-            i0.ɵɵtext(11, " Create Account ");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(12, "p", 1);
-            i0.ɵɵtext(13, " Tell us about your shop ");
-            i0.ɵɵelementEnd()()()()();
-            i0.ɵɵelementStart(14, "div", 6)(15, "div", 9)(16, "div", 8)(17, "div", 10)(18, "h1", 1);
-            i0.ɵɵtext(19, " Create Account ");
-            i0.ɵɵelementEnd()()()()()();
-            i0.ɵɵelementStart(20, "symphiq-journey-progress-indicator", 11);
-            i0.ɵɵlistener("stepClick", function SymphiqCreateAccountDashboardComponent_Template_symphiq_journey_progress_indicator_stepClick_20_listener($event) { return ctx.stepClick.emit($event); })("nextStepClick", function SymphiqCreateAccountDashboardComponent_Template_symphiq_journey_progress_indicator_nextStepClick_20_listener() { return ctx.nextStepClick.emit(); });
+            i0.ɵɵelementStart(4, "div", 4);
+            i0.ɵɵelement(5, "symphiq-dashboard-header", 5);
+            i0.ɵɵelementStart(6, "symphiq-journey-progress-indicator", 6);
+            i0.ɵɵlistener("stepClick", function SymphiqCreateAccountDashboardComponent_Template_symphiq_journey_progress_indicator_stepClick_6_listener($event) { return ctx.stepClick.emit($event); })("nextStepClick", function SymphiqCreateAccountDashboardComponent_Template_symphiq_journey_progress_indicator_nextStepClick_6_listener() { return ctx.nextStepClick.emit(); });
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(21, "main", 12);
-            i0.ɵɵconditionalCreate(22, SymphiqCreateAccountDashboardComponent_Conditional_22_Template, 7, 3, "div", 13)(23, SymphiqCreateAccountDashboardComponent_Conditional_23_Template, 5, 4, "div", 14);
+            i0.ɵɵelementStart(7, "main", 7);
+            i0.ɵɵconditionalCreate(8, SymphiqCreateAccountDashboardComponent_Conditional_8_Template, 7, 3, "div", 8)(9, SymphiqCreateAccountDashboardComponent_Conditional_9_Template, 5, 4, "div", 9);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(24, "symphiq-focus-area-tools-modal", 15);
-            i0.ɵɵlistener("close", function SymphiqCreateAccountDashboardComponent_Template_symphiq_focus_area_tools_modal_close_24_listener() { return ctx.onToolsModalClose(); })("save", function SymphiqCreateAccountDashboardComponent_Template_symphiq_focus_area_tools_modal_save_24_listener($event) { return ctx.onToolsModalSave($event); });
+            i0.ɵɵelementStart(10, "symphiq-focus-area-tools-modal", 10);
+            i0.ɵɵlistener("close", function SymphiqCreateAccountDashboardComponent_Template_symphiq_focus_area_tools_modal_close_10_listener() { return ctx.onToolsModalClose(); })("save", function SymphiqCreateAccountDashboardComponent_Template_symphiq_focus_area_tools_modal_save_10_listener($event) { return ctx.onToolsModalSave($event); });
             i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(25, SymphiqCreateAccountDashboardComponent_Conditional_25_Template, 7, 13, "div", 16);
+            i0.ɵɵconditionalCreate(11, SymphiqCreateAccountDashboardComponent_Conditional_11_Template, 7, 13, "div", 11);
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
             i0.ɵɵproperty("ngClass", ctx.getContainerClasses());
@@ -53729,1039 +54185,531 @@ class SymphiqCreateAccountDashboardComponent {
             i0.ɵɵadvance();
             i0.ɵɵclassProp("light-mode", ctx.isLightMode());
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngClass", ctx.getHeaderClasses());
-            i0.ɵɵadvance();
-            i0.ɵɵclassProp("max-h-0", ctx.headerScrollService.isScrolled())("opacity-0", ctx.headerScrollService.isScrolled())("max-h-96", !ctx.headerScrollService.isScrolled())("opacity-100", !ctx.headerScrollService.isScrolled());
+            i0.ɵɵproperty("title", "Create Account")("subtitle", "Tell us about your shop")("viewMode", ctx.viewMode())("showControls", false);
             i0.ɵɵadvance();
-            i0.ɵɵclassProp("pointer-events-none", ctx.headerScrollService.isScrolled())("pointer-events-auto", !ctx.headerScrollService.isScrolled());
-            i0.ɵɵadvance(3);
-            i0.ɵɵproperty("ngClass", ctx.getMainTitleClasses());
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngClass", ctx.getSubtitleClasses());
-            i0.ɵɵadvance(2);
-            i0.ɵɵclassProp("max-h-0", !ctx.headerScrollService.isScrolled())("opacity-0", !ctx.headerScrollService.isScrolled())("max-h-20", ctx.headerScrollService.isScrolled())("opacity-100", ctx.headerScrollService.isScrolled());
-            i0.ɵɵadvance();
-            i0.ɵɵclassProp("pointer-events-none", !ctx.headerScrollService.isScrolled())("pointer-events-auto", ctx.headerScrollService.isScrolled());
-            i0.ɵɵadvance(3);
-            i0.ɵɵproperty("ngClass", ctx.isLightMode() ? "text-xl font-bold bg-gradient-to-r from-blue-600 to-cyan-600 bg-clip-text text-transparent truncate" : "text-xl font-bold bg-gradient-to-r from-blue-400 to-cyan-400 bg-clip-text text-transparent truncate");
-            i0.ɵɵadvance(2);
             i0.ɵɵproperty("viewMode", ctx.viewMode())("currentStepId", ctx.JourneyStepIdEnum.CREATE_ACCOUNT)("showNextStepAction", ctx.showNextStepAction())("forDemo", ctx.forDemo())("maxAccessibleStepId", ctx.maxAccessibleStepId());
             i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.isCreatingAccount() ? 22 : 23);
+            i0.ɵɵconditional(ctx.isCreatingAccount() ? 8 : 9);
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("isOpen", ctx.toolsModalOpen())("focusAreaDomain", ctx.currentEditingFocusArea())("focusAreaTitle", ctx.currentEditingFocusAreaTitle())("selectedTools", ctx.currentEditingTools())("viewMode", ctx.viewMode());
             i0.ɵɵadvance();
-            i0.ɵɵconditional((!ctx.accountData() || ctx.editMode() || ctx.focusAreasEditMode()) && !ctx.isCreatingAccount() ? 25 : -1);
-        } }, dependencies: [CommonModule, i1$1.NgClass, ReactiveFormsModule, i2$1.ɵNgNoValidate, i2$1.DefaultValueAccessor, i2$1.RadioControlValueAccessor, i2$1.NgControlStatus, i2$1.NgControlStatusGroup, i2$1.FormGroupDirective, i2$1.FormControlName, JourneyProgressIndicatorComponent, FocusAreaQuestionComponent, FocusAreaToolsModalComponent, IndeterminateSpinnerComponent], styles: ["[_nghost-%COMP%]{display:block}.animated-bubbles[_ngcontent-%COMP%]{overflow:hidden}.animated-bubbles[_ngcontent-%COMP%]:before, .animated-bubbles[_ngcontent-%COMP%]:after{content:\"\";position:absolute;border-radius:50%;animation:_ngcontent-%COMP%_float 20s infinite ease-in-out;opacity:.05}.animated-bubbles[_ngcontent-%COMP%]:before{width:600px;height:600px;background:radial-gradient(circle,#3b82f6 0%,transparent 70%);top:-300px;left:-300px;animation-delay:-5s}.animated-bubbles[_ngcontent-%COMP%]:after{width:800px;height:800px;background:radial-gradient(circle,#06b6d4 0%,transparent 70%);bottom:-400px;right:-400px;animation-delay:-10s}.animated-bubbles.light-mode[_ngcontent-%COMP%]:before, .animated-bubbles.light-mode[_ngcontent-%COMP%]:after{opacity:.03}@keyframes _ngcontent-%COMP%_float{0%,to{transform:translate(0) scale(1)}33%{transform:translate(50px,-50px) scale(1.1)}66%{transform:translate(-30px,30px) scale(.9)}}"], changeDetection: 0 }); }
+            i0.ɵɵconditional((!ctx.accountData() || ctx.editMode() || ctx.focusAreasEditMode()) && !ctx.isCreatingAccount() ? 11 : -1);
+        } }, dependencies: [CommonModule, i1$1.NgClass, ReactiveFormsModule, i2$1.ɵNgNoValidate, i2$1.DefaultValueAccessor, i2$1.RadioControlValueAccessor, i2$1.NgControlStatus, i2$1.NgControlStatusGroup, i2$1.FormGroupDirective, i2$1.FormControlName, JourneyProgressIndicatorComponent, FocusAreaQuestionComponent, FocusAreaToolsModalComponent, IndeterminateSpinnerComponent, DashboardHeaderComponent], styles: ["[_nghost-%COMP%]{display:block}.animated-bubbles[_ngcontent-%COMP%]{overflow:hidden}.animated-bubbles[_ngcontent-%COMP%]:before, .animated-bubbles[_ngcontent-%COMP%]:after{content:\"\";position:absolute;border-radius:50%;animation:_ngcontent-%COMP%_float 20s infinite ease-in-out;opacity:.05}.animated-bubbles[_ngcontent-%COMP%]:before{width:600px;height:600px;background:radial-gradient(circle,#3b82f6 0%,transparent 70%);top:-300px;left:-300px;animation-delay:-5s}.animated-bubbles[_ngcontent-%COMP%]:after{width:800px;height:800px;background:radial-gradient(circle,#06b6d4 0%,transparent 70%);bottom:-400px;right:-400px;animation-delay:-10s}.animated-bubbles.light-mode[_ngcontent-%COMP%]:before, .animated-bubbles.light-mode[_ngcontent-%COMP%]:after{opacity:.03}@keyframes _ngcontent-%COMP%_float{0%,to{transform:translate(0) scale(1)}33%{transform:translate(50px,-50px) scale(1.1)}66%{transform:translate(-30px,30px) scale(.9)}}"], changeDetection: 0 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SymphiqCreateAccountDashboardComponent, [{
         type: Component,
-        args: [{ selector: 'symphiq-create-account-dashboard', standalone: true, imports: [CommonModule, ReactiveFormsModule, JourneyProgressIndicatorComponent, FocusAreaQuestionComponent, FocusAreaToolsModalComponent, IndeterminateSpinnerComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <div [ngClass]="getContainerClasses()">
-      <!-- Scroll Progress Bar -->
-      <div [class]="embedded() ? 'sticky top-0 left-0 right-0 h-1 z-[60] bg-slate-200/30' : 'fixed top-0 left-0 right-0 h-1 z-[60] bg-slate-200/30'">
-        <div
-          [style.width.%]="scrollProgress()"
-          [ngClass]="isLightMode() ? 'bg-gradient-to-r from-blue-500 to-cyan-500' : 'bg-gradient-to-r from-blue-400 to-cyan-400'"
-          class="h-full transition-all duration-200 ease-out">
-        </div>
-      </div>
-
-      <div class="animated-bubbles" [class.light-mode]="isLightMode()" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100vw; height: 100vh; z-index: 1; pointer-events: none;"></div>
-
-      <div class="relative z-[51]">
-        <header [ngClass]="getHeaderClasses()" class="sticky top-0 z-50">
-          <!-- Expanded Header -->
-          <div
-            class="transition-all duration-300 ease-in-out overflow-hidden"
-            [class.max-h-0]="headerScrollService.isScrolled()"
-            [class.opacity-0]="headerScrollService.isScrolled()"
-            [class.max-h-96]="!headerScrollService.isScrolled()"
-            [class.opacity-100]="!headerScrollService.isScrolled()">
-            <div
-              class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"
-              [class.pointer-events-none]="headerScrollService.isScrolled()"
-              [class.pointer-events-auto]="!headerScrollService.isScrolled()">
-              <div class="flex items-center justify-between">
-                <div>
-                  <h1 [ngClass]="getMainTitleClasses()">
-                    Create Account
-                  </h1>
-                  <p [ngClass]="getSubtitleClasses()">
-                    Tell us about your shop
-                  </p>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <!-- Condensed Header -->
-          <div
-            class="transition-all duration-300 ease-in-out overflow-hidden"
-            [class.max-h-0]="!headerScrollService.isScrolled()"
-            [class.opacity-0]="!headerScrollService.isScrolled()"
-            [class.max-h-20]="headerScrollService.isScrolled()"
-            [class.opacity-100]="headerScrollService.isScrolled()">
-            <div
-              class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3"
-              [class.pointer-events-none]="!headerScrollService.isScrolled()"
-              [class.pointer-events-auto]="headerScrollService.isScrolled()">
-              <div class="flex items-center justify-between">
-                <div class="flex-1 min-w-0 mr-4">
-                  <h1 [ngClass]="isLightMode() ? 'text-xl font-bold bg-gradient-to-r from-blue-600 to-cyan-600 bg-clip-text text-transparent truncate' : 'text-xl font-bold bg-gradient-to-r from-blue-400 to-cyan-400 bg-clip-text text-transparent truncate'">
-                    Create Account
-                  </h1>
-                </div>
-              </div>
-            </div>
-          </div>
-        </header>
-
-        <!-- Journey Progress Indicator -->
-        <symphiq-journey-progress-indicator
-          [viewMode]="viewMode()"
-          [currentStepId]="JourneyStepIdEnum.CREATE_ACCOUNT"
-          [showNextStepAction]="showNextStepAction()"
-          [forDemo]="forDemo()"
-          [maxAccessibleStepId]="maxAccessibleStepId()"
-          (stepClick)="stepClick.emit($event)"
-          (nextStepClick)="nextStepClick.emit()"
-        />
-
-        <main class="relative pb-32">
-          @if (isCreatingAccount()) {
-            <div class="flex flex-col items-center justify-center min-h-[60vh] gap-6">
-              <symphiq-indeterminate-spinner
-                [viewMode]="viewMode()"
-                size="large"
-              />
-              <div class="text-center">
-                <h2 [ngClass]="sectionTitleClasses()" class="text-2xl font-bold mb-2">
-                  Your account is being created
-                </h2>
-                <p [ngClass]="sectionDescriptionClasses()" class="text-base">
-                  Please wait while we set everything up for you...
-                </p>
-              </div>
-            </div>
-          } @else {
-          <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-            <!-- View Mode: Display Account Data -->
-            @if (accountData() && !editMode() && !focusAreasEditMode()) {
-              <div [ngClass]="containerClasses()" class="rounded-2xl border shadow-lg overflow-hidden mb-8">
-                <div [ngClass]="contentClasses()" class="px-8 py-8">
-                  <div class="flex items-start justify-between mb-6">
-                    <div>
-                      <h2 [ngClass]="sectionTitleClasses()" class="text-2xl font-bold mb-2">
-                        Shop Details
-                      </h2>
-                      <p [ngClass]="sectionDescriptionClasses()">
-                        Your shop information
-                      </p>
-                    </div>
-                    <button
-                      type="button"
-                      (click)="enableEditMode()"
-                      [ngClass]="editButtonClasses()"
-                      class="px-4 py-2 rounded-lg font-medium text-sm transition-all duration-200 hover:scale-105 flex items-center gap-2 cursor-pointer">
-                      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
-                      </svg>
-                      Edit
-                    </button>
-                  </div>
-
-                  <div class="space-y-4">
-                    <div>
-                      <label [ngClass]="viewLabelClasses()" class="block text-sm font-medium mb-1">
-                        Shop Name
-                      </label>
-                      <p [ngClass]="viewValueClasses()" class="text-base">
-                        {{ accountData()!.shopName }}
-                      </p>
-                    </div>
-
-                    <div>
-                      <label [ngClass]="viewLabelClasses()" class="block text-sm font-medium mb-1">
-                        Shop URL
-                      </label>
-                      <a [href]="accountData()!.shopUrl" target="_blank" rel="noopener noreferrer"
-                         [ngClass]="viewLinkClasses()"
-                         class="text-base hover:underline">
-                        {{ accountData()!.shopUrl }}
-                      </a>
-                    </div>
-
-                    <div>
-                      <label [ngClass]="viewLabelClasses()" class="block text-sm font-medium mb-1">
-                        Shop Platform
-                      </label>
-                      <p [ngClass]="viewValueClasses()" class="text-base">
-                        @if (accountData()!.shopPlatform === ShopPlatformEnum.SHOPIFY) {
-                          Shopify
-                        } @else {
-                          {{ accountData()!.otherPlatformName || 'Other' }}
-                        }
-                      </p>
-                    </div>
-
-                    <div>
-                      <label [ngClass]="viewLabelClasses()" class="block text-sm font-medium mb-1">
-                        Company Name
-                      </label>
-                      <p [ngClass]="viewValueClasses()" class="text-base">
-                        {{ accountData()!.companyName }}
-                      </p>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            }
-
-            <!-- Edit Mode: Form -->
-            @if (!accountData() || editMode()) {
-              <div [ngClass]="containerClasses()" class="rounded-2xl border shadow-lg overflow-hidden mb-8">
-                <div [ngClass]="contentClasses()" class="px-8 py-8">
-                  <div class="mb-6">
-                    <h2 [ngClass]="sectionTitleClasses()" class="text-2xl font-bold mb-2">
-                      Shop Details
-                    </h2>
-                    <p [ngClass]="sectionDescriptionClasses()">
-                      Enter your shop details to get started with Symphiq
-                    </p>
-                  </div>
-
-                  <form [formGroup]="accountForm" class="space-y-6">
-                    <!-- Shop Name -->
-                    <div>
-                      <label [ngClass]="labelClasses()" class="block text-sm font-semibold mb-2">
-                        Shop Name <span class="text-red-500">*</span>
-                      </label>
-                      <input
-                        #shopNameInput
-                        type="text"
-                        formControlName="shopName"
-                        [ngClass]="inputClasses('shopName')"
-                        class="w-full px-4 py-3 rounded-lg border-2 transition-all duration-200 focus:outline-none focus:ring-2"
-                        placeholder="Enter your shop name"
-                      />
-                      @if (isFieldInvalid('shopName')) {
-                        <p [ngClass]="errorClasses()" class="mt-1 text-sm">
-                          Shop name is required
-                        </p>
-                      }
-                    </div>
-
-                    <!-- Shop URL -->
-                    <div>
-                      <label [ngClass]="labelClasses()" class="block text-sm font-semibold mb-2">
-                        Shop URL <span class="text-red-500">*</span>
-                      </label>
-                      <div class="flex items-center">
-                        <span [ngClass]="urlPrefixClasses()" class="px-4 py-3 rounded-l-lg border-2 border-r-0 text-sm font-medium">
-                          https://
-                        </span>
-                        <input
-                          type="text"
-                          formControlName="shopUrl"
-                          [ngClass]="urlInputClasses('shopUrl')"
-                          class="flex-1 px-4 py-3 rounded-r-lg border-2 transition-all duration-200 focus:outline-none focus:ring-2"
-                          placeholder="yourshop.com"
-                        />
-                      </div>
-                      @if (isFieldInvalid('shopUrl')) {
-                        <p [ngClass]="errorClasses()" class="mt-1 text-sm">
-                          Shop URL is required
-                        </p>
-                      }
-                    </div>
-
-                    <!-- Shop Platform -->
-                    <div>
-                      <label [ngClass]="labelClasses()" class="block text-sm font-semibold mb-3">
-                        Shop Platform <span class="text-red-500">*</span>
-                      </label>
-                      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
-                        <label [ngClass]="radioPlatformClasses(ShopPlatformEnum.SHOPIFY)" class="cursor-pointer">
-                          <input
-                            type="radio"
-                            formControlName="shopPlatform"
-                            [value]="ShopPlatformEnum.SHOPIFY"
-                            class="sr-only"
-                          />
-                          <div class="flex items-center gap-3 p-4 rounded-lg border-2 transition-all duration-200">
-                            <div [ngClass]="radioIndicatorClasses(ShopPlatformEnum.SHOPIFY)" class="w-5 h-5 rounded-full border-2 flex items-center justify-center flex-shrink-0">
-                              @if (accountForm.get('shopPlatform')?.value === ShopPlatformEnum.SHOPIFY) {
-                                <div class="w-3 h-3 rounded-full bg-current"></div>
-                              }
-                            </div>
-                            <div class="flex-1">
-                              <div [ngClass]="radioLabelClasses()" class="font-semibold">
-                                Shopify
-                              </div>
-                            </div>
-                          </div>
-                        </label>
-
-                        <label [ngClass]="radioPlatformClasses(ShopPlatformEnum.OTHER)" class="cursor-pointer">
-                          <input
-                            type="radio"
-                            formControlName="shopPlatform"
-                            [value]="ShopPlatformEnum.OTHER"
-                            class="sr-only"
-                          />
-                          <div class="flex items-center gap-3 p-4 rounded-lg border-2 transition-all duration-200">
-                            <div [ngClass]="radioIndicatorClasses(ShopPlatformEnum.OTHER)" class="w-5 h-5 rounded-full border-2 flex items-center justify-center flex-shrink-0">
-                              @if (accountForm.get('shopPlatform')?.value === ShopPlatformEnum.OTHER) {
-                                <div class="w-3 h-3 rounded-full bg-current"></div>
-                              }
-                            </div>
-                            <div class="flex-1">
-                              <div [ngClass]="radioLabelClasses()" class="font-semibold">
-                                Other
-                              </div>
-                            </div>
-                          </div>
-                        </label>
-                      </div>
-                    </div>
-
-                    <!-- Other Platform Name (Conditional) -->
-                    @if (accountForm.get('shopPlatform')?.value === ShopPlatformEnum.OTHER) {
-                      <div>
-                        <label [ngClass]="labelClasses()" class="block text-sm font-semibold mb-2">
-                          Platform Name <span class="text-red-500">*</span>
-                        </label>
-                        <input
-                          type="text"
-                          formControlName="otherPlatformName"
-                          [ngClass]="inputClasses('otherPlatformName')"
-                          class="w-full px-4 py-3 rounded-lg border-2 transition-all duration-200 focus:outline-none focus:ring-2"
-                          placeholder="Enter platform name (e.g., WooCommerce, Magento)"
-                        />
-                        @if (isFieldInvalid('otherPlatformName')) {
-                          <p [ngClass]="errorClasses()" class="mt-1 text-sm">
-                            Platform name is required
-                          </p>
-                        }
-                      </div>
-                    }
-
-                    <!-- Company Name -->
-                    <div>
-                      <label [ngClass]="labelClasses()" class="block text-sm font-semibold mb-2">
-                        Company Name <span class="text-red-500">*</span>
-                      </label>
-                      <input
-                        type="text"
-                        formControlName="companyName"
-                        [ngClass]="inputClasses('companyName')"
-                        [readonly]="sameAsShopName()"
-                        class="w-full px-4 py-3 rounded-lg border-2 transition-all duration-200 focus:outline-none focus:ring-2"
-                        [class.cursor-not-allowed]="sameAsShopName()"
-                        [class.opacity-60]="sameAsShopName()"
-                        placeholder="Enter company name"
-                      />
-                      <div class="mt-2">
-                        <label class="flex items-center gap-2 cursor-pointer">
-                          <input
-                            type="checkbox"
-                            [checked]="sameAsShopName()"
-                            (change)="toggleSameAsShopName()"
-                            [ngClass]="checkboxClasses()"
-                            class="w-4 h-4 rounded border-2 transition-all duration-200"
-                          />
-                          <span [ngClass]="checkboxLabelClasses()" class="text-sm">
-                            Same as Shop Name
-                          </span>
-                        </label>
-                      </div>
-                      @if (isFieldInvalid('companyName')) {
-                        <p [ngClass]="errorClasses()" class="mt-1 text-sm">
-                          Company name is required
-                        </p>
-                      }
-                    </div>
-
-                    <input formControlName="website" class="absolute -left-[9999px] opacity-0" tabindex="-1" autocomplete="off" />
-                  </form>
-                </div>
-              </div>
-            }
-
-            <!-- Focus Areas Card - View Mode -->
-            @if (accountData() && accountData()!.focusAreaDetails && !focusAreasEditMode() && !editMode()) {
-              <div [ngClass]="containerClasses()" class="rounded-2xl border shadow-lg overflow-hidden">
-                <div [ngClass]="contentClasses()" class="px-8 py-8">
-                  <div class="flex items-start justify-between mb-6">
-                    <div>
-                      <h2 [ngClass]="sectionTitleClasses()" class="text-2xl font-bold mb-2">
-                        Focus Areas
-                      </h2>
-                      <p [ngClass]="sectionDescriptionClasses()">
-                        Your marketing and operational focus areas
-                      </p>
-                    </div>
-                    <button
-                      type="button"
-                      (click)="enableFocusAreasEditMode()"
-                      [ngClass]="editButtonClasses()"
-                      class="px-4 py-2 rounded-lg font-medium text-sm transition-all duration-200 hover:scale-105 flex items-center gap-2 cursor-pointer">
-                      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
-                      </svg>
-                      Edit
-                    </button>
-                  </div>
-
-                  <!-- Grouped by Status -->
-                  @if (engagedFocusAreas().length > 0) {
-                    <div class="mb-6">
-                      <h3 [ngClass]="groupTitleClasses('engaged')" class="text-base font-bold mb-3 flex items-center gap-2">
-                        <span class="w-2 h-2 rounded-full bg-emerald-500"></span>
-                        Engaged In ({{ engagedFocusAreas().length }})
-                      </h3>
-                      <div class="space-y-3">
-                        @for (focusArea of engagedFocusAreas(); track focusArea.focusAreaDomain) {
-                          <div [ngClass]="focusAreaViewCardClasses('engaged')" class="p-4 rounded-lg border-l-4">
-                            <div class="flex items-start justify-between mb-2">
-                              <h4 [ngClass]="focusAreaViewTitleClasses()" class="font-semibold text-sm">
-                                {{ getFocusAreaTitle(focusArea.focusAreaDomain!) }}
-                              </h4>
-                              <span [ngClass]="statusBadgeClasses('engaged')" class="px-2 py-0.5 rounded text-xs font-semibold whitespace-nowrap">
-                                Engaged
-                              </span>
-                            </div>
-                            @if (focusArea.tools && focusArea.tools.length > 0) {
-                              <div class="flex items-center gap-2 mt-2">
-                                <span [ngClass]="toolsLabelViewClasses()" class="text-xs font-medium">Tools:</span>
-                                <div class="flex flex-wrap gap-1.5">
-                                  @for (tool of focusArea.tools; track tool) {
-                                    <span [ngClass]="toolChipViewClasses()" class="px-2 py-0.5 rounded text-xs">
-                                      {{ tool }}
-                                    </span>
-                                  }
-                                </div>
-                              </div>
-                            }
-                          </div>
-                        }
-                      </div>
-                    </div>
-                  }
-
-                  @if (interestedFocusAreas().length > 0) {
-                    <div class="mb-6">
-                      <h3 [ngClass]="groupTitleClasses('interested')" class="text-base font-bold mb-3 flex items-center gap-2">
-                        <span class="w-2 h-2 rounded-full bg-blue-500"></span>
-                        Interested In ({{ interestedFocusAreas().length }})
-                      </h3>
-                      <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
-                        @for (focusArea of interestedFocusAreas(); track focusArea.focusAreaDomain) {
-                          <div [ngClass]="focusAreaViewCardClasses('interested')" class="p-3 rounded-lg border-l-4">
-                            <h4 [ngClass]="focusAreaViewTitleClasses()" class="font-semibold text-sm">
-                              {{ getFocusAreaTitle(focusArea.focusAreaDomain!) }}
-                            </h4>
-                          </div>
-                        }
-                      </div>
-                    </div>
-                  }
-
-                  @if (notInterestedFocusAreas().length > 0) {
-                    <div>
-                      <h3 [ngClass]="groupTitleClasses('not-interested')" class="text-base font-bold mb-3 flex items-center gap-2">
-                        <span class="w-2 h-2 rounded-full bg-slate-400"></span>
-                        Not Interested ({{ notInterestedFocusAreas().length }})
-                      </h3>
-                      <div class="grid grid-cols-2 sm:grid-cols-3 gap-2">
-                        @for (focusArea of notInterestedFocusAreas(); track focusArea.focusAreaDomain) {
-                          <div [ngClass]="focusAreaViewCardClasses('not-interested')" class="p-2 rounded text-center">
-                            <span [ngClass]="focusAreaViewTitleSmallClasses()" class="text-xs font-medium">
-                              {{ getFocusAreaTitle(focusArea.focusAreaDomain!) }}
-                            </span>
-                          </div>
-                        }
-                      </div>
-                    </div>
-                  }
-                </div>
-              </div>
-            }
-
-            <!-- Focus Areas Card - Edit Mode -->
-            @if (!accountData() || focusAreasEditMode()) {
-              <div [ngClass]="containerClasses()" class="rounded-2xl border shadow-lg overflow-hidden">
-                <div [ngClass]="contentClasses()" class="px-8 py-8">
-                  <div class="mb-6">
-                    <div class="flex items-start justify-between">
-                      <div>
-                        <h2 [ngClass]="sectionTitleClasses()" class="text-2xl font-bold mb-2">
-                          Focus Areas
-                        </h2>
-                        <p [ngClass]="sectionDescriptionClasses()">
-                          Tell us about your marketing and operational focus areas
-                        </p>
-                      </div>
-                      <div [ngClass]="progressBadgeClasses()" class="px-4 py-2 rounded-lg text-sm font-semibold whitespace-nowrap">
-                        {{ focusAreasAnswered() }} of {{ totalFocusAreas() }} answered
-                      </div>
-                    </div>
-                  </div>
-
-                  <div class="space-y-4">
-                    @for (domain of allFocusAreaDomains(); track domain; let i = $index) {
-                      <symphiq-focus-area-question
-                        [focusAreaDomain]="domain"
-                        [selectedStatus]="getFocusAreaStatus(domain)"
-                        [selectedTools]="getFocusAreaTools(domain)"
-                        [viewMode]="viewMode()"
-                        [title]="getFocusAreaTitle(domain)"
-                        [description]="getFocusAreaDescription(domain)"
-                        (statusChange)="onFocusAreaStatusChange(domain, $event)"
-                        (toolsClick)="onFocusAreaToolsClick(domain)"
-                      />
-                      @if (i < allFocusAreaDomains().length - 1) {
-                        <div [ngClass]="dividerClasses()" class="my-4"></div>
-                      }
-                    }
-                  </div>
-                </div>
-              </div>
-            }
-          </div>
-          }
-        </main>
-
-        <!-- Tools Selection Modal -->
-        <symphiq-focus-area-tools-modal
-          [isOpen]="toolsModalOpen()"
-          [focusAreaDomain]="currentEditingFocusArea()!"
-          [focusAreaTitle]="currentEditingFocusAreaTitle()"
-          [selectedTools]="currentEditingTools()"
-          [viewMode]="viewMode()"
-          (close)="onToolsModalClose()"
-          (save)="onToolsModalSave($event)"
-        />
-
-        <!-- Sticky Continue Button -->
-        @if ((!accountData() || editMode() || focusAreasEditMode()) && !isCreatingAccount()) {
-          <div [ngClass]="stickyButtonContainerClasses()" class="fixed bottom-0 left-0 right-0 z-50 border-t backdrop-blur-sm">
-            <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
-              <div class="flex items-center gap-3">
-                @if ((accountData() && editMode()) || (accountData() && focusAreasEditMode())) {
-                  <button
-                    type="button"
-                    (click)="focusAreasEditMode() ? cancelFocusAreasEditMode() : cancelEditMode()"
-                    [ngClass]="cancelButtonClasses()"
-                    class="px-6 py-4 rounded-xl font-bold text-base transition-all duration-200 flex items-center justify-center gap-2 cursor-pointer hover:scale-105">
-                    Cancel
-                  </button>
-                }
-                <button
-                  type="button"
-                  (click)="focusAreasEditMode() ? handleSaveFocusAreas() : handleContinue()"
-                  [disabled]="!isButtonEnabled()"
-                  [ngClass]="continueButtonClasses()"
-                  class="flex-1 px-6 py-4 rounded-xl font-bold text-lg transition-all duration-200 flex items-center justify-center gap-3 shadow-lg"
-                  [class.cursor-pointer]="isButtonEnabled()"
-                  [class.cursor-not-allowed]="!isButtonEnabled()"
-                  [class.opacity-50]="!isButtonEnabled()"
-                  [class.hover:scale-105]="isButtonEnabled()">
-                  @if (isLoading()) {
-                    <svg class="w-6 h-6 animate-spin" fill="none" viewBox="0 0 24 24">
-                      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-                      <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-                    </svg>
-                    @if (focusAreasEditMode()) {
-                      Saving Focus Areas...
-                    } @else if (accountData() && editMode()) {
-                      Updating Account...
-                    } @else {
-                      Creating Account...
-                    }
-                  } @else {
-                    @if (focusAreasEditMode()) {
-                      Save Focus Areas
-                    } @else if (accountData() && editMode()) {
-                      Save Changes
-                    } @else {
-                      Create Account
-                    }
-                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/>
-                    </svg>
-                  }
-                </button>
-              </div>
-            </div>
-          </div>
-        }
-      </div>
-    </div>
-  `, styles: [":host{display:block}.animated-bubbles{overflow:hidden}.animated-bubbles:before,.animated-bubbles:after{content:\"\";position:absolute;border-radius:50%;animation:float 20s infinite ease-in-out;opacity:.05}.animated-bubbles:before{width:600px;height:600px;background:radial-gradient(circle,#3b82f6 0%,transparent 70%);top:-300px;left:-300px;animation-delay:-5s}.animated-bubbles:after{width:800px;height:800px;background:radial-gradient(circle,#06b6d4 0%,transparent 70%);bottom:-400px;right:-400px;animation-delay:-10s}.animated-bubbles.light-mode:before,.animated-bubbles.light-mode:after{opacity:.03}@keyframes float{0%,to{transform:translate(0) scale(1)}33%{transform:translate(50px,-50px) scale(1.1)}66%{transform:translate(-30px,30px) scale(.9)}}\n"] }]
-    }], () => [], { embedded: [{ type: i0.Input, args: [{ isSignal: true, alias: "embedded", required: false }] }], parentHeaderOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentHeaderOffset", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], scrollEvent: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollEvent", required: false }] }], scrollElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollElement", required: false }] }], accountData: [{ type: i0.Input, args: [{ isSignal: true, alias: "accountData", required: false }] }], forDemo: [{ type: i0.Input, args: [{ isSignal: true, alias: "forDemo", required: false }] }], showNextStepAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "showNextStepAction", required: false }] }], maxAccessibleStepId: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxAccessibleStepId", required: false }] }], onCreateAccount: [{ type: i0.Output, args: ["onCreateAccount"] }], stepClick: [{ type: i0.Output, args: ["stepClick"] }], nextStepClick: [{ type: i0.Output, args: ["nextStepClick"] }], shopNameInput: [{
-            type: ViewChild,
-            args: ['shopNameInput']
-        }], onScroll: [{
-            type: HostListener,
-            args: ['window:scroll', ['$event']]
-        }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqCreateAccountDashboardComponent, { className: "SymphiqCreateAccountDashboardComponent", filePath: "lib/components/create-account-dashboard/symphiq-create-account-dashboard.component.ts", lineNumber: 642 }); })();
+        args: [{ selector: 'symphiq-create-account-dashboard', standalone: true, imports: [CommonModule, ReactiveFormsModule, JourneyProgressIndicatorComponent, FocusAreaQuestionComponent, FocusAreaToolsModalComponent, IndeterminateSpinnerComponent, DashboardHeaderComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div [ngClass]="getContainerClasses()">
+      <!-- Scroll Progress Bar -->
+      <div [class]="embedded() ? 'sticky top-0 left-0 right-0 h-1 z-[60] bg-slate-200/30' : 'fixed top-0 left-0 right-0 h-1 z-[60] bg-slate-200/30'">
+        <div
+          [style.width.%]="scrollProgress()"
+          [ngClass]="isLightMode() ? 'bg-gradient-to-r from-blue-500 to-cyan-500' : 'bg-gradient-to-r from-blue-400 to-cyan-400'"
+          class="h-full transition-all duration-200 ease-out">
+        </div>
+      </div>
 
-function SearchButtonComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span");
-    i0.ɵɵtext(1, "Search");
-    i0.ɵɵelementEnd();
-} }
-class SearchButtonComponent {
-    constructor() {
-        this.isLightMode = input(false, ...(ngDevMode ? [{ debugName: "isLightMode" }] : []));
-        this.minimized = input(false, ...(ngDevMode ? [{ debugName: "minimized" }] : []));
-        this.title = input('Search (/ or Cmd+K)', ...(ngDevMode ? [{ debugName: "title" }] : []));
-        this.searchClick = output();
-        this.buttonClass = computed(() => {
-            if (this.isLightMode()) {
-                return 'bg-slate-100 text-slate-700 hover:bg-slate-200 hover:text-slate-900';
-            }
-            return 'bg-slate-800 text-slate-300 hover:bg-slate-700 hover:text-white';
-        }, ...(ngDevMode ? [{ debugName: "buttonClass" }] : []));
-    }
-    static { this.ɵfac = function SearchButtonComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SearchButtonComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SearchButtonComponent, selectors: [["symphiq-search-button"]], inputs: { isLightMode: [1, "isLightMode"], minimized: [1, "minimized"], title: [1, "title"] }, outputs: { searchClick: "searchClick" }, decls: 4, vars: 9, consts: [["type", "button", 3, "click", "ngClass", "title"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"]], template: function SearchButtonComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "button", 0);
-            i0.ɵɵlistener("click", function SearchButtonComponent_Template_button_click_0_listener() { return ctx.searchClick.emit(); });
-            i0.ɵɵnamespaceSVG();
-            i0.ɵɵelementStart(1, "svg", 1);
-            i0.ɵɵelement(2, "path", 2);
-            i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(3, SearchButtonComponent_Conditional_3_Template, 2, 0, "span");
-            i0.ɵɵelementEnd();
-        } if (rf & 2) {
-            i0.ɵɵclassMap(ctx.minimized() ? "cursor-pointer p-2 rounded-lg transition-all duration-200 hover:scale-110" : "cursor-pointer flex items-center gap-2 px-3 py-1.5 rounded-lg text-xs font-medium transition-all duration-200 hover:scale-105");
-            i0.ɵɵproperty("ngClass", ctx.buttonClass())("title", ctx.title());
-            i0.ɵɵadvance();
-            i0.ɵɵclassProp("w-5", ctx.minimized())("h-5", ctx.minimized());
-            i0.ɵɵadvance(2);
-            i0.ɵɵconditional(!ctx.minimized() ? 3 : -1);
-        } }, dependencies: [CommonModule, i1$1.NgClass], styles: ["[_nghost-%COMP%]{display:contents}"], changeDetection: 0 }); }
-}
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SearchButtonComponent, [{
-        type: Component,
-        args: [{ selector: 'symphiq-search-button', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule], template: `
-    <button
-      type="button"
-      (click)="searchClick.emit()"
-      [ngClass]="buttonClass()"
-      [title]="title()"
-      [class]="minimized() ? 'cursor-pointer p-2 rounded-lg transition-all duration-200 hover:scale-110' : 'cursor-pointer flex items-center gap-2 px-3 py-1.5 rounded-lg text-xs font-medium transition-all duration-200 hover:scale-105'">
-      <svg class="w-4 h-4" [class.w-5]="minimized()" [class.h-5]="minimized()" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
-      </svg>
-      @if (!minimized()) {
-        <span>Search</span>
-      }
-    </button>
-  `, styles: [":host{display:contents}\n"] }]
-    }], null, { isLightMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLightMode", required: false }] }], minimized: [{ type: i0.Input, args: [{ isSignal: true, alias: "minimized", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], searchClick: [{ type: i0.Output, args: ["searchClick"] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SearchButtonComponent, { className: "SearchButtonComponent", filePath: "lib/components/shared/search-button.component.ts", lineNumber: 30 }); })();
+      <div class="animated-bubbles" [class.light-mode]="isLightMode()" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100vw; height: 100vh; z-index: 1; pointer-events: none;"></div>
 
-function DashboardHeaderComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "div", 6);
-} }
-function DashboardHeaderComponent_Conditional_11_Template(rf, ctx) { if (rf & 1) {
-    const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 7)(1, "symphiq-search-button", 16);
-    i0.ɵɵlistener("searchClick", function DashboardHeaderComponent_Conditional_11_Template_symphiq_search_button_searchClick_1_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSearchClick()); });
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(2, "button", 17);
-    i0.ɵɵlistener("click", function DashboardHeaderComponent_Conditional_11_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onViewModeClick()); });
-    i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(3, "svg", 18);
-    i0.ɵɵelement(4, "path", 19)(5, "path", 20);
-    i0.ɵɵelementEnd();
-    i0.ɵɵnamespaceHTML();
-    i0.ɵɵelementStart(6, "span");
-    i0.ɵɵtext(7);
-    i0.ɵɵelementEnd()()();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("isLightMode", ctx_r1.isLightMode());
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("ngClass", ctx_r1.getViewModeButtonClasses());
-    i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate(ctx_r1.viewModeLabel());
-} }
-function DashboardHeaderComponent_Conditional_12_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 21)(1, "div", 22);
-    i0.ɵɵtext(2, "Generated At");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 23);
-    i0.ɵɵtext(4);
-    i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance();
-    i0.ɵɵclassMap(ctx_r1.metaLabelClass());
-    i0.ɵɵadvance(2);
-    i0.ɵɵclassMap(ctx_r1.headerTitleClass());
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(ctx_r1.formattedGeneratedDate());
-} }
-function DashboardHeaderComponent_Conditional_12_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 21)(1, "div", 22);
-    i0.ɵɵtext(2, "Requested by");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 23);
-    i0.ɵɵtext(4);
-    i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    let tmp_4_0;
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance();
-    i0.ɵɵclassMap(ctx_r1.metaLabelClass());
-    i0.ɵɵadvance(2);
-    i0.ɵɵclassMap(ctx_r1.headerTitleClass());
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate2("", (tmp_4_0 = ctx_r1.requestedByUser()) == null ? null : tmp_4_0.firstName, " ", (tmp_4_0 = ctx_r1.requestedByUser()) == null ? null : tmp_4_0.lastName);
-} }
-function DashboardHeaderComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 8);
-    i0.ɵɵconditionalCreate(1, DashboardHeaderComponent_Conditional_12_Conditional_1_Template, 5, 5, "div", 21);
-    i0.ɵɵconditionalCreate(2, DashboardHeaderComponent_Conditional_12_Conditional_2_Template, 5, 6, "div", 21);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.formattedGeneratedDate() ? 1 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.requestedByUser() ? 2 : -1);
-} }
-function DashboardHeaderComponent_Conditional_19_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 24);
-    i0.ɵɵtext(1, "\u2014");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(2, "span", 25);
-    i0.ɵɵtext(3);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngClass", ctx_r1.isLightMode() ? "text-slate-400" : "text-slate-500");
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngClass", ctx_r1.getCondensedSubtitleClasses());
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.subtitle(), " ");
-} }
-function DashboardHeaderComponent_Conditional_21_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 26);
-    i0.ɵɵtext(1, "\u203A");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(2, "span", 26);
-    i0.ɵɵtext(3);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵclassProp("opacity-0", ctx_r1.subsectionFading())("opacity-100", !ctx_r1.subsectionFading());
-    i0.ɵɵproperty("ngClass", ctx_r1.isLightMode() ? "text-slate-400" : "text-slate-500");
-    i0.ɵɵadvance(2);
-    i0.ɵɵclassProp("opacity-0", ctx_r1.subsectionFading())("opacity-100", !ctx_r1.subsectionFading());
-    i0.ɵɵproperty("ngClass", ctx_r1.isLightMode() ? "text-slate-500" : "text-slate-500");
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.currentSubsection(), " ");
-} }
-function DashboardHeaderComponent_Conditional_21_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 15)(1, "span", 26);
-    i0.ɵɵtext(2);
-    i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(3, DashboardHeaderComponent_Conditional_21_Conditional_3_Template, 4, 11);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵadvance();
-    i0.ɵɵclassProp("opacity-0", ctx_r1.sectionFading())("opacity-100", !ctx_r1.sectionFading());
-    i0.ɵɵproperty("ngClass", ctx_r1.isLightMode() ? "text-slate-600 font-medium" : "text-slate-400 font-medium");
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.currentSection(), " ");
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.currentSubsection() ? 3 : -1);
-} }
-function DashboardHeaderComponent_Conditional_22_Template(rf, ctx) { if (rf & 1) {
-    const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "symphiq-search-button", 27);
-    i0.ɵɵlistener("searchClick", function DashboardHeaderComponent_Conditional_22_Template_symphiq_search_button_searchClick_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSearchClick()); });
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(1, "button", 28);
-    i0.ɵɵlistener("click", function DashboardHeaderComponent_Conditional_22_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onViewModeClick()); });
-    i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(2, "svg", 18);
-    i0.ɵɵelement(3, "path", 19)(4, "path", 20);
-    i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("isLightMode", ctx_r1.isLightMode())("minimized", true);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("ngClass", ctx_r1.getViewModeButtonClasses());
-} }
-class DashboardHeaderComponent {
-    constructor() {
-        this.requestedByUser = input(...(ngDevMode ? [undefined, { debugName: "requestedByUser" }] : []));
-        this.createdDate = input(...(ngDevMode ? [undefined, { debugName: "createdDate" }] : []));
-        this.title = input('', ...(ngDevMode ? [{ debugName: "title" }] : []));
-        this.subtitle = input('', ...(ngDevMode ? [{ debugName: "subtitle" }] : []));
-        this.viewMode = input(ViewModeEnum.LIGHT, ...(ngDevMode ? [{ debugName: "viewMode" }] : []));
-        this.viewModeLabel = input('View Mode', ...(ngDevMode ? [{ debugName: "viewModeLabel" }] : []));
-        this.currentSection = input(...(ngDevMode ? [undefined, { debugName: "currentSection" }] : []));
-        this.currentSubsection = input(...(ngDevMode ? [undefined, { debugName: "currentSubsection" }] : []));
-        this.sectionFading = input(false, ...(ngDevMode ? [{ debugName: "sectionFading" }] : []));
-        this.subsectionFading = input(false, ...(ngDevMode ? [{ debugName: "subsectionFading" }] : []));
-        this.isLoading = input(...(ngDevMode ? [undefined, { debugName: "isLoading" }] : []));
-        this.showControls = input(true, ...(ngDevMode ? [{ debugName: "showControls" }] : []));
-        this.searchClick = output();
-        this.viewModeClick = output();
-        this.headerScrollService = inject(HeaderScrollService);
-        this.isLightMode = computed(() => this.viewMode() === ViewModeEnum.LIGHT, ...(ngDevMode ? [{ debugName: "isLightMode" }] : []));
-        this.dateFormatCache = new StringMemoizeCache();
-        this.formattedGeneratedDate = computed(() => {
-            let formatted = '';
-            const createdDate = this.createdDate();
-            if (createdDate) {
-                formatted = this.formatDate(createdDate.toISOString());
-            }
-            return formatted;
-        }, ...(ngDevMode ? [{ debugName: "formattedGeneratedDate" }] : []));
-        this.headerTitleClass = computed(() => this.isLightMode() ? 'text-slate-900' : 'text-white', ...(ngDevMode ? [{ debugName: "headerTitleClass" }] : []));
-        this.metaLabelClass = computed(() => this.isLightMode() ? 'text-slate-600' : 'text-slate-500', ...(ngDevMode ? [{ debugName: "metaLabelClass" }] : []));
-    }
-    onSearchClick() {
-        this.searchClick.emit();
-    }
-    onViewModeClick() {
-        this.viewModeClick.emit();
-    }
-    formatDate(dateString) {
-        // Cache date formatting operations
-        return this.dateFormatCache.get(dateString, (date) => new Date(date).toLocaleDateString('en-US', {
-            year: 'numeric',
-            month: 'long',
-            day: 'numeric',
-        }));
-    }
-    getHeaderClasses() {
-        return this.isLightMode()
-            ? 'bg-white/95 backdrop-blur-md shadow-sm border-b border-slate-200'
-            : 'bg-slate-900/95 backdrop-blur-md shadow-sm border-b border-slate-800';
-    }
-    getMainTitleClasses() {
-        return this.isLightMode()
-            ? 'text-3xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent'
-            : 'text-3xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent';
-    }
-    getSubtitleClasses() {
-        return this.isLightMode()
-            ? 'text-slate-600 mt-1 text-sm'
-            : 'text-slate-400 mt-1 text-sm';
-    }
-    getCondensedTitleClasses() {
-        return this.isLightMode()
-            ? 'text-xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent'
-            : 'text-xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent';
-    }
-    getCondensedSubtitleClasses() {
-        return this.isLightMode()
-            ? 'text-sm text-slate-500'
-            : 'text-sm text-slate-400';
-    }
-    getViewModeButtonClasses() {
-        return this.isLightMode()
-            ? 'bg-slate-100 hover:bg-slate-200 text-slate-700 border border-slate-200'
-            : 'bg-slate-800 hover:bg-slate-700 text-slate-300 border border-slate-700';
-    }
-    static { this.ɵfac = function DashboardHeaderComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || DashboardHeaderComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DashboardHeaderComponent, selectors: [["symphiq-dashboard-header"]], inputs: { requestedByUser: [1, "requestedByUser"], createdDate: [1, "createdDate"], title: [1, "title"], subtitle: [1, "subtitle"], viewMode: [1, "viewMode"], viewModeLabel: [1, "viewModeLabel"], currentSection: [1, "currentSection"], currentSubsection: [1, "currentSubsection"], sectionFading: [1, "sectionFading"], subsectionFading: [1, "subsectionFading"], isLoading: [1, "isLoading"], showControls: [1, "showControls"] }, outputs: { searchClick: "searchClick", viewModeClick: "viewModeClick" }, decls: 23, vars: 27, consts: [[1, "sticky", "top-0", "z-50", "overflow-hidden", 2, "transition", "height 300ms ease-in-out", 3, "ngClass"], [1, "transition-opacity", "duration-300", "ease-in-out", "h-full"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-4", "h-full", "flex", "items-center"], [1, "flex", "items-center", "justify-between", "w-full"], [1, "flex", "items-center", "gap-3"], [3, "ngClass"], ["title", "Refreshing data...", 1, "animate-spin", "w-4", "h-4", "border-2", "border-blue-500/30", "border-t-blue-500", "rounded-full"], [1, "flex", "items-center", "gap-2"], [1, "flex", "flex-col", "gap-4", "min-w-[180px]"], [1, "absolute", "inset-x-0", "top-0", "transition-opacity", "duration-300", "ease-in-out"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-2"], [1, "flex", "items-center", "justify-between"], [1, "flex", "items-center", "gap-3", "flex-1", "min-w-0", "mr-4"], [1, "flex-shrink-0", 3, "ngClass"], [1, "flex", "items-center", "gap-4"], [1, "flex", "items-center", "gap-2", "text-sm", "flex-shrink-0"], [3, "searchClick", "isLightMode"], ["type", "button", 1, "cursor-pointer", "flex", "items-center", "gap-2", "px-3", "py-1.5", "rounded-lg", "text-xs", "font-medium", "transition-all", "duration-200", "hover:scale-105", 3, "click", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M15 12a3 3 0 11-6 0 3 3 0 016 0z"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"], [1, "text-left", "sm:text-right"], [1, "text-xs", "sm:text-sm"], [1, "text-sm", "sm:text-base", "font-medium"], [1, "hidden", "sm:inline", 3, "ngClass"], [1, "hidden", "sm:block", "truncate", "min-w-0", 3, "ngClass"], [1, "transition-opacity", "duration-300", 3, "ngClass"], [3, "searchClick", "isLightMode", "minimized"], ["type", "button", 1, "cursor-pointer", "flex", "items-center", "gap-2", "px-2", "py-1.5", "rounded-lg", "text-xs", "font-medium", "transition-all", "duration-200", "hover:scale-105", 3, "click", "ngClass"]], template: function DashboardHeaderComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "header", 0)(1, "div", 1)(2, "div", 2)(3, "div", 3)(4, "div")(5, "div", 4)(6, "h1", 5);
-            i0.ɵɵtext(7);
-            i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(8, DashboardHeaderComponent_Conditional_8_Template, 1, 0, "div", 6);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(9, "p", 5);
-            i0.ɵɵtext(10);
-            i0.ɵɵelementEnd()();
-            i0.ɵɵconditionalCreate(11, DashboardHeaderComponent_Conditional_11_Template, 8, 3, "div", 7);
-            i0.ɵɵconditionalCreate(12, DashboardHeaderComponent_Conditional_12_Template, 3, 2, "div", 8);
-            i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(13, "div", 9)(14, "div", 10)(15, "div", 11)(16, "div", 12)(17, "h1", 13);
-            i0.ɵɵtext(18);
-            i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(19, DashboardHeaderComponent_Conditional_19_Template, 4, 3);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(20, "div", 14);
-            i0.ɵɵconditionalCreate(21, DashboardHeaderComponent_Conditional_21_Template, 4, 7, "div", 15);
-            i0.ɵɵconditionalCreate(22, DashboardHeaderComponent_Conditional_22_Template, 5, 3);
-            i0.ɵɵelementEnd()()()()();
-        } if (rf & 2) {
-            i0.ɵɵstyleProp("height", ctx.headerScrollService.isScrolled() ? "52px" : "100px");
-            i0.ɵɵproperty("ngClass", ctx.getHeaderClasses());
-            i0.ɵɵadvance();
-            i0.ɵɵclassProp("opacity-0", ctx.headerScrollService.isScrolled())("pointer-events-none", ctx.headerScrollService.isScrolled())("opacity-100", !ctx.headerScrollService.isScrolled());
-            i0.ɵɵadvance(5);
-            i0.ɵɵproperty("ngClass", ctx.getMainTitleClasses());
-            i0.ɵɵadvance();
-            i0.ɵɵtextInterpolate1(" ", ctx.title(), " ");
-            i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.isLoading() ? 8 : -1);
-            i0.ɵɵadvance();
-            i0.ɵɵproperty("ngClass", ctx.getSubtitleClasses());
-            i0.ɵɵadvance();
-            i0.ɵɵtextInterpolate1(" ", ctx.subtitle(), " ");
-            i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.showControls() ? 11 : -1);
-            i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.formattedGeneratedDate() || ctx.requestedByUser() ? 12 : -1);
-            i0.ɵɵadvance();
-            i0.ɵɵclassProp("opacity-0", !ctx.headerScrollService.isScrolled())("pointer-events-none", !ctx.headerScrollService.isScrolled())("opacity-100", ctx.headerScrollService.isScrolled());
-            i0.ɵɵadvance(4);
-            i0.ɵɵproperty("ngClass", ctx.getCondensedTitleClasses());
-            i0.ɵɵadvance();
-            i0.ɵɵtextInterpolate1(" ", ctx.title(), " ");
-            i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.subtitle() ? 19 : -1);
-            i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.currentSection() ? 21 : -1);
-            i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.showControls() ? 22 : -1);
-        } }, dependencies: [CommonModule, i1$1.NgClass, SearchButtonComponent], encapsulation: 2, changeDetection: 0 }); }
-}
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DashboardHeaderComponent, [{
-        type: Component,
-        args: [{
-                selector: 'symphiq-dashboard-header',
-                standalone: true,
-                imports: [CommonModule, SearchButtonComponent],
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: `
-    <header [ngClass]="getHeaderClasses()" class="sticky top-0 z-50 overflow-hidden" [style.height]="headerScrollService.isScrolled() ? '52px' : '100px'" style="transition: height 300ms ease-in-out;">
-        <!-- Expanded Header (default state) -->
-        <div
-          class="transition-opacity duration-300 ease-in-out h-full"
-          [class.opacity-0]="headerScrollService.isScrolled()"
-          [class.pointer-events-none]="headerScrollService.isScrolled()"
-          [class.opacity-100]="!headerScrollService.isScrolled()">
-          <div
-            class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 h-full flex items-center">
-          <div class="flex items-center justify-between w-full">
-            <div>
-              <div class="flex items-center gap-3">
-                <h1 [ngClass]="getMainTitleClasses()">
-                  {{ title() }}
-                </h1>
-                @if (isLoading()) {
-                  <div class="animate-spin w-4 h-4 border-2 border-blue-500/30 border-t-blue-500 rounded-full" title="Refreshing data..."></div>
-                }
+      <div class="relative z-[51]">
+        <symphiq-dashboard-header
+          [title]="'Create Account'"
+          [subtitle]="'Tell us about your shop'"
+          [viewMode]="viewMode()"
+          [showControls]="false"
+        />
+
+        <!-- Journey Progress Indicator -->
+        <symphiq-journey-progress-indicator
+          [viewMode]="viewMode()"
+          [currentStepId]="JourneyStepIdEnum.CREATE_ACCOUNT"
+          [showNextStepAction]="showNextStepAction()"
+          [forDemo]="forDemo()"
+          [maxAccessibleStepId]="maxAccessibleStepId()"
+          (stepClick)="stepClick.emit($event)"
+          (nextStepClick)="nextStepClick.emit()"
+        />
+
+        <main class="relative pb-32">
+          @if (isCreatingAccount()) {
+            <div class="flex flex-col items-center justify-center min-h-[60vh] gap-6">
+              <symphiq-indeterminate-spinner
+                [viewMode]="viewMode()"
+                size="large"
+              />
+              <div class="text-center">
+                <h2 [ngClass]="sectionTitleClasses()" class="text-2xl font-bold mb-2">
+                  Your account is being created
+                </h2>
+                <p [ngClass]="sectionDescriptionClasses()" class="text-base">
+                  Please wait while we set everything up for you...
+                </p>
               </div>
-              <p [ngClass]="getSubtitleClasses()">
-                {{ subtitle() }}
-              </p>
             </div>
-            @if (showControls()) {
-              <div class="flex items-center gap-2">
-                <symphiq-search-button
-                  [isLightMode]="isLightMode()"
-                  (searchClick)="onSearchClick()"
-                />
-                <button
-                  type="button"
-                  (click)="onViewModeClick()"
-                  [ngClass]="getViewModeButtonClasses()"
-                  class="cursor-pointer flex items-center gap-2 px-3 py-1.5 rounded-lg text-xs font-medium transition-all duration-200 hover:scale-105">
-                  <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
-                  </svg>
-                  <span>{{ viewModeLabel() }}</span>
-                </button>
+          } @else {
+          <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+            <!-- View Mode: Display Account Data -->
+            @if (accountData() && !editMode() && !focusAreasEditMode()) {
+              <div [ngClass]="containerClasses()" class="rounded-2xl border shadow-lg overflow-hidden mb-8">
+                <div [ngClass]="contentClasses()" class="px-8 py-8">
+                  <div class="flex items-start justify-between mb-6">
+                    <div>
+                      <h2 [ngClass]="sectionTitleClasses()" class="text-2xl font-bold mb-2">
+                        Shop Details
+                      </h2>
+                      <p [ngClass]="sectionDescriptionClasses()">
+                        Your shop information
+                      </p>
+                    </div>
+                    <button
+                      type="button"
+                      (click)="enableEditMode()"
+                      [ngClass]="editButtonClasses()"
+                      class="px-4 py-2 rounded-lg font-medium text-sm transition-all duration-200 hover:scale-105 flex items-center gap-2 cursor-pointer">
+                      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
+                      </svg>
+                      Edit
+                    </button>
+                  </div>
+
+                  <div class="space-y-4">
+                    <div>
+                      <label [ngClass]="viewLabelClasses()" class="block text-sm font-medium mb-1">
+                        Shop Name
+                      </label>
+                      <p [ngClass]="viewValueClasses()" class="text-base">
+                        {{ accountData()!.shopName }}
+                      </p>
+                    </div>
+
+                    <div>
+                      <label [ngClass]="viewLabelClasses()" class="block text-sm font-medium mb-1">
+                        Shop URL
+                      </label>
+                      <a [href]="accountData()!.shopUrl" target="_blank" rel="noopener noreferrer"
+                         [ngClass]="viewLinkClasses()"
+                         class="text-base hover:underline">
+                        {{ accountData()!.shopUrl }}
+                      </a>
+                    </div>
+
+                    <div>
+                      <label [ngClass]="viewLabelClasses()" class="block text-sm font-medium mb-1">
+                        Shop Platform
+                      </label>
+                      <p [ngClass]="viewValueClasses()" class="text-base">
+                        @if (accountData()!.shopPlatform === ShopPlatformEnum.SHOPIFY) {
+                          Shopify
+                        } @else {
+                          {{ accountData()!.otherPlatformName || 'Other' }}
+                        }
+                      </p>
+                    </div>
+
+                    <div>
+                      <label [ngClass]="viewLabelClasses()" class="block text-sm font-medium mb-1">
+                        Company Name
+                      </label>
+                      <p [ngClass]="viewValueClasses()" class="text-base">
+                        {{ accountData()!.companyName }}
+                      </p>
+                    </div>
+                  </div>
+                </div>
               </div>
             }
-            @if (formattedGeneratedDate() || requestedByUser()) {
-              <div class="flex flex-col gap-4 min-w-[180px]">
-                @if (formattedGeneratedDate()) {
-                  <div class="text-left sm:text-right">
-                    <div [class]="metaLabelClass()" class="text-xs sm:text-sm">Generated At</div>
-                    <div [class]="headerTitleClass()" class="text-sm sm:text-base font-medium">{{ formattedGeneratedDate() }}</div>
-                  </div>
-                }
-                @if (requestedByUser()) {
-                  <div class="text-left sm:text-right">
-                    <div [class]="metaLabelClass()" class="text-xs sm:text-sm">Requested by</div>
-                    <div [class]="headerTitleClass()" class="text-sm sm:text-base font-medium">{{ requestedByUser()?.firstName }} {{ requestedByUser()?.lastName }}</div>
+
+            <!-- Edit Mode: Form -->
+            @if (!accountData() || editMode()) {
+              <div [ngClass]="containerClasses()" class="rounded-2xl border shadow-lg overflow-hidden mb-8">
+                <div [ngClass]="contentClasses()" class="px-8 py-8">
+                  <div class="mb-6">
+                    <h2 [ngClass]="sectionTitleClasses()" class="text-2xl font-bold mb-2">
+                      Shop Details
+                    </h2>
+                    <p [ngClass]="sectionDescriptionClasses()">
+                      Enter your shop details to get started with Symphiq
+                    </p>
                   </div>
-                }
+
+                  <form [formGroup]="accountForm" class="space-y-6">
+                    <!-- Shop Name -->
+                    <div>
+                      <label [ngClass]="labelClasses()" class="block text-sm font-semibold mb-2">
+                        Shop Name <span class="text-red-500">*</span>
+                      </label>
+                      <input
+                        #shopNameInput
+                        type="text"
+                        formControlName="shopName"
+                        [ngClass]="inputClasses('shopName')"
+                        class="w-full px-4 py-3 rounded-lg border-2 transition-all duration-200 focus:outline-none focus:ring-2"
+                        placeholder="Enter your shop name"
+                      />
+                      @if (isFieldInvalid('shopName')) {
+                        <p [ngClass]="errorClasses()" class="mt-1 text-sm">
+                          Shop name is required
+                        </p>
+                      }
+                    </div>
+
+                    <!-- Shop URL -->
+                    <div>
+                      <label [ngClass]="labelClasses()" class="block text-sm font-semibold mb-2">
+                        Shop URL <span class="text-red-500">*</span>
+                      </label>
+                      <div class="flex items-center">
+                        <span [ngClass]="urlPrefixClasses()" class="px-4 py-3 rounded-l-lg border-2 border-r-0 text-sm font-medium">
+                          https://
+                        </span>
+                        <input
+                          type="text"
+                          formControlName="shopUrl"
+                          [ngClass]="urlInputClasses('shopUrl')"
+                          class="flex-1 px-4 py-3 rounded-r-lg border-2 transition-all duration-200 focus:outline-none focus:ring-2"
+                          placeholder="yourshop.com"
+                        />
+                      </div>
+                      @if (isFieldInvalid('shopUrl')) {
+                        <p [ngClass]="errorClasses()" class="mt-1 text-sm">
+                          Shop URL is required
+                        </p>
+                      }
+                    </div>
+
+                    <!-- Shop Platform -->
+                    <div>
+                      <label [ngClass]="labelClasses()" class="block text-sm font-semibold mb-3">
+                        Shop Platform <span class="text-red-500">*</span>
+                      </label>
+                      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                        <label [ngClass]="radioPlatformClasses(ShopPlatformEnum.SHOPIFY)" class="cursor-pointer">
+                          <input
+                            type="radio"
+                            formControlName="shopPlatform"
+                            [value]="ShopPlatformEnum.SHOPIFY"
+                            class="sr-only"
+                          />
+                          <div class="flex items-center gap-3 p-4 rounded-lg border-2 transition-all duration-200">
+                            <div [ngClass]="radioIndicatorClasses(ShopPlatformEnum.SHOPIFY)" class="w-5 h-5 rounded-full border-2 flex items-center justify-center flex-shrink-0">
+                              @if (accountForm.get('shopPlatform')?.value === ShopPlatformEnum.SHOPIFY) {
+                                <div class="w-3 h-3 rounded-full bg-current"></div>
+                              }
+                            </div>
+                            <div class="flex-1">
+                              <div [ngClass]="radioLabelClasses()" class="font-semibold">
+                                Shopify
+                              </div>
+                            </div>
+                          </div>
+                        </label>
+
+                        <label [ngClass]="radioPlatformClasses(ShopPlatformEnum.OTHER)" class="cursor-pointer">
+                          <input
+                            type="radio"
+                            formControlName="shopPlatform"
+                            [value]="ShopPlatformEnum.OTHER"
+                            class="sr-only"
+                          />
+                          <div class="flex items-center gap-3 p-4 rounded-lg border-2 transition-all duration-200">
+                            <div [ngClass]="radioIndicatorClasses(ShopPlatformEnum.OTHER)" class="w-5 h-5 rounded-full border-2 flex items-center justify-center flex-shrink-0">
+                              @if (accountForm.get('shopPlatform')?.value === ShopPlatformEnum.OTHER) {
+                                <div class="w-3 h-3 rounded-full bg-current"></div>
+                              }
+                            </div>
+                            <div class="flex-1">
+                              <div [ngClass]="radioLabelClasses()" class="font-semibold">
+                                Other
+                              </div>
+                            </div>
+                          </div>
+                        </label>
+                      </div>
+                    </div>
+
+                    <!-- Other Platform Name (Conditional) -->
+                    @if (accountForm.get('shopPlatform')?.value === ShopPlatformEnum.OTHER) {
+                      <div>
+                        <label [ngClass]="labelClasses()" class="block text-sm font-semibold mb-2">
+                          Platform Name <span class="text-red-500">*</span>
+                        </label>
+                        <input
+                          type="text"
+                          formControlName="otherPlatformName"
+                          [ngClass]="inputClasses('otherPlatformName')"
+                          class="w-full px-4 py-3 rounded-lg border-2 transition-all duration-200 focus:outline-none focus:ring-2"
+                          placeholder="Enter platform name (e.g., WooCommerce, Magento)"
+                        />
+                        @if (isFieldInvalid('otherPlatformName')) {
+                          <p [ngClass]="errorClasses()" class="mt-1 text-sm">
+                            Platform name is required
+                          </p>
+                        }
+                      </div>
+                    }
+
+                    <!-- Company Name -->
+                    <div>
+                      <label [ngClass]="labelClasses()" class="block text-sm font-semibold mb-2">
+                        Company Name <span class="text-red-500">*</span>
+                      </label>
+                      <input
+                        type="text"
+                        formControlName="companyName"
+                        [ngClass]="inputClasses('companyName')"
+                        [readonly]="sameAsShopName()"
+                        class="w-full px-4 py-3 rounded-lg border-2 transition-all duration-200 focus:outline-none focus:ring-2"
+                        [class.cursor-not-allowed]="sameAsShopName()"
+                        [class.opacity-60]="sameAsShopName()"
+                        placeholder="Enter company name"
+                      />
+                      <div class="mt-2">
+                        <label class="flex items-center gap-2 cursor-pointer">
+                          <input
+                            type="checkbox"
+                            [checked]="sameAsShopName()"
+                            (change)="toggleSameAsShopName()"
+                            [ngClass]="checkboxClasses()"
+                            class="w-4 h-4 rounded border-2 transition-all duration-200"
+                          />
+                          <span [ngClass]="checkboxLabelClasses()" class="text-sm">
+                            Same as Shop Name
+                          </span>
+                        </label>
+                      </div>
+                      @if (isFieldInvalid('companyName')) {
+                        <p [ngClass]="errorClasses()" class="mt-1 text-sm">
+                          Company name is required
+                        </p>
+                      }
+                    </div>
+
+                    <input formControlName="website" class="absolute -left-[9999px] opacity-0" tabindex="-1" autocomplete="off" />
+                  </form>
+                </div>
               </div>
             }
-          </div>
-          </div>
-        </div>
 
-        <!-- Condensed Header (scrolled state) -->
-        <div
-          class="absolute inset-x-0 top-0 transition-opacity duration-300 ease-in-out"
-          [class.opacity-0]="!headerScrollService.isScrolled()"
-          [class.pointer-events-none]="!headerScrollService.isScrolled()"
-          [class.opacity-100]="headerScrollService.isScrolled()">
-          <div
-            class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-2">
-          <div class="flex items-center justify-between">
-            <div class="flex items-center gap-3 flex-1 min-w-0 mr-4">
-              <h1 [ngClass]="getCondensedTitleClasses()" class="flex-shrink-0">
-                {{ title() }}
-              </h1>
-              @if (subtitle()) {
-                <span [ngClass]="isLightMode() ? 'text-slate-400' : 'text-slate-500'" class="hidden sm:inline">—</span>
-                <span [ngClass]="getCondensedSubtitleClasses()" class="hidden sm:block truncate min-w-0">
-                  {{ subtitle() }}
-                </span>
-              }
-            </div>
-            <div class="flex items-center gap-4">
-              @if (currentSection()) {
-                <div class="flex items-center gap-2 text-sm flex-shrink-0">
-                  <span [ngClass]="isLightMode() ? 'text-slate-600 font-medium' : 'text-slate-400 font-medium'" class="transition-opacity duration-300" [class.opacity-0]="sectionFading()" [class.opacity-100]="!sectionFading()">
-                    {{ currentSection() }}
-                  </span>
-                  @if (currentSubsection()) {
-                    <span [ngClass]="isLightMode() ? 'text-slate-400' : 'text-slate-500'" class="transition-opacity duration-300" [class.opacity-0]="subsectionFading()" [class.opacity-100]="!subsectionFading()">›</span>
-                    <span [ngClass]="isLightMode() ? 'text-slate-500' : 'text-slate-500'" class="transition-opacity duration-300" [class.opacity-0]="subsectionFading()" [class.opacity-100]="!subsectionFading()">
-                      {{ currentSubsection() }}
-                    </span>
+            <!-- Focus Areas Card - View Mode -->
+            @if (accountData() && accountData()!.focusAreaDetails && !focusAreasEditMode() && !editMode()) {
+              <div [ngClass]="containerClasses()" class="rounded-2xl border shadow-lg overflow-hidden">
+                <div [ngClass]="contentClasses()" class="px-8 py-8">
+                  <div class="flex items-start justify-between mb-6">
+                    <div>
+                      <h2 [ngClass]="sectionTitleClasses()" class="text-2xl font-bold mb-2">
+                        Focus Areas
+                      </h2>
+                      <p [ngClass]="sectionDescriptionClasses()">
+                        Your marketing and operational focus areas
+                      </p>
+                    </div>
+                    <button
+                      type="button"
+                      (click)="enableFocusAreasEditMode()"
+                      [ngClass]="editButtonClasses()"
+                      class="px-4 py-2 rounded-lg font-medium text-sm transition-all duration-200 hover:scale-105 flex items-center gap-2 cursor-pointer">
+                      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
+                      </svg>
+                      Edit
+                    </button>
+                  </div>
+
+                  <!-- Grouped by Status -->
+                  @if (engagedFocusAreas().length > 0) {
+                    <div class="mb-6">
+                      <h3 [ngClass]="groupTitleClasses('engaged')" class="text-base font-bold mb-3 flex items-center gap-2">
+                        <span class="w-2 h-2 rounded-full bg-emerald-500"></span>
+                        Engaged In ({{ engagedFocusAreas().length }})
+                      </h3>
+                      <div class="space-y-3">
+                        @for (focusArea of engagedFocusAreas(); track focusArea.focusAreaDomain) {
+                          <div [ngClass]="focusAreaViewCardClasses('engaged')" class="p-4 rounded-lg border-l-4">
+                            <div class="flex items-start justify-between mb-2">
+                              <h4 [ngClass]="focusAreaViewTitleClasses()" class="font-semibold text-sm">
+                                {{ getFocusAreaTitle(focusArea.focusAreaDomain!) }}
+                              </h4>
+                              <span [ngClass]="statusBadgeClasses('engaged')" class="px-2 py-0.5 rounded text-xs font-semibold whitespace-nowrap">
+                                Engaged
+                              </span>
+                            </div>
+                            @if (focusArea.tools && focusArea.tools.length > 0) {
+                              <div class="flex items-center gap-2 mt-2">
+                                <span [ngClass]="toolsLabelViewClasses()" class="text-xs font-medium">Tools:</span>
+                                <div class="flex flex-wrap gap-1.5">
+                                  @for (tool of focusArea.tools; track tool) {
+                                    <span [ngClass]="toolChipViewClasses()" class="px-2 py-0.5 rounded text-xs">
+                                      {{ tool }}
+                                    </span>
+                                  }
+                                </div>
+                              </div>
+                            }
+                          </div>
+                        }
+                      </div>
+                    </div>
+                  }
+
+                  @if (interestedFocusAreas().length > 0) {
+                    <div class="mb-6">
+                      <h3 [ngClass]="groupTitleClasses('interested')" class="text-base font-bold mb-3 flex items-center gap-2">
+                        <span class="w-2 h-2 rounded-full bg-blue-500"></span>
+                        Interested In ({{ interestedFocusAreas().length }})
+                      </h3>
+                      <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
+                        @for (focusArea of interestedFocusAreas(); track focusArea.focusAreaDomain) {
+                          <div [ngClass]="focusAreaViewCardClasses('interested')" class="p-3 rounded-lg border-l-4">
+                            <h4 [ngClass]="focusAreaViewTitleClasses()" class="font-semibold text-sm">
+                              {{ getFocusAreaTitle(focusArea.focusAreaDomain!) }}
+                            </h4>
+                          </div>
+                        }
+                      </div>
+                    </div>
+                  }
+
+                  @if (notInterestedFocusAreas().length > 0) {
+                    <div>
+                      <h3 [ngClass]="groupTitleClasses('not-interested')" class="text-base font-bold mb-3 flex items-center gap-2">
+                        <span class="w-2 h-2 rounded-full bg-slate-400"></span>
+                        Not Interested ({{ notInterestedFocusAreas().length }})
+                      </h3>
+                      <div class="grid grid-cols-2 sm:grid-cols-3 gap-2">
+                        @for (focusArea of notInterestedFocusAreas(); track focusArea.focusAreaDomain) {
+                          <div [ngClass]="focusAreaViewCardClasses('not-interested')" class="p-2 rounded text-center">
+                            <span [ngClass]="focusAreaViewTitleSmallClasses()" class="text-xs font-medium">
+                              {{ getFocusAreaTitle(focusArea.focusAreaDomain!) }}
+                            </span>
+                          </div>
+                        }
+                      </div>
+                    </div>
                   }
                 </div>
-              }
-              @if (showControls()) {
-                <symphiq-search-button
-                  [isLightMode]="isLightMode()"
-                  [minimized]="true"
-                  (searchClick)="onSearchClick()"
-                />
+              </div>
+            }
+
+            <!-- Focus Areas Card - Edit Mode -->
+            @if (!accountData() || focusAreasEditMode()) {
+              <div [ngClass]="containerClasses()" class="rounded-2xl border shadow-lg overflow-hidden">
+                <div [ngClass]="contentClasses()" class="px-8 py-8">
+                  <div class="mb-6">
+                    <div class="flex items-start justify-between">
+                      <div>
+                        <h2 [ngClass]="sectionTitleClasses()" class="text-2xl font-bold mb-2">
+                          Focus Areas
+                        </h2>
+                        <p [ngClass]="sectionDescriptionClasses()">
+                          Tell us about your marketing and operational focus areas
+                        </p>
+                      </div>
+                      <div [ngClass]="progressBadgeClasses()" class="px-4 py-2 rounded-lg text-sm font-semibold whitespace-nowrap">
+                        {{ focusAreasAnswered() }} of {{ totalFocusAreas() }} answered
+                      </div>
+                    </div>
+                  </div>
+
+                  <div class="space-y-4">
+                    @for (domain of allFocusAreaDomains(); track domain; let i = $index) {
+                      <symphiq-focus-area-question
+                        [focusAreaDomain]="domain"
+                        [selectedStatus]="getFocusAreaStatus(domain)"
+                        [selectedTools]="getFocusAreaTools(domain)"
+                        [viewMode]="viewMode()"
+                        [title]="getFocusAreaTitle(domain)"
+                        [description]="getFocusAreaDescription(domain)"
+                        (statusChange)="onFocusAreaStatusChange(domain, $event)"
+                        (toolsClick)="onFocusAreaToolsClick(domain)"
+                      />
+                      @if (i < allFocusAreaDomains().length - 1) {
+                        <div [ngClass]="dividerClasses()" class="my-4"></div>
+                      }
+                    }
+                  </div>
+                </div>
+              </div>
+            }
+          </div>
+          }
+        </main>
+
+        <!-- Tools Selection Modal -->
+        <symphiq-focus-area-tools-modal
+          [isOpen]="toolsModalOpen()"
+          [focusAreaDomain]="currentEditingFocusArea()!"
+          [focusAreaTitle]="currentEditingFocusAreaTitle()"
+          [selectedTools]="currentEditingTools()"
+          [viewMode]="viewMode()"
+          (close)="onToolsModalClose()"
+          (save)="onToolsModalSave($event)"
+        />
+
+        <!-- Sticky Continue Button -->
+        @if ((!accountData() || editMode() || focusAreasEditMode()) && !isCreatingAccount()) {
+          <div [ngClass]="stickyButtonContainerClasses()" class="fixed bottom-0 left-0 right-0 z-50 border-t backdrop-blur-sm">
+            <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
+              <div class="flex items-center gap-3">
+                @if ((accountData() && editMode()) || (accountData() && focusAreasEditMode())) {
+                  <button
+                    type="button"
+                    (click)="focusAreasEditMode() ? cancelFocusAreasEditMode() : cancelEditMode()"
+                    [ngClass]="cancelButtonClasses()"
+                    class="px-6 py-4 rounded-xl font-bold text-base transition-all duration-200 flex items-center justify-center gap-2 cursor-pointer hover:scale-105">
+                    Cancel
+                  </button>
+                }
                 <button
                   type="button"
-                  (click)="onViewModeClick()"
-                  [ngClass]="getViewModeButtonClasses()"
-                  class="cursor-pointer flex items-center gap-2 px-2 py-1.5 rounded-lg text-xs font-medium transition-all duration-200 hover:scale-105">
-                  <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
-                  </svg>
+                  (click)="focusAreasEditMode() ? handleSaveFocusAreas() : handleContinue()"
+                  [disabled]="!isButtonEnabled()"
+                  [ngClass]="continueButtonClasses()"
+                  class="flex-1 px-6 py-4 rounded-xl font-bold text-lg transition-all duration-200 flex items-center justify-center gap-3 shadow-lg"
+                  [class.cursor-pointer]="isButtonEnabled()"
+                  [class.cursor-not-allowed]="!isButtonEnabled()"
+                  [class.opacity-50]="!isButtonEnabled()"
+                  [class.hover:scale-105]="isButtonEnabled()">
+                  @if (isLoading()) {
+                    <svg class="w-6 h-6 animate-spin" fill="none" viewBox="0 0 24 24">
+                      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                      <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                    </svg>
+                    @if (focusAreasEditMode()) {
+                      Saving Focus Areas...
+                    } @else if (accountData() && editMode()) {
+                      Updating Account...
+                    } @else {
+                      Creating Account...
+                    }
+                  } @else {
+                    @if (focusAreasEditMode()) {
+                      Save Focus Areas
+                    } @else if (accountData() && editMode()) {
+                      Save Changes
+                    } @else {
+                      Create Account
+                    }
+                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/>
+                    </svg>
+                  }
                 </button>
-              }
+              </div>
             </div>
           </div>
-          </div>
-        </div>
-    </header>
-  `
-            }]
-    }], null, { requestedByUser: [{ type: i0.Input, args: [{ isSignal: true, alias: "requestedByUser", required: false }] }], createdDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "createdDate", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], viewModeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewModeLabel", required: false }] }], currentSection: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentSection", required: false }] }], currentSubsection: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentSubsection", required: false }] }], sectionFading: [{ type: i0.Input, args: [{ isSignal: true, alias: "sectionFading", required: false }] }], subsectionFading: [{ type: i0.Input, args: [{ isSignal: true, alias: "subsectionFading", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], showControls: [{ type: i0.Input, args: [{ isSignal: true, alias: "showControls", required: false }] }], searchClick: [{ type: i0.Output, args: ["searchClick"] }], viewModeClick: [{ type: i0.Output, args: ["viewModeClick"] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DashboardHeaderComponent, { className: "DashboardHeaderComponent", filePath: "lib/components/shared/dashboard-header.component.ts", lineNumber: 134 }); })();
+        }
+      </div>
+    </div>
+  `, styles: [":host{display:block}.animated-bubbles{overflow:hidden}.animated-bubbles:before,.animated-bubbles:after{content:\"\";position:absolute;border-radius:50%;animation:float 20s infinite ease-in-out;opacity:.05}.animated-bubbles:before{width:600px;height:600px;background:radial-gradient(circle,#3b82f6 0%,transparent 70%);top:-300px;left:-300px;animation-delay:-5s}.animated-bubbles:after{width:800px;height:800px;background:radial-gradient(circle,#06b6d4 0%,transparent 70%);bottom:-400px;right:-400px;animation-delay:-10s}.animated-bubbles.light-mode:before,.animated-bubbles.light-mode:after{opacity:.03}@keyframes float{0%,to{transform:translate(0) scale(1)}33%{transform:translate(50px,-50px) scale(1.1)}66%{transform:translate(-30px,30px) scale(.9)}}\n"] }]
+    }], () => [], { embedded: [{ type: i0.Input, args: [{ isSignal: true, alias: "embedded", required: false }] }], parentHeaderOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentHeaderOffset", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], scrollEvent: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollEvent", required: false }] }], scrollElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollElement", required: false }] }], accountData: [{ type: i0.Input, args: [{ isSignal: true, alias: "accountData", required: false }] }], forDemo: [{ type: i0.Input, args: [{ isSignal: true, alias: "forDemo", required: false }] }], showNextStepAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "showNextStepAction", required: false }] }], maxAccessibleStepId: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxAccessibleStepId", required: false }] }], onCreateAccount: [{ type: i0.Output, args: ["onCreateAccount"] }], stepClick: [{ type: i0.Output, args: ["stepClick"] }], nextStepClick: [{ type: i0.Output, args: ["nextStepClick"] }], shopNameInput: [{
+            type: ViewChild,
+            args: ['shopNameInput']
+        }], onScroll: [{
+            type: HostListener,
+            args: ['window:scroll', ['$event']]
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqCreateAccountDashboardComponent, { className: "SymphiqCreateAccountDashboardComponent", filePath: "lib/components/create-account-dashboard/symphiq-create-account-dashboard.component.ts", lineNumber: 603 }); })();
 
 const _forTrack0$A = ($index, $item) => $item.id;
 function SymphiqConnectGaDashboardComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {