@eric-emg/symphiq-components 1.2.154 → 1.2.156

package/fesm2022/symphiq-components.mjs

@@ -52796,60 +52796,50 @@ function SymphiqCreateAccountDashboardComponent_Conditional_26_Template(rf, ctx)
     i0.ɵɵadvance(2);
     i0.ɵɵrepeater(ctx_r1.allFocusAreaDomains());
 } }
-function SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 74);
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ngClass", ctx_r1.validationMessageClasses());
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate3(" Please answer all ", ctx_r1.totalFocusAreas(), " focus area questions before creating your account. ", ctx_r1.focusAreasAnswered(), " of ", ctx_r1.totalFocusAreas(), " completed. ");
-} }
-function SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+function SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r13 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 78);
-    i0.ɵɵlistener("click", function SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_4_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.focusAreasEditMode() ? ctx_r1.cancelFocusAreasEditMode() : ctx_r1.cancelEditMode()); });
+    i0.ɵɵelementStart(0, "button", 77);
+    i0.ɵɵlistener("click", function SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_3_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.focusAreasEditMode() ? ctx_r1.cancelFocusAreasEditMode() : ctx_r1.cancelEditMode()); });
     i0.ɵɵtext(1, " Cancel ");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("ngClass", ctx_r1.cancelButtonClasses());
 } }
-function SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_6_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+function SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_5_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0, " Saving Focus Areas... ");
 } }
-function SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_6_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+function SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_5_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0, " Updating Account... ");
 } }
-function SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_6_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+function SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_5_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0, " Creating Account... ");
 } }
-function SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+function SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(0, "svg", 79);
-    i0.ɵɵelement(1, "circle", 80)(2, "path", 81);
+    i0.ɵɵelementStart(0, "svg", 78);
+    i0.ɵɵelement(1, "circle", 79)(2, "path", 80);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(3, SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_6_Conditional_3_Template, 1, 0)(4, SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_6_Conditional_4_Template, 1, 0)(5, SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_6_Conditional_5_Template, 1, 0);
+    i0.ɵɵconditionalCreate(3, SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_5_Conditional_3_Template, 1, 0)(4, SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_5_Conditional_4_Template, 1, 0)(5, SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_5_Conditional_5_Template, 1, 0);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(3);
     i0.ɵɵconditional(ctx_r1.focusAreasEditMode() ? 3 : ctx_r1.accountData() && ctx_r1.editMode() ? 4 : 5);
 } }
-function SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_7_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+function SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_6_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0, " Save Focus Areas ");
 } }
-function SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_7_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+function SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_6_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0, " Save Changes ");
 } }
-function SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_7_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+function SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_6_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0, " Create Account ");
 } }
