.cy-capability-tabs {
	background: var(--cy-surface-page);
	padding: 120px 0 80px;
}

.tb-head {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin-bottom: 48px;
}

.tb-eyebrow {
	color: var(--cy-text-secondary);
	font-size: var(--cy-type-eyebrow-size);
	font-weight: 500;
	letter-spacing: 1.2px;
	line-height: var(--cy-type-eyebrow-line);
	margin: 0;
	text-transform: uppercase;
}

.tb-split-head {
	align-items: center;
	display: flex;
	gap: 24px;
}

.tb-split-head h2 {
	color: var(--cy-text-primary);
	flex: 588px;
	font-family: var(--cy-font-display);
	font-size: var(--cy-type-display-sm-size);
	font-weight: 400;
	line-height: var(--cy-type-display-sm-line);
	margin: 0;
}

.tb-split-head p {
	color: var(--cy-text-secondary);
	flex: 588px;
	font-size: var(--cy-type-body-md-size);
	line-height: var(--cy-type-body-md-line);
	margin: 0;
}

.tb-tabs {
	background: var(--cy-surface-band);
	border: 1px solid var(--cy-border-subtle);
	border-radius: 999px;
	height: 56px;
	margin-bottom: 48px;
	padding: 6px;
}

.tb-tab, .tb-tabs {
	box-sizing: border-box;
	display: flex;
}

.tb-tab {
	align-items: center;
	background: none;
	border: 0;
	border-radius: 999px;
	box-shadow: var(--cy-shadow-btn-rest);
	color: var(--cy-text-muted);
	cursor: pointer;
	flex: 1 1 0;
	font-family: var(--cy-font-body);
	font-size: var(--cy-type-label-md-size);
	font-weight: 500;
	height: 44px;
	justify-content: center;
	letter-spacing: 0;
	line-height: 1;
	min-height: 0;
	padding: 0 24px;
	text-transform: none;
	transform: scale(1);
	transition: transform .28s var(--cy-ease-spring), box-shadow .2s ease, background-color .28s cubic-bezier(.2, .9, .3, 1), background-image .2s ease, color .2s ease;
	-webkit-user-select: none;
	user-select: none;
}

.tb-tab[aria-selected="true"] {
	background: var(--cy-surface-raised);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
	color: var(--cy-text-primary);
}

.tb-tab:not([aria-selected="true"]):hover {
	background: rgba(235, 233, 229, .4);
	color: var(--cy-text-secondary);
}

.tb-tab:active {
	background-image: none;
	box-shadow: var(--cy-shadow-btn-press);
	transform: scale(.96);
	transition-duration: 90ms;
}

.tb-tab:active.nitro-lazy {
	background-image: none !important;
}

.tb-tab:focus-visible {
	outline: 2px solid var(--cy-text-primary);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.tb-tab:active {
		transform: none;
	}
}

.tb-split {
	align-items: center;
	display: flex;
	gap: max(40px, min(10.5%, 126px));
}

.tb-copy {
	display: flex;
	flex: 486 1 0;
	flex-direction: column;
	justify-content: center;
	min-height: 400px;
	min-width: 0;
}

.tb-media {
	border-radius: 14px;
	flex: 588 1 0;
	height: 400px;
	min-width: 0;
	overflow: hidden;
	position: relative;
}

@media (min-width: 1296px) {
	.tb-split {
		gap: 126px;
	}
	
	.tb-copy {
		flex: 0 0 486px;
		width: 486px;
	}
	
	.tb-media {
		flex: 0 0 588px;
		width: 588px;
	}
}

.tb-copy h3 {
	color: var(--cy-text-primary);
	font-size: var(--cy-type-heading-md-size);
	font-weight: 500;
	line-height: var(--cy-type-heading-md-line);
	margin: 0 0 32px;
}

.tb-sig {
	padding: 0 0 20px;
}

.tb-sig + .tb-sig {
	border-top: 1px solid var(--cy-border-subtle);
	padding: 20px 0;
}

