@clay-design-system/email 0.2.0 → 0.2.2

package/dist/emails/section-header.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-hero.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-icon-feature-list.html

@@ -72,8 +72,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) {
@@ -83,7 +83,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; }
@@ -92,8 +92,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.
@@ -104,7 +104,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; }
@@ -132,10 +132,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-image-caption-block.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-image-hero.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
@@ -279,7 +279,7 @@
             
               <tr>
                 <td
-                   align="left" style="font-size:0px;padding:24px 0 0 0;word-break:break-word;"
+                   align="left" class="email-btn-invert-dark" style="font-size:0px;padding:24px 0 0 0;word-break:break-word;"
                 >
                   
       <table

package/dist/emails/section-lesson-card.html

@@ -76,8 +76,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) {
@@ -87,7 +87,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; }
@@ -96,8 +96,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.
@@ -108,7 +108,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; }
@@ -136,10 +136,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
@@ -345,7 +345,7 @@
                 >
                   
       <div
-         style="font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:12px;font-weight:400;line-height:1.5;text-align:left;color:#7c7b7b;"
+         style="font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:12px;font-weight:400;line-height:1.5;text-align:left;color:#45454a;"
       ><a href="#" style="display:inline-block;background-color:#D9D7FF;color:#000000;font-size:10px;font-weight:400;line-height:1.4;padding:3px 10px;border-radius:5px;text-decoration:none;">5-min lesson</a></div>
     
                 </td>
@@ -545,7 +545,7 @@
                 >
                   
       <div
-         style="font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:12px;font-weight:400;line-height:1.5;text-align:left;color:#7c7b7b;"
+         style="font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:12px;font-weight:400;line-height:1.5;text-align:left;color:#45454a;"
       ><a href="#" style="display:inline-block;background-color:#D9D7FF;color:#000000;font-size:10px;font-weight:400;line-height:1.4;padding:3px 10px;border-radius:5px;text-decoration:none;">Live webinar</a></div>
     
                 </td>

package/dist/emails/section-list-action-items.html

@@ -74,8 +74,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) {
@@ -85,7 +85,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; }
@@ -94,8 +94,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.
@@ -106,7 +106,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; }
@@ -134,10 +134,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
@@ -181,7 +181,7 @@
      Source: emaillove "Lists" export / Figma "Lists" node 1:684.
      Each row: mj-group (100%) → icon col (6.785714% = 38px) + text col (93.214286% = 522px).
      3 list items; first at 0 top padding, items 2-3 at 24px top padding.
-     Text uses inline iris (#6161ff) span for the action label + black span for body.
+     Text uses inline iris (#6161ff) span for the action label + text-role (#252526) span for body.
      mj-group keeps icon + text inline at ALL viewport sizes.
      Mobile: H-padding → 24px (email-mobile-px-24 on wrapper). -->
       
@@ -295,7 +295,7 @@
                 >
                   
       <div
-         style="font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;font-weight:400;line-height:1.4;text-align:left;color:#000000;"
+         style="font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;font-weight:400;line-height:1.4;text-align:left;color:#252526;"
       ><span style="color:#6161ff !important;">Set up an automation: </span><span>to notify your team or update a status when a payment is marked &#34;Paid.&#34;</span></div>
     
                 </td>
@@ -419,7 +419,7 @@
                 >
                   
       <div
-         style="font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;font-weight:400;line-height:1.4;text-align:left;color:#000000;"
+         style="font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;font-weight:400;line-height:1.4;text-align:left;color:#252526;"
       ><span style="color:#6161ff !important;">Sync data across boards:</span><span> to keep billing status updated in a different board or project automatically.</span></div>
     
                 </td>
@@ -543,7 +543,7 @@
                 >
                   
       <div
-         style="font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;font-weight:400;line-height:1.4;text-align:left;color:#000000;"
+         style="font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;font-weight:400;line-height:1.4;text-align:left;color:#252526;"
       ><span>Want to go even further? Connect tools like Stripe or QuickBooks via our </span><span style="color:#6161ff !important;">integrations,</span><span> </span><span style="color:#6161ff !important;">API or Zapier.</span></div>
     
                 </td>

package/dist/emails/section-list-feature-items.html

@@ -74,8 +74,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) {
@@ -85,7 +85,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; }
@@ -94,8 +94,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.
@@ -106,7 +106,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; }
@@ -134,10 +134,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-list-icon-items.html

@@ -74,8 +74,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) {
@@ -85,7 +85,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; }
@@ -94,8 +94,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.
@@ -106,7 +106,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; }
@@ -134,10 +134,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
@@ -288,7 +288,7 @@
                 >
                   
       <div
-         style="font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;font-weight:400;line-height:1.4;text-align:left;color:#000000;"
+         style="font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;font-weight:400;line-height:1.4;text-align:left;color:#252526;"
       ><span style="font-weight:600;">Stay on top of every task</span><br /><span>Assign owners, set due dates, and track status — all in one place, so nothing slips through.</span></div>
     
                 </td>
@@ -410,7 +410,7 @@
                 >
                   
       <div
-         style="font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;font-weight:400;line-height:1.4;text-align:left;color:#000000;"
+         style="font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;font-weight:400;line-height:1.4;text-align:left;color:#252526;"
       ><span style="font-weight:600;">Collaborate across teams</span><br /><span>Share boards with anyone, invite guests, and keep every stakeholder in the loop without extra tools.</span></div>
     
                 </td>
@@ -532,7 +532,7 @@
                 >
                   
       <div
-         style="font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;font-weight:400;line-height:1.4;text-align:left;color:#000000;"
+         style="font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;font-weight:400;line-height:1.4;text-align:left;color:#252526;"
       ><span style="font-weight:600;">Automate the repetitive stuff</span><br /><span>Build no-code workflows that move items, send alerts, and update fields the moment conditions are met.</span></div>
     
                 </td>
@@ -654,7 +654,7 @@
                 >
                   
       <div
-         style="font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;font-weight:400;line-height:1.4;text-align:left;color:#000000;"
+         style="font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;font-weight:400;line-height:1.4;text-align:left;color:#252526;"
       ><span style="font-weight:600;">Get full visibility in real time</span><br /><span>Dashboards and live reports surface blockers and progress instantly, so you can act before things stall.</span></div>
     
                 </td>