.workscout-feature-cards,
.workscout-feature-cards * {
	box-sizing: border-box;
}

.workscout-feature-cards {
	--lfc-card-max-height: 620px;
	--lfc-ink: #111;
	--lfc-muted: #777;
	--lfc-faint: #9a9a9a;
	--lfc-line: #e8e8e8;
	--lfc-star: #e8b23c;
	--lfc-ease: cubic-bezier(0.3, 1.32, 0.4, 1);
	--lfc-bounce: cubic-bezier(0.32, 1.85, 0.55, 1);
	--lfc-duration: 0.55s;
	width: 100%;
	color: var(--lfc-ink);
	-webkit-font-smoothing: antialiased;
}

.workscout-feature-cards__shell {
	width: 100%;
	padding: 10px;
	border-radius: 12px;
	background: #efefef;
}

.workscout-feature-cards__cards {
	display: flex;
	gap: 10px;
}

.workscout-feature-cards__card {
	display: flex;
	overflow: hidden;
	min-width: 0;
	min-height: min(500px, var(--lfc-card-max-height));
	height: min(64vh, var(--lfc-card-max-height));
	max-height: var(--lfc-card-max-height);
	flex: 1 1 0%;
	padding: 12px;
	border-radius: 12px;
	outline: none;
	background: var(--lfc-card-bg);
	color: var(--lfc-ink);
	text-decoration: none;
	transition: flex-grow var(--lfc-duration) var(--lfc-ease), background-color var(--lfc-duration) var(--lfc-ease);
	animation: workscoutFeatureCardsEnter 0.7s var(--lfc-ease) backwards;
}

.workscout-feature-cards__card:nth-child(2) {
	animation-delay: 0.1s;
}

.workscout-feature-cards__card:nth-child(3) {
	animation-delay: 0.2s;
}

.workscout-feature-cards__card:nth-child(4) {
	animation-delay: 0.3s;
}

@keyframes workscoutFeatureCardsEnter {
	from {
		opacity: 0;
		transform: translateY(26px);
	}
}

.workscout-feature-cards__card.is-open {
	flex-grow: 2.45;
	background: var(--lfc-card-open);
}

.workscout-feature-cards__card:hover,
.workscout-feature-cards__card:focus,
.workscout-feature-cards__card:visited {
	color: var(--lfc-ink);
	text-decoration: none;
}

.workscout-feature-cards__card:focus-visible {
	box-shadow: 0 0 0 2px #f6f6f6, 0 0 0 4px #b9b9b9;
}

.workscout-feature-cards__main {
	display: flex;
	min-width: 0;
	flex: 1 1 0;
	flex-direction: column;
	justify-content: space-between;
	padding: 20px 20px 24px;
}

.workscout-feature-cards__copy {
	width: var(--lfc-copy-width, auto);
	flex: none;
}

.workscout-feature-cards__badge {
	display: grid;
	width: 60px;
	height: 60px;
	flex: none;
	place-items: center;
	border-radius: 50%;
	background: var(--lfc-icon-bg);
	color: var(--lfc-icon);
	transition: background-color 0.3s ease;
}

.workscout-feature-cards__badge i {
	font-size: 26px;
}

.workscout-feature-cards__badge svg {
	width: 26px;
	height: 26px;
	fill: currentColor;
	stroke: currentColor;
}

.workscout-feature-cards__badge svg[fill]:not([fill="none"]),
.workscout-feature-cards__badge svg [fill]:not([fill="none"]),
.workscout-feature-cards__badge svg[style*="fill:"]:not([style*="fill:none"]):not([style*="fill: none"]),
.workscout-feature-cards__badge svg [style*="fill:"]:not([style*="fill:none"]):not([style*="fill: none"]) {
	fill: currentColor !important;
}

.workscout-feature-cards__badge svg[stroke]:not([stroke="none"]),
.workscout-feature-cards__badge svg [stroke]:not([stroke="none"]),
.workscout-feature-cards__badge svg[style*="stroke:"]:not([style*="stroke:none"]):not([style*="stroke: none"]),
.workscout-feature-cards__badge svg [style*="stroke:"]:not([style*="stroke:none"]):not([style*="stroke: none"]) {
	stroke: currentColor !important;
}

.workscout-feature-cards__card.is-open .workscout-feature-cards__badge svg :is(path, rect, circle) {
	stroke-dasharray: 1;
	animation: workscoutFeatureCardsDraw 0.65s var(--lfc-ease) 0.08s backwards;
}

@keyframes workscoutFeatureCardsDraw {
	from {
		stroke-dashoffset: 1;
	}
	to {
		stroke-dashoffset: 0;
	}
}

