@eric-emg/symphiq-components 1.2.339 → 1.2.341

package/fesm2022/symphiq-components.mjs

@@ -3232,7 +3232,7 @@ class DataLoaderService {
         args: [{ providedIn: 'root' }]
     }], () => [{ type: i1.HttpClient }], null); })();
 
-const _c0$18 = a0 => ["skeleton-loader", "rounded-lg", "relative", "overflow-hidden", a0];
+const _c0$19 = a0 => ["skeleton-loader", "rounded-lg", "relative", "overflow-hidden", a0];
 const _c1$E = a0 => ["skeleton-shimmer-overlay", "absolute", "inset-0", "bg-gradient-to-r", a0];
 class SkeletonLoaderComponent {
     constructor() {
@@ -3249,7 +3249,7 @@ class SkeletonLoaderComponent {
         } if (rf & 2) {
             i0.ɵɵstyleProp("width", ctx.width())("height", ctx.height());
             i0.ɵɵclassProp("skeleton-shimmer", true)("skeleton-pulse", ctx.pulse());
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(10, _c0$18, ctx.isLightMode() ? "bg-slate-200/80" : "bg-slate-700/80"));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(10, _c0$19, ctx.isLightMode() ? "bg-slate-200/80" : "bg-slate-700/80"));
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(12, _c1$E, ctx.isLightMode() ? "from-transparent via-white/60 to-transparent" : "from-transparent via-slate-500/40 to-transparent"));
         } }, dependencies: [NgClass], styles: [".skeleton-loader[_ngcontent-%COMP%]{position:relative;overflow:hidden}.skeleton-shimmer-overlay[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_shimmer 2s infinite cubic-bezier(.4,0,.6,1);transform:translate(-100%)}@keyframes _ngcontent-%COMP%_shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.skeleton-pulse[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes _ngcontent-%COMP%_pulse{0%,to{opacity:1}50%{opacity:.6}}"], changeDetection: 0 }); }
@@ -3289,7 +3289,7 @@ const ChartContainerComponent_Conditional_1_Conditional_13_Defer_2_DepsFn = () =
 const ChartContainerComponent_Conditional_1_Conditional_14_Defer_2_DepsFn = () => [Promise.resolve().then(function () { return barChart_component; }).then(m => m.BarChartComponent)];
 const ChartContainerComponent_Conditional_1_Conditional_15_Defer_2_DepsFn = () => [Promise.resolve().then(function () { return pieChart_component; }).then(m => m.PieChartComponent)];
 const ChartContainerComponent_Conditional_1_Conditional_16_Defer_2_DepsFn = () => [Promise.resolve().then(function () { return areaChart_component; }).then(m => m.AreaChartComponent)];
-const _c0$17 = (a0, a1) => [a0, a1];
+const _c0$18 = (a0, a1) => [a0, a1];
 function ChartContainerComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 0)(1, "div", 2);
     i0.ɵɵelement(2, "symphiq-skeleton-loader", 3)(3, "symphiq-skeleton-loader", 3);
@@ -3341,7 +3341,7 @@ function ChartContainerComponent_Conditional_1_Conditional_11_Template(rf, ctx)
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(1, _c0$17, ctx_r0.iconClass(), ctx_r0.isLightMode() ? "bg-white/90 hover:bg-white" : "bg-slate-800/90 hover:bg-slate-800"));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(1, _c0$18, ctx_r0.iconClass(), ctx_r0.isLightMode() ? "bg-white/90 hover:bg-white" : "bg-slate-800/90 hover:bg-slate-800"));
 } }
 function ChartContainerComponent_Conditional_1_Conditional_13_Defer_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "symphiq-line-chart", 23);
@@ -4943,7 +4943,7 @@ class CompetitivePositioningSummaryComponent {
     }], null, { metrics: [{ type: i0.Input, args: [{ isSignal: true, alias: "metrics", required: false }] }], isLightMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLightMode", required: false }] }], isCompactMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCompactMode", required: false }] }], overallDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "overallDescription", required: false }] }], competitiveBenchmark: [{ type: i0.Input, args: [{ isSignal: true, alias: "competitiveBenchmark", required: false }] }], currencySymbol: [{ type: i0.Input, args: [{ isSignal: true, alias: "currencySymbol", required: false }] }], scrollToCompetitive: [{ type: i0.Output, args: ["scrollToCompetitive"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CompetitivePositioningSummaryComponent, { className: "CompetitivePositioningSummaryComponent", filePath: "lib/components/funnel-analysis-dashboard/competitive-positioning-summary.component.ts", lineNumber: 298 }); })();
 
-const _c0$16 = () => [1, 2, 3, 4];
+const _c0$17 = () => [1, 2, 3, 4];
 function OverallAssessmentComponent_Conditional_0_For_10_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 9);
     i0.ɵɵelement(1, "symphiq-skeleton-loader", 6)(2, "symphiq-skeleton-loader", 6);
@@ -4977,7 +4977,7 @@ function OverallAssessmentComponent_Conditional_0_Template(rf, ctx) { if (rf & 1
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("width", "100px")("height", "70px")("isLightMode", ctx_r0.isLightMode());
     i0.ɵɵadvance(2);
-    i0.ɵɵrepeater(i0.ɵɵpureFunction0(14, _c0$16));
+    i0.ɵɵrepeater(i0.ɵɵpureFunction0(14, _c0$17));
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("width", "100%")("height", "200px")("isLightMode", ctx_r0.isLightMode());
 } }
@@ -6192,7 +6192,7 @@ class OverallAssessmentComponent {
     }], null, { assessment: [{ type: i0.Input, args: [{ isSignal: true, alias: "assessment", required: false }] }], revenueMetric: [{ type: i0.Input, args: [{ isSignal: true, alias: "revenueMetric", required: false }] }], charts: [{ type: i0.Input, args: [{ isSignal: true, alias: "charts", required: false }] }], metrics: [{ type: i0.Input, args: [{ isSignal: true, alias: "metrics", required: false }] }], isLightMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLightMode", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], isCompactMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCompactMode", required: false }] }], isChartsLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isChartsLoading", required: false }] }], strengths: [{ type: i0.Input, args: [{ isSignal: true, alias: "strengths", required: false }] }], weaknesses: [{ type: i0.Input, args: [{ isSignal: true, alias: "weaknesses", required: false }] }], currencySymbol: [{ type: i0.Input, args: [{ isSignal: true, alias: "currencySymbol", required: false }] }], scrollToSection: [{ type: i0.Output, args: ["scrollToSection"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(OverallAssessmentComponent, { className: "OverallAssessmentComponent", filePath: "lib/components/funnel-analysis-dashboard/overall-assessment.component.ts", lineNumber: 303 }); })();
 
-const _c0$15 = () => [1, 2, 3];
+const _c0$16 = () => [1, 2, 3];
 const _c1$D = () => [1, 2, 3, 4];
 const _c2$q = () => [];
 function InsightCardComponent_Conditional_0_Conditional_0_For_7_Template(rf, ctx) { if (rf & 1) {
@@ -6230,7 +6230,7 @@ function InsightCardComponent_Conditional_0_Conditional_0_Template(rf, ctx) { if
     i0.ɵɵadvance();
     i0.ɵɵproperty("width", "60%")("height", "20px")("isLightMode", ctx_r0.isLightMode());
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(i0.ɵɵpureFunction0(8, _c0$15));
+    i0.ɵɵrepeater(i0.ɵɵpureFunction0(8, _c0$16));
     i0.ɵɵadvance(3);
     i0.ɵɵrepeater(i0.ɵɵpureFunction0(9, _c1$D));
 } }
@@ -8930,7 +8930,7 @@ class MetricCardComponent {
     }], () => [], { metric: [{ type: i0.Input, args: [{ isSignal: true, alias: "metric", required: false }] }], insights: [{ type: i0.Input, args: [{ isSignal: true, alias: "insights", required: false }] }], charts: [{ type: i0.Input, args: [{ isSignal: true, alias: "charts", required: false }] }], allCharts: [{ type: i0.Input, args: [{ isSignal: true, alias: "allCharts", required: false }] }], analysis: [{ type: i0.Input, args: [{ isSignal: true, alias: "analysis", required: false }] }], isLightMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLightMode", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], isCompactMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCompactMode", required: false }] }], isInModal: [{ type: i0.Input, args: [{ isSignal: true, alias: "isInModal", required: false }] }], currentModalState: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentModalState", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], initialExpandedSection: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialExpandedSection", required: false }] }], currencySymbol: [{ type: i0.Input, args: [{ isSignal: true, alias: "currencySymbol", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MetricCardComponent, { className: "MetricCardComponent", filePath: "lib/components/funnel-analysis-dashboard/metric-card.component.ts", lineNumber: 537 }); })();
 
-const _c0$14 = () => [1, 2, 3];
+const _c0$15 = () => [1, 2, 3];
 const _c1$C = (a0, a1, a2) => [a0, a1, a2];
 const _c2$p = (a0, a1) => [a0, a1];
 const _forTrack0$S = ($index, $item) => $item.metric;
@@ -8960,7 +8960,7 @@ function BreakdownSectionComponent_Conditional_0_For_7_Template(rf, ctx) { if (r
     i0.ɵɵadvance();
     i0.ɵɵproperty("width", "30%")("height", "18px")("isLightMode", ctx_r0.isLightMode());
     i0.ɵɵadvance(2);
-    i0.ɵɵrepeater(i0.ɵɵpureFunction0(3, _c0$14));
+    i0.ɵɵrepeater(i0.ɵɵpureFunction0(3, _c0$15));
 } }
 function BreakdownSectionComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 0)(1, "div", 2);
@@ -8979,7 +8979,7 @@ function BreakdownSectionComponent_Conditional_0_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵadvance();
     i0.ɵɵproperty("width", "85%")("height", "14px")("isLightMode", ctx_r0.isLightMode());
     i0.ɵɵadvance(2);
-    i0.ɵɵrepeater(i0.ɵɵpureFunction0(10, _c0$14));
+    i0.ɵɵrepeater(i0.ɵɵpureFunction0(10, _c0$15));
 } }
 function BreakdownSectionComponent_Conditional_1_Conditional_6_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
@@ -11507,7 +11507,7 @@ class FunnelWeaknessesListModalContentComponent {
     }], null, { weaknesses: [{ type: i0.Input, args: [{ isSignal: true, alias: "weaknesses", required: true }] }], isLightMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLightMode", required: true }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FunnelWeaknessesListModalContentComponent, { className: "FunnelWeaknessesListModalContentComponent", filePath: "lib/components/funnel-analysis-dashboard/funnel-weaknesses-list-modal-content.component.ts", lineNumber: 132 }); })();
 
-const _c0$13 = () => [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+const _c0$14 = () => [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 function FunnelStrengthDetailModalContentComponent_For_18_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "div", 12);
 } if (rf & 2) {
@@ -11783,7 +11783,7 @@ class FunnelStrengthDetailModalContentComponent {
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngClass", ctx.impactScoreLabelClasses());
             i0.ɵɵadvance(3);
-            i0.ɵɵrepeater(i0.ɵɵpureFunction0(35, _c0$13));
+            i0.ɵɵrepeater(i0.ɵɵpureFunction0(35, _c0$14));
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngClass", ctx.titleClasses());
             i0.ɵɵadvance();
@@ -11959,7 +11959,7 @@ class FunnelStrengthDetailModalContentComponent {
     }], null, { strength: [{ type: i0.Input, args: [{ isSignal: true, alias: "strength", required: true }] }], isLightMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLightMode", required: true }] }], allMetrics: [{ type: i0.Input, args: [{ isSignal: true, alias: "allMetrics", required: false }] }], allCharts: [{ type: i0.Input, args: [{ isSignal: true, alias: "allCharts", required: false }] }], currentModalState: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentModalState", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FunnelStrengthDetailModalContentComponent, { className: "FunnelStrengthDetailModalContentComponent", filePath: "lib/components/funnel-analysis-dashboard/funnel-strength-detail-modal-content.component.ts", lineNumber: 128 }); })();
 
-const _c0$12 = () => [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+const _c0$13 = () => [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 function FunnelWeaknessDetailModalContentComponent_For_27_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "div", 17);
 } if (rf & 2) {
@@ -12470,7 +12470,7 @@ class FunnelWeaknessDetailModalContentComponent {
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngClass", ctx.impactScoreLabelClasses());
             i0.ɵɵadvance(3);
-            i0.ɵɵrepeater(i0.ɵɵpureFunction0(49, _c0$12));
+            i0.ɵɵrepeater(i0.ɵɵpureFunction0(49, _c0$13));
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngClass", ctx.titleClasses());
             i0.ɵɵadvance();
@@ -12931,7 +12931,7 @@ class ProfileItemLookupService {
             }]
     }], null, null); })();
 
-const _c0$11 = a0 => ({ name: "chevron-right", source: a0 });
+const _c0$12 = a0 => ({ name: "chevron-right", source: a0 });
 const _forTrack0$P = ($index, $item) => $item.id;
 function RelatedAreaChipsComponent_Conditional_0_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
@@ -12949,7 +12949,7 @@ function RelatedAreaChipsComponent_Conditional_0_For_2_Template(rf, ctx) { if (r
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(item_r2.label);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(3, _c0$11, ctx_r2.IconSourceEnum.HEROICONS));
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(3, _c0$12, ctx_r2.IconSourceEnum.HEROICONS));
 } }
 function RelatedAreaChipsComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 0);
@@ -13033,7 +13033,7 @@ class RelatedAreaChipsComponent {
     }], null, { relatedAreaIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "relatedAreaIds", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], inModalContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "inModalContext", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RelatedAreaChipsComponent, { className: "RelatedAreaChipsComponent", filePath: "lib/components/business-analysis-dashboard/shared/related-area-chips.component.ts", lineNumber: 31 }); })();
 
-const _c0$10 = a0 => ({ name: "chevron-right", source: a0 });
+const _c0$11 = a0 => ({ name: "chevron-right", source: a0 });
 function CompetitorChipListComponent_Conditional_0_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 2);
@@ -13050,7 +13050,7 @@ function CompetitorChipListComponent_Conditional_0_For_2_Template(rf, ctx) { if
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(ctx_r2.getItemLabel(item_r2));
     i0.ɵɵadvance();
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(3, _c0$10, ctx_r2.IconSourceEnum.HEROICONS));
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(3, _c0$11, ctx_r2.IconSourceEnum.HEROICONS));
 } }
 function CompetitorChipListComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 0);
@@ -13451,7 +13451,7 @@ class CompetitorContextSectionComponent {
     }], null, { contextType: [{ type: i0.Input, args: [{ isSignal: true, alias: "contextType", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], isCollapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCollapsible", required: false }] }], itemClicked: [{ type: i0.Output, args: ["itemClicked"] }] }); })();
 (() => { (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$$ = a0 => ({ name: "chevron-right", source: a0 });
+const _c0$10 = a0 => ({ name: "chevron-right", source: a0 });
 const _forTrack0$N = ($index, $item) => $item.id;
 function RelatedRecommendationChipsComponent_Conditional_0_For_3_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
@@ -13472,7 +13472,7 @@ function RelatedRecommendationChipsComponent_Conditional_0_For_3_Template(rf, ct
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(rec_r2.title);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(4, _c0$$, ctx_r2.IconSourceEnum.HEROICONS));
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(4, _c0$10, ctx_r2.IconSourceEnum.HEROICONS));
 } }
 function RelatedRecommendationChipsComponent_Conditional_0_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
@@ -20441,7 +20441,7 @@ class MarkdownTooltipComponent {
     }], 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(MarkdownTooltipComponent, { className: "MarkdownTooltipComponent", filePath: "lib/components/funnel-analysis-dashboard/tooltip/markdown-tooltip.component.ts", lineNumber: 69 }); })();
 
-const _c0$_ = () => [];
+const _c0$$ = () => [];
 function TooltipContainerComponent_Conditional_0_Case_3_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "symphiq-metric-value-tooltip", 6);
 } if (rf & 2) {
@@ -20605,7 +20605,7 @@ function TooltipContainerComponent_Conditional_0_Case_15_Conditional_1_Template(
 } if (rf & 2) {
     i0.ɵɵnextContext(2);
     const content_r4 = i0.ɵɵreadContextLet(2);
-    i0.ɵɵrepeater(content_r4["sections"] || i0.ɵɵpureFunction0(0, _c0$_));
+    i0.ɵɵrepeater(content_r4["sections"] || i0.ɵɵpureFunction0(0, _c0$$));
 } }
 function TooltipContainerComponent_Conditional_0_Case_15_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 3);
@@ -21711,7 +21711,7 @@ class SearchService {
             }]
     }], null, null); })();
 
-const _c0$Z = ["searchInput"];
+const _c0$_ = ["searchInput"];
 const _forTrack0$H = ($index, $item) => $item.id;
 function SearchBarComponent_Conditional_0_Conditional_10_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
@@ -22073,7 +22073,7 @@ class SearchBarComponent {
     }
     static { this.ɵfac = function SearchBarComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SearchBarComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SearchBarComponent, selectors: [["symphiq-search-bar"]], viewQuery: function SearchBarComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$Z, 5);
+            i0.ɵɵviewQuery(_c0$_, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.searchInput = _t.first);
@@ -25756,7 +25756,7 @@ class FunnelWelcomeBannerComponent {
     }], null, { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], isOnboarded: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOnboarded", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FunnelWelcomeBannerComponent, { className: "FunnelWelcomeBannerComponent", filePath: "lib/components/funnel-analysis-dashboard/funnel-welcome-banner.component.ts", lineNumber: 113 }); })();
 
-const _c0$Y = [[["", "slot", "overall-performance"]], [["", "slot", "performance-metrics"]], [["", "slot", "performance-breakdowns"]], [["", "slot", "competitive-intelligence"]]];
+const _c0$Z = [[["", "slot", "overall-performance"]], [["", "slot", "performance-metrics"]], [["", "slot", "performance-breakdowns"]], [["", "slot", "competitive-intelligence"]]];
 const _c1$B = ["[slot=overall-performance]", "[slot=performance-metrics]", "[slot=performance-breakdowns]", "[slot=competitive-intelligence]"];
 class CollapsibleFunnelSectionGroupComponent {
     constructor() {
@@ -25889,7 +25889,7 @@ class CollapsibleFunnelSectionGroupComponent {
     }
     static { this.ɵfac = function CollapsibleFunnelSectionGroupComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || CollapsibleFunnelSectionGroupComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CollapsibleFunnelSectionGroupComponent, selectors: [["symphiq-collapsible-funnel-section-group"]], inputs: { viewMode: [1, "viewMode"] }, ngContentSelectors: _c1$B, decls: 90, vars: 58, consts: [[1, "rounded-2xl", "border", "shadow-lg", "overflow-hidden", 3, "ngClass"], [1, "px-6", "py-5", "border-b", 3, "ngClass"], [1, "flex", "items-center", "justify-between"], [1, "flex", "items-center", "gap-3"], [1, "p-2.5", "rounded-lg", 3, "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", "M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "text-sm", "mt-0.5", 3, "ngClass"], [1, "p-6", 3, "ngClass"], [1, "mb-6", "p-4", "rounded-xl", "border", "flex", "items-start", "gap-3", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5", "flex-shrink-0", "mt-0.5", 3, "ngClass"], ["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, "flex-1"], [1, "font-semibold", "text-sm", "mb-1", 3, "ngClass"], [1, "text-sm", "leading-relaxed", 3, "ngClass"], [1, "space-y-3"], [1, "rounded-xl", "border", "overflow-hidden", "transition-all", "duration-200", 3, "id", "ngClass"], ["type", "button", 1, "cursor-pointer", "w-full", "px-5", "py-4", "flex", "items-center", "justify-between", "gap-4", "text-left", "transition-colors", "duration-200", 3, "click", "ngClass"], [1, "flex", "items-center", "gap-3", "flex-1", "min-w-0"], [1, "p-2", "rounded-lg", "flex-shrink-0", "transition-colors", "duration-200", 3, "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", "M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"], [1, "flex-1", "min-w-0"], [1, "font-semibold", "transition-colors", "duration-200", 3, "ngClass"], [1, "text-sm", "mt-0.5", "transition-colors", "duration-200", 3, "ngClass"], [1, "w-5", "h-5", "flex-shrink-0", "transition-transform", "duration-200", 3, "ngClass"], ["stroke", "currentColor", "stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M19 9l-7 7-7-7"], [1, "grid", "transition-[grid-template-rows]", "duration-300", "ease-in-out"], [1, "overflow-hidden"], [1, "border-t", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"]], template: function CollapsibleFunnelSectionGroupComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵprojectionDef(_c0$Y);
+            i0.ɵɵprojectionDef(_c0$Z);
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "div", 3)(4, "div", 4);
             i0.ɵɵnamespaceSVG();
             i0.ɵɵelementStart(5, "svg", 5);
@@ -26732,7 +26732,7 @@ class ViewModeSwitcherModalComponent {
     }], null, { isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }], currentMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentMode", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], close: [{ type: i0.Output, args: ["close"] }], modeSelected: [{ type: i0.Output, args: ["modeSelected"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ViewModeSwitcherModalComponent, { className: "ViewModeSwitcherModalComponent", filePath: "lib/components/shared/view-mode-switcher-modal.component.ts", lineNumber: 160 }); })();
 
-const _c0$X = a0 => ({ name: "check-badge", source: a0 });
+const _c0$Y = a0 => ({ name: "check-badge", source: a0 });
 const _c1$A = a0 => ({ name: "check-circle", source: a0 });
 const _c2$o = a0 => ({ name: "chevron-right", source: a0 });
 const _forTrack0$D = ($index, $item) => $item.area;
@@ -26749,7 +26749,7 @@ function KeyStrengthsListModalContentComponent_Conditional_1_Template(rf, ctx) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("ngClass", ctx_r0.emptyStateClasses());
     i0.ɵɵadvance();
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(5, _c0$X, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.emptyIconClasses());
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(5, _c0$Y, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.emptyIconClasses());
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r0.emptyTitleClasses());
     i0.ɵɵadvance(2);
@@ -26964,7 +26964,7 @@ class KeyStrengthsListModalContentComponent {
     }], null, { keyStrengths: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyStrengths", required: true }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: true }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KeyStrengthsListModalContentComponent, { className: "KeyStrengthsListModalContentComponent", filePath: "lib/components/profile-analysis-dashboard/modals/key-strengths-list-modal-content.component.ts", lineNumber: 79 }); })();
 
-const _c0$W = a0 => ({ name: "shield-check", source: a0 });
+const _c0$X = a0 => ({ name: "shield-check", source: a0 });
 const _c1$z = a0 => ({ name: "exclamation-triangle", source: a0 });
 const _c2$n = a0 => ({ name: "document-text", source: a0 });
 const _c3$h = a0 => ({ name: "chevron-right", source: a0 });
@@ -26982,7 +26982,7 @@ function CriticalGapsListModalContentComponent_Conditional_1_Template(rf, ctx) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("ngClass", ctx_r0.emptyStateClasses());
     i0.ɵɵadvance();
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(5, _c0$W, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.emptyIconClasses());
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(5, _c0$X, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.emptyIconClasses());
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r0.emptyTitleClasses());
     i0.ɵɵadvance(2);
@@ -27280,7 +27280,7 @@ class CriticalGapsListModalContentComponent {
     }], null, { criticalGaps: [{ type: i0.Input, args: [{ isSignal: true, alias: "criticalGaps", required: true }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: true }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CriticalGapsListModalContentComponent, { className: "CriticalGapsListModalContentComponent", filePath: "lib/components/profile-analysis-dashboard/modals/critical-gaps-list-modal-content.component.ts", lineNumber: 98 }); })();
 
-const _c0$V = a0 => ({ name: "check-circle", source: a0 });
+const _c0$W = a0 => ({ name: "check-circle", source: a0 });
 const _c1$y = a0 => ({ name: "chat-bubble-left-right", source: a0 });
 const _forTrack0$B = ($index, $item) => $item.questionId;
 function KeyStrengthDetailModalContentComponent_Conditional_13_For_6_Conditional_8_Template(rf, ctx) { if (rf & 1) {
@@ -27336,7 +27336,7 @@ function KeyStrengthDetailModalContentComponent_Conditional_13_Template(rf, ctx)
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.sectionTitleClasses());
     i0.ɵɵadvance();
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(3, _c0$V, ctx_r1.IconSourceEnum.HEROICONS))("ngClass", ctx_r1.sectionIconClasses());
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(3, _c0$W, ctx_r1.IconSourceEnum.HEROICONS))("ngClass", ctx_r1.sectionIconClasses());
     i0.ɵɵadvance(3);
     i0.ɵɵrepeater(ctx_r1.strength().supportingAnswers);
 } }
@@ -27521,7 +27521,7 @@ class KeyStrengthDetailModalContentComponent {
     }], null, { strength: [{ type: i0.Input, args: [{ isSignal: true, alias: "strength", required: true }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: true }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KeyStrengthDetailModalContentComponent, { className: "KeyStrengthDetailModalContentComponent", filePath: "lib/components/profile-analysis-dashboard/modals/key-strength-detail-modal-content.component.ts", lineNumber: 79 }); })();
 
-const _c0$U = a0 => ({ name: "exclamation-triangle", source: a0 });
+const _c0$V = a0 => ({ name: "exclamation-triangle", source: a0 });
 const _c1$x = a0 => ({ name: "document-text", source: a0 });
 const _c2$m = a0 => ({ name: "chat-bubble-left-right", source: a0 });
 const _forTrack0$A = ($index, $item) => $item.questionId;
@@ -27799,7 +27799,7 @@ class CriticalGapDetailModalContentComponent {
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngClass", ctx.impactSectionClasses());
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(15, _c0$U, ctx.IconSourceEnum.HEROICONS))("ngClass", ctx.impactIconClasses());
+            i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(15, _c0$V, ctx.IconSourceEnum.HEROICONS))("ngClass", ctx.impactIconClasses());
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngClass", ctx.impactTitleClasses());
             i0.ɵɵadvance(2);
