@eric-emg/symphiq-components 1.2.151 → 1.2.152

package/fesm2022/symphiq-components.mjs

@@ -1,4 +1,4 @@
-import { ViewModeEnum, MetricStatusEnum, TrendDirectionEnum, CompetitiveScoreEnum, ChartTypeEnum, IconSourceEnum, ProfileAnalysisRecommendationPriorityEnum, ProfileItemTypeEnum, PriceVsCompetitorsEnum, DifferentiationStrengthEnum, ThreatLevelEnum, normalizeToV3, MetricEnum, AiDynamicContentStatusEnum, FocusAreaDomainEnum, FocusAreaHealthEnum, ProfileAnalysisPriorityEnum, CapabilityStateEnum, QuadrantEnum, AdvantageEnum, OverallGradeEnum, OperationalMaturityEnum, ProfileAnalysisEffortLevelEnum, ProfileAnalysisImpactLevelEnum, FocusAreaDomainEnumUtil, ProfileAnalysisTypeEnum, LineChartUseCaseEnum, BarChartUseCaseEnum } from '@jebgem/model';
+import { ViewModeEnum, MetricStatusEnum, TrendDirectionEnum, CompetitiveScoreEnum, ChartTypeEnum, IconSourceEnum, ProfileAnalysisRecommendationPriorityEnum, ProfileItemTypeEnum, PriceVsCompetitorsEnum, DifferentiationStrengthEnum, ThreatLevelEnum, normalizeToV3, MetricEnum, FocusAreaDetailStatusEnum, FocusAreaDomainEnumUtil, FocusAreaDomainEnum, AiDynamicContentStatusEnum, FocusAreaHealthEnum, ProfileAnalysisPriorityEnum, CapabilityStateEnum, QuadrantEnum, AdvantageEnum, OverallGradeEnum, OperationalMaturityEnum, ProfileAnalysisEffortLevelEnum, ProfileAnalysisImpactLevelEnum, ProfileAnalysisTypeEnum, LineChartUseCaseEnum, BarChartUseCaseEnum } from '@jebgem/model';
 export * from '@jebgem/model';
 import * as i0 from '@angular/core';
 import { Injectable, signal, computed, input, ChangeDetectionStrategy, Component, output, inject, ElementRef, Renderer2, effect, Directive, HostListener, untracked, ViewChild, PLATFORM_ID, Inject, Input } from '@angular/core';
@@ -3092,7 +3092,7 @@ class CompetitiveScoreService {
             }]
     }], null, null); })();
 
-const _forTrack0$M = ($index, $item) => $item.category;
+const _forTrack0$N = ($index, $item) => $item.category;
 function CompetitivePositioningSummaryComponent_Conditional_1_For_47_Conditional_12_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 15);
     i0.ɵɵelement(1, "div", 37);
@@ -3251,7 +3251,7 @@ function CompetitivePositioningSummaryComponent_Conditional_1_Template(rf, ctx)
     i0.ɵɵelementEnd()();
     i0.ɵɵnamespaceHTML();
     i0.ɵɵelementStart(43, "div", 24)(44, "div", 25)(45, "div", 26);
-    i0.ɵɵrepeaterCreate(46, CompetitivePositioningSummaryComponent_Conditional_1_For_47_Template, 15, 12, "div", 27, _forTrack0$M);
+    i0.ɵɵrepeaterCreate(46, CompetitivePositioningSummaryComponent_Conditional_1_For_47_Template, 15, 12, "div", 27, _forTrack0$N);
     i0.ɵɵelementEnd()()()();
     i0.ɵɵelementStart(48, "div", 28)(49, "button", 29);
     i0.ɵɵlistener("click", function CompetitivePositioningSummaryComponent_Conditional_1_Template_button_click_49_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.scrollToCompetitive.emit()); });
@@ -3460,7 +3460,7 @@ function CompetitivePositioningSummaryComponent_Conditional_2_Template(rf, ctx)
     i0.ɵɵelementStart(32, "div", 50)(33, "h4", 51);
     i0.ɵɵtext(34, "By Funnel Stage");
     i0.ɵɵelementEnd();
-    i0.ɵɵrepeaterCreate(35, CompetitivePositioningSummaryComponent_Conditional_2_For_36_Template, 12, 11, "div", 52, _forTrack0$M);
+    i0.ɵɵrepeaterCreate(35, CompetitivePositioningSummaryComponent_Conditional_2_For_36_Template, 12, 11, "div", 52, _forTrack0$N);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(37, "div", 28)(38, "button", 53);
     i0.ɵɵlistener("click", function CompetitivePositioningSummaryComponent_Conditional_2_Template_button_click_38_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.scrollToCompetitive.emit()); });
@@ -8137,7 +8137,7 @@ class MetricCardComponent {
 const _c0$$ = () => [1, 2, 3];
 const _c1$A = (a0, a1, a2) => [a0, a1, a2];
 const _c2$p = (a0, a1) => [a0, a1];
-const _forTrack0$L = ($index, $item) => $item.metric;
+const _forTrack0$M = ($index, $item) => $item.metric;
 const _forTrack1$6 = ($index, $item) => $item.dimensionValue;
 function BreakdownSectionComponent_Conditional_0_For_7_For_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 7);
@@ -8460,7 +8460,7 @@ function BreakdownSectionComponent_Conditional_1_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵelementEnd()();
     i0.ɵɵconditionalCreate(6, BreakdownSectionComponent_Conditional_1_Conditional_6_Template, 3, 0, "div", 11);
     i0.ɵɵelementStart(7, "div", 12);
-    i0.ɵɵrepeaterCreate(8, BreakdownSectionComponent_Conditional_1_For_9_Template, 28, 18, "div", 13, _forTrack0$L);
+    i0.ɵɵrepeaterCreate(8, BreakdownSectionComponent_Conditional_1_For_9_Template, 28, 18, "div", 13, _forTrack0$M);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -11499,7 +11499,7 @@ class ChartCardComponent {
     }], null, { chart: [{ type: i0.Input, args: [{ isSignal: true, alias: "chart", required: true }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], isLightMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLightMode", required: false }] }], chartClick: [{ type: i0.Output, args: ["chartClick"] }] }); }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ChartCardComponent, { className: "ChartCardComponent", filePath: "lib/components/shared/chart-card.component.ts", lineNumber: 101 }); })();
 
-const _forTrack0$K = ($index, $item) => $item.id;
+const _forTrack0$L = ($index, $item) => $item.id;
 function FunnelStrengthsListModalContentComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 1);
     i0.ɵɵnamespaceSVG();
@@ -11613,7 +11613,7 @@ function FunnelStrengthsListModalContentComponent_Conditional_2_For_2_Template(r
 } }
 function FunnelStrengthsListModalContentComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 2);
-    i0.ɵɵrepeaterCreate(1, FunnelStrengthsListModalContentComponent_Conditional_2_For_2_Template, 30, 22, "button", 7, _forTrack0$K);
+    i0.ɵɵrepeaterCreate(1, FunnelStrengthsListModalContentComponent_Conditional_2_For_2_Template, 30, 22, "button", 7, _forTrack0$L);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -11823,7 +11823,7 @@ class FunnelStrengthsListModalContentComponent {
     }], null, { strengths: [{ type: i0.Input, args: [{ isSignal: true, alias: "strengths", required: true }] }], isLightMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLightMode", required: true }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FunnelStrengthsListModalContentComponent, { className: "FunnelStrengthsListModalContentComponent", filePath: "lib/components/funnel-analysis-dashboard/funnel-strengths-list-modal-content.component.ts", lineNumber: 93 }); })();
 
-const _forTrack0$J = ($index, $item) => $item.severity;
+const _forTrack0$K = ($index, $item) => $item.severity;
 const _forTrack1$5 = ($index, $item) => $item.id;
 function FunnelWeaknessesListModalContentComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 1);
@@ -12002,7 +12002,7 @@ function FunnelWeaknessesListModalContentComponent_Conditional_2_For_2_Template(
 } }
 function FunnelWeaknessesListModalContentComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 2);
-    i0.ɵɵrepeaterCreate(1, FunnelWeaknessesListModalContentComponent_Conditional_2_For_2_Template, 9, 7, "div", null, _forTrack0$J);
+    i0.ɵɵrepeaterCreate(1, FunnelWeaknessesListModalContentComponent_Conditional_2_For_2_Template, 9, 7, "div", null, _forTrack0$K);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -13785,7 +13785,7 @@ class ProfileItemLookupService {
     }], null, null); })();
 
 const _c0$Y = a0 => ({ name: "chevron-right", source: a0 });
-const _forTrack0$I = ($index, $item) => $item.id;
+const _forTrack0$J = ($index, $item) => $item.id;
 function RelatedAreaChipsComponent_Conditional_0_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 2);
@@ -13806,7 +13806,7 @@ function RelatedAreaChipsComponent_Conditional_0_For_2_Template(rf, ctx) { if (r
 } }
 function RelatedAreaChipsComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 0);
-    i0.ɵɵrepeaterCreate(1, RelatedAreaChipsComponent_Conditional_0_For_2_Template, 4, 5, "button", 1, _forTrack0$I);
+    i0.ɵɵrepeaterCreate(1, RelatedAreaChipsComponent_Conditional_0_For_2_Template, 4, 5, "button", 1, _forTrack0$J);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -14046,7 +14046,7 @@ class CompetitorChipListComponent {
     }], null, { relatedCompetitorIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "relatedCompetitorIds", required: false }] }], competitors: [{ type: i0.Input, args: [{ isSignal: true, alias: "competitors", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], isDark: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDark", required: false }] }], inModalContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "inModalContext", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CompetitorChipListComponent, { className: "CompetitorChipListComponent", filePath: "lib/components/business-analysis-dashboard/shared/competitor-chip-list.component.ts", lineNumber: 37 }); })();
 
-const _forTrack0$H = ($index, $item) => $item.id;
+const _forTrack0$I = ($index, $item) => $item.id;
 function CompetitorContextSectionComponent_Conditional_0_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 8);
@@ -14129,7 +14129,7 @@ function CompetitorContextSectionComponent_Conditional_0_Template(rf, ctx) { if
     i0.ɵɵconditionalCreate(8, CompetitorContextSectionComponent_Conditional_0_Conditional_8_Template, 5, 4, "button", 4);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(9, "div", 5)(10, "div", 6);
-    i0.ɵɵrepeaterCreate(11, CompetitorContextSectionComponent_Conditional_0_For_12_Template, 10, 6, "button", 7, _forTrack0$H);
+    i0.ɵɵrepeaterCreate(11, CompetitorContextSectionComponent_Conditional_0_For_12_Template, 10, 6, "button", 7, _forTrack0$I);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -14320,7 +14320,7 @@ class CompetitorContextSectionComponent {
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CompetitorContextSectionComponent, { className: "CompetitorContextSectionComponent", filePath: "lib/components/business-analysis-dashboard/cards/competitor-context-section.component.ts", lineNumber: 86 }); })();
 
 const _c0$W = a0 => ({ name: "chevron-right", source: a0 });
-const _forTrack0$G = ($index, $item) => $item.id;
+const _forTrack0$H = ($index, $item) => $item.id;
 function RelatedRecommendationChipsComponent_Conditional_0_For_3_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 4);
@@ -14363,7 +14363,7 @@ function RelatedRecommendationChipsComponent_Conditional_0_Conditional_4_Templat
 } }
 function RelatedRecommendationChipsComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 0)(1, "div", 1);
-    i0.ɵɵrepeaterCreate(2, RelatedRecommendationChipsComponent_Conditional_0_For_3_Template, 5, 6, "button", 2, _forTrack0$G);
+    i0.ɵɵrepeaterCreate(2, RelatedRecommendationChipsComponent_Conditional_0_For_3_Template, 5, 6, "button", 2, _forTrack0$H);
     i0.ɵɵelementEnd();
     i0.ɵɵconditionalCreate(4, RelatedRecommendationChipsComponent_Conditional_0_Conditional_4_Template, 5, 4, "button", 3);
     i0.ɵɵelementEnd();
@@ -14820,7 +14820,7 @@ class RelatedFunnelInsightsSectionComponent {
     }], null, { insightCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "insightCount", required: true }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], insightsClicked: [{ type: i0.Output, args: ["insightsClicked"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RelatedFunnelInsightsSectionComponent, { className: "RelatedFunnelInsightsSectionComponent", filePath: "lib/components/business-analysis-dashboard/shared/related-funnel-insights-section.component.ts", lineNumber: 47 }); })();
 
-const _forTrack0$F = ($index, $item) => $item.order;
+const _forTrack0$G = ($index, $item) => $item.order;
 function RecommendationCardComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 9);
     i0.ɵɵelement(1, "symphiq-icon", 11);
@@ -15173,7 +15173,7 @@ function RecommendationCardComponent_Conditional_13_Conditional_12_Conditional_6
 } }
 function RecommendationCardComponent_Conditional_13_Conditional_12_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 37);
-    i0.ɵɵrepeaterCreate(1, RecommendationCardComponent_Conditional_13_Conditional_12_Conditional_6_For_2_Template, 13, 9, "div", 41, _forTrack0$F);
+    i0.ɵɵrepeaterCreate(1, RecommendationCardComponent_Conditional_13_Conditional_12_Conditional_6_For_2_Template, 13, 9, "div", 41, _forTrack0$G);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(3);
@@ -16056,7 +16056,7 @@ const ModalComponent_Conditional_0_Conditional_19_Conditional_4_Defer_2_DepsFn =
 const ModalComponent_Conditional_0_Conditional_19_Conditional_5_Defer_2_DepsFn = () => [Promise.resolve().then(function () { return barChart_component; }).then(m => m.BarChartComponent)];
 const ModalComponent_Conditional_0_Conditional_19_Conditional_6_Defer_2_DepsFn = () => [Promise.resolve().then(function () { return pieChart_component; }).then(m => m.PieChartComponent)];
 const ModalComponent_Conditional_0_Conditional_19_Conditional_7_Defer_2_DepsFn = () => [Promise.resolve().then(function () { return areaChart_component; }).then(m => m.AreaChartComponent)];
-const _forTrack0$E = ($index, $item) => $item.id || $index;
+const _forTrack0$F = ($index, $item) => $item.id || $index;
 function ModalComponent_Conditional_0_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 13);
@@ -16430,7 +16430,7 @@ function ModalComponent_Conditional_0_Conditional_22_For_3_Template(rf, ctx) { i
 function ModalComponent_Conditional_0_Conditional_22_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 22);
     i0.ɵɵconditionalCreate(1, ModalComponent_Conditional_0_Conditional_22_Conditional_1_Template, 2, 2, "p", 55);
-    i0.ɵɵrepeaterCreate(2, ModalComponent_Conditional_0_Conditional_22_For_3_Template, 2, 5, "div", null, _forTrack0$E);
+    i0.ɵɵrepeaterCreate(2, ModalComponent_Conditional_0_Conditional_22_For_3_Template, 2, 5, "div", null, _forTrack0$F);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -20667,7 +20667,7 @@ class NarrativeTooltipComponent {
     }], null, { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: true }] }], isLightMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLightMode", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(NarrativeTooltipComponent, { className: "NarrativeTooltipComponent", filePath: "lib/components/funnel-analysis-dashboard/tooltip/narrative-tooltip.component.ts", lineNumber: 27 }); })();
 
-const _forTrack0$D = ($index, $item) => $item.name;
+const _forTrack0$E = ($index, $item) => $item.name;
 function CompetitiveStatusTooltipComponent_Conditional_6_For_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 7)(1, "div", 8)(2, "div", 9);
     i0.ɵɵelement(3, "div", 10);
@@ -20711,7 +20711,7 @@ function CompetitiveStatusTooltipComponent_Conditional_6_Template(rf, ctx) { if
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(4, "div", 5);
-    i0.ɵɵrepeaterCreate(5, CompetitiveStatusTooltipComponent_Conditional_6_For_6_Template, 13, 12, "div", 6, _forTrack0$D);
+    i0.ɵɵrepeaterCreate(5, CompetitiveStatusTooltipComponent_Conditional_6_For_6_Template, 13, 12, "div", 6, _forTrack0$E);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -20958,7 +20958,7 @@ class CompetitiveStatusTooltipComponent {
     }], null, { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: true }] }], isLightMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLightMode", required: false }] }], currencySymbol: [{ type: i0.Input, args: [{ isSignal: true, alias: "currencySymbol", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CompetitiveStatusTooltipComponent, { className: "CompetitiveStatusTooltipComponent", filePath: "lib/components/funnel-analysis-dashboard/tooltip/competitive-status-tooltip.component.ts", lineNumber: 60 }); })();
 
-const _forTrack0$C = ($index, $item) => $item.name;
+const _forTrack0$D = ($index, $item) => $item.name;
 function FunnelStageCompetitiveTooltipComponent_Conditional_8_For_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 9)(1, "div", 10)(2, "span", 11);
     i0.ɵɵtext(3);
@@ -20998,7 +20998,7 @@ function FunnelStageCompetitiveTooltipComponent_Conditional_8_Template(rf, ctx)
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(5, "div", 8);
-    i0.ɵɵrepeaterCreate(6, FunnelStageCompetitiveTooltipComponent_Conditional_8_For_7_Template, 11, 9, "div", 9, _forTrack0$C);
+    i0.ɵɵrepeaterCreate(6, FunnelStageCompetitiveTooltipComponent_Conditional_8_For_7_Template, 11, 9, "div", 9, _forTrack0$D);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -21048,7 +21048,7 @@ function FunnelStageCompetitiveTooltipComponent_Conditional_9_Template(rf, ctx)
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(5, "div", 8);
-    i0.ɵɵrepeaterCreate(6, FunnelStageCompetitiveTooltipComponent_Conditional_9_For_7_Template, 11, 9, "div", 9, _forTrack0$C);
+    i0.ɵɵrepeaterCreate(6, FunnelStageCompetitiveTooltipComponent_Conditional_9_For_7_Template, 11, 9, "div", 9, _forTrack0$D);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -21098,7 +21098,7 @@ function FunnelStageCompetitiveTooltipComponent_Conditional_10_Template(rf, ctx)
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(5, "div", 8);
-    i0.ɵɵrepeaterCreate(6, FunnelStageCompetitiveTooltipComponent_Conditional_10_For_7_Template, 11, 9, "div", 9, _forTrack0$C);
+    i0.ɵɵrepeaterCreate(6, FunnelStageCompetitiveTooltipComponent_Conditional_10_For_7_Template, 11, 9, "div", 9, _forTrack0$D);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -22287,7 +22287,7 @@ class MobileFABComponent {
     }], null, { isLightMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLightMode", required: false }] }], isCompactMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCompactMode", required: false }] }], isExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "isExpanded", required: false }] }], expandedChange: [{ type: i0.Output, args: ["expandedChange"] }], scrollToTop: [{ type: i0.Output, args: ["scrollToTop"] }], toggleView: [{ type: i0.Output, args: ["toggleView"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MobileFABComponent, { className: "MobileFABComponent", filePath: "lib/components/funnel-analysis-dashboard/mobile-fab.component.ts", lineNumber: 75 }); })();
 
-const _forTrack0$B = ($index, $item) => $item.id;
+const _forTrack0$C = ($index, $item) => $item.id;
 function MobileBottomNavComponent_For_3_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 3);
@@ -22345,7 +22345,7 @@ class MobileBottomNavComponent {
     static { this.ɵfac = function MobileBottomNavComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MobileBottomNavComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MobileBottomNavComponent, selectors: [["symphiq-mobile-bottom-nav"]], inputs: { isLightMode: [1, "isLightMode"], sections: [1, "sections"], activeSection: [1, "activeSection"] }, outputs: { navigate: "navigate" }, decls: 4, vars: 1, consts: [[1, "fixed", "bottom-0", "left-0", "right-0", "z-50", "lg:hidden", "border-t", "backdrop-blur-md", 3, "ngClass"], [1, "flex", "items-center", "justify-around", "px-2", "py-3"], [1, "flex", "flex-col", "items-center", "gap-1", "px-3", "py-2", "rounded-lg", "transition-all", "duration-200", "active:scale-95", "min-w-[64px]", 3, "ngClass"], [1, "flex", "flex-col", "items-center", "gap-1", "px-3", "py-2", "rounded-lg", "transition-all", "duration-200", "active:scale-95", "min-w-[64px]", 3, "click", "ngClass"], [1, "w-6", "h-6", 3, "innerHTML"], [1, "text-xs", "font-medium"]], template: function MobileBottomNavComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1);
-            i0.ɵɵrepeaterCreate(2, MobileBottomNavComponent_For_3_Template, 4, 3, "button", 2, _forTrack0$B);
+            i0.ɵɵrepeaterCreate(2, MobileBottomNavComponent_For_3_Template, 4, 3, "button", 2, _forTrack0$C);
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
             i0.ɵɵproperty("ngClass", ctx.containerClass());
@@ -22550,7 +22550,7 @@ class SearchService {
     }], null, null); })();
 
 const _c0$U = ["searchInput"];
-const _forTrack0$A = ($index, $item) => $item.id;
+const _forTrack0$B = ($index, $item) => $item.id;
 function SearchBarComponent_Conditional_0_Conditional_10_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 18);
@@ -22643,7 +22643,7 @@ function SearchBarComponent_Conditional_0_Conditional_14_For_2_Template(rf, ctx)
 } }
 function SearchBarComponent_Conditional_0_Conditional_14_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 15);
-    i0.ɵɵrepeaterCreate(1, SearchBarComponent_Conditional_0_Conditional_14_For_2_Template, 16, 12, "button", 19, _forTrack0$A);
+    i0.ɵɵrepeaterCreate(1, SearchBarComponent_Conditional_0_Conditional_14_For_2_Template, 16, 12, "button", 19, _forTrack0$B);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -23134,7 +23134,7 @@ class SearchHighlightDirective {
             }]
     }], () => [], { symphiqSearchHighlight: [{ type: i0.Input, args: [{ isSignal: true, alias: "libSymphiqSearchHighlight", required: false }] }], highlightId: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlightId", required: false }] }] }); })();
 
-const _forTrack0$z = ($index, $item) => $item.value;
+const _forTrack0$A = ($index, $item) => $item.value;
 const _forTrack1$4 = ($index, $item) => $item.performanceItemId;
 function CompetitiveScorecardComponent_For_12_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 7);
@@ -23509,7 +23509,7 @@ class CompetitiveScorecardComponent {
             i0.ɵɵtext(9);
             i0.ɵɵelementEnd()()();
             i0.ɵɵelementStart(10, "div", 6);
-            i0.ɵɵrepeaterCreate(11, CompetitiveScorecardComponent_For_12_Template, 4, 7, "div", 7, _forTrack0$z);
+            i0.ɵɵrepeaterCreate(11, CompetitiveScorecardComponent_For_12_Template, 4, 7, "div", 7, _forTrack0$A);
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(13, "div", 8)(14, "table", 9)(15, "thead")(16, "tr", 10)(17, "th", 11);
             i0.ɵɵtext(18, "Metric");
@@ -24144,7 +24144,7 @@ class SectionDividerComponent {
     }], null, { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], animationDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "animationDelay", required: false }] }], sectionIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "sectionIcon", required: false }] }], subsections: [{ type: i0.Input, args: [{ isSignal: true, alias: "subsections", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SectionDividerComponent, { className: "SectionDividerComponent", filePath: "lib/components/shared/section-divider.component.ts", lineNumber: 36 }); })();
 
-const _forTrack0$y = ($index, $item) => $item.id;
+const _forTrack0$z = ($index, $item) => $item.id;
 function FloatingTocComponent_Conditional_15_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵnamespaceSVG();
     i0.ɵɵelement(0, "path", 8);
@@ -24196,7 +24196,7 @@ function FloatingTocComponent_For_19_Conditional_7_For_2_Template(rf, ctx) { if
 } }
 function FloatingTocComponent_For_19_Conditional_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 17);
