/**
 * Upsell beside App Store badge — outer box matches `.primary-button` sizing:
 * fixed height like the badge image row, width auto (intrinsic, like badge width:auto).
 */

.upsell-button {
	box-sizing: border-box;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	font-family: 'Bricolage Grotesque', sans-serif;
	font-weight: 600;
	color: var(--color-primary-text);
	width: auto;
	min-width: 0;
	max-width: 100%;
	height: 62px;
	flex-shrink: 0;
	overflow: hidden;
	border-radius: 0.625rem;
	border: 1px solid transparent;
	transition:
		background-color 0.15s ease,
		border-color 0.15s ease,
		box-shadow 0.15s ease,
		transform 0.08s ease;
}

.upsell-button:hover {
	text-decoration: none;
}

.upsell-button:focus-visible {
	outline: 2px solid var(--color-link-hover);
	outline-offset: 3px;
}

.upsell-button__stack {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: 100%;
	width: 100%;
	min-height: 0;
	padding: 0 10px;
}

/* —— Teal: eyebrow + label inline; optional sublabel below —— */

.upsell-button--teal-two {
	background-color: var(--color-teal);
	border-radius: 0.625rem;
}

.upsell-button--teal-two:hover {
	background-color: var(--color-teal-hover);
}

.upsell-button--teal-two:active {
	background-color: var(--color-teal-active);
}

.upsell-button__stack--teal {
	row-gap: 0.125rem;
}

.upsell-button__teal-row {
	display: inline-flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	column-gap: 0;
	row-gap: 0;
	text-align: center;
	font-size: 0.6875rem;
	line-height: 1.15;
	letter-spacing: 0.02em;
	flex-shrink: 1;
	min-width: 0;
}

.upsell-button__accent {
	color: var(--color-white);
}

.upsell-button__label--teal {
	flex: 0 1 auto;
	color: var(--color-primary-text);
	text-transform: uppercase;
}

.upsell-button__accent + .upsell-button__label--teal {
	margin-left: 0.0625rem;
}

.upsell-button__sublabel--teal {
	display: block;
	width: 100%;
	font-size: 0.6875rem;
	line-height: 1.15;
	font-weight: 600;
	color: var(--color-primary-text);
}

/* —— Purple: eyebrow / label / sublabel stacked —— */

.upsell-button--purple-three {
	background-color: var(--color-purple);
	border-radius: 0.725rem;
}

.upsell-button--purple-three:hover {
	background-color: var(--color-purple-hover);
}

.upsell-button--purple-three:active {
	background-color: var(--color-purple-active);
}

.upsell-button__stack--purple {
	row-gap: 0.0625rem;
	padding-left: 10px;
	padding-right: 10px;
}

/* Purple typography: eyebrow & label 17px, sublabel 12px (Figma 3-line) */
.upsell-button__eyebrow {
	font-size: 1.0625rem;
	line-height: 1.1;
	font-weight: 600;
	color: var(--color-primary-text);
}

.upsell-button__label--purple {
	font-size: 1.0625rem;
	line-height: 1.05;
	font-weight: 600;
	color: var(--color-white);
	letter-spacing: 0.02em;
}

.upsell-button__sublabel--purple {
	font-size: 0.75rem;
	line-height: 1.15;
	font-weight: 600;
	color: var(--color-primary-text);
}

@media (max-width: 1023px) {
	.upsell-button {
		height: 50px;
	}
}