@clay-design-system/email 0.2.0 → 0.2.2

package/dist/emails/section-single-column-promo-card.html

@@ -62,8 +62,8 @@
 
   /* Mobile heading step-down — one-notch scale at the DS phone-only breakpoint
      @media(max-width:479px) (h1 56→48, h2 48→40, h3 40→32, h4 32→24). Keyed off the clay-h*
-     css-class on the mj-text <td>; targets the inner <div> where MJML places font-size. Desktop
-     size is the inline fallback if <style> is dropped. Per production emails, only the primary/
+     css-class on the mj-text td; targets the inner div where MJML places font-size. Desktop
+     size is the inline fallback if style is dropped. Per production emails, only the primary/
      hero heading opts in — add css-class="clay-hN" (alongside mj-class) to the hero heading's
      mj-text; secondary content headings keep mj-class alone and stay at desktop size. */
   @media only screen and (max-width: 479px) {
@@ -73,7 +73,7 @@
     .clay-h4 > div { font-size: 24px !important; }
 
     /* Mobile H-padding utilities — apply as css-class on mj-wrapper or mj-section to reduce
-       the 40px horizontal padding to the source breakpoint value when columns stack (< 480px).
+       the 40px horizontal padding to the source breakpoint value when columns stack (below 480px).
        Source: emaillove export mobile CSS (.b98-68 → 24px, .d9b-0c → 16px, .fb5-e8 → 24px).
        Targets the outer td MJML generates with inline padding-left/padding-right. */
     .email-mobile-px-24 > table > tbody > tr > td { padding-right: 24px !important; padding-left: 24px !important; }
@@ -82,8 +82,8 @@
     .email-mobile-pt-0 > table > tbody > tr > td { padding-top: 0 !important; }
 
     /* Mobile text centering — apply as css-class on mj-text elements whose content should be
-       center-aligned on mobile (< 480px). Matches the source emaillove .s0>div{text-align:center}.
-       Targets the inner <div> MJML wraps text content in. */
+       center-aligned on mobile (below 480px). Matches the source emaillove .s0>div{text-align:center}.
+       Targets the inner div MJML wraps text content in. */
     .email-mobile-center > div { text-align: center !important; }
 
     /* Mobile image centering — apply css-class="email-mobile-center-img" on mj-image.
@@ -94,7 +94,7 @@
     .email-mobile-center-img > table { margin: 0 auto !important; }
 
     /* Full-width button on mobile — apply css-class="email-btn-full" to mj-button.
-       Makes the button's inner <table> fill the column width and centers it.
+       Makes the button's inner table fill the column width and centers it.
        Matches emaillove .mj-b-full pattern. */
     .email-btn-full > table { width: 100% !important; }
     .email-btn-full > table > tbody > tr > td { text-align: center !important; }
@@ -122,10 +122,10 @@
      * email-card: flip a section or column's background to dark.
      *
      * Three selectors cover every compiled MJML structure:
-     *   1. .email-card          — the outer <div> (mj-section or mj-column)
-     *   2. .email-card > table  — the direct child <table> (mj-section has inline bg here)
+     *   1. .email-card          — the outer div (mj-section or mj-column)
+     *   2. .email-card > table  — the direct child table (mj-section has inline bg here)
      *   3. .email-card > table > tbody > tr > td
-     *                           — the content <td> inside mj-column (carries inline bg-color
+     *                           — the content td inside mj-column (carries inline bg-color
      *                             + border-radius when background-color is set on mj-column)
      *
      * Apply css-class="email-card" to any mj-section or mj-column that should
@@ -244,7 +244,7 @@
             
               <tr>
                 <td
-                   align="left" style="font-size:0px;padding:32px 0 0 0;word-break:break-word;"
+                   align="left" class="email-btn-invert-dark" style="font-size:0px;padding:32px 0 0 0;word-break:break-word;"
                 >
                   
       <table

package/dist/emails/section-spacer-fill.html

@@ -62,8 +62,8 @@
 
   /* Mobile heading step-down — one-notch scale at the DS phone-only breakpoint
      @media(max-width:479px) (h1 56→48, h2 48→40, h3 40→32, h4 32→24). Keyed off the clay-h*
-     css-class on the mj-text <td>; targets the inner <div> where MJML places font-size. Desktop
-     size is the inline fallback if <style> is dropped. Per production emails, only the primary/
+     css-class on the mj-text td; targets the inner div where MJML places font-size. Desktop
+     size is the inline fallback if style is dropped. Per production emails, only the primary/
      hero heading opts in — add css-class="clay-hN" (alongside mj-class) to the hero heading's
      mj-text; secondary content headings keep mj-class alone and stay at desktop size. */
   @media only screen and (max-width: 479px) {
@@ -73,7 +73,7 @@
     .clay-h4 > div { font-size: 24px !important; }
 
     /* Mobile H-padding utilities — apply as css-class on mj-wrapper or mj-section to reduce
-       the 40px horizontal padding to the source breakpoint value when columns stack (< 480px).
+       the 40px horizontal padding to the source breakpoint value when columns stack (below 480px).
        Source: emaillove export mobile CSS (.b98-68 → 24px, .d9b-0c → 16px, .fb5-e8 → 24px).
        Targets the outer td MJML generates with inline padding-left/padding-right. */
     .email-mobile-px-24 > table > tbody > tr > td { padding-right: 24px !important; padding-left: 24px !important; }
@@ -82,8 +82,8 @@
     .email-mobile-pt-0 > table > tbody > tr > td { padding-top: 0 !important; }
 
     /* Mobile text centering — apply as css-class on mj-text elements whose content should be
-       center-aligned on mobile (< 480px). Matches the source emaillove .s0>div{text-align:center}.
-       Targets the inner <div> MJML wraps text content in. */
+       center-aligned on mobile (below 480px). Matches the source emaillove .s0>div{text-align:center}.
+       Targets the inner div MJML wraps text content in. */
     .email-mobile-center > div { text-align: center !important; }
 
     /* Mobile image centering — apply css-class="email-mobile-center-img" on mj-image.
@@ -94,7 +94,7 @@
     .email-mobile-center-img > table { margin: 0 auto !important; }
 
     /* Full-width button on mobile — apply css-class="email-btn-full" to mj-button.
-       Makes the button's inner <table> fill the column width and centers it.
+       Makes the button's inner table fill the column width and centers it.
        Matches emaillove .mj-b-full pattern. */
     .email-btn-full > table { width: 100% !important; }
     .email-btn-full > table > tbody > tr > td { text-align: center !important; }
@@ -122,10 +122,10 @@
      * email-card: flip a section or column's background to dark.
      *
      * Three selectors cover every compiled MJML structure:
-     *   1. .email-card          — the outer <div> (mj-section or mj-column)
-     *   2. .email-card > table  — the direct child <table> (mj-section has inline bg here)
+     *   1. .email-card          — the outer div (mj-section or mj-column)
+     *   2. .email-card > table  — the direct child table (mj-section has inline bg here)
      *   3. .email-card > table > tbody > tr > td
-     *                           — the content <td> inside mj-column (carries inline bg-color
+     *                           — the content td inside mj-column (carries inline bg-color
      *                             + border-radius when background-color is set on mj-column)
      *
      * Apply css-class="email-card" to any mj-section or mj-column that should
@@ -197,7 +197,7 @@
                 >
                   
       <div
-         style="font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:14px;font-weight:400;line-height:1.5;text-align:center;color:#7c7b7b;"
+         style="font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:14px;font-weight:400;line-height:1.5;text-align:center;color:#45454a;"
       >↑ content above</div>
     
                 </td>
@@ -221,10 +221,10 @@
     
     <!-- spacer-fill — 24px height empty space, no visible line. -->
       
-      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:640px;" width="640" bgcolor="#ffffff" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="email-card-outlook" role="presentation" style="width:640px;" width="640" bgcolor="#ffffff" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
     
       
-      <div  style="background:#ffffff;background-color:#ffffff;margin:0px auto;max-width:640px;">
+      <div  class="email-card" style="background:#ffffff;background-color:#ffffff;margin:0px auto;max-width:640px;">
         
         <table
            align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;"

package/dist/emails/section-testimonial-dark-card.html

@@ -70,8 +70,8 @@
 
   /* Mobile heading step-down — one-notch scale at the DS phone-only breakpoint
      @media(max-width:479px) (h1 56→48, h2 48→40, h3 40→32, h4 32→24). Keyed off the clay-h*
-     css-class on the mj-text <td>; targets the inner <div> where MJML places font-size. Desktop
-     size is the inline fallback if <style> is dropped. Per production emails, only the primary/
+     css-class on the mj-text td; targets the inner div where MJML places font-size. Desktop
+     size is the inline fallback if style is dropped. Per production emails, only the primary/
      hero heading opts in — add css-class="clay-hN" (alongside mj-class) to the hero heading's
      mj-text; secondary content headings keep mj-class alone and stay at desktop size. */
   @media only screen and (max-width: 479px) {
@@ -81,7 +81,7 @@
     .clay-h4 > div { font-size: 24px !important; }
 
     /* Mobile H-padding utilities — apply as css-class on mj-wrapper or mj-section to reduce
-       the 40px horizontal padding to the source breakpoint value when columns stack (< 480px).
+       the 40px horizontal padding to the source breakpoint value when columns stack (below 480px).
        Source: emaillove export mobile CSS (.b98-68 → 24px, .d9b-0c → 16px, .fb5-e8 → 24px).
        Targets the outer td MJML generates with inline padding-left/padding-right. */
     .email-mobile-px-24 > table > tbody > tr > td { padding-right: 24px !important; padding-left: 24px !important; }
@@ -90,8 +90,8 @@
     .email-mobile-pt-0 > table > tbody > tr > td { padding-top: 0 !important; }
 
     /* Mobile text centering — apply as css-class on mj-text elements whose content should be
-       center-aligned on mobile (< 480px). Matches the source emaillove .s0>div{text-align:center}.
-       Targets the inner <div> MJML wraps text content in. */
+       center-aligned on mobile (below 480px). Matches the source emaillove .s0>div{text-align:center}.
+       Targets the inner div MJML wraps text content in. */
     .email-mobile-center > div { text-align: center !important; }
 
     /* Mobile image centering — apply css-class="email-mobile-center-img" on mj-image.
@@ -102,7 +102,7 @@
     .email-mobile-center-img > table { margin: 0 auto !important; }
 
     /* Full-width button on mobile — apply css-class="email-btn-full" to mj-button.
-       Makes the button's inner <table> fill the column width and centers it.
+       Makes the button's inner table fill the column width and centers it.
        Matches emaillove .mj-b-full pattern. */
     .email-btn-full > table { width: 100% !important; }
     .email-btn-full > table > tbody > tr > td { text-align: center !important; }
@@ -130,10 +130,10 @@
      * email-card: flip a section or column's background to dark.
      *
      * Three selectors cover every compiled MJML structure:
-     *   1. .email-card          — the outer <div> (mj-section or mj-column)
-     *   2. .email-card > table  — the direct child <table> (mj-section has inline bg here)
+     *   1. .email-card          — the outer div (mj-section or mj-column)
+     *   2. .email-card > table  — the direct child table (mj-section has inline bg here)
      *   3. .email-card > table > tbody > tr > td
-     *                           — the content <td> inside mj-column (carries inline bg-color
+     *                           — the content td inside mj-column (carries inline bg-color
      *                             + border-radius when background-color is set on mj-column)
      *
      * Apply css-class="email-card" to any mj-section or mj-column that should

package/dist/emails/section-text-h1-regular.html

@@ -62,8 +62,8 @@
 
   /* Mobile heading step-down — one-notch scale at the DS phone-only breakpoint
      @media(max-width:479px) (h1 56→48, h2 48→40, h3 40→32, h4 32→24). Keyed off the clay-h*
-     css-class on the mj-text <td>; targets the inner <div> where MJML places font-size. Desktop
-     size is the inline fallback if <style> is dropped. Per production emails, only the primary/
+     css-class on the mj-text td; targets the inner div where MJML places font-size. Desktop
+     size is the inline fallback if style is dropped. Per production emails, only the primary/
      hero heading opts in — add css-class="clay-hN" (alongside mj-class) to the hero heading's
      mj-text; secondary content headings keep mj-class alone and stay at desktop size. */
   @media only screen and (max-width: 479px) {
@@ -73,7 +73,7 @@
     .clay-h4 > div { font-size: 24px !important; }
 
     /* Mobile H-padding utilities — apply as css-class on mj-wrapper or mj-section to reduce
-       the 40px horizontal padding to the source breakpoint value when columns stack (< 480px).
+       the 40px horizontal padding to the source breakpoint value when columns stack (below 480px).
        Source: emaillove export mobile CSS (.b98-68 → 24px, .d9b-0c → 16px, .fb5-e8 → 24px).
        Targets the outer td MJML generates with inline padding-left/padding-right. */
     .email-mobile-px-24 > table > tbody > tr > td { padding-right: 24px !important; padding-left: 24px !important; }
@@ -82,8 +82,8 @@
     .email-mobile-pt-0 > table > tbody > tr > td { padding-top: 0 !important; }
 
     /* Mobile text centering — apply as css-class on mj-text elements whose content should be
-       center-aligned on mobile (< 480px). Matches the source emaillove .s0>div{text-align:center}.
-       Targets the inner <div> MJML wraps text content in. */
+       center-aligned on mobile (below 480px). Matches the source emaillove .s0>div{text-align:center}.
+       Targets the inner div MJML wraps text content in. */
     .email-mobile-center > div { text-align: center !important; }
 
     /* Mobile image centering — apply css-class="email-mobile-center-img" on mj-image.
@@ -94,7 +94,7 @@
     .email-mobile-center-img > table { margin: 0 auto !important; }
 
     /* Full-width button on mobile — apply css-class="email-btn-full" to mj-button.
-       Makes the button's inner <table> fill the column width and centers it.
+       Makes the button's inner table fill the column width and centers it.
        Matches emaillove .mj-b-full pattern. */
     .email-btn-full > table { width: 100% !important; }
     .email-btn-full > table > tbody > tr > td { text-align: center !important; }
@@ -122,10 +122,10 @@
      * email-card: flip a section or column's background to dark.
      *
      * Three selectors cover every compiled MJML structure:
-     *   1. .email-card          — the outer <div> (mj-section or mj-column)
-     *   2. .email-card > table  — the direct child <table> (mj-section has inline bg here)
+     *   1. .email-card          — the outer div (mj-section or mj-column)
+     *   2. .email-card > table  — the direct child table (mj-section has inline bg here)
      *   3. .email-card > table > tbody > tr > td
-     *                           — the content <td> inside mj-column (carries inline bg-color
+     *                           — the content td inside mj-column (carries inline bg-color
      *                             + border-radius when background-color is set on mj-column)
      *
      * Apply css-class="email-card" to any mj-section or mj-column that should

package/dist/emails/section-text-h2-regular.html

@@ -62,8 +62,8 @@
 
   /* Mobile heading step-down — one-notch scale at the DS phone-only breakpoint
      @media(max-width:479px) (h1 56→48, h2 48→40, h3 40→32, h4 32→24). Keyed off the clay-h*
-     css-class on the mj-text <td>; targets the inner <div> where MJML places font-size. Desktop
-     size is the inline fallback if <style> is dropped. Per production emails, only the primary/
+     css-class on the mj-text td; targets the inner div where MJML places font-size. Desktop
+     size is the inline fallback if style is dropped. Per production emails, only the primary/
      hero heading opts in — add css-class="clay-hN" (alongside mj-class) to the hero heading's
      mj-text; secondary content headings keep mj-class alone and stay at desktop size. */
   @media only screen and (max-width: 479px) {
@@ -73,7 +73,7 @@
     .clay-h4 > div { font-size: 24px !important; }
 
     /* Mobile H-padding utilities — apply as css-class on mj-wrapper or mj-section to reduce
-       the 40px horizontal padding to the source breakpoint value when columns stack (< 480px).
+       the 40px horizontal padding to the source breakpoint value when columns stack (below 480px).
        Source: emaillove export mobile CSS (.b98-68 → 24px, .d9b-0c → 16px, .fb5-e8 → 24px).
        Targets the outer td MJML generates with inline padding-left/padding-right. */
     .email-mobile-px-24 > table > tbody > tr > td { padding-right: 24px !important; padding-left: 24px !important; }
@@ -82,8 +82,8 @@
     .email-mobile-pt-0 > table > tbody > tr > td { padding-top: 0 !important; }
 
     /* Mobile text centering — apply as css-class on mj-text elements whose content should be
-       center-aligned on mobile (< 480px). Matches the source emaillove .s0>div{text-align:center}.
-       Targets the inner <div> MJML wraps text content in. */
+       center-aligned on mobile (below 480px). Matches the source emaillove .s0>div{text-align:center}.
+       Targets the inner div MJML wraps text content in. */
     .email-mobile-center > div { text-align: center !important; }
 
     /* Mobile image centering — apply css-class="email-mobile-center-img" on mj-image.
@@ -94,7 +94,7 @@
     .email-mobile-center-img > table { margin: 0 auto !important; }
 
     /* Full-width button on mobile — apply css-class="email-btn-full" to mj-button.
-       Makes the button's inner <table> fill the column width and centers it.
+       Makes the button's inner table fill the column width and centers it.
        Matches emaillove .mj-b-full pattern. */
     .email-btn-full > table { width: 100% !important; }
     .email-btn-full > table > tbody > tr > td { text-align: center !important; }
@@ -122,10 +122,10 @@
      * email-card: flip a section or column's background to dark.
      *
      * Three selectors cover every compiled MJML structure:
-     *   1. .email-card          — the outer <div> (mj-section or mj-column)
-     *   2. .email-card > table  — the direct child <table> (mj-section has inline bg here)
+     *   1. .email-card          — the outer div (mj-section or mj-column)
+     *   2. .email-card > table  — the direct child table (mj-section has inline bg here)
      *   3. .email-card > table > tbody > tr > td
-     *                           — the content <td> inside mj-column (carries inline bg-color
+     *                           — the content td inside mj-column (carries inline bg-color
      *                             + border-radius when background-color is set on mj-column)
      *
      * Apply css-class="email-card" to any mj-section or mj-column that should

package/dist/emails/section-text-h3-regular.html

@@ -62,8 +62,8 @@
 
   /* Mobile heading step-down — one-notch scale at the DS phone-only breakpoint
      @media(max-width:479px) (h1 56→48, h2 48→40, h3 40→32, h4 32→24). Keyed off the clay-h*
-     css-class on the mj-text <td>; targets the inner <div> where MJML places font-size. Desktop
-     size is the inline fallback if <style> is dropped. Per production emails, only the primary/
+     css-class on the mj-text td; targets the inner div where MJML places font-size. Desktop
+     size is the inline fallback if style is dropped. Per production emails, only the primary/
      hero heading opts in — add css-class="clay-hN" (alongside mj-class) to the hero heading's
      mj-text; secondary content headings keep mj-class alone and stay at desktop size. */
   @media only screen and (max-width: 479px) {
@@ -73,7 +73,7 @@
     .clay-h4 > div { font-size: 24px !important; }
 
     /* Mobile H-padding utilities — apply as css-class on mj-wrapper or mj-section to reduce
-       the 40px horizontal padding to the source breakpoint value when columns stack (< 480px).
+       the 40px horizontal padding to the source breakpoint value when columns stack (below 480px).
        Source: emaillove export mobile CSS (.b98-68 → 24px, .d9b-0c → 16px, .fb5-e8 → 24px).
        Targets the outer td MJML generates with inline padding-left/padding-right. */
     .email-mobile-px-24 > table > tbody > tr > td { padding-right: 24px !important; padding-left: 24px !important; }
@@ -82,8 +82,8 @@
     .email-mobile-pt-0 > table > tbody > tr > td { padding-top: 0 !important; }
 
     /* Mobile text centering — apply as css-class on mj-text elements whose content should be
-       center-aligned on mobile (< 480px). Matches the source emaillove .s0>div{text-align:center}.
-       Targets the inner <div> MJML wraps text content in. */
+       center-aligned on mobile (below 480px). Matches the source emaillove .s0>div{text-align:center}.
+       Targets the inner div MJML wraps text content in. */
     .email-mobile-center > div { text-align: center !important; }
 
     /* Mobile image centering — apply css-class="email-mobile-center-img" on mj-image.
@@ -94,7 +94,7 @@
     .email-mobile-center-img > table { margin: 0 auto !important; }
 
     /* Full-width button on mobile — apply css-class="email-btn-full" to mj-button.
-       Makes the button's inner <table> fill the column width and centers it.
+       Makes the button's inner table fill the column width and centers it.
        Matches emaillove .mj-b-full pattern. */
     .email-btn-full > table { width: 100% !important; }
     .email-btn-full > table > tbody > tr > td { text-align: center !important; }
@@ -122,10 +122,10 @@
      * email-card: flip a section or column's background to dark.
      *
      * Three selectors cover every compiled MJML structure:
-     *   1. .email-card          — the outer <div> (mj-section or mj-column)
-     *   2. .email-card > table  — the direct child <table> (mj-section has inline bg here)
+     *   1. .email-card          — the outer div (mj-section or mj-column)
+     *   2. .email-card > table  — the direct child table (mj-section has inline bg here)
      *   3. .email-card > table > tbody > tr > td
-     *                           — the content <td> inside mj-column (carries inline bg-color
+     *                           — the content td inside mj-column (carries inline bg-color
      *                             + border-radius when background-color is set on mj-column)
      *
      * Apply css-class="email-card" to any mj-section or mj-column that should

package/dist/emails/section-text-h4-regular.html

@@ -62,8 +62,8 @@
 
   /* Mobile heading step-down — one-notch scale at the DS phone-only breakpoint
      @media(max-width:479px) (h1 56→48, h2 48→40, h3 40→32, h4 32→24). Keyed off the clay-h*
-     css-class on the mj-text <td>; targets the inner <div> where MJML places font-size. Desktop
-     size is the inline fallback if <style> is dropped. Per production emails, only the primary/
+     css-class on the mj-text td; targets the inner div where MJML places font-size. Desktop
+     size is the inline fallback if style is dropped. Per production emails, only the primary/
      hero heading opts in — add css-class="clay-hN" (alongside mj-class) to the hero heading's
      mj-text; secondary content headings keep mj-class alone and stay at desktop size. */
   @media only screen and (max-width: 479px) {
@@ -73,7 +73,7 @@
     .clay-h4 > div { font-size: 24px !important; }
 
     /* Mobile H-padding utilities — apply as css-class on mj-wrapper or mj-section to reduce
-       the 40px horizontal padding to the source breakpoint value when columns stack (< 480px).
+       the 40px horizontal padding to the source breakpoint value when columns stack (below 480px).
        Source: emaillove export mobile CSS (.b98-68 → 24px, .d9b-0c → 16px, .fb5-e8 → 24px).
        Targets the outer td MJML generates with inline padding-left/padding-right. */
     .email-mobile-px-24 > table > tbody > tr > td { padding-right: 24px !important; padding-left: 24px !important; }
@@ -82,8 +82,8 @@
     .email-mobile-pt-0 > table > tbody > tr > td { padding-top: 0 !important; }
 
     /* Mobile text centering — apply as css-class on mj-text elements whose content should be
-       center-aligned on mobile (< 480px). Matches the source emaillove .s0>div{text-align:center}.
-       Targets the inner <div> MJML wraps text content in. */
+       center-aligned on mobile (below 480px). Matches the source emaillove .s0>div{text-align:center}.
+       Targets the inner div MJML wraps text content in. */
     .email-mobile-center > div { text-align: center !important; }
 
     /* Mobile image centering — apply css-class="email-mobile-center-img" on mj-image.
@@ -94,7 +94,7 @@
     .email-mobile-center-img > table { margin: 0 auto !important; }
 
     /* Full-width button on mobile — apply css-class="email-btn-full" to mj-button.
-       Makes the button's inner <table> fill the column width and centers it.
+       Makes the button's inner table fill the column width and centers it.
        Matches emaillove .mj-b-full pattern. */
     .email-btn-full > table { width: 100% !important; }
     .email-btn-full > table > tbody > tr > td { text-align: center !important; }
@@ -122,10 +122,10 @@
      * email-card: flip a section or column's background to dark.
      *
      * Three selectors cover every compiled MJML structure:
-     *   1. .email-card          — the outer <div> (mj-section or mj-column)
-     *   2. .email-card > table  — the direct child <table> (mj-section has inline bg here)
+     *   1. .email-card          — the outer div (mj-section or mj-column)
+     *   2. .email-card > table  — the direct child table (mj-section has inline bg here)
      *   3. .email-card > table > tbody > tr > td
-     *                           — the content <td> inside mj-column (carries inline bg-color
+     *                           — the content td inside mj-column (carries inline bg-color
      *                             + border-radius when background-color is set on mj-column)
      *
      * Apply css-class="email-card" to any mj-section or mj-column that should

package/dist/emails/section-text-h5-regular.html

@@ -62,8 +62,8 @@
 
   /* Mobile heading step-down — one-notch scale at the DS phone-only breakpoint
      @media(max-width:479px) (h1 56→48, h2 48→40, h3 40→32, h4 32→24). Keyed off the clay-h*
-     css-class on the mj-text <td>; targets the inner <div> where MJML places font-size. Desktop
-     size is the inline fallback if <style> is dropped. Per production emails, only the primary/
+     css-class on the mj-text td; targets the inner div where MJML places font-size. Desktop
+     size is the inline fallback if style is dropped. Per production emails, only the primary/
      hero heading opts in — add css-class="clay-hN" (alongside mj-class) to the hero heading's
      mj-text; secondary content headings keep mj-class alone and stay at desktop size. */
   @media only screen and (max-width: 479px) {
@@ -73,7 +73,7 @@
     .clay-h4 > div { font-size: 24px !important; }
 
     /* Mobile H-padding utilities — apply as css-class on mj-wrapper or mj-section to reduce
-       the 40px horizontal padding to the source breakpoint value when columns stack (< 480px).
+       the 40px horizontal padding to the source breakpoint value when columns stack (below 480px).
        Source: emaillove export mobile CSS (.b98-68 → 24px, .d9b-0c → 16px, .fb5-e8 → 24px).
        Targets the outer td MJML generates with inline padding-left/padding-right. */
     .email-mobile-px-24 > table > tbody > tr > td { padding-right: 24px !important; padding-left: 24px !important; }
@@ -82,8 +82,8 @@
     .email-mobile-pt-0 > table > tbody > tr > td { padding-top: 0 !important; }
 
     /* Mobile text centering — apply as css-class on mj-text elements whose content should be
-       center-aligned on mobile (< 480px). Matches the source emaillove .s0>div{text-align:center}.
-       Targets the inner <div> MJML wraps text content in. */
+       center-aligned on mobile (below 480px). Matches the source emaillove .s0>div{text-align:center}.
+       Targets the inner div MJML wraps text content in. */
     .email-mobile-center > div { text-align: center !important; }
 
     /* Mobile image centering — apply css-class="email-mobile-center-img" on mj-image.
@@ -94,7 +94,7 @@
     .email-mobile-center-img > table { margin: 0 auto !important; }
 
     /* Full-width button on mobile — apply css-class="email-btn-full" to mj-button.
-       Makes the button's inner <table> fill the column width and centers it.
+       Makes the button's inner table fill the column width and centers it.
        Matches emaillove .mj-b-full pattern. */
     .email-btn-full > table { width: 100% !important; }
     .email-btn-full > table > tbody > tr > td { text-align: center !important; }
@@ -122,10 +122,10 @@
      * email-card: flip a section or column's background to dark.
      *
      * Three selectors cover every compiled MJML structure:
-     *   1. .email-card          — the outer <div> (mj-section or mj-column)
-     *   2. .email-card > table  — the direct child <table> (mj-section has inline bg here)
+     *   1. .email-card          — the outer div (mj-section or mj-column)
+     *   2. .email-card > table  — the direct child table (mj-section has inline bg here)
      *   3. .email-card > table > tbody > tr > td
-     *                           — the content <td> inside mj-column (carries inline bg-color
+     *                           — the content td inside mj-column (carries inline bg-color
      *                             + border-radius when background-color is set on mj-column)
      *
      * Apply css-class="email-card" to any mj-section or mj-column that should

package/dist/emails/section-text-mixed-heading.html

@@ -62,8 +62,8 @@
 
   /* Mobile heading step-down — one-notch scale at the DS phone-only breakpoint
      @media(max-width:479px) (h1 56→48, h2 48→40, h3 40→32, h4 32→24). Keyed off the clay-h*
-     css-class on the mj-text <td>; targets the inner <div> where MJML places font-size. Desktop
-     size is the inline fallback if <style> is dropped. Per production emails, only the primary/
+     css-class on the mj-text td; targets the inner div where MJML places font-size. Desktop
+     size is the inline fallback if style is dropped. Per production emails, only the primary/
      hero heading opts in — add css-class="clay-hN" (alongside mj-class) to the hero heading's
      mj-text; secondary content headings keep mj-class alone and stay at desktop size. */
   @media only screen and (max-width: 479px) {
@@ -73,7 +73,7 @@
     .clay-h4 > div { font-size: 24px !important; }
 
     /* Mobile H-padding utilities — apply as css-class on mj-wrapper or mj-section to reduce
-       the 40px horizontal padding to the source breakpoint value when columns stack (< 480px).
+       the 40px horizontal padding to the source breakpoint value when columns stack (below 480px).
        Source: emaillove export mobile CSS (.b98-68 → 24px, .d9b-0c → 16px, .fb5-e8 → 24px).
        Targets the outer td MJML generates with inline padding-left/padding-right. */
     .email-mobile-px-24 > table > tbody > tr > td { padding-right: 24px !important; padding-left: 24px !important; }
@@ -82,8 +82,8 @@
     .email-mobile-pt-0 > table > tbody > tr > td { padding-top: 0 !important; }
 
     /* Mobile text centering — apply as css-class on mj-text elements whose content should be
-       center-aligned on mobile (< 480px). Matches the source emaillove .s0>div{text-align:center}.
-       Targets the inner <div> MJML wraps text content in. */
+       center-aligned on mobile (below 480px). Matches the source emaillove .s0>div{text-align:center}.
+       Targets the inner div MJML wraps text content in. */
     .email-mobile-center > div { text-align: center !important; }
 
     /* Mobile image centering — apply css-class="email-mobile-center-img" on mj-image.
@@ -94,7 +94,7 @@
     .email-mobile-center-img > table { margin: 0 auto !important; }
 
     /* Full-width button on mobile — apply css-class="email-btn-full" to mj-button.
-       Makes the button's inner <table> fill the column width and centers it.
+       Makes the button's inner table fill the column width and centers it.
        Matches emaillove .mj-b-full pattern. */
     .email-btn-full > table { width: 100% !important; }
     .email-btn-full > table > tbody > tr > td { text-align: center !important; }
@@ -122,10 +122,10 @@
      * email-card: flip a section or column's background to dark.
      *
      * Three selectors cover every compiled MJML structure:
-     *   1. .email-card          — the outer <div> (mj-section or mj-column)
-     *   2. .email-card > table  — the direct child <table> (mj-section has inline bg here)
+     *   1. .email-card          — the outer div (mj-section or mj-column)
+     *   2. .email-card > table  — the direct child table (mj-section has inline bg here)
      *   3. .email-card > table > tbody > tr > td
-     *                           — the content <td> inside mj-column (carries inline bg-color
+     *                           — the content td inside mj-column (carries inline bg-color
      *                             + border-radius when background-color is set on mj-column)
      *
      * Apply css-class="email-card" to any mj-section or mj-column that should

package/dist/emails/section-text-overline-heading.html

@@ -62,8 +62,8 @@
 
   /* Mobile heading step-down — one-notch scale at the DS phone-only breakpoint
      @media(max-width:479px) (h1 56→48, h2 48→40, h3 40→32, h4 32→24). Keyed off the clay-h*
-     css-class on the mj-text <td>; targets the inner <div> where MJML places font-size. Desktop
-     size is the inline fallback if <style> is dropped. Per production emails, only the primary/
+     css-class on the mj-text td; targets the inner div where MJML places font-size. Desktop
+     size is the inline fallback if style is dropped. Per production emails, only the primary/
      hero heading opts in — add css-class="clay-hN" (alongside mj-class) to the hero heading's
      mj-text; secondary content headings keep mj-class alone and stay at desktop size. */
   @media only screen and (max-width: 479px) {
@@ -73,7 +73,7 @@
     .clay-h4 > div { font-size: 24px !important; }
 
     /* Mobile H-padding utilities — apply as css-class on mj-wrapper or mj-section to reduce
-       the 40px horizontal padding to the source breakpoint value when columns stack (< 480px).
+       the 40px horizontal padding to the source breakpoint value when columns stack (below 480px).
        Source: emaillove export mobile CSS (.b98-68 → 24px, .d9b-0c → 16px, .fb5-e8 → 24px).
        Targets the outer td MJML generates with inline padding-left/padding-right. */
     .email-mobile-px-24 > table > tbody > tr > td { padding-right: 24px !important; padding-left: 24px !important; }
@@ -82,8 +82,8 @@
     .email-mobile-pt-0 > table > tbody > tr > td { padding-top: 0 !important; }
 
     /* Mobile text centering — apply as css-class on mj-text elements whose content should be
-       center-aligned on mobile (< 480px). Matches the source emaillove .s0>div{text-align:center}.
-       Targets the inner <div> MJML wraps text content in. */
+       center-aligned on mobile (below 480px). Matches the source emaillove .s0>div{text-align:center}.
+       Targets the inner div MJML wraps text content in. */
     .email-mobile-center > div { text-align: center !important; }
 
     /* Mobile image centering — apply css-class="email-mobile-center-img" on mj-image.
@@ -94,7 +94,7 @@
     .email-mobile-center-img > table { margin: 0 auto !important; }
 
     /* Full-width button on mobile — apply css-class="email-btn-full" to mj-button.
-       Makes the button's inner <table> fill the column width and centers it.
+       Makes the button's inner table fill the column width and centers it.
        Matches emaillove .mj-b-full pattern. */
     .email-btn-full > table { width: 100% !important; }
     .email-btn-full > table > tbody > tr > td { text-align: center !important; }
@@ -122,10 +122,10 @@
      * email-card: flip a section or column's background to dark.
      *
      * Three selectors cover every compiled MJML structure:
-     *   1. .email-card          — the outer <div> (mj-section or mj-column)
-     *   2. .email-card > table  — the direct child <table> (mj-section has inline bg here)
+     *   1. .email-card          — the outer div (mj-section or mj-column)
+     *   2. .email-card > table  — the direct child table (mj-section has inline bg here)
      *   3. .email-card > table > tbody > tr > td
-     *                           — the content <td> inside mj-column (carries inline bg-color
+     *                           — the content td inside mj-column (carries inline bg-color
      *                             + border-radius when background-color is set on mj-column)
      *
      * Apply css-class="email-card" to any mj-section or mj-column that should
@@ -184,7 +184,7 @@
                   
       <!-- text-overline-heading — small muted eyebrow label above a bold heading.
      Source: emaillove "texts" export / Figma "Clay-LCM" node 1-682.
-     Pattern: eyebrow p3 (14px/muted #7c7b7b) → 8px gap → h5 bold (24px/600). Centered.
+     Pattern: eyebrow p3 (14px/muted #45454a) → 8px gap → h5 bold (24px/600). Centered.
      Use "From startups to enterprises" / "Trusted by 245,000+" style or "Your on fire" /
      "Drop it like it's hot" — same structure, author controls element order.
      Mobile: H-padding → 24px (email-mobile-px-24). -->
@@ -218,7 +218,7 @@
                 >
                   
       <div
-         style="font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:14px;font-weight:400;line-height:1.5;text-align:center;color:#7c7b7b;"
+         style="font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:14px;font-weight:400;line-height:1.5;text-align:center;color:#45454a;"
       >Your on fire</div>
     
                 </td>