:root {
  --primary-color: #2563eb;
  --success-color: #10b981;
  --surface-color: #ffffff;
  --surface-secondary: #f8fafc;
  --border-color: #e2e8f0;
  --text-primary: #1e293b;
  --text-secondary: #64748b;
  --shadow: 0 .4rem .6rem -.1rem rgb(0 0 0 / 0.1);
  --radius: .8rem;
  --spacing: 1rem;
}

.product-value-prop {
  margin-bottom: 0;
}

.faq-section ul,
.benefits-section ul {
  margin-block-start: 0;
  margin-block-end: 0;
  margin-top: 0;
  margin-bottom: 0;
}

.selling-points,
.won-awards,
.extra-descriptions {
  margin-top: var(--elem-spac);
  margin-bottom: var(--elem-spac);
}

.section-heading {
  max-width: var(--st-mw);
  font-size: var(--subh-sz);
  line-height: var(--subh-lh);
  margin-bottom: var(--subh-mb);
}

.section-heading:not(:has(+ .section-subheading)) {
  margin-bottom: var(--subh-mb-col);
}

.section-subheading {
  font-size: var(--ss-sz);
  font-weight: var(--ss-fw);
  font-style: var(--ss-fs);
  color: var(--ss-col);
  line-height: var(--ss-lh);
  margin-bottom: var(--ss-mb);
}

.section-subheading+ul,
.section-subheading+.comparison-table-wrapper {
  margin-top: calc(var(--sd-mb) - var(--ss-mb));
}

.section-description:not(.cta-description),
.faqs {
  max-width: var(--st-mw);
  margin-bottom: var(--sd-mb);
}

.item-heading {
  font-size: var(--row-head-sz);
  line-height: var(--row-head-lh);
  margin-bottom: var(--row-head-mb);
}

.item-heading:not(:has(+ .item-subheading)) {
  margin-bottom: var(--row-head-mb-col);
}

.item-subheading {
  font-size: var(--row-subh-sz);
  font-weight: var(--ss-fw);
  font-style: var(--ss-fs);
  color: var(--ss-col);
  line-height: var(--row-subh-lh);
  margin-bottom: var(--row-subh-mb);
}

.award-heading,
.extra-description-heading,
.product-trait-heading,
.single-process-heading {
  font-size: var(--smal-head-sz);
  color: var(--h3-col);
  margin-bottom: var(--smal-head-mb);
}

.section-button {
  background: var(--sec-btn-bg);
  color: var(--sec-btn-col);
  margin-left: auto;
  margin-right: auto;
  margin-top: var(--sect-btn-mt);
  border-radius: var(--btn-rad);
  transition: var(--trans-spee);
}

.section-button:hover {
  background: var(--sec-btn-hov-bg);
  color: var(--sec-btn-hov-col);
}

.sale-tag-prod .sale-tag {
  line-height: 0;
  color: var(--pri-col);
  background: var(--pri-col-supp);
  font-size: 1rem;
  font-weight: 600;
  padding: .3rem .5rem;
  display: flex;
  align-items: center;
  text-transform: uppercase;
  border-radius: 99rem;
}

.trex-star-rating {
  display: flex;
  align-items: center;
  font-size: calc(var(--bod-sz) * 1.2);
  --percent: calc(var(--rating) / 5* 100%);
  line-height: 1;
  transition: .3s;
}

.trex-star-rating::before {
  content: "\2605\2605\2605\2605\2605";
  background: linear-gradient(90deg, var(--star-col-active) var(--percent), var(--star-col-inactive) var(--percent));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

}

.reviews-number::after {
  position: absolute;
  top: 50%;
  right: -.3rem;
  transform: translateY(-50%);
  content: "\2605";
  color: var(--star-col-active);
  margin-left: .3rem;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 1.5rem;
}

.reviews-progress {
  margin-left: 1rem;
}

