/**
 * Social Media Package Builder — frontend styles (v1.5 redesign).
 *
 * Direction: a quiet, editorial proposal rather than a web form. The page
 * reads as a conversation set in generous whitespace; the one expressive
 * element is the live estimate, laid out like the itemised sheet an agency
 * would send — a large, light figure over a ledger of line items. Everything
 * else stays out of its way.
 *
 * Colour: the existing colour settings only. Ink (--npb-fg) carries text and
 * the primary actions; the single accent (--npb-accent, from the "accent &
 * focus ring" setting) marks selection, the slider and keyboard focus.
 *
 * Type: the host theme's font is inherited (this sits inside someone else's
 * site), so the character comes from scale, weight, spacing and tabular
 * figures rather than a bundled typeface. Sizes are built from --npb-unit —
 * never a bare `rem` — because many themes set `html{font-size:62.5%}`,
 * which would otherwise shrink the whole form to 10px text. For a display
 * face on the headings and the price, set --npb-font-display on .npb-root.
 *
 * Every public class is prefixed npb- as required.
 */

.npb-root {
	/* ---- Colour (the PHP inline stylesheet overrides these from the settings) ---- */
	--npb-bg: #ffffff;
	--npb-fg: #111111;
	--npb-muted: #6b6b6b;
	--npb-border: #e4e4e4;
	--npb-border-strong: #111111;
	--npb-focus-ring: #1a5fb4;
	--npb-accent: var(--npb-focus-ring);
	--npb-on-accent: #ffffff;
	/* Text colour used on top of --npb-fg (set from PHP by contrast). */
	--npb-on-fg: #ffffff;

	--npb-bronze: #b08a55;
	--npb-silver: #9aa5ad;
	--npb-gold: #bd9a34;
	--npb-platinum: #3d4a63;

	/* Derived surfaces: quiet tints of the ink over the background. */
	--npb-surface: color-mix(in srgb, var(--npb-fg) 3.5%, var(--npb-bg));
	--npb-line-strong: color-mix(in srgb, var(--npb-fg) 28%, var(--npb-bg));
	--npb-select-tint: color-mix(in srgb, var(--npb-accent) 7%, var(--npb-bg));

	/* ---- Shape ---- */
	--npb-radius-sm: 4px;
	--npb-radius-md: 8px;
	--npb-radius-lg: 14px;
	--npb-pill-radius: 999px;
	--npb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
	--npb-shadow-md: 0 1px 2px rgba(0, 0, 0, 0.04), 0 18px 40px -22px rgba(0, 0, 0, 0.22);
	/* The phone bar floats over the form, so its shadow is firmer than the desktop card's. */
	--npb-shadow-bar: 0 1px 3px rgba(0, 0, 0, 0.14), 0 10px 22px -8px rgba(0, 0, 0, 0.38);

	/* ---- Scale: every size and space derives from one unit ---- */
	--npb-unit: max(1rem, 16px);

	--npb-space-1: calc(var(--npb-unit) * 0.5);   /*  8 */
	--npb-space-2: var(--npb-unit);               /* 16 */
	--npb-space-3: calc(var(--npb-unit) * 1.5);   /* 24 */
	--npb-space-4: calc(var(--npb-unit) * 2.5);   /* 40 */
	--npb-space-5: calc(var(--npb-unit) * 4);     /* 64 */

	--npb-fs-xs: calc(var(--npb-unit) * 0.8125);  /* 13  legal text, captions */
	--npb-fs-sm: calc(var(--npb-unit) * 0.9375);  /* 15  help text, secondary */
	--npb-fs-base: var(--npb-unit);               /* 16  body, controls */
	--npb-fs-md: calc(var(--npb-unit) * 1.125);   /* 18  figures in controls */
	--npb-fs-lg: calc(var(--npb-unit) * 1.5);     /* 24  step titles */
	--npb-fs-price: clamp(calc(var(--npb-unit) * 2.5), 4.2vw, calc(var(--npb-unit) * 3.5)); /* 40–56 */

	--npb-lh-body: 1.6;
	--npb-lh-tight: 1.25;
	--npb-font-display: inherit;

	--npb-control-h: calc(var(--npb-unit) * 3.25); /* 52  every input and button */

	font-family: inherit;
	font-size: var(--npb-unit);
	font-weight: 400;
	line-height: var(--npb-lh-body);
	letter-spacing: normal;
	text-transform: none;
	text-align: left;
	color: var(--npb-fg);
	background: var(--npb-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-variant-numeric: lining-nums;
}

.npb-root *,
.npb-root *::before,
.npb-root *::after {
	box-sizing: border-box;
}

.npb-root img {
	max-width: 100%;
}

/* The HTML `hidden` attribute must always win. Several of our classes set
   display:flex/grid, which would otherwise out-rank the browser's own
   [hidden] rule and leave empty boxes on screen. */
.npb-root [hidden] {
	display: none !important;
}

/* ------------------------------------------------------------------ */
/* Theme hardening                                                      */
/* Themes (Elementor Hello, Astra…) restyle bare elements: button hover */
/* colours, label/legend/fieldset boxes, paragraph margins, field       */
/* borders. Reset the lot once here at zero specificity (:where), then  */
/* each component below sets exactly what it needs for every state.     */
/* ------------------------------------------------------------------ */

.npb-root :where(p, ul, ol, li, fieldset, legend, label, figure, dl, dd) {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	letter-spacing: inherit;
	text-transform: none;
	list-style: none;
}

/* A <legend> is normally drawn ON the fieldset's top border and ignores its
   top padding, which would hide our hairlines and double the gap above the
   title. Floating it full-width makes it an ordinary block inside the box;
   whatever follows clears it. */
.npb-root :where(legend) {
	display: block;
	float: left;
	width: 100%;
	max-width: none;
}

.npb-root :where(legend + *) {
	clear: both;
}

.npb-root :where(fieldset) {
	min-width: 0;
}

.npb-root :where(label) {
	display: inline;
	line-height: inherit;
	vertical-align: baseline;
	cursor: inherit;
}

.npb-root button {
	font-family: inherit;
	font-size: inherit;
	line-height: 1.2;
	text-transform: none;
	letter-spacing: normal;
	text-decoration: none;
	text-shadow: none;
	box-shadow: none;
	white-space: normal;
	margin: 0;
	-webkit-appearance: none;
	appearance: none;
}

.npb-root button:focus-visible,
.npb-root :focus-visible {
	outline: 2px solid var(--npb-accent);
	outline-offset: 3px;
}

/* ------------------------------------------------------------------ */
/* Layout                                                               */
/* ------------------------------------------------------------------ */

.npb-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(300px, calc(var(--npb-unit) * 24));
	gap: var(--npb-space-5);
	/* Deliberately NOT align-items: start — the summary column must
	   stretch to the full height of the (taller) builder column so its
	   sticky child has room to travel as the visitor scrolls, instead of
	   being boxed into just its own content height and scrolling away
	   immediately. This is what makes the panel actually follow. */
	align-items: stretch;
}

.npb-builder-col,
.npb-summary-col {
	min-width: 0;
}

.npb-builder-col {
	max-width: calc(var(--npb-unit) * 44);
}

/* Narrow screens: one column, with the estimate becoming a slim bar that
   stays at the top of the screen while the form scrolls underneath it.
   (A flex column is used rather than a grid so the sticky bar can travel
   the whole height of the form instead of being boxed into its own row.) */
@media (max-width: 860px) {
	.npb-layout {
		display: flex;
		flex-direction: column;
		gap: var(--npb-space-3);
	}
	.npb-summary-col {
		display: contents;
	}
	.npb-builder-col {
		max-width: none;
	}
}