@@ -29384,7 +29384,7 @@ class TopPriorityDetailModalContentComponent {
     }], null, { priority: [{ type: i0.Input, args: [{ isSignal: true, alias: "priority", required: true }] }], index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: false }] }], totalCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalCount", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], focusAreaName: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusAreaName", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TopPriorityDetailModalContentComponent, { className: "TopPriorityDetailModalContentComponent", filePath: "lib/components/profile-analysis-dashboard/modals/top-priority-detail-modal-content.component.ts", lineNumber: 72 }); })();
 
-const _c0$T = a0 => ({ name: "check-badge", source: a0 });
+const _c0$U = a0 => ({ name: "check-badge", source: a0 });
 const _c1$w = a0 => ({ name: "check-circle", source: a0 });
 const _c2$l = a0 => ({ name: "chevron-right", source: a0 });
 const _c3$g = a0 => ({ name: "chart-bar", source: a0 });
@@ -29402,7 +29402,7 @@ function FocusAreaStrengthsListModalContentComponent_Conditional_1_Template(rf,
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("ngClass", ctx_r0.emptyStateClasses());
     i0.ɵɵadvance();
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(5, _c0$T, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.emptyIconClasses());
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(5, _c0$U, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.emptyIconClasses());
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r0.emptyTitleClasses());
     i0.ɵɵadvance(2);
@@ -29707,7 +29707,7 @@ class FocusAreaStrengthsListModalContentComponent {
     }], null, { strengths: [{ type: i0.Input, args: [{ isSignal: true, alias: "strengths", required: true }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: true }] }], categoryTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "categoryTitle", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FocusAreaStrengthsListModalContentComponent, { className: "FocusAreaStrengthsListModalContentComponent", filePath: "lib/components/profile-analysis-dashboard/modals/focus-area-strengths-list-modal-content.component.ts", lineNumber: 109 }); })();
 
-const _c0$S = a0 => ({ name: "exclamation-triangle", source: a0 });
+const _c0$T = a0 => ({ name: "exclamation-triangle", source: a0 });
 const _c1$v = a0 => ({ name: "exclamation-circle", source: a0 });
 const _c2$k = a0 => ({ name: "chevron-right", source: a0 });
 function _forTrack0$y($index, $item) { return this.getGapTitle($item); }
@@ -29724,7 +29724,7 @@ function FocusAreaGapsListModalContentComponent_Conditional_1_Template(rf, ctx)
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("ngClass", ctx_r0.emptyStateClasses());
     i0.ɵɵadvance();
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(5, _c0$S, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.emptyIconClasses());
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(5, _c0$T, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.emptyIconClasses());
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r0.emptyTitleClasses());
     i0.ɵɵadvance(2);
@@ -30101,7 +30101,7 @@ class FocusAreaGapsListModalContentComponent {
     }], null, { gaps: [{ type: i0.Input, args: [{ isSignal: true, alias: "gaps", required: true }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: true }] }], categoryTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "categoryTitle", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FocusAreaGapsListModalContentComponent, { className: "FocusAreaGapsListModalContentComponent", filePath: "lib/components/profile-analysis-dashboard/modals/focus-area-gaps-list-modal-content.component.ts", lineNumber: 106 }); })();
 
-const _c0$R = a0 => ({ name: "light-bulb", source: a0 });
+const _c0$S = a0 => ({ name: "light-bulb", source: a0 });
 const _c1$u = a0 => ({ name: "chevron-right", source: a0 });
 const _c2$j = a0 => ({ name: "chart-bar", source: a0 });
 const _forTrack0$x = ($index, $item) => $item.opportunity;
@@ -30118,7 +30118,7 @@ function FocusAreaOpportunitiesListModalContentComponent_Conditional_1_Template(
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("ngClass", ctx_r0.emptyStateClasses());
     i0.ɵɵadvance();
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(5, _c0$R, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.emptyIconClasses());
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(5, _c0$S, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.emptyIconClasses());
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r0.emptyTitleClasses());
     i0.ɵɵadvance(2);
@@ -30370,7 +30370,7 @@ class FocusAreaOpportunitiesListModalContentComponent {
     }], null, { opportunities: [{ type: i0.Input, args: [{ isSignal: true, alias: "opportunities", required: true }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: true }] }], categoryTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "categoryTitle", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FocusAreaOpportunitiesListModalContentComponent, { className: "FocusAreaOpportunitiesListModalContentComponent", filePath: "lib/components/profile-analysis-dashboard/modals/focus-area-opportunities-list-modal-content.component.ts", lineNumber: 90 }); })();
 
-const _c0$Q = a0 => ({ name: "chevron-right", source: a0 });
+const _c0$R = a0 => ({ name: "chevron-right", source: a0 });
 const _c1$t = a0 => ({ name: "chat-bubble-left-right", source: a0 });
 const _forTrack0$w = ($index, $item) => $item.performanceItemId;
 function FocusAreaStrengthDetailModalContentComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
@@ -30435,7 +30435,7 @@ function FocusAreaStrengthDetailModalContentComponent_Conditional_4_For_5_Templa
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(ctx_r0.formatMetricName(metric_r3.metric || ""));
     i0.ɵɵadvance();
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(3, _c0$Q, ctx_r0.IconSourceEnum.HEROICONS));
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(3, _c0$R, ctx_r0.IconSourceEnum.HEROICONS));
 } }
 function FocusAreaStrengthDetailModalContentComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 1)(1, "h4", 8);
@@ -30755,7 +30755,7 @@ class FocusAreaStrengthDetailModalContentComponent {
     }], null, { strength: [{ type: i0.Input, args: [{ isSignal: true, alias: "strength", required: true }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: true }] }], allMetrics: [{ type: i0.Input, args: [{ isSignal: true, alias: "allMetrics", required: false }] }], allCharts: [{ type: i0.Input, args: [{ isSignal: true, alias: "allCharts", required: false }] }], currentModalState: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentModalState", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FocusAreaStrengthDetailModalContentComponent, { className: "FocusAreaStrengthDetailModalContentComponent", filePath: "lib/components/profile-analysis-dashboard/modals/focus-area-strength-detail-modal-content.component.ts", lineNumber: 121 }); })();
 
-const _c0$P = a0 => ({ name: "chat-bubble-left-right", source: a0 });
+const _c0$Q = a0 => ({ name: "chat-bubble-left-right", source: a0 });
 function FocusAreaGapDetailModalContentComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 1)(1, "span", 3);
     i0.ɵɵtext(2);
@@ -30852,7 +30852,7 @@ function FocusAreaGapDetailModalContentComponent_Conditional_6_For_5_Template(rf
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("ngClass", ctx_r0.answerClasses());
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(7, _c0$P, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.answerIconClasses());
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(7, _c0$Q, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.answerIconClasses());
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r0.answerQuestionClasses());
     i0.ɵɵadvance();
@@ -31091,7 +31091,7 @@ class FocusAreaGapDetailModalContentComponent {
     }], null, { gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: true }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: true }] }], allMetrics: [{ type: i0.Input, args: [{ isSignal: true, alias: "allMetrics", required: false }] }], allCharts: [{ type: i0.Input, args: [{ isSignal: true, alias: "allCharts", required: false }] }], currentModalState: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentModalState", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FocusAreaGapDetailModalContentComponent, { className: "FocusAreaGapDetailModalContentComponent", filePath: "lib/components/profile-analysis-dashboard/modals/focus-area-gap-detail-modal-content.component.ts", lineNumber: 98 }); })();
 
-const _c0$O = a0 => ({ name: "chevron-right", source: a0 });
+const _c0$P = a0 => ({ name: "chevron-right", source: a0 });
 const _c1$s = () => [];
 const _forTrack0$v = ($index, $item) => $item.performanceItemId;
 function FocusAreaOpportunityDetailModalContentComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
@@ -31138,7 +31138,7 @@ function FocusAreaOpportunityDetailModalContentComponent_Conditional_3_For_5_Tem
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(ctx_r0.formatMetricName(metric_r3.metric || ""));
     i0.ɵɵadvance();
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(3, _c0$O, ctx_r0.IconSourceEnum.HEROICONS));
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(3, _c0$P, ctx_r0.IconSourceEnum.HEROICONS));
 } }
 function FocusAreaOpportunityDetailModalContentComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 1)(1, "h4", 5);
@@ -31543,7 +31543,7 @@ class CircularProgressComponent {
     }], null, { percentage: [{ type: i0.Input, args: [{ isSignal: true, alias: "percentage", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }], progressColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "progressColor", required: false }] }], backgroundColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "backgroundColor", required: false }] }], showPercentage: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPercentage", required: false }] }], textClasses: [{ type: i0.Input, args: [{ isSignal: true, alias: "textClasses", required: false }] }], strokeLinecap: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeLinecap", required: false }] }], animationDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "animationDuration", required: false }] }], animationDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "animationDelay", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CircularProgressComponent, { className: "CircularProgressComponent", filePath: "lib/components/business-analysis-dashboard/visualizations/circular-progress.component.ts", lineNumber: 41 }); })();
 
-const _c0$N = ["*"];
+const _c0$O = ["*"];
 const _c1$r = (a0, a1) => [a0, a1];
 function VisualizationContainerComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
@@ -31588,7 +31588,7 @@ class VisualizationContainerComponent {
         });
     }
     static { this.ɵfac = function VisualizationContainerComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || VisualizationContainerComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: VisualizationContainerComponent, selectors: [["symphiq-visualization-container"]], inputs: { isLightMode: [1, "isLightMode"], visualizationType: [1, "visualizationType"], visualizationData: [1, "visualizationData"], disableInteraction: [1, "disableInteraction"] }, outputs: { visualizationClick: "visualizationClick" }, ngContentSelectors: _c0$N, decls: 4, vars: 8, consts: [[1, "relative", "rounded-xl", "transition-all", "duration-300", 3, "click", "ngClass"], ["type", "button", 1, "absolute", "top-2", "right-2", "z-10", "w-7", "h-7", "flex", "items-center", "justify-center", "rounded-lg", "transition-all", "duration-200", "hover:scale-110", "cursor-pointer", "opacity-0", "group-hover:opacity-100", 3, "ngClass"], [1, "transition-opacity", "duration-300"], ["type", "button", 1, "absolute", "top-2", "right-2", "z-10", "w-7", "h-7", "flex", "items-center", "justify-center", "rounded-lg", "transition-all", "duration-200", "hover:scale-110", "cursor-pointer", "opacity-0", "group-hover:opacity-100", 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", "M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"]], template: function VisualizationContainerComponent_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: VisualizationContainerComponent, selectors: [["symphiq-visualization-container"]], inputs: { isLightMode: [1, "isLightMode"], visualizationType: [1, "visualizationType"], visualizationData: [1, "visualizationData"], disableInteraction: [1, "disableInteraction"] }, outputs: { visualizationClick: "visualizationClick" }, ngContentSelectors: _c0$O, decls: 4, vars: 8, consts: [[1, "relative", "rounded-xl", "transition-all", "duration-300", 3, "click", "ngClass"], ["type", "button", 1, "absolute", "top-2", "right-2", "z-10", "w-7", "h-7", "flex", "items-center", "justify-center", "rounded-lg", "transition-all", "duration-200", "hover:scale-110", "cursor-pointer", "opacity-0", "group-hover:opacity-100", 3, "ngClass"], [1, "transition-opacity", "duration-300"], ["type", "button", 1, "absolute", "top-2", "right-2", "z-10", "w-7", "h-7", "flex", "items-center", "justify-center", "rounded-lg", "transition-all", "duration-200", "hover:scale-110", "cursor-pointer", "opacity-0", "group-hover:opacity-100", 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", "M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"]], template: function VisualizationContainerComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵelementStart(0, "div", 0);
             i0.ɵɵlistener("click", function VisualizationContainerComponent_Template_div_click_0_listener($event) { return ctx.onVisualizationClick($event); });
@@ -31709,7 +31709,7 @@ class MetricBadgeComponent {
     }], null, { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], isDark: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDark", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MetricBadgeComponent, { className: "MetricBadgeComponent", filePath: "lib/components/business-analysis-dashboard/badges/metric-badge.component.ts", lineNumber: 22 }); })();
 
-const _c0$M = a0 => ({ name: "light-bulb", source: a0 });
+const _c0$N = a0 => ({ name: "light-bulb", source: a0 });
 const _c1$q = a0 => ({ name: "chevron-right", source: a0 });
 function OpportunityHighlightBannerComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "p", 7);
@@ -31774,7 +31774,7 @@ class OpportunityHighlightBannerComponent {
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngClass", ctx.iconContainerClasses());
             i0.ɵɵadvance();
-            i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(11, _c0$M, ctx.iconSource));
+            i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(11, _c0$N, ctx.iconSource));
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("ngClass", ctx.titleClasses());
             i0.ɵɵadvance();
@@ -31831,7 +31831,7 @@ class OpportunityHighlightBannerComponent {
     }], null, { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], isDark: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDark", required: false }] }], isExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "isExpanded", required: false }] }], bannerClick: [{ type: i0.Output, args: ["bannerClick"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(OpportunityHighlightBannerComponent, { className: "OpportunityHighlightBannerComponent", filePath: "lib/components/business-analysis-dashboard/banners/opportunity-highlight-banner.component.ts", lineNumber: 44 }); })();
 
-const _c0$L = a0 => ({ name: "users", source: a0 });
+const _c0$M = a0 => ({ name: "users", source: a0 });
 function CompetitorOverlapVisualizationComponent_Conditional_18_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 5)(1, "div", 6);
     i0.ɵɵelement(2, "symphiq-icon", 7);
@@ -31846,7 +31846,7 @@ function CompetitorOverlapVisualizationComponent_Conditional_18_Template(rf, ctx
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r0.competitorListLabelClasses());
     i0.ɵɵadvance();
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(6, _c0$L, ctx_r0.iconSource));
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(6, _c0$M, ctx_r0.iconSource));
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("relatedCompetitorIds", ctx_r0.relatedCompetitorIds())("viewMode", ctx_r0.isDark() ? ctx_r0.ViewModeEnum.DARK : ctx_r0.ViewModeEnum.LIGHT)("isDark", ctx_r0.isDark());
 } }
@@ -32410,7 +32410,7 @@ class ViewportAnimationDirective {
             type: Input
         }] }); })();
 
-const _c0$K = a0 => ({ name: "star", source: a0 });
+const _c0$L = a0 => ({ name: "star", source: a0 });
 const _c1$p = a0 => ({ name: "globe-americas", source: a0 });
 const _c2$i = a0 => ({ name: "academic-cap", source: a0 });
 const _c3$f = a0 => ({ name: "information-circle", source: a0 });
@@ -32446,7 +32446,7 @@ function RegionCardComponent_Conditional_16_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "symphiq-metric-badge", 13);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(2, _c0$K, ctx_r0.IconSourceEnum.HEROICONS))("isDark", ctx_r0.isDark);
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(2, _c0$L, ctx_r0.IconSourceEnum.HEROICONS))("isDark", ctx_r0.isDark);
 } }
 function RegionCardComponent_Conditional_17_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "symphiq-metric-badge", 14);
@@ -33488,7 +33488,7 @@ class CompetitiveInsightBadgeComponent {
     }], null, { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], isDark: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDark", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CompetitiveInsightBadgeComponent, { className: "CompetitiveInsightBadgeComponent", filePath: "lib/components/business-analysis-dashboard/badges/competitive-insight-badge.component.ts", lineNumber: 25 }); })();
 
-const _c0$J = a0 => ({ name: "calendar-days", source: a0 });
+const _c0$K = a0 => ({ name: "calendar-days", source: a0 });
 const _c1$o = a0 => ({ name: "chart-bar", source: a0 });
 const _c2$h = a0 => ({ name: "academic-cap", source: a0 });
 const _c3$e = a0 => ({ name: "information-circle", source: a0 });
@@ -33509,7 +33509,7 @@ function SeasonCardComponent_Conditional_14_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "symphiq-metric-badge", 12);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("label", ctx_r0.formatMonthRange())("icon", i0.ɵɵpureFunction1(3, _c0$J, ctx_r0.IconSourceEnum.HEROICONS))("isDark", ctx_r0.isDark);
+    i0.ɵɵproperty("label", ctx_r0.formatMonthRange())("icon", i0.ɵɵpureFunction1(3, _c0$K, ctx_r0.IconSourceEnum.HEROICONS))("isDark", ctx_r0.isDark);
 } }
 function SeasonCardComponent_Conditional_15_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "symphiq-metric-badge", 13);
@@ -34326,7 +34326,7 @@ class SeasonCardComponent {
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SeasonCardComponent, { className: "SeasonCardComponent", filePath: "lib/components/business-analysis-dashboard/cards/season-card.component.ts", lineNumber: 270 }); })();
 
-const _c0$I = a0 => ({ name: "currency-dollar", source: a0 });
+const _c0$J = a0 => ({ name: "currency-dollar", source: a0 });
 const _c1$n = a0 => ({ name: "chart-bar", source: a0 });
 const _c2$g = a0 => ({ name: "academic-cap", source: a0 });
 const _c3$d = a0 => ({ name: "information-circle", source: a0 });
@@ -34471,7 +34471,7 @@ function CustomerSegmentCardComponent_Conditional_22_Template(rf, ctx) { if (rf
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("ngClass", ctx_r0.getExpandedSectionClasses());
     i0.ɵɵadvance();
-    i0.ɵɵproperty("label", ctx_r0.formatPercentage(ctx_r0.item().percentageOfRevenue) + " of Revenue")("icon", i0.ɵɵpureFunction1(4, _c0$I, ctx_r0.IconSourceEnum.HEROICONS))("isDark", ctx_r0.isDark);
+    i0.ɵɵproperty("label", ctx_r0.formatPercentage(ctx_r0.item().percentageOfRevenue) + " of Revenue")("icon", i0.ɵɵpureFunction1(4, _c0$J, ctx_r0.IconSourceEnum.HEROICONS))("isDark", ctx_r0.isDark);
 } }
 function CustomerSegmentCardComponent_Conditional_23_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
@@ -35443,7 +35443,7 @@ class CustomerSegmentCardComponent {
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CustomerSegmentCardComponent, { className: "CustomerSegmentCardComponent", filePath: "lib/components/business-analysis-dashboard/cards/customer-segment-card.component.ts", lineNumber: 366 }); })();
 
-const _c0$H = a0 => ({ name: "currency-dollar", source: a0 });
+const _c0$I = a0 => ({ name: "currency-dollar", source: a0 });
 const _c1$m = a0 => ({ name: "document-text", source: a0 });
 const _c2$f = a0 => ({ name: "academic-cap", source: a0 });
 const _c3$c = a0 => ({ name: "information-circle", source: a0 });
@@ -35541,7 +35541,7 @@ function PriceTierCardComponent_Conditional_25_Template(rf, ctx) { if (rf & 1) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("ngClass", ctx_r0.getExpandedSectionClasses());
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(7, _c0$H, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.getExpandedIconClasses());
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(7, _c0$I, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.getExpandedIconClasses());
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r0.getExpandedTitleClasses());
     i0.ɵɵadvance(2);
@@ -36280,7 +36280,7 @@ class PriceTierCardComponent {
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PriceTierCardComponent, { className: "PriceTierCardComponent", filePath: "lib/components/business-analysis-dashboard/cards/price-tier-card.component.ts", lineNumber: 261 }); })();
 
-const _c0$G = () => ({ name: "cube", source: "HEROICONS" });
+const _c0$H = () => ({ name: "cube", source: "HEROICONS" });
 const _c1$l = () => ({ name: "currency-dollar", source: "HEROICONS" });
 const _c2$e = () => ({ name: "chart-bar", source: "HEROICONS" });
 const _c3$b = a0 => ({ name: "chart-bar", source: a0 });
@@ -36327,7 +36327,7 @@ function ProductCategoryCardComponent_Conditional_14_Conditional_2_Template(rf,
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("ngClass", ctx_r0.getStatBoxClasses());
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction0(6, _c0$G))("ngClass", ctx_r0.getStatIconClasses());
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction0(6, _c0$H))("ngClass", ctx_r0.getStatIconClasses());
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r0.getStatLabelClasses());
     i0.ɵɵadvance(2);
@@ -37275,13 +37275,13 @@ class ProductCategoryCardComponent {
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ProductCategoryCardComponent, { className: "ProductCategoryCardComponent", filePath: "lib/components/business-analysis-dashboard/cards/product-category-card.component.ts", lineNumber: 324 }); })();
 
-const _c0$F = (a0, a1) => ({ name: a0, source: a1 });
+const _c0$G = (a0, a1) => ({ name: a0, source: a1 });
 function CompetitiveStrengthIndicatorComponent_For_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "symphiq-icon", 2);
 } if (rf & 2) {
     const star_r1 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction2(2, _c0$F, star_r1.filled ? "star" : "star", ctx_r1.iconSource))("ngClass", star_r1.filled ? ctx_r1.filledStarClasses() : ctx_r1.emptyStarClasses());
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction2(2, _c0$G, star_r1.filled ? "star" : "star", ctx_r1.iconSource))("ngClass", star_r1.filled ? ctx_r1.filledStarClasses() : ctx_r1.emptyStarClasses());
 } }
 class CompetitiveStrengthIndicatorComponent {
     constructor() {
@@ -37437,7 +37437,7 @@ function getCategoryBadgeClasses(category, isDark) {
     return `px-3 py-1 rounded-full text-xs font-semibold whitespace-nowrap ${colorClasses}`;
 }
 
-const _c0$E = a0 => ({ name: "shield-check", source: a0 });
+const _c0$F = a0 => ({ name: "shield-check", source: a0 });
 const _c1$k = a0 => ({ name: "building-storefront", source: a0 });
 const _c2$d = a0 => ({ name: "academic-cap", source: a0 });
 const _c3$a = a0 => ({ name: "information-circle", source: a0 });
@@ -37509,7 +37509,7 @@ function EnhancedListItemCardComponent_Conditional_21_Template(rf, ctx) { if (rf
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("ngClass", ctx_r0.getExpandedSectionClasses());
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(7, _c0$E, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.getExpandedIconClasses());
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(7, _c0$F, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.getExpandedIconClasses());
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r0.getExpandedTitleClasses());
     i0.ɵɵadvance(2);
@@ -38153,7 +38153,7 @@ class EnhancedListItemCardComponent {
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(EnhancedListItemCardComponent, { className: "EnhancedListItemCardComponent", filePath: "lib/components/business-analysis-dashboard/cards/enhanced-list-item-card.component.ts", lineNumber: 221 }); })();
 
-const _c0$D = a0 => ({ name: "academic-cap", source: a0 });
+const _c0$E = a0 => ({ name: "academic-cap", source: a0 });
 const _c1$j = a0 => ({ name: "information-circle", source: a0 });
 const _c2$c = a0 => ({ name: "signal", source: a0 });
 const _c3$9 = a0 => ({ name: "wrench-screwdriver", source: a0 });
@@ -38234,7 +38234,7 @@ function FocusAreaDetailCardComponent_Conditional_16_Conditional_5_Template(rf,
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("ngClass", ctx_r0.getCompetitiveGapSectionClasses());
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(6, _c0$D, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.expandedIconClasses());
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(6, _c0$E, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.expandedIconClasses());
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r0.expandedTitleClasses());
     i0.ɵɵadvance(2);
@@ -40015,7 +40015,7 @@ class CompetitorAnalysisCardComponent {
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CompetitorAnalysisCardComponent, { className: "CompetitorAnalysisCardComponent", filePath: "lib/components/business-analysis-dashboard/cards/competitor-analysis-card.component.ts", lineNumber: 312 }); })();
 