.star-hover:hover .star-rating-box {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.selling-points,
.pay-logos,
.won-awards,
.extra-descriptions,
.product-traits,
.process,
.benefits {
  list-style: none;
  padding-left: 0;
  display: flex;
}

.sale-tag-prod,
.selling-point,
.product-trait,
.single-process {
  display: flex;
}

.won-awards,
.extra-descriptions,
.single-process,
.product-trait,
.benefits {
  flex-direction: column;
}

.selling-points {
  display: flex;
  flex-direction: column;
}

.selling-points img,
.selling-points svg {
  object-fit: contain;
}

.pay-logos {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.pay-logo-item {
  display: flex;
  justify-content: center;
  align-items: center;
  max-height: var(--pay-h);
  max-width: var(--pay-w);
}

.pay-logo-item svg,
.pay-logo-item img {
  display: flex;
  height: var(--pay-h);
  max-width: var(--pay-w);
  width: fit-content;
  object-fit: contain;
}

.award,
.extra-description,
.benefit-item {
  display: grid;
  grid-template-areas:
    "image-area heading-area"
    "image-area text-area";
  list-style: none;
}

.benefit-item {
  grid-template-columns: 50% 1fr;
  grid-template-rows: auto auto auto 1fr;
  grid-template-areas:
    "image-area kicker-area"
    "image-area heading-area"
    "image-area subheading-area"
    "image-area text-area";
}

.benefit-item.benefit-item--reverse {
  grid-template-columns: 1fr 50%;
  grid-template-areas:
    "kicker-area image-area"
    "heading-area image-area"
    "subheading-area image-area"
    "text-area image-area"
}

.award {
  grid-template-columns: var(--award-size) auto;
}

.extra-description {
  grid-template-columns: 30% 1fr;
}

figure.image-field {
  grid-area: image-area;
  align-self: start;
  margin: auto;
}

.item-kicker {
  width: fit-content;
  grid-area: kicker-area;
}

.award-heading,
.extra-description-heading,
.benefit-heading {
  grid-area: heading-area;
}

.award-figure,
.extra-description-figure,
.benefit-image {
  grid-area: image-area;
}

.award-image,
.extra-description-image,
.benefit-item-image {
  display: block;
}

.benefit-subheading {
  grid-area: subheading-area;
}

.award-text,
.extra-description-text,
.benefit-text {
  grid-area: text-area;
}

.brxe-section.product-traits-section {
  padding-top: 0;
  padding-bottom: 0;
}

.brxe-container.product-traits-container {
  padding-top: var(--traits-pad);
  padding-bottom: var(--traits-pad);
}

.product-traits,
.process {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: auto;
}

.product-trait,
.single-process {
  align-items: center;
  margin-left: auto;
  margin-right: auto;
}

.product-trait-img,
.single-process-img {
  width: 100%;
}

.product-trait .image-field,
.single-process .image-field {
  order: 1;
}


.product-trait-heading,
.single-process-heading {
  order: 2;
  text-align: center;
}

.product-trait-text,
.single-process-text {
  order: 3;
  text-align: center;
}

.comparison-table {
  width: 100%;
  min-width: max-content;
  border-collapse: collapse;
  overflow: hidden;
}

.comparison-table-wrapper {
  position: relative;
  width: 100%;
}

.comparison-scroll-view {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
  scroll-snap-type: x mandatory;
}

.comparison-table-wrapper::after {
  content: '';
  position: absolute;
  bottom: -1.3rem;
  right: .5rem;
  width: 2rem;
  height: 2rem;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23959595' viewBox='0 -960 960 960'%3e%3cpath d='m600-200-57-56 184-184H80v-80h647L544-704l56-56 280 280-280 280Z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%, 70%;
  z-index: 50;
  transition: opacity 0.3s ease, visibility 0.3s;
  opacity: 0;
  visibility: hidden;
}

.comparison-table-wrapper.show-scroll-hint::after {
  opacity: .5;
  visibility: visible;
  animation: scroll-blink 2s infinite;
}

@keyframes scroll-blink {

  0%,
  100% {
    opacity: .3;
    transform: translateY(-50%) translateX(-5px);
  }

  50% {
    opacity: .8;
    transform: translateY(-50%) translateX(5px);
    scale: 1.1;
  }
}

.comparison-table p {
  margin: 0;
  padding: 0;
}

.comp-header-cell {
  text-align: center;
  font-weight: 600;
  scroll-snap-align: center;
}

.comp-header-cell.desc-cell {
  text-align: left;
}

.comp-body-row {
  transition: background-color 0.2s ease;
}

.comp-body-row:last-child {
  border-bottom: none;
}

.comp-cell {
  vertical-align: middle;
  text-align: center;
  scroll-snap-align: center;
}

.comp-cell.desc-cell {
  text-align: left;
}

.comp-plus,
.comp-minus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
  font-weight: bold;
  font-size: 2rem;
  line-height: 1;
  font-family: system-ui, -apple-system, sans-serif;
}

.comp-desc {
  display: inline-block;
}

.section-kicker,
.item-kicker {
  font-family: var(--kick-txt);
  font-size: var(--kick-sz);
  color: var(--kick-col);
  line-height: 1.2;
  margin-bottom: var(--kick-m-bott);
  background-color: var(--kick-bg);
  padding: var(--kick-top) var(--kick-right) var(--kick-bottom) var(--kick-left);
  border: var(--kick-b-w) var(--kick-b-styl) var(--kick-b-col);
  border-radius: var(--kick-b-rad);
}

.item-kicker {
  font-size: calc(var(--kick-sz) * .9);
  line-height: calc(var(--kick-line-height) * .9);
  margin-bottom: calc(var(--kick-m-bott) * .9);
  padding: calc(var(--kick-top) * .9) calc(var(--kick-right) * .9) calc(var(--kick-bottom) * .9) calc(var(--kick-left) * .9);
}

.section-kicker img,
.section-kicker svg {
  width: var(--kick-img-sz);
  height: var(--kick-img-sz);
}

.item-kicker svg,
.item-kicker img {
  display: flex;
  width: calc(var(--kick-img-sz) * .9);
  height: calc(var(--kick-img-sz) * .9);
}

@media (max-width: 600px) {

  .benefit-item,
  .benefit-item.benefit-item--reverse {
    grid-template-columns: 1fr;
    grid-template-areas:
      "kicker-area"
      "heading-area"
      "subheading-area"
      "text-area"
      "image-area";
  }

  .benefit-image {
    margin-top: 1.5rem;
  }
}