{% with tv=tile_variant|default:"primary" tw=tile_width|default:"50%" %}
<td class="email-stat-cell{% if tw == '100%' %} email-stat-cell-full{% endif %}" width="{% if tw == '100%' %}100%{% else %}50%{% endif %}" valign="top" height="100%" style="padding:4px;width:{{ tw }};vertical-align:top;">
  <table role="presentation" width="100%" height="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;height:100%;">
    <tr>
      <td class="email-surface email-stat-tile" height="100%" valign="top" style="background-color:#FFFFFF;border-radius:4px;padding:12px 16px;height:100%;" bgcolor="#FFFFFF">
        <div class="email-pill" style="display:inline-block;padding:4px 10px;border-radius:36px;margin-bottom:8px;max-width:100%;
          {% if tv == 'purple' %}background-color:#F7F6FF;{% elif tv == 'success' %}background-color:#E8F6ED;{% elif tv == 'warning' %}background-color:#FBF1E6;{% elif tv == 'gray' %}background-color:#FAFAFA;{% else %}background-color:#E7ECFF;{% endif %}
        ">
          <span class="email-pill-text" style="font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:500;line-height:18px;white-space:nowrap;
            {% if tv == 'purple' %}color:#B2A5FF;{% elif tv == 'success' %}color:#16A34A;{% elif tv == 'warning' %}color:#D97706;{% elif tv == 'gray' %}color:#5C5C5D;{% else %}color:#0D41FF;{% endif %}
          ">{{ tile_label }}</span>
        </div>
        {# Reserve 2 lines so paired tiles stay equal height when a value wraps (e.g. rank titles). #}
        <p class="text-main email-stat-value" style="margin:0;font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:500;line-height:26px;min-height:52px;color:#01071A;word-break:break-word;">{{ tile_value }}{% if tile_suffix %}{{ tile_suffix }}{% endif %}</p>
      </td>
    </tr>
  </table>
</td>
{% endwith %}