.foot{
    background:#F6F2E9;
    border-top:1px solid #E3DACB;
    padding:72px 0 0;
  }
  .foot-in{
    max-width:1200px;
    margin:0 auto;
    padding:0 40px;
  }
  /* .foot-in collides with an older, unrelated footer component that some
     pages still carry inline styles for (display:grid with 4 fixed
     columns) — that turns this footer's stacked sections (.foot-top,
     .foot-cta, .foot-bottom) into overlapping grid cells. Force this
     footer's own layout back to a plain block regardless of what a page's
     own styles declare for the shared class name. */
  footer.foot .foot-in{
    display:block!important;
    grid-template-columns:none!important;
    width:auto!important;
  }
  .foot-top{
    display:flex;
    justify-content:space-between;
    gap:60px;
    padding-bottom:48px;
  }
  .foot-brand{
    flex:0 0 260px;
  }
  .foot-logo img{
    height:48px;
    width:auto;
    display:block;
    margin-bottom:18px;
  }
  .foot-social{
    display:flex;
    gap:14px;
    margin-top:20px;
  }
  .foot-social a{
    display:flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    border-radius:50%;
    border:1px solid #E3DACB;
    color:#4A4540;
    transition:background .16s ease, border-color .16s ease, color .16s ease;
  }
  .foot-social a:hover{
    background:#FF6B6B;
    border-color:#FF6B6B;
    color:#FFFFFF;
  }
  .foot-social svg{
    width:16px;
    height:16px;
  }
  .foot-tag{
    font-family:"Fraunces",Georgia,serif;
    font-style:italic;
    font-weight:400;
    font-size:16px;
    line-height:1.5;
    color:#6B655B;
    margin:0;
    max-width:230px;
  }
  .foot-tag em{
    color:#A83C3C;
    font-style:italic;
  }
  .foot-cols{
    display:flex;
    flex-wrap:wrap;
    gap:48px 32px;
    flex:1;
    justify-content:flex-end;
  }
  .foot-col{
    display:flex;
    flex-direction:column;
    gap:13px;
    min-width:140px;
  }
  .foot-h{
    font-family:"Fraunces",Georgia,serif;
    font-weight:700;
    font-size:15px;
    color:#2A2A2E;
    margin:0 0 4px;
  }
  .foot-h-link{
    color:inherit;
    text-decoration:none;
    transition:color .16s ease;
  }
  .foot-h-link:hover{
    color:#A83C3C;
  }
  .foot-col a{
    font-size:14px;
    font-weight:400;
    color:#6B655B;
    text-decoration:none;
    transition:color .16s ease;
  }
  .foot-col a:hover{
    color:#A83C3C;
  }
  .foot-cta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:40px 0;
    border-top:1px solid #E3DACB;
  }
  .foot-cta-text{
    font-family:"Fraunces",Georgia,serif;
    font-weight:600;
    font-size:24px;
    color:#2A2A2E;
    margin:0;
  }
  .foot-cta-btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-weight:600;
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:#FFFFFF;
    background:#FF6B6B;
    border:2px solid #FF6B6B;
    padding:14px 24px;
    border-radius:999px;
    text-decoration:none;
    flex:none;
    transition:background .18s ease, color .18s ease;
  }
  .foot-cta-btn:hover{
    background:transparent;
    color:#A83C3C;
  }
  .foot-cta-btn svg{
    width:14px;
    height:14px;
  }
  .foot-bottom{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:24px 0;
    border-top:1px solid #E3DACB;
  }
  .foot-copy{
    font-size:13px;
    color:#9C9690;
    margin:0;
  }
  .foot-legal{
    display:flex;
    gap:24px;
  }
  .foot-legal a{
    font-size:13px;
    color:#9C9690;
    text-decoration:none;
    transition:color .16s ease;
  }
  .foot-legal a:hover{
    color:#2A2A2E;
  }
  .foot-address{
    margin:0;
    padding:0 0 28px;
    text-align:left;
    font-size:13px;
    color:#9C9690;
  }
  @media (max-width:900px){
    .foot-top{flex-direction:column; gap:32px}
    .foot-cols{flex-wrap:wrap; gap:32px; justify-content:flex-start}
    .foot-cta{flex-direction:column; align-items:flex-start; gap:20px}
    .foot-bottom{flex-direction:column; align-items:flex-start; gap:12px}
  }

