/*! cvoc-page 1.0.2 | /solution/voice-of-the-customer to Figma 4383:106177 (1920 frame). "What voice of the customer
   analysis tells you" is 3 icon columns here (section .cvoc-tells); the SL tab accordion is hidden on this page. */
.cfh-page .cvoc-tells{position:relative;padding:120px 0 121px}
/* 48/48, Figma breaks after "customer"; 700px keeps that break with the Geist fallback */
.cfh-page .cvoc-tells-h2{margin:0 0 95px;padding:0 36px;max-width:700px;font-family:var(--cfh-display);font-weight:400;font-size:48px;line-height:48px;letter-spacing:-0.96px;color:#1D0A05}
.cfh-page .cvoc-tells-em{font-weight:600}
.cfh-page .cvoc-tells-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.cfh-page .cvoc-tells-col{padding:0 36px}
/* icons sit on one 24px baseline row, 16px above the titles (Figma 1739-1763 -> titles at 1779) */
.cfh-page .cvoc-tells-ico{display:flex;align-items:flex-end;height:24px;margin:0 0 16px}
.cfh-page .cvoc-tells-svg{display:block;flex:none}
.cfh-page .cvoc-tells-title{margin:0 0 16px;max-width:301px;font-family:var(--cfh-display);font-weight:500;font-size:20px;line-height:24px;letter-spacing:-0.4px;color:#1D0A05;text-wrap:balance}
.cfh-page .cvoc-tells-text{margin:0;max-width:322px;font-family:var(--cfh-sans);font-weight:400;font-size:16px;line-height:1.3;letter-spacing:-0.16px;color:#1D0A05;text-wrap:pretty}
/* below 992 the design is ours (site SPEC): one column, SPEC type scale and insets */
@media (max-width:991px){
  .cfh-page .cvoc-tells{padding:64px 0}
  .cfh-page .cvoc-tells-h2{margin-bottom:40px;padding:0 32px;max-width:640px;font-size:40px;line-height:42px;letter-spacing:-0.8px;text-wrap:balance}
  .cfh-page .cvoc-tells-grid{grid-template-columns:minmax(0,1fr);row-gap:40px}
  .cfh-page .cvoc-tells-col{padding:0 32px}
  .cfh-page .cvoc-tells-title,.cfh-page .cvoc-tells-text{max-width:560px}
}
@media (max-width:767px){
  .cfh-page .cvoc-tells{padding:56px 0}
  .cfh-page .cvoc-tells-h2{margin-bottom:32px;padding:0 24px;font-size:30px;line-height:33px;letter-spacing:-0.6px}
  .cfh-page .cvoc-tells-grid{row-gap:32px}
  .cfh-page .cvoc-tells-col{padding:0 24px}
  .cfh-page .cvoc-tells-title{margin-bottom:12px;font-size:18px;line-height:23px;letter-spacing:-0.3px}
  .cfh-page .cvoc-tells-text{line-height:22px}
}
@media (max-width:479px){
  .cfh-page .cvoc-tells-h2,.cfh-page .cvoc-tells-col{padding-left:20px;padding-right:20px}
}

/* ---- hero (Figma: no eyebrow; "Voice of the customer" bold inline, line 1 ends after "reviews"; sub 900 wide) ---- */
.cfh-page .cfh-s02 .cfs-hero-eyebrow{display:none}
.cfh-page .cfh-s02 .cfh-s02-h1-em{display:inline}
.cfh-page .cfh-s02 .cfh-s02-h1-em::after{content:none}
@media (min-width:992px){
  /* Figma: H1 top 199 (111 under the nav), 20px to the sub */
  .cfh-page .cfh-s02 .cfh-s02-h1{max-width:1200px;margin-top:21px;margin-bottom:20px}
  .cfh-page .cfh-s02 .cfh-s02-sub{max-width:900px}
}
/* ---- band: only the voice of the customer dashboard card (Figma 1095x430, 108px around it); no tabs, no copy column.
   The tab autoplay may still switch panels, so panel 2 and its background are pinned. ---- */
.cfh-page .cfh-s03 .cfh-s03-card{aspect-ratio:auto}
.cfh-page .cfh-s03 .cfh-s03-tabs{display:none}
.cfh-page .cfh-s03 .cfh-s03-panel{display:none!important}
.cfh-page .cfh-s03 .cfh-s03-panel[data-cfh-panel="2"]{display:flex!important;justify-content:center;min-height:0;padding:0;background:transparent}
.cfh-page .cfh-s03 [data-cfh-panel="2"] .cfh-s03-copy{display:none}
.cfh-page .cfh-s03 [data-cfh-panel="2"] .cfh-s03-rive{flex:none;width:100%;max-width:1095px;aspect-ratio:1095/430;background:transparent}
.cfh-page .cfh-s03 [data-cfh-panel="2"] .cfh-s03-rive-img{object-fit:contain}
.cfh-page .cfh-s03 [data-cfh-show-for]:not([data-cfh-show-for="2"]){opacity:0!important;visibility:hidden!important}
.cfh-page .cfh-s03 [data-cfh-show-for="2"]{opacity:1!important;visibility:visible!important}
/* ---- feature carousel: Figma title and copy run 477px wide (2 and 4 lines) ---- */
@media (min-width:768px){
  /* Geist runs wider than Figma's Artific: 540px keeps every title on 2 lines like the design */
  .cfh-page [data-cfh-sec="sl-carousel"] .csl-slide-title{max-width:540px}
  .cfh-page [data-cfh-sec="sl-carousel"] .csl-slide-body{max-width:477px}
}
/* ---- CTA band: heading on one line as in Figma (930px at 48px; band 90+48+30+36+90 = 294) ---- */
@media (min-width:992px){
  .cfh-page .cfh-s13 .cfh-s13-head{max-width:none}
}

/* ---- testimonial + FAQ (same in the VoC and CA Figma frames) ---- */
@media (min-width:992px){
  /* Figma pins the attribution 110px under the quote top (quote box 3 lines tall), so 2-line quotes get the same gap */
  .cfh-page .cfh-s10 .cfh-s10-quote{min-height:78px}
  /* Figma answer text runs 549px wide (28 + 549 + 27 padding); 578 wrapped the first answer to 5 lines */
  .cfh-page .cfh-s12 .cfh-s12-panel-inner > .cfs-faq-answer{max-width:604px}
}