/**
 * Partners & Integrations archive blocks: structure only (colors/radii/gaps/durations are
 * themable custom props on .pi). All selectors nest under .pi, the
 * S&F skin under .pi__filter-inner .searchandfilter — nothing leaks out.
 * The filter sidebar mirrors the kf-compliance block: collapsed behind an
 * icon-button leading the top-bar row, expanding with a grid-column
 * transition at every breakpoint. Closed, its track is zero so the grid
 * below keeps full width.
 */

.pi {
	--pi-cols: 3;
	--pi-gap: 40px;
	--pi-label-color: #5e5e5e;
	--pi-panel-dur: 380ms;
	--pi-sidebar-w: 230px;
	--pi-sidebar-gap: 40px;

	--pi-card-bg: transparent;
	--pi-card-fg: inherit;
	--pi-radius: 20px;
	--pi-border: 1px solid rgba(0, 0, 0, 0.12);
	--pi-placeholder-bg: rgba(0, 0, 0, 0.06);

	--pi-pill-bg: rgba(0, 0, 0, 0.06);
	--pi-pill-fg: inherit;
	--pi-pill-radius: 999px;
	--pi-pill-size: 16px;
	--pi-ember: #ff9371;
	--pi-obsidian: #1a1825;

	--pi-btn-bg: #E2E2E8;
	--pi-btn-fg: inherit;
	--pi-btn-border: 1px solid transparent;
	--pi-btn-radius: 999px;
	--pi-btn-padding: 10px 22px;
	--pi-btn-active-bg: #6061ff;
	--pi-btn-active-fg: #fff;

	--pi-img-ratio: 4 / 2;
	--pi-zoom: 1.06;
	--pi-video-icon: 48px;

	--pi-dur: 240ms;
	--pi-ease: ease;

	color: var(--pi-card-fg);
}

.pi--cols-3 {
	--pi-cols: 3;
}

.pi--cols-4 {
	--pi-cols: 4;
}

.pi *,
.pi *::before,
.pi *::after {
	box-sizing: border-box;
}

.pi__layout {
	display: grid;
	grid-template-columns: 0 minmax(0, 1fr);
	column-gap: 0;
	row-gap: 0;
	align-items: start;
	transition: grid-template-columns 0.3s ease, column-gap 0.3s ease;
}

.pi.filter-open .pi__layout {
	grid-template-columns: var(--pi-sidebar-w) minmax(0, 1fr);
	column-gap: var(--pi-sidebar-gap);
}

.pi__main {
	min-width: 0;
}

.pi__notice {
	padding: 16px;
	border: var(--pi-border);
	border-radius: var(--pi-radius);
}

.pi__filter-open {
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	opacity: 1;
	transition: opacity 0.3s ease;
}

.pi__filter-open svg {
	display: block;
}

.pi__filter-open svg rect {
	transition: fill 0.3s ease;
}

.pi__filter-open:hover svg rect {
	fill: #5F61FF;
}

.pi.filter-open .pi__filter-open {
	display: none;
	opacity: 0;
}

.pi__filter-inner {
	position: sticky;
	top: calc(var(--header-nav-bar-height, 80px) + 40px);
	width: 100%;
	min-width: 0;
	padding: 25px 0;
	border-radius: 10px;
	border: 0;
	isolation: isolate;
	background: var(--pi-drawer-bg, #fff);
	box-shadow: 0px 4px 25px 0px #1A182526;
	opacity: 0;
	visibility: hidden;
	max-height: 0;
	overflow: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease, max-height 0.3s ease, padding 0.3s ease;
}

.pi__filter-inner::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(#5f61ff 0%, #5f61ff68 50px, #ffffff00 200px);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.pi.filter-open .pi__topbar:not(:has(.pi__topbar-btn)) {
	display: none;
}

.pi.filter-open .pi__filter-inner {
	padding: 25px 20px;
	opacity: 1;
	visibility: visible;
	max-height: 2000px;
}

.pi__filter-head {
	display: flex;
	align-items: center;
	font-weight: 700;
	font-size: 16px;
	line-height: 1;
}

.pi__filter-head > svg {
	margin-right: 8px;
}

.pi__filter-close {
	margin-left: auto;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	transition: opacity 0.3s ease;
}

.pi__filter-close:hover {
	opacity: 0.7;
}

.pi__filter-close svg {
	display: block;
}

.pi__topbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 15px;
	margin: 0 0 var(--pi-gap);
	padding: 0;
	list-style: none;
}

