.fj-sizzle-unlock {
	--fj-sizzle-bg: var(--fj-color-obsidian, #160f0b);
	--fj-sizzle-panel: var(--fj-color-cacao, #2a1b15);
	--fj-sizzle-text: var(--fj-color-cream, #fff0d6);
	--fj-sizzle-muted: rgba(255, 240, 214, 0.78);
	--fj-sizzle-border: rgba(255, 240, 214, 0.17);
	--fj-sizzle-gold: var(--fj-color-gold, #ffb000);
	--fj-sizzle-orange: var(--fj-color-orange, #e85b24);
	--fj-sizzle-paprika: var(--fj-color-paprika, #a82a1a);
	--fj-sizzle-ink: var(--fj-color-ink, #21110c);

	color: var(--fj-sizzle-text);
}

.fj-sizzle-unlock__inner {
	position: relative;
	display: grid;
	gap: clamp(1.25rem, 3vw, 2.15rem);
	overflow: hidden;
	padding: clamp(1.35rem, 4vw, 3.2rem);
	background:
		radial-gradient(circle at 10% 0%, rgba(255, 176, 0, 0.19), transparent 32%),
		radial-gradient(circle at 95% 20%, rgba(232, 91, 36, 0.19), transparent 36%),
		linear-gradient(145deg, #160f0b 0%, #2a1b15 58%, #a82a1a 100%);
	border: 1px solid var(--fj-sizzle-border);
	border-radius: 1.7rem;
	box-shadow:
		0 1.35rem 4rem rgba(0, 0, 0, 0.34),
		inset 0 1px 0 rgba(255, 255, 255, 0.06);
	isolation: isolate;
}

.fj-sizzle-unlock__inner::before {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	content: "";
	background:
		linear-gradient(90deg, rgba(255, 240, 214, 0.028) 1px, transparent 1px),
		linear-gradient(180deg, rgba(255, 240, 214, 0.022) 1px, transparent 1px);
	background-size: 3.75rem 3.75rem;
	mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.48), transparent 78%);
	opacity: 0.38;
}

.fj-sizzle-unlock__content {
	display: grid;
	gap: 1rem;
}

.fj-sizzle-unlock__eyebrow {
	margin: 0;
	color: var(--fj-sizzle-gold);
	font-size: 0.74rem;
	font-weight: 850;
	letter-spacing: 0.13em;
	line-height: 1.2;
	text-transform: uppercase;
}

.fj-sizzle-unlock__title {
	margin: 0;
	color: var(--fj-sizzle-text);
	font-family: var(--fj-font-heading, Georgia, serif);
	font-size: clamp(2.45rem, 7vw, 5.65rem);
	letter-spacing: -0.052em;
	line-height: 0.98;
	text-wrap: balance;
}

.fj-sizzle-unlock__intro {
	max-width: 64ch;
	margin: 0;
	color: var(--fj-sizzle-muted);
	font-size: clamp(1rem, 1rem + 0.45vw, 1.25rem);
	line-height: 1.68;
}

.fj-sizzle-unlock__control {
	display: grid;
	gap: 0.9rem;
	max-width: 42rem;
	margin-top: 0.55rem;
	padding: clamp(1rem, 2vw, 1.15rem);
	background: rgba(255, 240, 214, 0.065);
	border: 1px solid var(--fj-sizzle-border);
	border-radius: 1.15rem;
	box-shadow:
		0 0.8rem 2rem rgba(0, 0, 0, 0.18),
		inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.fj-sizzle-unlock__heat-label {
	color: var(--fj-sizzle-text);
	font-size: 0.8rem;
	font-weight: 850;
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-transform: uppercase;
}

.fj-sizzle-unlock__range {
	width: 100%;
	min-height: 44px;
	accent-color: var(--fj-sizzle-gold);
	cursor: pointer;
}

.fj-sizzle-unlock__range:focus-visible,
.fj-sizzle-unlock__button:focus-visible {
	outline: 3px solid var(--fj-sizzle-gold);
	outline-offset: 4px;
}

.fj-sizzle-unlock__status {
	margin: 0;
	color: var(--fj-sizzle-muted);
	font-size: 0.92rem;
	line-height: 1.55;
}

.fj-sizzle-unlock__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: fit-content;
	min-height: 48px;
	padding: 0.9rem 1.32rem;
	background:
		linear-gradient(135deg, var(--fj-sizzle-gold), #ffd56f);
	border: 1px solid var(--fj-sizzle-gold);
	border-radius: 999px;
	box-shadow:
		0 0.75rem 1.8rem rgba(255, 176, 0, 0.18),
		inset 0 1px 0 rgba(255, 255, 255, 0.34);
	color: var(--fj-sizzle-ink);
	cursor: pointer;
	font-size: 0.85rem;
	font-weight: 850;
	letter-spacing: 0.055em;
	line-height: 1.2;
	text-transform: uppercase;
	transition:
		background-color 180ms ease,
		border-color 180ms ease,
		box-shadow 180ms ease,
		color 180ms ease,
		transform 180ms ease;
}

.fj-sizzle-unlock__button:hover,
.fj-sizzle-unlock__button:focus-visible {
	background:
		linear-gradient(135deg, var(--fj-sizzle-text), #f7e5c5);
	border-color: var(--fj-sizzle-text);
	color: var(--fj-sizzle-ink);
	box-shadow:
		0 0.9rem 2rem rgba(255, 176, 0, 0.22),
		inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.fj-sizzle-unlock__panel {
	display: grid;
	gap: clamp(1rem, 3vw, 2rem);
	padding: clamp(1rem, 3vw, 1.85rem);
	background:
		linear-gradient(180deg, rgba(255, 240, 214, 0.075), rgba(255, 240, 214, 0.034)),
		rgba(22, 15, 11, 0.78);
	border: 1px solid rgba(255, 176, 0, 0.28);
	border-radius: 1.3rem;
	box-shadow:
		0 1rem 2.6rem rgba(0, 0, 0, 0.22),
		inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.fj-sizzle-unlock__panel-copy {
	display: grid;
	gap: 0.82rem;
}

.fj-sizzle-unlock__panel-title {
	margin: 0;
	color: var(--fj-sizzle-text);
	font-family: var(--fj-font-heading, Georgia, serif);
	font-size: clamp(1.75rem, 4vw, 3.08rem);
	letter-spacing: -0.04em;
	line-height: 1.06;
	text-wrap: balance;
}

.fj-sizzle-unlock__panel-copy p {
	margin: 0;
	color: var(--fj-sizzle-muted);
	line-height: 1.65;
}

.fj-sizzle-unlock__form {
	min-width: 0;
}

.fj-sizzle-unlock__form .fj-lead-form {
	box-shadow:
		0 1rem 2.8rem rgba(0, 0, 0, 0.22),
		inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.fj-sizzle-unlock--enhanced:not(.fj-sizzle-unlock--unlocked) .fj-sizzle-unlock__panel {
	display: none;
}

.fj-sizzle-unlock--enhanced.fj-sizzle-unlock--unlocked .fj-sizzle-unlock__panel {
	display: grid;
}

@media (hover: hover) and (pointer: fine) {
	.fj-sizzle-unlock__button:hover {
		transform: translateY(-2px);
	}
}

@media (min-width: 960px) {
	.fj-sizzle-unlock__inner {
		grid-template-columns: minmax(0, 0.9fr) minmax(22rem, 1fr);
		align-items: start;
	}
}

@media (max-width: 520px) {
	.fj-sizzle-unlock__inner,
	.fj-sizzle-unlock__panel {
		border-radius: 1.2rem;
	}

	.fj-sizzle-unlock__button {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fj-sizzle-unlock__button {
		transition: none;
	}

	.fj-sizzle-unlock__button:hover {
		transform: none;
	}
}