.customer-stories { color: #061b37; font-family: var(--font-stack-body); background: #fff; }
.customer-stories * { box-sizing: border-box; }
customer-stories-slider { display: block; }
.customer-stories__controls { display: flex; flex: 0 0 auto; gap: 8px; }
.customer-stories__controls[hidden] { display: none; }
.customer-stories__grid:focus-visible { outline: 2px solid var(--action-focus); outline-offset: 3px; }
.customer-stories__header { margin: 0 0 16px; text-align: left; }
.customer-stories__pagination { display: flex; justify-content: center; flex-wrap: wrap; gap: 0; margin-top: 4px; padding-top: 8px; }
.customer-stories__pagination[hidden] { display: none; }
.customer-stories__heading-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.customer-stories__heading-row h2 { min-width: 0; }
.customer-stories__grid::-webkit-scrollbar { display: none; }
.customer-stories h2 { margin: 0; color: #061b37; font-family: var(--font-stack-header); font-weight: var(--font-weight-header); font-size: 35px; line-height: 1.25; letter-spacing: -.025em; overflow-wrap: anywhere; }
.customer-stories__header p { margin: 6px 0 0; color: #536370; font-size: 15px; line-height: 1.7; }
.customer-stories__grid { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 40px) / 3); align-items: stretch; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
.customer-stories__card { display: flex; flex-direction: column; min-width: 0; scroll-snap-align: start; padding: 24px; border: 1px solid #d6dfeb; background: #f5f7f8; }
.customer-stories__stars { margin-bottom: 16px; font-size: 19px; line-height: 1; letter-spacing: 2px; color: #c5cbd3; }
.customer-stories__star-filled { color: #c99b3f; }
.customer-stories h3 { margin: 0 0 12px; font-family: var(--font-stack-header); font-weight: var(--font-weight-header); font-size: 18px; line-height: 1.4; color: #061b37; overflow-wrap: anywhere; }
.customer-stories blockquote { margin: 0 0 16px; padding: 0; border: 0; color: #536370; font-size: 14px; line-height: 1.8; font-style: normal; overflow-wrap: anywhere; }
.customer-stories__author { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.customer-stories__avatar { width: 40px; height: 40px; flex: 0 0 40px; object-fit: cover; }
.customer-stories__author > div { min-width: 0; }
.customer-stories__author strong { display: block; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.customer-stories__author span { display: block; margin-top: 4px; font-size: 12px; color: #657187; overflow-wrap: anywhere; }
.customer-stories__author .customer-stories__avatar--placeholder { display: inline-flex; align-items: center; justify-content: center; margin: 0; overflow: hidden; background: var(--avatar-background, #244459); color: #fff; font-size: 17px; font-weight: 600; line-height: 1; }
.customer-stories__product { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; padding-top: 16px; border-top: 1px solid #d6dfeb; color: #244459; font-size: 13px; line-height: 1.5; text-decoration: none; overflow-wrap: anywhere; }
.customer-stories__product:hover { text-decoration: underline; text-underline-offset: 3px; }
.customer-stories a:focus-visible { outline: 2px solid var(--action-focus); outline-offset: 3px; }
.customer-stories__action { margin-top: 28px; text-align: center; }
.customer-stories__placeholder p { color: #657187; font-size: 14px; line-height: 1.7; }
@media (min-width:768px) and (max-width:1023px) {
  .customer-stories h2 { font-size: 25px; }
  .customer-stories__grid { grid-auto-columns: calc((100% - 16px) / 2); gap: 16px; }
  .customer-stories__card { padding: 20px; }

}
@media (max-width:767px) {
  .customer-stories h2 { font-size: 22px; }
  .customer-stories__header { margin-bottom: 12px; }
  .customer-stories__header p { font-size: 14px; }
  .customer-stories__grid { grid-auto-columns: 100%; gap: 16px; }
  .customer-stories__card { padding: 20px; }
  .customer-stories__action { margin-top: 24px; }
  .customer-stories__action .m-button { width: 100%; }
}