Redesign Strategy view layout and apply LiiS brand theme

- Remove teal gradient header, use plain title
- Replace dark hero banner with clean card rows (Break Even, Margin, Revenue, Cost)
- Remove status badge pill
- Stack revenue/cost cards vertically with per-product and portfolio levels
- Replace Fleet Efficiency bar chart with line chart (customers served vs products manufactured)
- Apply LiiS light palette (COLORS dict, liis Plotly template) across all views
- Fix undefined margin_color reference in Revenue & Cost chart

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

app.py

@@ -11,10 +11,46 @@ import plotly.graph_objects as go
 import pandas as pd
 from pathlib import Path
 import yaml
-import plotly.io as pio
+def sfmt(n, decimals=0):
+    """Format number with space as thousands separator."""
+    return f"{n:,.{decimals}f}".replace(",", " ")
+
+# ── LiiS Brand Palette ──
+COLORS = {
+    "bg": "#f9fcf3",
+    "surface": "#ffffff",
+    "surface_alt": "#eef5e6",
+    "primary": "#124b5f",
+    "secondary": "#785964",
+    "text": "#1a1a2e",
+    "text_muted": "#4a5568",
+    "text_subtle": "#718096",
+    "border": "#d1ddc8",
+    "positive": "#124b5f",
+    "negative": "#a0444a",
+    "warning": "#c87941",
+    "info": "#4a7c9b",
+}
+CHART_COLORS = ["#124b5f", "#785964", "#2a7f62", "#c87941", "#4a7c9b", "#a0444a"]
+
+# LiiS light Plotly theme
+LIIS_LAYOUT = dict(
+    paper_bgcolor=COLORS["bg"],
+    plot_bgcolor=COLORS["surface"],
+    font=dict(family="Futura, Century Gothic, Arial, sans-serif", color=COLORS["text"], size=14),
+    xaxis=dict(gridcolor="#e2e8f0", zerolinecolor=COLORS["border"]),
+    yaxis=dict(gridcolor="#e2e8f0", zerolinecolor=COLORS["border"]),
+    colorway=CHART_COLORS,
+    legend=dict(orientation="h", yanchor="bottom", y=1.02),
+    hovermode="x unified",
+)
 