.npb-noscript-notice {
	padding: var(--npb-space-2);
	border: 1px solid var(--npb-line-strong);
	border-radius: var(--npb-radius-md);
	margin-bottom: var(--npb-space-2);
}

/* Honeypot — visually and semantically hidden, never display:none
   (kept technically visible/present so more bot heuristics catch it). */
.npb-hp-wrap {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	left: -9999px;
}

.npb-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------------------ */
/* Steps                                                                */
/* One rhythm: 64px of air between questions, a hairline above each,   */
/* title → help 8px → control 24px.                                    */
/* ------------------------------------------------------------------ */

.npb-root .npb-step {
	border-top: 1px solid var(--npb-border);
	padding: var(--npb-space-5) 0 0;
	margin: var(--npb-space-5) 0 0;
}

.npb-root .npb-builder-col > .npb-step:first-of-type,
.npb-root .npb-builder-col > .npb-beta-notice + .npb-step {
	border-top: 0;
	padding-top: 0;
	margin-top: 0;
}

/* Steps inside the revealed stage keep the same rhythm. */
.npb-root .npb-stage-rest > .npb-step:first-child,
.npb-root .npb-stage-rest > .npb-stage-intro + .npb-step {
	margin-top: var(--npb-space-4);
}

.npb-root .npb-stage-rest > .npb-stage-intro + .npb-step {
	border-top: 0;
	padding-top: 0;
}

.npb-root .npb-step-title {
	display: flex;
	align-items: baseline;
	gap: 0.55em;
	width: 100%;
	margin: 0 0 var(--npb-space-3);
	font-family: var(--npb-font-display);
	font-size: var(--npb-fs-lg);
	font-weight: 500;
	line-height: var(--npb-lh-tight);
	letter-spacing: -0.012em;
	color: var(--npb-fg);
	text-wrap: balance;
}

.npb-root .npb-step-title:focus {
	outline: none;
}

/* A title with help text under it sits close to it; one that leads straight
   into the controls gets the full gap. */
.npb-root .npb-step-title:has(+ .npb-help-text) {
	margin-bottom: var(--npb-space-1);
}

.npb-root .npb-step-num {
	flex: none;
	min-width: 0.7em;
	font-weight: 400;
	font-variant-numeric: tabular-nums;
	color: var(--npb-accent);
}

.npb-root .npb-help-text {
	margin: 0 0 var(--npb-space-3);
	max-width: calc(var(--npb-unit) * 36);
	font-size: var(--npb-fs-sm);
	line-height: var(--npb-lh-body);
	color: var(--npb-muted);
	text-wrap: pretty;
}

.npb-root .npb-help-text label {
	cursor: default;
}

.npb-root .npb-help-secondary {
	margin-top: calc(var(--npb-space-1) * -1);
}

.npb-root .npb-question {
	margin: var(--npb-space-3) 0 var(--npb-space-1);
	font-size: var(--npb-fs-base);
	font-weight: 500;
	line-height: var(--npb-lh-tight);
}

.npb-root .npb-subquestion + .npb-subquestion {
	margin-top: var(--npb-space-4);
}

.npb-root .npb-subquestion > .npb-question:first-child {
	margin-top: 0;
}

.npb-root .npb-subquestion .npb-help-text {
	margin-bottom: var(--npb-space-2);
}

.npb-root .npb-subquestion-follow {
	margin-top: var(--npb-space-3);
}

.npb-root .npb-fit-intro {
	margin-bottom: var(--npb-space-4);
	max-width: calc(var(--npb-unit) * 38);
}

.npb-root .npb-stage-actions {
	margin-top: var(--npb-space-4);
}

/* The break between the two opening questions and the optional rest. */
.npb-root .npb-stage-intro {
	margin: var(--npb-space-5) 0 0;
	padding: var(--npb-space-3) 0 0;
	border-top: 1px solid var(--npb-line-strong);
}

.npb-root .npb-stage-intro:focus {
	outline: none;
}

.npb-root .npb-stage-intro-title {
	font-family: var(--npb-font-display);
	font-size: var(--npb-fs-lg);
	font-weight: 500;
	line-height: var(--npb-lh-tight);
	letter-spacing: -0.012em;
}

.npb-root .npb-stage-intro-text {
	margin-top: calc(var(--npb-unit) * 0.25);
	font-size: var(--npb-fs-sm);
	color: var(--npb-muted);
}

/* The only entrance animation: a stage easing in when the visitor asks for it. */
.npb-just-revealed {
	animation: npb-reveal 0.4s ease both;
}

@keyframes npb-reveal {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: none; }
}

.npb-root .npb-beta-notice {
	margin-bottom: var(--npb-space-4);
	padding: var(--npb-space-2) var(--npb-space-3);
	border-radius: var(--npb-radius-md);
	background: var(--npb-surface);
	font-size: var(--npb-fs-xs);
	line-height: 1.55;
	color: var(--npb-muted);
}

/* ------------------------------------------------------------------ */
/* Selection controls: tiles, option cards, pills, checkboxes           */
/* One language for "selected": a hairline in the accent colour, a     */
/* faint tint, and a filled mark.                                       */
/* ------------------------------------------------------------------ */

.npb-root .npb-choice input,
.npb-root .npb-option input,
.npb-root .npb-service-row input,
.npb-root .npb-checkbox input,
.npb-root .npb-pill input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	pointer-events: none;
}

.npb-root .npb-choice-mark {
	position: relative;
	flex: none;
	width: 20px;
	height: 20px;
	border: 1.5px solid var(--npb-line-strong);
	border-radius: max(4px, calc(var(--npb-radius-sm) * 0.75));
	background: var(--npb-bg);
	transition: background-color 0.12s ease, border-color 0.12s ease;
}

.npb-root input:checked + .npb-choice-mark {
	background: var(--npb-accent);
	border-color: var(--npb-accent);
}

