.btn {
	--btn-padding-block: 1.1rem;
	--btn-padding-inline: 1.75rem;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2xs);
	font-family: var(--font-button);
	font-size: var(--text-button);
	font-weight: var(--font-weight-button);
	line-height: var(--line-height-button);
	letter-spacing: var(--letter-spacing-button);
	text-decoration: none;
	white-space: nowrap;
	border-radius: var(--radius-button);
	padding: var(--btn-padding-block) var(--btn-padding-inline);
	border: var(--border-width-button) solid transparent;
	cursor: pointer;
	transition: background-color var(--transition-fast), color var(--transition-fast),
		border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.btn:active {
	transform: translateY(1px);
}

.btn--primary {
	position: relative;
	background-color: var(--color-action);
	color: var(--color-btn-text);
	border-color: var(--color-action);
}
.btn--primary:hover {
	background-color: var(--color-btn-hover);
	border-color: var(--color-btn-hover);
	color: var(--color-btn-hover-text);
}
.btn--primary:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--color-focus-ring);
}
.btn--primary:disabled,
.btn--primary[aria-disabled="true"] {
	background-color: var(--color-border);
	border-color: var(--color-border);
	color: var(--color-text-muted);
	cursor: not-allowed;
	transform: none;
}

.btn--secondary {
	background-color: transparent;
	color: var(--color-btn-secondary-text);
	border-color: var(--color-btn-secondary-text);
}
.btn--secondary:hover {
	background-color: var(--color-btn-secondary-hover);
	border-color: var(--color-btn-secondary-hover);
	color: var(--color-btn-secondary-hover-text);
}
.btn--secondary:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--color-focus-ring);
}
.btn--secondary:disabled,
.btn--secondary[aria-disabled="true"] {
	color: var(--color-text-muted);
	border-color: var(--color-border);
	cursor: not-allowed;
	transform: none;
}

.section--inverse .btn--secondary {
	color: var(--color-text-inverse);
	border-color: var(--color-text-inverse);
}
.section--inverse .btn--secondary:hover {
	background-color: var(--color-text-inverse);
	color: var(--color-primary);
}

.btn--text {
	display: inline-flex;
	flex-wrap: nowrap;
	align-items: baseline;
	white-space: nowrap;
	padding: 0;
	border: none;
	border-radius: 0;
	background: none;
	color: var(--color-primary);
	gap: var(--space-3xs);
}
.btn--text::after {
	content: '→';
	display: inline-block;
	transition: transform var(--transition-fast);
}
.btn--text:hover {
	color: var(--color-primary-dark);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
.btn--text:hover::after {
	transform: translateX(3px);
}
.btn--text:focus-visible {
	outline: none;
	box-shadow: 0 2px 0 0 var(--color-focus-ring);
}
.btn--text:disabled,
.btn--text[aria-disabled="true"] {
	color: var(--color-text-muted);
	cursor: not-allowed;
}

body.btn-style-outline .btn--primary {
	background-color: transparent;
	color: var(--color-primary);
}
body.btn-style-outline .btn--primary:hover {
	background-color: var(--color-primary);
	color: var(--color-btn-hover-text);
}

.btn--small {
	--btn-padding-block: 0.8rem;
	--btn-padding-inline: 1.25rem;
}

.btn--large {
	--btn-padding-block: 1.4rem;
	--btn-padding-inline: 2.25rem;
}

.btn--full {
	width: 100%;
}

.btn--primary {
	padding-right: calc(var(--btn-padding-inline) + 2rem);
	--btn-circle-bg: var(--color-text-inverse);
	--btn-circle-fg: var(--color-action);
}
.btn--primary::after {
	content: '\2192';
	position: absolute;
	top: 0.3em;
	bottom: 0.3em;
	right: 0.3em;
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: var(--btn-circle-bg);
	color: var(--btn-circle-fg);
	font-size: 0.85em;
	line-height: 1;
}
body.btn-style-outline .btn--primary {
	--btn-circle-bg: var(--color-action);
	--btn-circle-fg: var(--color-text-inverse);
}
body.btn-style-outline .btn--primary:hover {
	--btn-circle-bg: var(--color-text-inverse);
	--btn-circle-fg: var(--color-action);
}

@media (max-width: 63.99rem) {
	.hero-2__actions .btn--primary,
	.cta__actions .btn--primary,
	.text-image__actions .btn--primary,
	.text-image-2__actions .btn--primary,
	.steps__cta .btn--primary {
		padding-left: calc(var(--btn-padding-inline) + 2rem);
	}
}