.comparison-matrix-section.dark-theme * {
  color: var(--core-white, #fff);
}

.comparison-matrix-section[data-remove-grid='false'] {
  background-image: url(https://www.varonis.com/hubfs/2024%20Website%20Redesign/Decorations/grid-neutral-300-x2.webp);
  background-repeat: repeat;
  background-position: top;
  background-size: 396px 396px;
  position: relative;
  overflow: hidden;
}

.comparison-matrix-section[data-remove-grid='false']:before {
  content: '';
  background: linear-gradient(0deg,rgba(255,255,255,.1) 3%, #fff 15%,#fff 77.32%,hsla(0,0%,100%,.75) 86.58%,hsla(0,0%,100%,.5) 94.8%);
  height: 100%;
  inset: 0;
  position: absolute;
  width: 100%;
  1
}

.comparison-matrix-section[data-remove-grid='false'].dark-theme:before {
  background: linear-gradient(0deg,rgba(0,0,0,.8) 10%, #000 15.85%,#000 77.32%, #000 86.58%,hsla(0,0%,0%,.7) 94.8%);
}

.comparison-matrix-section .container {
  position: relative;
}

.cm-flex {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.cm-copy-flex {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cm-container {
  border-left: 1px solid var(--neutral-3, #DADBE1);
  width: min-content;
}

.dark-theme .cm-container {
  border-color: var(--neutral-5, #4C4D4F);
}

.cm-container .cm-cross-dec {
  position: absolute;
  z-index: 3;
}

.cm-cross-dec.top.cm-cross-dec.left {
  top: -12.5px;
  left: -0.5px;
  transform: translate(-50%, 50%);
}

.cm-cross-dec.top.cm-cross-dec.right {
  top: 1.5px;
  right: -0.5px;
  transform: translate(50%, -50%);
}

.cm-cross-dec.bottom.cm-cross-dec.left {
  bottom: -14.5px;
  left: -0.5px;
  transform: translate(-50%, -50%);
}

.cm-cross-dec.bottom.cm-cross-dec.right {
  bottom: -14.5px;
  right: -0.5px;
  transform: translate(50%, -50%);
}

.cm-cross-dec.left {
  left: -0.5px;
}

.cm-cross-dec.right {
  display: none;
  right: 0.5px;
}

.cm-grid-wrapper {
  border-bottom: 1px solid var(--neutral-3, #DADBE1);
  overflow: auto;
  width: calc(100vw - 197px);
  -ms-overflow-style: none;  /* Internet Explorer and Edge */
  scrollbar-width: none; 
}

.dark-theme .cm-grid-wrapper {
  border-color: var(--neutral-5, #4C4D4F);
  background-color: var(--core-rich-black, #010203);
}

.cm-cell-icon {
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  width: 32px;
}

.cm-cell-copy {
  display: flex;
  flex-direction: column;
  gap: 10px;
  line-height: 1.7;
}

.cm-col-headings {
  color: var(--core-rich-black, #010203);
  display: grid;
  position: sticky;
  top: 0;
  width: min-content;
  z-index: 2;
}

.cm-col-heading-wrapper:has(.cm-col-heading.spacer) {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 1;
}

.cm-col-heading.spacer {
  background: var(--core-white, #fff);
}

.cm-col-heading.spacer,
.cm-row-heading:last-child {
  border-top: 1px solid var(--neutral-3, #DADBE1);
}

.dark-theme .cm-col-heading.spacer,
.dark-theme .cm-row-heading:last-child {
  border-color: var(--neutral-5, #4C4D4F);
}

.cm-cols {
  display: grid;
  height: 500px;
  width: min-content;
}

.cm-col-heading-wrapper {
  background-color: var(--core-white, #fff);
  position: relative;
}

.comparison-matrix-section.dark-theme .cm-col-heading-wrapper {
  background-color: var(--core-rich-black, #010203);
}

.cm-col-heading {
  height: 100%;
  position: relative;
}

.comparison-matrix-section.dark-theme .cm-col-heading.dark {
  background-color: #8BE0001A;
}

.comparison-matrix-section.dark-theme .cm-col-heading.dark {
  background-color: transparent;
}

.comparison-matrix-section.dark-theme .cm-col-heading.spacer {
  background-color: var(--core-rich-black, #010203);
}

.cm-col-heading.blue {
  background-color: rgba(0, 119, 255, 0.10);
}

.cm-col-heading.green {
  background-color: rgba(139, 224, 0, 0.10);
}

.cm-col-heading.purple {
  background-color: rgba(12, 32, 231, 0.10);
}

.cm-col-heading.yellow {
  background-color: rgba(255, 200, 0, 0.10);
}

.cm-col-heading-wrapper:after,
.cm-col-heading-wrapper:before {
  content: '';
  width: 100%;
  height: 1px;
  position: absolute;
}
.comparison-matrix-section.dark-theme .cm-col-heading-wrapper.green[data-theme='dark-theme']:after,
.comparison-matrix-section.dark-theme .cm-col-heading-wrapper.green[data-theme='dark-theme']:before {
  background: linear-gradient(90deg, var(--neutral-5, #4C4D4F), #8BE000, var(--neutral-5, #4C4D4F));
}

.comparison-matrix-section.dark-theme .cm-col-heading-wrapper.blue[data-theme='dark-theme']:after,
.comparison-matrix-section.dark-theme .cm-col-heading-wrapper.blue[data-theme='dark-theme']:before {
  background: linear-gradient(90deg, var(--neutral-5, #4C4D4F), var(--secondary-electric-blue-600, 0077FF), var(--neutral-5, #4C4D4F));
}

.comparison-matrix-section.dark-theme .cm-col-heading-wrapper.purple[data-theme='dark-theme']:after,
.comparison-matrix-section.dark-theme .cm-col-heading-wrapper.purple[data-theme='dark-theme']:before {
  background: linear-gradient(90deg, var(--neutral-5, #4C4D4F), var(--extended-blue-screen-of-death, #0C20E7), var(--neutral-5, #4C4D4F));
}

.comparison-matrix-section.dark-theme .cm-col-heading-wrapper.yellow[data-theme='dark-theme']:after,
.comparison-matrix-section.dark-theme .cm-col-heading-wrapper.yellow[data-theme='dark-theme']:before {
  background: linear-gradient(90deg, var(--neutral-5, #4C4D4F), #FFC800, var(--neutral-5, #4C4D4F));
}

.comparison-matrix-section.dark-theme .cm-col-heading-wrapper[data-theme="dark-theme"]:after,
.comparison-matrix-section.dark-theme .cm-col-heading-wrapper[data-theme="dark-theme"]:before {
  background: var(--neutral-5, #4C4D4F);
}

.cm-col-heading-wrapper[data-theme="white-theme"]:after,
.cm-col-heading-wrapper[data-theme="white-theme"]:before {
  background: var(--neutral-3, #DADBE1);
}

.cm-col-heading-wrapper.blue:after,
.cm-col-heading-wrapper.blue:before {
  background: linear-gradient(90deg, var(--neutral-3, #DADBE1), var(--secondary-electric-blue-600, 0077FF), var(--neutral-3, #DADBE1));
}

.cm-col-heading-wrapper.green:after,
.cm-col-heading-wrapper.green:before {
  background: linear-gradient(90deg, var(--neutral-3, #DADBE1), var(--highlight-cyber-green, #8BE000), var(--neutral-3, #DADBE1));
}

.cm-col-heading-wrapper.purple:after,
.cm-col-heading-wrapper.purple:before {
  background: linear-gradient(90deg, var(--neutral-3, #DADBE1), var(--extended-blue-screen-of-death, #0C20E7), var(--neutral-3, #DADBE1));
}

.cm-col-heading-wrapper.yellow:after,
.cm-col-heading-wrapper.yellow:before {
  background: linear-gradient(90deg, var(--neutral-3, #DADBE1), #FFC800, var(--neutral-3, #DADBE1));
}

.cm-col-heading-wrapper:after {
  bottom: -1px;
  left: 0;
}

.cm-col-heading-wrapper:before {
  top: 0;
  left: 0;
}

.cm-col-heading {
  align-items: center;
  border-right: 1px solid var(--neutral-3, #DADBE1);
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: center;
  padding: 30px;
}

.dark-theme .cm-col-heading {
  border-color: var(--neutral-5, #4C4D4F);
}

.cm-col-heading-wrapper:last-child .cm-col-heading {
 border: none;
}

.cm-col-heading:has(.standard-cta-flex) {
  padding-bottom: 21px;
  padding-top: 50px;
}

.cm-col-heading-img {
  max-height: 36px;
}

.cm-col-heading .standard-cta {
  padding: 6px 16px;
  font-size: var(--static-text-xs, 12px);
}

.cm-col-cell {
  border-bottom: 1px solid var(--neutral-3, #DADBE1);
  border-right: 1px solid var(--neutral-3, #DADBE1);
  display: flex;
  gap: 16px;
  padding: 30px 20px;
}

.dark-theme .cm-col-cell {
  border-color: var(--neutral-5, #4C4D4F);
}

.dark-theme.cm-col-cell {
  background-color: rgba(139, 224, 0, 0.10);
}

.cm-col-cell:not(:has(.cm-cell-copy)) {
  align-items: center;
  justify-content: center;
}

.cm-col-cell.blue {
  background-color: rgba(0, 119, 255, 0.10);
}

.cm-col-cell.green {
  background-color: rgba(139, 224, 0, 0.10);
}

.cm-col-cell.purple {
  background-color: rgba(12, 32, 231, 0.10);
}

.cm-col-cell.yellow {
  background-color: rgba(255, 200, 0, 0.10);
}

.cm-col-cell.cm-row-heading {
 background-color: var(--core-white, #fff);
 color: var(--core-rich-black, #010203);
 left: 0;
 position: sticky;
 padding: 30px;
 justify-content: flex-start;
 align-items: flex-start;
}

.comparison-matrix-section.dark-theme .cm-col-cell.cm-row-heading {
  background-color: var(--core-rich-black, #010203);
}

.cm-col-cell.cm-row-heading:first-child {
  border-top: 1px solid var(--neutral-3, #DADBE1);
}

.dark-theme .cm-col-cell.cm-row-heading {
  border-color: var(--neutral-5, #4C4D4F);
}

.comparison-matrix-section.dark-theme .cm-col-cell.cm-row-heading:first-child {
  border-color: var(--neutral-5, #4C4D4F);
}

.cm-col-cell.cm-col-last-cell {
 border-right: none;
}

.cm-col-cell.dark-cell {
  background-color: rgba(139, 224, 0, 0.10);
}

.cm-col-cell.dark-cell-transparent {
  background-color: transparent;
}

.cm-top-dec {
  display: block;
  position: absolute;
  background-repeat: no-repeat;
  background-position: top;
  background-size: cover;
}

.cm-bottom-dec {
  display: block;
  position: absolute;
  background-repeat: no-repeat;
  background-position: top;
  background-size: cover;
}

.cm-top-dec.asteroid {
  background-image: url(https://info.varonis.com/hubfs/2024%20Website%20Redesign/Decorations/varonis_matrix_asteroid.png);
  background-size: 40%;
  height: 531px;
  inset: auto 362px 526px auto;
  width: 783px;
}

.cm-bottom-dec.asteroid {
  background-image: url(https://info.varonis.com/hubfs/2024%20Website%20Redesign/Decorations/asteroids-right-2x.webp);
  display: none;
  height: 538px;
  inset: auto -507px -387px auto;
  width: 667px;
}

.cm-top-dec.satellite {
  background-image: url(https://info.varonis.com/hubfs/2024%20Website%20Redesign/Decorations/varonis_satellite_dec.png);
  background-size: 369px 369px;
  display: none;
  height: 724px;
  width: 598px;
  inset: -24px auto auto -350px;
}

.cm-grid-wrapper {
  overflow-x: auto;
  /* 1. Calculate the distance from the left of the container to the screen edge */
  /* This formula: (Viewport Width - Container Width) / 2 */
  --container-margin: calc((100vw - var(--container-max-width, 1270px)) / 2);

  /* 2. Set width to the container size + the right margin */
  /* If the viewport is small, the margin is 0. If large, it expands to the screen edge. */
  width: calc(100% + Math.max(0px, var(--container-margin)));
  
  /* 3. Alternatively, a simpler modern approach: */
  width: calc(100vw - ((100vw - 100%) / 2));
  
  max-width: none; /* Ensure it's allowed to break the container */
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Ensure the parent doesn't hide the overflow to the right */
.cm-container {
  overflow: visible; 
  width: 100%; 
  position: relative;
}

.cm-grid-wrapper {
  overflow-x: auto;
  /* This calculation finds exactly how much space is on the left 
     and lets the element take up everything EXCEPT that left gap. */
  position: relative;
  width: calc(100vw - (100vw - 100%) / 2);
  
  /* Reset standard behavior */
  margin-right: calc((100% - 100vw) / 2);
  
  scrollbar-width: none;
}

/* Hide scrollbars for Chrome/Safari */
.cm-grid-wrapper::-webkit-scrollbar {
  display: none;
}

.cm-eyebrow {
  line-height: 1.25;
}
.cm-eyebrow,
.cm-heading {
  color: var(--core-rich-black, #010203);
}

.cm-heading,
.cm-subheading {
  text-align: center;
}

.cm-subheading,
.cm-cell-subheading {
  color: var(--neutral-5, #4C4D4F);
  line-height: 1.7;
}

.dark-theme .cm-subheading {
  color: var(--neutral-2, #F3F4F6);
}

.cm-cell-heading {
  color: var(--core-rich-black, #010203);
}

.last-row.cm-col-cell.cm-row-heading {
  border-bottom: none;
}

.last-row.cm-col-cell {
  border-bottom: none;
}

@media (min-width: 768px) {
  
  .cm-col-headings,
  .cm-cols {
    width: 100%;
    min-width: min-content;
  }
  
  .cm-top-dec.satellite {
    display: block;
    inset: -100px auto auto -291px;
  }
  
  .cm-bottom-dec.asteroid {
    display: block;
  }
}

@media (min-width: 992px) {
  .cm-container {
    border-inline: 1px solid var(--neutral-3, #DADBE1);
    border-bottom: 1px solid var(--neutral-3, #DADBE1);
  }
  
  .cm-grid-wrapper {
    width: 100%;
    margin-right: 0px;
    border-bottom: none;
  }
  
  .cm-grid-wrapper:before {
    content: '';
    
  }
  
  .cm-cross-dec.right {
    display: block;
  }
  
  .cm-top-dec.asteroid {
    inset: auto 635px 535px auto;
  }
  
  .cm-grid-wrapper {
    overflow-x: auto;
    cursor: grab; /* Shows the open hand */
    user-select: none; /* Prevents text highlighting while dragging */
    -webkit-user-drag: none; /* Prevents images from being 'dragged' out */
  }
  
/*   .cm-col-headings,
  .cm-cols {
    width: 100%;
  }
 */
  .cm-grid-wrapper.active {
    cursor: grabbing; /* Shows the closed hand */
  }
  
  .cm-layout-flex .standard-cta-flex.center {
    justify-content: center;
  }
}

@media (min-width: 1200px) {
  .cm-top-dec.asteroid {
    inset: auto 733px 535px auto;
  }
}

@media (min-width: 1400px) {
   .container {
    max-width: 1270px;
  }
  
  .cm-top-dec.asteroid {
   inset: auto 944px 496px auto;
  }
}

@media (min-width: 1500px) {
  .cm-top-dec.satellite {
    inset: -100px auto auto -350px;
  }
  
  .cm-bottom-dec.asteroid {
    inset: auto -549px -300px auto;
  }
}

@media (min-width: 1700px) {
  .cm-top-dec.satellite {
    inset: -70px auto auto -450px;
  }
  
  .cm-top-dec.asteroid {
   inset: auto 1050px 496px auto;
  }
}