.npb-root input:checked + .npb-choice-mark::after {
	content: "";
	position: absolute;
	left: 6px;
	top: 2px;
	width: 5px;
	height: 10px;
	border: solid var(--npb-on-accent);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* Platform tiles */
.npb-root .npb-choice-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

@media (max-width: 640px) {
	.npb-root .npb-choice-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.npb-root .npb-choice {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: var(--npb-control-h);
	padding: 0 16px;
	border: 1px solid var(--npb-border);
	border-radius: var(--npb-radius-md);
	background: var(--npb-bg);
	font-size: var(--npb-fs-base);
	line-height: 1.3;
	cursor: pointer;
	transition: border-color 0.12s ease, background-color 0.12s ease, box-shadow 0.12s ease;
}

.npb-root .npb-choice:hover {
	border-color: var(--npb-line-strong);
}

.npb-root .npb-choice:has(input:checked) {
	border-color: var(--npb-accent);
	background: var(--npb-select-tint);
	box-shadow: inset 0 0 0 1px var(--npb-accent);
}

.npb-root .npb-choice:has(input:focus-visible),
.npb-root .npb-option:has(input:focus-visible),
.npb-root .npb-service-row:has(input:focus-visible),
.npb-root .npb-checkbox:has(input:focus-visible),
.npb-root .npb-pill:has(input:focus-visible) {
	outline: 2px solid var(--npb-accent);
	outline-offset: 3px;
}

.npb-root .npb-choice-text {
	min-width: 0;
	overflow-wrap: anywhere;
}

/* Option cards (cross-posted / individual) */
.npb-root .npb-option-group {
	display: grid;
	gap: 12px;
	max-width: calc(var(--npb-unit) * 36);
}

.npb-root .npb-option {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 16px 18px;
	border: 1px solid var(--npb-border);
	border-radius: var(--npb-radius-md);
	background: var(--npb-bg);
	cursor: pointer;
	transition: border-color 0.12s ease, background-color 0.12s ease, box-shadow 0.12s ease;
}

.npb-root .npb-option:hover {
	border-color: var(--npb-line-strong);
}

.npb-root .npb-option:has(input:checked) {
	border-color: var(--npb-accent);
	background: var(--npb-select-tint);
	box-shadow: inset 0 0 0 1px var(--npb-accent);
}

.npb-root .npb-option-mark {
	position: relative;
	flex: none;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	border: 1.5px solid var(--npb-line-strong);
	border-radius: 50%;
	background: var(--npb-bg);
	transition: border-color 0.12s ease;
}

.npb-root .npb-option input:checked + .npb-option-mark {
	border-color: var(--npb-accent);
}

.npb-root .npb-option input:checked + .npb-option-mark::after {
	content: "";
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	background: var(--npb-accent);
}

.npb-root .npb-option-text {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.npb-root .npb-option-title {
	font-weight: 500;
	line-height: 1.35;
}

.npb-root .npb-option-desc {
	font-size: var(--npb-fs-sm);
	color: var(--npb-muted);
	line-height: 1.5;
}

/* Pills (business-fit radio groups) */
.npb-root .npb-pill-group {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.npb-root .npb-pill {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 46px;
	padding: calc(var(--npb-unit) * 0.55) calc(var(--npb-unit) * 1.1);
	border: 1px solid var(--npb-border);
	border-radius: var(--npb-pill-radius);
	background: var(--npb-bg);
	font-size: var(--npb-fs-sm);
	line-height: 1.35;
	cursor: pointer;
	transition: border-color 0.12s ease, background-color 0.12s ease, box-shadow 0.12s ease;
}

.npb-root .npb-pill:hover {
	border-color: var(--npb-line-strong);
}

.npb-root .npb-pill:has(input:checked) {
	border-color: var(--npb-accent);
	background: var(--npb-select-tint);
	box-shadow: inset 0 0 0 1px var(--npb-accent);
}

/* Without a pill radius (square corner setting) pills become tidy chips. */
.npb-root .npb-pill > span {
	display: block;
}

/* Additional services */
.npb-root .npb-service-list {
	display: grid;
	max-width: calc(var(--npb-unit) * 36);
}

.npb-root .npb-service-row {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: calc(var(--npb-control-h) + 4px);
	padding: 0 2px;
	border-bottom: 1px solid var(--npb-border);
	cursor: pointer;
}

.npb-root .npb-service-row:first-child {
	border-top: 1px solid var(--npb-border);
}

.npb-root .npb-service-label {
	flex: 1;
	min-width: 0;
}

.npb-root .npb-service-status {
	margin-left: auto;
	padding-left: var(--npb-space-2);
	font-size: var(--npb-fs-xs);
	font-weight: 500;
	text-align: right;
	font-variant-numeric: tabular-nums;
	color: var(--npb-muted);
}

.npb-root .npb-service-status[data-status="included"] {
	color: #1a7a3a;
}
.npb-root .npb-service-status[data-status="ad_hoc"] {
	color: #8a5200;
}
.npb-root .npb-service-status[data-status="priced"] {
	color: var(--npb-fg);
}

/* Consent checkboxes */
.npb-root .npb-checkbox {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 14px;
	min-height: 44px;
	margin-top: var(--npb-space-2);
	font-size: var(--npb-fs-sm);
	line-height: 1.5;
	cursor: pointer;
}

/* The words next to a tick box can contain a link to a policy; keep it readable and clearly a link. */
.npb-root .npb-checkbox .npb-choice-text a {
	color: var(--npb-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.npb-root .npb-checkbox .npb-optional {
	color: var(--npb-muted);
	white-space: nowrap;
}

.npb-root .npb-acks {
	margin-top: var(--npb-space-2);
}

.npb-root .npb-checkbox .npb-choice-mark {
	margin-top: 1px;
}

/* ------------------------------------------------------------------ */
/* Number controls: steppers, presets, slider, money field              */
/* ------------------------------------------------------------------ */

.npb-root .npb-stepper {
	display: inline-flex;
	align-items: stretch;
	height: var(--npb-control-h);
	border: 1px solid var(--npb-line-strong);
	border-radius: var(--npb-radius-md);
	background: var(--npb-bg);
	overflow: hidden;
}

.npb-root .npb-form .npb-stepper input[type="number"] {
	width: calc(var(--npb-unit) * 4.5);
	height: 100%;
	margin: 0;
	padding: 0 4px;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--npb-fg);
	font-family: inherit;
	font-size: var(--npb-fs-md);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	text-align: center;
	box-shadow: none;
	-moz-appearance: textfield;
	appearance: textfield;
}

.npb-root .npb-form .npb-stepper input[type="number"]::-webkit-outer-spin-button,
.npb-root .npb-form .npb-stepper input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.npb-root .npb-form .npb-stepper input[type="number"]:focus-visible {
	outline: 2px solid var(--npb-accent);
	outline-offset: -2px;
}

.npb-root .npb-stepper-btn {
	width: var(--npb-control-h);
	min-width: 44px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--npb-fg);
	font-size: var(--npb-fs-md);
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.12s ease;
}

.npb-root .npb-stepper-btn:hover,
.npb-root .npb-stepper-btn:focus,
.npb-root .npb-stepper-btn:active {
	background: var(--npb-surface);
	color: var(--npb-fg);
}

.npb-root .npb-preset-group {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: var(--npb-space-2);
}

.npb-root .npb-preset-btn {
	min-width: 48px;
	min-height: 44px;
	padding: 0 16px;
	border: 1px solid var(--npb-border);
	border-radius: var(--npb-pill-radius);
	background: var(--npb-bg);
	color: var(--npb-fg);
	font-size: var(--npb-fs-sm);
	font-variant-numeric: tabular-nums;
	cursor: pointer;
	transition: border-color 0.12s ease, background-color 0.12s ease;
}

.npb-root .npb-preset-btn:hover,
.npb-root .npb-preset-btn:focus,
.npb-root .npb-preset-btn:active {
	border-color: var(--npb-line-strong);
	background: var(--npb-bg);
	color: var(--npb-fg);
}

.npb-root .npb-preset-btn[aria-pressed="true"],
.npb-root .npb-preset-btn[aria-pressed="true"]:hover,
.npb-root .npb-preset-btn[aria-pressed="true"]:focus {
	border-color: var(--npb-accent);
	background: var(--npb-select-tint);
	box-shadow: inset 0 0 0 1px var(--npb-accent);
	color: var(--npb-fg);
}

.npb-root .npb-control-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px var(--npb-space-3);
}

/* Text-style secondary action (recommend / split evenly) */
.npb-root .npb-recommend-btn {
	display: inline-block;
	margin-top: 0;
	min-height: 44px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--npb-fg);
	font-size: var(--npb-fs-sm);
	font-weight: 500;
	text-decoration: underline;
	text-decoration-color: var(--npb-accent);
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
	cursor: pointer;
}

.npb-root .npb-recommend-btn:hover,
.npb-root .npb-recommend-btn:focus,
.npb-root .npb-recommend-btn:active {
	background: transparent;
	color: var(--npb-accent);
}

/* Plain number / text controls outside the steppers */
.npb-root .npb-form input[type="text"],
.npb-root .npb-form input[type="email"],
.npb-root .npb-form input[type="tel"],
.npb-root .npb-form input[type="number"],
.npb-root .npb-form textarea {
	display: block;
	width: 100%;
	max-width: 100%;
	height: var(--npb-control-h);
	margin: 0;
	padding: 0 14px;
	border: 1px solid var(--npb-border);
	border-radius: var(--npb-radius-md);
	background: var(--npb-bg);
	color: var(--npb-fg);
	font-family: inherit;
	font-size: var(--npb-fs-base);
	line-height: 1.3;
	box-shadow: none;
	transition: border-color 0.12s ease;
}

.npb-root .npb-form textarea {
	height: auto;
	min-height: calc(var(--npb-control-h) * 2);
	padding: 12px 14px;
	line-height: var(--npb-lh-body);
	resize: vertical;
}

.npb-root .npb-form input[type="text"]:hover,
.npb-root .npb-form input[type="email"]:hover,
.npb-root .npb-form input[type="tel"]:hover,
.npb-root .npb-form input[type="number"]:hover,
.npb-root .npb-form textarea:hover {
	border-color: var(--npb-line-strong);
}

.npb-root .npb-form input[type="text"]:focus,
.npb-root .npb-form input[type="email"]:focus,
.npb-root .npb-form input[type="tel"]:focus,
.npb-root .npb-form input[type="number"]:focus,
.npb-root .npb-form textarea:focus {
	border-color: var(--npb-accent);
	outline: 2px solid var(--npb-accent);
	outline-offset: 0;
}

.npb-root .npb-form .npb-step > input[type="number"],
.npb-root .npb-form .npb-subquestion > input[type="number"],
.npb-root .npb-form .npb-subquestion-follow > input[type="number"] {
	width: calc(var(--npb-unit) * 10);
}

.npb-root .npb-form input[aria-invalid="true"] {
	border-color: #b3261e;
}

.npb-root .npb-money-field {
	position: relative;
	width: calc(var(--npb-unit) * 12);
	max-width: 100%;
}

.npb-root .npb-money-symbol {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--npb-muted);
	pointer-events: none;
}

.npb-root .npb-form .npb-money-field input[type="number"] {
	padding-left: calc(14px + 1.1em);
	padding-right: calc(14px + 3em);
	font-variant-numeric: tabular-nums;
}

.npb-root .npb-money-code {
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	font-size: var(--npb-fs-xs);
	letter-spacing: 0.02em;
	color: var(--npb-muted);
	pointer-events: none;
}

/* Our recommended ad spend, set apart from the box so typing never fights it */
.npb-root .npb-adspend-suggest {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 var(--npb-space-2);
	margin: var(--npb-space-1) 0 0;
	font-size: var(--npb-fs-sm);
	color: var(--npb-muted);
}

.npb-root .npb-adspend-suggest strong {
	color: var(--npb-fg);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.npb-root .npb-field-hint {
	margin: var(--npb-space-1) 0 0;
	font-size: var(--npb-fs-sm);
	color: var(--npb-fg);
}

.npb-root .npb-adspend-note {
	margin: var(--npb-space-2) 0 0;
	padding-left: var(--npb-space-2);
	border-left: 2px solid var(--npb-border);
	max-width: calc(var(--npb-unit) * 34);
}

/* Slider (campaigns) */
.npb-root .npb-slider-wrap {
	margin-top: var(--npb-space-3);
	max-width: calc(var(--npb-unit) * 24);
}

.npb-root .npb-slider {
	-webkit-appearance: none;
	appearance: none;
	display: block;
	width: 100%;
	height: 32px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.npb-root .npb-slider::-webkit-slider-runnable-track {
	height: 4px;
	border-radius: 999px;
	background: linear-gradient(to right, var(--npb-accent) var(--npb-pct, 0%), var(--npb-border) var(--npb-pct, 0%));
}

.npb-root .npb-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 22px;
	height: 22px;
	margin-top: -9px;
	border-radius: 50%;
	background: var(--npb-bg);
	border: 2px solid var(--npb-accent);
	box-shadow: var(--npb-shadow-sm);
}

.npb-root .npb-slider::-moz-range-track {
	height: 4px;
	border-radius: 999px;
	background: var(--npb-border);
}

.npb-root .npb-slider::-moz-range-progress {
	height: 4px;
	border-radius: 999px;
	background: var(--npb-accent);
}

.npb-root .npb-slider::-moz-range-thumb {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--npb-bg);
	border: 2px solid var(--npb-accent);
}

.npb-root .npb-slider-scale {
	display: flex;
	justify-content: space-between;
	margin-top: 2px;
	font-size: var(--npb-fs-xs);
	font-variant-numeric: tabular-nums;
	color: var(--npb-muted);
}

/* ---- Posts across platforms ---- */

.npb-root .npb-split-panel .npb-recommend-btn {
	margin-top: var(--npb-space-2);
}

.npb-root .npb-split-panel {
	margin-top: var(--npb-space-3);
	max-width: calc(var(--npb-unit) * 36);
	padding-top: var(--npb-space-3);
	border-top: 1px solid var(--npb-border);
}

.npb-root .npb-split-intro {
	margin-bottom: var(--npb-space-2);
	font-weight: 500;
}

.npb-root .npb-split-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(calc(var(--npb-unit) * 8), 1fr));
	gap: var(--npb-space-2) var(--npb-space-3);
}

