@clay-design-system/email 0.2.0 → 0.2.1

package/dist/emails/component-text-h1.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/component-text-h2.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/component-text-h3.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/component-text-h4.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/component-text-h5.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/component-text-p2.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/component-text-p3.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
@@ -182,7 +182,7 @@
               >
                 <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><![endif]-->
                   
-      <!-- text-p3 — caption/helper text (14px/400, left, muted #7c7b7b). Use for footnotes, helper copy.
+      <!-- text-p3 — caption/helper text (14px/400, left, muted #45454a). Use for footnotes, helper copy.
      For eyebrow use (above a heading), see text-overline-heading.
      Mobile: H-padding → 24px (email-mobile-px-24). -->
           <!--[if mso | IE]><tr><td class="email-mobile-px-24-outlook" width="640px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="email-mobile-px-24-outlook" role="presentation" style="width:640px;" width="640" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
@@ -215,7 +215,7 @@
                 >
                   
       <div
-         style="font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:14px;font-weight:400;line-height:1.5;text-align:left;color:#7c7b7b;"
+         style="font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:14px;font-weight:400;line-height:1.5;text-align:left;color:#45454a;"
       >Most teams lose time and clarity jumping between apps just to get work done. With monday work management, you can connect the tools you already use — into one collaborative workspace.</div>
     
                 </td>

package/dist/emails/component-text-p4.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
@@ -182,7 +182,7 @@
               >
                 <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><![endif]-->
                   
-      <!-- text-p4 — fine print / legal / micro copy (12px/400, left, muted #7c7b7b).
+      <!-- text-p4 — fine print / legal / micro copy (12px/400, left, muted #45454a).
      For text inside a warm beige card, see text-quote-card.
      Mobile: H-padding → 24px (email-mobile-px-24). -->
           <!--[if mso | IE]><tr><td class="email-mobile-px-24-outlook" width="640px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="email-mobile-px-24-outlook" role="presentation" style="width:640px;" width="640" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
@@ -215,7 +215,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;"
       >Most teams lose time and clarity jumping between apps just to get work done. With monday work management, you can connect the tools you already use — into one collaborative workspace.</div>
     
                 </td>

package/dist/emails/container.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
@@ -211,7 +211,7 @@
                 >
                   
       <div
-         style="font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;font-weight:400;line-height:1.4;text-align:center;color:#7c7b7b;"
+         style="font-family:Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;font-weight:400;line-height:1.4;text-align:center;color:#45454a;"
       >Empty email container — content sections slot in here.</div>
     
                 </td>

package/dist/emails/section-changelog-icon-list.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