/* kosh-home.css — the home page's own styles (hero, results strip, logo wall, cards,
   tiles, testimonials, FAQ …). Linked only from the home page, after site.css. */
/* Scoped styles for home-page components (kh- prefix). Colours follow the
   site tokens (--primary-color, --secondary-color) defined in page.css. */
.kh-section {
  padding: 4.5rem 0;
}
.kh-section.kh-alt {
  background: #f7f8fa;
}
.kh-head {
  max-width: 800px;
  margin: 0 auto 2.75rem;
  text-align: center;
}
.kh-head h2 {
  margin: 0 0 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  text-transform: none;
  color: #1e1e1e;
}
.kh-head p {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.6;
  color: #4a4f57;
}
.kh-eyebrow {
  display: block;
  margin: 0 0 0.6rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary-color, #fc7500);
}
.kh-grid {
  display: grid;
  gap: 1.5rem;
}
.kh-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.kh-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.kh-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1100px) {
  .kh-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 900px) {
  .kh-cols-3 {
    grid-template-columns: minmax(0, 1fr);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }
  .kh-cols-2 {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 520px) {
  .kh-cols-4:not(.kh-ind) {
    grid-template-columns: minmax(0, 1fr);
  }
  .kh-section {
    padding: 3rem 0;
  }
}

/* cards */
.kh-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 4px 24px -4px rgba(26, 31, 43, 0.08);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
.kh-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px -8px rgba(26, 31, 43, 0.16);
}
/* Platform cards: the whole card is the link. The card's one link stretches
   over it (::before, since ::after draws the arrow), so it stays a single real
   <a> for keyboards and crawlers. */