.npb-root .npb-split-row label {
	display: block;
	margin-bottom: 6px;
	font-size: var(--npb-fs-sm);
	color: var(--npb-muted);
}

.npb-root .npb-split-row input {
	font-variant-numeric: tabular-nums;
}

.npb-root .npb-split-status {
	margin-top: var(--npb-space-2);
	min-height: 1.5em;
	font-size: var(--npb-fs-sm);
	color: var(--npb-muted);
}

.npb-root .npb-split-status[data-state="error"] {
	color: #b3261e;
	font-weight: 500;
}

.npb-root .npb-split-status[data-state="ok"] {
	color: #1a7a3a;
}

/* ------------------------------------------------------------------ */
/* Contact fields & messages                                            */
/* ------------------------------------------------------------------ */

.npb-root .npb-field-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 var(--npb-space-3);
}

@media (max-width: 640px) {
	.npb-root .npb-field-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.npb-root .npb-field-row {
	margin-bottom: var(--npb-space-3);
}

.npb-root .npb-field-row label {
	display: block;
	margin-bottom: 8px;
	font-size: var(--npb-fs-sm);
	font-weight: 500;
}

.npb-root .npb-field-error {
	margin-top: 8px;
	font-size: var(--npb-fs-sm);
	color: #b3261e;
}

.npb-root .npb-form-status {
	margin: var(--npb-space-3) 0 0;
	padding: var(--npb-space-2);
	border: 1px solid var(--npb-line-strong);
	border-radius: var(--npb-radius-md);
	font-size: var(--npb-fs-sm);
}

.npb-root .npb-form-status:focus {
	outline: 2px solid var(--npb-accent);
	outline-offset: 2px;
}

.npb-root .npb-form-status[data-state="error"] {
	border-color: #b3261e;
	color: #b3261e;
}
.npb-root .npb-form-status[data-state="success"] {
	border-color: #1a7a3a;
	color: #1a7a3a;
}

.npb-root .npb-custom-route-notice {
	margin-top: var(--npb-space-4);
	padding: var(--npb-space-2) var(--npb-space-3);
	border: 1px solid var(--npb-platinum);
	border-radius: var(--npb-radius-md);
	color: var(--npb-platinum);
	font-size: var(--npb-fs-sm);
}

.npb-root .npb-turnstile-slot {
	margin: var(--npb-space-3) 0 0;
}

/* ------------------------------------------------------------------ */
/* Buttons                                                              */
/* Primary: ink, solid, the same in every state. Secondary: outlined.   */
/* ------------------------------------------------------------------ */

.npb-root .npb-submit-btn,
.npb-root .npb-cta-btn,
.npb-root .npb-next-btn,
.npb-root .npb-download-btn {
	display: block;
	width: 100%;
	min-height: var(--npb-control-h);
	padding: 0 28px;
	border-radius: var(--npb-radius-md);
	font-size: var(--npb-fs-base);
	font-weight: 500;
	letter-spacing: 0.01em;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	transition: background-color 0.12s ease, border-color 0.12s ease, opacity 0.12s ease;
}

.npb-root .npb-submit-btn,
.npb-root .npb-cta-btn,
.npb-root .npb-next-btn {
	background: var(--npb-fg);
	color: var(--npb-on-fg);
	border: 1px solid var(--npb-fg);
}

.npb-root .npb-next-btn {
	display: inline-block;
	width: auto;
	min-width: calc(var(--npb-unit) * 12);
}

.npb-root .npb-submit-btn {
	margin-top: var(--npb-space-4);
}

.npb-root .npb-submit-btn:hover,
.npb-root .npb-submit-btn:focus,
.npb-root .npb-submit-btn:active,
.npb-root .npb-cta-btn:hover,
.npb-root .npb-cta-btn:focus,
.npb-root .npb-cta-btn:active,
.npb-root .npb-next-btn:hover,
.npb-root .npb-next-btn:focus,
.npb-root .npb-next-btn:active {
	background: color-mix(in srgb, var(--npb-fg) 84%, var(--npb-bg));
	border-color: color-mix(in srgb, var(--npb-fg) 84%, var(--npb-bg));
	color: var(--npb-on-fg);
}

.npb-root .npb-download-btn {
	background: var(--npb-bg);
	color: var(--npb-fg);
	border: 1px solid var(--npb-line-strong);
}

.npb-root .npb-download-btn:hover,
.npb-root .npb-download-btn:focus,
.npb-root .npb-download-btn:active {
	background: var(--npb-surface);
	border-color: var(--npb-fg);
	color: var(--npb-fg);
}

.npb-root .npb-submit-btn:disabled,
.npb-root .npb-cta-btn:disabled,
.npb-root .npb-next-btn:disabled,
.npb-root .npb-download-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* ------------------------------------------------------------------ */
/* The estimate: an itemised sheet                                      */
/* ------------------------------------------------------------------ */

.npb-root .npb-summary-sticky {
	position: sticky;
	/* Override --npb-sticky-top in your theme's custom CSS if you have a
	   sticky header/admin bar, so the panel clears it instead of tucking
	   underneath. Example: .npb-root { --npb-sticky-top: 100px; }
	   Default is deliberately a bit more than one space unit — right at
	   the viewport edge the card's top border can visually "clip" against
	   the browser chrome as you scroll, so it sits a little lower. */
	top: var(--npb-sticky-top, calc(var(--npb-unit) * 2));
	--npb-card-bg: var(--npb-bg);
	padding: var(--npb-space-4) var(--npb-space-3) 0;
	border: 1px solid var(--npb-border);
	border-radius: var(--npb-radius-lg);
	background: var(--npb-card-bg);
	box-shadow: var(--npb-shadow-md);
}

/* The card can be taller than a short window — let it scroll inside itself
   so the buttons at the bottom are always reachable. */
@media (min-width: 861px) {
	.npb-root .npb-summary-sticky {
		max-height: calc(100vh - var(--npb-sticky-top, calc(var(--npb-unit) * 2)) - calc(var(--npb-unit) * 1));
		overflow-y: auto;
	}
}

/* Optional per-tier tinting of the live-estimate card (Advanced Settings ->
   Package tiers -> "Tint the estimate card"). Uses color-mix() with the
   plain background declared first, so browsers without color-mix() support
   simply keep the plain background — no breakage, just no tint. */
.npb-root[data-tier-card="1"] .npb-summary-sticky[data-tier="bronze"] {
	--npb-card-bg: color-mix(in srgb, var(--npb-bronze) 10%, var(--npb-bg));
	border-color: var(--npb-bronze);
}
.npb-root[data-tier-card="1"] .npb-summary-sticky[data-tier="silver"] {
	--npb-card-bg: color-mix(in srgb, var(--npb-silver) 12%, var(--npb-bg));
	border-color: var(--npb-silver);
}
.npb-root[data-tier-card="1"] .npb-summary-sticky[data-tier="gold"] {
	--npb-card-bg: color-mix(in srgb, var(--npb-gold) 10%, var(--npb-bg));
	border-color: var(--npb-gold);
}
.npb-root[data-tier-card="1"] .npb-summary-sticky[data-tier="platinum"] {
	--npb-card-bg: color-mix(in srgb, var(--npb-platinum) 10%, var(--npb-bg));
	border-color: var(--npb-platinum);
}

.npb-root .npb-summary-label {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 var(--npb-space-1);
	font-size: var(--npb-fs-sm);
	color: var(--npb-muted);
}

.npb-root .npb-summary-beta-tag {
	display: inline-block;
	padding: 2px 10px;
	border: 1px solid var(--npb-border);
	border-radius: var(--npb-pill-radius);
	font-size: var(--npb-fs-xs);
	line-height: 1.5;
	color: var(--npb-muted);
}

/* The tier is a name with its own colour as a dot, not a shouted badge. */
.npb-root .npb-summary-tier {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 4px;
	font-size: var(--npb-fs-sm);
	font-weight: 500;
	color: var(--npb-fg);
}

.npb-root .npb-summary-tier::before {
	content: "";
	flex: none;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--npb-line-strong);
}