/* Security & trust badges (#sec-trust, repeated above the footer on every page).
   Defined once here so they match the Security page, where the badges read at ~72px.
   !important is needed to beat the inline width/height each page's markup carries. */
#sec-trust ul > li > span{
  width:220px !important;
  height:auto !important;
  min-height:150px !important;
  padding:20px 16px !important;
  gap:12px !important;
}
#sec-trust ul > li > span > img{
  width:72px !important;
  height:72px !important;
}
#sec-trust ul > li > span > span{
  font-size:17px !important;
}
@media (max-width:600px){
  #sec-trust ul > li > span{ width:150px !important; min-height:120px !important; padding:16px 10px !important }
  #sec-trust ul > li > span > img{ width:56px !important; height:56px !important }
  #sec-trust ul > li > span > span{ font-size:15px !important }
}

/* Product mockups (any element whose id ends in "-mock"), sitewide:
   - cards grow to fit their content (several had a fixed 418-460px height with
     overflow:hidden that clipped the last rows);
   - the old placeholder frame they sit in (.ph / .hslot / .dpanim) draws no box.
   #page is repeated to outrank the pages' own id-heavy !important rules. */
html body #page#page#page#page#page#page#page#page#page#page [id$="-mock"] :is(.tbl-card,.sil-screen,.priv-card,.dct-card,.rec-card,.esa-card,.why-card,.watch-card,.vis-card){height:auto !important;max-height:none !important}
html body #page#page#page#page#page#page#page#page#page#page :is(.ph,.hslot,.dpanim):has([id$="-mock"]){border:0 !important;background:transparent !important;box-shadow:none !important;padding:0 !important}
html body #page#page#page#page#page#page#page#page#page#page :is(.ph,.hslot,.dpanim):has([id$="-mock"])::before,
html body #page#page#page#page#page#page#page#page#page#page :is(.ph,.hslot,.dpanim):has([id$="-mock"])::after{display:none !important}

/* Scout section header ("Development, continuously" etc.) lines up with the page shell like every other section */
/* (superseded by the sitewide 174 → 1301 column below) */

/* Scout diagram (.scb) sitewide. Desktop: inside a normal section it fills the column instead of
   the 1600px full-bleed width meant for .gscout bands (it ran off the left edge). Phones: the band
   was still scaled to 1250px (about 0.23x) and its grid collapsed to a sliver, so lay it out
   unscaled in one column. */
