/*
 * noxlime Forms: form card (website check).
 *
 * Colors come from the Elementor kit with fallbacks. Careful: the kit's "text"
 * color is dark (#1E1E1E); the light text color is the custom global
 * "White Element" (f898f31). Fonts are inherited from the site.
 * All classes are prefixed nxf-; no IDs, no !important.
 */

.nxf-form {
	--nxf-card: #1f2024;
	--nxf-fg: var(--e-global-color-f898f31, #fffefe);
	/* Secondary text: a cool light grey; translucent white turned muddy on the warm card tone. */
	--nxf-muted: #d9dce1;
	--nxf-text-sm: 0.875rem;
	--nxf-text-xs: 0.8125rem;
	--nxf-placeholder: #7d7c80;
	--nxf-accent: var(--e-global-color-accent, #84cc16);
	--nxf-accent-ink: var(--e-global-color-primary, #1e1f23);
	--nxf-field: rgba(255, 255, 255, 0.03);
	--nxf-field-hover: rgba(255, 255, 255, 0.06);
	--nxf-line: rgba(255, 255, 255, 0.1);
	--nxf-line-strong: rgba(255, 255, 255, 0.22);
	--nxf-warn: #e8b84a;
	--nxf-bad: #ef7a72;
	--nxf-na: #6f6e73;
	--nxf-radius-card: 30px;
	--nxf-radius-option: 15px;
	--nxf-radius-field: 10px;
	--nxf-speed: 0.2s;
	--nxf-spacing-text: 0.25px;
	--nxf-spacing-heading: 0.5px;
	--nxf-width: 640px;
	/* One vertical rhythm for all sections (head, options, footer, card bottom). */
	--nxf-space: 28px;
	--nxf-pad-x: 36px;

	/*
	 * Fixed width, independent of the content: Elementor puts widgets into flex containers
	 * that are only as wide as their content, so a relative width (100 %) would follow the
	 * length of each question. max-width keeps it inside narrow screens.
	 */
	width: var(--nxf-width);
	max-width: 100%;
	margin-inline: auto;
	color: var(--nxf-fg);
	font-family: var(--e-global-typography-text-font-family, inherit);
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: var(--nxf-spacing-text);
	text-align: left;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.nxf-form *,
.nxf-form *::before,
.nxf-form *::after {
	box-sizing: border-box;
}

/* ---- Card ------------------------------------------------------------------ */

.nxf-card {
	position: relative;
	overflow: hidden;
	width: 100%;
	margin: 0;
	padding: 40px var(--nxf-pad-x) var(--nxf-space);
	background: var(--nxf-card);
	border: 1px solid var(--nxf-line);
	border-radius: var(--nxf-radius-card);
}

.nxf-progress {
	position: absolute;
	inset: 0 0 auto;
	height: 5px;
}

.nxf-progress-bar {
	width: 0;
	height: 100%;
	background: var(--nxf-accent);
	transition: width 0.3s ease;
}

/* [hidden] must win over our display rules (e.g. fields that only show on demand). */
.nxf-form [hidden] {
	display: none;
}

.nxf-step {
	animation: nxf-in 0.3s ease both;
}

@keyframes nxf-in {
	from {
		opacity: 0.001;
		transform: translateY(6px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* Placeholder until the script has drawn the first step (usually only a few milliseconds): the outline of a
   question in the card's own colors, so the card has its final size and nothing jumps. */
.nxf-skeleton {
	display: grid;
	justify-items: center;
	gap: 14px;
}

.nxf-sk {
	display: block;
	border-radius: 99px;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0.04) 100%) 0 0 / 200% 100%;
	animation: nxf-shimmer 1.4s ease-in-out infinite;
}

.nxf-sk-chip { width: 120px; height: 24px; }
.nxf-sk-title { width: min(360px, 80%); height: 22px; margin-top: 4px; }
.nxf-sk-line { width: 100%; height: 1px; margin: 14px 0 6px; border-radius: 0; animation: none; background: var(--nxf-line); }
.nxf-sk-option { width: min(440px, 100%); height: 56px; border-radius: var(--nxf-radius-option); }
.nxf-sk-foot { margin: 14px 0 14px; }
.nxf-sk-btn { justify-self: end; width: 100px; height: 40px; }

@keyframes nxf-shimmer {
	from { background-position: 100% 0; }
	to { background-position: -100% 0; }
}

.nxf-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.nxf-status,
.nxf-notice {
	margin: 0;
	color: var(--nxf-muted);
	text-align: center;
}

.nxf-message {
	display: grid;
	justify-items: center;
	gap: 20px;
	text-align: center;
}

.nxf-message p {
	margin: 0;
}

/* ---- Step head ------------------------------------------------------------- */

.nxf-head {
	padding-bottom: var(--nxf-space);
	border-bottom: 1px solid var(--nxf-line);
	text-align: center;
}

.nxf-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 14px;
	padding: 6px 11px 6px 9px;
	border-radius: 99px;
	background: color-mix(in srgb, var(--nxf-accent) 12%, transparent);
	color: var(--nxf-accent);
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: var(--nxf-spacing-heading);
	white-space: nowrap;
}

.nxf-chip svg {
	flex: none;
	width: 13px;
	height: 13px;
	fill: currentColor;
}

.nxf-form .nxf-title {
	margin: 0;
	color: var(--nxf-fg);
	font-family: inherit;
	font-size: 1.2rem;
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: var(--nxf-spacing-heading);
	text-wrap: balance;
}

.nxf-title:focus {
	outline: none;
}

/* ---- Answer options (real radio buttons, styled as tiles) ------------------ */

.nxf-options {
	display: grid;
	gap: 12px;
	width: 100%;
	max-width: 440px;
	min-width: 0;
	margin: var(--nxf-space) auto 0;
	padding: 0;
	border: 0;
}

.nxf-option {
	position: relative;
	display: block;
	cursor: pointer;
}

.nxf-option-input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.nxf-option-label {
	display: block;
	padding: 17px 22px;
	border: 1px solid var(--nxf-line);
	border-radius: var(--nxf-radius-option);
	background: var(--nxf-field);
	/* Slightly softer than headings, so the question stays the strongest element. */
	color: color-mix(in srgb, var(--nxf-fg) 86%, transparent);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.35;
	text-align: center;
	transition:
		background var(--nxf-speed) ease,
		border-color var(--nxf-speed) ease,
		color var(--nxf-speed) ease;
}

.nxf-option:hover .nxf-option-label {
	border-color: var(--nxf-line-strong);
	background: var(--nxf-field-hover);
	color: var(--nxf-fg);
}

.nxf-option-sub {
	display: block;
	margin-top: 4px;
	color: var(--nxf-muted);
	font-size: 13px;
	transition: color var(--nxf-speed) ease;
}

.nxf-option-input:checked + .nxf-option-label {
	border-color: var(--nxf-accent);
	background: var(--nxf-accent);
	color: var(--nxf-accent-ink);
	font-weight: 500;
}

.nxf-option-input:checked + .nxf-option-label .nxf-option-sub {
	color: rgba(30, 31, 35, 0.75);
}

.nxf-option-input[aria-invalid="true"] + .nxf-option-label {
	border-color: color-mix(in srgb, var(--nxf-bad) 70%, transparent);
}

.nxf-option-input:focus-visible + .nxf-option-label {
	outline: 2px solid var(--nxf-accent);
	outline-offset: 3px;
}

/* ---- Footer and buttons ---------------------------------------------------- */

.nxf-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: var(--nxf-space);
	padding-top: var(--nxf-space);
	border-top: 1px solid var(--nxf-line);
}

.nxf-foot-end {
	justify-content: flex-end;
}

.nxf-spacer {
	flex: 1;
}

.nxf-form .nxf-btn,
.nxf-form .nxf-btn-text {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 20px;
	border: 0;
	border-radius: 100px;
	font-family: inherit;
	font-size: 0.9rem;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: var(--nxf-spacing-text);
	cursor: pointer;
	transition:
		filter var(--nxf-speed) ease,
		opacity var(--nxf-speed) ease,
		color var(--nxf-speed) ease;
}

.nxf-form .nxf-btn,
.nxf-form a.nxf-btn:hover,
.nxf-form a.nxf-btn:focus {
	background: var(--nxf-accent);
	color: var(--nxf-accent-ink);
	text-decoration: none;
}

/* The site's shine on primary buttons (also on keyboard focus); none with reduced motion. */
.nxf-form .nxf-btn {
	position: relative;
	overflow: hidden;
}

.nxf-form .nxf-btn::before {
	content: "";
	position: absolute;
	top: 0;
	left: -120%;
	width: 60%;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(
		90deg,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0.1) 20%,
		rgba(255, 255, 255, 0.2) 50%,
		rgba(255, 255, 255, 0.1) 80%,
		rgba(255, 255, 255, 0) 100%
	);
	pointer-events: none;
	transition: left 1.2s cubic-bezier(0.23, 1, 0.32, 1);
}

.nxf-form .nxf-btn:hover::before,
.nxf-form .nxf-btn:focus-visible::before {
	left: 120%;
}

.nxf-form .nxf-btn:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.nxf-form .nxf-btn:disabled::before {
	display: none;
}

.nxf-form .nxf-btn-text {
	/* Away from the strongly rounded bottom-left corner of the card. */
	margin-left: 12px;
	padding-inline: 4px;
	background: none;
	color: var(--nxf-fg);
}

.nxf-form .nxf-btn-text:hover {
	color: var(--nxf-accent);
}

/* The Hello theme adds a white 4px box-shadow to focused inputs and buttons; use our lime ring instead. */
.nxf-form :focus-visible {
	outline: 2px solid var(--nxf-accent);
	outline-offset: 3px;
	box-shadow: none;
}

/* "Bitte prüf die markierten Felder.": a small card in the field column. */
.nxf-error-summary {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	max-width: 440px;
	margin: var(--nxf-space) auto 0;
	padding: 11px 14px;
	box-sizing: border-box;
	border: 1px solid color-mix(in srgb, var(--nxf-bad) 35%, transparent);
	border-radius: var(--nxf-radius-field);
	background: color-mix(in srgb, var(--nxf-bad) 10%, transparent);
	color: color-mix(in srgb, var(--nxf-fg) 86%, transparent);
	font-size: var(--nxf-text-xs);
	font-weight: 400;
	line-height: 1.45;
	text-align: left;
	animation: nxf-in 0.2s ease both;
}

.nxf-error-summary-icon {
	flex: none;
	width: 18px;
	height: 18px;
	fill: none;
	stroke: var(--nxf-bad);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ---- Result ---------------------------------------------------------------- */

.nxf-intro {
	max-width: 46ch;
	margin: 20px auto 0;
	color: var(--nxf-muted);
	font-size: var(--nxf-text-sm);
	line-height: 1.6;
	text-align: center;
	text-wrap: balance;
}

.nxf-report {
	display: grid;
	gap: 10px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}

.nxf-row {
	--nxf-status: var(--nxf-na);

	display: grid;
	grid-template-columns: auto 1fr;
	gap: 4px 14px;
	margin: 0;
	padding: 16px 18px;
	border: 1px solid var(--nxf-line);
	border-radius: var(--nxf-radius-option);
	background: var(--nxf-field);
}

.nxf-s-ok {
	--nxf-status: var(--nxf-accent);
}

.nxf-s-warn {
	--nxf-status: var(--nxf-warn);
}

.nxf-s-bad {
	--nxf-status: var(--nxf-bad);
}

.nxf-dot {
	width: 10px;
	height: 10px;
	margin-top: 7px;
	border-radius: 50%;
	background: var(--nxf-status);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--nxf-status) 20%, transparent);
}

.nxf-row-main {
	min-width: 0;
}

.nxf-row-title {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	margin: 0;
	font-weight: 500;
	letter-spacing: var(--nxf-spacing-heading);
}

.nxf-pill {
	padding: 2px 10px;
	border-radius: 99px;
	background: color-mix(in srgb, var(--nxf-status) 14%, transparent);
	color: var(--nxf-status);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: var(--nxf-spacing-text);
}

.nxf-row-text {
	margin: 4px 0 0;
	color: var(--nxf-muted);
	font-size: var(--nxf-text-sm);
	line-height: 1.55;
}

.nxf-note {
	margin: 12px 0 0;
	padding: 14px 16px;
	border: 1px dashed var(--nxf-line-strong);
	border-radius: var(--nxf-radius-field);
	color: var(--nxf-muted);
	font-size: var(--nxf-text-sm);
}

.nxf-note strong {
	color: var(--nxf-fg);
	font-weight: 500;
}

/* ---- Offer ----------------------------------------------------------------- */

.nxf-offer {
	margin-top: var(--nxf-space);
	padding-top: var(--nxf-space);
	border-top: 1px solid var(--nxf-line);
	text-align: center;
}

.nxf-form .nxf-offer-title {
	margin: 0;
	color: var(--nxf-fg);
	font-family: inherit;
	font-size: 1.15rem;
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: var(--nxf-spacing-heading);
	text-wrap: balance;
}

.nxf-offer-title:focus {
	outline: none;
}

.nxf-offer-text {
	/* One line on desktop; phones get a narrower measure (see below). */
	max-width: none;
	margin: 8px auto 0;
	color: var(--nxf-muted);
	font-size: var(--nxf-text-sm);
	line-height: 1.6;
	text-wrap: balance;
}

/* What the personal check covers: one quiet row, each item with a small circled check. */
.nxf-perks {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 22px;
	margin: 16px 0 0;
	padding: 0;
	/* Explicit, so no leftover rule (e.g. a cached optimizer copy) can draw a box around it. */
	border: 0;
	background: none;
	box-shadow: none;
	list-style: none;
}

.nxf-perks li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--nxf-muted);
	font-size: var(--nxf-text-xs);
	line-height: 1.4;
}

