.bg-blue-callout {
	border-radius: 1em;
	background: linear-gradient(
		to bottom,
		rgba(20, 196, 251, 0.95) 0%,
		rgba(23, 103, 239, 0.95) 100%
	);
}

.theme-dark.bg-blue-callout {
	color: #fff;
}

.theme-dark.bg-blue-callout a {
	color: #fff;
}

.row-flex {
	display: flex;
}
.column-flex-center {
	align-self: center;
}

.section-support .icon-row {
	margin-top: 2em;
}

.section-support .block-link {
	display: block;
	width: 120px;
	margin: 0 auto;
}

.section-support .callout {
	padding: 2em;
	margin: 1.5em 1em 0;
}

.section-enhancing .device-row {
	margin-top: 2em;
	margin-bottom: 2em;
}

.section-enhancing .device-wrap {
	margin-right: auto;
	margin-left: auto;
}

.large-hide {
	display: none;
}

@media only screen and (max-width: 1068px) {
	.device-flex {
		margin: 0 auto;
	}
	.medium-hide {
		display: none;
	}
	.medium-show {
		display: block;
	}
}

@media only screen and (max-width: 734px) {
	.row-flex {
		display: block;
	}
	.column-flex-center {
		padding: 1em 0;
	}
	.device-flex {
		margin: 1em 0;
	}
	.section-search .device-flex {
		margin: 0;
	}
	.section-support .icon-row {
		margin-bottom: 0;
	}
}

.pin-wrapper {
	position: relative;
}

/* ========== Images ========== */
.icon-support {
	margin: 0 auto 18px;
	width: 50px;
	height: 50px;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
}
.icon-apple-tv {
	margin: 0 auto 3px;
	width: 65px;
	height: 65px;
	background-image: url("/assets/elements/icons/apple-tv/apple-tv-i.svg");
}
.icon-apple-watch {
	background-image: url("/assets/elements/icons/apple-watch-app/apple-watch-app-i.svg");
}
.icon-imessage {
	background-image: url("/assets/elements/icons/imessage/imessage-i.svg");
}
.icon-visionos {
	background-image: url("/assets/elements/icons/platforms/icon-visionos-i.svg");
}

.lockup-hero {
	margin-top: 1em;
	width: 980px;
	height: 622px;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
	background-image: url("/app-store/product-page/images/lockup-hero-15-large_2x.png");
}

@media only screen and (max-width: 1068px) {
	.lockup-hero {
		width: 692px;
		height: 439px;
		background-image: url("/app-store/product-page/images/lockup-hero-15-medium_2x.png");
	}
}

@media only screen and (max-width: 734px) {
	.lockup-hero {
		margin-top: 0;
		width: 310px;
		height: 197px;
		background-image: url("/app-store/product-page/images/lockup-hero-15-small_2x.png");
	}
}

@media only screen and (max-width: 734px) {
	.lockup-hero {
		width: 280px;
		height: 178px;
	}
}

/* ========== Pins ========== */
.section .pin-horizontal-left .pin-caption {
	padding-left: 12px;
}
.section-app-name .pin {
	top: 76px;
	left: 228px;
	right: 20px;
}
.section-icon .pin {
	top: 107px;
	left: 63px;
	right: 20px;
}
.section-subtitle .pin {
	top: 90px;
	left: 220px;
	right: 30px;
}
.section-app-previews .pin {
	top: 260px;
	left: 96px;
	right: 0px;
}
.section-screenshots .pin {
	top: 260px;
	left: 96px;
	right: 0px;
}
.section-description .pin {
	top: 113px;
	left: 245px;
	right: 0px;
}
.section-in-app-purchases .pin {
	top: 126px;
	left: 233px;
	right: 0px;
}
.section-whats-new .pin {
	top: 127px;
	left: 120px;
	right: 0px;
}

html[lang="ja-JP"] .section-subtitle .pin,
html[lang="ko-KR"] .section-subtitle .pin {
	top: 90px;
	left: 240px;
	right: 30px;
}

html[lang="zh-CN"] .section-description .pin,
html[lang="ja-JP"] .section-description .pin,
html[lang="ko-KR"] .section-description .pin {
	top: 113px;
	left: 258px;
	right: 0px;
}

html[lang="zh-CN"] .section-in-app-purchases .pin,
html[lang="ja-JP"] .section-in-app-purchases .pin,
html[lang="ko-KR"] .section-in-app-purchases .pin {
	top: 126px;
	left: 245px;
	right: 0px;
}

@media only screen and (max-width: 1068px) {
	.pin.pin-vertical.pin-vertical-bottom {
		top: -35px;
		right: unset;
	}
	.section-app-name .pin {
		bottom: 375px;
		left: 205px;
	}
	.section-icon .pin {
		bottom: 351px;
		left: 85px;
	}
	.section-subtitle .pin {
		bottom: 366px;
		left: 205px;
	}
	.section-app-previews .pin {
		bottom: 230px;
		left: 110px;
	}
	.section-screenshots .pin {
		bottom: 240px;
		left: 109px;
	}
	.section-description .pin {
		bottom: 351px;
		left: 105px;
	}
	.section-in-app-purchases .pin {
		bottom: 354px;
		left: 144px;
	}
	.section-whats-new .pin {
		bottom: 336px;
		left: 128px;
	}
}

@media only screen and (max-width: 734px) {
	.pin.pin-vertical.pin-vertical-bottom {
		top: -25px;
		right: unset;
	}
	.section-app-name .pin {
		bottom: 375px;
		left: 165px;
	}
	.section-icon .pin {
		bottom: 361px;
		left: 47px;
	}
	.section-subtitle .pin {
		bottom: 362px;
		left: 164px;
	}
	.section-app-previews .pin {
		bottom: 230px;
		left: 73px;
	}
	.section-screenshots .pin {
		bottom: 230px;
		left: 73px;
	}
	.section-description .pin {
		bottom: 351px;
		left: 105px;
	}
	.section-in-app-purchases .pin {
		bottom: 354px;
		left: 104px;
	}
	.section-whats-new .pin {
		bottom: 335px;
		left: 91px;
	}
}

/* ========== Grid ========== */
#main section.section {
	padding-top: 4em;
	padding-bottom: 4em;
}
#main section.section.section-support {
	padding-top: 4em;
}
#main section.section.section-support .section-content {
	padding-top: 4em;
	padding-bottom: 4em;
}
#main section .section-content .row {
	margin-left: 0;
	margin-right: 0;
}
#main section .section-content .row > .column {
	padding: 0;
}

@media only screen and (max-width: 1068px) {
	#main section .section-content .row {
		margin-left: 0;
		margin-right: 0;
	}
	#main section .section-content .row > .column {
		padding: 0;
	}
}

@media only screen and (max-width: 734px) {
	#main section.section {
		padding-top: 2em;
		padding-bottom: 2em;
	}
	#main section.section.section-support {
		padding-top: 2em;
	}
	#main section.section.section-support .section-content {
		padding-top: 2em;
		padding-bottom: 2em;
	}
	#main section .section-content .row {
		margin-left: 0;
		margin-right: 0;
	}
	#main section .section-content .row > .column {
		padding: 1em 0;
	}
}
