/* Pricing page template. */

.ml-pricing {
	--ml-pricing-radius: 16px;

	/* Card palette measured on the current multilogin.com/pricing cards. */
	--ml-plan-heading: #0f172a;
	--ml-plan-body: #363636;
	--ml-plan-muted: #7588a3;
	--ml-plan-label: #8293ac;
	--ml-plan-off: #8392a4;
	--ml-plan-off-icon: #cbd5e1;
	--ml-plan-border: #f1eded;
	--ml-plan-control-border: #e2e8f0;
	--ml-plan-tint: #f0f6ff;
	--ml-pt-heading: #333333;
	--ml-pt-text: #1a1a1a;
	--ml-pt-border: #dee0e3;
	--ml-pt-zebra: #f3f4f5;
	--ml-pt-no: #838b9a;
}

.ml-pricing .ml-landing-block__inner {
	width: min(100% - 48px, var(--site-width));
}

/* Price and bonus variants are toggled with the hidden attribute, so it has to
   beat the flex display rules below. */
.ml-pricing [hidden] {
	display: none !important;
}

/* Jump targets (the campaign banner's "Pick a plan" and "Buy add-ons"): land
   below the sticky header and any campaign ribbon in it, with room for the
   plan cards' corner badges. WordPress pads the scroll for the admin bar. */
.ml-pricing-plans,
.ml-pricing-packages {
	scroll-margin-top: calc(72px + var(--ml-ribbon-h, 0px) + 24px);
}

.ml-pricing-hero,
.ml-pricing-addons,
.ml-pricing-packages,
.ml-pricing-compare,
.ml-pricing-enterprise,
.ml-pricing-faq {
	width: 100%;
}

.ml-pricing-hero {
	position: relative;
	padding: 56px 0 92px;
}

/* Side glows, same as Hero Centered on the homepage. Campaign heroes carry
   their own artwork, so they skip them. */
.ml-pricing-hero:not(.is-campaign)::before,
.ml-pricing-hero:not(.is-campaign)::after {
	position: absolute;
	top: 0;
	z-index: 0;
	display: block;
	width: 25%;
	height: 100%;
	content: "";
	pointer-events: none;
}

