/* Content — Ecosystem Cards (ACTS "Everything You Can Do with ACTS", 1440 frame) */
.cew-eco{
	--cew-eco-cols:3;
	--cew-eco-gap:16px;
	--cew-eco-bg:#EFF1ED;
	--cew-eco-border:#E8E8E8;
	/* --cew-eco-bg-h / --cew-eco-border-h / --cew-eco-link-h only exist when chosen */
	--cew-eco-shift:4px;
	--cew-eco-link-space:21px;
	--cew-eco-bw:1px;
	--cew-eco-icon:16px;
	--cew-eco-icon-gap:4px;
	padding:120px 64px;
	background-color:#FAFBF8;
	color:#000;
}
.cew-eco *,.cew-eco *::before,.cew-eco *::after{box-sizing:border-box}

/* ---------- Heading ---------- */
.cew-eco .cew-eco-head{margin:0 0 41px;text-align:center}
.cew-eco .cew-eco-eyebrow{
	margin:0 0 4px;
	color:#727272;
	font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
	font-size:14px;
	line-height:1.2;
	letter-spacing:0;
	text-transform:uppercase;
}
.cew-eco .cew-eco-heading{
	margin:0;
	padding:0;
	color:#000;
	font-family:inherit;
	font-size:36px;
	font-weight:400;
	line-height:1.2;
	letter-spacing:-.01em;
	text-transform:none;
}

/* ---------- Grid ---------- */
.cew-eco .cew-eco-grid{
	display:grid;
	grid-template-columns:repeat(var(--cew-eco-cols),minmax(0,1fr));
	gap:var(--cew-eco-gap);
	align-items:stretch;
}

.cew-eco .cew-eco-card{
	position:relative;
	display:flex;
	flex-direction:column;
	min-width:0;
	padding:24px 24px 20px;
	border:0;
	/* stroke drawn outside like Figma: card stays 426.67 × 207 */
	outline:var(--cew-eco-bw) solid var(--cew-eco-card-border,var(--cew-eco-border));
	outline-offset:0;
	background:var(--cew-eco-card-bg,var(--cew-eco-bg));
	transition:background-color .25s ease,outline-color .25s ease,box-shadow .25s ease;
}
.cew-eco .cew-eco-card:hover,
.cew-eco .cew-eco-card:focus-within{
	outline-color:var(--cew-eco-border-h,var(--cew-eco-card-border,var(--cew-eco-border)));
	background:var(--cew-eco-bg-h,var(--cew-eco-card-bg,var(--cew-eco-bg)));
}

.cew-eco .cew-eco-label{
	margin:0 0 12px;
	color:#4B4B4B;
	font-size:14px;
	font-weight:400;
	line-height:1;
}
.cew-eco .cew-eco-title{
	margin:0 0 16px;
	padding:0;
	color:#000;
	font-family:inherit;
	font-size:28px;
	font-weight:400;
	line-height:1.2;
	letter-spacing:-.01em;
	text-transform:none;
}
.cew-eco .cew-eco-desc{
	margin:0;
	color:#727272;
	font-size:16px;
	line-height:1.375;
}

/* ---------- Link ---------- */
.cew-eco .cew-eco-foot{margin-top:auto;padding-top:var(--cew-eco-link-space)}
.cew-eco .cew-eco-link{
	display:inline-flex;
	align-items:center;
	gap:var(--cew-eco-icon-gap);
	color:#000;
	font-size:16px;
	line-height:1.4;
	text-decoration:none;
	transition:color .2s ease;
}
.cew-eco a.cew-eco-link:hover,
.cew-eco a.cew-eco-link:focus,
.cew-eco .cew-eco-card.has-link:hover .cew-eco-link{color:var(--cew-eco-link-h,inherit);text-decoration:none}
.cew-eco a.cew-eco-link:focus{outline:none}
.cew-eco a.cew-eco-link:focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* whole card clickable: stretch the link over the card */
.cew-eco--whole .cew-eco-card.has-link{cursor:pointer}
.cew-eco--whole a.cew-eco-link::after{content:"";position:absolute;inset:0;z-index:1}

.cew-eco .cew-eco-arrow{
	flex:none;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:var(--cew-eco-icon);
	height:var(--cew-eco-icon);
	font-size:var(--cew-eco-icon);
	line-height:1;
	transition:transform .25s ease;
}
.cew-eco .cew-eco-arrow svg,
.cew-eco .cew-eco-arrow i{display:block;width:1em;height:1em;font-size:inherit;line-height:1}
.cew-eco .cew-eco-arrow .e-font-icon-svg{fill:currentColor}
.cew-eco .cew-eco-card.has-link:hover .cew-eco-arrow,
.cew-eco a.cew-eco-link:focus-visible .cew-eco-arrow{transform:translateX(var(--cew-eco-shift))}

@media(max-width:1024px){
	.cew-eco{--cew-eco-cols:2;padding:80px 32px}
	.cew-eco .cew-eco-heading{font-size:32px}
	.cew-eco .cew-eco-title{font-size:24px}
}
@media(max-width:767px){
	.cew-eco{--cew-eco-cols:1;padding:56px 16px}
	.cew-eco .cew-eco-head{margin-bottom:28px}
	.cew-eco .cew-eco-eyebrow{font-size:12px}
	.cew-eco .cew-eco-heading{font-size:26px}
	.cew-eco .cew-eco-title{font-size:22px;margin-bottom:12px}
	.cew-eco .cew-eco-desc{font-size:15px}
}
@media(prefers-reduced-motion:reduce){
	.cew-eco .cew-eco-card,.cew-eco .cew-eco-arrow{transition:none}
}