{% comment %}
  Bulletproof pill button. Usage:
    {% include "billing/_button.html" with url="https://..." text="Get started" variant="primary" %}
  variant: primary | warn | danger (default primary)
{% endcomment %}{% spaceless %}
{% if variant == "danger" %}{% with bg="#ef4444" fg="#ffffff" shadow="0 0 30px rgba(239,68,68,0.25)" %}<table role="presentation" cellpadding="0" cellspacing="0" border="0" style="margin: 4px 0;"><tr><td align="center" style="border-radius:999px; background-color:{{ bg }};"><!--[if mso]><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="{{ url }}" style="height:44px;v-text-anchor:middle;width:220px;" arcsize="100%" stroke="f" fillcolor="{{ bg }}"><w:anchorlock/><center style="color:{{ fg }};font-family:Arial,sans-serif;font-size:14px;font-weight:600;">{{ text }}</center></v:roundrect><![endif]--><!--[if !mso]><!-- --><a href="{{ url }}" target="_blank" style="display:inline-block; padding:14px 28px; background-color:{{ bg }}; color:{{ fg }}; text-decoration:none; border-radius:999px; font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; font-size:14px; font-weight:600; line-height:1; letter-spacing:0.01em; box-shadow:{{ shadow }};">{{ text }}</a><!--<![endif]--></td></tr></table>{% endwith %}{% elif variant == "warn" %}{% with bg="#f59e0b" fg="#0a0a0a" shadow="0 0 30px rgba(245,158,11,0.2)" %}<table role="presentation" cellpadding="0" cellspacing="0" border="0" style="margin: 4px 0;"><tr><td align="center" style="border-radius:999px; background-color:{{ bg }};"><!--[if mso]><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="{{ url }}" style="height:44px;v-text-anchor:middle;width:220px;" arcsize="100%" stroke="f" fillcolor="{{ bg }}"><w:anchorlock/><center style="color:{{ fg }};font-family:Arial,sans-serif;font-size:14px;font-weight:600;">{{ text }}</center></v:roundrect><![endif]--><!--[if !mso]><!-- --><a href="{{ url }}" target="_blank" style="display:inline-block; padding:14px 28px; background-color:{{ bg }}; color:{{ fg }}; text-decoration:none; border-radius:999px; font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; font-size:14px; font-weight:600; line-height:1; letter-spacing:0.01em; box-shadow:{{ shadow }};">{{ text }}</a><!--<![endif]--></td></tr></table>{% endwith %}{% else %}{% with bg="#fafafa" fg="#0a0a0a" shadow="0 0 30px rgba(255,255,255,0.08)" %}<table role="presentation" cellpadding="0" cellspacing="0" border="0" style="margin: 4px 0;"><tr><td align="center" style="border-radius:999px; background-color:{{ bg }};"><!--[if mso]><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="{{ url }}" style="height:44px;v-text-anchor:middle;width:220px;" arcsize="100%" stroke="f" fillcolor="{{ bg }}"><w:anchorlock/><center style="color:{{ fg }};font-family:Arial,sans-serif;font-size:14px;font-weight:600;">{{ text }}</center></v:roundrect><![endif]--><!--[if !mso]><!-- --><a href="{{ url }}" target="_blank" style="display:inline-block; padding:14px 28px; background-color:{{ bg }}; color:{{ fg }}; text-decoration:none; border-radius:999px; font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; font-size:14px; font-weight:600; line-height:1; letter-spacing:0.01em; box-shadow:{{ shadow }};">{{ text }}</a><!--<![endif]--></td></tr></table>{% endwith %}{% endif %}
{% endspaceless %}