<div class="border-t pt-4 mt-2" style="border-color: var(--border-default);">
  <h3 class="text-sm font-semibold mb-3" style="color: var(--text-primary);">Growth Drilldown</h3>

  {# Revenue by Tier #}
  {% if growth.revenue_by_tier %}
  <div class="mb-4">
    <p class="text-xs uppercase mb-2" style="color: var(--text-muted);">Revenue by Tier (MRR)</p>
    <table class="w-full text-sm">
      <thead>
        <tr style="color: var(--text-muted);">
          <th class="text-left text-xs uppercase py-1">Tier</th>
          <th class="text-right text-xs uppercase py-1">MRR</th>
        </tr>
      </thead>
      <tbody>
        {% for tier, amount in growth.revenue_by_tier.items() %}
        <tr style="border-bottom: 1px solid var(--border-default);">
          <td class="py-1 capitalize" style="color: var(--text-primary);">{{ tier }}</td>
          <td class="py-1 text-right font-medium" style="color: var(--text-primary);">${{ "{:,.0f}".format(amount) }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% endif %}

  {# KPI row #}
  <div class="grid grid-cols-2 sm:grid-cols-4 gap-4 mb-4">
    <div>
      <p class="text-xs uppercase" style="color: var(--text-muted);">ARPU</p>
      <p class="text-lg font-semibold" style="color: var(--text-primary);">
        {% if growth.arpu is not none %}${{ "{:,.0f}".format(growth.arpu) }}{% else %}&mdash;{% endif %}
      </p>
    </div>
    <div>
      <p class="text-xs uppercase" style="color: var(--text-muted);">MRR Growth</p>
      <p class="text-lg font-semibold" style="color: var(--text-primary);">
        {% if growth.mrr_growth_rate is not none %}{{ growth.mrr_growth_rate }}%{% else %}&mdash;{% endif %}
      </p>
    </div>
    <div>
      <p class="text-xs uppercase" style="color: var(--text-muted);">Quick Ratio</p>
      <p class="text-lg font-semibold" style="color: var(--text-primary);">
        {% if growth.quick_ratio is not none %}{{ growth.quick_ratio }}{% else %}&mdash;{% endif %}
      </p>
    </div>
    <div>
      <p class="text-xs uppercase" style="color: var(--text-muted);">NPS</p>
      <p class="text-lg font-semibold" style="color: var(--text-primary);">
        {% if growth.nps_score is not none %}{{ growth.nps_score }}{% else %}&mdash;{% endif %}
      </p>
    </div>
  </div>

  {# Scan Frequency #}
  <div class="grid grid-cols-2 gap-4 mb-4">
    <div>
      <p class="text-xs uppercase" style="color: var(--text-muted);">Scans (7d)</p>
      <p class="text-lg font-semibold" style="color: var(--text-primary);">
        {% if growth.scan_frequency_7d is not none %}{{ growth.scan_frequency_7d }}{% else %}&mdash;{% endif %}
      </p>
    </div>
    <div>
      <p class="text-xs uppercase" style="color: var(--text-muted);">Scans (30d)</p>
      <p class="text-lg font-semibold" style="color: var(--text-primary);">
        {% if growth.scan_frequency_30d is not none %}{{ growth.scan_frequency_30d }}{% else %}&mdash;{% endif %}
      </p>
    </div>
  </div>

  {# Cancellation Reasons #}
  {% if growth.cancellation_reasons_90d %}
  <div>
    <p class="text-xs uppercase mb-2" style="color: var(--text-muted);">Cancellation Reasons (90d)</p>
    <div class="flex flex-wrap gap-2">
      {% for reason, count in growth.cancellation_reasons_90d.items() %}
      <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium"
            style="background: var(--bg-surface-hover); color: var(--text-primary);">
        {{ reason | replace("_", " ") | title }}: {{ count }}
      </span>
      {% endfor %}
    </div>
  </div>
  {% endif %}
</div>