.npb-root .npb-summary-tier[data-tier="bronze"]::before { background: var(--npb-bronze); }
.npb-root .npb-summary-tier[data-tier="silver"]::before { background: var(--npb-silver); }
.npb-root .npb-summary-tier[data-tier="gold"]::before { background: var(--npb-gold); }
.npb-root .npb-summary-tier[data-tier="platinum"]::before { background: var(--npb-platinum); }

.npb-root .npb-summary-total {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	column-gap: 2px;
	margin: 0;
	line-height: 1;
	font-variant-numeric: lining-nums tabular-nums;
}

.npb-root .npb-summary-total .npb-currency {
	align-self: flex-start;
	margin-top: 0.35em;
	margin-right: 2px;
	font-size: calc(var(--npb-fs-price) * 0.42);
	font-weight: 400;
	color: var(--npb-muted);
}

.npb-root .npb-summary-total .npb-total-figure {
	font-family: var(--npb-font-display);
	font-size: var(--npb-fs-price);
	font-weight: 300;
	letter-spacing: -0.03em;
}

.npb-root .npb-summary-total .npb-per-month {
	flex-basis: 100%;
	margin-top: 10px;
	font-size: var(--npb-fs-sm);
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.3;
	color: var(--npb-muted);
}

.npb-root .npb-summary-minimum-note {
	margin: var(--npb-space-2) 0 0;
	font-size: var(--npb-fs-xs);
	line-height: 1.55;
	color: var(--npb-muted);
}

