/**
 * BACP 3.1 — signup popup styles.
 *
 * DESIGN SOURCE OF TRUTH
 * ----------------------
 * Every value below is taken from the Partner Hub design system as compiled by
 * shc2-partner-dashboard/build/tailwind.config.js (Untitled UI palette on
 * Tailwind 3.4) and its component layer in build/input.css. Where a component
 * exists in the Hub, this file reproduces the compiled output 1:1:
 *
 *   .bacp31-btn--primary      → .btn-primary        (input.css)
 *   .bacp31-btn--secondary    → .btn-secondary      (input.css)
 *   .bacp31-input             → .input              (input.css, @tailwindcss/forms base)
 *   .bacp31-lic               → .shc-platform-card  (input.css)
 *   .bacp31-lic__cta          → .shc-platform-card__cta
 *   .bacp31-chip              → .shc-platform-pill
 *   .bacp31-badge--primary    → all-plans.php badge pill
 *   .bacp31-plan              → all-plans.php tier card (rounded-xl / ring-1 / ring-2 primary-600)
 *   .bacp31-plan__cta         → all-plans.php $btn_primary / $btn_secondary
 *   .bacp31-offer             → parts/cost-plus-bogo-banner.php (.shc-pp-cost-plus-bogo)
 *   .bacp31-alert--error      → parts/checkout-modal.php error block
 *   .bacp31-os                → Tailwind Plus v3.4 ecommerce/checkout-forms/
 *                               single_step_with_order_summary
 *   .bacp31-rail              → Tailwind Plus v3.4 navigation/progress-bars/
 *                               progress_bar + bullets_and_text
 *
 * The popup cannot enqueue the Hub's Tailwind build (its preflight and global
 * button/a/body rules break Salient chrome), so the recipes are re-expressed
 * as scoped BEM under #bacp31-root. Keep the two in sync: if a token changes in
 * tailwind.config.js, change it here.
 *
 * Deliberate divergence: form controls use the marketing scale (16px text,
 * 10/14px padding → 44px tall) rather than the Hub's dashboard scale (14px,
 * 8/12px → 38px). Same colours, radii, shadows and focus treatment — only the
 * touch target differs, because this is a full-screen conversion surface.
 */

/* ======================================================================
   Tokens — mirrors shc2-partner-dashboard/build/tailwind.config.js
   ====================================================================== */
#bacp31-root {
	/* gray (Untitled UI) */
	--bacp31-gray-25: #fcfcfd;
	--bacp31-gray-50: #f9fafb;
	--bacp31-gray-100: #f2f4f7;
	--bacp31-gray-200: #e4e7ec;
	--bacp31-gray-300: #d0d5dd;
	--bacp31-gray-400: #98a2b3;
	--bacp31-gray-500: #667085;
	--bacp31-gray-600: #475467;
	--bacp31-gray-700: #344054;
	--bacp31-gray-800: #1d2939;
	--bacp31-gray-900: #101828;

	/* primary (brand orange) */
	--bacp31-primary-25: #fefaf5;
	--bacp31-primary-50: #fef6ee;
	--bacp31-primary-100: #fdead7;
	--bacp31-primary-200: #f9dbaf;
	--bacp31-primary-500: #ef6820;
	--bacp31-primary-600: #e04f16;
	--bacp31-primary-700: #b93815;

	/* semantic */
	--bacp31-success-50: #ecfdf3;
	--bacp31-success-200: #a6f4c5;
	--bacp31-success-500: #12b76a;
	--bacp31-success-700: #027a48;
	--bacp31-error-50: #fef3f2;
	--bacp31-error-200: #fecdca;
	--bacp31-error-300: #fda29b;
	--bacp31-error-500: #f04438;
	--bacp31-error-600: #d92d20;
	--bacp31-error-700: #b42318;
	--bacp31-warning-50: #fffaeb;
	--bacp31-warning-600: #dc6803;
	--bacp31-warning-700: #b54708;

	/* Platform CTA black — .shc-platform-card__cta / .shc-pl-early-bird__cta */
	--bacp31-dark: #2e2e2e;
	--bacp31-dark-hover: var(--bacp31-gray-800);

	/* Platform themes (Untitled UI accent hues) */
	--bacp31-theme-skin: #d92d20;
	--bacp31-theme-body: #175cd3;
	--bacp31-theme-brain: #6941c6;

	/* surfaces */
	--bacp31-bg: var(--bacp31-gray-50);
	--bacp31-surface: #ffffff;

	/* radii — Tailwind rounded-md / -lg / -xl / -2xl */
	--bacp31-radius-md: 0.375rem;
	--bacp31-radius-lg: 0.5rem;
	--bacp31-radius-xl: 0.75rem;
	--bacp31-radius-2xl: 1rem;

	/* shadows */
	--bacp31-shadow-xs: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
	--bacp31-shadow-sm: 0 1px 3px 0 rgba(16, 24, 40, 0.1), 0 1px 2px 0 rgba(16, 24, 40, 0.06);
	--bacp31-shadow-md: 0 4px 8px -2px rgba(16, 24, 40, 0.1), 0 2px 4px -2px rgba(16, 24, 40, 0.06);
	--bacp31-shadow-lg: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.03);

	--bacp31-font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

	z-index: 100000 !important;
	font-family: var(--bacp31-font);
	color: var(--bacp31-gray-700);
	-webkit-font-smoothing: antialiased;
	box-sizing: border-box;
}

#bacp31-root *,
#bacp31-root *::before,
#bacp31-root *::after {
	box-sizing: border-box;
}

#bacp31-root[x-cloak],
#bacp31-root [x-cloak] {
	display: none !important;
}

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

#bacp31-root .bacp31-icon {
	width: 1.5rem;
	height: 1.5rem;
	display: block;
}

/* ======================================================================
   Shell — do not force display, Alpine x-show owns it
   ====================================================================== */
#bacp31-root.bacp31-root {
	position: fixed !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	overflow: hidden !important;
	background: var(--bacp31-bg) !important;
}

#bacp31-root .bacp31-shell {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 100%;
	background: var(--bacp31-bg);
}

#bacp31-root .bacp31-main {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 0;
	animation: bacp31-boot-in 0.3s ease-out both;
}

/* Open/close fade (Alpine x-transition class hooks) */
#bacp31-root.bacp31-fade-enter,
#bacp31-root.bacp31-fade-leave {
	transition: opacity 0.2s ease;
}
#bacp31-root.bacp31-fade-enter-start,
#bacp31-root.bacp31-fade-leave-end {
	opacity: 0;
}
#bacp31-root.bacp31-fade-enter-end,
#bacp31-root.bacp31-fade-leave-start {
	opacity: 1;
}

/* ======================================================================
   Header
   ====================================================================== */
#bacp31-root .bacp31-header {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	height: 4.5rem;
	padding: 0 1.5rem;
	background: var(--bacp31-surface);
	/* Separator is the progress bar under the rail — no double line. */
	border-bottom: 0;
}

@media (min-width: 640px) {
	#bacp31-root .bacp31-header {
		height: 5rem;
	}
}

#bacp31-root .bacp31-header__logo {
	display: block;
	height: 1.375rem;
	width: auto;
	max-width: 8.75rem;
	object-fit: contain;
}

/* Circular icon button — Tailwind Plus elements/buttons/circular_buttons */
#bacp31-root .bacp31-header__close {
	position: absolute;
	right: 1rem;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 2.5rem !important;
	height: 2.5rem !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 9999px !important;
	background: transparent !important;
	color: var(--bacp31-gray-400) !important;
	cursor: pointer !important;
	box-shadow: none !important;
	pointer-events: auto !important;
	transition: background-color 0.15s ease, color 0.15s ease;
}