.pi__topbar-item {
	margin: 0;
}

.pi__topbar-btn {
	padding: var(--pi-btn-padding);
	border: var(--pi-btn-border);
	border-radius: var(--pi-btn-radius);
	background: var(--pi-btn-bg);
	color: var(--pi-btn-fg);
	font: inherit;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color var(--pi-dur) var(--pi-ease),
		color var(--pi-dur) var(--pi-ease);
}

.pi__topbar-btn:hover {
	background: var(--pi-btn-active-bg);
	color: var(--pi-btn-active-fg);
}

.pi__topbar-btn.is-active {
	background: var(--pi-btn-active-bg);
	color: var(--pi-btn-active-fg);
}


/* ---- Grid and cards ---- */

.pi__grid {
	display: grid;
	grid-template-columns: repeat(var(--pi-cols), minmax(0, 1fr));
	column-gap: var(--pi-gap);
	row-gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pi__item {
	margin: 0;
	min-width: 0;
	padding-bottom: var(--pi-gap);
	opacity: 1;
	transition: opacity var(--pi-dur) var(--pi-ease);
}

.pi__item.is-entering {
	opacity: 0;
}

.pi__card {
	height: 100%;
	background: #fff;
	border: 1px solid rgba(26, 24, 37, 0.1);
	border-radius: var(--pi-radius);
	overflow: hidden;
	transition: border-color var(--pi-dur) var(--pi-ease), box-shadow var(--pi-dur) var(--pi-ease);
}

.pi__card:hover {
	box-shadow: 0 4px 30px 0 rgba(26, 24, 37, 0.15);
}

.pi__card.is-active {
	border-color: #5f61ff;
	box-shadow: 0 0 0 1px #5f61ff;
}

.pi__card-link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
	cursor: pointer;
}

.pi__card-link:focus-visible {
	outline: 2px solid #5f61ff;
	outline-offset: -2px;
	border-radius: var(--pi-radius);
}

.pi__thumb {
	position: relative;
	display: block;
	flex: none;
	box-sizing: border-box;
	width: 100%;
	aspect-ratio: 304 / 200;
	overflow: hidden;
	background: #fafafa;
}

.pi__img {
	position: absolute;
	inset: 28px 30px;
	display: block;
	width: calc(100% - 60px);
	height: calc(100% - 56px);
	max-width: none;
	object-fit: contain;
}

.pi__card-body {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 30px 50px 36px;
}

.pi__title {
	font-size: 26px;
	font-weight: 400;
	line-height: 33px;
	color: #191919;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	line-clamp: 2;
	overflow: hidden;
}

.pi__label {
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.6px;
	line-height: 16px;
	text-transform: uppercase;
	color: var(--pi-label-color);
}

/* ---- Opened panel (a full-width grid row under the clicked card's row) ---- */

