/* =====================================================================
   Half Skull — coupon lead-capture popup
   Same token set as halfskull-m3.css (red / ink / surface, spring easing).
   ===================================================================== */

.hs-cp {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.hs-cp.is-open {
	display: flex;
}

.hs-cp__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(19, 19, 22, .58);
	backdrop-filter: blur(3px);
	opacity: 0;
	transition: opacity var(--m3-med, .35s) var(--m3-ease, cubic-bezier(.2, 0, 0, 1));
}
.hs-cp.is-open .hs-cp__backdrop {
	opacity: 1;
}

.hs-cp__dialog {
	position: relative;
	width: 100%;
	max-width: 420px;
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	background: var(--m3-surface-lowest, #fff);
	border-radius: var(--m3-r-2xl, 36px);
	box-shadow: var(--m3-e3, 0 20px 44px -16px rgba(19, 19, 22, .32));
	padding: 40px 32px 32px;
	font-family: var(--hs-font-body, "Poppins", sans-serif);
	color: var(--m3-on-surface, #131316);
	transform: scale(.85) translateY(24px);
	opacity: 0;
	transition: transform var(--m3-med, .35s) var(--m3-spring, cubic-bezier(.34, 1.56, .64, 1)),
		opacity var(--m3-fast, .2s) var(--m3-ease, ease);
}
.hs-cp.is-open .hs-cp__dialog {
	transform: scale(1) translateY(0);
	opacity: 1;
}

.hs-cp__close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: var(--m3-r-full, 999px);
	background: var(--m3-surface-container, #f0ede9);
	color: var(--m3-on-surface, #131316);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background var(--m3-fast, .2s), transform var(--m3-fast, .2s);
}
.hs-cp__close:hover {
	background: var(--m3-surface-high, #e8e4df);
	transform: rotate(90deg);
}

.hs-cp__eyebrow {
	margin: 0 0 6px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--m3-primary, #e3001c);
}

.hs-cp__title {
	margin: 0 0 8px;
	font-family: var(--hs-font-display, "Bricolage Grotesque", sans-serif);
	font-size: 28px;
	font-weight: 800;
	line-height: 1.15;
	color: var(--m3-ink, #131316);
}

.hs-cp__sub {
	margin: 0 0 24px;
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--m3-on-surface-variant, #55575d);
}

/* Floating-label M3 text fields */
.hs-cp__field {
	position: relative;
	margin-bottom: 16px;
}
.hs-cp__field input {
	width: 100%;
	box-sizing: border-box;
	padding: 20px 16px 8px;
	border: 1.5px solid var(--m3-outline-variant, #e3e0dc);
	border-radius: var(--m3-r-md, 16px);
	background: var(--m3-surface-low, #f6f4f1);
	font-family: inherit;
	font-size: 15px;
	color: var(--m3-ink, #131316);
	transition: border-color var(--m3-fast, .2s), background var(--m3-fast, .2s);
}
.hs-cp__field input:focus {
	outline: none;
	border-color: var(--m3-primary, #e3001c);
	background: var(--m3-surface-lowest, #fff);
}
.hs-cp__field label {
	position: absolute;
	left: 16px;
	top: 16px;
	font-size: 15px;
	color: var(--m3-on-surface-variant, #55575d);
	pointer-events: none;
	transform-origin: left top;
	transition: transform var(--m3-fast, .2s) var(--m3-ease, ease), color var(--m3-fast, .2s);
}
.hs-cp__field input:focus + label,
.hs-cp__field input:not(:placeholder-shown) + label {
	transform: translateY(-9px) scale(.72);
	color: var(--m3-primary, #e3001c);
}
.hs-cp__field.is-invalid input {
	border-color: var(--m3-primary, #e3001c);
	background: var(--m3-primary-container, #ffe1e4);
}

.hs-cp__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.hs-cp__error {
	min-height: 18px;
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 600;
	color: var(--m3-primary, #e3001c);
}

.hs-cp__submit {
	width: 100%;
	border: 0;
	border-radius: var(--m3-r-full, 999px);
	background: var(--m3-primary, #e3001c);
	color: var(--m3-on-primary, #fff);
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	padding: 16px 20px;
	cursor: pointer;
	box-shadow: var(--m3-e2, 0 8px 20px -8px rgba(19, 19, 22, .18));
	transition: background var(--m3-fast, .2s), transform var(--m3-fast, .2s) var(--m3-spring, ease);
	position: relative;
	overflow: hidden;
}
.hs-cp__submit:hover {
	background: var(--m3-primary-hover, #c20018);
	transform: translateY(-1px);
}
.hs-cp__submit:active {
	transform: translateY(0) scale(.98);
}
.hs-cp__submit[disabled] {
	opacity: .7;
	cursor: default;
	pointer-events: none;
}
.hs-cp__submit.is-loading .hs-cp__submit-text {
	visibility: hidden;
}
.hs-cp__submit.is-loading::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 18px;
	height: 18px;
	margin: -9px 0 0 -9px;
	border: 2.5px solid rgba(255, 255, 255, .4);
	border-top-color: #fff;
	border-radius: 50%;
	animation: hs-cp-spin .7s linear infinite;
}
@keyframes hs-cp-spin {
	to { transform: rotate(360deg); }
}

.hs-cp__fineprint {
	margin: 14px 0 0;
	font-size: 12px;
	text-align: center;
	color: var(--m3-on-surface-variant, #55575d);
}

/* Code-reveal panel */
.hs-cp__panel--code {
	text-align: center;
	position: relative;
}

.hs-cp__code {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 8px 0 18px;
	padding: 18px 20px;
	border: 2px dashed var(--m3-primary, #e3001c);
	border-radius: var(--m3-r-lg, 20px);
	background: var(--m3-primary-container, #ffe1e4);
	cursor: pointer;
	font-family: inherit;
	transition: transform var(--m3-fast, .2s) var(--m3-spring, ease);
}
.hs-cp__code:hover {
	transform: scale(1.02);
}
.hs-cp__code:active {
	transform: scale(.98);
}
.hs-cp__code-text {
	font-family: var(--hs-font-display, "Bricolage Grotesque", sans-serif);
	font-size: 26px;
	font-weight: 800;
	letter-spacing: .06em;
	color: var(--m3-on-primary-container, #6e000f);
}
.hs-cp__code-copy {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--m3-primary, #e3001c);
}
.hs-cp__code.is-copied .hs-cp__code-copy::before {
	content: "Copied — ";
}

.hs-cp__shop {
	display: inline-block;
	margin-top: 4px;
	font-size: 14px;
	font-weight: 700;
	color: var(--m3-primary, #e3001c);
	text-decoration: none;
	border-bottom: 2px solid var(--m3-primary, #e3001c);
	padding-bottom: 2px;
}
.hs-cp__shop:hover {
	color: var(--m3-primary-hover, #c20018);
	border-color: var(--m3-primary-hover, #c20018);
}

/* Confetti-ish burst on reveal */
.hs-cp__burst {
	position: absolute;
	top: -10px;
	left: 50%;
	width: 1px;
	height: 1px;
	pointer-events: none;
}
.hs-cp__burst span {
	position: absolute;
	width: 8px;
	height: 8px;
	border-radius: 2px;
	background: var(--m3-primary, #e3001c);
	opacity: 0;
}
.hs-cp.is-open .hs-cp__panel--code:not([hidden]) .hs-cp__burst span {
	animation: hs-cp-burst .8s var(--m3-ease, ease) forwards;
}
.hs-cp__burst span:nth-child(1) { background: var(--m3-primary, #e3001c); transform: translate(-60px, 0); animation-delay: .02s; }
.hs-cp__burst span:nth-child(2) { background: var(--m3-ink, #131316); transform: translate(-30px, 0); animation-delay: .06s; }
.hs-cp__burst span:nth-child(3) { background: var(--m3-primary, #e3001c); transform: translate(0, 0); animation-delay: 0s; }
.hs-cp__burst span:nth-child(4) { background: var(--m3-ink, #131316); transform: translate(20px, 0); animation-delay: .08s; }
.hs-cp__burst span:nth-child(5) { background: var(--m3-primary, #e3001c); transform: translate(45px, 0); animation-delay: .04s; }
.hs-cp__burst span:nth-child(6) { background: var(--m3-ink, #131316); transform: translate(65px, 0); animation-delay: .1s; }

@keyframes hs-cp-burst {
	0% { opacity: 1; transform: translate(var(--tx, 0), 0) scale(.4) rotate(0deg); }
	100% { opacity: 0; transform: translate(var(--tx, 0), 90px) scale(1) rotate(220deg); }
}

@media (max-width: 480px) {
	.hs-cp__dialog {
		padding: 32px 22px 26px;
		border-radius: var(--m3-r-xl, 28px);
	}
	.hs-cp__title {
		font-size: 24px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hs-cp__dialog,
	.hs-cp__backdrop,
	.hs-cp__submit,
	.hs-cp__code,
	.hs-cp__burst span {
		transition: none !important;
		animation: none !important;
	}
}

/* Details list (conditions in plain words) */
.hs-cp__details { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; gap: 6px; text-align: left; }
.hs-cp__details li { position: relative; padding-left: 24px; font-size: 13.5px; line-height: 1.4; }
.hs-cp__details li::before {
	content: '\2713'; position: absolute; left: 0; top: 1px; width: 17px; height: 17px; border-radius: 50%;
	display: grid; place-items: center; font-size: 11px; font-weight: 800; background: #e3001c; color: #fff;
}
.hs-cp__tc { margin: 0 0 8px; font-size: 12px; text-align: left; opacity: 0.8; }
.hs-cp__tc a { text-decoration: underline; color: inherit; }
.hs-cp__how { margin: 6px 0 10px; padding: 10px 12px; border-radius: 12px; background: rgba(227, 0, 28, 0.08); font-size: 13px; line-height: 1.45; text-align: left; }