/* "Business fit not confirmed" — a quiet flag in the breakdown, never a warning banner */
.npb-root .npb-summary-provisional {
	margin: var(--npb-space-2) 0 0;
	padding-left: var(--npb-space-2);
	border-left: 2px solid var(--npb-line-strong);
	font-size: var(--npb-fs-xs);
	line-height: 1.55;
	color: var(--npb-muted);
}

.npb-root .npb-summary-toggle {
	display: none;
}

.npb-root .npb-summary-more {
	margin-top: var(--npb-space-3);
}

/* Ledger: a label, a rule, an amount. */
.npb-root .npb-summary-breakdown {
	padding-top: var(--npb-space-2);
	border-top: 1px solid var(--npb-fg);
	font-size: var(--npb-fs-sm);
}

.npb-root .npb-breakdown-row,
.npb-root .npb-summary-adspend p,
.npb-root .npb-summary-addons p {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--npb-space-2);
	margin: 0;
	padding: 7px 0;
	font-size: var(--npb-fs-sm);
	line-height: 1.4;
	font-variant-numeric: tabular-nums;
}

.npb-root .npb-breakdown-row > span:last-child,
.npb-root .npb-summary-adspend p > span:last-child,
.npb-root .npb-summary-addons p > span:last-child {
	flex: none;
	text-align: right;
}

.npb-root .npb-breakdown-row small {
	margin-left: 4px;
	font-size: var(--npb-fs-xs);
	color: var(--npb-muted);
}

.npb-root .npb-summary-block-title {
	margin: 0 0 4px;
	padding: 0;
	font-size: var(--npb-fs-sm);
	font-weight: 500;
	display: block;
}

.npb-root .npb-summary-adspend {
	margin-top: var(--npb-space-3);
	padding-top: var(--npb-space-2);
	border-top: 1px solid var(--npb-border);
}

.npb-root .npb-summary-adspend .npb-summary-block-title {
	display: block;
}

.npb-root .npb-summary-total-budget {
	margin-top: 6px;
	padding-top: 10px;
	border-top: 1px solid var(--npb-fg);
	font-weight: 600;
}

.npb-root .npb-summary-benefits,
.npb-root .npb-summary-addons {
	margin-top: var(--npb-space-3);
	padding-top: var(--npb-space-2);
	border-top: 1px solid var(--npb-border);
	font-size: var(--npb-fs-sm);
}

.npb-root .npb-summary-benefits ul {
	margin: 0;
	padding: 0;
}

.npb-root .npb-summary-benefits li {
	position: relative;
	margin: 0;
	padding: 3px 0 3px 18px;
	line-height: 1.45;
}

.npb-root .npb-summary-benefits li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 0.82em;
	width: 7px;
	height: 3px;
	border: solid var(--npb-accent);
	border-width: 0 0 2px 2px;
	transform: rotate(-45deg) translateY(-2px);
}

.npb-root .npb-summary-vat,
.npb-root .npb-summary-disclaimer {
	margin: var(--npb-space-2) 0 0;
	font-size: var(--npb-fs-xs);
	line-height: 1.55;
	color: var(--npb-muted);
}

.npb-root .npb-summary-empty p:last-child {
	margin: 0;
	font-size: var(--npb-fs-sm);
	color: var(--npb-muted);
}

/* The card has no bottom padding of its own (the buttons supply it once the estimate
   is live), so the invitation shown before the first two questions adds the same
   40px below its text that the card has above it. */
.npb-root .npb-summary-empty {
	padding-bottom: var(--npb-space-4);
}

.npb-root .npb-summary-actions {
	display: grid;
	gap: 10px;
	margin-top: var(--npb-space-3);
	padding: var(--npb-space-2) 0 var(--npb-space-3);
	border-top: 1px solid var(--npb-border);
	background: var(--npb-card-bg);
	/* The card scrolls when it is taller than the window; the buttons stay put. */
	position: sticky;
	bottom: 0;
}

/* "Close breakdown": phone only, and only while the breakdown is open. */
.npb-root .npb-summary-close {
	display: none;
}

/* ------------------------------------------------------------------ */
/* Phones: the estimate becomes a slim bar fixed to the top             */
/* ------------------------------------------------------------------ */

@media (max-width: 860px) {
	.npb-root .npb-summary-sticky {
		order: -1;
		position: sticky;
		/* Clear a sticky site header with: .npb-root { --npb-sticky-top: 70px; } */
		top: var(--npb-sticky-top, 0);
		z-index: 30;
		padding: 12px 16px;
		border-radius: var(--npb-radius-md);
		max-height: calc(100vh - var(--npb-sticky-top, 0px) - calc(var(--npb-unit) * 1));
		overflow-y: auto;
		box-shadow: var(--npb-shadow-bar);
	}

	.npb-root .npb-summary-sticky[data-ready="0"] {
		display: none;
	}

	.npb-root .npb-summary-live {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas: "main actions" "more more";
		column-gap: var(--npb-space-2);
		align-items: center;
	}

	.npb-root .npb-summary-main { grid-area: main; }
	.npb-root .npb-summary-more { grid-area: more; display: none; margin-top: var(--npb-space-2); }
	.npb-root .npb-summary-actions { grid-area: actions; margin: 0; padding: 0; border-top: 0; position: static; }

	.npb-root .npb-summary-sticky.is-expanded .npb-summary-more { display: block; }

	/* The slim bar drops the "Your estimate" caption (it stays for screen readers) and
	   puts the tier beside the price, so it is two short lines. */
	.npb-root .npb-summary-main {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		align-items: baseline;
		column-gap: 10px;
	}
	.npb-root .npb-summary-label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
	.npb-root .npb-summary-sticky.is-expanded .npb-summary-label { position: static; width: auto; height: auto; margin: 0 0 var(--npb-space-1); overflow: visible; clip: auto; grid-column: 1 / -1; font-size: var(--npb-fs-xs); }
	/* The beta note is already shown above the form; keep the slim bar to one clean line. */
	.npb-root .npb-summary-beta-tag { display: none; }
	.npb-root .npb-summary-sticky.is-expanded .npb-summary-beta-tag { display: inline-block; }
	.npb-root .npb-summary-total { order: 1; grid-column: 1 / -1; flex-wrap: wrap; align-items: baseline; min-width: 0; }
	/* The tier name joins the breakdown; the collapsed bar stays to price + one action. */
	.npb-root .npb-summary-tier { display: none; order: 2; margin: 0; font-size: var(--npb-fs-xs); }
	.npb-root .npb-summary-sticky.is-expanded .npb-summary-tier { display: flex; }
	.npb-root .npb-summary-toggle { order: 3; }
	.npb-root .npb-summary-minimum-note { order: 4; grid-column: 1 / -1; }
	.npb-root .npb-summary-total .npb-currency-code { display: none; }
	.npb-root .npb-summary-sticky.is-expanded .npb-summary-total .npb-currency-code { display: inline; }
	.npb-root .npb-summary-total .npb-currency { font-size: calc(var(--npb-unit) * 0.95); margin-top: 0.15em; }
	.npb-root .npb-summary-total .npb-total-figure { font-size: calc(var(--npb-unit) * 1.75); }
	.npb-root .npb-summary-total .npb-per-month { flex-basis: auto; margin: 0 0 0 3px; font-size: var(--npb-fs-xs); white-space: nowrap; }
	.npb-root .npb-summary-minimum-note { display: none; }
	.npb-root .npb-summary-sticky.is-expanded .npb-summary-minimum-note { display: block; }

	.npb-root .npb-summary-toggle {
		display: inline-block;
		margin-top: 2px;
		padding: 0;
		min-height: 32px;
		background: none;
		border: 0;
		color: var(--npb-fg);
		font-size: var(--npb-fs-xs);
		font-weight: 500;
		text-decoration: underline;
		text-decoration-color: var(--npb-accent);
		text-decoration-thickness: 2px;
		text-underline-offset: 4px;
		white-space: nowrap;
		justify-self: start;
		cursor: pointer;
	}

	.npb-root .npb-summary-toggle:hover,
	.npb-root .npb-summary-toggle:focus,
	.npb-root .npb-summary-toggle:active {
		background: none;
		color: var(--npb-fg);
	}

	/* Compact: just the main call to action beside the price. */
	.npb-root .npb-summary-actions .npb-cta-btn {
		width: auto;
		min-width: 0;
		max-width: calc(var(--npb-unit) * 8);
		min-height: 48px;
		padding: 6px 12px;
		font-size: var(--npb-fs-sm);
		line-height: 1.2;
	}
	.npb-root .npb-summary-actions .npb-download-btn { display: none; }
	.npb-root .npb-summary-sticky.is-expanded .npb-summary-live { grid-template-areas: "main main" "more more" "actions actions"; }
	.npb-root .npb-summary-sticky.is-expanded .npb-summary-actions {
		grid-area: actions;
		margin-top: var(--npb-space-2);
		/* The open bar scrolls inside itself; its buttons stay in reach. */
		position: sticky;
		bottom: -12px;
		padding: 12px 0;
		border-top: 1px solid var(--npb-border);
		background: var(--npb-card-bg);
	}
	.npb-root .npb-summary-sticky.is-expanded .npb-summary-actions .npb-cta-btn { width: 100%; max-width: none; }
	.npb-root .npb-summary-sticky.is-expanded .npb-summary-actions .npb-download-btn { display: block; }

	.npb-root .npb-summary-sticky.is-expanded .npb-summary-close {
		display: block;
		width: 100%;
		min-height: 44px;
		margin: 2px 0 0;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: transparent;
		color: var(--npb-fg);
		font-size: var(--npb-fs-sm);
		font-weight: 500;
		text-align: center;
		text-decoration: underline;
		text-decoration-color: var(--npb-accent);
		text-decoration-thickness: 2px;
		text-underline-offset: 4px;
		cursor: pointer;
	}

	.npb-root .npb-summary-sticky.is-expanded .npb-summary-close:hover,
	.npb-root .npb-summary-sticky.is-expanded .npb-summary-close:focus,
	.npb-root .npb-summary-sticky.is-expanded .npb-summary-close:active {
		background: transparent;
		color: var(--npb-fg);
	}
	/* Tighter rhythm on a phone, same proportions. */
	.npb-root .npb-step { padding-top: var(--npb-space-4); margin-top: var(--npb-space-4); }
	.npb-root .npb-stage-intro { margin-top: var(--npb-space-4); }
	.npb-root .npb-step-title { font-size: calc(var(--npb-unit) * 1.375); }

	/* Stage jumps should land below the sticky bar. */
	.npb-root .npb-stage,
	.npb-root .npb-step { scroll-margin-top: calc(var(--npb-sticky-top, 0px) + 120px); }
}