.ml-pricing-hero:not(.is-campaign)::before {
	left: 0;
	background: radial-gradient(ellipse at 0% 50%, #91b9f4 0%, #91b9f4aa 18%, #91b9f438 49%, #ffffff00 70%);
}

.ml-pricing-hero:not(.is-campaign)::after {
	right: 0;
	background: radial-gradient(ellipse at 100% 50%, #d9bdf2 0%, #d9bdf2aa 18%, #d9bdf238 49%, #ffffff00 70%);
}

.ml-pricing-addons,
.ml-pricing-packages,
.ml-pricing-compare {
	padding: 92px 0 0;
}

.ml-pricing-faq {
	padding: 92px 0 0;
}

.ml-pricing-faq {
	padding-bottom: 92px;
}

/* FAQ answers carry migrated markup (lists, links, emphasis). */
.ml-pricing-faq .ml-faq__answer ul,
.ml-pricing-faq .ml-faq__answer ol {
	margin: 0 0 12px;
	padding-left: 22px;
	color: var(--color-text);
}

.ml-pricing-faq .ml-faq__answer li {
	margin: 0 0 6px;
}

.ml-pricing-faq .ml-faq__answer li:last-child {
	margin-bottom: 0;
}

.ml-pricing-faq .ml-faq__answer a {
	color: var(--color-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ml-pricing-faq .ml-faq__answer strong {
	font-weight: 700;
	color: var(--color-text);
}

/* Hero
--------------------------------------------- */

.ml-pricing-hero .ml-landing-block__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.ml-pricing-hero__intro {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}

.ml-pricing-hero__title {
	margin: 0;
	max-width: 900px;
	font-size: 64px;
	font-weight: 800;
	line-height: 1.22;
	text-align: center;
	color: var(--ml-plan-heading);
}

.ml-pricing-hero__copy {
	margin: 16px 0 0;
	max-width: 960px;
	text-wrap: pretty;
	font-size: 20px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0.012em;
	text-align: center;
	color: var(--ml-plan-body);
}

.ml-pricing-hero__note {
	margin: 32px 0 0;
	max-width: 920px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.5;
	text-align: center;
	text-wrap: balance;
	color: var(--ml-plan-muted);
}

/* Billing switch
--------------------------------------------- */

.ml-pricing-switch {
	position: relative;
	display: inline-flex;
	flex-wrap: nowrap;
	gap: 4px;
	max-width: 100%;
	margin: 32px 0 0;
	padding: 4px;
	border-radius: 12px;
	background: var(--color-surface-soft);
}

/* The white pill slides between the options; js/pricing.js measures the active
   button and hands the geometry over in these custom properties. */
.ml-pricing-switch__thumb {
	position: absolute;
	top: 0;
	left: 0;
	width: var(--ml-switch-w, 0);
	height: var(--ml-switch-h, 0);
	border-radius: 8px;
	background: var(--color-surface);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
	transform: translate(var(--ml-switch-x, 0), var(--ml-switch-y, 0));
	transition: transform .25s ease, width .25s ease, height .25s ease;
	pointer-events: none;
}

.ml-pricing-switch__option {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	flex: 0 1 auto;
	gap: 8px;
	min-width: 0;
	min-height: 40px;
	padding: 8px 20px;
	border: none;
	border-radius: 8px;
	background: transparent;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.25;
	white-space: nowrap;
	color: var(--ml-plan-body);
	cursor: pointer;
}

/* Label may wrap on narrow viewports; badge must never shrink/clip. */
.ml-pricing-switch__option > span:not(.ml-pricing-switch__badge) {
	min-width: 0;
}

.ml-pricing-switch__option:hover {
	color: var(--color-primary);
}

.ml-pricing-switch__option[aria-pressed="true"] {
	color: var(--color-primary);
}

/* No JS: the active option keeps a static pill of its own. */
.ml-pricing-switch__thumb:not([style])~.ml-pricing-switch__option[aria-pressed="true"] {
	background: var(--color-surface);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

@media (prefers-reduced-motion: reduce) {

	.ml-pricing-switch__thumb,
	.ml-odo__track.is-rolling,
	.ml-odo__cell.is-sizing,
	.ml-line-swap__track.is-sliding,
	.ml-line-swap.is-sizing,
	.ml-plan__feature-icon {
		transition: none;
	}
}

.ml-pricing-switch__option:focus-visible {
	outline: 3px solid rgba(5, 64, 247, 0.2);
	outline-offset: 2px;
}



.ml-pricing-switch__badge {
	flex-shrink: 0;
	padding: 4px 6px;
	border-radius: 6px;
	background: #FEE4E2;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	color: #F65053;
}

/* Plan cards
   Sizes, spacing and colours mirror the current multilogin.com/pricing cards.
--------------------------------------------- */

.ml-pricing-plans {
	width: 100%;
	max-width: 1000px;
	margin: 40px 0 0;
}

/* Desktop / destroyed Splide: force the 3-col grid. Splide core sets
   `.splide.is-initialized:not(.is-active) .splide__list { display: block }`
   which would otherwise stack the cards full-width. */
.ml-pricing-plans .splide__track {
	overflow: visible;
}

.ml-pricing-plans.splide .splide__list,
.ml-pricing-plans.splide.is-initialized:not(.is-active) .splide__list,
.ml-pricing-plans.splide.is-destroyed .splide__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: stretch;
	gap: 20px;
	height: auto;
	margin: 0;
	padding: 0;
}

.ml-pricing-plans.splide.is-initialized:not(.is-active) .splide__slide,
.ml-pricing-plans.splide.is-destroyed .splide__slide {
	width: auto !important;
	margin: 0 !important;
}

.ml-plan {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 20px;
	border: 2px solid var(--ml-plan-border);
	border-radius: 12px;
	background: var(--color-surface);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
	text-align: center;
}

.ml-plan.is-featured {
	border-color: var(--color-primary);
}

.ml-plan__badge {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 4px 8px;
	border-radius: 6px;
	background: var(--color-primary);
	font-size: 10px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	white-space: nowrap;
	color: #fff;
}

/* The free card's badge follows its purple CTA rather than the blue accent. */
.ml-plan--free .ml-plan__badge {
	background: var(--color-accent);
}

.ml-plan__name {
	margin: 0;
	font-size: 14px;
	font-weight: 800;
	line-height: 15px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--ml-plan-muted);
}

/* align-self shrinks the heading to its text, so the gradient runs across the
   word itself rather than the full card width. */
.ml-plan[data-accent="primary"] .ml-plan__name {
	align-self: center;
	background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-accent) 100%);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
}

/* Price
--------------------------------------------- */

.ml-plan__pricing {
	margin: 16px 0 0;
}

.ml-plan__price,
.ml-plan__amount-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: 4px;
}

/* With JS the amount and note are hoisted into persistent elements so they can
   animate; the copies left inside the swapped price nodes are then redundant. */
.ml-pricing.is-enhanced .ml-plan__price .ml-plan__amount,
.ml-pricing.is-enhanced .ml-plan__price .ml-plan__per,
.ml-pricing.is-enhanced .ml-plan__price .ml-plan__price-note {
	display: none;
}

.ml-plan__amount {
	font-size: 40px;
	font-weight: 800;
	line-height: 1;
	color: var(--ml-plan-heading);
}

/* Odometer: each character sits in a 1em window; changed cells roll a two-line
   track vertically. */
.ml-odo {
	display: inline-flex;
	align-items: flex-end;
	vertical-align: baseline;
	/* Fixed-width digits keep the row from jittering as numbers roll. */
	font-variant-numeric: tabular-nums;
	/* Width follows the cells; each added / dropped cell animates its own width,
	   so the number widens and narrows without the host ever clipping it. */
}

/* Currency sits beside the roller and never joins a rolling cell, so a gained
   or dropped digit cannot shove "$" onto a digit track. */
.ml-odo__prefix {
	display: inline-block;
	height: 1em;
	line-height: 1;
}

.ml-odo__cell {
	display: inline-block;
	height: 1em;
	/* Clips the two-line track vertically during a roll and the cell itself
	   horizontally while it grows in or collapses out. */
	overflow: hidden;
	line-height: 1;
}