/* Circled check: one SVG, ring and check share the same stroke (no icon font). */
.nxf-perk-icon {
	flex: none;
	width: 16px;
	height: 16px;
	fill: none;
	stroke: var(--nxf-accent);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.nxf-tips {
	display: grid;
	gap: 10px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
	text-align: left;
}

.nxf-tips li {
	margin: 0;
	padding: 14px 16px;
	border: 1px solid var(--nxf-line);
	border-radius: var(--nxf-radius-option);
	background: var(--nxf-field);
}

.nxf-tips strong {
	display: block;
	margin-bottom: 2px;
	font-weight: 500;
	letter-spacing: var(--nxf-spacing-heading);
}

.nxf-tips span {
	color: var(--nxf-muted);
	font-size: var(--nxf-text-sm);
}

/* Contact call to action (outcomes B and C): short lead-in and a real button. */
.nxf-contact {
	display: grid;
	justify-items: center;
	gap: 12px;
	margin-top: 22px;
}

.nxf-contact-text {
	margin: 0;
	color: var(--nxf-muted);
	font-size: var(--nxf-text-sm);
}

/* Links inside text (consent, help panels): white with a fine muted underline, lime on hover,
   the same as links in the legal texts of the website. */
.nxf-form .nxf-consent a,
.nxf-form .nxf-help-panel a {
	color: var(--nxf-fg);
	text-decoration: underline;
	text-decoration-color: rgba(255, 255, 255, 0.3);
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
	transition:
		color var(--nxf-speed) ease,
		text-decoration-color var(--nxf-speed) ease;
}

@media (hover: hover) {
	.nxf-form .nxf-consent a:hover,
	.nxf-form .nxf-help-panel a:hover {
		color: var(--nxf-accent);
		text-decoration-color: color-mix(in srgb, var(--nxf-accent) 60%, transparent);
	}
}

/* ---- Lead form: outlined fields with floating labels ------------------------ */

.nxf-lead {
	display: grid;
	gap: 22px;
	margin-top: 28px;
	text-align: left;
}

/* Fields in the same centered 440px column as the contact forms; the footer keeps the full width. */
/* Inside the lead form the grid gap already spaces the card. */
.nxf-lead > .nxf-error-summary {
	margin-top: 0;
}

.nxf-lead > .nxf-field {
	width: 100%;
	max-width: 440px;
	margin-inline: auto;
}

.nxf-field {
	position: relative;
	display: grid;
	gap: 6px;
	min-width: 0;
}

/*
 * Contact forms: several fields per step, same rhythm as the lead form, in the same
 * centered column as the answer tiles of the check (the card keeps its fixed width).
 */
.nxf-fields {
	display: grid;
	gap: 22px;
	width: 100%;
	max-width: 440px;
	margin: var(--nxf-space) auto 0;
	text-align: left;
}

.nxf-fields .nxf-options {
	margin: 0;
}

/* A yes/no switch among other fields: side by side. */
.nxf-options.nxf-options-row {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Action inside a field, e.g. "Link erstellen" to noxlime secrets. */
.nxf-form .nxf-field.nxf-field-has-action input[type="text"] {
	padding-right: 132px;
}

.nxf-form .nxf-field-action {
	position: absolute;
	top: 23px;
	right: 10px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 5px 8px;
	border-radius: 8px;
	color: var(--nxf-accent);
	font-size: var(--nxf-text-xs);
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	transform: translateY(-50%);
	transition: background var(--nxf-speed) ease;
}

.nxf-form .nxf-field-action:hover,
.nxf-form .nxf-field-action:focus-visible {
	background: color-mix(in srgb, var(--nxf-accent) 12%, transparent);
	color: var(--nxf-accent);
}

.nxf-form .nxf-field-action:focus-visible {
	outline: 2px solid var(--nxf-accent);
	outline-offset: 1px;
}

.nxf-field-action-icon {
	width: 13px;
	height: 13px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* How secret links work: a small card under the first such field of the form. */
.nxf-explain {
	margin-top: 4px;
	padding: 14px 16px;
	border-radius: var(--nxf-radius-field);
	background: var(--nxf-field);
	color: color-mix(in srgb, var(--nxf-fg) 86%, transparent);
	font-size: var(--nxf-text-xs);
	line-height: 1.6;
}

.nxf-explain p {
	margin: 0;
}

.nxf-explain .nxf-explain-title {
	color: var(--nxf-fg);
	font-weight: 500;
}

.nxf-explain .nxf-help-steps {
	margin-top: 6px;
}

.nxf-explain .nxf-explain-note {
	margin-top: 8px;
	color: var(--nxf-muted);
}

/* Short help below a field, e.g. how to send files. */
.nxf-field-hint {
	margin: 2px 0 0;
	padding-left: 2px;
	color: var(--nxf-muted);
	font-size: 12px;
	line-height: 1.5;
}

/* Note of the chosen answer tile, e.g. where to send an invitation: centered below the tiles. */
.nxf-option-note {
	margin-top: 10px;
	padding-left: 0;
	text-align: center;
}

/* A "stop" answer (e.g. "not a customer"): where to go instead, in place of Weiter. */
.nxf-stop {
	margin-top: 10px;
	padding: 20px 22px;
	border: 1px solid var(--nxf-line);
	border-radius: var(--nxf-radius-option);
	background: var(--nxf-field);
	text-align: center;
}

.nxf-stop .nxf-contact {
	margin-top: 0;
}

.nxf-stop .nxf-contact-text {
	color: var(--nxf-fg);
	line-height: 1.55;
	text-wrap: balance;
}

/* ---- Dropdown (select-only combobox in the style of the text fields) ------------ */

.nxf-select-combo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	height: 46px;
	padding: 0 14px;
	box-sizing: border-box;
	border: 1px solid var(--nxf-line);
	border-radius: var(--nxf-radius-field);
	background: var(--nxf-field);
	color: var(--nxf-fg);
	font-size: 14px;
	letter-spacing: var(--nxf-spacing-text);
	cursor: pointer;
	transition:
		border-color var(--nxf-speed) ease,
		box-shadow var(--nxf-speed) ease;
}

.nxf-select-combo:hover {
	border-color: var(--nxf-line-strong);
}

.nxf-select-combo:focus,
.nxf-select.is-open .nxf-select-combo {
	border-color: var(--nxf-accent);
	outline: none;
	box-shadow: 0 0 0 1px var(--nxf-accent);
}

.nxf-select-combo[aria-invalid="true"]:not(:focus) {
	border-color: var(--nxf-bad);
}

.nxf-select-value {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Chevron: points down, turns up while the list is open. */
.nxf-select-chevron {
	flex: none;
	width: 18px;
	height: 18px;
	fill: none;
	stroke: var(--nxf-muted);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition:
		transform var(--nxf-speed) ease,
		stroke var(--nxf-speed) ease;
}

/* Border, label and chevron always share one state color: lime with focus, red when invalid. */
.nxf-select.is-open .nxf-select-chevron,
.nxf-select-combo:focus .nxf-select-chevron {
	stroke: var(--nxf-accent);
}

.nxf-select-combo[aria-invalid="true"]:not(:focus) .nxf-select-chevron {
	stroke: var(--nxf-bad);
}

.nxf-select.is-open .nxf-select-chevron {
	transform: rotate(180deg);
}

/* The label sits in the empty field like the text fields and floats once filled or open. */
.nxf-select .nxf-float-label {
	cursor: pointer;
	pointer-events: auto;
}

.nxf-select.is-filled .nxf-float-label,
.nxf-select.is-open .nxf-float-label,
.nxf-select-combo:focus ~ .nxf-float-label {
	top: 0;
	transform: translateY(-50%) scale(0.8);
	background: linear-gradient(to bottom, var(--nxf-card) 70%, transparent 70%);
}

/* Like the text fields: a lime border always comes with a lime label. */
.nxf-select.is-open .nxf-float-label,
.nxf-select-combo:focus ~ .nxf-float-label {
	color: var(--nxf-accent);
}

.nxf-select [aria-invalid="true"]:not(:focus) ~ .nxf-float-label {
	color: var(--nxf-bad);
}

.nxf-select-list {
	position: absolute;
	z-index: 10;
	top: 52px;
	right: 0;
	left: 0;
	max-height: 260px;
	margin: 0;
	padding: 6px;
	overflow-y: auto;
	border: 1px solid var(--nxf-line-strong);
	border-radius: var(--nxf-radius-option);
	background: #2a2b2f;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
	list-style: none;
}

.nxf-select-option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 0;
	padding: 10px 12px;
	border-radius: 10px;
	color: color-mix(in srgb, var(--nxf-fg) 86%, transparent);
	font-size: 14px;
	cursor: pointer;
}

.nxf-select-option:hover,
.nxf-select-option.is-active {
	background: rgba(255, 255, 255, 0.06);
	color: var(--nxf-fg);
}

.nxf-select-option[aria-selected="true"] {
	color: var(--nxf-fg);
	font-weight: 500;
}

.nxf-select-check {
	flex: none;
	width: 16px;
	height: 16px;
	fill: none;
	stroke: var(--nxf-accent);
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
	visibility: hidden;
}

.nxf-select-option[aria-selected="true"] .nxf-select-check {
	visibility: visible;
}

/* ---- Help disclosures -------------------------------------------------------------- */

.nxf-head .nxf-help {
	margin-top: 12px;
}

/* Same column as the fields below. */
.nxf-head .nxf-help-panel {
	max-width: 440px;
	margin-inline: auto;
}

.nxf-form .nxf-help-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 2px 0;
	border: 0;
	background: none;
	color: var(--nxf-muted);
	font-family: inherit;
	font-size: var(--nxf-text-xs);
	font-weight: 400;
	line-height: 1.4;
	cursor: pointer;
	box-shadow: none;
	transition: color var(--nxf-speed) ease;
}

.nxf-form .nxf-help-toggle:hover,
.nxf-form .nxf-help-toggle[aria-expanded="true"] {
	background: none;
	color: var(--nxf-fg);
}

.nxf-form .nxf-help-toggle:focus-visible {
	outline: 2px solid var(--nxf-accent);
	outline-offset: 3px;
}

.nxf-help-icon {
	flex: none;
	width: 15px;
	height: 15px;
	fill: none;
	/* Quiet like its text: lime stays reserved for choices, progress and actions. */
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.nxf-help-panel {
	margin-top: 10px;
	padding: 14px 16px;
	border-radius: var(--nxf-radius-field);
	background: var(--nxf-field);
	color: color-mix(in srgb, var(--nxf-fg) 86%, transparent);
	font-size: var(--nxf-text-xs);
	line-height: 1.6;
	text-align: left;
}

.nxf-help-panel p {
	margin: 0;
}

.nxf-help-steps {
	margin: 8px 0 0;
	padding-left: 20px;
}

.nxf-help-steps li {
	margin: 2px 0 0;
}

.nxf-help-panel .nxf-help-contact {
	margin-top: 8px;
	color: var(--nxf-muted);
}

.nxf-help-contact::before {
	content: "";
	display: block;
	margin-bottom: 8px;
	border-top: 1px solid var(--nxf-line);
}

.nxf-form .nxf-field input[type="text"],
.nxf-form .nxf-field input[type="email"],
.nxf-form .nxf-field textarea {
	width: 100%;
	height: 46px;
	margin: 0;
	padding: 12px 14px;
	border: 1px solid var(--nxf-line);
	border-radius: var(--nxf-radius-field);
	background: var(--nxf-field);
	color: var(--nxf-fg);
	font-family: inherit;
	font-size: 14px; /* The site's viewport meta (maximum-scale=1) prevents iOS from zooming into inputs. */
	letter-spacing: var(--nxf-spacing-text);
	box-shadow: none;
	transition:
		border-color var(--nxf-speed) ease,
		box-shadow var(--nxf-speed) ease;
}

.nxf-form .nxf-field textarea {
	height: auto;
	min-height: 120px;
}

/* The label sits inside the empty field and moves onto the border on focus or when filled. */
.nxf-float-label {
	position: absolute;
	top: 23px;
	left: 10px;
	padding: 0 4px;
	color: var(--nxf-muted);
	font-size: 14px;
	font-weight: 400;
	line-height: 1;
	pointer-events: none;
	transform: translateY(-50%);
	transform-origin: left center;
	transition:
		top var(--nxf-speed) ease,
		transform var(--nxf-speed) ease,
		color var(--nxf-speed) ease;
}

.nxf-field input:focus + .nxf-float-label,
.nxf-field input:not(:placeholder-shown) + .nxf-float-label,
.nxf-field textarea:focus + .nxf-float-label,
.nxf-field textarea:not(:placeholder-shown) + .nxf-float-label {
	top: 0;
	transform: translateY(-50%) scale(0.8);
	/* On the border: the band covers the (2px focus) line in card color, the rest shows the field. */
	background: linear-gradient(to bottom, var(--nxf-card) 70%, transparent 70%);
}

.nxf-field input:focus + .nxf-float-label,
.nxf-field textarea:focus + .nxf-float-label {
	color: var(--nxf-accent);
}

/* Example values only show once the field is focused (the label is shown instead). */
.nxf-form .nxf-field input:not(:focus)::placeholder,
.nxf-form .nxf-field textarea:not(:focus)::placeholder {
	color: transparent;
}

.nxf-form .nxf-field input::placeholder,
.nxf-form .nxf-field textarea::placeholder {
	color: var(--nxf-placeholder);
}

.nxf-form .nxf-field input:hover,
.nxf-form .nxf-field textarea:hover {
	border-color: var(--nxf-line-strong);
}

.nxf-form .nxf-field input:focus,
.nxf-form .nxf-field textarea:focus {
	border-color: var(--nxf-accent);
	outline: none;
	box-shadow: 0 0 0 1px var(--nxf-accent);
}

/* Browser autofill would paint the field light; keep it dark. */
.nxf-form .nxf-field input:-webkit-autofill {
	-webkit-text-fill-color: var(--nxf-fg);
	box-shadow: 0 0 0 100px var(--nxf-card) inset;
	caret-color: var(--nxf-fg);
}

/* As specific as the input[type] rules above; while typing, the lime focus state wins. */
.nxf-form .nxf-field input[aria-invalid="true"]:not(:focus),
.nxf-form .nxf-field textarea[aria-invalid="true"]:not(:focus) {
	border-color: var(--nxf-bad);
}

.nxf-field [aria-invalid="true"]:not(:focus) + .nxf-float-label {
	color: var(--nxf-bad);
}

.nxf-consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: 4px;
	color: var(--nxf-muted);
	font-size: var(--nxf-text-xs);
	line-height: 1.55;
	cursor: pointer;
}

/* Own checkbox: the native one renders as a large white box on iOS. */
.nxf-form .nxf-consent input[type="checkbox"] {
	display: inline-grid;
	flex-shrink: 0;
	place-content: center;
	width: 16px;
	height: 16px;
	margin: 2px 0 0;
	padding: 0;
	border: 1.5px solid var(--nxf-line-strong);
	border-radius: 4px;
	background: var(--nxf-field);
	cursor: pointer;
	appearance: none;
	transition:
		background var(--nxf-speed) ease,
		border-color var(--nxf-speed) ease;
}

.nxf-form .nxf-consent input[type="checkbox"]::after {
	content: "";
	width: 8px;
	height: 4px;
	border-bottom: 2px solid var(--nxf-accent-ink);
	border-left: 2px solid var(--nxf-accent-ink);
	opacity: 0;
	transform: translateY(-1px) rotate(-45deg);
}

.nxf-form .nxf-consent input[type="checkbox"]:hover {
	border-color: var(--nxf-accent);
}

.nxf-form .nxf-consent input[type="checkbox"]:checked {
	border-color: var(--nxf-accent);
	background: var(--nxf-accent);
}

.nxf-form .nxf-consent input[type="checkbox"]:checked::after {
	opacity: 1;
}

.nxf-form .nxf-consent input[aria-invalid="true"] {
	border-color: var(--nxf-bad);
}

.nxf-error {
	margin: 2px 0 0;
	padding-left: 2px;
	color: var(--nxf-bad);
	font-size: 12px;
	line-height: 1.4;
}

/* Empty required field: only the red border and label; the message is for screen readers. */
.nxf-error-quiet {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.nxf-lead .nxf-foot {
	margin-top: 12px;
}

.nxf-foot-note {
	margin: 0;
	color: var(--nxf-muted);
	font-size: 0.8rem;
}

.nxf-foot-note::before {
	content: "✓ ";
	color: var(--nxf-accent);
}

/* Honeypot: off-screen (not display:none, which some bots skip). */
.nxf-hp {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---- Success ----------------------------------------------------------------- */

.nxf-success {
	text-align: center;
}

/* Fallback success message (when no redirect is set): the perk check, large. */
.nxf-check {
	display: grid;
	place-items: center;
	margin: 0 auto 14px;
}

.nxf-check .nxf-perk-icon {
	width: 44px;
	height: 44px;
	stroke-width: 1.5;
}

/* ---- Small screens ------------------------------------------------------------ */

@media (max-width: 480px) {
	.nxf-form {
		--nxf-space: 24px;
		--nxf-pad-x: 20px;
		/* Secondary texts one step smaller, so headings keep leading on small screens. */
		--nxf-text-sm: 0.8125rem;
		--nxf-text-xs: 0.75rem;
	}

	.nxf-form .nxf-offer-title {
		font-size: 1.05rem;
	}

	.nxf-offer-text {
		max-width: 44ch;
	}

	.nxf-card {
		padding-top: 36px;
	}

	.nxf-form .nxf-title {
		font-size: 1.1rem;
	}

	.nxf-option-label {
		padding: 15px 18px;
		font-size: 14px;
	}

	/*
	 * Elementor containers add side padding on phones; keep "area + status pill" on one line.
	 * The dot only repeats the pill's color, so it gives way to the text here.
	 */
	.nxf-row {
		grid-template-columns: minmax(0, 1fr);
		padding: 14px 16px;
	}

	.nxf-dot {
		display: none;
	}

	.nxf-row-title {
		gap: 4px 8px;
		font-size: 15px;
		letter-spacing: var(--nxf-spacing-text);
	}

	.nxf-pill {
		padding: 2px 8px;
		font-size: 11.5px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nxf-sk {
		animation: none;
	}

	.nxf-form *,
	.nxf-form *::before,
	.nxf-form *::after {
		animation: none;
		transition: none;
	}
}