@clay-design-system/email 0.2.0 → 0.2.1

package/dist/emails/section-logo-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-newsletter-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
@@ -296,7 +296,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:#00BA5F;color:#ffffff;font-size:12px;font-weight:400;line-height:1.5;padding:4px 16px;border-radius:4px;text-decoration:none;mso-padding-alt:4px 16px;">JULY 2026</a></div>
     
                 </td>

package/dist/emails/section-product-ui-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

package/dist/emails/section-promo-banner.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-qa-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-resource-link-list.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-signoff.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-single-column-author.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

package/dist/emails/section-single-column-feature-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-single-column-product-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
@@ -331,7 +331,7 @@
           
               <tr>
                 <td
-                   align="center" class="email-btn-full" style="font-size:0px;padding:0;word-break:break-word;"
+                   align="center" class="email-btn-full email-btn-invert-dark" style="font-size:0px;padding:0;word-break:break-word;"
                 >
                   
       <table

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