/* kx-kai: port of platform/Experience.tsx. Depends on kx-tokens. */
.kx.kx-kai { isolation: isolate; background: var(--kx-paper); }
.kx.kx-kai > .kx-shell { position: relative; }
.kx.kx-kai .kx-kai__wave { position: absolute; inset: 0; z-index: -10; opacity: 0.8;
  mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 74%, transparent); -webkit-mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 74%, transparent); }

.kx.kx-kai .kx-kai__head { margin-inline: auto; max-width: 46rem; text-align: center; }
.kx.kx-kai .kx-kai__heading { color: var(--kx-navy); }
.kx.kx-kai .kx-kai__lead { margin-top: 1.25rem; color: var(--kx-blue-ink); }
.kx.kx-kai .kx-kai__p { margin-inline: auto; margin-top: 1.25rem; max-width: 56ch; }

.kx.kx-kai .kx-kai__panel-wrap { margin: 3.5rem auto 0; max-width: 52rem; }
.kx.kx-kai .kx-kai__panel { border-radius: 1.25rem; background: rgb(255 255 255 / 0.5); padding: clamp(1.25rem, 3vw, 2.5rem);
  box-shadow: 0 2px 4px rgb(4 49 75 / 0.04), 0 30px 70px -28px rgb(4 49 75 / 0.3); backdrop-filter: blur(24px) saturate(1.5); -webkit-backdrop-filter: blur(24px) saturate(1.5); }
.kx.kx-kai .kx-kai__panel-img { width: 100%; border-radius: 0.75rem; }

.kx.kx-kai .kx-kai__cards { display: grid; gap: 1.25rem; margin-top: 4rem; }
@media (min-width: 640px)  { .kx.kx-kai .kx-kai__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .kx.kx-kai .kx-kai__cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kx.kx-kai .kx-kai__card { border-radius: 1rem; background: rgb(255 255 255 / 0.28); padding: 1.5rem 1.75rem;
  box-shadow: 0 10px 30px -14px rgb(4 49 75 / 0.28); backdrop-filter: blur(24px) saturate(1.5); -webkit-backdrop-filter: blur(24px) saturate(1.5); }
.kx.kx-kai .kx-kai__card-title { color: var(--kx-blue-ink); }
.kx.kx-kai .kx-kai__card-body { margin-top: 0.75rem; }

.kx.kx-kai .kx-kai__ctas { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem; margin-top: 3rem; }