/*
 * Sales Earnings Calculator – front-end styles.
 *
 * Everything is scoped to .sa-earnings-calculator, so nothing else on the site is affected.
 * Most selectors are two classes deep so common theme rules don't override them, and the
 * file is loaded after the theme's stylesheet for the same reason.
 * The layout responds to the width of the calculator itself (container queries), not the
 * screen, so it also works in narrow content columns.
 *
 *  1 Tokens          5 Results panel          9 Results bar
 *  2 Base            6 Worth panel           10 Show and hide
 *  3 Layout          7 What if you improve?  11 Helpers and accessibility
 *  4 Inputs          8 Footer and buttons
 */

/* 1 Tokens ------------------------------------------------------------------ */

.sa-earnings-calculator {
	--saec-ink: #15293b;        /* Main text */
	--saec-muted: #52657a;      /* Secondary text (6.1:1 on white) */
	--saec-brand: #269dd8;      /* Salesagents.uk blue – focus rings only, too light for text */
	--saec-brand-deep: #1474a8; /* Buttons and selected options (5.1:1 with white) */
	--saec-tint: #eef6fb;       /* Results panel */
	--saec-line: #d5e2ec;       /* Dividers */
	--saec-field: #7d93a6;      /* Input borders (3.2:1 on white) */
	--saec-gain: #18794e;
	--saec-amber: #8a5a00;
	--saec-error: #b42318;
	--saec-paper: #fff;
	--saec-radius: 0.5em;

	container: saec / inline-size;
	position: relative;
	margin: 1.5em 0;
	color: var(--saec-ink);
	font-size: max(1rem, 16px);
	line-height: 1.5;
	text-align: left;
}

/* 2 Base: neutralise theme styles on the elements we use ---------------------- */

.sa-earnings-calculator *,
.sa-earnings-calculator *::before,
.sa-earnings-calculator *::after {
	box-sizing: border-box;
}

.sa-earnings-calculator :is(p, ol, li, dl, dt, dd, fieldset, legend, label, details, summary) {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font-size: inherit;
	letter-spacing: normal;
	text-transform: none;
}

.sa-earnings-calculator :is(h2, h3, h4, h5, h6) {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--saec-ink);
	letter-spacing: normal;
	text-align: left;
	text-transform: none;
}

.sa-earnings-calculator :is(h2, h3, h4, h5, h6)::before,
.sa-earnings-calculator :is(h2, h3, h4, h5, h6)::after,
.sa-earnings-calculator li::before {
	content: none;
}

.sa-earnings-calculator ol {
	list-style: none;
}

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

/* 1 The offer: one outlined panel, filled in once. */
.sa-earnings-calculator .saec-offer {
	margin: 0 0 2.5em;
	padding: 1.5em 1.25em;
	border: 1px solid var(--saec-line);
	border-radius: 0.75em;
}

@container saec (min-width: 520px) {
	.sa-earnings-calculator .saec-offer {
		padding: 2em;
	}
}

/* Advert mode: the company's one-line summary, with "Change" to open the full offer below it. */
.sa-earnings-calculator .saec-offer-summary {
	margin: 0 0 1.5em;
}

.sa-earnings-calculator .saec-offer-by {
	color: var(--saec-muted);
	font-size: 0.875em;
	font-weight: 600;
}

.sa-earnings-calculator .saec-offer-line {
	margin: 0.2em 0 0;
	font-size: 1.125em;
	font-weight: 700;
	line-height: 1.4;
}

.sa-earnings-calculator .saec-offer-note {
	margin: 0.3em 0 0;
	color: var(--saec-muted);
	font-size: 0.9375em;
}

.sa-earnings-calculator .saec-offer-summary .saec-btn--quiet {
	margin: 0.5em 0 0;
}

.sa-earnings-calculator .saec-offer-body {
	margin: 0 0 1.75em;
}

.sa-earnings-calculator .saec-group {
	margin: 0 0 1.75em;
}

.sa-earnings-calculator .saec-group:last-child {
	margin-bottom: 0;
}

.sa-earnings-calculator .saec-group-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.2em 0.75em;
	margin: 0 0 0.75em;
}

.sa-earnings-calculator .saec-group-title {
	margin: 0 0 0.75em;
	font-size: 1.0625em;
	font-weight: 700;
	line-height: 1.35;
}

.sa-earnings-calculator .saec-group-head .saec-group-title {
	margin: 0;
}

.sa-earnings-calculator .saec-group-hint {
	color: var(--saec-muted);
	font-size: 0.875em;
}

.sa-earnings-calculator .saec-sells-fields {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14em, 1fr));
	gap: 0.75em;
}

