/* opx-process — numbered process cards on service pages (production b41a232 on file-integrity-monitoring): heading, then cards 47% wide spread space-around with 50px rows / 20px columns (full width from tablet, 30px rows on mobile), white, 20px corners, soft shadow, padding 48px (32px from tablet). */
.wp-block-group.opx-process.opx-process {
  --opx-process-angle-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 512'%3E%3Cpath fill='%23000' d='M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z'/%3E%3C/svg%3E");
  padding: 4.5% 5%;
}

.wp-block-group.opx-process .opx-process__heading {
  margin: 0 0 50px;
}

.wp-block-group.opx-process .opx-process__rows {
  gap: 50px;
  max-width: 1400px;
  margin: 0 auto;
}

.wp-block-group.opx-process .opx-process__grid {
  justify-content: space-around;
  gap: 50px 20px;
  margin: 0;
}

.wp-block-group.opx-process .opx-process__grid > .wp-block-column {
  flex: 0 0 47%;
  max-width: 47%;
}

.wp-block-group.opx-process .opx-process__card {
  height: 100%;
  box-sizing: border-box;
  padding: 48px;
  border-radius: 20px;
  background: var(--wp--preset--color--surface);
  box-shadow: 0 20px 50px 0 rgba(62, 55, 178, 0.11);
}

@media (max-width: 1024px) {
  .wp-block-group.opx-process .opx-process__grid {
    flex-wrap: wrap;
  }

  .wp-block-group.opx-process .opx-process__grid > .wp-block-column {
    flex-basis: 100%;
    max-width: 100%;
  }

  .wp-block-group.opx-process .opx-process__card {
    padding: 32px;
  }
}

@media (max-width: 767px) {
  .wp-block-group.opx-process.opx-process {
    padding: 9% 5%;
  }

  .wp-block-group.opx-process .opx-process__heading {
    margin-bottom: 30px;
  }

  .wp-block-group.opx-process .opx-process__rows,
  .wp-block-group.opx-process .opx-process__grid {
    gap: 30px 20px;
  }
}

/* Card content: number (line-height 1.1) with 8px above and 16px below, title, text 20px lower. */
.wp-block-group.opx-process .opx-process__card {
  gap: 0;
}

.wp-block-group.opx-process .opx-process__num {
  margin: 8px 0 16px;
  line-height: 1.1;
}

.wp-block-group.opx-process .opx-process__step-title {
  margin: 0;
}

.wp-block-group.opx-process .opx-process__body,
.wp-block-group.opx-process .opx-process__list {
  margin: 20px 0 0;
}

.wp-block-group.opx-process .opx-process__list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.wp-block-group.opx-process .opx-process__list li,
.wp-block-group.opx-process .opx-process__list .wp-block-list-item {
  display: block !important;
  position: relative;
  padding-inline-start: 30px;
  margin: 0;
  font-size: var(--wp--preset--font-size--body-l);
  font-weight: 300;
  line-height: var(--wp--custom--line-height--body-l);
  color: var(--wp--preset--color--ink);
}

/* Elementor Font Awesome angle-right (e-fas-angle-right) — locked to first line, not multi-line block center. */
.wp-block-group.opx-process .opx-process__list li::before,
.wp-block-group.opx-process .opx-process__list .wp-block-list-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 20px;
  height: 20px;
  margin: 0;
  background-color: var(--wp--preset--color--accent);
  -webkit-mask-image: var(--opx-process-angle-right);
  mask-image: var(--opx-process-angle-right);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
}

.wp-block-group.opx-process .opx-process__list li strong {
  font-weight: 400;
}

/* The text keeps its 14.4px paragraph margin as on production; card height comes from the content. */
.wp-block-group.opx-process .opx-process__card {
  min-height: 0;
}

.wp-block-group.opx-process .opx-process__body {
  margin-bottom: 14.4px;
}

@media (max-width: 767px) {
  .wp-block-group.opx-process .opx-process__card {
    padding: 24px;
  }
}

/* AWS uses a chevron; the other service lists retain their angle glyph. */
.wp-block-group.opx-process--aws .opx-process__list li::before {
  top: 7px;
  mask-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%20320%20512%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M285.476%20272.971L91.132%20467.314c-9.373%209.373-24.569%209.373-33.941%200l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505%20256%2034.484%20101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373%2024.569-9.373%2033.941%200L285.475%20239.03c9.373%209.372%209.373%2024.568.001%2033.941z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
}