#platform .kh-card {
  position: relative;
  cursor: pointer;
}
#platform .kh-card .kh-link::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}
#platform .kh-card:hover .kh-link {
  text-decoration: underline;
}
.kh-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.4rem 1.5rem 1.5rem;
}
.kh-card h3 {
  margin: 0 0 0.5rem;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.3;
  text-transform: none;
  color: #1e1e1e;
}
.kh-card p {
  margin: 0 0 1rem;
  font-size: 0.97rem;
  line-height: 1.55;
  color: #3b3f47;
}
.kh-link {
  margin-top: auto;
  font-weight: 600;
  color: var(--primary-color, #fc7500);
  text-decoration: none;
}
.kh-link::after {
  content: '\00a0\2192';
}
.kh-link:hover {
  text-decoration: underline;
}
.kh-center {
  text-align: center;
  margin-top: 2.25rem;
}
.kh-note {
  margin: 1.5rem auto 0;
  max-width: 760px;
  text-align: center;
  font-size: 0.85rem;
  color: #5b6270;
}

/* image slot: icon tile until the image loads (img is removed on error) */
.kh-media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  aspect-ratio: 16/10;
  background: linear-gradient(135deg, #fff1e7 0%, #eef4ff 100%);
}
.kh-media.kh-r169 {
  aspect-ratio: 16/9;
}
.kh-media.kh-r43 {
  aspect-ratio: 4/3;
}
/* the industry GIFs are 3:2, so their cards use a 3:2 frame and show them whole */
.kh-media.kh-r32 {
  aspect-ratio: 3/2;
}
.kh-media > i,
.kh-media > .kh-mono {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 24px -8px rgba(26, 31, 43, 0.25);
  font-size: 2rem;
  color: var(--primary-color, #fc7500);
}
.kh-media > .kh-mono {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  font-size: 1.9rem;
  font-weight: 700;
  font-style: normal;
}
.kh-media > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.kh-tag {
  position: absolute;
  left: 1rem;
  top: 1rem;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  background: #1d1d1d;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
}

/* trust bar */

/* hero extras */
.kh-btn-outline {
  display: inline-block;
  padding: 0.85rem 1.6rem;
  border: 1.6px solid #1e1e1e;
  border-radius: 130px;
  font-weight: 600;
  color: #1e1e1e;
  text-decoration: none;
  background: transparent;
}
.kh-btn-outline:hover {
  background: #1e1e1e;
  color: #fff;
}

/* customer logo wall: equal white tiles, logos centred and size-matched;
   one row of seven on desktop, rows centred below that */
.kh-logo-wall {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}
.kh-logo-tile {
  flex: 0 0 calc((100% - 6rem) / 7);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 96px;
  padding: 1rem 1.1rem;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}
.kh-logo-tile img {
  max-width: 100%;
  max-height: 42px;
  width: auto;
  height: auto;
  object-fit: contain;
}
@media (max-width: 1100px) {
  .kh-logo-tile {
    flex-basis: calc((100% - 3rem) / 4);
  }
}
@media (max-width: 560px) {
  .kh-logo-tile {
    flex-basis: calc((100% - 1rem) / 2);
    height: 84px;
  }
}
/* ==========================================================================
   HERO (.first-fold) and the first screen (.kh-fold)

   One size unit drives the desktop hero: --hu = min(1vw, 1.75vh). Type,
   spacing, buttons and badges are multiples of it (with px floors and caps),
   so a short laptop screen scales the whole hero down together instead of
   squeezing it, and a tall one scales it up.

   Layout by width:
     < 992px   stacked: copy, buttons, dashboard, then the G2 banner + badges
     >= 992px  copy left (53%), dashboard + trust block right (47%). The copy
               sets the hero's height; the dashboard is fitted into the space
               above the trust block (a size container), so the right column
               can never grow taller than the copy.
   ========================================================================== */

/* Hero + results strip = the first screen (768px and up). The hero takes the
   height left over by the strip, so the strip sits on the bottom edge. When
   the hero needs more room than that (short screens) it simply grows and the
   strip moves below the fold, rather than anything being squeezed. */
@media (min-width: 768px) {
  .kh-fold {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - var(--kh-top, 80px));
  }
  .kh-fold > .first-fold {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
  }
  .kh-fold > .first-fold > .container {
    width: 100%;
    flex: none;
  }
  /* leftover height is split 2:3 above/below the content, so the hero sits a
     little above centre */
  .kh-fold > .first-fold::before {
    content: '';
    flex: 2 1 0;
  }
  .kh-fold > .first-fold::after {
    content: '';
    flex: 3 1 0;
  }
}

/* Shared sizes. The G2 banner and the three badges sit in one row, all
   --kh-badge tall: the banner ~3.1 x as wide as that, the badges about
   square. */
.first-fold {
  --kh-btn: 46px;
  --kh-badge: clamp(30px, 9.5vw, 46px);
  --kh-badge-gap: clamp(10px, 3.5vw, 22px);
  /* the dashboard's colour glows must not widen the page on phones */
  overflow-x: clip;
}

/* Hero buttons: always side by side and always the same size. Each column is
   1fr of a grid that is only as wide as its content, so both buttons take the
   width of the wider label instead of a fixed 300px. */
.first-fold .hero-cta {
  display: inline-grid !important;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 12px !important;
  width: max-content;
  max-width: 100%;
}
.first-fold .hero-cta a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  min-width: 0 !important;
  height: var(--kh-btn);
  margin: 0;
  padding: 0 20px;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
}
.first-fold .hero-cta a.demo-btn {
  padding-right: 44px;
}

/* the dashboard */
.first-fold .vdo-con {
  width: 100%;
}
/* G2 rating banner beside the SOC 2 / GDPR / ISO 27001 badges (badges cropped
   from assets/img/kosh-home/security-compliance-image.webp), in one row. The
   PNG is 400x200 but its artwork only fills rows 56-133, so it is shown
   through a 400x130 window (object-fit: cover) to make the banner thinner. The
   window also drops the PNG's grey top/bottom border, and clip-path hides its
   2px grey left/right edge, so the banner has no border. */
.kh-hero-trust {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--kh-badge-gap);
  width: max-content;
  max-width: 100%;
  margin: 28px auto 0;
}
.kh-g2 {
  display: block;
  width: auto;
  height: var(--kh-badge);
  aspect-ratio: 400 / 130;
  object-fit: cover;
  object-position: 50% 43%;
  clip-path: inset(0 0.75%);
}
.kh-hero-badges {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--kh-badge-gap);
}
.kh-hero-badges img {
  height: var(--kh-badge);
  width: auto;
}