-    i0.ɵɵrepeaterCreate(1, FloatingTocComponent_For_19_Conditional_7_For_2_Template, 4, 4, "button", 19, _forTrack0$y);
+    i0.ɵɵrepeaterCreate(1, FloatingTocComponent_For_19_Conditional_7_For_2_Template, 4, 4, "button", 19, _forTrack0$z);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const section_r2 = i0.ɵɵnextContext().$implicit;
@@ -24592,7 +24592,7 @@ class FloatingTocComponent {
             i0.ɵɵelementEnd()()();
             i0.ɵɵnamespaceHTML();
             i0.ɵɵelementStart(17, "nav", 9);
-            i0.ɵɵrepeaterCreate(18, FloatingTocComponent_For_19_Template, 8, 6, "div", 10, _forTrack0$y);
+            i0.ɵɵrepeaterCreate(18, FloatingTocComponent_For_19_Template, 8, 6, "div", 10, _forTrack0$z);
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(20, "div", 11)(21, "button", 7);
             i0.ɵɵlistener("click", function FloatingTocComponent_Template_button_click_21_listener() { return ctx.scrollToTop(); });
@@ -24746,7 +24746,7 @@ class FloatingTocComponent {
     }], null, { sections: [{ type: i0.Input, args: [{ isSignal: true, alias: "sections", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], embedded: [{ type: i0.Input, args: [{ isSignal: true, alias: "embedded", required: false }] }], containerElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "containerElement", required: false }] }], scrollElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollElement", required: false }] }], parentHeaderOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentHeaderOffset", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FloatingTocComponent, { className: "FloatingTocComponent", filePath: "lib/components/business-analysis-dashboard/floating-toc.component.ts", lineNumber: 125 }); })();
 
-const _forTrack0$x = ($index, $item) => $item.id;
+const _forTrack0$y = ($index, $item) => $item.id;
 function JourneyProgressIndicatorComponent_For_5_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵnamespaceSVG();
     i0.ɵɵelementStart(0, "svg", 22);
@@ -24982,7 +24982,7 @@ function JourneyProgressIndicatorComponent_Conditional_23_Template(rf, ctx) { if
     i0.ɵɵtext(2, "Journey Progress");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "div", 44);
-    i0.ɵɵrepeaterCreate(4, JourneyProgressIndicatorComponent_Conditional_23_For_5_Template, 14, 8, "div", 45, _forTrack0$x);
+    i0.ɵɵrepeaterCreate(4, JourneyProgressIndicatorComponent_Conditional_23_For_5_Template, 14, 8, "div", 45, _forTrack0$y);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -25203,9 +25203,7 @@ class JourneyProgressIndicatorComponent {
         }
     }
     handleStepClick(step, idx) {
-        console.log('Step clicked:', { step, idx, status: step.status });
         if (step.status === 'completed' || step.status === 'accessible') {
-            console.log('Emitting stepClick:', idx + 1);
             this.stepClick.emit(idx + 1);
         }
     }