-const _c0$C = ["*"];
+const _c0$D = ["*"];
 class SkeletonCardBaseComponent {
     constructor() {
         this.viewMode = input(ViewModeEnum.LIGHT, ...(ngDevMode ? [{ debugName: "viewMode" }] : []));
@@ -40035,7 +40035,7 @@ class SkeletonCardBaseComponent {
     `.trim();
     }
     static { this.ɵfac = function SkeletonCardBaseComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SkeletonCardBaseComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SkeletonCardBaseComponent, selectors: [["symphiq-skeleton-card-base"]], inputs: { viewMode: [1, "viewMode"] }, ngContentSelectors: _c0$C, decls: 2, vars: 1, consts: [[1, "animate-pulse", 3, "ngClass"]], template: function SkeletonCardBaseComponent_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SkeletonCardBaseComponent, selectors: [["symphiq-skeleton-card-base"]], inputs: { viewMode: [1, "viewMode"] }, ngContentSelectors: _c0$D, decls: 2, vars: 1, consts: [[1, "animate-pulse", 3, "ngClass"]], template: function SkeletonCardBaseComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵelementStart(0, "div", 0);
             i0.ɵɵprojection(1);
@@ -41200,7 +41200,7 @@ class ProfileItemCardComponent {
     }], null, { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], subsectionId: [{ type: i0.Input, args: [{ isSignal: true, alias: "subsectionId", required: false }] }], forceExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "forceExpanded", required: false }] }], animationIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "animationIndex", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], inModalContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "inModalContext", required: false }] }], isCompactMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCompactMode", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ProfileItemCardComponent, { className: "ProfileItemCardComponent", filePath: "lib/components/business-analysis-dashboard/profile-item-card.component.ts", lineNumber: 171 }); })();
 
-const _c0$B = ["scrollContainer"];
+const _c0$C = ["scrollContainer"];
 const _c1$i = a0 => ({ name: "arrow-right", source: a0 });
 function ItemDetailModalComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
@@ -41320,7 +41320,7 @@ class ItemDetailModalComponent {
     }
     static { this.ɵfac = function ItemDetailModalComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ItemDetailModalComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ItemDetailModalComponent, selectors: [["symphiq-item-detail-modal"]], viewQuery: function ItemDetailModalComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$B, 5);
+            i0.ɵɵviewQuery(_c0$C, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.scrollContainer = _t.first);
@@ -41399,7 +41399,7 @@ class ItemDetailModalComponent {
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ItemDetailModalComponent, { className: "ItemDetailModalComponent", filePath: "lib/components/business-analysis-dashboard/modals/item-detail-modal.component.ts", lineNumber: 53 }); })();
 
-const _c0$A = ["modalContent"];
+const _c0$B = ["modalContent"];
 const _c1$h = ["modalWrapper"];
 const _c2$b = ["*"];
 const ProfileAnalysisModalComponent_Conditional_0_Conditional_31_Conditional_3_Defer_2_DepsFn = () => [Promise.resolve().then(function () { return lineChart_component; }).then(m => m.LineChartComponent)];
@@ -43648,7 +43648,7 @@ class ProfileAnalysisModalComponent {
     }
     static { this.ɵfac = function ProfileAnalysisModalComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ProfileAnalysisModalComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ProfileAnalysisModalComponent, selectors: [["symphiq-profile-analysis-modal"]], viewQuery: function ProfileAnalysisModalComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$A, 5);
+            i0.ɵɵviewQuery(_c0$B, 5);
             i0.ɵɵviewQuery(_c1$h, 5);
         } if (rf & 2) {
             let _t;
@@ -44203,7 +44203,7 @@ class ProfileAnalysisModalComponent {
         }] }); }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ProfileAnalysisModalComponent, { className: "ProfileAnalysisModalComponent", filePath: "lib/components/profile-analysis-dashboard/profile-analysis-modal.component.ts", lineNumber: 554 }); })();
 
-const _c0$z = a0 => ({ name: "light-bulb", source: a0 });
+const _c0$A = a0 => ({ name: "light-bulb", source: a0 });
 const _c1$g = a0 => ({ name: "trophy", source: a0 });
 const _c2$a = a0 => ({ name: "academic-cap", source: a0 });
 const _c3$7 = a0 => ({ name: "signal", source: a0 });
@@ -44413,7 +44413,7 @@ class CompetitiveGapModalComponent {
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngClass", ctx.iconContainerClasses());
             i0.ɵɵadvance();
-            i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(12, _c0$z, ctx.iconSource));
+            i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(12, _c0$A, ctx.iconSource));
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("ngClass", ctx.titleClasses());
             i0.ɵɵadvance();
@@ -44534,7 +44534,7 @@ class CompetitiveGapModalComponent {
     }], null, { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: false }] }], isDark: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDark", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CompetitiveGapModalComponent, { className: "CompetitiveGapModalComponent", filePath: "lib/components/business-analysis-dashboard/modals/competitive-gap-modal.component.ts", lineNumber: 101 }); })();
 
-const _c0$y = a0 => ({ name: "list-bullet", source: a0 });
+const _c0$z = a0 => ({ name: "list-bullet", source: a0 });
 const _c1$f = a0 => ({ name: "arrow-right", source: a0 });
 const _c2$9 = a0 => ({ name: "check-circle", source: a0 });
 const _c3$6 = a0 => ({ name: "exclamation-circle", source: a0 });
@@ -44554,7 +44554,7 @@ function RecommendationActionStepsModalComponent_Conditional_1_Template(rf, ctx)
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r0.iconContainerClasses());
     i0.ɵɵadvance();
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(5, _c0$y, ctx_r0.iconSource));
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(5, _c0$z, ctx_r0.iconSource));
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r0.titleClasses());
     i0.ɵɵadvance(2);
@@ -44774,7 +44774,7 @@ class RecommendationActionStepsModalComponent {
     }], null, { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], actionSteps: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionSteps", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RecommendationActionStepsModalComponent, { className: "RecommendationActionStepsModalComponent", filePath: "lib/components/business-analysis-dashboard/modals/recommendation-action-steps-modal.component.ts", lineNumber: 69 }); })();
 
-const _c0$x = ["modalContent"];
+const _c0$y = ["modalContent"];
 const _c1$e = ["modalWrapper"];
 function BusinessAnalysisModalComponent_Conditional_0_Conditional_10_For_6_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
@@ -45297,7 +45297,7 @@ class BusinessAnalysisModalComponent {
     }
     static { this.ɵfac = function BusinessAnalysisModalComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || BusinessAnalysisModalComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: BusinessAnalysisModalComponent, selectors: [["symphiq-business-analysis-modal"]], viewQuery: function BusinessAnalysisModalComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$x, 5);
+            i0.ɵɵviewQuery(_c0$y, 5);
             i0.ɵɵviewQuery(_c1$e, 5);
         } if (rf & 2) {
             let _t;
@@ -45935,7 +45935,7 @@ class IndeterminateSpinnerComponent {
     }], null, { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(IndeterminateSpinnerComponent, { className: "IndeterminateSpinnerComponent", filePath: "lib/components/shared/indeterminate-spinner.component.ts", lineNumber: 94 }); })();
 
-const _c0$w = ["dashboardContainer"];
+const _c0$x = ["dashboardContainer"];
 const _c1$d = () => ({});
 const _c2$8 = () => [1, 2, 3, 4, 5, 6];
 const _c3$5 = () => [1, 2, 3];
@@ -48230,7 +48230,7 @@ class SymphiqFunnelAnalysisDashboardComponent {
     static { this.ɵfac = function SymphiqFunnelAnalysisDashboardComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SymphiqFunnelAnalysisDashboardComponent)(i0.ɵɵdirectiveInject(FunnelOrderService), i0.ɵɵdirectiveInject(ViewModeService), i0.ɵɵdirectiveInject(SearchService), i0.ɵɵdirectiveInject(TooltipService), i0.ɵɵdirectiveInject(ProfileContextService), i0.ɵɵdirectiveInject(ProfileItemLookupService)); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SymphiqFunnelAnalysisDashboardComponent, selectors: [["symphiq-funnel-analysis-dashboard"]], viewQuery: function SymphiqFunnelAnalysisDashboardComponent_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(ModalComponent, 5);
-            i0.ɵɵviewQuery(_c0$w, 5);
+            i0.ɵɵviewQuery(_c0$x, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.modalComponent = _t.first);
@@ -51939,7 +51939,7 @@ class FocusAreaToolsModalComponent {
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FocusAreaToolsModalComponent, { className: "FocusAreaToolsModalComponent", filePath: "lib/components/create-account-dashboard/focus-area-tools-modal.component.ts", lineNumber: 149 }); })();
 
-const _c0$v = ["shopNameInput"];
+const _c0$w = ["shopNameInput"];
 const _forTrack0$o = ($index, $item) => $item.focusAreaDomain;
 function SymphiqCreateAccountDashboardComponent_Conditional_22_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 13);
@@ -53139,7 +53139,7 @@ class SymphiqCreateAccountDashboardComponent {
     }
     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$v, 5);
+            i0.ɵɵviewQuery(_c0$w, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.shopNameInput = _t.first);
@@ -57177,7 +57177,7 @@ class ChartValueFormatter {
     }
 }
 
-const _c0$u = ["chartdiv"];
+const _c0$v = ["chartdiv"];
 class AreaChartComponent {
     constructor() {
         this.chart = input({}, ...(ngDevMode ? [{ debugName: "chart" }] : []));
@@ -57486,7 +57486,7 @@ class AreaChartComponent {
     }
     static { this.ɵfac = function AreaChartComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || AreaChartComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AreaChartComponent, selectors: [["symphiq-area-chart"]], viewQuery: function AreaChartComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$u, 7);
+            i0.ɵɵviewQuery(_c0$v, 7);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.chartDiv = _t.first);
@@ -57518,7 +57518,7 @@ var areaChart_component = /*#__PURE__*/Object.freeze({
     AreaChartComponent: AreaChartComponent
 });
 
-const _c0$t = ["chartdiv"];
+const _c0$u = ["chartdiv"];
 class LineChartComponent {
     constructor() {
         this.chart = input({}, ...(ngDevMode ? [{ debugName: "chart" }] : []));
@@ -57968,7 +57968,7 @@ class LineChartComponent {
     }
     static { this.ɵfac = function LineChartComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LineChartComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LineChartComponent, selectors: [["symphiq-line-chart"]], viewQuery: function LineChartComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$t, 7);
+            i0.ɵɵviewQuery(_c0$u, 7);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.chartDiv = _t.first);
@@ -58000,7 +58000,7 @@ var lineChart_component = /*#__PURE__*/Object.freeze({
     LineChartComponent: LineChartComponent
 });
 
-const _c0$s = ["chartdiv"];
+const _c0$t = ["chartdiv"];
 class ProgressToTargetChartComponent {
     constructor() {
         this.data = input(null, ...(ngDevMode ? [{ debugName: "data" }] : []));
@@ -58251,7 +58251,7 @@ class ProgressToTargetChartComponent {
     }
     static { this.ɵfac = function ProgressToTargetChartComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ProgressToTargetChartComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ProgressToTargetChartComponent, selectors: [["symphiq-progress-to-target-chart"]], viewQuery: function ProgressToTargetChartComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$s, 7);
+            i0.ɵɵviewQuery(_c0$t, 7);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.chartDiv = _t.first);
@@ -59725,7 +59725,7 @@ class MetricReportModalComponent {
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MetricReportModalComponent, { className: "MetricReportModalComponent", filePath: "lib/components/revenue-calculator-dashboard/metric-report-modal.component.ts", lineNumber: 483 }); })();
 
-const _c0$r = ["absoluteInputRef"];
+const _c0$s = ["absoluteInputRef"];
 const _c1$c = ["percentageInputRef"];
 const _forTrack0$k = ($index, $item) => $item.id;
 function EditMetricTargetModalComponent_Conditional_0_Conditional_27_Template(rf, ctx) { if (rf & 1) {
@@ -60945,7 +60945,7 @@ class EditMetricTargetModalComponent {
     }
     static { this.ɵfac = function EditMetricTargetModalComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || EditMetricTargetModalComponent)(i0.ɵɵdirectiveInject(i0.Injector)); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: EditMetricTargetModalComponent, selectors: [["symphiq-edit-metric-target-modal"]], viewQuery: function EditMetricTargetModalComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$r, 5);
+            i0.ɵɵviewQuery(_c0$s, 5);
             i0.ɵɵviewQuery(_c1$c, 5);
         } if (rf & 2) {
             let _t;
@@ -61396,7 +61396,7 @@ class EditMetricTargetModalComponent {
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(EditMetricTargetModalComponent, { className: "EditMetricTargetModalComponent", filePath: "lib/components/revenue-calculator-dashboard/edit-metric-target-modal.component.ts", lineNumber: 424 }); })();
 
-const _c0$q = ["absoluteInputRef"];
+const _c0$r = ["absoluteInputRef"];
 const _c1$b = ["percentageInputRef"];
 function InitialTargetSettingComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0);
@@ -62688,7 +62688,7 @@ class InitialTargetSettingComponent {
     }
     static { this.ɵfac = function InitialTargetSettingComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || InitialTargetSettingComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: InitialTargetSettingComponent, selectors: [["symphiq-initial-target-setting"]], viewQuery: function InitialTargetSettingComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$q, 5);
+            i0.ɵɵviewQuery(_c0$r, 5);
             i0.ɵɵviewQuery(_c1$b, 5);
         } if (rf & 2) {
             let _t;
@@ -63298,7 +63298,7 @@ class InitialTargetSettingComponent {
         }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], funnelMetrics: [{ type: i0.Input, args: [{ isSignal: true, alias: "funnelMetrics", required: false }] }], mainUiData: [{ type: i0.Input, args: [{ isSignal: true, alias: "mainUiData", required: false }] }], trendUiData: [{ type: i0.Input, args: [{ isSignal: true, alias: "trendUiData", required: false }] }], shopId: [{ type: i0.Input, args: [{ isSignal: true, alias: "shopId", required: false }] }], pacingResponse: [{ type: i0.Input, args: [{ isSignal: true, alias: "pacingResponse", required: false }] }], dataResults: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataResults", required: false }] }], calculateRevenueReverseResponse: [{ type: i0.Input, args: [{ isSignal: true, alias: "calculateRevenueReverseResponse", required: false }] }], calculateRevenueResponse: [{ type: i0.Input, args: [{ isSignal: true, alias: "calculateRevenueResponse", required: false }] }], isCalculatingTargets: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCalculatingTargets", required: false }] }], targets: [{ type: i0.Input, args: [{ isSignal: true, alias: "targets", required: false }] }], targetHistories: [{ type: i0.Input, args: [{ isSignal: true, alias: "targetHistories", required: false }] }], users: [{ type: i0.Input, args: [{ isSignal: true, alias: "users", required: false }] }], targetsCreated: [{ type: i0.Output, args: ["targetsCreated"] }], calculateRevenueReverseRequest: [{ type: i0.Output, args: ["calculateRevenueReverseRequest"] }], calculateRevenueRequest: [{ type: i0.Output, args: ["calculateRevenueRequest"] }], editRelatedMetricTarget: [{ type: i0.Output, args: ["editRelatedMetricTarget"] }], saveTargetsClick: [{ type: i0.Output, args: ["saveTargetsClick"] }], discardChangesClick: [{ type: i0.Output, args: ["discardChangesClick"] }], targetsUpdated: [{ type: i0.Output, args: ["targetsUpdated"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(InitialTargetSettingComponent, { className: "InitialTargetSettingComponent", filePath: "lib/components/revenue-calculator-dashboard/initial-target-setting.component.ts", lineNumber: 626 }); })();
 
-const _c0$p = () => [];
+const _c0$q = () => [];
 function SymphiqRevenueCalculatorDashboardComponent_Conditional_23_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 12);
     i0.ɵɵelement(1, "symphiq-indeterminate-spinner", 14);
@@ -63342,7 +63342,7 @@ function SymphiqRevenueCalculatorDashboardComponent_Conditional_25_Template(rf,
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("viewMode", ctx_r0.viewMode())("dataLoadStatus", ctx_r0.dataLoadStatus() ?? ctx_r0.ShopDataLoadStatusEnum.NOT_LOADED)("hasTargets", ctx_r0.hasCurrentYearTargets())("isOnboarded", ctx_r0.isOnboarded());
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("viewMode", ctx_r0.viewMode())("funnelMetrics", ctx_r0.funnelMetrics() ?? i0.ɵɵpureFunction0(17, _c0$p))("mainUiData", ctx_r0.mainUiData())("trendUiData", ctx_r0.trendUiData())("shopId", ctx_r0.shopId())("pacingResponse", ctx_r0.pacingResponse())("dataResults", ctx_r0.dataResults())("calculateRevenueReverseResponse", ctx_r0.calculateRevenueReverseResponse())("calculateRevenueResponse", ctx_r0.calculateRevenueResponse())("isCalculatingTargets", ctx_r0.isCalculatingTargets())("targets", ctx_r0.targets())("targetHistories", ctx_r0.targetHistories() ?? i0.ɵɵpureFunction0(18, _c0$p))("users", ctx_r0.users() ?? i0.ɵɵpureFunction0(19, _c0$p));
+    i0.ɵɵproperty("viewMode", ctx_r0.viewMode())("funnelMetrics", ctx_r0.funnelMetrics() ?? i0.ɵɵpureFunction0(17, _c0$q))("mainUiData", ctx_r0.mainUiData())("trendUiData", ctx_r0.trendUiData())("shopId", ctx_r0.shopId())("pacingResponse", ctx_r0.pacingResponse())("dataResults", ctx_r0.dataResults())("calculateRevenueReverseResponse", ctx_r0.calculateRevenueReverseResponse())("calculateRevenueResponse", ctx_r0.calculateRevenueResponse())("isCalculatingTargets", ctx_r0.isCalculatingTargets())("targets", ctx_r0.targets())("targetHistories", ctx_r0.targetHistories() ?? i0.ɵɵpureFunction0(18, _c0$q))("users", ctx_r0.users() ?? i0.ɵɵpureFunction0(19, _c0$q));
 } }
 function SymphiqRevenueCalculatorDashboardComponent_Conditional_26_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵnamespaceSVG();
@@ -64215,7 +64215,7 @@ class HierarchyDisplayComponent {
     }], null, { hierarchyData: [{ type: i0.Input, args: [{ isSignal: true, alias: "hierarchyData", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(HierarchyDisplayComponent, { className: "HierarchyDisplayComponent", filePath: "lib/components/business-analysis-dashboard/hierarchy-display.component.ts", lineNumber: 119 }); })();
 
-const _c0$o = a0 => ({ name: "chart-bar", source: a0 });
+const _c0$p = a0 => ({ name: "chart-bar", source: a0 });
 const _c1$a = a0 => ({ name: "light-bulb", source: a0 });
 function CompetitiveBenchmarkCardComponent_Conditional_26_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
@@ -64411,7 +64411,7 @@ class CompetitiveBenchmarkCardComponent {
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngClass", ctx.getSectionClasses());
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(21, _c0$o, ctx.IconSourceEnum.HEROICONS))("ngClass", ctx.getSectionIconClasses());
+            i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(21, _c0$p, ctx.IconSourceEnum.HEROICONS))("ngClass", ctx.getSectionIconClasses());
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngClass", ctx.getSectionTitleClasses());
             i0.ɵɵadvance(2);
@@ -65258,7 +65258,7 @@ class SearchButtonComponent {
     }], null, { isLightMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLightMode", required: false }] }], minimized: [{ type: i0.Input, args: [{ isSignal: true, alias: "minimized", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], searchClick: [{ type: i0.Output, args: ["searchClick"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SearchButtonComponent, { className: "SearchButtonComponent", filePath: "lib/components/shared/search-button.component.ts", lineNumber: 30 }); })();
 
-const _c0$n = ["searchInput"];
+const _c0$o = ["searchInput"];
 const _forTrack0$j = ($index, $item) => $item.id;
 function SearchModalComponent_Conditional_0_Conditional_10_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
@@ -65623,7 +65623,7 @@ class SearchModalComponent {
     }
     static { this.ɵfac = function SearchModalComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SearchModalComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SearchModalComponent, selectors: [["symphiq-search-modal"]], viewQuery: function SearchModalComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$n, 5);
+            i0.ɵɵviewQuery(_c0$o, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.searchInput = _t.first);
@@ -66520,7 +66520,7 @@ class SimplifiedRecommendationCardComponent {
     }], null, { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], animationIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "animationIndex", required: false }] }], viewMoreClick: [{ type: i0.Output, args: ["viewMoreClick"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SimplifiedRecommendationCardComponent, { className: "SimplifiedRecommendationCardComponent", filePath: "lib/components/business-analysis-dashboard/simplified-recommendation-card.component.ts", lineNumber: 121 }); })();
 
-const _c0$m = () => [0, 1, 2];
+const _c0$n = () => [0, 1, 2];
 const _forTrack0$i = ($index, $item) => $item.id;
 function RecommendationsTiledGridComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 9);
@@ -66590,7 +66590,7 @@ function RecommendationsTiledGridComponent_Conditional_15_Template(rf, ctx) { if
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(i0.ɵɵpureFunction0(0, _c0$m));
+    i0.ɵɵrepeater(i0.ɵɵpureFunction0(0, _c0$n));
 } }
 function RecommendationsTiledGridComponent_Conditional_16_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 12)(1, "div", 27);
@@ -67188,7 +67188,7 @@ class CollapsibleSectionGroupComponent {
     }], null, { sections: [{ type: i0.Input, args: [{ isSignal: true, alias: "sections", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CollapsibleSectionGroupComponent, { className: "CollapsibleSectionGroupComponent", filePath: "lib/components/business-analysis-dashboard/collapsible-section-group.component.ts", lineNumber: 100 }); })();
 
-const _c0$l = () => [];
+const _c0$m = () => [];
 function SymphiqBusinessAnalysisDashboardComponent_Conditional_14_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 8)(1, "symphiq-search-button", 20);
@@ -67332,7 +67332,7 @@ function SymphiqBusinessAnalysisDashboardComponent_Conditional_27_Conditional_1_
     const ɵ$index_113_r7 = i0.ɵɵnextContext().$index;
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("viewMode", ctx_r1.viewMode())("subsections", ctx_r1.sections()[ɵ$index_113_r7 + 1].subsections || i0.ɵɵpureFunction0(2, _c0$l));
+    i0.ɵɵproperty("viewMode", ctx_r1.viewMode())("subsections", ctx_r1.sections()[ɵ$index_113_r7 + 1].subsections || i0.ɵɵpureFunction0(2, _c0$m));
 } }
 function SymphiqBusinessAnalysisDashboardComponent_Conditional_27_Conditional_1_For_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "symphiq-profile-section", 36);
@@ -69997,7 +69997,7 @@ class FocusAreaHealthIndicatorComponent {
     }], null, { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], health: [{ type: i0.Input, args: [{ isSignal: true, alias: "health", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FocusAreaHealthIndicatorComponent, { className: "FocusAreaHealthIndicatorComponent", filePath: "lib/components/profile-analysis-dashboard/focus-area-health-indicator.component.ts", lineNumber: 46 }); })();
 
-const _c0$k = a0 => ({ name: "chevron-right", source: a0 });
+const _c0$l = a0 => ({ name: "chevron-right", source: a0 });
 const _forTrack0$g = ($index, $item) => $item.id;
 function RelatedGoalChipsComponent_Conditional_0_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
@@ -70015,7 +70015,7 @@ function RelatedGoalChipsComponent_Conditional_0_For_2_Template(rf, ctx) { if (r
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(goal_r2.title);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(3, _c0$k, ctx_r2.IconSourceEnum.HEROICONS));
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(3, _c0$l, ctx_r2.IconSourceEnum.HEROICONS));
 } }
 function RelatedGoalChipsComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 0);
@@ -70088,7 +70088,7 @@ class RelatedGoalChipsComponent {
     }], null, { relatedGoalIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "relatedGoalIds", required: false }] }], allGoals: [{ type: i0.Input, args: [{ isSignal: true, alias: "allGoals", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RelatedGoalChipsComponent, { className: "RelatedGoalChipsComponent", filePath: "lib/components/profile-analysis-dashboard/shared/related-goal-chips.component.ts", lineNumber: 31 }); })();
 
-const _c0$j = a0 => ({ name: "chevron-right", source: a0 });
+const _c0$k = a0 => ({ name: "chevron-right", source: a0 });
 const _c1$9 = a0 => ({ name: "chevron-down", source: a0 });
 const _c2$7 = a0 => [a0];
 function FocusAreaExecutiveSummaryComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
@@ -70417,7 +70417,7 @@ class FocusAreaExecutiveSummaryComponent {
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngClass", ctx.getTopPrioritiesButtonTextClasses());
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(22, _c0$j, ctx.IconSourceEnum.HEROICONS))("ngClass", ctx.getTopPrioritiesButtonTextClasses());
+            i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(22, _c0$k, ctx.IconSourceEnum.HEROICONS))("ngClass", ctx.getTopPrioritiesButtonTextClasses());
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngClass", ctx.getQuickWinsStatCardClasses());
             i0.ɵɵadvance();
@@ -70628,7 +70628,7 @@ class FocusAreaExecutiveSummaryComponent {
     }], null, { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], summary: [{ type: i0.Input, args: [{ isSignal: true, alias: "summary", required: false }] }], allGoals: [{ type: i0.Input, args: [{ isSignal: true, alias: "allGoals", required: false }] }], topPrioritiesClick: [{ type: i0.Output, args: ["topPrioritiesClick"] }], priorityDetailClick: [{ type: i0.Output, args: ["priorityDetailClick"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FocusAreaExecutiveSummaryComponent, { className: "FocusAreaExecutiveSummaryComponent", filePath: "lib/components/profile-analysis-dashboard/focus-area-executive-summary.component.ts", lineNumber: 195 }); })();
 
-const _c0$i = a0 => ({ name: "chart-bar", source: a0 });
+const _c0$j = a0 => ({ name: "chart-bar", source: a0 });
 const _c1$8 = a0 => ({ name: "signal", source: a0 });
 const _c2$6 = (a0, a1) => ({ name: a0, source: a1 });
 const _c3$4 = a0 => ({ name: "flag", source: a0 });
@@ -71164,7 +71164,7 @@ class MetricExecutiveSummaryComponent {
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngClass", ctx.bannerClasses());
             i0.ɵɵadvance(5);
-            i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(19, _c0$i, ctx.iconSource))("size", "w-8 h-8")("ngClass", ctx.iconClasses());
+            i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(19, _c0$j, ctx.iconSource))("size", "w-8 h-8")("ngClass", ctx.iconClasses());
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngClass", ctx.titleClasses());
             i0.ɵɵadvance();
@@ -71483,7 +71483,7 @@ class MetricExecutiveSummaryComponent {
     }], null, { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], summary: [{ type: i0.Input, args: [{ isSignal: true, alias: "summary", required: true }] }], metricName: [{ type: i0.Input, args: [{ isSignal: true, alias: "metricName", required: false }] }], allGoals: [{ type: i0.Input, args: [{ isSignal: true, alias: "allGoals", required: false }] }], topPrioritiesClick: [{ type: i0.Output, args: ["topPrioritiesClick"] }], priorityDetailClick: [{ type: i0.Output, args: ["priorityDetailClick"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MetricExecutiveSummaryComponent, { className: "MetricExecutiveSummaryComponent", filePath: "lib/components/profile-analysis-dashboard/metric-executive-summary.component.ts", lineNumber: 287 }); })();
 
-const _c0$h = a0 => ({ name: "chevron-right", source: a0 });
+const _c0$i = a0 => ({ name: "chevron-right", source: a0 });
 function GoalCardComponent_Conditional_13_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 12);
     i0.ɵɵtext(1);
@@ -71768,7 +71768,7 @@ function GoalCardComponent_Conditional_19_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r0.goal().objectives.length, " ");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(5, _c0$h, ctx_r0.IconSourceEnum.HEROICONS));
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(5, _c0$i, ctx_r0.IconSourceEnum.HEROICONS));
 } }
 function GoalCardComponent_Conditional_20_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
@@ -72390,7 +72390,7 @@ class GoalCardComponent {
     }], () => [], { goal: [{ type: i0.Input, args: [{ isSignal: true, alias: "goal", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], goalIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "goalIndex", required: false }] }], sectionIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "sectionIndex", required: false }] }], isInModal: [{ type: i0.Input, args: [{ isSignal: true, alias: "isInModal", required: false }] }], allMetrics: [{ type: i0.Input, args: [{ isSignal: true, alias: "allMetrics", required: false }] }], allCharts: [{ type: i0.Input, args: [{ isSignal: true, alias: "allCharts", required: false }] }], allInsights: [{ type: i0.Input, args: [{ isSignal: true, alias: "allInsights", required: false }] }], currentModalState: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentModalState", required: false }] }], businessProfile: [{ type: i0.Input, args: [{ isSignal: true, alias: "businessProfile", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(GoalCardComponent, { className: "GoalCardComponent", filePath: "lib/components/profile-analysis-dashboard/cards/goal-card.component.ts", lineNumber: 239 }); })();
 
-const _c0$g = a0 => ({ name: "link", source: a0 });
+const _c0$h = a0 => ({ name: "link", source: a0 });
 function CapabilityMatrixCardComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "p", 4);
     i0.ɵɵtext(1);
@@ -72453,7 +72453,7 @@ function CapabilityMatrixCardComponent_Conditional_29_Template(rf, ctx) { if (rf
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(6, _c0$g, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.relatedGoalsIconClasses());
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(6, _c0$h, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.relatedGoalsIconClasses());
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r0.relatedGoalsTitleClasses());
     i0.ɵɵadvance(2);
@@ -73372,7 +73372,7 @@ class CompetitiveComparisonCardComponent {
     }], () => [], { comparison: [{ type: i0.Input, args: [{ isSignal: true, alias: "comparison", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CompetitiveComparisonCardComponent, { className: "CompetitiveComparisonCardComponent", filePath: "lib/components/profile-analysis-dashboard/cards/competitive-comparison-card.component.ts", lineNumber: 125 }); })();
 
-const _c0$f = a0 => ({ name: "chevron-right", source: a0 });
+const _c0$g = a0 => ({ name: "chevron-right", source: a0 });
 const _forTrack0$e = ($index, $item) => $item.id;
 function PhaseTimelineCardComponent_Conditional_8_For_7_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
@@ -73390,7 +73390,7 @@ function PhaseTimelineCardComponent_Conditional_8_For_7_Template(rf, ctx) { if (
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(goal_r2.title);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(3, _c0$f, ctx_r2.IconSourceEnum.HEROICONS));
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(3, _c0$g, ctx_r2.IconSourceEnum.HEROICONS));
 } }
 function PhaseTimelineCardComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 7)(1, "h6", 10);
@@ -73798,7 +73798,7 @@ class PhaseTimelineCardComponent {
     }], () => [], { phase: [{ type: i0.Input, args: [{ isSignal: true, alias: "phase", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], isLast: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLast", required: false }] }], allGoals: [{ type: i0.Input, args: [{ isSignal: true, alias: "allGoals", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PhaseTimelineCardComponent, { className: "PhaseTimelineCardComponent", filePath: "lib/components/profile-analysis-dashboard/cards/phase-timeline-card.component.ts", lineNumber: 123 }); })();
 
-const _c0$e = a0 => ({ name: "chevron-right", source: a0 });
+const _c0$f = a0 => ({ name: "chevron-right", source: a0 });
 function OperationalCategoryCardComponent_Conditional_18_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 13)(1, "div", 19)(2, "span", 20);
     i0.ɵɵtext(3, "Industry Benchmark");
@@ -73844,7 +73844,7 @@ function OperationalCategoryCardComponent_Conditional_20_Template(rf, ctx) { if
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate2("", (tmp_2_0 = ctx_r0.category()) == null ? null : tmp_2_0.strengths == null ? null : tmp_2_0.strengths.length, " Strength", ((tmp_2_0 = ctx_r0.category()) == null ? null : tmp_2_0.strengths == null ? null : tmp_2_0.strengths.length) !== 1 ? "s" : "");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(4, _c0$e, ctx_r0.IconSourceEnum.HEROICONS));
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(4, _c0$f, ctx_r0.IconSourceEnum.HEROICONS));
 } }
 function OperationalCategoryCardComponent_Conditional_21_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
@@ -73867,7 +73867,7 @@ function OperationalCategoryCardComponent_Conditional_21_Template(rf, ctx) { if
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate2("", (tmp_2_0 = ctx_r0.category()) == null ? null : tmp_2_0.gaps == null ? null : tmp_2_0.gaps.length, " Gap", ((tmp_2_0 = ctx_r0.category()) == null ? null : tmp_2_0.gaps == null ? null : tmp_2_0.gaps.length) !== 1 ? "s" : "");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(4, _c0$e, ctx_r0.IconSourceEnum.HEROICONS));
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(4, _c0$f, ctx_r0.IconSourceEnum.HEROICONS));
 } }
 function OperationalCategoryCardComponent_Conditional_22_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
@@ -73890,7 +73890,7 @@ function OperationalCategoryCardComponent_Conditional_22_Template(rf, ctx) { if
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate2("", (tmp_2_0 = ctx_r0.category()) == null ? null : tmp_2_0.opportunities == null ? null : tmp_2_0.opportunities.length, " Opportunit", ((tmp_2_0 = ctx_r0.category()) == null ? null : tmp_2_0.opportunities == null ? null : tmp_2_0.opportunities.length) !== 1 ? "ies" : "y");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(4, _c0$e, ctx_r0.IconSourceEnum.HEROICONS));
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(4, _c0$f, ctx_r0.IconSourceEnum.HEROICONS));
 } }
 function OperationalCategoryCardComponent_Conditional_23_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
@@ -74397,7 +74397,7 @@ class OperationalCategoryCardComponent {
     }], () => [], { category: [{ type: i0.Input, args: [{ isSignal: true, alias: "category", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], categoryClick: [{ type: i0.Output, args: ["categoryClick"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(OperationalCategoryCardComponent, { className: "OperationalCategoryCardComponent", filePath: "lib/components/profile-analysis-dashboard/cards/operational-category-card.component.ts", lineNumber: 164 }); })();
 
-const _c0$d = a0 => ({ name: "arrow-trending-up", source: a0 });
+const _c0$e = a0 => ({ name: "arrow-trending-up", source: a0 });
 const _c1$7 = a0 => ({ name: "chat-bubble-left-right", source: a0 });
 const _forTrack0$d = ($index, $item) => $item.questionId;
 function KeyDriverCardComponent_Conditional_12_For_6_Template(rf, ctx) { if (rf & 1) {
@@ -74531,7 +74531,7 @@ class KeyDriverCardComponent {
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("ngClass", ctx.iconClasses());
             i0.ɵɵadvance();
-            i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(10, _c0$d, ctx.iconSource));
+            i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(10, _c0$e, ctx.iconSource));
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngClass", ctx.titleClasses());
             i0.ɵɵadvance();
@@ -74607,7 +74607,7 @@ class KeyDriverCardComponent {
     }], null, { driver: [{ type: i0.Input, args: [{ isSignal: true, alias: "driver", required: true }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KeyDriverCardComponent, { className: "KeyDriverCardComponent", filePath: "lib/components/profile-analysis-dashboard/cards/key-driver-card.component.ts", lineNumber: 73 }); })();
 
-const _c0$c = a0 => ({ name: "exclamation-triangle", source: a0 });
+const _c0$d = a0 => ({ name: "exclamation-triangle", source: a0 });
 const _c1$6 = a0 => ({ name: "chat-bubble-left-right", source: a0 });
 const _forTrack0$c = ($index, $item) => $item.questionId;
 function BottleneckCardComponent_Conditional_12_For_6_Template(rf, ctx) { if (rf & 1) {
@@ -74763,7 +74763,7 @@ class BottleneckCardComponent {
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("ngClass", ctx.iconClasses());
             i0.ɵɵadvance();
-            i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(14, _c0$c, ctx.iconSource));
+            i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(14, _c0$d, ctx.iconSource));
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngClass", ctx.titleClasses());
             i0.ɵɵadvance();
@@ -74834,7 +74834,7 @@ class BottleneckCardComponent {
     }], null, { bottleneck: [{ type: i0.Input, args: [{ isSignal: true, alias: "bottleneck", required: true }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(BottleneckCardComponent, { className: "BottleneckCardComponent", filePath: "lib/components/profile-analysis-dashboard/cards/bottleneck-card.component.ts", lineNumber: 104 }); })();
 
-const _c0$b = a0 => ({ name: "arrow-right", source: a0 });
+const _c0$c = a0 => ({ name: "arrow-right", source: a0 });
 const _c1$5 = a0 => ({ name: "arrow-left", source: a0 });
 const _c2$5 = a0 => ({ name: "arrows-right-left", source: a0 });
 const _c3$3 = a0 => ({ name: "scale", source: a0 });
@@ -74866,7 +74866,7 @@ function MetricRelationshipsCardComponent_Conditional_1_Template(rf, ctx) { if (
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r1.getIconClasses("influences"));
     i0.ɵɵadvance();
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(4, _c0$b, ctx_r1.iconSource));
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(4, _c0$c, ctx_r1.iconSource));
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.titleClasses());
     i0.ɵɵadvance(3);
@@ -75136,7 +75136,7 @@ class MetricRelationshipsCardComponent {
     }], null, { relationships: [{ type: i0.Input, args: [{ isSignal: true, alias: "relationships", required: true }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MetricRelationshipsCardComponent, { className: "MetricRelationshipsCardComponent", filePath: "lib/components/profile-analysis-dashboard/cards/metric-relationships-card.component.ts", lineNumber: 105 }); })();
 
-const _c0$a = a0 => ({ name: "link", source: a0 });
+const _c0$b = a0 => ({ name: "link", source: a0 });
 function RelatedMetricCardComponent_Conditional_13_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 9);
     i0.ɵɵelement(1, "symphiq-icon", 10);
@@ -75147,7 +75147,7 @@ function RelatedMetricCardComponent_Conditional_13_Template(rf, ctx) { if (rf &
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("ngClass", ctx_r0.borderClasses());
     i0.ɵɵadvance();
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(6, _c0$a, ctx_r0.IconSourceEnumValue.HEROICONS))("ngClass", ctx_r0.sharedGoalsIconClasses());
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(6, _c0$b, ctx_r0.IconSourceEnumValue.HEROICONS))("ngClass", ctx_r0.sharedGoalsIconClasses());
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r0.sharedGoalsTextClasses());
     i0.ɵɵadvance();
@@ -75816,7 +75816,7 @@ class RelatedMetricsListComponent {
     }], null, { relatedMetrics: [{ type: i0.Input, args: [{ isSignal: true, alias: "relatedMetrics", required: true }] }], currentMetricName: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentMetricName", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], metricClicked: [{ type: i0.Output, args: ["metricClicked"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RelatedMetricsListComponent, { className: "RelatedMetricsListComponent", filePath: "lib/components/profile-analysis-dashboard/cards/related-metrics-list.component.ts", lineNumber: 170 }); })();
 
-const _c0$9 = (a0, a1) => ({ name: a0, source: a1 });
+const _c0$a = (a0, a1) => ({ name: a0, source: a1 });
 const _c1$4 = a0 => ({ name: "signal", source: a0 });
 const _c2$4 = a0 => ({ name: "calendar", source: a0 });
 const _c3$2 = a0 => ({ name: "flag", source: a0 });
@@ -76026,7 +76026,7 @@ class PerformanceMetricsCardComponent {
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngClass", ctx.trendBadgeClasses());
             i0.ɵɵadvance();
-            i0.ɵɵproperty("icon", i0.ɵɵpureFunction2(32, _c0$9, ctx.trendIcon(), ctx.iconSource));
+            i0.ɵɵproperty("icon", i0.ɵɵpureFunction2(32, _c0$a, ctx.trendIcon(), ctx.iconSource));
             i0.ɵɵadvance();
             i0.ɵɵtextInterpolate1(" ", ctx.metrics().trendDirection, " ");
             i0.ɵɵadvance(2);
@@ -76174,7 +76174,7 @@ class PerformanceMetricsCardComponent {
     }], () => [], { performanceMetrics: [{ type: i0.Input, args: [{ isSignal: true, alias: "performanceMetrics", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PerformanceMetricsCardComponent, { className: "PerformanceMetricsCardComponent", filePath: "lib/components/profile-analysis-dashboard/cards/performance-metrics-card.component.ts", lineNumber: 144 }); })();
 
-const _c0$8 = a0 => ({ name: "funnel", source: a0 });
+const _c0$9 = a0 => ({ name: "funnel", source: a0 });
 const _c1$3 = a0 => ({ name: "chart-bar-square", source: a0 });
 const _c2$3 = a0 => ({ name: "chevron-right", source: a0 });
 const _c3$1 = a0 => ({ name: "arrow-left", source: a0 });
@@ -76365,7 +76365,7 @@ class FunnelContextCardComponent {
         } if (rf & 2) {
             i0.ɵɵproperty("ngClass", ctx.cardClasses());
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(13, _c0$8, ctx.iconSource))("ngClass", ctx.iconClasses());
+            i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(13, _c0$9, ctx.iconSource))("ngClass", ctx.iconClasses());
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngClass", ctx.headerClasses());
             i0.ɵɵadvance(3);
@@ -76501,7 +76501,7 @@ class FunnelContextCardComponent {
     }], () => [], { funnelContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "funnelContext", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], metricClick: [{ type: i0.Output, args: ["metricClick"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FunnelContextCardComponent, { className: "FunnelContextCardComponent", filePath: "lib/components/profile-analysis-dashboard/cards/funnel-context-card.component.ts", lineNumber: 125 }); })();
 
-const _c0$7 = (a0, a1) => ({ name: a0, source: a1 });
+const _c0$8 = (a0, a1) => ({ name: a0, source: a1 });
 const _c1$2 = a0 => ({ name: "target", source: a0 });
 const _c2$2 = a0 => ({ name: "star", source: a0 });
 class MetricComparisonStatsComponent {
@@ -76712,7 +76712,7 @@ class MetricComparisonStatsComponent {
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngClass", ctx.statCardClasses());
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("icon", i0.ɵɵpureFunction2(24, _c0$7, ctx.yoyIcon(), ctx.iconSource))("ngClass", ctx.yoyIconClasses());
+            i0.ɵɵproperty("icon", i0.ɵɵpureFunction2(24, _c0$8, ctx.yoyIcon(), ctx.iconSource))("ngClass", ctx.yoyIconClasses());
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngClass", ctx.labelClasses());
             i0.ɵɵadvance(2);
@@ -76944,7 +76944,7 @@ class PerformanceOverviewContainerComponent {
     }], () => [], { performanceOverviewData: [{ type: i0.Input, args: [{ isSignal: true, alias: "performanceOverviewData", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], metricClick: [{ type: i0.Output, args: ["metricClick"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PerformanceOverviewContainerComponent, { className: "PerformanceOverviewContainerComponent", filePath: "lib/components/profile-analysis-dashboard/cards/performance-overview-container.component.ts", lineNumber: 58 }); })();
 
-const _c0$6 = a0 => ({ name: "chevron-right", source: a0 });
+const _c0$7 = a0 => ({ name: "chevron-right", source: a0 });
 const _c1$1 = a0 => ({ name: "chevron-down", source: a0 });
 const _c2$1 = a0 => ({ name: "clock", source: a0 });
 const _c3 = a0 => [a0];
@@ -77147,7 +77147,7 @@ function ProfileSectionContentComponent_Conditional_1_Template(rf, ctx) { if (rf
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r1.keyStrengthsButtonClasses());
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(26, _c0$6, ctx_r1.IconSourceEnumValue.HEROICONS))("ngClass", ctx_r1.keyStrengthsButtonClasses());
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(26, _c0$7, ctx_r1.IconSourceEnumValue.HEROICONS))("ngClass", ctx_r1.keyStrengthsButtonClasses());
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.criticalGapsCardClasses());
     i0.ɵɵadvance();
@@ -77159,7 +77159,7 @@ function ProfileSectionContentComponent_Conditional_1_Template(rf, ctx) { if (rf
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r1.criticalGapsButtonClasses());
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(28, _c0$6, ctx_r1.IconSourceEnumValue.HEROICONS))("ngClass", ctx_r1.criticalGapsButtonClasses());
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(28, _c0$7, ctx_r1.IconSourceEnumValue.HEROICONS))("ngClass", ctx_r1.criticalGapsButtonClasses());
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.quickWinsCardClasses());
     i0.ɵɵadvance();
@@ -77238,7 +77238,7 @@ function ProfileSectionContentComponent_Conditional_3_Template(rf, ctx) { if (rf
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r1.focusAreaStrengthsButtonClasses());
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(21, _c0$6, ctx_r1.IconSourceEnumValue.HEROICONS))("ngClass", ctx_r1.focusAreaStrengthsButtonClasses());
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(21, _c0$7, ctx_r1.IconSourceEnumValue.HEROICONS))("ngClass", ctx_r1.focusAreaStrengthsButtonClasses());
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.focusAreaGapsStatCardClasses());
     i0.ɵɵadvance();
@@ -77250,7 +77250,7 @@ function ProfileSectionContentComponent_Conditional_3_Template(rf, ctx) { if (rf
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r1.focusAreaGapsButtonClasses());
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(23, _c0$6, ctx_r1.IconSourceEnumValue.HEROICONS))("ngClass", ctx_r1.focusAreaGapsButtonClasses());
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(23, _c0$7, ctx_r1.IconSourceEnumValue.HEROICONS))("ngClass", ctx_r1.focusAreaGapsButtonClasses());
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.focusAreaOpportunitiesStatCardClasses());
     i0.ɵɵadvance();
@@ -77262,7 +77262,7 @@ function ProfileSectionContentComponent_Conditional_3_Template(rf, ctx) { if (rf
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r1.focusAreaOpportunitiesButtonClasses());
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(25, _c0$6, ctx_r1.IconSourceEnumValue.HEROICONS))("ngClass", ctx_r1.focusAreaOpportunitiesButtonClasses());
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(25, _c0$7, ctx_r1.IconSourceEnumValue.HEROICONS))("ngClass", ctx_r1.focusAreaOpportunitiesButtonClasses());
 } }
 function ProfileSectionContentComponent_Conditional_4_For_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div");
@@ -77609,7 +77609,7 @@ function ProfileSectionContentComponent_Conditional_11_Conditional_2_For_5_Condi
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1("", ctx_r1.getTacticalRecRelatedMetricsCount(recommendation_r19), " Related Metrics");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(6, _c0$6, ctx_r1.IconSourceEnumValue.HEROICONS));
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(6, _c0$7, ctx_r1.IconSourceEnumValue.HEROICONS));
 } }
 function ProfileSectionContentComponent_Conditional_11_Conditional_2_For_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 16)(1, "div", 69)(2, "h4", 75);
@@ -83024,7 +83024,7 @@ class StrategyRecommendationsModalContentComponent {
     }], null, { strategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "strategy", required: false }] }], objectiveTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "objectiveTitle", required: false }] }], goalTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "goalTitle", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], allMetrics: [{ type: i0.Input, args: [{ isSignal: true, alias: "allMetrics", required: false }] }], allCharts: [{ type: i0.Input, args: [{ isSignal: true, alias: "allCharts", required: false }] }], allInsights: [{ type: i0.Input, args: [{ isSignal: true, alias: "allInsights", required: false }] }], allBusinessInsights: [{ type: i0.Input, args: [{ isSignal: true, alias: "allBusinessInsights", required: false }] }], currentModalState: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentModalState", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(StrategyRecommendationsModalContentComponent, { className: "StrategyRecommendationsModalContentComponent", filePath: "lib/components/profile-analysis-dashboard/modals/strategy-recommendations-modal-content.component.ts", lineNumber: 489 }); })();
 
-const _c0$5 = a0 => ({ name: "chevron-right", source: a0 });
+const _c0$6 = a0 => ({ name: "chevron-right", source: a0 });
 function CategoryDetailModalContentComponent_Conditional_16_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div")(1, "span", 19);
     i0.ɵɵtext(2, "Industry:");
@@ -83137,7 +83137,7 @@ function CategoryDetailModalContentComponent_Conditional_17_For_7_Template(rf, c
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", strength_r3 == null ? null : strength_r3.description, " ");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(7, _c0$5, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.chevronClasses());
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(7, _c0$6, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.chevronClasses());
 } }
 function CategoryDetailModalContentComponent_Conditional_17_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 27)(1, "h4", 15);
@@ -83204,7 +83204,7 @@ function CategoryDetailModalContentComponent_Conditional_18_For_7_Template(rf, c
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", gap_r5 == null ? null : gap_r5.description, " ");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(8, _c0$5, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.chevronClasses());
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(8, _c0$6, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.chevronClasses());
 } }
 function CategoryDetailModalContentComponent_Conditional_18_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 38)(1, "h4", 15);
@@ -83271,7 +83271,7 @@ function CategoryDetailModalContentComponent_Conditional_19_For_7_Template(rf, c
     i0.ɵɵadvance();
     i0.ɵɵconditional((opportunity_r7 == null ? null : opportunity_r7.potentialImpact) ? 7 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(8, _c0$5, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.chevronClasses());
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(8, _c0$6, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.chevronClasses());
 } }
 function CategoryDetailModalContentComponent_Conditional_19_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 44)(1, "h4", 15);
@@ -84153,7 +84153,7 @@ class StrengthDetailModalContentComponent {
     }], null, { strength: [{ type: i0.Input, args: [{ isSignal: true, alias: "strength", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], allFunnelStrengths: [{ type: i0.Input, args: [{ isSignal: true, alias: "allFunnelStrengths", required: false }] }], currentModalState: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentModalState", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(StrengthDetailModalContentComponent, { className: "StrengthDetailModalContentComponent", filePath: "lib/components/profile-analysis-dashboard/modals/strength-detail-modal-content.component.ts", lineNumber: 124 }); })();
 
-const _c0$4 = () => [];
+const _c0$5 = () => [];
 function GapDetailModalContentComponent_Conditional_10_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 9);
     i0.ɵɵtext(1);
@@ -84266,7 +84266,7 @@ function GapDetailModalContentComponent_Conditional_16_Template(rf, ctx) { if (r
     i0.ɵɵclassMap(ctx_r0.isDark() ? "border-slate-700" : "border-slate-200");
     i0.ɵɵproperty("ngClass", ctx_r0.sectionTitleClasses());
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("relatedGoalIds", ((tmp_4_0 = ctx_r0.gap()) == null ? null : tmp_4_0.linkedGoalIds) ?? i0.ɵɵpureFunction0(7, _c0$4))("allGoals", ctx_r0.allGoals())("viewMode", ctx_r0.viewMode());
+    i0.ɵɵproperty("relatedGoalIds", ((tmp_4_0 = ctx_r0.gap()) == null ? null : tmp_4_0.linkedGoalIds) ?? i0.ɵɵpureFunction0(7, _c0$5))("allGoals", ctx_r0.allGoals())("viewMode", ctx_r0.viewMode());
 } }
 function GapDetailModalContentComponent_Conditional_17_For_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 25);
@@ -84550,7 +84550,7 @@ class GapDetailModalContentComponent {
     }], null, { gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], allGoals: [{ type: i0.Input, args: [{ isSignal: true, alias: "allGoals", required: false }] }], allWeaknesses: [{ type: i0.Input, args: [{ isSignal: true, alias: "allWeaknesses", required: false }] }], currentModalState: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentModalState", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(GapDetailModalContentComponent, { className: "GapDetailModalContentComponent", filePath: "lib/components/profile-analysis-dashboard/modals/gap-detail-modal-content.component.ts", lineNumber: 129 }); })();
 
-const _c0$3 = a0 => ({ name: "chevron-right", source: a0 });
+const _c0$4 = a0 => ({ name: "chevron-right", source: a0 });
 const _forTrack0$5 = ($index, $item) => $item.id || $index;
 function OpportunityDetailModalContentComponent_Conditional_11_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 9)(1, "h4", 10);
@@ -84655,7 +84655,7 @@ function OpportunityDetailModalContentComponent_Conditional_14_Conditional_0_For
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(goal_r5.title || goal_r5.id);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(4, _c0$3, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.chevronClasses());
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(4, _c0$4, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.chevronClasses());
 } }
 function OpportunityDetailModalContentComponent_Conditional_14_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 9)(1, "h4", 24);
@@ -86431,64 +86431,64 @@ class BillingCurrencySelectorCardComponent {
                 standalone: true,
                 imports: [CommonModule, FormsModule],
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                template: `
-    <div [ngClass]="containerClasses()" class="rounded-2xl border shadow-lg overflow-hidden">
-      <div [ngClass]="headerClasses()" class="px-6 py-5 border-b">
-        <div class="flex items-center gap-3">
-          <div [ngClass]="iconContainerClasses()" class="p-2.5 rounded-lg">
-            <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="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"></path>
-            </svg>
-          </div>
-          <div>
-            <h2 [ngClass]="titleClasses()" class="text-xl font-bold">
-              Select Your Billing Currency
-            </h2>
-            <p [ngClass]="subtitleClasses()" class="text-sm mt-0.5">
-              Choose the currency for your subscription
-            </p>
-          </div>
-        </div>
-      </div>
-
-      <div [ngClass]="contentClasses()" class="p-6">
-        <div class="space-y-6">
-          <div class="space-y-3">
-            @for (currency of currencies; track currency.code) {
-              <label
-                [ngClass]="getCurrencyOptionClasses(currency.code)"
-                class="flex items-center gap-4 p-4 rounded-xl border-2 cursor-pointer transition-all duration-200 hover:scale-[1.01]">
-                <input
-                  type="radio"
-                  [name]="'currency'"
-                  [value]="currency.code"
-                  [(ngModel)]="selectedCurrency"
-                  (change)="handleCurrencyChange(currency.code)"
-                  [disabled]="isLoading()"
-                  [ngClass]="getRadioClasses()"
-                  class="w-5 h-5 flex-shrink-0 cursor-pointer disabled:cursor-not-allowed"
-                />
-                <div class="flex-1">
-                  <div class="flex items-center gap-2">
-                    <span [ngClass]="getCurrencyCodeClasses()" class="text-lg font-bold">
-                      {{ currency.code }}
-                    </span>
-                    <span [ngClass]="getCurrencySymbolClasses()" class="text-sm">
-                      ({{ currency.symbol }})
-                    </span>
-                  </div>
-                  <p [ngClass]="getCurrencyNameClasses()" class="text-sm mt-0.5">
-                    {{ currency.name }}
-                  </p>
-                </div>
-              </label>
-            }
-          </div>
-
-          
-        </div>
-      </div>
-    </div>
+                template: `
+    <div [ngClass]="containerClasses()" class="rounded-2xl border shadow-lg overflow-hidden">
+      <div [ngClass]="headerClasses()" class="px-6 py-5 border-b">
+        <div class="flex items-center gap-3">
+          <div [ngClass]="iconContainerClasses()" class="p-2.5 rounded-lg">
+            <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="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"></path>
+            </svg>
+          </div>
+          <div>
+            <h2 [ngClass]="titleClasses()" class="text-xl font-bold">
+              Select Your Billing Currency
+            </h2>
+            <p [ngClass]="subtitleClasses()" class="text-sm mt-0.5">
+              Choose the currency for your subscription
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div [ngClass]="contentClasses()" class="p-6">
+        <div class="space-y-6">
+          <div class="space-y-3">
+            @for (currency of currencies; track currency.code) {
+              <label
+                [ngClass]="getCurrencyOptionClasses(currency.code)"
+                class="flex items-center gap-4 p-4 rounded-xl border-2 cursor-pointer transition-all duration-200 hover:scale-[1.01]">
+                <input
+                  type="radio"
+                  [name]="'currency'"
+                  [value]="currency.code"
+                  [(ngModel)]="selectedCurrency"
+                  (change)="handleCurrencyChange(currency.code)"
+                  [disabled]="isLoading()"
+                  [ngClass]="getRadioClasses()"
+                  class="w-5 h-5 flex-shrink-0 cursor-pointer disabled:cursor-not-allowed"
+                />
+                <div class="flex-1">
+                  <div class="flex items-center gap-2">
+                    <span [ngClass]="getCurrencyCodeClasses()" class="text-lg font-bold">
+                      {{ currency.code }}
+                    </span>
+                    <span [ngClass]="getCurrencySymbolClasses()" class="text-sm">
+                      ({{ currency.symbol }})
+                    </span>
+                  </div>
+                  <p [ngClass]="getCurrencyNameClasses()" class="text-sm mt-0.5">
+                    {{ currency.name }}
+                  </p>
+                </div>
+              </label>
+            }
+          </div>
+
+          
+        </div>
+      </div>
+    </div>
   `
             }]
     }], () => [], { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], initialCurrency: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialCurrency", required: false }] }], currencySelected: [{ type: i0.Output, args: ["currencySelected"] }] }); })();
