body.nl-lock {
	overflow:hidden;
}

.nl-pop {
	position:fixed;
	inset:0;
	z-index:99999999999;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:24px;
	opacity:0;
	visibility:hidden;
	pointer-events:none;
	transition:opacity var(--transition),visibility var(--transition);
}

.nl-pop.is-open {
	opacity:1;
	visibility:visible;
	pointer-events:auto;
}

.nl-cvr {
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	padding:0;
	border:0;
	background:rgb(var(--primary-text-code) / 56%);
	cursor:default;
}

.nl-box {
	position:relative;
	z-index:1;
	width:min(594px,calc(100vw - 48px));
	max-height:calc(100vh - 48px);
	overflow:auto;
	overscroll-behavior:contain;
	border-radius:10px;
	background:var(--sp-fill);
	color:var(--primary-text);
	box-shadow:0 28px 80px rgb(var(--primary-text-code) / 24%);
	transform:translateY(14px) scale(.985);
	transition:transform 240ms ease;
}

.nl-pop.is-open .nl-box {
	transform:translateY(0) scale(1);
}

.nl-x {
	position:absolute;
	inset-block-start:12px;
	inset-inline-start:12px;
	z-index:2;
	width:40px;
	height:40px;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:0;
	border:1px solid rgb(var(--primary-text-code) / 10%);
	border-radius:50%;
	background:var(--sp-fill);
	color:var(--primary-text);
	font-size:23px;
	cursor:pointer;
	box-shadow:0 4px 18px rgb(var(--primary-text-code) / 10%);
	transition:background var(--transition),transform var(--transition);
}

.nl-img {
	width:100%;
	display:flex;
	align-items:center;
	justify-content:center;
	background-color:var(--media-placeholder);
}

.nl-img img {
	max-width:100%;
	height:auto;
}

.nl-body {
	padding: 35px 37px 41px;
	text-align:center;
}

.nl-kick {
	display:block;
	margin-bottom: 15px;
	color:var(--secondarytext);
	font-size: 14px;
	font-weight:500;
}

.nl-body h2 {
	font-size:25px;
	font-weight:600;
}

.nl-copy {
	max-width:450px;
	margin:9px auto 0;
	color:var(--secondarytext);
	font-size: 16px;
	line-height:1.65;
}

.nl-copy p {
	margin:0;
}

.nl-form {
	display:flex;
	flex-direction:column;
	gap:12px;
	margin-top:24px;
}

.nl-form input[type="email"] {
	width:100%;
	height:44px;
	padding:0 16px;
	border:1px solid var(--diver);
	border-radius:var(--miniradius);
	background:var(--sp-fill);
	color:var(--primary-text);
	font-family:var(--ffamilyen);
	font-size:14px;
	line-height:42px;
	direction:ltr;
	text-align:center;
	text-transform:none;
	transition:border-color var(--transition),box-shadow var(--transition);
}

.nl-form input[type="email"]:focus {
	border-color:var(--primary-text);
	box-shadow:0 0 0 3px rgb(var(--primary-text-code) / 7%);
}

.nl-btn {
	width:100%;
	min-height:46px;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	padding:10px 18px;
	border:0;
	border-radius:var(--miniradius);
	background:var(--primary-text);
	color:var(--sp-fill);
	font-size:14px;
	font-weight:600;
	cursor:pointer;
	transition:background var(--transition),transform var(--transition),opacity var(--transition);
}

.nl-btn i {
	display:none;
}

.nl-btn.is-load i {
	display:block;
	animation:nl-spin .8s linear infinite;
}

.nl-btn:disabled {
	opacity:.65;
	cursor:wait;
}

.nl-msg {
	min-height:21px;
	margin:10px 0 -14px;
	color:var(--secondarytext);
	font-size:13px;
	font-weight:500;
}

.nl-msg.is-error {
	color:var(--negative);
}

.nl-msg.is-ok {
	color:var(--positive);
}

@keyframes nl-spin {
	to { transform:rotate(360deg); }
}

@media (hover:hover) and (pointer:fine) {
	.nl-x:hover {
		background:var(--button-color-bg);
		transform:rotate(5deg);
	}

	.nl-btn:hover {
		background:var(--yc-brand-navy-soft);
	}
}

@media (max-width:767px) {
	.nl-pop {
		align-items:flex-end;
		padding:0;
	}

	.nl-box {
		width:100%;
		max-height:100dvh;
		border-radius:22px 22px 0 0;
		transform:translateY(28px);
	}

	.nl-x {
		inset-block-start:max(12px,env(safe-area-inset-top));
		width:44px;
		height:44px;
	}

	.nl-body {
		padding:27px 20px max(27px,env(safe-area-inset-bottom));
	}

	.nl-body h2 {
		font-size:22px;
		line-height:1.38;
	}

	.nl-form {
		margin-top:20px;
	}

	.nl-form input[type="email"],
	.nl-btn {
		min-height:50px;
	}
}

@media (max-width:390px) {
	.nl-body {
		padding-inline:15px;
	}

	.nl-body h2 {
		font-size:20px;
	}

	.nl-copy {
		font-size:13px;
	}
}

@media (prefers-reduced-motion:reduce) {
	.nl-pop,
	.nl-box,
	.nl-x,
	.nl-btn {
		transition:none !important;
	}

	.nl-btn.is-load i {
		animation:none;
	}
}

/* =========================
   Mobile App Experience
========================= */
@media (max-width:767px) {
    .nl-box {
        max-height:calc(100dvh - env(safe-area-inset-top));
        overscroll-behavior:contain;
        -webkit-overflow-scrolling:touch;
    }

    .nl-body {
        padding-inline:max(20px,env(safe-area-inset-left)) max(20px,env(safe-area-inset-right));
    }

    .nl-form input[type="email"],
    .nl-btn,
    .nl-x {
        touch-action:manipulation;
    }
}

@media (max-width:767px) and (max-height:620px) {
    .nl-img {
        max-height:150px;
        overflow:hidden;
    }

    .nl-img img {
        width:100%;
        height:150px;
        object-fit:cover;
    }

    .nl-body {
        padding-block:20px max(20px,env(safe-area-inset-bottom));
    }
}