@@ -25433,7 +25431,7 @@ class JourneyProgressIndicatorComponent {
     static { this.ɵfac = function JourneyProgressIndicatorComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || JourneyProgressIndicatorComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: JourneyProgressIndicatorComponent, selectors: [["symphiq-journey-progress-indicator"]], inputs: { viewMode: [1, "viewMode"], currentStepId: [1, "currentStepId"], showNextStepAction: [1, "showNextStepAction"], forDemo: [1, "forDemo"], maxAccessibleStepId: [1, "maxAccessibleStepId"] }, outputs: { nextStepClick: "nextStepClick", stepClick: "stepClick" }, decls: 25, vars: 12, consts: [[1, "sticky", "top-[60px]", "z-40", "border-b", "pt-8", "pb-6", "px-6", "transition-all", "duration-200", "overflow-visible", 3, "ngClass"], [1, "max-w-7xl", "mx-auto", "overflow-visible"], [1, "hidden", "lg:flex", "items-start", "justify-between", "overflow-visible"], [1, "flex-1", "flex", "items-start", "justify-start", "overflow-visible"], ["type", "button", 1, "px-4", "py-2", "rounded-lg", "font-medium", "text-sm", "transition-all", "duration-200", "flex-shrink-0", "flex", "items-center", "gap-2", "whitespace-nowrap", "ml-4", "mt-0", 3, "disabled", "ngClass", "cursor-pointer", "cursor-not-allowed", "opacity-50", "hover:scale-105"], [1, "lg:hidden"], [1, "flex", "items-center", "justify-between", "gap-4"], [1, "flex-1", "flex", "items-center", "gap-3"], [1, "w-10", "h-10", "min-w-[2.5rem]", "min-h-[2.5rem]", "rounded-full", "flex", "items-center", "justify-center", "flex-shrink-0", 3, "ngClass"], ["fill", "currentColor", "viewBox", "0 0 20 20", 1, "w-5", "h-5"], [1, "w-3", "h-3", "min-w-[0.75rem]", "min-h-[0.75rem]", "rounded-full", "animate-pulse", 3, "ngClass"], [1, "text-sm", "font-bold", 3, "ngClass"], [1, "flex-1", "text-left"], [1, "flex", "items-center", "gap-1.5", "relative", 3, "mouseenter", "mouseleave", "click"], [1, "text-xs", "cursor-pointer", 3, "ngClass"], [1, "p-0.5", "rounded-full", "cursor-pointer", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-3", "h-3"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"], [1, "absolute", "top-full", "left-0", "mt-2", "w-80", "max-w-[calc(100vw-2rem)]", "p-4", "rounded-lg", "shadow-xl", "z-50", 3, "ngClass"], ["type", "button", 1, "px-3", "py-1.5", "rounded-lg", "font-medium", "text-xs", "transition-all", "duration-200", "flex-shrink-0", "flex", "items-center", "gap-1.5", "whitespace-nowrap", 3, "disabled", "ngClass", "cursor-pointer", "cursor-not-allowed", "opacity-50", "hover:scale-105"], [1, "flex", "flex-col", "items-center", "cursor-pointer", "relative", "step-column", "overflow-visible", "flex-shrink-0", 3, "mouseenter", "mouseleave"], [1, "w-8", "h-8", "min-w-[2rem]", "min-h-[2rem]", "rounded-full", "flex", "items-center", "justify-center", "flex-shrink-0", "step-circle", "relative", "z-10", "mb-1.5", 3, "click", "ngClass"], ["fill", "currentColor", "viewBox", "0 0 20 20", 1, "w-4", "h-4"], [1, "w-2.5", "h-2.5", "min-w-[0.625rem]", "min-h-[0.625rem]", "rounded-full", "animate-pulse", 3, "ngClass"], [1, "w-2", "h-2", "min-w-[0.5rem]", "min-h-[0.5rem]", "rounded-full", 3, "ngClass"], [1, "text-xs", "font-bold", 3, "ngClass"], [1, "text-[10px]", "text-center", "leading-tight", "whitespace-nowrap", "max-w-[64px]", "overflow-hidden", "text-ellipsis", 3, "click", "ngClass"], [1, "absolute", "rounded-lg", "shadow-2xl", "z-50", "pointer-events-none", 3, "ngClass", "expanded-card-right", "expanded-card-left", "top", "left", "right"], [1, "flex-1", "h-0.5", "transition-all", "duration-200", "mt-[16px]", 3, "ngClass"], ["fill-rule", "evenodd", "d", "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z", "clip-rule", "evenodd"], [1, "absolute", "rounded-lg", "shadow-2xl", "z-50", "pointer-events-none", 3, "ngClass"], [1, "flex", "items-start", "px-4", "py-3", "expanded-content"], [1, "flex", "items-start", "gap-2", "w-full"], [1, "text-xs", "font-bold", "flex-shrink-0", "mt-0.5", 3, "ngClass"], [1, "flex", "flex-col", "gap-1", "flex-1"], [1, "text-sm", "font-bold", "leading-tight", 3, "ngClass"], [1, "text-xs", "leading-relaxed", "description-fade", 3, "ngClass"], ["type", "button", 1, "px-4", "py-2", "rounded-lg", "font-medium", "text-sm", "transition-all", "duration-200", "flex-shrink-0", "flex", "items-center", "gap-2", "whitespace-nowrap", "ml-4", "mt-0", 3, "click", "disabled", "ngClass"], ["fill", "none", "viewBox", "0 0 24 24", 1, "w-4", "h-4", "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-4", "h-4"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 7l5 5m0 0l-5 5m5-5H6"], [1, "text-sm", "font-bold", "mb-3", 3, "ngClass"], [1, "space-y-2"], [1, "flex", "items-start", "gap-2"], [1, "w-6", "h-6", "min-w-[1.5rem]", "min-h-[1.5rem]", "rounded-full", "flex", "items-center", "justify-center", "flex-shrink-0", 3, "ngClass"], ["fill", "currentColor", "viewBox", "0 0 20 20", 1, "w-3", "h-3"], [1, "w-2", "h-2", "min-w-[0.5rem]", "min-h-[0.5rem]", "rounded-full", "animate-pulse", 3, "ngClass"], [1, "w-1.5", "h-1.5", "min-w-[0.375rem]", "min-h-[0.375rem]", "rounded-full", 3, "ngClass"], [1, "text-[10px]", "font-bold", 3, "ngClass"], [1, "flex-1", "min-w-0"], [1, "flex", "items-center", "gap-2"], [1, "text-xs", "font-medium", 3, "ngClass"], [1, "text-[10px]", "mt-0.5", 3, "ngClass"], ["type", "button", 1, "px-3", "py-1.5", "rounded-lg", "font-medium", "text-xs", "transition-all", "duration-200", "flex-shrink-0", "flex", "items-center", "gap-1.5", "whitespace-nowrap", 3, "click", "disabled", "ngClass"], ["fill", "none", "viewBox", "0 0 24 24", 1, "w-3.5", "h-3.5", "animate-spin"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-3.5", "h-3.5"]], template: function JourneyProgressIndicatorComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "div", 3);
-            i0.ɵɵrepeaterCreate(4, JourneyProgressIndicatorComponent_For_5_Template, 10, 12, null, null, _forTrack0$x);
+            i0.ɵɵrepeaterCreate(4, JourneyProgressIndicatorComponent_For_5_Template, 10, 12, null, null, _forTrack0$y);
             i0.ɵɵelementEnd();
             i0.ɵɵconditionalCreate(6, JourneyProgressIndicatorComponent_Conditional_6_Template, 3, 11, "button", 4);
             i0.ɵɵelementEnd();
@@ -25485,228 +25483,228 @@ class JourneyProgressIndicatorComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(JourneyProgressIndicatorComponent, [{
         type: Component,
-        args: [{ selector: 'symphiq-journey-progress-indicator', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <!-- Sticky Banner Container with Minimal Padding for Glow Effects -->
-    <div [ngClass]="containerClasses()" class="sticky top-[60px] z-40 border-b pt-8 pb-6 px-6 transition-all duration-200 overflow-visible">
-      <div class="max-w-7xl mx-auto overflow-visible">
-        <!-- Desktop/Tablet Horizontal Layout (lg and up) -->
-        <div class="hidden lg:flex items-start justify-between overflow-visible">
-          <!-- Steps Container -->
-          <div class="flex-1 flex items-start justify-start overflow-visible">
-            @for (step of steps(); track step.id; let idx = $index; let isLast = $last) {
-              <!-- Step Column (Vertical Layout: Dot above, Label below) -->
-              <div
-                class="flex flex-col items-center cursor-pointer relative step-column overflow-visible flex-shrink-0"
-                [style.width]="'64px'"
-                (mouseenter)="setHoveredStep(idx)"
-                (mouseleave)="clearHoveredStep()">
-
-                  <!-- Icon Circle -->
-                  <div
-                    [ngClass]="getStepIconContainerClasses(step)"
-                    class="w-8 h-8 min-w-[2rem] min-h-[2rem] rounded-full flex items-center justify-center flex-shrink-0 step-circle relative z-10 mb-1.5"
-                    (click)="handleStepClick(step, idx)"
-                    [class.cursor-pointer]="step.status === 'completed' || step.status === 'accessible'">
-                    @if (step.status === 'completed') {
-                      <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
-                        <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
-                      </svg>
-                    } @else if (step.status === 'current') {
-                      <div class="w-2.5 h-2.5 min-w-[0.625rem] min-h-[0.625rem] rounded-full animate-pulse" [ngClass]="getCurrentDotClasses()"></div>
-                    } @else if (step.status === 'accessible') {
-                      <div class="w-2 h-2 min-w-[0.5rem] min-h-[0.5rem] rounded-full" [ngClass]="getAccessibleDotClasses()"></div>
-                    } @else {
-                      <span [ngClass]="getStepNumberClasses(step)" class="text-xs font-bold">
-                        {{ idx + 1 }}
-                      </span>
-                    }
-                  </div>
-
-                  <!-- Abbreviated Title (Always Visible) -->
-                  <span
-                    [ngClass]="getAbbreviatedTitleClasses(step)"
-                    class="text-[10px] text-center leading-tight whitespace-nowrap max-w-[64px] overflow-hidden text-ellipsis"
-                    (click)="handleStepClick(step, idx)"
-                    [class.cursor-pointer]="step.status === 'completed' || step.status === 'accessible'">
-                    {{ getAbbreviatedTitle(step.title) }}
-                  </span>
-
-                  <!-- Absolute Positioned Tooltip -->
-                  @if (hoveredStepIndex() === idx) {
-                    <div
-                      [ngClass]="getExpandedCardClasses(idx)"
-                      [class.expanded-card-right]="isExpandRight(idx)"
-                      [class.expanded-card-left]="isExpandLeft(idx)"
-                      class="absolute rounded-lg shadow-2xl z-50 pointer-events-none"
-                      [style.top]="'-29px'"
-                      [style.left]="isExpandRight(idx) ? 'calc(100% + 6px)' : 'auto'"
-                      [style.right]="isExpandLeft(idx) ? 'calc(100% + 6px)' : 'auto'">
-                      <div class="flex items-start px-4 py-3 expanded-content">
-                        <!-- Step Number and Title with Description -->
-                        <div class="flex items-start gap-2 w-full">
-                          <span [ngClass]="tooltipStepNumberClasses()" class="text-xs font-bold flex-shrink-0 mt-0.5">{{ idx + 1 }}.</span>
-                          <div class="flex flex-col gap-1 flex-1">
-                            <span [ngClass]="tooltipTitleClasses()" class="text-sm font-bold leading-tight">{{ step.title }}</span>
-                            <!-- Description (Delayed Fade In) -->
-                            @if (shouldShowDetailedTooltip()) {
-                              <p [ngClass]="tooltipDescriptionClasses()" class="text-xs leading-relaxed description-fade">
-                                {{ step.description }}
-                              </p>
-                            }
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  }
-                </div>
-
-              <!-- Connector Line (Horizontal, stretches to fill available space) -->
-              @if (!isLast) {
-                <div [ngClass]="getConnectorClasses(step)" class="flex-1 h-0.5 transition-all duration-200 mt-[16px]"></div>
-              }
-            }
-          </div>
-
-          <!-- Next Step Button -->
-          @if (showNextStepAction() && getNextStep()) {
-            <button
-              type="button"
-              (click)="handleNextStepClick()"
-              [disabled]="isLoading()"
-              [ngClass]="nextStepButtonClasses()"
-              class="px-4 py-2 rounded-lg font-medium text-sm transition-all duration-200 flex-shrink-0 flex items-center gap-2 whitespace-nowrap ml-4 mt-0"
-              [class.cursor-pointer]="!isLoading()"
-              [class.cursor-not-allowed]="isLoading()"
-              [class.opacity-50]="isLoading()"
-              [class.hover:scale-105]="!isLoading()">
-              @if (isLoading()) {
-                <svg class="w-4 h-4 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>
-                Loading...
-              } @else {
-                {{ currentStepId() === JourneyStepIdEnum.WELCOME ? 'Get Started' : 'Continue' }}
-                <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="M13 7l5 5m0 0l-5 5m5-5H6"></path>
-                </svg>
-              }
-            </button>
-          }
-        </div>
-
-        <!-- Mobile Navigation (below lg) -->
-        <div class="lg:hidden">
-          <div class="flex items-center justify-between gap-4">
-            <!-- Current Step Display -->
-            <div class="flex-1 flex items-center gap-3">
-              <!-- Step Icon -->
-              <div [ngClass]="getStepIconContainerClasses(getCurrentStep())" class="w-10 h-10 min-w-[2.5rem] min-h-[2.5rem] rounded-full flex items-center justify-center flex-shrink-0">
-                @if (getCurrentStep().status === 'completed') {
-                  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
-                    <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
-                  </svg>
-                } @else if (getCurrentStep().status === 'current') {
-                  <div class="w-3 h-3 min-w-[0.75rem] min-h-[0.75rem] rounded-full animate-pulse" [ngClass]="getCurrentDotClasses()"></div>
-                } @else {
-                  <span [ngClass]="getStepNumberClasses(getCurrentStep())" class="text-sm font-bold">
-                    {{ getCurrentStepIndex() + 1 }}
-                  </span>
-                }
-              </div>
-
-              <!-- Step Info -->
-              <div class="flex-1 text-left">
-                <h3 [ngClass]="getStepTitleClasses(getCurrentStep())" class="text-sm font-bold">
-                  {{ getCurrentStep().title }}
-                </h3>
-                <!-- Step Counter with Tooltip Trigger -->
-                <div
-                  class="flex items-center gap-1.5 relative"
-                  (mouseenter)="showMobileTooltip.set(true)"
-                  (mouseleave)="showMobileTooltip.set(false)"
-                  (click)="toggleMobileTooltip()">
-                  <span [ngClass]="stepCounterClasses()" class="text-xs cursor-pointer">
-                    Step {{ getCurrentStepIndex() + 1 }} of {{ steps().length }}
-                  </span>
-                  <div [ngClass]="tooltipTriggerClasses()" class="p-0.5 rounded-full cursor-pointer">
-                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
-                    </svg>
-                  </div>
-
-                  <!-- Mobile Tooltip with All Steps -->
-                  @if (showMobileTooltip()) {
-                    <div [ngClass]="mobileTooltipClasses()" class="absolute top-full left-0 mt-2 w-80 max-w-[calc(100vw-2rem)] p-4 rounded-lg shadow-xl z-50">
-                      <h4 [ngClass]="tooltipTitleClasses()" class="text-sm font-bold mb-3">Journey Progress</h4>
-                      <div class="space-y-2">
-                        @for (step of steps(); track step.id; let idx = $index) {
-                          <div class="flex items-start gap-2">
-                            <!-- Step Icon -->
-                            <div [ngClass]="getStepIconContainerClasses(step)" class="w-6 h-6 min-w-[1.5rem] min-h-[1.5rem] rounded-full flex items-center justify-center flex-shrink-0">
-                              @if (step.status === 'completed') {
-                                <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
-                                  <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
-                                </svg>
-                              } @else if (step.status === 'current') {
-                                <div class="w-2 h-2 min-w-[0.5rem] min-h-[0.5rem] rounded-full animate-pulse" [ngClass]="getCurrentDotClasses()"></div>
-                              } @else if (step.status === 'accessible') {
-                                <div class="w-1.5 h-1.5 min-w-[0.375rem] min-h-[0.375rem] rounded-full" [ngClass]="getAccessibleDotClasses()"></div>
-                              } @else {
-                                <span [ngClass]="getStepNumberClasses(step)" class="text-[10px] font-bold">
-                                  {{ idx + 1 }}
-                                </span>
-                              }
-                            </div>
-                            <!-- Step Info -->
-                            <div class="flex-1 min-w-0">
-                              <div class="flex items-center gap-2">
-                                <span [ngClass]="tooltipStepNumberClasses()" class="text-xs font-bold">{{ idx + 1 }}.</span>
-                                <span [ngClass]="getStepTitleClasses(step)" class="text-xs font-medium">{{ step.title }}</span>
-                              </div>
-                              <p [ngClass]="tooltipDescriptionClasses()" class="text-[10px] mt-0.5">
-                                {{ step.description }}
-                              </p>
-                            </div>
-                          </div>
-                        }
-                      </div>
-                    </div>
-                  }
-                </div>
-              </div>
-            </div>
-
-            <!-- Get Started Button -->
-            @if (showNextStepAction() && getNextStep() && getCurrentStep().status === 'current') {
-              <button
-                type="button"
-                (click)="handleNextStepClick()"
-                [disabled]="isLoading()"
-                [ngClass]="nextStepButtonClasses()"
-                class="px-3 py-1.5 rounded-lg font-medium text-xs transition-all duration-200 flex-shrink-0 flex items-center gap-1.5 whitespace-nowrap"
-                [class.cursor-pointer]="!isLoading()"
-                [class.cursor-not-allowed]="isLoading()"
-                [class.opacity-50]="isLoading()"
-                [class.hover:scale-105]="!isLoading()">
-                @if (isLoading()) {
-                  <svg class="w-3.5 h-3.5 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>
-                  Loading...
-                } @else {
-                  {{ currentStepId() === JourneyStepIdEnum.WELCOME ? 'Get Started' : 'Continue' }}
-                  <svg class="w-3.5 h-3.5" 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"></path>
-                  </svg>
-                }
-              </button>
-            }
-          </div>
-        </div>
-      </div>
-    </div>
+        args: [{ selector: 'symphiq-journey-progress-indicator', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <!-- Sticky Banner Container with Minimal Padding for Glow Effects -->
+    <div [ngClass]="containerClasses()" class="sticky top-[60px] z-40 border-b pt-8 pb-6 px-6 transition-all duration-200 overflow-visible">
+      <div class="max-w-7xl mx-auto overflow-visible">
+        <!-- Desktop/Tablet Horizontal Layout (lg and up) -->
+        <div class="hidden lg:flex items-start justify-between overflow-visible">
+          <!-- Steps Container -->
+          <div class="flex-1 flex items-start justify-start overflow-visible">
+            @for (step of steps(); track step.id; let idx = $index; let isLast = $last) {
+              <!-- Step Column (Vertical Layout: Dot above, Label below) -->
+              <div
+                class="flex flex-col items-center cursor-pointer relative step-column overflow-visible flex-shrink-0"
+                [style.width]="'64px'"
+                (mouseenter)="setHoveredStep(idx)"
+                (mouseleave)="clearHoveredStep()">
+
+                  <!-- Icon Circle -->
+                  <div
+                    [ngClass]="getStepIconContainerClasses(step)"
+                    class="w-8 h-8 min-w-[2rem] min-h-[2rem] rounded-full flex items-center justify-center flex-shrink-0 step-circle relative z-10 mb-1.5"
+                    (click)="handleStepClick(step, idx)"
+                    [class.cursor-pointer]="step.status === 'completed' || step.status === 'accessible'">
+                    @if (step.status === 'completed') {
+                      <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
+                        <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
+                      </svg>
+                    } @else if (step.status === 'current') {
+                      <div class="w-2.5 h-2.5 min-w-[0.625rem] min-h-[0.625rem] rounded-full animate-pulse" [ngClass]="getCurrentDotClasses()"></div>
+                    } @else if (step.status === 'accessible') {
+                      <div class="w-2 h-2 min-w-[0.5rem] min-h-[0.5rem] rounded-full" [ngClass]="getAccessibleDotClasses()"></div>
+                    } @else {
+                      <span [ngClass]="getStepNumberClasses(step)" class="text-xs font-bold">
+                        {{ idx + 1 }}
+                      </span>
+                    }
+                  </div>
+
+                  <!-- Abbreviated Title (Always Visible) -->
+                  <span
+                    [ngClass]="getAbbreviatedTitleClasses(step)"
+                    class="text-[10px] text-center leading-tight whitespace-nowrap max-w-[64px] overflow-hidden text-ellipsis"
+                    (click)="handleStepClick(step, idx)"
+                    [class.cursor-pointer]="step.status === 'completed' || step.status === 'accessible'">
+                    {{ getAbbreviatedTitle(step.title) }}
+                  </span>
+
+                  <!-- Absolute Positioned Tooltip -->
+                  @if (hoveredStepIndex() === idx) {
+                    <div
+                      [ngClass]="getExpandedCardClasses(idx)"
+                      [class.expanded-card-right]="isExpandRight(idx)"
+                      [class.expanded-card-left]="isExpandLeft(idx)"
+                      class="absolute rounded-lg shadow-2xl z-50 pointer-events-none"
+                      [style.top]="'-29px'"
+                      [style.left]="isExpandRight(idx) ? 'calc(100% + 6px)' : 'auto'"
+                      [style.right]="isExpandLeft(idx) ? 'calc(100% + 6px)' : 'auto'">
+                      <div class="flex items-start px-4 py-3 expanded-content">
+                        <!-- Step Number and Title with Description -->
+                        <div class="flex items-start gap-2 w-full">
+                          <span [ngClass]="tooltipStepNumberClasses()" class="text-xs font-bold flex-shrink-0 mt-0.5">{{ idx + 1 }}.</span>
+                          <div class="flex flex-col gap-1 flex-1">
+                            <span [ngClass]="tooltipTitleClasses()" class="text-sm font-bold leading-tight">{{ step.title }}</span>
+                            <!-- Description (Delayed Fade In) -->
+                            @if (shouldShowDetailedTooltip()) {
+                              <p [ngClass]="tooltipDescriptionClasses()" class="text-xs leading-relaxed description-fade">
+                                {{ step.description }}
+                              </p>
+                            }
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  }
+                </div>
+
+              <!-- Connector Line (Horizontal, stretches to fill available space) -->
+              @if (!isLast) {
+                <div [ngClass]="getConnectorClasses(step)" class="flex-1 h-0.5 transition-all duration-200 mt-[16px]"></div>
+              }
+            }
+          </div>
+
+          <!-- Next Step Button -->
+          @if (showNextStepAction() && getNextStep()) {
+            <button
+              type="button"
+              (click)="handleNextStepClick()"
+              [disabled]="isLoading()"
+              [ngClass]="nextStepButtonClasses()"
+              class="px-4 py-2 rounded-lg font-medium text-sm transition-all duration-200 flex-shrink-0 flex items-center gap-2 whitespace-nowrap ml-4 mt-0"
+              [class.cursor-pointer]="!isLoading()"
+              [class.cursor-not-allowed]="isLoading()"
+              [class.opacity-50]="isLoading()"
+              [class.hover:scale-105]="!isLoading()">
+              @if (isLoading()) {
+                <svg class="w-4 h-4 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>
+                Loading...
+              } @else {
+                {{ currentStepId() === JourneyStepIdEnum.WELCOME ? 'Get Started' : 'Continue' }}
+                <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="M13 7l5 5m0 0l-5 5m5-5H6"></path>
+                </svg>
+              }
+            </button>
+          }
+        </div>
+
+        <!-- Mobile Navigation (below lg) -->
+        <div class="lg:hidden">
+          <div class="flex items-center justify-between gap-4">
+            <!-- Current Step Display -->
+            <div class="flex-1 flex items-center gap-3">
+              <!-- Step Icon -->
+              <div [ngClass]="getStepIconContainerClasses(getCurrentStep())" class="w-10 h-10 min-w-[2.5rem] min-h-[2.5rem] rounded-full flex items-center justify-center flex-shrink-0">
+                @if (getCurrentStep().status === 'completed') {
+                  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+                    <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
+                  </svg>
+                } @else if (getCurrentStep().status === 'current') {
+                  <div class="w-3 h-3 min-w-[0.75rem] min-h-[0.75rem] rounded-full animate-pulse" [ngClass]="getCurrentDotClasses()"></div>
+                } @else {
+                  <span [ngClass]="getStepNumberClasses(getCurrentStep())" class="text-sm font-bold">
+                    {{ getCurrentStepIndex() + 1 }}
+                  </span>
+                }
+              </div>
+
+              <!-- Step Info -->
+              <div class="flex-1 text-left">
+                <h3 [ngClass]="getStepTitleClasses(getCurrentStep())" class="text-sm font-bold">
+                  {{ getCurrentStep().title }}
+                </h3>
+                <!-- Step Counter with Tooltip Trigger -->
+                <div
+                  class="flex items-center gap-1.5 relative"
+                  (mouseenter)="showMobileTooltip.set(true)"
+                  (mouseleave)="showMobileTooltip.set(false)"
+                  (click)="toggleMobileTooltip()">
+                  <span [ngClass]="stepCounterClasses()" class="text-xs cursor-pointer">
+                    Step {{ getCurrentStepIndex() + 1 }} of {{ steps().length }}
+                  </span>
+                  <div [ngClass]="tooltipTriggerClasses()" class="p-0.5 rounded-full cursor-pointer">
+                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                    </svg>
+                  </div>
+
+                  <!-- Mobile Tooltip with All Steps -->
+                  @if (showMobileTooltip()) {
+                    <div [ngClass]="mobileTooltipClasses()" class="absolute top-full left-0 mt-2 w-80 max-w-[calc(100vw-2rem)] p-4 rounded-lg shadow-xl z-50">
+                      <h4 [ngClass]="tooltipTitleClasses()" class="text-sm font-bold mb-3">Journey Progress</h4>
+                      <div class="space-y-2">
+                        @for (step of steps(); track step.id; let idx = $index) {
+                          <div class="flex items-start gap-2">
+                            <!-- Step Icon -->
+                            <div [ngClass]="getStepIconContainerClasses(step)" class="w-6 h-6 min-w-[1.5rem] min-h-[1.5rem] rounded-full flex items-center justify-center flex-shrink-0">
+                              @if (step.status === 'completed') {
+                                <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
+                                  <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
+                                </svg>
+                              } @else if (step.status === 'current') {
+                                <div class="w-2 h-2 min-w-[0.5rem] min-h-[0.5rem] rounded-full animate-pulse" [ngClass]="getCurrentDotClasses()"></div>
+                              } @else if (step.status === 'accessible') {
+                                <div class="w-1.5 h-1.5 min-w-[0.375rem] min-h-[0.375rem] rounded-full" [ngClass]="getAccessibleDotClasses()"></div>
+                              } @else {
+                                <span [ngClass]="getStepNumberClasses(step)" class="text-[10px] font-bold">
+                                  {{ idx + 1 }}
+                                </span>
+                              }
+                            </div>
+                            <!-- Step Info -->
+                            <div class="flex-1 min-w-0">
+                              <div class="flex items-center gap-2">
+                                <span [ngClass]="tooltipStepNumberClasses()" class="text-xs font-bold">{{ idx + 1 }}.</span>
+                                <span [ngClass]="getStepTitleClasses(step)" class="text-xs font-medium">{{ step.title }}</span>
+                              </div>
+                              <p [ngClass]="tooltipDescriptionClasses()" class="text-[10px] mt-0.5">
+                                {{ step.description }}
+                              </p>
+                            </div>
+                          </div>
+                        }
+                      </div>
+                    </div>
+                  }
+                </div>
+              </div>
+            </div>
+
+            <!-- Get Started Button -->
+            @if (showNextStepAction() && getNextStep() && getCurrentStep().status === 'current') {
+              <button
+                type="button"
+                (click)="handleNextStepClick()"
+                [disabled]="isLoading()"
+                [ngClass]="nextStepButtonClasses()"
+                class="px-3 py-1.5 rounded-lg font-medium text-xs transition-all duration-200 flex-shrink-0 flex items-center gap-1.5 whitespace-nowrap"
+                [class.cursor-pointer]="!isLoading()"
+                [class.cursor-not-allowed]="isLoading()"
+                [class.opacity-50]="isLoading()"
+                [class.hover:scale-105]="!isLoading()">
+                @if (isLoading()) {
+                  <svg class="w-3.5 h-3.5 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>
+                  Loading...
+                } @else {
+                  {{ currentStepId() === JourneyStepIdEnum.WELCOME ? 'Get Started' : 'Continue' }}
+                  <svg class="w-3.5 h-3.5" 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"></path>
+                  </svg>
+                }
+              </button>
+            }
+          </div>
+        </div>
+      </div>
+    </div>
   `, styles: [".scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}.scrollbar-hide::-webkit-scrollbar{display:none}.step-glow-current{box-shadow:0 0 0 3px #3b82f64d;animation:pulseGlow 2s ease-in-out infinite}.step-glow-current-dark{box-shadow:0 0 0 3px #60a5fa4d;animation:pulseGlow 2s ease-in-out infinite}.step-glow-completed{box-shadow:0 0 0 2px #10b98133}.step-glow-completed-dark{box-shadow:0 0 0 2px #34d39933}.step-glow-accessible{box-shadow:0 0 0 2px #3b82f61f}.step-glow-accessible-dark{box-shadow:0 0 0 2px #60a5fa26}@keyframes pulseGlow{0%,to{box-shadow:0 0 0 3px #3b82f64d}50%{box-shadow:0 0 0 6px #3b82f61a}}.step-column{transition:all .2s cubic-bezier(.4,0,.2,1)}.step-circle{transition:all .15s cubic-bezier(.4,0,.2,1)}.step-column:hover .step-circle{transform:scale(1.05)}.expanded-card-right{animation:expandCardRight .2s cubic-bezier(.4,0,.2,1) forwards;transform-origin:left center}.expanded-card-left{animation:expandCardLeft .2s cubic-bezier(.4,0,.2,1) forwards;transform-origin:right center}@keyframes expandCardRight{0%{opacity:0;width:0;min-height:90px}to{opacity:1;width:300px;min-height:90px}}@keyframes expandCardLeft{0%{opacity:0;width:0;min-height:90px}to{opacity:1;width:300px;min-height:90px}}.description-fade{animation:fadeIn .15s ease-out forwards;opacity:0}@keyframes fadeIn{to{opacity:1}}.expanded-content{animation:contentFadeIn .15s ease-out .1s forwards;opacity:0}@keyframes contentFadeIn{to{opacity:1}}\n"] }]
     }], () => [], { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], currentStepId: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentStepId", required: false }] }], showNextStepAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "showNextStepAction", required: false }] }], forDemo: [{ type: i0.Input, args: [{ isSignal: true, alias: "forDemo", required: false }] }], maxAccessibleStepId: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxAccessibleStepId", required: false }] }], nextStepClick: [{ type: i0.Output, args: ["nextStepClick"] }], stepClick: [{ type: i0.Output, args: ["stepClick"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(JourneyProgressIndicatorComponent, { className: "JourneyProgressIndicatorComponent", filePath: "lib/components/business-analysis-dashboard/journey-progress-indicator.component.ts", lineNumber: 371 }); })();
@@ -27586,7 +27584,7 @@ class ViewModeSwitcherModalComponent {
 const _c0$S = a0 => ({ name: "check-badge", source: a0 });
 const _c1$y = a0 => ({ name: "check-circle", source: a0 });
 const _c2$o = a0 => ({ name: "chevron-right", source: a0 });
-const _forTrack0$w = ($index, $item) => $item.area;
+const _forTrack0$x = ($index, $item) => $item.area;
 function KeyStrengthsListModalContentComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 1);
     i0.ɵɵelement(1, "symphiq-icon", 3);
@@ -27655,7 +27653,7 @@ function KeyStrengthsListModalContentComponent_Conditional_2_For_2_Template(rf,
 } }
 function KeyStrengthsListModalContentComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 2);
-    i0.ɵɵrepeaterCreate(1, KeyStrengthsListModalContentComponent_Conditional_2_For_2_Template, 15, 18, "button", 6, _forTrack0$w);
+    i0.ɵɵrepeaterCreate(1, KeyStrengthsListModalContentComponent_Conditional_2_For_2_Template, 15, 18, "button", 6, _forTrack0$x);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -27819,7 +27817,7 @@ const _c0$R = a0 => ({ name: "shield-check", source: a0 });
 const _c1$x = a0 => ({ name: "exclamation-triangle", source: a0 });
 const _c2$n = a0 => ({ name: "document-text", source: a0 });
 const _c3$h = a0 => ({ name: "chevron-right", source: a0 });
-const _forTrack0$v = ($index, $item) => $item.area;
+const _forTrack0$w = ($index, $item) => $item.area;
 function CriticalGapsListModalContentComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 1);
     i0.ɵɵelement(1, "symphiq-icon", 3);
@@ -27904,7 +27902,7 @@ function CriticalGapsListModalContentComponent_Conditional_2_For_2_Template(rf,
 } }
 function CriticalGapsListModalContentComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 2);
-    i0.ɵɵrepeaterCreate(1, CriticalGapsListModalContentComponent_Conditional_2_For_2_Template, 23, 25, "button", 6, _forTrack0$v);
+    i0.ɵɵrepeaterCreate(1, CriticalGapsListModalContentComponent_Conditional_2_For_2_Template, 23, 25, "button", 6, _forTrack0$w);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -28133,7 +28131,7 @@ class CriticalGapsListModalContentComponent {
 
 const _c0$Q = a0 => ({ name: "check-circle", source: a0 });
 const _c1$w = a0 => ({ name: "chat-bubble-left-right", source: a0 });
-const _forTrack0$u = ($index, $item) => $item.questionId;
+const _forTrack0$v = ($index, $item) => $item.questionId;
 function KeyStrengthDetailModalContentComponent_Conditional_13_For_6_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 19)(1, "span", 20);
     i0.ɵɵtext(2);
@@ -28180,7 +28178,7 @@ function KeyStrengthDetailModalContentComponent_Conditional_13_Template(rf, ctx)
     i0.ɵɵtext(3, " Supporting Evidence ");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(4, "div", 12);
-    i0.ɵɵrepeaterCreate(5, KeyStrengthDetailModalContentComponent_Conditional_13_For_6_Template, 9, 10, "div", 13, _forTrack0$u);
+    i0.ɵɵrepeaterCreate(5, KeyStrengthDetailModalContentComponent_Conditional_13_For_6_Template, 9, 10, "div", 13, _forTrack0$v);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -28375,7 +28373,7 @@ class KeyStrengthDetailModalContentComponent {
 const _c0$P = a0 => ({ name: "exclamation-triangle", source: a0 });
 const _c1$v = a0 => ({ name: "document-text", source: a0 });
 const _c2$m = a0 => ({ name: "chat-bubble-left-right", source: a0 });
-const _forTrack0$t = ($index, $item) => $item.questionId;
+const _forTrack0$u = ($index, $item) => $item.questionId;
 function CriticalGapDetailModalContentComponent_Conditional_20_For_6_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 23)(1, "p", 25);
     i0.ɵɵtext(2, " Gap Identified: ");
@@ -28443,7 +28441,7 @@ function CriticalGapDetailModalContentComponent_Conditional_20_Template(rf, ctx)
     i0.ɵɵtext(3, " Supporting Evidence ");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(4, "div", 17);
-    i0.ɵɵrepeaterCreate(5, CriticalGapDetailModalContentComponent_Conditional_20_For_6_Template, 10, 11, "div", 18, _forTrack0$t);
+    i0.ɵɵrepeaterCreate(5, CriticalGapDetailModalContentComponent_Conditional_20_For_6_Template, 10, 11, "div", 18, _forTrack0$u);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -30239,7 +30237,7 @@ const _c0$O = a0 => ({ name: "check-badge", source: a0 });
 const _c1$u = a0 => ({ name: "check-circle", source: a0 });
 const _c2$l = a0 => ({ name: "chevron-right", source: a0 });
 const _c3$g = a0 => ({ name: "chart-bar", source: a0 });
-const _forTrack0$s = ($index, $item) => $item.capability;
+const _forTrack0$t = ($index, $item) => $item.capability;
 function FocusAreaStrengthsListModalContentComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 1);
     i0.ɵɵelement(1, "symphiq-icon", 3);
@@ -30354,7 +30352,7 @@ function FocusAreaStrengthsListModalContentComponent_Conditional_2_For_2_Templat
 } }
 function FocusAreaStrengthsListModalContentComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 2);
-    i0.ɵɵrepeaterCreate(1, FocusAreaStrengthsListModalContentComponent_Conditional_2_For_2_Template, 16, 18, "button", 6, _forTrack0$s);
+    i0.ɵɵrepeaterCreate(1, FocusAreaStrengthsListModalContentComponent_Conditional_2_For_2_Template, 16, 18, "button", 6, _forTrack0$t);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -30561,7 +30559,7 @@ class FocusAreaStrengthsListModalContentComponent {
 const _c0$N = a0 => ({ name: "exclamation-triangle", source: a0 });
 const _c1$t = a0 => ({ name: "exclamation-circle", source: a0 });
 const _c2$k = a0 => ({ name: "chevron-right", source: a0 });
-function _forTrack0$r($index, $item) { return this.getGapTitle($item); }
+function _forTrack0$s($index, $item) { return this.getGapTitle($item); }
 function FocusAreaGapsListModalContentComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 1);
     i0.ɵɵelement(1, "symphiq-icon", 3);
@@ -30678,7 +30676,7 @@ function FocusAreaGapsListModalContentComponent_Conditional_2_For_2_Template(rf,
 } }
 function FocusAreaGapsListModalContentComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 2);
-    i0.ɵɵrepeaterCreate(1, FocusAreaGapsListModalContentComponent_Conditional_2_For_2_Template, 15, 18, "button", 6, _forTrack0$r, true);
+    i0.ɵɵrepeaterCreate(1, FocusAreaGapsListModalContentComponent_Conditional_2_For_2_Template, 15, 18, "button", 6, _forTrack0$s, true);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -30955,7 +30953,7 @@ class FocusAreaGapsListModalContentComponent {
 const _c0$M = a0 => ({ name: "light-bulb", source: a0 });
 const _c1$s = a0 => ({ name: "chevron-right", source: a0 });
 const _c2$j = a0 => ({ name: "chart-bar", source: a0 });
-const _forTrack0$q = ($index, $item) => $item.opportunity;
+const _forTrack0$r = ($index, $item) => $item.opportunity;
 function FocusAreaOpportunitiesListModalContentComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 1);
     i0.ɵɵelement(1, "symphiq-icon", 3);
@@ -31046,7 +31044,7 @@ function FocusAreaOpportunitiesListModalContentComponent_Conditional_2_For_2_Tem
 } }
 function FocusAreaOpportunitiesListModalContentComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 2);
-    i0.ɵɵrepeaterCreate(1, FocusAreaOpportunitiesListModalContentComponent_Conditional_2_For_2_Template, 11, 11, "button", 6, _forTrack0$q);
+    i0.ɵɵrepeaterCreate(1, FocusAreaOpportunitiesListModalContentComponent_Conditional_2_For_2_Template, 11, 11, "button", 6, _forTrack0$r);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -31223,7 +31221,7 @@ class FocusAreaOpportunitiesListModalContentComponent {
 
 const _c0$L = a0 => ({ name: "chevron-right", source: a0 });
 const _c1$r = a0 => ({ name: "chat-bubble-left-right", source: a0 });
-const _forTrack0$p = ($index, $item) => $item.performanceItemId;
+const _forTrack0$q = ($index, $item) => $item.performanceItemId;
 function FocusAreaStrengthDetailModalContentComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div")(1, "p", 2);
     i0.ɵɵtext(2);
@@ -31293,7 +31291,7 @@ function FocusAreaStrengthDetailModalContentComponent_Conditional_4_Template(rf,
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "div", 9);
-    i0.ɵɵrepeaterCreate(4, FocusAreaStrengthDetailModalContentComponent_Conditional_4_For_5_Template, 4, 5, "button", 10, _forTrack0$p);
+    i0.ɵɵrepeaterCreate(4, FocusAreaStrengthDetailModalContentComponent_Conditional_4_For_5_Template, 4, 5, "button", 10, _forTrack0$q);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -31944,7 +31942,7 @@ class FocusAreaGapDetailModalContentComponent {
 
 const _c0$J = a0 => ({ name: "chevron-right", source: a0 });
 const _c1$q = () => [];
-const _forTrack0$o = ($index, $item) => $item.performanceItemId;
+const _forTrack0$p = ($index, $item) => $item.performanceItemId;
 function FocusAreaOpportunityDetailModalContentComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div")(1, "p", 2);
     i0.ɵɵtext(2);
@@ -31996,7 +31994,7 @@ function FocusAreaOpportunityDetailModalContentComponent_Conditional_3_Template(
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "div", 6);
-    i0.ɵɵrepeaterCreate(4, FocusAreaOpportunityDetailModalContentComponent_Conditional_3_For_5_Template, 4, 5, "button", 7, _forTrack0$o);
+    i0.ɵɵrepeaterCreate(4, FocusAreaOpportunityDetailModalContentComponent_Conditional_3_For_5_Template, 4, 5, "button", 7, _forTrack0$p);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -37139,7 +37137,7 @@ const _c4$7 = a0 => ({ name: "academic-cap", source: a0 });
 const _c5$5 = a0 => ({ name: "information-circle", source: a0 });
 const _c6$2 = a0 => ({ name: "signal", source: a0 });
 const _c7$1 = a0 => ({ name: "wrench-screwdriver", source: a0 });
-const _forTrack0$n = ($index, $item) => $item.name;
+const _forTrack0$o = ($index, $item) => $item.name;
 function ProductCategoryCardComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "p", 8);
     i0.ɵɵtext(1);
@@ -37270,7 +37268,7 @@ function ProductCategoryCardComponent_Conditional_16_Template(rf, ctx) { if (rf
     i0.ɵɵelementStart(6, "symphiq-visualization-container", 21);
     i0.ɵɵlistener("visualizationClick", function ProductCategoryCardComponent_Conditional_16_Template_symphiq_visualization_container_visualizationClick_6_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.openHorizontalBarModal($event)); });
     i0.ɵɵelementStart(7, "div", 22);
-    i0.ɵɵrepeaterCreate(8, ProductCategoryCardComponent_Conditional_16_For_9_Template, 2, 5, "div", 23, _forTrack0$n);
+    i0.ɵɵrepeaterCreate(8, ProductCategoryCardComponent_Conditional_16_For_9_Template, 2, 5, "div", 23, _forTrack0$o);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -42260,7 +42258,7 @@ const ProfileAnalysisModalComponent_Conditional_0_Conditional_31_Conditional_5_D
 const ProfileAnalysisModalComponent_Conditional_0_Conditional_31_Conditional_6_Defer_2_DepsFn = () => [Promise.resolve().then(function () { return areaChart_component; }).then(m => m.AreaChartComponent)];
 const _c3$8 = a0 => ({ name: "arrow-left", source: a0 });
 const _c4$5 = a0 => ({ name: "chevron-right", source: a0 });
-const _forTrack0$m = ($index, $item) => $item.performanceItemId || $index;
+const _forTrack0$n = ($index, $item) => $item.performanceItemId || $index;
 const _forTrack1$3 = ($index, $item) => $item.id || $index;
 function ProfileAnalysisModalComponent_Conditional_0_Conditional_10_For_5_Conditional_0_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
@@ -42471,7 +42469,7 @@ function ProfileAnalysisModalComponent_Conditional_0_Conditional_21_For_3_Templa
 function ProfileAnalysisModalComponent_Conditional_0_Conditional_21_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 20);
     i0.ɵɵconditionalCreate(1, ProfileAnalysisModalComponent_Conditional_0_Conditional_21_Conditional_1_Template, 2, 2, "p", 52);
-    i0.ɵɵrepeaterCreate(2, ProfileAnalysisModalComponent_Conditional_0_Conditional_21_For_3_Template, 13, 10, "div", 53, _forTrack0$m);
+    i0.ɵɵrepeaterCreate(2, ProfileAnalysisModalComponent_Conditional_0_Conditional_21_For_3_Template, 13, 10, "div", 53, _forTrack0$n);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const data_r11 = ctx;
@@ -42551,7 +42549,7 @@ function ProfileAnalysisModalComponent_Conditional_0_Conditional_22_For_3_Templa
 function ProfileAnalysisModalComponent_Conditional_0_Conditional_22_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 20);
     i0.ɵɵconditionalCreate(1, ProfileAnalysisModalComponent_Conditional_0_Conditional_22_Conditional_1_Template, 2, 2, "p", 52);
-    i0.ɵɵrepeaterCreate(2, ProfileAnalysisModalComponent_Conditional_0_Conditional_22_For_3_Template, 13, 10, "div", 53, _forTrack0$m);
+    i0.ɵɵrepeaterCreate(2, ProfileAnalysisModalComponent_Conditional_0_Conditional_22_For_3_Template, 13, 10, "div", 53, _forTrack0$n);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const data_r14 = ctx;
@@ -42670,7 +42668,7 @@ function ProfileAnalysisModalComponent_Conditional_0_Conditional_27_Conditional_
     i0.ɵɵelementStart(0, "div", 69)(1, "h3", 70);
     i0.ɵɵtext(2, " Directly Affected Metric ");
     i0.ɵɵelementEnd();
-    i0.ɵɵrepeaterCreate(3, ProfileAnalysisModalComponent_Conditional_0_Conditional_27_Conditional_1_Conditional_0_For_4_Template, 1, 1, null, null, _forTrack0$m);
+    i0.ɵɵrepeaterCreate(3, ProfileAnalysisModalComponent_Conditional_0_Conditional_27_Conditional_1_Conditional_0_For_4_Template, 1, 1, null, null, _forTrack0$n);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const data_r32 = i0.ɵɵnextContext(2);
@@ -42704,7 +42702,7 @@ function ProfileAnalysisModalComponent_Conditional_0_Conditional_27_Conditional_
     i0.ɵɵelementStart(0, "div", 69)(1, "h3", 70);
     i0.ɵɵtext(2, " Indirectly Affected Metrics ");
     i0.ɵɵelementEnd();
-    i0.ɵɵrepeaterCreate(3, ProfileAnalysisModalComponent_Conditional_0_Conditional_27_Conditional_1_Conditional_1_For_4_Template, 1, 1, null, null, _forTrack0$m);
+    i0.ɵɵrepeaterCreate(3, ProfileAnalysisModalComponent_Conditional_0_Conditional_27_Conditional_1_Conditional_1_For_4_Template, 1, 1, null, null, _forTrack0$n);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const data_r32 = i0.ɵɵnextContext(2);
@@ -42736,7 +42734,7 @@ function ProfileAnalysisModalComponent_Conditional_0_Conditional_27_Conditional_
     i0.ɵɵproperty("metric", metric_r38)("isLightMode", ctx_r1.isLightMode())("animationKey", $index_r39);
 } }
 function ProfileAnalysisModalComponent_Conditional_0_Conditional_27_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵrepeaterCreate(0, ProfileAnalysisModalComponent_Conditional_0_Conditional_27_Conditional_2_For_1_Template, 2, 3, "div", null, _forTrack0$m);
+    i0.ɵɵrepeaterCreate(0, ProfileAnalysisModalComponent_Conditional_0_Conditional_27_Conditional_2_For_1_Template, 2, 3, "div", null, _forTrack0$n);
 } if (rf & 2) {
     const data_r32 = i0.ɵɵnextContext();
     i0.ɵɵrepeater(data_r32.metrics);
@@ -45436,7 +45434,7 @@ const _c0$t = a0 => ({ name: "list-bullet", source: a0 });
 const _c1$d = a0 => ({ name: "arrow-right", source: a0 });
 const _c2$9 = a0 => ({ name: "check-circle", source: a0 });
 const _c3$6 = a0 => ({ name: "exclamation-circle", source: a0 });
-const _forTrack0$l = ($index, $item) => $item.order;
+const _forTrack0$m = ($index, $item) => $item.order;
 function RecommendationActionStepsModalComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 1)(1, "div", 5);
     i0.ɵɵelement(2, "symphiq-icon", 6);
@@ -45590,7 +45588,7 @@ class RecommendationActionStepsModalComponent {
             i0.ɵɵelementStart(0, "div", 0);
             i0.ɵɵconditionalCreate(1, RecommendationActionStepsModalComponent_Conditional_1_Template, 8, 7, "div", 1);
             i0.ɵɵelementStart(2, "div", 2);
-            i0.ɵɵrepeaterCreate(3, RecommendationActionStepsModalComponent_For_4_Template, 13, 11, "div", 3, _forTrack0$l);
+            i0.ɵɵrepeaterCreate(3, RecommendationActionStepsModalComponent_For_4_Template, 13, 11, "div", 3, _forTrack0$m);
             i0.ɵɵelementEnd();
             i0.ɵɵconditionalCreate(5, RecommendationActionStepsModalComponent_Conditional_5_Template, 4, 5, "div", 4);
             i0.ɵɵelementEnd();
@@ -46386,7 +46384,7 @@ const _c2$8 = () => [1, 2, 3, 4, 5, 6];
 const _c3$5 = () => [1, 2, 3];
 const _c4$3 = () => [1, 2, 3, 4];
 const _c5$2 = () => [1, 2];
-const _forTrack0$k = ($index, $item) => $item.value;
+const _forTrack0$l = ($index, $item) => $item.value;
 function SymphiqFunnelAnalysisDashboardComponent_Conditional_13_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "div", 11);
 } }
@@ -46425,7 +46423,7 @@ function SymphiqFunnelAnalysisDashboardComponent_Conditional_25_Template(rf, ctx
     i0.ɵɵlistener("click", function SymphiqFunnelAnalysisDashboardComponent_Conditional_25_Template_div_click_3_listener($event) { i0.ɵɵrestoreView(_r4); return i0.ɵɵresetView($event.stopPropagation()); })("mousedown", function SymphiqFunnelAnalysisDashboardComponent_Conditional_25_Template_div_mousedown_3_listener($event) { i0.ɵɵrestoreView(_r4); return i0.ɵɵresetView($event.stopPropagation()); })("pointerdown", function SymphiqFunnelAnalysisDashboardComponent_Conditional_25_Template_div_pointerdown_3_listener($event) { i0.ɵɵrestoreView(_r4); return i0.ɵɵresetView($event.stopPropagation()); });
     i0.ɵɵelementStart(4, "select", 48);
     i0.ɵɵlistener("ngModelChange", function SymphiqFunnelAnalysisDashboardComponent_Conditional_25_Template_select_ngModelChange_4_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.changeSectionFilter($event)); });
-    i0.ɵɵrepeaterCreate(5, SymphiqFunnelAnalysisDashboardComponent_Conditional_25_For_6_Template, 2, 2, "option", 49, _forTrack0$k);
+    i0.ɵɵrepeaterCreate(5, SymphiqFunnelAnalysisDashboardComponent_Conditional_25_For_6_Template, 2, 2, "option", 49, _forTrack0$l);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -46505,7 +46503,7 @@ function SymphiqFunnelAnalysisDashboardComponent_Conditional_46_Template(rf, ctx
     i0.ɵɵlistener("click", function SymphiqFunnelAnalysisDashboardComponent_Conditional_46_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r7); return i0.ɵɵresetView($event.stopPropagation()); })("mousedown", function SymphiqFunnelAnalysisDashboardComponent_Conditional_46_Template_div_mousedown_0_listener($event) { i0.ɵɵrestoreView(_r7); return i0.ɵɵresetView($event.stopPropagation()); })("pointerdown", function SymphiqFunnelAnalysisDashboardComponent_Conditional_46_Template_div_pointerdown_0_listener($event) { i0.ɵɵrestoreView(_r7); return i0.ɵɵresetView($event.stopPropagation()); });
     i0.ɵɵelementStart(1, "select", 54);
     i0.ɵɵlistener("ngModelChange", function SymphiqFunnelAnalysisDashboardComponent_Conditional_46_Template_select_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.changeSectionFilter($event)); });
-    i0.ɵɵrepeaterCreate(2, SymphiqFunnelAnalysisDashboardComponent_Conditional_46_For_3_Template, 2, 2, "option", 49, _forTrack0$k);
+    i0.ɵɵrepeaterCreate(2, SymphiqFunnelAnalysisDashboardComponent_Conditional_46_For_3_Template, 2, 2, "option", 49, _forTrack0$l);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -47251,7 +47249,7 @@ function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_4_Te
     i0.ɵɵconditionalCreate(14, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_4_Conditional_14_Template, 2, 0, "div", 122);
     i0.ɵɵelementStart(15, "select", 123);
     i0.ɵɵlistener("ngModelChange", function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_4_Template_select_ngModelChange_15_listener($event) { i0.ɵɵrestoreView(_r26); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.changeCategoryFilter($event)); });
-    i0.ɵɵrepeaterCreate(16, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_4_For_17_Template, 2, 1, null, null, _forTrack0$k);
+    i0.ɵɵrepeaterCreate(16, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_4_For_17_Template, 2, 1, null, null, _forTrack0$l);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(18, "button", 124);
     i0.ɵɵlistener("click", function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_4_Template_button_click_18_listener() { i0.ɵɵrestoreView(_r26); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.toggleSortOrder()); });
@@ -47265,7 +47263,7 @@ function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_4_Te
     i0.ɵɵtext(23, "Sort");
     i0.ɵɵelementEnd()()()();
     i0.ɵɵelementStart(24, "div", 127)(25, "div", 128);
-    i0.ɵɵrepeaterCreate(26, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_4_For_27_Template, 1, 1, null, null, _forTrack0$k);
+    i0.ɵɵrepeaterCreate(26, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_4_For_27_Template, 1, 1, null, null, _forTrack0$l);
     i0.ɵɵelementEnd()()();
     i0.ɵɵconditionalCreate(28, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_4_Conditional_28_Template, 3, 1, "div", 129)(29, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_4_Conditional_29_Template, 4, 5, "div", 130);
     i0.ɵɵelementEnd()();
@@ -47442,7 +47440,7 @@ function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_5_Te
     i0.ɵɵconditionalCreate(12, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_5_Conditional_12_Template, 2, 0, "div", 122);
     i0.ɵɵelementStart(13, "select", 164);
     i0.ɵɵlistener("ngModelChange", function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_5_Template_select_ngModelChange_13_listener($event) { i0.ɵɵrestoreView(_r36); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.changeBreakdownFilter($event)); });
-    i0.ɵɵrepeaterCreate(14, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_5_For_15_Template, 2, 1, null, null, _forTrack0$k);
+    i0.ɵɵrepeaterCreate(14, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_5_For_15_Template, 2, 1, null, null, _forTrack0$l);
     i0.ɵɵelementEnd()()();
     i0.ɵɵconditionalCreate(16, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_5_Conditional_16_Template, 3, 1, "div", 95)(17, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_5_Conditional_17_Template, 4, 5, "div", 165);
     i0.ɵɵelementEnd()();
@@ -47553,7 +47551,7 @@ function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_6_Te
     i0.ɵɵconditionalCreate(13, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_6_Conditional_13_Template, 2, 0, "div", 122);
     i0.ɵɵelementStart(14, "select", 123);
     i0.ɵɵlistener("ngModelChange", function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_6_Template_select_ngModelChange_14_listener($event) { i0.ɵɵrestoreView(_r40); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.changeCompetitiveFilter($event)); });
-    i0.ɵɵrepeaterCreate(15, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_6_For_16_Template, 2, 1, null, null, _forTrack0$k);
+    i0.ɵɵrepeaterCreate(15, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_6_For_16_Template, 2, 1, null, null, _forTrack0$l);
     i0.ɵɵelementEnd()()();
     i0.ɵɵconditionalCreate(17, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_6_Conditional_17_Template, 6, 5, "div", 95)(18, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_6_Conditional_18_Template, 1, 6, "symphiq-competitive-intelligence-view", 92);
     i0.ɵɵelementEnd()();
@@ -50119,7 +50117,7 @@ function getTrendClasses(trendPercent, viewMode) {
     }
 }
 
-const _forTrack0$j = ($index, $item) => $item.performanceItemId;
+const _forTrack0$k = ($index, $item) => $item.performanceItemId;
 function SymphiqFunnelAnalysisPreviewComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 17)(1, "p", 18);
     i0.ɵɵtext(2);
@@ -50738,7 +50736,7 @@ class SymphiqFunnelAnalysisPreviewComponent {
             i0.ɵɵconditionalCreate(12, SymphiqFunnelAnalysisPreviewComponent_Conditional_12_Template, 3, 7, "div", 9);
             i0.ɵɵconditionalCreate(13, SymphiqFunnelAnalysisPreviewComponent_Conditional_13_Template, 18, 23, "div", 10);
             i0.ɵɵelementStart(14, "div", 11);
-            i0.ɵɵrepeaterCreate(15, SymphiqFunnelAnalysisPreviewComponent_For_16_Template, 10, 17, "div", 12, _forTrack0$j);
+            i0.ɵɵrepeaterCreate(15, SymphiqFunnelAnalysisPreviewComponent_For_16_Template, 10, 17, "div", 12, _forTrack0$k);
             i0.ɵɵelementEnd();
             i0.ɵɵconditionalCreate(17, SymphiqFunnelAnalysisPreviewComponent_Conditional_17_Template, 9, 11, "div", 9);
             i0.ɵɵconditionalCreate(18, SymphiqFunnelAnalysisPreviewComponent_Conditional_18_Template, 14, 19, "div", 9);
@@ -50981,7 +50979,7 @@ class SymphiqFunnelAnalysisPreviewComponent {
     }], () => [], { analysisInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "funnelAnalysis", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], scrollElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollElement", required: false }] }], onViewAnalysis: [{ type: i0.Output, args: ["onViewAnalysis"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqFunnelAnalysisPreviewComponent, { className: "SymphiqFunnelAnalysisPreviewComponent", filePath: "lib/components/funnel-analysis-preview/symphiq-funnel-analysis-preview.component.ts", lineNumber: 228 }); })();
 
-const _forTrack0$i = ($index, $item) => $item.id;
+const _forTrack0$j = ($index, $item) => $item.id;
 function SymphiqWelcomeDashboardComponent_For_65_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 31)(1, "div", 36)(2, "div", 37)(3, "span", 38);
     i0.ɵɵtext(4);
@@ -51276,7 +51274,7 @@ class SymphiqWelcomeDashboardComponent {
             i0.ɵɵtext(62, " Your Onboarding Journey ");
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(63, "div", 30);
-            i0.ɵɵrepeaterCreate(64, SymphiqWelcomeDashboardComponent_For_65_Template, 9, 3, "div", 31, _forTrack0$i);
+            i0.ɵɵrepeaterCreate(64, SymphiqWelcomeDashboardComponent_For_65_Template, 9, 3, "div", 31, _forTrack0$j);
             i0.ɵɵelementEnd()()();
             i0.ɵɵelementStart(66, "div", 32);
             i0.ɵɵnamespaceSVG();
@@ -51517,212 +51515,981 @@ class SymphiqWelcomeDashboardComponent {
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqWelcomeDashboardComponent, { className: "SymphiqWelcomeDashboardComponent", filePath: "lib/components/welcome-dashboard/symphiq-welcome-dashboard.component.ts", lineNumber: 201 }); })();
 
-const _c0$q = ["shopNameInput"];
-function SymphiqCreateAccountDashboardComponent_Conditional_23_Conditional_27_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtext(0, " Shopify ");
-} }
-function SymphiqCreateAccountDashboardComponent_Conditional_23_Conditional_28_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtext(0);
+function FocusAreaQuestionComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 6);
+    i0.ɵɵtext(1, " Not answered yet ");
+    i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.accountData().otherPlatformName || "Other", " ");
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngClass", ctx_r0.notAnsweredBadgeClasses());
 } }
-function SymphiqCreateAccountDashboardComponent_Conditional_23_Template(rf, ctx) { if (rf & 1) {
-    const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 14)(1, "div", 16)(2, "div", 17)(3, "div")(4, "h2", 18);
-    i0.ɵɵtext(5, " Account Details ");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "p", 1);
-    i0.ɵɵtext(7, " Your shop information ");
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "button", 19);
-    i0.ɵɵlistener("click", function SymphiqCreateAccountDashboardComponent_Conditional_23_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.enableEditMode()); });
-    i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(9, "svg", 20);
-    i0.ɵɵelement(10, "path", 21);
-    i0.ɵɵelementEnd();
-    i0.ɵɵtext(11, " Edit ");
-    i0.ɵɵelementEnd()();
-    i0.ɵɵnamespaceHTML();
-    i0.ɵɵelementStart(12, "div", 22)(13, "div")(14, "label", 23);
-    i0.ɵɵtext(15, " Shop Name ");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(16, "p", 24);
-    i0.ɵɵtext(17);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(18, "div")(19, "label", 23);
-    i0.ɵɵtext(20, " Shop URL ");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(21, "a", 25);
-    i0.ɵɵtext(22);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(23, "div")(24, "label", 23);
-    i0.ɵɵtext(25, " Shop Platform ");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(26, "p", 24);
-    i0.ɵɵconditionalCreate(27, SymphiqCreateAccountDashboardComponent_Conditional_23_Conditional_27_Template, 1, 0)(28, SymphiqCreateAccountDashboardComponent_Conditional_23_Conditional_28_Template, 1, 1);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(29, "div")(30, "label", 23);
-    i0.ɵɵtext(31, " Company Name ");
+function FocusAreaQuestionComponent_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "div", 12);
+} }
+function FocusAreaQuestionComponent_Conditional_24_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "div", 12);
+} }
+function FocusAreaQuestionComponent_Conditional_34_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "div", 12);
+} }
+function FocusAreaQuestionComponent_Conditional_47_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 25);
+    i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(32, "p", 24);
-    i0.ɵɵtext(33);
-    i0.ɵɵelementEnd()()()()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngClass", ctx_r1.containerClasses());
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("ngClass", ctx_r1.contentClasses());
-    i0.ɵɵadvance(3);
-    i0.ɵɵproperty("ngClass", ctx_r1.sectionTitleClasses());
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngClass", ctx_r1.sectionDescriptionClasses());
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngClass", ctx_r1.editButtonClasses());
-    i0.ɵɵadvance(6);
-    i0.ɵɵproperty("ngClass", ctx_r1.viewLabelClasses());
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngClass", ctx_r1.viewValueClasses());
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.accountData().shopName, " ");
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngClass", ctx_r1.viewLabelClasses());
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("href", ctx_r1.accountData().shopUrl, i0.ɵɵsanitizeUrl)("ngClass", ctx_r1.viewLinkClasses());
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.accountData().shopUrl, " ");
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngClass", ctx_r1.viewLabelClasses());
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngClass", ctx_r1.viewValueClasses());
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.accountData().shopPlatform === ctx_r1.ShopPlatformEnum.SHOPIFY ? 27 : 28);
-    i0.ɵɵadvance(3);
-    i0.ɵɵproperty("ngClass", ctx_r1.viewLabelClasses());
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngClass", ctx_r1.viewValueClasses());
+    const tool_r2 = ctx.$implicit;
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("ngClass", ctx_r0.toolChipClasses());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.accountData().companyName, " ");
+    i0.ɵɵtextInterpolate1(" ", tool_r2, " ");
 } }
-function SymphiqCreateAccountDashboardComponent_Conditional_24_Conditional_15_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 31);
-    i0.ɵɵtext(1, " Shop name is required ");
+function FocusAreaQuestionComponent_Conditional_47_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 21);
+    i0.ɵɵrepeaterCreate(1, FocusAreaQuestionComponent_Conditional_47_For_2_Template, 2, 2, "span", 25, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ngClass", ctx_r1.errorClasses());
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r0.selectedTools());
 } }
-function SymphiqCreateAccountDashboardComponent_Conditional_24_Conditional_25_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 31);
-    i0.ɵɵtext(1, " Shop URL is required ");
+function FocusAreaQuestionComponent_Conditional_48_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 22);
+    i0.ɵɵtext(1, " None specified - Click to select ");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ngClass", ctx_r1.errorClasses());
-} }
-function SymphiqCreateAccountDashboardComponent_Conditional_24_Conditional_36_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "div", 41);
-} }
-function SymphiqCreateAccountDashboardComponent_Conditional_24_Conditional_44_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "div", 41);
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngClass", ctx_r0.placeholderClasses());
 } }
-function SymphiqCreateAccountDashboardComponent_Conditional_24_Conditional_48_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 31);
-    i0.ɵɵtext(1, " Platform name is required ");
+class FocusAreaQuestionComponent {
+    constructor() {
+        this.focusAreaDomain = input.required(...(ngDevMode ? [{ debugName: "focusAreaDomain" }] : []));
+        this.selectedStatus = input(null, ...(ngDevMode ? [{ debugName: "selectedStatus" }] : []));
+        this.selectedTools = input(null, ...(ngDevMode ? [{ debugName: "selectedTools" }] : []));
+        this.viewMode = input(ViewModeEnum.LIGHT, ...(ngDevMode ? [{ debugName: "viewMode" }] : []));
+        this.title = input.required(...(ngDevMode ? [{ debugName: "title" }] : []));
+        this.description = input.required(...(ngDevMode ? [{ debugName: "description" }] : []));
+        this.isAnswered = computed(() => this.selectedStatus() !== null, ...(ngDevMode ? [{ debugName: "isAnswered" }] : []));
+        this.statusChange = output();
+        this.toolsClick = output();
+        this.FocusAreaDetailStatusEnum = FocusAreaDetailStatusEnum;
+    }
+    isLightMode() {
+        return this.viewMode() === ViewModeEnum.LIGHT;
+    }
+    onStatusChange(status) {
+        this.statusChange.emit(status);
+    }
+    onToolsClick() {
+        this.toolsClick.emit();
+    }
+    containerClasses() {
+        return this.isLightMode()
+            ? 'bg-white border-slate-200'
+            : 'bg-slate-800 border-slate-700';
+    }
+    contentClasses() {
+        return this.isLightMode()
+            ? 'bg-gradient-to-br from-white to-slate-50'
+            : 'bg-gradient-to-br from-slate-800 to-slate-900';
+    }
+    titleClasses() {
+        return this.isLightMode()
+            ? 'text-slate-900'
+            : 'text-white';
+    }
+    descriptionClasses() {
+        return this.isLightMode()
+            ? 'text-slate-600'
+            : 'text-slate-400';
+    }
+    notAnsweredBadgeClasses() {
+        return this.isLightMode()
+            ? 'bg-orange-100 text-orange-700 border border-orange-200'
+            : 'bg-orange-900/30 text-orange-400 border border-orange-700';
+    }
+    radioOptionClasses(status) {
+        const isSelected = this.selectedStatus() === status;
+        const base = 'transition-all duration-200';
+        if (status === FocusAreaDetailStatusEnum.ENGAGED) {
+            return this.isLightMode()
+                ? isSelected ? `${base} opacity-100` : `${base} opacity-100 hover:opacity-100`
+                : isSelected ? `${base} opacity-100` : `${base} opacity-100 hover:opacity-100`;
+        }
+        if (status === FocusAreaDetailStatusEnum.NOT_ENGAGED_BUT_WANT_TO) {
+            return this.isLightMode()
+                ? isSelected ? `${base} opacity-100` : `${base} opacity-100 hover:opacity-100`
+                : isSelected ? `${base} opacity-100` : `${base} opacity-100 hover:opacity-100`;
+        }
+        return this.isLightMode()
+            ? isSelected ? `${base} opacity-100` : `${base} opacity-100 hover:opacity-100`
+            : isSelected ? `${base} opacity-100` : `${base} opacity-100 hover:opacity-100`;
+    }
+    radioIndicatorClasses(status) {
+        const isSelected = this.selectedStatus() === status;
+        if (status === FocusAreaDetailStatusEnum.ENGAGED) {
+            return this.isLightMode()
+                ? isSelected ? 'border-emerald-500 text-emerald-600' : 'border-slate-300 text-slate-300'
+                : isSelected ? 'border-emerald-400 text-emerald-400' : 'border-slate-600 text-slate-600';
+        }
+        if (status === FocusAreaDetailStatusEnum.NOT_ENGAGED_BUT_WANT_TO) {
+            return this.isLightMode()
+                ? isSelected ? 'border-blue-500 text-blue-600' : 'border-slate-300 text-slate-300'
+                : isSelected ? 'border-blue-400 text-blue-400' : 'border-slate-600 text-slate-600';
+        }
+        return this.isLightMode()
+            ? isSelected ? 'border-rose-500 text-rose-600' : 'border-slate-300 text-slate-300'
+            : isSelected ? 'border-rose-400 text-rose-400' : 'border-slate-600 text-slate-600';
+    }
+    radioLabelClasses(status) {
+        const isSelected = this.selectedStatus() === status;
+        if (status === FocusAreaDetailStatusEnum.ENGAGED) {
+            return this.isLightMode()
+                ? isSelected ? 'text-emerald-700' : 'text-slate-900'
+                : isSelected ? 'text-emerald-300' : 'text-white';
+        }
+        if (status === FocusAreaDetailStatusEnum.NOT_ENGAGED_BUT_WANT_TO) {
+            return this.isLightMode()
+                ? isSelected ? 'text-blue-700' : 'text-slate-900'
+                : isSelected ? 'text-blue-300' : 'text-white';
+        }
+        return this.isLightMode()
+            ? isSelected ? 'text-rose-700' : 'text-slate-900'
+            : isSelected ? 'text-rose-300' : 'text-white';
+    }
+    radioDescriptionClasses() {
+        return this.isLightMode()
+            ? 'text-slate-600'
+            : 'text-slate-400';
+    }
+    toolsLabelClasses() {
+        return this.isLightMode()
+            ? 'text-slate-700'
+            : 'text-slate-300';
+    }
+    toolsButtonClasses() {
+        return this.isLightMode()
+            ? 'bg-white border-slate-300 hover:border-blue-400 hover:bg-blue-50 text-slate-900'
+            : 'bg-slate-700 border-slate-600 hover:border-blue-400 hover:bg-slate-600 text-white';
+    }
+    toolChipClasses() {
+        return this.isLightMode()
+            ? 'bg-blue-100 text-blue-700 border border-blue-200'
+            : 'bg-blue-900/30 text-blue-300 border border-blue-700';
+    }
+    placeholderClasses() {
+        return this.isLightMode()
+            ? 'text-slate-500'
+            : 'text-slate-400';
+    }
+    editIconClasses() {
+        return this.isLightMode()
+            ? 'text-slate-400'
+            : 'text-slate-500';
+    }
+    static { this.ɵfac = function FocusAreaQuestionComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || FocusAreaQuestionComponent)(); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FocusAreaQuestionComponent, selectors: [["symphiq-focus-area-question"]], inputs: { focusAreaDomain: [1, "focusAreaDomain"], selectedStatus: [1, "selectedStatus"], selectedTools: [1, "selectedTools"], viewMode: [1, "viewMode"], title: [1, "title"], description: [1, "description"] }, outputs: { statusChange: "statusChange", toolsClick: "toolsClick" }, decls: 51, vars: 31, consts: [[1, "rounded-xl", "border-2", "overflow-hidden", 3, "ngClass"], [1, "p-6", 3, "ngClass"], [1, "flex", "items-start", "justify-between", "mb-4"], [1, "flex-1"], [1, "text-lg", "font-bold", "mb-2", 3, "ngClass"], [1, "text-sm", "leading-relaxed", 3, "ngClass"], [1, "ml-3", "px-3", "py-1", "rounded-full", "text-xs", "font-semibold", "whitespace-nowrap", "flex-shrink-0", 3, "ngClass"], [1, "space-y-3", "mt-5"], [1, "cursor-pointer", "block", 3, "ngClass"], ["type", "radio", 1, "sr-only", 3, "change", "checked"], [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, "font-semibold", "text-sm", 3, "ngClass"], [1, "text-xs", "mt-0.5", 3, "ngClass"], [1, "grid", "transition-all", "duration-300", "ease-in-out"], [1, "overflow-hidden"], [1, "mt-4"], [1, "block", "text-sm", "font-semibold", "mb-2", 3, "ngClass"], ["type", "button", 1, "w-full", "px-4", "py-3", "rounded-lg", "border-2", "transition-all", "duration-200", "hover:scale-[1.01]", "flex", "items-center", "justify-between", "cursor-pointer", 3, "click", "ngClass"], [1, "flex", "items-center", "gap-2", "flex-1", "min-w-0"], [1, "flex", "flex-wrap", "gap-1.5"], [1, "text-sm", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4", "flex-shrink-0", "ml-2", 3, "ngClass"], ["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, "px-2", "py-1", "rounded", "text-xs", "font-medium", 3, "ngClass"]], template: function FocusAreaQuestionComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "div", 3)(4, "h3", 4);
+            i0.ɵɵtext(5);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(6, "p", 5);
+            i0.ɵɵtext(7);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵconditionalCreate(8, FocusAreaQuestionComponent_Conditional_8_Template, 2, 1, "span", 6);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(9, "div", 7)(10, "label", 8)(11, "input", 9);
+            i0.ɵɵlistener("change", function FocusAreaQuestionComponent_Template_input_change_11_listener() { return ctx.onStatusChange(ctx.FocusAreaDetailStatusEnum.ENGAGED); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(12, "div", 10)(13, "div", 11);
+            i0.ɵɵconditionalCreate(14, FocusAreaQuestionComponent_Conditional_14_Template, 1, 0, "div", 12);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(15, "div", 3)(16, "div", 13);
+            i0.ɵɵtext(17, " Engaged ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(18, "div", 14);
+            i0.ɵɵtext(19, " We are currently engaged in this area ");
+            i0.ɵɵelementEnd()()()();
+            i0.ɵɵelementStart(20, "label", 8)(21, "input", 9);
+            i0.ɵɵlistener("change", function FocusAreaQuestionComponent_Template_input_change_21_listener() { return ctx.onStatusChange(ctx.FocusAreaDetailStatusEnum.NOT_ENGAGED_BUT_WANT_TO); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(22, "div", 10)(23, "div", 11);
+            i0.ɵɵconditionalCreate(24, FocusAreaQuestionComponent_Conditional_24_Template, 1, 0, "div", 12);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(25, "div", 3)(26, "div", 13);
+            i0.ɵɵtext(27, " Interested ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(28, "div", 14);
+            i0.ɵɵtext(29, " We are interested in this area but not engaged with it yet ");
+            i0.ɵɵelementEnd()()()();
+            i0.ɵɵelementStart(30, "label", 8)(31, "input", 9);
+            i0.ɵɵlistener("change", function FocusAreaQuestionComponent_Template_input_change_31_listener() { return ctx.onStatusChange(ctx.FocusAreaDetailStatusEnum.NOT_ENGAGED_AND_NO_INTEREST); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(32, "div", 10)(33, "div", 11);
+            i0.ɵɵconditionalCreate(34, FocusAreaQuestionComponent_Conditional_34_Template, 1, 0, "div", 12);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(35, "div", 3)(36, "div", 13);
+            i0.ɵɵtext(37, " Not interested ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(38, "div", 14);
+            i0.ɵɵtext(39, " We have no interest in this area ");
+            i0.ɵɵelementEnd()()()()();
+            i0.ɵɵelementStart(40, "div", 15)(41, "div", 16)(42, "div", 17)(43, "label", 18);
+            i0.ɵɵtext(44, " Marketing automation tools used ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(45, "button", 19);
+            i0.ɵɵlistener("click", function FocusAreaQuestionComponent_Template_button_click_45_listener() { return ctx.onToolsClick(); });
+            i0.ɵɵelementStart(46, "div", 20);
+            i0.ɵɵconditionalCreate(47, FocusAreaQuestionComponent_Conditional_47_Template, 3, 0, "div", 21)(48, FocusAreaQuestionComponent_Conditional_48_Template, 2, 1, "span", 22);
+            i0.ɵɵelementEnd();
+            i0.ɵɵnamespaceSVG();
+            i0.ɵɵelementStart(49, "svg", 23);
+            i0.ɵɵelement(50, "path", 24);
+            i0.ɵɵelementEnd()()()()()()();
+        } if (rf & 2) {
+            i0.ɵɵproperty("ngClass", ctx.containerClasses());
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngClass", ctx.contentClasses());
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("ngClass", ctx.titleClasses());
+            i0.ɵɵadvance();
+            i0.ɵɵtextInterpolate1(" ", ctx.title(), " ");
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngClass", ctx.descriptionClasses());
+            i0.ɵɵadvance();
+            i0.ɵɵtextInterpolate1(" ", ctx.description(), " ");
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(!ctx.isAnswered() ? 8 : -1);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngClass", ctx.radioOptionClasses(ctx.FocusAreaDetailStatusEnum.ENGAGED));
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("checked", ctx.selectedStatus() === ctx.FocusAreaDetailStatusEnum.ENGAGED);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngClass", ctx.radioIndicatorClasses(ctx.FocusAreaDetailStatusEnum.ENGAGED));
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.selectedStatus() === ctx.FocusAreaDetailStatusEnum.ENGAGED ? 14 : -1);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngClass", ctx.radioLabelClasses(ctx.FocusAreaDetailStatusEnum.ENGAGED));
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngClass", ctx.radioDescriptionClasses());
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngClass", ctx.radioOptionClasses(ctx.FocusAreaDetailStatusEnum.NOT_ENGAGED_BUT_WANT_TO));
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("checked", ctx.selectedStatus() === ctx.FocusAreaDetailStatusEnum.NOT_ENGAGED_BUT_WANT_TO);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngClass", ctx.radioIndicatorClasses(ctx.FocusAreaDetailStatusEnum.NOT_ENGAGED_BUT_WANT_TO));
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.selectedStatus() === ctx.FocusAreaDetailStatusEnum.NOT_ENGAGED_BUT_WANT_TO ? 24 : -1);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngClass", ctx.radioLabelClasses(ctx.FocusAreaDetailStatusEnum.NOT_ENGAGED_BUT_WANT_TO));
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngClass", ctx.radioDescriptionClasses());
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngClass", ctx.radioOptionClasses(ctx.FocusAreaDetailStatusEnum.NOT_ENGAGED_AND_NO_INTEREST));
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("checked", ctx.selectedStatus() === ctx.FocusAreaDetailStatusEnum.NOT_ENGAGED_AND_NO_INTEREST);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngClass", ctx.radioIndicatorClasses(ctx.FocusAreaDetailStatusEnum.NOT_ENGAGED_AND_NO_INTEREST));
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.selectedStatus() === ctx.FocusAreaDetailStatusEnum.NOT_ENGAGED_AND_NO_INTEREST ? 34 : -1);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngClass", ctx.radioLabelClasses(ctx.FocusAreaDetailStatusEnum.NOT_ENGAGED_AND_NO_INTEREST));
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngClass", ctx.radioDescriptionClasses());
+            i0.ɵɵadvance(2);
+            i0.ɵɵstyleProp("grid-template-rows", ctx.selectedStatus() === ctx.FocusAreaDetailStatusEnum.ENGAGED ? "1fr" : "0fr");
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("ngClass", ctx.toolsLabelClasses());
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngClass", ctx.toolsButtonClasses());
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.selectedTools() && ctx.selectedTools().length > 0 ? 47 : 48);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngClass", ctx.editIconClasses());
+        } }, dependencies: [CommonModule, i1$1.NgClass], encapsulation: 2, changeDetection: 0 }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FocusAreaQuestionComponent, [{
+        type: Component,
+        args: [{ selector: 'symphiq-focus-area-question', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div [ngClass]="containerClasses()" class="rounded-xl border-2 overflow-hidden">
+      <div [ngClass]="contentClasses()" class="p-6">
+        <div class="flex items-start justify-between mb-4">
+          <div class="flex-1">
+            <h3 [ngClass]="titleClasses()" class="text-lg font-bold mb-2">
+              {{ title() }}
+            </h3>
+            <p [ngClass]="descriptionClasses()" class="text-sm leading-relaxed">
+              {{ description() }}
+            </p>
+          </div>
+          @if (!isAnswered()) {
+            <span [ngClass]="notAnsweredBadgeClasses()" class="ml-3 px-3 py-1 rounded-full text-xs font-semibold whitespace-nowrap flex-shrink-0">
+              Not answered yet
+            </span>
+          }
+        </div>
+
+        <div class="space-y-3 mt-5">
+          <label
+            [ngClass]="radioOptionClasses(FocusAreaDetailStatusEnum.ENGAGED)"
+            class="cursor-pointer block">
+            <input
+              type="radio"
+              [checked]="selectedStatus() === FocusAreaDetailStatusEnum.ENGAGED"
+              (change)="onStatusChange(FocusAreaDetailStatusEnum.ENGAGED)"
+              class="sr-only"
+            />
+            <div class="flex items-center gap-3 p-4 rounded-lg border-2 transition-all duration-200">
+              <div [ngClass]="radioIndicatorClasses(FocusAreaDetailStatusEnum.ENGAGED)" class="w-5 h-5 rounded-full border-2 flex items-center justify-center flex-shrink-0">
+                @if (selectedStatus() === FocusAreaDetailStatusEnum.ENGAGED) {
+                  <div class="w-3 h-3 rounded-full bg-current"></div>
+                }
+              </div>
+              <div class="flex-1">
+                <div [ngClass]="radioLabelClasses(FocusAreaDetailStatusEnum.ENGAGED)" class="font-semibold text-sm">
+                  Engaged
+                </div>
+                <div [ngClass]="radioDescriptionClasses()" class="text-xs mt-0.5">
+                  We are currently engaged in this area
+                </div>
+              </div>
+            </div>
+          </label>
+
+          <label
+            [ngClass]="radioOptionClasses(FocusAreaDetailStatusEnum.NOT_ENGAGED_BUT_WANT_TO)"
+            class="cursor-pointer block">
+            <input
+              type="radio"
+              [checked]="selectedStatus() === FocusAreaDetailStatusEnum.NOT_ENGAGED_BUT_WANT_TO"
+              (change)="onStatusChange(FocusAreaDetailStatusEnum.NOT_ENGAGED_BUT_WANT_TO)"
+              class="sr-only"
+            />
+            <div class="flex items-center gap-3 p-4 rounded-lg border-2 transition-all duration-200">
+              <div [ngClass]="radioIndicatorClasses(FocusAreaDetailStatusEnum.NOT_ENGAGED_BUT_WANT_TO)" class="w-5 h-5 rounded-full border-2 flex items-center justify-center flex-shrink-0">
+                @if (selectedStatus() === FocusAreaDetailStatusEnum.NOT_ENGAGED_BUT_WANT_TO) {
+                  <div class="w-3 h-3 rounded-full bg-current"></div>
+                }
+              </div>
+              <div class="flex-1">
+                <div [ngClass]="radioLabelClasses(FocusAreaDetailStatusEnum.NOT_ENGAGED_BUT_WANT_TO)" class="font-semibold text-sm">
+                  Interested
+                </div>
+                <div [ngClass]="radioDescriptionClasses()" class="text-xs mt-0.5">
+                  We are interested in this area but not engaged with it yet
+                </div>
+              </div>
+            </div>
+          </label>
+
+          <label
+            [ngClass]="radioOptionClasses(FocusAreaDetailStatusEnum.NOT_ENGAGED_AND_NO_INTEREST)"
+            class="cursor-pointer block">
+            <input
+              type="radio"
+              [checked]="selectedStatus() === FocusAreaDetailStatusEnum.NOT_ENGAGED_AND_NO_INTEREST"
+              (change)="onStatusChange(FocusAreaDetailStatusEnum.NOT_ENGAGED_AND_NO_INTEREST)"
+              class="sr-only"
+            />
+            <div class="flex items-center gap-3 p-4 rounded-lg border-2 transition-all duration-200">
+              <div [ngClass]="radioIndicatorClasses(FocusAreaDetailStatusEnum.NOT_ENGAGED_AND_NO_INTEREST)" class="w-5 h-5 rounded-full border-2 flex items-center justify-center flex-shrink-0">
+                @if (selectedStatus() === FocusAreaDetailStatusEnum.NOT_ENGAGED_AND_NO_INTEREST) {
+                  <div class="w-3 h-3 rounded-full bg-current"></div>
+                }
+              </div>
+              <div class="flex-1">
+                <div [ngClass]="radioLabelClasses(FocusAreaDetailStatusEnum.NOT_ENGAGED_AND_NO_INTEREST)" class="font-semibold text-sm">
+                  Not interested
+                </div>
+                <div [ngClass]="radioDescriptionClasses()" class="text-xs mt-0.5">
+                  We have no interest in this area
+                </div>
+              </div>
+            </div>
+          </label>
+        </div>
+
+        <!-- Tools Field with Grid Animation -->
+        <div
+          class="grid transition-all duration-300 ease-in-out"
+          [style.grid-template-rows]="selectedStatus() === FocusAreaDetailStatusEnum.ENGAGED ? '1fr' : '0fr'">
+          <div class="overflow-hidden">
+            <div class="mt-4">
+              <label [ngClass]="toolsLabelClasses()" class="block text-sm font-semibold mb-2">
+                Marketing automation tools used
+              </label>
+              <button
+                type="button"
+                (click)="onToolsClick()"
+                [ngClass]="toolsButtonClasses()"
+                class="w-full px-4 py-3 rounded-lg border-2 transition-all duration-200 hover:scale-[1.01] flex items-center justify-between cursor-pointer">
+                <div class="flex items-center gap-2 flex-1 min-w-0">
+                  @if (selectedTools() && selectedTools()!.length > 0) {
+                    <div class="flex flex-wrap gap-1.5">
+                      @for (tool of selectedTools(); track tool) {
+                        <span [ngClass]="toolChipClasses()" class="px-2 py-1 rounded text-xs font-medium">
+                          {{ tool }}
+                        </span>
+                      }
+                    </div>
+                  } @else {
+                    <span [ngClass]="placeholderClasses()" class="text-sm">
+                      None specified - Click to select
+                    </span>
+                  }
+                </div>
+                <svg [ngClass]="editIconClasses()" class="w-4 h-4 flex-shrink-0 ml-2" 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>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  ` }]
+    }], null, { focusAreaDomain: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusAreaDomain", required: true }] }], selectedStatus: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedStatus", required: false }] }], selectedTools: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedTools", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: true }] }], statusChange: [{ type: i0.Output, args: ["statusChange"] }], toolsClick: [{ type: i0.Output, args: ["toolsClick"] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FocusAreaQuestionComponent, { className: "FocusAreaQuestionComponent", filePath: "lib/components/create-account-dashboard/focus-area-question.component.ts", lineNumber: 156 }); })();
+
+function FocusAreaToolsModalComponent_Conditional_0_Conditional_10_For_5_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "label", 17)(1, "input", 18);
+    i0.ɵɵlistener("change", function FocusAreaToolsModalComponent_Conditional_0_Conditional_10_For_5_Template_input_change_1_listener($event) { const tool_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onToolToggle(tool_r4, $event)); });
     i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("ngClass", ctx_r1.errorClasses());
