/* Customer stories: full quotations, with no carousel or truncated copy. */
.reviews-section {
  background: var(--canvas);
}

.reviews-heading {
  margin-bottom: 44px;
}

.reviews-heading > p {
  margin-bottom: 16px;
  color: var(--muted);
  font-size: 17px;
  font-weight: 600;
}

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.customer-review {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 40px;
  border-radius: 28px;
  background: #fff;
}

.customer-review h3 {
  color: var(--link);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.02em;
}

.customer-review blockquote {
  margin: 24px 0 32px;
  font-size: 18px;
  line-height: 1.9;
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
}

/* The text stays still while a soft marker sweeps behind each wrapped line. */
.review-highlight {
  color: inherit;
  font-weight: 700;
  background-image: linear-gradient(#fff0a6, #fff0a6);
  background-repeat: no-repeat;
  background-position: left 90%;
  background-size: 100% .7em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.review-highlight[data-highlight-pending] {
  background-size: 0% .7em;
}

.review-highlight.is-highlighted {
  animation: review-marker 1.1s cubic-bezier(.22, .61, .36, 1) both;
}

@keyframes review-marker {
  from { background-size: 0% .7em; }
  to { background-size: 100% .7em; }
}

@media (prefers-reduced-motion: reduce) {
  .review-highlight,
  .review-highlight[data-highlight-pending],
  .review-highlight.is-highlighted {
    animation: none;
    background-size: 100% .7em;
  }
}

@media (forced-colors: active) {
  .review-highlight { text-decoration: underline; text-underline-offset: .15em; }
}

.customer-review figcaption {
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid #e8e8ed;
  font-size: 14px;
  line-height: 1.7;
}

.review-company,
.review-person {
  display: block;
}

.review-company {
  font-weight: 600;
}

.review-person {
  color: var(--muted);
  margin-top: 3px;
}

@media (min-width: 761px) and (max-width: 1000px) {
  .customer-review { padding: 30px; }
  .customer-review blockquote { font-size: 17px; }
}

@media (max-width: 760px) {
  .reviews-heading { margin-bottom: 30px; }
  .reviews-heading > p { font-size: 15px; margin-bottom: 12px; }
  .reviews-grid { grid-template-columns: 1fr; gap: 20px; }
  .customer-review { padding: 30px 26px; border-radius: 24px; }
  .customer-review h3 { font-size: 16px; }
  .customer-review blockquote { margin: 20px 0 28px; font-size: 17px; line-height: 1.85; }
  .customer-review figcaption { padding-top: 20px; font-size: 13px; }
}

@media (max-width: 360px) {
  .customer-review { padding: 28px 22px; }
  .customer-review blockquote { font-size: 16px; }
}