.ml-odo__cell.is-sizing {
	transition: width .42s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Full-line vertical swap (annually price <-> Billed monthly). While swapping the
   host clips the two-line track; each line keeps its natural height and the host
   height tweens old -> new so the content below eases instead of jumping. */
.ml-line-swap {
	overflow: hidden;
}

.ml-line-swap.is-sizing {
	transition: height .42s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.ml-line-swap__track {
	display: block;
}

.ml-line-swap__track.is-sliding {
	transition: transform .42s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.ml-line-swap__line {
	display: block;
	overflow: hidden;
}

.ml-odo__track {
	display: block;
}

.ml-odo__track>span {
	display: block;
	height: 1em;
	line-height: 1;
	white-space: pre;
}

.ml-odo__track.is-rolling {
	transition: transform .42s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.ml-plan__per {
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	color: var(--ml-plan-muted);
}

/* Sits tight under the price (one group); display:block so it owns its line
   both inside the no-JS flex price node and as the hoisted persistent element. */
.ml-plan__price-note {
	display: block;
	flex: 0 0 100%;
	margin-top: 6px;
	font-size: 15px;
	font-weight: 800;
	line-height: 1;
	color: var(--ml-plan-muted);
}

/* Without JS one paragraph per tier is rendered and toggled by [hidden]; with JS
   they become the value map behind a single sliding line. */
.ml-pricing.is-enhanced .ml-plan__tagline[data-tier] {
	display: none;
}

/* Description is its own group, set apart from the price above. */
.ml-plan__tagline {
	margin: 16px 0 0;
	font-size: 13px;
	font-weight: 500;
	line-height: 14px;
	color: var(--ml-plan-muted);
}

/* Profile limit controls
--------------------------------------------- */

.ml-plan__control-wrap {
	margin: 24px 0 0;
}

.ml-plan__control {
	display: flex;
	align-items: center;
	min-height: 38px;
	border-radius: 8px;
}

.ml-plan__control--fixed {
	justify-content: space-between;
	gap: 12px;
	padding: 0 16px;
	background: var(--color-surface-soft);
}

.ml-plan__control-fixed-label {
	font-size: 12px;
	font-weight: 700;
	line-height: 16px;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--ml-plan-label);
}

.ml-plan__control-lock {
	width: 16px;
	height: 16px;
	flex: 0 0 16px;
	color: var(--ml-plan-label);
}

.ml-plan__control--segmented {
	gap: 8px;
}

.ml-plan__tier-option {
	position: relative;
	flex: 1 1 0;
	min-height: 38px;
	padding: 4px 8px;
	border: 2px solid var(--ml-plan-control-border);
	border-radius: 8px;
	background: transparent;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--ml-plan-heading);
	cursor: pointer;
}

.ml-plan__tier-option:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
}

.ml-plan__tier-option[aria-pressed="true"] {
	border-color: var(--color-primary);
	background: var(--ml-plan-tint);
	color: var(--color-primary);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Straddles the top-right corner of the tier button it belongs to. */
.ml-plan__tier-badge {
	position: absolute;
	top: -8px;
	right: -6px;
	display: inline-flex;
	align-items: center;
	height: 16px;
	padding: 0 4px;
	border-radius: 4px;
	background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-accent) 100%);
	font-size: 10px;
	font-weight: 700;
	line-height: 16px;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	white-space: nowrap;
	color: #fff;
}

.ml-plan__control--stepper {
	justify-content: space-between;
	gap: 8px;
	padding: 0 4px;
	border: 2px solid var(--ml-plan-control-border);
}

.ml-plan__step {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	flex: 0 0 30px;
	/* The theme puts padding on every button; the glyph needs the box to itself. */
	padding: 0;
	border: none;
	border-radius: 6px;
	background: transparent;
	font-weight: 400;
	line-height: 1;
	color: var(--ml-plan-muted);
	cursor: pointer;
}

.ml-plan__step-icon {
	width: 20px;
	height: 20px;
	display: block;
}

.ml-plan__step:hover:not(:disabled) {
	background: var(--ml-plan-tint);
	color: var(--color-primary);
}

.ml-plan__step:disabled {
	color: var(--ml-plan-control-border);
	cursor: not-allowed;
}

/* The picked profile limit is a select listing every plan, sitting between the
   -/+ buttons: they walk the list, it jumps straight to a tier. */
.ml-plan__step-field {
	position: relative;
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ml-plan__step-select {
	width: 100%;
	min-height: 30px;
	padding: 4px 24px;
	border: none;
	border-radius: 6px;
	background: transparent;
	appearance: none;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
	font-variant-numeric: tabular-nums;
	text-align: center;
	text-align-last: center;
	color: var(--ml-plan-heading);
	cursor: pointer;
}

/* The dropdown itself is drawn by the OS, which ignores the transparent
   background above and needs a readable pair of colours of its own. */
.ml-plan__step-select option {
	background: #fff;
	color: var(--ml-plan-heading);
}

.ml-plan__step-select:hover {
	background: var(--ml-plan-tint);
}

.ml-plan__step-caret {
	position: absolute;
	right: 4px;
	width: 20px;
	height: 20px;
	display: block;
	color: var(--ml-plan-muted);
	pointer-events: none;
}

.ml-plan__tier-option:focus-visible,
.ml-plan__step-select:focus-visible,
.ml-plan__step:focus-visible {
	outline: 3px solid rgba(5, 64, 247, 0.2);
	outline-offset: 2px;
}

.ml-plan__control-note {
	margin: 4px 0 0;
	font-size: 10px;
	font-weight: 700;
	line-height: 12px;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	color: var(--ml-plan-muted);
}

/* Features and bonuses
--------------------------------------------- */

.ml-plan__features,
.ml-plan__bonus-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: left;
}

