.wp-site-blocks > .ftc-cad,
.wp-site-blocks > .wp-block-shortcode:has(.ftc-cad) {
	margin-block: 0;
}

.ftc-cad {
	--ftc-cad-navy: var(--wp--preset--color--accent-1, #003974);
	--ftc-cad-orange: var(--wp--preset--color--accent-2, #f57c00);
	background:
		linear-gradient(180deg, rgba(0, 20, 48, 0.35), rgba(0, 20, 48, 0.35)),
		repeating-linear-gradient(
			0deg,
			transparent 0,
			transparent 31px,
			rgba(245, 124, 0, 0.07) 31px,
			rgba(245, 124, 0, 0.07) 32px
		),
		repeating-linear-gradient(
			90deg,
			transparent 0,
			transparent 31px,
			rgba(245, 124, 0, 0.07) 31px,
			rgba(245, 124, 0, 0.07) 32px
		),
		var(--ftc-cad-navy);
	color: #fff;
	padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.25rem, 4vw, 3rem);
}

.ftc-cad__inner {
	max-width: var(--wp--style--global--wide-size, 1280px);
	margin: 0 auto;
}

.ftc-cad__intro {
	max-width: 40rem;
	margin: 0 0 1.5rem;
}

.ftc-cad__eyebrow {
	margin: 0 0 0.6rem;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: color-mix(in srgb, #fff 70%, var(--ftc-cad-orange));
}

.ftc-cad__heading {
	margin: 0 0 0.65rem;
	font-size: clamp(1.8rem, 4vw, 2.6rem);
	line-height: 1.15;
	color: #fff;
}

.ftc-cad__lead {
	margin: 0;
	color: color-mix(in srgb, #fff 78%, transparent);
	font-size: 1.05rem;
}

.ftc-cad__toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
	margin: 0 0 1rem;
}

.ftc-cad__tab,
.ftc-cad__reset {
	appearance: none;
	border: 1px solid color-mix(in srgb, #fff 22%, transparent);
	background: color-mix(in srgb, #fff 8%, transparent);
	color: #fff;
	border-radius: 999px;
	padding: 0.45rem 0.95rem;
	font: inherit;
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
}

.ftc-cad__tab.is-active,
.ftc-cad__tab[aria-selected="true"] {
	background: var(--ftc-cad-orange);
	border-color: var(--ftc-cad-orange);
	color: #fff;
}

.ftc-cad__reset {
	margin-left: auto;
}

.ftc-cad__tab:hover,
.ftc-cad__reset:hover {
	border-color: color-mix(in srgb, var(--ftc-cad-orange) 70%, #fff);
}

.ftc-cad__stage {
	position: relative;
	height: clamp(22rem, 58vh, 36rem);
	border-radius: 16px;
	overflow: hidden;
	background: color-mix(in srgb, #001028 70%, var(--ftc-cad-navy));
	border: 1px solid color-mix(in srgb, #fff 12%, transparent);
	cursor: grab;
	touch-action: none;
}

.ftc-cad__stage:active {
	cursor: grabbing;
}

.ftc-cad__stage:focus-visible {
	outline: 2px solid var(--ftc-cad-orange);
	outline-offset: 3px;
}

.ftc-cad__viewport {
	width: 100%;
	height: 100%;
	transform-origin: 0 0;
	will-change: transform;
}

.ftc-cad__viewport svg {
	display: block;
	width: 100%;
	height: 100%;
	color: #f4f7fb;
}

.ftc-cad__viewport svg path {
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
	stroke-width: 1.35;
}

.ftc-cad__viewport svg path.ftc-cad-path--closed {
	color: color-mix(in srgb, #fff 82%, var(--ftc-cad-orange));
}

.ftc-cad__caption {
	margin: 0.85rem 0 0;
	color: color-mix(in srgb, #fff 72%, transparent);
	font-size: 0.95rem;
}

.ftc-cad__caption strong {
	color: #fff;
}

@media (max-width: 640px) {
	.ftc-cad__reset {
		margin-left: 0;
	}

	.ftc-cad__stage {
		height: 20rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ftc-cad__viewport svg path {
		stroke-dasharray: none !important;
		stroke-dashoffset: 0 !important;
		transition: none !important;
	}
}