#bacp31-root .bacp31-header__close:hover {
	background: var(--bacp31-gray-100) !important;
	color: var(--bacp31-gray-700) !important;
}

#bacp31-root .bacp31-header__close:focus-visible {
	outline: none;
	background: var(--bacp31-gray-100) !important;
	color: var(--bacp31-gray-700) !important;
	box-shadow: 0 0 0 4px var(--bacp31-gray-100) !important;
}

#bacp31-root .bacp31-header__close:disabled {
	opacity: 0.4;
	cursor: not-allowed !important;
}

@media (min-width: 640px) {
	#bacp31-root .bacp31-header__close {
		right: 1.5rem;
	}
}

/* ======================================================================
   Step rail + progress
   Fixed-height band: count + steps share one vertical center line.
   ====================================================================== */
#bacp31-root .bacp31-rail {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	background: var(--bacp31-surface);
	border-top: 1px solid var(--bacp31-gray-200);
}

#bacp31-root .bacp31-rail__inner {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	/* Fixed band height — text/dots sit on the vertical midpoint */
	height: 3rem;
	min-height: 3rem;
	max-width: 80rem;
	width: 100%;
	margin: 0 auto;
	padding: 0 1.5rem;
}

@media (min-width: 640px) {
	#bacp31-root .bacp31-rail__inner {
		height: 3.25rem;
		min-height: 3.25rem;
		padding: 0 2rem;
	}
}

#bacp31-root .bacp31-rail__count {
	margin: 0 !important;
	padding: 0 !important;
	flex-shrink: 0;
	display: inline-flex !important;
	align-items: center;
	justify-content: flex-start;
	height: 1.25rem;
	font-size: 0.75rem !important;
	font-weight: 600 !important;
	line-height: 1.25rem !important;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--bacp31-gray-500) !important;
	background: none !important;
	border: 0 !important;
}

#bacp31-root .bacp31-rail__steps {
	display: none;
	list-style: none;
	margin: 0 !important;
	padding: 0 !important;
	flex: 1 1 auto;
	align-items: center;
	justify-content: flex-end;
	gap: 1.25rem;
	height: 1.25rem;
}

@media (min-width: 768px) {
	#bacp31-root .bacp31-rail__steps {
		display: inline-flex;
	}
}

#bacp31-root .bacp31-rail__step {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 !important;
	padding: 0 !important;
	height: 1.25rem;
	list-style: none;
}

#bacp31-root .bacp31-rail__dot {
	box-sizing: border-box;
	width: 0.5rem;
	height: 0.5rem;
	flex-shrink: 0;
	border-radius: 9999px;
	background: var(--bacp31-gray-300);
	/* ring drawn inside so current step doesn't jump vertically */
	box-shadow: inset 0 0 0 0 transparent;
	transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

#bacp31-root .bacp31-rail__step.is-done .bacp31-rail__dot {
	background: var(--bacp31-primary-600);
}

#bacp31-root .bacp31-rail__step.is-current .bacp31-rail__dot {
	background: var(--bacp31-primary-600);
	/* outer glow without shifting layout */
	box-shadow: 0 0 0 3px var(--bacp31-primary-100);
}

#bacp31-root .bacp31-rail__label {
	display: inline-flex;
	align-items: center;
	height: 1.25rem;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.25rem;
	color: var(--bacp31-gray-500);
	white-space: nowrap;
	transition: color 0.2s ease;
}

#bacp31-root .bacp31-rail__step.is-done .bacp31-rail__label {
	color: var(--bacp31-gray-700);
}

#bacp31-root .bacp31-rail__step.is-current .bacp31-rail__label {
	color: var(--bacp31-primary-600);
	font-weight: 600;
}

/* Hairline progress under the fixed rail band */
#bacp31-root .bacp31-progress {
	width: 100%;
	height: 2px;
	overflow: hidden;
	background: var(--bacp31-gray-200);
	flex-shrink: 0;
}

#bacp31-root .bacp31-progress__bar {
	height: 100%;
	width: 0;
	background: var(--bacp31-primary-600);
	transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
	#bacp31-root .bacp31-progress__bar {
		transition: none;
	}
}

/* ======================================================================
   Body / layout
   ====================================================================== */
#bacp31-root .bacp31-body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	background: var(--bacp31-bg);
}

#bacp31-root .bacp31-body__inner {
	width: 100%;
	max-width: 42rem;
	margin: 0 auto;
	padding: 3rem 1.5rem 5rem;
}

@media (min-width: 640px) {
	#bacp31-root .bacp31-body__inner {
		padding: 4rem 2rem 6rem;
	}
}

#bacp31-root .bacp31-body__inner--wide {
	max-width: 80rem;
}

#bacp31-root .bacp31-step {
	width: 100%;
}

/* ---------- Hero ---------- */
#bacp31-root .bacp31-hero {
	max-width: 48rem;
}

#bacp31-root .bacp31-hero--wide {
	max-width: 56rem;
}

#bacp31-root .bacp31-hero--center {
	margin-left: auto;
	margin-right: auto;
	max-width: 40rem;
	text-align: center;
}

#bacp31-root .bacp31-title {
	margin: 0;
	outline: none;
	font-size: 1.875rem; /* text-3xl */
	font-weight: 600;
	line-height: 2.25rem;
	letter-spacing: -0.025em;
	color: var(--bacp31-gray-900);
	background: none;
}

@media (min-width: 640px) {
	#bacp31-root .bacp31-title {
		font-size: 2.25rem; /* text-4xl */
		line-height: 2.5rem;
	}
}

/* Section heads inside the funnel sit one notch down from the entry hero. */
#bacp31-root .bacp31-title--section {
	font-size: 1.5rem;
	line-height: 2rem;
}

@media (min-width: 640px) {
	#bacp31-root .bacp31-title--section {
		font-size: 1.875rem;
		line-height: 2.25rem;
	}
}

#bacp31-root .bacp31-subtitle {
	margin: 1rem 0 0;
	font-size: 1rem;
	line-height: 1.75rem;
	font-weight: 400;
	color: var(--bacp31-gray-600);
	background: none;
}

@media (min-width: 640px) {
	#bacp31-root .bacp31-subtitle {
		font-size: 1.125rem; /* text-lg/8 */
		line-height: 2rem;
	}
}

#bacp31-root .bacp31-subtitle--section {
	margin-top: 0.75rem;
	font-size: 0.9375rem;
	line-height: 1.625rem;
}

@media (min-width: 640px) {
	#bacp31-root .bacp31-subtitle--section {
		font-size: 1rem;
		line-height: 1.75rem;
	}
}

#bacp31-root .bacp31-subtitle strong {
	font-weight: 600;
	color: var(--bacp31-gray-900);
}

/* ======================================================================
   Alerts — checkout-modal error block / alerts/with_description
   ====================================================================== */
#bacp31-root .bacp31-alert {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	margin-top: 1.5rem;
	padding: 0.875rem 1rem;
	border: 1px solid transparent;
	border-radius: var(--bacp31-radius-lg);
	font-size: 0.875rem;
	line-height: 1.375rem;
}

#bacp31-root .bacp31-alert--tight {
	margin-top: 1.25rem;
}

#bacp31-root .bacp31-alert__icon {
	flex-shrink: 0;
	width: 1.25rem;
	height: 1.25rem;
	margin-top: 0.0625rem;
}

#bacp31-root .bacp31-alert__body {
	min-width: 0;
}

#bacp31-root .bacp31-alert__title {
	margin: 0;
	font-weight: 600;
	background: none;
	color: inherit;
}

