/* Page hero, built from the Integrations hero design ("Integrations Hero.html"):
   copy on the left, Scout on a coral disc with two slow dashed rings on the right.
   Used by the product/section pages so every hero shares one layout and type scale. */
.kl-hero{position:relative;z-index:1;width:min(1200px,calc(100% - 64px));margin:0 auto;padding:clamp(40px,5vw,72px) 0}
.kl-hero__row{display:flex;align-items:center;gap:clamp(28px,4vw,64px);flex-wrap:wrap}
.kl-hero__copy{flex:1 1 460px;min-width:0}
.kl-hero__eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0 0 22px;font-family:"Poppins",system-ui,sans-serif;font-size:17px;line-height:24px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#A83C3C}
.kl-hero__eyebrow::before{content:"";width:11px;height:11px;border-radius:50%;background:#FF6B6B;flex:none}
/* Size comes from the sitewide H1 standard (same as every other page hero). */
.kl-hero__h1{margin:0;max-width:none;color:#111110;text-wrap:pretty;text-align:left}
.kl-hero__h1 em{font-style:normal;color:#A83C3C}
.kl-hero__p{margin:26px 0 0;max-width:62ch;font-family:"Poppins",system-ui,sans-serif;font-size:19px;line-height:30px;color:#3B3B41;text-wrap:pretty}
.kl-hero__p + .kl-hero__p{margin-top:10px}
.kl-hero__accent{display:block;margin-top:30px;font-family:"Caveat",cursive;font-size:32px;line-height:1.1;color:#FF6B6B}
.kl-hero__cta{display:inline-flex;align-items:center;gap:10px;margin-top:32px;height:56px;padding:0 30px;border-radius:999px;background:#FF6B6B;color:#FFF9F4;font-family:"Poppins",system-ui,sans-serif;font-size:17px;font-weight:600;text-decoration:none;transition:background .2s ease,transform .2s ease}
.kl-hero__cta:hover{background:#DB5252;transform:translateY(-2px)}
.kl-hero__cta svg{width:18px;height:18px}
.kl-hero__art{position:relative;flex:none;width:260px;display:flex;align-items:center;justify-content:center}
.kl-hero__disc{position:relative;width:220px;aspect-ratio:1;display:flex;align-items:center;justify-content:center;isolation:isolate}
.kl-hero__disc::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:50%;background:#FF6B6B;box-shadow:0 26px 50px -14px rgba(168,60,60,.45)}
.kl-hero__disc--ink::before{background:#2A2A2E;box-shadow:0 26px 50px -14px rgba(20,19,22,.4)}
.kl-hero__ring{position:absolute;border-radius:50%;border:1px dashed rgba(255,107,107,.45);animation:klHeroSpin 44s linear infinite}
.kl-hero__ring--2{inset:-14%;border-color:rgba(255,107,107,.25);animation-duration:66s;animation-direction:reverse}
.kl-hero__ring--1{inset:-6%}
.kl-hero__disc img{position:relative;width:96%;height:96%;object-fit:contain}
.kl-hero__disc .kl-hero__mark{width:44%;height:auto}
@keyframes klHeroSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.kl-hero__ring{animation:none}}
@media (max-width:720px){
  .kl-hero{width:calc(100% - 40px)}
  .kl-hero__art{width:100%}
  .kl-hero__disc{width:200px}
}

/* Brand-mark disc (Partners, Case Studies): the K letter mark is itself a charcoal circle. */
.kl-hero__disc--mark::before{background:#2A2A2E;box-shadow:0 26px 50px -14px rgba(20,19,22,.4)}
.kl-hero__disc--mark img{width:100%;height:100%}
.kl-hero__orbit{position:absolute;width:14px;height:14px;border-radius:50%;background:#FFFFFF;border:2px solid #FF6B6B;box-shadow:0 6px 14px -4px rgba(20,19,22,.3);top:6%;right:2%;animation:klHeroFloat 7s ease-in-out infinite}
.kl-hero__orbit--2{top:auto;right:auto;bottom:8%;left:0;width:10px;height:10px;background:#FF6B6B;animation-duration:6s;animation-direction:reverse}
@keyframes klHeroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
/* Stat row (Case Studies) */
.kl-hero__stats{display:flex;flex-wrap:wrap;gap:36px;margin-top:32px}
.kl-hero__stat{padding-left:16px;border-left:2px solid #F0D9D6}
.kl-hero__stat b{display:block;font-family:"Fraunces",Georgia,serif;font-weight:700;font-size:40px;line-height:1.05;letter-spacing:-.02em;color:#A83C3C}
.kl-hero__stat span{display:block;margin-top:6px;font-family:"Poppins",system-ui,sans-serif;font-size:15px;line-height:1.35;color:#8E8A83;max-width:16ch}
/* The K in klaar-k-mark.png is a transparent cutout: back it with white so it reads white on charcoal. */
.kl-hero__disc--mark::before{background:#FFFFFF}
/* Keep the template's vertical rhythm on pages whose base styles reset p/h1 margins
   (e.g. "#case-content p{margin:0}"); :is() carries an id's specificity. */
:is(#case-content,#reviews-content,#dc-root,#page,body) .hero--kl .kl-hero .kl-hero__eyebrow{margin:0 0 22px}
:is(#case-content,#reviews-content,#dc-root,#page,body) .hero--kl .kl-hero .kl-hero__h1{margin:0}
:is(#case-content,#reviews-content,#dc-root,#page,body) .hero--kl .kl-hero .kl-hero__p{margin:26px 0 0}
:is(#case-content,#reviews-content,#dc-root,#page,body) .hero--kl .kl-hero .kl-hero__p + .kl-hero__p{margin-top:10px}

/* Hero on pages authored on the 1920 canvas (scaled ~0.75x on a 1440 laptop):
   sizes = normal / 0.75 so it reads like every other page hero. */
.kl-hero__lead{display:block;margin:6px 0 0;font-family:"Fraunces",Georgia,serif;font-weight:700;font-size:clamp(26px,3.4vw,36px);line-height:1.12;letter-spacing:-.025em;color:#111110;max-width:22ch}
.kl-hero__h1 em{font-style:italic}
@media (min-width:900px){
  .kl-hero--canvas{width:min(1600px,calc(100% - 96px))}
  :is(#case-content,#reviews-content,#dc-root,#page,body) .hero--kl .kl-hero--canvas .kl-hero__eyebrow{font-size:22px;margin-bottom:28px}
  :is(#case-content,#reviews-content,#dc-root,#page,body) .hero--kl .kl-hero--canvas .kl-hero__p{font-size:25px;line-height:40px;margin-top:34px}
  .kl-hero--canvas .kl-hero__lead{font-size:48px}
  .kl-hero--canvas .kl-hero__art{width:346px}
  .kl-hero--canvas .kl-hero__disc{width:293px}
}

/* Scout heroes (Perform, Develop, Engage, Reward, Integrations): bigger Scout and disc,
   and the Caveat accent line sits directly under the H1. The K-mark discs keep 220px. */
.kl-hero__art:has(.kl-hero__disc:not(.kl-hero__disc--mark)){width:400px}
.kl-hero__disc:not(.kl-hero__disc--mark){width:340px}
.kl-hero__disc:not(.kl-hero__disc--mark) img{width:100%;height:100%}
:is(#case-content,#reviews-content,#dc-root,#page,body) .hero--kl .kl-hero .kl-hero__h1 + .kl-hero__accent{margin-top:12px}
@media (max-width:720px){
  .kl-hero__art:has(.kl-hero__disc:not(.kl-hero__disc--mark)){width:100%}
  .kl-hero__disc:not(.kl-hero__disc--mark){width:260px}
}

/* module heroes (Perform / Develop / Engage / Reward): the Caveat line under the H1 is larger and tucked up */
@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):is(body,#klaar-x) .hero--kl .kl-hero .kl-hero__h1 + .kl-hero__accent{font-size:max(44px,3.056vw) !important;line-height:1.05 !important;margin-top:2px !important} }
@media (max-width:900px){ 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):is(body,#klaar-x) .hero--kl .kl-hero .kl-hero__h1 + .kl-hero__accent{font-size:34px !important;line-height:1.05 !important;margin-top:2px !important} }
/* The 256px K-mark PNG went soft when the disc scaled up. Draw the charcoal disc in CSS
   and lay the high-res white K (klaar-k-mark-hero.png) on top instead. */
.kl-hero__disc--mark::before{background:#222222}
.kl-hero__disc--mark img.kl-hero__mark{width:31%;height:auto}