/* Phones and tablets: stacked, one column. */
@media (max-width: 991px) {
  .first-fold {
    padding: 28px 0 36px;
  }
  .first-fold .col-md-7,
  .first-fold .col-md-5 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .first-fold h1 {
    font-size: clamp(30px, 7vw, 46px);
    line-height: 1.15;
    margin-bottom: 14px;
  }
  .first-fold .ff-content p,
  .first-fold .tick-pointers li {
    font-size: clamp(15px, 2.2vw, 18px);
    line-height: 1.55;
  }
  .first-fold .tick-pointers li {
    margin-bottom: 10px;
  }
  .first-fold .hero-cta {
    margin-top: 20px !important;
  }
  .first-fold .vdo-con {
    max-width: 640px;
    margin: 36px auto 0;
  }
}
/* Small phones: the two buttons share the row and shrink with it. */
@media (max-width: 480px) {
  .first-fold .hero-cta {
    display: grid !important;
    width: 100%;
    gap: 8px !important;
  }
  .first-fold .hero-cta a {
    padding: 0 8px;
    font-size: clamp(11px, 3.4vw, 14px);
  }
  /* smaller arrow, so the label keeps its room */
  .first-fold .hero-cta a.demo-btn {
    padding-right: 28px;
  }
  .first-fold .hero-cta a.demo-btn::after {
    right: 8px;
    width: 16px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }
}

/* Desktop: two columns. The G2 + badges row sits at the bottom of the right
   column (whose bottom is the buttons' bottom), on the buttons' line: it is a
   little shorter than a button and centred on the button's middle. */