.pi__panel {
	grid-column: 1 / -1;
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	transition: grid-template-rows var(--pi-panel-dur) var(--pi-ease), opacity var(--pi-panel-dur) var(--pi-ease);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pi__panel.is-open {
	grid-template-rows: 1fr;
	opacity: 1;
}

.pi__panel-clip {
	min-height: 0;
	overflow: hidden;
}

.pi__panel.is-settled .pi__panel-clip {
	overflow: visible;
}

.pi__panel-body {
	position: relative;
	margin-bottom: var(--pi-gap);
	padding: 33px 49px;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: var(--pi-radius);
	box-shadow: 0 4px 51.3px 0 rgba(0, 0, 0, 0.05);
	color: #000;
}

.pi__panel-body::before {
	content: '';
	position: absolute;
	top: -9px;
	left: calc(var(--pi-notch-x, 80px) - 8px);
	width: 16px;
	height: 16px;
	background: #fff;
	border-top: 1px solid rgba(26, 24, 37, 0.12);
	border-left: 1px solid rgba(26, 24, 37, 0.12);
	transform: rotate(45deg);
	opacity: 0;
	transition: opacity 0.2s ease;
}

.pi__panel.is-settled .pi__panel-body::before {
	opacity: 1;
}

.pi__panel-close {
	position: absolute;
	top: 22px;
	right: 24px;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.pi__panel-close:hover svg path {
	stroke: #5f61ff;
}

.pi__panel-top {
	display: grid;
	grid-template-columns: 214px minmax(0, 1fr);
}

.pi__panel-side {
	box-sizing: border-box;
	padding: 16px 56px 0 0;
	border-right: 1px solid rgba(0, 0, 0, 0.1);
}

.pi__metas {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin: 0;
}

.pi__meta-name {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: #5e5e5e;
}

.pi__meta-value {
	margin: -3px 0 0;
	font-size: 16px;
	line-height: 22px;
	text-transform: capitalize;
	color: #000;
}

.pi__badge {
	display: block;
	width: 91px;
	height: 91px;
	object-fit: contain;
	margin-top: 18px;
}

.pi__text {
	max-width: 62em;
	padding: 16px 0 0 55px;
	font-size: 18px;
	line-height: 24px;
	color: #191919;
}

.pi__text > :first-child {
	margin-top: 0;
}

.pi__text > :last-child {
	margin-bottom: 0;
}

.pi__links {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	margin: 16px 0 0 55px;
	padding: 0;
	list-style: none;
}

.pi__link {
	display: block;
	line-height: 0;
}

.pi__link img {
	display: block;
	width: 20px;
	height: 20px;
	object-fit: contain;
	transition: transform var(--pi-dur) var(--pi-ease);
}

.pi__link:hover img,
.pi__link:focus-visible img {
	transform: scale(1.15);
}

.pi__learn {
	margin-top: 24px;
	padding-top: 24px;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.pi__learn-title {
	margin: 0 0 24px;
	font-size: 16px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: #5f61ff;
}

.pi__learn-title.l3::before {
	content: "///";
	margin-right: 0.2em;
	letter-spacing: 0.16em;
}

.pi__learn-list {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pi__learn-type {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 8px;
	font-size: 14px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: #000;
}

.pi__learn-type img {
	width: auto;
	height: 12px;
	object-fit: contain;
}

.pi__learn-link {
	font-size: 18px;
	line-height: 24px;
	color: #000;
	text-decoration: underline;
}

.pi__learn-link:hover {
	color: #5f61ff;
}

.pi__empty {
	margin: var(--pi-gap) 0 0;
}

.pi__more-wrap {
	display: flex;
	justify-content: center;
	margin-top: calc(var(--pi-gap) * 1.5);
}

/* Author display beats the UA [hidden] rule, so re-hide explicitly. */
.pi__more-wrap[hidden] {
	display: none;
}

.pi__more-wrap .pi__more {
	position: relative;
	display: grid;
	padding: var(--pi-btn-padding);
	border: var(--pi-btn-border);
	border-radius: var(--pi-btn-radius);
	background: var(--pi-btn-bg);
	color: var(--pi-btn-fg);
	font: inherit;
	line-height: 1.2;
	cursor: pointer;



	align-items: center;
	padding: 18px 24px;

	background: rgba(255, 255, 255, 0.1);
	border: 1px solid #1A1825;
	border-radius: 49px;

	transition: all 0.3s ease;
}

/* Both labels share one grid cell, so swapping them shifts no layout. */
.pi__more-wrap .pi__more-label,
.pi__more-wrap .pi__more-loading {
	grid-area: 1 / 1;
	text-align: center;
}

.pi__more-wrap .pi__more-loading {
	visibility: hidden;
}

.pi__more-wrap .pi__more.is-loading {
	cursor: progress;
}

.pi__more-wrap .pi__more.is-loading .pi__more-label {
	visibility: hidden;
}

.pi__more-wrap .pi__more.is-loading .pi__more-loading {
	visibility: visible;
}

.pi__more-wrap .pi__more.is-error {
	border-color: #d6455d;
}

.pi__more-wrap .pi__more:hover,
.pi__more-wrap .pi__more:focus-visible {
	background: #1A1825;
	color: #fff;
}

/* S&F skin (scoped: other pages untouched). */

.pi__filter-inner .searchandfilter ul {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pi__filter-inner .searchandfilter > ul {
	margin-top: 20px;
	gap: 10px;
}

.pi__filter-inner .searchandfilter ul > li > h4 {
	font-weight: 600;
	font-size: 12px;
	line-height: 20px;
	letter-spacing: 8%;
	text-transform: uppercase;
}

.pi__filter-inner .searchandfilter .sf-label-checkbox {
	font-weight: 500;
	font-size: 14px;
	line-height: 100%;
}

.pi__filter-inner .searchandfilter .sf-input-checkbox:not(:checked) {
	appearance: none;
	-webkit-appearance: none;
	width: 12px;
	height: 12px;
	margin-left: 0;
	border: 0;
	border-radius: 2px;
	background-color: #1A182526;
	cursor: pointer;
}

.pi__filter-inner .searchandfilter .sf-input-checkbox:checked {
	width: 12px;
	height: 12px;
	margin-left: 0;
	border-radius: 2px;
	accent-color: #5F61FF;
}

.pi__filter-inner .searchandfilter li[data-sf-field-input-type="checkbox"] li {
	display: flex;
	align-items: center;
	gap: 3px;
}

.pi__filter-inner .searchandfilter .sf-field-search input[type="text"] {
	width: 100%;
	padding: 15px;
	padding-right: 40px;
	border: 0;
	border-radius: 80px;
	background-color: transparent;
	box-shadow:
		0px 4px 20px 0px #00000017,
		inset 1px 1px 0px 0px #fff,
		inset -1px -1px 0px 0px #fff,
		inset -6px -6px 10px 3px #ffffff55;
	font-size: 14px;
	line-height: 150%;
}

.pi__filter-inner .searchandfilter .sf-field-search input[type="text"]:focus {
	outline-color: #5F61FF;
}

.pi__filter-inner .searchandfilter .sf-field-search label {
	position: relative;
	display: flex;
	align-items: center;
}

.pi__filter-inner .searchandfilter .sf-field-search label::after {
	content: url('data:image/svg+xml,<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.49547 0C3.36472 0 0 3.36472 0 7.49547C0 11.6262 3.36472 14.9909 7.49547 14.9909C9.29177 14.9909 10.9414 14.3531 12.2343 13.2942L16.7096 17.7695C16.7787 17.8415 16.8614 17.8989 16.953 17.9385C17.0445 17.978 17.143 17.9989 17.2427 18C17.3425 18.001 17.4414 17.9821 17.5337 17.9444C17.626 17.9067 17.7099 17.851 17.7804 17.7804C17.851 17.7099 17.9067 17.626 17.9444 17.5337C17.9821 17.4414 18.001 17.3425 18 17.2427C17.9989 17.143 17.978 17.0445 17.9385 16.953C17.8989 16.8614 17.8415 16.7787 17.7695 16.7096L13.2942 12.2343C14.3531 10.9414 14.9909 9.29177 14.9909 7.49547C14.9909 3.36472 11.6262 0 7.49547 0ZM7.49547 1.49909C10.8161 1.49909 13.4919 4.17489 13.4919 7.49547C13.4919 10.8161 10.8161 13.4919 7.49547 13.4919C4.17489 13.4919 1.49909 10.8161 1.49909 7.49547C1.49909 4.17489 4.17489 1.49909 7.49547 1.49909Z" fill="%231A1825"/></svg>');
	position: absolute;
	right: 16px;
	top: 16px;
}

.pi__filter-inner .searchandfilter input[type="text"],
.pi__filter-inner .searchandfilter input[type="search"],
.pi__filter-inner .searchandfilter select {
	max-width: 100%;
}

.pi__filter-inner .searchandfilter .sf-field-reset a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin-top: 10px;
	padding: 12px 14px;
	border-radius: 49px;
	background: #1A1825;
	color: #fff;
	font-weight: 500;
	font-size: 16px;
	line-height: 100%;
	transition: background-color 0.2s ease;
}

.pi__filter-inner .searchandfilter .sf-field-reset a:hover {
	background: #5F61FF;
}

.pi__filter-inner .search-filter-scroll-loading {
	display: none;
}

@media (max-width: 1024px) {
	.pi {
		--pi-cols: 2;
	}

	.pi__panel-top {
		grid-template-columns: 170px minmax(0, 1fr);
	}

	.pi__panel-side {
		padding-right: 24px;
	}

	.pi__text,
	.pi__links {
		margin-left: 0;
		padding-left: 24px;
	}

	.pi__links {
		margin-left: 24px;
		padding-left: 0;
	}

	.pi__panel-body {
		padding: 36px 32px 32px;
	}
}

@media (max-width: 767px) {
	.pi__layout,
	.pi.filter-open .pi__layout {
		grid-template-columns: 1fr;
		column-gap: 0;
		transition: none;
	}

	.pi.filter-open .pi__filter-open {
		display: inline-block;
		opacity: 1;
	}

	.pi__filter-inner {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		max-width: 100%;
		max-height: 100vh;
		overflow-y: auto;
		z-index: 9999;
		opacity: 0;
		visibility: hidden;
		transform: translateX(-100%);
		transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
	}

	.pi.filter-open .pi__filter-inner {
		position: fixed;
		top: 0;
		width: calc(100vw - 40px);
		max-height: calc(100vh - 40px);
		margin: 20px;
		padding: 25px 20px;
		background: var(--pi-drawer-bg, #fff);
		opacity: 1;
		visibility: visible;
		transform: translateX(0);
        z-index: 10000;
	}

	.pi__title {
		margin: 0;
		font-weight: 500;
		font-size: 20px;
		line-height: 100%;
		letter-spacing: -2%;
	}
}

@media (max-width: 640px) {
	.pi {
		--pi-cols: 1;
		--pi-gap: 20px;
	}

	.pi__card-body {
		padding: 24px 28px 28px;
	}

	.pi__panel-body {
		padding: 56px 22px 26px;
	}

	.pi__meta-name,
	.pi__learn-type {
		font-size: 12px;
	}

	.pi__panel-top {
		grid-template-columns: minmax(0, 1fr);
	}

	.pi__panel-side {
		padding: 0 0 22px;
		border-right: 0;
		border-bottom: 1px solid rgba(26, 24, 37, 0.12);
	}

	.pi__text {
		padding: 20px 0 0;
		font-size: 16px;
		line-height: 22px;
	}

	.pi__links {
		margin-left: 0;
	}

	.pi__learn-link {
		font-size: 16px;
		line-height: 22px;
	}

	.pi__topbar {
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-bottom: 4px;
		-webkit-overflow-scrolling: touch;
	}

	.pi__topbar-btn {
		white-space: nowrap;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pi__img,
	.pi__panel,
	.pi__card,
	.pi__link img,
	.pi__item,
	.pi__layout,
	.pi__filter-open,
	.pi__filter-open svg rect,
	.pi__filter-inner,
	.pi__filter-close,
	.pi__more-glyph,
	.pi__pill,
	.pi__pill-iconwrap,
	.pi__topbar-btn {
		transition: none;
	}

	.pi__card:hover .pi__img,
	.pi__card-link:focus-visible .pi__img {
		transform: none;
	}

	.pi__card:hover .pi__more-glyph {
		transform: none;
	}
}