/* A quiet brand spread between the product evidence and closing invitation.
   Everything is visible in normal document flow, with no motion or hover dependency. */
.k-connect {
  scroll-margin-top: var(--pinned-header-height, 74px);
  max-width: calc(var(--site-width, 1520px) + var(--site-gutter, 48px) * 2);
  margin-inline: auto;
  padding: clamp(72px, 7vw, 112px) var(--site-gutter, 24px) clamp(72px, 7vw, 112px);
  border-top: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text-primary);
  font-family: var(--font-body);
}
.k-connect *, .k-connect *::before, .k-connect *::after { box-sizing: border-box; }
.k-connect h2, .k-connect h3, .k-connect p, .k-connect ul, .k-connect li { margin: 0; padding: 0; }
.k-connect .kc-head {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  align-items: end;
  column-gap: clamp(40px, 6vw, 100px);
  margin-bottom: clamp(56px, 5vw, 80px);
}
.k-connect .kc-head h2 {
  max-width: 15ch;
  font-size: clamp(38px, 4.5vw, 68px);
  font-weight: 400;
  letter-spacing: -.045em;
  line-height: 1.04;
  text-wrap: balance;
}
.k-connect .kc-head p {
  padding-bottom: 3px;
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.5;
  color: var(--color-text-secondary);
}
.k-connect .kc-band {
  display: grid;
  grid-template-columns: 136px minmax(0, 1fr);
  align-items: center;
  gap: 32px;
  padding-block: 46px;
}
.k-connect .kc-band + .kc-band { border-top: 1px solid var(--color-border); }
.k-connect .kc-band h3 {
  font-size: 17px;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -.015em;
  color: var(--color-text-secondary);
}
.k-connect .kc-brands {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: center;
  gap: 28px;
  list-style: none;
}
.k-connect .kc-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  min-height: 64px;
  font-size: clamp(18px, 1.5vw, 23px);
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: 1.1;
  list-style: none;
}
.k-connect .kc-brand img {
  display: block;
  flex: none;
  object-fit: contain;
  max-width: 100%;
  filter: grayscale(1) brightness(0);
  opacity: .83;
}
.k-connect .kc-brand--wordmark img { width: 100%; max-width: 132px; height: 36px; }
.k-connect .kc-brand--salsify img { max-width: 120px; }
.k-connect .kc-brand--inriver img { max-width: 121px; }
.k-connect .kc-brand--sap img { max-width: 84px; height: 62px; }
.k-connect .kc-brand--salesforce { flex-direction: column; gap: 2px; text-align: center; font-size: 16px; }
.k-connect .kc-brand--salesforce img { height: 32px; }
.k-connect .kc-subname { display: block; margin-top: 4px; font-size: 12px; font-weight: 400; letter-spacing: 0; white-space: nowrap; }
.k-connect .kc-brand--google { font-size: 19px; }
.k-connect .kc-brand--google .kc-subname { font-size: 14px; margin-top: 2px; }
.k-connect .kc-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

@media (max-width: 1199px) {
  .k-connect .kc-band { grid-template-columns: 136px minmax(0, 1fr); padding-block: 36px; }
  .k-connect .kc-brands { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 40px; }
  .k-connect .kc-brand { font-size: 23px; }
  .k-connect .kc-brand--salesforce { font-size: 16px; }
  .k-connect .kc-brand--google { font-size: 20px; }
}
@media (max-width: 700px) {
  .k-connect { padding-block: 64px; }
  .k-connect .kc-head { display: block; margin-bottom: 24px; }
  .k-connect .kc-head h2 { font-size: clamp(36px, 8.6vw, 52px); max-width: 15ch; }
  .k-connect .kc-head p { margin-top: 24px; font-size: 17px; }
  .k-connect .kc-band { grid-template-columns: minmax(0, 1fr); gap: 26px; padding-block: 32px; }
  .k-connect .kc-band h3 { font-size: 15px; }
  .k-connect .kc-band h3 br { display: none; }
  .k-connect .kc-brands { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 28px; }
  .k-connect .kc-brand { min-height: 60px; font-size: 22px; }
  .k-connect .kc-brand--salesforce { font-size: 16px; }
  .k-connect .kc-brand--google { font-size: 20px; }
}

/* ---------------------------------------------------- cycling brand bands -- */
/* Each band loops horizontally (data band left, sell band right). Two copies of
   the list slide by one list width; the copy is aria-hidden. Hover pauses.
   Reduced motion: one static list that wraps. */
.k-connect .kc-marquee {
  --kc-gap: clamp(40px, 4.5vw, 72px);
  display: flex; overflow: hidden; min-width: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.k-connect .kc-track {
  display: flex; flex: none; grid-template-columns: none; align-items: center;
  gap: var(--kc-gap); padding-right: var(--kc-gap);
  animation: kc-scroll var(--kc-dur, 70s) linear infinite;
}
.k-connect .kc-marquee[data-dir="right"] .kc-track { animation-direction: reverse; --kc-dur: 80s; }
.k-connect .kc-marquee:hover .kc-track, .k-connect .kc-marquee:focus-within .kc-track { animation-play-state: paused; }
@keyframes kc-scroll { to { transform: translateX(-100%); } }
.k-connect .kc-track .kc-brand { flex: none; white-space: nowrap; }
.k-connect .kc-track .kc-brand--wordmark img { width: auto; }
.k-connect .kc-brand--icon img { width: 26px; height: 26px; }
.k-connect .kc-brand--icon, .k-connect .kc-brand--text { font-size: clamp(18px, 1.5vw, 22px); }
.k-connect .kc-track .kc-subname { display: inline; margin: 0 0 0 5px; font-size: .62em; color: var(--color-text-secondary); }
.k-connect .kc-track .kc-brand--salesforce { flex-direction: row; gap: 8px; font-size: clamp(18px, 1.5vw, 22px); }
.k-connect .kc-brand--text span { color: var(--color-text-primary); opacity: .88; }
@media (max-width: 700px) {
  .k-connect .kc-marquee { --kc-gap: 36px; }
  .k-connect .kc-brand--icon, .k-connect .kc-brand--text { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .k-connect .kc-marquee { -webkit-mask-image: none; mask-image: none; }
  .k-connect .kc-track { animation: none; flex-wrap: wrap; flex: 1; padding-right: 0; row-gap: 20px; }
  .k-connect .kc-track[aria-hidden="true"] { display: none; }
}

/* Brand colour: logos show in their own colours (owner: mono read as flat). */
.k-connect .kc-brand img { filter: none; opacity: 1; }
.k-connect .kc-brand--text span { opacity: 1; }
/* Phones: fade the band edges wider so wordmarks never read as sliced. */
@media (max-width: 700px) {
  .k-connect .kc-marquee {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%);
  }
}