<!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: 680px; margin: 0 auto; }
    .panel { background: #FAFAFA; border: 1px solid #E4E4E0; overflow: hidden; }
    .brand { font-family: Georgia, 'Times New Roman', serif; font-size: 42px; line-height: 1; letter-spacing: .04em; color: #1A1A18; }
    .brand-b { color: #5A9A78; }
    .eyebrow { font-size: 11px; line-height: 1.4; letter-spacing: 3px; text-transform: uppercase; color: #5A9A78; font-weight: 700; }
    .title { margin: 14px 0 0; font-size: 28px; line-height: 1.14; letter-spacing: 2px; text-transform: uppercase; color: #1A1A18; font-weight: 800; }
    .copy { font-size: 15px; line-height: 1.72; color: #5A5A54; }
    .lead { font-size: 16px; line-height: 1.7; color: #3A3A34; }
    .surface { background: #F2F2F0; border: 1px solid #E4E4E0; }
    .accent { background: #E8F2EC; border-left: 4px solid #5A9A78; }
    .label { font-size: 10px; line-height: 1.4; letter-spacing: 2px; text-transform: uppercase; color: #8A8A84; font-weight: 700; }
    .value { margin-top: 7px; font-size: 20px; line-height: 1.2; color: #1A1A18; font-weight: 800; }
    .section-title { font-size: 18px; line-height: 1.25; color: #1A1A18; font-weight: 800; letter-spacing: .4px; }
    .rule { border-top: 1px solid #E4E4E0; }
    .button { display: inline-block; background: #1A1A18; color: #FAFAFA !important; text-decoration: none; padding: 16px 24px; border-radius: 0; font-size: 12px; font-weight: 700; letter-spacing: 2.4px; text-transform: uppercase; }
    .footer { color: #8A8A84; font-size: 12px; line-height: 1.7; }
    @media screen and (max-width: 680px) {
      .pad { padding-left: 18px !important; padding-right: 18px !important; }
      .brand { font-size: 34px !important; }
      .title { font-size: 23px !important; }
      .stack { display: block !important; width: 100% !important; }
      .stack-pad { padding-left: 0 !important; padding-right: 0 !important; padding-top: 10px !important; }
    }
  </style>
</head>
<body>
  <table role="presentation" width="100%" class="body" cellpadding="0" cellspacing="0">
    <tr>
      <td align="center" style="padding: 30px 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="pad" style="padding: 34px 32px 28px; background: #FAFAFA; border-bottom: 1px solid #E4E4E0;">
                    <div class="brand">Plan<span class="brand-b">-B</span></div>
                    <div class="eyebrow" style="margin-top: 22px;">{{kicker}}</div>
                    <h1 class="title">{{risk_level}} Readiness Report</h1>
                  </td>
                </tr>
                <tr>
                  <td class="pad" style="padding: 30px 32px;">
                    <p class="lead" style="margin: 0 0 22px;">Hi {{first_name}}, your assessment is complete. Here is the compact field version of your preparedness plan, built from your household details, location, priorities, and current supply buffer.</p>

                    <div class="accent" style="padding: 18px 18px 18px 20px;">
                      <div class="label">Assessment Summary</div>
                      <p class="copy" style="margin: 9px 0 0;">{{narrative_summary}}</p>
                    </div>

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

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

                    <div style="margin-top: 30px;">
                      <div class="section-title">Recommended Supplies</div>
                      <div class="rule" style="margin-top: 14px; padding-top: 16px;">
                        <p class="copy" style="margin: 0;">{{recommendations}}</p>
                      </div>
                    </div>

                    <div style="margin-top: 32px;">
                      <a class="button" href="{{plan_url}}">Open Full Plan</a>
                    </div>
                  </td>
                </tr>
                <tr>
                  <td class="pad" style="padding: 20px 32px 26px; background: #F2F2F0; 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>
