:root {
	--bpsfce-icon-size: 42px;
	--bpsfce-circle-size: 72px;
	--bpsfce-radius: 22px;
	--bpsfce-primary: #176bff;
	--bpsfce-secondary: #21c7d9;
	--bpsfce-ink: #08244d;
	--bpsfce-surface: #eef6ff;
	--bpsfce-ring: rgba(23, 107, 255, 0.14);
	--bpsfce-card-shadow: 0 14px 34px rgba(8, 36, 77, 0.08);
	--bpsfce-hover-y: -4px;
	--bpsfce-hover-scale: 1.05;
}

html[data-bpsfce-palette="cyan"] {
	--bpsfce-primary: #0f7cff;
	--bpsfce-secondary: #22d3ee;
	--bpsfce-ink: #063b5b;
	--bpsfce-surface: #ecfeff;
	--bpsfce-ring: rgba(14, 165, 233, 0.16);
}

html[data-bpsfce-palette="indigo"] {
	--bpsfce-primary: #245cff;
	--bpsfce-secondary: #7c3aed;
	--bpsfce-ink: #172554;
	--bpsfce-surface: #eef2ff;
	--bpsfce-ring: rgba(79, 70, 229, 0.16);
}

html[data-bpsfce-shadow="soft"] {
	--bpsfce-card-shadow: 0 10px 26px rgba(8, 36, 77, 0.06);
}

html[data-bpsfce-shadow="strong"] {
	--bpsfce-card-shadow: 0 20px 46px rgba(8, 36, 77, 0.14);
}

.bpsfce-card {
	position: relative;
	border-radius: var(--bpsfce-radius);
	transition: transform 250ms ease, box-shadow 250ms ease, border-color 250ms ease;
	will-change: transform;
}

.bps-benefit-card .bps-icon,
.service-card .service-icon,
.feature-card .feature-icon,
.bps-feature-card .bps-icon,
.bps-feature-card .feature-icon {
	min-height: var(--bpsfce-circle-size);
	min-width: var(--bpsfce-circle-size);
}

.bpsfce-card:hover,
.bpsfce-card:focus-within {
	border-color: rgba(23, 107, 255, 0.28);
	box-shadow: var(--bpsfce-card-shadow);
	transform: translateY(var(--bpsfce-hover-y));
}

html[data-bpsfce-hover="off"] .bpsfce-card,
html[data-bpsfce-hover="off"] .bpsfce-card:hover,
html[data-bpsfce-hover="off"] .bpsfce-card:focus-within {
	box-shadow: inherit;
	transform: none;
}

.bpsfce-icon-wrap {
	align-items: center !important;
	border-radius: 999px !important;
	color: var(--bpsfce-primary) !important;
	display: inline-flex !important;
	flex: 0 0 var(--bpsfce-circle-size);
	font-size: 0 !important;
	height: var(--bpsfce-circle-size) !important;
	justify-content: center !important;
	letter-spacing: normal !important;
	line-height: 1 !important;
	margin-bottom: 24px;
	max-width: var(--bpsfce-circle-size);
	min-height: var(--bpsfce-circle-size);
	min-width: var(--bpsfce-circle-size);
	overflow: hidden;
	padding: 0 !important;
	text-indent: 0 !important;
	text-transform: none !important;
	transition: transform 250ms ease, box-shadow 250ms ease, background 250ms ease, border-color 250ms ease;
	width: var(--bpsfce-circle-size) !important;
}

.bpsfce-icon-art {
	align-items: center;
	display: inline-flex;
	height: var(--bpsfce-icon-size);
	justify-content: center;
	transition: transform 250ms ease, filter 250ms ease;
	width: var(--bpsfce-icon-size);
}

.bpsfce-icon-art img {
	border: 0;
	border-radius: 0;
	box-shadow: none;
	display: block;
	height: 100%;
	max-height: 100%;
	max-width: 100%;
	object-fit: contain;
	width: 100%;
}

.bpsfce-card:hover .bpsfce-icon-wrap,
.bpsfce-card:focus-within .bpsfce-icon-wrap {
	transform: translateY(-2px);
}

.bpsfce-card:hover .bpsfce-icon-art,
.bpsfce-card:focus-within .bpsfce-icon-art {
	transform: scale(var(--bpsfce-hover-scale));
}

html[data-bpsfce-hover="off"] .bpsfce-card:hover .bpsfce-icon-wrap,
html[data-bpsfce-hover="off"] .bpsfce-card:focus-within .bpsfce-icon-wrap,
html[data-bpsfce-hover="off"] .bpsfce-card:hover .bpsfce-icon-art,
html[data-bpsfce-hover="off"] .bpsfce-card:focus-within .bpsfce-icon-art {
	transform: none;
}

.bpsfce-icon-art .screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

@media (max-width: 700px) {
	:root {
		--bpsfce-icon-size: min(38px, var(--bpsfce-icon-size));
		--bpsfce-circle-size: min(64px, var(--bpsfce-circle-size));
	}

	.bpsfce-icon-wrap {
		margin-bottom: 18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bpsfce-card,
	.bpsfce-icon-wrap,
	.bpsfce-icon-art {
		transition: none;
	}

	.bpsfce-card:hover,
	.bpsfce-card:focus-within,
	.bpsfce-card:hover .bpsfce-icon-wrap,
	.bpsfce-card:focus-within .bpsfce-icon-wrap,
	.bpsfce-card:hover .bpsfce-icon-art,
	.bpsfce-card:focus-within .bpsfce-icon-art {
		transform: none;
	}
}