-# Set Plotly to dark theme
-pio.templates.default = "plotly_dark"
+import plotly.io as pio
+liis_template = pio.templates["plotly"]
+liis_template.layout.update(LIIS_LAYOUT)
+liis_template.layout.separators = ", "  # decimal=comma-free, thousands=space
+pio.templates["liis"] = liis_template
+pio.templates.default = "liis"
 
 # Page config
 st.set_page_config(
@@ -23,34 +59,20 @@ st.set_page_config(
     layout="wide",
 )
 
-# Custom CSS
-st.markdown("""
+# Custom CSS — LiiS brand
+st.markdown(f"""
 <style>
-    .main-header {
-        background: linear-gradient(135deg, #1a472a 0%, #2ecc71 100%);
-        padding: 1.5rem 2rem;
-        border-radius: 12px;
-        margin-bottom: 1.5rem;
-        box-shadow: 0 4px 20px rgba(46, 204, 113, 0.3);
-    }
-    .main-header h1 { color: white; margin: 0; font-size: 2rem; }
-    .main-header p { color: rgba(255,255,255,0.9); margin: 0.5rem 0 0 0; }
-    [data-testid="stMetricValue"] { font-size: 1.8rem; }
-    .stMarkdown h2 { border-bottom: 2px solid #2ecc71; padding-bottom: 0.5rem; }
-    [data-testid="stImage"] { border-radius: 10px; background: #1a1f2e; padding: 10px; }
-    .stSuccess, .stInfo { border-radius: 8px; }
-    .stDataFrame { border-radius: 8px; }
-    .streamlit-expanderHeader { border-radius: 8px; }
+    [data-testid="stMetricValue"] {{ font-size: 1.8rem; color: {COLORS['primary']}; }}
+    .stMarkdown h2 {{ border-bottom: 2px solid {COLORS['primary']}; padding-bottom: 0.5rem; }}
+    [data-testid="stImage"] {{ border-radius: 10px; }}
+    .stSuccess, .stInfo {{ border-radius: 8px; }}
+    .stDataFrame {{ border-radius: 8px; }}
+    .streamlit-expanderHeader {{ border-radius: 8px; }}
 </style>
 """, unsafe_allow_html=True)
 
 # Header
-st.markdown("""
-<div class="main-header">
-    <h1>♻️ LiiS Circular Economy Simulator</h1>
-    <p>Explore how product configurations affect CTI metrics and profitability</p>
-</div>
-""", unsafe_allow_html=True)
+st.title("LiiS Circular Economy Simulator")
 
 
 # Load product configs
@@ -78,6 +100,9 @@ selected_product = st.sidebar.selectbox(
 )
 config = products[selected_product]
 
+if "image_url" in products[selected_product].get("product", {}):
+    st.sidebar.image(products[selected_product]["product"]["image_url"], use_container_width=True)
+
 st.sidebar.markdown("---")
 st.sidebar.header("View")
 selected_view = st.sidebar.radio(
@@ -125,11 +150,11 @@ if "max_cycles_override" not in st.session_state:
 
 # Strategy view session state (simplified C-Level view)
 if "strategy_portfolio" not in st.session_state:
-    st.session_state.strategy_portfolio = 300
+    st.session_state.strategy_portfolio = 100
 if "strategy_monthly_lease" not in st.session_state:
-    st.session_state.strategy_monthly_lease = 250
+    st.session_state.strategy_monthly_lease = 100
 if "strategy_mfg_cost" not in st.session_state:
-    st.session_state.strategy_mfg_cost = 2500
+    st.session_state.strategy_mfg_cost = 1500
 if "strategy_reuse_cycles" not in st.session_state:
     st.session_state.strategy_reuse_cycles = 3
 if "strategy_customer_base" not in st.session_state:
@@ -140,21 +165,21 @@ if selected_view == "Strategy":
     st.sidebar.header("💼 Portfolio Parameters")
     st.sidebar.caption("Adjust to see impact on profitability")
 
-    st.session_state.strategy_portfolio = st.sidebar.slider(
-        "Product Portfolio", 50, 1000, st.session_state.strategy_portfolio, step=50,
-        help="Number of units in your fleet"
+    st.sidebar.slider(
+        "Product Portfolio", 100, 10000, step=50,
+        key="strategy_portfolio", help="Number of units in your fleet"
     )
-    st.session_state.strategy_monthly_lease = st.sidebar.slider(
-        "Monthly Lease Price", 250, 650, st.session_state.strategy_monthly_lease, step=25,
-        format="%d NOK", help="What customers pay per month"
+    st.sidebar.slider(
+        "Monthly Lease Price", 0, 500, step=25,
+        format="%d NOK", key="strategy_monthly_lease", help="What customers pay per month"
     )
-    st.session_state.strategy_mfg_cost = st.sidebar.slider(
-        "Manufacturing Cost", 2500, 7500, st.session_state.strategy_mfg_cost, step=250,
-        format="%d NOK", help="Cost to produce one unit"
+    st.sidebar.slider(
+        "Manufacturing Cost", 0, 7500, step=250,
+        format="%d NOK", key="strategy_mfg_cost", help="Cost to produce one unit"
     )
-    st.session_state.strategy_reuse_cycles = st.sidebar.slider(
-        "Reuse Cycles", 2, 10, st.session_state.strategy_reuse_cycles,
-        help="How many families use each product"
+    st.sidebar.slider(
+        "Reuse Cycles", 1, 10,
+        key="strategy_reuse_cycles", help="How many families use each product"
     )
 
     # Keep EUR values in sync for other views
@@ -233,13 +258,13 @@ operating_margin = (lifecycle_profit / lifecycle_revenue) * 100 if lifecycle_rev
 
 # Model status thresholds
 if operating_margin >= 30:
-    model_status, status_color = "Profitable", "#2ecc71"
+    model_status, status_color = "Profitable", COLORS["positive"]
 elif operating_margin >= 15:
-    model_status, status_color = "Healthy", "#f1c40f"
+    model_status, status_color = "Healthy", COLORS["warning"]
 elif operating_margin >= 0:
-    model_status, status_color = "Break-even", "#e67e22"
+    model_status, status_color = "Break-even", COLORS["secondary"]
 else:
-    model_status, status_color = "Loss", "#e74c3c"
+    model_status, status_color = "Loss", COLORS["negative"]
 
 
 # ============================================================
@@ -266,7 +291,7 @@ if selected_view != "Strategy":
     <span style="background-color: {status_color}; color: white; padding: 0.3rem 0.8rem;
     border-radius: 20px; font-weight: 600; font-size: 0.85rem;">
     Model: {model_status}</span>
-    <span style="color: #888; margin-left: 1rem; font-size: 0.85rem;">
+    <span style="color: {COLORS['text_subtle']}; margin-left: 1rem; font-size: 0.85rem;">
     {operating_margin:.1f}% margin across {max_cycles} cycles</span>
     ''', unsafe_allow_html=True)
 
@@ -293,12 +318,32 @@ if selected_view != "Strategy":
 
     st.markdown("---")
 
+# ============================================================
+# HELPER: Break-even calculation
+# ============================================================
+def calculate_breakeven_months(portfolio, monthly_lease, mfg_cost_nok, lease_term_mo=12, logistics_nok=150, repair_nok=200, max_months=120):
+    """Return (breakeven_month, cumulative_list) for given parameters."""
+    monthly_revenue = portfolio * monthly_lease
+    monthly_repair = portfolio * (repair_nok / lease_term_mo)
+    initial = -portfolio * mfg_cost_nok
+    cumulative = initial
+    cumulative_list = [cumulative]
+    breakeven = None
+    for month in range(1, max_months + 1):
+        if month % lease_term_mo == 0:
+            cumulative -= portfolio * logistics_nok
+        cumulative += monthly_revenue - monthly_repair
+        cumulative_list.append(cumulative)
+        if cumulative >= 0 and breakeven is None:
+            breakeven = month
+    return breakeven, cumulative_list
+
+
 # ============================================================
 # VIEW: STRATEGY (C-Level)
 # ============================================================
 if selected_view == "Strategy":
     st.header("Strategy: Portfolio Economics")
-    st.markdown("*C-Level View — All values in NOK*")
 
     # Get Strategy slider values
     portfolio_size = st.session_state.strategy_portfolio
@@ -316,236 +361,305 @@ if selected_view == "Strategy":
     # Per-product economics
     revenue_per_product = monthly_lease * lease_term_months * reuse_cycles
     total_cost_per_product = s_mfg_cost + (logistics_per_cycle + repair_per_cycle) * reuse_cycles
-    blended_cost_per_product = total_cost_per_product / reuse_cycles
+    blended_cost_per_product = total_cost_per_product / reuse_cycles if reuse_cycles > 0 else total_cost_per_product
     profit_per_product = revenue_per_product - total_cost_per_product
     operating_margin_strat = (profit_per_product / revenue_per_product) * 100 if revenue_per_product > 0 else 0
 
     # Portfolio level
     revenue_portfolio = portfolio_size * revenue_per_product
     profit_portfolio = portfolio_size * profit_per_product
-    blended_cost_portfolio = portfolio_size * blended_cost_per_product
 
-    # Break-even calculation (months)
-    monthly_revenue_portfolio = portfolio_size * monthly_lease
-    monthly_cost_portfolio = portfolio_size * (repair_per_cycle / lease_term_months)
-    initial_investment = portfolio_size * s_mfg_cost
-
-    breakeven_month = None
-    cumulative = -initial_investment
-    for month in range(1, 121):
-        if month % lease_term_months == 0:
-            cumulative -= portfolio_size * logistics_per_cycle
-        cumulative += monthly_revenue_portfolio - monthly_cost_portfolio
-        if cumulative >= 0 and breakeven_month is None:
-            breakeven_month = month
-            break
-
-    # Linear model comparison
-    linear_margin = 0.20
-    linear_breakeven_months = 24  # Typical retail payback
+    # Break-even using helper
+    breakeven_month, breakeven_cumulative = calculate_breakeven_months(
+        portfolio_size, monthly_lease, s_mfg_cost,
+        lease_term_months, logistics_per_cycle, repair_per_cycle,
+    )
 
     # ============================================================
-    # TIER 1: PRIMARY METRICS (Hero)
+    # TIER 1: Break Even + Operating Margin
     # ============================================================
-    st.markdown('<p style="color: #888; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px;">Primary Metrics</p>', unsafe_allow_html=True)
+    be_display = f"{breakeven_month}" if breakeven_month else "> 120"
 
-    hero_col1, hero_col2 = st.columns(2)
+    # Color-code margin card border
+    if operating_margin_strat >= 30:
+        margin_border = COLORS["positive"]
+    elif operating_margin_strat >= 15:
+        margin_border = COLORS["warning"]
+    else:
+        margin_border = COLORS["negative"]
 
-    with hero_col1:
-        be_display = f"{breakeven_month}" if breakeven_month else "> 120"
+    t1_left, t1_right = st.columns(2)
+    with t1_left:
         st.markdown(f"""
-        <div style="background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%); padding: 1.5rem; border-radius: 12px; border-left: 4px solid #2ecc71;">
-            <p style="color: #888; margin: 0; font-size: 0.9rem;">BREAK EVEN</p>
-            <h2 style="color: #2ecc71; margin: 0.3rem 0; font-size: 2.5rem;">{be_display} MONTHS</h2>
-            <p style="color: #666; margin: 0; font-size: 0.85rem;">For entire portfolio of {portfolio_size:,} units</p>
+        <div style="text-align: center; padding: 1.2rem; background: {COLORS['surface']}; border-radius: 10px; border: 1px solid {COLORS['border']}; border-top: 3px solid {COLORS['warning']};">
+            <p style="color: {COLORS['text_muted']}; margin: 0; font-size: 0.95rem;">Break Even Period</p>
+            <p style="color: {COLORS['warning']}; margin: 0; font-size: 2.2rem; font-weight: 700;">{be_display} <span style="font-size: 1rem; font-weight: 400; color: {COLORS['text_subtle']};">months</span></p>
         </div>
         """, unsafe_allow_html=True)
-
-    with hero_col2:
-        profit_color = "#2ecc71" if profit_portfolio > 0 else "#e74c3c"
+    with t1_right:
         st.markdown(f"""
-        <div style="background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%); padding: 1.5rem; border-radius: 12px; border-left: 4px solid {profit_color};">
-            <p style="color: #888; margin: 0; font-size: 0.9rem;">TOTAL PORTFOLIO PROFIT</p>
-            <h2 style="color: {profit_color}; margin: 0.3rem 0; font-size: 2.5rem;">{profit_portfolio:,.0f} NOK</h2>
-            <p style="color: #666; margin: 0; font-size: 0.85rem;">Net revenue across {portfolio_size:,} units over {reuse_cycles} cycles</p>
+        <div style="text-align: center; padding: 1.2rem; background: {COLORS['surface']}; border-radius: 10px; border: 1px solid {COLORS['border']}; border-top: 3px solid {margin_border};">
+            <p style="color: {COLORS['text_muted']}; margin: 0; font-size: 0.95rem;">Operating Margin</p>
+            <p style="color: {margin_border}; margin: 0; font-size: 2.2rem; font-weight: 700;">{operating_margin_strat:.0f}%</p>
         </div>
         """, unsafe_allow_html=True)
 
-    st.markdown("---")
 
     # ============================================================
-    # TIER 2: SUPPORTING METRICS
+    # TIER 2: Revenue + Blended Cost (per product & portfolio)
     # ============================================================
-    st.markdown('<p style="color: #888; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px;">Unit Economics</p>', unsafe_allow_html=True)
-
-    metric_col1, metric_col2, metric_col3 = st.columns(3)
-
-    with metric_col1:
-        st.metric("Revenue per Product", f"{revenue_per_product:,.0f} NOK",
-                  delta=f"{monthly_lease} × {lease_term_months}mo × {reuse_cycles} cycles")
-        st.metric("Revenue per Portfolio", f"{revenue_portfolio:,.0f} NOK",
-                  delta=f"{portfolio_size:,} units")
+    blended_cost_portfolio = portfolio_size * blended_cost_per_product
 
-    with metric_col2:
-        st.metric("Blended Cost per Product", f"{blended_cost_per_product:,.0f} NOK",
-                  delta=f"Total {total_cost_per_product:,.0f} ÷ {reuse_cycles} cycles")
-        st.metric("Blended Cost per Portfolio", f"{blended_cost_portfolio:,.0f} NOK",
-                  delta=f"{portfolio_size:,} units")
+    t2_left, t2_right = st.columns(2)
+    with t2_left:
+        st.markdown(f"""
+        <div style="text-align: center; padding: 1.2rem; background: {COLORS['surface']}; border-radius: 10px; border: 1px solid {COLORS['border']}; border-top: 3px solid {COLORS['primary']}; margin-bottom: 0.5rem;">
+            <p style="color: {COLORS['text_muted']}; margin: 0; font-size: 0.85rem;">Revenue / Product</p>
+            <p style="color: {COLORS['primary']}; margin: 0; font-size: 1.8rem; font-weight: 600;">{sfmt(revenue_per_product)} <span style="font-size: 0.85rem; font-weight: 400; color: {COLORS['text_subtle']};">NOK</span></p>
+        </div>
+        <div style="text-align: center; padding: 1.2rem; background: {COLORS['surface']}; border-radius: 10px; border: 1px solid {COLORS['border']}; border-top: 3px solid {COLORS['primary']};">
+            <p style="color: {COLORS['text_muted']}; margin: 0; font-size: 0.85rem;">Portfolio Revenue</p>
+            <p style="color: {COLORS['primary']}; margin: 0; font-size: 1.8rem; font-weight: 600;">{sfmt(revenue_portfolio)} <span style="font-size: 0.85rem; font-weight: 400; color: {COLORS['text_subtle']};">NOK</span></p>
+        </div>
+        """, unsafe_allow_html=True)
+    with t2_right:
+        st.markdown(f"""
+        <div style="text-align: center; padding: 1.2rem; background: {COLORS['surface']}; border-radius: 10px; border: 1px solid {COLORS['border']}; border-top: 3px solid {COLORS['secondary']}; margin-bottom: 0.5rem;">
+            <p style="color: {COLORS['text_muted']}; margin: 0; font-size: 0.85rem;">Blended Cost / Product</p>
+            <p style="color: {COLORS['secondary']}; margin: 0; font-size: 1.8rem; font-weight: 600;">{sfmt(blended_cost_per_product)} <span style="font-size: 0.85rem; font-weight: 400; color: {COLORS['text_subtle']};">NOK</span></p>
+        </div>
+        <div style="text-align: center; padding: 1.2rem; background: {COLORS['surface']}; border-radius: 10px; border: 1px solid {COLORS['border']}; border-top: 3px solid {COLORS['secondary']};">
+            <p style="color: {COLORS['text_muted']}; margin: 0; font-size: 0.85rem;">Portfolio Blended Cost</p>
+            <p style="color: {COLORS['secondary']}; margin: 0; font-size: 1.8rem; font-weight: 600;">{sfmt(blended_cost_portfolio)} <span style="font-size: 0.85rem; font-weight: 400; color: {COLORS['text_subtle']};">NOK</span></p>
+        </div>
+        """, unsafe_allow_html=True)
 
-    with metric_col3:
-        margin_delta = "healthy" if operating_margin_strat >= 50 else "review pricing"
-        st.metric("Operating Margin", f"{operating_margin_strat:.0f}%", delta=margin_delta)
-        st.metric("Profit per Product", f"{profit_per_product:,.0f} NOK", delta="lifetime profit")
+    st.markdown(f'<p style="text-align: center; color: {COLORS["text_muted"]}; font-size: 0.95rem; margin-top: 1rem;">Assuming {lease_term_months}-month cycle length.</p>', unsafe_allow_html=True)
 
     st.markdown("---")
 
     # ============================================================
-    # CHART 1: Break Even Comparison
+    # CHART 1: Break Even Timeline
     # ============================================================
-    st.markdown('<p style="color: #888; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px;">Model Comparison</p>', unsafe_allow_html=True)
-    st.subheader("Break Even: Circular vs Linear Model")
+    st.subheader("Break Even Timeline")
 
-    comp_col1, comp_col2 = st.columns(2)
+    if monthly_lease == 0:
+        st.warning("Set a lease price above 0 NOK to see the break-even timeline.")
+    else:
+        # Use first 36 months of cumulative data for this chart
+        chart_months = min(36, len(breakeven_cumulative) - 1)
+        be_months = list(range(chart_months + 1))
+        be_values = breakeven_cumulative[:chart_months + 1]
 
-    with comp_col1:
-        st.markdown(f"""
-        <div style="background: #2c3e50; padding: 1.5rem; border-radius: 12px; text-align: center;">
-            <p style="color: #888; margin: 0;">LINEAR MODEL</p>
-            <h2 style="color: #e74c3c; margin: 0.5rem 0;">{linear_breakeven_months} MONTHS</h2>
-            <p style="color: #888; margin: 0;">{linear_margin*100:.0f}% margin</p>
-            <p style="color: #666; font-size: 0.8rem; margin-top: 0.5rem;">Sell once, done</p>
-        </div>
-        """, unsafe_allow_html=True)
+        fig_be = go.Figure()
 
-    with comp_col2:
-        be_text = f"{breakeven_month}" if breakeven_month else "> 120"
-        st.markdown(f"""
-        <div style="background: #2c3e50; padding: 1.5rem; border-radius: 12px; text-align: center; border: 2px solid #2ecc71;">
-            <p style="color: #888; margin: 0;">CIRCULAR MODEL</p>
-            <h2 style="color: #2ecc71; margin: 0.5rem 0;">{be_text} MONTHS</h2>
-            <p style="color: #2ecc71; margin: 0;">{operating_margin_strat:.0f}% margin</p>
-            <p style="color: #666; font-size: 0.8rem; margin-top: 0.5rem;">Reuse {reuse_cycles}× per product</p>
-        </div>
-        """, unsafe_allow_html=True)
+        # Split into loss (red) and profit (green) fill zones
+        loss_y = [v if v <= 0 else 0 for v in be_values]
+        profit_y = [v if v >= 0 else 0 for v in be_values]
+
+        fig_be.add_trace(go.Scatter(
+            x=be_months, y=loss_y, mode="none", name="Loss period",
+            fill="tozeroy", fillcolor="rgba(160, 68, 74, 0.15)",
+            showlegend=False,
+        ))
+        fig_be.add_trace(go.Scatter(
+            x=be_months, y=profit_y, mode="none", name="Profit zone",
+            fill="tozeroy", fillcolor="rgba(18, 75, 95, 0.15)",
+            showlegend=False,
+        ))
+        fig_be.add_trace(go.Scatter(
+            x=be_months, y=be_values, mode="lines", name="Cumulative Profit",
+            line=dict(color=COLORS["primary"], width=3),
+        ))
+        fig_be.add_hline(y=0, line_color=COLORS["border"], line_width=1)
+
+        if breakeven_month and breakeven_month <= chart_months:
+            fig_be.add_trace(go.Scatter(
+                x=[breakeven_month], y=[breakeven_cumulative[breakeven_month]],
+                mode="markers+text", name="Break-even",
+                marker=dict(size=14, color=COLORS["warning"], symbol="diamond"),
+                text=[f"Month {breakeven_month}"], textposition="top center",
+            ))
+
+        fig_be.update_layout(
+            xaxis_title="Months", yaxis_title="Cumulative Profit (NOK)",
+            showlegend=False, yaxis=dict(separatethousands=True),
+        )
+        st.plotly_chart(fig_be, use_container_width=True)
 
     st.markdown("---")
 
     # ============================================================
-    # CHART 2: Blended Cost vs Revenue Across Cycles
+    # CHART 2: Revenue & Cost Distribution
     # ============================================================
-    st.subheader("Cost & Revenue Trajectory by Reuse Cycles")
-
-    cycles_range = list(range(2, 11))
-    chart_data = []
-    for c in cycles_range:
-        rev = monthly_lease * lease_term_months * c
-        total_cost = s_mfg_cost + (logistics_per_cycle + repair_per_cycle) * c
-        blended = total_cost / c
-        chart_data.append({"Cycles": c, "Revenue": rev, "Total Cost": total_cost, "Blended Cost": blended})
-
-    chart_df = pd.DataFrame(chart_data)
-
-    fig_cycles = go.Figure()
-    fig_cycles.add_trace(go.Scatter(
-        x=chart_df["Cycles"], y=chart_df["Revenue"],
-        mode="lines+markers", name="Revenue per Product",
-        line=dict(color="#2ecc71", width=3), marker=dict(size=8),
-    ))
-    fig_cycles.add_trace(go.Scatter(
-        x=chart_df["Cycles"], y=chart_df["Blended Cost"],
-        mode="lines+markers", name="Blended Cost per Product",
-        line=dict(color="#e74c3c", width=3), marker=dict(size=8),
-    ))
-    fig_cycles.add_trace(go.Scatter(
-        x=chart_df["Cycles"], y=chart_df["Total Cost"],
-        mode="lines+markers", name="Total Cost per Product",
-        line=dict(color="#e74c3c", width=2, dash="dot"), marker=dict(size=6), opacity=0.6,
+    st.subheader("Revenue & Cost Distribution")
+
+    rev_per = monthly_lease * lease_term_months  # per cycle
+    cost_per = blended_cost_per_product  # already blended across cycles
+    margin_pct = operating_margin_strat
+
+    profit_gap = rev_per - cost_per
+
+    fig_rc = go.Figure()
+    fig_rc.add_trace(go.Bar(
+        x=["Revenue / Product / Cycle", "Blended Cost / Product / Cycle"],
+        y=[rev_per, cost_per],
+        marker_color=[COLORS["positive"], COLORS["negative"]],
+        text=[sfmt(rev_per), sfmt(cost_per)],
+        textposition="outside",
     ))
-    fig_cycles.add_vline(x=reuse_cycles, line_dash="dash", line_color="#f1c40f",
-                         annotation_text=f"Current: {reuse_cycles} cycles", annotation_position="top")
-    fig_cycles.update_layout(
-        xaxis_title="Reuse Cycles", yaxis_title="NOK per Product",
-        legend=dict(orientation="h", yanchor="bottom", y=1.02), hovermode="x unified",
+
+    # Profit gap annotation — bracket between the two bars
+    gap_mid = (rev_per + cost_per) / 2
+    gap_color = COLORS["positive"] if profit_gap >= 0 else COLORS["negative"]
+    gap_label = f"+{sfmt(profit_gap)} NOK" if profit_gap >= 0 else f"{sfmt(profit_gap)} NOK"
+
+    # Horizontal bracket line at gap midpoint
+    fig_rc.add_shape(
+        type="line", x0=0, x1=1, y0=rev_per, y1=rev_per,
+        line=dict(color=gap_color, width=1, dash="dot"),
+    )
+    fig_rc.add_shape(
+        type="line", x0=1, x1=1, y0=rev_per, y1=cost_per,
+        line=dict(color=gap_color, width=2),
+    )
+    fig_rc.add_annotation(
+        x=1, y=gap_mid,
+        text=f"  <b>{gap_label}</b><br>  <span style='font-size:11px'>profit gap</span>",
+        showarrow=False, xanchor="left",
+        font=dict(size=14, color=gap_color),
+    )
+    fig_rc.add_annotation(
+        x=0.5, y=max(rev_per, cost_per) * 1.18, xref="paper",
+        text=f"Margin: {margin_pct:.0f}%", showarrow=False,
+        font=dict(size=18, color=margin_border),
     )
-    st.plotly_chart(fig_cycles, use_container_width=True)
+    fig_rc.update_layout(
+        yaxis_title="NOK", showlegend=False,
+        yaxis=dict(separatethousands=True),
+    )
+    st.plotly_chart(fig_rc, use_container_width=True)
 
-    st.info(f"**Key insight:** More cycles = lower blended cost = higher profit. At {reuse_cycles} cycles, blended cost is {blended_cost_per_product:,.0f} NOK vs {s_mfg_cost:,} NOK manufacturing cost.")
+    mfg_share = s_mfg_cost / reuse_cycles if reuse_cycles > 0 else s_mfg_cost
+    st.caption(f"Blended cost breakdown: Mfg share {sfmt(mfg_share)} + logistics {sfmt(logistics_per_cycle)} + repair {sfmt(repair_per_cycle)} = **{sfmt(blended_cost_per_product)} NOK** per product per cycle")
 
     st.markdown("---")
 
     # ============================================================
-    # TIER 3: AT SCALE
+    # AT SCALE (hidden — set show_at_scale=True to re-enable)
     # ============================================================
-    st.markdown('<p style="color: #888; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px;">Scale Projection</p>', unsafe_allow_html=True)
-    st.subheader("At Scale: Customer Base Projection")
-
-    scale_col1, scale_col2 = st.columns([1, 2])
-
-    with scale_col1:
-        customer_base = st.slider("Customer Base", 500, 10000, st.session_state.strategy_customer_base, step=100,
-                                  help="Target number of active customers", key="customer_base_slider")
-        st.session_state.strategy_customer_base = customer_base
-
-        utilization_rate = 0.80
-        fleet_needed = int(customer_base / utilization_rate)
-        annual_revenue_scale = customer_base * monthly_lease * lease_term_months
-        total_cost_scale = fleet_needed * blended_cost_per_product
-        annual_profit_scale = annual_revenue_scale - total_cost_scale
-
-        st.metric("Fleet Size Needed", f"{fleet_needed:,} units", delta=f"{utilization_rate*100:.0f}% utilization")
-        st.metric("Annual Revenue", f"{annual_revenue_scale:,.0f} NOK", delta=f"{customer_base:,} customers")
-        st.metric("Total Blended Cost", f"{total_cost_scale:,.0f} NOK", delta=f"{fleet_needed:,} units")
-        st.metric("Annual Profit", f"{annual_profit_scale:,.0f} NOK",
-                  delta="profit" if annual_profit_scale > 0 else "loss")
-
-    with scale_col2:
-        st.markdown("**5-Year Cumulative Profit Trajectory**")
-
-        months = list(range(0, 61))
-        cumulative_profit = []
-        cumulative = -fleet_needed * s_mfg_cost
-        current_util = utilization_rate
-
-        for month in months:
-            if month == 0:
+    show_at_scale = False
+    if show_at_scale:
+        st.markdown(f'<p style="color: {COLORS["text_subtle"]}; font-size: 1rem; text-transform: uppercase; letter-spacing: 1px;">Scale Projection</p>', unsafe_allow_html=True)
+        st.subheader("At Scale: Customer Base Projection")
+
+        scale_col1, scale_col2 = st.columns([1, 2])
+
+        with scale_col1:
+            st.slider("Customer Base", 500, 10000, step=100,
+                      help="Target number of active customers", key="strategy_customer_base")
+            customer_base = st.session_state.strategy_customer_base
+
+            utilization_rate = 0.80
+            fleet_needed = int(customer_base / utilization_rate)
+            annual_revenue_scale = customer_base * monthly_lease * lease_term_months
+            total_cost_scale = fleet_needed * blended_cost_per_product
+            annual_profit_scale = annual_revenue_scale - total_cost_scale
+            five_year_profit = annual_profit_scale * 5
+
+            st.metric("Fleet Size Needed", f"{sfmt(fleet_needed)} units")
+            st.metric("Annual Revenue", f"{sfmt(annual_revenue_scale)} NOK")
+            st.metric("Total Blended Cost", f"{sfmt(total_cost_scale)} NOK")
+            st.metric("Annual Profit", f"{sfmt(annual_profit_scale)} NOK")
+            st.metric("5-Year Cumulative Profit", f"{sfmt(five_year_profit)} NOK")
+
+        with scale_col2:
+            st.markdown("**5-Year Cumulative Profit Trajectory**")
+
+            months_range = list(range(0, 61))
+            cumulative_profit = []
+            cumulative = -fleet_needed * s_mfg_cost
+            current_util = utilization_rate
+
+            for month in months_range:
+                if month == 0:
+                    cumulative_profit.append(cumulative)
+                    continue
+                if month > 0 and month % lease_term_months == 0:
+                    current_util = max(0.5, current_util - 0.10)
+                    cumulative -= fleet_needed * logistics_per_cycle
+                active_customers = int(fleet_needed * current_util)
+                monthly_rev = active_customers * monthly_lease
+                monthly_cost = active_customers * (repair_per_cycle / lease_term_months)
+                cumulative += monthly_rev - monthly_cost
                 cumulative_profit.append(cumulative)
-                continue
-            if month > 0 and month % lease_term_months == 0:
-                current_util = max(0.5, current_util - 0.10)
-                cumulative -= fleet_needed * logistics_per_cycle
-            active_customers = int(fleet_needed * current_util)
-            monthly_rev = active_customers * monthly_lease
-            monthly_cost = active_customers * (repair_per_cycle / lease_term_months)
-            cumulative += monthly_rev - monthly_cost
-            cumulative_profit.append(cumulative)
-
-        fig_trajectory = go.Figure()
-        fig_trajectory.add_trace(go.Scatter(
-            x=months, y=cumulative_profit, mode="lines", name="Cumulative Profit",
-            line=dict(color="#2ecc71", width=3), fill="tozeroy", fillcolor="rgba(46, 204, 113, 0.2)",
-        ))
-        fig_trajectory.add_hline(y=0, line_color="rgba(255,255,255,0.5)", line_width=1)
 
-        for cycle_month in range(lease_term_months, 61, lease_term_months):
-            fig_trajectory.add_vline(x=cycle_month, line_dash="dot", line_color="rgba(255,255,255,0.3)")
+            fig_trajectory = go.Figure()
+            fig_trajectory.add_trace(go.Scatter(
+                x=months_range, y=cumulative_profit, mode="lines", name="Cumulative Profit",
+                line=dict(color=COLORS["positive"], width=3), fill="tozeroy", fillcolor="rgba(18, 75, 95, 0.15)",
+            ))
+            fig_trajectory.add_hline(y=0, line_color=COLORS["border"], line_width=1)
 
-        for i, cp in enumerate(cumulative_profit):
-            if cp >= 0 and i > 0:
-                fig_trajectory.add_trace(go.Scatter(
-                    x=[i], y=[cp], mode="markers+text", name="Breakeven",
-                    marker=dict(size=12, color="#f1c40f", symbol="star"),
-                    text=["Breakeven"], textposition="top center",
-                ))
-                break
+            for cycle_month in range(lease_term_months, 61, lease_term_months):
+                fig_trajectory.add_vline(x=cycle_month, line_dash="dot", line_color=COLORS["border"])
 
-        fig_trajectory.update_layout(
-            xaxis_title="Months", yaxis_title="Cumulative Profit (NOK)",
-            showlegend=False, yaxis=dict(tickformat=","),
-        )
-        st.plotly_chart(fig_trajectory, use_container_width=True)
+            for i, cp in enumerate(cumulative_profit):
+                if cp >= 0 and i > 0:
+                    fig_trajectory.add_trace(go.Scatter(
+                        x=[i], y=[cp], mode="markers+text", name="Breakeven",
+                        marker=dict(size=12, color=COLORS["warning"], symbol="diamond"),
+                        text=["Breakeven"], textposition="top center",
+                    ))
+                    break
+
+            fig_trajectory.update_layout(
+                xaxis_title="Months", yaxis_title="Cumulative Profit (NOK)",
+                showlegend=False, yaxis=dict(separatethousands=True),
+            )
+            st.plotly_chart(fig_trajectory, use_container_width=True)
+
+            final_profit = cumulative_profit[-1]
+            st.caption(f"5-year projection with {sfmt(fleet_needed)} unit fleet. Final cumulative profit: **{sfmt(final_profit)} NOK**")
+
+        st.markdown("---")
 
-        final_profit = cumulative_profit[-1]
-        st.caption(f"5-year projection with {fleet_needed:,} unit fleet. Final cumulative profit: **{final_profit:,.0f} NOK**")
+    # ============================================================
+    # Fleet Efficiency: Customers Served vs Products Manufactured
+    # ============================================================
+    st.subheader("Fleet Efficiency: Circular vs Linear")
+
+    cycles_range = list(range(1, reuse_cycles + 1))
+    customers_served = [portfolio_size * c for c in cycles_range]
+    products_manufactured_circular = [portfolio_size] * len(cycles_range)
+    products_manufactured_linear = customers_served  # 1 product per customer
+
+    fig_fleet = go.Figure()
+    fig_fleet.add_trace(go.Scatter(
+        x=cycles_range, y=customers_served, mode="lines+markers",
+        name="Customers Served",
+        line=dict(color=COLORS["primary"], width=3),
+        marker=dict(size=8),
+    ))
+    fig_fleet.add_trace(go.Scatter(
+        x=cycles_range, y=products_manufactured_linear, mode="lines",
+        name="Products Manufactured (Linear)",
+        line=dict(color=COLORS["negative"], width=2, dash="dot"),
+    ))
+    fig_fleet.add_trace(go.Scatter(
+        x=cycles_range, y=products_manufactured_circular, mode="lines",
+        name="Products Manufactured (Circular)",
+        line=dict(color=COLORS["positive"], width=2, dash="dot"),
+    ))
+    fig_fleet.update_layout(
+        xaxis_title="Cycle", yaxis_title="Units",
+        xaxis=dict(dtick=1),
+        yaxis=dict(separatethousands=True, rangemode="tozero"),
+        legend=dict(orientation="h", yanchor="bottom", y=1.02),
+    )
+    st.plotly_chart(fig_fleet, use_container_width=True)
+    savings = customers_served[-1] - portfolio_size
+    st.caption(f"{sfmt(portfolio_size)} products serve **{sfmt(customers_served[-1])} families** over {reuse_cycles} cycles — **{sfmt(savings)} fewer products** manufactured vs linear model.")
 
 # ============================================================
 # VIEW: DESIGN
@@ -581,7 +695,7 @@ elif selected_view == "Design":
 
     fig_grades = px.bar(
         grades_df, x="Grade", y="Percentage", color="Grade",
-        color_discrete_map={"A (Clean only)": "#2ecc71", "B (Repair needed)": "#f1c40f", "C (Scrap)": "#e74c3c"},
+        color_discrete_map={"A (Clean only)": COLORS["positive"], "B (Repair needed)": COLORS["warning"], "C (Scrap)": COLORS["negative"]},
         title="Return Grade Distribution", text="Percentage",
     )
     fig_grades.update_traces(texttemplate='%{text:.0f}%', textposition='outside')
@@ -627,13 +741,13 @@ elif selected_view == "Design":
     fig_materials.add_trace(go.Scatter(
         x=lifecycle_df["Cycle"], y=lifecycle_df["Original Material %"],
         name="Original Parts", mode="lines", fill="tozeroy",
-        line=dict(color="#3498db", width=0), fillcolor="rgba(52, 152, 219, 0.7)",
+        line=dict(color=COLORS["primary"], width=0), fillcolor="rgba(18, 75, 95, 0.5)",
     ))
     fig_materials.add_trace(go.Scatter(
         x=lifecycle_df["Cycle"],
         y=lifecycle_df["Original Material %"] + lifecycle_df["New Parts Added %"],
         name="Replacement Parts", mode="lines", fill="tonexty",
-        line=dict(color="#2ecc71", width=0), fillcolor="rgba(46, 204, 113, 0.7)",
+        line=dict(color=COLORS["secondary"], width=0), fillcolor="rgba(120, 89, 100, 0.5)",
     ))
     fig_materials.update_layout(
         yaxis_title="Material Composition (%)", yaxis_range=[0, 120],
@@ -681,7 +795,7 @@ elif selected_view == "Logistics":
 
         fig_grades = px.bar(
             grades_df, x="Grade", y="Percentage", color="Grade",
-            color_discrete_map={"A (Reusable)": "#2ecc71", "B (Refurbish)": "#f1c40f", "C (Scrap)": "#e74c3c"},
+            color_discrete_map={"A (Reusable)": COLORS["positive"], "B (Refurbish)": COLORS["warning"], "C (Scrap)": COLORS["negative"]},
             title="Return Grade Distribution", text="Percentage",
         )
         fig_grades.update_traces(texttemplate='%{text:.0f}%', textposition='outside')
@@ -702,11 +816,11 @@ elif selected_view == "Logistics":
 
         fig_cycle = go.Figure()
         fig_cycle.add_trace(go.Bar(name="Manufacturing", x=df_cycle_costs["Cycle"], y=df_cycle_costs["Manufacturing"],
-                                   marker_color="#3498db", text=[f"€{v:.0f}" if v > 0 else "" for v in df_cycle_costs["Manufacturing"]], textposition="inside"))
+                                   marker_color=COLORS["primary"], text=[f"€{v:.0f}" if v > 0 else "" for v in df_cycle_costs["Manufacturing"]], textposition="inside"))
         fig_cycle.add_trace(go.Bar(name="Refurbishment", x=df_cycle_costs["Cycle"], y=df_cycle_costs["Refurbishment"],
-                                   marker_color="#2ecc71", text=[f"€{v:.0f}" if v > 0 else "" for v in df_cycle_costs["Refurbishment"]], textposition="inside"))
+                                   marker_color=COLORS["info"], text=[f"€{v:.0f}" if v > 0 else "" for v in df_cycle_costs["Refurbishment"]], textposition="inside"))
         fig_cycle.add_trace(go.Bar(name="Logistics", x=df_cycle_costs["Cycle"], y=df_cycle_costs["Logistics"],
-                                   marker_color="#9b59b6", text=[f"€{v:.0f}" for v in df_cycle_costs["Logistics"]], textposition="inside"))
+                                   marker_color=COLORS["secondary"], text=[f"€{v:.0f}" for v in df_cycle_costs["Logistics"]], textposition="inside"))
         fig_cycle.update_layout(barmode="stack", yaxis_title="Cost (EUR)", legend=dict(orientation="h", yanchor="bottom", y=1.02))
         st.plotly_chart(fig_cycle, use_container_width=True)
 
@@ -741,12 +855,12 @@ elif selected_view == "Logistics":
     fig_products = go.Figure()
     fig_products.add_trace(go.Bar(
         x=lifecycle_df["Cycle"], y=lifecycle_df["Products in Service"],
-        name="In Service", marker_color="#2ecc71",
+        name="In Service", marker_color=COLORS["positive"],
         text=[f"{v:.0f}" for v in lifecycle_df["Products in Service"]], textposition="outside",
     ))
     fig_products.add_trace(go.Bar(
         x=lifecycle_df["Cycle"], y=lifecycle_df["Products Lost"],
-        name="Lost (non-returns + scrap)", marker_color="#e74c3c",
+        name="Lost (non-returns + scrap)", marker_color=COLORS["negative"],
         text=[f"{v:.0f}" if v > 0 else "" for v in lifecycle_df["Products Lost"]], textposition="outside",
     ))
     fig_products.update_layout(
@@ -850,9 +964,9 @@ elif selected_view == "Sourcing":
                 text=[f"€{total_material_cost:.0f}", f"€{labor_cost:.0f}",
                       f"€{overhead_cost:.0f}", f"€{total_material_cost + labor_cost + overhead_cost:.0f}"],
                 textposition="outside",
-                connector={"line": {"color": "rgb(63, 63, 63)"}},
-                increasing={"marker": {"color": "#3498db"}},
-                totals={"marker": {"color": "#2ecc71"}},
+                connector={"line": {"color": COLORS["border"]}},
+                increasing={"marker": {"color": COLORS["primary"]}},
+                totals={"marker": {"color": COLORS["info"]}},
             ))
             fig_waterfall.update_layout(title=f"Manufacturing Cost: €{mfg_cost:.0f}", yaxis_title="EUR", showlegend=False)
             st.plotly_chart(fig_waterfall, use_container_width=True)
@@ -960,16 +1074,16 @@ elif selected_view == "Market":
     fig_customer = go.Figure()
     fig_customer.add_trace(go.Bar(
         x=pricing_df["Monthly Price"], y=pricing_df["Total Lease Cost"],
-        name="Lease Cost (1 term)", marker_color="#3498db",
+        name="Lease Cost (1 term)", marker_color=COLORS["primary"],
     ))
 
     if retail_price > 0:
-        fig_customer.add_hline(y=retail_price, line_dash="dash", line_color="#e74c3c", line_width=2,
+        fig_customer.add_hline(y=retail_price, line_dash="dash", line_color=COLORS["negative"], line_width=2,
                                annotation_text=f"Retail: €{retail_price}", annotation_position="right")
 
     fig_customer.add_trace(go.Scatter(
         x=[lease_price], y=[lease_price * lease_term], mode="markers",
-        name=f"Current (€{lease_price}/mo)", marker=dict(size=14, color="#e74c3c", symbol="star"),
+        name=f"Current (€{lease_price}/mo)", marker=dict(size=14, color=COLORS["warning"], symbol="star"),
     ))
     fig_customer.update_layout(title="Customer Cost vs Retail Price", xaxis_title="Monthly Lease Price (EUR)",
                                yaxis_title="Total Customer Cost (EUR)")