Clean up Strategy card layout and scale break-even chart

- Revenue cards on same row, blended cost cards on same row
- Bold headers on all cards
- Break even and margin use primary blue instead of color-coded
- Remove colored top borders from cards
- Break even timeline scales with reuse cycles

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

app.py

@@ -376,66 +376,71 @@ if selected_view == "Strategy":
     )
 
     # ============================================================
-    # TIER 1: Break Even + Operating Margin
+    # TIER 1: Revenue + Blended Cost (per product & portfolio)
     # ============================================================
-    be_display = f"{breakeven_month}" if breakeven_month else "> 120"
+    blended_cost_portfolio = portfolio_size * blended_cost_per_product
 
-    # 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"]
+    # Row 1: Revenue
+    r1_left, r1_right = st.columns(2)
+    with r1_left:
+        st.markdown(f"""
+        <div style="text-align: center; padding: 1.5rem; background: {COLORS['surface']}; border-radius: 10px; border: 1px solid {COLORS['border']};">
+            <p style="color: {COLORS['text_muted']}; margin: 0 0 0.3rem 0; font-size: 0.85rem; font-weight: 700;">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>
+        """, unsafe_allow_html=True)
+    with r1_right:
+        st.markdown(f"""
+        <div style="text-align: center; padding: 1.5rem; background: {COLORS['surface']}; border-radius: 10px; border: 1px solid {COLORS['border']};">
+            <p style="color: {COLORS['text_muted']}; margin: 0 0 0.3rem 0; font-size: 0.85rem; font-weight: 700;">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)
+
+    st.markdown('<div style="margin-top: 0.75rem;"></div>', unsafe_allow_html=True)
 
-    t1_left, t1_right = st.columns(2)
-    with t1_left:
+    # Row 2: Blended Cost
+    r2_left, r2_right = st.columns(2)
+    with r2_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['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 style="text-align: center; padding: 1.5rem; background: {COLORS['surface']}; border-radius: 10px; border: 1px solid {COLORS['border']};">
+            <p style="color: {COLORS['text_muted']}; margin: 0 0 0.3rem 0; font-size: 0.85rem; font-weight: 700;">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>
         """, unsafe_allow_html=True)
-    with t1_right:
+    with r2_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 {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 style="text-align: center; padding: 1.5rem; background: {COLORS['surface']}; border-radius: 10px; border: 1px solid {COLORS['border']};">
+            <p style="color: {COLORS['text_muted']}; margin: 0 0 0.3rem 0; font-size: 0.85rem; font-weight: 700;">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)
 
+    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)
 
     # ============================================================
-    # TIER 2: Revenue + Blended Cost (per product & portfolio)
+    # TIER 2: Break Even + Operating Margin
     # ============================================================
-    blended_cost_portfolio = portfolio_size * blended_cost_per_product
+    be_display = f"{breakeven_month}" if breakeven_month else "> 120"
+
+    st.markdown('<div style="margin-top: 0.75rem;"></div>', unsafe_allow_html=True)
 
     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 style="text-align: center; padding: 1.5rem; background: {COLORS['surface']}; border-radius: 10px; border: 1px solid {COLORS['border']};">
+            <p style="color: {COLORS['text_muted']}; margin: 0 0 0.3rem 0; font-size: 0.95rem; font-weight: 700;">Break Even Period</p>
+            <p style="color: {COLORS['primary']}; 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 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 style="text-align: center; padding: 1.5rem; background: {COLORS['surface']}; border-radius: 10px; border: 1px solid {COLORS['border']};">
+            <p style="color: {COLORS['text_muted']}; margin: 0 0 0.3rem 0; font-size: 0.95rem; font-weight: 700;">Operating Margin</p>
+            <p style="color: {COLORS['primary']}; margin: 0; font-size: 2.2rem; font-weight: 700;">{operating_margin_strat:.0f}%</p>
         </div>
         """, unsafe_allow_html=True)
 
-    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("---")
 
     # ============================================================
@@ -446,8 +451,8 @@ if selected_view == "Strategy":
     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)
+        # Scale chart length with reuse cycles (each cycle = 12 months)
+        chart_months = min(reuse_cycles * lease_term_months, len(breakeven_cumulative) - 1)
         be_months = list(range(chart_months + 1))
         be_values = breakeven_cumulative[:chart_months + 1]
 
@@ -532,7 +537,7 @@ if selected_view == "Strategy":
     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),
+        font=dict(size=18, color=COLORS["primary"]),
     )
     fig_rc.update_layout(
         yaxis_title="NOK", showlegend=False,