-} }
-function SymphiqCreateAccountDashboardComponent_Conditional_24_Conditional_48_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div")(1, "label", 28);
-    i0.ɵɵtext(2, " Platform Name ");
-    i0.ɵɵelementStart(3, "span", 29);
-    i0.ɵɵtext(4, "*");
+    i0.ɵɵelementStart(2, "span", 19);
+    i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelement(5, "input", 49);
-    i0.ɵɵconditionalCreate(6, SymphiqCreateAccountDashboardComponent_Conditional_24_Conditional_48_Conditional_6_Template, 2, 1, "p", 31);
-    i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
+    const tool_r4 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngClass", ctx_r1.labelClasses());
-    i0.ɵɵadvance(4);
-    i0.ɵɵproperty("ngClass", ctx_r1.inputClasses("otherPlatformName"));
+    i0.ɵɵproperty("checked", ctx_r1.isToolSelected(tool_r4))("ngClass", ctx_r1.checkboxClasses());
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.isFieldInvalid("otherPlatformName") ? 6 : -1);
+    i0.ɵɵproperty("ngClass", ctx_r1.checkboxLabelClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", tool_r4, " ");
 } }
-function SymphiqCreateAccountDashboardComponent_Conditional_24_Conditional_60_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 31);
-    i0.ɵɵtext(1, " Company name is required ");
+function FocusAreaToolsModalComponent_Conditional_0_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 10)(1, "label", 15);
+    i0.ɵɵtext(2, " Select tools from the list: ");
     i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 16);
