@layer cm {
	.cm-final__logo--md {
		height: 1.75rem;
	}

	.cm-final__logo--xl {
		height: 2.5rem;
	}

	.cm-final__logo--lg {
		height: 2.25rem;
	}

	.cm-final {
		position: relative;
		min-height: var(--cm-screen-h);
		width: 100%;
		overflow-x: hidden;
		background-color: #0c1017;
		-webkit-user-select: none;
		user-select: none;
	}

	@media (min-width: 768px) {
		.cm-final {
			height: var(--cm-screen-h);
			overflow-y: auto;
		}
	}

	.cm-final__bg {
		pointer-events: none;
		position: absolute;
		inset: 0;
		height: 100%;
		width: 100%;
		object-fit: cover;
		object-position: center;
		-webkit-user-select: none;
		user-select: none;
	}

	.cm-final__shade {
		pointer-events: none;
		position: absolute;
		inset: 0;
		z-index: 1;
		background-image: linear-gradient(to bottom in oklab, #0009, oklab(15.8599% -.0031579 -.0207575/.75), #000000d9);
	}

	.cm-final__content {
		position: relative;
		z-index: 10;
		margin-inline: auto;
		display: flex;
		min-height: var(--cm-screen-h);
		width: 100%;
		max-width: 80rem;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		padding-inline: 1rem;
		padding-block: 1.5rem;
	}

	@media (min-width: 640px) {
		.cm-final__content {
			padding-inline: 1.5rem;
			padding-block: 2rem;
		}
	}

	@media (min-width: 1024px) {
		.cm-final__content {
			justify-content: center;
			padding-block: 1.5rem;
		}
	}

	.cm-final__intro {
		margin-bottom: 1rem;
		width: 100%;
		max-width: 48rem;
		padding-inline: 0.5rem;
		text-align: center;
	}

	@media (min-width: 640px) {
		.cm-final__intro {
			margin-bottom: 1.5rem;
		}
	}

	.cm-final__text {
		font-family: FactorA,sans-serif;
		font-size: 14px;
		line-height: 140%;
		font-weight: 400;
		color: #ffffffe6;
		filter: drop-shadow(0 2px 10px #000000d9);
	}

	@media (min-width: 640px) {
		.cm-final__text {
			font-size: 15px;
		}
	}

	@media (min-width: 1024px) {
		.cm-final__text {
			font-size: 16px;
		}
	}

	.cm-final__grid {
		margin-block: auto;
		display: grid;
		width: 100%;
		max-width: 72rem;
		grid-template-columns: repeat(1,minmax(0,1fr));
		gap: 1rem;
	}

	@media (min-width: 640px) {
		.cm-final__grid {
			gap: 1.25rem;
		}
	}

	@media (min-width: 768px) {
		.cm-final__grid {
			grid-template-columns: repeat(2,minmax(0,1fr));
		}
	}

	@media (min-width: 1024px) {
		.cm-final__grid {
			margin-block: 0;
			grid-template-columns: repeat(3,minmax(0,1fr));
			gap: 1rem;
		}
	}

	@media (min-width: 768px) and (max-width: 1023px) {
		.cm-final__card:last-child:nth-child(odd) {
			grid-column: 1 / -1;
			justify-self: center;
			width: calc(50% - .5rem);
		}
	}

	@media (min-width: 1024px) {
		.cm-final__grid {
			max-width: 80rem;
			grid-template-columns: repeat(8,minmax(0,1fr));
		}

		.cm-final__card {
			grid-column: span 2;
		}

		.cm-final__card:nth-child(5):nth-last-child(3) {
			grid-column: 2 / span 2;
		}
	}

	.cm-final__card {
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		overflow: hidden;
		border-radius: 24px;
		border-style: solid;
		border-width: 1px;
		border-color: #ffffff26;
		background-image: linear-gradient(to bottom in oklab, oklab(22.3165% .00989653 -.0272721/.92), oklab(19.199% .00962118 -.0263815/.95), oklab(15.0961% .00623322 -.0181434/.98));
		padding: 1rem;
		box-shadow: 0 12px 28px #0000008c;
		-webkit-backdrop-filter: blur(24px);
		backdrop-filter: blur(24px);
		transition-property: all;
		transition-timing-function: cubic-bezier(.4, 0, .2, 1);
		transition-duration: .3s;
	}

	@media (hover:hover) {
		.cm-final__card:hover {
			translate: 0 -0.25rem;
			border-color: color-mix(in oklab, #fff 30%, transparent);
			box-shadow: 0 16px 36px #000000bf;
		}
	}

	@media (min-width: 640px) {
		.cm-final__card {
			border-radius: 20px;
			padding-block: 1rem;
			padding-inline: 1.25rem;
		}
	}

	.cm-final__card-line {
		pointer-events: none;
		position: absolute;
		inset-inline: 1.5rem;
		top: 0;
		height: 1.5px;
		background-image: linear-gradient(to right in oklab, transparent, #ffffff59, transparent);
	}

	.cm-final__logo-box {
		margin-bottom: 0.625rem;
		display: flex;
		height: 2.5rem;
		align-items: center;
		justify-content: flex-start;
	}

	.cm-final__logo {
		pointer-events: none;
		width: auto;
		max-width: 140px;
		object-fit: contain;
		object-position: left;
		filter: brightness(0) invert(1);
		-webkit-user-select: none;
		user-select: none;
	}


	.cm-final__card-text {
		font-family: FactorA,sans-serif;
		font-size: 13px;
		line-height: 140%;
		font-weight: 400;
		color: #ffffffd9;
	}

	@media (min-width: 640px) {
		.cm-final__card-text {
			font-size: 13.5px;
		}
	}


	.cm-final__actions {
		margin-top: 1.25rem;
		display: flex;
		width: 100%;
		max-width: 48rem;
		flex-direction: column;
		align-items: center;
		gap: 1rem;
		text-align: center;
	}

	@media (min-width: 640px) {
		.cm-final__actions {
			margin-top: 1.5rem;
		}
	}

	.cm-final__cta {
		width: 100%;
		max-width: 24rem;
	}

	@media (min-width: 640px) {
		.cm-final__cta {
			max-width: 28rem;
		}
	}

	@media (min-width: 768px) {
		.cm-final__cta {
			width: auto;
			max-width: none;
		}
	}

	@media (max-width: 767px) {
		#career-myths:has(.cm-final-screen) {
			overflow: clip;
		}

		.cm-app:has(.cm-final-screen) {
			overflow-x: clip;
		}

		.cm-final {
			--cm-final-cta-bottom: calc(54px + 1.5rem + env(safe-area-inset-bottom));
			overflow-x: clip;
		}

		body.cm-fullscreen .cm-final {
			--cm-final-cta-bottom: calc(1rem + env(safe-area-inset-bottom));
		}

		.cm-final__actions {
			display: contents;
		}

		.cm-final__actions .cm-final__text {
			margin-top: 1.25rem;
			max-width: 48rem;
			padding-bottom: 1.5rem;
		}

		.cm-final__cta {
			position: sticky;
			bottom: var(--cm-final-cta-bottom);
			z-index: 40;
			width: 100%;
			max-width: none;
			box-shadow: 0 8px 24px #0009;
		}
	}

	@media (min-width: 1024px) and (max-height: 820px) {
		.cm-final__content {
			padding-block: 0.75rem;
		}

		.cm-final__intro {
			margin-bottom: 0.75rem;
		}

		.cm-final__text {
			font-size: 14px;
		}

		.cm-final__grid {
			gap: 0.75rem;
		}

		.cm-final__card {
			padding-block: 0.75rem;
		}

		.cm-final__logo-box {
			height: 2rem;
			margin-bottom: 0.5rem;
		}

		.cm-final__logo--xl {
			height: 2rem;
		}

		.cm-final__logo--lg {
			height: 1.875rem;
		}

		.cm-final__card-text {
			font-size: 12.5px;
			line-height: 135%;
		}

		.cm-final__actions {
			margin-top: 0.875rem;
			gap: 0.75rem;
		}
	}
}