.sa-earnings-calculator .saec-sells .saec-field {
	margin: 0;
}

.sa-earnings-calculator .saec-sells .saec-select select {
	max-width: none;
}

/* How you're paid: the terms (option buttons) beside the amounts on wider layouts. */
.sa-earnings-calculator .saec-pay-grid {
	display: grid;
	gap: 0 2.5em;
	align-items: start;
}

@container saec (min-width: 760px) {
	.sa-earnings-calculator .saec-pay-grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}

/* The two modes, with the one-line how-to above them. */
.sa-earnings-calculator .saec-choice.saec-modes {
	margin: 0 0 2.5em;
}

.sa-earnings-calculator .saec-modes legend.saec-label {
	margin-bottom: 0.15em;
	font-size: 1.25em;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
}

/* 2 Your numbers: what you control on the left, the results on the right. */
.sa-earnings-calculator .saec-main {
	display: grid;
	gap: 2.5em;
	align-items: start;
}

@container saec (min-width: 760px) {
	.sa-earnings-calculator .saec-main {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 3em;
	}
}

/* 4 Inputs ------------------------------------------------------------------ */

.sa-earnings-calculator .saec-step-title {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.3em 0.6em;
	margin: 0 0 0.4em;
	font-size: 1.25em;
	font-weight: 700;
	line-height: 1.3;
}

.sa-earnings-calculator .saec-step-num {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 1.6em;
	height: 1.6em;
	border-radius: 50%;
	background: var(--saec-ink);
	color: #fff;
	font-size: 0.8em;
	font-weight: 700;
	line-height: 1;
}

.sa-earnings-calculator .saec-optional {
	color: var(--saec-muted);
	font-size: 0.85em;
	font-weight: 400;
}

.sa-earnings-calculator .saec-step-intro {
	margin: 0 0 1.5em;
	color: var(--saec-muted);
	font-size: 0.9375em;
}

.sa-earnings-calculator .saec-field,
.sa-earnings-calculator .saec-choice {
	min-width: 0;
	margin: 0 0 1.4em;
}

.sa-earnings-calculator .saec-label {
	display: block;
	float: none;
	width: auto;
	margin: 0 0 0.45em;
	color: var(--saec-ink);
	font-size: 1em;
	font-weight: 600;
	line-height: 1.35;
}

/* A floated legend behaves like a normal label in every browser. */
.sa-earnings-calculator legend.saec-label {
	float: left;
	width: 100%;
}

.sa-earnings-calculator legend + * {
	clear: both;
}

.sa-earnings-calculator .saec-choice-hint {
	margin: 0 0 0.9em;
	color: var(--saec-muted);
	font-size: 0.9375em;
}

.sa-earnings-calculator .saec-modes .saec-choice-hint {
	text-align: center;
}

/* Number inputs: the bordered box holds the input plus a £ / % / months affix. */
.sa-earnings-calculator .saec-input {
	display: flex;
	align-items: center;
	width: 100%;
	max-width: 18em;
	min-height: 3em;
	border: 1px solid var(--saec-field);
	border-radius: var(--saec-radius);
	background: var(--saec-paper);
}

.sa-earnings-calculator .saec-input:focus-within {
	outline: 3px solid var(--saec-brand);
	outline-offset: 2px;
}

.sa-earnings-calculator .saec-input input[type="text"] {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 0.6em 0.8em;
	border: 0;
	border-radius: var(--saec-radius);
	outline: 0;
	background: transparent;
	box-shadow: none;
	color: var(--saec-ink);
	font: inherit;
	font-size: 1.125em; /* 18px: also stops iOS zooming in on focus */
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	line-height: 1.3;
	-webkit-appearance: none;
	appearance: none;
}

.sa-earnings-calculator .saec-input input[type="text"]::placeholder {
	color: var(--saec-muted);
	opacity: 1;
}

.sa-earnings-calculator .saec-input.has-prefix input[type="text"] {
	padding-left: 0.3em;
}

.sa-earnings-calculator .saec-input.has-suffix input[type="text"] {
	padding-right: 0.3em;
}

.sa-earnings-calculator .saec-affix {
	flex: none;
	color: var(--saec-muted);
	font-weight: 600;
	line-height: 1;
}

.sa-earnings-calculator .saec-affix:first-child {
	padding-left: 0.8em;
	font-size: 1.125em;
}

.sa-earnings-calculator .saec-affix:last-child {
	padding-right: 0.8em;
}

.sa-earnings-calculator .saec-field.is-invalid .saec-input {
	border-color: var(--saec-error);
	box-shadow: inset 0 0 0 1px var(--saec-error);
}

.sa-earnings-calculator .saec-hint {
	margin: 0.45em 0 0;
	color: var(--saec-muted);
	font-size: 0.875em;
}

