/* Effect classes only: Flow is applied to explicit primary CTAs; Metal stays optional. */
html:root body .theme-button.theme-button--flow:not(.theme-button--text),
html:root body .theme-button.theme-button--liquid-metal:not(.theme-button--text) {
	position: relative;
	isolation: isolate;
	display: inline-grid;
	place-items: center;
	gap: 0;
	min-inline-size: min(11.25rem, 100%);
	overflow: hidden;
	border-radius: var(--button-radius-pill, 999px);
	border-color: var(--button-effect-base, var(--button-primary-background));
	background: var(--button-effect-base, var(--button-primary-background));
	color: var(--button-effect-text, var(--button-primary-text));
	transform: none;
	box-shadow: none;
}
html:root body .theme-button.theme-button--flow:not(.theme-button--text) {
	--button-effect-fill: var(--color-background);
	--button-effect-hover-text: var(--button-effect-base, var(--button-primary-background));
}
html:root body .theme-button.theme-button--flow:not(.theme-button--text):is(:hover, :focus-visible, :active) {
	border-radius: var(--button-radius-pill, 999px);
	border-color: var(--button-effect-base, var(--button-primary-background));
	background: var(--button-effect-base, var(--button-primary-background));
	color: var(--button-effect-hover-text, var(--button-effect-base, var(--button-primary-background)));
	transform: none;
	filter: none;
	box-shadow: none;
}
html:root body .theme-button.theme-button--liquid-metal:not(.theme-button--text):is(:hover, :focus-visible, :active) {
	border-radius: var(--button-radius-pill, 999px);
	border-color: var(--button-effect-base, var(--button-primary-background));
	background: var(--button-effect-base, var(--button-primary-background));
	color: var(--button-effect-text, var(--button-primary-text));
	transform: none;
	filter: none;
	box-shadow: none;
}
.theme-button--flow > .theme-button__label,
.theme-button--liquid-metal > .theme-button__label {
	position: relative;
	z-index: 2;
	display: block;
	margin: 0;
	padding: 0;
	color: inherit;
	text-align: center;
	transform: none;
	transition: none;
	pointer-events: none;
}
/* Live adapters keep the original CTA footprints and semantic colour roles. */
html:root body .theme-button.theme-button--flow.theme-button--flow-live {
	min-inline-size: 0;
}
.theme-button--flow.theme-button--flow-live::before { right: calc(-100% + 12px); }
html:root body .theme-button.theme-button--flow.theme-button--flow-roomy { padding-inline: 37px; }
html:root body .theme-button.theme-button--flow.theme-button--flow-roomy-footer { padding-inline: 38px; }
.theme-button--flow-cta,
body.home .site-header__cta.theme-button--flow {
	--button-effect-base: var(--button-effect-cta-base, var(--button-cta-background));
	--button-effect-text: var(--button-effect-cta-text, var(--button-cta-text));
	--button-effect-hover-text: var(--button-effect-base, var(--button-cta-background));
}
/* Pricing cards use an inverted, non-featured treatment: white at rest, green on interaction. */
html:root body .theme-button.theme-button--flow.theme-button--flow-pricing {
	--button-effect-base: var(--button-primary-background);
	--button-effect-fill: var(--button-primary-background);
	--button-effect-text: var(--button-primary-background);
	--button-effect-hover-text: var(--button-primary-text);
	background: var(--color-background);
	border-color: var(--button-primary-background);
	color: var(--button-primary-background);
}
/* Setup hero secondary action: white at rest, green Flow fill on interaction. */
html:root body .theme-button.theme-button--flow.theme-button--flow-setup-help {
	--button-effect-base: var(--button-primary-background);
	--button-effect-fill: var(--button-primary-background);
	--button-effect-text: var(--button-primary-background);
	--button-effect-hover-text: var(--button-primary-text);
	background: var(--color-background);
	border-color: var(--button-primary-background);
	color: var(--button-primary-background);
}
/* Legacy button icon-motion selectors must never move the single Flow label. */
.theme-button.theme-button--flow.theme-button--flow-live > .theme-button__label {
	margin: 0;
	padding: 0;
	transform: none;
	transition: none;
}
/* Setup support contact: primary green at rest, white expanding fill on interaction. */
html:root body .theme-button.theme-button--flow.theme-button--flow-contact {
	--button-effect-base: var(--button-primary-background);
	--button-effect-fill: var(--color-background);
	--button-effect-text: var(--button-primary-text);
	--button-effect-hover-text: var(--button-primary-background);
}
html:root body .theme-button.theme-button--flow.theme-button--flow-contact:is(:hover, :focus-visible, :active) {
	color: var(--button-effect-hover-text, var(--button-primary-background));
}
html:root body .theme-button.theme-button--flow.theme-button--flow-contact:is(:hover, :focus-visible, :active) > .theme-button__label {
	color: inherit;
}
/* The circle grows behind one stationary label; no icon slots or hidden text clones. */
.theme-button--flow::before {
	position: absolute;
	z-index: 0;
	top: 50%;
	right: calc(-100% + 24px);
	width: 200%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--button-effect-fill, var(--button-primary-background));
	content: "";
	pointer-events: none;
	transform: translateY(-50%) scale(0);
	transition: transform 650ms cubic-bezier(.22, 1, .36, 1);
}
.theme-button--flow:is(:hover, :focus-visible, :active)::before {
	transform: translateY(-50%) scale(1);
}
/* Solid centre plate guarantees contrast; only the surrounding metal rim moves. */
.theme-button--liquid-metal::before,
.theme-button--liquid-metal::after {
	position: absolute;
	content: "";
	pointer-events: none;
}
.theme-button--liquid-metal::after {
	z-index: 1;
	inset: 3px;
	border-radius: inherit;
	background: var(--button-effect-base, var(--button-primary-background));
}
.theme-button--liquid-metal:is(:hover, :focus-visible, :active)::after {
	background: var(--button-effect-fill, var(--button-primary-background));
}
@supports (background: conic-gradient(from 0deg, transparent, currentColor)) {
	.theme-button--liquid-metal::before {
		z-index: 0;
		top: 50%;
		left: 50%;
		width: 200%;
		aspect-ratio: 1;
		background: conic-gradient(from 0deg, var(--color-primary-dark), var(--color-border) 40deg, var(--color-background) 75deg, var(--color-primary) 135deg, var(--color-border) 180deg, var(--color-primary-dark) 240deg, var(--color-background) 300deg, var(--color-primary-dark));
		transform: translate(-50%, -50%) rotate(0deg);
		animation: theme-button-metal-turn 8s linear infinite;
		animation-play-state: paused;
	}
	.theme-button--liquid-metal.is-effect-visible:not(.theme-button--static):not(.is-effect-paused):not(:disabled)::before {
		animation-play-state: running;
	}
}
@keyframes theme-button-metal-turn {
	to { transform: translate(-50%, -50%) rotate(360deg); }
}
/* Explicit static mode is also used for Save-Data / low-power devices by the tiny controller. */
.theme-button--flow.theme-button--static::before { transform: translateY(-50%) scale(0); transition: none; }
.theme-button--flow.theme-button--static:is(:hover, :focus-visible, :active)::before { transform: translateY(-50%) scale(1); }
.theme-button--liquid-metal.theme-button--static::before { animation: none; }
@media (prefers-reduced-motion: reduce), (update: slow) {
	.theme-button--flow::before { transform: translateY(-50%) scale(0); transition: none; }
	.theme-button--flow:is(:hover, :focus-visible, :active)::before { transform: translateY(-50%) scale(1); transition: none; }
	.theme-button--liquid-metal::before { animation: none; }
}