/* Home page polish (tickets 10 and 12): the four module cards (Perform, Develop, Engage, Reward).
   10: the Perform card was wider than the other three (1.28fr against 1fr) and the Develop header was taller than the
       rest because its two-line subtitle pushed its list lower. All four are the same width and their headers the same
       height now. Perform keeps its coral border and coral header.
   12: the header bands had square corners that poked out of the rounded card, so each band now has the card's own
       inner corner radius. */
@media (min-width:901px){
  :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):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) #dc-root .pw-groups{grid-template-columns:repeat(4,minmax(0,1fr)) !important}
}
: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):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) #dc-root .pw-group .pw-g-head{min-height:118px !important;border-radius:15px 15px 0 0 !important}
: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):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) #dc-root .pw-group--perform .pw-g-head{border-radius:13px 13px 0 0 !important}

/* Ticket 69: the sentence under "Secure & Trusted" was 23px while the sentence under the call to action above it is
   21px, in the same font and colour. It matches now. */
: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):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) #sec-trust p[style*="font-size:23px"]{font-size:21px !important;line-height:32px !important}

/* Ticket 117: on desktop the hero picture (integration logos, review card, Scout badge) started well below the headline,
   leaving an empty top-right corner and pushing the card past the fold. It is lifted so the "100+ Integrations" line
   sits level with the top of the headline. The picture sits at a different height on each screen size, so the lift is
   set per size range. The picture's own box is what sets the hero's height, so the hero is shortened by nearly the same
   amount (a negative bottom margin): otherwise the space the picture left behind showed as a big gap before the
   "AI-forward HR teams" band. */
@media (min-width:901px) and (max-width:1299px){
  :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):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) #dc-root .pph .visual{transform:translateY(-215px) !important}
  :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):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) #dc-root #predict-hero .hero-in{margin-bottom:-125px !important}
}
@media (min-width:1300px) and (max-width:1699px){
  :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):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) #dc-root .pph .visual{transform:translateY(-240px) !important}
  :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):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) #dc-root #predict-hero .hero-in{margin-bottom:-145px !important}
}
@media (min-width:1700px){
  :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):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) #dc-root .pph .visual{transform:translateY(-103px) !important}
  :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):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) #dc-root #predict-hero .hero-in{margin-bottom:-30px !important}
}