/* Takes the slack in the card so the bonus block and the CTA below it sit on the
   bottom edge, level across all three cards however long the feature list is. */
.ml-plan__features {
	flex: 1 1 auto;
	margin-top: 18px;
}

.ml-plan__feature,
.ml-plan__bonus-list li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 13px;
	font-weight: 500;
	line-height: 19.5px;
	color: var(--ml-plan-body);
}

/* Both marks are stacked in this box so one can scale/fade out while the other
   pops in. */
.ml-plan__feature-mark {
	position: relative;
	width: 16px;
	height: 16px;
	flex: 0 0 16px;
	margin-top: 2px;
}

.ml-plan__feature-icon {
	position: absolute;
	inset: 0;
	width: 16px;
	height: 16px;
}

.ml-plan__feature-icon--yes {
	color: var(--color-primary);
}

.ml-plan__feature-icon--no {
	color: var(--ml-plan-off-icon);
}

.ml-plan__feature.is-excluded {
	color: var(--ml-plan-off);
}

/* Hidden mark: scaled and faded to nothing. Default hides the cross; the
   excluded state hides the check. Exit uses a plain ease. */
.ml-plan__feature-icon--no,
.ml-plan__feature.is-excluded .ml-plan__feature-icon--yes {
	opacity: 0;
	transform: scale(0);
	transition: transform .2s ease, opacity .16s ease;
}

/* Visible mark: pops in with a slight overshoot (the "bounce"). */
.ml-plan__feature-icon--yes,
.ml-plan__feature.is-excluded .ml-plan__feature-icon--no {
	opacity: 1;
	transform: scale(1);
	transition: transform .34s cubic-bezier(0.34, 1.56, 0.64, 1), opacity .22s ease;
}

.ml-plan__bonus {
	margin-top: 24px;
}

.ml-plan__bonus-label {
	margin: 0 0 8px;
	font-size: 10px;
	font-weight: 700;
	line-height: 12px;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	text-align: left;
	color: var(--color-accent);
}

.ml-plan__bonus-list li {
	font-weight: 400;
	line-height: 17px;
}

.ml-plan__bonus-list strong {
	font-weight: 700;
}

.ml-plan__bonus-icon {
	width: 16px;
	height: 16px;
	flex: 0 0 16px;
	margin-top: 1px;
	color: var(--color-accent);
}

/* Call to action
--------------------------------------------- */

.ml-plan__actions {
	margin: 24px 0 0;
}

/* The feature list takes the slack now, so the CTA no longer has to push itself
   down with an auto margin — that would have left the bonus block floating. */
.ml-plan__bonus+.ml-plan__actions {
	margin-top: 24px;
}

.ml-plan__actions .wp-block-button,
.ml-plan__actions .wp-block-button__link {
	width: 100%;
}

.ml-plan__actions .wp-block-button .wp-block-button__link {
	min-height: 38px;
	padding: 6px 12px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 900;
	line-height: 1.5;
	letter-spacing: 1px;
	text-transform: uppercase;
	box-shadow: none;
}

.ml-plan--free .ml-plan__actions .wp-block-button .wp-block-button__link:not(.has-background) {
	background: var(--color-accent);
}

.ml-plan--free .ml-plan__actions .wp-block-button .wp-block-button__link:not(.has-background):hover {
	background: #8639c9;
}

/* Both paid cards run the same blue fill button. */
.ml-plan--pro .ml-plan__actions .wp-block-button .wp-block-button__link:not(.has-text-color),
.ml-plan--business .ml-plan__actions .wp-block-button .wp-block-button__link:not(.has-text-color) {
	color: var(--ml-plan-tint);
}

/* Shared section heads
--------------------------------------------- */

.ml-pricing-section__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin: 0 0 40px;
}

.ml-pricing-section__title {
	margin: 0;
	font-size: 38px;
	font-weight: 800;
	line-height: 1.2;
	text-align: center;
	color: var(--color-text);
}

.ml-pricing-section__copy {
	margin: 0;
	max-width: 640px;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.6;
	text-align: center;
	color: var(--color-muted);
}

/* Add-ons
   Both add-on sections run on the 48px display heading of the design instead of
   the 38px shared one.
--------------------------------------------- */

.ml-pricing-addons .ml-pricing-section__head,
.ml-pricing-packages .ml-pricing-section__head,
.ml-pricing-compare .ml-pricing-section__head {
	gap: 20px;
	margin-bottom: 48px;
}

.ml-pricing-compare .ml-pricing-section__head {
	margin-bottom: 64px;
}

.ml-pricing-addons .ml-pricing-section__title,
.ml-pricing-packages .ml-pricing-section__title,
.ml-pricing-compare .ml-pricing-section__title {
	font-size: 48px;
}

.ml-pricing-addons .ml-pricing-section__copy,
.ml-pricing-packages .ml-pricing-section__copy,
.ml-pricing-compare .ml-pricing-section__copy {
	max-width: 800px;
}

.ml-pricing-rates {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	max-width: 864px;
	margin-inline: auto;
}

.ml-pricing-rate {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 26px 34px;
	border: 1px solid var(--ml-plan-border);
	border-radius: var(--ml-pricing-radius);
	background: var(--color-surface);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
	text-align: center;
}

