.workscout-animated-icon-boxes,
.workscout-animated-icon-boxes * {
	box-sizing: border-box;
}

.workscout-animated-icon-boxes {
	--workscout-icon-boxes-accent: var(--workscout-primary-color, #26ae61);
	--workscout-icon-boxes-hover-lift: 6px;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	width: 100%;
	margin-inline: auto;
}

.workscout-animated-icon-boxes__card {
	position: relative;
	display: flex;
	min-width: 0;
	padding: 42px 38px 38px;
	overflow: visible;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 1px 2px rgb(17 17 17 / 7%);
	color: #111;
	flex-direction: column;
}

.workscout-animated-icon-boxes[data-workscout-animated-icon-boxes-ready="yes"][data-animate="yes"] .workscout-animated-icon-boxes__card {
	opacity: 0;
	transform: translateY(24px);
}

.workscout-animated-icon-boxes[data-workscout-animated-icon-boxes-ready="yes"][data-animate="yes"] .workscout-animated-icon-boxes__card.is-visible {
	animation: workscout-icon-boxes-rise 700ms cubic-bezier(.22, .61, .25, 1) forwards;
	animation-delay: var(--workscout-icon-boxes-delay, 0ms);
}

.workscout-animated-icon-boxes__card.is-done {
	opacity: 1 !important;
	transform: translateY(0);
	transition: transform 350ms cubic-bezier(.22, .61, .25, 1);
}

.workscout-animated-icon-boxes__card.is-done:hover {
	transform: translateY(calc(-1 * var(--workscout-icon-boxes-hover-lift)));
}

.workscout-animated-icon-boxes__number {
	position: absolute;
	top: 34px;
	inset-inline-end: 36px;
	color: #e2e2e2;
	font-size: 54px;
	font-weight: 300;
	line-height: 1;
	letter-spacing: -.02em;
	transition: color 350ms ease;
	user-select: none;
}

.workscout-animated-icon-boxes__card:hover .workscout-animated-icon-boxes__number {
	color: #cdeeda;
}

.workscout-animated-icon-boxes__icon-wrap {
	position: relative;
	align-self: flex-start;
	margin-bottom: 28px;
}

.workscout-animated-icon-boxes__icon {
	display: grid;
	width: 92px;
	height: 92px;
	border-radius: 12px;
	background: rgb(249 25 66 / 10%);
	color: var(--workscout-icon-boxes-accent);
	place-items: center;
	transition: background-color 350ms ease;
}

.workscout-animated-icon-boxes__card:hover .workscout-animated-icon-boxes__icon {
	background: var(--workscout-icon-boxes-accent);
}

.workscout-animated-icon-boxes__icon-graphic {
	display: grid;
	width: 100%;
	height: 100%;
	color: var(--workscout-icon-boxes-accent);
	font-size: 42px;
	line-height: 1;
	place-items: center;
	transform-origin: center;
	transition: color 350ms ease;
}

.workscout-animated-icon-boxes__card:hover .workscout-animated-icon-boxes__icon-graphic {
	color: #fff;
}

.workscout-animated-icon-boxes__icon-graphic > i {
	display: inline-block;
	color: currentcolor;
	font-size: 1em;
}

.workscout-animated-icon-boxes__icon-graphic svg {
	display: block;
	width: 42px;
	height: 42px;
	overflow: visible;
	color: currentcolor;
}

.workscout-animated-icon-boxes__icon-graphic [data-workscout-draw-shape] {
	stroke: currentcolor !important;
}

.workscout-animated-icon-boxes__icon-graphic [data-workscout-fill-shape] {
	fill: currentcolor !important;
}

.workscout-animated-icon-boxes[data-workscout-animated-icon-boxes-ready="yes"][data-animate="yes"] [data-workscout-icon-fx="draw"] [data-workscout-draw-shape] {
	transition: none;
}

.workscout-animated-icon-boxes[data-workscout-animated-icon-boxes-ready="yes"][data-animate="yes"] .workscout-animated-icon-boxes__card.is-visible [data-workscout-icon-fx="draw"] [data-workscout-draw-shape] {
	stroke-dashoffset: 0 !important;
	transition: stroke-dashoffset 1s cubic-bezier(.4, 0, .2, 1) calc(var(--workscout-icon-boxes-delay, 0ms) + var(--workscout-icon-shape-delay, 300ms));
}

.workscout-animated-icon-boxes[data-workscout-animated-icon-boxes-ready="yes"][data-animate="yes"] [data-workscout-icon-fx="pop"] {
	transform: scale(0);
}

.workscout-animated-icon-boxes[data-workscout-animated-icon-boxes-ready="yes"][data-animate="yes"] .workscout-animated-icon-boxes__card.is-visible [data-workscout-icon-fx="pop"] {
	animation: workscout-icon-boxes-pop 450ms cubic-bezier(.34, 1.56, .64, 1) forwards;
	animation-delay: calc(var(--workscout-icon-boxes-delay, 0ms) + 300ms);
}

.workscout-animated-icon-boxes__chip-float {
	position: absolute;
	inset-inline-start: 65%;
	z-index: 3;
	pointer-events: none;
}

.workscout-animated-icon-boxes__chip-float--top {
	top: -12px;
}

.workscout-animated-icon-boxes__chip-float--bottom {
	bottom: -12px;
}

.workscout-animated-icon-boxes[data-workscout-animated-icon-boxes-ready="yes"][data-animate="yes"] .workscout-animated-icon-boxes__chip-float {
	opacity: 0;
}

.workscout-animated-icon-boxes[data-workscout-animated-icon-boxes-ready="yes"][data-animate="yes"] .workscout-animated-icon-boxes__card.is-visible .workscout-animated-icon-boxes__chip-float {
	animation: workscout-icon-boxes-chip-in 550ms cubic-bezier(.34, 1.56, .64, 1) forwards, workscout-icon-boxes-bob 6.2s ease-in-out infinite;
	animation-delay: calc(var(--workscout-icon-boxes-delay, 0ms) + 650ms), calc(var(--workscout-icon-boxes-delay, 0ms) + 1450ms);
}

.workscout-animated-icon-boxes__chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	width: max-content;
	max-width: min(200px, calc(100vw - 52px));
	padding: 8px 14px;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 5px 24px rgb(17 17 17 / 8%);
	color: #111;
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1.35;
	transition: transform 500ms cubic-bezier(.22, .61, .25, 1);
}

