/* Hesham Saad theme 2.0.80: blog newsletter modal + inline signup + footer step 2. Mobile-first, logical properties. */
.hs-nl-modal,
.hs-nl-inline {
	--hs-nl-control: 2.75rem;
	--hs-nl-radius: .375rem;
	--hs-nl-cta: var(--hs-palette-orange-base, #eb881f);
	--hs-nl-cta-hover: #e17d0d;
	--hs-nl-ink: #072025;
	--hs-nl-muted: var(--muted-foreground, #55606a);
	--hs-nl-line: var(--border, #e5e5e5);
	--hs-nl-error: #b42318;
	--hs-nl-focus: var(--hs-palette-teal-base, #16697a);
	font-family: var(--font-sans, system-ui, sans-serif);
	color: var(--foreground, #0a0a0a);
}
html.hs-nl-lock { overflow: hidden; }
html.hs-nl-lock.hs-nl-gutter { scrollbar-gutter: stable; }

/* Modal: bottom sheet on phones */
.hs-nl-modal {
	box-sizing: border-box;
	inline-size: 100%;
	max-inline-size: 100%;
	max-block-size: calc(100dvh - var(--hs-admin-bar-offset, 0px) - .75rem);
	margin: auto 0 0;
	padding: 0;
	border: 0;
	border-start-start-radius: 1rem;
	border-start-end-radius: 1rem;
	background: var(--background, #fff);
	box-shadow: 0 -10px 40px rgb(7 32 37 / .18);
	overflow: auto;
	overscroll-behavior: contain;
}
.hs-nl-modal:focus { outline: none; }
.hs-nl-modal:focus-visible { outline: 2px solid var(--hs-nl-focus); outline-offset: -2px; }
.hs-nl-modal::backdrop { background: rgb(7 32 37 / .55); }
.hs-nl-modal__panel {
	position: relative;
	padding: 1.75rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
}
.hs-nl-modal__panel::before { /* grab handle */
	content: "";
	position: absolute;
	inset-block-start: .5rem;
	inset-inline-start: 50%;
	inline-size: 2.5rem;
	block-size: .25rem;
	margin-inline-start: -1.25rem;
	border-radius: 999px;
	background: var(--hs-nl-line);
}
.hs-nl-modal__close {
	position: absolute;
	inset-block-start: .5rem;
	inset-inline-end: .5rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: var(--hs-nl-control);
	block-size: var(--hs-nl-control);
	padding: 0;
	border: 0;
	border-radius: var(--hs-nl-radius);
	background: transparent;
	color: var(--hs-nl-muted);
	cursor: pointer;
}
.hs-nl-modal__close:hover { background: rgb(7 32 37 / .06); color: var(--hs-nl-ink); }
.hs-nl-modal__close:focus-visible,
.hs-nl-submit:focus-visible,
.hs-nl-privacy a:focus-visible { outline: 2px solid var(--hs-nl-focus); outline-offset: 2px; }
.hs-nl-modal__intro { padding-inline-end: 2.5rem; margin-block-end: 1.25rem; }

.hs-nl-eyebrow {
	margin: 0 0 .5rem;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--hs-nl-focus);
}
:lang(ar) .hs-nl-eyebrow { letter-spacing: 0; font-size: .8125rem; }
.hs-nl-modal__title,
.hs-nl-inline__title {
	margin: 0;
	font-size: 1.375rem;
	line-height: 1.3;
	font-weight: 700;
	color: var(--hs-nl-ink);
	text-wrap: balance;
}
.hs-nl-modal__lede,
.hs-nl-inline__lede {
	margin: .5rem 0 0;
	font-size: .9375rem;
	line-height: 1.6;
	color: var(--hs-nl-muted);
}

/* Form */
.hs-nl-form { display: grid; gap: .875rem; }
.hs-nl-names { display: grid; gap: .875rem; }
.hs-nl-field { display: grid; gap: .375rem; min-inline-size: 0; }
.hs-nl-label { font-size: .875rem; font-weight: 600; color: var(--hs-nl-ink); }
.hs-nl-input {
	box-sizing: border-box;
	inline-size: 100%;
	min-block-size: var(--hs-nl-control);
	padding: .625rem .875rem;
	border: 1px solid #cfd6d8;
	border-radius: var(--hs-nl-radius);
	background: #fff;
	color: var(--foreground, #0a0a0a);
	font: inherit;
	font-size: 1rem; /* 16px: no iOS zoom */
	transition: border-color .15s, box-shadow .15s;
}
.hs-nl-input[dir="ltr"] { text-align: start; }
:dir(rtl) .hs-nl-input[dir="ltr"] { text-align: end; }
.hs-nl-input:focus { outline: none; border-color: var(--hs-nl-focus); box-shadow: 0 0 0 3px rgb(22 105 122 / .18); }
.hs-nl-input[aria-invalid="true"] { border-color: var(--hs-nl-error); }
.hs-nl-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgb(180 35 24 / .15); }
.hs-nl-error,
.hs-nl-form-error { margin: 0; font-size: .8125rem; line-height: 1.45; color: var(--hs-nl-error); }
.hs-nl-hp { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hs-nl-submit {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	inline-size: 100%;
	min-block-size: var(--hs-nl-control);
	padding: 0 1.25rem;
	border: 0;
	border-radius: var(--hs-nl-radius);
	background: var(--hs-nl-cta);
	color: #0a0a0a;
	font: inherit;
	font-size: .9375rem;
	font-weight: 700;
	cursor: pointer;
	transition: background-color .15s;
}
.hs-nl-submit:hover { background: var(--hs-nl-cta-hover); }
.hs-nl-submit[disabled] { cursor: progress; opacity: .85; }
.hs-nl-submit__spinner { display: none; inline-size: 1rem; block-size: 1rem; border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%; }
.hs-nl-form.is-busy .hs-nl-submit__spinner { display: inline-block; animation: hs-nl-spin .8s linear infinite; }
.hs-nl-privacy { margin: 0; font-size: .8125rem; line-height: 1.5; color: var(--hs-nl-muted); }
.hs-nl-privacy a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* Success (replaces the form in the same box) */
[data-hs-nl-view].is-done > :not([data-hs-nl-success]):not(.hs-nl-modal__close) { display: none; }
.hs-nl-success { display: grid; justify-items: center; align-content: center; gap: .5rem; padding-block: 1rem; text-align: center; min-block-size: 100%; }
.hs-nl-success__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 3.5rem;
	block-size: 3.5rem;
	border-radius: 50%;
	background: var(--hs-nl-ink);
	color: var(--hs-nl-cta);
}
.hs-nl-success__title { margin: .5rem 0 0; font-size: 1.25rem; font-weight: 700; color: var(--hs-nl-ink); }
.hs-nl-success__title:focus { outline: none; }
.hs-nl-success__body { margin: 0; max-inline-size: 22rem; font-size: .9375rem; line-height: 1.6; color: var(--hs-nl-muted); }
.hs-nl-modal [data-hs-nl-view].is-done { display: grid; align-content: center; }

/* Inline end-of-content signup */
.hs-nl-inline {
	box-sizing: border-box;
	display: grid;
	gap: 1.25rem;
	margin-block: 2.5rem 0;
	padding: 1.5rem 1.25rem;
	border: 1px solid var(--hs-nl-line);
	border-radius: .75rem;
	background: #f3f7f6;
}
.hs-nl-inline__title { font-size: 1.25rem; }
html.hs-nl-subscribed .hs-nl-inline:not(:has(.is-done)) { display: none; }

@media (min-width: 400px) {
	.hs-nl-names { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 640px) {
	.hs-nl-modal {
		inline-size: calc(100% - 2rem);
		max-inline-size: 27.5rem;
		margin: auto;
		inset-block-start: var(--hs-admin-bar-offset, 0px);
		border-radius: .75rem;
		box-shadow: 0 24px 64px rgb(7 32 37 / .28);
	}
	.hs-nl-modal__panel { padding: 2rem; }
	.hs-nl-modal__panel::before { display: none; }
	.hs-nl-inline { padding: 2rem; }
}
@media (min-width: 1024px) {
	.hs-nl-inline--archive { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: start; }
}

@media (prefers-reduced-motion: no-preference) {
	.hs-nl-modal[open] { animation: hs-nl-up .3s cubic-bezier(.2, .8, .2, 1); }
	.hs-nl-modal[open]::backdrop { animation: hs-nl-fade .2s ease-out; }
	@media (min-width: 640px) { .hs-nl-modal[open] { animation-name: hs-nl-pop; } }
}
@keyframes hs-nl-up { from { transform: translateY(100%); } }
@keyframes hs-nl-pop { from { opacity: 0; transform: translateY(.5rem) scale(.98); } }
@keyframes hs-nl-fade { from { opacity: 0; } }
@keyframes hs-nl-spin { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) { .hs-nl-form.is-busy .hs-nl-submit__spinner { animation-duration: 2s; } }

/* Arabic: no tracking anywhere (letter-spacing breaks Arabic letter joining). */
:is(:lang(ar), [dir="rtl"]) :is(.hs-nl-modal, .hs-nl-inline),
:is(:lang(ar), [dir="rtl"]) :is(.hs-nl-modal, .hs-nl-inline) *,
:is(:lang(ar), [dir="rtl"]) :is(.hs-nl-modal, .hs-nl-inline) ::placeholder { letter-spacing: 0; }
:is(:lang(ar), [dir="rtl"]) .hs-nl-eyebrow { text-transform: none; }

/* Footer step 2 ("complete your signup") */
.hs-nl-email-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .25rem .5rem;
	margin: 0 0 1rem;
	padding: .625rem .875rem;
	border: 1px solid var(--hs-nl-line);
	border-radius: var(--hs-nl-radius);
	background: var(--muted, #f6f6f6);
	font-size: .875rem;
	color: var(--hs-nl-muted);
}
.hs-nl-email-row__value { font-weight: 600; color: var(--hs-nl-ink); overflow-wrap: anywhere; }
.hs-nl-link {
	min-block-size: 2.75rem;
	margin-inline-start: auto;
	padding: 0 .25rem;
	border: 0;
	background: none;
	color: var(--hs-nl-focus);
	font: inherit;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
.hs-nl-actions { display: grid; gap: .5rem; }
.hs-nl-skip {
	min-block-size: var(--hs-nl-control);
	border: 0;
	border-radius: var(--hs-nl-radius);
	background: transparent;
	color: var(--hs-nl-muted);
	font: inherit;
	font-size: .9375rem;
	font-weight: 600;
	cursor: pointer;
}
.hs-nl-skip:hover { color: var(--hs-nl-ink); background: var(--muted, #f6f6f6); }
.hs-nl-link:focus-visible,
.hs-nl-skip:focus-visible { outline: 2px solid var(--hs-nl-focus); outline-offset: 2px; }
.hs-nl-form--complete .hs-nl-form-error { margin-block-start: .5rem; }