/* ==========================================================================
 * SSI Newsletter — front-end styles
 *
 * WHY THIS FILE LOOKS THE WAY IT DOES
 *
 * A plugin's styles sit in the same author origin as the active theme, so a
 * single class name loses to any theme rule that is even slightly more
 * specific. Three of those cost us the design:
 *
 *   .ssi-nl__input   (0,1,0)  loses to  input[type="text"]       (0,1,1)
 *   .ssi-nl__submit  (0,1,0)  loses to  .entry-content button    (0,1,1)
 *   fill="none" on the <svg>  (0,0,0)  loses to  svg { fill: … } (0,0,1)
 *
 * The last one is the worst: SVG presentation attributes have no specificity
 * at all, so any rule anywhere beats them. That is what turned the paper
 * plane and the send arrow black.
 *
 * So: every selector is anchored to `.ssi-nl[data-ssi-newsletter]`, which is
 * (0,2,0) before the component class is even added, and `!important` is
 * applied to the specific properties themes are known to set globally —
 * background, border, radius, colour, font, padding, height, shadow, fill and
 * stroke. Nothing else carries `!important`, so the file stays readable and a
 * child theme can still retheme the bar through the custom properties below.
 *
 * The stylesheet is enqueued while the shortcode renders, which is after the
 * theme's own stylesheet, so it also wins any tie on source order.
 *
 * MEASUREMENTS, taken from the approved reference:
 *   background   #141a2f      pill        63px tall, 7px padding, 999px radius
 *   accent       #f5c518      control     49px tall
 *   divider      #e5e7eb      divider     1px x 25px
 *   muted        #8b93a7      icon        38px, 2/24 stroke
 *   button       122 x 49, 999px radius, dark navy label
 * ========================================================================== */

.ssi-nl[data-ssi-newsletter] {
	/* Palette. Override these in a child theme to retheme the bar. */
	--ssi-nl-bg: #141a2f;
	--ssi-nl-accent: #f5c518;
	--ssi-nl-accent-hover: #e8b912;
	--ssi-nl-on-accent: #141a2f;
	--ssi-nl-heading: #ffffff;
	--ssi-nl-muted: #8b93a7;
	--ssi-nl-field-bg: #ffffff;
	--ssi-nl-field-text: #111827;
	--ssi-nl-placeholder: #757575;
	--ssi-nl-divider: #e5e7eb;
	--ssi-nl-error: #ff6b6b;
	--ssi-nl-success: var(--ssi-nl-accent);

	/* Metrics. */
	--ssi-nl-content-width: 1280px;
	--ssi-nl-gutter: 24px;
	--ssi-nl-pill-height: 63px;
	--ssi-nl-pill-padding: 7px;
	--ssi-nl-control-height: 49px;
	--ssi-nl-icon-size: 38px;
	--ssi-nl-ring: 0 0 0 4px rgb(245 197 24 / 30%);
	--ssi-nl-ring-error: 0 0 0 4px rgb(255 107 107 / 24%);

	position: relative;
	display: block !important;
	box-sizing: border-box !important;
	width: auto !important;
	max-width: none !important;
	margin: 16px !important;
	padding: 26px 22px 24px !important;
	overflow: hidden;
	isolation: isolate;
	border: 0 !important;
	border-radius: 22px !important;
	background: var(--ssi-nl-bg) !important;
	background-image: none !important;
	box-shadow: none !important;
	color: var(--ssi-nl-heading) !important;
	font-family: inherit;
	font-size: 16px;
	line-height: 1.5;
	text-align: left !important;
	-webkit-tap-highlight-color: transparent;
}

/* Scoped reset. Only the properties a theme sets globally and that would
   visibly break the layout. Deliberately not `all: revert`, which would also
   discard the inherited font and hand every element back to the user agent. */
.ssi-nl[data-ssi-newsletter] *,
.ssi-nl[data-ssi-newsletter] *::before,
.ssi-nl[data-ssi-newsletter] *::after {
	box-sizing: border-box !important;
	float: none !important;
	text-shadow: none !important;
	text-indent: 0 !important;
}