html body #shell #page#page#page#page#page section:not(.gscout) .gscout__b.scb{width:auto !important;max-width:none !important;margin-left:0 !important;margin-right:0 !important}
@media (max-width:900px){
  html body #shell #page#page#page#page#page .scb .scb-stage{height:auto !important;overflow:visible !important}
  html body #shell #page#page#page#page#page .scb .scb-flow{transform:none !important;width:100% !important;grid-template-columns:minmax(0,1fr) !important;grid-template-rows:none !important;gap:24px 0 !important;padding:24px 20px !important}
  html body #shell #page#page#page#page#page .scb .scb-flow>*{grid-column:1 / -1 !important;grid-row:auto !important;width:auto !important;min-width:0 !important;max-width:none !important}
  html body #shell #page#page#page#page#page .scb .scb-flow>svg,html body #shell #page#page#page#page#page .scb .scb-wires,html body #shell #page#page#page#page#page .scb .scb-dash{display:none !important}
}
/* phones: a mock's frame grows to fit it (the 220px placeholder height let cards spill into the next section) */
@media (max-width:900px){html body #page#page#page#page#page#page#page#page#page#page :is(.ph,.hslot,.dpanim):has([id$="-mock"]){height:auto !important;min-height:0 !important;max-height:none !important;aspect-ratio:auto !important}}
/* new drop-in heroes (#uch): the host section carries no leftover padding/height from the old hero rules */
html body #shell #page#page#page#page#page section.uch-host,html body #page#page#page#page#page section.uch-host{padding:0 !important;min-height:0 !important;height:auto !important;background:transparent;border:0 !important}

/* ── One content column sitewide: the width the new page designs use.
   On a 1440 screen content runs 174px → 1301px (1920-canvas pages: a 1560 stage-px column with a
   52px left inset, the designs' native .wrap). Sections, Scout bands and heroes all share it. ── */
@media (min-width:901px){
  html body #shell #page#page#page#page#page#page > section:not(.kl-trust):not(.uch-host):not(.klcta) > :is(.wrap,.shell),
  html body #shell #page#page#page#page#page#page > section.gscout > :is(.gscout__a,.gscout__b),
  html body #shell #page#page#page#page#page#page > section.fs-band > .fs-wrap{
    width:100% !important;max-width:1560px !important;margin-left:auto !important;margin-right:auto !important;
    padding-left:52px !important;padding-right:0 !important;box-sizing:border-box !important}
  html body #shell #page#page#page#page#page#page > section.fs-band{padding-left:0 !important;padding-right:0 !important}
  /* heroes: the new drop-in heroes (#uch, zoomed to screen px), the design pages' #nh hero, and the
     canvas kl-hero, all on the same 174 → 1301 column */
  html body section#nh#nh#nh .hero-wrap{width:100% !important;max-width:1166px !important;margin-left:auto !important;margin-right:auto !important;padding-left:37px !important;padding-right:0 !important;box-sizing:border-box !important}
  html body #uch#uch#uch#uch#uch#uch#uch#uch#uch#uch#uch#uch#uch#uch .uch-wrap{
    width:100% !important;max-width:1166px !important;margin-left:auto !important;margin-right:auto !important;
    padding-left:37px !important;padding-right:0 !important;box-sizing:border-box !important}
  html body #page#page#page .kl-hero.kl-hero--canvas{
    width:100% !important;max-width:1560px !important;padding-left:52px !important;padding-right:0 !important;box-sizing:border-box !important}
}

/* Same 174 → 1301 column (at 1440) on the pages that are not on the 1920 canvas. Sized in vw
   (81.25vw box, 2.708vw inset = the canvas 1560/52 of 1920) so it tracks the canvas pages at every width;
   the homepage keeps px because its own #om-fit wrapper already scales it. */
@media (min-width:901px){
  html body .kl-hero:not(.kl-hero--canvas),
  html body > section:is(.area,.gscout,.hero) > .shell,
  html body #dc-root > section:is(.area,.gscout,.hero) > .shell,
  html body #scout-content > section > .shell{width:81.25vw !important;max-width:none !important;margin-left:auto !important;margin-right:auto !important;padding-left:2.708vw !important;padding-right:0 !important;box-sizing:border-box !important}
  html body #om-fit :is(.pph .shell,.hero .shell,.pains-in,.pw-shell,.sx,.cases-in,#practice > .wrap){
    width:min(1166px,calc(100% - 48px)) !important;max-width:none !important;margin-left:auto !important;margin-right:auto !important;padding-left:37px !important;padding-right:0 !important;box-sizing:border-box !important}
  html body #kcs#kcs#kcs#kcs#kcs#kcs#kcs#kcs#kcs#kcs#kcs#kcs#kcs :is(section.sec,section.main,.wrap){
    width:81.25vw !important;max-width:none !important;margin-left:auto !important;margin-right:auto !important;padding-left:2.708vw !important;padding-right:0 !important;box-sizing:border-box !important}
}

