/* kx-pillars: port of site/Platform.tsx. */
/* Platform.tsx's section has no overflow rule. The shared .kx-section overflow:hidden would make this section the
   sticky intro's scroll container (it then sits at the bottom of its grid row instead of the top). */
.kx.kx-section.kx-pillars { overflow: visible; }
.kx.kx-pillars .kx-pillars__grid { display: grid; row-gap: 3.5rem; }
@media (min-width: 1024px) { .kx.kx-pillars .kx-pillars__grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); column-gap: 4rem; } }
@media (min-width: 1024px) { .kx.kx-pillars .kx-pillars__intro { position: sticky; top: 8rem; align-self: start; } }
.kx.kx-pillars .kx-pillars__eyebrow { margin-bottom: 1.5rem; }
.kx.kx-pillars .kx-pillars__heading { color: var(--kx-navy); }
.kx.kx-pillars .kx-pillars__lead { margin-top: 1.75rem; max-width: 42ch; }
.kx.kx-pillars .kx-pillars__cta { margin-top: 2.25rem; }

.kx.kx-pillars .kx-pillars__list-wrap { position: relative; }
.kx.kx-pillars .kx-pillars__label { display: block; margin-bottom: 1.25rem; color: var(--kx-ink-faint); }
.kx.kx-pillars .kx-pillars__list { border-top: 1px solid var(--kx-line); }
.kx.kx-pillars .kx-pillars__item { position: relative; border-bottom: 1px solid var(--kx-line); }
.kx.kx-pillars .kx-pillars__rule { position: absolute; inset-inline: 0; bottom: -1px; z-index: 10; height: 2px; background: var(--kx-green); transform: scaleX(0); transform-origin: left; transition: transform var(--kx-duration-slow) var(--kx-ease-kairos); }
.kx.kx-pillars .kx-pillars__item.is-open .kx-pillars__rule { transform: scaleX(1); }
.kx.kx-pillars .kx-pillars__toggle { display: block; width: 100%; cursor: pointer; padding: 1.75rem 0 1.5rem; text-align: left; }
@media (min-width: 1024px) { .kx.kx-pillars .kx-pillars__toggle { padding: 2rem 0 1.75rem; } }
@media (min-width: 1280px) { .kx.kx-pillars .kx-pillars__toggle, .kx.kx-pillars .kx-pillars__panel-row { padding-right: 16rem; } }
.kx.kx-pillars .kx-pillars__row, .kx.kx-pillars .kx-pillars__panel-row { display: flex; align-items: baseline; gap: 1.25rem; }
.kx.kx-pillars .kx-pillars__panel-row { padding-bottom: 2rem; }
@media (min-width: 1024px) { .kx.kx-pillars .kx-pillars__row, .kx.kx-pillars .kx-pillars__panel-row { gap: 2rem; } }
.kx.kx-pillars .kx-pillars__n { flex: none; font-size: var(--kx-text-label); line-height: 1; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--kx-ink-faint); transition: color var(--kx-duration-base); }
.kx.kx-pillars .kx-pillars__item.is-open .kx-pillars__toggle .kx-pillars__n { color: var(--kx-navy); }
.kx.kx-pillars .kx-pillars__n--ghost { visibility: hidden; }
.kx.kx-pillars .kx-pillars__name { flex: 1; min-width: 0; display: block; font-size: var(--kx-text-h3); line-height: 1.12; letter-spacing: -0.018em; font-weight: 600; color: var(--kx-navy); }
.kx.kx-pillars .kx-pillars__toggle svg { flex: none; margin-top: 0.25rem; width: 1rem; height: 0.625rem; color: var(--kx-ink-faint); opacity: 0.4; transition: transform var(--kx-duration-base) var(--kx-ease-kairos), opacity var(--kx-duration-base) var(--kx-ease-kairos), color var(--kx-duration-base); }
.kx.kx-pillars .kx-pillars__item:hover .kx-pillars__toggle svg { opacity: 0.7; }
.kx.kx-pillars .kx-pillars__item.is-open .kx-pillars__toggle svg { transform: translateX(0.25rem); color: var(--kx-navy); opacity: 1; }
.kx.kx-pillars .kx-pillars__panel { overflow: hidden; }
.kx.kx-pillars .kx-pillars__panel-body { min-width: 0; }
.kx.kx-pillars .kx-pillars__body { max-width: 52ch; font-size: 0.9375rem; line-height: 1.625; color: var(--kx-ink-muted); }
.kx.kx-pillars .kx-pillars__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.25rem; }
.kx.kx-pillars .kx-pillars__chip { border-radius: 999px; border: 1px solid rgb(184 246 77 / 0.55); background: rgb(184 246 77 / 0.22); padding: 0.25rem 0.625rem; font-size: 0.75rem; font-weight: 600; color: var(--kx-navy); }
.kx.kx-pillars a.kx-pillars__chip { text-decoration: none; transition: background-color var(--kx-duration-fast) var(--kx-ease-soft), border-color var(--kx-duration-fast) var(--kx-ease-soft); }
.kx.kx-pillars a.kx-pillars__chip:hover, .kx.kx-pillars a.kx-pillars__chip:focus-visible { background: rgb(184 246 77 / 0.6); border-color: rgb(184 246 77); color: var(--kx-navy); }

.kx.kx-pillars .kx-pillars__follower { display: none; }
@media (min-width: 1280px) { .kx.kx-pillars .kx-pillars__follower { display: block; position: absolute; top: 0; right: 0; z-index: 20; width: 14rem; pointer-events: none; } }
.kx.kx-pillars .kx-pillars__follower-frame { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 0.75rem; box-shadow: 0 24px 48px -18px rgb(4 49 75 / 0.4); }
.kx.kx-pillars .kx-pillars__follower-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--kx-duration-slow) var(--kx-ease-soft); }
.kx.kx-pillars .kx-pillars__follower-frame img.is-on { opacity: 1; }

/* hello-elementor paints every button:hover/:focus/:active with a pink ground; the rows are plain text. */
.kx.kx-pillars .kx-pillars__toggle:hover, .kx.kx-pillars .kx-pillars__toggle:focus, .kx.kx-pillars .kx-pillars__toggle:active { background: none; color: inherit; outline: 0; }
.kx.kx-pillars .kx-pillars__toggle:focus-visible { outline: 2px solid var(--kx-blue); outline-offset: 4px; border-radius: 4px; }