.ml-pricing-rate__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-bottom: 12px;
	border-radius: 12px;
	background: var(--ml-plan-tint);
	color: var(--color-primary);
}

.ml-pricing-rate__icon svg {
	width: 28px;
	height: 28px;
}

.ml-pricing-rate__title {
	margin: 0 0 20px;
	font-size: 14px;
	font-weight: 800;
	line-height: 16px;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--ml-plan-heading);
}

.ml-pricing-rate__from,
.ml-pricing-rate__unit {
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	color: var(--ml-plan-muted);
}

.ml-pricing-rate__amount {
	margin: 0 0 4px;
	font-size: 36px;
	font-weight: 800;
	line-height: 48px;
	color: var(--ml-plan-heading);
}

.ml-pricing-rate__note {
	margin: 16px 0 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 18px;
	color: var(--ml-plan-heading);
}

/* Tables
   The comparison tables mirror the prod markup: white section header, zebra
   rows, blue check / grey cross marks and a tooltip column.
--------------------------------------------- */

.ml-pricing-table__scroll {
	border-radius: 12px;
}

.ml-pricing-compare .ml-pricing-table__scroll+.ml-pricing-table__scroll {
	margin-top: 64px;
}

/* Only the first table carries the badge, and it hangs above the table edge —
   room for it has to exist inside the box that scrolls sideways below 1024px,
   otherwise overflow-x clips it away. */
.ml-pricing-compare .ml-pricing-table__scroll:first-of-type {
	margin-top: -13px;
	padding-top: 13px;
}

/* Sized to the table so the highlight overlay lines up with the columns and
   scrolls with them on narrow viewports. */
.ml-pt__wrap {
	--ml-pt-feature: 30.5%;
	--ml-pt-tip: 64px;
	--ml-pt-plan: calc((69.5% - var(--ml-pt-tip)) / 5);

	position: relative;
}

/* One unbroken rounded frame around the recommended column: a transparent
   border filled by the brand gradient, with the middle masked back out. */
.ml-pt__highlight {
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(var(--ml-pt-feature) + var(--ml-pt-tip) + var(--ml-pt-featured) * var(--ml-pt-plan));
	z-index: 2;
	width: var(--ml-pt-plan);
	border: 2px solid transparent;
	border-radius: 6px;
	background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-accent) 100%) border-box;
	-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
	mask-composite: exclude;
	pointer-events: none;
}

/* Sibling of the frame, not a child: the frame's mask would clip it away. */
.ml-pt__highlight-badge {
	position: absolute;
	top: -13px;
	left: calc(var(--ml-pt-feature) + var(--ml-pt-tip) + var(--ml-pt-featured) * var(--ml-pt-plan) + var(--ml-pt-plan) / 2);
	z-index: 3;
	display: inline-flex;
	align-items: center;
	height: 20px;
	padding: 2px 6px;
	transform: translateX(-50%);
	border-radius: 6px;
	background: var(--color-primary);
	font-size: 10px;
	font-weight: 700;
	line-height: 16px;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	white-space: nowrap;
	color: #fff;
}

.ml-pt,
.ml-pricing-table {
	width: 100%;
	margin: 0;
	border: 1px solid var(--ml-pt-border);
	border-radius: 12px;
	border-collapse: separate;
	border-spacing: 0;
	background: var(--color-surface);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

/* border-collapse: separate does not clip cell backgrounds, so the four corner
   cells carry the radius themselves. */
.ml-pt thead th:first-child,
.ml-pricing-table thead th:first-child {
	border-top-left-radius: 11px;
}

.ml-pt thead th:last-child,
.ml-pricing-table thead th:last-child {
	border-top-right-radius: 11px;
}

.ml-pt tbody tr:last-child td:first-child,
.ml-pricing-table tbody tr:last-child th:first-child {
	border-bottom-left-radius: 11px;
}

.ml-pt tbody tr:last-child td:last-child,
.ml-pricing-table tbody tr:last-child td:last-child {
	border-bottom-right-radius: 11px;
}

/* Fixed layout keeps the columns identical across all the tables. */
.ml-pt {
	table-layout: fixed;
}

.ml-pt__col-feature {
	width: var(--ml-pt-feature);
}

.ml-pt__col-tip {
	width: var(--ml-pt-tip);
}

.ml-pt__col-plan {
	width: var(--ml-pt-plan);
}

.ml-pt th,
.ml-pt td {
	padding: 12px 24px;
	font-size: 16px;
	line-height: 26px;
	color: var(--ml-pt-text);
	vertical-align: middle;
}

.ml-pt__section,
.ml-pt__plan {
	padding: 16px 24px;
	font-size: 16px;
	font-weight: 700;
	line-height: 20px;
	background: var(--color-surface);
	color: var(--ml-pt-heading);
}

.ml-pt__section {
	text-align: left;
}

.ml-pt__plan {
	text-align: center;
	text-transform: uppercase;
}

/* Header labels carry the brand gradient, same as prod. */
.ml-pt__grad {
	background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-accent) 100%);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
}

.ml-pt tbody tr:nth-child(odd) td {
	background: var(--ml-pt-zebra);
}

.ml-pt__feature {
	font-weight: 400;
	text-align: left;
}

