diff --git a/website/assets/images/icon-play-video-32x32@2x.png b/website/assets/images/icon-play-video-32x32@2x.png
index 98d0f34a04..42cee53ee0 100644
Binary files a/website/assets/images/icon-play-video-32x32@2x.png and b/website/assets/images/icon-play-video-32x32@2x.png differ
diff --git a/website/assets/js/pages/homepage.page.js b/website/assets/js/pages/homepage.page.js
index 65097a30a1..e945364e39 100644
--- a/website/assets/js/pages/homepage.page.js
+++ b/website/assets/js/pages/homepage.page.js
@@ -19,8 +19,10 @@ parasails.registerPage('homepage', {
     cloudError: '',
     cloudSuccess: false,
 
+    comparisonTableMode: 'it',
     // For MDM comparison table
-    comparisonMode: 'sccm',
+    comparisonModeForIt: 'sccm',
+    comparisonModeForSecurity: 'rapid',
     comparisonModeFriendlyNames: {
       jamf: 'Jamf Pro',
       sccm: 'SCCM',
@@ -29,7 +31,11 @@ parasails.registerPage('homepage', {
       tanium: 'Tanium',
       ansible: 'Ansible',
       puppet: 'Puppet',
-      chef: 'Chef'
+      chef: 'Chef',
+      rapid: 'Rapid 7',
+      crowdstrike: 'Crowdstrike',
+      qualys: 'Qualys',
+      tenable: 'Tenable',
     }
   },
 
@@ -108,7 +114,15 @@ parasails.registerPage('homepage', {
     clickOpenVideoModal: function(modalName) {
       this.modal = modalName;
     },
-
+    clickSwitchComparisonMode: async function(mode) {
+      this.comparisonTableMode = mode;
+      await setTimeout(()=>{
+        $('[data-toggle="tooltip"]').tooltip({
+          container: '#homepage',
+          trigger: 'hover',
+        });
+      }, 250);
+    },
     closeModal: function() {
       this.modal = undefined;
     },
diff --git a/website/assets/styles/bootstrap-overrides.less b/website/assets/styles/bootstrap-overrides.less
index 0d49c3369a..550e6b3f52 100644
--- a/website/assets/styles/bootstrap-overrides.less
+++ b/website/assets/styles/bootstrap-overrides.less
@@ -56,7 +56,7 @@ b, strong, .font-weight-bold {
   color: @core-fleet-black;
 }
 
-a[href] {
+a[href]:not([no-underline]) {
   color: @core-fleet-black-75;
   text-decoration: underline;
   text-underline-offset: 4px;
@@ -67,6 +67,9 @@ a[href] {
     text-decoration-color: @core-fleet-black;;
   }
 }
+a:hover {
+  text-decoration: none;
+}
 a[target='_blank']:not([no-icon]) {
   &::after {
     content: ' ';
diff --git a/website/assets/styles/pages/homepage.less b/website/assets/styles/pages/homepage.less
index 7ef0756758..d585ce842f 100644
--- a/website/assets/styles/pages/homepage.less
+++ b/website/assets/styles/pages/homepage.less
@@ -14,13 +14,12 @@
     font-weight: 800;
     font-size: 32px;
     line-height: 120%;
-    margin-bottom: 24px;
+    margin-bottom: 16px;
   }
 
   h4 {
     text-transform: uppercase;
     font-family: 'Roboto Mono';
-    font-style: normal;
     font-weight: 400;
     font-size: 14px;
     line-height: 120%;
@@ -35,6 +34,26 @@
     line-height: 150%;
   }
 
+  [purpose='announcement-banner'] {
+    br {
+      display: none;
+    }
+    display: flex;
+    width: 100%;
+    padding: 12px 8px;
+    justify-content: center;
+    align-items: center;
+    background: #0587FF;
+    color: var(--color-brand-white, #FFF);
+    font-family: Inter;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: normal;
+    [parasails-component='animated-arrow-button'] {
+      padding: 0;
+    }
+  }
   [purpose='hero-container'] {
     background: #FFFFFF;
     overflow: hidden;
@@ -42,17 +61,18 @@
 
   [purpose='hero-background-image'] {
     background: url('/images/homepage-hero-2500x420@2x.png');
-    background-size: auto 100%;
-    background-position: center;
+    background-size: auto 433px;
     background-repeat: no-repeat;
+    background-position-x: calc(~'100% + -56%');
+    background-position-y: top;
   }
 
   [purpose='homepage-hero'] {
-    padding-top: 80px;
-    padding-left: 32px;
-    padding-bottom: 82px;
+    padding-top: 120px;
+    padding-left: 64px;
+    padding-bottom: 120px;
     max-width: 1200px;
-    height: 420px;
+    height: 498px;
   }
   [purpose='ticker-container'] {
     overflow: hidden;
@@ -87,15 +107,6 @@
     h1 {
       max-width: 640px;
       margin-bottom: 16px;
-      &.vm {
-        max-width: 420px;
-      }
-      &.eo-it {
-        max-width: 420px;
-      }
-      &.eo-security {
-        max-width: 438px;
-      }
     }
     p {
       max-width: 412px;
@@ -103,457 +114,11 @@
       font-size: 16px;
     }
     [purpose='button-row'] {
-      dispaly: flex;
-      flex-direction: row;
-    }
-  }
-
-  [purpose='hero-logos'] {
-    max-width: 1200px;
-    padding-left: 60px;
-    padding-right: 60px;
-    [parasails-component='logo-carousel'] {
-      margin-bottom: 32px;
-    }
-  }
-  [purpose='statistics'] {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    margin-top: 64px;
-    margin-bottom: 64px;
-    h4 {
-      color: #515774;
-      text-align: center;
-
-      text-transform: unset;
-      font-family: Inter;
-      font-size: 18px;
-      font-style: normal;
-      font-weight: 700;
-      line-height: 27px;
-    }
-    p {
-      color: var(--text-text-primary, #515774);
-      text-align: center;
-      text-wrap: nowrap;
-
-      /* Body XS (FKA p small) */
-      font-family: Inter;
-      font-size: 12px;
-      font-style: normal;
-      font-weight: 400;
-      line-height: 18px; /* 150% */
-      margin-bottom: 0px;
-    }
-    // div {
-    //   display: flex;
-    //   padding: 8px 64px;
-    //   flex-direction: column;
-    //   align-items: center;
-    // }
-    [purpose='statistics-column'] {
       display: flex;
       flex-direction: row;
     }
-    [purpose='customers'] {
-      border-right: 1px solid #E2E4EA;
-      display: flex;
-      padding: 8px 48px;
-      flex-direction: column;
-      align-items: center;
-    }
-    [purpose='devices'] {
-      border-right: 1px solid #E2E4EA;
-      display: flex;
-      padding: 8px 48px;
-      flex-direction: column;
-      align-items: center;
-    }
-    [purpose='countries'] {
-      display: flex;
-      padding: 8px 48px;
-      flex-direction: column;
-      align-items: center;
-      border-right: 1px solid #E2E4EA;
-    }
-    [purpose='response-time'] {
-      display: flex;
-      padding: 8px 48px;
-      flex-direction: column;
-      align-items: center;
-    }
-
   }
 
-
-  [purpose='homepage-content'] {
-    max-width: 1200px;
-    padding-left: 0px;
-    padding-right: 0px;
-  }
-  [purpose='page-section'] {
-    margin-bottom: 120px;
-    max-width: 960px;
-    margin-left: auto;
-    margin-right: auto;
-  }
-
-  [purpose='calendar-feature'] {
-    margin-bottom: 120px; /*increased while testimonial videos are temporarily hidden.*/
-    h3 {
-      margin-bottom: 24px;
-      font-weight: 800;
-      font-size: 32px;
-      line-height: 120%;
-    }
-    [purpose='calendar-feature-text'] {
-      max-width: 480px;
-    }
-    [purpose='new-badge'] {
-      background-color: #0587FF;
-      padding: 4px 8px 3px 8px;
-      display: flex;
-      align-items: center;
-      border-radius: 14px;
-      color: #FFF;
-      font-size: 12px;
-      font-weight: 500;
-      line-height: 18px;
-      text-transform: uppercase;
-      margin-bottom: 12px;
-      width: min-content;
-    }
-    [purpose='calendar-checklist'] {
-      margin-top: 8px;
-      margin-bottom: 24px;
-      p {
-        font-size: 14px;
-        font-style: normal;
-        font-weight: 400;
-        line-height: 21px;
-        padding-left: 37px;
-        text-indent: -37px;
-        margin-bottom: 1.5rem;
-        &:last-of-type {
-          margin-bottom: 0px;
-        }
-      }
-      p::before {
-        content: ' ';
-        background-image: url('/images/icon-checkmark-green-20x20@2x.png');
-        background-size: 20px 20px;
-        display: inline-block;
-        position: relative;
-        top: 5px;
-        margin-right: 16px;
-        width: 20px;
-        height: 20px;
-      }
-    }
-    [purpose='feature-video'] {
-      margin-left: 80px;
-      max-width: 468px;
-      video {
-        max-width: 100%;
-        max-height: 100%;
-        border-radius: 16px;
-      }
-    }
-    [purpose='video-button'] {
-      margin-top: 16px;
-      cursor: pointer;
-      img {
-        height: 32px;
-        margin-right: 8px;
-      }
-      font-size: 14px;
-      font-weight: 700;
-      line-height: 21px;
-    }
-  }
-
-
-
-
-  [purpose='testimonials'] {
-    margin-bottom: 80px;
-  }
-  [purpose='testimonial'] {
-    border-radius: 16px;
-    border: 1px solid #E2E4EA;
-    background: #FFF;
-    cursor: pointer;
-    max-width: 550px;
-    padding: 24px;
-    flex-direction: row;
-    box-shadow: none;
-    [purpose='testimonial-text'] {
-      display: flex;
-      justify-content: center;
-      flex-direction: column;
-      margin-left: 24px;
-      p {
-        font-size: 12px;
-        font-style: normal;
-        font-weight: 400;
-      }
-      [purpose='testimonial-quote'] {
-        font-size: 14px;
-        font-style: italic;
-        color: #515774;
-      }
-    }
-    [purpose='testimonial-video'] {
-      min-width: 160px;
-      height: 120px;
-      margin-left: ;
-      border-radius: 8px;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      margin-bottom: 0px;
-      img {
-        height: 48px;
-        width: auto;
-      }
-    }
-    &:hover {
-      box-shadow: 0px 4px 16px 0px #E2E4EA;
-    }
-    &.nick-fohs {
-      [purpose='testimonial-video'] {
-        background: url('/images/video-testimonial-thumbnail-nick-fohs-160x120@2x.png');
-        background-position: center;
-        background-size: cover;
-      }
-      margin-right: 20px;
-      margin-left: 0px;
-    }
-    &.austin-anderson {
-      [purpose='testimonial-video'] {
-        background: url('/images/video-testimonial-thumbnail-austin-anderson-160x120@2x.png');
-        background-position: center;
-        background-size: cover;
-      }
-      margin-right: 0px;
-      margin-left: 20px;
-    }
-  }
-
-  [purpose='calendar-section'] {
-    padding: 40px 64px;
-    margin-bottom: 40px;
-    max-width: 1200px;
-    margin-left: auto;
-    margin-right: auto;
-  }
-  [purpose='calendar-card-body'] {
-    max-width: 720px;
-    padding-top: 60px;
-    padding-bottom: 24px;
-    text-align: center;
-    p {
-      text-align: center;
-      max-width: 720px;
-      margin-bottom: 24px;
-    }
-  }
-  [purpose='calendar-card'] {
-    border-radius: 24px;
-    border: 1px solid #E2E4EA;
-    background: linear-gradient(165deg, #F9FDFE 10.56%, #FFF 33.43%);
-    overflow: hidden;
-  }
-  [purpose='coming-soon-badge'] {
-    background-color: #0587FF;
-    padding: 4px 8px 3px 8px;
-    display: flex;
-    align-items: center;
-    border-radius: 14px;
-    color: #FFF;
-    font-size: 12px;
-    font-weight: 500;
-    line-height: 18px;
-    text-transform: uppercase;
-    margin-bottom: 8px;
-  }
-  [purpose='calendar-image'] {
-    margin-top: 24px;
-    height: 420px;
-    overflow-x: hidden;
-    img {
-      height: 100%;
-      width: auto;
-    }
-  }
-
-  [purpose='homepage-text-block'] {
-    margin-top: 80px;
-    margin-bottom: 80px;
-    max-width: 642px;
-    h2 {
-      font-weight: 800;
-      font-size: 32px;
-      margin-bottom: 24px;
-    }
-    p {
-      font-weight: 400;
-      font-size: 16px;
-    }
-  }
-  [purpose='platform-block'] {
-    margin-bottom: 120px;
-    max-width: 1080px;
-  }
-  [purpose='platform-block'].visible {
-    animation: fadeIn 0.3s forwards;
-  }
-  [purpose='category-switch'] {
-    width: 831px;
-    cursor: pointer;
-    border: 1px solid #E2E4EA;
-    border-radius: 28px;
-    background: @ui-off-white;
-    position: relative;
-    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.10) inset;
-    margin-bottom: 64px;
-    margin-top: 64px;
-    color: @core-fleet-black;
-    [purpose='category-tier-switch'] {
-      position: absolute;
-      top: 0px;
-      left: -1px;
-      background: #fff;
-      border: 1px solid #E2E4EA;
-      border-radius: 28px;
-      height: 100%;
-      min-width: 140px;
-      z-index: 1;
-      transition: 0.3s all;
-      width: 277px;
-    }
-    [purpose='category-switch-option'] {
-      padding: 16px 40px;
-      text-align: center;
-      cursor: pointer;
-      z-index: 3;
-      user-select: none;
-      white-space: nowrap;
-      width: 277px;
-    }
-    .selected {
-      font-weight: 700;
-    }
-    .it-selected {
-      transform: translateX(200%);
-    }
-    .software-management-selected {
-      transform: translateX(100%);
-    }
-  }
-  @keyframes fadeIn {
-    from { opacity: 0; }
-    to { opacity: 1; }
-  }
-
-  [purpose='category-text-block'] {
-    max-width: 468px;
-    strong {
-      font-family: Inter;
-      font-size: 16px;
-      font-weight: 800;
-      line-height: 1.2;
-      margin-bottom: 8px;
-    }
-    p {
-      margin-bottom: 40px;
-      font-size: 14px;
-      line-height: 1.5;
-    }
-    &.personalized {
-      p {
-        font-size: 16px;
-      }
-    }
-    [purpose='category-button'] {
-      width: min-content;
-      height: 48px;
-      display: flex;
-      flex-direction: row;
-      justify-content: center;
-      align-items: center;
-      text-decoration: none;
-      font-size: 16px;
-      font-style: normal;
-      font-weight: 700;
-      line-height: 21px;
-      color: #FFF;
-      padding: 16px 32px;
-    }
-  }
-  [purpose='endpoint-ops-image'] {
-    max-width: 380px;
-    img {
-      display: flex;
-      width: 380px;
-      height: 380px;
-      padding: 20px;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      flex-shrink: 0;
-    }
-  }
-  [purpose='device-management-image'] {
-    max-width: 380px;
-    img {
-      display: flex;
-      width: 380px;
-      height: 380px;
-      padding: 50px 10px;
-      justify-content: center;
-      align-items: center;
-      flex-shrink: 0;
-    }
-  }
-  [purpose='vuln-management-image'] {
-    max-width: 380px;
-    img {
-      display: flex;
-      width: 380px;
-      height: 380px;
-      justify-content: center;
-      align-items: center;
-      flex-shrink: 0;
-    }
-  }
-  [purpose='category-button'] {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: flex-start;
-    a {
-      width: auto;
-      color: #FFF;
-      font-size: 16px;
-      font-weight: 700;
-      line-height: 21px;
-      display: flex;
-      height: 48px;
-      padding: 16px 32px;
-      justify-content: center;
-      align-items: center;
-      border-radius: 8px;
-      white-space: nowrap;
-    }
-  }
-
-
-  [purpose='bottom-gradient'] {
-    background: linear-gradient(180deg, #FFFFFF 0%, #E9F4F4 100%);
-  }
   [purpose='button-row'] {
     display: flex;
     flex-direction: row;
@@ -596,39 +161,301 @@
       width: 110%;
     }
   }
-  [purpose='three-column-features'] {
-    margin-bottom: 160px;
-    max-width: 1080px;
-    [purpose='feature-row'] {
-      [purpose='feature'] {
-        max-width: 320px;
-        p {
-          font-size: 14px;
-        }
-      }
+
+  [purpose='hero-logos'] {
+    max-width: 1200px;
+    padding-left: 60px;
+    padding-right: 60px;
+    margin-top: 24px;
+    margin-bottom: 120px;
+    [parasails-component='logo-carousel'] {
+      margin-bottom: 0px;
     }
   }
 
-  [purpose='feature'] {
-    margin-left: 30px;
-    margin-right: 30px;
-    img {
-      height: 64px;
-      width: auto;
-      margin-bottom: 16px;
-    }
-    h5 {
-      font-weight: 800;
-      font-size: 18px;
-      line-height: 27px;
-      margin-bottom: 16px;
+  [purpose='homepage-content'] {
+    max-width: 1200px;
+    padding-left: 0px;
+    padding-right: 0px;
+  }
+  [purpose='page-section'] {
+    margin-bottom: 120px;
+    max-width: 1072px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  [purpose='feature-video'] {
+    margin-left: 80px;
+    max-width: 468px;
+    video {
+      max-width: 100%;
+      max-height: 100%;
+      border-radius: 16px;
     }
   }
+  [purpose='video-button'] {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    cursor: pointer;
+    color: #192147;
+    img {
+      height: 32px;
+      margin-right: 8px;
+    }
+    span {
+      margin-left: 4px;
+      display: inline-block;
+      color: #8B8FA2;
+      font-size: 12px;
+      margin-top: 2px;
+      font-weight: 400;
+    }
+  }
+
+
+  [purpose='homepage-text-block'] {
+    margin-top: 80px;
+    margin-bottom: 80px;
+    max-width: 663px;
+    h2 {
+      font-weight: 800;
+      font-size: 32px;
+      margin-bottom: 16px;
+    }
+    p {
+      font-weight: 400;
+      font-size: 16px;
+    }
+  }
+
+  [purpose='feature-cards'] {
+    display: flex;
+    margin-bottom: 144px;
+  }
+  [purpose='feature-card-row'] {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin-bottom: 24px;
+    margin-right: -16px;
+    flex-wrap: wrap;
+    // gap: 16px;
+  }
+  [purpose='feature-card'] {
+    max-width: 346px;
+    padding: 24px;
+    border-radius: 8px;
+    border: 1px solid #E2E4EA;
+    background: #FFF;
+    text-decoration: none;
+    margin-left: 16px;
+    margin-right: 0px;
+    box-shadow: none;
+    margin-bottom: 24px;
+    flex: 1 0 30%;
+
+    &:nth-of-type(3n) {
+      margin-right: 0px;
+    }
+    &:hover {
+      box-shadow: 0px 0px 0px 2px rgba(0, 0, 0, 0.03);
+    }
+    h5 {
+      color: #192147;
+      font-family: Inter;
+      font-size: 16px;
+      font-weight: 800;
+      line-height: 19.2px;
+      margin-bottom: 8px;
+      span {
+        color: #8B8FA2;
+        text-align: center;
+        margin-left: 8.5px;
+        font-family: Inter;
+        font-size: 12px;
+        font-weight: 400;
+        line-height: 18px;
+      }
+    }
+    p {
+      color: #515774;
+      text-decoration: none;
+      font-family: Inter;
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 20px;
+      margin-bottom: 0px;
+    }
+
+
+  }
+
+
+
+  [purpose='feature-with-image'] {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 128px;
+    [purpose='feature-image'] {
+      img {
+        width: 578px;
+        border-radius: 16px;
+      }
+      video {
+        width: 578px;
+        border-radius: 16px;
+      }
+      margin-right: 64px;
+    }
+    [purpose='feature-text'] {
+      [purpose='feature-block'] {
+        margin-bottom: 48px;
+      }
+      padding: 48px 0px;
+      h5 {
+        color: #192147;
+        font-size: 16px;
+        font-weight: 800;
+        line-height: 19.2px;
+        margin-bottom: 10px;
+      }
+      p {
+        color: #515774;
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 20px;
+        margin-bottom: 0px;
+      }
+      p::last-child {
+        margin-bottom: 0px;
+      }
+    }
+
+
+  }
+
+  [purpose='statistics'] {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    margin-top: 48px;
+    margin-bottom: 48px;
+    h4 {
+      color: #515774;
+      text-align: center;
+      text-transform: unset;
+      font-family: Inter;
+      font-size: 18px;
+      font-weight: 700;
+      line-height: 27px;
+    }
+    p {
+      color: #515774;
+      text-align: center;
+      text-wrap: nowrap;
+      font-size: 12px;
+      font-weight: 400;
+      line-height: 18px;
+      margin-bottom: 0px;
+    }
+    [purpose='statistics-column'] {
+      display: flex;
+      flex-direction: row;
+    }
+    [purpose='customers'] {
+      border-right: 1px solid #E2E4EA;
+      display: flex;
+      padding: 8px 48px;
+      flex-direction: column;
+      align-items: center;
+    }
+    [purpose='devices'] {
+      border-right: 1px solid #E2E4EA;
+      display: flex;
+      padding: 8px 48px;
+      flex-direction: column;
+      align-items: center;
+    }
+    [purpose='countries'] {
+      display: flex;
+      padding: 8px 48px;
+      flex-direction: column;
+      align-items: center;
+      border-right: 1px solid #E2E4EA;
+    }
+    [purpose='response-time'] {
+      display: flex;
+      padding: 8px 48px;
+      flex-direction: column;
+      align-items: center;
+    }
+  }
+
+  [purpose='quote'] {
+    max-width: 580px;
+    margin-left: auto;
+    margin-right: auto;
+    padding-bottom: 80px;
+    padding-top: 32px;
+    text-align: center;
+  }
+  [purpose='quote-logo'] {
+    height: 32px;
+    // margin-bottom: 16px;
+    margin-left: auto;
+    margin-right: auto;
+
+  }
+  [purpose='quote-text'] {
+    color: @core-fleet-black-75;
+    text-align: center;
+    font-size: 18px;
+    font-style: italic;
+    font-weight: 400;
+    line-height: 150%;
+    margin-bottom: 0px;
+    padding: 24px 0px;
+  }
+  [purpose='quote-attribution'] {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    [purpose='quote-author-image'] {
+      height: 48px;
+      margin-bottom: 16px;
+      border-radius: 50%;
+    }
+    [purpose='name'] {
+      color: @core-fleet-black-75;
+      text-align: center;
+      font-size: 12px;
+      font-weight: 700;
+      line-height: 150%;
+      margin-bottom: 0px;
+    }
+    [purpose='job-title'] {
+      color: @core-fleet-black-75;
+      margin-bottom: 0px;
+      font-size: 12px;
+      font-weight: 400;
+      line-height: 150%;
+    }
+  }
+
+
+
+
+
+
 
   [purpose='comparison-section'] {
 
-    margin-bottom: 64px;
-    margin-top: 64px;
+    padding-bottom: 80px;
+    padding-top: 80px;
     [purpose='button-row'] {
       [purpose='cta-button'] {
         padding: 16px 32px;
@@ -636,9 +463,46 @@
       }
     }
   }
+
+  [purpose='comparison-table-switch'] {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    border-bottom: 1px solid #E2E4EA;
+    margin-top: 64px;
+    [purpose='comparison-table-switch-option'] {
+      cursor: pointer;
+      color: #192147;
+      width: 50%;
+      display: flex;
+      padding: 16px 40px 24px 40px;
+      justify-content: center;
+      align-items: center;
+      // white-space: nowrap;
+      text-align: center;
+      &.selected {
+        font-weight: 700;
+
+        padding: 16px 40px 23px 40px;
+        border-bottom: 2px solid #192147;
+      }
+    }
+  }
+  [purpose='tooltip'] {
+    color: #515774;
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 18px;
+    text-decoration-line: underline;
+    text-decoration-style: solid;
+    text-decoration-skip-ink: auto;
+    text-decoration-thickness: auto;
+    text-underline-offset: auto;
+    text-underline-position: from-font;
+  }
   // Desktop features comparison table styles
   [purpose='desktop-comparison-table'] {
-    margin-top: 32px;
+    margin-top: 16px;
   }
   [purpose='comparison-table-header'] {
     font-size: 16px;
@@ -686,6 +550,7 @@
     p {
       font-size: 12px;
       margin-bottom: 0px;
+      white-space: nowrap;
     }
   }
   [purpose='fleet-column'] {
@@ -722,7 +587,7 @@
   [purpose='comparison-table'] {
     border-radius: 8px;
     border: 1px solid #E2E4EA;
-    margin-bottom: 48px;
+    margin-bottom: 64px;
     [purpose='table-row'] {
       [purpose='red-x'] {
         height: 12px;
@@ -817,6 +682,7 @@
         font-weight: 700;
         line-height: 21px;
         color: #192147;
+        white-space: nowrap;
       }
       img {
         height: 16px;
@@ -859,140 +725,48 @@
     }
   }
 
-  [purpose='integration-cards'] {
-    margin-top: 40px;
-    margin-bottom: 40px;
-    [purpose='integration-card-column'] {
-      &:first-of-type {
-        margin-right: 12px;
-        margin-left: auto;
-      }
-      &:last-of-type {
-        margin-left: 12px;
-        margin-right: auto;
-      }
-      a:first-child {
-        margin-right: 12px;
-      }
-      a:last-child {
-        margin-left: 12px;
+  [purpose='three-column-features'] {
+    margin-bottom: 180px;
+    max-width: 1072px;
+    [purpose='feature-row'] {
+      [purpose='feature'] {
+        max-width: 330px;
+        p {
+          font-size: 14px;
+        }
       }
     }
-    a {
-      display: flex;
-      text-decoration: none;
-    }
-
-    [purpose='integration-card'] {
-      &:hover {
-        box-shadow: 0px 4px 16px 0px #E2E4EA;
-      }
-      cursor: pointer;
-      width: 222px;
-      height: 180px;
-      display: flex;
-      padding: 24px 16px;
-      align-items: flex-start;
-      flex-direction: column;
-      border-radius: 8px;
-      border: 1px solid #E2E4EA;
-      background: #FFF;
+    [purpose='feature'] {
+      margin-left: 16px;
+      margin-right: 16px;
       img {
-        width: 32px;
-        height: 36px;
-        margin-bottom: 4px;
+        height: 64px;
+        width: auto;
+        margin-bottom: 24px;
       }
-      p {
-        font-size: 12px;
-        margin-bottom: 0px;
-      }
-      strong {
-        font-size: 14px;
-        line-height: 150%;
-        margin-bottom: 4px;
+      h5 {
+        font-weight: 800;
+        font-size: 16px;
+        line-height: 120%;
+        margin-bottom: 10px;
       }
     }
   }
 
-  [purpose='endpoints-banner'] {
-    display: flex;
-    max-width: 960px;
-    max-height: 340px;
-    padding: 0px 0px 0px 80px;
-    align-items: center;
-    justify-content: space-between;
-    align-self: stretch;
-    border-radius: 24px;
-    border: 2px solid #E2E4EA;
-    background: linear-gradient(97deg, #FFF 0%, #EDF7F9 100%);
-    overflow: hidden;
-    [purpose='endpoint-banner-text'] {
-      margin-top: 60px;
-      margin-bottom: 60px;
-      max-width: 400px;
-      width: 50%;
-      p {
-        margin-bottom: 24px;
-      }
-    }
-    [purpose='endpoints-images'] {
-      margin-left: 24px;
-      overflow: hidden;
-      max-width: 410px;
-      width: 50%;
-      position: relative;
-      top: 10px;
-      [purpose='endpoint-images-row'] {
-        display: flex;
-        flex-direction: row;
-        margin-bottom: 16px;
-        &:nth-of-type(odd) {
-          margin-left: 40px;
-        }
-      }
-      [purpose='endpoint-empty-image-box'] {
-        background: rgba(0, 0, 0, 0.01);
-        border: 1px dashed #C5C7D1;
-      }
-      [purpose='endpoint-image-box'] {
-        background: #FFF;
-        border: 1px solid #C5C7D1;
-      }
-      [purpose='endpoint-image-box'], [purpose='endpoint-empty-image-box'] {
-        display: flex;
-        width: 80px;
-        height: 80px;
-        padding: 16px 10px 7px 10px;
-        flex-direction: column;
-        justify-content: space-between;
-        align-items: center;
-        flex-shrink: 0;
-        border-radius: 12px;
-        margin-left: 8px;
-        margin-right: 8px;
-        img {
-          width: 36px;
-          height: 36px;
-        }
-        p {
-          margin-bottom: 0px;
-          font-size: 9px;
-          font-weight: 500;
-          line-height: 12px;
-        }
-      }
-    }
+
+  [purpose='bottom-gradient'] {
+    background: linear-gradient(180deg, #FFFFFF 0%, #E9F4F4 100%);
   }
 
   [purpose='bottom-cta'] {
-      h1 {
-        font-size: 48px;
-        max-width: 640px;
-        &.vm {
-          max-width: unset;
-        }
+    h1 {
+      font-size: 48px;
+      max-width: 640px;
+      &.vm {
+        max-width: unset;
       }
     }
+  }
   [purpose='newsletter-banner'] {
     width: 660px;
     margin-left: auto;
@@ -1006,8 +780,8 @@
     padding: 8px 8px 8px 16px;
     input {
       border-radius: 6px;
-      border: 1px solid var(--ui-fleet-blue-15, #E2E4EA);
-      background: var(--Core-White, #FFF);
+      border: 1px solid #E2E4EA;
+      background: #FFF;
       display: flex;
       width: 235px;
       padding: 8px 15px;
@@ -1037,12 +811,11 @@
       background: #FF5C83;
       height: 37px;
       width: 92px;
-      /* Body XS (bold) */
+
       font-family: Inter;
       font-size: 12px;
-      font-style: normal;
       font-weight: 700;
-      line-height: 18px; /* 150% */
+      line-height: 18px;
     }
     [purpose='newsletter-form-input']::placeholder {
       font-size: 14px;
@@ -1081,6 +854,7 @@
       }
     }
     iframe {
+      border-radius: 16px;
       width: 1140px;
       height: 641px;
     }
@@ -1107,8 +881,8 @@
 
     [purpose='homepage-content'] {
       max-width: 1200px;
-      padding-right: 60px;
-      padding-left: 60px;
+      padding-right: 64px;
+      padding-left: 64px;
     }
     [purpose='page-section'] {
       margin-bottom: 120px;
@@ -1151,23 +925,22 @@
     }
     [purpose='homepage-hero'] {
       max-width: 100%;
-      padding-top: 64px;
-      padding-right: 32px;
-
-      // padding-bottom: 380px;
+      padding-top: 80px;
+      padding-bottom: 80px;
+      height: 418px;
     }
     [purpose='hero-background-image'] {
       // background-size: auto 400px;
-      background-position: calc(~'100% + -56%') center;
+      background-position: calc(~'100% + -56%') top;
     }
 
     [purpose='homepage-content'] {
-      padding-right: 60px;
-      padding-left: 60px;
+      padding-right: 32px;
+      padding-left: 32px;
     }
     [purpose='hero-logos'] {
-      padding-left: 40px;
-      padding-right: 40px;
+      padding-left: 32px;
+      padding-right: 32px;
     }
     [purpose='page-section'] {
       margin-bottom: 120px;
@@ -1175,90 +948,58 @@
     [purpose='integrations-section'] {
       margin-top: 120px;
     }
-    [purpose='testimonial'] {
-      border-radius: 12px;
+    [purpose='homepage-text-block'] {
+      margin-bottom: 64px;
+      p {
+        max-width: 633px;
+      }
+    }
+    [purpose='feature-cards'] {
+      display: flex;
+      margin-bottom: 128px;
+    }
+    [purpose='feature-card'] {
+      max-width: unset;
+      padding: 24px;
+      border-radius: 8px;
       border: 1px solid #E2E4EA;
       background: #FFF;
-      cursor: pointer;
-      max-width: 100%;
-      &:first-of-type {
-        margin-right: 0px;
-        margin-left: 0px;
-        margin-bottom: 24px;
+      text-decoration: none;
+      margin-left: 16px;
+      // margin-right: 16px;
+      box-shadow: none;
+      margin-bottom: 24px;
+      flex: 1 0 40%;
+      &:nth-of-type(3n) {
+        margin-right: unset;
       }
-      &:last-of-type {
+      &:nth-of-type(2n) {
         margin-right: 0px;
-        margin-left: 0px;
-      }
-      [purpose='testimonial-text'] {
-        display: flex;
-        justify-content: center;
-        flex-direction: column;
       }
     }
 
-    [purpose='category-switch'] {
-      width: 687px;
-      [purpose='category-tier-switch'] {
-        width: 229px;
-      }
-      [purpose='category-switch-option'] {
-        width: 229px;
-        padding: 16px 24px;
-      }
-      .endpoint-ops-selected {
-        transform: translateX(100%);
-      }
-      .vulnerability-management-selected {
-        transform: translateX(200%);
-      }
-    }
-    [purpose='category-text-block'] {
-      max-width: 410px;
-    }
-    [purpose='platform-block'] {
-      .left {
-        margin-right: 24px;
-      }
-      .right {
-        margin-left: 24px;
-      }
-    }
-    [purpose='endpoint-ops-image'] {
-      img {
-        height: auto;
+    [purpose='feature-with-image'] {
+      [purpose='feature-image'] {
         width: 100%;
+        img {
+          width: 100%;
+          height: auto;
+          border-radius: 16px;
+        }
+        video {
+          width: 100%;
+          height: auto;
+          border-radius: 16px;
+        }
+        margin-right: 48px;
       }
-    }
-    [purpose='device-management-image'] {
-      img {
-        height: auto;
-        width: 100%;
-      }
-    }
-    [purpose='vuln-management-image'] {
-      img {
-        height: auto;
-        width: 100%;
-      }
-    }
-    [purpose='category-button'] {
-      width: 100%;
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      justify-content: center;
-      a {
-        color: #FFF;
-        font-size: 16px;
-        font-weight: 700;
-        line-height: 21px;
-        display: flex;
-        height: 48px;
-        padding: 16px 32px;
-        justify-content: center;
-        align-items: center;
-        border-radius: 8px;
+      [purpose='feature-text'] {
+        [purpose='feature-block'] {
+          &:last-of-type {
+            margin-right: 0px;
+          }
+        }
+
       }
     }
     [purpose='comparison-column'] {
@@ -1278,7 +1019,6 @@
         background: #FFF;
         border: 1px solid @core-vibrant-blue-15;
         cursor: pointer;
-
       }
       [purpose='comparison-selector-dropwdown'] {
         width: 152px;
@@ -1313,61 +1053,6 @@
       }
     }
 
-    [purpose='integration-cards'] {
-      [purpose='integration-card-column'] {
-        margin-left: 24px;
-        margin-right: 24px;
-        a:first-child {
-          margin-right: 0px;
-        }
-        a:last-child {
-          margin-left: 0px;
-        }
-      }
-      [purpose='integration-card'] {
-        width: 100%;
-        justify-content: center;
-        margin-left: 0px;
-        margin-right: 0px;
-        margin-bottom: 24px;
-      }
-    }
-
-
-    [purpose='endpoints-banner'] {
-      max-height: 282px;
-      padding-left: 40px;
-      [purpose='endpoint-banner-text'] {
-        margin-top: 40px;
-        margin-bottom: 40px;
-        h2 {
-          font-size: 24px;
-        }
-      }
-      [purpose='endpoints-images'] {
-        [purpose='endpoint-images-row'] {
-          margin-bottom: 12px;
-          [purpose='endpoint-image-box'], [purpose='endpoint-empty-image-box'] {
-            width: 60px;
-            height: 60px;
-            padding: 12px 7.5px 5.25px 7.5px;
-            margin-left: 6px;
-            margin-right: 6px;
-            img {
-              width: 27px;
-              height: 27px;
-            }
-            p {
-              font-size: 6.75px;
-              line-height: 9px;
-            }
-          }
-        }
-      }
-    }
-
-
-
     [purpose='bottom-cloud-city-banner'] {
       max-height: 375px;
       height: auto;
@@ -1416,25 +1101,64 @@
       background-repeat: no-repeat;
     }
 
-    [purpose='homepage-content'] {
-      padding-right: 40px;
-      padding-left: 40px;
-    }
     [purpose='button-row'] {
       // width: 100%;
     }
-    [purpose='hero-text'] {
-      min-width: unset;
+    [purpose='homepage-text-block'] {
+      margin-top: 48px;
+      p {
+        max-width: unset;
+      }
+
     }
     [purpose='hero-logos'] {
-      margin-bottom: 64px;
+      margin-bottom: 80px;
+    }
+    [purpose='hero-text'] {
+      min-width: unset;
+      p {
+        max-width: 465px;
+      }
     }
     [purpose='page-section'] {
       margin-bottom: 80px;
     }
     [purpose='integrations-section'] {
-      margin-top: 80px;
+      margin-top: 64px;
     }
+    [purpose='feature-with-image'] {
+      flex-direction: column-reverse;
+      margin-bottom: 104px;
+      [purpose='feature-image'] {
+        width: 100%;
+        img {
+          width: 100%;
+          height: auto;
+          border-radius: 16px;
+        }
+        video {
+          width: 100%;
+          height: auto;
+          border-radius: 16px;
+        }
+        margin-right: 0px;
+      }
+      [purpose='feature-text'] {
+        display: flex;
+        flex-direction: row;
+        padding-bottom: 0px;
+        padding-top: 0px;
+        [purpose='feature-block'] {
+          margin-right: 48px;
+        }
+      }
+    }
+
+    [purpose='quote'] {
+      padding-bottom: 32px;
+    }
+
+
     [purpose='statistics'] {
       [purpose='statistics-column'] {
         display: flex;
@@ -1460,179 +1184,10 @@
 
 
 
-    [purpose='homepage-text-block'] {
-      margin-bottom: 80px;
-      p {
-        max-width: 527px;
-        margin: 0 auto;
-      }
-    }
-    [purpose='category-switch'] {
-      width: 100%;
-      margin-top: 60px;
-      [purpose='category-tier-switch'] {
-        height: 56px;
-        left: 0px;
-      }
-      [purpose='category-switch-option'] {
-        height: 56px;
-        width: 100%;
-      }
-      .it-selected {
-        width: 100%;
-        transform: translateY(113px);
-      }
-      .software-management-selected {
-        width: 100%;
-        transform: translateY(56px);
-      }
-      .mdm-selected {
-        width: 100%;
-      }
-    }
-    [purpose='category-text-block'] {
-      max-width: 480px;
-      [purpose='category-button'] {
-        width: 100%;
-      }
-    }
-    [purpose='platform-block'] {
-      .left {
-        margin-right: auto;
-        margin-left: auto;
-      }
-      .right {
-        margin-right: auto;
-        margin-left: auto;
-      }
-    }
-    [purpose='endpoint-ops-image'] {
-
-      margin-bottom: 20px;
-      img {
-        width: 100%;
-        height: auto;
-      }
-    }
-    [purpose='device-management-image'] {
-      margin-right: auto;
-      margin-left: auto;
-      margin-bottom: 20px;
-      img {
-        width: 100%;
-        height: auto;
-      }
-    }
-    [purpose='vuln-management-image'] {
-      margin-right: auto;
-      margin-left: auto;
-      margin-bottom: 20px;
-      padding-left: 30px;
-      img {
-        width: 100%;
-        height: auto;
-      }
-    }
-    [purpose='platform-image'] {
-      width: 100%;
-      height: 293px;
-    }
-    [purpose='platform-animated-image'] {
-      width: 100%;
-      img {
-        width: 100%;
-        height: auto;
-      }
-    }
     [purpose='three-column-features'] {
       margin-bottom: 120px;
     }
-    [purpose='testimonials'] {
-      margin-bottom: 60px;
-    }
-    [purpose='testimonial'] {
-      &:first-of-type {
-        [purpose='testimonial-video'] {
-          background-position: center;
-          background-size: cover;
-        }
-        margin-right: auto;
-        margin-left: auto;
-        margin-bottom: 20px;
-      }
-      &:last-of-type {
-        [purpose='testimonial-video'] {
-          background-position: center;
-          background-size: cover;
-        }
-        margin-right: auto;
-        margin-left: auto;
-      }
-    }
-    [purpose='endpoints-banner'] {
-      max-height: 480px;
-      flex-direction: column;
-      padding-left: 0px;
-      padding-top: 40px;
-      [purpose='endpoint-banner-text'] {
-        width: 100%;
-        text-align: center;
-        padding-left: 40px;
-        padding-right: 40px;
-        margin-top: 0px;
-        margin-bottom: 40px;
-      }
-      [purpose='endpoints-images'] {
-        width: 110%;
-        max-width: unset;
-        align-items: center;
-        display: flex;
-        flex-direction: column;
-        margin-left: 0px;
-        [purpose='endpoint-images-row'] {
-          min-height: 80px;
-          [purpose='endpoint-image-box'], [purpose='endpoint-empty-image-box'] {
-            display: flex;
-            width: 80px;
-            height: 80px;
-            padding: 16px 10px 7px 10px;
-            border-radius: 12px;
-            margin-left: 8px;
-            margin-right: 8px;
-            img {
-              width: 36px;
-              height: 36px;
-            }
-            p {
-              font-size: 9px;
-              line-height: 12px;
-            }
-          }
-        }
-      }
-
-    }
-    [purpose='category-button'] {
-      width: 100%;
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      justify-content: center;
-      a {
-        color: #FFF;
-        font-size: 16px;
-        font-weight: 700;
-        line-height: 21px;
-        display: flex;
-        height: 48px;
-        padding: 16px 32px;
-        justify-content: center;
-        align-items: center;
-        border-radius: 8px;
-      }
-    }
     [purpose='three-column-features'] {
-      margin-bottom: 100px;
       h2 {
         text-align: center;
       }
@@ -1697,9 +1252,8 @@
         width: 100%;
         font-family: Inter;
         font-size: 12px;
-        font-style: normal;
         font-weight: 700;
-        line-height: 18px; /* 150% */
+        line-height: 18px;
       }
       [purpose='newsletter-form-input']::placeholder {
         font-size: 14px;
@@ -1732,7 +1286,6 @@
   //  ╚═╝  ╚═╝╚══════╝
   //
   @media (max-width: 575px) {
-
     h1 {
       font-size: 32px;
     }
@@ -1742,22 +1295,65 @@
     [purpose='option-container'] {
       height: 38.4px;
     }
-    [purpose='calendar-section'] {
-      padding: 40px 16px;
-    }
-    [purpose='calendar-image'] {
-      height: 287px;
-    }
     [purpose='homepage-hero'] {
       padding-bottom: 307px;
       padding-top: 48px;
-      padding-left: 24px;
-      padding-right: 24px;
+      padding-left: 16px;
+      padding-right: 16px;
     }
-    [purpose='category-switch'] {
-      margin-top: 32px;
+    [purpose='homepage-content'] {
+      padding-right: 16px;
+      padding-left: 16px;
     }
+
+    [purpose='homepage-text-block'] {
+      margin-top: 48px;
+      margin-bottom: 48px;
+    }
+    [purpose='hero-text'] {
+      width: 100%;
+      max-width: 100%;
+    }
+    [purpose='feature-with-image'] {
+      flex-direction: column;
+      margin-bottom: 104px;
+      [purpose='feature-image'] {
+        width: 100%;
+        img {
+          width: 100%;
+          height: auto;
+          border-radius: 16px;
+        }
+        video {
+          width: 100%;
+          height: auto;
+          border-radius: 16px;
+        }
+        margin-right: 0px;
+        margin-bottom: 48px;
+      }
+      [purpose='feature-text'] {
+        flex-direction: column;
+        [purpose='feature-block'] {
+          margin-right: 0px;
+          &:last-of-type {
+            margin-bottom: 0px;
+          }
+        }
+      }
+    }
+
+    [purpose='button-row'] {
+      flex-direction: column;
+      [purpose='cta-button'] {
+        width: 100%;
+        margin-right: auto;
+        margin-bottom: 16px;
+      }
+    }
+
     [purpose='statistics'] {
+
       [purpose='statistics-column'] {
         flex-direction: column-reverse;
       }
@@ -1766,7 +1362,7 @@
       margin-left: auto;
       margin-right: auto;
       margin-top: 48px;
-      margin-bottom: 48px;
+      margin-bottom: 72px;
       h4 {
         margin-bottom: 0px;
       }
@@ -1794,81 +1390,30 @@
     }
     [purpose='hero-text'] {
       [purpose='button-row'] {
+        flex-direction: column;
+        [purpose='cta-button'] {
+          width: 100%;
+          margin-right: auto;
+          margin-bottom: 16px;
+        }
         a {
           white-space: nowrap;
         }
-        [purpose='cta-button'] {
-          margin-right: 24px;
-        }
       }
       p {
         font-size: 16px;
       }
     }
-
-    [purpose='platform-block'] {
-      margin-bottom: 100px;
-    }
-    [purpose='testimonials'] {
-      margin-bottom: 40px;
-    }
-    [purpose='testimonial'] {
-      flex-direction: column;
-      padding: 16px;
-      padding-bottom: 32px;
-      [purpose='testimonial-text'] {
-        margin-left: 0px;
-      }
-      [purpose='testimonial-video'] {
-        width: 100%;
-        height: 228px;
-        margin-bottom: 24px;
-        img {
-          height: 90px;
-          width: auto;
-        }
+    [purpose='feature-card'] {
+      margin-left: 0px;
+      &:last-of-type {
+        // margin-bottom: 0px;
       }
     }
     [purpose='category-text-block'] {
       max-width: 100%;
     }
-    [purpose='vuln-management-image'] {
-      margin-right: auto;
-      margin-left: auto;
-      margin-bottom: 20px;
-      img {
-        width: 100%;
-        height: auto;
-      }
-    }
-    [purpose='endpoint-ops-image'] {
-      margin-right: auto;
-      margin-left: auto;
-      margin-bottom: 20px;
-      img {
-        width: 100%;
-        height: auto;
-      }
-    }
-    [purpose='device-management-image'] {
-      margin-right: auto;
-      margin-left: auto;
-      margin-bottom: 20px;
-      img {
-        width: 100%;
-        height: auto;
-      }
-    }
-    [purpose='category-button'] {
-      a {
-        width: 100%;
-      }
-    }
 
-    [purpose='homepage-content'] {
-      padding-right: 24px;
-      padding-left: 24px;
-    }
 
     [purpose='bottom-cta'] {
       [purpose='button-row'] {
@@ -1887,28 +1432,9 @@
       }
     }
 
-    [purpose='two-column-features'] {
-      margin-bottom: 100px;
-      [purpose='feature-row'] {
-        margin-bottom: 60px;
-        [purpose='feature'] {
-          margin-left: 0px;
-          margin-right: 0px;
-          max-width: 100%;
-          margin-bottom: 60px;
-          text-align: center;
-          img {
-            margin-right: auto;
-            margin-left: auto;
-          }
-        }
-      }
-    }
-
     [purpose='hero-logos'] {
-      padding-left: 20px;
-      padding-right: 20px;
-      margin-bottom: 32px;
+      padding-left: 16px;
+      padding-right: 16px;
     }
     [purpose='video-modal'] {
       [purpose='modal-content'] {
@@ -1920,49 +1446,6 @@
         height: calc(~'9/16 * 95vw');
       }
     }
-    [purpose='endpoints-banner'] {
-      [purpose='endpoints-images'] {
-        [purpose='endpoint-images-row'] {
-          min-height: 60px;
-          margin-bottom: 12px;
-          [purpose='endpoint-image-box'], [purpose='endpoint-empty-image-box'] {
-            width: 60px;
-            height: 60px;
-            padding: 12px 7.5px 5.25px 7.5px;
-            margin-left: 6px;
-            margin-right: 6px;
-            img {
-              width: 27px;
-              height: 27px;
-            }
-            p {
-              font-size: 6.75px;
-              line-height: 9px;
-            }
-          }
-        }
-      }
-    }
-    [purpose='integration-cards'] {
-      margin-bottom: 40px;
-      [purpose='integration-card-column'] {
-        &:first-of-type {
-          margin-right: 0px;
-          margin-left: 0px;
-        }
-        &:last-of-type {
-          margin-left: 0px;
-          margin-right: 0px;
-        }
-        [purpose='integration-card'] {
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-          text-align: center;
-          width: 100%;
-        }
-      }
-    }
     [purpose='bottom-cta'] {
       h1 {
         font-size: 32px;
@@ -1978,7 +1461,6 @@
   //
   @media (max-width: 375px) {
 
-
     h1 {
       font-size: 28px;
       line-height: 120%;
@@ -1986,14 +1468,15 @@
     h4 {
       font-size: 12px;
     }
+    [purpose='announcement-banner'] {
+      br {
+        display: block;
+      }
+    }
     [purpose='option-container'] {
       height: 33.6px;
     }
 
-    [purpose='truncated-vulnerability-management-text'] {
-      display: none;
-    }
-
     [purpose='homepage-hero'] {
       padding-top: 44px;
       padding-left: 16px;
@@ -2012,79 +1495,26 @@
       p {
         font-size: 16px;
       }
-      [purpose='button-row'] {
-        flex-direction: column;
-        [purpose='cta-button'] {
-          width: 100%;
-          margin-right: auto;
-          margin-bottom: 16px;
-        }
-      }
+
     }
     [purpose='mobile-comparison-table'] {
       [purpose='comparison-selector-dropwdown'] {
-        dispaly: flex;
-        flex-direction: column;
+        // display: flex;
+        // flex-direction: column;
         width: calc(~' 100% - 40px');
       }
     }
-    [purpose='button-row'] {
-      flex-direction: column;
-      [purpose='cta-button'] {
-        width: 100%;
-        margin-right: auto;
-        margin-bottom: 16px;
-      }
-    }
+
     [purpose='statistics'] {
       margin-top: 32px;
       margin-bottom: 32px;
     }
 
-    [purpose='endpoints-banner'] {
-      [purpose='endpoint-banner-text'] {
-        padding-left: 24px;
-        padding-right: 24px;
-      }
-    }
-
     [purpose='homepage-content'] {
       padding-right: 20px;
       padding-left: 20px;
     }
 
-
-    [purpose='platform-block'] {
-      margin-bottom: 80px;
-    }
-    [purpose='endpoints-banner'] {
-      [purpose='endpoint-banner-text'] {
-        margin-bottom: 32px;
-      }
-      [purpose='endpoints-images'] {
-        [purpose='endpoint-images-row'] {
-          min-height: 54.427px;
-          margin-bottom: 12px;
-          [purpose='endpoint-image-box'], [purpose='endpoint-empty-image-box'] {
-            width: 54.427px;
-            height: 54.427px;
-            padding: 10.885px 6.803px 4.762px 6.803px;
-            margin-left: 6px;
-            margin-right: 6px;
-            img {
-              width: 24px;
-              height: 24px;
-            }
-            p {
-              font-size: 6px;
-              line-height: 9px;
-            }
-          }
-        }
-      }
-    }
-
-
     [purpose='bottom-cta'] {
       h1 {
         font-size: 32px;
@@ -2094,7 +1524,6 @@
       }
     }
 
-
   }
 
 
diff --git a/website/assets/videos/features-loop.mp4 b/website/assets/videos/features-loop.mp4
new file mode 100644
index 0000000000..5596e36d5c
Binary files /dev/null and b/website/assets/videos/features-loop.mp4 differ
diff --git a/website/views/pages/homepage.ejs b/website/views/pages/homepage.ejs
index 67c60b88d7..129247b08b 100644
--- a/website/views/pages/homepage.ejs
+++ b/website/views/pages/homepage.ejs
@@ -1,9 +1,12 @@
 <div id="homepage" v-cloak>
+<!--   <div purpose="announcement-banner">
+    <animated-arrow-button arrow-color="white" text-color="white" href="TODO">🎉 Fleet raises $27M for<br> open device management </animated-arrow-button>
+  </div> -->
   <%/* Hero container */%>
   <div purpose="hero-container">
     <div purpose="hero-background-image">
       <div purpose="homepage-hero" class="mx-auto">
-        <div class="d-flex flex-row justify-content-start align-items-start">
+        <div class="d-flex flex-row justify-content-start justify-content-sm-center justify-content-md-start align-items-start">
           <%/* Hero text */%>
           <div purpose="hero-text" class="d-flex flex-column justify-content-start">
             <h1>One agent for <br>
@@ -36,10 +39,10 @@
                 </div>
               </div>
             </h1>
-            <p><%= primaryBuyingSituation === 'security-vm'? 'Replace the sprawl with secure, open-source reporting that works the way you want.' : primaryBuyingSituation === 'security-misc'? 'Replace the sprawl with secure, open-source telemetry that works the way you want.' : 'Freedom at every level. Device management your way with all the features you need—no surprises.' %></p>
+            <p>Replace the sprawl with lightning fast device management that puts you back in control.</p>
             <div purpose="button-row" class="d-flex justify-content-start align-items-center">
-              <a purpose="cta-button" href="/docs/get-started/why-fleet">Learn how</a>
-              <animated-arrow-button href="/contact">Talk to an engineer</animated-arrow-button>
+              <a purpose="cta-button" href="/contact">Talk to an engineer</a>
+              <a purpose="video-button"  @click="clickOpenVideoModal('fleet-in-three-minutes')"><img alt="Play" class="d-inline" src="/images/icon-play-video-32x32@2x.png"> Watch demo <span>3 mins</span></a>
             </div>
           </div>
         </div>
@@ -49,999 +52,1254 @@
   <%/* Row of logos */%>
   <div purpose="hero-logos" class="mx-auto">
     <logo-carousel></logo-carousel>
-    <div purpose="statistics">
-      <div purpose="statistics-column">
-        <div purpose="customers" class="d-none d-sm-block">
-          <h4>100+</h4>
-          <p>customers</p>
-        </div>
-        <div purpose="countries" class="d-block d-sm-none">
-          <h4>90+</h4>
-          <p>countries</p>
-        </div>
-        <div purpose="devices">
-          <h4>2,000,000+</h4>
-          <p>computing devices</p>
-        </div>
-      </div>
-      <div purpose="statistics-column">
-        <div purpose="countries" class="d-none d-sm-block">
-          <h4>90+</h4>
-          <p>countries</p>
-        </div>
-        <div purpose="customers" class="d-block d-sm-none">
-          <h4>100+</h4>
-          <p>customers</p>
-        </div>
-        <div purpose="response-time">
-          <h4>8 minutes</h4>
-          <p>avg support response time</p>
-        </div>
-      </div>
-    </div>
   </div>
   <%/* Homepage content */%>
   <div purpose="homepage-content" class="container">
     <div purpose="page-section">
-    <% if(true){ %>
-      <div purpose="category-switch" class="d-flex flex-md-row flex-column justify-content-center mx-auto">
-        <div purpose="category-switch-option" :class="[selectedCategory === 'mdm' ? 'selected' : '']" @click="selectedCategory = 'mdm'">Device management</div>
-        <div purpose="category-switch-option" :class="[selectedCategory === 'software-management' ? 'selected' : '']" @click="selectedCategory = 'software-management'">Software management</div>
-        <div purpose="category-switch-option" :class="[selectedCategory === 'eo-it' ? 'selected' : '']" @click="selectedCategory = 'eo-it'">IT engineering</div>
-        <div purpose="category-tier-switch" :class="[selectedCategory === 'eo-it' ? 'it-selected' : selectedCategory === 'software-management' ? 'software-management-selected' : selectedCategory === 'mdm' ? 'mdm-selected' : 'mdm-selected']"></div>
+      <div purpose="homepage-text-block" class="mt-0">
+        <h2>Everything in one place</h2>
+        <p>Manage devices consistently in a single, open platform for Apple, Linux, and Windows.</p>
       </div>
-      <%/* Device management block */%>
-      <div purpose="platform-block" class="d-flex flex-md-row flex-column justify-content-md-between mx-auto align-items-center" :class="[selectedCategory === 'mdm' ? 'visible' : '']" v-if="selectedCategory === 'mdm'">
-        <div purpose="device-management-image" class="left">
-          <img alt="Operating systems entering a glass device management dome" src="/images/device-management-hero-380x293@2x.png">
+      <div purpose="feature-cards" class="card-deck">
+        <a purpose="feature-card" class="card" href="/device-management">
+          <h5>Multi-platform MDM</h5>
+          <p>Remotely manage, and protect laptops and mobile devices.</p>
+        </a>
+        <a purpose="feature-card" class="card" href="/orchestration">
+          <h5>Orchestration</h5>
+          <p>Automate tasks across devices, from app installs to scripts.</p>
+        </a>
+        <a purpose="feature-card" class="card" href="/software-management">
+          <h5>Software management</h5>
+          <p>Inventory, patch, and manage installed software.</p>
+        </a>
+        <a purpose="feature-card" class="card" href="/announcements/large-gaming-company-enhances-server-observability-with-fleet">
+          <h5>Security</h5>
+          <p>Monitor activity, spot anomalies, and get situational awareness.</p>
+        </a>
+        <a purpose="feature-card" class="card" href="/announcements/vehicle-manufacturer-transitions-to-fleet-for-endpoint-security">
+          <h5>Vulnerability management</h5>
+          <p>Detect, prioritize, and understand security risks and flaws.</p>
+        </a>
+        <a purpose="feature-card" class="card" href="https://www.linkedin.com/pulse/managing-santa-via-gitops-skip-sync-server-allen-houchins-3ni1c" target="_blank" no-icon>
+          <h5>Binary authorization <span>Coming soon</span></h5>
+          <p>Enforce only trusted, pre-approved software can run.</p>
+        </a>
+      </div>
+
+
+      <div purpose="homepage-text-block">
+        <h2>Freedom at every level</h2>
+        <p>Manage devices your way, without vendor limits. Fleet gives you full control and supports the choices that work for your organization.</p>
+      </div>
+      <div purpose="feature-with-image">
+        <div purpose="feature-image">
+          <video autoplay loop playsinline muted purpose="calendar-video"><source src="/videos/features-loop.mp4" type="video/mp4"></video>
         </div>
-        <div purpose="category-text-block" class="d-flex flex-column">
-          <strong>Real employee device choice — even Linux</strong>
-          <p>Enroll all your computing devices. Going only {{ bowser.windows ? 'Windows' : 'Apple'}} or 50/50 {{ bowser.windows ? 'Windows and Mac' : 'Mac and Windows'}}? What about Linux? Speak to them all in one language.</p>
-          <strong>Define configuration as code</strong>
-          <p>Ensure consistent deployment and eliminate configuration drift while maintaining an infinite audit trail. Need to roll back? Revert any changes with a single command.</p>
-          <strong>Know the state of your devices in seconds</strong>
-          <p>Collect and normalize the latest details about any device, like hardware specs, installed software, and security configurations.</p>
-          <div>
-            <a purpose="category-button" class="text-nowrap btn btn-primary" href="/device-management">See how we compare</a>
+
+        <div purpose="feature-text">
+          <div purpose="feature-block">
+            <h5>All features, any deployment</h5>
+            <p>Let us host Fleet for you or deploy it yourself. You get the same experience either way.</p>
+          </div>
+          <div purpose="feature-block">
+            <h5>UI, API, or GitOps</h5>
+            <p>Manage devices how you work best, with full support for configuration as code.</p>
+          </div>
+          <div purpose="feature-block">
+            <h5>Real device choice—even Linux</h5>
+            <p >Let employees use the OS they need, without compromising management and security.</p>
           </div>
         </div>
+
       </div>
 
-      <%/* IT engineering block */%>
-      <div purpose="platform-block" :class="[selectedCategory === 'eo-it' ? 'visible' : '']"  class="d-flex flex-md-row flex-column justify-content-md-between mx-auto align-items-center" v-if="selectedCategory === 'eo-it'">
-        <div purpose="endpoint-ops-image" class="left">
-          <img alt="Endpoint ops" src="/images/endpoint-operations-hero-image-380x380@2x.png">
-        </div>
-        <div purpose="category-text-block" class="d-flex flex-column">
-          <strong>Orchestrate anything</strong>
-          <p>Use a robust API to remotely run scripts, verify configs, or create webhooks for every kind of device — including servers.</p>
-          <strong>Config-as-code device management</strong>
-          <p>If GitOps is your jam, maintain reliable employee experiences with version-controlled changes and enhancements. Use CI/CD and peer reviews to look before you leap.</p>
-          <strong>In the cloud or on-prem</strong>
-          <p>Fleet uses the same open-source code base regardless of where it’s installed. You can deploy and configure it to fit your needs.</p>
-          <div>
-            <a purpose="category-button" class="text-nowrap btn btn-primary" href="/docs/get-started/why-fleet">See the docs</a>
+      <a purpose="statistics" class="d-flex" href="/testimonials" no-underline>
+        <div purpose="statistics-column">
+          <div purpose="customers" class="d-none d-sm-block">
+            <h4>100+</h4>
+            <p>customers</p>
+          </div>
+          <div purpose="countries" class="d-block d-sm-none">
+            <h4>90+</h4>
+            <p>countries</p>
+          </div>
+          <div purpose="devices">
+            <h4>2,000,000+</h4>
+            <p>computing devices</p>
           </div>
         </div>
-      </div>
-
-      <%/* Security engineering block */%>
-      <div purpose="platform-block" :class="[selectedCategory === 'software-management' ? 'visible' : '']" class="d-flex flex-md-row flex-column justify-content-md-between mx-auto align-items-center" v-if="selectedCategory === 'software-management'">
-        <div purpose="vuln-management-image" class="left">
-          <img  alt="An orb being scanned for vulnerabilities" src="/images/software-management-hero-image-380x380@2x.png">
-        </div>
-        <div purpose="category-text-block" class="d-flex flex-column">
-          <strong>Comprehensive software inventory</strong>
-          <p>In-depth insights into everything installed on your devices, all accessible from a single unified view.</p>
-          <strong>Patch software automatically</strong>
-          <p>Seamlessly enforce security updates and automate software installations or script execution.</p>
-          <strong>Head to head with the big players</strong>
-          <p>Fleet has the features you need, including zero-touch installs and self-service, to keep your employees secure and productive.</p>
-          <div>
-            <a purpose="category-button" class="text-nowrap btn btn-primary" href="/software-management">See how we compare</a>
+        <div purpose="statistics-column">
+          <div purpose="countries" class="d-none d-sm-block">
+            <h4>90+</h4>
+            <p>countries</p>
+          </div>
+          <div purpose="customers" class="d-block d-sm-none">
+            <h4>100+</h4>
+            <p>customers</p>
+          </div>
+          <div purpose="response-time">
+            <h4>8 minutes</h4>
+            <p>avg support response time</p>
           </div>
         </div>
-      </div>
-       <% } else if(['eo-it', 'eo-security'].includes(primaryBuyingSituation)) {%>
-         <%/* Endpoint ops block */%>
-         <%if(primaryBuyingSituation === 'eo-it'){ %>
-           <%/* Device management block */%>
-           <div purpose="platform-block" class="d-flex flex-md-row flex-column justify-content-md-between mx-auto align-items-center">
-             <div purpose="device-management-image" class="left">
-               <img alt="Operating systems entering a glass device management dome" src="/images/device-management-hero-380x293@2x.png">
-             </div>
-             <div purpose="category-text-block" class="d-flex flex-column personalized">
-               <h4>Device management</h4>
-               <h2>Manage everything in one place</h2>
-               <p>Modernize your device management practice with a single, open platform for {{ bowser.windows ? 'Windows, Apple' : 'Apple, Windows'}}, and Linux.</p>
-               <div>
-                 <animated-arrow-button href="/device-management">Start with device management</animated-arrow-button>
-               </div>
-             </div>
-           </div>
-         <% } %>
-         <div purpose="platform-block" class="d-flex flex-md-row flex-column-reverse justify-content-md-between mx-auto align-items-center">
-           <div purpose="category-text-block" class="d-flex flex-column personalized">
-             <h4><%= primaryBuyingSituation==='eo-security'? 'Security engineering' : 'IT engineering'%></h4>
-             <h2><%= primaryBuyingSituation==='eo-security'? 'Instrument your endpoints' : 'Talk to your computers'%></h2>
-             <p>A <%= primaryBuyingSituation==='eo-security'? 'lightweight' : 'quick-fast' %> way to gather <%= primaryBuyingSituation==='vm'? 'patch level and custom reports across all your computing devices, even in OT and production environments' : primaryBuyingSituation==='eo-security'? 'deep context and custom telemetry across all your endpoints, even servers' : primaryBuyingSituation==='mdm'||primaryBuyingSituation==='eo-it'? 'compliance and inventory data across all your devices' : 'device data across all your computers' %>. Pulse check or automate anything on any platform.</p>
-             <div>
-               <animated-arrow-button href="/orchestration">Start with <%= primaryBuyingSituation==='eo-security' ? 'security engineering' : 'IT engineering'%></animated-arrow-button>
-             </div>
-           </div>
-           <div purpose="endpoint-ops-image" class="right">
-             <img alt="Endpoint ops" src="/images/endpoint-operations-hero-image-380x380@2x.png">
-           </div>
-         </div>
-         <% if(primaryBuyingSituation === 'eo-security') {%>
-           <%/* Vulnerability management block */%>
-           <div purpose="platform-block" class="d-flex flex-md-row flex-column justify-content-md-between mx-auto align-items-center">
-             <div purpose="vuln-management-image" class="left">
-               <img  alt="An orb being scanned for vulnerabilities" src="/images/vulnerability-management-hero-image-345x380@2x.png">
-             </div>
-             <div purpose="category-text-block" class="d-flex flex-column personalized">
-               <h4>Vulnerability management</h4>
-               <h2>Build the vulnerability program you actually want</h2>
-               <p>Show how quickly zero days and "celebrity CVEs" are resolved and which teams need extra help. Use scoring, known exploit feeds, and live, down-to-the-chip data about your own environment to prioritize, export, automate, and monitor mitigations of everyday vulnerabilities in operating systems, software packages, browsers, and plugins, anywhere.</p>
-               <div>
-                <animated-arrow-button href="/vulnerability-management">Start with vuln management</animated-arrow-button>
-               </div>
-             </div>
-           </div>
-         <% } %>
+      </a>
 
-       <% } else if(['vm', 'mdm'].includes(primaryBuyingSituation)) {%>
+      <a purpose="quote" class="d-block" href="/announcements/consolidate-multiple-tools-with-fleet" no-underline>
+        <img purpose="quote-logo" alt="Stripe logo" src="/images/social-proof-logo-stripe-67x32@2x.png">
+        <p purpose="quote-text">
+          Fleet helped us avoid being forced to the cloud by our current MDM provider. We were able to migrate everything over to Fleet a few weeks ahead of our renewal, and now Stripe is in control.
+        </p>
+        <div purpose="quote-attribution">
+          <img alt="Scott MacVicar" purpose="quote-author-image" src="/images/testimonial-author-scott-macvicar-100x100@2x.png">
+          <p purpose="name">Scott MacVicar</p>
+          <p purpose="job-title">Head of Developer Infrastructure and Corporate Technology</p>
+        </div>
+      </a>
 
-         <%if(primaryBuyingSituation === 'mdm'){ %>
-           <%/* Device management block */%>
-           <div purpose="platform-block" class="d-flex flex-md-row flex-column-reverse justify-content-md-between mx-auto align-items-center">
-             <div purpose="category-text-block" class="d-flex flex-column personalized">
-               <h4>Device management</h4>
-               <h2>Manage everything in one place</h2>
-               <p>Modernize your device management practice with a single, open platform for {{ bowser.windows ? 'Windows, Apple' : 'Apple, Windows'}}, and Linux.</p>
-               <div>
-                 <animated-arrow-button href="/device-management">Start with device management</animated-arrow-button>
-               </div>
-             </div>
-             <div purpose="device-management-image" class="right">
-               <img alt="Operating systems entering a glass device management dome" src="/images/device-management-hero-380x293@2x.png">
-             </div>
-           </div>
-         <% } else {%>
-           <%/* Vulnerability management block */%>
-           <div purpose="platform-block" class="d-flex flex-md-row flex-column-reverse justify-content-md-between mx-auto align-items-center">
-             <div purpose="category-text-block" class="d-flex flex-column personalized">
-               <h4>Vulnerability management</h4>
-               <h2>Build the vulnerability program you actually want</h2>
-               <p>Show how quickly zero days and "celebrity CVEs" are resolved and which teams need extra help. Use scoring, known exploit feeds, and live, down-to-the-chip data about your own environment to prioritize, export, automate, and monitor mitigations of everyday vulnerabilities in operating systems, software packages, browsers, and plugins, anywhere.</p>
-               <div>
-                 <animated-arrow-button href="/vulnerability-management">Start with vuln management</animated-arrow-button>
-               </div>
-             </div>
-             <div purpose="vuln-management-image" class="right">
-               <img  alt="An orb being scanned for vulnerabilities" src="/images/vulnerability-management-hero-image-345x380@2x.png">
-             </div>
-           </div>
-         <% } %>
-
-         <div purpose="platform-block" class="d-flex flex-md-row flex-column justify-content-md-between mx-auto align-items-center">
-           <div purpose="endpoint-ops-image" class="left">
-             <img alt="Endpoint ops" src="/images/endpoint-operations-hero-image-380x380@2x.png">
-           </div>
-           <div purpose="category-text-block" class="d-flex flex-column personalized">
-             <h4><%= primaryBuyingSituation==='mdm' ? 'IT engineering' : 'Security engineering'%></h4>
-             <h2><%= primaryBuyingSituation==='vm'? 'Instrument your endpoints' : 'Talk to your computers'%></h2>
-             <p>A <%= primaryBuyingSituation==='vm'? 'lightweight' : 'quick-fast' %> way to gather <%= primaryBuyingSituation==='vm'? 'patch level and custom reports across all your computing devices, even in OT and production environments' : primaryBuyingSituation==='vm'? 'deep context and custom telemetry across all your endpoints, even servers' : primaryBuyingSituation==='mdm'||primaryBuyingSituation==='eo-it'? 'compliance and inventory data across all your devices' : 'device data across all your computers' %>. Pulse check or automate anything on any platform.</p>
-             <div>
-               <animated-arrow-button href="/orchestration">Start with <%= primaryBuyingSituation==='mdm' ? 'IT engineering' : 'security engineering'%></animated-arrow-button>
-             </div>
-           </div>
-         </div>
-       <% } %>
-      <div purpose="page-section">
-        <div purpose="comparison-section">
-          <% if(['it-major-mdm', 'it-gap-filler-mdm'].includes(primaryBuyingSituation)){ %>
-            <h2>Toe-to-toe with the big players</h2>
-          <%} else {%>
-            <h2>Is it any good?</h2>
-          <%}%>
-          <% if(['it-major-mdm', 'it-gap-filler-mdm', 'mdm'].includes(primaryBuyingSituation)){ %>
-            <p>Considering a move to Fleet as a multi-platform, open-source MDM alternative? See how we compare:</p>
-          <% } else { %>
-            <p>Considering a move to Fleet? See how we compare:</p>
-          <% } %>
-          <div purpose="desktop-comparison-table" class="d-none d-sm-block">
-            <div purpose="comparison-table-header" class="d-sm-flex d-none flex-row justify-content-end">
-              <div purpose="fleet-column" class="justify-content-center"><strong>Fleet</strong></div>
-              <div purpose="comparison-column" class="d-flex">
-                <div purpose="comparison-selector" class="d-flex flex-row justify-content-between align-items-center"
-                  id="dropdownMenuSelectPurpose" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                  {{comparisonModeFriendlyNames[comparisonMode]}}<img class="d-flex" style="width: 16px; height: 16px;" src="/images/chevron-down-16x16@2x.png" alt="a small chevron pointing downwards">
-                </div>
-                <div purpose="comparison-selector-dropwdown" class="dropdown-menu" aria-labelledby="dropdownMenuSelectPurpose">
-                  <div class="dropdown-item" @click="comparisonMode = 'sccm'">SCCM</div>
-                  <div class="dropdown-item" @click="comparisonMode = 'omnissa'">Omnissa (WS1)</div>
-                  <div class="dropdown-item" @click="comparisonMode = 'jamf'">Jamf Pro</div>
-                  <div class="dropdown-item" @click="comparisonMode = 'intune'">Intune</div>
-                  <div class="dropdown-item" @click="comparisonMode = 'ansible'">Ansible</div>
-                  <div class="dropdown-item" @click="comparisonMode = 'tanium'">Tanium</div>
-                  <div class="dropdown-item" @click="comparisonMode = 'puppet'">Puppet</div>
-                  <div class="dropdown-item" @click="comparisonMode = 'chef'">Chef</div>
-                </div>
+      <div purpose="comparison-section">
+        <h2>How does Fleet compare?</h2>
+        <p>Considering a move to Fleet? See how we compare:</p>
+        <div purpose="comparison-table-switch" class="d-flex d-sm-none">
+          <div purpose="comparison-table-switch-option" :class="[comparisonTableMode === 'it' ? 'selected' : '']"  @click="clickSwitchComparisonMode('it')">IT</div>
+          <div purpose="comparison-table-switch-option" :class="[comparisonTableMode === 'security' ? 'selected' : '']"  @click="clickSwitchComparisonMode('security')">Security</div>
+        </div>
+        <div purpose="comparison-table-switch" class="d-none d-sm-flex">
+          <div purpose="comparison-table-switch-option" :class="[comparisonTableMode === 'it' ? 'selected' : '']"  @click="clickSwitchComparisonMode('it')">For IT admins</div>
+          <div purpose="comparison-table-switch-option" :class="[comparisonTableMode === 'security' ? 'selected' : '']"  @click="clickSwitchComparisonMode('security')">For security engineers</div>
+        </div>
+        <% /*
+          ╦╔╦╗  ╔═╗╔═╗╔╦╗╔═╗╔═╗╦═╗╦╔═╗╔═╗╔╗╔  ╔╦╗╔═╗╔╗ ╦  ╔═╗
+          ║ ║   ║  ║ ║║║║╠═╝╠═╣╠╦╝║╚═╗║ ║║║║   ║ ╠═╣╠╩╗║  ║╣
+          ╩ ╩   ╚═╝╚═╝╩ ╩╩  ╩ ╩╩╚═╩╚═╝╚═╝╝╚╝   ╩ ╩ ╩╚═╝╩═╝╚═╝
+          */ %>
+        <div purpose="desktop-comparison-table" class="d-none d-sm-block" v-if="comparisonTableMode === 'it'">
+          <div purpose="comparison-table-header" class="d-sm-flex d-none flex-row justify-content-end">
+            <div purpose="fleet-column" class="justify-content-center"><strong>Fleet</strong></div>
+            <div purpose="comparison-column" class="d-flex">
+              <div purpose="comparison-selector" class="d-flex flex-row justify-content-between align-items-center"
+                id="dropdownMenuSelectPurpose" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                {{comparisonModeFriendlyNames[comparisonModeForIt]}}<img class="d-flex" style="width: 16px; height: 16px;" src="/images/chevron-down-16x16@2x.png" alt="a small chevron pointing downwards">
               </div>
-            </div>
-            <div purpose="comparison-table" class="d-sm-flex d-none flex-column">
-              <div purpose="table-row">
-                <div purpose="feature-name"><p>Zero-touch setup</p></div>
-                <div purpose="fleet-column">
-                  <img src="/images/os-macos-black-50-16x16@2x.png" alt="macOS logo" >
-                  <img src="/images/os-windows-black-50-16x16@2x.png" alt="Windows logo">
-                  <img src="/images/icon-ios-16x16@2x.png" alt="iOS">
-                </div>
-                <div purpose="comparison-column" v-if="['omnissa', 'intune'].includes(comparisonMode)">
-                  <img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
-                </div>
-                <div purpose="comparison-column" v-else-if="comparisonMode === 'jamf'">
-                  <p>Apple only</p>
-                </div>
-                <div purpose="comparison-column" v-else-if="comparisonMode === 'sccm'">
-                  <p>Windows only</p>
-                </div>
-                <div purpose="comparison-column" v-else>
-                  <img class="mx-auto" alt="❌" purpose="red-x" src="/images/icon-emoji-x-12x12@2x.png">
-                </div>
-              </div>
-
-              <div purpose="table-row">
-                <div purpose="feature-name"><p>iOS/iPadOS management</p></div>
-                <div purpose="fleet-column">
-                  <img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
-                </div>
-                <div purpose="comparison-column" v-if="['tanium', 'chef', 'sccm', 'ansible'].includes(comparisonMode)">
-                  <img class="mx-auto" alt="❌" purpose="red-x" src="/images/icon-emoji-x-12x12@2x.png">
-                </div>
-                <div purpose="comparison-column" v-else-if="comparisonMode === 'puppet'">
-                  <p>Community module</p>
-                </div>
-                <div purpose="comparison-column" v-else>
-                  <img style="height: 14px; width: 14px;" alt="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
-                </div>
-              </div>
-
-              <div purpose="table-row">
-                <div purpose="feature-name">
-                  <p>Complete device inventory <img style="margin-left: 6px;" class="d-inline" purpose="tooltip-icon" src="/images/icon-more-info-14x14@2x.png" alt="More info"  data-toggle="tooltip" tabindex="0" data-placement="top" title="Fleet gives you data down to the chip level on every endpoint, server, and cloud instance. Access over 300 tables of system state data. Use presets or create your own queries."></p>
-
-                </div>
-                <div purpose="fleet-column">
-                  <img src="/images/os-macos-black-50-16x16@2x.png" alt="macOS logo" >
-                  <img src="/images/os-windows-black-50-16x16@2x.png" alt="Windows logo">
-                  <img src="/images/os-linux-black-50-16x16@2x.png" alt="Linux logo">
-                  <img src="/images/icon-android-16x16@2x.png" alt="Android" >
-                  <img src="/images/icon-ios-16x16@2x.png" alt="iOS">
-                </div>
-                <div purpose="comparison-column" v-if="comparisonMode === 'tanium'">
-                  <p>Mobile not supported</p>
-                </div>
-                <div purpose="comparison-column" v-else>
-                  <img class="mx-auto" alt="❌" purpose="red-x" src="/images/icon-emoji-x-12x12@2x.png">
-                </div>
-              </div>
-
-              <div purpose="table-row">
-                <div purpose="feature-name"><p>Operating system updates</p></div>
-                <div purpose="fleet-column">
-                  <img src="/images/os-macos-black-50-16x16@2x.png" alt="macOS logo" >
-                  <img src="/images/os-windows-black-50-16x16@2x.png" alt="Windows logo">
-                  <img src="/images/icon-android-16x16@2x.png" alt="Android" >
-                  <img src="/images/icon-ios-16x16@2x.png" alt="iOS">
-                </div>
-                <div purpose="comparison-column" v-if="comparisonMode === 'sccm'">
-                  <p>Windows only</p>
-                </div>
-                <div purpose="comparison-column" v-else-if="comparisonMode === 'jamf'">
-                  <p>Apple only</p>
-                </div>
-                <div purpose="comparison-column" v-else-if="['omnissa', 'intune'].includes(comparisonMode)">
-                  <img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
-                </div>
-                <div purpose="comparison-column" v-else-if="comparisonMode === 'tanium'">
-                  <p>Mobile not supported</p>
-                </div>
-                <div purpose="comparison-column" v-else>
-                  <img class="mx-auto" alt="❌" purpose="red-x" src="/images/icon-emoji-x-12x12@2x.png">
-                </div>
-              </div>
-
-              <div purpose="table-row">
-                <div purpose="feature-name"><p>Configuration management and scripting</p></div>
-                <div purpose="fleet-column">
-                  <img src="/images/os-macos-black-50-16x16@2x.png" alt="macOS logo" >
-                  <img src="/images/os-windows-black-50-16x16@2x.png" alt="Windows logo">
-                  <img src="/images/os-linux-black-50-16x16@2x.png" alt="Linux logo">
-                  <img src="/images/icon-android-16x16@2x.png" alt="Android" >
-                  <img src="/images/icon-ios-16x16@2x.png" alt="iOS">
-                </div>
-                <div purpose="comparison-column" v-if="comparisonMode === 'sccm'">
-                  <p>Windows only</p>
-                </div>
-                <div purpose="comparison-column" v-else-if="comparisonMode === 'jamf'">
-                  <p>Apple only</p>
-                </div>
-                <div purpose="comparison-column" v-else-if="['ansible', 'tanium', 'puppet', 'chef'].includes(comparisonMode)">
-                  <p>Mobile not supported</p>
-                </div>
-                <div purpose="comparison-column" v-else-if="['omnissa', 'intune'].includes(comparisonMode)">
-                  <img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
-                </div>
-              </div>
-
-              <div purpose="table-row">
-                <div purpose="feature-name"><p>Remote lock and wipe</p></div>
-                <div purpose="fleet-column">
-                  <img src="/images/os-macos-black-50-16x16@2x.png" alt="macOS logo" >
-                  <img src="/images/os-windows-black-50-16x16@2x.png" alt="Windows logo">
-                  <img src="/images/os-linux-black-50-16x16@2x.png" alt="Linux logo">
-                  <img src="/images/icon-android-16x16@2x.png" alt="Android" >
-                  <img src="/images/icon-ios-16x16@2x.png" alt="iOS">
-                </div>
-                <div purpose="comparison-column" v-if="comparisonMode === 'jamf'">
-                  <p>Apple only</p>
-                </div>
-                <div purpose="comparison-column" v-else-if="comparisonMode === 'tanium'">
-                  <p>Windows only</p>
-                </div>
-                <div purpose="comparison-column" v-else-if="comparisonMode === 'omnissa'">
-                  <p>No built-in Linux</p>
-                </div>
-                <div purpose="comparison-column" v-else-if="comparisonMode === 'intune'">
-                  <img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
-                </div>
-                <div purpose="comparison-column" v-else>
-                  <img class="mx-auto" alt="❌" purpose="red-x" src="/images/icon-emoji-x-12x12@2x.png">
-                </div>
-              </div>
-
-              <div purpose="table-row">
-                <div purpose="feature-name" class="d-flex align-items-center"><p>App management </p></div>
-                <div purpose="fleet-column">
-                  <img src="/images/os-macos-black-50-16x16@2x.png" alt="macOS logo" >
-                  <img src="/images/os-windows-black-50-16x16@2x.png" alt="Windows logo">
-                  <img src="/images/os-linux-black-50-16x16@2x.png" alt="Linux logo">
-                  <img src="/images/icon-android-16x16@2x.png" alt="Android" >
-                  <img src="/images/icon-ios-16x16@2x.png" alt="iOS">
-                </div>
-                <div purpose="comparison-column" v-if="comparisonMode === 'sccm'">
-                  <p>Windows only</p>
-                </div>
-                <div purpose="comparison-column" v-else-if="comparisonMode === 'jamf'">
-                  <p>Apple only</p>
-                </div>
-                <div purpose="comparison-column" v-else-if="comparisonMode === 'tanium'">
-                  <p>Mobile not supported</p>
-                </div>
-                <div purpose="comparison-column" v-else-if="['intune', 'omnissa', 'ansible'].includes(comparisonMode)">
-                  <img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
-                </div>
-                <div purpose="comparison-column" v-else>
-                  <img class="mx-auto" alt="❌" purpose="red-x" src="/images/icon-emoji-x-12x12@2x.png">
-                </div>
-              </div>
-
-
-              <div purpose="table-row">
-                <div purpose="feature-name"><p>Automated device compliance</p></div>
-                <div purpose="fleet-column">
-                  <img src="/images/os-macos-black-50-16x16@2x.png" alt="macOS logo" >
-                  <img src="/images/os-windows-black-50-16x16@2x.png" alt="Windows logo">
-                  <img src="/images/os-linux-black-50-16x16@2x.png" alt="Linux logo">
-                  <img src="/images/icon-android-16x16@2x.png" alt="Android" >
-                  <img src="/images/icon-ios-16x16@2x.png" alt="iOS">
-                </div>
-                <div purpose="comparison-column" v-if="comparisonMode === 'sccm'">
-                  <p>Windows only</p>
-                </div>
-                <div purpose="comparison-column" v-else-if="comparisonMode === 'jamf'">
-                  <p>Additional purchase</p>
-                </div>
-                <div purpose="comparison-column" v-else-if="comparisonMode === 'tanium'">
-                  <p>Mobile not supported</p>
-                </div>
-                <div purpose="comparison-column" v-else-if="['intune', 'omnissa', 'ansible'].includes(comparisonMode)">
-                  <img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
-                </div>
-                <div purpose="comparison-column" v-else>
-                  <img class="mx-auto" alt="❌" purpose="red-x" src="/images/icon-emoji-x-12x12@2x.png">
-                </div>
-              </div>
-
-              <div purpose="table-row">
-                <div purpose="feature-name"><p>REST API</p></div>
-                <div purpose="fleet-column"><img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png"></div>
-                <div purpose="comparison-column" v-if="comparisonMode === 'sccm'">
-                  <img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
-                </div>
-                <div purpose="comparison-column" v-else-if="comparisonMode === 'intune'">
-                  <p>Microsoft Graph API</p>
-                </div>
-                <div purpose="comparison-column" v-else>
-                  <p>Multiple APIs required</p>
-                </div>
-              </div>
-
-              <div purpose="table-row">
-                <div purpose="feature-name"><p>Config as code (GitOps)</p></div>
-                <div purpose="fleet-column"><img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png"></div>
-                <div purpose="comparison-column" v-if="['puppet', 'chef', 'ansible'].includes(comparisonMode)">
-                  <img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
-                </div>
-                <div purpose="comparison-column" v-else>
-                  <img class="mx-auto" alt="❌" purpose="red-x" src="/images/icon-emoji-x-12x12@2x.png">
-                </div>
-              </div>
-
-              <div purpose="table-row">
-                <div purpose="feature-name">
-                  <p>
-                    Device reporting (&lt;30 mins)
-                    <img class="d-inline" purpose="tooltip-icon" src="/images/icon-more-info-14x14@2x.png" alt="More info" data-toggle="tooltip" tabindex="0" data-placement="top" title="Unlike traditional system that can take from 1 - 6 hours to respond. Fleet can talk to thousands of devices in seconds.">
-                  </p>
-
-                </div>
-                <div purpose="fleet-column">
-                  <img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
-                </div>
-                <div purpose="comparison-column" v-if="comparisonMode === 'tanium'">
-                  <img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
-                </div>
-                <div purpose="comparison-column" v-else-if="comparisonMode === 'intune'">
-                  <p>6 hours</p>
-                </div>
-                <div purpose="comparison-column" v-else-if="['puppet', 'chef', 'ansible'].includes(comparisonMode)">
-                  <p>One-off scripts</p>
-                </div>
-                <div purpose="comparison-column" v-else>
-                  <img class="mx-auto" alt="❌" purpose="red-x" src="/images/icon-emoji-x-12x12@2x.png">
-                </div>
-              </div>
-
-              <div purpose="table-row">
-                <div purpose="feature-name"><p>Open source</p></div>
-                <div purpose="fleet-column"><p>Free and paid version</p></div>
-                <div purpose="comparison-column" v-if="['puppet', 'chef', 'ansible'].includes(comparisonMode)">
-                  <p>Only free version</p>
-                </div>
-                <div purpose="comparison-column" v-else>
-                  <img class="mx-auto" alt="❌" purpose="red-x" src="/images/icon-emoji-x-12x12@2x.png">
-                </div>
+              <div purpose="comparison-selector-dropwdown" class="dropdown-menu" aria-labelledby="dropdownMenuSelectPurpose">
+                <div class="dropdown-item" @click="comparisonModeForIt = 'sccm'">SCCM</div>
+                <div class="dropdown-item" @click="comparisonModeForIt = 'omnissa'">Omnissa (WS1)</div>
+                <div class="dropdown-item" @click="comparisonModeForIt = 'jamf'">Jamf Pro</div>
+                <div class="dropdown-item" @click="comparisonModeForIt = 'intune'">Intune</div>
+                <div class="dropdown-item" @click="comparisonModeForIt = 'ansible'">Ansible</div>
+                <div class="dropdown-item" @click="comparisonModeForIt = 'tanium'">Tanium</div>
+                <div class="dropdown-item" @click="comparisonModeForIt = 'puppet'">Puppet</div>
+                <div class="dropdown-item" @click="comparisonModeForIt = 'chef'">Chef</div>
               </div>
             </div>
           </div>
-
-          <div purpose="mobile-comparison-table" class="d-block d-sm-none">
-            <p class="mt-5 mb-2 font-weight-bold">Compare with:</p>
-            <div purpose="mobile-comparison-selector" class="d-flex flex-row justify-content-between align-items-center"
-              id="mobileDropdownMenuSelectPurpose" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-              {{comparisonModeFriendlyNames[comparisonMode]}}<img class="d-flex" style="width: 16px; height: 16px;" src="/images/chevron-down-16x16@2x.png" alt="a small shevron pointing downwards">
-            </div>
-            <div purpose="comparison-selector-dropwdown" class="dropdown-menu" aria-labelledby="mobileDropdownMenuSelectPurpose">
-                <div class="dropdown-item" @click="comparisonMode = 'sccm'">SCCM</div>
-                <div class="dropdown-item" @click="comparisonMode = 'omnissa'">Omnissa (WS1)</div>
-                <div class="dropdown-item" @click="comparisonMode = 'jamf'">Jamf Pro</div>
-                <div class="dropdown-item" @click="comparisonMode = 'intune'">Intune</div>
-                <div class="dropdown-item" @click="comparisonMode = 'ansible'">Ansible</div>
-                <div class="dropdown-item" @click="comparisonMode = 'tanium'">Tanium</div>
-                <div class="dropdown-item" @click="comparisonMode = 'puppet'">Puppet</div>
-                <div class="dropdown-item" @click="comparisonMode = 'chef'">Chef</div>
-            </div>
-            <div purpose="feature-table">
+          <div purpose="comparison-table" class="d-sm-flex d-none flex-column">
+            <div purpose="table-row">
               <div purpose="feature-name"><p>Zero-touch setup</p></div>
-              <div purpose="feature-table-row">
-                <div>Fleet</div>
-                <div purpose="feature-status">
-                  <img src="/images/os-macos-black-50-16x16@2x.png" alt="macOS logo" >
-                  <img src="/images/os-windows-black-50-16x16@2x.png" alt="Windows logo">
-                  <img src="/images/icon-ios-16x16@2x.png" alt="iOS">
-                </div>
+              <div purpose="fleet-column">
+                <img src="/images/os-macos-black-50-16x16@2x.png" alt="macOS logo" >
+                <img src="/images/os-windows-black-50-16x16@2x.png" alt="Windows logo">
+                <img src="/images/icon-ios-16x16@2x.png" alt="iOS">
               </div>
-              <div purpose="feature-table-row">
-                <div>{{comparisonModeFriendlyNames[comparisonMode]}}</div>
-                <div purpose="feature-status" v-if="['omnissa', 'intune'].includes(comparisonMode)">
-                  <img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
-                </div>
-                <div purpose="feature-status" v-else-if="comparisonMode === 'sccm'">
-                  <p>Windows only</p>
-                </div>
-                <div purpose="feature-status" v-else-if="comparisonMode === 'jamf'">
-                  <p>Apple only</p>
-                </div>
-                <div purpose="feature-status" v-else>
-                  <img class="mx-auto" alt="❌" purpose="red-x" src="/images/icon-emoji-x-12x12@2x.png">
-                </div>
+              <div purpose="comparison-column" v-if="['omnissa', 'intune', 'ansible'].includes(comparisonModeForIt)">
+                <img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
+              </div>
+              <div purpose="comparison-column" v-else-if="comparisonModeForIt === 'jamf'">
+                <p>Apple only</p>
+              </div>
+              <div purpose="comparison-column" v-else-if="comparisonModeForIt === 'sccm'">
+                <p>Windows only</p>
+              </div>
+              <div purpose="comparison-column" v-else>
+                <img class="mx-auto" alt="❌" purpose="red-x" src="/images/icon-emoji-x-12x12@2x.png">
               </div>
             </div>
-            <div purpose="feature-table">
+
+            <div purpose="table-row">
               <div purpose="feature-name"><p>iOS/iPadOS management</p></div>
-              <div purpose="feature-table-row">
-                <div>Fleet</div>
-                <div purpose="feature-status">
-                  <img style="height: 14px; width: 14px;" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
-                </div>
+              <div purpose="fleet-column">
+                <img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
               </div>
-              <div purpose="feature-table-row">
-                <div>{{comparisonModeFriendlyNames[comparisonMode]}}</div>
-                <div purpose="feature-status" v-if="['tanium', 'chef', 'sccm'].includes(comparisonMode)">
-                  <img class="mx-auto" alt="❌" purpose="red-x" src="/images/icon-emoji-x-12x12@2x.png">
-                </div>
-                <div purpose="feature-status" v-else-if="comparisonMode === 'puppet'">
-                  <p>Community module</p>
-                </div>
-                <div purpose="feature-status" v-else>
-                  <img style="height: 14px; width: 14px;" alt="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
-                </div>
+              <div purpose="comparison-column" v-if="['tanium', 'chef', 'sccm'].includes(comparisonModeForIt)">
+                <img class="mx-auto" alt="❌" purpose="red-x" src="/images/icon-emoji-x-12x12@2x.png">
+              </div>
+              <div purpose="comparison-column" v-else-if="comparisonModeForIt === 'puppet'">
+                <p>Community module</p>
+              </div>
+              <div purpose="comparison-column" v-else>
+                <img style="height: 14px; width: 14px;" alt="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
               </div>
             </div>
-            <div purpose="feature-table">
+
+            <div purpose="table-row">
               <div purpose="feature-name">
-                <p>Complete device inventory </p>
-                <img style="margin-left: 6px;" class="d-inline" purpose="tooltip-icon" src="/images/icon-more-info-14x14@2x.png" alt="More info"  data-toggle="tooltip" tabindex="0" data-placement="top" title="Fleet gives you data down to the chip level on every endpoint. Access over 300 tables of system state data. Use presets or create your own queries.">
+                <p>Complete device inventory <img style="margin-left: 6px;" class="d-inline" purpose="tooltip-icon" src="/images/icon-more-info-14x14@2x.png" alt="More info"  data-toggle="tooltip" tabindex="0" data-placement="top" title="Fleet gives you data down to the chip level on every endpoint, server, and cloud instance. Access over 300 tables of system state data. Use presets or create your own queries."></p>
+
               </div>
-              <div purpose="feature-table-row">
-                <div>Fleet</div>
-                <div purpose="feature-status">
-                  <img src="/images/os-macos-black-50-16x16@2x.png" alt="macOS logo" >
-                  <img src="/images/os-windows-black-50-16x16@2x.png" alt="Windows logo">
-                  <img src="/images/os-linux-black-50-16x16@2x.png" alt="Linux logo">
-                  <img src="/images/icon-android-16x16@2x.png" alt="Android" >
-                  <img src="/images/icon-ios-16x16@2x.png" alt="iOS">              </div>
+              <div purpose="fleet-column">
+                <img src="/images/os-macos-black-50-16x16@2x.png" alt="macOS logo" >
+                <img src="/images/os-windows-black-50-16x16@2x.png" alt="Windows logo">
+                <img src="/images/os-linux-black-50-16x16@2x.png" alt="Linux logo">
+                <img src="/images/icon-android-16x16@2x.png" alt="Android" >
+                <img src="/images/icon-ios-16x16@2x.png" alt="iOS">
               </div>
-              <div purpose="feature-table-row">
-                <div>{{comparisonModeFriendlyNames[comparisonMode]}}</div>
-                <div purpose="feature-status" v-if="comparisonMode === 'tanium'">
-                  <p>Mobile not supported</p>
-                </div>
-                <div purpose="feature-status" v-else>
-                  <img class="mx-auto" alt="❌" purpose="red-x" src="/images/icon-emoji-x-12x12@2x.png">
-                </div>
+              <div purpose="comparison-column" v-if="comparisonModeForIt === 'tanium'">
+                <p>Mobile not supported</p>
+              </div>
+              <div purpose="comparison-column" v-else>
+                <img class="mx-auto" alt="❌" purpose="red-x" src="/images/icon-emoji-x-12x12@2x.png">
               </div>
             </div>
-            <div purpose="feature-table">
+
+            <div purpose="table-row">
               <div purpose="feature-name"><p>Operating system updates</p></div>
-              <div purpose="feature-table-row">
-                <div>Fleet</div>
-                <div purpose="feature-status">
-                  <img src="/images/os-macos-black-50-16x16@2x.png" alt="macOS logo" >
-                  <img src="/images/os-windows-black-50-16x16@2x.png" alt="Windows logo">
-                  <img src="/images/icon-android-16x16@2x.png" alt="Android" >
-                  <img src="/images/icon-ios-16x16@2x.png" alt="iOS">
-                </div>
+              <div purpose="fleet-column">
+                <img src="/images/os-macos-black-50-16x16@2x.png" alt="macOS logo" >
+                <img src="/images/os-windows-black-50-16x16@2x.png" alt="Windows logo">
+                <img src="/images/icon-android-16x16@2x.png" alt="Android" >
+                <img src="/images/icon-ios-16x16@2x.png" alt="iOS">
               </div>
-              <div purpose="feature-table-row">
-                <div>{{comparisonModeFriendlyNames[comparisonMode]}}</div>
-                <div purpose="feature-status" v-if="comparisonMode === 'jamf'">
-                  <p>Apple only</p>
-                </div>
-                <div purpose="feature-status" v-else-if="comparisonMode === 'sccm'">
-                  <p>Windows only</p>
-                </div>
-                <div purpose="feature-status" v-else-if="comparisonMode === 'tanium'">
-                  <p>Mobile not supported</p>
-                </div>
-                <div purpose="feature-status" v-else-if="['omnissa', 'intune',].includes(comparisonMode)">
-                  <img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
-                </div>
-                <div purpose="feature-status" v-else>
-                  <img class="mx-auto" alt="❌" purpose="red-x" src="/images/icon-emoji-x-12x12@2x.png">
-                </div>
+              <div purpose="comparison-column" v-if="comparisonModeForIt === 'sccm'">
+                <p>Windows only</p>
+              </div>
+              <div purpose="comparison-column" v-else-if="comparisonModeForIt === 'jamf'">
+                <p>Apple only</p>
+              </div>
+              <div purpose="comparison-column" v-else-if="['omnissa', 'intune'].includes(comparisonModeForIt)">
+                <img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
+              </div>
+              <div purpose="comparison-column" v-else-if="comparisonModeForIt === 'tanium'">
+                <p>Mobile not supported</p>
+              </div>
+              <div purpose="comparison-column" v-else>
+                <img class="mx-auto" alt="❌" purpose="red-x" src="/images/icon-emoji-x-12x12@2x.png">
               </div>
             </div>
-            <div purpose="feature-table">
+
+            <div purpose="table-row">
               <div purpose="feature-name"><p>Configuration management and scripting</p></div>
-              <div purpose="feature-table-row">
-                <div>Fleet</div>
-                <div purpose="feature-status">
-                  <img src="/images/os-macos-black-50-16x16@2x.png" alt="macOS logo" >
-                  <img src="/images/os-windows-black-50-16x16@2x.png" alt="Windows logo">
-                  <img src="/images/os-linux-black-50-16x16@2x.png" alt="Linux logo">
-                  <img src="/images/icon-android-16x16@2x.png" alt="Android" >
-                  <img src="/images/icon-ios-16x16@2x.png" alt="iOS">
-                </div>
+              <div purpose="fleet-column">
+                <img src="/images/os-macos-black-50-16x16@2x.png" alt="macOS logo" >
+                <img src="/images/os-windows-black-50-16x16@2x.png" alt="Windows logo">
+                <img src="/images/os-linux-black-50-16x16@2x.png" alt="Linux logo">
+                <img src="/images/icon-android-16x16@2x.png" alt="Android" >
+                <img src="/images/icon-ios-16x16@2x.png" alt="iOS">
               </div>
-              <div purpose="feature-table-row">
-                <div>{{comparisonModeFriendlyNames[comparisonMode]}}</div>
-                <div purpose="feature-status" v-if="comparisonMode === 'jamf'">
-                  <p>Apple only</p>
-                </div>
-                <div purpose="feature-status" v-else-if="comparisonMode === 'sccm'">
-                  <p>Windows only</p>
-                </div>
-                <div purpose="feature-status" v-else-if="['ansible', 'tanium', 'puppet', 'chef'].includes(comparisonMode)">
-                  <p>Mobile not supported</p>
-                </div>
-                <div purpose="feature-status" v-else-if="['omnissa', 'intune'].includes(comparisonMode)">
-                  <img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
-                </div>
+              <div purpose="comparison-column" v-if="comparisonModeForIt === 'sccm'">
+                <p>Windows only</p>
+              </div>
+              <div purpose="comparison-column" v-else-if="comparisonModeForIt === 'jamf'">
+                <p>Apple only</p>
+              </div>
+              <div purpose="comparison-column" v-else-if="['ansible', 'tanium', 'puppet', 'chef'].includes(comparisonModeForIt)">
+                <p>Mobile not supported</p>
+              </div>
+              <div purpose="comparison-column" v-else-if="['omnissa', 'intune'].includes(comparisonModeForIt)">
+                <img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
               </div>
             </div>
-            <div purpose="feature-table">
+
+            <div purpose="table-row">
               <div purpose="feature-name"><p>Remote lock and wipe</p></div>
-              <div purpose="feature-table-row">
-                <div>Fleet</div>
-                <div purpose="feature-status">
-                  <img src="/images/os-macos-black-50-16x16@2x.png" alt="macOS logo" >
-                  <img src="/images/os-windows-black-50-16x16@2x.png" alt="Windows logo">
-                  <img src="/images/os-linux-black-50-16x16@2x.png" alt="Linux logo">
-                  <img src="/images/icon-android-16x16@2x.png" alt="Android" >
-                  <img src="/images/icon-ios-16x16@2x.png" alt="iOS">
-                </div>
+              <div purpose="fleet-column">
+                <img src="/images/os-macos-black-50-16x16@2x.png" alt="macOS logo" >
+                <img src="/images/os-windows-black-50-16x16@2x.png" alt="Windows logo">
+                <img src="/images/os-linux-black-50-16x16@2x.png" alt="Linux logo">
+                <img src="/images/icon-android-16x16@2x.png" alt="Android" >
+                <img src="/images/icon-ios-16x16@2x.png" alt="iOS">
               </div>
-              <div purpose="feature-table-row">
-                <div>{{comparisonModeFriendlyNames[comparisonMode]}}</div>
-                <div purpose="feature-status" v-if="comparisonMode === 'jamf'">
-                  <p>Apple only</p>
-                </div>
-                <div purpose="feature-status" v-else-if="comparisonMode === 'omnissa'">
-                  <p>No built-in Linux</p>
-                </div>
-                <div purpose="feature-status" v-else-if="comparisonMode === 'tanium'">
-                  <p>Windows only</p>
-                </div>
-                <div purpose="feature-status" v-else-if="['intune'].includes(comparisonMode)">
-                  <img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
-                </div>
-                <div purpose="feature-status" v-else>
-                  <img class="mx-auto" alt="❌" purpose="red-x" src="/images/icon-emoji-x-12x12@2x.png">
-                </div>
+              <div purpose="comparison-column" v-if="comparisonModeForIt === 'jamf'">
+                <p>Apple only</p>
               </div>
-            </div>
-            <div purpose="feature-table">
-              <div purpose="feature-name"><p>App management </p>
+              <div purpose="comparison-column" v-else-if="comparisonModeForIt === 'tanium'">
+                <p>Windows only</p>
               </div>
-              <div purpose="feature-table-row">
-                <div>Fleet</div>
-                <div purpose="feature-status">
-                  <img src="/images/os-macos-black-50-16x16@2x.png" alt="macOS logo" >
-                  <img src="/images/os-windows-black-50-16x16@2x.png" alt="Windows logo">
-                  <img src="/images/os-linux-black-50-16x16@2x.png" alt="Linux logo">
-                  <img src="/images/icon-android-16x16@2x.png" alt="Android" >
-                  <img src="/images/icon-ios-16x16@2x.png" alt="iOS">
-                </div>
+              <div purpose="comparison-column" v-else-if="comparisonModeForIt === 'omnissa'">
+                <p>No built-in Linux</p>
               </div>
-              <div purpose="feature-table-row">
-                <div>{{comparisonModeFriendlyNames[comparisonMode]}}</div>
-                <div purpose="feature-status" v-if="comparisonMode === 'jamf'">
-                  <p>Apple only</p>
-                </div>
-                <div purpose="feature-status" v-else-if="comparisonMode === 'sccm'">
-                  <p>Windows only</p>
-                </div>
-                <div purpose="feature-status" v-else-if="comparisonMode === 'tanium'">
-                  <p>Mobile not supported</p>
-                </div>
-                <div purpose="feature-status" v-else-if="['intune', 'omnissa', 'ansible'].includes(comparisonMode)">
-                  <img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
-                </div>
-                <div purpose="feature-status" v-else>
-                  <img class="mx-auto" alt="❌" purpose="red-x" src="/images/icon-emoji-x-12x12@2x.png">
-                </div>
+              <div purpose="comparison-column" v-else-if="comparisonModeForIt === 'intune'">
+                <img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
+              </div>
+              <div purpose="comparison-column" v-else>
+                <img class="mx-auto" alt="❌" purpose="red-x" src="/images/icon-emoji-x-12x12@2x.png">
               </div>
             </div>
 
-            <div purpose="feature-table">
+            <div purpose="table-row">
+              <div purpose="feature-name" class="d-flex align-items-center"><p>App management </p></div>
+              <div purpose="fleet-column">
+                <img src="/images/os-macos-black-50-16x16@2x.png" alt="macOS logo" >
+                <img src="/images/os-windows-black-50-16x16@2x.png" alt="Windows logo">
+                <img src="/images/os-linux-black-50-16x16@2x.png" alt="Linux logo">
+                <img src="/images/icon-android-16x16@2x.png" alt="Android" >
+                <img src="/images/icon-ios-16x16@2x.png" alt="iOS">
+              </div>
+              <div purpose="comparison-column" v-if="comparisonModeForIt === 'sccm'">
+                <p>Windows only</p>
+              </div>
+              <div purpose="comparison-column" v-else-if="comparisonModeForIt === 'jamf'">
+                <p>Apple only</p>
+              </div>
+              <div purpose="comparison-column" v-else-if="comparisonModeForIt === 'tanium'">
+                <p>Mobile not supported</p>
+              </div>
+              <div purpose="comparison-column" v-else-if="['intune', 'omnissa', 'ansible'].includes(comparisonModeForIt)">
+                <img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
+              </div>
+              <div purpose="comparison-column" v-else>
+                <img class="mx-auto" alt="❌" purpose="red-x" src="/images/icon-emoji-x-12x12@2x.png">
+              </div>
+            </div>
+
+
+            <div purpose="table-row">
               <div purpose="feature-name"><p>Automated device compliance</p></div>
-              <div purpose="feature-table-row">
-                <div>Fleet</div>
-                <div purpose="feature-status">
-                  <img src="/images/os-macos-black-50-16x16@2x.png" alt="macOS logo" >
-                  <img src="/images/os-windows-black-50-16x16@2x.png" alt="Windows logo">
-                  <img src="/images/os-linux-black-50-16x16@2x.png" alt="Linux logo">
-                  <img src="/images/icon-android-16x16@2x.png" alt="Android" >
-                  <img src="/images/icon-ios-16x16@2x.png" alt="iOS">
-                </div>
+              <div purpose="fleet-column">
+                <img src="/images/os-macos-black-50-16x16@2x.png" alt="macOS logo" >
+                <img src="/images/os-windows-black-50-16x16@2x.png" alt="Windows logo">
+                <img src="/images/os-linux-black-50-16x16@2x.png" alt="Linux logo">
+                <img src="/images/icon-android-16x16@2x.png" alt="Android" >
+                <img src="/images/icon-ios-16x16@2x.png" alt="iOS">
               </div>
-              <div purpose="feature-table-row">
-                <div>{{comparisonModeFriendlyNames[comparisonMode]}}</div>
-                <div purpose="feature-status" v-if="comparisonMode === 'jamf'">
-                  <p>Additional purchase</p>
-                </div>
-                <div purpose="feature-status" v-else-if="comparisonMode === 'sccm'">
-                  <p>Windows only</p>
-                </div>
-                <div purpose="feature-status" v-else-if="comparisonMode === 'tanium'">
-                  <p>Mobile not supported</p>
-                </div>
-                <div purpose="feature-status" v-else-if="['intune', 'omnissa', 'ansible'].includes(comparisonMode)">
-                  <img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
-                </div>
-                <div purpose="feature-status" v-else>
-                  <img class="mx-auto" alt="❌" purpose="red-x" src="/images/icon-emoji-x-12x12@2x.png">
-                </div>
+              <div purpose="comparison-column" v-if="comparisonModeForIt === 'sccm'">
+                <p>Windows only</p>
+              </div>
+              <div purpose="comparison-column" v-else-if="comparisonModeForIt === 'jamf'">
+                <p>Additional purchase</p>
+              </div>
+              <div purpose="comparison-column" v-else-if="comparisonModeForIt === 'tanium'">
+                <p>Mobile not supported</p>
+              </div>
+              <div purpose="comparison-column" v-else-if="['intune', 'omnissa', 'ansible'].includes(comparisonModeForIt)">
+                <img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
+              </div>
+              <div purpose="comparison-column" v-else>
+                <img class="mx-auto" alt="❌" purpose="red-x" src="/images/icon-emoji-x-12x12@2x.png">
               </div>
             </div>
 
-            <div purpose="feature-table">
+            <div purpose="table-row">
               <div purpose="feature-name"><p>REST API</p></div>
-              <div purpose="feature-table-row">
-                <div>Fleet</div>
-                <div purpose="feature-status">
-                  <img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
-                </div>
+              <div purpose="fleet-column"><img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png"></div>
+              <div purpose="comparison-column" v-if="comparisonModeForIt === 'sccm'">
+                <img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
               </div>
-              <div purpose="feature-table-row">
-                <div>{{comparisonModeFriendlyNames[comparisonMode]}}</div>
-                <div purpose="feature-status" v-if="comparisonMode === 'intune'">
-                  <p>Microsoft Graph API</p>
-                </div>
-                <div purpose="feature-status" v-else-if="comparisonMode === 'sccm'">
-                  <img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
-                </div>
-                <div purpose="feature-status" v-else>
-                  <p>Multiple APIs required</p>
-                </div>
+              <div purpose="comparison-column" v-else-if="comparisonModeForIt === 'intune'">
+                <p>Microsoft Graph API</p>
+              </div>
+              <div purpose="comparison-column" v-else>
+                <p>Multiple APIs required</p>
               </div>
             </div>
 
-            <div purpose="feature-table">
+            <div purpose="table-row">
               <div purpose="feature-name"><p>Config as code (GitOps)</p></div>
-              <div purpose="feature-table-row">
-                <div>Fleet</div>
-                <div purpose="feature-status">
-                  <img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
-                </div>
+              <div purpose="fleet-column"><img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png"></div>
+              <div purpose="comparison-column" v-if="['puppet', 'chef', 'ansible'].includes(comparisonModeForIt)">
+                <img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
               </div>
-              <div purpose="feature-table-row">
-                <div>{{comparisonModeFriendlyNames[comparisonMode]}}</div>
-                <div purpose="feature-status" v-if="['puppet', 'chef', 'ansible'].includes(comparisonMode)">
-                  <img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
-                </div>
-                <div purpose="feature-status" v-else>
-                  <img class="mx-auto" alt="❌" purpose="red-x" src="/images/icon-emoji-x-12x12@2x.png">
-                </div>
+              <div purpose="comparison-column" v-else>
+                <img class="mx-auto" alt="❌" purpose="red-x" src="/images/icon-emoji-x-12x12@2x.png">
               </div>
             </div>
 
-            <div purpose="feature-table">
+            <div purpose="table-row">
               <div purpose="feature-name">
-                <p>Device reporting (<30 mins)</p>
-                <img style="margin-left: 6px;" class="d-inline" purpose="tooltip-icon" src="/images/icon-more-info-14x14@2x.png" alt="More info"  data-toggle="tooltip" tabindex="0" data-placement="top" title="Unlike traditional system that can take from 1 - 6 hours to respond. Fleet can talk to thousands of devices in seconds.">
+                <p>
+                  Device reporting (&lt;30 seconds)
+                  <img class="d-inline" purpose="tooltip-icon" src="/images/icon-more-info-14x14@2x.png" alt="More info" data-toggle="tooltip" tabindex="0" data-placement="top" title="Unlike traditional system that can take from 1 - 6 hours to respond. Fleet can talk to thousands of devices in seconds.">
+                </p>
+
               </div>
-              <div purpose="feature-table-row">
-                <div>Fleet</div>
-                <div purpose="feature-status">
-                  <img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
-                </div>
+              <div purpose="fleet-column">
+                <img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
               </div>
-              <div purpose="feature-table-row">
-                <div>{{comparisonModeFriendlyNames[comparisonMode]}}</div>
-                <div purpose="feature-status" v-if="comparisonMode === 'tanium'">
-                  <img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
-                </div>
-                <div purpose="feature-status" v-else-if="comparisonMode === 'intune'">
-                  <p>6 Hours</p>
-                </div>
-                <div purpose="feature-status" v-else-if="['puppet', 'chef', 'ansible'].includes(comparisonMode)">
-                  <p>One-off scripts</p>
-                </div>
-                <div purpose="feature-status" v-else>
-                  <img class="mx-auto" alt="❌" purpose="red-x" src="/images/icon-emoji-x-12x12@2x.png">
-                </div>
+              <div purpose="comparison-column" v-if="comparisonModeForIt === 'tanium'">
+                <img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
+              </div>
+              <div purpose="comparison-column" v-else-if="comparisonModeForIt === 'intune'">
+                <p>6 hours</p>
+              </div>
+              <div purpose="comparison-column" v-else-if="['puppet', 'chef', 'ansible'].includes(comparisonModeForIt)">
+                <p>One-off scripts</p>
+              </div>
+              <div purpose="comparison-column" v-else>
+                <img class="mx-auto" alt="❌" purpose="red-x" src="/images/icon-emoji-x-12x12@2x.png">
               </div>
             </div>
 
-            <div purpose="feature-table">
+            <div purpose="table-row">
               <div purpose="feature-name"><p>Open source</p></div>
-              <div purpose="feature-table-row">
-                <div>Fleet</div>
-                <div purpose="feature-status">
-                  <img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
-                </div>
+              <div purpose="fleet-column"><p>Free and paid version</p></div>
+              <div purpose="comparison-column" v-if="['puppet', 'chef', 'ansible'].includes(comparisonModeForIt)">
+                <p>Only free version</p>
               </div>
-              <div purpose="feature-table-row">
-                <div>{{comparisonModeFriendlyNames[comparisonMode]}}</div>
-                <div purpose="feature-status" v-if="['puppet', 'chef', 'ansible'].includes(comparisonMode)">
-                  <p>Only free version</p>
-                </div>
-                <div purpose="feature-status" v-else>
-                  <img class="mx-auto" alt="❌" purpose="red-x" src="/images/icon-emoji-x-12x12@2x.png">
-                </div>
+              <div purpose="comparison-column" v-else>
+                <img class="mx-auto" alt="❌" purpose="red-x" src="/images/icon-emoji-x-12x12@2x.png">
               </div>
             </div>
           </div>
-          <div purpose="button-row">
-            <a purpose="cta-button" href="/pricing">Compare all features</a>
-            <animated-arrow-button href="/testimonials">What are people saying?</animated-arrow-button>
+        </div>
+
+        <div purpose="mobile-comparison-table" class="d-block d-sm-none" v-if="comparisonTableMode === 'it'">
+          <p class="mt-5 mb-2 font-weight-bold">Compare with:</p>
+          <div purpose="mobile-comparison-selector" class="d-flex flex-row justify-content-between align-items-center"
+            id="mobileDropdownMenuSelectPurpose" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            {{comparisonModeFriendlyNames[comparisonModeForIt]}}<img class="d-flex" style="width: 16px; height: 16px;" src="/images/chevron-down-16x16@2x.png" alt="a small shevron pointing downwards">
           </div>
+          <div purpose="comparison-selector-dropwdown" class="dropdown-menu" aria-labelledby="mobileDropdownMenuSelectPurpose">
+              <div class="dropdown-item" @click="comparisonModeForIt = 'sccm'">SCCM</div>
+              <div class="dropdown-item" @click="comparisonModeForIt = 'omnissa'">Omnissa (WS1)</div>
+              <div class="dropdown-item" @click="comparisonModeForIt = 'jamf'">Jamf Pro</div>
+              <div class="dropdown-item" @click="comparisonModeForIt = 'intune'">Intune</div>
+              <div class="dropdown-item" @click="comparisonModeForIt = 'ansible'">Ansible</div>
+              <div class="dropdown-item" @click="comparisonModeForIt = 'tanium'">Tanium</div>
+              <div class="dropdown-item" @click="comparisonModeForIt = 'puppet'">Puppet</div>
+              <div class="dropdown-item" @click="comparisonModeForIt = 'chef'">Chef</div>
+          </div>
+          <div purpose="feature-table">
+            <div purpose="feature-name"><p>Zero-touch setup</p></div>
+            <div purpose="feature-table-row">
+              <div>Fleet</div>
+              <div purpose="feature-status">
+                <img src="/images/os-macos-black-50-16x16@2x.png" alt="macOS logo" >
+                <img src="/images/os-windows-black-50-16x16@2x.png" alt="Windows logo">
+                <img src="/images/icon-ios-16x16@2x.png" alt="iOS">
+              </div>
+            </div>
+            <div purpose="feature-table-row">
+              <div>{{comparisonModeFriendlyNames[comparisonModeForIt]}}</div>
+              <div purpose="feature-status" v-if="['omnissa', 'intune'].includes(comparisonModeForIt)">
+                <img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
+              </div>
+              <div purpose="feature-status" v-else-if="comparisonModeForIt === 'sccm'">
+                <p>Windows only</p>
+              </div>
+              <div purpose="feature-status" v-else-if="comparisonModeForIt === 'jamf'">
+                <p>Apple only</p>
+              </div>
+              <div purpose="feature-status" v-else>
+                <img class="mx-auto" alt="❌" purpose="red-x" src="/images/icon-emoji-x-12x12@2x.png">
+              </div>
+            </div>
+          </div>
+          <div purpose="feature-table">
+            <div purpose="feature-name"><p>iOS/iPadOS management</p></div>
+            <div purpose="feature-table-row">
+              <div>Fleet</div>
+              <div purpose="feature-status">
+                <img style="height: 14px; width: 14px;" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
+              </div>
+            </div>
+            <div purpose="feature-table-row">
+              <div>{{comparisonModeFriendlyNames[comparisonModeForIt]}}</div>
+              <div purpose="feature-status" v-if="['tanium', 'chef', 'sccm', 'ansible'].includes(comparisonModeForIt)">
+                <img class="mx-auto" alt="❌" purpose="red-x" src="/images/icon-emoji-x-12x12@2x.png">
+              </div>
+              <div purpose="feature-status" v-else-if="comparisonModeForIt === 'puppet'">
+                <p>Community module</p>
+              </div>
+              <div purpose="feature-status" v-else>
+                <img style="height: 14px; width: 14px;" alt="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
+              </div>
+            </div>
+          </div>
+          <div purpose="feature-table">
+            <div purpose="feature-name">
+              <p>Complete device inventory </p>
+              <img style="margin-left: 6px;" class="d-inline" purpose="tooltip-icon" src="/images/icon-more-info-14x14@2x.png" alt="More info"  data-toggle="tooltip" tabindex="0" data-placement="top" title="Fleet gives you data down to the chip level on every endpoint. Access over 300 tables of system state data. Use presets or create your own queries.">
+            </div>
+            <div purpose="feature-table-row">
+              <div>Fleet</div>
+              <div purpose="feature-status">
+                <img src="/images/os-macos-black-50-16x16@2x.png" alt="macOS logo" >
+                <img src="/images/os-windows-black-50-16x16@2x.png" alt="Windows logo">
+                <img src="/images/os-linux-black-50-16x16@2x.png" alt="Linux logo">
+                <img src="/images/icon-android-16x16@2x.png" alt="Android" >
+                <img src="/images/icon-ios-16x16@2x.png" alt="iOS">              </div>
+            </div>
+            <div purpose="feature-table-row">
+              <div>{{comparisonModeFriendlyNames[comparisonModeForIt]}}</div>
+              <div purpose="feature-status" v-if="comparisonModeForIt === 'tanium'">
+                <p>Mobile not supported</p>
+              </div>
+              <div purpose="feature-status" v-else>
+                <img class="mx-auto" alt="❌" purpose="red-x" src="/images/icon-emoji-x-12x12@2x.png">
+              </div>
+            </div>
+          </div>
+          <div purpose="feature-table">
+            <div purpose="feature-name"><p>Operating system updates</p></div>
+            <div purpose="feature-table-row">
+              <div>Fleet</div>
+              <div purpose="feature-status">
+                <img src="/images/os-macos-black-50-16x16@2x.png" alt="macOS logo" >
+                <img src="/images/os-windows-black-50-16x16@2x.png" alt="Windows logo">
+                <img src="/images/icon-android-16x16@2x.png" alt="Android" >
+                <img src="/images/icon-ios-16x16@2x.png" alt="iOS">
+              </div>
+            </div>
+            <div purpose="feature-table-row">
+              <div>{{comparisonModeFriendlyNames[comparisonModeForIt]}}</div>
+              <div purpose="feature-status" v-if="comparisonModeForIt === 'jamf'">
+                <p>Apple only</p>
+              </div>
+              <div purpose="feature-status" v-else-if="comparisonModeForIt === 'sccm'">
+                <p>Windows only</p>
+              </div>
+              <div purpose="feature-status" v-else-if="comparisonModeForIt === 'tanium'">
+                <p>Mobile not supported</p>
+              </div>
+              <div purpose="feature-status" v-else-if="['omnissa', 'intune',].includes(comparisonModeForIt)">
+                <img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
+              </div>
+              <div purpose="feature-status" v-else>
+                <img class="mx-auto" alt="❌" purpose="red-x" src="/images/icon-emoji-x-12x12@2x.png">
+              </div>
+            </div>
+          </div>
+          <div purpose="feature-table">
+            <div purpose="feature-name"><p>Configuration management and scripting</p></div>
+            <div purpose="feature-table-row">
+              <div>Fleet</div>
+              <div purpose="feature-status">
+                <img src="/images/os-macos-black-50-16x16@2x.png" alt="macOS logo" >
+                <img src="/images/os-windows-black-50-16x16@2x.png" alt="Windows logo">
+                <img src="/images/os-linux-black-50-16x16@2x.png" alt="Linux logo">
+                <img src="/images/icon-android-16x16@2x.png" alt="Android" >
+                <img src="/images/icon-ios-16x16@2x.png" alt="iOS">
+              </div>
+            </div>
+            <div purpose="feature-table-row">
+              <div>{{comparisonModeFriendlyNames[comparisonModeForIt]}}</div>
+              <div purpose="feature-status" v-if="comparisonModeForIt === 'jamf'">
+                <p>Apple only</p>
+              </div>
+              <div purpose="feature-status" v-else-if="comparisonModeForIt === 'sccm'">
+                <p>Windows only</p>
+              </div>
+              <div purpose="feature-status" v-else-if="['ansible', 'tanium', 'puppet', 'chef'].includes(comparisonModeForIt)">
+                <p>Mobile not supported</p>
+              </div>
+              <div purpose="feature-status" v-else-if="['omnissa', 'intune'].includes(comparisonModeForIt)">
+                <img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
+              </div>
+            </div>
+          </div>
+          <div purpose="feature-table">
+            <div purpose="feature-name"><p>Remote lock and wipe</p></div>
+            <div purpose="feature-table-row">
+              <div>Fleet</div>
+              <div purpose="feature-status">
+                <img src="/images/os-macos-black-50-16x16@2x.png" alt="macOS logo" >
+                <img src="/images/os-windows-black-50-16x16@2x.png" alt="Windows logo">
+                <img src="/images/os-linux-black-50-16x16@2x.png" alt="Linux logo">
+                <img src="/images/icon-android-16x16@2x.png" alt="Android" >
+                <img src="/images/icon-ios-16x16@2x.png" alt="iOS">
+              </div>
+            </div>
+            <div purpose="feature-table-row">
+              <div>{{comparisonModeFriendlyNames[comparisonModeForIt]}}</div>
+              <div purpose="feature-status" v-if="comparisonModeForIt === 'jamf'">
+                <p>Apple only</p>
+              </div>
+              <div purpose="feature-status" v-else-if="comparisonModeForIt === 'omnissa'">
+                <p>No built-in Linux</p>
+              </div>
+              <div purpose="feature-status" v-else-if="comparisonModeForIt === 'tanium'">
+                <p>Windows only</p>
+              </div>
+              <div purpose="feature-status" v-else-if="['intune'].includes(comparisonModeForIt)">
+                <img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
+              </div>
+              <div purpose="feature-status" v-else>
+                <img class="mx-auto" alt="❌" purpose="red-x" src="/images/icon-emoji-x-12x12@2x.png">
+              </div>
+            </div>
+          </div>
+          <div purpose="feature-table">
+            <div purpose="feature-name"><p>App management </p>
+            </div>
+            <div purpose="feature-table-row">
+              <div>Fleet</div>
+              <div purpose="feature-status">
+                <img src="/images/os-macos-black-50-16x16@2x.png" alt="macOS logo" >
+                <img src="/images/os-windows-black-50-16x16@2x.png" alt="Windows logo">
+                <img src="/images/os-linux-black-50-16x16@2x.png" alt="Linux logo">
+                <img src="/images/icon-android-16x16@2x.png" alt="Android" >
+                <img src="/images/icon-ios-16x16@2x.png" alt="iOS">
+              </div>
+            </div>
+            <div purpose="feature-table-row">
+              <div>{{comparisonModeFriendlyNames[comparisonModeForIt]}}</div>
+              <div purpose="feature-status" v-if="comparisonModeForIt === 'jamf'">
+                <p>Apple only</p>
+              </div>
+              <div purpose="feature-status" v-else-if="comparisonModeForIt === 'sccm'">
+                <p>Windows only</p>
+              </div>
+              <div purpose="feature-status" v-else-if="comparisonModeForIt === 'tanium'">
+                <p>Mobile not supported</p>
+              </div>
+              <div purpose="feature-status" v-else-if="['intune', 'omnissa', 'ansible'].includes(comparisonModeForIt)">
+                <img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
+              </div>
+              <div purpose="feature-status" v-else>
+                <img class="mx-auto" alt="❌" purpose="red-x" src="/images/icon-emoji-x-12x12@2x.png">
+              </div>
+            </div>
+          </div>
+
+          <div purpose="feature-table">
+            <div purpose="feature-name"><p>Automated device compliance</p></div>
+            <div purpose="feature-table-row">
+              <div>Fleet</div>
+              <div purpose="feature-status">
+                <img src="/images/os-macos-black-50-16x16@2x.png" alt="macOS logo" >
+                <img src="/images/os-windows-black-50-16x16@2x.png" alt="Windows logo">
+                <img src="/images/os-linux-black-50-16x16@2x.png" alt="Linux logo">
+                <img src="/images/icon-android-16x16@2x.png" alt="Android" >
+                <img src="/images/icon-ios-16x16@2x.png" alt="iOS">
+              </div>
+            </div>
+            <div purpose="feature-table-row">
+              <div>{{comparisonModeFriendlyNames[comparisonModeForIt]}}</div>
+              <div purpose="feature-status" v-if="comparisonModeForIt === 'jamf'">
+                <p>Additional purchase</p>
+              </div>
+              <div purpose="feature-status" v-else-if="comparisonModeForIt === 'sccm'">
+                <p>Windows only</p>
+              </div>
+              <div purpose="feature-status" v-else-if="comparisonModeForIt === 'tanium'">
+                <p>Mobile not supported</p>
+              </div>
+              <div purpose="feature-status" v-else-if="['intune', 'omnissa', 'ansible'].includes(comparisonModeForIt)">
+                <img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
+              </div>
+              <div purpose="feature-status" v-else>
+                <img class="mx-auto" alt="❌" purpose="red-x" src="/images/icon-emoji-x-12x12@2x.png">
+              </div>
+            </div>
+          </div>
+
+          <div purpose="feature-table">
+            <div purpose="feature-name"><p>REST API</p></div>
+            <div purpose="feature-table-row">
+              <div>Fleet</div>
+              <div purpose="feature-status">
+                <img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
+              </div>
+            </div>
+            <div purpose="feature-table-row">
+              <div>{{comparisonModeFriendlyNames[comparisonModeForIt]}}</div>
+              <div purpose="feature-status" v-if="comparisonModeForIt === 'intune'">
+                <p>Microsoft Graph API</p>
+              </div>
+              <div purpose="feature-status" v-else-if="comparisonModeForIt === 'sccm'">
+                <img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
+              </div>
+              <div purpose="feature-status" v-else>
+                <p>Multiple APIs required</p>
+              </div>
+            </div>
+          </div>
+
+          <div purpose="feature-table">
+            <div purpose="feature-name"><p>Config as code (GitOps)</p></div>
+            <div purpose="feature-table-row">
+              <div>Fleet</div>
+              <div purpose="feature-status">
+                <img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
+              </div>
+            </div>
+            <div purpose="feature-table-row">
+              <div>{{comparisonModeFriendlyNames[comparisonModeForIt]}}</div>
+              <div purpose="feature-status" v-if="['puppet', 'chef', 'ansible'].includes(comparisonModeForIt)">
+                <img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
+              </div>
+              <div purpose="feature-status" v-else>
+                <img class="mx-auto" alt="❌" purpose="red-x" src="/images/icon-emoji-x-12x12@2x.png">
+              </div>
+            </div>
+          </div>
+
+          <div purpose="feature-table">
+            <div purpose="feature-name">
+              <p>Device reporting (&lt;30 seconds)</p>
+              <img style="margin-left: 6px;" class="d-inline" purpose="tooltip-icon" src="/images/icon-more-info-14x14@2x.png" alt="More info"  data-toggle="tooltip" tabindex="0" data-placement="top" title="Unlike traditional system that can take from 1 - 6 hours to respond. Fleet can talk to thousands of devices in seconds.">
+            </div>
+            <div purpose="feature-table-row">
+              <div>Fleet</div>
+              <div purpose="feature-status">
+                <img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
+              </div>
+            </div>
+            <div purpose="feature-table-row">
+              <div>{{comparisonModeFriendlyNames[comparisonModeForIt]}}</div>
+              <div purpose="feature-status" v-if="comparisonModeForIt === 'tanium'">
+                <img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
+              </div>
+              <div purpose="feature-status" v-else-if="comparisonModeForIt === 'intune'">
+                <p>6 Hours</p>
+              </div>
+              <div purpose="feature-status" v-else-if="['puppet', 'chef', 'ansible'].includes(comparisonModeForIt)">
+                <p>One-off scripts</p>
+              </div>
+              <div purpose="feature-status" v-else>
+                <img class="mx-auto" alt="❌" purpose="red-x" src="/images/icon-emoji-x-12x12@2x.png">
+              </div>
+            </div>
+          </div>
+
+          <div purpose="feature-table">
+            <div purpose="feature-name"><p>Open source</p></div>
+            <div purpose="feature-table-row">
+              <div>Fleet</div>
+              <div purpose="feature-status">
+                <img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
+              </div>
+            </div>
+            <div purpose="feature-table-row">
+              <div>{{comparisonModeFriendlyNames[comparisonModeForIt]}}</div>
+              <div purpose="feature-status" v-if="['puppet', 'chef', 'ansible'].includes(comparisonModeForIt)">
+                <p>Only free version</p>
+              </div>
+              <div purpose="feature-status" v-else>
+                <img class="mx-auto" alt="❌" purpose="red-x" src="/images/icon-emoji-x-12x12@2x.png">
+              </div>
+            </div>
+          </div>
+        </div>
+        <% /*
+          ╔═╗╔═╗╔═╗╦ ╦╦═╗╦╔╦╗╦ ╦  ╔═╗╔═╗╔╦╗╔═╗╔═╗╦═╗╦╔═╗╔═╗╔╗╔  ╔╦╗╔═╗╔╗ ╦  ╔═╗
+          ╚═╗║╣ ║  ║ ║╠╦╝║ ║ ╚╦╝  ║  ║ ║║║║╠═╝╠═╣╠╦╝║╚═╗║ ║║║║   ║ ╠═╣╠╩╗║  ║╣
+          ╚═╝╚═╝╚═╝╚═╝╩╚═╩ ╩  ╩   ╚═╝╚═╝╩ ╩╩  ╩ ╩╩╚═╩╚═╝╚═╝╝╚╝   ╩ ╩ ╩╚═╝╩═╝╚═╝
+          */ %>
+        <div purpose="desktop-comparison-table" class="d-none d-sm-block" v-if="comparisonTableMode === 'security'">
+          <div purpose="comparison-table-header" class="d-sm-flex d-none flex-row justify-content-end">
+            <div purpose="fleet-column" class="justify-content-center"><strong>Fleet</strong></div>
+            <div purpose="comparison-column" class="d-flex">
+              <div purpose="comparison-selector" class="d-flex flex-row justify-content-between align-items-center"
+                id="dropdownMenuSelectPurposeForSecurity" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                {{comparisonModeFriendlyNames[comparisonModeForSecurity]}}<img class="d-flex" style="width: 16px; height: 16px;" src="/images/chevron-down-16x16@2x.png" alt="a small chevron pointing downwards">
+              </div>
+              <div purpose="comparison-selector-dropwdown" class="dropdown-menu" aria-labelledby="dropdownMenuSelectPurposeForSecurity">
+                <div class="dropdown-item" @click="comparisonModeForSecurity = 'rapid'">Rapid 7</div>
+                <div class="dropdown-item" @click="comparisonModeForSecurity = 'crowdstrike'">Crowdstrike</div>
+                <div class="dropdown-item" @click="comparisonModeForSecurity = 'tanium'">Tanium</div>
+                <div class="dropdown-item" @click="comparisonModeForSecurity = 'qualys'">Qualys</div>
+                <div class="dropdown-item" @click="comparisonModeForSecurity = 'tenable'">Tenable</div>
+              </div>
+            </div>
+          </div>
+
+
+
+          <div purpose="comparison-table" class="d-sm-flex d-none flex-column">
+            <div purpose="table-row">
+              <div purpose="feature-name"><p>Threat intelligence <img style="margin-left: 6px;" class="d-inline" purpose="tooltip-icon" src="/images/icon-more-info-14x14@2x.png" alt="More info"  data-toggle="tooltip" tabindex="0" data-placement="top" title="Integrate threat intelligence sources to detect, enrich, or investigate suspicious activity on devices."></p></div>
+              <div purpose="fleet-column">
+                <p>Bring your own</p>
+              </div>
+              <div purpose="comparison-column" v-if="['rapid', 'crowdstrike', 'tanium'].includes(comparisonModeForSecurity)">
+                <p>Proprietary</p>
+              </div>
+              <div purpose="comparison-column" v-else-if="['qualys', 'tenable'].includes(comparisonModeForSecurity)">
+                <p>Proprietary / Bring your own</p>
+              </div>
+            </div>
+
+            <div purpose="table-row">
+              <div purpose="feature-name">
+                <p>Vulnerability intelligence <img style="margin-left: 6px;" class="d-inline" purpose="tooltip-icon" src="/images/icon-more-info-14x14@2x.png" alt="More info"  data-toggle="tooltip" tabindex="0" data-placement="top" title="Fleet uses data from NVD, EPSS, CISA KEVs, OVAL, and Microsoft MSRC to assess and prioritize vulnerabilities."></p>
+              </div>
+              <div purpose="fleet-column">
+                <p>KEVs, EPSS, NVD, <a purpose="tooltip" data-toggle="tooltip" tabindex="0" data-placement="top" title="Fleet uses data from NVD, EPSS, CISA KEVs, OVAL, and Microsoft MSRC to assess and prioritize vulnerabilities.">etc</a></p>
+              </div>
+              <div purpose="comparison-column" v-if="['rapid', 'crowdstrike'].includes(comparisonModeForSecurity)">
+                <p>Proprietary</p>
+              </div>
+              <div purpose="comparison-column" v-else-if="['tanium'].includes(comparisonModeForSecurity)">
+                <p>KEVs, NVD / proprietary</p>
+              </div>
+              <div purpose="comparison-column" v-else>
+                <img style="height: 14px; width: 14px;" alt="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
+              </div>
+            </div>
+
+            <div purpose="table-row">
+              <div purpose="feature-name">
+                <p>Vulnerability reporting</p>
+              </div>
+              <div purpose="fleet-column">
+                <img src="/images/os-macos-black-50-16x16@2x.png" alt="macOS logo" >
+                <img src="/images/os-windows-black-50-16x16@2x.png" alt="Windows logo">
+                <img src="/images/os-linux-black-50-16x16@2x.png" alt="Linux logo">
+                <img src="/images/icon-ios-16x16@2x.png" alt="iOS">
+              </div>
+              <div purpose="comparison-column" v-if="['crowdstrike', 'tanium'].includes(comparisonModeForSecurity)">
+                <p>Additional purchase</p>
+              </div>
+              <div purpose="comparison-column" v-else>
+                <img style="height: 14px; width: 14px;" alt="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
+              </div>
+            </div>
+
+            <div purpose="table-row">
+              <div purpose="feature-name"><p>Malware detection</p></div>
+              <div purpose="fleet-column">
+                <p>YARA (custom IoCs)</p>
+              </div>
+              <div purpose="comparison-column" v-if="['tanium'].includes(comparisonModeForSecurity)">
+                <p>Additional purchase</p>
+              </div>
+              <div purpose="comparison-column" v-else>
+                <img style="height: 14px; width: 14px;" alt="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
+              </div>
+            </div>
+
+            <div purpose="table-row">
+              <div purpose="feature-name"><p>MITRE ATT&CK <img style="margin-left: 6px;" class="d-inline" purpose="tooltip-icon" src="/images/icon-more-info-14x14@2x.png" alt="More info"  data-toggle="tooltip" tabindex="0" data-placement="top" title="Integrate tools to map activity and detections to MITRE ATT&CK tactics and techniques."></p></div>
+              <div purpose="fleet-column">
+                <p>Bring your own</p>
+              </div>
+              <div purpose="comparison-column">
+                <p>Out of the box</p>
+              </div>
+            </div>
+
+            <div purpose="table-row">
+              <div purpose="feature-name">
+                <p>Complete device inventory <img style="margin-left: 6px;" class="d-inline" purpose="tooltip-icon" src="/images/icon-more-info-14x14@2x.png" alt="More info"  data-toggle="tooltip" tabindex="0" data-placement="top" title="Fleet gives you data down to the chip level on every endpoint, server, and cloud instance. Access over 300 tables of system state data. Use presets or create your own queries."></p>
+
+              </div>
+              <div purpose="fleet-column">
+                <img src="/images/os-macos-black-50-16x16@2x.png" alt="macOS logo" >
+                <img src="/images/os-windows-black-50-16x16@2x.png" alt="Windows logo">
+                <img src="/images/os-linux-black-50-16x16@2x.png" alt="Linux logo">
+                <img src="/images/icon-android-16x16@2x.png" alt="Android" >
+                <img src="/images/icon-ios-16x16@2x.png" alt="iOS">
+              </div>
+              <div purpose="comparison-column" v-if="comparisonModeForSecurity === 'qualys'">
+                <img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
+              </div>
+              <div purpose="comparison-column" v-else>
+                <p>Mobile not supported</p>
+              </div>
+            </div>
+
+            <div purpose="table-row">
+              <div purpose="feature-name">
+                <p>
+                  Device reporting (&lt;30 seconds)
+                  <img class="d-inline" purpose="tooltip-icon" src="/images/icon-more-info-14x14@2x.png" alt="More info" data-toggle="tooltip" tabindex="0" data-placement="top" title="Unlike traditional system that can take from 1 - 6 hours to respond. Fleet can talk to thousands of devices in seconds.">
+                </p>
+
+              </div>
+              <div purpose="fleet-column">
+                <img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
+              </div>
+              <div purpose="comparison-column" v-if="['tanium', 'crowdstrike'].includes(comparisonModeForSecurity)">
+                <img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
+              </div>
+              <div purpose="comparison-column" v-else>
+                <img class="mx-auto" alt="❌" purpose="red-x" src="/images/icon-emoji-x-12x12@2x.png">
+              </div>
+            </div>
+
+            <div purpose="table-row">
+              <div purpose="feature-name"><p>Enforce minimum operating system version</p></div>
+              <div purpose="fleet-column">
+                <img src="/images/os-macos-black-50-16x16@2x.png" alt="macOS logo" >
+                <img src="/images/os-windows-black-50-16x16@2x.png" alt="Windows logo">
+                <img src="/images/icon-ios-16x16@2x.png" alt="iOS">
+              </div>
+              <div purpose="comparison-column" v-if="comparisonModeForSecurity === 'tanium'">
+                <p>Mobile not supported</p>
+              </div>
+              <div purpose="comparison-column" v-else-if="comparisonModeForSecurity === 'qualys'">
+                <img class="mx-auto" alt="❌" purpose="red-x" src="/images/icon-emoji-x-12x12@2x.png">
+              </div>
+              <div purpose="comparison-column" v-else>
+                <p>Additional purchase</p>
+              </div>
+            </div>
+
+            <div purpose="table-row">
+              <div purpose="feature-name" class="d-flex align-items-center"><p>Automated device compliance</p></div>
+              <div purpose="fleet-column">
+                <img src="/images/os-macos-black-50-16x16@2x.png" alt="macOS logo" >
+                <img src="/images/os-windows-black-50-16x16@2x.png" alt="Windows logo">
+                <img src="/images/os-linux-black-50-16x16@2x.png" alt="Linux logo">
+                <img src="/images/icon-android-16x16@2x.png" alt="Android" >
+                <img src="/images/icon-ios-16x16@2x.png" alt="iOS">
+              </div>
+              <div purpose="comparison-column" v-if="comparisonModeForSecurity === 'tanium'">
+                <p>Mobile not supported</p>
+              </div>
+              <div purpose="comparison-column" v-else-if="comparisonModeForSecurity === 'qualys'">
+                <p>Mobile partially supported</p>
+              </div>
+              <div purpose="comparison-column" v-else>
+                <p>Additional purchase</p>
+              </div>
+            </div>
+
+
+            <div purpose="table-row">
+              <div purpose="feature-name"><p>CIS benchmarking</p></div>
+              <div purpose="fleet-column">
+                <img src="/images/os-macos-black-50-16x16@2x.png" alt="macOS logo" >
+                <img src="/images/os-windows-black-50-16x16@2x.png" alt="Windows logo">
+              </div>
+              <div purpose="comparison-column" v-if="comparisonModeForSecurity === 'crowdstrike'">
+                <img class="mx-auto" alt="❌" purpose="red-x" src="/images/icon-emoji-x-12x12@2x.png">
+              </div>
+              <div purpose="comparison-column" v-else-if="comparisonModeForSecurity === 'qualys'">
+                <p>Mobile not supported</p>
+              </div>
+              <div purpose="comparison-column" v-else>
+                <p>Additional purchase</p>
+              </div>
+            </div>
+
+            <div purpose="table-row">
+              <div purpose="feature-name"><p>Custom logging</p></div>
+              <div purpose="fleet-column">
+                <img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
+              </div>
+              <div purpose="comparison-column" v-if="['tanium'].includes(comparisonModeForSecurity)">
+                <p>Additional purchase</p>
+              </div>
+              <div purpose="comparison-column" v-else-if="['qualys'].includes(comparisonModeForSecurity)">
+                <p>Limited</p>
+              </div>
+              <div purpose="comparison-column" v-else>
+                <img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
+              </div>
+            </div>
+
+            <div purpose="table-row">
+              <div purpose="feature-name"><p>REST API</p></div>
+              <div purpose="fleet-column">
+                <img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
+              </div>
+              <div purpose="comparison-column">
+                <p>Multiple APIs required</p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div purpose="mobile-comparison-table" class="d-block d-sm-none" v-if="comparisonTableMode === 'security'">
+          <p class="mt-5 mb-2 font-weight-bold">Compare with:</p>
+          <div purpose="mobile-comparison-selector" class="d-flex flex-row justify-content-between align-items-center"
+            id="mobileDropdownMenuSelectPurposeForSecurity" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            {{comparisonModeFriendlyNames[comparisonModeForSecurity]}}<img class="d-flex" style="width: 16px; height: 16px;" src="/images/chevron-down-16x16@2x.png" alt="a small shevron pointing downwards">
+          </div>
+          <div purpose="comparison-selector-dropwdown" class="dropdown-menu" aria-labelledby="mobileDropdownMenuSelectPurposeForSecurity">
+            <div class="dropdown-item" @click="comparisonModeForSecurity = 'rapid'">Rapid 7</div>
+            <div class="dropdown-item" @click="comparisonModeForSecurity = 'crowdstrike'">Crowdstrike</div>
+            <div class="dropdown-item" @click="comparisonModeForSecurity = 'tanium'">Tanium</div>
+            <div class="dropdown-item" @click="comparisonModeForSecurity = 'qualys'">Qualys</div>
+            <div class="dropdown-item" @click="comparisonModeForSecurity = 'tenable'">Tenable</div>
+          </div>
+          <div purpose="feature-table">
+            <div purpose="feature-name"><p>Threat intelligence <img style="margin-left: 6px;" class="d-inline" purpose="tooltip-icon" src="/images/icon-more-info-14x14@2x.png" alt="More info"  data-toggle="tooltip" tabindex="0" data-placement="top" title="Integrate threat intelligence sources to detect, enrich, or investigate suspicious activity on devices."></p></div>
+            <div purpose="feature-table-row">
+              <div>Fleet</div>
+              <div purpose="feature-status">
+                <p>Bring your own</p>
+              </div>
+            </div>
+            <div purpose="feature-table-row">
+              <div>{{comparisonModeFriendlyNames[comparisonModeForSecurity]}}</div>
+              <div purpose="feature-status" v-if="['rapid', 'crowdstrike', 'tanium'].includes(comparisonModeForSecurity)">
+                <p>Proprietary</p>
+              </div>
+              <div purpose="feature-status" v-else-if="['qualys', 'tenable'].includes(comparisonModeForSecurity)">
+                <p>Proprietary / Bring your own</p>
+              </div>
+            </div>
+          </div>
+          <div purpose="feature-table">
+            <div purpose="feature-name">
+              <p>Vulnerability intelligence <img style="margin-left: 6px;" class="d-inline" purpose="tooltip-icon" src="/images/icon-more-info-14x14@2x.png" alt="More info"  data-toggle="tooltip" tabindex="0" data-placement="top" title="Fleet uses data from NVD, EPSS, CISA KEVs, OVAL, and Microsoft MSRC to assess and prioritize vulnerabilities."></p>
+            </div>
+            <div purpose="feature-table-row">
+              <div>Fleet</div>
+              <div purpose="feature-status">
+                <p>KEVs, EPSS, NVD, <a purpose="tooltip" data-toggle="tooltip" tabindex="0" data-placement="left" title="Fleet uses data from NVD, EPSS, CISA KEVs, OVAL, and Microsoft MSRC to assess and prioritize vulnerabilities.">etc</a></p>
+              </div>
+            </div>
+            <div purpose="feature-table-row">
+              <div>{{comparisonModeFriendlyNames[comparisonModeForSecurity]}}</div>
+              <div purpose="feature-status" v-if="['rapid', 'crowdstrike'].includes(comparisonModeForSecurity)">
+                <p>Proprietary</p>
+              </div>
+              <div purpose="feature-status" v-else-if="['tanium'].includes(comparisonModeForSecurity)">
+                <p>KEVs, NVD / proprietary</p>
+              </div>
+              <div purpose="feature-status" v-else>
+                <img style="height: 14px; width: 14px;" alt="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
+              </div>
+            </div>
+          </div>
+          <div purpose="feature-table">
+            <div purpose="feature-name">
+              <p>Vulnerability reporting</p>
+            </div>
+            <div purpose="feature-table-row">
+              <div>Fleet</div>
+              <div purpose="feature-status">
+                <img src="/images/os-macos-black-50-16x16@2x.png" alt="macOS logo" >
+                <img src="/images/os-windows-black-50-16x16@2x.png" alt="Windows logo">
+                <img src="/images/os-linux-black-50-16x16@2x.png" alt="Linux logo">
+                <img src="/images/icon-ios-16x16@2x.png" alt="iOS">
+              </div>
+            </div>
+            <div purpose="feature-table-row">
+              <div>{{comparisonModeFriendlyNames[comparisonModeForSecurity]}}</div>
+              <div purpose="feature-status" v-if="['crowdstrike', 'tanium'].includes(comparisonModeForSecurity)">
+                <p>Additional purchase</p>
+              </div>
+              <div purpose="feature-status" v-else>
+                <img style="height: 14px; width: 14px;" alt="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
+              </div>
+            </div>
+          </div>
+          <div purpose="feature-table">
+            <div purpose="feature-name"><p>Malware detection</p></div>
+            <div purpose="feature-table-row">
+              <div>Fleet</div>
+              <div purpose="feature-status">
+                <p>YARA (custom IoCs)</p>
+              </div>
+            </div>
+            <div purpose="feature-table-row">
+              <div>{{comparisonModeFriendlyNames[comparisonModeForSecurity]}}</div>
+              <div purpose="feature-status" v-if="['tanium'].includes(comparisonModeForSecurity)">
+                <p>Additional purchase</p>
+              </div>
+              <div purpose="feature-status" v-else>
+                <img style="height: 14px; width: 14px;" alt="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
+              </div>
+            </div>
+          </div>
+          <div purpose="feature-table">
+            <div purpose="feature-name">
+              <p>MITRE ATT&CK <img style="margin-left: 6px;" class="d-inline" purpose="tooltip-icon" src="/images/icon-more-info-14x14@2x.png" alt="More info"  data-toggle="tooltip" tabindex="0" data-placement="top" title="Integrate tools to map activity and detections to MITRE ATT&CK tactics and techniques."></p>
+            </div>
+            <div purpose="feature-table-row">
+              <div>Fleet</div>
+              <div purpose="feature-status">
+                <p>Bring your own</p>
+              </div>
+            </div>
+            <div purpose="feature-table-row">
+              <div>{{comparisonModeFriendlyNames[comparisonModeForSecurity]}}</div>
+              <div purpose="feature-status">
+                <p>Out of the box</p>
+              </div>
+            </div>
+          </div>
+          <div purpose="feature-table">
+            <div purpose="feature-name">
+              <p>Complete device inventory <img style="margin-left: 6px;" class="d-inline" purpose="tooltip-icon" src="/images/icon-more-info-14x14@2x.png" alt="More info"  data-toggle="tooltip" tabindex="0" data-placement="top" title="Fleet gives you data down to the chip level on every endpoint, server, and cloud instance. Access over 300 tables of system state data. Use presets or create your own queries."></p>
+            </div>
+            <div purpose="feature-table-row">
+              <div>Fleet</div>
+              <div purpose="feature-status">
+                <img src="/images/os-macos-black-50-16x16@2x.png" alt="macOS logo" >
+                <img src="/images/os-windows-black-50-16x16@2x.png" alt="Windows logo">
+                <img src="/images/os-linux-black-50-16x16@2x.png" alt="Linux logo">
+                <img src="/images/icon-android-16x16@2x.png" alt="Android" >
+                <img src="/images/icon-ios-16x16@2x.png" alt="iOS">
+              </div>
+            </div>
+            <div purpose="feature-table-row">
+              <div>{{comparisonModeFriendlyNames[comparisonModeForSecurity]}}</div>
+              <div purpose="feature-status" v-if="comparisonModeForSecurity === 'qualys'">
+                <img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
+              </div>
+              <div purpose="feature-status" v-else>
+                <p>Mobile not supported</p>
+              </div>
+            </div>
+          </div>
+          <div purpose="feature-table">
+            <div purpose="feature-name">
+              <p>
+                  Device reporting (&lt;30 seconds)
+                  <img class="d-inline" purpose="tooltip-icon" src="/images/icon-more-info-14x14@2x.png" alt="More info" data-toggle="tooltip" tabindex="0" data-placement="top" title="Unlike traditional system that can take from 1 - 6 hours to respond. Fleet can talk to thousands of devices in seconds.">
+                </p>
+            </div>
+            <div purpose="feature-table-row">
+              <div>Fleet</div>
+              <div purpose="feature-status">
+                <img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
+              </div>
+            </div>
+            <div purpose="feature-table-row">
+              <div>{{comparisonModeFriendlyNames[comparisonModeForSecurity]}}</div>
+              <div purpose="feature-status" v-if="['tanium', 'crowdstrike'].includes(comparisonModeForSecurity)">
+                <img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
+              </div>
+              <div purpose="feature-status" v-else>
+                <img class="mx-auto" alt="❌" purpose="red-x" src="/images/icon-emoji-x-12x12@2x.png">
+              </div>
+            </div>
+          </div>
+
+          <div purpose="feature-table">
+            <div purpose="feature-name"><p>Enforce minimum operating system version</p></div>
+            <div purpose="feature-table-row">
+              <div>Fleet</div>
+              <div purpose="feature-status">
+                <img src="/images/os-macos-black-50-16x16@2x.png" alt="macOS logo" >
+                <img src="/images/os-windows-black-50-16x16@2x.png" alt="Windows logo">
+                <img src="/images/icon-ios-16x16@2x.png" alt="iOS">
+              </div>
+            </div>
+            <div purpose="feature-table-row">
+              <div>{{comparisonModeFriendlyNames[comparisonModeForSecurity]}}</div>
+              <div purpose="feature-status" v-if="comparisonModeForSecurity === 'tanium'">
+                <p>Mobile not supported</p>
+              </div>
+              <div purpose="feature-status" v-else-if="comparisonModeForSecurity === 'qualys'">
+                <img class="mx-auto" alt="❌" purpose="red-x" src="/images/icon-emoji-x-12x12@2x.png">
+              </div>
+              <div purpose="feature-status" v-else>
+                <p>Additional purchase</p>
+              </div>
+            </div>
+          </div>
+
+          <div purpose="feature-table">
+            <div purpose="feature-name"><p>Automated device compliance</p></div>
+            <div purpose="feature-table-row">
+              <div>Fleet</div>
+              <div purpose="feature-status">
+                <img src="/images/os-macos-black-50-16x16@2x.png" alt="macOS logo" >
+                <img src="/images/os-windows-black-50-16x16@2x.png" alt="Windows logo">
+                <img src="/images/os-linux-black-50-16x16@2x.png" alt="Linux logo">
+                <img src="/images/icon-android-16x16@2x.png" alt="Android" >
+                <img src="/images/icon-ios-16x16@2x.png" alt="iOS">
+              </div>
+            </div>
+            <div purpose="feature-table-row">
+              <div>{{comparisonModeFriendlyNames[comparisonModeForSecurity]}}</div>
+              <div purpose="feature-status" v-if="comparisonModeForSecurity === 'tanium'">
+                <p>Mobile not supported</p>
+              </div>
+              <div purpose="feature-status" v-else-if="comparisonModeForSecurity === 'qualys'">
+                <p>Mobile partially supported</p>
+              </div>
+              <div purpose="feature-status" v-else>
+                <p>Additional purchase</p>
+              </div>
+            </div>
+          </div>
+
+          <div purpose="feature-table">
+            <div purpose="feature-name"><p>CIS benchmarking</p></div>
+            <div purpose="feature-table-row">
+              <div>Fleet</div>
+              <div purpose="feature-status">
+                <img src="/images/os-macos-black-50-16x16@2x.png" alt="macOS logo" >
+                <img src="/images/os-windows-black-50-16x16@2x.png" alt="Windows logo">
+              </div>
+            </div>
+            <div purpose="feature-table-row">
+              <div>{{comparisonModeFriendlyNames[comparisonModeForSecurity]}}</div>
+              <div purpose="feature-status" v-if="comparisonModeForSecurity === 'crowdstrike'">
+                <img class="mx-auto" alt="❌" purpose="red-x" src="/images/icon-emoji-x-12x12@2x.png">
+              </div>
+              <div purpose="feature-status" v-else-if="comparisonModeForSecurity === 'qualys'">
+                <p>Mobile not supported</p>
+              </div>
+              <div purpose="feature-status" v-else>
+                <p>Additional purchase</p>
+              </div>
+            </div>
+          </div>
+
+          <div purpose="feature-table">
+            <div purpose="feature-name"><p>Custom logging</p></div>
+            <div purpose="feature-table-row">
+              <div>Fleet</div>
+              <div purpose="feature-status">
+                <img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
+              </div>
+            </div>
+            <div purpose="feature-table-row">
+              <div>{{comparisonModeFriendlyNames[comparisonModeForSecurity]}}</div>
+              <div purpose="feature-status" v-if="['tanium'].includes(comparisonModeForSecurity)">
+                <p>Additional purchase</p>
+              </div>
+              <div purpose="feature-status" v-else-if="['qualys'].includes(comparisonModeForSecurity)">
+                <p>Limited</p>
+              </div>
+              <div purpose="feature-status" v-else>
+                <img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
+              </div>
+            </div>
+          </div>
+
+          <div purpose="feature-table">
+            <div purpose="feature-name"><p>REST API</p></div>
+            <div purpose="feature-table-row">
+              <div>Fleet</div>
+              <div purpose="feature-status">
+                <img class="mx-auto" alt="checkmark" purpose="checkmark" src="/images/icon-checkmark-green-16x16@2x.png">
+              </div>
+            </div>
+            <div purpose="feature-table-row">
+              <div>{{comparisonModeFriendlyNames[comparisonModeForSecurity]}}</div>
+              <div purpose="feature-status">
+                <p>Multiple APIs required</p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+
+        <div purpose="button-row">
+          <a purpose="cta-button" href="/pricing">Compare all features</a>
+          <animated-arrow-button href="/testimonials">What are people saying?</animated-arrow-button>
         </div>
       </div>
-      <div purpose="page-section">
-      <div purpose="endpoints-banner">
-        <div purpose="endpoint-banner-text">
-          <h2>An open interface for every OS</h2>
-          <p>Normalize how you manage clouds and computers without losing low-level access to OS-specific features.</p>
-          <div class="d-flex flex-row align-items-center justify-content-md-start justify-content-center">
-            <animated-arrow-button href="/docs/get-started/why-fleet">Read the docs</animated-arrow-button>
+
+      <div purpose="homepage-text-block" class="">
+        <h2>Open by design</h2>
+        <p>At Fleet, everyone can contribute. We are dedicated to making tools that are easy for everyone to understand.</p>
+      </div>
+
+      <div purpose="three-column-features" class="mx-auto">
+        <div purpose="feature-row" class="d-flex flex-md-row flex-column align-items-start justify-content-center">
+
+          <div purpose="feature" class="ml-sm-0">
+            <img alt="transparency" src="/images/homepage-icon-transparency-54x64@2x.png" class="mx-auto mx-md-0">
+            <h5>"Why is this running on my computer?"</h5>
+            <p>Let end users see the source code for exactly <a href="/better">how they are being monitored</a>, and set clear expectations about what is and isn’t acceptable use of work computers.</p>
           </div>
-        </div>
-        <div purpose="endpoints-images">
-          <div purpose="endpoint-images-row" class="d-md-flex d-none">
-            <div purpose="endpoint-empty-image-box"></div>
-            <div purpose="endpoint-empty-image-box"></div>
-            <div purpose="endpoint-empty-image-box"></div>
-            <div purpose="endpoint-empty-image-box"></div>
+
+          <div purpose="feature">
+            <img alt="Free as in free" src="/images/homepage-icon-free-48x64@2x.png">
+            <h5>Free as in free</h5>
+            <p>The <a href="https://fleetdm.com/docs/get-started/faq#what-is-your-commitment-to-open-source-stewardship">free version of Fleet</a> will always be free. Fleet is independently backed and actively maintained with the help of many amazing <a target="_blank" href="https://github.com/fleetdm/fleet/graphs/contributors">contributors</a>.</p>
           </div>
-          <div purpose="endpoint-images-row">
-            <div purpose="endpoint-empty-image-box" class="d-md-none d-flex"></div>
-            <div purpose="endpoint-empty-image-box" class="d-md-none d-flex"></div>
-            <div purpose="endpoint-image-box">
-              <img alt="AWS" src="/images/logo-aws-36x36@2x.png">
-              <p>AWS</p>
-            </div>
-            <div purpose="endpoint-image-box">
-              <img alt="Google Cloud" src="/images/icon-gcp-36x36@2x.png">
-              <p>GCP</p>
-            </div>
-            <div purpose="endpoint-image-box">
-              <img alt="Azure" src="/images/logo-azure-37x36@2x.png">
-              <p>Azure</p>
-            </div>
-            <div purpose="endpoint-image-box" class="d-md-none d-flex">
-              <img alt="Datacenters" src="/images/homepage-platform-greyscale-datacenters-48x48@2x.png">
-              <p>Data centers</p>
-            </div>
-            <div purpose="endpoint-image-box" class="d-md-none d-flex">
-              <img alt="iOS" src="/images/icon-ios-36x36@2x.png">
-              <p>iOS/iPadOS</p>
-            </div>
-            <div purpose="endpoint-empty-image-box"></div>
-            <div purpose="endpoint-empty-image-box"></div>
-          </div>
-          <div purpose="endpoint-images-row">
-            <div purpose="endpoint-empty-image-box" class="d-md-none d-flex"></div>
-            <div purpose="endpoint-empty-image-box" class="d-md-none d-flex"></div>
-            <div purpose="endpoint-image-box">
-              <img alt="macOS" src="/images/logo-apple-36x36@2x.png">
-              <p>macOS</p>
-            </div>
-            <div purpose="endpoint-image-box">
-              <img alt="Windows" src="/images/logo-windows-36x36@2x.png">
-              <p>Windows</p>
-            </div>
-            <div purpose="endpoint-image-box">
-              <img alt="Linux" src="/images/logo-linux-36x36@2x.png">
-              <p>Linux</p>
-            </div>
-            <div purpose="endpoint-image-box" class="d-md-flex d-none">
-              <img alt="Datacenters" src="/images/homepage-platform-greyscale-datacenters-48x48@2x.png">
-              <p>Data centers</p>
-            </div>
-            <div purpose="endpoint-image-box" class="d-md-none d-flex">
-              <img alt="ChromeOS" src="/images/logo-chrome-36x37@2x.png">
-              <p>ChromeOS</p>
-            </div>
-            <div purpose="endpoint-image-box" class="d-md-none d-flex">
-              <img alt="Containers" src="/images/logo-docker-40x40@2x.png">
-              <p>Containers</p>
-            </div>
-            <div purpose="endpoint-empty-image-box"></div>
-            <div purpose="endpoint-empty-image-box"></div>
-          </div>
-          <div purpose="endpoint-images-row">
-            <div purpose="endpoint-empty-image-box" class="d-md-flex d-none"></div>
-            <div purpose="endpoint-image-box" class="d-md-flex d-none">
-              <img alt="ChromeOS" src="/images/logo-chrome-36x37@2x.png">
-              <p>ChromeOS</p>
-            </div>
-            <div purpose="endpoint-image-box" class="d-md-flex d-none">
-              <img alt="Containers" src="/images/logo-docker-40x40@2x.png">
-              <p>Containers</p>
-            </div>
-            <div purpose="endpoint-image-box" class="d-md-flex d-none">
-              <img alt="iOS" src="/images/icon-ios-36x36@2x.png">
-              <p>iOS/iPadOS</p>
-            </div>
-            <div purpose="endpoint-empty-image-box"></div>
-            <div purpose="endpoint-empty-image-box"></div>
-            <div purpose="endpoint-empty-image-box"></div>
-            <div purpose="endpoint-empty-image-box"></div>
-            <div purpose="endpoint-empty-image-box"></div>
-            <div purpose="endpoint-empty-image-box"></div>
-            <div purpose="endpoint-empty-image-box"></div>
-          </div>
-          <div purpose="endpoint-images-row">
-            <div purpose="endpoint-empty-image-box"></div>
-            <div purpose="endpoint-empty-image-box"></div>
-            <div purpose="endpoint-empty-image-box"></div>
-            <div purpose="endpoint-empty-image-box"></div>
+
+          <div purpose="feature" class="mr-sm-0 mb-0">
+            <img alt="An open book" src="/images/homepage-icon-openness-80x64@2x.png">
+            <h5>Open source</h5>
+            <p>All of Fleet's source code is <a href="/handbook/company/why-this-way#why-open-source">public</a>, and our company <a href="/handbook">handbook</a> is public and open to the world. You can read about the <a href="/handbook/company#history">history of Fleet and osquery</a> and our commitment to improving the product.</p>
           </div>
+
         </div>
       </div>
 
     </div>
-
-    <%/* Integration cards */%>
-<!--       <div purpose="integrations-section">
-        <h2 class="text-center">Connect your favorite tools</h2>
-        <div purpose="integration-cards" class="d-flex flex-sm-row flex-column justify-content-center">
-          <div purpose="integration-card-column" class="d-flex flex-lg-row flex-column">
-            <a href="/integrations">
-              <div purpose="integration-card">
-                <img alt="Custom IT workflows" src="/images/integration-icon-custom-workflows-32x36@2x.png">
-                <% if(['vm', 'eo-security'].includes(primaryBuyingSituation)){%>
-                <strong>Kick off automations</strong>
-                <p>Use git, yaml, webhooks, file carving, vuln feeds, the REST API, and a GUI for security automations.</p>
-                <% } else { %>
-                <strong>Custom IT workflows</strong>
-                <p>Use git, yaml, webhooks, realtime device access, file carving, vuln feeds, the REST API, and a GUI for IT automation.</p>
-                <% } %>
-              </div>
-            </a>
-            <a href="/integrations">
-              <div purpose="integration-card">
-                <img alt="IT ticketing" src="/images/integration-logo-jira-32x36@2x.png">
-                <strong><%- ['vm', 'eo-security'].includes(primaryBuyingSituation) ? 'Case management' : 'IT ticketing'%></strong>
-                <p>Automate ticketing with Jira, ServiceNow, or integrate your own system.</p>
-              </div>
-            </a>
-          </div>
-          <div purpose="integration-card-column" class="d-flex flex-lg-row flex-column">
-            <a href="/integrations">
-              <div purpose="integration-card">
-                <img alt="Event logs" src="/images/integration-logo-snowflake-32x36@2x.png">
-                <strong>Event logs</strong>
-                <p>Send data to any platform like Snowflake, AWS, or Splunk.  Ship logs or fine-tuned snapshots at high frequencies.</p>
-              </div>
-            </a>
-            <a href="/integrations">
-              <div purpose="integration-card">
-                <% if(['vm', 'eo-security'].includes(primaryBuyingSituation)){%>
-                  <img alt="Remediations" src="/images/integration-logo-ansible-36x36@2x.png">
-                  <strong>Remediations</strong>
-                  <p>Easily connect Ansible, Chef, or deploy your own runbooks to install missing security agents and harden endpoints.</p>
-                <% } else { %>
-                  <img alt="Scripting" src="/images/integration-logo-munki-36x36@2x.png">
-                  <strong>Scripting</strong>
-                  <p>Easily connect Munki, Chef, Ansible, and Puppet or deploy your own scripts.</p>
-                <% } %>
-              </div>
-            </a>
-          </div>
-        </div>
-        <div class="d-flex flex-column align-items-center">
-          <animated-arrow-button href="/integrations">View all integrations</animated-arrow-button>
-        </div>
-      </div> -->
-    </div>
-
-    <div purpose="homepage-text-block" class="text-center mx-auto">
-      <h2>Open by design</h2>
-      <p>At Fleet, everyone can contribute. We are dedicated to making tools that are easy for everyone to understand.</p>
-    </div>
-
-    <div purpose="three-column-features" class="mx-auto">
-      <div purpose="feature-row" class="d-flex flex-md-row flex-column align-items-start justify-content-center">
-
-        <div purpose="feature" class="ml-sm-0">
-          <img alt="transparency" src="/images/homepage-icon-transparency-54x64@2x.png" class="mx-auto mx-md-0">
-          <h5>"Why is this running on my computer?"</h5>
-          <p>Let end users see the source code for exactly <a href="/better">how they are being monitored</a>, and set clear expectations about what is and isn’t acceptable use of work computers.</p>
-        </div>
-
-        <div purpose="feature">
-          <img alt="Free as in free" src="/images/homepage-icon-free-48x64@2x.png">
-          <h5>Free as in free</h5>
-          <p>The <a href="https://fleetdm.com/docs/get-started/faq#what-is-your-commitment-to-open-source-stewardship">free version of Fleet</a> will always be free. Fleet is independently backed and actively maintained with the help of many amazing <a target="_blank" href="https://github.com/fleetdm/fleet/graphs/contributors">contributors</a>.</p>
-        </div>
-
-        <div purpose="feature" class="mr-sm-0 mb-0">
-          <img alt="An open book" src="/images/homepage-icon-openness-80x64@2x.png">
-          <h5>Open source</h5>
-          <p>All of Fleet's source code is <a href="/handbook/company/why-this-way#why-open-source">public</a>, and our company <a href="/handbook">handbook</a> is public and open to the world. You can read about the <a href="/handbook/company#history">history of Fleet and osquery</a> and our commitment to improving the product.</p>
-        </div>
-
-      </div>
-    </div>
-
   </div>
   <%/* Bottom gradient */%>
   <div purpose="bottom-gradient">
@@ -1060,28 +1318,28 @@
               <div purpose="ticker-container" class="d-flex align-items-center mx-auto flex-row text-nowrap">
                 <div purpose="option-container" class="pl-2 d-flex flex-column">
                   <span purpose="bottom-cta-ticker-option" class="visible">OS</span>
+                  <span purpose="bottom-cta-ticker-option">audit</span>
+                  <span purpose="bottom-cta-ticker-option">script</span>
+                  <span purpose="bottom-cta-ticker-option">config</span>
+                  <span purpose="bottom-cta-ticker-option">question</span>
                   <span purpose="bottom-cta-ticker-option">laptop</span>
-                  <span purpose="bottom-cta-ticker-option">server</span>
                   <span purpose="bottom-cta-ticker-option">desktop</span>
                   <span purpose="bottom-cta-ticker-option">phone</span>
-                  <span purpose="bottom-cta-ticker-option">tablet</span>
+                  <span purpose="bottom-cta-ticker-option">server</span>
                   <span purpose="bottom-cta-ticker-option">cloud instance</span>
                   <span purpose="bottom-cta-ticker-option">container</span>
-                  <span purpose="bottom-cta-ticker-option">robot</span>
-                  <span purpose="bottom-cta-ticker-option">app</span>
-                  <span purpose="bottom-cta-ticker-option">script</span>
-                  <span purpose="bottom-cta-ticker-option">report</span>
-                  <span purpose="bottom-cta-ticker-option">audit</span>
-                  <span purpose="bottom-cta-ticker-option">question</span>
-                  <span purpose="bottom-cta-ticker-option">decision</span>
-                  <span purpose="bottom-cta-ticker-option">new hire</span>
-                  <span purpose="bottom-cta-ticker-option">offboard</span>
+                  <span purpose="bottom-cta-ticker-option">tablet</span>
                   <span purpose="bottom-cta-ticker-option">hospital</span>
                   <span purpose="bottom-cta-ticker-option">factory</span>
-                  <span purpose="bottom-cta-ticker-option">satellite</span>
-                  <span purpose="bottom-cta-ticker-option">computer</span>
+                  <span purpose="bottom-cta-ticker-option">report</span>
+                  <span purpose="bottom-cta-ticker-option">new hire</span>
+                  <span purpose="bottom-cta-ticker-option">offboard</span>
                   <span purpose="bottom-cta-ticker-option">employee</span>
-                  <span purpose="bottom-cta-ticker-option">local LLM</span>
+                  <span purpose="bottom-cta-ticker-option">agent</span>
+                  <span purpose="bottom-cta-ticker-option">robot</span>
+                  <span purpose="bottom-cta-ticker-option">satellite</span>
+                  <span purpose="bottom-cta-ticker-option">telescope</span>
+                  <span purpose="bottom-cta-ticker-option">computer</span>
                 </div>
               </div>
           <% } %>
@@ -1132,6 +1390,9 @@
   <modal purpose="video-modal" v-if="modal === 'calendar'" @close="closeModal()">
     <iframe width="560" height="315" src="https://www.youtube.com/embed/nhufmzGUeNk?si=rtAF6sFZuA7PhYRS&autoplay=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
   </modal>
+  <modal purpose="video-modal" v-if="modal === 'fleet-in-three-minutes'" @close="closeModal()">
+    <iframe width="560" height="315" src="https://www.youtube.com/embed/q1Tm3IBcx24?rel=0&autoplay=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+  </modal>
   <p style="opacity: 0; line-height: 0px; font-size: 0px; margin: 0;">537c652d-cb1a-440e-ae35-0f0bf5743e75</p>
 </div>
 <%- /* Expose locals as `window.SAILS_LOCALS` :: */ exposeLocalsToBrowser() %>