<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>{{brand}} Preparedness Plan</title>
  <style>
    body, table, td, p, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
    table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse; }
    img { -ms-interpolation-mode: bicubic; border: 0; outline: none; text-decoration: none; }
    body { margin: 0; padding: 0; width: 100% !important; background: #FAFAFA; }
    .body { background: #FAFAFA; color: #5A5A54; font-family: Arial, Helvetica, sans-serif; }
    .wrap { width: 100%; max-width: 640px; margin: 0 auto; }
    .panel { background: #FAFAFA; border: 1px solid #E4E4E0; border-radius: 16px; box-shadow: 0 7px 11px rgba(0,0,0,0.12); overflow: hidden; }
    .header { background: #F0F0F0; border-bottom: 1px solid #E4E4E0; padding: 24px; }
    .brand { font-family: Georgia, 'Times New Roman', serif; font-size: 25px; line-height: 1; color: #1A1A18; }
    .kicker { margin-top: 14px; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: #4A8A68; font-weight: 700; }
    .title { margin: 8px 0 0; font-size: 30px; line-height: 1.08; letter-spacing: 1px; text-transform: uppercase; color: #3A3A34; font-weight: 800; }
    .copy { font-size: 15px; line-height: 1.7; color: #5A5A54; }
    .sage { background: #E5F0E0; border: 1px solid #C7DDCE; border-radius: 10px; padding: 16px; }
    .metric { background: #F0F0F0; border: 1px solid #E4E4E0; border-radius: 10px; padding: 14px; }
    .label { font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase; color: #8A8A84; font-weight: 700; }
    .value { margin-top: 5px; font-size: 18px; line-height: 1.25; color: #1A1A18; font-weight: 700; }
    .button { display: inline-block; background: #2A3010; color: #F4ECD8 !important; text-decoration: none; padding: 15px 22px; border-radius: 2px; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; }
    .section-title { font-size: 16px; color: #1A1A18; font-weight: 800; letter-spacing: .3px; }
    .item { border-top: 1px solid #E4E4E0; padding-top: 14px; margin-top: 14px; }
    .footer { color: #8A8A84; font-size: 12px; line-height: 1.7; }
    @media screen and (max-width: 680px) {
      .pad { padding-left: 16px !important; padding-right: 16px !important; }
      .title { font-size: 24px !important; }
      .stack { display: block !important; width: 100% !important; }
      .stack + .stack { margin-top: 10px !important; }
    }
  </style>
</head>
<body>
  <table role="presentation" width="100%" class="body" cellpadding="0" cellspacing="0">
    <tr>
      <td align="center" style="padding: 28px 12px;">
        <table role="presentation" class="wrap" cellpadding="0" cellspacing="0">
          <tr>
            <td class="panel">
              <table role="presentation" width="100%" cellpadding="0" cellspacing="0">
                <tr>
                  <td class="header pad">
                    <div class="brand">{{brand}}</div>
                    <div class="kicker">Personal Preparedness Plan</div>
                    <h1 class="title">{{risk_level}} Readiness Report</h1>
                  </td>
                </tr>
                <tr>
                  <td class="pad" style="padding: 24px;">
                    <p class="copy" style="margin: 0 0 18px;">Hi {{first_name}}, your assessment is complete. Below is the compact version of your plan, built from your household details, location, priorities, and current supply buffer.</p>

                    <div class="sage">
                      <div class="label">Assessment Summary</div>
                      <p class="copy" style="margin: 8px 0 0;">{{narrative_summary}}</p>
                    </div>

                    <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="margin-top: 16px;">
                      <tr>
                        <td class="stack" width="50%" style="padding-right: 6px;">
                          <div class="metric">
                            <div class="label">Risk Score</div>
                            <div class="value">{{risk_score}}</div>
                          </div>
                        </td>
                        <td class="stack" width="50%" style="padding-left: 6px;">
                          <div class="metric">
                            <div class="label">Priority Scenario</div>
                            <div class="value">{{primary_scenario}}</div>
                          </div>
                        </td>
                      </tr>
                    </table>

                    <div style="margin-top: 24px;">
                      <div class="section-title">Immediate Actions</div>
                      <div class="item">
                        <div class="label">First 7 Days</div>
                        <p class="copy" style="margin: 6px 0 0;">{{action_week_1}}</p>
                      </div>
                      <div class="item">
                        <div class="label">First 30 Days</div>
                        <p class="copy" style="margin: 6px 0 0;">{{action_month_1}}</p>
                      </div>
                    </div>

                    <div style="margin-top: 24px;">
                      <div class="section-title">Recommended Supplies</div>
                      <div class="item">
                        <p class="copy" style="margin: 0;">{{recommendations}}</p>
                      </div>
                    </div>

                    <div style="margin-top: 26px; text-align: center;">
                      <a class="button" href="{{plan_url}}">Open Full Plan</a>
                    </div>
                  </td>
                </tr>
                <tr>
                  <td class="pad" style="padding: 18px 24px 24px; background: #F0F0F0; border-top: 1px solid #E4E4E0;">
                    <p class="footer" style="margin: 0;">You are receiving this because you requested your {{brand}} preparedness plan. Your data is never sold. <a href="{{unsubscribe_url}}" style="color: #4A8A68;">Unsubscribe</a></p>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</body>
</html>
