<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome to sfpermits.ai</title>
</head>
<!--
Beta approval welcome email template.
Rendered by send_beta_welcome_email() in web/auth.py.
NOTE: All styles must be inline — most email clients strip <style> tags.
Uses sfpermits.ai brand colors (Obsidian design tokens as hex values):
--bg-deep: #0B0F19, --bg-surface: #131825, --signal-cyan: #22D3EE
--text-primary: #E8ECF4, --text-secondary: #8B95A8, --text-tertiary: #5A6478
-->
<body style="margin:0;padding:0;background-color:#0B0F19;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0"
style="background-color:#0B0F19;padding:40px 20px;">
<tr><td align="center">
<table role="presentation" width="600" cellpadding="0" cellspacing="0"
style="max-width:600px;width:100%;">
<!-- ── Header ─────────────────────────────────────────────── -->
<tr>
<td style="background-color:#131825;
border-radius:12px 12px 0 0;
border-bottom:1px solid rgba(255,255,255,0.06);
padding:28px 40px;
text-align:center;">
<a href="{{ base_url }}" style="text-decoration:none;">
<span style="font-family:'Courier New',Courier,monospace;
font-size:22px;font-weight:700;
color:#22D3EE;letter-spacing:-0.5px;">sfpermits.ai</span>
</a>
<p style="color:#8B95A8;font-size:12px;
margin:6px 0 0 0;
letter-spacing:0.08em;text-transform:uppercase;">
San Francisco Building Permit Intelligence
</p>
</td>
</tr>
<!-- ── Body ───────────────────────────────────────────────── -->
<tr>
<td style="background-color:#131825;padding:40px 40px 32px 40px;">
<h1 style="color:#E8ECF4;font-size:24px;font-weight:700;
margin:0 0 8px 0;line-height:1.3;">
You’re in — beta access approved
</h1>
<p style="color:#8B95A8;font-size:15px;line-height:1.6;margin:0 0 28px 0;">
Welcome to sfpermits.ai! Your beta access request has been approved.
Click the button below to sign in — no password needed.
</p>
<!-- ── CTA Button ──────────────────────────────────────── -->
<table role="presentation" width="100%" cellpadding="0" cellspacing="0">
<tr><td align="center" style="padding:0 0 32px 0;">
<a href="{{ magic_link }}"
style="display:inline-block;
background:linear-gradient(135deg, #22D3EE 0%, #60A5FA 100%);
color:#0B0F19;
text-decoration:none;
padding:16px 44px;
border-radius:8px;
font-weight:700;
font-size:16px;
letter-spacing:0.02em;">
Sign in to sfpermits.ai
</a>
</td></tr>
</table>
<p style="color:#5A6478;font-size:12px;line-height:1.6;margin:0 0 28px 0;">
This link expires in {{ token_expiry_minutes }} minutes.
If the button doesn’t work, copy and paste this URL into your browser:<br>
<a href="{{ magic_link }}" style="color:#22D3EE;word-break:break-all;">{{ magic_link }}</a>
</p>
<hr style="border:none;border-top:1px solid rgba(255,255,255,0.06);margin:0 0 28px 0;">
<!-- ── What to expect ─────────────────────────────────── -->
<p style="color:#E8ECF4;font-size:14px;font-weight:600;
margin:0 0 16px 0;letter-spacing:0.03em;text-transform:uppercase;">
What happens next
</p>
<table role="presentation" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td style="padding:8px 0;vertical-align:top;width:28px;">
<span style="color:#22D3EE;font-weight:700;font-size:14px;">1.</span>
</td>
<td style="padding:8px 0;color:#8B95A8;font-size:14px;line-height:1.5;">
Sign in with the button above
</td>
</tr>
<tr>
<td style="padding:8px 0;vertical-align:top;width:28px;">
<span style="color:#22D3EE;font-weight:700;font-size:14px;">2.</span>
</td>
<td style="padding:8px 0;color:#8B95A8;font-size:14px;line-height:1.5;">
Run your first SF address search — see full permit history, routing, and timeline estimates
</td>
</tr>
<tr>
<td style="padding:8px 0;vertical-align:top;width:28px;">
<span style="color:#22D3EE;font-weight:700;font-size:14px;">3.</span>
</td>
<td style="padding:8px 0;color:#8B95A8;font-size:14px;line-height:1.5;">
Add properties to your watchlist to get permit change alerts
</td>
</tr>
</table>
</td>
</tr>
<!-- ── Footer ─────────────────────────────────────────────── -->
<tr>
<td style="background-color:#0F1520;
border-radius:0 0 12px 12px;
border-top:1px solid rgba(255,255,255,0.06);
padding:20px 40px;
text-align:center;">
<p style="color:#5A6478;font-size:12px;margin:0;line-height:1.5;">
sfpermits.ai — AI-powered permit intelligence for San Francisco
</p>
</td>
</tr>
</table>
</td></tr>
</table>
</body>
</html>