/* ------------------------------------------------------------------ */
/* Tier comparison — sits after the calculator, outside its sticky      */
/* region. Each tier is its own colour (the colour settings), shown     */
/* with the monthly fee range that lands in it and the benefits that    */
/* were written for it. The tier colour is structure here: the top      */
/* edge, the name chip, the ticks and the ladder — never decoration.    */
/* ------------------------------------------------------------------ */

.npb-root .npb-compare {
	margin-top: var(--npb-space-5);
	padding-top: var(--npb-space-4);
	border-top: 1px solid var(--npb-border);
}

.npb-root .npb-compare-head {
	max-width: calc(var(--npb-unit) * 38);
	margin: 0 0 var(--npb-space-3);
}

.npb-root .npb-compare-title {
	margin: 0;
	font-family: var(--npb-font-display);
	font-size: calc(var(--npb-unit) * 1.75);
	font-weight: 400;
	line-height: var(--npb-lh-tight);
	letter-spacing: -0.015em;
	text-transform: none;
	color: var(--npb-fg);
}

.npb-root .npb-compare-intro {
	margin: var(--npb-space-1) 0 0;
	font-size: var(--npb-fs-base);
	color: var(--npb-muted);
}

/* The ladder: where each tier starts, in one line. */
.npb-root .npb-ladder {
	display: flex;
	gap: 4px;
	list-style: none;
	margin: 0 0 var(--npb-space-3);
	padding: 0;
}

.npb-root .npb-ladder .npb-ladder-step {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.npb-root .npb-ladder-bar {
	display: block;
	height: 8px;
	border-radius: var(--npb-pill-radius);
	background: var(--tier);
	transition: opacity 0.2s ease, height 0.2s ease;
}

/* Once there is an estimate, the tier it falls in stands forward and the others step back. */
.npb-root .npb-compare[data-has-current] .npb-ladder-step:not([data-current]) .npb-ladder-bar {
	opacity: 0.4;
}

.npb-root .npb-ladder-step[data-current] .npb-ladder-bar {
	opacity: 1;
	height: 12px;
	margin-top: -2px;
}

.npb-root .npb-ladder-from {
	display: block;
	margin-top: 8px;
	font-size: var(--npb-fs-xs);
	line-height: 1.3;
	color: var(--npb-muted);
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}

/* The cards: as many across as there are tiers (up to four), two across on a tablet, one on a phone. */
.npb-root .npb-compare-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--npb-space-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.npb-root .npb-compare-grid[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.npb-root .npb-compare-grid[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.npb-root .npb-compare-grid .npb-tier {
	position: relative;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: calc(var(--npb-space-3) + 6px) var(--npb-space-3) var(--npb-space-3);
	list-style: none;
	background: var(--npb-bg);
	border: 1px solid var(--npb-border);
	border-radius: var(--npb-radius-lg);
	overflow: hidden;
}

@supports (background: color-mix(in srgb, red 10%, white)) {
	.npb-root .npb-compare-grid .npb-tier {
		background: color-mix(in srgb, var(--tier) 7%, var(--npb-bg));
		border-color: color-mix(in srgb, var(--tier) 30%, var(--npb-border));
	}
}

.npb-root .npb-compare-grid .npb-tier::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 6px;
	background: var(--tier);
}

.npb-root .npb-compare-grid .npb-tier[data-current] {
	border-color: var(--tier);
	box-shadow: 0 0 0 2px var(--tier);
}

.npb-root .npb-tier-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	min-height: 32px;
}

.npb-root .npb-compare-grid .npb-tier-name {
	display: inline-block;
	margin: 0;
	padding: 3px 14px;
	border-radius: var(--npb-pill-radius);
	background: var(--tier);
	color: var(--tier-on);
	font-family: inherit;
	font-size: var(--npb-fs-sm);
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.45;
	text-transform: none;
}

.npb-root .npb-tier-tag {
	font-size: var(--npb-fs-xs);
	color: var(--npb-muted);
}

.npb-root .npb-tier-you {
	margin-left: auto;
	font-size: var(--npb-fs-xs);
	font-weight: 600;
	color: var(--npb-fg);
}

.npb-root .npb-tier-you::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-right: 6px;
	border-radius: 50%;
	background: var(--tier);
	vertical-align: 0.05em;
}

.npb-root .npb-tier-benefits {
	flex: 1 1 auto;
	list-style: none;
	margin: var(--npb-space-3) 0 0;
	padding: var(--npb-space-2) 0 0;
	border-top: 1px solid var(--npb-border);
}