@media (min-width: 992px) {
  .first-fold {
    --hu: min(1vw, 1.75vh);
    --kh-btn: clamp(44px, 4.2 * var(--hu), 68px);
    --kh-badge: calc(var(--kh-btn) * 0.85);
    --kh-badge-gap: clamp(12px, 1.3 * var(--hu), 24px);
    padding: clamp(18px, 2.4 * var(--hu), 44px) 0 clamp(14px, 1.8 * var(--hu), 36px);
  }
  .first-fold .row {
    align-items: stretch !important;
  }
  .first-fold .col-md-7 {
    flex: 0 0 53%;
    max-width: 53%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .first-fold .col-md-5 {
    flex: 0 0 47%;
    max-width: 47%;
    position: relative;
    display: flex;
    flex-direction: column;
  }
  /* the headline is sized to its column (cqi) as well, so "Reconcile
     Financial Data In" always fits on one line */
  .first-fold .ff-content {
    width: 100%;
    container-type: inline-size;
  }
  .first-fold h1 {
    font-size: clamp(30px, min(6.9cqi, 3.4 * var(--hu)), 56px);
    line-height: 1.12;
    margin-bottom: clamp(10px, 1.9 * var(--hu), 32px);
  }
  .first-fold .ff-content p {
    font-size: clamp(15px, 1.35 * var(--hu), 23px);
    line-height: 1.55;
    margin-bottom: clamp(12px, 2.4 * var(--hu), 40px) !important;
  }
  .first-fold .tick-pointers li {
    font-size: clamp(15px, 1.35 * var(--hu), 23px);
    line-height: 1.5;
    margin-bottom: clamp(8px, 1.7 * var(--hu), 30px);
  }
  .first-fold .hero-cta {
    margin-top: clamp(18px, 3.6 * var(--hu), 64px) !important;
    gap: clamp(12px, 1.1 * var(--hu), 20px) !important;
  }
  .first-fold .hero-cta a {
    padding: 0 clamp(18px, 1.7 * var(--hu), 32px);
    font-size: clamp(14px, 1.2 * var(--hu), 20px);
  }
  .first-fold .hero-cta a.demo-btn {
    padding-right: calc(clamp(18px, 1.7 * var(--hu), 32px) + 26px);
  }
  /* The dashboard fills the space above the trust block, as big as fits:
     the width of the column, or the height it has x the dashboard's 1125:715
     ratio, whichever is smaller — centred in the column, like the G2 banner
     and badges under it. */
  .first-fold .vdo-con {
    position: absolute;
    top: 0;
    right: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
    left: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
    width: auto;
    bottom: calc(var(--kh-btn) + clamp(14px, 2 * var(--hu), 36px));
    container-type: size;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .first-fold .vdo-con .kd {
    width: min(100cqw, 100cqh * 1125 / 715);
  }
  /* centred on the same line as the dashboard above it */
  .first-fold .kh-hero-trust {
    align-self: center;
    margin: auto 0 calc((var(--kh-btn) - var(--kh-badge)) / 2);
  }
}

/* Animations (assets/js/kosh-animations.js). While <html> has .kh-anim — set by
   the inline snippet at the top of the home body, only when motion is allowed —
   the above-the-fold pieces start hidden so they can ease in without first
   flashing on screen. The script replaces this with inline start states at once.
   The headline is never hidden: it is the page's LCP element. */
.kh-anim .first-fold .ff-content > p,
.kh-anim .first-fold .tick-pointers li,
.kh-anim .first-fold .hero-cta,
.kh-anim .first-fold .kd-board,
.kh-anim .first-fold .kd-card,
.kh-anim .first-fold .kh-hero-trust,
.kh-anim .kh-stats .kh-stat-num {
  opacity: 0;
}

/* results band */
.kh-stats {
  padding: clamp(14px, 2.4vh, 22.4px) 0;
  background: #1d1d1d;
  color: #fff;
  text-align: center;
}
.kh-stat-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 900px;
  margin: 0 auto;
}
.kh-stat-row > div {
  padding: 0.25rem 1rem;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}
.kh-stat-row > div:first-child {
  border-left: 0;
}
@media (max-width: 640px) {
  .kh-stat-row {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .kh-stat-row > div {
    border-left: 0;
  }
}
.kh-stat-num {
  display: block;
  font-size: 2.6rem;
  line-height: 1;
  font-weight: 700;
  color: var(--primary-color, #fc7500);
}
.kh-stat-label {
  display: block;
  margin-top: 0.4rem;
  font-size: 1rem;
  font-weight: 500;
  color: #fff;
}

/* use-case tiles */
/* 2 rows x 3 on desktop, each illustration shown whole (contain, not cover) */
.kh-tiles {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 980px;
  margin: 0 auto;
}
@media (max-width: 560px) {
  .kh-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
  }
}
.kh-tile .kh-media {
  aspect-ratio: 4/3;
  background: #fff;
}
.kh-tile .kh-media > img {
  object-fit: contain;
  padding: 10px;
}
.kh-tile {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  text-decoration: none;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
.kh-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px -8px rgba(26, 31, 43, 0.18);
}
.kh-tile .kh-media > i {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  font-size: 1.4rem;
}
.kh-tile span.kh-tile-label {
  display: block;
  padding: 1rem 1.25rem 1.1rem;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.3;
  color: #1e1e1e;
}
.kh-tile:hover span.kh-tile-label {
  color: var(--primary-color, #fc7500);
}

/* home "Reconciliation Solutions for Every Use Case": ten smaller tiles, five
   to a row on desktop, four on tablets, two on phones */
#use-cases .kh-tiles {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
  max-width: 1140px;
}
@media (max-width: 991px) {
  #use-cases .kh-tiles {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  #use-cases .kh-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }
}
#use-cases .kh-tile .kh-media > img {
  padding: 8px;
}
#use-cases .kh-tile .kh-media > i {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  font-size: 1.2rem;
}
#use-cases .kh-tile span.kh-tile-label {
  padding: 0.7rem 0.9rem 0.8rem;
  font-size: 1rem;
}

/* keep the theme pills row from adding a few px of horizontal scroll on phones */
#how-it-works {
  overflow-x: hidden;
}

/* why Kosh: compact benefits (theme numbered cards, tightened) */
.benefits-section .benefits_fold_card p.content-txt {
  margin-bottom: 0;
}