#bacp31-root .bacp31-alert__text {
	margin: 0;
	background: none;
	color: inherit;
}

#bacp31-root .bacp31-alert__title + .bacp31-alert__text {
	margin-top: 0.25rem;
}

#bacp31-root .bacp31-alert__text a {
	color: inherit;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
	box-shadow: none !important;
	background: none !important;
	border: 0 !important;
	padding: 0 !important;
}

#bacp31-root .bacp31-alert--info {
	border-color: var(--bacp31-gray-200);
	background: var(--bacp31-gray-50);
	color: var(--bacp31-gray-600);
}

#bacp31-root .bacp31-alert--info .bacp31-alert__icon {
	color: var(--bacp31-gray-400);
}

#bacp31-root .bacp31-alert--info .bacp31-alert__title {
	color: var(--bacp31-gray-900);
}

#bacp31-root .bacp31-alert--error {
	border-color: var(--bacp31-error-200);
	background: var(--bacp31-error-50);
	color: var(--bacp31-error-700);
}

#bacp31-root .bacp31-alert--error .bacp31-alert__icon {
	color: var(--bacp31-error-600);
}

/* ======================================================================
   Forms
   ====================================================================== */
#bacp31-root .bacp31-form {
	margin-top: 2.5rem;
	max-width: 48rem;
	width: 100%;
}

/* grid grid-cols-1 gap-x-8 gap-y-6 sm:grid-cols-2 */
#bacp31-root .bacp31-grid {
	display: grid;
	grid-template-columns: 1fr;
	column-gap: 1.5rem;
	row-gap: 1.25rem;
}

@media (min-width: 640px) {
	#bacp31-root .bacp31-grid {
		grid-template-columns: 1fr 1fr;
		column-gap: 2rem;
		row-gap: 1.5rem;
	}
}

#bacp31-root .bacp31-stack {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	width: 100%;
}

@media (min-width: 640px) {
	#bacp31-root .bacp31-stack {
		gap: 1.5rem;
	}
}

#bacp31-root .bacp31-field {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
}

#bacp31-root .bacp31-field--full {
	grid-column: 1 / -1;
}

/* label: block text-sm/6 font-medium text-gray-700 */
#bacp31-root .bacp31-label {
	display: block;
	margin: 0;
	padding: 0;
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 500;
	color: var(--bacp31-gray-700);
	background: none;
}

#bacp31-root .bacp31-req {
	color: var(--bacp31-primary-600);
}

#bacp31-root .bacp31-control {
	margin-top: 0.375rem;
}

#bacp31-root .bacp31-error {
	margin: 0.375rem 0 0;
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: var(--bacp31-error-600);
	background: none;
}

#bacp31-root .bacp31-error--center {
	text-align: center;
	margin: 1.25rem 0 0;
}

/* .input — border gray-300, rounded-lg, shadow-xs, focus primary-500 */
#bacp31-root input[type='text'],
#bacp31-root input[type='email'],
#bacp31-root input[type='tel'],
#bacp31-root input[type='password'],
#bacp31-root input[type='number'],
#bacp31-root input[type='url'],
#bacp31-root select,
#bacp31-root textarea,
#bacp31-root .bacp31-input {
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0.625rem 0.875rem !important;
	border: 1px solid var(--bacp31-gray-300) !important;
	border-radius: var(--bacp31-radius-lg) !important;
	background: var(--bacp31-surface) !important;
	background-image: none !important;
	box-shadow: var(--bacp31-shadow-xs) !important;
	color: var(--bacp31-gray-900) !important;
	font-family: var(--bacp31-font) !important;
	font-size: 1rem !important;
	font-weight: 400 !important;
	line-height: 1.5rem !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	outline: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#bacp31-root input::placeholder,
#bacp31-root textarea::placeholder,
#bacp31-root .bacp31-input::placeholder {
	color: var(--bacp31-gray-400) !important;
	opacity: 1 !important;
}

#bacp31-root input:focus,
#bacp31-root textarea:focus,
#bacp31-root .bacp31-input:focus,
#bacp31-root select.bacp31-input:focus {
	border-color: var(--bacp31-primary-500) !important;
	box-shadow: var(--bacp31-shadow-xs), 0 0 0 1px var(--bacp31-primary-500) !important;
}

#bacp31-root .bacp31-field.is-invalid .bacp31-input {
	border-color: var(--bacp31-error-300) !important;
}

#bacp31-root .bacp31-field.is-invalid .bacp31-input:focus {
	border-color: var(--bacp31-error-500) !important;
	box-shadow: var(--bacp31-shadow-xs), 0 0 0 1px var(--bacp31-error-500) !important;
}

/* select — native control + Heroicons chevron */
#bacp31-root .bacp31-control--select {
	position: relative;
}

#bacp31-root .bacp31-select {
	padding-right: 2.75rem !important;
	cursor: pointer;
}

#bacp31-root .bacp31-select__chevron {
	pointer-events: none;
	position: absolute;
	right: 0.875rem;
	top: 50%;
	transform: translateY(-50%);
	width: 1rem;
	height: 1rem;
	color: var(--bacp31-gray-400);
}

#bacp31-root select.bacp31-input option[disabled] {
	color: var(--bacp31-gray-400);
}

/* Honeypot */
#bacp31-root .bacp31-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

/* ---------- Checkbox — checkout-modal recipe (size-4, primary-600) ---------- */
#bacp31-root .bacp31-check {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
}

#bacp31-root .bacp31-check__box {
	position: relative;
	display: grid;
	flex-shrink: 0;
	width: 1rem;
	height: 1rem;
	margin-top: 0.25rem;
	grid-template-columns: 1fr;
}

#bacp31-root .bacp31-check__input {
	grid-column: 1;
	grid-row: 1;
	width: 1rem !important;
	height: 1rem !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 1px solid var(--bacp31-gray-300) !important;
	border-radius: 0.25rem !important;
	background: var(--bacp31-surface) !important;
	box-shadow: none !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

#bacp31-root .bacp31-check__input:checked {
	border-color: var(--bacp31-primary-600) !important;
	background: var(--bacp31-primary-600) !important;
}

#bacp31-root .bacp31-check__input:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px var(--bacp31-surface), 0 0 0 4px var(--bacp31-primary-500) !important;
}

#bacp31-root .bacp31-check__icon {
	pointer-events: none;
	grid-column: 1;
	grid-row: 1;
	align-self: center;
	justify-self: center;
	width: 0.75rem;
	height: 0.75rem;
	color: #ffffff;
	opacity: 0;
}

#bacp31-root .bacp31-check__input:checked + .bacp31-check__icon {
	opacity: 1;
}

#bacp31-root .bacp31-check__label {
	font-size: 0.9375rem;
	line-height: 1.5rem;
	font-weight: 400;
	color: var(--bacp31-gray-600);
	cursor: pointer;
	background: none;
}

#bacp31-root .bacp31-check__label a {
	color: var(--bacp31-gray-900);
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 2px;
	box-shadow: none !important;
	background: none !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
}

#bacp31-root .bacp31-check__label a:hover {
	color: var(--bacp31-primary-700);
}

/* ======================================================================
   Buttons — .btn / .btn-primary / .btn-secondary from input.css
   ====================================================================== */
#bacp31-root button,
#bacp31-root .bacp31-btn {
	font-family: var(--bacp31-font) !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	cursor: pointer;
	text-transform: none !important;
	letter-spacing: normal !important;
}

#bacp31-root .bacp31-btn {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin: 0 !important;
	padding: 0.625rem 1rem !important;
	border: 1px solid transparent !important;
	border-radius: var(--bacp31-radius-lg) !important;
	font-size: 0.875rem !important;
	font-weight: 600 !important;
	line-height: 1.25rem !important;
	text-decoration: none !important;
	box-shadow: none !important;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease,
		box-shadow 0.15s ease;
}

