.button-pill {
	border-radius: 1em;
}

.bg-alt {
	background-color: #f2f2f2;
}

.bg-white {
	background-color: #fff;
}

.bg-rounded {
	background-color: #fff;
	border-radius: 1em;
	padding: 1em 0;
}

.headline-row {
	margin-bottom: -1.5em;
}

.tile-container {
	display: flex;
}
.tile-item {
	background-color: #fff;
	border-radius: 1em;
	padding: 2em;
	margin: 0 1.5em;
	width: 50%;
}

.row-flex {
	display: flex;
}

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

.center-wrap {
	display: table-cell;
	vertical-align: middle;
	height: 358px;
}

.device-wrap-bottom {
	overflow: hidden;
	height: 400px;
	position: absolute;
	bottom: -1em;
}

.device-wrap-top {
	overflow: hidden;
	height: 400px;
	position: absolute;
	top: -1em;
}

.device-wrap-top .device-right,
.device-wrap-top .device-left {
	margin-top: -166px;
}

.badge-wrap {
	display: inline-block;
	margin: 2em 1em 0;
}

.device-featured {
	margin: 2em auto 1em;
}
.screen-featured {
	background-image: url("/app-store/promote/images/screen-featured-large_2x.jpg");
}

.screen-app-clip-codes {
	background-image: url("/app-store/promote/images/screen-app-clip-codes-large_2x.jpg");
}

.screen-app-store-tools {
	background-image: url("/app-store/promote/images/screen-app-store-tools-large_2x.png");
}

.screen-banner {
	background-image: url("/app-store/promote/images/screen-banner-large_2x.png");
}

.screen-pre-orders {
	background-image: url("/app-store/promote/images/screen-pre-orders-large_2x.jpg");
}

.screen-product-page {
	background-image: url("/app-store/promote/images/screen-product-page-large_2x.jpg");
}

.screen-promo-codes {
	background-image: url("/app-store/promote/images/screen-promo-codes-large_2x.png");
}

.screen-redemption {
	background-image: url("/app-store/promote/images/screen-redemption-large_2x.jpg");
}

.screen-search {
	background-image: url("/app-store/promote/images/screen-search-large_2x.jpg");
}

.topic-icon {
	margin-bottom: 1em;
	width: 64px;
	height: 64px;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
}

.icon-app-bundles {
	background-image: url("/app-store/promote/images/icon-app-bundles.png");
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
	only screen and (min--moz-device-pixel-ratio: 1.5),
	only screen and (-o-min-device-pixel-ratio: 3/2),
	only screen and (min-device-pixel-ratio: 1.5) {
	.icon-app-bundles {
		background-image: url("/app-store/promote/images/icon-app-bundles_2x.png");
	}
}

.icon-in-app {
	background-image: url("/app-store/promote/images/icon-in-app.png");
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
	only screen and (min--moz-device-pixel-ratio: 1.5),
	only screen and (-o-min-device-pixel-ratio: 3/2),
	only screen and (min-device-pixel-ratio: 1.5) {
	.icon-in-app {
		background-image: url("/app-store/promote/images/icon-in-app_2x.png");
	}
}

@media only screen and (max-width: 1068px) {
	.tile-item {
		margin: 0 1.1em;
	}
	.center-wrap {
		height: 425px;
	}
	.device-wrap-bottom,
	.device-wrap-top {
		overflow: visible;
		height: auto;
		position: relative;
		bottom: unset;
		top: unset;
		margin: 0 auto;
	}
	.device-wrap-top .device-right,
	.device-wrap-top .device-left {
		margin-top: 0;
	}

	.screen-featured {
		background-image: url("/app-store/promote/images/screen-featured-medium_2x.jpg");
	}

	.screen-app-clip-codes {
		background-image: url("/app-store/promote/images/screen-app-clip-codes-medium_2x.jpg");
	}

	.screen-app-store-tools {
		background-image: url("/app-store/promote/images/screen-app-store-tools-medium_2x.png");
	}

	.screen-banner {
		background-image: url("/app-store/promote/images/screen-banner-medium_2x.png");
	}

	.screen-pre-orders {
		background-image: url("/app-store/promote/images/screen-pre-orders-medium_2x.jpg");
	}

	.screen-product-page {
		background-image: url("/app-store/promote/images/screen-product-page-medium_2x.jpg");
	}

	.screen-promo-codes {
		background-image: url("/app-store/promote/images/screen-promo-codes-medium_2x.png");
	}

	.screen-redemption {
		background-image: url("/app-store/promote/images/screen-redemption-medium_2x.jpg");
	}

	.screen-search {
		background-image: url("/app-store/promote/images/screen-search-medium_2x.jpg");
	}
}

@media only screen and (max-width: 734px) {
	.row-flex {
		display: block;
	}
	.center-wrap,
	.copy-wrap {
		display: block;
		height: auto;
		padding: 0 1em;
		text-align: center;
	}
	.section-content .row > .column.column-flex-center {
		padding: 1em;
		text-align: center;
	}
	.section-content .row > .column.column-flex-center .icon-app-clip-codes {
		margin-right: auto;
		margin-left: auto;
	}
	.device-right,
	.device-left {
		margin: 0 auto;
	}
	.tile-container {
		display: block;
	}
	.tile-item {
		background-color: #fff;
		border-radius: 1em;
		padding: 2em 1em;
		margin: 0;
		width: 100%;
		text-align: center;
	}
	.tile-item:first-of-type {
		margin-bottom: 1em;
	}

	.screen-featured {
		background-image: url("/app-store/promote/images/screen-featured-small_2x.jpg");
	}

	.icon-app-clip-codes {
		margin-right: auto;
		margin-left: auto;
	}
	.topic-icon {
		margin-right: auto;
		margin-left: auto;
	}
}

@media only screen and (max-width: 320px) {
	.device-featured {
		margin-left: -17px;
	}
}

#main section.section {
	padding-top: 1em;
	padding-bottom: 1em;
}
#main section.section.section-hero {
	padding-top: 4em;
	padding-bottom: 3em;
}
#main section.section.section-featured {
	padding-bottom: 3em;
}
#main section.section.section-capabilities {
	padding-top: 3em;
	padding-bottom: 3em;
}
@media only screen and (max-width: 734px) {
	#main section.section {
		padding-top: 0.5em;
		padding-bottom: 0.5em;
	}
	#main section.section.section-hero {
		padding-top: 3em;
		padding-bottom: 2em;
	}
	#main section.section.section-featured {
		padding-bottom: 2em;
	}
}

/* === DARK MODE === */
html body:not([data-color-scheme="light"]) .bg-rounded {
	background-color: var(--fill);
}
body[data-color-scheme="dark"] .bg-white {
	background-color: var(--fill);
}
body[data-color-scheme="dark"] .tile-item {
	background-color: var(--fill);
}
html body[data-color-scheme="dark"] .section-banner a {
	color: var(--glyph-blue);
}