@@ -86650,73 +86650,74 @@ class PlanSelectionPlaceholderCardComponent {
                 standalone: true,
                 imports: [CommonModule],
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                template: `
-    <div [ngClass]="containerClasses()" class="rounded-2xl border shadow-lg overflow-hidden">
-      <div [ngClass]="headerClasses()" class="px-6 py-5 border-b">
-        <div class="flex items-center gap-3">
-          <div [ngClass]="iconContainerClasses()" class="p-2.5 rounded-lg">
-            <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="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"></path>
-            </svg>
-          </div>
-          <div>
-            <h2 [ngClass]="titleClasses()" class="text-xl font-bold">
-              Choose Your Plan
-            </h2>
-            <p [ngClass]="subtitleClasses()" class="text-sm mt-0.5 flex items-center gap-2">
-              Selected currency: <span class="font-semibold">{{ selectedCurrency() }}</span>
-              <button
-                (click)="onEditClick()"
-                [ngClass]="editButtonClasses()"
-                class="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium rounded-md transition-colors 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="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"></path>
-                </svg>
-                Edit
-              </button>
-            </p>
-          </div>
-        </div>
-      </div>
-
-      <div [ngClass]="contentClasses()" class="p-8">
-        <div class="text-center space-y-6">
-          <div [ngClass]="placeholderIconClasses()" class="w-20 h-20 mx-auto rounded-full flex items-center justify-center">
-            <svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
-            </svg>
-          </div>
-
-          <div class="space-y-3">
-            <h3 [ngClass]="placeholderTitleClasses()" class="text-2xl font-bold">
-              Plan Selection Coming Soon
-            </h3>
-            <p [ngClass]="placeholderTextClasses()" class="text-base leading-relaxed max-w-md mx-auto">
-              Your billing currency has been set to <strong>{{ selectedCurrency() }}</strong>. Plan selection and subscription management will be available shortly.
-            </p>
-          </div>
-
-          <div [ngClass]="infoBoxClasses()" class="p-5 rounded-xl border inline-block">
-            <div class="flex items-start gap-3 text-left">
-              <svg class="w-5 h-5 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
-                <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path>
-              </svg>
-              <div class="flex-1">
-                <p [ngClass]="infoTextClasses()" class="text-sm leading-relaxed">
-                  You'll be able to view and select from our subscription plans once this feature is enabled. In the meantime, your currency preference has been saved.
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
+                template: `
+    <div [ngClass]="containerClasses()" class="rounded-2xl border shadow-lg overflow-hidden">
+      <div [ngClass]="headerClasses()" class="px-6 py-5 border-b">
+        <div class="flex items-center gap-3">
+          <div [ngClass]="iconContainerClasses()" class="p-2.5 rounded-lg">
+            <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="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"></path>
+            </svg>
+          </div>
+          <div>
+            <h2 [ngClass]="titleClasses()" class="text-xl font-bold">
+              Choose Your Plan
+            </h2>
+            <p [ngClass]="subtitleClasses()" class="text-sm mt-0.5 flex items-center gap-2">
+              Selected currency: <span class="font-semibold">{{ selectedCurrency() }}</span>
+              <button
+                (click)="onEditClick()"
+                [ngClass]="editButtonClasses()"
+                class="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium rounded-md transition-colors 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="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"></path>
+                </svg>
+                Edit
+              </button>
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div [ngClass]="contentClasses()" class="p-8">
+        <div class="text-center space-y-6">
+          <div [ngClass]="placeholderIconClasses()" class="w-20 h-20 mx-auto rounded-full flex items-center justify-center">
+            <svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+            </svg>
+          </div>
+
+          <div class="space-y-3">
+            <h3 [ngClass]="placeholderTitleClasses()" class="text-2xl font-bold">
+              Plan Selection Coming Soon
+            </h3>
+            <p [ngClass]="placeholderTextClasses()" class="text-base leading-relaxed max-w-md mx-auto">
+              Your billing currency has been set to <strong>{{ selectedCurrency() }}</strong>. Plan selection and subscription management will be available shortly.
+            </p>
+          </div>
+
+          <div [ngClass]="infoBoxClasses()" class="p-5 rounded-xl border inline-block">
+            <div class="flex items-start gap-3 text-left">
+              <svg class="w-5 h-5 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
+                <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path>
+              </svg>
+              <div class="flex-1">
+                <p [ngClass]="infoTextClasses()" class="text-sm leading-relaxed">
+                  You'll be able to view and select from our subscription plans once this feature is enabled. In the meantime, your currency preference has been saved.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   `
             }]
     }], null, { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], selectedCurrency: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedCurrency", required: false }] }], editCurrency: [{ type: i0.Output, args: ["editCurrency"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PlanSelectionPlaceholderCardComponent, { className: "PlanSelectionPlaceholderCardComponent", filePath: "lib/components/profile-analysis-dashboard/cards/plan-selection-placeholder-card.component.ts", lineNumber: 74 }); })();
 