@media (min-width:901px){
  /* sections that sit straight under body/main (not the 1920 canvas): their .shell, and the Scout band pieces */
  html > body > section:not(.kl-trust):not(#sec-trust):not(.klcta) > .shell,
  html body :is(main,#dc-root) > section:not(.kl-trust):not(#sec-trust):not(.klcta) > .shell,
  html > body > section.gscout :is(.gscout__a,.gscout__b),
  html body :is(main,#dc-root) > section.gscout :is(.gscout__a,.gscout__b){width:81.25vw !important;max-width:none !important;margin-left:auto !important;margin-right:auto !important;padding-left:2.708vw !important;padding-right:0 !important;box-sizing:border-box !important}
  html body :is(body,main,#dc-root) > section.gscout > .shell :is(.gscout__a,.gscout__b),html > body > section.gscout > .shell :is(.gscout__a,.gscout__b){width:auto !important;margin-left:0 !important;margin-right:0 !important;padding-left:0 !important;padding-right:0 !important}
  /* pages whose sections are the column themselves */
  html body :is(#security-content,#resources-content) > main,
  html body #reviews-content > main > section:not(.words),
  html body #reviews-content > main > section.words > .words-in,
  html body #faq-content > main > section.hero,
  html body #faq-content .content,
  html body #shell #page > .sc-host:not(.pagefade) > div,
  html body #klp > section:not(.hero--kl),
  html body #klp > div:not(.kl-hero){width:81.25vw !important;max-width:none !important;margin-left:auto !important;margin-right:auto !important;padding-left:2.708vw !important;padding-right:0 !important;box-sizing:border-box !important}
}
@media (min-width:901px){
  /* a hero already inside a column wrapper takes the wrapper's inset, not a second one */
  html body #shell #page > .sc-host:not(.pagefade) > div .kl-hero:not(.kl-hero--canvas){width:100% !important;padding-left:0 !important;padding-right:0 !important}
}

/* G2 awards row under the Security & trust badges (sitewide) */
#sec-trust .kl-g2row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:24px;margin:40px 0 0}
#sec-trust .kl-g2row img{display:block;height:104px !important;width:auto !important;max-width:none !important}
@media (max-width:640px){#sec-trust .kl-g2row{gap:14px;margin-top:28px}#sec-trust .kl-g2row img{height:72px !important}}
.kl-g2row--sec{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:24px;margin:48px 0 0}
.kl-g2row--sec img{display:block;height:104px !important;width:auto !important}
@media (max-width:640px){.kl-g2row--sec{gap:14px;margin-top:32px}.kl-g2row--sec img{height:72px !important}}
@media (max-width:900px){.g2 .g2-badges{gap:14px !important}.g2 .g2-badges img{height:72px !important}}
@media (min-width:901px){
  /* full-page designs built without the 1920 canvas (e.g. Partners): their .sec sections on the same column */
  html[data-design-page] body > section.sec{width:81.25vw !important;max-width:none !important;margin-left:auto !important;margin-right:auto !important;padding-left:2.708vw !important;padding-right:0 !important;box-sizing:border-box !important}
}
/* a design page's own base styles must not stop the footer legal row wrapping on phones */
html[data-design-page] footer.foot .foot-legal{flex-wrap:wrap !important;row-gap:8px !important}
html[data-design-page],html[data-design-page] body{overflow-x:clip}

/* ── Approved hero sizing (Performance Reviews / 360 / Compensation): every page's H1 is 54px on a
   1440 screen and scales with the window (64px at 1728, 38px at 1024). :is(body,#klaar-x) counts as an id, so
   repeating it on <body> outranks the older per-page headline rules (up to 12 ids). Desktop only. ── */
@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(h1,.h1){font-size:3.75vw !important;line-height:1.08 !important;letter-spacing:-.03em !important}
  /* 1920-canvas hero (Why Klaar): scaled by width/1920, so 72 stage px = 54px at 1440 */
  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-hero--canvas :is(h1,.h1){font-size:72px !important;line-height:1.08 !important;letter-spacing:-.03em !important}
  /* homepage: its #om-fit wrapper already scales the page below 1440 */
  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 :is(h1,.h1){font-size:max(54px,3.75vw) !important;line-height:1.08 !important;letter-spacing:-.03em !important}
  /* heroes already zoomed to width/1440: design-page #nh and drop-in #uch */
  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) section#nh :is(h1,.h1),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) #uch :is(h1,.h1){font-size:54px !important;line-height:1.08 !important;letter-spacing:-.03em !important}
  /* full-page designs whose hero sits straight under <body> (Partners) */
  html[data-design-page] :is(body,#klaar-x):is(body,#klaar-x) > .hero-wrap{width:81.25vw !important;max-width:none !important;margin-left:auto !important;margin-right:auto !important;padding-left:2.708vw !important;padding-right:0 !important;box-sizing:border-box !important}
  /* Scout page hero, and the homepage column above 1440 */
  html body main > header.hero > .shell{width:81.25vw !important;max-width:none !important;margin-left:auto !important;margin-right:auto !important;padding-left:2.708vw !important;padding-right:0 !important;box-sizing:border-box !important}
  html body #om-fit :is(.pph .shell,.hero .shell,.pains-in,.pw-shell,.sx,.cases-in,#practice > .wrap){width:max(1166px,81.25vw) !important;padding-left:max(37px,2.708vw) !important}
}

/* ── Phones: the approved Performance Reviews sizing everywhere — H1 38px, and one 20px content
   gutter for every page's section containers and hero. ── */
@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(h1,.h1){font-size:38px !important;line-height:1.1 !important;letter-spacing:-.03em !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) #shell #page > section:not(.kl-trust):not(.klcta) > :is(.wrap,.shell),
  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) #shell #page > section.gscout > :is(.gscout__a,.gscout__b),
  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) > section:not(.kl-trust):not(#sec-trust):not(.klcta) > .shell,
  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(main,#dc-root) > section:not(.kl-trust):not(#sec-trust):not(.klcta) > .shell,
  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 :is(.pph .shell,.hero .shell,.pains-in,.pw-shell,.sx,.cases-in,#practice > .wrap),
  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-hero:not(.kl-hero--canvas),
  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) main > header.hero > .shell,
  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(#security-content,#resources-content) > main,
  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) #reviews-content > main > section:not(.words),
  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) #faq-content > main > section.hero,
  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) #shell #page > .sc-host:not(.pagefade) > div,
  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) #klp > section:not(.hero--kl),
  html[data-design-page] :is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):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,
  html[data-design-page] :is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):is(body,#klaar-x):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-wrap{padding-left:20px !important;padding-right:20px !important;box-sizing:border-box !important;width:auto !important;max-width:none !important;margin-left:0 !important;margin-right: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) #kcs#kcs#kcs#kcs#kcs#kcs#kcs#kcs#kcs#kcs#kcs#kcs#kcs :is(section.sec,section.main,.wrap){padding-left:20px !important;padding-right:20px !important;box-sizing:border-box !important;width:auto !important;max-width:none !important;margin-left:0 !important;margin-right:0 !important}
}

