/* Client-logo trust bar ("AI-forward HR leaders choose Klaar").
   Reusable copy of the bar on the product pages, for pages built on other templates
   (about, pricing). Sizes are the product pages' 1920-canvas values at laptop scale. */
.kl-trust{position:relative;z-index:1;width:100%;padding:34px 0;overflow:hidden;background:transparent;box-sizing:border-box}
.kl-trust__in{width:min(1200px,calc(100% - 64px));margin:0 auto}
.kl-trust__cap{display:block;margin:0 0 26px;text-align:center;font-family:"Poppins",system-ui,sans-serif;font-size:21px;font-weight:600;line-height:1.3;letter-spacing:.14em;text-transform:uppercase;color:#A83C3C}
.kl-trust__track{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%)}
.kl-trust__run{display:flex;align-items:center;gap:42px;width:max-content;animation:klTrustRun 42s linear infinite}
.kl-trust__track:hover .kl-trust__run{animation-play-state:paused}
.kl-trust__slot{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:112px;height:40px}
/* !important: host pages carry rules like "#page img{height:auto!important}"; :is() matches their id specificity that would let tall marks spill the slot. */
:is(#page,#dc-root,#shell,body) .kl-trust__slot img{display:block;width:112px !important;height:34px !important;max-width:none !important;object-fit:contain;filter:grayscale(1);opacity:.6}
@keyframes klTrustRun{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.kl-trust__run{animation:none;flex-wrap:wrap;justify-content:center;width:auto}}
@media (max-width:899px){
  .kl-trust{padding:26px 0}
  .kl-trust__in{width:calc(100% - 32px)}
  .kl-trust__cap{font-size:15px;margin-bottom:18px}
  .kl-trust__run{gap:28px}
  .kl-trust__slot{width:88px}
  :is(#page,#dc-root,#shell,body) .kl-trust__slot img{width:88px !important}
  :is(#page,#dc-root,#shell,body) .kl-trust__slot img{height:28px !important}
}

/* Same bar on pages authored on the 1920px canvas (scaled to the window, ~0.75x on a
   1440 laptop): sizes are the 1440 values / 0.75 so it reads identically everywhere. */
@media (min-width:900px){
  .kl-trust--canvas{padding:45px 0}
  .kl-trust--canvas .kl-trust__in{width:min(1560px,calc(100% - 96px))}
  .kl-trust--canvas .kl-trust__cap{font-size:28px;margin-bottom:34px}
  .kl-trust--canvas .kl-trust__run{gap:56px}
  .kl-trust--canvas .kl-trust__slot{width:150px;height:52px}
  :is(#page,#dc-root,#shell,body) .kl-trust--canvas .kl-trust__slot img{width:150px !important;height:45px !important}
}
/* Caption and colors are fixed so no page's own label rules restyle it. */
:is(#page,#dc-root,#shell,body) .kl-trust .kl-trust__cap{font-family:"Poppins",system-ui,sans-serif !important;font-weight:600 !important;letter-spacing:.14em !important;text-transform:uppercase !important;color:#A83C3C !important;text-align:center !important}
.kl-trust{background:transparent !important}

/* Desktop: every logo bar scales with the window exactly like the canvas pages' bar (the size on
   the Retention page): 112×34 logos, 21px caption on a 1440 screen, growing and shrinking with the
   window. The homepage's #om-fit wrapper already scales below 1440, so it keeps px as a floor. */
@media (min-width:901px){
  html :is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x) .kl-trust:not(.kl-trust--canvas){padding:2.361vw 0 !important}
  html :is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x) .kl-trust:not(.kl-trust--canvas) .kl-trust__in{width:81.25vw !important;max-width:none !important;margin-left:auto !important;margin-right:auto !important}
  html :is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x) .kl-trust:not(.kl-trust--canvas) .kl-trust__cap{font-size:1.458vw !important;margin-bottom:1.806vw !important}
  html :is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x) .kl-trust:not(.kl-trust--canvas) .kl-trust__run{gap:2.917vw !important}
  html :is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x) .kl-trust:not(.kl-trust--canvas) .kl-trust__slot{width:7.778vw !important;height:2.778vw !important}
  html :is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x) .kl-trust:not(.kl-trust--canvas) .kl-trust__slot img{width:7.778vw !important;height:2.361vw !important;max-width:none !important;max-height:none !important}
  html :is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x) #om-fit .kl-trust:not(.kl-trust--canvas){padding:max(34px,2.361vw) 0 !important}
  html :is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x) #om-fit .kl-trust:not(.kl-trust--canvas) .kl-trust__in{width:max(1170px,81.25vw) !important}
  html :is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x) #om-fit .kl-trust:not(.kl-trust--canvas) .kl-trust__cap{font-size:max(21px,1.458vw) !important;margin-bottom:max(26px,1.806vw) !important}
  html :is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x) #om-fit .kl-trust:not(.kl-trust--canvas) .kl-trust__run{gap:max(42px,2.917vw) !important}
  html :is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x) #om-fit .kl-trust:not(.kl-trust--canvas) .kl-trust__slot{width:max(112px,7.778vw) !important;height:max(40px,2.778vw) !important}
  html :is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x) #om-fit .kl-trust:not(.kl-trust--canvas) .kl-trust__slot img{width:max(112px,7.778vw) !important;height:max(34px,2.361vw) !important}
}