/* Marketing-scale CTA (the funnel's step actions) */
#bacp31-root .bacp31-btn--lg,
#bacp31-root .bacp31-btn--grow {
	min-height: 2.75rem !important;
	padding: 0.75rem 1.125rem !important;
	font-size: 1rem !important;
	line-height: 1.5rem !important;
}

#bacp31-root .bacp31-btn--primary {
	border-color: var(--bacp31-primary-600) !important;
	background: var(--bacp31-primary-600) !important;
	background-image: none !important;
	color: #ffffff !important;
}

#bacp31-root .bacp31-btn--primary:hover {
	border-color: var(--bacp31-primary-700) !important;
	background: var(--bacp31-primary-700) !important;
	color: #ffffff !important;
}

#bacp31-root .bacp31-btn--primary:focus-visible {
	outline: none;
	box-shadow: 0 0 0 4px var(--bacp31-primary-100) !important;
}

#bacp31-root .bacp31-btn--secondary {
	border-color: var(--bacp31-gray-300) !important;
	background: var(--bacp31-surface) !important;
	background-image: none !important;
	color: var(--bacp31-gray-700) !important;
	box-shadow: var(--bacp31-shadow-xs) !important;
}

#bacp31-root .bacp31-btn--secondary:hover {
	background: var(--bacp31-gray-50) !important;
	color: var(--bacp31-gray-900) !important;
}

#bacp31-root .bacp31-btn--secondary:focus-visible {
	outline: none;
	box-shadow: var(--bacp31-shadow-xs), 0 0 0 4px var(--bacp31-gray-100) !important;
}

#bacp31-root .bacp31-btn:disabled,
#bacp31-root .bacp31-btn[disabled] {
	cursor: not-allowed !important;
	opacity: 0.6;
}

#bacp31-root .bacp31-btn--block {
	display: flex !important;
	width: 100% !important;
}

#bacp31-root .bacp31-btn--grow {
	flex: 1 1 0 !important;
	width: 100% !important;
}

#bacp31-root .bacp31-btn__icon {
	width: 1.25rem;
	height: 1.25rem;
	flex-shrink: 0;
	color: currentColor;
	opacity: 0.8;
}

#bacp31-root .bacp31-btn__icon--left {
	opacity: 0.7;
}

#bacp31-root .bacp31-actions {
	margin-top: 2rem;
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
}

#bacp31-root .bacp31-actions--nav {
	width: 100%;
	max-width: 40rem;
	margin: 2.5rem auto 0;
}

#bacp31-root .bacp31-actions__row {
	display: flex;
	flex-direction: column-reverse;
	gap: 0.75rem;
	width: 100%;
}

@media (min-width: 640px) {
	#bacp31-root .bacp31-actions__row {
		flex-direction: row;
		align-items: stretch;
		gap: 1rem;
	}
}

#bacp31-root .bacp31-login {
	margin: 0;
	text-align: center;
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: var(--bacp31-gray-500);
	background: none;
}

#bacp31-root .bacp31-login a {
	font-weight: 600;
	color: var(--bacp31-primary-600);
	text-decoration: none;
	box-shadow: none !important;
	background: none !important;
	border: 0 !important;
	padding: 0 !important;
}

#bacp31-root .bacp31-login a:hover {
	color: var(--bacp31-primary-700);
	text-decoration: underline;
}

/* Disclosure toggle ("Show details" / "Show all perks") */
#bacp31-root .bacp31-disclosure {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	width: 100% !important;
	margin: 1.25rem 0 0 !important;
	padding: 0.5rem 0.75rem !important;
	border: 0 !important;
	border-radius: var(--bacp31-radius-md) !important;
	background: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	color: var(--bacp31-primary-600) !important;
	font-family: var(--bacp31-font) !important;
	font-size: 0.875rem !important;
	font-weight: 600 !important;
	line-height: 1.25rem !important;
	text-transform: none !important;
	cursor: pointer !important;
	transition: background-color 0.15s ease, color 0.15s ease;
}

#bacp31-root .bacp31-disclosure:hover {
	background: var(--bacp31-primary-50) !important;
	color: var(--bacp31-primary-700) !important;
}

#bacp31-root .bacp31-disclosure:focus-visible {
	outline: none;
	box-shadow: 0 0 0 4px var(--bacp31-primary-100) !important;
}

#bacp31-root .bacp31-disclosure--muted {
	width: auto !important;
	justify-content: flex-start;
	padding-left: 0 !important;
	padding-right: 0 !important;
	color: var(--bacp31-gray-500) !important;
}

#bacp31-root .bacp31-disclosure--muted:hover {
	background: transparent !important;
	color: var(--bacp31-gray-900) !important;
}

#bacp31-root .bacp31-disclosure svg {
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
	transition: transform 0.15s ease;
}

#bacp31-root .bacp31-disclosure svg.is-open {
	transform: rotate(180deg);
}

/* ======================================================================
   Badges / chips
   ====================================================================== */
#bacp31-root .bacp31-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	flex-shrink: 0;
	padding: 0.25rem 0.625rem;
	border-radius: 9999px;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.25rem;
	white-space: nowrap;
}

/* all-plans.php: bg-primary-600/10 text-primary-600 */
#bacp31-root .bacp31-badge--primary {
	background: rgba(224, 79, 22, 0.1);
	color: var(--bacp31-primary-600);
}

#bacp31-root .bacp31-badge--success {
	background: var(--bacp31-success-50);
	color: var(--bacp31-success-700);
	box-shadow: inset 0 0 0 1px rgba(3, 152, 85, 0.2);
}

/* .shc-platform-pill — fit content; long labels wrap as a phrase, not full-width */
#bacp31-root .bacp31-chip {
	display: inline-flex;
	align-items: center;
	width: fit-content;
	max-width: 100%;
	padding: 0.375rem 0.75rem;
	border-radius: 9999px;
	background: var(--bacp31-gray-50);
	box-shadow: inset 0 0 0 1px rgba(102, 112, 133, 0.1);
	font-size: 0.75rem;
	line-height: 1.25rem;
	font-weight: 500;
	color: var(--bacp31-gray-600);
	white-space: normal;
	text-align: left;
	hyphens: none;
	overflow-wrap: anywhere;
	word-break: normal;
}

#bacp31-root .bacp31-chip--strong {
	background: var(--bacp31-gray-100);
	box-shadow: none;
	font-weight: 600;
	color: var(--bacp31-gray-700);
}

/* ======================================================================
   Empty state
   ====================================================================== */
#bacp31-root .bacp31-empty {
	margin-top: 2rem;
	padding: 2.5rem 1.5rem;
	border: 1px dashed var(--bacp31-gray-300);
	border-radius: var(--bacp31-radius-xl);
	background: var(--bacp31-surface);
	text-align: center;
}

#bacp31-root .bacp31-empty__text {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.5rem;
	color: var(--bacp31-gray-500);
	background: none;
}

/* ======================================================================
   Offer banner — .shc-pp-cost-plus-bogo
   ====================================================================== */
#bacp31-root .bacp31-offer {
	margin-top: 2rem;
	padding: 1.5rem;
	border-radius: var(--bacp31-radius-2xl);
	background: var(--bacp31-surface);
	box-shadow: inset 0 0 0 1px var(--bacp31-gray-200), var(--bacp31-shadow-xs);
}

@media (min-width: 640px) {
	#bacp31-root .bacp31-offer {
		padding: 2rem;
	}
}

