/* The welcome offer. Held back a few seconds and dismissible in three separate
   ways — a popup that traps someone on their first visit loses the sale it was
   meant to win. */

.hj-signup[hidden] { display: none; }

.hj-signup {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.hj-signup__scrim {
	position: absolute;
	inset: 0;
	background: rgba( 24, 17, 13, .58 );
	animation: hj-signup-fade .25s ease;
}

.hj-signup__card {
	position: relative;
	width: 100%;
	max-width: 430px;
	padding: 34px 30px 26px;
	border-radius: 16px;
	background: #fffdfa;
	box-shadow: 0 26px 70px rgba( 24, 17, 13, .34 );
	text-align: center;
	animation: hj-signup-rise .3s cubic-bezier( .2, .7, .3, 1 );
}

@keyframes hj-signup-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hj-signup-rise {
	from { opacity: 0; transform: translateY( 14px ) scale( .98 ); }
	to   { opacity: 1; transform: none; }
}

@media ( prefers-reduced-motion: reduce ) {
	.hj-signup__scrim,
	.hj-signup__card { animation: none; }
}

.hj-signup__x {
	position: absolute;
	top: 8px;
	right: 12px;
	padding: 4px 8px;
	border: 0;
	background: none;
	color: #a89c8c;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}

.hj-signup__x:hover { color: #30221c; }

.hj-signup__eyebrow {
	margin: 0 0 6px;
	color: #c89148;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .17em;
	text-transform: uppercase;
}

.hj-signup__title {
	margin: 0 0 10px;
	font-size: 27px;
	line-height: 1.22;
	color: #30221c;
}

.hj-signup__title span { color: #8a6318; white-space: nowrap; }

.hj-signup__body {
	margin: 0 0 20px;
	color: #5c5147;
	font-size: 15px;
	line-height: 1.6;
}

.hj-signup__cta {
	display: block;
	padding: 14px 24px;
	border-radius: 999px;
	background: #30221c;
	color: #fff;
	font-size: 15.5px;
	font-weight: 700;
	text-decoration: none;
	transition: background .15s ease;
}

.hj-signup__cta:hover,
.hj-signup__cta:focus { background: #4a352b; color: #fff; }

.hj-signup__no {
	margin-top: 12px;
	border: 0;
	background: none;
	color: #8d8377;
	font-size: 13.5px;
	text-decoration: underline;
	cursor: pointer;
}

.hj-signup__no:hover { color: #30221c; }

.hj-signup__small {
	margin: 16px 0 0;
	color: #a2988b;
	font-size: 12px;
	line-height: 1.5;
}

@media ( max-width: 480px ) {
	.hj-signup__card { padding: 28px 20px 22px; }
	.hj-signup__title { font-size: 23px; }
}