@supports (background: color-mix(in srgb, red 10%, white)) {
	.npb-root .npb-tier-benefits { border-top-color: color-mix(in srgb, var(--tier) 30%, var(--npb-border)); }
}

.npb-root .npb-tier-benefits li {
	position: relative;
	margin: 0;
	padding: 6px 0 6px calc(var(--npb-unit) * 1.75);
	list-style: none;
	font-size: var(--npb-fs-sm);
	line-height: 1.45;
	color: var(--npb-fg);
}

/* A filled disc in the tier colour, with a tick in the colour that reads on it. */
.npb-root .npb-tier-benefits li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5em;
	width: calc(var(--npb-unit) * 1.1);
	height: calc(var(--npb-unit) * 1.1);
	margin-top: 6px;
	border-radius: 50%;
	background: var(--tier);
}

.npb-root .npb-tier-benefits li::after {
	content: "";
	position: absolute;
	left: calc(var(--npb-unit) * 0.4);
	top: 0.5em;
	width: calc(var(--npb-unit) * 0.26);
	height: calc(var(--npb-unit) * 0.5);
	margin-top: calc(6px + var(--npb-unit) * 0.14);
	border: solid var(--tier-on);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.npb-root .npb-tier-empty {
	margin: var(--npb-space-2) 0 0;
	padding-top: var(--npb-space-2);
	border-top: 1px solid var(--npb-border);
	font-size: var(--npb-fs-sm);
	color: var(--npb-muted);
}

.npb-root .npb-compare-note {
	max-width: calc(var(--npb-unit) * 40);
	margin: var(--npb-space-3) 0 0;
	font-size: var(--npb-fs-xs);
	line-height: 1.55;
	color: var(--npb-muted);
}

@media (max-width: 959px) {
	.npb-root .npb-compare-grid[data-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The cards appear once the opening questions are answered: a short, quiet fade in (never on the classic form). */
.npb-root .npb-compare[data-npb-compare-wait]:not([hidden]) {
	animation: npb-compare-in 0.45s ease both;
}

@keyframes npb-compare-in {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: none; }
}

.npb-root .npb-carousel { position: relative; }

/* The controls belong to the phone carousel only. */
.npb-root .npb-carousel-controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--npb-space-2);
	margin-top: var(--npb-space-1);
}

.npb-root .npb-carousel-dots {
	display: flex;
	align-items: center;
}

/* A 44px target around a small mark: the current tier's mark stretches into a bar in its own colour. */
.npb-root .npb-carousel-dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 44px;
	min-height: 44px;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: var(--npb-radius-md);
	box-shadow: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.npb-root .npb-carousel-dot > span {
	display: block;
	width: 8px;
	height: 8px;
	border-radius: var(--npb-pill-radius);
	background: var(--tier);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.28);
	opacity: 0.6;
	transition: width 0.25s ease, opacity 0.25s ease;
}

.npb-root .npb-carousel-dot[aria-current="true"] > span {
	width: 26px;
	opacity: 1;
}

.npb-root .npb-carousel-dot:focus-visible,
.npb-root .npb-carousel-toggle:focus-visible {
	outline: 3px solid var(--npb-focus-ring);
	outline-offset: 1px;
}

.npb-root .npb-carousel-toggle {
	box-sizing: border-box;
	min-height: 44px;
	margin: 0;
	padding: 0 var(--npb-space-2);
	background: none;
	border: 0;
	border-radius: var(--npb-radius-md);
	box-shadow: none;
	color: var(--npb-muted);
	font: inherit;
	font-size: var(--npb-fs-sm);
	line-height: 1;
	text-transform: none;
	letter-spacing: 0;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

@media (max-width: 759px) {
	/* The cards become a carousel: one big card with the next one peeking in, swiped sideways, each card snapping
	   to the middle (and never skipped over, however hard the swipe). Without the script it is still a swipe. */
	.npb-root .npb-compare-grid,
	.npb-root .npb-compare-grid[data-count="2"],
	.npb-root .npb-compare-grid[data-count="3"],
	.npb-root .npb-compare-grid[data-count="4"] {
		display: flex;
		flex-wrap: nowrap;
		gap: var(--npb-space-2);
		position: relative;
		overflow-x: auto;
		overflow-y: hidden;
		padding: 6px 8% 10px;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: 8%;
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.npb-root .npb-compare-grid::-webkit-scrollbar { display: none; }

	/* The row has 8% of padding each side, so a card as wide as the row's content is 84% of the width, with the
	   neighbours peeking in through the padding. */
	.npb-root .npb-compare-grid .npb-tier {
		flex: 0 0 100%;
		min-width: 0;
		scroll-snap-align: center;
		scroll-snap-stop: always;
		transition: opacity 0.3s ease;
	}

	/* With the script on, the cards that are not in the middle step back a little. */
	.npb-root .npb-carousel[data-ready] .npb-tier:not([data-active]) { opacity: 0.7; }

	.npb-root .npb-compare-grid:focus-visible {
		outline: 3px solid var(--npb-focus-ring);
		outline-offset: -3px;
		border-radius: var(--npb-radius-lg);
	}

	.npb-root .npb-compare { margin-top: var(--npb-space-4); }
	.npb-root .npb-compare-title { font-size: calc(var(--npb-unit) * 1.5); }
}

@media (min-width: 760px) {
	.npb-root .npb-carousel-controls { display: none !important; }
}

/* ------------------------------------------------------------------ */
/* Phone: the estimate bar's main button takes the tier's colour        */
/* (Pro: "Tier-coloured mobile button"). Only the button in that bar —  */
/* never the desktop button, the form's own send button or Download.    */
/* The text colour is chosen on the server for contrast (>= 4.5:1).     */
/* ------------------------------------------------------------------ */

@media (max-width: 860px) {
	.npb-root .npb-summary-sticky[data-cta-tier="bronze"]   { --npb-cta-bg: var(--npb-bronze);   --npb-cta-fg: var(--npb-bronze-on); }
	.npb-root .npb-summary-sticky[data-cta-tier="silver"]   { --npb-cta-bg: var(--npb-silver);   --npb-cta-fg: var(--npb-silver-on); }
	.npb-root .npb-summary-sticky[data-cta-tier="gold"]     { --npb-cta-bg: var(--npb-gold);     --npb-cta-fg: var(--npb-gold-on); }
	.npb-root .npb-summary-sticky[data-cta-tier="platinum"] { --npb-cta-bg: var(--npb-platinum); --npb-cta-fg: var(--npb-platinum-on); }

	.npb-root .npb-summary-sticky[data-cta-tier] .npb-summary-actions .npb-cta-btn,
	.npb-root .npb-summary-sticky[data-cta-tier] .npb-summary-actions .npb-cta-btn:hover,
	.npb-root .npb-summary-sticky[data-cta-tier] .npb-summary-actions .npb-cta-btn:focus,
	.npb-root .npb-summary-sticky[data-cta-tier] .npb-summary-actions .npb-cta-btn:active {
		background: var(--npb-cta-bg);
		border-color: var(--npb-cta-bg);
		color: var(--npb-cta-fg);
	}

	/* A tier colour can be close to the accent, so the keyboard ring uses the text colour instead. */
	.npb-root .npb-summary-sticky[data-cta-tier] .npb-summary-actions .npb-cta-btn:focus-visible {
		outline: 3px solid var(--npb-fg);
		outline-offset: 3px;
	}
}

/* ------------------------------------------------------------------ */
/* Motion                                                               */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.npb-root * {
		transition: none !important;
		animation: none !important;
	}
}