Website: Fix browser compatibility issues (#12658)

Closes: #12626

Changes:
- Fixed the pricing features table border on Safari
- Fixed the titles of articles overflowing from article cards on mobile
Safari
- fixed the alignment of headings on the homepage
- Fixed the text color of the CTAs on the state of device management
report.

website/assets/styles/pages/articles/articles.less

@@ -188,7 +188,7 @@
       margin-left: -10px;
       margin-right: -10px;
       [purpose='article-card'] {
-        flex: 1 1 350px;
+        flex: 1 1 auto;
         max-width: 100%;
       }
     }

website/assets/styles/pages/pricing.less

@@ -314,6 +314,7 @@
     tbody {
       color: #515774;
       border-radius: 8px;
+      outline: 1px solid #E2E4EA;
       box-shadow: 0 0 0 1px #E2E4EA;
       td {
         padding: 12px 24px;

website/assets/styles/pages/reports/state-of-device-management.less

@@ -133,6 +133,7 @@
         color: #FFF;
         margin-bottom: 24px;
         h3 {
+          color: #FFF;
           font-weight: 900;
           font-size: 28px;
           line-height: 40px;
@@ -161,6 +162,7 @@
         color: #FFF;
         margin-bottom: 40px;
         h3 {
+          color: #FFF;
           font-weight: 900;
           font-size: 32px;
           line-height: 40px;

website/views/pages/homepage.ejs

@@ -181,7 +181,7 @@
 
     <div purpose="three-column-features" class="mx-auto">
 
-      <div purpose="feature-row" class="d-flex flex-sm-row flex-column align-items-center justify-content-center">
+      <div purpose="feature-row" class="d-flex flex-sm-row flex-column align-items-start justify-content-center">
         <div purpose="feature" class="ml-sm-0">
           <img alt="transparency" src="/images/[email protected]" class="mx-auto mx-sm-0">
           <h5>Transparency: user-first</h5>