.ml-pt__badge {
	display: inline-block;
	margin-left: 8px;
	padding: 2px 6px;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 700;
	line-height: 16px;
	letter-spacing: 0.24px;
	text-transform: uppercase;
	color: #fff;
	vertical-align: middle;
}

.ml-pt__badge--bonus {
	background: var(--color-accent);
}

.ml-pt__badge--soon {
	background: #8e8e8e;
}

.ml-pt__value {
	font-weight: 400;
	text-align: center;
}

.ml-pt__text {
	font-weight: 600;
}

.ml-pt__mark {
	display: inline-block;
	width: 22px;
	height: 22px;
	vertical-align: middle;
}

.ml-pt__mark--yes {
	color: var(--color-primary);
}

.ml-pt__mark--no {
	color: var(--ml-pt-no);
}

/* Tooltips
--------------------------------------------- */

.ml-pt__tip {
	padding-right: 0;
	padding-left: 0;
	text-align: center;
	vertical-align: middle;
}

.ml-pt__tip-wrap {
	position: relative;
	display: inline-flex;
	vertical-align: middle;
}

.ml-pt__tip-trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: transparent;
	color: var(--ml-pt-no);
	cursor: help;
}

.ml-pt__tip-trigger:hover,
.ml-pt__tip-trigger:focus-visible {
	color: var(--color-primary);
}

.ml-pt__tip-trigger:focus-visible {
	outline: 3px solid rgba(5, 64, 247, 0.2);
	outline-offset: 2px;
}

.ml-pt__tip-icon {
	width: 22px;
	height: 22px;
}

.ml-pt__tip-bubble {
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	z-index: 5;
	width: max-content;
	max-width: 280px;
	padding: 8px 12px;
	border-radius: 8px;
	background: var(--ml-plan-heading);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	text-align: left;
	color: #fff;
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, 4px);
	transition: opacity .15s ease, transform .15s ease, visibility .15s;
}

.ml-pt__tip-bubble::after {
	position: absolute;
	top: 100%;
	left: 50%;
	width: 8px;
	height: 8px;
	background: inherit;
	content: "";
	transform: translate(-50%, -50%) rotate(45deg);
}

.ml-pt__tip-trigger:hover+.ml-pt__tip-bubble,
.ml-pt__tip-trigger:focus-visible+.ml-pt__tip-bubble {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}

@media (prefers-reduced-motion: reduce) {
	.ml-pt__tip-bubble {
		transition: none;
	}
}

/* Add-on packages table
   Three equal columns, 548px wide and centred, exactly as designed.
--------------------------------------------- */

.ml-pricing-packages .ml-pricing-table__scroll {
	max-width: 548px;
	margin-inline: auto;
}

.ml-pricing-table {
	table-layout: fixed;
}

.ml-pricing-table th,
.ml-pricing-table td {
	height: 50px;
	padding: 0 24px;
	font-size: 16px;
	font-weight: 400;
	line-height: 26px;
	color: var(--ml-plan-heading);
	text-align: center;
	vertical-align: middle;
}

.ml-pricing-table thead th {
	height: auto;
	padding: 16px 24px;
	font-weight: 700;
	line-height: 20px;
	background: var(--color-surface);
}

.ml-pricing-table tbody tr:nth-child(odd) th,
.ml-pricing-table tbody tr:nth-child(odd) td {
	background: var(--ml-pt-zebra);
}

.ml-pricing-table th[scope="row"],
.ml-pricing-table thead th:first-child {
	text-align: left;
}

.ml-pricing-table--packages th[scope="row"],
.ml-pricing-table--packages td {
	font-variant-numeric: tabular-nums;
}

/* Two whole phrases, one shown at a time — "2,000 minutes" on desktop, the
   abbreviated "2,000 min" where the column has to fit a phone. */
.ml-pricing-table__minutes--short {
	display: none;
}

/* Discounted rows stack the old price above the new one inside the same cell. */
.ml-pricing-table__price {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.ml-pricing-table__strike {
	font-size: 14px;
	line-height: 14px;
	color: var(--ml-plan-muted);
	text-decoration: line-through;
}

.ml-pricing-table__price .ml-pricing-table__accent {
	line-height: 18px;
}

.ml-pricing-table__accent {
	font-weight: 700;
	color: var(--ml-plan-heading);
}

.ml-pricing-table__none {
	color: #a3acbb;
}

.ml-pricing-table__save {
	display: inline-flex;
	align-items: center;
	height: 24px;
	padding: 4px 10px;
	border-radius: 6px;
	background: var(--color-primary);
	font-size: 12px;
	font-weight: 700;
	line-height: 16px;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: #fff;
}

.ml-pricing-table__save--accent {
	background: var(--color-accent);
}

.ml-pricing-packages__note {
	margin: 48px 0 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 18px;
	text-align: center;
	color: var(--ml-plan-label);
}

/* Enterprise band
   Dark full-width section reusing the payment methods background treatment.
--------------------------------------------- */

.ml-pricing-enterprise {
	position: relative;
	overflow: hidden;

	/* The preceding compare section only pads its top, so the dark band carries
	   the gap that the old boxed panel used to get from its own section padding. */
	margin-top: 92px;
	background:
		radial-gradient(ellipse at 0% 100%, rgba(0, 95, 249, 0.34) 0%, rgba(0, 95, 249, 0.16) 28%, rgba(0, 95, 249, 0) 60%),
		radial-gradient(ellipse at 100% 0%, rgba(150, 71, 219, 0.44) 0%, rgba(150, 71, 219, 0.16) 32%, rgba(150, 71, 219, 0) 64%),
		#010c20;
	color: #fff;
}

.ml-pricing-enterprise__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: min(100% - 48px, var(--site-width));
	margin: 0 auto;
	padding: 80px 0;
	text-align: center;
}

