<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="preconnect" href="https://fonts.googleapis.com">
		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
		<link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap" rel="stylesheet">
		<title>{% block page_title%}{{ heading }}{% endblock %}</title>
		<style type="text/css">
			body, .background_main, p, table, td, div {
				font-family: 'Nunito',  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
			}

			img {
				border: none;
				-ms-interpolation-mode: bicubic;
				max-width: 100%;
			}

			p {padding-bottom: 2px;}

			body {
				background: #fff;
				font-size: 17px;
				line-height: 24px;
				margin: 0;
				padding: 0;
				-ms-text-size-adjust: 100%;
				-webkit-text-size-adjust: 100%;
			}

			table {
				border-collapse: collapse;
				mso-table-lspace: 0pt;
				mso-table-rspace: 0pt;
				width: 100%;
			}

			td {
				font-size: 17px;
				line-height: 24px;
				vertical-align: top;
			}

			/* Footer */
			.email_footer td, .email_footer p, .email_footer span, .email_footer a {
				font-size: 15px;
				text-align: center;
				color: #434245;
			}

			.email_footer td {padding-top: 20px;}

			/* Typography */
			h1, h2, h3, h4 {
				color: #434245;
				font-weight: 400;
				line-height: 1.4;
				margin: 0;
				margin-bottom: 12px;
			}

			h1 {
				font-size: 30px;
				line-height: 36px;
				font-weight: 600;
				text-align: left;
			}

			p, ul, ol {
				font-size: 17px;
				line-height: 24px;
				font-weight: normal;
				margin: 0;
				margin-bottom: 15px;
			}

			p li, ul li, ol li {
				list-style-position: inside;
				margin-left: 5px;
			}

			a {
				color: #3498db;
				text-decoration: none;
			}

			a:hover {text-decoration: underline;}

			.button_link::after {
				position: absolute;
				content: '';
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				border-radius: 4px;
			}

			.button_link:hover::after {
				box-shadow: inset 0 -2px #237c4a;
			}

			.button_link.is_secondary:hover::after {
				box-shadow: none;
			}


			.preview_text {
				color: transparent;
				display: none;
				height: 0;
				max-height: 0;
				max-width: 0;
				opacity: 0;
				overflow: hidden;
				mso-hide: all;
				visibility: hidden;
				width: 0;
				font-size: 1px;
				line-height:1px;
			}

			.preview_text a {
				color: #3AA3E3 !important;
				font-weight: bold;
			}
			.button_link_wrapper.plum:hover {
				background-color: {{ color_primary|default("#001C3C") }} !important;
			}

			.button_link.plum:hover::after {
				box-shadow: none;
			}

			@media only screen and (max-width: 600px) {
				table[class="background_main"] .sm_full_width {
					width: 100% !important;
				}
				table[class="background_main"] .sm_90_percent_width {
					width: 90% !important;
					padding: 16px !important;
					text-align: center !important;
					float: none !important;
				}
				table[class="background_main"] .sm_align_center {
					text-align: center !important;
				}
				table[class="background_main"] .sm_auto_width {
					width: auto !important;
				}
				table[class="background_main"] .sm_auto_height {
					height: auto !important;
				}

				table[class="background_main"] .sm_border_box {
					box-sizing: border-box !important;
				}

				table[class="background_main"] .sm_block {
					display: block !important;
				}
				table[class="background_main"] .sm_inline_block {
					display: inline-block !important;
				}
				table[class="background_main"] .sm_table {
					display: table !important;
				}

				table[class="background_main"] .sm_no_side_padding {
					padding-right: 0 !important;
					padding-left: 0 !important;
				}
				table[class="background_main"] .sm_no_border_radius {
					border-radius: 0 !important;
				}
				table[class="background_main"] .sm_no_padding {
					padding-right: 0 !important;
					padding-left: 0 !important;
				}
				table[class="background_main"] .sm_os_icons_height {
					/* this is to make the parent element the same height as the inline-block img inside */
					height: 44px;
				}
				.social_img_bottom_margin {
					/*this class is for social_user_outreach email only*/
					margin-bottom: 20px !important;
				}
				.social_p_bottom_margin {
					/*this class is for social_user_outreach email only*/
					margin-bottom: 40px !important;
				}
			}

			/* More client-specific styles */
			@media all {
				.ExternalClass {
					width: 100%;
				}
				.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {
					line-height: 100%;
				}
				.email_footer a {
					color: #434245 !important;
					font-family: inherit !important;
					font-size: inherit !important;
					font-weight: inherit !important;
					line-height: inherit !important;
					text-decoration: none !important;
				}
			}
			a:hover {
				text-decoration: underline !important;
			}

			pre, code {
				--saf-0: rgba(var(--sk_foreground_low, 29, 28, 29), 0.13);
				border: 1px solid var(--saf-0);
				background: rgba(var(--sk_foreground_min, 29, 28, 29), 0.04);
				font-family: 'Monaco', 'Menlo', 'Consolas', 'Courier New', monospace !important;
				font-size: 12px;
				line-height: 1.50001;
				font-variant-ligatures: none;
				white-space: pre;
				white-space: pre-wrap;
				word-wrap: break-word;
				word-break: normal;
				-webkit-tab-size: 4;
				-moz-tab-size: 4;
				-o-tab-size: 4;
				tab-size: 4;
			}

			code {
				color: #e01e5a;
				padding: 2px 3px 1px;
				border-radius: 3px;
			}

			pre {
				margin-bottom: 16px;
				padding: 8px;
				border-radius: 4px;
			}

			blockquote {
				position: relative;
				margin-bottom: 16px;
				padding-left: 16px;
				border-left: rgba(var(--sk_foreground_low_solid, 221, 221, 221), 1);
				border-left-width: 4px;
				border-left-style: solid;
			}
		</style>
	</head>
	<body>
		<!--[if mso]>
			<style type="text/css">
				.background_main, table, table td, p, div, h1, h2, h3, h4, h5, h6 {
					font-family: Arial, sans-serif !important;
				}
			</style>
		<![endif]-->
		<table style="background-color: #ffffff; padding-top: 20px;color: #434245;width: 100%;-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;   border: 0; text-align: center; border-collapse: collapse;" class="background_main">
			<tr>
				<td style="vertical-align: top; padding: 0">
					<center>
						<table id="body" class="card" style="border: 0; border-collapse: collapse; margin: 0 auto; background: white; border-radius: 8px; margin-bottom: 16px;">
							<tr>
								<td style="width: 546px; vertical-align: top; padding-top: 32px">
									<div style="max-width: 600px; margin: 0 auto;">
										{% section %}
										<img
											style="width: 38px; height: 38px; margin: 0 0 15px 0; padding-right: 30px; padding-left: 30px;"
											src="{{ organization_logo }}"
											alt=""
											width="38"
											height="38"
										/>
										<h1 style="font-size: 30px; padding-right: 30px; padding-left: 30px;">{{ heading }}</h1>
										{% block tldr %}{% endblock %}
										{% endsection %}
										{% block content %}{% endblock %}
									</div>
								</td>
							</tr>
						</table>
					</center>
				</td>
			</tr>
			<tr>
				<td class="email_footer" style="font-size: 15px;color: #717274;text-align: center;width: 100%; border-top: 1px solid #E1E1E4">
					<table style="margin-top: 20px; background-color: white; border: 0; text-align: center; border-collapse: collapse;">
						<tr>
							<td> </td>
							<td>
								<span style="display: block; color: #434245; font-size: 15px;"> Made by <a href="{{ organization_url }}" style="text-decoration: none; color: #434245;">{{ organization_name }}</a>
									<br/>
									{{ organization_address }}
								</span>
							</td>
							<td> </td>
						</tr>
						<tr>
							{% block footer_links %}
							<td> </td>
							<td style="font-size: 15px; padding: 16px 8px 24px; vertical-align: top; text-align: center;">
								<span>
									<a href="https://slackhq.com" style="text-decoration: none;color: #434245;">Our Blog</a>
									<span style="color: #D8D8D8;"> • </span>
									<a href="https://slack.com/legal" style="text-decoration: none;color: #434245;">Policies</a>
								</span>
							</td>
							{% endblock %}
						</tr>
					</table>
				</td>
			</tr>
		</table>
	</body>
</html>