.workscout-feature-cards__title {
	margin: 0 0 12px;
	color: var(--lfc-ink);
	font-size: clamp(23px, 2vw, 29px);
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1.2;
	text-wrap: balance;
}

.workscout-feature-cards__description {
	max-width: 34ch;
	color: var(--lfc-muted);
	font-size: 15.5px;
	line-height: 1.65;
}

.workscout-feature-cards__visual {
	position: relative;
	overflow: hidden;
	width: 0%;
	flex: 0 0 auto;
	border-radius: 10px;
	background: linear-gradient(165deg, var(--lfc-visual), var(--lfc-visual-end));
	transition: width var(--lfc-duration) var(--lfc-ease);
}

.workscout-feature-cards__card.is-open .workscout-feature-cards__visual {
	width: 55%;
}

.workscout-feature-cards__visual--photo {
	background: transparent;
}

.workscout-feature-cards__scene {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.workscout-feature-cards__card.is-open .workscout-feature-cards__scene {
	opacity: 1;
	transition: opacity 0.4s ease 0.06s;
}

.workscout-feature-cards .workscout-feature-cards__visual--photo > .workscout-feature-cards__photo {
	position: absolute;
	inset: 0;
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover !important;
	opacity: 0;
	transform: scale(1.04);
	transition: opacity 0.4s ease 0.06s, transform 0.65s var(--lfc-ease);
}

.workscout-feature-cards__card.is-open .workscout-feature-cards__visual--photo > .workscout-feature-cards__photo {
	opacity: 1;
	transform: none;
}

.workscout-feature-cards__photo.is-top {
	object-position: center top;
}

.workscout-feature-cards__photo.is-bottom {
	object-position: center bottom;
}

.workscout-feature-cards__photo.is-left {
	object-position: left center;
}

.workscout-feature-cards__photo.is-right {
	object-position: right center;
}

.workscout-feature-cards__orb {
	position: absolute;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.55);
	filter: blur(18px);
	animation: workscoutFeatureCardsDrift 14s ease-in-out infinite alternate;
}

.workscout-feature-cards__orb--one {
	top: -50px;
	left: -40px;
	width: 190px;
	height: 190px;
}

.workscout-feature-cards__orb--two {
	right: -50px;
	bottom: -60px;
	width: 220px;
	height: 220px;
	animation-delay: -7s;
}

@keyframes workscoutFeatureCardsDrift {
	to {
		translate: 26px -20px;
	}
}

.workscout-feature-cards__canvas {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 380px;
	height: 520px;
	transform: translate(-50%, -50%) scale(var(--lfc-scale, 1)) translate(var(--lfc-content-shift-x, 0), var(--lfc-content-shift-y, 0));
}

.workscout-feature-cards__float {
	position: absolute;
	opacity: 0;
	padding: 13px 15px;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 14px 34px rgba(20, 24, 40, 0.12);
	transform: rotate(var(--lfc-rotate, 0deg)) translateY(30px) scale(0.94);
	transition: opacity 0.35s ease, transform 0.55s var(--lfc-bounce);
	animation: workscoutFeatureCardsBob 7s ease-in-out infinite;
}

.workscout-feature-cards__float:nth-child(odd) {
	animation-delay: -3.5s;
}

.workscout-feature-cards__card.is-open .workscout-feature-cards__float {
	opacity: 1;
	transform: rotate(var(--lfc-rotate, 0deg));
}

.workscout-feature-cards__card.is-open .workscout-feature-cards__float--1 {
	transition-delay: 0.16s;
}

.workscout-feature-cards__card.is-open .workscout-feature-cards__float--2 {
	transition-delay: 0.27s;
}

.workscout-feature-cards__card.is-open .workscout-feature-cards__float--3 {
	transition-delay: 0.38s;
}

@keyframes workscoutFeatureCardsBob {
	50% {
		translate: 0 -7px;
	}
}

.workscout-feature-cards__listing-ui.workscout-feature-cards__float--1 {
	--lfc-rotate: -5deg;
	top: 6%;
	right: 9%;
	left: 9%;
}

.workscout-feature-cards__listing-ui.workscout-feature-cards__float--2 {
	--lfc-rotate: 3deg;
	top: 34%;
	right: 13%;
	left: 7%;
}

.workscout-feature-cards__listing-ui.workscout-feature-cards__float--3 {
	--lfc-rotate: -3deg;
	top: 61%;
	right: 6%;
	left: 12%;
}

.workscout-feature-cards__ui-top,
.workscout-feature-cards__booking-head,
.workscout-feature-cards__chart-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 9px;
}

