/* Native radios keep keyboard semantics on the zero-build landing. */
.billing-toggle {
	display: flex;
	width: fit-content;
	max-width: 100%;
	gap: 4px;
	padding: 5px;
	margin: 34px auto 0;
	border: 1px solid var(--line-d);
	border-radius: 999px;
	background: var(--paper);
}
.billing-toggle[hidden], .billing-note[hidden] { display: none; }
.billing-toggle label { position: relative; cursor: pointer; }
.billing-toggle input {
	position: absolute;
	opacity: 0;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	cursor: pointer;
}
.billing-toggle span {
	display: grid;
	place-items: center;
	min-height: 44px;
	min-width: 112px;
	padding: 10px 24px;
	border-radius: 999px;
	color: var(--ink-d);
	font-weight: 600;
}
.billing-toggle input:checked + span { background: var(--brand-violet); color: #fff; }
.billing-toggle input:focus-visible + span { outline: 3px solid var(--brand-violet); outline-offset: 4px; }
.billing-note { margin: 12px auto 0; text-align: center; color: var(--muted-d); font-size: 0.875rem; }

/* Keep the actual charge visible alongside the monthly equivalent on phones. */
#module-configurator-dialog .cfg-sum-year { display: block; }
.billing-contact { display: block; font-size: 0.8rem; color: var(--muted-d); }

/* Compare like-for-like monthly equivalents; the annual invoice stays below. */
.pack-comparison {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	margin-block-start: 8px;
	font-size: 0.875rem;
}
.pack-comparison[hidden] { display: none; }
.pack-regular { color: var(--muted-d); }
.pack-regular s {
	display: inline-block;
	margin-inline: 4px;
	font-size: 1.15em;
	font-weight: 600;
	text-decoration-thickness: 2px;
}
.pack-saving {
	padding: 6px 10px;
	border-radius: 999px;
	color: var(--brand-violet);
	background: var(--paper);
	font-weight: 600;
}
.pack-comparison :is(s, b) { unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
#pricing .pack-card--premium .pack-regular { color: var(--brand-gray); }
#pricing .pack-card--premium .pack-saving { color: var(--brand-navy); background: var(--brand-lavender); }