+const _c0$3 = (a0, a1) => ({ "mb-8": a0, "mb-12": a1 });
 function BillingPeriodToggleComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "div", 7);
 } }
@@ -86780,7 +86781,7 @@ class BillingPeriodToggleComponent {
             : 'text-slate-600';
     }
     static { this.ɵfac = function BillingPeriodToggleComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || BillingPeriodToggleComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: BillingPeriodToggleComponent, selectors: [["symphiq-billing-period-toggle"]], inputs: { viewMode: [1, "viewMode"], selectedPeriodUnit: [1, "selectedPeriodUnit"], isLoading: [1, "isLoading"] }, outputs: { periodUnitChanged: "periodUnitChanged" }, decls: 15, vars: 10, consts: [[1, "flex", "flex-col", "items-center", "gap-4", "mb-8"], [1, "flex", "items-center", "gap-3"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"], [1, "inline-flex", "gap-2", "rounded-xl", "p-1.5", "transition-all", "duration-200", 3, "ngClass"], ["type", "button", 1, "relative", "px-6", "py-3", "rounded-lg", "font-semibold", "text-sm", "transition-all", "duration-200", "disabled:cursor-not-allowed", 3, "click", "disabled", "ngClass"], [1, "relative", "z-10"], [1, "absolute", "inset-0", "rounded-lg", "shadow-lg", "opacity-20"], [1, "text-sm", 3, "ngClass"]], template: function BillingPeriodToggleComponent_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: BillingPeriodToggleComponent, selectors: [["symphiq-billing-period-toggle"]], inputs: { viewMode: [1, "viewMode"], selectedPeriodUnit: [1, "selectedPeriodUnit"], isLoading: [1, "isLoading"] }, outputs: { periodUnitChanged: "periodUnitChanged" }, decls: 15, vars: 14, consts: [[1, "flex", "flex-col", "items-center", "gap-4", 3, "ngClass"], [1, "flex", "items-center", "gap-3"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"], [1, "inline-flex", "gap-2", "rounded-xl", "p-1.5", "transition-all", "duration-200", 3, "ngClass"], ["type", "button", 1, "relative", "px-6", "py-3", "rounded-lg", "font-semibold", "text-sm", "transition-all", "duration-200", "disabled:cursor-not-allowed", 3, "click", "disabled", "ngClass"], [1, "relative", "z-10"], [1, "absolute", "inset-0", "rounded-lg", "shadow-lg", "opacity-20"], [1, "text-sm", 3, "ngClass"]], template: function BillingPeriodToggleComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1);
             i0.ɵɵnamespaceSVG();
             i0.ɵɵelementStart(2, "svg", 2);
@@ -86805,6 +86806,7 @@ class BillingPeriodToggleComponent {
             i0.ɵɵtext(14);
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(11, _c0$3, ctx.selectedPeriodUnit() !== ctx.periodUnitEnum.YEAR, ctx.selectedPeriodUnit() === ctx.periodUnitEnum.YEAR));
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngClass", ctx.iconClasses());
             i0.ɵɵadvance(2);