/* testimonials carousel */
.kh-carousel {
  position: relative;
}
.kh-track {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  padding: 0.5rem 0.25rem 1.5rem;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.kh-track::-webkit-scrollbar {
  display: none;
}
.kh-quote {
  display: flex;
  flex-direction: column;
  flex: 0 0 calc((100% - 3rem) / 3);
  margin: 0;
  padding: 1.6rem;
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 4px 24px -4px rgba(26, 31, 43, 0.08);
}
@media (max-width: 991px) {
  .kh-quote {
    flex-basis: calc((100% - 1.5rem) / 2);
  }
}
@media (max-width: 640px) {
  .kh-quote {
    flex-basis: 88%;
  }
}
.kh-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}
.kh-chips li,
.kh-chip {
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  background: #ffe9de;
  font-size: 0.8rem;
  font-weight: 600;
  color: #a04a00;
}
.kh-quote blockquote {
  margin: 0 0 1.5rem;
  font-size: 1rem;
  line-height: 1.65;
  color: #2b2f36;
}
.kh-quote blockquote::before {
  content: '\201C';
  display: block;
  font-size: 2.6rem;
  line-height: 0.6;
  color: var(--primary-color, #fc7500);
}
.kh-quote figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 1.1rem;
  border-top: 1px solid #eceef1;
}
.kh-person {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-width: 0;
}
.kh-person strong {
  display: block;
  font-size: 0.98rem;
  color: #1e1e1e;
}
.kh-person small {
  display: block;
  font-size: 0.85rem;
  color: #5b6270;
}
.kh-ava {
  position: relative;
  display: flex;
  flex: 0 0 52px;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  overflow: hidden;
  border-radius: 50%;
  background: #1e1e1e;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
}
.kh-ava img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.kh-co-logo {
  flex: 0 0 auto;
  max-width: 84px;
  max-height: 30px;
  width: auto;
  object-fit: contain;
}
.kh-car-nav {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 0.25rem;
}
.kh-car-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1.6px solid #1e1e1e;
  border-radius: 50%;
  background: #fff;
  font-size: 1.1rem;
  color: #1e1e1e;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}