/* badges/pill_with_border, warning tone (matches the Hub banner) */
#bacp31-root .bacp31-offer__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.25rem 0.625rem;
	border-radius: 9999px;
	background: var(--bacp31-warning-50);
	box-shadow: inset 0 0 0 1px rgba(220, 104, 3, 0.2);
	color: var(--bacp31-warning-700);
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1rem;
}

#bacp31-root .bacp31-offer__badge svg {
	width: 0.875rem;
	height: 0.875rem;
	flex-shrink: 0;
	color: var(--bacp31-warning-600);
}

#bacp31-root .bacp31-offer__title {
	margin: 1rem 0 0;
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 2rem;
	letter-spacing: -0.02em;
	color: var(--bacp31-gray-900);
	background: none;
}

@media (min-width: 640px) {
	#bacp31-root .bacp31-offer__title {
		font-size: 1.875rem;
		line-height: 2.25rem;
	}
}

#bacp31-root .bacp31-offer__text {
	margin: 1rem 0 0;
	font-size: 1rem;
	line-height: 1.75rem;
	color: var(--bacp31-gray-600);
	background: none;
}

@media (min-width: 640px) {
	#bacp31-root .bacp31-offer__text {
		font-size: 1.125rem;
		line-height: 2rem;
	}
}

#bacp31-root .bacp31-offer__text strong {
	font-weight: 600;
	color: var(--bacp31-gray-900);
}

/* ======================================================================
   Platform licenses — .shc-platform-card
   ====================================================================== */
#bacp31-root .bacp31-licenses {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.5rem;
	margin-top: 2rem;
	align-items: stretch;
	isolation: isolate;
}

@media (min-width: 768px) {
	#bacp31-root .bacp31-licenses {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 2rem;
	}
}

@media (min-width: 1280px) {
	#bacp31-root .bacp31-licenses {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* rounded-xl bg-white p-6 shadow-xs ring-1 ring-gray-200 xl:p-8 */
#bacp31-root .bacp31-lic {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	height: 100%;
	padding: 1.5rem;
	border: 0;
	border-radius: var(--bacp31-radius-xl);
	background: var(--bacp31-surface);
	box-shadow: inset 0 0 0 1px var(--bacp31-gray-200), var(--bacp31-shadow-xs);
	transition: box-shadow 0.15s ease;
}

@media (min-width: 1280px) {
	#bacp31-root .bacp31-lic {
		padding: 2rem;
	}
}

#bacp31-root .bacp31-lic:hover {
	box-shadow: inset 0 0 0 1px var(--bacp31-gray-300), var(--bacp31-shadow-md);
}

/* .shc-platform-card--owned: ring-2 ring-primary-600 */
#bacp31-root .bacp31-lic.is-selected {
	box-shadow: inset 0 0 0 2px var(--bacp31-primary-600), var(--bacp31-shadow-md);
}

#bacp31-root .bacp31-lic__header {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	min-width: 0;
}

/* No per-platform color stripes — clean white cards. */

#bacp31-root .bacp31-lic__heading {
	min-width: 0;
	flex: 1 1 auto;
}

/* .shc-platform-card__title: text-base/6 font-semibold uppercase tracking-wide */
#bacp31-root .bacp31-lic__name {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.5rem;
	letter-spacing: 0.025em;
	text-transform: uppercase;
	color: var(--bacp31-gray-900);
	background: none;
}

#bacp31-root .bacp31-lic__tagline {
	margin: 0.125rem 0 0;
	font-size: 0.875rem;
	line-height: 1.5rem;
	color: var(--bacp31-gray-500);
	background: none;
}

/* .shc-platform-card__owned-badge */
#bacp31-root .bacp31-lic__badge {
	flex-shrink: 0;
	white-space: nowrap;
	padding: 0.25rem 0.625rem;
	border-radius: 9999px;
	background: rgba(224, 79, 22, 0.1);
	color: var(--bacp31-primary-600);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.25rem;
}

#bacp31-root .bacp31-lic__price {
	margin: 1.25rem 0 0;
	display: flex;
	align-items: baseline;
	gap: 0.25rem;
	background: none;
}

#bacp31-root .bacp31-lic__amount {
	font-size: 2.25rem;
	font-weight: 600;
	line-height: 2.5rem;
	letter-spacing: -0.025em;
	color: var(--bacp31-gray-900);
}

#bacp31-root .bacp31-lic__period {
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.5rem;
	color: var(--bacp31-gray-600);
}

#bacp31-root .bacp31-lic__desc {
	margin: 1rem 0 0;
	font-size: 0.875rem;
	line-height: 1.5rem;
	color: var(--bacp31-gray-600);
	background: none;
	flex: 0 0 auto;
	/* Always shown — keep cards scannable with a soft clamp when collapsed */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	overflow: hidden;
}

#bacp31-root .bacp31-lic.is-expanded .bacp31-lic__desc {
	display: block;
	-webkit-line-clamp: unset;
	overflow: visible;
}

/* .shc-platform-card__cta-wrap: mt-6 min-h-[5.75rem] */
#bacp31-root .bacp31-lic__cta-wrap {
	margin-top: 1.5rem;
	min-height: 4.5rem;
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

/*
 * .shc-platform-card__cta — block w-full rounded-md bg-[#2E2E2E] px-3 py-2.5
 * text-center text-sm/6 font-semibold text-white shadow-sm hover:bg-gray-800
 */
#bacp31-root .bacp31-lic__cta {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	box-sizing: border-box !important;
	width: 100% !important;
	max-width: 100% !important;
	min-height: 2.75rem !important;
	margin: 0 !important;
	padding: 0.625rem 0.75rem !important;
	border: 0 !important;
	border-radius: var(--bacp31-radius-md) !important;
	background: var(--bacp31-dark) !important;
	background-image: none !important;
	color: #ffffff !important;
	font-family: var(--bacp31-font) !important;
	font-size: 0.875rem !important;
	font-weight: 600 !important;
	line-height: 1.5rem !important;
	text-align: center !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	cursor: pointer !important;
	box-shadow: var(--bacp31-shadow-sm) !important;
	transition: background-color 0.15s ease, box-shadow 0.15s ease;
	-webkit-appearance: none !important;
	appearance: none !important;
}

#bacp31-root .bacp31-lic__cta:hover {
	background: var(--bacp31-dark-hover) !important;
	color: #ffffff !important;
}

#bacp31-root .bacp31-lic__cta:focus-visible {
	outline: none;
	box-shadow: var(--bacp31-shadow-sm), 0 0 0 4px var(--bacp31-gray-200) !important;
}

#bacp31-root .bacp31-lic__cta-check {
	width: 1.125rem;
	height: 1.125rem;
	flex-shrink: 0;
}

#bacp31-root .bacp31-lic__cta.is-selected {
	background: var(--bacp31-primary-600) !important;
}

#bacp31-root .bacp31-lic__cta.is-selected:hover {
	background: var(--bacp31-primary-700) !important;
}

#bacp31-root .bacp31-lic__cta.is-selected:focus-visible {
	box-shadow: var(--bacp31-shadow-sm), 0 0 0 4px var(--bacp31-primary-100) !important;
}

/* .shc-platform-card__cta--waitlist: white + ring-gray-300 */
#bacp31-root .bacp31-lic__cta.is-waitlist {
	background: var(--bacp31-surface) !important;
	color: var(--bacp31-gray-900) !important;
	box-shadow: inset 0 0 0 1px var(--bacp31-gray-300), var(--bacp31-shadow-xs) !important;
}

#bacp31-root .bacp31-lic__cta.is-waitlist:hover {
	background: var(--bacp31-gray-50) !important;
	box-shadow: inset 0 0 0 1px var(--bacp31-gray-400), var(--bacp31-shadow-xs) !important;
}