.ml-pricing-enterprise__title {
	margin: 0;
	font-size: 48px;
	font-weight: 800;
	line-height: 1.2;
	color: #fff;
}

.ml-pricing-enterprise__copy {
	max-width: 640px;
	margin: 16px 0 0;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.88);
}

.ml-pricing-enterprise__actions {
	margin: 40px 0 0;
}

.ml-pricing-enterprise__actions .wp-block-button__link {
	background: #fff !important;
	color: var(--color-primary) !important;
	box-shadow: none;
}

.ml-pricing-enterprise__actions .wp-block-button__link:hover {
	background: var(--color-primary-tint) !important;
}

/* Payment methods band
   Dark full-width section reusing the site's demo-CTA background treatment.
--------------------------------------------- */

.ml-pricing-payments {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(ellipse at 0% 100%, rgba(0, 95, 249, 0.34) 0%, rgba(0, 95, 249, 0.16) 28%, rgba(0, 95, 249, 0) 60%),
		radial-gradient(ellipse at 100% 0%, rgba(150, 71, 219, 0.44) 0%, rgba(150, 71, 219, 0.16) 32%, rgba(150, 71, 219, 0) 64%),
		#010c20;
	color: #fff;
}

.ml-pricing-payments__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: min(100% - 48px, var(--site-width));
	margin: 0 auto;
	padding: 80px 0;
	text-align: center;
}

.ml-pricing-payments__title {
	margin: 0;
	font-size: 48px;
	font-weight: 800;
	line-height: 1.2;
	color: #fff;
}

.ml-pricing-payments__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
	margin: 48px 0 0;
	padding: 0;
	list-style: none;
}

.ml-pricing-payments__card {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 128px;
	height: 72px;
	padding: 0 10px;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.ml-pricing-payments__logo {
	max-width: 100%;
	max-height: 40px;
	width: auto;
	height: auto;
	object-fit: contain;
}

.ml-pricing-payments__note {
	margin: 40px 0 0;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.88);
}

/* Editor content appended below the static sections
--------------------------------------------- */

.ml-pricing__editor-content {
	padding-bottom: 48px;
}

/* Responsive
--------------------------------------------- */