.kh-car-btn:hover {
  background: var(--primary-color, #fc7500);
  border-color: var(--primary-color, #fc7500);
  color: #fff;
}

/* success stories */
.kh-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0 0 1.25rem;
  padding: 1rem 0;
  list-style: none;
  border-top: 1px solid #eceef1;
  border-bottom: 1px solid #eceef1;
}
.kh-kpis strong {
  display: block;
  font-size: 1.55rem;
  line-height: 1.1;
  font-weight: 700;
  color: var(--primary-color, #fc7500);
}
.kh-kpis span {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.78rem;
  line-height: 1.3;
  color: #4a4f57;
}

/* industries */
.kh-ind .kh-card-body {
  padding: 1.1rem 1.25rem 1.25rem;
}
/* industry cards use the shared .kh-card title/body sizes */
.kh-ind p {
  margin-bottom: 0.85rem;
}
@media (max-width: 520px) {
  .kh-ind {
    gap: 0.85rem;
  }
  .kh-ind .kh-card-body {
    padding: 0.9rem;
  }
  .kh-ind h3 {
    font-size: 1rem;
  }
  .kh-ind p {
    font-size: 0.85rem;
  }
  .kh-ind .kh-link {
    font-size: 0.85rem;
  }
  .kh-ind .kh-media > i {
    width: 52px;
    height: 52px;
    font-size: 1.4rem;
  }
}
.kh-ind-cta {
  justify-content: center;
  padding: 1.75rem;
  background: var(--primary-color, #fc7500);
  border-color: var(--primary-color, #fc7500);
}
.kh-ind-cta h3,
.kh-ind-cta p,
.kh-ind-cta .kh-link {
  color: #fff;
}
.kh-ind-cta p {
  color: #fff3ea;
}
.kh-ind-cta .kh-link {
  margin-top: 0.25rem;
}

/* integrations */
.kh-int-cats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: 0 0 1.75rem;
  padding: 0;
  list-style: none;
}
.kh-int-cats li {
  padding: 0.4rem 0.95rem;
  border: 1px solid #d9dde3;
  border-radius: 999px;
  background: #fff;
  font-size: 0.9rem;
  font-weight: 500;
  color: #1e1e1e;
}
.kh-logo-grid {
  display: grid;
  gap: 0.9rem;
  margin: 0 0 2rem;
  grid-template-columns: repeat(8, minmax(0, 1fr));
}
@media (max-width: 991px) {
  .kh-logo-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 520px) {
  .kh-logo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.kh-logo-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 76px;
  padding: 0.75rem;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}
.kh-logo-cell img {
  max-width: 100%;
  max-height: 34px;
  width: auto;
  object-fit: contain;
}

/* security */
/* its two halves slide in from the sides (kosh-animations.js); stacked on a
   phone, the text starts 40px past the right edge and must not widen the page */
#security {
  overflow-x: clip;
}
.kh-split {
  display: grid;
  gap: 3.5rem;
  align-items: center;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}
@media (max-width: 860px) {
  .kh-split {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}
.kh-sec-img {
  display: block;
  width: 100%;
  max-width: 360px;
  height: auto;
  margin: 0 auto;
  border-radius: 20px;
  box-shadow: 0 16px 48px -12px rgba(26, 31, 43, 0.22);
}
.kh-split h2 {
  margin: 0 0 0.75rem;
  text-align: left;
  font-weight: 600;
  line-height: 1.2;
  text-transform: none;
  color: #1e1e1e;
}
.kh-split .kh-lede {
  margin: 0 0 1.5rem;
  font-size: 1.08rem;
  line-height: 1.6;
  color: #4a4f57;
}
.kh-check {
  margin: 0 0 1.75rem;
  padding: 0;
  list-style: none;
}
.kh-check li {
  position: relative;
  margin: 0 0 0.9rem;
  padding-left: 2rem;
  font-size: 1.02rem;
  line-height: 1.55;
  color: #2b2f36;
}
.kh-check li::before {
  content: '\F26A';
  font-family: 'bootstrap-icons';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--primary-color, #fc7500);
  font-size: 1.2rem;
}

/* team */
.kh-people .kh-media {
  aspect-ratio: 1/1;
  max-height: 280px;
  width: 100%;
}
.kh-people .kh-media > img {
  object-position: center top;
}
.kh-role {
  margin: 0 0 0.75rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary-color, #fc7500);
}
.kh-backers {
  justify-content: center;
  padding: 1.75rem;
  background: #1d1d1d;
  border-color: #1d1d1d;
}
.kh-backers h3 {
  color: #fff;
}
.kh-backers p {
  margin-bottom: 0.6rem;
  color: #c9cdd3;
}
.kh-backers .kh-chips {
  margin-bottom: 1.1rem;
}
.kh-backers .kh-chips li {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.kh-backers .kh-link {
  margin-top: 0.5rem;
  color: #ffb27a;
}
.kh-backers-lbl {
  margin: 0.25rem 0 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9aa0a9;
}

/* blog cards */
.kh-date {
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #5b6270;
}
.kh-blog h3 {
  margin-bottom: 1rem;
}
.kh-links-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.5rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}
.kh-links-row a {
  font-size: 0.95rem;
  font-weight: 600;
  color: #1e1e1e;
  text-decoration: none;
}
.kh-links-row a:hover {
  color: var(--primary-color, #fc7500);
}

/* final CTA */
.kh-cta {
  padding: 4rem 0;
  background: #1d1d1d;
  color: #fff;
  text-align: center;
}
.kh-cta h2 {
  color: #fff;
  font-weight: 600;
}
.kh-cta p {
  max-width: 700px;
  margin: 0 auto 1.75rem;
  font-size: 1.1rem;
  line-height: 1.65;
  color: #e3e5e8;
}
.kh-cta a.kh-mail {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
}
.kh-cta .kh-btn-outline {
  border-color: #fff;
  color: #fff;
  margin-left: 0.75rem;
}
.kh-cta .kh-btn-outline:hover {
  background: #fff;
  color: #1d1d1d;
}
@media (max-width: 520px) {
  .kh-cta .kh-btn-outline {
    margin: 0.75rem 0 0;
  }
}