/* ==========================================================================
   [wayvo-newsletter] — see shortcodes/wayvoNewsletter.php for the three
   designs, the patterns and where the MailerLite script comes from.

   Same unit as the other new sections: --wvnl-u is rendered px per laptop px
   (100cqw / 1440, stopping at 1.333). The band padding goes 40 -> 80 from
   1440 to 1920 (the monitor frame doubles it).

   Vendor fights: h2 / p rules at (0,2,1), over Elementor's and the kit's.
   ========================================================================== */

.wv-nl-wrap {
	container-type: inline-size;
	/* Capped at the content width, centred on the page; the background is
	   painted past it below. See --wv-content-max in tokens.css. */
	width: min(100vw, var(--wv-content-max, 1440px));
	margin-left: calc(50% - min(50vw, var(--wv-content-max, 1440px) / 2));
}

.wv-nl {
	--wvnl-u: clamp(0.5px, calc(100cqw / 1440), 1.3334px);
	--wvnl-row: max(32.71px, calc(46 * var(--wvnl-u)));
	--wvnl-row-gap: calc(10 * var(--wvnl-u));
	--wvnl-title: max(40px, calc(60 * var(--wvnl-u)));
	/* The input + button row is as long as the "Stay in the loop" heading
	   (Paul, 2026-10-18): 385 px at 60px in the laptop PNG = 6.42em of the
	   heading's size, rounded up. Phones: the full card width instead. */
	--wvnl-form-w: calc(6.45 * var(--wvnl-title));
	--wvnl-input-pad: max(14.22px, calc(20 * var(--wvnl-u)));
	/* Two px over the design's 15 / 12 (Paul, 2026-10-18). */
	--wvnl-input-size: max(14px, calc(17 * var(--wvnl-u)));
	--wvnl-arrow: max(11.38px, calc(16 * var(--wvnl-u)));

	box-sizing: border-box;
	padding: min(80px, max(calc(40 * var(--wvnl-u)), calc(100cqw / 12 - 80px)));
	background-color: var(--wvnl-bg, #f5f5f5);
	/* The band's colour still runs to the screen edges: paint only. */
	border-image: linear-gradient(var(--wvnl-bg, #f5f5f5), var(--wvnl-bg, #f5f5f5)) fill 0 / 0 / 0 100vmax;
	color: var(--wv-ink, #101011);
	font-family: var(--wv-btn-font, "Geist", sans-serif);
}

/* space_above="half": straight under [wayvo-gift-better], which has no
   bottom padding, so the two cards sit 20 apart as in the catalogue PNG.
   20u, the gift-better gap itself (2026-10-23) — it was half the band's
   padding, which is the same 20 at 1440 but drifts to 40 against a 26.7
   gap by 1920. The About page gets it without the attribute: its newsletter
   closes the page straight under [wayvo-about-ender] (Paul, 2026-10-23).
   So does any newsletter straight under [wayvo-welcome-ender], which has no
   bottom padding either — on Impact it sat 45 under the panels, the
   attribute missing from the page (Paul, 2026-10-24). */
.wv-nl.wv-nl--half-top,
body:has(.wv-gb--about) .wv-nl,
.elementor-element:has(.wv-we-wrap) + .elementor-element .wv-nl {
	padding-top: calc(20 * var(--wvnl-u));
}

.wv-nl__card {
	position: relative;
	box-sizing: border-box;
	padding: calc(120 * var(--wvnl-u)) calc(115 * var(--wvnl-u));
	border-radius: calc(8 * var(--wvnl-u));
	overflow: hidden;
	background-color: var(--wvnl-card, #89ccfe);
	isolation: isolate;
}

.wv-nl .wv-nl__pattern {
	position: absolute;
	inset: 0;
	z-index: -1;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	pointer-events: none;
}

.wv-nl__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: calc(80 * var(--wvnl-u));
}

.wv-nl__copy {
	display: flex;
	flex-direction: column;
	gap: calc(10 * var(--wvnl-u));
}

.wv-nl h2.wv-nl__title {
	margin: 0;
	padding: 0;
	color: inherit;
	font-family: inherit;
	font-size: var(--wvnl-title);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.03em;
	text-transform: none;
}

/* 510 wide at 24px = 21.25em: the design's two lines. */
.wv-nl p.wv-nl__text {
	max-width: 21.25em;
	margin: 0;
	padding: 0;
	color: inherit;
	font-family: inherit;
	font-size: max(16px, calc(24 * var(--wvnl-u)));
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: -0.02em;
}

/* Holds the row's height before MailerLite fills it, so nothing jumps. */
.wv-nl__form {
	box-sizing: border-box;
	width: min(100%, var(--wvnl-form-w));
	min-height: var(--wvnl-row);
}

/* ── MailerLite ──────────────────────────────────────────────────────────────
   Its <style> arrives after this sheet, scoped #mlb2-NNN.ml-form-embedContainer
   (one ID) and mostly !important. Every rule below is !important and starts

     .wv-nl:is(#wv-nl-a, .wv-nl) .wv-nl__form:is(#wv-nl-b, .wv-nl__form)

   — :is() takes the specificity of its strongest argument, so that prefix
   counts as two IDs (2,2,0) while matching on the classes. Those IDs exist
   nowhere; they are only there for the weight. Two IDs beat MailerLite's one
   whatever order the sheets load in.

   The buttons' display is left alone: MailerLite's script toggles Submit /
   loading by inline style. */

.wv-nl:is(#wv-nl-a, .wv-nl) .wv-nl__form:is(#wv-nl-b, .wv-nl__form) .ml-form-embedContainer,
.wv-nl:is(#wv-nl-a, .wv-nl) .wv-nl__form:is(#wv-nl-b, .wv-nl__form) .ml-form-align-left,
.wv-nl:is(#wv-nl-a, .wv-nl) .wv-nl__form:is(#wv-nl-b, .wv-nl__form) .ml-form-embedWrapper,
.wv-nl:is(#wv-nl-a, .wv-nl) .wv-nl__form:is(#wv-nl-b, .wv-nl__form) .ml-form-embedBody,
.wv-nl:is(#wv-nl-a, .wv-nl) .wv-nl__form:is(#wv-nl-b, .wv-nl__form) .ml-form-successBody,
.wv-nl:is(#wv-nl-a, .wv-nl) .wv-nl__form:is(#wv-nl-b, .wv-nl__form) .ml-block-form,
.wv-nl:is(#wv-nl-a, .wv-nl) .wv-nl__form:is(#wv-nl-b, .wv-nl__form) .ml-form-formContent,
.wv-nl:is(#wv-nl-a, .wv-nl) .wv-nl__form:is(#wv-nl-b, .wv-nl__form) .horizontal-fields,
.wv-nl:is(#wv-nl-a, .wv-nl) .wv-nl__form:is(#wv-nl-b, .wv-nl__form) .ml-field-group {
	box-sizing: border-box !important;
	width: 100% !important;
	max-width: none !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	float: none !important;
	text-align: left !important;
}

/* The wrappers MailerLite never hides are made plain full-width blocks, so
   the row's width is .wv-nl__form's — whatever display (inline-block, table)
   MailerLite gives them. Not the body / success body / form: its script
   shows and hides those. */
.wv-nl:is(#wv-nl-a, .wv-nl) .wv-nl__form:is(#wv-nl-b, .wv-nl__form) .ml-form-embedContainer,
.wv-nl:is(#wv-nl-a, .wv-nl) .wv-nl__form:is(#wv-nl-b, .wv-nl__form) .ml-form-align-left,
.wv-nl:is(#wv-nl-a, .wv-nl) .wv-nl__form:is(#wv-nl-b, .wv-nl__form) .ml-form-embedWrapper,
.wv-nl:is(#wv-nl-a, .wv-nl) .wv-nl__form:is(#wv-nl-b, .wv-nl__form) .ml-form-formContent,
.wv-nl:is(#wv-nl-a, .wv-nl) .wv-nl__form:is(#wv-nl-b, .wv-nl__form) .horizontal-fields,
.wv-nl:is(#wv-nl-a, .wv-nl) .wv-nl__form:is(#wv-nl-b, .wv-nl__form) .ml-field-group {
	display: block !important;
}

/* Empty in this form (no header text); keep it from adding space. */
.wv-nl:is(#wv-nl-a, .wv-nl) .wv-nl__form:is(#wv-nl-b, .wv-nl__form) .ml-form-embedContent:empty {
	display: none !important;
}

/* The row: input, gap, round button. */
.wv-nl:is(#wv-nl-a, .wv-nl) .wv-nl__form:is(#wv-nl-b, .wv-nl__form) .ml-form-horizontalRow {
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	gap: var(--wvnl-row-gap) !important;
	box-sizing: border-box !important;
	width: 100% !important;
	max-width: none !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* The input takes whatever the row has left after the button. */
.wv-nl:is(#wv-nl-a, .wv-nl) .wv-nl__form:is(#wv-nl-b, .wv-nl__form) .ml-input-horizontal {
	flex: 1 1 0 !important;
	width: auto !important;
	max-width: none !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
}

/* MailerLite swaps to a second, full-width button under 470px; this block
   keeps the round one at every width. */
.wv-nl:is(#wv-nl-a, .wv-nl) .wv-nl__form:is(#wv-nl-b, .wv-nl__form) .ml-button-horizontal {
	display: block !important;
	flex: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
}

.wv-nl:is(#wv-nl-a, .wv-nl) .wv-nl__form:is(#wv-nl-b, .wv-nl__form) .ml-mobileButton-horizontal {
	display: none !important;
}

/* The email field: white pill. */
.wv-nl:is(#wv-nl-a, .wv-nl) .wv-nl__form:is(#wv-nl-b, .wv-nl__form) input.form-control {
	box-sizing: border-box !important;
	width: 100% !important;
	height: var(--wvnl-row) !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 var(--wvnl-input-pad) !important;
	border: 0 !important;
	border-radius: 9999px !important;
	background-color: var(--wv-white, #ffffff) !important;
	box-shadow: none !important;
	color: var(--wv-ink, #101011) !important;
	font-family: var(--wv-btn-font, "Geist", sans-serif) !important;
	font-size: var(--wvnl-input-size) !important;
	font-weight: 500 !important;
	line-height: 1 !important;
	letter-spacing: -0.01em !important;
}

.wv-nl:is(#wv-nl-a, .wv-nl) .wv-nl__form:is(#wv-nl-b, .wv-nl__form) input.form-control::placeholder {
	color: var(--wv-ink, #101011) !important;
	opacity: 1 !important;
}

.wv-nl:is(#wv-nl-a, .wv-nl) .wv-nl__form:is(#wv-nl-b, .wv-nl__form) input.form-control:focus {
	outline: 2px solid var(--wv-ink, #101011) !important;
	outline-offset: 2px !important;
}

/* MailerLite marks a bad address with .ml-error on the field group. */
.wv-nl:is(#wv-nl-a, .wv-nl) .wv-nl__form:is(#wv-nl-b, .wv-nl__form) .ml-error input.form-control {
	box-shadow: inset 0 0 0 2px #d92d20 !important;
}

/* The round ink button. "Submit" stays as its accessible name, at size 0;
   the arrow is a background image. */
.wv-nl:is(#wv-nl-a, .wv-nl) .wv-nl__form:is(#wv-nl-b, .wv-nl__form) .ml-button-horizontal button {
	box-sizing: border-box !important;
	width: var(--wvnl-row) !important;
	min-width: 0 !important;
	height: var(--wvnl-row) !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 9999px !important;
	background-color: var(--wv-ink, #101011) !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	background-size: var(--wvnl-arrow) auto !important;
	box-shadow: none !important;
	color: transparent !important;
	font-size: 0 !important;
	line-height: 0 !important;
	cursor: pointer;
	transition: background-color 0.2s ease !important;
}

.wv-nl:is(#wv-nl-a, .wv-nl) .wv-nl__form:is(#wv-nl-b, .wv-nl__form) .ml-button-horizontal button.primary {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 20'%3E%3Cpath d='M12 1.2 20.8 10 12 18.8M20.8 10H1' fill='none' stroke='%23fff' stroke-width='2.4'/%3E%3C/svg%3E") !important;
}

.wv-nl:is(#wv-nl-a, .wv-nl) .wv-nl__form:is(#wv-nl-b, .wv-nl__form) .ml-button-horizontal button.primary:hover,
.wv-nl:is(#wv-nl-a, .wv-nl) .wv-nl__form:is(#wv-nl-b, .wv-nl__form) .ml-button-horizontal button.primary:focus {
	background-color: #3a3a3c !important;
}

.wv-nl:is(#wv-nl-a, .wv-nl) .wv-nl__form:is(#wv-nl-b, .wv-nl__form) .ml-button-horizontal button.primary:focus-visible {
	outline: 2px solid var(--wv-ink, #101011) !important;
	outline-offset: 2px !important;
}

/* The thank-you that replaces the row after a sign-up. */
.wv-nl:is(#wv-nl-a, .wv-nl) .wv-nl__form:is(#wv-nl-b, .wv-nl__form) .ml-form-successContent h4 {
	margin: 0 0 calc(6 * var(--wvnl-u)) !important;
	color: var(--wv-ink, #101011) !important;
	font-family: var(--wv-btn-font, "Geist", sans-serif) !important;
	font-size: max(18px, calc(24 * var(--wvnl-u))) !important;
	font-weight: 500 !important;
	line-height: 1.2 !important;
	letter-spacing: -0.02em !important;
	text-align: left !important;
}

.wv-nl:is(#wv-nl-a, .wv-nl) .wv-nl__form:is(#wv-nl-b, .wv-nl__form) .ml-form-successContent p {
	margin: 0 !important;
	color: var(--wv-ink, #101011) !important;
	font-family: var(--wv-btn-font, "Geist", sans-serif) !important;
	font-size: max(14px, calc(16 * var(--wvnl-u))) !important;
	font-weight: 400 !important;
	line-height: 1.4 !important;
	letter-spacing: -0.01em !important;
	text-align: left !important;
}

/* Everything else in the thank-you is ink too. MailerLite wraps the line in
   its own elements and colours them white (Paul, 2026-10-20: title black,
   text white); the p rule above doesn't reach a child that sets its own
   colour, so this does. */
.wv-nl:is(#wv-nl-a, .wv-nl) .wv-nl__form:is(#wv-nl-b, .wv-nl__form) .ml-form-successBody,
.wv-nl:is(#wv-nl-a, .wv-nl) .wv-nl__form:is(#wv-nl-b, .wv-nl__form) .ml-form-successBody * {
	color: var(--wv-ink, #101011) !important;
}

/* iOS zooms the page into any field under 16px when it's tapped. On touch
   screens the field text is at least 16px. */
@media (pointer: coarse) {
	.wv-nl {
		--wvnl-input-size: max(16px, calc(17 * var(--wvnl-u)));
	}
}

/* ── Phones ──────────────────────────────────────────────────────────────────
   From the mobile frame: the input fills the row. */
@media (max-width: 767px) {

	.wv-nl {
		--wvnl-row: 32.71px;
		--wvnl-row-gap: 7.11px;
		--wvnl-input-pad: 14.22px;
		--wvnl-input-size: 14px;
		--wvnl-arrow: 11.38px;
		padding: 28.44px;
	}

	.wv-nl.wv-nl--half-top,
	body:has(.wv-gb--about) .wv-nl,
	.elementor-element:has(.wv-we-wrap) + .elementor-element .wv-nl {
		padding-top: 14.22px;
	}

	.wv-nl__card {
		padding: 20px;
		border-radius: 5.69px;
	}

	/* stretch, so the form row can take the card's full width. */
	.wv-nl__content {
		align-items: stretch;
		gap: 56.89px;
	}

	.wv-nl__form {
		width: 100%;
	}

	.wv-nl__copy {
		gap: 7.11px;
	}

	.wv-nl h2.wv-nl__title {
		font-size: 40px;
		line-height: 1.1;
		letter-spacing: -0.02em;
	}

	.wv-nl p.wv-nl__text {
		max-width: none;
		font-size: 16px;
		letter-spacing: -0.01em;
	}

}

@media (max-width: 767px) and (pointer: coarse) {
	.wv-nl {
		--wvnl-input-size: 16px;
	}
}