+    i0.ɵɵrepeaterCreate(4, FocusAreaToolsModalComponent_Conditional_0_Conditional_10_For_5_Template, 4, 4, "label", 17, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ngClass", ctx_r1.errorClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.labelClasses());
+    i0.ɵɵadvance(3);
+    i0.ɵɵrepeater(ctx_r1.predefinedTools());
 } }
-function SymphiqCreateAccountDashboardComponent_Conditional_24_Template(rf, ctx) { if (rf & 1) {
-    const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 14)(1, "div", 16)(2, "div", 26)(3, "h2", 18);
-    i0.ɵɵtext(4, " Create Account ");
-    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", 27)(8, "div")(9, "label", 28);
-    i0.ɵɵtext(10, " Shop Name ");
-    i0.ɵɵelementStart(11, "span", 29);
-    i0.ɵɵtext(12, "*");
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelement(13, "input", 30, 0);
-    i0.ɵɵconditionalCreate(15, SymphiqCreateAccountDashboardComponent_Conditional_24_Conditional_15_Template, 2, 1, "p", 31);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(16, "div")(17, "label", 28);
-    i0.ɵɵtext(18, " Shop URL ");
-    i0.ɵɵelementStart(19, "span", 29);
-    i0.ɵɵtext(20, "*");
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(21, "div", 32)(22, "span", 33);
-    i0.ɵɵtext(23, " https:// ");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelement(24, "input", 34);
+function FocusAreaToolsModalComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 1);
+    i0.ɵɵlistener("click", function FocusAreaToolsModalComponent_Conditional_0_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onBackdropClick()); });
+    i0.ɵɵelement(1, "div", 2);
+    i0.ɵɵelementStart(2, "div", 3);
+    i0.ɵɵlistener("click", function FocusAreaToolsModalComponent_Conditional_0_Template_div_click_2_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(3, "div", 4)(4, "h3", 5);
+    i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(25, SymphiqCreateAccountDashboardComponent_Conditional_24_Conditional_25_Template, 2, 1, "p", 31);
+    i0.ɵɵelementStart(6, "button", 6);
+    i0.ɵɵlistener("click", function FocusAreaToolsModalComponent_Conditional_0_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onClose()); });
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(7, "svg", 7);
+    i0.ɵɵelement(8, "path", 8);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵnamespaceHTML();
+    i0.ɵɵelementStart(9, "div", 9);
+    i0.ɵɵconditionalCreate(10, FocusAreaToolsModalComponent_Conditional_0_Conditional_10_Template, 6, 1, "div", 10);
+    i0.ɵɵelementStart(11, "div")(12, "label", 11);
+    i0.ɵɵtext(13, " Other tools, separated by commas or returns: ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(26, "div")(27, "label", 35);
-    i0.ɵɵtext(28, " Shop Platform ");
-    i0.ɵɵelementStart(29, "span", 29);
-    i0.ɵɵtext(30, "*");
-    i0.ɵɵelementEnd()();
-    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_24_Conditional_36_Template, 1, 0, "div", 41);
+    i0.ɵɵelementStart(14, "textarea", 12);
+    i0.ɵɵtwoWayListener("ngModelChange", function FocusAreaToolsModalComponent_Conditional_0_Template_textarea_ngModelChange_14_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.otherToolsText, $event) || (ctx_r1.otherToolsText = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(15, "div", 13)(16, "button", 14);
+    i0.ɵɵlistener("click", function FocusAreaToolsModalComponent_Conditional_0_Template_button_click_16_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onClose()); });
+    i0.ɵɵtext(17, " Cancel ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(37, "div", 42)(38, "div", 43);
-    i0.ɵɵtext(39, " Shopify ");
+    i0.ɵɵelementStart(18, "button", 14);
+    i0.ɵɵlistener("click", function FocusAreaToolsModalComponent_Conditional_0_Template_button_click_18_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSave()); });
+    i0.ɵɵtext(19, " Save ");
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵelementStart(40, "label", 37);
-    i0.ɵɵelement(41, "input", 38);
-    i0.ɵɵelementStart(42, "div", 39)(43, "div", 40);
-    i0.ɵɵconditionalCreate(44, SymphiqCreateAccountDashboardComponent_Conditional_24_Conditional_44_Template, 1, 0, "div", 41);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.backdropClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.containerClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.headerClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.titleClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" Tools used for ", ctx_r1.focusAreaTitle(), " ");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.closeButtonClasses());
+    i0.ɵɵadvance(4);
+    i0.ɵɵconditional(ctx_r1.predefinedTools().length > 0 ? 10 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngClass", ctx_r1.labelClasses());
+    i0.ɵɵadvance(2);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.otherToolsText);
+    i0.ɵɵproperty("ngClass", ctx_r1.textareaClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.footerClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.cancelButtonClasses());
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngClass", ctx_r1.saveButtonClasses());
+} }
+class FocusAreaToolsModalComponent {
+    constructor() {
+        this.isOpen = input(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+        this.focusAreaDomain = input.required(...(ngDevMode ? [{ debugName: "focusAreaDomain" }] : []));
+        this.focusAreaTitle = input.required(...(ngDevMode ? [{ debugName: "focusAreaTitle" }] : []));
+        this.selectedTools = input([], ...(ngDevMode ? [{ debugName: "selectedTools" }] : []));
+        this.viewMode = input(ViewModeEnum.LIGHT, ...(ngDevMode ? [{ debugName: "viewMode" }] : []));
+        this.close = output();
+        this.save = output();
+        this.selectedPredefinedTools = signal(new Set(), ...(ngDevMode ? [{ debugName: "selectedPredefinedTools" }] : []));
+        this.otherToolsText = signal('', ...(ngDevMode ? [{ debugName: "otherToolsText" }] : []));
+        this.predefinedTools = signal([], ...(ngDevMode ? [{ debugName: "predefinedTools" }] : []));
+        effect(() => {
+            const domain = this.focusAreaDomain();
+            const tools = FocusAreaDomainEnumUtil.topTools(domain);
+            this.predefinedTools.set(tools);
+        });
+        effect(() => {
+            const tools = this.selectedTools();
+            const predefined = this.predefinedTools();
+            const selectedSet = new Set();
+            const otherTools = [];
+            tools.forEach(tool => {
+                if (predefined.includes(tool)) {
+                    selectedSet.add(tool);
+                }
+                else {
+                    otherTools.push(tool);
+                }
+            });
+            this.selectedPredefinedTools.set(selectedSet);
+            this.otherToolsText.set(otherTools.join(', '));
+        });
+    }
+    onEscapeKey() {
+        if (this.isOpen()) {
+            this.onClose();
+        }
+    }
+    isLightMode() {
+        return this.viewMode() === ViewModeEnum.LIGHT;
+    }
+    isToolSelected(tool) {
+        return this.selectedPredefinedTools().has(tool);
+    }
+    onToolToggle(tool, event) {
+        const checkbox = event.target;
+        const newSet = new Set(this.selectedPredefinedTools());
+        if (checkbox.checked) {
+            newSet.add(tool);
+        }
+        else {
+            newSet.delete(tool);
+        }
+        this.selectedPredefinedTools.set(newSet);
+    }
+    onBackdropClick() {
+        this.onClose();
+    }
+    onClose() {
+        this.close.emit();
+    }
+    onSave() {
+        const predefined = Array.from(this.selectedPredefinedTools());
+        const otherText = this.otherToolsText();
+        const otherTools = otherText
+            .split(/[,\n\r]+/)
+            .map(t => t.trim())
+            .filter(t => t.length > 0);
+        const allTools = [...predefined, ...otherTools];
+        this.save.emit(allTools);
+    }
+    backdropClasses() {
+        return this.isLightMode()
+            ? 'bg-black/15'
+            : 'bg-black/40';
+    }
+    containerClasses() {
+        return this.isLightMode()
+            ? 'bg-white border border-slate-200'
+            : 'bg-slate-800 border border-slate-700';
+    }
+    headerClasses() {
+        return this.isLightMode()
+            ? 'bg-gradient-to-r from-white to-slate-50 border-slate-200'
+            : 'bg-gradient-to-r from-slate-800 to-slate-900 border-slate-700';
+    }
+    titleClasses() {
+        return this.isLightMode()
+            ? 'text-slate-900'
+            : 'text-white';
+    }
+    closeButtonClasses() {
+        return this.isLightMode()
+            ? 'text-slate-500 hover:bg-slate-100 hover:text-slate-700'
+            : 'text-slate-400 hover:bg-slate-700 hover:text-slate-200';
+    }
+    labelClasses() {
+        return this.isLightMode()
+            ? 'text-slate-700'
+            : 'text-slate-300';
+    }
+    checkboxClasses() {
+        return this.isLightMode()
+            ? 'text-blue-600 border-slate-300 focus:ring-blue-500'
+            : 'text-blue-400 border-slate-600 focus:ring-blue-400 bg-slate-700';
+    }
+    checkboxLabelClasses() {
+        return this.isLightMode()
+            ? 'text-slate-700'
+            : 'text-slate-300';
+    }
+    textareaClasses() {
+        return this.isLightMode()
+            ? 'bg-white text-slate-900 placeholder-slate-400 border-slate-300 focus:border-blue-500 focus:ring-blue-500'
+            : 'bg-slate-700 text-white placeholder-slate-500 border-slate-600 focus:border-blue-400 focus:ring-blue-400';
+    }
+    footerClasses() {
+        return this.isLightMode()
+            ? 'bg-gradient-to-r from-slate-50 to-white border-slate-200'
+            : 'bg-gradient-to-r from-slate-900 to-slate-800 border-slate-700';
+    }
+    cancelButtonClasses() {
+        return this.isLightMode()
+            ? 'bg-slate-200 text-slate-700 hover:bg-slate-300'
+            : 'bg-slate-700 text-slate-300 hover:bg-slate-600';
+    }
+    saveButtonClasses() {
+        return this.isLightMode()
+            ? 'bg-gradient-to-r from-blue-600 to-cyan-600 hover:from-blue-700 hover:to-cyan-700 text-white'
+            : 'bg-gradient-to-r from-blue-500 to-cyan-500 hover:from-blue-600 hover:to-cyan-600 text-white';
+    }
+    static { this.ɵfac = function FocusAreaToolsModalComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || FocusAreaToolsModalComponent)(); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FocusAreaToolsModalComponent, selectors: [["symphiq-focus-area-tools-modal"]], hostBindings: function FocusAreaToolsModalComponent_HostBindings(rf, ctx) { if (rf & 1) {
+            i0.ɵɵlistener("keydown.escape", function FocusAreaToolsModalComponent_keydown_escape_HostBindingHandler() { return ctx.onEscapeKey(); }, i0.ɵɵresolveDocument);
+        } }, inputs: { isOpen: [1, "isOpen"], focusAreaDomain: [1, "focusAreaDomain"], focusAreaTitle: [1, "focusAreaTitle"], selectedTools: [1, "selectedTools"], viewMode: [1, "viewMode"] }, outputs: { close: "close", save: "save" }, decls: 1, vars: 1, consts: [[1, "fixed", "inset-0", "z-[10002]", "flex", "items-center", "justify-center", "px-4"], [1, "fixed", "inset-0", "z-[10002]", "flex", "items-center", "justify-center", "px-4", 3, "click"], [1, "absolute", "inset-0", "backdrop-blur-sm", "animate-fade-in", "z-[10002]", 3, "ngClass"], [1, "relative", "w-full", "max-w-2xl", "rounded-2xl", "shadow-2xl", "animate-scale-in", "z-[10003]", "max-h-[90vh]", "flex", "flex-col", 3, "click", "ngClass"], [1, "px-6", "py-4", "border-b", "flex", "items-center", "justify-between", 3, "ngClass"], [1, "text-xl", "font-bold", 3, "ngClass"], ["type", "button", 1, "w-8", "h-8", "rounded-lg", "flex", "items-center", "justify-center", "transition-colors", "cursor-pointer", 3, "click", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M6 18L18 6M6 6l12 12"], [1, "flex-1", "overflow-y-auto", "p-6"], [1, "mb-6"], [1, "block", "text-sm", "font-semibold", "mb-2", 3, "ngClass"], ["rows", "4", "placeholder", "Enter other tools (e.g., Custom Tool, Another Tool)", 1, "w-full", "px-4", "py-3", "rounded-lg", "border-2", "transition-all", "duration-200", "focus:outline-none", "focus:ring-2", 3, "ngModelChange", "ngModel", "ngClass"], [1, "px-6", "py-4", "border-t", "flex", "items-center", "justify-end", "gap-3", 3, "ngClass"], ["type", "button", 1, "px-6", "py-2.5", "rounded-lg", "font-semibold", "text-sm", "transition-all", "duration-200", "cursor-pointer", "hover:scale-105", 3, "click", "ngClass"], [1, "block", "text-sm", "font-semibold", "mb-3", 3, "ngClass"], [1, "grid", "grid-cols-1", "sm:grid-cols-2", "gap-3"], [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"]], template: function FocusAreaToolsModalComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵconditionalCreate(0, FocusAreaToolsModalComponent_Conditional_0_Template, 20, 13, "div", 0);
+        } if (rf & 2) {
+            i0.ɵɵconditional(ctx.isOpen() ? 0 : -1);
+        } }, dependencies: [CommonModule, i1$1.NgClass, FormsModule, i2$1.DefaultValueAccessor, i2$1.NgControlStatus, i2$1.NgModel], styles: ["@keyframes _ngcontent-%COMP%_fade-in{0%{opacity:0}to{opacity:1}}@keyframes _ngcontent-%COMP%_scale-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.animate-fade-in[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_fade-in .2s ease-out}.animate-scale-in[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_scale-in .2s ease-out}"], changeDetection: 0 }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FocusAreaToolsModalComponent, [{
+        type: Component,
+        args: [{ selector: 'symphiq-focus-area-tools-modal', standalone: true, imports: [CommonModule, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    @if (isOpen()) {
+      <div
+        class="fixed inset-0 z-[10002] flex items-center justify-center px-4"
+        (click)="onBackdropClick()">
+        <div
+          [ngClass]="backdropClasses()"
+          class="absolute inset-0 backdrop-blur-sm animate-fade-in z-[10002]"></div>
+
+        <div
+          [ngClass]="containerClasses()"
+          class="relative w-full max-w-2xl rounded-2xl shadow-2xl animate-scale-in z-[10003] max-h-[90vh] flex flex-col"
+          (click)="$event.stopPropagation()">
+
+          <!-- Header -->
+          <div [ngClass]="headerClasses()" class="px-6 py-4 border-b flex items-center justify-between">
+            <h3 [ngClass]="titleClasses()" class="text-xl font-bold">
+              Tools used for {{ focusAreaTitle() }}
+            </h3>
+            <button
+              type="button"
+              (click)="onClose()"
+              [ngClass]="closeButtonClasses()"
+              class="w-8 h-8 rounded-lg flex items-center justify-center transition-colors cursor-pointer">
+              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
+              </svg>
+            </button>
+          </div>
+
+          <!-- Content -->
+          <div class="flex-1 overflow-y-auto p-6">
+            <!-- Predefined Tools -->
+            @if (predefinedTools().length > 0) {
+              <div class="mb-6">
+                <label [ngClass]="labelClasses()" class="block text-sm font-semibold mb-3">
+                  Select tools from the list:
+                </label>
+                <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
+                  @for (tool of predefinedTools(); track tool) {
+                    <label class="flex items-center gap-2 cursor-pointer">
+                      <input
+                        type="checkbox"
+                        [checked]="isToolSelected(tool)"
+                        (change)="onToolToggle(tool, $event)"
+                        [ngClass]="checkboxClasses()"
+                        class="w-4 h-4 rounded border-2 transition-all duration-200"
+                      />
+                      <span [ngClass]="checkboxLabelClasses()" class="text-sm">
+                        {{ tool }}
+                      </span>
+                    </label>
+                  }
+                </div>
+              </div>
+            }
+
+            <!-- Other Tools -->
+            <div>
+              <label [ngClass]="labelClasses()" class="block text-sm font-semibold mb-2">
+                Other tools, separated by commas or returns:
+              </label>
+              <textarea
+                [(ngModel)]="otherToolsText"
+                [ngClass]="textareaClasses()"
+                class="w-full px-4 py-3 rounded-lg border-2 transition-all duration-200 focus:outline-none focus:ring-2"
+                rows="4"
+                placeholder="Enter other tools (e.g., Custom Tool, Another Tool)"></textarea>
+            </div>
+          </div>
+
+          <!-- Footer -->
+          <div [ngClass]="footerClasses()" class="px-6 py-4 border-t flex items-center justify-end gap-3">
+            <button
+              type="button"
+              (click)="onClose()"
+              [ngClass]="cancelButtonClasses()"
+              class="px-6 py-2.5 rounded-lg font-semibold text-sm transition-all duration-200 cursor-pointer hover:scale-105">
+              Cancel
+            </button>
+            <button
+              type="button"
+              (click)="onSave()"
+              [ngClass]="saveButtonClasses()"
+              class="px-6 py-2.5 rounded-lg font-semibold text-sm transition-all duration-200 cursor-pointer hover:scale-105">
+              Save
+            </button>
+          </div>
+        </div>
+      </div>
+    }
+  `, styles: ["@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes scale-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.animate-fade-in{animation:fade-in .2s ease-out}.animate-scale-in{animation:scale-in .2s ease-out}\n"] }]
+    }], () => [], { isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }], focusAreaDomain: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusAreaDomain", required: true }] }], focusAreaTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusAreaTitle", required: true }] }], selectedTools: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedTools", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], close: [{ type: i0.Output, args: ["close"] }], save: [{ type: i0.Output, args: ["save"] }], onEscapeKey: [{
+            type: HostListener,
+            args: ['document:keydown.escape']
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FocusAreaToolsModalComponent, { className: "FocusAreaToolsModalComponent", filePath: "lib/components/create-account-dashboard/focus-area-tools-modal.component.ts", lineNumber: 143 }); })();
+
+const _c0$q = ["shopNameInput"];
+const _forTrack0$i = ($index, $item) => $item.focusAreaDomain;
+function SymphiqCreateAccountDashboardComponent_Conditional_23_Conditional_27_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0, " Shopify ");
+} }
+function SymphiqCreateAccountDashboardComponent_Conditional_23_Conditional_28_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.accountData().otherPlatformName || "Other", " ");
+} }
+function SymphiqCreateAccountDashboardComponent_Conditional_23_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 14)(1, "div", 18)(2, "div", 19)(3, "div")(4, "h2", 20);
+    i0.ɵɵtext(5, " Shop Details ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "p", 1);
+    i0.ɵɵtext(7, " Your shop information ");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(8, "button", 21);
+    i0.ɵɵlistener("click", function SymphiqCreateAccountDashboardComponent_Conditional_23_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.enableEditMode()); });
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(9, "svg", 22);
+    i0.ɵɵelement(10, "path", 23);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(11, " Edit ");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵnamespaceHTML();
+    i0.ɵɵelementStart(12, "div", 24)(13, "div")(14, "label", 25);
+    i0.ɵɵtext(15, " Shop Name ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(45, "div", 42)(46, "div", 43);
+    i0.ɵɵelementStart(16, "p", 26);
+    i0.ɵɵtext(17);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(18, "div")(19, "label", 25);
+    i0.ɵɵtext(20, " Shop URL ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(21, "a", 27);
+    i0.ɵɵtext(22);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(23, "div")(24, "label", 25);
+    i0.ɵɵtext(25, " Shop Platform ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(26, "p", 26);
+    i0.ɵɵconditionalCreate(27, SymphiqCreateAccountDashboardComponent_Conditional_23_Conditional_27_Template, 1, 0)(28, SymphiqCreateAccountDashboardComponent_Conditional_23_Conditional_28_Template, 1, 1);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(29, "div")(30, "label", 25);
+    i0.ɵɵtext(31, " Company Name ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(32, "p", 26);
+    i0.ɵɵtext(33);
+    i0.ɵɵelementEnd()()()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngClass", ctx_r1.containerClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.contentClasses());
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("ngClass", ctx_r1.sectionTitleClasses());
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngClass", ctx_r1.sectionDescriptionClasses());
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngClass", ctx_r1.editButtonClasses());
+    i0.ɵɵadvance(6);
+    i0.ɵɵproperty("ngClass", ctx_r1.viewLabelClasses());
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngClass", ctx_r1.viewValueClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.accountData().shopName, " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngClass", ctx_r1.viewLabelClasses());
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("href", ctx_r1.accountData().shopUrl, i0.ɵɵsanitizeUrl)("ngClass", ctx_r1.viewLinkClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.accountData().shopUrl, " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngClass", ctx_r1.viewLabelClasses());
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngClass", ctx_r1.viewValueClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.accountData().shopPlatform === ctx_r1.ShopPlatformEnum.SHOPIFY ? 27 : 28);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("ngClass", ctx_r1.viewLabelClasses());
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngClass", ctx_r1.viewValueClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.accountData().companyName, " ");
+} }
+function SymphiqCreateAccountDashboardComponent_Conditional_24_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 33);
+    i0.ɵɵtext(1, " Shop name is required ");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("ngClass", ctx_r1.errorClasses());
+} }
+function SymphiqCreateAccountDashboardComponent_Conditional_24_Conditional_25_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 33);
+    i0.ɵɵtext(1, " Shop URL is required ");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("ngClass", ctx_r1.errorClasses());
+} }
+function SymphiqCreateAccountDashboardComponent_Conditional_24_Conditional_36_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "div", 43);
+} }
+function SymphiqCreateAccountDashboardComponent_Conditional_24_Conditional_44_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "div", 43);
+} }
+function SymphiqCreateAccountDashboardComponent_Conditional_24_Conditional_48_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 33);
+    i0.ɵɵtext(1, " Platform name is required ");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("ngClass", ctx_r1.errorClasses());
+} }
+function SymphiqCreateAccountDashboardComponent_Conditional_24_Conditional_48_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div")(1, "label", 30);
+    i0.ɵɵtext(2, " Platform Name ");
+    i0.ɵɵelementStart(3, "span", 31);
+    i0.ɵɵtext(4, "*");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelement(5, "input", 51);
+    i0.ɵɵconditionalCreate(6, SymphiqCreateAccountDashboardComponent_Conditional_24_Conditional_48_Conditional_6_Template, 2, 1, "p", 33);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.labelClasses());
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("ngClass", ctx_r1.inputClasses("otherPlatformName"));
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.isFieldInvalid("otherPlatformName") ? 6 : -1);
+} }
+function SymphiqCreateAccountDashboardComponent_Conditional_24_Conditional_60_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 33);
+    i0.ɵɵtext(1, " Company name is required ");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("ngClass", ctx_r1.errorClasses());
+} }
+function SymphiqCreateAccountDashboardComponent_Conditional_24_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 14)(1, "div", 18)(2, "div", 28)(3, "h2", 20);
+    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", 29)(8, "div")(9, "label", 30);
+    i0.ɵɵtext(10, " Shop Name ");
+    i0.ɵɵelementStart(11, "span", 31);
+    i0.ɵɵtext(12, "*");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelement(13, "input", 32, 0);
+    i0.ɵɵconditionalCreate(15, SymphiqCreateAccountDashboardComponent_Conditional_24_Conditional_15_Template, 2, 1, "p", 33);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(16, "div")(17, "label", 30);
+    i0.ɵɵtext(18, " Shop URL ");
+    i0.ɵɵelementStart(19, "span", 31);
+    i0.ɵɵtext(20, "*");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(21, "div", 34)(22, "span", 35);
+    i0.ɵɵtext(23, " https:// ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(24, "input", 36);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(25, SymphiqCreateAccountDashboardComponent_Conditional_24_Conditional_25_Template, 2, 1, "p", 33);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(26, "div")(27, "label", 37);
+    i0.ɵɵtext(28, " Shop Platform ");
+    i0.ɵɵelementStart(29, "span", 31);
+    i0.ɵɵtext(30, "*");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(31, "div", 38)(32, "label", 39);
+    i0.ɵɵelement(33, "input", 40);
+    i0.ɵɵelementStart(34, "div", 41)(35, "div", 42);
+    i0.ɵɵconditionalCreate(36, SymphiqCreateAccountDashboardComponent_Conditional_24_Conditional_36_Template, 1, 0, "div", 43);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(37, "div", 44)(38, "div", 45);
+    i0.ɵɵtext(39, " Shopify ");
+    i0.ɵɵelementEnd()()()();
+    i0.ɵɵelementStart(40, "label", 39);
+    i0.ɵɵelement(41, "input", 40);
+    i0.ɵɵelementStart(42, "div", 41)(43, "div", 42);
+    i0.ɵɵconditionalCreate(44, SymphiqCreateAccountDashboardComponent_Conditional_24_Conditional_44_Template, 1, 0, "div", 43);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(45, "div", 44)(46, "div", 45);
     i0.ɵɵtext(47, " Other ");
     i0.ɵɵelementEnd()()()()()();
     i0.ɵɵconditionalCreate(48, SymphiqCreateAccountDashboardComponent_Conditional_24_Conditional_48_Template, 7, 3, "div");
-    i0.ɵɵelementStart(49, "div")(50, "label", 28);
+    i0.ɵɵelementStart(49, "div")(50, "label", 30);
     i0.ɵɵtext(51, " Company Name ");
-    i0.ɵɵelementStart(52, "span", 29);
+    i0.ɵɵelementStart(52, "span", 31);
     i0.ɵɵtext(53, "*");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelement(54, "input", 44);
-    i0.ɵɵelementStart(55, "div", 45)(56, "label", 46)(57, "input", 47);
+    i0.ɵɵelement(54, "input", 46);
+    i0.ɵɵelementStart(55, "div", 47)(56, "label", 48)(57, "input", 49);
     i0.ɵɵlistener("change", function SymphiqCreateAccountDashboardComponent_Conditional_24_Template_input_change_57_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleSameAsShopName()); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(58, "span", 48);
+    i0.ɵɵelementStart(58, "span", 50);
     i0.ɵɵtext(59, " Same as Shop Name ");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵconditionalCreate(60, SymphiqCreateAccountDashboardComponent_Conditional_24_Conditional_60_Template, 2, 1, "p", 31);
+    i0.ɵɵconditionalCreate(60, SymphiqCreateAccountDashboardComponent_Conditional_24_Conditional_60_Template, 2, 1, "p", 33);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
     let tmp_18_0;
@@ -51788,67 +52555,299 @@ function SymphiqCreateAccountDashboardComponent_Conditional_24_Template(rf, ctx)
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(ctx_r1.isFieldInvalid("companyName") ? 60 : -1);
 } }
-function SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 54);
-    i0.ɵɵlistener("click", function SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_3_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.cancelEditMode()); });
+function SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_12_For_6_Conditional_6_For_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 62);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const tool_r5 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(5);
+    i0.ɵɵproperty("ngClass", ctx_r1.toolChipViewClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", tool_r5, " ");
+} }
+function SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_12_For_6_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 59)(1, "span", 60);
+    i0.ɵɵtext(2, "Tools:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 61);
+    i0.ɵɵrepeaterCreate(4, SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_12_For_6_Conditional_6_For_5_Template, 2, 2, "span", 62, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const focusArea_r6 = i0.ɵɵnextContext().$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.toolsLabelViewClasses());
+    i0.ɵɵadvance(3);
+    i0.ɵɵrepeater(focusArea_r6.tools);
+} }
+function SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_12_For_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 55)(1, "div", 56)(2, "h4", 57);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "span", 58);
+    i0.ɵɵtext(5, " Engaged ");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵconditionalCreate(6, SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_12_For_6_Conditional_6_Template, 6, 1, "div", 59);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const focusArea_r6 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("ngClass", ctx_r1.focusAreaViewCardClasses("engaged"));
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngClass", ctx_r1.focusAreaViewTitleClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.getFocusAreaTitle(focusArea_r6.focusAreaDomain), " ");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.statusBadgeClasses("engaged"));
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(focusArea_r6.tools && focusArea_r6.tools.length > 0 ? 6 : -1);
+} }
+function SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 28)(1, "h3", 52);
+    i0.ɵɵelement(2, "span", 53);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 54);
+    i0.ɵɵrepeaterCreate(5, SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_12_For_6_Template, 7, 5, "div", 55, _forTrack0$i);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.groupTitleClasses("engaged"));
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" Engaged In (", ctx_r1.engagedFocusAreas().length, ") ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵrepeater(ctx_r1.engagedFocusAreas());
+} }
+function SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_13_For_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 65)(1, "h4", 57);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const focusArea_r7 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("ngClass", ctx_r1.focusAreaViewCardClasses("interested"));
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.focusAreaViewTitleClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.getFocusAreaTitle(focusArea_r7.focusAreaDomain), " ");
+} }
+function SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 28)(1, "h3", 52);
+    i0.ɵɵelement(2, "span", 63);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 64);
+    i0.ɵɵrepeaterCreate(5, SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_13_For_6_Template, 3, 3, "div", 65, _forTrack0$i);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.groupTitleClasses("interested"));
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" Interested In (", ctx_r1.interestedFocusAreas().length, ") ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵrepeater(ctx_r1.interestedFocusAreas());
+} }
+function SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_14_For_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 68)(1, "span", 60);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const focusArea_r8 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("ngClass", ctx_r1.focusAreaViewCardClasses("not-interested"));
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.focusAreaViewTitleSmallClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.getFocusAreaTitle(focusArea_r8.focusAreaDomain), " ");
+} }
+function SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div")(1, "h3", 52);
+    i0.ɵɵelement(2, "span", 66);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 67);
+    i0.ɵɵrepeaterCreate(5, SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_14_For_6_Template, 3, 3, "div", 68, _forTrack0$i);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.groupTitleClasses("not-interested"));
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" Not Interested (", ctx_r1.notInterestedFocusAreas().length, ") ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵrepeater(ctx_r1.notInterestedFocusAreas());
+} }
+function SymphiqCreateAccountDashboardComponent_Conditional_25_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 15)(1, "div", 18)(2, "div", 19)(3, "div")(4, "h2", 20);
+    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", 21);
+    i0.ɵɵlistener("click", function SymphiqCreateAccountDashboardComponent_Conditional_25_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.enableFocusAreasEditMode()); });
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(9, "svg", 22);
+    i0.ɵɵelement(10, "path", 23);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(11, " Edit ");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵconditionalCreate(12, SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_12_Template, 7, 2, "div", 28);
+    i0.ɵɵconditionalCreate(13, SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_13_Template, 7, 2, "div", 28);
+    i0.ɵɵconditionalCreate(14, SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_14_Template, 7, 2, "div");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngClass", ctx_r1.containerClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.contentClasses());
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("ngClass", ctx_r1.sectionTitleClasses());
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngClass", ctx_r1.sectionDescriptionClasses());
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngClass", ctx_r1.editButtonClasses());
+    i0.ɵɵadvance(4);
+    i0.ɵɵconditional(ctx_r1.engagedFocusAreas().length > 0 ? 12 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.interestedFocusAreas().length > 0 ? 13 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.notInterestedFocusAreas().length > 0 ? 14 : -1);
+} }
+function SymphiqCreateAccountDashboardComponent_Conditional_26_For_13_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "div", 72);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("ngClass", ctx_r1.dividerClasses());
+} }
+function SymphiqCreateAccountDashboardComponent_Conditional_26_For_13_Template(rf, ctx) { if (rf & 1) {
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "symphiq-focus-area-question", 71);
+    i0.ɵɵlistener("statusChange", function SymphiqCreateAccountDashboardComponent_Conditional_26_For_13_Template_symphiq_focus_area_question_statusChange_0_listener($event) { const domain_r10 = i0.ɵɵrestoreView(_r9).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onFocusAreaStatusChange(domain_r10, $event)); })("toolsClick", function SymphiqCreateAccountDashboardComponent_Conditional_26_For_13_Template_symphiq_focus_area_question_toolsClick_0_listener() { const domain_r10 = i0.ɵɵrestoreView(_r9).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onFocusAreaToolsClick(domain_r10)); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(1, SymphiqCreateAccountDashboardComponent_Conditional_26_For_13_Conditional_1_Template, 1, 1, "div", 72);
+} if (rf & 2) {
+    const domain_r10 = ctx.$implicit;
+    const ɵ$index_340_r11 = ctx.$index;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("focusAreaDomain", domain_r10)("selectedStatus", ctx_r1.getFocusAreaStatus(domain_r10))("selectedTools", ctx_r1.getFocusAreaTools(domain_r10))("viewMode", ctx_r1.viewMode())("title", ctx_r1.getFocusAreaTitle(domain_r10))("description", ctx_r1.getFocusAreaDescription(domain_r10));
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ɵ$index_340_r11 < ctx_r1.allFocusAreaDomains().length - 1 ? 1 : -1);
+} }
+function SymphiqCreateAccountDashboardComponent_Conditional_26_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 15)(1, "div", 18)(2, "div", 28)(3, "div", 69)(4, "div")(5, "h2", 20);
+    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", 70);
+    i0.ɵɵtext(10);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(11, "div", 24);
+    i0.ɵɵrepeaterCreate(12, SymphiqCreateAccountDashboardComponent_Conditional_26_For_13_Template, 2, 7, null, null, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngClass", ctx_r1.containerClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.contentClasses());
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("ngClass", ctx_r1.sectionTitleClasses());
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngClass", ctx_r1.sectionDescriptionClasses());
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngClass", ctx_r1.progressBadgeClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate2(" ", ctx_r1.focusAreasAnswered(), " of ", ctx_r1.totalFocusAreas(), " answered ");
+    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) {
+    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.ɵɵtext(1, " Cancel ");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("ngClass", ctx_r1.cancelButtonClasses());
 } }
-function SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_5_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+function SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_6_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) {
     i0.ɵɵtext(0, " Updating Account... ");
 } }
-function SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_5_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+function SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_6_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_28_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(0, "svg", 55);
-    i0.ɵɵelement(1, "circle", 56)(2, "path", 57);
+    i0.ɵɵelementStart(0, "svg", 79);
+    i0.ɵɵelement(1, "circle", 80)(2, "path", 81);
     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);
+    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);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(3);
-    i0.ɵɵconditional(ctx_r1.accountData() && ctx_r1.editMode() ? 3 : 4);
+    i0.ɵɵconditional(ctx_r1.focusAreasEditMode() ? 3 : ctx_r1.accountData() && ctx_r1.editMode() ? 4 : 5);
 } }
-function SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_6_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtext(0, " Edit Account ");
+function SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_7_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_28_Conditional_7_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) {
     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);
+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);
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(2, "svg", 58);
-    i0.ɵɵelement(3, "path", 59);
+    i0.ɵɵelementStart(3, "svg", 82);
+    i0.ɵɵelement(4, "path", 83);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵconditional(ctx_r1.accountData() && ctx_r1.editMode() ? 0 : 1);
+    i0.ɵɵconditional(ctx_r1.focusAreasEditMode() ? 0 : ctx_r1.accountData() && ctx_r1.editMode() ? 1 : 2);
 } }
-function SymphiqCreateAccountDashboardComponent_Conditional_25_Template(rf, ctx) { if (rf & 1) {
-    const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 15)(1, "div", 50)(2, "div", 51);
-    i0.ɵɵconditionalCreate(3, SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_3_Template, 2, 1, "button", 52);
-    i0.ɵɵelementStart(4, "button", 53);
-    i0.ɵɵlistener("click", function SymphiqCreateAccountDashboardComponent_Conditional_25_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.handleContinue()); });
-    i0.ɵɵconditionalCreate(5, SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_5_Template, 5, 1)(6, SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_6_Template, 4, 1);
+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.ɵɵelementEnd()()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵproperty("ngClass", ctx_r1.stickyButtonContainerClasses());
-    i0.ɵɵadvance(3);
-    i0.ɵɵconditional(ctx_r1.accountData() && ctx_r1.editMode() ? 3 : -1);
+    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();
     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() ? 5 : 6);
+    i0.ɵɵconditional(ctx_r1.isLoading() ? 6 : 7);
 } }
 var ShopPlatformEnum;
 (function (ShopPlatformEnum) {
@@ -51913,6 +52912,57 @@ class SymphiqCreateAccountDashboardComponent {
         this.originalFormValue = null;
         this.ShopPlatformEnum = ShopPlatformEnum;
         this.JourneyStepIdEnum = JourneyStepIdEnum;
+        this.FocusAreaDomainEnum = FocusAreaDomainEnum;
+        this.FocusAreaDetailStatusEnum = FocusAreaDetailStatusEnum;
+        this.focusAreasEditMode = signal(false, ...(ngDevMode ? [{ debugName: "focusAreasEditMode" }] : []));
+        this.toolsModalOpen = signal(false, ...(ngDevMode ? [{ debugName: "toolsModalOpen" }] : []));
+        this.currentEditingFocusArea = signal(null, ...(ngDevMode ? [{ debugName: "currentEditingFocusArea" }] : []));
+        this.focusAreasMap = signal(new Map(), ...(ngDevMode ? [{ debugName: "focusAreasMap" }] : []));
+        this.originalFocusAreasMap = null;
+        this.allFocusAreaDomains = signal(FocusAreaDomainEnumUtil.sorted(), ...(ngDevMode ? [{ debugName: "allFocusAreaDomains" }] : []));
+        this.totalFocusAreas = computed(() => this.allFocusAreaDomains().length, ...(ngDevMode ? [{ debugName: "totalFocusAreas" }] : []));
+        this.focusAreasAnswered = computed(() => {
+            const map = this.focusAreasMap();
+            let count = 0;
+            for (const [_, value] of map) {
+                if (value.status !== null) {
+                    count++;
+                }
+            }
+            return count;
+        }, ...(ngDevMode ? [{ debugName: "focusAreasAnswered" }] : []));
+        this.allFocusAreasAnswered = computed(() => {
+            return this.focusAreasAnswered() === this.totalFocusAreas();
+        }, ...(ngDevMode ? [{ debugName: "allFocusAreasAnswered" }] : []));
+        this.currentEditingFocusAreaTitle = computed(() => {
+            const domain = this.currentEditingFocusArea();
+            return domain ? FocusAreaDomainEnumUtil.title(domain) : '';
+        }, ...(ngDevMode ? [{ debugName: "currentEditingFocusAreaTitle" }] : []));
+        this.currentEditingTools = computed(() => {
+            const domain = this.currentEditingFocusArea();
+            if (!domain)
+                return [];
+            const data = this.focusAreasMap().get(domain);
+            return data?.tools || [];
+        }, ...(ngDevMode ? [{ debugName: "currentEditingTools" }] : []));
+        this.engagedFocusAreas = computed(() => {
+            const data = this.accountData();
+            if (!data?.focusAreaDetails)
+                return [];
+            return data.focusAreaDetails.filter(fa => fa.status === FocusAreaDetailStatusEnum.ENGAGED);
+        }, ...(ngDevMode ? [{ debugName: "engagedFocusAreas" }] : []));
+        this.interestedFocusAreas = computed(() => {
+            const data = this.accountData();
+            if (!data?.focusAreaDetails)
+                return [];
+            return data.focusAreaDetails.filter(fa => fa.status === FocusAreaDetailStatusEnum.NOT_ENGAGED_BUT_WANT_TO);
+        }, ...(ngDevMode ? [{ debugName: "interestedFocusAreas" }] : []));
+        this.notInterestedFocusAreas = computed(() => {
+            const data = this.accountData();
+            if (!data?.focusAreaDetails)
+                return [];
+            return data.focusAreaDetails.filter(fa => fa.status === FocusAreaDetailStatusEnum.NOT_ENGAGED_AND_NO_INTEREST);
+        }, ...(ngDevMode ? [{ debugName: "notInterestedFocusAreas" }] : []));
         this.accountForm = this.fb.group({
             shopName: ['', Validators.required],
             shopUrl: ['', Validators.required],
@@ -51920,13 +52970,17 @@ class SymphiqCreateAccountDashboardComponent {
             otherPlatformName: [''],
             companyName: ['', Validators.required]
         });
+        this.initializeFocusAreasMap();
         effect(() => {
             const data = this.accountData();
-            if (data && !this.editMode()) {
+            if (data && !this.editMode() && !this.focusAreasEditMode()) {
                 this.accountForm.patchValue(data);
                 if (data.shopName === data.companyName) {
                     this.sameAsShopName.set(true);
                 }
+                if (data.focusAreaDetails) {
+                    this.loadFocusAreasFromData(data.focusAreaDetails);
+                }
             }
         });
         this.accountForm.get('shopPlatform')?.valueChanges.subscribe(value => {
@@ -52006,21 +53060,123 @@ class SymphiqCreateAccountDashboardComponent {
     isButtonEnabled() {
         if (this.isLoading())
             return false;
+        if (this.focusAreasEditMode()) {
+            return this.allFocusAreasAnswered();
+        }
         if (!this.isFormValid())
             return false;
+        if (!this.accountData()) {
+            return this.allFocusAreasAnswered();
+        }
         if (this.accountData() && this.editMode()) {
             return this.formChanged();
         }
         return true;
     }
     handleContinue() {
-        if (this.accountForm.valid && !this.isLoading()) {
+        if (this.accountForm.valid && this.allFocusAreasAnswered() && !this.isLoading()) {
             this.isLoading.set(true);
-            const formData = this.accountForm.value;
+            const formData = {
+                ...this.accountForm.value,
+                focusAreaDetails: this.getFocusAreaDetailsFromMap()
+            };
             this.onCreateAccount.emit(formData);
             this.editMode.set(false);
         }
     }
+    handleSaveFocusAreas() {
+        if (this.allFocusAreasAnswered() && !this.isLoading()) {
+            this.isLoading.set(true);
+            const formData = {
+                ...this.accountData(),
+                focusAreaDetails: this.getFocusAreaDetailsFromMap()
+            };
+            this.onCreateAccount.emit(formData);
+            this.focusAreasEditMode.set(false);
+        }
+    }
+    initializeFocusAreasMap() {
+        const map = new Map();
+        this.allFocusAreaDomains().forEach(domain => {
+            map.set(domain, { status: null, tools: [] });
+        });
+        this.focusAreasMap.set(map);
+    }
+    loadFocusAreasFromData(focusAreaDetails) {
+        const map = new Map();
+        this.allFocusAreaDomains().forEach(domain => {
+            const detail = focusAreaDetails.find(fa => fa.focusAreaDomain === domain);
+            if (detail) {
+                map.set(domain, {
+                    status: detail.status || null,
+                    tools: detail.tools || []
+                });
+            }
+            else {
+                map.set(domain, { status: null, tools: [] });
+            }
+        });
+        this.focusAreasMap.set(map);
+    }
+    getFocusAreaDetailsFromMap() {
+        const details = [];
+        this.focusAreasMap().forEach((value, domain) => {
+            if (value.status !== null) {
+                details.push({
+                    focusAreaDomain: domain,
+                    status: value.status,
+                    tools: value.tools
+                });
+            }
+        });
+        return details;
+    }
+    getFocusAreaStatus(domain) {
+        return this.focusAreasMap().get(domain)?.status || null;
+    }
+    getFocusAreaTools(domain) {
+        return this.focusAreasMap().get(domain)?.tools || [];
+    }
+    getFocusAreaTitle(domain) {
+        return FocusAreaDomainEnumUtil.title(domain);
+    }
+    getFocusAreaDescription(domain) {
+        return FocusAreaDomainEnumUtil.subtitle(domain);
+    }
+    onFocusAreaStatusChange(domain, status) {
+        const map = new Map(this.focusAreasMap());
+        const current = map.get(domain) || { status: null, tools: [] };
+        map.set(domain, { ...current, status });
+        this.focusAreasMap.set(map);
+    }
+    onFocusAreaToolsClick(domain) {
+        this.currentEditingFocusArea.set(domain);
+        this.toolsModalOpen.set(true);
+    }
+    onToolsModalClose() {
+        this.toolsModalOpen.set(false);
+        this.currentEditingFocusArea.set(null);
+    }
+    onToolsModalSave(tools) {
+        const domain = this.currentEditingFocusArea();
+        if (domain) {
+            const map = new Map(this.focusAreasMap());
+            const current = map.get(domain) || { status: null, tools: [] };
+            map.set(domain, { ...current, tools });
+            this.focusAreasMap.set(map);
+        }
+        this.onToolsModalClose();
+    }
+    enableFocusAreasEditMode() {
+        this.originalFocusAreasMap = new Map(this.focusAreasMap());
+        this.focusAreasEditMode.set(true);
+    }
+    cancelFocusAreasEditMode() {
+        if (this.originalFocusAreasMap) {
+            this.focusAreasMap.set(new Map(this.originalFocusAreasMap));
+        }
+        this.focusAreasEditMode.set(false);
+    }
     isLightMode() {
         return this.viewMode() === ViewModeEnum.LIGHT;
     }
@@ -52176,6 +53332,91 @@ class SymphiqCreateAccountDashboardComponent {
             ? 'bg-gradient-to-r from-blue-600 to-cyan-600 hover:from-blue-700 hover:to-cyan-700 text-white'
             : 'bg-gradient-to-r from-blue-500 to-cyan-500 hover:from-blue-600 hover:to-cyan-600 text-white';
     }
+    progressBadgeClasses() {
+        const allAnswered = this.allFocusAreasAnswered();
+        return this.isLightMode()
+            ? allAnswered
+                ? 'bg-emerald-100 text-emerald-700 border border-emerald-200'
+                : 'bg-blue-100 text-blue-700 border border-blue-200'
+            : allAnswered
+                ? 'bg-emerald-900/30 text-emerald-400 border border-emerald-700'
+                : 'bg-blue-900/30 text-blue-400 border border-blue-700';
+    }
+    dividerClasses() {
+        return this.isLightMode()
+            ? 'border-t border-slate-200'
+            : 'border-t border-slate-700';
+    }
+    groupTitleClasses(type) {
+        if (type === 'engaged') {
+            return this.isLightMode()
+                ? 'text-emerald-700'
+                : 'text-emerald-400';
+        }
+        if (type === 'interested') {
+            return this.isLightMode()
+                ? 'text-blue-700'
+                : 'text-blue-400';
+        }
+        return this.isLightMode()
+            ? 'text-slate-600'
+            : 'text-slate-400';
+    }
+    focusAreaViewCardClasses(type) {
+        if (type === 'engaged') {
+            return this.isLightMode()
+                ? 'bg-emerald-50 border-emerald-500'
+                : 'bg-emerald-900/10 border-emerald-600';
+        }
+        if (type === 'interested') {
+            return this.isLightMode()
+                ? 'bg-blue-50 border-blue-500'
+                : 'bg-blue-900/10 border-blue-600';
+        }
+        return this.isLightMode()
+            ? 'bg-slate-100'
+            : 'bg-slate-700/50';
+    }
+    focusAreaViewTitleClasses() {
+        return this.isLightMode()
+            ? 'text-slate-900'
+            : 'text-white';
+    }
+    focusAreaViewTitleSmallClasses() {
+        return this.isLightMode()
+            ? 'text-slate-600'
+            : 'text-slate-400';
+    }
+    statusBadgeClasses(type) {
+        if (type === 'engaged') {
+            return this.isLightMode()
+                ? 'bg-emerald-100 text-emerald-700'
+                : 'bg-emerald-900/30 text-emerald-300';
+        }
+        if (type === 'interested') {
+            return this.isLightMode()
+                ? 'bg-blue-100 text-blue-700'
+                : 'bg-blue-900/30 text-blue-300';
+        }
+        return this.isLightMode()
+            ? 'bg-slate-200 text-slate-700'
+            : 'bg-slate-700 text-slate-300';
+    }
+    toolsLabelViewClasses() {
+        return this.isLightMode()
+            ? 'text-slate-600'
+            : 'text-slate-400';
+    }
+    toolChipViewClasses() {
+        return this.isLightMode()
+            ? 'bg-white text-emerald-700 border border-emerald-200'
+            : 'bg-slate-800 text-emerald-300 border border-emerald-700';
+    }
+    validationMessageClasses() {
+        return this.isLightMode()
+            ? 'bg-orange-50 text-orange-700 border border-orange-200'
+            : 'bg-orange-900/30 text-orange-400 border border-orange-700';
+    }
     static { this.ɵfac = function SymphiqCreateAccountDashboardComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SymphiqCreateAccountDashboardComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SymphiqCreateAccountDashboardComponent, selectors: [["symphiq-create-account-dashboard"]], viewQuery: function SymphiqCreateAccountDashboardComponent_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(_c0$q, 5);
@@ -52184,7 +53425,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: 26, vars: 44, 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", 3, "ngClass"], [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, "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: 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) {
             i0.ɵɵelementStart(0, "div", 1)(1, "div");
             i0.ɵɵelement(2, "div", 2);
             i0.ɵɵelementEnd();
@@ -52204,8 +53445,13 @@ class SymphiqCreateAccountDashboardComponent {
             i0.ɵɵelementStart(21, "main", 12)(22, "div", 13);
             i0.ɵɵconditionalCreate(23, SymphiqCreateAccountDashboardComponent_Conditional_23_Template, 34, 18, "div", 14);
             i0.ɵɵconditionalCreate(24, SymphiqCreateAccountDashboardComponent_Conditional_24_Template, 61, 35, "div", 14);
+            i0.ɵɵconditionalCreate(25, SymphiqCreateAccountDashboardComponent_Conditional_25_Template, 15, 8, "div", 15);
+            i0.ɵɵconditionalCreate(26, SymphiqCreateAccountDashboardComponent_Conditional_26_Template, 14, 7, "div", 15);
             i0.ɵɵelementEnd()();
-            i0.ɵɵconditionalCreate(25, SymphiqCreateAccountDashboardComponent_Conditional_25_Template, 7, 13, "div", 15);
+            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.ɵɵelementEnd()();
         } if (rf & 2) {
             i0.ɵɵproperty("ngClass", ctx.getContainerClasses());
@@ -52235,383 +53481,551 @@ class SymphiqCreateAccountDashboardComponent {
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("viewMode", ctx.viewMode())("currentStepId", ctx.JourneyStepIdEnum.CREATE_ACCOUNT)("showNextStepAction", ctx.showNextStepAction())("forDemo", ctx.forDemo())("maxAccessibleStepId", ctx.maxAccessibleStepId());
             i0.ɵɵadvance(3);
-            i0.ɵɵconditional(ctx.accountData() && !ctx.editMode() ? 23 : -1);
+            i0.ɵɵconditional(ctx.accountData() && !ctx.editMode() && !ctx.focusAreasEditMode() ? 23 : -1);
             i0.ɵɵadvance();
             i0.ɵɵconditional(!ctx.accountData() || ctx.editMode() ? 24 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(!ctx.accountData() || ctx.editMode() ? 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], 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.accountData().focusAreaDetails && !ctx.focusAreasEditMode() ? 25 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(!ctx.accountData() || ctx.focusAreasEditMode() ? 26 : -1);
+            i0.ɵɵadvance();
+            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() ? 28 : -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], 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], 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()) {
-              <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">
-                        Account 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">
-                <div [ngClass]="contentClasses()" class="px-8 py-8">
-                  <div class="mb-6">
-                    <h2 [ngClass]="sectionTitleClasses()" class="text-2xl font-bold mb-2">
-                      Create Account
-                    </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>
-            }
-          </div>
-        </main>
-
-        <!-- Sticky Continue Button -->
-        @if (!accountData() || editMode()) {
-          <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()) {
-                  <button
-                    type="button"
-                    (click)="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)="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 (accountData() && editMode()) {
-                      Updating Account...
-                    } @else {
-                      Creating Account...
-                    }
-                  } @else {
-                    @if (accountData() && editMode()) {
-                      Edit Account
-                    } @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()) {
+              <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>
   `, 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,
@@ -52620,7 +54034,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: 464 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqCreateAccountDashboardComponent, { className: "SymphiqCreateAccountDashboardComponent", filePath: "lib/components/create-account-dashboard/symphiq-create-account-dashboard.component.ts", lineNumber: 629 }); })();
 
 class SymphiqConnectGaDashboardComponent {
     constructor() {
@@ -57375,254 +58789,254 @@ class SymphiqBusinessAnalysisDashboardComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SymphiqBusinessAnalysisDashboardComponent, [{
         type: Component,
-        args: [{ selector: 'symphiq-business-analysis-dashboard', standalone: true, imports: [CommonModule, ProfileSectionComponent, SectionNavigationComponent, FloatingTocComponent, FloatingBackButtonComponent, TooltipContainerComponent, SectionDividerComponent, BusinessAnalysisModalComponent, SearchButtonComponent, SearchModalComponent, ViewModeSwitcherModalComponent, JourneyProgressIndicatorComponent, WelcomeBannerComponent, RecommendationsTiledGridComponent, CollapsibleSectionGroupComponent, ContentGenerationProgressComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <div [ngClass]="getContainerClasses()">
-      <!-- Scroll Progress Bar (fixed at top) -->
-      <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-purple-500' : 'bg-gradient-to-r from-blue-400 to-purple-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 (default state) -->
-          <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()">
-                    {{ currentProfile()?.profileStructured?.businessName || 'Business Analysis' }}
-                  </h1>
-                  <p [ngClass]="getSubtitleClasses()">
-                    Business Profile & Analysis
-                  </p>
-                </div>
-                @if (profile()?.selfContentStatus === AiDynamicContentStatusEnum.GENERATED) {
-                  <div class="flex items-center gap-2">
-                    <symphiq-search-button
-                      [isLightMode]="isLightMode()"
-                      (searchClick)="openSearch()"
-                    />
-                    <button
-                      type="button"
-                      (click)="openViewModeSwitcher()"
-                      [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>{{ displayModeLabel() }}</span>
-                    </button>
-                  </div>
-                }
-              </div>
-            </div>
-          </div>
-
-          <!-- Condensed Header (scrolled state) -->
-          <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-purple-600 bg-clip-text text-transparent truncate' : 'text-xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent truncate'">
-                    {{ currentProfile()?.profileStructured?.businessName || 'Business Analysis' }}
-                  </h1>
-                </div>
-                <div class="flex items-center gap-4">
-                  @if (!isSimplifiedView()) {
-                    <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]="sectionTitleFading()" [class.opacity-100]="!sectionTitleFading()">
-                        {{ currentSectionTitle() }}
-                      </span>
-                      @if (currentSubsectionTitle()) {
-                        <span [ngClass]="isLightMode() ? 'text-slate-400' : 'text-slate-500'" class="transition-opacity duration-300" [class.opacity-0]="subsectionTitleFading()" [class.opacity-100]="!subsectionTitleFading()">›</span>
-                        <span [ngClass]="isLightMode() ? 'text-slate-500' : 'text-slate-500'" class="transition-opacity duration-300" [class.opacity-0]="subsectionTitleFading()" [class.opacity-100]="!subsectionTitleFading()">
-                          {{ currentSubsectionTitle() }}
-                        </span>
-                      }
-                    </div>
-                  }
-                  @if (profile()?.selfContentStatus === AiDynamicContentStatusEnum.GENERATED) {
-                    <symphiq-search-button
-                      [isLightMode]="isLightMode()"
-                      [minimized]="true"
-                      (searchClick)="openSearch()"
-                    />
-                    <button
-                      type="button"
-                      (click)="openViewModeSwitcher()"
-                      [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>
-
-        <main class="relative">
-          @if (isContentGenerating()) {
-            <!-- Journey Progress Banner (always show when not onboarded) -->
-            @if (!isOnboarded()) {
-              <symphiq-journey-progress-indicator
-                [viewMode]="viewMode()"
-                [currentStepId]="JourneyStepIdEnum.BUSINESS_ANALYSIS"
-                [showNextStepAction]="false"
-                [forDemo]="forDemo()"
-                [maxAccessibleStepId]="maxAccessibleStepId()"
-                (stepClick)="stepClick.emit($event)"
-                (nextStepClick)="nextStepClick.emit()"
-              />
-            }
-
-            <!-- Content Generation Progress Component -->
-            <symphiq-content-generation-progress
-              [viewMode]="viewMode()"
-              [title]="'We are generating a new Business Analysis for ' + (currentProfile()?.profileStructured?.businessName || 'your business') + '.'"
-              [subtitle]="'It will appear here when ready. You can check back later as this will take a few minutes to complete.'"
-            />
-          } @else {
-            @if (isSimplifiedView()) {
-              <!-- Journey Progress Banner - Full Width Sticky (only show when not onboarded) -->
-              @if (!isOnboarded()) {
-                <symphiq-journey-progress-indicator
-                  [viewMode]="viewMode()"
-                  [currentStepId]="JourneyStepIdEnum.BUSINESS_ANALYSIS"
-                  [showNextStepAction]="showNextStepAction()"
-                  [forDemo]="forDemo()"
-                  [maxAccessibleStepId]="maxAccessibleStepId()"
-                  (stepClick)="stepClick.emit($event)"
-                  (nextStepClick)="nextStepClick.emit()"
-                />
-              }
-
-              <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-                <div class="mb-8">
-                  <symphiq-welcome-banner
-                    [viewMode]="viewMode()"
-                    [businessName]="currentProfile()?.profileStructured?.businessName || 'your business'"
-                    [isOnboarded]="isOnboarded()"
-                  />
-                </div>
-
-                <div class="mb-8">
-                  <symphiq-recommendations-tiled-grid
-                    [recommendations]="recommendationItems()"
-                    [viewMode]="viewMode()"
-                    (viewMoreClick)="openRecommendationDetailsModal($event)"
-                  />
-                </div>
-
-                <div>
-                  <symphiq-collapsible-section-group
-                    [sections]="nonRecommendationSections()"
-                    [viewMode]="viewMode()"
-                  />
-                </div>
-              </div>
-            } @else {
-              @for (section of sections(); track trackBySectionId($index, section); let idx = $index; let last = $last) {
-                <symphiq-profile-section
-                  [section]="section"
-                  [viewMode]="viewMode()"
-                  [forceExpanded]="!isCompactView()"
-                />
-                @if (!last) {
-                  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-                    <symphiq-section-divider
-                      [viewMode]="viewMode()"
-                      [subsections]="sections()[idx + 1].subsections || []" />
-                  </div>
-                }
-              }
-            }
-          }
-        </main>
-
-        @if (!isSimplifiedView()) {
-          <symphiq-section-navigation
-            [sections]="sections()"
-            [viewMode]="viewMode()"
-            [embedded]="embedded()"
-            [scrollElement]="scrollElement() ?? undefined"
-          />
-        }
-
-        @if (!isSimplifiedView()) {
-          <symphiq-floating-toc
-            [sections]="sections()"
-            [viewMode]="viewMode()"
-            [embedded]="embedded()"
-            [scrollElement]="scrollElement() ?? undefined"
-          />
-        }
-
-        <symphiq-floating-back-button
-          [viewMode]="viewMode()"
-          [embedded]="embedded()"
-        />
-      </div>
-
-      @if (isLoading()) {
-        <div [ngClass]="getLoadingOverlayClasses()">
-          <div [ngClass]="getSpinnerClasses()"></div>
-        </div>
-      }
-
-      <symphiq-tooltip-container />
-      <symphiq-business-analysis-modal
-        [isLightMode]="isLightMode()"
-        (viewInContextRequested)="handleViewInContext($event)" />
-
-      <symphiq-search-modal
-        [isLightMode]="isLightMode()"
-        [isOpen]="searchService.isSearchOpen()"
-        [searchQuery]="searchService.getSearchQuery()"
-        [results]="searchService.searchResults()"
-        [hasResults]="searchService.hasResults()"
-        [selectedIndex]="selectedSearchIndex()"
-        [placeholder]="'Search sections, items, and analysis...'"
-        (searchChange)="onSearchChange($event)"
-        (resultSelected)="onSearchResultSelected($event)"
-        (close)="closeSearch()"
-      />
-
-      <symphiq-view-mode-switcher-modal
-        [isOpen]="isViewModeSwitcherOpen()"
-        [currentMode]="displayMode()"
-        [viewMode]="viewMode()"
-        [isLoading]="isViewModeSwitching()"
-        (close)="closeViewModeSwitcher()"
-        (modeSelected)="handleDisplayModeChange($event)"
-      />
-    </div>
+        args: [{ selector: 'symphiq-business-analysis-dashboard', standalone: true, imports: [CommonModule, ProfileSectionComponent, SectionNavigationComponent, FloatingTocComponent, FloatingBackButtonComponent, TooltipContainerComponent, SectionDividerComponent, BusinessAnalysisModalComponent, SearchButtonComponent, SearchModalComponent, ViewModeSwitcherModalComponent, JourneyProgressIndicatorComponent, WelcomeBannerComponent, RecommendationsTiledGridComponent, CollapsibleSectionGroupComponent, ContentGenerationProgressComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div [ngClass]="getContainerClasses()">
+      <!-- Scroll Progress Bar (fixed at top) -->
+      <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-purple-500' : 'bg-gradient-to-r from-blue-400 to-purple-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 (default state) -->
+          <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()">
+                    {{ currentProfile()?.profileStructured?.businessName || 'Business Analysis' }}
+                  </h1>
+                  <p [ngClass]="getSubtitleClasses()">
+                    Business Profile & Analysis
+                  </p>
+                </div>
+                @if (profile()?.selfContentStatus === AiDynamicContentStatusEnum.GENERATED) {
+                  <div class="flex items-center gap-2">
+                    <symphiq-search-button
+                      [isLightMode]="isLightMode()"
+                      (searchClick)="openSearch()"
+                    />
+                    <button
+                      type="button"
+                      (click)="openViewModeSwitcher()"
+                      [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>{{ displayModeLabel() }}</span>
+                    </button>
+                  </div>
+                }
+              </div>
+            </div>
+          </div>
+
+          <!-- Condensed Header (scrolled state) -->
+          <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-purple-600 bg-clip-text text-transparent truncate' : 'text-xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent truncate'">
+                    {{ currentProfile()?.profileStructured?.businessName || 'Business Analysis' }}
+                  </h1>
+                </div>
+                <div class="flex items-center gap-4">
+                  @if (!isSimplifiedView()) {
+                    <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]="sectionTitleFading()" [class.opacity-100]="!sectionTitleFading()">
+                        {{ currentSectionTitle() }}
+                      </span>
+                      @if (currentSubsectionTitle()) {
+                        <span [ngClass]="isLightMode() ? 'text-slate-400' : 'text-slate-500'" class="transition-opacity duration-300" [class.opacity-0]="subsectionTitleFading()" [class.opacity-100]="!subsectionTitleFading()">›</span>
+                        <span [ngClass]="isLightMode() ? 'text-slate-500' : 'text-slate-500'" class="transition-opacity duration-300" [class.opacity-0]="subsectionTitleFading()" [class.opacity-100]="!subsectionTitleFading()">
+                          {{ currentSubsectionTitle() }}
+                        </span>
+                      }
+                    </div>
+                  }
+                  @if (profile()?.selfContentStatus === AiDynamicContentStatusEnum.GENERATED) {
+                    <symphiq-search-button
+                      [isLightMode]="isLightMode()"
+                      [minimized]="true"
+                      (searchClick)="openSearch()"
+                    />
+                    <button
+                      type="button"
+                      (click)="openViewModeSwitcher()"
+                      [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>
+
+        <main class="relative">
+          @if (isContentGenerating()) {
+            <!-- Journey Progress Banner (always show when not onboarded) -->
+            @if (!isOnboarded()) {
+              <symphiq-journey-progress-indicator
+                [viewMode]="viewMode()"
+                [currentStepId]="JourneyStepIdEnum.BUSINESS_ANALYSIS"
+                [showNextStepAction]="false"
+                [forDemo]="forDemo()"
+                [maxAccessibleStepId]="maxAccessibleStepId()"
+                (stepClick)="stepClick.emit($event)"
+                (nextStepClick)="nextStepClick.emit()"
+              />
+            }
+
+            <!-- Content Generation Progress Component -->
+            <symphiq-content-generation-progress
+              [viewMode]="viewMode()"
+              [title]="'We are generating a new Business Analysis for ' + (currentProfile()?.profileStructured?.businessName || 'your business') + '.'"
+              [subtitle]="'It will appear here when ready. You can check back later as this will take a few minutes to complete.'"
+            />
+          } @else {
+            @if (isSimplifiedView()) {
+              <!-- Journey Progress Banner - Full Width Sticky (only show when not onboarded) -->
+              @if (!isOnboarded()) {
+                <symphiq-journey-progress-indicator
+                  [viewMode]="viewMode()"
+                  [currentStepId]="JourneyStepIdEnum.BUSINESS_ANALYSIS"
+                  [showNextStepAction]="showNextStepAction()"
+                  [forDemo]="forDemo()"
+                  [maxAccessibleStepId]="maxAccessibleStepId()"
+                  (stepClick)="stepClick.emit($event)"
+                  (nextStepClick)="nextStepClick.emit()"
+                />
+              }
+
+              <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+                <div class="mb-8">
+                  <symphiq-welcome-banner
+                    [viewMode]="viewMode()"
+                    [businessName]="currentProfile()?.profileStructured?.businessName || 'your business'"
+                    [isOnboarded]="isOnboarded()"
+                  />
+                </div>
+
+                <div class="mb-8">
+                  <symphiq-recommendations-tiled-grid
+                    [recommendations]="recommendationItems()"
+                    [viewMode]="viewMode()"
+                    (viewMoreClick)="openRecommendationDetailsModal($event)"
+                  />
+                </div>
+
+                <div>
+                  <symphiq-collapsible-section-group
+                    [sections]="nonRecommendationSections()"
+                    [viewMode]="viewMode()"
+                  />
+                </div>
+              </div>
+            } @else {
+              @for (section of sections(); track trackBySectionId($index, section); let idx = $index; let last = $last) {
+                <symphiq-profile-section
+                  [section]="section"
+                  [viewMode]="viewMode()"
+                  [forceExpanded]="!isCompactView()"
+                />
+                @if (!last) {
+                  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+                    <symphiq-section-divider
+                      [viewMode]="viewMode()"
+                      [subsections]="sections()[idx + 1].subsections || []" />
+                  </div>
+                }
+              }
+            }
+          }
+        </main>
+
+        @if (!isSimplifiedView()) {
+          <symphiq-section-navigation
+            [sections]="sections()"
+            [viewMode]="viewMode()"
+            [embedded]="embedded()"
+            [scrollElement]="scrollElement() ?? undefined"
+          />
+        }
+
+        @if (!isSimplifiedView()) {
+          <symphiq-floating-toc
+            [sections]="sections()"
+            [viewMode]="viewMode()"
+            [embedded]="embedded()"
+            [scrollElement]="scrollElement() ?? undefined"
+          />
+        }
+
+        <symphiq-floating-back-button
+          [viewMode]="viewMode()"
+          [embedded]="embedded()"
+        />
+      </div>
+
+      @if (isLoading()) {
+        <div [ngClass]="getLoadingOverlayClasses()">
+          <div [ngClass]="getSpinnerClasses()"></div>
+        </div>
+      }
+
+      <symphiq-tooltip-container />
+      <symphiq-business-analysis-modal
+        [isLightMode]="isLightMode()"
+        (viewInContextRequested)="handleViewInContext($event)" />
+
+      <symphiq-search-modal
+        [isLightMode]="isLightMode()"
+        [isOpen]="searchService.isSearchOpen()"
+        [searchQuery]="searchService.getSearchQuery()"
+        [results]="searchService.searchResults()"
+        [hasResults]="searchService.hasResults()"
+        [selectedIndex]="selectedSearchIndex()"
+        [placeholder]="'Search sections, items, and analysis...'"
+        (searchChange)="onSearchChange($event)"
+        (resultSelected)="onSearchResultSelected($event)"
+        (close)="closeSearch()"
+      />
+
+      <symphiq-view-mode-switcher-modal
+        [isOpen]="isViewModeSwitcherOpen()"
+        [currentMode]="displayMode()"
+        [viewMode]="viewMode()"
+        [isLoading]="isViewModeSwitching()"
+        (close)="closeViewModeSwitcher()"
+        (modeSelected)="handleDisplayModeChange($event)"
+      />
+    </div>
   `, styles: [":host{display:block}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse-highlight{0%,to{transform:scale(1);box-shadow:0 0 #3b82f6b3}50%{transform:scale(1.02);box-shadow:0 0 20px 8px #3b82f64d}}:host ::ng-deep .search-highlight-pulse{animation:pulse-highlight 2s ease-in-out;border-color:#3b82f6!important}\n"] }]
     }], () => [], { embedded: [{ type: i0.Input, args: [{ isSignal: true, alias: "embedded", required: false }] }], profile: [{ type: i0.Input, args: [{ isSignal: true, alias: "profile", required: false }] }], parentHeaderOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentHeaderOffset", required: false }] }], requestedByUser: [{ type: i0.Input, args: [{ isSignal: true, alias: "requestedByUser", 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 }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], isOnboarded: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOnboarded", required: false }] }], forDemo: [{ type: i0.Input, args: [{ isSignal: true, alias: "forDemo", required: false }] }], maxAccessibleStepId: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxAccessibleStepId", required: false }] }], stepClick: [{ type: i0.Output, args: ["stepClick"] }], nextStepClick: [{ type: i0.Output, args: ["nextStepClick"] }], onScroll: [{
             type: HostListener,
@@ -103391,5 +104805,5 @@ const PROFILE_ANALYSIS_METRIC_SCREEN_PAGE_VIEWS = ({
  * Generated bundle index. Do not edit.
  */
 
-export { AreaChartComponent, BUSINESS_PROFILE, BarChartComponent, BreakdownSectionComponent, BusinessAnalysisModalComponent, BusinessProfileSearchService, ChartCardComponent, ChartContainerComponent, ChartThemeService, CircularProgressComponent, CompetitivePositioningSummaryComponent, CompetitorAnalysisCardComponent, ConfidenceLevelCardComponent, ContentGenerationProgressComponent, CrossDashboardRelationshipsService, FUNNEL_ANALYSIS, FloatingBackButtonComponent, FloatingTocComponent, FocusAreaDetailCardComponent, FocusAreaExecutiveSummaryComponent, FunnelOrderService, GradeBadgeComponent, HeaderScrollService, HierarchyDisplayComponent, HorizontalBarComponent, IconService, InsightCardComponent, JourneyProgressIndicatorComponent, JourneyStepIdEnum, LineChartComponent, MetricCardComponent, MetricExecutiveSummaryComponent, MetricFormatterService, MetricListItemComponent, MetricWelcomeBannerComponent, MobileBottomNavComponent, MobileFABComponent, ModalComponent, ModalService, NapkinVisualPlaceholderComponent, NavigationStateService, OpportunityHighlightBannerComponent, OverallAssessmentComponent, PROFILE_ANALYSIS_FOCUS_AREA_AFFILIATE, PROFILE_ANALYSIS_METRIC_SCREEN_PAGE_VIEWS, PROFILE_ANALYSIS_SHOP, PieChartComponent, ProfileItemCardComponent, ProfileSectionComponent, ProfileSubsectionComponent, RelatedContentSidebarComponent, ScrollDepthService, ScrollProgressBarComponent, SearchButtonComponent, SearchModalComponent, SectionDividerComponent, SectionNavigationComponent, ShadowElevationDirective, ShopPlatformEnum, ShopWelcomeBannerComponent, SkeletonBarComponent, SkeletonCardBaseComponent, SkeletonCircleComponent, SkeletonCompetitorCardComponent, SkeletonCustomerSegmentCardComponent, SkeletonFocusAreaCardComponent, SkeletonGenericCardComponent, SkeletonLoaderComponent, SkeletonPriceTierCardComponent, SkeletonProductCategoryCardComponent, SkeletonRegionCardComponent, SkeletonSeasonCardComponent, SymphiqBusinessAnalysisDashboardComponent, SymphiqConnectGaDashboardComponent, SymphiqCreateAccountDashboardComponent, SymphiqFunnelAnalysisDashboardComponent, SymphiqFunnelAnalysisPreviewComponent, SymphiqIconComponent, SymphiqProfileAnalysisDashboardComponent, SymphiqWelcomeDashboardComponent, TooltipContainerComponent, TooltipDataService, TooltipDirective, TooltipService, ViewModeService, ViewportAnimationDirective, VisualizationContainerComponent, getBadgeLabelClasses, getButtonClasses, getCategoryBadgeClasses, getCategoryColor, getCompetitiveBadgeClasses, getContainerClasses, getFooterClasses, getGradeBadgeClasses, getHeaderClasses, getInsightsBadgeClasses, getInsightsCardClasses, getMetricLabelClasses, getMetricMiniCardClasses, getMetricValueClasses, getNarrativeTextClasses, getRevenueCardClasses, getRevenueIconClasses, getStatusBadgeClasses, getStatusDotClasses, getStatusIconClasses, getStatusSummaryClasses, getSubtitleClasses, getTitleClasses, getTrendClasses, getTrendIconClasses, getTrendValueClasses, isLightMode };
+export { AreaChartComponent, BUSINESS_PROFILE, BarChartComponent, BreakdownSectionComponent, BusinessAnalysisModalComponent, BusinessProfileSearchService, ChartCardComponent, ChartContainerComponent, ChartThemeService, CircularProgressComponent, CompetitivePositioningSummaryComponent, CompetitorAnalysisCardComponent, ConfidenceLevelCardComponent, ContentGenerationProgressComponent, CrossDashboardRelationshipsService, FUNNEL_ANALYSIS, FloatingBackButtonComponent, FloatingTocComponent, FocusAreaDetailCardComponent, FocusAreaExecutiveSummaryComponent, FocusAreaQuestionComponent, FocusAreaToolsModalComponent, FunnelOrderService, GradeBadgeComponent, HeaderScrollService, HierarchyDisplayComponent, HorizontalBarComponent, IconService, InsightCardComponent, JourneyProgressIndicatorComponent, JourneyStepIdEnum, LineChartComponent, MetricCardComponent, MetricExecutiveSummaryComponent, MetricFormatterService, MetricListItemComponent, MetricWelcomeBannerComponent, MobileBottomNavComponent, MobileFABComponent, ModalComponent, ModalService, NapkinVisualPlaceholderComponent, NavigationStateService, OpportunityHighlightBannerComponent, OverallAssessmentComponent, PROFILE_ANALYSIS_FOCUS_AREA_AFFILIATE, PROFILE_ANALYSIS_METRIC_SCREEN_PAGE_VIEWS, PROFILE_ANALYSIS_SHOP, PieChartComponent, ProfileItemCardComponent, ProfileSectionComponent, ProfileSubsectionComponent, RelatedContentSidebarComponent, ScrollDepthService, ScrollProgressBarComponent, SearchButtonComponent, SearchModalComponent, SectionDividerComponent, SectionNavigationComponent, ShadowElevationDirective, ShopPlatformEnum, ShopWelcomeBannerComponent, SkeletonBarComponent, SkeletonCardBaseComponent, SkeletonCircleComponent, SkeletonCompetitorCardComponent, SkeletonCustomerSegmentCardComponent, SkeletonFocusAreaCardComponent, SkeletonGenericCardComponent, SkeletonLoaderComponent, SkeletonPriceTierCardComponent, SkeletonProductCategoryCardComponent, SkeletonRegionCardComponent, SkeletonSeasonCardComponent, SymphiqBusinessAnalysisDashboardComponent, SymphiqConnectGaDashboardComponent, SymphiqCreateAccountDashboardComponent, SymphiqFunnelAnalysisDashboardComponent, SymphiqFunnelAnalysisPreviewComponent, SymphiqIconComponent, SymphiqProfileAnalysisDashboardComponent, SymphiqWelcomeDashboardComponent, TooltipContainerComponent, TooltipDataService, TooltipDirective, TooltipService, ViewModeService, ViewportAnimationDirective, VisualizationContainerComponent, getBadgeLabelClasses, getButtonClasses, getCategoryBadgeClasses, getCategoryColor, getCompetitiveBadgeClasses, getContainerClasses, getFooterClasses, getGradeBadgeClasses, getHeaderClasses, getInsightsBadgeClasses, getInsightsCardClasses, getMetricLabelClasses, getMetricMiniCardClasses, getMetricValueClasses, getNarrativeTextClasses, getRevenueCardClasses, getRevenueIconClasses, getStatusBadgeClasses, getStatusDotClasses, getStatusIconClasses, getStatusSummaryClasses, getSubtitleClasses, getTitleClasses, getTrendClasses, getTrendIconClasses, getTrendValueClasses, isLightMode };
 //# sourceMappingURL=symphiq-components.mjs.map