.wp-block-crunchr-intelligent-header.crunchr-intelligent-header {
	--crunchr-intelligent-cell: 180px;
	--crunchr-intelligent-overhang: 180px;
	--crunchr-intelligent-content-shift: 180px;
	--crunchr-intelligent-gutter: max(var(--wp--style--root--padding-right, 20px), calc((100cqw - 1440px) / 2));
	position: relative;
	left: 50%;
	isolation: isolate;
	box-sizing: border-box;
	width: 100cqw;
	max-width: 100cqw !important;
	min-height: 788px;
	margin-inline: 0 !important;
	overflow: hidden;
	background: radial-gradient(ellipse 53% 106% at 79.4% 48%, #fff 0, #f2f4f7 100%);
	transform: translateX(-50%);
}

.crunchr-intelligent-header__inner {
	position: relative;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: center;
	width: min(calc(100% - (2 * var(--crunchr-intelligent-gutter))), 1440px);
	min-height: 788px;
	margin-inline: auto;
}

.crunchr-intelligent-header__content {
	position: relative;
	z-index: 4;
	box-sizing: border-box;
	max-width: 600px;
	padding-right: 72px;
}

.crunchr-intelligent-header__content > :first-child { margin-top: 0; }
.crunchr-intelligent-header__content > :last-child { margin-bottom: 0; }

.crunchr-intelligent-header__grid {
	position: absolute;
	z-index: 1;
	top: 34px;
	/* One complete track sits beyond the shared content boundary. The preceding
	 * grid line therefore stays locked to has-crunchr-side-borders at any width. */
	right: calc(-1 * var(--crunchr-intelligent-overhang));
	width: 2160px;
	height: 720px;
	pointer-events: none;
}

.crunchr-intelligent-header__lines,
.crunchr-intelligent-header__cells {
	position: absolute;
	inset: 0;
	-webkit-mask-image: radial-gradient(ellipse 58% 70% at 74% 50%, #000 14%, rgba(0,0,0,.65) 32%, rgba(0,0,0,.12) 56%, transparent 88%);
	mask-image: radial-gradient(ellipse 58% 70% at 74% 50%, #000 14%, rgba(0,0,0,.65) 32%, rgba(0,0,0,.12) 56%, transparent 88%);
}

.crunchr-intelligent-header__lines {
	background-image: linear-gradient(to bottom, transparent calc(100% - 1px), rgba(161, 173, 191, .38) calc(100% - 1px));
	background-size: var(--crunchr-intelligent-cell) var(--crunchr-intelligent-cell);
}

.crunchr-intelligent-header__lines::before {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: calc(100% - var(--crunchr-intelligent-cell));
	background-image: linear-gradient(to right, transparent calc(100% - 1px), rgba(161, 173, 191, .38) calc(100% - 1px));
	background-size: var(--crunchr-intelligent-cell) var(--crunchr-intelligent-cell);
	content: "";
}

.crunchr-intelligent-header__cell {
	position: absolute;
	width: 160px;
	height: 160px;
	border-radius: 16px;
	background: rgba(101, 116, 142, .055);
	margin-left: var(--crunchr-intelligent-content-shift);
}

.cell-0-2 { left: 1090px; top: 370px; } .cell-0-3 { left: 1090px; top: 550px; }
.cell-1-0 { left: 1270px; top: 10px; } .cell-1-2 { left: 1270px; top: 370px; } .cell-1-3 { left: 1270px; top: 550px; }
.cell-2-0 { left: 1450px; top: 10px; } .cell-2-1 { left: 1450px; top: 190px; } .cell-2-3 { left: 1450px; top: 550px; }
.cell-3-0 { left: 1630px; top: 10px; } .cell-3-1 { left: 1630px; top: 190px; } .cell-3-2 { left: 1630px; top: 370px; }
.cell-4-1 { left: 1810px; top: 190px; } .cell-4-3 { left: 1810px; top: 550px; }

.crunchr-intelligent-header__marker {
	position: absolute;
	width: 5px;
	height: 5px;
	background: var(--wp--preset--color--neutral-500, #65748e);
	margin-left: var(--crunchr-intelligent-content-shift);
	transform: translate(-2.5px, -2.5px);
}
.marker-0-1 { left: 1080px; top: 180px; } .marker-0-2 { left: 1080px; top: 360px; } .marker-0-3 { left: 1080px; top: 540px; }
.marker-1-1 { left: 1260px; top: 180px; } .marker-1-2 { left: 1260px; top: 360px; } .marker-1-3 { left: 1260px; top: 540px; }
.marker-2-1 { left: 1440px; top: 180px; } .marker-2-2 { left: 1440px; top: 360px; } .marker-2-3 { left: 1440px; top: 540px; }
.marker-3-2 { left: 1620px; top: 360px; }

.crunchr-intelligent-header__tile {
	position: absolute;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 160px;
	height: 160px;
	padding: 27px 27px 30px;
	border: .75px solid #fff;
	border-radius: 8px;
	background: #fff;
	margin-left: var(--crunchr-intelligent-content-shift);
	box-shadow: inset -3px -4px 13.6px rgba(255,255,255,.09), inset 4px 4px 26px rgba(5,25,59,.05), 0 4px 6px rgba(23,29,38,.11);
	-webkit-backdrop-filter: blur(9.8px);
	backdrop-filter: blur(9.8px);
	pointer-events: auto;
	transition:
		border-color 560ms cubic-bezier(.2,.75,.25,1),
		border-radius 650ms cubic-bezier(.2,.75,.25,1),
		background-color 600ms cubic-bezier(.2,.75,.25,1),
		box-shadow 760ms cubic-bezier(.16,1,.3,1),
		transform 620ms cubic-bezier(.16,1,.3,1);
}
.crunchr-intelligent-header__tile--ask { left: 1270px; top: 190px; }
.crunchr-intelligent-header__tile--explainer { left: 1090px; top: 370px; }
.crunchr-intelligent-header__tile--insights { left: 1450px; top: 370px; }
.crunchr-intelligent-header__tile.is-featured { z-index: 2; border-color: rgba(15,94,213,.62); border-radius: 16px; background-color: rgba(226,242,255,.7); box-shadow: 14px 21px 20.3px rgba(23,29,38,.26), 0 4px 4px rgba(5,25,59,.07), inset -3px -4px 13.6px rgba(15,94,213,.35), inset 4px 4px 26px rgba(15,94,213,.08); transform: translateY(-3px) scale(1.012); }
.crunchr-intelligent-header__tile.is-leaving {
	transition-duration: 420ms, 480ms, 440ms, 560ms, 460ms;
	transition-delay: 0ms;
	transition-timing-function: cubic-bezier(.4,0,.6,1);
}
.crunchr-intelligent-header__tile.is-popping {
	animation: crunchr-intelligent-tile-pop 620ms cubic-bezier(.2,.8,.25,1) both;
}

@keyframes crunchr-intelligent-tile-pop {
	0% { transform: translateY(0) scale(.992); }
	52% { transform: translateY(-5px) scale(1.022); }
	100% { transform: translateY(-3px) scale(1.012); }
}
.crunchr-intelligent-header__icon {
	position: relative;
	display: block;
	width: 18px;
	height: 18px;
	background: url("../../icons/intelligent-header-sparkles.svg") center / contain no-repeat;
}
.crunchr-intelligent-header__icon::after {
	position: absolute;
	inset: 0;
	background: var(--wp--preset--color--blue-600, #0f5ed5);
	content: "";
	opacity: 0;
	-webkit-mask: url("../../icons/intelligent-header-sparkles.svg") center / contain no-repeat;
	mask: url("../../icons/intelligent-header-sparkles.svg") center / contain no-repeat;
	transition: opacity 420ms cubic-bezier(.2,.75,.25,1);
}
.crunchr-intelligent-header__tile.is-featured .crunchr-intelligent-header__icon::after { opacity: 1; }
.crunchr-intelligent-header__tile > span:not(.crunchr-intelligent-header__icon) { color: var(--wp--preset--color--neutral-700, #3c4658); font-size: var(--wp--preset--font-size--eyebrow-small); font-weight: 600; line-height: 1.5; letter-spacing: .1em; text-transform: uppercase; }

.editor-styles-wrapper .crunchr-intelligent-header__content { min-height: 240px; padding: 24px 72px 24px 24px; border: 1px dashed rgba(101,116,142,.4); }

/* Below the capped 1440px content width, move the cluster one track right.
 * Story insights then owns the square immediately inside the shared border,
 * keeping all three content tiles within the right-hand 50%. */
@media (max-width: 1479px) {
	.wp-block-crunchr-intelligent-header.crunchr-intelligent-header {
		--crunchr-intelligent-content-shift: 360px;
	}
}

@media (min-width: 961px) and (max-width: 1600px) {
	.wp-block-crunchr-intelligent-header.crunchr-intelligent-header,
	.crunchr-intelligent-header__inner {
		min-height: clamp(600px, 45vw, 720px);
	}

	.crunchr-intelligent-header__inner {
		box-sizing: border-box;
		padding-top: var(--crunchr-header-height, 80px);
	}

	.crunchr-intelligent-header__grid {
		top: 0;
	}
}

@media (min-width: 782px) and (max-width: 1050px) {
	.wp-block-crunchr-intelligent-header.crunchr-intelligent-header {
		--crunchr-intelligent-overhang: 160px;
	}

	.crunchr-intelligent-header__grid {
		transform: scale(.8889);
		transform-origin: right top;
	}
}

@media (min-width: 782px) and (max-width: 960px) {
	.wp-block-crunchr-intelligent-header.crunchr-intelligent-header {
		--crunchr-intelligent-overhang: 135px;
		min-height: 720px;
	}

	.crunchr-intelligent-header__inner {
		display: block;
		min-height: 720px;
		padding-top: max(136px, calc(var(--crunchr-header-height, 80px) + 48px));
	}

	.crunchr-intelligent-header__content {
		max-width: min(100%, 620px);
		padding-right: 0;
	}

	.crunchr-intelligent-header__grid {
		top: auto;
		right: calc(-1 * var(--crunchr-intelligent-overhang));
		bottom: -80px;
		transform: scale(.75);
		transform-origin: right bottom;
	}
}

@media (max-width: 781px) {
	.wp-block-crunchr-intelligent-header.crunchr-intelligent-header { --crunchr-intelligent-overhang: 108px; --crunchr-intelligent-content-shift: 360px; min-height: 640px; }
	.crunchr-intelligent-header__inner { display: block; width: calc(100% - 40px); min-height: 640px; padding-top: max(120px, calc(var(--crunchr-header-height, 64px) + 40px)); }
	.crunchr-intelligent-header__content { max-width: 620px; padding-right: 0; }
	.crunchr-intelligent-header__grid { top: auto; right: calc(92% - 858px); bottom: -45px; width: 2160px; height: 720px; transform: scale(.6); transform-origin: bottom center; }
}

@media (prefers-reduced-motion: no-preference) {
	.crunchr-intelligent-header__grid { animation: crunchr-intelligent-reveal 1100ms cubic-bezier(.22,.8,.28,1) both; }
}
@media (prefers-reduced-motion: reduce) {
	.crunchr-intelligent-header__tile { transition: none; animation: none; }
}
@keyframes crunchr-intelligent-reveal { from { opacity: 0; clip-path: circle(0 at 76% 50%); } to { opacity: 1; clip-path: circle(78% at 76% 50%); } }