/* ==========================================================================
   Customer Testimonials  (/company/customer-testimonials/)

   The third Company child. Shared, from product-family.css: the filter bar
   (.pf-filter, .pf-empty) that js/collection-filter.js drives, the quote
   attribution and card meta (.pf-res-card__who/__meta/__type/__date), and
   .pf-related. Page-local:
     .ctm-list        the band: head, the filter bar, the card grid
     .ctm-card        one testimonial in the doc's entry template: format and
                      date, company, pull quote, full quote, who, then the
                      products / industry / measured-result facts and the
                      video or press-release link

   Band rhythm is the homepage's: 48 / 64 / 80. Bands alternate white and
   --ps-color-neutral-2-100. No two adjacent bands share a tint:

     §1  banner         white          §3  FAQ       white
     §2  testimonials   neutral-2-100  §4  related   neutral-2-100
   ========================================================================== */

#testimonials{scroll-margin-top:96px}
.ctm-card{scroll-margin-top:96px}

/* --------------------------------------------------------------------------
   §2 The band
   -------------------------------------------------------------------------- */
.ctm-list{padding-block:48px}
.ctm-list__head,.ctm-list__wrap{grid-column-end:span var(--ps-grid-columns)}
.ctm-list__head{margin-bottom:28px}
.ctm-list__title{color:var(--ps-color-neutral-3-500);margin:0 0 12px}
.ctm-list__lead{color:var(--ps-color-secondary-5-500);margin:0;max-width:70ch}
@media (min-width:640px){.ctm-list{padding-block:64px}}
@media (min-width:1024px){.ctm-list{padding-block:80px}}
@media (min-width:1350px){
  .ctm-list__head,.ctm-list__wrap{grid-column-start:2;grid-column-end:span 10}
}

/* three selects: the shared bar goes three across from 640 and five from
   1024; hold it at three */
@media (min-width:1024px){
  .ctm-filter__selects{grid-template-columns:repeat(3,minmax(0,1fr))}
}

.ctm-list__grid{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr;gap:16px;align-items:start;
}
.ctm-list__grid[hidden]{display:none}
@media (min-width:1024px){
  .ctm-list__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* --------------------------------------------------------------------------
   A testimonial
   -------------------------------------------------------------------------- */
.ctm-card{
  display:flex;flex-direction:column;
  background:var(--sv-white);
  border:1px solid var(--ps-color-neutral-2-300);border-radius:16px;
  padding:22px 20px;
  transition:border-color .25s ease-out;
}
.ctm-card[hidden]{display:none}
.ctm-card:hover{border-color:var(--ps-color-neutral-2-500)}
.ctm-card__company{margin:0 0 10px;font:500 17px/24px var(--ps-font);letter-spacing:normal;color:var(--ps-color-neutral-3-500)}
.ctm-card__pull{
  margin:0 0 14px;padding-left:14px;border-left:2px solid var(--ps-color-brand-500);
  font:500 16px/24px var(--ps-font);letter-spacing:normal;color:var(--ps-color-neutral-3-500);
}
.ctm-card__quote{margin:0 0 12px}
.ctm-card__quote p{
  margin:0 0 10px;
  font:400 14px/22px var(--ps-font);letter-spacing:normal;color:var(--ps-color-secondary-5-500);
}
.ctm-card__quote p:last-child{margin-bottom:0}
.ctm-card .pf-res-card__who{margin:0 0 16px}
.ctm-card__facts{
  margin:0;padding-top:14px;border-top:1px solid var(--ps-color-neutral-2-300);
  display:grid;gap:8px;
}
.ctm-card__facts > div{display:grid;grid-template-columns:128px minmax(0,1fr);gap:12px}
.ctm-card__facts dt{font:500 12px/19px var(--ps-font);letter-spacing:.02em;color:var(--ps-color-neutral-3-500)}
.ctm-card__facts dd{margin:0;font:400 13px/19px var(--ps-font);letter-spacing:normal;color:var(--ps-color-secondary-5-500)}
/* links inside a <dd> are not themselves styled anchors; give them the
   site's link colour or they read as body text */
.ctm-card__facts a{color:var(--ps-color-brand-600);text-decoration:underline;text-underline-offset:2px}
.ctm-card__facts a:hover{color:var(--ps-color-brand-500)}
/* the doc wants the empty result visible, so the gap is: quieter, not hidden */
.ctm-card__none{color:var(--ps-color-neutral-2-900);font-style:italic}
.ctm-card__link{margin-top:16px;align-self:flex-start}
@media (max-width:479.98px){
  .ctm-card__facts > div{grid-template-columns:1fr;gap:2px}
}

/* phones: the large button can be wider than a 320px column; let it wrap */
@media (max-width:639.98px){
  .page-banner__ctas .ps-btn--large{max-width:100%}
  .page-banner__ctas .ps-btn--large .ps-btn__text{white-space:normal;min-width:0}
}

/* --------------------------------------------------------------------------
   §4 Related: four tiles, two across from 640, four from 1024; six with the
   two held tiles switched on, three across
   -------------------------------------------------------------------------- */
@media (min-width:640px){.pf-related__list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){
  .pf-related__list{grid-template-columns:repeat(4,minmax(0,1fr))}
  .pf-related__list:has(> li:nth-child(5)){grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1350px){.pf-related__inner{grid-column-start:2;grid-column-end:span 10}}

@media (prefers-reduced-motion:reduce){.ctm-card{transition:none}}

/* --------------------------------------------------------------------------
   Band run for this page
   -------------------------------------------------------------------------- */
.ctm-list,.pf-related{
  background:var(--ps-color-neutral-2-100);
  border-block:1px solid var(--ps-color-neutral-2-300);
}
.faq{background:var(--sv-white)}

/* Customer Testimonials round, 2026-09-29. CTEST-01: the live page's
   customer logo strip (one composite image) under the banner action. */
.ctm-logos{margin-top:32px}
.ctm-logos__img{display:block;width:100%;max-width:960px;height:auto}