@media (max-width:900px){
  /* the section itself adds no side padding on phones; its container carries the 20px gutter */
  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) #shell #page > section:not(.kl-trust):not(.klcta):not(.uch-host){padding-left:0 !important;padding-right:0 !important}
  /* a hero inside a column wrapper takes the wrapper's gutter, not a second one */
  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)#klaar-x2, 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) #shell #page > .sc-host:not(.pagefade) > div .kl-hero:not(.kl-hero--canvas){padding-left:0 !important;padding-right:0 !important}
}

/* design-page heroes (#nh): the three boxes sit right under the hero copy/mock, not 110px below it */
@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) section#nh .hero-points{margin-top:0 !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) section#nh .hero-points{margin-top:24px !important} }

/* Impact band (Perform / Develop / Engage / Reward): no stat circle; the copy and the four audience
   boxes span the full column */
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) .pw-band{grid-template-columns:minmax(0,1fr) !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) .pw-band .pw-band-copy{max-width: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) .pw-band .pw-band-p{max-width:78ch !important}
@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) .pw-band .plevels{max-width:none !important;width:100% !important;flex:none !important;justify-self:stretch !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important} }
@media (min-width:640px) and (max-width:1100px){ 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) .pw-band .plevels{grid-template-columns:repeat(2,minmax(0,1fr)) !important} }

@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) .pw-band .pw-band-copy > .plevels{width:100% !important;max-width:none !important} }
@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) .pw-band .pw-band-copy > .plevels{margin-left:0 !important;margin-right: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):is(body,#klaar-x) .pw-band > .pw-band-copy{padding-right:0 !important;padding-left:0 !important}

/* Lana #2/#17/#20/#27: no "01, 02, 03" step numbering anywhere */
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) .stepno{display:none !important}

/* Responsive audit: the five legal links sat on one unwrapped line and "Security" ran off a 360px screen */
footer .foot-legal{flex-wrap:wrap !important;row-gap:8px !important}

/* Footer content width was pinned to 1200px total (1120px inside the 40px
   side padding), narrower than the 1240px content width used by the
   ai-forward/why-klaar pages and now matched by nav (see css/nav.css).
   Widen so footer links line up with nav and page content above 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) .foot-in{max-width:1320px !important}