@media (max-width: 1024px) {

	/* Narrow viewports cannot fit the table, so it scrolls sideways there. The
	   tooltips get clipped in that mode - the price of keeping them free on desktop. */
	.ml-pricing-table__scroll {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* Pixel sticky offsets: % widths make `left` on the tip column unreliable. */
	.ml-pt__wrap {
		--ml-pt-feature: 200px;
		--ml-pt-tip: 40px;
		--ml-pt-plan: 124px;
	}

	/* The wrap carries the width too, so the highlight overlay keeps tracking the
	   columns while the table scrolls. Without it the overlay measures itself
	   against the viewport and lands in the middle of the feature column. */
	.ml-pt,
	.ml-pt__wrap {
		min-width: 860px;
	}

	/* Keep the label + tip visible while plan columns slide underneath. */
	.ml-pt__section,
	.ml-pt__feature {
		position: sticky;
		left: 0;
		z-index: 3;
	}

	.ml-pt thead .ml-pt__tip,
	.ml-pt tbody .ml-pt__tip {
		position: sticky;
		left: var(--ml-pt-feature);
		z-index: 3;
	}

	.ml-pt thead .ml-pt__section,
	.ml-pt thead .ml-pt__tip {
		background: var(--color-surface);
	}

	.ml-pt tbody tr:nth-child(odd) .ml-pt__feature,
	.ml-pt tbody tr:nth-child(odd) .ml-pt__tip {
		background: var(--ml-pt-zebra);
	}

	.ml-pt tbody tr:nth-child(even) .ml-pt__feature,
	.ml-pt tbody tr:nth-child(even) .ml-pt__tip {
		background: var(--color-surface);
	}

	/* Soft edge so scrolling plan cells do not look glued to the labels. */
	.ml-pt thead .ml-pt__tip,
	.ml-pt tbody .ml-pt__tip {
		box-shadow: 6px 0 8px -4px rgba(0, 0, 0, 0.12);
	}

	.ml-pricing-plans {
		max-width: 480px;
		margin-inline: auto;
	}

	.ml-pricing-plans.splide .splide__list,
	.ml-pricing-plans.splide.is-initialized:not(.is-active) .splide__list,
	.ml-pricing-plans.splide.is-destroyed .splide__list {
		grid-template-columns: minmax(0, 1fr);
	}

	.ml-pricing-hero__title {
		font-size: 48px;
	}
}

@media (max-width: 767px) {
	.ml-pricing .ml-landing-block__inner {
		width: min(100% - 32px, var(--site-width));
	}

	.ml-pricing-hero {
		padding-top: 48px;
		padding-bottom: 64px;
	}

	.ml-pricing-addons,
	.ml-pricing-packages,
	.ml-pricing-compare,
	.ml-pricing-faq {
		padding-top: 64px;
	}

	.ml-pricing-faq {
		padding-bottom: 64px;
	}

	.ml-pricing-hero__title {
		font-size: 36px;
	}

	.ml-pricing-hero__copy,
	.ml-pricing-section__copy {
		font-size: 16px;
	}


	/* Equal columns so badge show/hide does not shove the sibling onto a
	   second row (flex-wrap + long VI/PT labels). Text may wrap inside. */
	.ml-pricing-switch {
		display: flex;
		width: 100%;
	}

	.ml-pricing-switch__option {
		flex: 1 1 0;
		justify-content: center;
		padding: 8px 8px;
		font-size: 14px;
		white-space: normal;
		text-align: center;
	}

	.ml-pricing-section__title,
	.ml-pricing-addons .ml-pricing-section__title,
	.ml-pricing-packages .ml-pricing-section__title {
		font-size: 28px;
	}

	.ml-pricing-addons .ml-pricing-section__head,
	.ml-pricing-packages .ml-pricing-section__head {
		gap: 12px;
		margin-bottom: 32px;
	}

	.ml-pricing-rates {
		grid-template-columns: minmax(0, 1fr);
	}

	.ml-plan {
		padding: 20px 16px;
	}

	/* Splide owns the list under 768px — drop the stacked grid and let peeks
	   bleed past the page gutter so neighbouring cards are visible. */
	.ml-pricing-plans {
		max-width: none;
		width: 100vw;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
	}

	.ml-pricing-plans.is-initialized.is-active:not(.is-destroyed) .splide__track {
		/* Hide sideways overflow for the slide, keep a little top room so the
		   "Most popular" badge (which hangs half outside the card) is not clipped. */
		overflow: hidden;
		padding-top: 12px;
	}

	.ml-pricing-plans.is-initialized.is-active:not(.is-destroyed) .splide__list {
		display: flex;
		align-items: stretch;
		gap: 0;
		height: 100%;
	}

	.ml-pricing-plans.is-initialized.is-active:not(.is-destroyed) .splide__slide {
		display: flex;
		/* Override Splide's per-slide height so flex stretch can equalise them.
		   Width stays on Splide's inline px — do not force 100% here (the slide
		   IS the plan card). */
		height: auto !important;
		align-self: stretch;
		box-sizing: border-box;
	}

	.ml-pricing-rate {
		padding: 24px 16px;
	}

	.ml-plan__amount {
		font-size: 36px;
	}

	/* Compare tables: denser type + padding so more rows fit, sticky labels stay
	   readable beside the scrolling plan columns. */
	.ml-pt__wrap {
		--ml-pt-feature: 148px;
		--ml-pt-tip: 32px;
		--ml-pt-plan: 96px;
	}

	.ml-pt,
	.ml-pt__wrap {
		min-width: 660px;
	}

	.ml-pt th,
	.ml-pt td {
		padding: 8px 12px;
		font-size: 12px;
		line-height: 16px;
	}

	.ml-pt__section,
	.ml-pt__plan {
		padding: 12px;
		font-size: 12px;
		line-height: 16px;
	}

	.ml-pt__feature {
		padding-right: 8px;
	}

	.ml-pt__badge {
		margin-left: 4px;
		padding: 2px 4px;
		font-size: 10px;
		line-height: 12px;
	}

	.ml-pt__mark {
		width: 16px;
		height: 16px;
	}

	.ml-pt__tip-trigger,
	.ml-pt__tip-icon {
		width: 16px;
		height: 16px;
	}

	.ml-pt__tip-bubble {
		max-width: 220px;
		padding: 8px;
		font-size: 12px;
		line-height: 16px;
	}

	.ml-pricing-compare .ml-pricing-table__scroll+.ml-pricing-table__scroll {
		margin-top: 32px;
	}

	/* The packages table fits a 375px phone whole — no sideways scroll. Column
	   widths are the mobile design's (122.5 / 98 / 122.5 of a 343px table) and
	   the label keeps its 16px inset; the centred value columns take a tighter
	   padding so "1,000,000 min", the widest cell, stays on one line. */
	.ml-pricing-table th,
	.ml-pricing-table td {
		height: 40px;
		padding: 0 8px;
		font-size: 12px;
		line-height: 16px;
	}

	.ml-pricing-table thead th {
		padding: 12px 8px;
		font-size: 12px;
		line-height: 16px;
	}

	.ml-pricing-table th[scope="row"],
	.ml-pricing-table thead th:first-child {
		padding-right: 0;
		padding-left: 12px;
	}

	.ml-pricing-table__save {
		height: 20px;
		padding: 0 6px;
		font-size: 10px;
		line-height: 12px;
	}

	.ml-pricing-table--packages thead th:first-child {
		width: 35.7%;
	}

	.ml-pricing-table--packages thead th:nth-child(2) {
		width: 28.6%;
	}

	.ml-pricing-table__minutes--long {
		display: none;
	}

	.ml-pricing-table__minutes--short {
		display: inline;
	}

	.ml-pricing-packages__note {
		margin-top: 32px;
	}

	.ml-pricing-enterprise {
		margin-top: 64px;
	}

	.ml-pricing-enterprise__inner {
		padding: 64px 0;
	}

	.ml-pricing-enterprise__title {
		font-size: 28px;
	}

	.ml-pricing-enterprise__actions {
		margin-top: 32px;
	}
}