/* .shc-platform-card__cta--joined */
#bacp31-root .bacp31-lic__cta.is-joined {
	background: var(--bacp31-gray-50) !important;
	color: var(--bacp31-gray-600) !important;
	box-shadow: inset 0 0 0 1px var(--bacp31-gray-200) !important;
}

#bacp31-root .bacp31-lic__meta {
	margin: 0.5rem 0 0;
	font-size: 0.75rem;
	line-height: 1.25rem;
	color: var(--bacp31-gray-500);
	text-align: center;
	background: none;
}

/* mt-6 space-y-3 border-t border-gray-200 pt-6 text-sm/6 text-gray-600 */
#bacp31-root .bacp31-lic__features {
	list-style: none;
	margin: 1.5rem 0 0;
	padding: 1.5rem 0 0;
	border-top: 1px solid var(--bacp31-gray-200);
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	flex: 1 1 auto;
}

#bacp31-root .bacp31-lic__features li {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	font-size: 0.875rem;
	line-height: 1.5rem;
	color: var(--bacp31-gray-600);
}

#bacp31-root .bacp31-lic__features li svg {
	flex-shrink: 0;
	width: 1.25rem;
	height: 1.5rem;
	color: var(--bacp31-gray-900);
}

#bacp31-root .bacp31-lic.is-selected .bacp31-lic__features li svg {
	color: var(--bacp31-primary-600);
}

#bacp31-root .bacp31-lic__features a {
	color: inherit;
	font-weight: 600;
	text-decoration: underline;
	box-shadow: none !important;
	background: none !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
}

#bacp31-root .bacp31-lic__section {
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--bacp31-gray-200);
}

/* .shc-platform-tags__heading */
#bacp31-root .bacp31-lic__section-title {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.25rem;
	letter-spacing: 0.025em;
	text-transform: uppercase;
	color: var(--bacp31-gray-500);
	background: none;
}

#bacp31-root .bacp31-lic__chips {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 0.5rem;
	margin-top: 0.75rem;
}

/* ======================================================================
   Purchase plans — all-plans.php tier card
   ====================================================================== */
#bacp31-root .bacp31-plans {
	display: grid;
	isolation: isolate;
	grid-template-columns: minmax(0, 1fr);
	gap: 2rem;
	margin-top: 2.5rem;
	align-items: stretch;
}

@media (min-width: 768px) {
	#bacp31-root .bacp31-plans {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1280px) {
	#bacp31-root .bacp31-plans {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* rounded-xl bg-white p-6 shadow-xs ring-1 ring-gray-200 xl:p-8 */
#bacp31-root .bacp31-plan {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	height: 100%;
	padding: 0;
	border: 0;
	border-radius: var(--bacp31-radius-xl);
	background: var(--bacp31-surface);
	box-shadow: inset 0 0 0 1px var(--bacp31-gray-200), var(--bacp31-shadow-xs);
	overflow: hidden;
	transition: box-shadow 0.15s ease;
}

#bacp31-root .bacp31-plan:hover {
	box-shadow: inset 0 0 0 1px var(--bacp31-gray-300), var(--bacp31-shadow-md);
}

/* Emphasised tier — same ring the Hub gives the current plan */
#bacp31-root .bacp31-plan.is-selected {
	z-index: 1;
	box-shadow: inset 0 0 0 2px var(--bacp31-primary-600), var(--bacp31-shadow-lg);
}

#bacp31-root .bacp31-plan__ribbon {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 2.25rem;
	padding: 0.375rem 1rem;
	background: var(--bacp31-dark);
	color: #ffffff;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.25rem;
	letter-spacing: 0.025em;
	text-transform: uppercase;
	text-align: center;
}

#bacp31-root .bacp31-plan.is-selected .bacp31-plan__ribbon {
	background: var(--bacp31-primary-600);
}

#bacp31-root .bacp31-plan__inner {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	padding: 1.5rem;
}

@media (min-width: 1280px) {
	#bacp31-root .bacp31-plan__inner {
		padding: 2rem;
	}
}

#bacp31-root .bacp31-plan__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 2rem;
}

/* text-lg/8 font-semibold text-gray-900 */
#bacp31-root .bacp31-plan__name {
	margin: 0;
	min-width: 0;
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 2rem;
	color: var(--bacp31-gray-900);
	background: none;
}

#bacp31-root .bacp31-plan__price {
	margin: 1rem 0 0;
	display: flex;
	align-items: baseline;
	gap: 0.25rem;
	background: none;
}

#bacp31-root .bacp31-plan__amount {
	font-size: 2.25rem;
	font-weight: 600;
	line-height: 2.5rem;
	letter-spacing: -0.025em;
	color: var(--bacp31-gray-900);
}

#bacp31-root .bacp31-plan__period {
	font-size: 0.875rem;
	line-height: 1.5rem;
	font-weight: 600;
	color: var(--bacp31-gray-600);
}

#bacp31-root .bacp31-plan__desc {
	margin: 1rem 0 0;
	min-height: 3rem;
	font-size: 0.875rem;
	line-height: 1.5rem;
	color: var(--bacp31-gray-600);
	background: none;
}

/* all-plans.php $btn_primary — mt-6 block w-full rounded-md bg-primary-600 */
#bacp31-root .bacp31-plan__cta {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	box-sizing: border-box !important;
	width: 100% !important;
	min-height: 2.75rem !important;
	margin: 1.5rem 0 0 !important;
	padding: 0.5rem 0.75rem !important;
	border: 0 !important;
	border-radius: var(--bacp31-radius-md) !important;
	background: var(--bacp31-primary-600) !important;
	background-image: none !important;
	color: #ffffff !important;
	font-family: var(--bacp31-font) !important;
	font-size: 0.875rem !important;
	font-weight: 600 !important;
	line-height: 1.5rem !important;
	text-align: center !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	cursor: pointer !important;
	box-shadow: var(--bacp31-shadow-sm) !important;
	transition: background-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
	-webkit-appearance: none !important;
	appearance: none !important;
}

#bacp31-root .bacp31-plan__cta:hover {
	background: var(--bacp31-primary-700) !important;
	color: #ffffff !important;
}

#bacp31-root .bacp31-plan__cta:focus-visible {
	outline: none;
	box-shadow: var(--bacp31-shadow-sm), 0 0 0 4px var(--bacp31-primary-100) !important;
}

/* $btn_secondary — outline ring for the already-chosen tier */
#bacp31-root .bacp31-plan__cta.is-selected {
	background: var(--bacp31-surface) !important;
	color: var(--bacp31-primary-600) !important;
	box-shadow: inset 0 0 0 1px var(--bacp31-primary-200) !important;
}

#bacp31-root .bacp31-plan__cta.is-selected:hover {
	background: var(--bacp31-primary-25) !important;
	color: var(--bacp31-primary-700) !important;
	box-shadow: inset 0 0 0 1px var(--bacp31-primary-500) !important;
}

#bacp31-root .bacp31-plan__cta-check {
	width: 1.125rem;
	height: 1.125rem;
	flex-shrink: 0;
}

#bacp31-root .bacp31-plan__funds {
	margin: 1rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.375rem;
	color: var(--bacp31-gray-500);
	background: none;
}

#bacp31-root .bacp31-plan__section {
	margin-top: 1.5rem;
}

/* mt-8 text-xs/6 font-semibold uppercase tracking-wide text-gray-500 */
#bacp31-root .bacp31-plan__section-title {
	display: flex;
	align-items: baseline;
	gap: 0.25rem;
	margin: 0 0 0.75rem;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.5rem;
	letter-spacing: 0.025em;
	text-transform: uppercase;
	color: var(--bacp31-gray-500);
	background: none;
}