.tb-sig b {
	color: var(--cy-text-primary);
	display: block;
	font-size: var(--cy-type-label-lg-size);
	font-weight: 500;
	line-height: var(--cy-type-label-lg-line);
	margin-bottom: 8px;
}

.tb-sig span {
	color: var(--cy-text-secondary);
	display: block;
	font-size: var(--cy-type-body-sm-size);
	line-height: var(--cy-type-body-sm-line);
}

.tb-fade {
	transition: opacity .22s;
}

.tb-copy.swapping .tb-fade {
	opacity: 0;
}

.tb-copy[hidden] {
	display: none;
}

.tb-media .bh-field {
	opacity: 0;
	transition: opacity .55s;
}

.tb-media.is-autonomy .bh-autonomy, .tb-media.is-context .bh-context, .tb-media.is-control .bh-control {
	opacity: 1;
}

.tb-grain {
	background-image: var(--cy-grain-img);
	background-repeat: repeat;
	background-size: 800px 534px;
	inset: 0;
	mix-blend-mode: color-burn;
	opacity: .1;
}

.tb-grain, .tb-shot {
	pointer-events: none;
	position: absolute;
}

.tb-shot {
	left: 38px;
	opacity: 0;
	transition: opacity .22s;
	width: 512px;
	z-index: 1;
}

.tb-shot--always {
	top: 40px;
}

.tb-shot--context {
	top: 60px;
}

.tb-shot svg {
	display: block;
	height: auto;
	width: 100%;
}

.tb-media.is-context .tb-shot--context, .tb-media.is-control .tb-shot--always {
	opacity: 1;
}

.tb-screen {
	align-items: center;
	display: flex;
	flex-direction: column;
	left: 50%;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	transform-origin: center;
	transition: opacity .22s;
	width: 517px;
	z-index: 1;
}

.tb-screen h3 {
	color: var(--cy-text-on-dark);
	font-size: var(--cy-type-heading-sm-size);
	font-weight: 500;
	line-height: var(--cy-type-heading-sm-line);
	margin: 0;
}

.tb-screen .rs-input {
	margin-top: 24px;
	width: 458px;
}

.tb-media.is-autonomy .tb-screen {
	opacity: 1;
}

@media (max-width: 1295px) and (min-width: 1081px) {
	.tb-shot {
		left: 6.463%;
		width: 87.075%;
	}
}

@media (max-width: 1080px) {
	.tb-split {
		flex-direction: column;
		gap: 40px;
	}
	
	.tb-copy, .tb-media {
		flex: auto;
		width: 100%;
	}
	
	.tb-copy {
		min-height: 0;
	}
	
	.tb-media {
		aspect-ratio: 588/400;
		height: auto;
	}
	
	.tb-split-head {
		align-items: flex-start;
		flex-direction: column;
	}
	
	.tb-split-head h2, .tb-split-head p {
		flex: none;
		width: 100%;
	}
	
	.tb-shot {
		left: 6.463%;
		width: 87.075%;
	}
	
	.tb-shot--always {
		top: 10%;
	}
	
	.tb-shot--context {
		top: 15%;
	}
	
	.tb-screen {
		width: min(517px, 92%);
	}
	
	.tb-screen .rs-input {
		width: min(458px, 100%);
	}
}