.sa-earnings-calculator .saec-hint[data-out] {
	min-height: 1.5em;
}

/* Advert mode: the company's own figure, which stays visible when the visitor changes the field. */
.sa-earnings-calculator .saec-estimate {
	margin: 0.3em 0 0;
	color: var(--saec-brand-deep);
	font-size: 0.875em;
	font-weight: 600;
}

.sa-earnings-calculator .saec-error {
	margin: 0.4em 0 0;
	color: var(--saec-error);
	font-size: 0.875em;
	font-weight: 600;
	line-height: 1.45;
}

.sa-earnings-calculator .saec-error:empty {
	margin: 0;
}

.sa-earnings-calculator .saec-select select,
.sa-earnings-calculator select.saec-period {
	display: block;
	width: 100%;
	max-width: 22em;
	height: auto;
	min-height: 3em;
	margin: 0;
	padding: 0.6em 2.5em 0.6em 0.8em;
	border: 1px solid var(--saec-field);
	border-radius: var(--saec-radius);
	background: var(--saec-paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2315293b' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 0.9em center;
	box-shadow: none;
	color: var(--saec-ink);
	font: inherit;
	font-size: 1em;
	line-height: 1.3;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.sa-earnings-calculator .saec-select select:focus-visible,
.sa-earnings-calculator select.saec-period:focus-visible {
	outline: 3px solid var(--saec-brand);
	outline-offset: 2px;
}

/* Income target: the amount and "per month / per year" side by side. */
.sa-earnings-calculator .saec-input-row {
	display: flex;
	gap: 0.5em;
	max-width: 22em;
}

.sa-earnings-calculator .saec-input-row .saec-input {
	flex: 1 1 auto;
	min-width: 0;
}

.sa-earnings-calculator select.saec-period {
	flex: none;
	width: auto;
	max-width: 10em;
}

/* Option buttons (radio inputs underneath, so they work like any radio group). */
.sa-earnings-calculator .saec-options {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
}

.sa-earnings-calculator .saec-option {
	position: relative;
	display: flex;
	flex: 1 1 6em;
	margin: 0;
	cursor: pointer;
}

.sa-earnings-calculator .saec-option input[type="radio"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.sa-earnings-calculator .saec-option span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 2.75em;
	padding: 0.55em 0.6em;
	border: 1px solid var(--saec-field);
	border-radius: var(--saec-radius);
	background: var(--saec-paper);
	color: var(--saec-ink);
	font-weight: 500;
	line-height: 1.25;
	text-align: center;
}

.sa-earnings-calculator .saec-option:hover span {
	border-color: var(--saec-brand-deep);
}

.sa-earnings-calculator .saec-option input:checked + span {
	border-color: var(--saec-brand-deep);
	background: var(--saec-brand-deep);
	color: #fff;
	font-weight: 700;
}

.sa-earnings-calculator .saec-option input:focus-visible + span {
	outline: 3px solid var(--saec-brand);
	outline-offset: 2px;
}

/* The two modes: the biggest choice, so the biggest buttons. */
.sa-earnings-calculator .saec-modes .saec-options {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.sa-earnings-calculator .saec-modes .saec-option span {
	min-height: 3.6em;
	padding: 0.7em 1em;
	font-size: 1.0625em;
	font-weight: 700;
}

@container saec (min-width: 760px) {
	.sa-earnings-calculator .saec-modes .saec-option span {
		font-size: 1.1875em;
	}
}

.sa-earnings-calculator .saec-cps {
	margin: 0.25em 0 0;
	padding: 0.75em 1em;
	border-radius: var(--saec-radius);
	background: var(--saec-tint);
	font-size: 0.9375em;
}

/* Optional extras: "Add a retainer…", "Add how long each stage takes", "Add time before your first sale". */
.sa-earnings-calculator .saec-extra {
	margin: 1em 0 0;
}

.sa-earnings-calculator .saec-extra > summary {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	min-height: 2.75em;
	padding: 0.25em 0;
	color: var(--saec-brand-deep);
	font-weight: 600;
	line-height: 1.3;
	list-style: none;
	cursor: pointer;
}

.sa-earnings-calculator .saec-extra > summary::-webkit-details-marker {
	display: none;
}

.sa-earnings-calculator .saec-extra > summary::before {
	content: "+";
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 1.5em;
	height: 1.5em;
	border: 2px solid currentColor;
	border-radius: 50%;
	font-size: 0.9em;
	font-weight: 700;
	line-height: 1;
}

.sa-earnings-calculator .saec-extra[open] > summary::before {
	content: "−";
}

.sa-earnings-calculator .saec-extra > summary:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.sa-earnings-calculator .saec-extra > summary:focus-visible {
	outline: 3px solid var(--saec-brand);
	outline-offset: 2px;
	border-radius: 0.25em;
}

.sa-earnings-calculator .saec-extra-body {
	padding: 0.75em 0 0;
}

.sa-earnings-calculator .saec-extra-body .saec-field:last-child {
	margin-bottom: 0;
}

.sa-earnings-calculator .saec-extra-grid,
.sa-earnings-calculator .saec-time-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
	gap: 1.25em 2em;
	align-items: start;
}

.sa-earnings-calculator .saec-extra-grid .saec-field,
.sa-earnings-calculator .saec-time-grid .saec-field {
	margin: 0;
}

.sa-earnings-calculator .saec-time-extra {
	margin-top: 1.25em;
	padding-top: 1em;
	border-top: 1px solid var(--saec-line);
}

.sa-earnings-calculator .saec-time-extra .saec-group-hint {
	max-width: 46em;
	margin: 0 0 1.25em;
}

.sa-earnings-calculator .saec-time-grid .saec-input {
	max-width: 12em;
}

/* 5 Results panel ---------------------------------------------------------------- */

.sa-earnings-calculator .saec-side {
	container: saec-side / inline-size;
	padding: 1.5em 1.25em;
	border-radius: 0.75em;
	background: var(--saec-tint);
}

@container saec (min-width: 520px) {
	.sa-earnings-calculator .saec-side {
		padding: 2em;
	}
}

/* Target mode: the income target sits at the top of the panel, above its answer. */
.sa-earnings-calculator .saec-drivers {
	margin: 0 0 1.5em;
	padding: 0 0 1.5em;
	border-bottom: 1px solid var(--saec-line);
}

.sa-earnings-calculator .saec-drivers .saec-field {
	margin: 0;
}

.sa-earnings-calculator .saec-drivers .saec-label {
	font-size: 1.0625em;
	font-weight: 700;
}

.sa-earnings-calculator .saec-kicker {
	margin: 0 0 0.2em;
	color: var(--saec-muted);
	font-weight: 600;
}

.sa-earnings-calculator .saec-big {
	margin: 0;
	color: var(--saec-ink);
	font-size: 3em;
	font-size: clamp(2.75em, 12cqi, 4em);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
	line-height: 1.05;
	overflow-wrap: anywhere;
}

.sa-earnings-calculator .saec-big-unit {
	display: inline-block;
	font-size: 0.4em;
	font-weight: 700;
	letter-spacing: 0;
}

.sa-earnings-calculator .saec-sub {
	margin: 0.4em 0 0;
	font-size: 1.125em;
	font-weight: 700;
}

/* Fixed pay and costs: "£8,000 commission + £2,000 fixed pay. About £9,400 after costs." */
.sa-earnings-calculator .saec-split {
	margin: 0.6em 0 0;
	color: var(--saec-ink);
	font-size: 0.9375em;
	font-weight: 600;
}

.sa-earnings-calculator .saec-split:empty {
	display: none;
}

.sa-earnings-calculator .saec-basis {
	margin: 0.9em 0 0;
	color: var(--saec-muted);
	font-size: 0.875em;
}

.sa-earnings-calculator .saec-block {
	margin: 1.75em 0 0;
	padding: 1.5em 0 0;
	border-top: 1px solid var(--saec-line);
}

.sa-earnings-calculator .saec-h4 {
	margin: 0 0 1em;
	font-size: 1.0625em;
	font-weight: 700;
	line-height: 1.35;
}

/* How your income builds: 24 monthly bars, the first year darker, month 12 (the headline) darkest. */
.sa-earnings-calculator .saec-growth-chart {
	display: flex;
	align-items: flex-end;
	gap: 2px;
	height: 5.5em;
	border-bottom: 1px solid var(--saec-field);
}

.sa-earnings-calculator .saec-growth-chart span {
	flex: 1 1 0;
	min-width: 0;
	height: 1%;
	border-radius: 2px 2px 0 0;
	background: #8fc1df;
	transition: height 0.25s ease-out;
}

.sa-earnings-calculator .saec-growth-chart span:nth-child(-n + 12) {
	background: var(--saec-brand-deep);
}

.sa-earnings-calculator .saec-growth-chart span:nth-child(12) {
	background: var(--saec-ink);
}

.sa-earnings-calculator .saec-growth-axis {
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin: 0.3em 0 0;
	color: var(--saec-muted);
	font-size: 0.75em;
	text-align: center;
}

.sa-earnings-calculator :is(.saec-growth-stats, .saec-time-stats) {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.75em;
	margin: 1em 0 0;
}

.sa-earnings-calculator .saec-time-stats {
	margin: 0;
}

.sa-earnings-calculator :is(.saec-growth-stats, .saec-time-stats) dt {
	color: var(--saec-muted);
	font-size: 0.8125em;
	font-weight: 600;
	line-height: 1.3;
}

.sa-earnings-calculator :is(.saec-growth-stats, .saec-time-stats) dd {
	margin: 0.1em 0 0;
	font-size: 1.125em;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}

.sa-earnings-calculator .saec-growth-stats dd.saec-growth-note {
	margin: 0;
	color: var(--saec-muted);
	font-size: 0.75em;
	font-weight: 600;
}

/* Your time: hours, earnings per hour and the workload verdict. */
.sa-earnings-calculator .saec-time-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5em 1em;
	margin: 0 0 1em;
}

.sa-earnings-calculator .saec-time-head .saec-h4 {
	margin: 0;
}

.sa-earnings-calculator .saec-verdict {
	display: inline-block;
	padding: 0.25em 0.75em;
	border: 1px solid currentColor;
	border-radius: 999px;
	background: var(--saec-paper);
	color: var(--saec-brand-deep);
	font-size: 0.875em;
	font-weight: 700;
	line-height: 1.3;
}

.sa-earnings-calculator [data-verdict="comfortable"] .saec-verdict { color: var(--saec-gain); }
.sa-earnings-calculator [data-verdict="realistic"] .saec-verdict { color: var(--saec-brand-deep); }
.sa-earnings-calculator [data-verdict="ambitious"] .saec-verdict { color: var(--saec-amber); }
.sa-earnings-calculator [data-verdict="unrealistic"] .saec-verdict { color: var(--saec-error); }

.sa-earnings-calculator .saec-time-line {
	margin: 1em 0 0;
	font-size: 0.9375em;
	font-weight: 600;
}

/* Links inside the results ("7 hours a day you can sell", "Add how long each stage takes"). */
.sa-earnings-calculator a.saec-link,
.sa-earnings-calculator a.saec-link:visited {
	color: var(--saec-brand-deep);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.sa-earnings-calculator a.saec-link:hover {
	color: var(--saec-ink);
}

.sa-earnings-calculator a.saec-link:focus-visible {
	outline: 3px solid var(--saec-brand);
	outline-offset: 2px;
	border-radius: 0.2em;
}

.sa-earnings-calculator a.saec-link:empty {
	display: none;
}

.sa-earnings-calculator .saec-time-teaser {
	margin: 0.75em 0 0;
	color: var(--saec-muted);
	font-size: 0.875em;
}

.sa-earnings-calculator .saec-time-fit {
	margin: 0.4em 0 0;
	color: var(--saec-muted);
	font-size: 0.875em;
}

.sa-earnings-calculator .saec-time-fit:empty {
	display: none;
}

/* Nothing to show yet (e.g. every stage set to 0): just the explanation. */
.sa-earnings-calculator .saec-time.is-empty :is(.saec-verdict, .saec-time-stats) {
	display: none;
}

.sa-earnings-calculator .saec-time.is-empty .saec-time-line {
	margin: 0;
	color: var(--saec-muted);
	font-weight: 400;
}

/* Funnel: four bars of fixed, narrowing width. The numbers carry the meaning. */
.sa-earnings-calculator .saec-funnel {
	display: grid;
	margin: 0;
	padding: 0;
	text-align: center;
}

.sa-earnings-calculator .saec-funnel li {
	display: flex;
	flex-direction: column;
	align-items: center;
	list-style: none;
}

.sa-earnings-calculator .saec-funnel li:nth-child(1) { --saec-w: 100%; --saec-c: #1679b0; }
.sa-earnings-calculator .saec-funnel li:nth-child(2) { --saec-w: 84%; --saec-c: #126ea3; }
.sa-earnings-calculator .saec-funnel li:nth-child(3) { --saec-w: 68%; --saec-c: #0e6394; }
.sa-earnings-calculator .saec-funnel li:nth-child(4) { --saec-w: 52%; --saec-c: #0b5785; }

.sa-earnings-calculator .saec-bar {
	display: block;
	width: var(--saec-w);
	min-width: fit-content; /* Grow rather than wrap when a label is long */
	max-width: 100%;
	padding: 0.55em 1em;
	border-radius: 0.4em;
	background: var(--saec-c);
	color: #fff;
	font-weight: 600;
	line-height: 1.3;
}

.sa-earnings-calculator .saec-bar strong {
	color: #fff;
	font-size: 1.3em;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.sa-earnings-calculator .saec-conv {
	display: block;
	padding: 0.35em 0;
	color: var(--saec-muted);
	font-size: 0.875em;
	line-height: 1.4;
}

/* While an input can't be used, the last good results stay visible but faded. */
.sa-earnings-calculator .saec-stale-note {
	display: none;
}

.sa-earnings-calculator.is-stale .saec-stale-note {
	display: block;
	margin: 0 0 1em;
	padding: 0.6em 0.9em;
	border-radius: var(--saec-radius);
	background: var(--saec-paper);
	font-size: 0.875em;
	font-weight: 600;
}

.sa-earnings-calculator.is-stale .saec-results > :not(.saec-stale-note),
.sa-earnings-calculator.is-stale .saec-worth :is(.saec-worth-line, .saec-values),
.sa-earnings-calculator.is-stale .saec-compare,
.sa-earnings-calculator.is-stale .saec-improve-note {
	opacity: 0.35;
}

/* 6 What is your sales activity worth? – the signature insight, so it gets the boldest treatment. */

.sa-earnings-calculator .saec-worth {
	margin: 3em 0 0;
	padding: 1.75em 1.25em;
	border-radius: 0.75em;
	background: linear-gradient(135deg, #1679b0 0%, #0b5785 100%);
	color: #fff;
}

@container saec (min-width: 600px) {
	.sa-earnings-calculator .saec-worth {
		padding: 2.25em 2.5em;
	}
}

.sa-earnings-calculator .saec-worth .saec-section-title {
	margin: 0 0 0.4em;
	color: #fff;
	font-size: 1.5em;
	font-weight: 700;
	line-height: 1.25;
}

@container saec (min-width: 600px) {
	.sa-earnings-calculator .saec-worth .saec-section-title {
		font-size: 1.75em;
	}
}

.sa-earnings-calculator .saec-worth-line {
	max-width: 46em;
	margin: 0 0 1.5em;
	color: #fff;
	font-size: 1.125em;
	font-weight: 500;
	line-height: 1.5;
}

.sa-earnings-calculator .saec-worth-line strong {
	color: #fff;
	font-weight: 800;
	white-space: nowrap;
}

.sa-earnings-calculator .saec-values {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.6em;
}

@container saec (min-width: 600px) {
	.sa-earnings-calculator .saec-values {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 0.75em;
	}
}

.sa-earnings-calculator .saec-values > div {
	display: flex;
	flex-direction: column;
	padding: 0.9em 1em;
	border-radius: var(--saec-radius);
	background: rgba(3, 28, 48, 0.3);
}

/* "One hour of your time" (with time per stage): its own row, or a fifth column when there is room. */
.sa-earnings-calculator .saec-values > .saec-value-hour {
	grid-column: 1 / -1;
}

@container saec (min-width: 900px) {
	.sa-earnings-calculator .saec-values.has-hour {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

	.sa-earnings-calculator .saec-values > .saec-value-hour {
		grid-column: auto;
	}
}

.sa-earnings-calculator .saec-values dt {
	color: #e3f0f8;
	font-size: 0.875em;
	font-weight: 600;
	line-height: 1.3;
}

.sa-earnings-calculator .saec-values dd {
	margin: auto 0 0; /* Values line up even when a label wraps */
	padding-top: 0.2em;
	color: #fff;
	font-size: 1.75em;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
	overflow-wrap: anywhere;
}

.sa-earnings-calculator .saec-fineprint {
	margin: 1em 0 0;
	color: #fff;
	font-size: 0.8125em;
}

/* 7 What if you improve? -------------------------------------------------------- */

.sa-earnings-calculator .saec-improve {
	margin: 2.5em 0 0;
	padding: 1.5em 1.25em;
	border: 1px solid var(--saec-line);
	border-radius: 0.75em;
}

@container saec (min-width: 520px) {
	.sa-earnings-calculator .saec-improve {
		padding: 2em;
	}
}

.sa-earnings-calculator .saec-section-title {
	margin: 0 0 0.35em;
	font-size: 1.375em;
	font-weight: 700;
	line-height: 1.3;
}

.sa-earnings-calculator .saec-intro {
	max-width: 40em;
	margin: 0 0 1.5em;
	color: var(--saec-muted);
}

.sa-earnings-calculator .saec-steppers {
	display: grid;
	gap: 1.25em;
}

@container saec (min-width: 720px) {
	.sa-earnings-calculator .saec-steppers {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.sa-earnings-calculator .saec-steppers .saec-stepper {
	margin: 0;
}

.sa-earnings-calculator .saec-stepper-row {
	display: flex;
	align-items: stretch;
	gap: 0.4em;
}

.sa-earnings-calculator .saec-stepper .saec-input {
	flex: none;
	width: 5.5em;
}

.sa-earnings-calculator .saec-stepper .saec-input input[type="text"] {
	padding-right: 0.3em;
	padding-left: 0.3em;
	text-align: center;
}

.sa-earnings-calculator .saec-step-btn {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 2.2em;
	min-height: 2.2em;
	margin: 0;
	padding: 0;
	border: 1px solid var(--saec-field);
	border-radius: var(--saec-radius);
	background: var(--saec-paper);
	box-shadow: none;
	color: var(--saec-ink);
	font: inherit;
	font-size: 1.375em;
	font-weight: 700;
	line-height: 1;
	text-transform: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.sa-earnings-calculator .saec-step-btn:hover {
	border-color: var(--saec-brand-deep);
	background: var(--saec-tint);
	color: var(--saec-ink);
}

.sa-earnings-calculator .saec-step-btn:focus-visible {
	outline: 3px solid var(--saec-brand);
	outline-offset: 2px;
}

.sa-earnings-calculator .saec-compare {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1em 1.25em;
	margin: 1.75em 0 0;
	padding: 1.25em 0 0;
	border-top: 1px solid var(--saec-line);
}

.sa-earnings-calculator .saec-diff {
	grid-column: 1 / -1;
	padding: 0.9em 1em;
	border-radius: var(--saec-radius);
	background: var(--saec-tint);
}

@container saec (min-width: 640px) {
	.sa-earnings-calculator .saec-compare {
		grid-template-columns: 1fr 1fr 1.2fr;
		align-items: start;
	}

	.sa-earnings-calculator .saec-diff {
		grid-column: auto;
	}
}

.sa-earnings-calculator .saec-compare-label {
	color: var(--saec-muted);
	font-size: 0.875em;
	font-weight: 600;
}

.sa-earnings-calculator .saec-compare-value {
	margin: 0.1em 0 0;
	font-size: 1.625em;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
	overflow-wrap: anywhere;
}

.sa-earnings-calculator .saec-per {
	color: var(--saec-muted);
	font-size: 0.55em;
	font-weight: 600;
}

.sa-earnings-calculator .saec-diff-year {
	margin: 0.2em 0 0;
	font-weight: 700;
}

.sa-earnings-calculator .saec-improve.is-gain .saec-diff :is(.saec-compare-value, .saec-diff-year) {
	color: var(--saec-gain);
}

.sa-earnings-calculator .saec-improve.is-loss .saec-diff :is(.saec-compare-value, .saec-diff-year) {
	color: var(--saec-error);
}

.sa-earnings-calculator .saec-improve-note {
	margin: 1em 0 0;
}

.sa-earnings-calculator .saec-improve-note:empty {
	display: none;
}

.sa-earnings-calculator .saec-improve .saec-btn--quiet {
	margin: 1em 0 0;
}

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

.sa-earnings-calculator .saec-footer {
	display: grid;
	gap: 1.5em;
	margin: 2em 0 0;
}

.sa-earnings-calculator .saec-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-height: 2.75em;
	margin: 0;
	padding: 0.6em 1.25em;
	border: 2px solid transparent;
	border-radius: var(--saec-radius);
	background: none;
	box-shadow: none;
	color: inherit;
	font: inherit;
	font-size: 1em;
	font-weight: 700;
	letter-spacing: normal;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	text-shadow: none;
	text-transform: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.sa-earnings-calculator .saec-btn:focus-visible {
	outline: 3px solid var(--saec-brand);
	outline-offset: 2px;
}

.sa-earnings-calculator .saec-btn--outline {
	border-color: var(--saec-brand-deep);
	background: var(--saec-paper);
	color: var(--saec-brand-deep);
}

.sa-earnings-calculator .saec-btn--outline:hover {
	background: var(--saec-tint);
	color: var(--saec-brand-deep);
}

.sa-earnings-calculator .saec-btn--light,
.sa-earnings-calculator .saec-btn--light:visited {
	background: var(--saec-paper);
	color: var(--saec-ink);
}

.sa-earnings-calculator .saec-btn--light:hover,
.sa-earnings-calculator .saec-btn--light:focus {
	background: var(--saec-tint);
	color: var(--saec-ink);
}

.sa-earnings-calculator .saec-btn--quiet {
	min-height: 0;
	padding: 0.25em 0;
	border: 0;
	color: var(--saec-brand-deep);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.sa-earnings-calculator .saec-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75em 1em;
}

.sa-earnings-calculator .saec-share-status {
	font-size: 0.9375em;
	font-weight: 600;
}

.sa-earnings-calculator .saec-share input.saec-share-url {
	flex: 1 1 100%;
	width: 100%;
	min-height: 2.75em;
	margin: 0;
	padding: 0.5em 0.75em;
	border: 1px solid var(--saec-field);
	border-radius: var(--saec-radius);
	background: var(--saec-paper);
	box-shadow: none;
	color: var(--saec-ink);
	font: inherit;
	font-size: 1em;
}

.sa-earnings-calculator .saec-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1em 1.5em;
	padding: 1.25em 1.5em;
	border-radius: 0.75em;
	background: var(--saec-ink);
	color: #fff;
}

.sa-earnings-calculator .saec-cta-text {
	color: #fff;
	font-size: 1.125em;
	font-weight: 700;
	line-height: 1.35;
}

.sa-earnings-calculator .saec-privacy {
	max-width: 46em;
	color: var(--saec-muted);
	font-size: 0.8125em;
	line-height: 1.55;
}

.sa-earnings-calculator .saec-privacy a {
	color: var(--saec-brand-deep);
	text-decoration: underline;
}

/* 9 Results bar: pinned to the bottom of the screen while the results are further down the page.
 * calculator.js adds .peek-on to the calculator when it should show. */

.sa-earnings-calculator .saec-peek-wrap {
	display: none;
}

.sa-earnings-calculator.is-ready .saec-peek-wrap {
	position: sticky;
	bottom: 0;
	z-index: 30;
	display: block;
	height: 0;
}

.sa-earnings-calculator .saec-peek {
	position: absolute;
	bottom: 0.75em;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	width: min(100%, 32em);
	padding: 0.8em 1.1em;
	border-radius: var(--saec-radius);
	background: var(--saec-ink);
	box-shadow: 0 0.5em 1.5em rgba(21, 41, 59, 0.3);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	transform: translateX(-50%);
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.2s, visibility 0.2s;
}

.sa-earnings-calculator.peek-on .saec-peek {
	visibility: visible;
	opacity: 1;
}

.sa-earnings-calculator .saec-peek:hover,
.sa-earnings-calculator .saec-peek:focus,
.sa-earnings-calculator .saec-peek:visited {
	color: #fff;
	text-decoration: none;
}

.sa-earnings-calculator .saec-peek strong {
	color: #fff;
	font-size: 1.125em;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.sa-earnings-calculator .saec-peek span {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.sa-earnings-calculator .saec-peek:focus-visible {
	outline: 3px solid var(--saec-brand);
	outline-offset: 2px;
}

/* 10 Show and hide: the root's data-* attributes say which parts apply --------------- */

.sa-earnings-calculator[data-mode="earn"] [data-mode-only="target"],
.sa-earnings-calculator[data-mode="target"] [data-mode-only="earn"],
.sa-earnings-calculator[data-ctype="one_off"] [data-ctype-only="recurring"],
.sa-earnings-calculator[data-ctype="recurring"] [data-ctype-only="one_off"],
.sa-earnings-calculator[data-basis="fixed"] [data-basis-only="percentage"],
.sa-earnings-calculator[data-basis="percentage"] [data-basis-only="fixed"],
.sa-earnings-calculator[data-time="off"] [data-time-only="on"],
.sa-earnings-calculator[data-time="on"] [data-time-only="off"],
.sa-earnings-calculator[data-rterm="fixed"] [data-rterm-only="lifetime"],
.sa-earnings-calculator[data-rterm="lifetime"] [data-rterm-only="fixed"],
.sa-earnings-calculator[data-basis="fixed"][data-ctype="one_off"] .saec-cps,
.sa-earnings-calculator [hidden] {
	display: none !important;
}

/* 11 Helpers and accessibility ------------------------------------------------------ */

.sa-earnings-calculator .saec-sr {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	border: 0 !important;
	white-space: nowrap !important;
}

/* Until the script has filled in the numbers, keep their space but don't show placeholders. */
.sa-earnings-calculator:not(.is-ready) [data-out] {
	visibility: hidden;
}

.sa-earnings-calculator [tabindex="-1"]:focus {
	outline: none;
}

.sa-earnings-calculator .saec-noscript {
	margin: 0 0 1.5em;
	padding: 1em;
	border-radius: var(--saec-radius);
	background: var(--saec-tint);
	font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
	.sa-earnings-calculator *,
	.sa-earnings-calculator *::before,
	.sa-earnings-calculator *::after {
		transition: none !important;
		animation: none !important;
	}
}

/* Windows high-contrast mode: keep selected options and the funnel bars visible. */
@media (forced-colors: active) {
	.sa-earnings-calculator .saec-option input:checked + span {
		outline: 3px solid Highlight;
		outline-offset: -5px;
	}

	.sa-earnings-calculator .saec-bar {
		border: 1px solid CanvasText;
	}
}