@clay-design-system/email 0.2.0 → 0.2.2

package/dist/emails/section-divider-line.html

@@ -54,8 +54,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) {
@@ -65,7 +65,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; }
@@ -74,8 +74,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.
@@ -86,7 +86,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; }
@@ -114,10 +114,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
@@ -213,10 +213,10 @@
     
     <!-- divider-line — 1px horizontal rule, 560px wide, 12px V / 40px H padding. -->
       
-      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="email-mobile-px-24-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]-->
+      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="email-card-outlook email-mobile-px-24-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  class="email-mobile-px-24" style="background:#ffffff;background-color:#ffffff;margin:0px auto;max-width:640px;">
+      <div  class="email-card email-mobile-px-24" 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-feature-highlight-reversed.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-feature-highlight.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-feature-rows.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-feature-story-row-reversed.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
@@ -287,7 +287,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:#E5FF00;color:#000000;font-size:10px;font-weight:400;line-height:1.4;padding:3px 10px;border-radius:4px;text-decoration:none;">Bring your own agent</a></div>
     
                 </td>
@@ -319,7 +319,7 @@
             <!-- Black pill CTA button — matches source email: #000 bg, white text, 14px, no-bold, 9999px radius. -->
               <tr>
                 <td
-                   align="left" style="font-size:0px;padding:16px 0 0;word-break:break-word;"
+                   align="left" class="email-btn-invert-dark" style="font-size:0px;padding:16px 0 0;word-break:break-word;"
                 >
                   
       <table

package/dist/emails/section-feature-story-row.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
@@ -235,7 +235,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:#E5FF00;color:#000000;font-size:10px;font-weight:400;line-height:1.4;padding:3px 10px;border-radius:4px;text-decoration:none;">AI connectors</a></div>
     
                 </td>
@@ -267,7 +267,7 @@
             <!-- Black pill CTA button — matches source email: #000 bg, white text, 14px, no-bold, 9999px radius. -->
               <tr>
                 <td
-                   align="left" style="font-size:0px;padding:16px 0 0;word-break:break-word;"
+                   align="left" class="email-btn-invert-dark" style="font-size:0px;padding:16px 0 0;word-break:break-word;"
                 >
                   
       <table

package/dist/emails/section-footer-lifecycle.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-footer-two-column-minimal.html

@@ -64,8 +64,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) {
@@ -75,7 +75,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; }
@@ -84,8 +84,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.
@@ -96,7 +96,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; }
@@ -124,10 +124,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
@@ -231,7 +231,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;"
       ><a href="%%UNSUBSCRIBE_URL%%" style="color:#000000; text-decoration:underline;">Unsubscribe</a></div>
     
                 </td>
@@ -271,7 +271,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;"
       ><a href="https://monday.com" style="color:#000000; text-decoration:underline;">View in the browser</a></div>
     
                 </td>

package/dist/emails/section-footer.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
@@ -232,7 +232,7 @@
                 <td  style="font-size:0;height:24px;vertical-align:middle;width:24px;">
                   <a  href="https://www.facebook.com/mondaydotcom" target="_blank">
                     <img
-                       alt="" src="https://www.mailjet.com/images/theme/v1/icons/ico-social/facebook.png" style="border-radius:3px;display:block;" width="24"
+                       alt="monday.com on Facebook" src="https://www.mailjet.com/images/theme/v1/icons/ico-social/facebook.png" style="border-radius:3px;display:block;" width="24"
                     />
                   </a>
                 </td>
@@ -266,7 +266,7 @@
                 <td  style="font-size:0;height:24px;vertical-align:middle;width:24px;">
                   <a  href="https://www.linkedin.com/company/monday-com" target="_blank">
                     <img
-                       alt="" src="https://www.mailjet.com/images/theme/v1/icons/ico-social/linkedin.png" style="border-radius:3px;display:block;" width="24"
+                       alt="monday.com on LinkedIn" src="https://www.mailjet.com/images/theme/v1/icons/ico-social/linkedin.png" style="border-radius:3px;display:block;" width="24"
                     />
                   </a>
                 </td>
@@ -300,7 +300,7 @@
                 <td  style="font-size:0;height:24px;vertical-align:middle;width:24px;">
                   <a  href="https://x.com/mondaydotcom" target="_blank">
                     <img
-                       alt="" src="https://www.mailjet.com/images/theme/v1/icons/ico-social/twitter.png" style="border-radius:3px;display:block;" width="24"
+                       alt="monday.com on X" src="https://www.mailjet.com/images/theme/v1/icons/ico-social/twitter.png" style="border-radius:3px;display:block;" width="24"
                     />
                   </a>
                 </td>
@@ -334,7 +334,7 @@
                 <td  style="font-size:0;height:24px;vertical-align:middle;width:24px;">
                   <a  href="https://www.instagram.com/mondaydotcom" target="_blank">
                     <img
-                       alt="" src="https://www.mailjet.com/images/theme/v1/icons/ico-social/instagram.png" style="border-radius:3px;display:block;" width="24"
+                       alt="monday.com on Instagram" src="https://www.mailjet.com/images/theme/v1/icons/ico-social/instagram.png" style="border-radius:3px;display:block;" width="24"
                     />
                   </a>
                 </td>
@@ -373,9 +373,9 @@
                 >
                   
       <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;"
       >You're receiving this email because you signed up for monday.com.<br />
-      <a href="%%UNSUBSCRIBE_URL%%" style="color:#7c7b7b; text-decoration:underline;">Unsubscribe</a></div>
+      <a href="%%UNSUBSCRIBE_URL%%" style="color:#45454a; text-decoration:underline;">Unsubscribe</a></div>
     
                 </td>
               </tr>