.workscout-feature-cards__pill {
	padding: 3px 10px;
	border-radius: 20px;
	background: var(--lfc-icon-bg);
	color: var(--lfc-icon);
	font-size: 10.5px;
	font-weight: 500;
	line-height: 1.4;
}

.workscout-feature-cards__dots {
	display: flex;
	gap: 3px;
}

.workscout-feature-cards__dots i {
	width: 3.5px;
	height: 3.5px;
	border-radius: 50%;
	background: #c9c9c9;
}

.workscout-feature-cards__ui-name {
	margin-bottom: 8px;
	color: var(--lfc-ink);
	font-size: 14.5px;
	font-weight: 500;
	line-height: 1.3;
}

.workscout-feature-cards__ui-meta {
	display: flex;
	align-items: center;
	gap: 5px;
	color: var(--lfc-faint);
	font-size: 11.5px;
	line-height: 1.3;
	white-space: nowrap;
}

.workscout-feature-cards__ui-meta strong {
	color: var(--lfc-ink);
	font-weight: 500;
}

.workscout-feature-cards__ui-meta > span {
	margin-right: 7px;
}

.workscout-feature-cards__ui-meta .is-status {
	margin-right: 0;
	color: #55701a;
	font-weight: 500;
}

.workscout-feature-cards__star,
.workscout-feature-cards__pin {
	width: 13px;
	height: 13px;
	flex: none;
}

.workscout-feature-cards__star {
	fill: var(--lfc-star);
}