.workscout-animated-icon-boxes__card:nth-child(4n+1) .workscout-animated-icon-boxes__chip {
	transform: rotate(3deg);
}

.workscout-animated-icon-boxes__card:nth-child(4n+2) .workscout-animated-icon-boxes__chip {
	transform: rotate(-5deg);
}

.workscout-animated-icon-boxes__card:nth-child(4n+3) .workscout-animated-icon-boxes__chip {
	transform: rotate(2deg);
}

.workscout-animated-icon-boxes__card:nth-child(4n) .workscout-animated-icon-boxes__chip {
	transform: rotate(-2deg);
}

.workscout-animated-icon-boxes__card:hover .workscout-animated-icon-boxes__chip {
	transform: rotate(5deg) translate(5px, -4px);
}

.workscout-animated-icon-boxes__chip-icon {
	display: inline-grid;
	flex: 0 0 auto;
	width: 13px;
	height: 13px;
	color: var(--workscout-icon-boxes-accent);
	font-size: 13px;
	line-height: 1;
	place-items: center;
}

.workscout-animated-icon-boxes__chip-icon i {
	color: currentcolor;
	font-size: 1em;
}

.workscout-animated-icon-boxes__chip-icon svg {
	width: 13px;
	height: 13px;
	fill: currentcolor;
}

.workscout-animated-icon-boxes__stars {
	color: var(--workscout-icon-boxes-accent);
	font-size: 12px;
	letter-spacing: 2px;
	white-space: nowrap;
}

.workscout-animated-icon-boxes__dot {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--workscout-icon-boxes-accent);
	font-style: normal;
	animation: workscout-icon-boxes-pulse 1.6s ease infinite;
}

.workscout-animated-icon-boxes .workscout-animated-icon-boxes__title {
	margin: 0;
	color: #111;
	font-size: 21px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -.01em;
}

.workscout-animated-icon-boxes__description {
	max-width: 40ch;
	margin-top: 12px;
	margin-bottom: 30px;
	color: #555;
	font-size: 15.5px;
	font-weight: 400;
	line-height: 1.65;
}

.workscout-animated-icon-boxes__description p {
	margin: 0;
	color: inherit;
	font: inherit;
}

.workscout-animated-icon-boxes__description p + p {
	margin-top: .8em;
}

.workscout-animated-icon-boxes__link {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 8px;
	margin-top: auto;
	color: #111;
	font-size: 14.5px;
	font-weight: 500;
	line-height: 1.4;
	text-decoration: none;
	transition: color 300ms ease;
}

.workscout-animated-icon-boxes__link:hover,
.workscout-animated-icon-boxes__link:focus {
	color: var(--workscout-icon-boxes-accent);
	text-decoration: none;
}

.workscout-animated-icon-boxes__link svg {
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	fill: none;
	stroke: currentcolor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 300ms ease;
}

.workscout-animated-icon-boxes__link:hover svg,
.workscout-animated-icon-boxes__link:focus svg {
	transform: translateX(4px);
}

[dir="rtl"] .workscout-animated-icon-boxes__link svg {
	transform: rotate(180deg);
}

[dir="rtl"] .workscout-animated-icon-boxes__link:hover svg,
[dir="rtl"] .workscout-animated-icon-boxes__link:focus svg {
	transform: translateX(-4px) rotate(180deg);
}

@keyframes workscout-icon-boxes-rise {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes workscout-icon-boxes-pop {
	to {
		transform: scale(1);
	}
}

@keyframes workscout-icon-boxes-chip-in {
	from {
		opacity: 0;
		transform: scale(.5) translateY(8px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes workscout-icon-boxes-bob {
	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-5px);
	}
}

@keyframes workscout-icon-boxes-pulse {
	50% {
		opacity: .3;
	}
}

@media (max-width: 767px) {
	.workscout-animated-icon-boxes {
		grid-template-columns: 1fr;
	}

	.workscout-animated-icon-boxes__card {
		padding: 32px 26px 30px;
	}

	.workscout-animated-icon-boxes__number {
		top: 26px;
		inset-inline-end: 28px;
		font-size: 46px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.workscout-animated-icon-boxes__card,
	.workscout-animated-icon-boxes__card.is-visible,
	.workscout-animated-icon-boxes__card.is-done,
	.workscout-animated-icon-boxes__card.is-done:hover {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	.workscout-animated-icon-boxes [data-workscout-draw-shape] {
		stroke-dashoffset: 0 !important;
		transition: none !important;
	}

	.workscout-animated-icon-boxes [data-workscout-icon-fx="pop"],
	.workscout-animated-icon-boxes__chip-float,
	.workscout-animated-icon-boxes__dot {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}