body, table, td, a {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}

table, td {
-ms-text-autospace: 0pt;
text-autospace: 0pt;
}

img {
-ms-interpolation-mode: bicubic;
border: 0;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
display: block;
}

body {
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
height: 100% !important;
background-color: #1a1a1a;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
color: #ffffff;
}

/* styling layout wrapper and container constraints... /
/ main email container constraints */
.email-container {
width: 100%;
max-width: 600px;
margin: 0 auto;
background-color: #2b2b2b;
border-radius: 4px;
overflow: hidden;
}

/* hero section  and top banner*/
.hero-section {
background-color: #383838;
background: linear-gradient(180deg, #3d3d3d 0%, #2e2e2e 100%);
border-bottom: 2px solid #222222;
}

/* top pill logo */
.brand-logo-pill {
background-color: #ffffff;
color: #1a1a1a;
font-size: 14px;
font-weight: 800;
letter-spacing: 2px;
padding: 8px 24px;
border-radius: 30px;
display: inline-block;
border: 1px solid rgba(0, 0, 0, 0.1);
}

/* hero headings and copy */
.hero-heading {
font-size: 22px;
font-weight: 800;
line-height: 1.3;
letter-spacing: 1px;
color: #ffffff;
text-transform: uppercase;
text-align: center;
max-width: 460px;
}

.hero-subtitle {
font-size: 13px;
font-weight: 600;
letter-spacing: 1px;
color: #d1d5db;
text-transform: uppercase;
text-align: center;
}

/* hero featured image frame */
.hero-image-box {
width: 100%;
height: 230px;
background-color: #4a4a4a;
border-radius: 8px;
border: 2px solid rgba(255, 255, 255, 0.15);
display: flex;
align-items: center;
justify-content: center;
}

/* STREAMING_CHUNK:Styling interactive CTA pill buttons... /
/ primary CTA Buttons */
.cta-button-cell {
border-radius: 25px;
background-color: #ffffff;
transition: background-color 0.2s ease;
}

.cta-button-cell:hover {
background-color: #e5e5e5;
}

.cta-button {
display: inline-block;
padding: 10px 28px;
font-size: 12px;
font-weight: 700;
letter-spacing: 1px;
color: #1a1a1a !important;
text-decoration: none;
text-transform: uppercase;
border-radius: 25px;
}

/* product features */
.feature-section {
background-color: #ededed;
color: #222222;
border-bottom: 2px solid #d4d4d4;
}

.feature-overline {
font-size: 11px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #666666;
display: inline-block;
}

.feature-title {
font-size: 24px;
font-weight: 800;
letter-spacing: 1px;
text-transform: uppercase;
color: #1a1a1a;
}

.feature-intro {
font-size: 12px;
font-weight: 400;
line-height: 1.6;
color: #555555;
text-align: center;
max-width: 500px;
}

/* alternating feature columns */
.square-image-box {
width: 100%;
height: 170px;
background-color: #cfcfcf;
border-radius: 6px;
border: 1px solid #b5b5b5;
display: flex;
align-items: center;
justify-content: center;
}

.feature-text-block {
text-align: left;
}

.feature-subheading {
font-size: 15px;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
color: #1a1a1a;
}

.feature-copy {
font-size: 12px;
font-weight: 400;
line-height: 1.5;
color: #666666;
}

/* dark CTA Button variant for the light feature section */
.feature-section .cta-button-cell {
background-color: #2b2b2b;
}

.feature-section .cta-button-cell:hover {
background-color: #111111;
}

.feature-section .cta-button {
color: #ffffff !important;
}

/*community / footer (Dark Theme)*/
.footer-section {
background-color: #222222;
color: #ffffff;
}

/* circular brand logo */
.brand-circle-logo {
width: 48px;
height: 48px;
border-radius: 50%;
background-color: #ffffff;
color: #1a1a1a;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.5px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}

.footer-brand-title {
font-size: 18px;
font-weight: 800;
letter-spacing: 1px;
color: #ffffff;
vertical-align: middle;
margin-right: 6px;
}

.social-icon {
font-size: 18px;
vertical-align: middle;
}

.follow-button-cell {
background-color: #3b82f6;
border-radius: 20px;
}

.follow-button {
display: inline-block;
padding: 6px 18px;
font-size: 11px;
font-weight: 700;
letter-spacing: 1px;
color: #ffffff !important;
text-decoration: none;
text-transform: uppercase;
border-radius: 20px;
}

/* social stats bar */
.stats-bar {
border-top: 1px solid #383838;
border-bottom: 1px solid #383838;
padding: 10px 0;
}

.stat-item {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.8px;
color: #9ca3af;
text-transform: uppercase;
}

.footer-summary-copy {
font-size: 12px;
line-height: 1.6;
color: #9ca3af;
text-align: left;
}

/* embedded highlight card */
.highlight-card-wrapper {
background-color: #2d2d2d;
border: 1px solid #3d3d3d;
border-radius: 8px;
}

.card-image-box {
width: 100%;
height: 100px;
background-color: #404040;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
}

.mini-circle-logo {
width: 24px;
height: 24px;
border-radius: 50%;
background-color: #ffffff;
color: #1a1a1a;
font-size: 8px;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
}

.mini-brand-title {
font-size: 12px;
font-weight: 700;
color: #ffffff;
}

.mini-follow-link {
font-size: 11px;
font-weight: 600;
color: #3b82f6 !important;
text-decoration: none;
}

.card-copy-text {
font-size: 11px;
line-height: 1.5;
color: #9ca3af;
}

/* Legal Footer Links */
.legal-text {
font-size: 11px;
line-height: 1.6;
color: #6b7280;
}

.legal-link {
color: #9ca3af !important;
text-decoration: underline;
}

/*  responsive mobile breakpoint rules... 
MOBILE RESPONSIVENESS (Screens <= 600px) */
@media screen and (max-width: 600px) {
.email-container {
width: 100% !important;
max-width: 100% !important;
border-radius: 0 !important;
}

/* column feature rows vertically */
.stack-column {
    display: block !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 20px !important;
    box-sizing: border-box !important;
}

.hero-heading {
    font-size: 18px !important;
}

.hero-image-box {
    height: 180px !important;
}

.feature-title {
    font-size: 20px !important;
}

.square-image-box {
    height: 150px !important;
}

.feature-text-block {
    text-align: center !important;
}

.feature-text-block .cta-button-cell {
    margin: 0 auto;
}

.stats-bar td {
    font-size: 9px !important;
}


}