-function SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_7_Conditional_0_Template, 1, 0)(1, SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_7_Conditional_1_Template, 1, 0)(2, SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_7_Conditional_2_Template, 1, 0);
+function SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_6_Conditional_0_Template, 1, 0)(1, SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_6_Conditional_1_Template, 1, 0)(2, SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_6_Conditional_2_Template, 1, 0);
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(3, "svg", 82);
-    i0.ɵɵelement(4, "path", 83);
+    i0.ɵɵelementStart(3, "svg", 81);
+    i0.ɵɵelement(4, "path", 82);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -52857,26 +52847,22 @@ function SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_7_Tem
 } }
 function SymphiqCreateAccountDashboardComponent_Conditional_28_Template(rf, ctx) { if (rf & 1) {
     const _r12 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 17)(1, "div", 73);
-    i0.ɵɵconditionalCreate(2, SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_2_Template, 2, 4, "div", 74);
-    i0.ɵɵelementStart(3, "div", 75);
-    i0.ɵɵconditionalCreate(4, SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_4_Template, 2, 1, "button", 76);
-    i0.ɵɵelementStart(5, "button", 77);
-    i0.ɵɵlistener("click", function SymphiqCreateAccountDashboardComponent_Conditional_28_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.focusAreasEditMode() ? ctx_r1.handleSaveFocusAreas() : ctx_r1.handleContinue()); });
-    i0.ɵɵconditionalCreate(6, SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_6_Template, 6, 1)(7, SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_7_Template, 5, 1);
+    i0.ɵɵelementStart(0, "div", 17)(1, "div", 73)(2, "div", 74);
+    i0.ɵɵconditionalCreate(3, SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_3_Template, 2, 1, "button", 75);
+    i0.ɵɵelementStart(4, "button", 76);
+    i0.ɵɵlistener("click", function SymphiqCreateAccountDashboardComponent_Conditional_28_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.focusAreasEditMode() ? ctx_r1.handleSaveFocusAreas() : ctx_r1.handleContinue()); });
+    i0.ɵɵconditionalCreate(5, SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_5_Template, 6, 1)(6, SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_6_Template, 5, 1);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵproperty("ngClass", ctx_r1.stickyButtonContainerClasses());
-    i0.ɵɵadvance(2);
-    i0.ɵɵconditional(!ctx_r1.allFocusAreasAnswered() && !ctx_r1.accountData() ? 2 : -1);
-    i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.accountData() && ctx_r1.editMode() || ctx_r1.accountData() && ctx_r1.focusAreasEditMode() ? 4 : -1);
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(ctx_r1.accountData() && ctx_r1.editMode() || ctx_r1.accountData() && ctx_r1.focusAreasEditMode() ? 3 : -1);
     i0.ɵɵadvance();
     i0.ɵɵclassProp("cursor-pointer", ctx_r1.isButtonEnabled())("cursor-not-allowed", !ctx_r1.isButtonEnabled())("opacity-50", !ctx_r1.isButtonEnabled())("hover:scale-105", ctx_r1.isButtonEnabled());
     i0.ɵɵproperty("disabled", !ctx_r1.isButtonEnabled())("ngClass", ctx_r1.continueButtonClasses());
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.isLoading() ? 6 : 7);
+    i0.ɵɵconditional(ctx_r1.isLoading() ? 5 : 6);
 } }
 var ShopPlatformEnum;
 (function (ShopPlatformEnum) {
@@ -53454,7 +53440,7 @@ 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: 29, vars: 51, 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, "max-w-3xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-8"], [1, "rounded-2xl", "border", "shadow-lg", "overflow-hidden", "mb-8", 3, "ngClass"], [1, "rounded-2xl", "border", "shadow-lg", "overflow-hidden", 3, "ngClass"], [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"], [1, "px-8", "py-8", 3, "ngClass"], [1, "flex", "items-start", "justify-between", "mb-6"], [1, "text-2xl", "font-bold", "mb-2", 3, "ngClass"], ["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"], [1, "text-base", 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"], ["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, "mb-3", "p-3", "rounded-lg", "text-sm", 3, "ngClass"], [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: 29, vars: 51, 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, "max-w-3xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-8"], [1, "rounded-2xl", "border", "shadow-lg", "overflow-hidden", "mb-8", 3, "ngClass"], [1, "rounded-2xl", "border", "shadow-lg", "overflow-hidden", 3, "ngClass"], [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"], [1, "px-8", "py-8", 3, "ngClass"], [1, "flex", "items-start", "justify-between", "mb-6"], [1, "text-2xl", "font-bold", "mb-2", 3, "ngClass"], ["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"], [1, "text-base", 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"], ["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();
@@ -53480,7 +53466,7 @@ class SymphiqCreateAccountDashboardComponent {
             i0.ɵɵelementStart(27, "symphiq-focus-area-tools-modal", 16);
             i0.ɵɵlistener("close", function SymphiqCreateAccountDashboardComponent_Template_symphiq_focus_area_tools_modal_close_27_listener() { return ctx.onToolsModalClose(); })("save", function SymphiqCreateAccountDashboardComponent_Template_symphiq_focus_area_tools_modal_save_27_listener($event) { return ctx.onToolsModalSave($event); });
             i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(28, SymphiqCreateAccountDashboardComponent_Conditional_28_Template, 8, 14, "div", 17);
+            i0.ɵɵconditionalCreate(28, SymphiqCreateAccountDashboardComponent_Conditional_28_Template, 7, 13, "div", 17);
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
             i0.ɵɵproperty("ngClass", ctx.getContainerClasses());
@@ -53514,7 +53500,7 @@ class SymphiqCreateAccountDashboardComponent {
             i0.ɵɵadvance();
             i0.ɵɵconditional(!ctx.accountData() || ctx.editMode() ? 24 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.accountData() && ctx.accountData().focusAreaDetails && !ctx.focusAreasEditMode() ? 25 : -1);
+            i0.ɵɵconditional(ctx.accountData() && ctx.accountData().focusAreaDetails && !ctx.focusAreasEditMode() && !ctx.editMode() ? 25 : -1);
             i0.ɵɵadvance();
             i0.ɵɵconditional(!ctx.accountData() || ctx.focusAreasEditMode() ? 26 : -1);
             i0.ɵɵadvance();
@@ -53525,536 +53511,530 @@ class SymphiqCreateAccountDashboardComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SymphiqCreateAccountDashboardComponent, [{
         type: Component,
-        args: [{ selector: 'symphiq-create-account-dashboard', standalone: true, imports: [CommonModule, ReactiveFormsModule, JourneyProgressIndicatorComponent, FocusAreaQuestionComponent, FocusAreaToolsModalComponent], 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">
-          <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>
-                  </form>
-                </div>
-              </div>
-            }
-
-            <!-- Focus Areas Card - View Mode -->
-            @if (accountData() && accountData()!.focusAreaDetails && !focusAreasEditMode()) {
-              <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()) {
-          <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">
-              @if (!allFocusAreasAnswered() && !accountData()) {
-                <div [ngClass]="validationMessageClasses()" class="mb-3 p-3 rounded-lg text-sm">
-                  Please answer all {{ totalFocusAreas() }} focus area questions before creating your account.
-                  {{ focusAreasAnswered() }} of {{ totalFocusAreas() }} completed.
-                </div>
-              }
-              <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>
+        args: [{ selector: 'symphiq-create-account-dashboard', standalone: true, imports: [CommonModule, ReactiveFormsModule, JourneyProgressIndicatorComponent, FocusAreaQuestionComponent, FocusAreaToolsModalComponent], 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">
+          <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>
+                  </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()) {
+          <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,
@@ -54063,7 +54043,7 @@ class SymphiqCreateAccountDashboardComponent {
             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: 629 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqCreateAccountDashboardComponent, { className: "SymphiqCreateAccountDashboardComponent", filePath: "lib/components/create-account-dashboard/symphiq-create-account-dashboard.component.ts", lineNumber: 623 }); })();
 
 class SymphiqConnectGaDashboardComponent {
     constructor() {