/* 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 that its top (the "100+ Integrations"
   line) sits level with the top of the headline.
   The distance to lift grows with the screen width, and the page has three layouts: up to 1559px, 1560 to 1699px and 1700px
   and up. Fixed amounts for a few width ranges were right at only some widths: on a 13-inch laptop at 1680px the picture
   was pushed up under the menu bar (the integration icons looked cut in half) and the hero was cut short, clipping the
   "See Klaar in action" button. The lift is now worked out from the width: measured on the page without any lift, then fitted
   with straight lines (accurate to about 3px), so every width in between is right too. Below 1440px the whole home page is
   scaled down to fit the screen, so the amounts up to 1440px are in page pixels (they come out smaller on screen by the
   same factor); from 1441px the page is not scaled.
   The picture's own box sets the hero's height, so up to 1559px the hero is shortened by a matching negative bottom margin
   (the picture ends 45px above the next band); from 1560px the page's own layout already leaves the right room. */
@media (min-width:901px) and (max-width:1440px){
  :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(calc(-174px - (100vw - 901px) * .1225)) !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:calc(-51px - (100vw - 901px) * .1744) !important}
}
@media (min-width:1441px) and (max-width:1559px){
  :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(calc(-240px - (100vw - 1440px) * .14)) !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:calc(-145px - (100vw - 1440px) * .14) !important}
}
@media (min-width:1560px) 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(calc(-87px - (100vw - 1560px) * .052)) !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(-104px) !important}
}

/* Ticket 25 (home, "More than visibility, foresight."): the Scout and crystal ball picture is now the one with Klaar's real K,
   and it is fitted inside the pink circle: the dog's tail and the ball's base used to stick out of it.
   The smallest circle around everything drawn in the picture (tail, ball base, sparkles) has a radius of 51% of the picture's
   width and its centre is 2.5% left of and 11.7% below the picture's centre; the pink circle is 96% of the picture's width.
   Scaling the picture to 89% and moving it by the offset below puts that circle in the middle of the pink one, with a small margin. */
: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 .fs-orb img{transform:translate(2.2%,-10.4%) scale(.89) !important;transform-origin:50% 50% !important}

/* Customer quotes on the home page ("Customers feel the Klaar difference."), ticket 66.
   Logos: each file had a different amount of empty space around the drawing and every logo was forced to the same height, so
   Zenwork looked huge and Vidyard tiny; NewGlobe's file drew nothing at all. The logos are now trimmed to their drawing (images/home/quote-logos,
   NewGlobe uses the working file from the case-study page) and each sits in the same box: at most 34px tall and 150px wide, all in the same grey.
   Layout: the author row used to follow the quote, so it sat lower on cards with a three-line quote; it is now pinned to the bottom of every card. */
: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 section.tr .tr-mark{height:36px !important;min-width:0 !important;width:150px !important;display:flex !important;align-items:center !important;justify-content:flex-end !important;margin-left:auto !important;flex:none !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 section.tr .tr-mark img{height:auto !important;width:auto !important;max-height:34px !important;max-width:150px !important;object-fit:contain !important;display:block !important;filter:grayscale(1) !important;opacity:.78 !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 section.tr .tr-card{display:flex !important;flex-direction:column !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 section.tr .tr-card figcaption{margin-top:auto !important}

/* Tickets 71 and 113: the gaps between home page sections ran from about 40px to about 225px. They are evened out around
   120px, the gap between the hero and the "AI-forward HR teams" line (desktop only; phones keep their own spacing).
   Too tight, now about 100px: the logo strip above the "What matters to you most?" card (was 41px, ticket 113), and
   the Armstrong card above the G2 reviews line (was 24px).
   Too big, now about 120px: customer quotes to "Case studies" (was ~226px), the G2 line to "Behind HR lines" (~200px),
   blog cards to "Get started" (~190px), and the call-to-action notes to "Security & trust" (~185px). */
@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) section.pains-intro{padding-top:104px !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) section.cases{padding-top:56px !important; padding-bottom:56px !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) section.cases .cs-sproof{margin-top:44px !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) section#klcta{padding-top:48px !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) section#sec-trust{padding-top:48px !important}
}

/* The "Meet Scout" diagram's left-hand pillars (Perform, Develop, Engage, Reward) can be clicked now (tickets 11, 63). */
: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) .sx__pillars .sx__pill{cursor:pointer;transition:border-color .2s ease,background-color .2s ease,box-shadow .2s ease}
: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) .sx__pillars .sx__pill:not(.sx__pill--on):hover{border-color:#E9A3A0 !important;background-color:#FFF4F2 !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) .sx__pillars .sx__pill:focus{outline:none}
: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) .sx__pillars .sx__pill:focus-visible{outline:2px solid #E85A5A !important;outline-offset:2px}