.workscout-feature-cards__pin {
	fill: none;
	stroke: #a8a8a8;
	stroke-width: 1.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.workscout-feature-cards__avatar {
	position: absolute;
	right: 13px;
	bottom: 12px;
	width: 24px;
	height: 24px;
	border: 2px solid #fff;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--lfc-icon-bg), var(--lfc-icon));
}

.workscout-feature-cards__booking-ui {
	--lfc-rotate: -4deg;
	top: 7%;
	right: 11%;
	left: 8%;
}

.workscout-feature-cards__booking-head {
	align-items: baseline;
	margin-bottom: 8px;
}

.workscout-feature-cards__booking-head strong {
	font-size: 14px;
	font-weight: 500;
}

.workscout-feature-cards__booking-head span {
	color: var(--lfc-faint);
	font-size: 11px;
}

.workscout-feature-cards__booking-row {
	display: flex;
	justify-content: space-between;
	padding: 5px 0;
	color: #444;
	font-size: 12.5px;
}

.workscout-feature-cards__booking-row em {
	color: var(--lfc-ink);
	font-style: normal;
}

.workscout-feature-cards__booking-total {
	display: flex;
	justify-content: space-between;
	margin-top: 7px;
	padding-top: 9px;
	border-top: 1px solid var(--lfc-line);
	font-size: 13.5px;
	font-weight: 500;
}

.workscout-feature-cards__accepted {
	--lfc-rotate: 3deg;
	top: 56%;
	right: 7%;
	left: 32%;
	display: flex;
	align-items: center;
	gap: 9px;
}

.workscout-feature-cards__check {
	display: grid;
	width: 26px;
	height: 26px;
	flex: none;
	place-items: center;
	border-radius: 50%;
	background: #dff0c2;
}

.workscout-feature-cards__check svg {
	width: 12px;
	height: 12px;
	fill: none;
	stroke: #5a7a1e;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.workscout-feature-cards__accepted strong,
.workscout-feature-cards__accepted small {
	display: block;
}

.workscout-feature-cards__accepted strong {
	font-size: 13.5px;
	font-weight: 500;
}

.workscout-feature-cards__accepted small {
	color: var(--lfc-faint);
	font-size: 11px;
}

.workscout-feature-cards__review-ui {
	--lfc-rotate: -2deg;
	top: 73%;
	right: 30%;
	left: 8%;
}

.workscout-feature-cards__review-label {
	margin-bottom: 6px;
	color: var(--lfc-faint);
	font-size: 10.5px;
	letter-spacing: 0.06em;
	line-height: 1.3;
	text-transform: uppercase;
}

.workscout-feature-cards__stars {
	display: flex;
	gap: 3px;
	margin-bottom: 7px;
}

.workscout-feature-cards__stars .workscout-feature-cards__star {
	width: 15px;
	height: 15px;
	transform: scale(0);
	transition: transform 0.5s cubic-bezier(0.3, 1.9, 0.55, 1);
}

.workscout-feature-cards__card.is-open .workscout-feature-cards__stars .workscout-feature-cards__star {
	transform: scale(1);
}

.workscout-feature-cards__card.is-open .workscout-feature-cards__stars .workscout-feature-cards__star:nth-child(1) { transition-delay: 0.46s; }
.workscout-feature-cards__card.is-open .workscout-feature-cards__stars .workscout-feature-cards__star:nth-child(2) { transition-delay: 0.53s; }
.workscout-feature-cards__card.is-open .workscout-feature-cards__stars .workscout-feature-cards__star:nth-child(3) { transition-delay: 0.60s; }
.workscout-feature-cards__card.is-open .workscout-feature-cards__stars .workscout-feature-cards__star:nth-child(4) { transition-delay: 0.67s; }
.workscout-feature-cards__card.is-open .workscout-feature-cards__stars .workscout-feature-cards__star:nth-child(5) { transition-delay: 0.74s; }

.workscout-feature-cards__review-text {
	color: #444;
	font-size: 12.5px;
	line-height: 1.5;
}

.workscout-feature-cards__chart-ui {
	--lfc-rotate: -4deg;
	top: 7%;
	right: 8%;
	left: 8%;
}

.workscout-feature-cards__chart-title {
	color: #444;
	font-size: 12px;
	font-weight: 500;
}

.workscout-feature-cards__bars {
	display: flex;
	height: 88px;
	align-items: flex-end;
	gap: 7px;
}

.workscout-feature-cards__bars b {
	height: var(--h);
	flex: 1;
	border-radius: 4px 4px 2px 2px;
	background: #e5e5e5;
	transform: scaleY(0.05);
	transform-origin: bottom;
	transition: transform 0.5s var(--lfc-bounce);
}

.workscout-feature-cards__bars .is-highlight {
	background: linear-gradient(var(--lfc-icon-bg), var(--lfc-icon));
}

.workscout-feature-cards__card.is-open .workscout-feature-cards__bars b {
	transform: none;
	transition-delay: var(--d, 0.4s);
}

.workscout-feature-cards__stat-ui {
	--lfc-rotate: 3deg;
	top: 52%;
	right: 34%;
	left: 10%;
}

.workscout-feature-cards__stat-value {
	display: block;
	color: var(--lfc-ink);
	font-size: 24px;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
	line-height: 1.2;
}

.workscout-feature-cards__stat-ui span,
.workscout-feature-cards__ring-ui small {
	display: block;
	margin-top: 2px;
	color: var(--lfc-faint);
	font-size: 11.5px;
}

.workscout-feature-cards__ring-ui {
	--lfc-rotate: -2deg;
	top: 72%;
	right: 8%;
	left: 26%;
	display: flex;
	align-items: center;
	gap: 13px;
}

.workscout-feature-cards__ring {
	width: 58px;
	height: 58px;
	flex: none;
	transform: rotate(-90deg);
}

.workscout-feature-cards__ring circle {
	fill: none;
	stroke-width: 3.8;
}

.workscout-feature-cards__ring .track {
	stroke: #ececec;
}

.workscout-feature-cards__ring .value {
	stroke: var(--lfc-icon);
	stroke-dasharray: 0 100;
	stroke-linecap: round;
	transition: stroke-dasharray 0.3s ease;
}

.workscout-feature-cards__card.is-open .workscout-feature-cards__ring .value {
	stroke-dasharray: 84 100;
	transition: stroke-dasharray 0.8s var(--lfc-ease) 0.35s;
}

.workscout-feature-cards__stat-value.is-small {
	font-size: 19px;
}

@media (max-width: 880px) {
	.workscout-feature-cards__cards {
		flex-direction: column;
	}

	.workscout-feature-cards__card {
		height: auto;
		min-height: 0;
		flex-direction: column;
	}

	.workscout-feature-cards__card.is-open {
		flex-grow: 1;
	}

	.workscout-feature-cards__main {
		gap: 34px;
		padding: 16px 14px 20px;
	}

	.workscout-feature-cards__copy {
		width: auto;
	}

	.workscout-feature-cards__visual {
		width: auto !important;
		height: 0;
		transition: height var(--lfc-duration) var(--lfc-ease);
	}

	.workscout-feature-cards__card.is-open .workscout-feature-cards__visual {
		height: min(360px, calc(var(--lfc-card-max-height) - 150px));
	}
}

@media (max-width: 520px) {
	.workscout-feature-cards__shell {
		padding: 6px;
	}

	.workscout-feature-cards__card {
		padding: 8px;
	}

	.workscout-feature-cards__card.is-open .workscout-feature-cards__visual {
		height: min(310px, calc(var(--lfc-card-max-height) - 150px));
	}
}

@media (prefers-reduced-motion: reduce) {
	.workscout-feature-cards *,
	.workscout-feature-cards *::before,
	.workscout-feature-cards *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.2s !important;
	}
}