#bacp31-root .bacp31-plan__section-title sup {
	font-size: 0.6875rem;
	font-weight: 500;
	line-height: 1;
	color: var(--bacp31-gray-400);
}

/* mt-3 space-y-3 text-sm/6 text-gray-600 */
#bacp31-root .bacp31-plan__perks {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

#bacp31-root .bacp31-plan__perks li {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	font-size: 0.875rem;
	line-height: 1.5rem;
	color: var(--bacp31-gray-600);
}

#bacp31-root .bacp31-plan__perks li svg {
	flex-shrink: 0;
	width: 1.25rem;
	height: 1.5rem;
	color: var(--bacp31-primary-600);
}

/* Push the disclosure to the bottom so cards line up */
#bacp31-root .bacp31-plan .bacp31-disclosure {
	margin-top: auto !important;
	padding-top: 1.25rem !important;
}

/* ======================================================================
   Cost Plus included panel (license path)
   ====================================================================== */
#bacp31-root .bacp31-included {
	width: 100%;
	max-width: 40rem;
	margin: 0 auto;
}

#bacp31-root .bacp31-included__panel {
	margin-top: 2rem;
	padding: 1.5rem;
	border-radius: var(--bacp31-radius-xl);
	background: var(--bacp31-surface);
	box-shadow: inset 0 0 0 1px var(--bacp31-gray-200), var(--bacp31-shadow-xs);
}

@media (min-width: 640px) {
	#bacp31-root .bacp31-included__panel {
		padding: 2rem;
	}
}

#bacp31-root .bacp31-included__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem 1.5rem;
}

#bacp31-root .bacp31-included__titles {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
	min-width: 0;
}

#bacp31-root .bacp31-included__name {
	margin: 0;
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 2rem;
	color: var(--bacp31-gray-900);
	background: none;
}

#bacp31-root .bacp31-included__price {
	margin: 0;
	display: flex;
	align-items: baseline;
	gap: 0.25rem;
	background: none;
}

#bacp31-root .bacp31-included__amount {
	font-size: 2.25rem;
	font-weight: 600;
	letter-spacing: -0.025em;
	line-height: 2.5rem;
	color: var(--bacp31-gray-900);
}

#bacp31-root .bacp31-included__period {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--bacp31-gray-600);
}

#bacp31-root .bacp31-included__lead {
	margin: 1rem 0 0;
	font-size: 0.9375rem;
	line-height: 1.5rem;
	color: var(--bacp31-gray-600);
	background: none;
}

#bacp31-root .bacp31-included__list {
	list-style: none;
	margin: 1.5rem 0 0;
	padding: 1.5rem 0 0;
	border-top: 1px solid var(--bacp31-gray-200);
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

#bacp31-root .bacp31-included__list li {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	font-size: 0.875rem;
	line-height: 1.5rem;
	color: var(--bacp31-gray-600);
}

#bacp31-root .bacp31-included__list li svg {
	flex-shrink: 0;
	width: 1.25rem;
	height: 1.5rem;
	color: var(--bacp31-success-500);
}

#bacp31-root .bacp31-included__extra {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--bacp31-gray-100);
}

#bacp31-root .bacp31-included__desc {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.5rem;
	color: var(--bacp31-gray-500);
	background: none;
}

#bacp31-root .bacp31-included__via {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--bacp31-gray-200);
}

#bacp31-root .bacp31-included__via-label {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.025em;
	text-transform: uppercase;
	color: var(--bacp31-gray-500);
}

#bacp31-root .bacp31-included__via-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
}

/* ======================================================================
   Payment step — order summary + card fields
   ====================================================================== */
#bacp31-root .bacp31-step--pay {
	max-width: 36rem;
	margin: 0 auto;
	width: 100%;
}

#bacp31-root .bacp31-os-wrap {
	margin-top: 2rem;
}

#bacp31-root .bacp31-os__title {
	margin: 0 0 1rem;
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.75rem;
	color: var(--bacp31-gray-900);
	background: none;
}

/* .card — rounded-xl border-gray-200 bg-white shadow-xs */
#bacp31-root .bacp31-os {
	border-radius: var(--bacp31-radius-xl);
	background: var(--bacp31-surface);
	box-shadow: inset 0 0 0 1px var(--bacp31-gray-200), var(--bacp31-shadow-xs);
	overflow: hidden;
}

#bacp31-root .bacp31-os__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* divide-y divide-gray-200 */
#bacp31-root .bacp31-os__item {
	padding: 1.25rem 1.5rem;
	border-bottom: 1px solid var(--bacp31-gray-200);
}

#bacp31-root .bacp31-os__item:last-child {
	border-bottom: 0;
}

#bacp31-root .bacp31-os__section-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 0.75rem;
}

#bacp31-root .bacp31-os__eyebrow {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.25rem;
	letter-spacing: 0.025em;
	text-transform: uppercase;
	color: var(--bacp31-gray-500);
	background: none;
}

#bacp31-root .bacp31-os__edit {
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	color: var(--bacp31-primary-600) !important;
	font-size: 0.75rem !important;
	font-weight: 600 !important;
	line-height: 1.25rem !important;
	text-decoration: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	cursor: pointer !important;
	font-family: var(--bacp31-font) !important;
}

#bacp31-root .bacp31-os__edit:hover {
	color: var(--bacp31-primary-700) !important;
	text-decoration: underline !important;
	text-underline-offset: 2px !important;
}

#bacp31-root .bacp31-os__amt {
	margin: 0;
	flex: 0 0 auto;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.25rem;
	color: var(--bacp31-gray-900);
	white-space: nowrap;
	background: none;
}

#bacp31-root .bacp31-os__product {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
}

#bacp31-root .bacp31-os__product + .bacp31-os__product {
	margin-top: 0.75rem;
}

#bacp31-root .bacp31-os__product-main {
	min-width: 0;
	flex: 1 1 auto;
}

#bacp31-root .bacp31-os__name {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.25rem;
	color: var(--bacp31-gray-900);
	background: none;
}

#bacp31-root .bacp31-os__dot {
	width: 0.375rem;
	height: 0.375rem;
	border-radius: 9999px;
	background: var(--bacp31-success-500);
	flex-shrink: 0;
}

#bacp31-root .bacp31-os__meta {
	margin: 0.25rem 0 0 0.875rem;
	font-size: 0.8125rem;
	line-height: 1.25rem;
	color: var(--bacp31-gray-500);
	background: none;
}

#bacp31-root .bacp31-os__bonus {
	margin: 0.375rem 0 0 0.875rem;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.25rem;
	color: var(--bacp31-success-700);
	background: none;
}

#bacp31-root .bacp31-os__line-amt {
	margin: 0;
	flex: 0 0 auto;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--bacp31-gray-900);
	white-space: nowrap;
	background: none;
}

/* Coupon */
#bacp31-root .bacp31-os__promo {
	padding: 1rem 1.5rem;
	border-top: 1px solid var(--bacp31-gray-200);
	background: var(--bacp31-gray-50);
}

#bacp31-root .bacp31-os__promo-row {
	display: flex;
	gap: 0.75rem;
	align-items: stretch;
}

#bacp31-root .bacp31-os__promo-input {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 0.875rem !important;
	background: var(--bacp31-surface) !important;
}

#bacp31-root .bacp31-os__promo-btn {
	flex: 0 0 auto !important;
}

/* Totals */
#bacp31-root .bacp31-os__was {
	display: block;
	font-size: 0.75rem;
	font-weight: 400;
	color: var(--bacp31-ink-subtle, var(--bacp31-gray-400));
	text-decoration: line-through;
}

