<div style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
max-width: 600px; margin: 0 auto; color: #333;">
<!-- Header -->
<div style="text-align: center; padding: 24px 0; border-bottom: 2px solid #2563eb;">
<h1 style="color: #2563eb; margin: 0; font-size: 1.5rem; letter-spacing: -0.5px;">sfpermits.ai</h1>
<p style="color: #666; margin: 6px 0 0 0; font-size: 0.9rem;">San Francisco Building Permit Intelligence</p>
</div>
<!-- Body -->
<div style="padding: 32px 0;">
<h2 style="color: #1a1a1a; font-size: 1.2rem; margin: 0 0 8px;">
{{ sender_name or sender_email }} shared a permit analysis with you
</h2>
<p style="color: #555; font-size: 0.95rem; margin: 0 0 24px; line-height: 1.6;">
{{ sender_name or "Someone" }} used sfpermits.ai to analyze a San Francisco building permit project and thought you'd find it useful.
</p>
<!-- Project summary box -->
<div style="background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; padding: 20px; margin-bottom: 24px;">
<h3 style="margin: 0 0 12px 0; font-size: 1rem; color: #111827;">Project Overview</h3>
<p style="margin: 0 0 8px 0; font-size: 0.95rem; color: #374151; font-weight: 500;">
{{ project_description[:200] }}{% if project_description|length > 200 %}...{% endif %}
</p>
<table style="width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 0.875rem;">
{% if address %}
<tr>
<td style="padding: 4px 0; color: #6b7280; width: 130px;">Address</td>
<td style="padding: 4px 0; color: #374151;">{{ address }}</td>
</tr>
{% endif %}
{% if neighborhood %}
<tr>
<td style="padding: 4px 0; color: #6b7280;">Neighborhood</td>
<td style="padding: 4px 0; color: #374151;">{{ neighborhood }}</td>
</tr>
{% endif %}
{% if estimated_cost %}
<tr>
<td style="padding: 4px 0; color: #6b7280;">Est. Cost</td>
<td style="padding: 4px 0; color: #374151;">${{ "{:,.0f}".format(estimated_cost) }}</td>
</tr>
{% endif %}
</table>
</div>
<!-- What's included -->
<div style="margin-bottom: 28px;">
<h3 style="margin: 0 0 12px 0; font-size: 0.95rem; color: #6b7280; text-transform: uppercase; letter-spacing: 0.5px;">
Analysis includes
</h3>
<ul style="margin: 0; padding: 0; list-style: none;">
{% for item in included_sections %}
<li style="padding: 6px 0; padding-left: 20px; position: relative; font-size: 0.9rem; color: #374151;">
<span style="position: absolute; left: 0; color: #2563eb;">✓</span>
{{ item }}
</li>
{% endfor %}
</ul>
</div>
<!-- CTA Button -->
<div style="text-align: center; margin: 32px 0;">
<a href="{{ share_url }}"
style="display: inline-block; background: #2563eb; color: white;
padding: 14px 36px; border-radius: 8px; text-decoration: none;
font-weight: 600; font-size: 1rem; letter-spacing: 0.2px;">
View Full Analysis
</a>
</div>
<!-- Sprint 58C: Methodology deep-link anchors -->
<div style="margin: 20px 0; padding: 16px; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px;">
<p style="margin: 0 0 10px 0; font-size: 0.8rem; color: #6b7280; font-weight: 500; text-transform: uppercase; letter-spacing: 0.4px;">
How we calculated this
</p>
<table style="width: 100%; border-collapse: collapse; font-size: 0.85rem;">
<tr>
<td style="padding: 4px 0;">
<a href="{{ share_url }}#method-permits" style="color: #4a9eff; text-decoration: none;">
See how we calculated this → Permit prediction
</a>
</td>
</tr>
<tr>
<td style="padding: 4px 0;">
<a href="{{ share_url }}#method-timeline" style="color: #4a9eff; text-decoration: none;">
See how we calculated this → Timeline estimate
</a>
</td>
</tr>
<tr>
<td style="padding: 4px 0;">
<a href="{{ share_url }}#method-fees" style="color: #4a9eff; text-decoration: none;">
See how we calculated this → Fee estimate
</a>
</td>
</tr>
<tr>
<td style="padding: 4px 0;">
<a href="{{ share_url }}#method-documents" style="color: #4a9eff; text-decoration: none;">
See how we calculated this → Required documents
</a>
</td>
</tr>
<tr>
<td style="padding: 4px 0;">
<a href="{{ share_url }}#method-risk" style="color: #4a9eff; text-decoration: none;">
See how we calculated this → Revision risk
</a>
</td>
</tr>
</table>
</div>
<p style="color: #6b7280; font-size: 0.875rem; text-align: center; line-height: 1.5;">
No account required to view. If you'd like to run your own analysis,
<a href="{{ signup_url }}" style="color: #2563eb; text-decoration: none;">create a free account</a>
— no invite code needed when joining via a shared analysis.
</p>
</div>
<!-- Footer -->
<div style="border-top: 1px solid #eee; padding: 16px 0; text-align: center;">
<p style="color: #9ca3af; font-size: 0.8rem; margin: 0;">
sfpermits.ai — AI-powered permit guidance for San Francisco
</p>
<p style="color: #9ca3af; font-size: 0.75rem; margin: 6px 0 0 0;">
You received this because {{ sender_name or sender_email }} shared an analysis with you.
</p>
</div>
</div>
