.repeatable-table-layout {
  padding: 100px 40px;
}

.repeatable-table-layout .wrap {
  width: 100%;
  max-width: 996px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  gap: 60px;
}

.repeatable-table-layout .wrap .content-main-wrap {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  gap: 32px;
  width: 100%;
}

.repeatable-table-layout .wrap .content {
  overflow: auto;
  width: 100%;
}

.repeatable-table-layout .button-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
}

.repeatable-table-layout .button-wrapper .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  margin: 0;
  padding: 24px 40px;
  border-radius: 200px;
  background: #ef5c86;
  border: 1px solid #ef5c86;
  color: #ffffff;
  font-family: Roboto, sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 18px;
  letter-spacing: 0.36px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  word-break: break-word;
  box-sizing: border-box;
}

.repeatable-table-layout .button-wrapper .btn:hover {
  background: #370965;
  border-color: #370965;
  color: #ffffff;
}

.repeatable-table-layout .button-wrapper .btn:focus,
.repeatable-table-layout .button-wrapper .btn:active {
  background: #ef5c86;
  border-color: #ef5c86;
  color: #ffffff;
}

.repeatable-table-layout .top-text {
  width: 100%;
  max-width: 996px;
  margin: 0 auto;
  margin-bottom: 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.repeatable-table-layout .top-text h2 {
  font-family: 'Roboto';
  font-size: 36px;
  font-weight: 500;
  line-height: 46px;
  text-align: center;
  margin: 0;
  color: #000000;
}

.repeatable-table-layout .top-text .wysiwyg-content p {
  text-align: center;
}

.repeatable-table-layout .wrap table thead {
  color: #fff;
  font-family: Lato;
  font-size: 18px;
  line-height: 26px;
  text-align: left;
}

.repeatable-table-layout .wrap table thead tr th,
.repeatable-table-layout .wrap table tbody tr td {
  padding: 16px 24px;
}

.repeatable-table-layout .wrap table thead tr th {
  font-weight: 500 !important;
  font-family: 'Roboto';
  font-size: 18px;
  line-height: 26px;
}

.repeatable-table-layout .wrap table tbody {
  border: none;
}

.repeatable-table-layout .wrap table tbody tr:nth-child(odd) {
  background: #F2F2F2;
}

.repeatable-table-layout .wrap table tbody tr td {
  padding: 16px 24px;
  text-align: left;
  color: #3A3A3B;
  vertical-align: text-top;
  font-family: Roboto;
  font-weight: 400;
  font-size: 18px;
  line-height: 26px;
  letter-spacing: 0;
  border: 0;
  border-right: 1px solid #DADADA;
}

.repeatable-table-layout .wrap table tbody tr td:first-child {
  color: #141414;
  font-family: Roboto;
  font-weight: 500;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: 0;
  text-transform: capitalize;
}

.repeatable-table-layout .wrap table tbody tr td:last-child {
  border-right: 0;
}

.repeatable-table-layout .wrap table thead tr th:first-child {
  background: #EF5C86;
  border-color: #EBEBEE;
  min-width: 333px;
}

.repeatable-table-layout .wrap table thead tr th:nth-child(2) {
  background: #EF5C86;
  border-color: #EBEBEE;
}

.repeatable-table-layout .wrap .doubleScroll-scroll-wrapper {
  margin-bottom: 24px;
  height: 8px;
}

/* width */
.repeatable-table-layout .wrap .content .wysiwyg-content::-webkit-scrollbar,
.repeatable-table-layout .wrap .doubleScroll-scroll-wrapper::-webkit-scrollbar {
  height: 8px;
}

/* Track */
.repeatable-table-layout .wrap .content .wysiwyg-content::-webkit-scrollbar-track,
.repeatable-table-layout .wrap .doubleScroll-scroll-wrapper::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
.repeatable-table-layout .wrap .content .wysiwyg-content::-webkit-scrollbar-thumb,
.repeatable-table-layout .wrap .doubleScroll-scroll-wrapper::-webkit-scrollbar-thumb {
  background: #370965;
}

/* Handle on hover */
.repeatable-table-layout .wrap .content .wysiwyg-content::-webkit-scrollbar-thumb:hover,
.repeatable-table-layout .wrap .doubleScroll-scroll-wrapper::-webkit-scrollbar-thumb:hover {
  background: #370965;
}


@media screen and (max-width: 767px) {
  .repeatable-table-layout {
    padding: 40px 20px;
  }

  .repeatable-table-layout .wrap .content-main-wrap {
    gap: 24px;
  }

  .repeatable-table-layout .button-wrapper .btn {
    width: 100%;
    min-height: 64px;
    padding: 20px 40px;
    font-size: 16px;
    line-height: 16px;
    letter-spacing: 0.32px;
  }

  .repeatable-table-layout .wrap table thead tr th:first-child,
  .repeatable-table-layout .wrap table thead tr th:nth-child(2) {
    min-width: 260px;
  }

  .repeatable-table-layout .top-text h2 {
    font-size: 32px;
    line-height: 40px;
    text-align: center;
  }

  .repeatable-table-layout .wrap table thead tr th,
  .repeatable-table-layout .wrap table tbody tr td {
    padding: 12px 20px;
  }

  .repeatable-table-layout .wrap table {
    margin-bottom: 20px;
  }

  .repeatable-table-layout .wrap table tbody tr td {
    font-size: 16px;
    line-height: 24px;
  }

  .repeatable-table-layout .wrap table thead tr th {
    font-size: 16px;
    line-height: 24px;
  }

  .repeatable-table-layout .wrap table tbody tr td:first-child {
    font-size: 18px;
    line-height: 26px;
  }
}

@media (min-width: 1280px) {
  .repeatable-table-layout .wrap .content {
    overflow: hidden;
  }
}

.repeatable-table-layout .wrap table {
  border: 0;
}

/*
 * New table variant — Figma 22335:7996 / 22335:8590
 * Class "table--blue-bar" can be on <table> and/or <figure class="wp-block-table">.
 * Does not change the default pink-header table styles.
 */
.repeatable-table-layout .wysiwyg-content figure.wp-block-table.table--blue-bar,
.repeatable-table-layout .wysiwyg-content figure.wp-block-table:has(table.table--blue-bar) {
  display: block;
  width: 100%;
  margin: 0;
  border: 0;
  overflow: hidden;
}

.repeatable-table-layout .wysiwyg-content figure.wp-block-table.table--blue-bar,
.repeatable-table-layout .wysiwyg-content figure.wp-block-table:has(table.table--blue-bar),
.repeatable-table-layout .wysiwyg-content figure.wp-block-table.table--blue-bar.has-text-align-center,
.repeatable-table-layout .wysiwyg-content figure.wp-block-table.has-text-align-center:has(table.table--blue-bar) {
  text-align: left !important;
}

.repeatable-table-layout .wysiwyg-content table.table--blue-bar,
.repeatable-table-layout .wysiwyg-content figure.table--blue-bar table,
.repeatable-table-layout .wysiwyg-content figure:has(table.table--blue-bar) table {
  width: 100%;
  margin: 0;
  border: 0 !important;
  /* Blue accent bar — border-top works reliably on <table> */
  border-top: 12px solid #4d5bb0 !important;
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
  text-align: left !important;
}

/* Hide empty header row — bar is the table border-top */
.repeatable-table-layout .wysiwyg-content table.table--blue-bar thead,
.repeatable-table-layout .wysiwyg-content figure.table--blue-bar table thead,
.repeatable-table-layout .wysiwyg-content figure:has(table.table--blue-bar) table thead {
  display: none;
}

.repeatable-table-layout .wysiwyg-content table.table--blue-bar tbody tr:nth-child(odd) td,
.repeatable-table-layout .wysiwyg-content figure.table--blue-bar table tbody tr:nth-child(odd) td,
.repeatable-table-layout .wysiwyg-content figure:has(table.table--blue-bar) table tbody tr:nth-child(odd) td {
  background-color: #f2f2f2 !important;
}

.repeatable-table-layout .wysiwyg-content table.table--blue-bar tbody tr:nth-child(even) td,
.repeatable-table-layout .wysiwyg-content figure.table--blue-bar table tbody tr:nth-child(even) td,
.repeatable-table-layout .wysiwyg-content figure:has(table.table--blue-bar) table tbody tr:nth-child(even) td {
  background-color: #ffffff !important;
}

.repeatable-table-layout .wysiwyg-content table.table--blue-bar tbody tr td,
.repeatable-table-layout .wysiwyg-content figure.table--blue-bar table tbody tr td,
.repeatable-table-layout .wysiwyg-content figure:has(table.table--blue-bar) table tbody tr td {
  padding: 16px 32px !important;
  vertical-align: top;
  border: 0 !important;
  border-right: 1px solid #ebebee !important;
  color: #3a3a3b;
  font-family: Roboto, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0;
  text-align: left !important;
  min-width: 0 !important;
}

.repeatable-table-layout .wysiwyg-content table.table--blue-bar tbody tr td:last-child,
.repeatable-table-layout .wysiwyg-content figure.table--blue-bar table tbody tr td:last-child,
.repeatable-table-layout .wysiwyg-content figure:has(table.table--blue-bar) table tbody tr td:last-child {
  border-right: 0 !important;
}

.repeatable-table-layout .wysiwyg-content table.table--blue-bar tbody tr td:first-child,
.repeatable-table-layout .wysiwyg-content figure.table--blue-bar table tbody tr td:first-child,
.repeatable-table-layout .wysiwyg-content figure:has(table.table--blue-bar) table tbody tr td:first-child {
  width: 38.453% !important; /* 383 / 996 */
  color: #141414;
  font-family: Roboto, sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 30px;
  letter-spacing: 0;
  text-transform: none;
}

.repeatable-table-layout .wysiwyg-content table.table--blue-bar tbody tr td p,
.repeatable-table-layout .wysiwyg-content figure.table--blue-bar table tbody tr td p,
.repeatable-table-layout .wysiwyg-content figure:has(table.table--blue-bar) table tbody tr td p {
  margin: 0 0 18px;
  text-align: left !important;
}

.repeatable-table-layout .wysiwyg-content table.table--blue-bar tbody tr td p:last-child,
.repeatable-table-layout .wysiwyg-content figure.table--blue-bar table tbody tr td p:last-child,
.repeatable-table-layout .wysiwyg-content figure:has(table.table--blue-bar) table tbody tr td p:last-child {
  margin-bottom: 0;
}

.repeatable-table-layout .wysiwyg-content table.table--blue-bar tbody tr td *,
.repeatable-table-layout .wysiwyg-content figure.table--blue-bar table tbody tr td *,
.repeatable-table-layout .wysiwyg-content figure:has(table.table--blue-bar) table tbody tr td * {
  text-align: left !important;
}

.repeatable-table-layout .wysiwyg-content table.table--blue-bar tbody tr td a,
.repeatable-table-layout .wysiwyg-content table.table--blue-bar tbody tr td u,
.repeatable-table-layout .wysiwyg-content table.table--blue-bar tbody tr td strong,
.repeatable-table-layout .wysiwyg-content table.table--blue-bar tbody tr td b,
.repeatable-table-layout .wysiwyg-content table.table--blue-bar tbody tr td ul,
.repeatable-table-layout .wysiwyg-content table.table--blue-bar tbody tr td ol,
.repeatable-table-layout .wysiwyg-content table.table--blue-bar tbody tr td li,
.repeatable-table-layout .wysiwyg-content figure.table--blue-bar table tbody tr td a,
.repeatable-table-layout .wysiwyg-content figure.table--blue-bar table tbody tr td u,
.repeatable-table-layout .wysiwyg-content figure.table--blue-bar table tbody tr td strong,
.repeatable-table-layout .wysiwyg-content figure.table--blue-bar table tbody tr td b,
.repeatable-table-layout .wysiwyg-content figure.table--blue-bar table tbody tr td ul,
.repeatable-table-layout .wysiwyg-content figure.table--blue-bar table tbody tr td ol,
.repeatable-table-layout .wysiwyg-content figure.table--blue-bar table tbody tr td li,
.repeatable-table-layout .wysiwyg-content figure:has(table.table--blue-bar) table tbody tr td a,
.repeatable-table-layout .wysiwyg-content figure:has(table.table--blue-bar) table tbody tr td u,
.repeatable-table-layout .wysiwyg-content figure:has(table.table--blue-bar) table tbody tr td strong,
.repeatable-table-layout .wysiwyg-content figure:has(table.table--blue-bar) table tbody tr td b,
.repeatable-table-layout .wysiwyg-content figure:has(table.table--blue-bar) table tbody tr td ul,
.repeatable-table-layout .wysiwyg-content figure:has(table.table--blue-bar) table tbody tr td ol,
.repeatable-table-layout .wysiwyg-content figure:has(table.table--blue-bar) table tbody tr td li {
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

/* Kill default pink header / min-widths when this variant is used */
.repeatable-table-layout .wysiwyg-content table.table--blue-bar thead tr th,
.repeatable-table-layout .wysiwyg-content table.table--blue-bar thead tr th:first-child,
.repeatable-table-layout .wysiwyg-content table.table--blue-bar thead tr th:nth-child(2),
.repeatable-table-layout .wysiwyg-content figure.table--blue-bar table thead tr th,
.repeatable-table-layout .wysiwyg-content figure.table--blue-bar table thead tr th:first-child,
.repeatable-table-layout .wysiwyg-content figure.table--blue-bar table thead tr th:nth-child(2),
.repeatable-table-layout .wysiwyg-content figure:has(table.table--blue-bar) table thead tr th,
.repeatable-table-layout .wysiwyg-content figure:has(table.table--blue-bar) table thead tr th:first-child,
.repeatable-table-layout .wysiwyg-content figure:has(table.table--blue-bar) table thead tr th:nth-child(2) {
  background: transparent !important;
  border: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
}

/* Tablet + mobile: stack rows */
@media screen and (max-width: 1023px) {
  .repeatable-table-layout .wysiwyg-content table.table--blue-bar,
  .repeatable-table-layout .wysiwyg-content figure.table--blue-bar table,
  .repeatable-table-layout .wysiwyg-content figure:has(table.table--blue-bar) table {
    table-layout: auto;
  }

  .repeatable-table-layout .wysiwyg-content table.table--blue-bar tbody,
  .repeatable-table-layout .wysiwyg-content table.table--blue-bar tr,
  .repeatable-table-layout .wysiwyg-content figure.table--blue-bar table tbody,
  .repeatable-table-layout .wysiwyg-content figure.table--blue-bar table tr,
  .repeatable-table-layout .wysiwyg-content figure:has(table.table--blue-bar) table tbody,
  .repeatable-table-layout .wysiwyg-content figure:has(table.table--blue-bar) table tr {
    display: block;
    width: 100%;
  }

  .repeatable-table-layout .wysiwyg-content table.table--blue-bar tbody tr td,
  .repeatable-table-layout .wysiwyg-content table.table--blue-bar tbody tr td:first-child,
  .repeatable-table-layout .wysiwyg-content figure.table--blue-bar table tbody tr td,
  .repeatable-table-layout .wysiwyg-content figure.table--blue-bar table tbody tr td:first-child,
  .repeatable-table-layout .wysiwyg-content figure:has(table.table--blue-bar) table tbody tr td,
  .repeatable-table-layout .wysiwyg-content figure:has(table.table--blue-bar) table tbody tr td:first-child {
    display: block;
    width: 100% !important;
    max-width: 100%;
    border-right: 0 !important;
    box-sizing: border-box;
  }

  .repeatable-table-layout .wysiwyg-content table.table--blue-bar tbody tr td:first-child,
  .repeatable-table-layout .wysiwyg-content figure.table--blue-bar table tbody tr td:first-child,
  .repeatable-table-layout .wysiwyg-content figure:has(table.table--blue-bar) table tbody tr td:first-child {
    padding: 16px 20px 0 !important;
  }

  .repeatable-table-layout .wysiwyg-content table.table--blue-bar tbody tr td:last-child,
  .repeatable-table-layout .wysiwyg-content figure.table--blue-bar table tbody tr td:last-child,
  .repeatable-table-layout .wysiwyg-content figure:has(table.table--blue-bar) table tbody tr td:last-child {
    padding: 16px 20px !important;
  }
}

@media screen and (max-width: 767px) {
  .repeatable-table-layout .wysiwyg-content table.table--blue-bar tbody tr td,
  .repeatable-table-layout .wysiwyg-content figure.table--blue-bar table tbody tr td,
  .repeatable-table-layout .wysiwyg-content figure:has(table.table--blue-bar) table tbody tr td {
    font-size: 16px;
    line-height: 24px;
  }

  .repeatable-table-layout .wysiwyg-content table.table--blue-bar tbody tr td:first-child,
  .repeatable-table-layout .wysiwyg-content figure.table--blue-bar table tbody tr td:first-child,
  .repeatable-table-layout .wysiwyg-content figure:has(table.table--blue-bar) table tbody tr td:first-child {
    font-size: 18px;
    line-height: 26px;
    text-transform: capitalize;
  }

  .repeatable-table-layout .wysiwyg-content table.table--blue-bar tbody tr td p,
  .repeatable-table-layout .wysiwyg-content figure.table--blue-bar table tbody tr td p,
  .repeatable-table-layout .wysiwyg-content figure:has(table.table--blue-bar) table tbody tr td p {
    margin: 0;
  }

  .repeatable-table-layout .wysiwyg-content table.table--blue-bar tbody tr td p + p,
  .repeatable-table-layout .wysiwyg-content figure.table--blue-bar table tbody tr td p + p,
  .repeatable-table-layout .wysiwyg-content figure:has(table.table--blue-bar) table tbody tr td p + p {
    margin-top: 16px;
  }
}