@@ -86830,69 +86832,110 @@ class BillingPeriodToggleComponent {
                 standalone: true,
                 imports: [CommonModule],
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                template: `
-    <div class="flex flex-col items-center gap-4 mb-8">
-      <div class="flex items-center gap-3">
-        <svg [ngClass]="iconClasses()" 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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
-        </svg>
-        <div [ngClass]="toggleContainerClasses()" class="inline-flex gap-2 rounded-xl p-1.5 transition-all duration-200">
-          <button
-            type="button"
-            [disabled]="isLoading()"
-            (click)="selectPeriod(periodUnitEnum.YEAR)"
-            [ngClass]="getButtonClasses(periodUnitEnum.YEAR)"
-            class="relative px-6 py-3 rounded-lg font-semibold text-sm transition-all duration-200 disabled:cursor-not-allowed">
-            <span class="relative z-10">Annual contract</span>
-            @if (selectedPeriodUnit() === periodUnitEnum.YEAR) {
-              <div class="absolute inset-0 rounded-lg shadow-lg opacity-20"></div>
-            }
-          </button>
-          <button
-            type="button"
-            [disabled]="isLoading()"
-            (click)="selectPeriod(periodUnitEnum.MONTH)"
-            [ngClass]="getButtonClasses(periodUnitEnum.MONTH)"
-            class="relative px-6 py-3 rounded-lg font-semibold text-sm transition-all duration-200 disabled:cursor-not-allowed">
-            <span class="relative z-10">Monthly contract</span>
-            @if (selectedPeriodUnit() === periodUnitEnum.MONTH) {
-              <div class="absolute inset-0 rounded-lg shadow-lg opacity-20"></div>
-            }
-          </button>
-        </div>
-      </div>
-      <p [ngClass]="subtitleClasses()" class="text-sm">
-        {{ getSubtitle() }}
-      </p>
-    </div>
+                template: `
+    <div [ngClass]="{'mb-8': selectedPeriodUnit() !== periodUnitEnum.YEAR, 'mb-12': selectedPeriodUnit() === periodUnitEnum.YEAR}" class="flex flex-col items-center gap-4">
+      <div class="flex items-center gap-3">
+        <svg [ngClass]="iconClasses()" 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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+        </svg>
+        <div [ngClass]="toggleContainerClasses()" class="inline-flex gap-2 rounded-xl p-1.5 transition-all duration-200">
+          <button
+            type="button"
+            [disabled]="isLoading()"
+            (click)="selectPeriod(periodUnitEnum.YEAR)"
+            [ngClass]="getButtonClasses(periodUnitEnum.YEAR)"
+            class="relative px-6 py-3 rounded-lg font-semibold text-sm transition-all duration-200 disabled:cursor-not-allowed">
+            <span class="relative z-10">Annual contract</span>
+            @if (selectedPeriodUnit() === periodUnitEnum.YEAR) {
+              <div class="absolute inset-0 rounded-lg shadow-lg opacity-20"></div>
+            }
+          </button>
+          <button
+            type="button"
+            [disabled]="isLoading()"
+            (click)="selectPeriod(periodUnitEnum.MONTH)"
+            [ngClass]="getButtonClasses(periodUnitEnum.MONTH)"
+            class="relative px-6 py-3 rounded-lg font-semibold text-sm transition-all duration-200 disabled:cursor-not-allowed">
+            <span class="relative z-10">Monthly contract</span>
+            @if (selectedPeriodUnit() === periodUnitEnum.MONTH) {
+              <div class="absolute inset-0 rounded-lg shadow-lg opacity-20"></div>
+            }
+          </button>
+        </div>
+      </div>
+      <p [ngClass]="subtitleClasses()" class="text-sm">
+        {{ getSubtitle() }}
+      </p>
+    </div>
   `
             }]
     }], null, { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], selectedPeriodUnit: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedPeriodUnit", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], periodUnitChanged: [{ type: i0.Output, args: ["periodUnitChanged"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(BillingPeriodToggleComponent, { className: "BillingPeriodToggleComponent", filePath: "lib/components/profile-analysis-dashboard/cards/billing-period-toggle.component.ts", lineNumber: 47 }); })();
 
+function PlanCardComponent_Conditional_1_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 31);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("ngClass", ctx_r0.savingsBadgeClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.getSavingsPercentage(), " ");
+} }
 function PlanCardComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 1);
-    i0.ɵɵtext(1, " Best value ");
+    i0.ɵɵelementStart(0, "div", 1)(1, "div", 27);
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(2, "svg", 28);
+    i0.ɵɵelement(3, "path", 29);
+    i0.ɵɵelementEnd();
+    i0.ɵɵnamespaceHTML();
+    i0.ɵɵelementStart(4, "span", 30);
+    i0.ɵɵtext(5, "Best Value");
+    i0.ɵɵelementEnd();
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(6, "svg", 28);
+    i0.ɵɵelement(7, "path", 29);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵconditionalCreate(8, PlanCardComponent_Conditional_1_Conditional_8_Template, 2, 2, "div", 31);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r0.badgeClasses());
+    i0.ɵɵadvance(7);
+    i0.ɵɵconditional(ctx_r0.getSavingsPercentage() ? 8 : -1);
 } }
-function PlanCardComponent_Conditional_13_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "div", 10);
+function PlanCardComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 5);
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(1, "svg", 18);
+    i0.ɵɵelement(2, "path", 32);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(3, " Most Popular Choice ");
+    i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngClass", ctx_r0.radioInnerClasses());
+    i0.ɵɵproperty("ngClass", ctx_r0.recommendedTextClasses());
 } }
-function PlanCardComponent_Conditional_19_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "button", 15);
+function PlanCardComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 9);
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(1, "svg", 23);
-    i0.ɵɵelement(2, "path", 24);
-    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(1, "svg", 18);
+    i0.ɵɵelement(2, "path", 33);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngClass", ctx_r0.tooltipButtonClasses());
+    i0.ɵɵproperty("ngClass", ctx_r0.savingsTextClasses());
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.getSavingsAmount(), " ");
+} }
+function PlanCardComponent_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "div", 12);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngClass", ctx_r0.radioInnerClasses());
 } }
 class PlanCardComponent {
     constructor() {
@@ -86957,25 +87000,40 @@ class PlanCardComponent {
     }
     getContractTerms() {
         const info = this.planInfo();
-        if (info.periodUnit === ChargebeeItemPricePeriodUnitEnum.YEAR) {
-            return 'One up-front payment covers 12 months of service. Plan auto-renews yearly—cancel at least 14 days before the renewal date to prevent the next term.';
-        }
-        else {
-            return 'Billed every month with no long-term commitment. Plan auto-renews each month—cancel at least 14 days before your next bill to stop future charges.';
-        }
+        return info.planItemPrice.description || '';
     }
-    hasTooltip(field) {
-        return false;
+    aiUsageTooltipContent() {
+        return {
+            title: 'How it works:',
+            markdown: `Your monthly subscription fee covers access to core features.
+
+AI usage is tracked throughout the month.
+
+At the end of each month, your total AI usage is calculated and automatically billed as a separate line item on your invoice.`
+        };
     }
     cardContainerClasses() {
         const isSelected = this.isSelected();
+        const isBestValue = this.showBestValueBadge();
         if (this.viewMode() === ViewModeEnum.DARK) {
+            if (isBestValue && isSelected) {
+                return 'bg-slate-800/60 border-amber-500 shadow-2xl shadow-amber-500/30';
+            }
+            if (isBestValue) {
+                return 'bg-slate-800/50 border-amber-500/70 hover:border-amber-400 hover:shadow-2xl hover:shadow-amber-500/40';
+            }
             if (isSelected) {
                 return 'bg-slate-800/60 border-blue-500 shadow-2xl shadow-blue-500/20';
             }
             return 'bg-slate-800/40 border-slate-700/50 hover:border-blue-500/50 hover:shadow-xl hover:shadow-blue-500/10';
         }
         else {
+            if (isBestValue && isSelected) {
+                return 'bg-white border-amber-500 shadow-2xl shadow-amber-500/30';
+            }
+            if (isBestValue) {
+                return 'bg-white border-amber-500/70 hover:border-amber-500 hover:shadow-2xl hover:shadow-amber-500/40';
+            }
             if (isSelected) {
                 return 'bg-white border-blue-500 shadow-2xl shadow-blue-500/20';
             }
@@ -86983,9 +87041,7 @@ class PlanCardComponent {
         }
     }
     badgeClasses() {
-        return this.viewMode() === ViewModeEnum.DARK
-            ? 'bg-gradient-to-r from-purple-600 to-pink-600 text-white'
-            : 'bg-gradient-to-r from-purple-600 to-pink-600 text-white';
+        return 'text-white';
     }
     planTitleClasses() {
         return this.viewMode() === ViewModeEnum.DARK
@@ -87070,62 +87126,119 @@ class PlanCardComponent {
             ? 'text-slate-400'
             : 'text-slate-600';
     }
+    savingsBadgeClasses() {
+        return this.viewMode() === ViewModeEnum.DARK
+            ? 'bg-gradient-to-r from-emerald-500 to-teal-500 text-white'
+            : 'bg-gradient-to-r from-emerald-500 to-teal-500 text-white';
+    }
+    recommendedTextClasses() {
+        return this.viewMode() === ViewModeEnum.DARK
+            ? 'text-amber-400'
+            : 'text-amber-600';
+    }
+    savingsTextClasses() {
+        return this.viewMode() === ViewModeEnum.DARK
+            ? 'text-emerald-400'
+            : 'text-emerald-600';
+    }
+    getSavingsPercentage() {
+        if (!this.showBestValueBadge())
+            return null;
+        const info = this.planInfo();
+        if (info.periodUnit === ChargebeeItemPricePeriodUnitEnum.YEAR) {
+            const annualPrice = info.planItemPrice.price || 0;
+            const monthlyEquivalent = (annualPrice / 12) * 12;
+            const monthlyPrice = info.planItemPrice.price || annualPrice;
+            if (monthlyPrice > 0) {
+                const savings = ((monthlyEquivalent - annualPrice) / monthlyEquivalent) * 100;
+                if (savings > 0) {
+                    return `Save ${Math.round(savings)}%`;
+                }
+            }
+        }
+        return null;
+    }
+    getSavingsAmount() {
+        if (!this.showBestValueBadge())
+            return null;
+        const info = this.planInfo();
+        if (info.periodUnit === ChargebeeItemPricePeriodUnitEnum.YEAR) {
+            const annualPrice = info.planItemPrice.price || 0;
+            const monthlyPrice = annualPrice / 12;
+            const monthlyPlanPrice = monthlyPrice * 1.2;
+            const totalMonthlyOver12 = monthlyPlanPrice * 12;
+            const savings = totalMonthlyOver12 - annualPrice;
+            if (savings > 0) {
+                const symbol = this.getCurrencySymbol();
+                const savingsFormatted = Math.floor(savings).toLocaleString();
+                return `${symbol}${savingsFormatted} savings vs. monthly billing`;
+            }
+        }
+        return null;
+    }
     static { this.ɵfac = function PlanCardComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PlanCardComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PlanCardComponent, selectors: [["symphiq-plan-card"]], inputs: { viewMode: [1, "viewMode"], planInfo: [1, "planInfo"], isSelected: [1, "isSelected"], selectedPeriodUnit: [1, "selectedPeriodUnit"] }, outputs: { planSelected: "planSelected" }, decls: 42, vars: 28, consts: [[1, "relative", "rounded-2xl", "border-2", "p-6", "transition-all", "duration-200", "cursor-pointer", "hover:scale-[1.02]", 3, "click", "ngClass"], [1, "absolute", "-top-3", "left-1/2", "transform", "-translate-x-1/2", "px-4", "py-1", "rounded-full", "text-xs", "font-bold", 3, "ngClass"], [1, "flex", "items-start", "justify-between", "mb-6"], [1, "flex-1"], [1, "text-xl", "font-bold", "mb-2", 3, "ngClass"], [1, "flex", "items-baseline", "gap-2"], [1, "text-4xl", "font-bold", 3, "ngClass"], [1, "text-base", 3, "ngClass"], [1, "flex-shrink-0", "ml-4"], [1, "w-6", "h-6", "rounded-full", "border-2", "flex", "items-center", "justify-center", "transition-all", "duration-200", 3, "ngClass"], [1, "w-3", "h-3", "rounded-full", 3, "ngClass"], [1, "space-y-4", 3, "ngClass"], [1, "flex", "justify-between", "items-center", "py-3", "border-b", 3, "ngClass"], [1, "flex", "items-center", "gap-2"], [1, "text-sm", "font-medium", 3, "ngClass"], [1, "w-4", "h-4", "rounded-full", "flex", "items-center", "justify-center", 3, "ngClass"], [1, "text-sm", "font-semibold", 3, "ngClass"], ["fill", "currentColor", "viewBox", "0 0 20 20", 1, "w-5", "h-5", 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, "flex", "justify-between", "items-center", "py-3", 3, "ngClass"], [1, "pt-4", "mt-4", 3, "ngClass"], [1, "text-xs", "font-semibold", "uppercase", "tracking-wider", "mb-2", 3, "ngClass"], [1, "text-sm", "leading-relaxed", 3, "ngClass"], ["fill", "currentColor", "viewBox", "0 0 20 20", 1, "w-3", "h-3"], ["fill-rule", "evenodd", "d", "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z", "clip-rule", "evenodd"]], template: function PlanCardComponent_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PlanCardComponent, selectors: [["symphiq-plan-card"]], inputs: { viewMode: [1, "viewMode"], planInfo: [1, "planInfo"], isSelected: [1, "isSelected"], selectedPeriodUnit: [1, "selectedPeriodUnit"] }, outputs: { planSelected: "planSelected" }, decls: 45, vars: 33, consts: [[1, "relative", "rounded-2xl", "border-2", "p-6", "transition-all", "duration-200", "cursor-pointer", "hover:scale-[1.02]", 3, "click", "ngClass"], [1, "absolute", "-top-5", "left-1/2", "flex", "flex-col", "items-center", "gap-2", "z-10"], [1, "flex", "items-start", "justify-between", "mb-6"], [1, "flex-1"], [1, "text-xl", "font-bold", "mb-2", 3, "ngClass"], [1, "text-sm", "font-semibold", "mb-2", "flex", "items-center", "gap-1", 3, "ngClass"], [1, "flex", "items-baseline", "gap-2"], [1, "text-4xl", "font-bold", 3, "ngClass"], [1, "text-base", 3, "ngClass"], [1, "text-sm", "font-bold", "mt-2", "flex", "items-center", "gap-1", 3, "ngClass"], [1, "flex-shrink-0", "ml-4"], [1, "w-6", "h-6", "rounded-full", "border-2", "flex", "items-center", "justify-center", "transition-all", "duration-200", 3, "ngClass"], [1, "w-3", "h-3", "rounded-full", 3, "ngClass"], [1, "space-y-4", 3, "ngClass"], [1, "flex", "justify-between", "items-center", "py-3", "border-b", 3, "ngClass"], [1, "flex", "items-center", "gap-2"], [1, "text-sm", "font-medium", 3, "ngClass"], ["tooltipType", "markdown", "tooltipPosition", "right", 1, "w-5", "h-5", "rounded-full", "flex", "items-center", "justify-center", 3, "libSymphiqTooltip", "ngClass"], ["fill", "currentColor", "viewBox", "0 0 20 20", 1, "w-4", "h-4"], ["fill-rule", "evenodd", "d", "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z", "clip-rule", "evenodd"], [1, "text-sm", "font-semibold", "text-right", "max-w-[60%]", 3, "ngClass"], ["fill", "currentColor", "viewBox", "0 0 20 20", 1, "w-5", "h-5", 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, "flex", "justify-between", "items-center", "py-3", 3, "ngClass"], [1, "pt-4", "mt-4", 3, "ngClass"], [1, "text-xs", "font-semibold", "uppercase", "tracking-wider", "mb-2", 3, "ngClass"], [1, "text-sm", "leading-relaxed", 3, "ngClass", "innerHTML"], [1, "best-value-badge", "px-6", "py-2", "rounded-full", "text-base", "font-extrabold", "flex", "items-center", "gap-2", "shadow-2xl", 3, "ngClass"], ["fill", "currentColor", "viewBox", "0 0 20 20", 1, "w-5", "h-5", "sparkle-icon"], ["d", "M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"], [1, "drop-shadow-lg"], [1, "savings-badge", "px-3", "py-1", "rounded-full", "text-xs", "font-bold", "shadow-lg", 3, "ngClass"], ["fill-rule", "evenodd", "d", "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z", "clip-rule", "evenodd"], ["fill-rule", "evenodd", "d", "M5 2a1 1 0 011 1v1h1a1 1 0 010 2H6v1a1 1 0 01-2 0V6H3a1 1 0 010-2h1V3a1 1 0 011-1zm0 10a1 1 0 011 1v1h1a1 1 0 110 2H6v1a1 1 0 11-2 0v-1H3a1 1 0 110-2h1v-1a1 1 0 011-1zM12 2a1 1 0 01.967.744L14.146 7.2 17.5 9.134a1 1 0 010 1.732l-3.354 1.935-1.18 4.455a1 1 0 01-1.933 0L9.854 12.8 6.5 10.866a1 1 0 010-1.732l3.354-1.935 1.18-4.455A1 1 0 0112 2z", "clip-rule", "evenodd"]], template: function PlanCardComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0);
             i0.ɵɵlistener("click", function PlanCardComponent_Template_div_click_0_listener() { return ctx.handleCardClick(); });
-            i0.ɵɵconditionalCreate(1, PlanCardComponent_Conditional_1_Template, 2, 1, "div", 1);
+            i0.ɵɵconditionalCreate(1, PlanCardComponent_Conditional_1_Template, 9, 2, "div", 1);
             i0.ɵɵelementStart(2, "div", 2)(3, "div", 3)(4, "h3", 4);
             i0.ɵɵtext(5);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(6, "div", 5)(7, "span", 6);
-            i0.ɵɵtext(8);
+            i0.ɵɵconditionalCreate(6, PlanCardComponent_Conditional_6_Template, 4, 1, "div", 5);
+            i0.ɵɵelementStart(7, "div", 6)(8, "span", 7);
+            i0.ɵɵtext(9);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(9, "span", 7);
-            i0.ɵɵtext(10);
-            i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(11, "div", 8)(12, "div", 9);
-            i0.ɵɵconditionalCreate(13, PlanCardComponent_Conditional_13_Template, 1, 1, "div", 10);
-            i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(14, "div", 11)(15, "div", 12)(16, "div", 13)(17, "span", 14);
-            i0.ɵɵtext(18, "AI usage");
+            i0.ɵɵelementStart(10, "span", 8);
+            i0.ɵɵtext(11);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵconditionalCreate(12, PlanCardComponent_Conditional_12_Template, 4, 2, "div", 9);
             i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(19, PlanCardComponent_Conditional_19_Template, 3, 1, "button", 15);
+            i0.ɵɵelementStart(13, "div", 10)(14, "div", 11);
+            i0.ɵɵconditionalCreate(15, PlanCardComponent_Conditional_15_Template, 1, 1, "div", 12);
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(16, "div", 13)(17, "div", 14)(18, "div", 15)(19, "span", 16);
+            i0.ɵɵtext(20, "AI usage");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(20, "span", 16);
-            i0.ɵɵtext(21, " charged monthly based on your actual usage ");
+            i0.ɵɵelementStart(21, "button", 17);
+            i0.ɵɵnamespaceSVG();
+            i0.ɵɵelementStart(22, "svg", 18);
+            i0.ɵɵelement(23, "path", 19);
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵnamespaceHTML();
+            i0.ɵɵelementStart(24, "span", 20);
+            i0.ɵɵtext(25, " Charged monthly based on your actual usage\u2014no per-token counting, just straightforward monthly billing. ");
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(22, "div", 12)(23, "span", 14);
-            i0.ɵɵtext(24, "Unlimited recommendations");
+            i0.ɵɵelementStart(26, "div", 14)(27, "span", 16);
+            i0.ɵɵtext(28, "Unlimited recommendations");
             i0.ɵɵelementEnd();
             i0.ɵɵnamespaceSVG();
-            i0.ɵɵelementStart(25, "svg", 17);
-            i0.ɵɵelement(26, "path", 18);
+            i0.ɵɵelementStart(29, "svg", 21);
+            i0.ɵɵelement(30, "path", 22);
             i0.ɵɵelementEnd()();
             i0.ɵɵnamespaceHTML();
-            i0.ɵɵelementStart(27, "div", 12)(28, "span", 14);
-            i0.ɵɵtext(29, "Unlimited seats");
+            i0.ɵɵelementStart(31, "div", 14)(32, "span", 16);
+            i0.ɵɵtext(33, "Unlimited seats");
             i0.ɵɵelementEnd();
             i0.ɵɵnamespaceSVG();
-            i0.ɵɵelementStart(30, "svg", 17);
-            i0.ɵɵelement(31, "path", 18);
+            i0.ɵɵelementStart(34, "svg", 21);
+            i0.ɵɵelement(35, "path", 22);
             i0.ɵɵelementEnd()();
             i0.ɵɵnamespaceHTML();
-            i0.ɵɵelementStart(32, "div", 19)(33, "span", 14);
-            i0.ɵɵtext(34, "Google Analytics integration");
+            i0.ɵɵelementStart(36, "div", 23)(37, "span", 16);
+            i0.ɵɵtext(38, "Google Analytics integration");
             i0.ɵɵelementEnd();
             i0.ɵɵnamespaceSVG();
-            i0.ɵɵelementStart(35, "svg", 17);
-            i0.ɵɵelement(36, "path", 18);
+            i0.ɵɵelementStart(39, "svg", 21);
+            i0.ɵɵelement(40, "path", 22);
             i0.ɵɵelementEnd()();
             i0.ɵɵnamespaceHTML();
-            i0.ɵɵelementStart(37, "div", 20)(38, "h4", 21);
-            i0.ɵɵtext(39, " Contract terms ");
+            i0.ɵɵelementStart(41, "div", 24)(42, "h4", 25);
+            i0.ɵɵtext(43, " Contract terms ");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(40, "p", 22);
-            i0.ɵɵtext(41);
-            i0.ɵɵelementEnd()()()();
+            i0.ɵɵelement(44, "p", 26);
+            i0.ɵɵelementEnd()()();
         } if (rf & 2) {
+            i0.ɵɵclassProp("best-value-card", ctx.showBestValueBadge());
             i0.ɵɵproperty("ngClass", ctx.cardContainerClasses());
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.showBestValueBadge() ? 1 : -1);
@@ -87133,6 +87246,8 @@ class PlanCardComponent {
             i0.ɵɵproperty("ngClass", ctx.planTitleClasses());
             i0.ɵɵadvance();
             i0.ɵɵtextInterpolate1(" ", ctx.getPlanTitle(), " ");
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.showBestValueBadge() ? 6 : -1);
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngClass", ctx.priceClasses());
             i0.ɵɵadvance();
@@ -87141,10 +87256,12 @@ class PlanCardComponent {
             i0.ɵɵproperty("ngClass", ctx.pricePeriodClasses());
             i0.ɵɵadvance();
             i0.ɵɵtextInterpolate1(" ", ctx.getPricePeriod(), " ");
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.showBestValueBadge() && ctx.getSavingsAmount() ? 12 : -1);
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngClass", ctx.radioClasses());
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.isSelected() ? 13 : -1);
+            i0.ɵɵconditional(ctx.isSelected() ? 15 : -1);
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngClass", ctx.sectionClasses());
             i0.ɵɵadvance();
@@ -87152,8 +87269,8 @@ class PlanCardComponent {
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngClass", ctx.labelClasses());
             i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.hasTooltip("aiUsage") ? 19 : -1);
-            i0.ɵɵadvance();
+            i0.ɵɵproperty("libSymphiqTooltip", ctx.aiUsageTooltipContent())("ngClass", ctx.tooltipButtonClasses());
+            i0.ɵɵadvance(3);
             i0.ɵɵproperty("ngClass", ctx.valueClasses());
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngClass", ctx.featureRowClasses());
@@ -87178,105 +87295,128 @@ class PlanCardComponent {
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngClass", ctx.contractTermsLabelClasses());
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngClass", ctx.contractTermsTextClasses());
-            i0.ɵɵadvance();
-            i0.ɵɵtextInterpolate1(" ", ctx.getContractTerms(), " ");
-        } }, dependencies: [CommonModule, i1$1.NgClass], encapsulation: 2, changeDetection: 0 }); }
+            i0.ɵɵproperty("ngClass", ctx.contractTermsTextClasses())("innerHTML", ctx.getContractTerms(), i0.ɵɵsanitizeHtml);
+        } }, dependencies: [CommonModule, i1$1.NgClass, TooltipDirective], styles: ["@keyframes _ngcontent-%COMP%_pulse-glow{0%,to{transform:translate(-50%) scale(1);box-shadow:0 0 20px #eab30899,0 0 40px #eab30866,0 0 60px #eab30833,inset 0 0 20px #ffffff4d}50%{transform:translate(-50%) scale(1.1);box-shadow:0 0 30px #eab308cc,0 0 60px #eab30899,0 0 90px #eab30866,inset 0 0 30px #ffffff80}}@keyframes _ngcontent-%COMP%_shimmer{0%{background-position:-200% center}to{background-position:200% center}}@keyframes _ngcontent-%COMP%_sparkle{0%,to{opacity:1;transform:rotate(0) scale(1)}50%{opacity:.7;transform:rotate(180deg) scale(1.2)}}@keyframes _ngcontent-%COMP%_border-glow{0%,to{box-shadow:0 0 20px #eab30880,0 0 40px #eab3084d,0 0 60px #eab30826,inset 0 0 20px #eab3081a}50%{box-shadow:0 0 30px #eab308b3,0 0 60px #eab30880,0 0 90px #eab3084d,inset 0 0 30px #eab30833}}@keyframes _ngcontent-%COMP%_float{0%,to{transform:translate(-50%) translateY(0)}50%{transform:translate(-50%) translateY(-5px)}}.best-value-badge[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_pulse-glow 2s ease-in-out infinite;background:linear-gradient(135deg,#fbbf24,#f59e0b,#d946ef,#a855f7,#fbbf24);background-size:200% 200%;animation:_ngcontent-%COMP%_pulse-glow 2s ease-in-out infinite,_ngcontent-%COMP%_shimmer 3s linear infinite;position:relative;overflow:hidden}.best-value-badge[_ngcontent-%COMP%]:before{content:\"\";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);animation:_ngcontent-%COMP%_shimmer 2s infinite}.best-value-card[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_border-glow 2s ease-in-out infinite;transform:scale(1.05);border-width:3px}.best-value-card[_ngcontent-%COMP%]:hover{transform:scale(1.07)}.sparkle-icon[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_sparkle 1.5s ease-in-out infinite}.savings-badge[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_pulse-glow 2.5s ease-in-out infinite}"], changeDetection: 0 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PlanCardComponent, [{
         type: Component,
-        args: [{
-                selector: 'symphiq-plan-card',
-                standalone: true,
-                imports: [CommonModule],
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: `
-    <div
-      (click)="handleCardClick()"
-      [ngClass]="cardContainerClasses()"
-      class="relative rounded-2xl border-2 p-6 transition-all duration-200 cursor-pointer hover:scale-[1.02]">
-
-      @if (showBestValueBadge()) {
-        <div [ngClass]="badgeClasses()" class="absolute -top-3 left-1/2 transform -translate-x-1/2 px-4 py-1 rounded-full text-xs font-bold">
-          Best value
-        </div>
-      }
-
-      <div class="flex items-start justify-between mb-6">
-        <div class="flex-1">
-          <h3 [ngClass]="planTitleClasses()" class="text-xl font-bold mb-2">
-            {{ getPlanTitle() }}
-          </h3>
-          <div class="flex items-baseline gap-2">
-            <span [ngClass]="priceClasses()" class="text-4xl font-bold">
-              {{ formatPrice() }}
-            </span>
-            <span [ngClass]="pricePeriodClasses()" class="text-base">
-              {{ getPricePeriod() }}
-            </span>
-          </div>
-        </div>
-        <div class="flex-shrink-0 ml-4">
-          <div [ngClass]="radioClasses()" class="w-6 h-6 rounded-full border-2 flex items-center justify-center transition-all duration-200">
-            @if (isSelected()) {
-              <div [ngClass]="radioInnerClasses()" class="w-3 h-3 rounded-full"></div>
-            }
-          </div>
-        </div>
-      </div>
-
-      <div [ngClass]="sectionClasses()" class="space-y-4">
-        <div [ngClass]="featureRowClasses()" class="flex justify-between items-center py-3 border-b">
-          <div class="flex items-center gap-2">
-            <span [ngClass]="labelClasses()" class="text-sm font-medium">AI usage</span>
-            @if (hasTooltip('aiUsage')) {
-              <button [ngClass]="tooltipButtonClasses()" class="w-4 h-4 rounded-full flex items-center justify-center">
-                <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
-                  <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path>
-                </svg>
-              </button>
-            }
-          </div>
-          <span [ngClass]="valueClasses()" class="text-sm font-semibold">
-            charged monthly based on your actual usage
-          </span>
-        </div>
-
-        <div [ngClass]="featureRowClasses()" class="flex justify-between items-center py-3 border-b">
-          <span [ngClass]="labelClasses()" class="text-sm font-medium">Unlimited recommendations</span>
-          <svg [ngClass]="checkIconClasses()" 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>
-        </div>
-
-        <div [ngClass]="featureRowClasses()" class="flex justify-between items-center py-3 border-b">
-          <span [ngClass]="labelClasses()" class="text-sm font-medium">Unlimited seats</span>
-          <svg [ngClass]="checkIconClasses()" 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>
-        </div>
-
-        <div [ngClass]="featureRowClasses()" class="flex justify-between items-center py-3">
-          <span [ngClass]="labelClasses()" class="text-sm font-medium">Google Analytics integration</span>
-          <svg [ngClass]="checkIconClasses()" 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>
-        </div>
-
-        <div [ngClass]="contractTermsClasses()" class="pt-4 mt-4">
-          <h4 [ngClass]="contractTermsLabelClasses()" class="text-xs font-semibold uppercase tracking-wider mb-2">
-            Contract terms
-          </h4>
-          <p [ngClass]="contractTermsTextClasses()" class="text-sm leading-relaxed">
-            {{ getContractTerms() }}
-          </p>
-        </div>
-      </div>
-    </div>
-  `
-            }]
+        args: [{ selector: 'symphiq-plan-card', standalone: true, imports: [CommonModule, TooltipDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div
+      (click)="handleCardClick()"
+      [ngClass]="cardContainerClasses()"
+      [class.best-value-card]="showBestValueBadge()"
+      class="relative rounded-2xl border-2 p-6 transition-all duration-200 cursor-pointer hover:scale-[1.02]">
+
+      @if (showBestValueBadge()) {
+        <div class="absolute -top-5 left-1/2 flex flex-col items-center gap-2 z-10">
+          <div [ngClass]="badgeClasses()" class="best-value-badge px-6 py-2 rounded-full text-base font-extrabold flex items-center gap-2 shadow-2xl">
+            <svg class="w-5 h-5 sparkle-icon" fill="currentColor" viewBox="0 0 20 20">
+              <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
+            </svg>
+            <span class="drop-shadow-lg">Best Value</span>
+            <svg class="w-5 h-5 sparkle-icon" fill="currentColor" viewBox="0 0 20 20">
+              <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
+            </svg>
+          </div>
+          @if (getSavingsPercentage()) {
+            <div [ngClass]="savingsBadgeClasses()" class="savings-badge px-3 py-1 rounded-full text-xs font-bold shadow-lg">
+              {{ getSavingsPercentage() }}
+            </div>
+          }
+        </div>
+      }
+
+      <div class="flex items-start justify-between mb-6">
+        <div class="flex-1">
+          <h3 [ngClass]="planTitleClasses()" class="text-xl font-bold mb-2">
+            {{ getPlanTitle() }}
+          </h3>
+          @if (showBestValueBadge()) {
+            <div [ngClass]="recommendedTextClasses()" class="text-sm font-semibold mb-2 flex items-center gap-1">
+              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
+                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
+              </svg>
+              Most Popular Choice
+            </div>
+          }
+          <div class="flex items-baseline gap-2">
+            <span [ngClass]="priceClasses()" class="text-4xl font-bold">
+              {{ formatPrice() }}
+            </span>
+            <span [ngClass]="pricePeriodClasses()" class="text-base">
+              {{ getPricePeriod() }}
+            </span>
+          </div>
+          @if (showBestValueBadge() && getSavingsAmount()) {
+            <div [ngClass]="savingsTextClasses()" class="text-sm font-bold mt-2 flex items-center gap-1">
+              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
+                <path fill-rule="evenodd" d="M5 2a1 1 0 011 1v1h1a1 1 0 010 2H6v1a1 1 0 01-2 0V6H3a1 1 0 010-2h1V3a1 1 0 011-1zm0 10a1 1 0 011 1v1h1a1 1 0 110 2H6v1a1 1 0 11-2 0v-1H3a1 1 0 110-2h1v-1a1 1 0 011-1zM12 2a1 1 0 01.967.744L14.146 7.2 17.5 9.134a1 1 0 010 1.732l-3.354 1.935-1.18 4.455a1 1 0 01-1.933 0L9.854 12.8 6.5 10.866a1 1 0 010-1.732l3.354-1.935 1.18-4.455A1 1 0 0112 2z" clip-rule="evenodd"/>
+              </svg>
+              {{ getSavingsAmount() }}
+            </div>
+          }
+        </div>
+        <div class="flex-shrink-0 ml-4">
+          <div [ngClass]="radioClasses()" class="w-6 h-6 rounded-full border-2 flex items-center justify-center transition-all duration-200">
+            @if (isSelected()) {
+              <div [ngClass]="radioInnerClasses()" class="w-3 h-3 rounded-full"></div>
+            }
+          </div>
+        </div>
+      </div>
+
+      <div [ngClass]="sectionClasses()" class="space-y-4">
+        <div [ngClass]="featureRowClasses()" class="flex justify-between items-center py-3 border-b">
+          <div class="flex items-center gap-2">
+            <span [ngClass]="labelClasses()" class="text-sm font-medium">AI usage</span>
+            <button
+              [libSymphiqTooltip]="aiUsageTooltipContent()"
+              tooltipType="markdown"
+              tooltipPosition="right"
+              [ngClass]="tooltipButtonClasses()"
+              class="w-5 h-5 rounded-full flex items-center justify-center">
+              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
+                <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path>
+              </svg>
+            </button>
+          </div>
+          <span [ngClass]="valueClasses()" class="text-sm font-semibold text-right max-w-[60%]">
+            Charged monthly based on your actual usage—no per-token counting, just straightforward monthly billing.
+          </span>
+        </div>
+
+        <div [ngClass]="featureRowClasses()" class="flex justify-between items-center py-3 border-b">
+          <span [ngClass]="labelClasses()" class="text-sm font-medium">Unlimited recommendations</span>
+          <svg [ngClass]="checkIconClasses()" 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>
+        </div>
+
+        <div [ngClass]="featureRowClasses()" class="flex justify-between items-center py-3 border-b">
+          <span [ngClass]="labelClasses()" class="text-sm font-medium">Unlimited seats</span>
+          <svg [ngClass]="checkIconClasses()" 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>
+        </div>
+
+        <div [ngClass]="featureRowClasses()" class="flex justify-between items-center py-3">
+          <span [ngClass]="labelClasses()" class="text-sm font-medium">Google Analytics integration</span>
+          <svg [ngClass]="checkIconClasses()" 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>
+        </div>
+
+        <div [ngClass]="contractTermsClasses()" class="pt-4 mt-4">
+          <h4 [ngClass]="contractTermsLabelClasses()" class="text-xs font-semibold uppercase tracking-wider mb-2">
+            Contract terms
+          </h4>
+          <p [ngClass]="contractTermsTextClasses()" class="text-sm leading-relaxed" [innerHTML]="getContractTerms()"></p>
+        </div>
+      </div>
+    </div>
+  `, styles: ["@keyframes pulse-glow{0%,to{transform:translate(-50%) scale(1);box-shadow:0 0 20px #eab30899,0 0 40px #eab30866,0 0 60px #eab30833,inset 0 0 20px #ffffff4d}50%{transform:translate(-50%) scale(1.1);box-shadow:0 0 30px #eab308cc,0 0 60px #eab30899,0 0 90px #eab30866,inset 0 0 30px #ffffff80}}@keyframes shimmer{0%{background-position:-200% center}to{background-position:200% center}}@keyframes sparkle{0%,to{opacity:1;transform:rotate(0) scale(1)}50%{opacity:.7;transform:rotate(180deg) scale(1.2)}}@keyframes border-glow{0%,to{box-shadow:0 0 20px #eab30880,0 0 40px #eab3084d,0 0 60px #eab30826,inset 0 0 20px #eab3081a}50%{box-shadow:0 0 30px #eab308b3,0 0 60px #eab30880,0 0 90px #eab3084d,inset 0 0 30px #eab30833}}@keyframes float{0%,to{transform:translate(-50%) translateY(0)}50%{transform:translate(-50%) translateY(-5px)}}.best-value-badge{animation:pulse-glow 2s ease-in-out infinite;background:linear-gradient(135deg,#fbbf24,#f59e0b,#d946ef,#a855f7,#fbbf24);background-size:200% 200%;animation:pulse-glow 2s ease-in-out infinite,shimmer 3s linear infinite;position:relative;overflow:hidden}.best-value-badge:before{content:\"\";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);animation:shimmer 2s infinite}.best-value-card{animation:border-glow 2s ease-in-out infinite;transform:scale(1.05);border-width:3px}.best-value-card:hover{transform:scale(1.07)}.sparkle-icon{animation:sparkle 1.5s ease-in-out infinite}.savings-badge{animation:pulse-glow 2.5s ease-in-out infinite}\n"] }]
     }], null, { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], planInfo: [{ type: i0.Input, args: [{ isSignal: true, alias: "planInfo", required: true }] }], isSelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSelected", required: false }] }], selectedPeriodUnit: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedPeriodUnit", required: false }] }], planSelected: [{ type: i0.Output, args: ["planSelected"] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PlanCardComponent, { className: "PlanCardComponent", filePath: "lib/components/profile-analysis-dashboard/cards/plan-card.component.ts", lineNumber: 95 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PlanCardComponent, { className: "PlanCardComponent", filePath: "lib/components/profile-analysis-dashboard/cards/plan-card.component.ts", lineNumber: 239 }); })();
 
 const _forTrack0$1 = ($index, $item) => $item.planItemPrice.id;
 function PlanSelectionContainerComponent_Conditional_19_Template(rf, ctx) { if (rf & 1) {
@@ -87474,81 +87614,81 @@ class PlanSelectionContainerComponent {
                 standalone: true,
                 imports: [CommonModule, BillingPeriodToggleComponent, PlanCardComponent, IndeterminateSpinnerComponent],
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                template: `
-    <div [ngClass]="containerClasses()" class="rounded-2xl border shadow-lg overflow-hidden">
-      <div [ngClass]="headerClasses()" class="px-6 py-5 border-b">
-        <div class="flex items-center gap-3">
-          <div [ngClass]="iconContainerClasses()" class="p-2.5 rounded-lg">
-            <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="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"></path>
-            </svg>
-          </div>
-          <div>
-            <h2 [ngClass]="titleClasses()" class="text-xl font-bold">
-              Choose Your Plan
-            </h2>
-            <p [ngClass]="subtitleClasses()" class="text-sm mt-0.5 flex items-center gap-2">
-              Selected currency: <span class="font-semibold">{{ selectedCurrency() }}</span>
-              <button
-                (click)="editCurrency.emit()"
-                [ngClass]="editButtonClasses()"
-                class="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium rounded-md transition-colors"
-              >
-                <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="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"></path>
-                </svg>
-                Edit
-              </button>
-            </p>
-          </div>
-        </div>
-      </div>
-
-      <div [ngClass]="contentClasses()" class="p-8">
-        <symphiq-billing-period-toggle
-          [viewMode]="viewMode()"
-          [selectedPeriodUnit]="selectedPeriodUnit()"
-          [isLoading]="isLoading()"
-          (periodUnitChanged)="handlePeriodChange($event)"
-        />
-
-        @if (isLoading()) {
-          <div class="flex flex-col items-center justify-center space-y-6 min-h-[500px] mb-32">
-            <symphiq-indeterminate-spinner
-              [viewMode]="viewMode()"
-              [size]="'large'"
-            />
-            <p [ngClass]="loadingTextClasses()" class="text-base font-medium">
-              Loading your plan options...
-            </p>
-          </div>
-        } @else if (planCardInfos() && planCardInfos()!.length > 0) {
-          <div class="flex flex-col gap-8 mb-32 min-h-[500px]">
-            @for (plan of planCardInfos(); track plan.planItemPrice.id) {
-              <symphiq-plan-card
-                [viewMode]="viewMode()"
-                [planInfo]="plan"
-                [isSelected]="isSelectedPlan(plan)"
-                [selectedPeriodUnit]="selectedPeriodUnit()"
-                (planSelected)="handlePlanSelection($event)"
-              />
-            }
-          </div>
-        } @else {
-          <div [ngClass]="emptyStateClasses()" class="text-center py-16">
-            <svg [ngClass]="emptyIconClasses()" class="w-16 h-16 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
-            </svg>
-            <p [ngClass]="emptyTextClasses()" class="text-lg font-semibold">
-              No plans available
-            </p>
-            <p [ngClass]="emptySubtextClasses()" class="text-sm mt-2">
-              Please contact support if this issue persists
-            </p>
-          </div>
-        }
-      </div>
-    </div>
+                template: `
+    <div [ngClass]="containerClasses()" class="rounded-2xl border shadow-lg overflow-hidden">
+      <div [ngClass]="headerClasses()" class="px-6 py-5 border-b">
+        <div class="flex items-center gap-3">
+          <div [ngClass]="iconContainerClasses()" class="p-2.5 rounded-lg">
+            <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="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"></path>
+            </svg>
+          </div>
+          <div>
+            <h2 [ngClass]="titleClasses()" class="text-xl font-bold">
+              Choose Your Plan
+            </h2>
+            <p [ngClass]="subtitleClasses()" class="text-sm mt-0.5 flex items-center gap-2">
+              Selected currency: <span class="font-semibold">{{ selectedCurrency() }}</span>
+              <button
+                (click)="editCurrency.emit()"
+                [ngClass]="editButtonClasses()"
+                class="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium rounded-md transition-colors"
+              >
+                <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="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"></path>
+                </svg>
+                Edit
+              </button>
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div [ngClass]="contentClasses()" class="p-8">
+        <symphiq-billing-period-toggle
+          [viewMode]="viewMode()"
+          [selectedPeriodUnit]="selectedPeriodUnit()"
+          [isLoading]="isLoading()"
+          (periodUnitChanged)="handlePeriodChange($event)"
+        />
+
+        @if (isLoading()) {
+          <div class="flex flex-col items-center justify-center space-y-6 min-h-[500px] mb-32">
+            <symphiq-indeterminate-spinner
+              [viewMode]="viewMode()"
+              [size]="'large'"
+            />
+            <p [ngClass]="loadingTextClasses()" class="text-base font-medium">
+              Loading your plan options...
+            </p>
+          </div>
+        } @else if (planCardInfos() && planCardInfos()!.length > 0) {
+          <div class="flex flex-col gap-8 mb-32 min-h-[500px]">
+            @for (plan of planCardInfos(); track plan.planItemPrice.id) {
+              <symphiq-plan-card
+                [viewMode]="viewMode()"
+                [planInfo]="plan"
+                [isSelected]="isSelectedPlan(plan)"
+                [selectedPeriodUnit]="selectedPeriodUnit()"
+                (planSelected)="handlePlanSelection($event)"
+              />
+            }
+          </div>
+        } @else {
+          <div [ngClass]="emptyStateClasses()" class="text-center py-16">
+            <svg [ngClass]="emptyIconClasses()" class="w-16 h-16 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+            </svg>
+            <p [ngClass]="emptyTextClasses()" class="text-lg font-semibold">
+              No plans available
+            </p>
+            <p [ngClass]="emptySubtextClasses()" class="text-sm mt-2">
+              Please contact support if this issue persists
+            </p>
+          </div>
+        }
+      </div>
+    </div>
   `
             }]
     }], null, { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], selectedCurrency: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedCurrency", required: false }] }], planCardInfos: [{ type: i0.Input, args: [{ isSignal: true, alias: "planCardInfos", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], selectedPeriodUnit: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedPeriodUnit", required: false }] }], periodUnitChanged: [{ type: i0.Output, args: ["periodUnitChanged"] }], planSelected: [{ type: i0.Output, args: ["planSelected"] }], editCurrency: [{ type: i0.Output, args: ["editCurrency"] }] }); })();
@@ -89813,611 +89953,611 @@ class SymphiqProfileAnalysisDashboardComponent {
                 standalone: true,
                 imports: [CommonModule, DashboardHeaderComponent, SearchModalComponent, ViewModeSwitcherModalComponent, JourneyProgressIndicatorComponent, FloatingTocComponent, SectionNavigationComponent, GradeBadgeComponent, ShopWelcomeBannerComponent, FocusAreaWelcomeBannerComponent, MetricWelcomeBannerComponent, FocusAreaExecutiveSummaryComponent, MetricExecutiveSummaryComponent, NapkinVisualPlaceholderComponent, TooltipContainerComponent, ProfileSectionContentComponent, ProfileAnalysisModalComponent, ModalComponent, GoalCardComponent, GoalObjectivesModalContentComponent, ObjectiveStrategiesModalContentComponent, StrategyRecommendationsModalContentComponent, CategoryDetailModalContentComponent, StrengthDetailModalContentComponent, GapDetailModalContentComponent, OpportunityDetailModalContentComponent, BusinessAnalysisModalComponent, SectionDividerComponent, SymphiqIconComponent, RelatedGoalChipsComponent, StrategicGoalsTiledGridComponent, CollapsibleAnalysisSectionGroupComponent, BillingCurrencySelectorCardComponent, PlanSelectionPlaceholderCardComponent, PlanSelectionContainerComponent, SubscriptionValuePropositionCardComponent, StickySubscriptionContinueButtonComponent],
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                template: `
-    <div [ngClass]="getContainerClasses()" class="min-h-screen relative">
-      <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>
-
-      <!-- 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-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="relative z-[51]">
-        <!-- Dashboard Header -->
-        <symphiq-dashboard-header
-            [title]="profileAnalysis()?.profileAnalysisStructured?.businessName || 'Profile Analysis'"
-            [subtitle]="getAnalysisSubtitle()"
-            [currentSection]="getAnalysisSubtitle()"
-            [viewMode]="viewMode()"
-            [viewModeLabel]="displayModeLabel()"
-            [isLoading]="isLoading()"
-            [requestedByUser]="requestedByUser()"
-            [createdDate]="profileAnalysis()?.selfContentCompletedDate"
-            (searchClick)="openSearch()"
-            (viewModeClick)="openViewModeSwitcher()"
-        />
-
-        <!-- Journey Progress Banner -->
-        @if (isSimplifiedView() && !isOnboarded()) {
-          <symphiq-journey-progress-indicator
-              [viewMode]="viewMode()"
-              [currentStepId]="currentStepId()"
-              [showNextStepAction]="shouldShowContinueButton()"
-              [forDemo]="forDemo()"
-              [maxAccessibleStepId]="maxAccessibleStepId()"
-              (nextStepClick)="nextStepClick.emit()"
-              (stepClick)="stepClick.emit($event)"
-          />
-        }
-
-        <!-- Main Content -->
-        <main class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 space-y-12" [class.pb-32]="shouldShowStickyButton()">
-
-          <!-- Welcome Banner (Simplified View Only) -->
-          @if (isSimplifiedView()) {
-            <div class="mb-12">
-              @if (!isFocusAreaAnalysis() && !isMetricAnalysis()) {
-                <symphiq-shop-welcome-banner
-                    [viewMode]="viewMode()"
-                    [businessName]="profileAnalysis()?.profileAnalysisStructured?.businessName || 'your shop'"
-                    [isOnboarded]="isOnboarded()"
-                />
-              }
-              @if (isFocusAreaAnalysis()) {
-                <symphiq-focus-area-welcome-banner
-                    [viewMode]="viewMode()"
-                    [focusAreaDomain]="focusAreaDomain()"
-                    [focusAreaName]="focusAreaName()"
-                    [focusAreaDetails]="focusAreaDetails()"
-                />
-              }
-              @if (isMetricAnalysis()) {
-                <symphiq-metric-welcome-banner
-                    [viewMode]="viewMode()"
-                    [metricName]="profileAnalysis()?.profileAnalysisStructured?.metricExecutiveSummary?.metric"
-                    [isOnboarded]="isOnboarded()"
-                />
-              }
-            </div>
-          }
-
-          <!-- Simplified View Content -->
-          @if (isSimplifiedView()) {
-            <!-- Strategic Insights & Goals (or Subscription Flow) -->
-            <div class="mb-8">
-              @if (isSubscriptionActive() || isFocusAreaAnalysis() || isMetricAnalysis()) {
-                <symphiq-strategic-goals-tiled-grid
-                    [goals]="strategicRoadmapGoals()"
-                    [viewMode]="viewMode()"
-                    (viewMoreClick)="openGoalModal($event)"
-                />
-              } @else {
-                <!-- Subscription Value Proposition -->
-                @if (!hasBillingCurrency() || isEditingCurrency()) {
-                  @if (!hasBillingCurrency()) {
-                    <div class="mb-8">
-                      <symphiq-subscription-value-proposition-card
-                          [viewMode]="viewMode()"
-                      />
-                    </div>
-                  }
-
-                  <!-- Currency Selection -->
-                  <symphiq-billing-currency-selector-card
-                      [viewMode]="viewMode()"
-                      [isLoading]="isCurrencySelectionLoading()"
-                      [initialCurrency]="isEditingCurrency() ? (account()?.billingCurrencyCode || null) : null"
-                      (currencySelected)="handleCurrencyChange($event)"
-                  />
-                } @else if (showPlanSelection()) {
-                  <!-- Plan Selection -->
-
-                  <div class="mb-32">
-                    <symphiq-plan-selection-container
-                        [viewMode]="viewMode()"
-                        [selectedCurrency]="account()?.billingCurrencyCode || CurrencyCodeEnum.USD"
-                        [planCardInfos]="planCardInfos()"
-                        [isLoading]="isPlanLoading()"
-                        [selectedPeriodUnit]="selectedPeriodUnit()"
-                        (periodUnitChanged)="handlePeriodUnitChange($event)"
-                        (planSelected)="handlePlanSelection($event)"
-                        (editCurrency)="handleEditCurrencyClick()"
-                    />
-                  </div>
-                } @else {
-                  <symphiq-plan-selection-placeholder-card
-                      [viewMode]="viewMode()"
-                      [selectedCurrency]="account()?.billingCurrencyCode || CurrencyCodeEnum.USD"
-                      (editCurrency)="handleEditCurrencyClick()"
-                  />
-                }
-              }
-            </div>
-
-            <!-- Supporting Business Context -->
-            @if (nonStrategicSections().length > 0) {
-              <div>
-                <symphiq-collapsible-analysis-section-group
-                    [sections]="nonStrategicSections()"
-                    [viewMode]="viewMode()"
-                    [executiveSummary]="executiveSummary()"
-                    [focusAreaExecutiveSummary]="focusAreaExecutiveSummary()"
-                    [metricExecutiveSummary]="metricExecutiveSummary()"
-                    [metricName]="metricName()"
-                    [allGoals]="allGoals()"
-                    [allMetrics]="allMetrics()"
-                    [allCharts]="allCharts()"
-                    [allInsights]="allInsights()"
-                    [businessProfile]="profile()"
-                />
-              </div>
-            }
-          }
-
-          <!-- Compact & Expanded View Content -->
-          @if (!isSimplifiedView()) {
-            <!-- SHOP Executive Summary -->
-            @if (!isFocusAreaAnalysis() && executiveSummary(); as summary) {
-              <section id="section-executive-summary" class="space-y-6 scroll-mt-24">
-                <!-- Summary Banner -->
-                <div [ngClass]="getBannerClasses()" class="rounded-2xl p-8 shadow-xl">
-                  <div class="space-y-6">
-                    <div class="flex items-start justify-between gap-4">
-                      <div class="flex-1">
-                        <h2 [ngClass]="getSectionTitleClasses()" class="text-2xl font-bold mb-3">
-                          Executive Summary
-                        </h2>
-                        <p [ngClass]="getTextClasses()" class="text-lg leading-relaxed">
-                          {{ summary.gradeRationale }}
-                        </p>
-                      </div>
-                      @if (summary.overallGrade) {
-                        <symphiq-grade-badge
-                            [grade]="summary.overallGrade"
-                            [gradeRationale]="summary.gradeRationale || ''"
-                            [viewMode]="viewMode()"
-                        />
-                      }
-                    </div>
-
-                    @if (summary.narrative) {
-                      <div [ngClass]="getNarrativeClasses()" class="rounded-xl p-6">
-                        <h3 [ngClass]="getSubheadingClasses()" class="text-lg font-semibold mb-3">
-                          Analysis Narrative
-                        </h3>
-                        <div class="relative">
-                          @if (summary.napkinVisual && summary.napkinVisual.enabled) {
-                            <div class="mb-6 lg:float-left lg:mr-6 lg:mb-4 lg:max-w-[66%]">
-                              <symphiq-napkin-visual-placeholder
-                                  [visual]="summary.napkinVisual"
-                                  [viewMode]="viewMode()"
-                              />
-                            </div>
-                          }
-                          <p [ngClass]="getTextClasses()" class="text-sm leading-relaxed whitespace-pre-line">
-                            {{ summary.narrative }}
-                          </p>
-                          <div class="clear-both"></div>
-                        </div>
-                      </div>
-                    }
-
-                    <!-- Stats -->
-                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-                      <button
-                          type="button"
-                          (click)="onKeyStrengthsClick(summary)"
-                          [ngClass]="getKeyStrengthsStatCardClasses()"
-                          class="p-4 rounded-xl text-left transition-all duration-200 hover:scale-[1.02] active:scale-[0.98] group cursor-pointer">
-                        <div [ngClass]="getKeyStrengthsStatLabelClasses()" class="text-xs font-semibold uppercase mb-1">
-                          Key Strengths
-                        </div>
-                        <div [ngClass]="getKeyStrengthsStatValueClasses()" class="text-3xl font-bold mb-2">
-                          {{ summary.keyStrengths?.length || 0 }}
-                        </div>
-                        <div class="flex items-center gap-1.5 text-xs font-medium">
-                          <span [ngClass]="getKeyStrengthsButtonTextClasses()">View Details</span>
-                          <symphiq-icon
-                              [icon]="{ name: 'chevron-right', source: IconSourceEnum.HEROICONS }"
-                              size="w-4 h-4"
-                              [ngClass]="getKeyStrengthsButtonTextClasses()"
-                              class="transition-transform group-hover:translate-x-1"
-                          />
-                        </div>
-                      </button>
-                      <button
-                          type="button"
-                          (click)="onCriticalGapsClick(summary)"
-                          [ngClass]="getCriticalGapsStatCardClasses()"
-                          class="p-4 rounded-xl text-left transition-all duration-200 hover:scale-[1.02] active:scale-[0.98] group cursor-pointer">
-                        <div [ngClass]="getCriticalGapsStatLabelClasses()" class="text-xs font-semibold uppercase mb-1">
-                          Critical Gaps
-                        </div>
-                        <div [ngClass]="getCriticalGapsStatValueClasses()" class="text-3xl font-bold mb-2">
-                          {{ summary.criticalGaps?.length || 0 }}
-                        </div>
-                        <div class="flex items-center gap-1.5 text-xs font-medium">
-                          <span [ngClass]="getCriticalGapsButtonTextClasses()">View Details</span>
-                          <symphiq-icon
-                              [icon]="{ name: 'chevron-right', source: IconSourceEnum.HEROICONS }"
-                              size="w-4 h-4"
-                              [ngClass]="getCriticalGapsButtonTextClasses()"
-                              class="transition-transform group-hover:translate-x-1"
-                          />
-                        </div>
-                      </button>
-                      <button
-                          type="button"
-                          (click)="scrollToQuickWins()"
-                          [ngClass]="getQuickWinsStatCardClasses()"
-                          class="p-4 rounded-xl text-left transition-all duration-200 hover:scale-[1.02] active:scale-[0.98] group cursor-pointer">
-                        <div [ngClass]="getQuickWinsStatLabelClasses()" class="text-xs font-semibold uppercase mb-1">
-                          Quick Wins
-                        </div>
-                        <div [ngClass]="getQuickWinsStatValueClasses()" class="text-3xl font-bold mb-2">
-                          {{ summary.quickWins?.length || 0 }}
-                        </div>
-                        <div class="flex items-center gap-1.5 text-xs font-medium">
-                          <span [ngClass]="getQuickWinsButtonTextClasses()">Details Below</span>
-                          <symphiq-icon
-                              [icon]="{ name: 'chevron-down', source: IconSourceEnum.HEROICONS }"
-                              size="w-4 h-4"
-                              [ngClass]="getQuickWinsButtonTextClasses()"
-                              class="transition-transform group-hover:translate-y-1 animate-bounce"
-                          />
-                        </div>
-                      </button>
-                    </div>
-                  </div>
-                </div>
-
-                <!-- Quick Wins -->
-                @if (summary.quickWins && summary.quickWins.length > 0) {
-                  <div id="quick-wins-section" class="space-y-4 scroll-mt-24">
-                    <h3 [ngClass]="getSectionTitleClasses()" class="text-xl font-bold">
-                      Quick Wins
-                    </h3>
-                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
-                      @for (win of summary.quickWins; track $index) {
-                        <div [ngClass]="getQuickWinCardClasses()"
-                             class="rounded-xl p-6 transition-all duration-300">
-                          <div class="space-y-4">
-                            <div class="flex items-start gap-3">
-                          <span [ngClass]="getNumberBadgeClasses()"
-                                class="flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold">
-                            {{ $index + 1 }}
-                          </span>
-                              <p [ngClass]="getQuickWinTextClasses()" class="font-semibold leading-tight flex-1">
-                                {{ win.action }}
-                              </p>
-                            </div>
-
-                            <div class="flex flex-wrap gap-2">
-                          <span [ngClass]="getEffortBadgeClasses(win.effort)"
-                                class="px-3 py-1 rounded-full text-xs font-semibold">
-                            {{ formatLabel(win.effort) }} Effort
-                          </span>
-                              <span [ngClass]="getImpactBadgeClasses(win.impact)"
-                                    class="px-3 py-1 rounded-full text-xs font-semibold">
-                            {{ formatLabel(win.impact) }} Impact
-                          </span>
-                            </div>
-
-                            @if (win.estimatedTimeframe) {
-                              <div class="flex items-center gap-2 text-sm" [ngClass]="getMetaTextClasses()">
-                                <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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
-                                </svg>
-                                <span>{{ win.estimatedTimeframe }}</span>
-                              </div>
-                            }
-
-                            @if (win.relatedGoalId) {
-                              <div class="space-y-2">
-                                <h4 [ngClass]="getMetaTextClasses()"
-                                    class="text-xs font-semibold uppercase tracking-wider">
-                                  Related Goal
-                                </h4>
-                                <symphiq-related-goal-chips
-                                    [relatedGoalIds]="[win.relatedGoalId]"
-                                    [allGoals]="allGoals()"
-                                    [viewMode]="viewMode()"
-                                />
-                              </div>
-                            }
-                          </div>
-                        </div>
-                      }
-                    </div>
-                  </div>
-                }
-              </section>
-            }
-
-            <!-- FOCUS_AREA Executive Summary -->
-            @if (isFocusAreaAnalysis() && focusAreaExecutiveSummary(); as summary) {
-              <symphiq-focus-area-executive-summary
-                  [viewMode]="viewMode()"
-                  [summary]="summary"
-                  [allGoals]="allGoals()"
-                  (topPrioritiesClick)="handleTopPrioritiesClick()"
-                  (priorityDetailClick)="handlePriorityDetailClick($event)"
-              />
-            }
-
-            <!-- METRIC Executive Summary -->
-            @if (isMetricAnalysis() && metricExecutiveSummary(); as summary) {
-              <symphiq-metric-executive-summary
-                  [viewMode]="viewMode()"
-                  [summary]="summary"
-                  [metricName]="metricName()"
-                  [allGoals]="allGoals()"
-                  (topPrioritiesClick)="handleMetricTopPrioritiesClick()"
-                  (priorityDetailClick)="handleMetricPriorityDetailClick($event)"
-              />
-            }
-
-            <!-- Divider Before First Section -->
-            @if (sections(); as sectionList) {
-              @if (sectionList.length > 0 && sectionList[0].icon) {
-                <symphiq-section-divider
-                    [viewMode]="viewMode()"
-                    [sectionIcon]="sectionList[0].icon"
-                />
-              }
-            }
-
-            <!-- Profile Analysis Sections -->
-            @if (sections(); as sectionList) {
-              <section class="space-y-8">
-                @for (section of sectionList; track section.id; let idx = $index; let last = $last) {
-                  <div [id]="'section-' + section.id" [ngClass]="getSectionCardClasses()"
-                       class="rounded-xl p-8 scroll-mt-24">
-                    <!-- Icon and Title -->
-                    <div class="flex items-start gap-3 mb-6">
-                      @if (section.icon) {
-                        <div [ngClass]="getSectionIconClasses()"
-                             class="flex-shrink-0 w-12 h-12 rounded-xl flex items-center justify-center">
-                          <symphiq-icon [icon]="section.icon" size="w-6 h-6"></symphiq-icon>
-                        </div>
-                      }
-                      <div class="flex-1">
-                        <h3 [ngClass]="getSectionTitleClasses()" class="text-2xl font-bold">
-                          {{ section.title }}
-                        </h3>
-                      </div>
-                    </div>
-
-                    <!-- Description and Visual Side-by-Side -->
-                    @if (section.description || (section.visual && section.visual.enabled)) {
-                      <div class="mb-6 flex flex-col lg:flex-row gap-6 items-start"
-                           [class.lg:flex-row-reverse]="idx % 2 === 0">
-                        @if (section.visual && section.visual.enabled) {
-                          <div class="w-full lg:w-2/3">
-                            <symphiq-napkin-visual-placeholder
-                                [visual]="section.visual"
-                                [viewMode]="viewMode()"
-                            />
-                          </div>
-                        }
-                        @if (section.description) {
-                          <div class="w-full"
-                               [class.lg:w-1/3]="section.visual && section.visual.enabled" [class.lg:w-full]="!section.visual || !section.visual.enabled">
-                          <p [ngClass]="getSectionDescriptionClasses()"
-                             class="text-sm leading-relaxed whitespace-pre-line">
-                            {{ section.description }}
-                          </p>
-                          </div>
-                        }
-                      </div>
-                    }
-
-                    <!-- Section Content -->
-                    <symphiq-profile-section-content
-                        [section]="section"
-                        [executiveSummary]="section.id === 'executive-summary' ? executiveSummary() : undefined"
-                        [viewMode]="viewMode()"
-                        [sectionIndex]="idx"
-                        [allGoals]="allGoals()"
-                        [allMetrics]="allMetrics()"
-                        [allCharts]="allCharts()"
-                        [allInsights]="allInsights()"
-                        [businessProfile]="profile()"
-                    />
-                  </div>
-
-                  <!-- Section Divider (between sections) -->
-                  @if (!last) {
-                    <symphiq-section-divider
-                        [viewMode]="viewMode()"
-                        [sectionIcon]="sectionList[idx + 1].icon"
-                    />
-                  }
-                }
-              </section>
-            }
-          }
-
-        </main>
-
-        <!-- Table of Contents (Compact & Expanded Views) -->
-        @if (!isSimplifiedView() && sections()) {
-          <symphiq-floating-toc
-              [sections]="tocSections()"
-              [viewMode]="viewMode()"
-              [embedded]="embedded()"
-              [scrollElement]="scrollElement() ?? undefined"
-          />
-        }
-
-        <!-- Section Navigation Dots (Compact & Expanded Views) -->
-        @if (!isSimplifiedView() && sections()) {
-          <symphiq-section-navigation
-              [sections]="tocSections()"
-              [viewMode]="viewMode()"
-              [embedded]="embedded()"
-              [scrollElement]="scrollElement() ?? undefined"
-          />
-        }
-
-        <!-- Search Modal -->
-        <symphiq-search-modal
-            [isOpen]="isSearchOpen()"
-            [isLightMode]="isLightMode()"
-            (close)="closeSearch()"
-        />
-
-        <!-- View Mode Switcher Modal -->
-        <symphiq-view-mode-switcher-modal
-            [isOpen]="isViewModeSwitcherOpen()"
-            [currentMode]="currentDisplayMode()"
-            [viewMode]="viewMode()"
-            (close)="closeViewModeSwitcher()"
-            (modeSelected)="handleDisplayModeChange($event)"
-        />
-
-        <!-- Profile Analysis Modal -->
-        <symphiq-profile-analysis-modal
-            [isLightMode]="isLightMode()"
-            [allMetrics]="allMetrics()"
-            [allInsights]="allInsights()"
-            [allBusinessInsights]="allBusinessInsights()"
-            [allCharts]="allCharts()"
-        >
-          @if (modalType() === 'goal-detail' && getGoalDetailData(); as data) {
-            <symphiq-goal-card
-                [goal]="data.goal"
-                [viewMode]="data.viewMode"
-                [isInModal]="true"
-                [allMetrics]="allMetrics()"
-                [allCharts]="allCharts()"
-                [allInsights]="allInsights()"
-                [currentModalState]="getCurrentModalState()"
-                [businessProfile]="profile()"
-            />
-          }
-          @if (modalType() === 'goal-objectives' && getGoalDetailData(); as data) {
-            <symphiq-goal-objectives-modal-content
-                [goal]="data.goal"
-                [viewMode]="data.viewMode"
-            />
-          }
-          @if (modalType() === 'objective-strategies' && getObjectiveStrategiesData(); as data) {
-            <symphiq-objective-strategies-modal-content
-                [objective]="data.objective"
-                [goalTitle]="data.goalTitle"
-                [viewMode]="data.viewMode"
-            />
-          }
-          @if (modalType() === 'strategy-recommendations' && getStrategyRecommendationsData(); as data) {
-            <symphiq-strategy-recommendations-modal-content
-                [strategy]="data.strategy"
-                [objectiveTitle]="data.objectiveTitle"
-                [goalTitle]="data.goalTitle"
-                [viewMode]="data.viewMode"
-                [allMetrics]="allMetrics()"
-                [allCharts]="allCharts()"
-                [allInsights]="allInsights()"
-                [allBusinessInsights]="allBusinessInsights()"
-                [currentModalState]="getCurrentModalState()"
-            />
-          }
-          @if (modalType() === 'category-detail' && getCategoryDetailData(); as data) {
-            <symphiq-category-detail-modal-content
-                [category]="data.category"
-                [viewMode]="data.viewMode"
-                [scrollToSection]="data.scrollToSection"
-            />
-          }
-          @if (modalType() === 'strength-detail' && getStrengthDetailData(); as data) {
-            <symphiq-strength-detail-modal-content
-                [strength]="data.strength"
-                [viewMode]="data.viewMode"
-                [allFunnelStrengths]="funnelStrengths()"
-                [currentModalState]="getCurrentModalState()"
-            />
-          }
-          @if (modalType() === 'gap-detail' && getGapDetailData(); as data) {
-            <symphiq-gap-detail-modal-content
-                [gap]="data.gap"
-                [viewMode]="data.viewMode"
-                [allGoals]="allGoals()"
-                [allWeaknesses]="funnelWeaknesses()"
-                [currentModalState]="getCurrentModalState()"
-            />
-          }
-          @if (modalType() === 'opportunity-detail' && getOpportunityDetailData(); as data) {
-            <symphiq-opportunity-detail-modal-content
-                [opportunity]="data.opportunity"
-                [viewMode]="data.viewMode"
-                [allStrengths]="funnelStrengths()"
-                [currentModalState]="getCurrentModalState()"
-            />
-          }
-        </symphiq-profile-analysis-modal>
-
-        <!-- Funnel Analysis Modal (for insights and metrics from profile goals) -->
-        <symphiq-funnel-analysis-modal
-            [isLightMode]="isLightMode()"
-            [viewMode]="viewMode()"
-            [allMetrics]="allMetrics()"
-            [allInsights]="allInsights()"
-            [allCharts]="allCharts()"
-        />
-
-        <!-- Business Analysis Modal (for napkin visuals and other content) -->
-        <symphiq-business-analysis-modal [isLightMode]="isLightMode()"/>
-
-        <!-- Tooltip Container -->
-        <symphiq-tooltip-container/>
-
-        <!-- Sticky Continue Button (Only shown when not subscribed and no currency selected) -->
-        @if (!isSubscriptionActive() && !hasBillingCurrency() && isSimplifiedView() && !isFocusAreaAnalysis() && !isMetricAnalysis()) {
-          <symphiq-sticky-subscription-continue-button
-              [viewMode]="viewMode()"
-              [isEnabled]="hasCurrencySelected()"
-              [isLoading]="isCurrencySelectionLoading()"
-              (continueClick)="handleStickyButtonClick()"
-          />
-        }
-
-        <!-- Sticky Footer for Edit Currency Mode -->
-        @if (isEditingCurrency()) {
-          <div
-            [ngClass]="getEditCurrencyFooterClasses()"
-            class="fixed bottom-0 left-0 right-0 z-50 border-t backdrop-blur-lg"
-          >
-            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
-              <div class="flex items-center gap-4">
-                <button
-                  (click)="handleCancelCurrencyEdit()"
-                  [ngClass]="getEditCurrencyCancelButtonClasses()"
-                  class="px-6 py-4 rounded-xl font-semibold text-lg transition-all duration-300 cursor-pointer"
-                >
-                  Cancel
-                </button>
-                <button
-                  (click)="handleContinueToPlans()"
-                  [disabled]="!editingCurrencySelection()"
-                  [ngClass]="getEditCurrencyContinueButtonClasses()"
-                  class="flex-1 px-6 py-4 rounded-xl font-semibold text-lg transition-all duration-300 flex items-center justify-center gap-3 shadow-2xl"
-                >
-                  <span>Continue to Plans</span>
-                  <svg class="w-6 h-6 transition-transform duration-200" [class.translate-x-1]="editingCurrencySelection()" 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>
+                template: `
+    <div [ngClass]="getContainerClasses()" class="min-h-screen relative">
+      <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>
+
+      <!-- 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-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="relative z-[51]">
+        <!-- Dashboard Header -->
+        <symphiq-dashboard-header
+            [title]="profileAnalysis()?.profileAnalysisStructured?.businessName || 'Profile Analysis'"
+            [subtitle]="getAnalysisSubtitle()"
+            [currentSection]="getAnalysisSubtitle()"
+            [viewMode]="viewMode()"
+            [viewModeLabel]="displayModeLabel()"
+            [isLoading]="isLoading()"
+            [requestedByUser]="requestedByUser()"
+            [createdDate]="profileAnalysis()?.selfContentCompletedDate"
+            (searchClick)="openSearch()"
+            (viewModeClick)="openViewModeSwitcher()"
+        />
+
+        <!-- Journey Progress Banner -->
+        @if (isSimplifiedView() && !isOnboarded()) {
+          <symphiq-journey-progress-indicator
+              [viewMode]="viewMode()"
+              [currentStepId]="currentStepId()"
+              [showNextStepAction]="shouldShowContinueButton()"
+              [forDemo]="forDemo()"
+              [maxAccessibleStepId]="maxAccessibleStepId()"
+              (nextStepClick)="nextStepClick.emit()"
+              (stepClick)="stepClick.emit($event)"
+          />
+        }
+
+        <!-- Main Content -->
+        <main class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 space-y-12" [class.pb-32]="shouldShowStickyButton()">
+
+          <!-- Welcome Banner (Simplified View Only) -->
+          @if (isSimplifiedView()) {
+            <div class="mb-12">
+              @if (!isFocusAreaAnalysis() && !isMetricAnalysis()) {
+                <symphiq-shop-welcome-banner
+                    [viewMode]="viewMode()"
+                    [businessName]="profileAnalysis()?.profileAnalysisStructured?.businessName || 'your shop'"
+                    [isOnboarded]="isOnboarded()"
+                />
+              }
+              @if (isFocusAreaAnalysis()) {
+                <symphiq-focus-area-welcome-banner
+                    [viewMode]="viewMode()"
+                    [focusAreaDomain]="focusAreaDomain()"
+                    [focusAreaName]="focusAreaName()"
+                    [focusAreaDetails]="focusAreaDetails()"
+                />
+              }
+              @if (isMetricAnalysis()) {
+                <symphiq-metric-welcome-banner
+                    [viewMode]="viewMode()"
+                    [metricName]="profileAnalysis()?.profileAnalysisStructured?.metricExecutiveSummary?.metric"
+                    [isOnboarded]="isOnboarded()"
+                />
+              }
+            </div>
+          }
+
+          <!-- Simplified View Content -->
+          @if (isSimplifiedView()) {
+            <!-- Strategic Insights & Goals (or Subscription Flow) -->
+            <div class="mb-8">
+              @if (isSubscriptionActive() || isFocusAreaAnalysis() || isMetricAnalysis()) {
+                <symphiq-strategic-goals-tiled-grid
+                    [goals]="strategicRoadmapGoals()"
+                    [viewMode]="viewMode()"
+                    (viewMoreClick)="openGoalModal($event)"
+                />
+              } @else {
+                <!-- Subscription Value Proposition -->
+                @if (!hasBillingCurrency() || isEditingCurrency()) {
+                  @if (!hasBillingCurrency()) {
+                    <div class="mb-8">
+                      <symphiq-subscription-value-proposition-card
+                          [viewMode]="viewMode()"
+                      />
+                    </div>
+                  }
+
+                  <!-- Currency Selection -->
+                  <symphiq-billing-currency-selector-card
+                      [viewMode]="viewMode()"
+                      [isLoading]="isCurrencySelectionLoading()"
+                      [initialCurrency]="isEditingCurrency() ? (account()?.billingCurrencyCode || null) : null"
+                      (currencySelected)="handleCurrencyChange($event)"
+                  />
+                } @else if (showPlanSelection()) {
+                  <!-- Plan Selection -->
+
+                  <div class="mb-32">
+                    <symphiq-plan-selection-container
+                        [viewMode]="viewMode()"
+                        [selectedCurrency]="account()?.billingCurrencyCode || CurrencyCodeEnum.USD"
+                        [planCardInfos]="planCardInfos()"
+                        [isLoading]="isPlanLoading()"
+                        [selectedPeriodUnit]="selectedPeriodUnit()"
+                        (periodUnitChanged)="handlePeriodUnitChange($event)"
+                        (planSelected)="handlePlanSelection($event)"
+                        (editCurrency)="handleEditCurrencyClick()"
+                    />
+                  </div>
+                } @else {
+                  <symphiq-plan-selection-placeholder-card
+                      [viewMode]="viewMode()"
+                      [selectedCurrency]="account()?.billingCurrencyCode || CurrencyCodeEnum.USD"
+                      (editCurrency)="handleEditCurrencyClick()"
+                  />
+                }
+              }
+            </div>
+
+            <!-- Supporting Business Context -->
+            @if (nonStrategicSections().length > 0) {
+              <div>
+                <symphiq-collapsible-analysis-section-group
+                    [sections]="nonStrategicSections()"
+                    [viewMode]="viewMode()"
+                    [executiveSummary]="executiveSummary()"
+                    [focusAreaExecutiveSummary]="focusAreaExecutiveSummary()"
+                    [metricExecutiveSummary]="metricExecutiveSummary()"
+                    [metricName]="metricName()"
+                    [allGoals]="allGoals()"
+                    [allMetrics]="allMetrics()"
+                    [allCharts]="allCharts()"
+                    [allInsights]="allInsights()"
+                    [businessProfile]="profile()"
+                />
+              </div>
+            }
+          }
+
+          <!-- Compact & Expanded View Content -->
+          @if (!isSimplifiedView()) {
+            <!-- SHOP Executive Summary -->
+            @if (!isFocusAreaAnalysis() && executiveSummary(); as summary) {
+              <section id="section-executive-summary" class="space-y-6 scroll-mt-24">
+                <!-- Summary Banner -->
+                <div [ngClass]="getBannerClasses()" class="rounded-2xl p-8 shadow-xl">
+                  <div class="space-y-6">
+                    <div class="flex items-start justify-between gap-4">
+                      <div class="flex-1">
+                        <h2 [ngClass]="getSectionTitleClasses()" class="text-2xl font-bold mb-3">
+                          Executive Summary
+                        </h2>
+                        <p [ngClass]="getTextClasses()" class="text-lg leading-relaxed">
+                          {{ summary.gradeRationale }}
+                        </p>
+                      </div>
+                      @if (summary.overallGrade) {
+                        <symphiq-grade-badge
+                            [grade]="summary.overallGrade"
+                            [gradeRationale]="summary.gradeRationale || ''"
+                            [viewMode]="viewMode()"
+                        />
+                      }
+                    </div>
+
+                    @if (summary.narrative) {
+                      <div [ngClass]="getNarrativeClasses()" class="rounded-xl p-6">
+                        <h3 [ngClass]="getSubheadingClasses()" class="text-lg font-semibold mb-3">
+                          Analysis Narrative
+                        </h3>
+                        <div class="relative">
+                          @if (summary.napkinVisual && summary.napkinVisual.enabled) {
+                            <div class="mb-6 lg:float-left lg:mr-6 lg:mb-4 lg:max-w-[66%]">
+                              <symphiq-napkin-visual-placeholder
+                                  [visual]="summary.napkinVisual"
+                                  [viewMode]="viewMode()"
+                              />
+                            </div>
+                          }
+                          <p [ngClass]="getTextClasses()" class="text-sm leading-relaxed whitespace-pre-line">
+                            {{ summary.narrative }}
+                          </p>
+                          <div class="clear-both"></div>
+                        </div>
+                      </div>
+                    }
+
+                    <!-- Stats -->
+                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                      <button
+                          type="button"
+                          (click)="onKeyStrengthsClick(summary)"
+                          [ngClass]="getKeyStrengthsStatCardClasses()"
+                          class="p-4 rounded-xl text-left transition-all duration-200 hover:scale-[1.02] active:scale-[0.98] group cursor-pointer">
+                        <div [ngClass]="getKeyStrengthsStatLabelClasses()" class="text-xs font-semibold uppercase mb-1">
+                          Key Strengths
+                        </div>
+                        <div [ngClass]="getKeyStrengthsStatValueClasses()" class="text-3xl font-bold mb-2">
+                          {{ summary.keyStrengths?.length || 0 }}
+                        </div>
+                        <div class="flex items-center gap-1.5 text-xs font-medium">
+                          <span [ngClass]="getKeyStrengthsButtonTextClasses()">View Details</span>
+                          <symphiq-icon
+                              [icon]="{ name: 'chevron-right', source: IconSourceEnum.HEROICONS }"
+                              size="w-4 h-4"
+                              [ngClass]="getKeyStrengthsButtonTextClasses()"
+                              class="transition-transform group-hover:translate-x-1"
+                          />
+                        </div>
+                      </button>
+                      <button
+                          type="button"
+                          (click)="onCriticalGapsClick(summary)"
+                          [ngClass]="getCriticalGapsStatCardClasses()"
+                          class="p-4 rounded-xl text-left transition-all duration-200 hover:scale-[1.02] active:scale-[0.98] group cursor-pointer">
+                        <div [ngClass]="getCriticalGapsStatLabelClasses()" class="text-xs font-semibold uppercase mb-1">
+                          Critical Gaps
+                        </div>
+                        <div [ngClass]="getCriticalGapsStatValueClasses()" class="text-3xl font-bold mb-2">
+                          {{ summary.criticalGaps?.length || 0 }}
+                        </div>
+                        <div class="flex items-center gap-1.5 text-xs font-medium">
+                          <span [ngClass]="getCriticalGapsButtonTextClasses()">View Details</span>
+                          <symphiq-icon
+                              [icon]="{ name: 'chevron-right', source: IconSourceEnum.HEROICONS }"
+                              size="w-4 h-4"
+                              [ngClass]="getCriticalGapsButtonTextClasses()"
+                              class="transition-transform group-hover:translate-x-1"
+                          />
+                        </div>
+                      </button>
+                      <button
+                          type="button"
+                          (click)="scrollToQuickWins()"
+                          [ngClass]="getQuickWinsStatCardClasses()"
+                          class="p-4 rounded-xl text-left transition-all duration-200 hover:scale-[1.02] active:scale-[0.98] group cursor-pointer">
+                        <div [ngClass]="getQuickWinsStatLabelClasses()" class="text-xs font-semibold uppercase mb-1">
+                          Quick Wins
+                        </div>
+                        <div [ngClass]="getQuickWinsStatValueClasses()" class="text-3xl font-bold mb-2">
+                          {{ summary.quickWins?.length || 0 }}
+                        </div>
+                        <div class="flex items-center gap-1.5 text-xs font-medium">
+                          <span [ngClass]="getQuickWinsButtonTextClasses()">Details Below</span>
+                          <symphiq-icon
+                              [icon]="{ name: 'chevron-down', source: IconSourceEnum.HEROICONS }"
+                              size="w-4 h-4"
+                              [ngClass]="getQuickWinsButtonTextClasses()"
+                              class="transition-transform group-hover:translate-y-1 animate-bounce"
+                          />
+                        </div>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Quick Wins -->
+                @if (summary.quickWins && summary.quickWins.length > 0) {
+                  <div id="quick-wins-section" class="space-y-4 scroll-mt-24">
+                    <h3 [ngClass]="getSectionTitleClasses()" class="text-xl font-bold">
+                      Quick Wins
+                    </h3>
+                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                      @for (win of summary.quickWins; track $index) {
+                        <div [ngClass]="getQuickWinCardClasses()"
+                             class="rounded-xl p-6 transition-all duration-300">
+                          <div class="space-y-4">
+                            <div class="flex items-start gap-3">
+                          <span [ngClass]="getNumberBadgeClasses()"
+                                class="flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold">
+                            {{ $index + 1 }}
+                          </span>
+                              <p [ngClass]="getQuickWinTextClasses()" class="font-semibold leading-tight flex-1">
+                                {{ win.action }}
+                              </p>
+                            </div>
+
+                            <div class="flex flex-wrap gap-2">
+                          <span [ngClass]="getEffortBadgeClasses(win.effort)"
+                                class="px-3 py-1 rounded-full text-xs font-semibold">
+                            {{ formatLabel(win.effort) }} Effort
+                          </span>
+                              <span [ngClass]="getImpactBadgeClasses(win.impact)"
+                                    class="px-3 py-1 rounded-full text-xs font-semibold">
+                            {{ formatLabel(win.impact) }} Impact
+                          </span>
+                            </div>
+
+                            @if (win.estimatedTimeframe) {
+                              <div class="flex items-center gap-2 text-sm" [ngClass]="getMetaTextClasses()">
+                                <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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
+                                </svg>
+                                <span>{{ win.estimatedTimeframe }}</span>
+                              </div>
+                            }
+
+                            @if (win.relatedGoalId) {
+                              <div class="space-y-2">
+                                <h4 [ngClass]="getMetaTextClasses()"
+                                    class="text-xs font-semibold uppercase tracking-wider">
+                                  Related Goal
+                                </h4>
+                                <symphiq-related-goal-chips
+                                    [relatedGoalIds]="[win.relatedGoalId]"
+                                    [allGoals]="allGoals()"
+                                    [viewMode]="viewMode()"
+                                />
+                              </div>
+                            }
+                          </div>
+                        </div>
+                      }
+                    </div>
+                  </div>
+                }
+              </section>
+            }
+
+            <!-- FOCUS_AREA Executive Summary -->
+            @if (isFocusAreaAnalysis() && focusAreaExecutiveSummary(); as summary) {
+              <symphiq-focus-area-executive-summary
+                  [viewMode]="viewMode()"
+                  [summary]="summary"
+                  [allGoals]="allGoals()"
+                  (topPrioritiesClick)="handleTopPrioritiesClick()"
+                  (priorityDetailClick)="handlePriorityDetailClick($event)"
+              />
+            }
+
+            <!-- METRIC Executive Summary -->
+            @if (isMetricAnalysis() && metricExecutiveSummary(); as summary) {
+              <symphiq-metric-executive-summary
+                  [viewMode]="viewMode()"
+                  [summary]="summary"
+                  [metricName]="metricName()"
+                  [allGoals]="allGoals()"
+                  (topPrioritiesClick)="handleMetricTopPrioritiesClick()"
+                  (priorityDetailClick)="handleMetricPriorityDetailClick($event)"
+              />
+            }
+
+            <!-- Divider Before First Section -->
+            @if (sections(); as sectionList) {
+              @if (sectionList.length > 0 && sectionList[0].icon) {
+                <symphiq-section-divider
+                    [viewMode]="viewMode()"
+                    [sectionIcon]="sectionList[0].icon"
+                />
+              }
+            }
+
+            <!-- Profile Analysis Sections -->
+            @if (sections(); as sectionList) {
+              <section class="space-y-8">
+                @for (section of sectionList; track section.id; let idx = $index; let last = $last) {
+                  <div [id]="'section-' + section.id" [ngClass]="getSectionCardClasses()"
+                       class="rounded-xl p-8 scroll-mt-24">
+                    <!-- Icon and Title -->
+                    <div class="flex items-start gap-3 mb-6">
+                      @if (section.icon) {
+                        <div [ngClass]="getSectionIconClasses()"
+                             class="flex-shrink-0 w-12 h-12 rounded-xl flex items-center justify-center">
+                          <symphiq-icon [icon]="section.icon" size="w-6 h-6"></symphiq-icon>
+                        </div>
+                      }
+                      <div class="flex-1">
+                        <h3 [ngClass]="getSectionTitleClasses()" class="text-2xl font-bold">
+                          {{ section.title }}
+                        </h3>
+                      </div>
+                    </div>
+
+                    <!-- Description and Visual Side-by-Side -->
+                    @if (section.description || (section.visual && section.visual.enabled)) {
+                      <div class="mb-6 flex flex-col lg:flex-row gap-6 items-start"
+                           [class.lg:flex-row-reverse]="idx % 2 === 0">
+                        @if (section.visual && section.visual.enabled) {
+                          <div class="w-full lg:w-2/3">
+                            <symphiq-napkin-visual-placeholder
+                                [visual]="section.visual"
+                                [viewMode]="viewMode()"
+                            />
+                          </div>
+                        }
+                        @if (section.description) {
+                          <div class="w-full"
+                               [class.lg:w-1/3]="section.visual && section.visual.enabled" [class.lg:w-full]="!section.visual || !section.visual.enabled">
+                          <p [ngClass]="getSectionDescriptionClasses()"
+                             class="text-sm leading-relaxed whitespace-pre-line">
+                            {{ section.description }}
+                          </p>
+                          </div>
+                        }
+                      </div>
+                    }
+
+                    <!-- Section Content -->
+                    <symphiq-profile-section-content
+                        [section]="section"
+                        [executiveSummary]="section.id === 'executive-summary' ? executiveSummary() : undefined"
+                        [viewMode]="viewMode()"
+                        [sectionIndex]="idx"
+                        [allGoals]="allGoals()"
+                        [allMetrics]="allMetrics()"
+                        [allCharts]="allCharts()"
+                        [allInsights]="allInsights()"
+                        [businessProfile]="profile()"
+                    />
+                  </div>
+
+                  <!-- Section Divider (between sections) -->
+                  @if (!last) {
+                    <symphiq-section-divider
+                        [viewMode]="viewMode()"
+                        [sectionIcon]="sectionList[idx + 1].icon"
+                    />
+                  }
+                }
+              </section>
+            }
+          }
+
+        </main>
+
+        <!-- Table of Contents (Compact & Expanded Views) -->
+        @if (!isSimplifiedView() && sections()) {
+          <symphiq-floating-toc
+              [sections]="tocSections()"
+              [viewMode]="viewMode()"
+              [embedded]="embedded()"
+              [scrollElement]="scrollElement() ?? undefined"
+          />
+        }
+
+        <!-- Section Navigation Dots (Compact & Expanded Views) -->
+        @if (!isSimplifiedView() && sections()) {
+          <symphiq-section-navigation
+              [sections]="tocSections()"
+              [viewMode]="viewMode()"
+              [embedded]="embedded()"
+              [scrollElement]="scrollElement() ?? undefined"
+          />
+        }
+
+        <!-- Search Modal -->
+        <symphiq-search-modal
+            [isOpen]="isSearchOpen()"
+            [isLightMode]="isLightMode()"
+            (close)="closeSearch()"
+        />
+
+        <!-- View Mode Switcher Modal -->
+        <symphiq-view-mode-switcher-modal
+            [isOpen]="isViewModeSwitcherOpen()"
+            [currentMode]="currentDisplayMode()"
+            [viewMode]="viewMode()"
+            (close)="closeViewModeSwitcher()"
+            (modeSelected)="handleDisplayModeChange($event)"
+        />
+
+        <!-- Profile Analysis Modal -->
+        <symphiq-profile-analysis-modal
+            [isLightMode]="isLightMode()"
+            [allMetrics]="allMetrics()"
+            [allInsights]="allInsights()"
+            [allBusinessInsights]="allBusinessInsights()"
+            [allCharts]="allCharts()"
+        >
+          @if (modalType() === 'goal-detail' && getGoalDetailData(); as data) {
+            <symphiq-goal-card
+                [goal]="data.goal"
+                [viewMode]="data.viewMode"
+                [isInModal]="true"
+                [allMetrics]="allMetrics()"
+                [allCharts]="allCharts()"
+                [allInsights]="allInsights()"
+                [currentModalState]="getCurrentModalState()"
+                [businessProfile]="profile()"
+            />
+          }
+          @if (modalType() === 'goal-objectives' && getGoalDetailData(); as data) {
+            <symphiq-goal-objectives-modal-content
+                [goal]="data.goal"
+                [viewMode]="data.viewMode"
+            />
+          }
+          @if (modalType() === 'objective-strategies' && getObjectiveStrategiesData(); as data) {
+            <symphiq-objective-strategies-modal-content
+                [objective]="data.objective"
+                [goalTitle]="data.goalTitle"
+                [viewMode]="data.viewMode"
+            />
+          }
+          @if (modalType() === 'strategy-recommendations' && getStrategyRecommendationsData(); as data) {
+            <symphiq-strategy-recommendations-modal-content
+                [strategy]="data.strategy"
+                [objectiveTitle]="data.objectiveTitle"
+                [goalTitle]="data.goalTitle"
+                [viewMode]="data.viewMode"
+                [allMetrics]="allMetrics()"
+                [allCharts]="allCharts()"
+                [allInsights]="allInsights()"
+                [allBusinessInsights]="allBusinessInsights()"
+                [currentModalState]="getCurrentModalState()"
+            />
+          }
+          @if (modalType() === 'category-detail' && getCategoryDetailData(); as data) {
+            <symphiq-category-detail-modal-content
+                [category]="data.category"
+                [viewMode]="data.viewMode"
+                [scrollToSection]="data.scrollToSection"
+            />
+          }
+          @if (modalType() === 'strength-detail' && getStrengthDetailData(); as data) {
+            <symphiq-strength-detail-modal-content
+                [strength]="data.strength"
+                [viewMode]="data.viewMode"
+                [allFunnelStrengths]="funnelStrengths()"
+                [currentModalState]="getCurrentModalState()"
+            />
+          }
+          @if (modalType() === 'gap-detail' && getGapDetailData(); as data) {
+            <symphiq-gap-detail-modal-content
+                [gap]="data.gap"
+                [viewMode]="data.viewMode"
+                [allGoals]="allGoals()"
+                [allWeaknesses]="funnelWeaknesses()"
+                [currentModalState]="getCurrentModalState()"
+            />
+          }
+          @if (modalType() === 'opportunity-detail' && getOpportunityDetailData(); as data) {
+            <symphiq-opportunity-detail-modal-content
+                [opportunity]="data.opportunity"
+                [viewMode]="data.viewMode"
+                [allStrengths]="funnelStrengths()"
+                [currentModalState]="getCurrentModalState()"
+            />
+          }
+        </symphiq-profile-analysis-modal>
+
+        <!-- Funnel Analysis Modal (for insights and metrics from profile goals) -->
+        <symphiq-funnel-analysis-modal
+            [isLightMode]="isLightMode()"
+            [viewMode]="viewMode()"
+            [allMetrics]="allMetrics()"
+            [allInsights]="allInsights()"
+            [allCharts]="allCharts()"
+        />
+
+        <!-- Business Analysis Modal (for napkin visuals and other content) -->
+        <symphiq-business-analysis-modal [isLightMode]="isLightMode()"/>
+
+        <!-- Tooltip Container -->
+        <symphiq-tooltip-container/>
+
+        <!-- Sticky Continue Button (Only shown when not subscribed and no currency selected) -->
+        @if (!isSubscriptionActive() && !hasBillingCurrency() && isSimplifiedView() && !isFocusAreaAnalysis() && !isMetricAnalysis()) {
+          <symphiq-sticky-subscription-continue-button
+              [viewMode]="viewMode()"
+              [isEnabled]="hasCurrencySelected()"
+              [isLoading]="isCurrencySelectionLoading()"
+              (continueClick)="handleStickyButtonClick()"
+          />
+        }
+
+        <!-- Sticky Footer for Edit Currency Mode -->
+        @if (isEditingCurrency()) {
+          <div
+            [ngClass]="getEditCurrencyFooterClasses()"
+            class="fixed bottom-0 left-0 right-0 z-50 border-t backdrop-blur-lg"
+          >
+            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
+              <div class="flex items-center gap-4">
+                <button
+                  (click)="handleCancelCurrencyEdit()"
+                  [ngClass]="getEditCurrencyCancelButtonClasses()"
+                  class="px-6 py-4 rounded-xl font-semibold text-lg transition-all duration-300 cursor-pointer"
+                >
+                  Cancel
+                </button>
+                <button
+                  (click)="handleContinueToPlans()"
+                  [disabled]="!editingCurrencySelection()"
+                  [ngClass]="getEditCurrencyContinueButtonClasses()"
+                  class="flex-1 px-6 py-4 rounded-xl font-semibold text-lg transition-all duration-300 flex items-center justify-center gap-3 shadow-2xl"
+                >
+                  <span>Continue to Plans</span>
+                  <svg class="w-6 h-6 transition-transform duration-200" [class.translate-x-1]="editingCurrencySelection()" 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>
   `
             }]
     }], () => [], { funnelModalComponent: [{