/* Entrance animation. The class is added by the script, so the bar is always
   visible when JavaScript is unavailable or fails to load. */
.ssi-nl[data-ssi-newsletter].ssi-nl--animate {
	opacity: 0;
	transform: translateY(18px);
	transition:
		opacity 600ms cubic-bezier(0.16, 1, 0.3, 1),
		transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ssi-nl[data-ssi-newsletter].ssi-nl--animate.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Diagonal accent, mobile card only. */
.ssi-nl[data-ssi-newsletter]::before {
	content: "";
	position: absolute;
	inset: 0 0 0 auto;
	z-index: 0;
	width: 42%;
	max-width: 200px;
	pointer-events: none;
	opacity: 0.5;
	background-image: repeating-linear-gradient(
		135deg,
		var(--ssi-nl-accent) 0,
		var(--ssi-nl-accent) 5px,
		transparent 5px,
		transparent 16px
	) !important;
	-webkit-mask-image: linear-gradient(to left, #000 0%, rgb(0 0 0 / 55%) 55%, transparent 100%);
	mask-image: linear-gradient(to left, #000 0%, rgb(0 0 0 / 55%) 55%, transparent 100%);
}

.ssi-nl[data-ssi-newsletter] .ssi-nl__inner {
	position: relative;
	z-index: 1;
	display: flex !important;
	flex-direction: column;
	gap: 18px;
	width: 100% !important;
	max-width: var(--ssi-nl-content-width);
	margin: 0 auto !important;
	padding: 0 !important;
}

.ssi-nl[data-ssi-newsletter] .ssi-nl__intro {
	display: flex !important;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	min-width: 0;
	margin: 0 !important;
	padding: 0 !important;
}

/* --------------------------------------------------------------------------
 * Icons
 *
 * The <svg> carries fill="none" stroke="currentColor" as presentation
 * attributes, which have zero specificity. A theme rule as weak as
 * `svg { fill: currentColor }` overrides them and fills the outline solid.
 * These declarations are the only thing standing between the design and a
 * black lump, so they are not negotiable.
 * -------------------------------------------------------------------------- */

.ssi-nl[data-ssi-newsletter] .ssi-nl__icon {
	display: none;
	flex: 0 0 auto;
	margin: 0 !important;
	padding: 0 !important;
	color: var(--ssi-nl-accent) !important;
	line-height: 0 !important;
}

.ssi-nl[data-ssi-newsletter] .ssi-nl__icon svg {
	display: block !important;
	width: var(--ssi-nl-icon-size) !important;
	height: var(--ssi-nl-icon-size) !important;
	max-width: none !important;
	fill: none !important;
	stroke: #e8b912 !important;
	vertical-align: middle !important;
}

.ssi-nl[data-ssi-newsletter] .ssi-nl__submit-icon {
	display: none;
	flex: 0 0 auto;
	line-height: 0 !important;
}

.ssi-nl[data-ssi-newsletter] .ssi-nl__submit-icon svg {
	display: block !important;
	width: 16px !important;
	height: 16px !important;
	max-width: none !important;
	fill: none !important;
	stroke: currentColor !important;
}

/* --------------------------------------------------------------------------
 * Copy
 * -------------------------------------------------------------------------- */

.ssi-nl[data-ssi-newsletter] .ssi-nl__copy {
	min-width: 0;
}

.ssi-nl[data-ssi-newsletter] .ssi-nl__kicker {
	display: block !important;
	margin: 0 0 6px !important;
	padding: 0 !important;
	background: none !important;
	color: var(--ssi-nl-accent) !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase !important;
}

.ssi-nl[data-ssi-newsletter] .ssi-nl__heading {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	color: var(--ssi-nl-accent) !important;
	font-family: inherit !important;
	font-size: 28px !important;
	font-weight: 800 !important;
	line-height: 1.05 !important;
	letter-spacing: -0.005em !important;
	text-transform: uppercase !important;
	text-align: left !important;
}

.ssi-nl[data-ssi-newsletter] .ssi-nl__heading::before,
.ssi-nl[data-ssi-newsletter] .ssi-nl__heading::after {
	content: none !important;
}

.ssi-nl[data-ssi-newsletter] .ssi-nl__heading-lg,
.ssi-nl[data-ssi-newsletter] .ssi-nl__subtext {
	display: none;
}

.ssi-nl[data-ssi-newsletter] .ssi-nl__heading-sm {
	display: block;
}

.ssi-nl[data-ssi-newsletter] .ssi-nl__subtext {
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
	color: var(--ssi-nl-muted) !important;
	font-family: inherit !important;
	font-size: 15px !important;
	font-weight: 400 !important;
	line-height: 1.45 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-align: left !important;
}

/* --------------------------------------------------------------------------
 * Form
 * -------------------------------------------------------------------------- */

.ssi-nl[data-ssi-newsletter] .ssi-nl__aside {
	min-width: 0;
}

.ssi-nl[data-ssi-newsletter] .ssi-nl__form {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 6px;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 5px !important;
	border: 1px solid rgb(255 255 255 / 8%) !important;
	border-radius: 999px !important;
	background: rgb(255 255 255 / 6%) !important;
	background-image: none !important;
	box-shadow: none !important;
	transition:
		border-color 250ms ease,
		box-shadow 250ms ease;
}

.ssi-nl[data-ssi-newsletter] .ssi-nl__form:focus-within {
	border-color: rgb(245 197 24 / 45%) !important;
	box-shadow: var(--ssi-nl-ring) !important;
}

.ssi-nl[data-ssi-newsletter] .ssi-nl__form.is-invalid {
	border-color: rgb(255 107 107 / 55%) !important;
	box-shadow: var(--ssi-nl-ring-error) !important;
	animation: ssi-nl-shake 380ms cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

@keyframes ssi-nl-shake {
	10%,
	90% { transform: translateX(-2px); }
	20%,
	80% { transform: translateX(3px); }
	30%,
	50%,
	70% { transform: translateX(-5px); }
	40%,
	60% { transform: translateX(5px); }
}

/* The name field and its divider are desktop-only; the label goes with it so a
   screen reader is never pointed at a hidden control. */
.ssi-nl[data-ssi-newsletter] .ssi-nl__input--name,
.ssi-nl[data-ssi-newsletter] .ssi-nl__label-name,
.ssi-nl[data-ssi-newsletter] .ssi-nl__divider {
	display: none;
}

/* `input[type="text"]` is (0,1,1) and would otherwise beat a lone class.
   This selector is (0,3,0) and every contested property is locked. */
.ssi-nl[data-ssi-newsletter] .ssi-nl__input {
	flex: 1 1 auto;
	min-width: 0 !important;
	width: 100% !important;
	max-width: none !important;
	min-height: 0 !important;
	height: auto !important;
	margin: 0 !important;
	padding: 12px 14px 12px 18px !important;
	border: 0 !important;
	border-radius: 0 !important;
	outline: none !important;
	background: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	color: var(--ssi-nl-heading) !important;
	font-family: inherit !important;
	font-size: 15px !important;
	font-weight: 400 !important;
	line-height: 1.2 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}

.ssi-nl[data-ssi-newsletter] .ssi-nl__input:focus,
.ssi-nl[data-ssi-newsletter] .ssi-nl__input:focus-visible {
	border: 0 !important;
	outline: none !important;
	box-shadow: none !important;
	background: transparent !important;
}

.ssi-nl[data-ssi-newsletter] .ssi-nl__input::placeholder {
	color: #9aa1b4 !important;
	opacity: 1 !important;
	font-family: inherit !important;
	font-size: inherit !important;
}

.ssi-nl[data-ssi-newsletter] .ssi-nl__input:-webkit-autofill,
.ssi-nl[data-ssi-newsletter] .ssi-nl__input:-webkit-autofill:hover,
.ssi-nl[data-ssi-newsletter] .ssi-nl__input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--ssi-nl-heading);
	-webkit-box-shadow: 0 0 0 1000px #22273a inset;
	caret-color: var(--ssi-nl-heading);
	transition: background-color 5000s ease-in-out 0s;
}

/* Off-screen rather than display:none: a display:none input is skipped by some
   bots, and the whole point is that they fill it in. */
.ssi-nl[data-ssi-newsletter] .ssi-nl__honeypot {
	position: absolute !important;
	left: -9999px !important;
	top: auto !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

.ssi-nl[data-ssi-newsletter] .ssi-nl__sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	border: 0 !important;
	overflow: hidden !important;
	white-space: nowrap !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
}

/* `.entry-content button` is (0,1,1). This is (0,3,0). */
.ssi-nl[data-ssi-newsletter] .ssi-nl__submit {
	position: relative;
	display: inline-flex !important;
	flex: 0 0 auto;
	align-items: center !important;
	justify-content: center !important;
	gap: 10px;
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	min-height: 0 !important;
	height: auto !important;
	margin: 0 !important;
	padding: 12px 22px !important;
	border: 0 !important;
	border-radius: 999px !important;
	outline: none;
	overflow: hidden;
	background: var(--ssi-nl-accent) !important;
	background-image: none !important;
	box-shadow: none !important;
	color: var(--ssi-nl-on-accent) !important;
	font-family: inherit !important;
	font-size: 13px !important;
	font-weight: 800 !important;
	line-height: 1 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	cursor: pointer !important;
	user-select: none;
	-webkit-appearance: none !important;
	appearance: none !important;
	-webkit-tap-highlight-color: transparent;
	transition:
		background 200ms ease,
		transform 160ms ease;
}

.ssi-nl[data-ssi-newsletter] .ssi-nl__submit:hover,
.ssi-nl[data-ssi-newsletter] .ssi-nl__submit:focus {
	background: var(--ssi-nl-accent-hover) !important;
	color: var(--ssi-nl-on-accent) !important;
}

.ssi-nl[data-ssi-newsletter] .ssi-nl__submit:active {
	background: var(--ssi-nl-accent-hover) !important;
	transform: scale(0.96);
}

.ssi-nl[data-ssi-newsletter] .ssi-nl__submit:focus-visible {
	outline: 2px solid var(--ssi-nl-accent) !important;
	outline-offset: 3px !important;
}

.ssi-nl[data-ssi-newsletter] .ssi-nl__submit:disabled {
	opacity: 0.7;
	cursor: not-allowed !important;
}

.ssi-nl[data-ssi-newsletter] .ssi-nl__submit-label {
	display: inline-block !important;
	margin: 0 !important;
	padding: 0 !important;
	color: inherit !important;
	font: inherit !important;
	transition:
		opacity 220ms ease,
		transform 220ms ease;
}

.ssi-nl[data-ssi-newsletter] .ssi-nl__submit-label--lg {
	/* The base rule above carries `!important`, which beats a plain
	   declaration whatever the source order. This one has to match it. */
	display: none !important;
}

.ssi-nl[data-ssi-newsletter] .ssi-nl__spinner {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px !important;
	height: 16px !important;
	margin: -8px 0 0 -8px !important;
	padding: 0 !important;
	border: 2px solid rgb(0 0 0 / 22%) !important;
	border-top-color: var(--ssi-nl-on-accent) !important;
	border-radius: 50% !important;
	background: none !important;
	opacity: 0;
	pointer-events: none;
	transition: opacity 200ms ease;
	animation: ssi-nl-spin 700ms linear infinite;
	animation-play-state: paused;
}

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

.ssi-nl[data-ssi-newsletter] .ssi-nl__submit.is-loading .ssi-nl__submit-label,
.ssi-nl[data-ssi-newsletter] .ssi-nl__submit.is-loading .ssi-nl__submit-icon {
	opacity: 0;
	transform: scale(0.85);
}

.ssi-nl[data-ssi-newsletter] .ssi-nl__submit.is-loading .ssi-nl__spinner {
	opacity: 1;
	animation-play-state: running;
}

.ssi-nl[data-ssi-newsletter] .ssi-nl__status {
	display: block !important;
	margin: 14px 0 0 !important;
	padding: 0 !important;
	min-height: 18px;
	background: none !important;
	color: var(--ssi-nl-muted) !important;
	font-family: inherit !important;
	font-size: 13px !important;
	line-height: 1.4 !important;
	text-align: center !important;
	transition:
		opacity 220ms ease,
		transform 220ms ease;
}

.ssi-nl[data-ssi-newsletter] .ssi-nl__status:empty {
	margin: 0 !important;
	min-height: 0;
}

.ssi-nl[data-ssi-newsletter] .ssi-nl__status.is-sending { color: #d1d5e0 !important; }
.ssi-nl[data-ssi-newsletter] .ssi-nl__status.is-success { color: var(--ssi-nl-success) !important; font-weight: 600 !important; }
.ssi-nl[data-ssi-newsletter] .ssi-nl__status.is-error   { color: var(--ssi-nl-error) !important; }

/* reCAPTCHA disclosure, shown only when the floating badge is suppressed. */
.ssi-nl[data-ssi-newsletter] .ssi-nl__legal {
	margin: 10px 0 0 !important;
	padding: 0 !important;
	background: none !important;
	color: var(--ssi-nl-muted) !important;
	font-family: inherit !important;
	font-size: 11px !important;
	line-height: 1.5 !important;
	text-align: center !important;
}

.ssi-nl[data-ssi-newsletter] .ssi-nl__legal a {
	color: inherit !important;
	background: none !important;
	text-decoration: underline !important;
}

/* Applied to <body> by the script, never by this stylesheet alone: hiding the
   badge without showing the notice above would breach Google's terms. */
body.ssi-nl-hide-recaptcha-badge .grecaptcha-badge {
	visibility: hidden !important;
}

/* --------------------------------------------------------------------------
 * Tablet and up — full-bleed bar, single white pill
 * -------------------------------------------------------------------------- */

@media (min-width: 768px) {

	.ssi-nl[data-ssi-newsletter] {
		margin: 0 !important;
		padding: 28px var(--ssi-nl-gutter) 25px !important;
		border-radius: 0 !important;
		overflow: visible;
	}

	.ssi-nl[data-ssi-newsletter]::before {
		content: none !important;
	}

	.ssi-nl[data-ssi-newsletter] .ssi-nl__inner {
		gap: 24px;
	}

	.ssi-nl[data-ssi-newsletter] .ssi-nl__intro {
		flex-direction: row;
		align-items: center;
		gap: 28px;
	}

	.ssi-nl[data-ssi-newsletter] .ssi-nl__icon {
		display: block;
	}

	.ssi-nl[data-ssi-newsletter] .ssi-nl__kicker,
	.ssi-nl[data-ssi-newsletter] .ssi-nl__heading-sm,
	.ssi-nl[data-ssi-newsletter] .ssi-nl__submit-label--sm {
		display: none !important;
	}

	.ssi-nl[data-ssi-newsletter] .ssi-nl__heading-lg,
	.ssi-nl[data-ssi-newsletter] .ssi-nl__subtext {
		display: block;
	}

	.ssi-nl[data-ssi-newsletter] .ssi-nl__submit-label--lg {
		display: inline-block !important;
	}

	.ssi-nl[data-ssi-newsletter] .ssi-nl__submit-icon {
		display: block !important;
	}

	.ssi-nl[data-ssi-newsletter] .ssi-nl__heading {
		margin: 0 0 6px !important;
		color: var(--ssi-nl-heading) !important;
		font-size: 28px !important;
		font-weight: 800 !important;
		line-height: 1.2 !important;
		letter-spacing: normal !important;
		text-transform: none !important;
	}

	/* The single white pill: name, divider, email, button. */
	.ssi-nl[data-ssi-newsletter] .ssi-nl__form {
		gap: 0;
		height: var(--ssi-nl-pill-height) !important;
		padding: var(--ssi-nl-pill-padding) !important;
		border: 0 !important;
		border-radius: 999px !important;
		background: var(--ssi-nl-field-bg) !important;
	}

	.ssi-nl[data-ssi-newsletter] .ssi-nl__form:focus-within {
		border: 0 !important;
		box-shadow: var(--ssi-nl-ring) !important;
	}

	.ssi-nl[data-ssi-newsletter] .ssi-nl__input--name,
	.ssi-nl[data-ssi-newsletter] .ssi-nl__divider {
		display: block;
	}

	/* The field is visible here, so its label must exist in the accessibility
	   tree. `.ssi-nl__sr-only` positions it off-screen, so it stays invisible. */
	.ssi-nl[data-ssi-newsletter] .ssi-nl__label-name {
		display: block;
	}

	.ssi-nl[data-ssi-newsletter] .ssi-nl__input {
		flex: 1 1 0;
		height: var(--ssi-nl-control-height) !important;
		padding: 0 20px !important;
		background: transparent !important;
		color: var(--ssi-nl-field-text) !important;
		font-size: 15px !important;
	}

	/* Reference proportions: name 232px, email 295px inside the pill. */
	.ssi-nl[data-ssi-newsletter] .ssi-nl__input--email {
		flex: 1.27 1 0;
	}

	.ssi-nl[data-ssi-newsletter] .ssi-nl__input::placeholder {
		color: var(--ssi-nl-placeholder) !important;
		opacity: 1 !important;
	}

	.ssi-nl[data-ssi-newsletter] .ssi-nl__input:-webkit-autofill,
	.ssi-nl[data-ssi-newsletter] .ssi-nl__input:-webkit-autofill:hover,
	.ssi-nl[data-ssi-newsletter] .ssi-nl__input:-webkit-autofill:focus {
		-webkit-text-fill-color: var(--ssi-nl-field-text);
		-webkit-box-shadow: 0 0 0 1000px var(--ssi-nl-field-bg) inset;
		caret-color: var(--ssi-nl-field-text);
	}

	.ssi-nl[data-ssi-newsletter] .ssi-nl__divider {
		flex: 0 0 1px;
		width: 1px !important;
		height: 25px !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		border-radius: 0 !important;
		background: var(--ssi-nl-divider) !important;
	}

	.ssi-nl[data-ssi-newsletter] .ssi-nl__submit {
		gap: 10px;
		height: var(--ssi-nl-control-height) !important;
		padding: 0 28px !important;
		font-size: 15px !important;
		font-weight: 700 !important;
		letter-spacing: normal !important;
		text-transform: none !important;
	}

	.ssi-nl[data-ssi-newsletter] .ssi-nl__status,
	.ssi-nl[data-ssi-newsletter] .ssi-nl__legal {
		margin: 10px 0 0 !important;
		text-align: right !important;
	}
}

/* --------------------------------------------------------------------------
 * Desktop — copy on the left, pill on the right
 * -------------------------------------------------------------------------- */

@media (min-width: 992px) {

	.ssi-nl[data-ssi-newsletter] .ssi-nl__inner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 32px;
	}

	.ssi-nl[data-ssi-newsletter] .ssi-nl__intro {
		flex: 0 1 auto;
	}

	.ssi-nl[data-ssi-newsletter] .ssi-nl__aside {
		flex: 1 1 auto;
		max-width: 672px;
	}
}

/* --------------------------------------------------------------------------
 * Preferences
 * -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	.ssi-nl[data-ssi-newsletter],
	.ssi-nl[data-ssi-newsletter] *,
	.ssi-nl[data-ssi-newsletter] *::before,
	.ssi-nl[data-ssi-newsletter] *::after {
		animation: none !important;
		transition: none !important;
	}

	.ssi-nl[data-ssi-newsletter].ssi-nl--animate {
		opacity: 1;
		transform: none;
	}
}

@media (forced-colors: active) {

	.ssi-nl[data-ssi-newsletter] .ssi-nl__form {
		border: 1px solid CanvasText !important;
	}

	.ssi-nl[data-ssi-newsletter] .ssi-nl__submit {
		border: 1px solid ButtonText !important;
	}

	.ssi-nl[data-ssi-newsletter] .ssi-nl__divider {
		background: CanvasText !important;
	}
}