make it look good on mobile

src/metabase/email/new_user_invite.mustache

 {{> metabase/email/_header }}
   <div style="text-align: center;">
     <div style="padding-bottom: 1em;">
-      <h2 style="font-weight: normal; color: #4C545B;line-height: 1.65rem;">{{invitorName}} wants you to join them on {{company}}'s&nbsp;Metabase</h2>
+      <h2 style="font-weight: normal; color: #4C545B; line-height: 2rem;">{{invitorName}} wants you to join them on Metabase</h2>
     </div>
-    <div style="border-top: 1px solid #ededed; border-bottom: 1px solid #ededed; padding: 3em 0em 2em 0em; text-align: center; margin-left: auto; margin-right: auto; max-width: 400px; position: relative;">
+    <div style="padding: 0.25em 0em .25em 0em; text-align: center; margin-left: auto; margin-right: auto; max-width: 400px; position: relative;">
       <table width="296" height="141" cellpadding="0" cellspacing="0" style="display:block;margin:0 auto;">
         <tr><td colspan="3"><img src="http://static.metabase.com/email_graph_top.png" width="296" height="73" style="display:block" /></td></tr>
         <tr>
           <td height="15" width="60"><img src="http://static.metabase.com/email_graph_left.png" width="60" height="15" style="display:block" /></td>
-          <td height="15" width="68" valign="middle" align="center" style="font-weight: bold; font-size: 0.72rem; line-height:15px;color: #fff; background-color:#333">{{{today}}}</td>
+          <td height="15" width="68" valign="middle" align="center" style="font-weight: bold; font-size: 0.6rem; line-height:15px;color: #fff; background-color:#333">{{{today}}}</td>
           <td height="15" width="168"><img src="http://static.metabase.com/email_graph_right.png" width="168" height="15" style="display:block" /></td></tr>
         <tr><td colspan="3" height="46"><img src="http://static.metabase.com/email_graph_bottom.png" width="296" height="56" style="display:block" /></td></tr>
       </table>
       <p style="line-height: 1.3rem; font-size: small">{{invitedName}}'s Happiness and Productivity Over&nbsp;Time</p>
     </div>
-    <div style="text-align: left; max-width: 400px; margin-left: auto; margin-right: auto; padding-top: 1em; line-height: 1.2rem;">
+    <div style="max-width: 450px; margin-left: auto; margin-right: auto; line-height: 1.2rem;">
       <p>Metabase is a simple and powerful analytics tool which lets <b>anyone</b> learn and <b>make decisions</b> from their company's data.</p>
       <p>No technical knowledge required!</p>
     </div>
-    <div style="padding: 1em;">
-      <a style="display: inline-block; box-sizing: border-box; text-decoration: none; font-size: 1.063rem; padding: 0.5rem 1.375rem; background: #FBFCFD; border: 1px solid #ddd; color: #444; cursor: pointer; text-decoration: none; font-weight: bold; border-radius: 4px; background-color: #4990E2; border-color: #4990E2; color: #fff;" href="{{joinUrl}}">Join Now</a>
-    </div>
-    <div style="padding-bottom: 2em; font-size: x-small;">
-      Or you can paste this link into your browser:<br/>{{joinUrl}}
+    <div style="padding: 1em 0 1em 0;">
+      <a style="display: inline-block; box-sizing: border-box; text-decoration: none; font-size: 1.063rem; padding: 0.8rem 2.25rem; background: #FBFCFD; border: 1px solid #ddd; color: #444; cursor: pointer; text-decoration: none; font-weight: bold; border-radius: 4px; background-color: #4990E2; border-color: #4990E2; color: #fff;" href="{{joinUrl}}">Join now</a>
     </div>
   </div>
 {{> metabase/email/_footer }}