#bacp31-root .bacp31-os__totals-stack {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

#bacp31-root .bacp31-os__sub-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	font-size: 0.875rem;
	line-height: 1.25rem;
}

#bacp31-root .bacp31-os__sub-row dt {
	margin: 0;
	color: var(--bacp31-gray-500);
}

#bacp31-root .bacp31-os__sub-row dd {
	margin: 0;
	font-variant-numeric: tabular-nums;
	color: var(--bacp31-gray-700);
}

#bacp31-root .bacp31-os__sub-row--credit dd {
	color: var(--bacp31-success-700);
	font-weight: 600;
}

#bacp31-root .bacp31-os__totals-stack .bacp31-os__total-row {
	margin-top: 0.375rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--bacp31-gray-200);
}

#bacp31-root .bacp31-os__totals {
	margin: 0;
	padding: 1.25rem 1.5rem;
	border-top: 1px solid var(--bacp31-gray-200);
	background: var(--bacp31-gray-50);
}

#bacp31-root .bacp31-os__total-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
}

#bacp31-root .bacp31-os__total-row dt {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.5rem;
	color: var(--bacp31-gray-900);
}

#bacp31-root .bacp31-os__total-row dd {
	margin: 0;
	text-align: right;
}

#bacp31-root .bacp31-os__total-row dd span {
	display: block;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.5rem;
	color: var(--bacp31-gray-900);
}

#bacp31-root .bacp31-os__pending {
	display: block;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--bacp31-gray-500);
}

#bacp31-root .bacp31-os__total-row dd small {
	display: block;
	margin-top: 0.25rem;
	font-size: 0.75rem;
	font-weight: 400;
	color: var(--bacp31-gray-500);
}

/* ---------- Card fields ---------- */
#bacp31-root .bacp31-pay {
	margin-top: 2.5rem;
	padding-top: 2rem;
	border-top: 1px solid var(--bacp31-gray-200);
}

#bacp31-root .bacp31-pay__title {
	margin: 0;
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.75rem;
	color: var(--bacp31-gray-900);
	background: none;
}

#bacp31-root .bacp31-pay__hint {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	margin: 0.5rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.25rem;
	color: var(--bacp31-gray-500);
	background: none;
}

#bacp31-root .bacp31-pay__hint svg {
	flex-shrink: 0;
	width: 1rem;
	height: 1rem;
	margin-top: 0.125rem;
	color: var(--bacp31-gray-400);
}

#bacp31-root .bacp31-pay__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem 1rem;
	margin-top: 1.5rem;
}

@media (min-width: 640px) {
	#bacp31-root .bacp31-pay__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	#bacp31-root .bacp31-pay__number,
	#bacp31-root .bacp31-pay__name {
		grid-column: 1 / -1;
	}
	#bacp31-root .bacp31-pay__expiry {
		grid-column: span 3;
	}
	#bacp31-root .bacp31-pay__cvc {
		grid-column: span 1;
	}
}

/* Stripe Element host — matches .bacp31-input exactly */
#bacp31-root .bacp31-stripe {
	min-height: 2.75rem;
	padding: 0.75rem 0.875rem;
	border: 1px solid var(--bacp31-gray-300);
	border-radius: var(--bacp31-radius-lg);
	background: var(--bacp31-surface);
	box-shadow: var(--bacp31-shadow-xs);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#bacp31-root .bacp31-stripe.StripeElement--focus {
	border-color: var(--bacp31-primary-500);
	box-shadow: var(--bacp31-shadow-xs), 0 0 0 1px var(--bacp31-primary-500);
}

#bacp31-root .bacp31-stripe.StripeElement--invalid {
	border-color: var(--bacp31-error-500);
}

#bacp31-root .bacp31-pay__actions {
	margin-top: 2rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

#bacp31-root .bacp31-pay-legal {
	margin: 0.5rem 0 0;
	text-align: center;
	font-size: 0.8125rem;
	line-height: 1.25rem;
	color: var(--bacp31-gray-500);
	background: none;
}

#bacp31-root .bacp31-pay-legal a {
	color: var(--bacp31-gray-700);
	text-decoration: underline;
	text-underline-offset: 2px;
	font-weight: 500;
	box-shadow: none !important;
	background: none !important;
	border: 0 !important;
	padding: 0 !important;
}

/* ======================================================================
   Success / request-received
   ====================================================================== */
#bacp31-root .bacp31-step--done {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 50vh;
}

#bacp31-root .bacp31-done {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	max-width: 34rem;
	margin: 0 auto;
	text-align: center;
	animation: bacp31-boot-in 0.35s ease-out both;
}

#bacp31-root .bacp31-done__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 9999px;
	background: var(--bacp31-success-50);
	color: var(--bacp31-success-700);
	box-shadow: 0 0 0 6px rgba(18, 183, 106, 0.08);
}

#bacp31-root .bacp31-done__mark svg {
	width: 1.75rem;
	height: 1.75rem;
}

#bacp31-root .bacp31-done__foot {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	margin-top: 0.5rem;
	width: 100%;
}

#bacp31-root .bacp31-done__list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem 1.25rem;
	margin: 0;
	padding: 0;
}

#bacp31-root .bacp31-done__list li {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.5rem;
	color: var(--bacp31-gray-700);
}

#bacp31-root .bacp31-done__list li svg {
	width: 1.125rem;
	height: 1.125rem;
	color: var(--bacp31-success-500);
}

#bacp31-root .bacp31-done__fallback {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: var(--bacp31-gray-500);
	background: none;
}

#bacp31-root .bacp31-done__fallback a {
	font-weight: 600;
	color: var(--bacp31-primary-600);
	text-decoration: none;
	box-shadow: none !important;
	background: none !important;
	border: 0 !important;
	padding: 0 !important;
}

#bacp31-root .bacp31-done__fallback a:hover {
	text-decoration: underline;
}

/* ======================================================================
   Boot loader + spinner
   ====================================================================== */
@keyframes bacp31-spin {
	to {
		transform: rotate(360deg);
	}
}

@keyframes bacp31-boot-in {
	from {
		opacity: 0;
		transform: translateY(6px) scale(0.99);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

#bacp31-root .bacp31-spinner {
	display: block;
	flex-shrink: 0;
	color: var(--bacp31-primary-600);
	animation: bacp31-spin 0.75s linear infinite;
}

#bacp31-root .bacp31-spinner--lg {
	width: 2.25rem;
	height: 2.25rem;
}

#bacp31-root .bacp31-spinner--btn {
	width: 1.125rem;
	height: 1.125rem;
	color: currentColor;
}

#bacp31-root .bacp31-spinner__track {
	opacity: 0.25;
}

#bacp31-root .bacp31-spinner__head {
	opacity: 0.9;
}

#bacp31-root .bacp31-boot {
	position: absolute;
	inset: 0;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--bacp31-bg);
}

#bacp31-root .bacp31-boot__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.25rem;
	padding: 2rem;
	animation: bacp31-boot-in 0.35s ease-out both;
}

#bacp31-root .bacp31-boot__logo {
	display: block;
	height: 1.375rem;
	width: auto;
	max-width: 8.75rem;
	object-fit: contain;
}

#bacp31-root .bacp31-boot__label {
	margin: 0;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.25rem;
	color: var(--bacp31-gray-500);
	background: none;
}

@media (prefers-reduced-motion: reduce) {
	#bacp31-root .bacp31-spinner {
		animation-duration: 2s;
	}
	#bacp31-root .bacp31-main,
	#bacp31-root .bacp31-boot__inner,
	#bacp31-root .bacp31-done {
		animation: none;
	}
}