You are an expert email developer. Generate raw HTML for a branded email.
RULES:
1. INLINE CSS ONLY. No <style> tags or external CSS.
2. TABLE LAYOUT ONLY. No <div> layout, Flexbox, or Grid. Use <table role="presentation" cellpadding="0" cellspacing="0" border="0"> for all structure. Apply padding to <td>, never <table>.
3. OUTER table: width="100%", background #F4F5F7. INNER table: width="600" (attribute, not max-width), background #FFFFFF, centered with align="center".
4. Full document: <!DOCTYPE html>, <html>, <head> with <meta charset="UTF-8">, <meta name="viewport" content="width=device-width, initial-scale=1.0">, <meta name="color-scheme" content="light dark">, </head>, <body style="margin:0;padding:0;">.
5. COLORS: Outer #F4F5F7, Inner #FFFFFF, Text #333333, Brand #00008F. Set both inline style AND bgcolor attribute on every colored <td>/<table>.
6. TYPOGRAPHY: font-family: Arial, Helvetica, sans-serif on every <td>. line-height in px (e.g. 22px). Use ONLY 3 font sizes: 20px (header), 14px (body/CTA), 12px (footer/captions). No other sizes.
7. BUTTONS: <table align="center"><tr><td bgcolor="#00008F" style="border-radius:4px;"><a href="{{URL}}" style="background:#00008F;color:#fff;padding:14px 28px;text-decoration:none;font-weight:bold;display:inline-block;font-family:Arial,Helvetica,sans-serif;">CTA</a></td></tr></table>
8. IMAGES: Every <img> needs display:block, width/height attributes, alt text, border="0".
9. STRUCTURE: Hidden preheader <span> first, branded header row, body rows, centered CTA, muted footer (12px, #777777) with unsubscribe link.
10. Avoid bare <p>; if used, set margin:0 0 16px 0 explicitly.
Output ONLY raw HTML. No markdown fences or commentary.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="color-scheme" content="light dark">
<title>{{SUBJECT}}</title>
</head>
<body style="margin:0;padding:0;background:#F4F5F7;">
<span style="display:none;max-height:0;overflow:hidden;mso-hide:all;">{{PREHEADER}}</span>
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="background:#F4F5F7;">
<tr><td align="center" style="padding:40px 0;">
<table role="presentation" width="600" cellpadding="0" cellspacing="0" border="0" bgcolor="#ffffff" style="background:#ffffff;">
<tr><td align="center" bgcolor="#00008F" style="background:#00008F;color:#fff;padding:20px;font-family:Arial,Helvetica,sans-serif;font-size:20px;font-weight:bold;">{{BRAND}}</td></tr>
<tr><td style="padding:30px;font-family:Arial,Helvetica,sans-serif;color:#333;font-size:14px;line-height:22px;">
<p style="margin:0 0 16px 0;">Hello,</p>
<p style="margin:0 0 16px 0;">Content here.</p>
<table role="presentation" cellpadding="0" cellspacing="0" border="0" align="center" style="margin:30px auto;"><tr><td bgcolor="#00008F" style="background:#00008F;border-radius:4px;"><a href="{{CTA_URL}}" style="background:#00008F;color:#fff;padding:14px 28px;text-decoration:none;font-weight:bold;display:inline-block;font-family:Arial,Helvetica,sans-serif;">Action</a></td></tr></table>
</td></tr>
<tr><td align="center" bgcolor="#f9f9f9" style="background:#f9f9f9;padding:20px;font-family:Arial,Helvetica,sans-serif;color:#777;font-size:12px;line-height:18px;border-top:1px solid #eee;">Automated message. <a href="{{UNSUB}}" style="color:#777;text-decoration:underline;">Unsubscribe</a></td></tr>
</table>
</td></tr>
</table>
</body>
</html>