@media (max-width: 720px) {
	.cy-capability-tabs {
		padding: 64px 0;
	}
	
	.tb-head {
		gap: 16px;
		margin-bottom: 48px;
	}
	
	.tb-tabs {
		gap: 0;
		height: 48px;
		margin-bottom: 28px;
		overflow: hidden;
		padding: 4px;
	}
	
	.tb-tab {
		flex: 1 1 0;
		font-size: 14px;
		height: 40px;
		min-width: 0;
		padding: 0 6px;
		white-space: nowrap;
	}
	
	.tb-split {
		gap: 0;
	}
	
	.tb-copy:not([hidden]) {
		display: contents;
	}
	
	.tb-copy > h3 {
		font-size: 24px;
		line-height: 32px;
		margin: 0 0 24px;
		order: 1;
	}
	
	.tb-split > .tb-media {
		aspect-ratio: auto;
		height: 250px;
		margin-bottom: 28px;
		order: 2;
	}
	
	.tb-copy > .tb-signals {
		align-self: stretch;
		order: 3;
	}
	
	@supports (grid-template-rows: subgrid) {
		.tb-split {
			display: grid;
			grid-template-columns: minmax(0, 1fr);
			grid-template-rows: auto auto auto;
		}
		
		.tb-copy:not([hidden]) {
			display: grid;
			grid-column: 1;
			grid-row: 1/4;
			grid-template-rows: subgrid;
		}
		
		.tb-copy > h3 {
			grid-row: 1;
		}
		
		.tb-split > .tb-media {
			grid-column: 1;
			grid-row: 2;
			width: auto;
		}
		
		.tb-copy > .tb-signals {
			grid-row: 3;
		}
	}
	
	.cy-capability-tabs .tb-media .tb-shot {
		left: calc(50% - 164px);
		transform-origin: 0 0;
		width: 512px;
	}
	
	.cy-capability-tabs .tb-media .tb-shot--always, .cy-capability-tabs .tb-media.tb-lifted .tb-shot--always {
		top: 28px;
		transform: scale(.64);
	}
	
	.cy-capability-tabs .tb-media .tb-shot--context {
		top: 50%;
		transform: scale(.64) translateY(-50%);
	}
	
	.tb-screen {
		max-width: 320px;
		width: calc(100% - 40px);
	}
	
	.tb-screen h3 {
		font-size: 18px;
		line-height: 24px;
		text-align: center;
	}
	
	.tb-screen .rs-input {
		margin-top: 16px;
		width: 100%;
	}
}

.tb-shot--context svg.ev-on .ev-node, .tb-shot--context svg.ev-on .ev-pill {
	opacity: 0;
}

.tb-shot--context .ev-node, .tb-shot--context .ev-pill {
	transform-box: fill-box;
	transform-origin: center;
	transition: opacity .35s cubic-bezier(.22, 1, .36, 1), transform .35s cubic-bezier(.22, 1, .36, 1);
}

.tb-shot--context .ev-pill {
	transition-duration: .34s;
}

.tb-shot--context .ev-node.ev-was {
	transform: scale(.97);
}

.tb-shot--context .ev-pill.ev-was {
	transform: scale(.94);
}

.tb-shot--context svg.ev-on .ev-node.ev-in, .tb-shot--context svg.ev-on .ev-pill.ev-in {
	opacity: 1;
	transform: none;
}

.tb-shot--context .ev-pulse {
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.tb-shot--context svg.ev-on .ev-node, .tb-shot--context svg.ev-on .ev-pill {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

.tb-media .tb-shot--always {
	transform: translateY(230px) scale(.98);
	transition: transform 1.25s cubic-bezier(.16, 1, .3, 1), opacity .8s cubic-bezier(.16, 1, .3, 1);
}

.tb-media.tb-lifted .tb-shot--always {
	transform: none;
}

.tb-shot--always .ai-card, .tb-shot--always .ai-foot, .tb-shot--always .ai-ghost {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity .62s cubic-bezier(.16, 1, .3, 1), transform .62s cubic-bezier(.16, 1, .3, 1);
}

.tb-shot--always .ai-card.is-in, .tb-shot--always .ai-foot.is-in, .tb-shot--always .ai-ghost.is-in {
	opacity: 1;
	transform: none;
}

.tb-shot--always .ai-tile {
	transition: filter .2s;
}

.tb-shot--always .ai-tile.is-hot {
	filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .03)) drop-shadow(0 1px 1px rgba(0, 0, 0, .02));
}

.tb-shot--always .ai-hit {
	cursor: default;
}

.tb-media.is-control .tb-shot--always .ai-hit {
	pointer-events: all;
}

@media (prefers-reduced-motion: reduce) {
	.tb-media .tb-shot--always {
		transform: none;
		transition: opacity .3s;
	}
	
	.tb-shot--always .ai-card, .tb-shot--always .ai-foot, .tb-shot--always .ai-ghost {
		opacity: 1;
		transform: none;
		transition: none;
	}
}