.bg-gradient {
	background: linear-gradient(to bottom, #ffffff -40%, #d6e3f2 100%);
}

.section-hero p.typography-intro {
	max-width: 670px;
}

.section-adp {
	background: #2f6ec3;
}
.section-adp a {
	color: #fff;
}

.narrow-column {
	max-width: 640px;
	margin: 0 auto;
}

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

a.section-link {
	display: block;
	position: relative;
	padding-top: 4em;
	padding-bottom: 4em;
	cursor: pointer;
	height: 100%;
	width: 100%;
	color: #1d1d1f;
}

.section-hero a.section-link {
	padding-bottom: 0;
}
a.section-link:hover {
	text-decoration: none;
}
a.section-link span.more {
	color: #06c;
}
a.section-link span.more:hover {
	text-decoration: underline;
}

a.tile-link,
.tile-wrap {
	width: 480px;
	height: 380px;
}
a.tile-link {
	display: block;
	cursor: pointer;
	text-decoration: none;
	color: #1d1d1f;
}
a.tile-link span.more {
	color: #0070c9;
}
a.tile-link .tile-wrap {
	text-align: center;
	padding: 4em 2em;
	background-color: #fff;
	border-radius: 1em;
}
a.tile-link:hover {
	cursor: pointer;
	text-decoration: none;
}
a.tile-link:hover span.more {
	text-decoration: underline;
	color: #06c;
}

.section-submote .column:last-of-type a.tile-link {
	float: right;
}

.theme-dark a.tile-link,
.theme-dark a.tile-link span.more,
.theme-dark a.section-link,
.theme-dark a.section-link span.more {
	color: #fff;
}

.section-silicon a.tile-link,
.section-silicon .tile-wrap {
	width: 100%;
	height: auto;
}
.section-silicon a.tile-link .tile-wrap {
	padding: 2em 3em;
}

@media only screen and (max-width: 1068px) {
	a.tile-link,
	.tile-wrap {
		width: 332px;
		height: 434px;
	}
}

@media only screen and (max-width: 734px) {
	.section-hero p.typography-intro {
		max-width: none;
	}
	a.section-link {
		padding-top: 2em;
		padding-bottom: 2em;
	}
	.section-hero a.section-link {
		padding-bottom: 0;
	}
	a.tile-link {
		width: 100%;
		height: auto;
	}
	.section-submote .column:last-of-type a.tile-link {
		float: none;
		margin-top: 1em;
	}
	a.tile-link .tile-wrap {
		padding: 40px 20px;
		width: 100%;
		height: auto;
	}
	.section-silicon a.tile-link .tile-wrap {
		padding: 30px;
	}
}

/* ===== Images ===== */
.distribute-hero {
	display: block;
	width: 100%;
	height: 290px;
	background-repeat: no-repeat;
	background-size: 2269px 508px;
	background-image: url("/distribute/images/hero-large.png");
	background-position: center -40px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
	only screen and (min-resolution: 1.5dppx),
	(-webkit-min-device-pixel-ratio: 1.5),
	(min-resolution: 144dpi) {
	.distribute-hero {
		background-image: url("/distribute/images/hero-large_2x.png");
	}
}

.device-macos {
	margin-top: 2em;
}

.image-business {
	width: 100%;
	height: 495px;
	background-image: url("/distribute/images/custom-apps-large.png");
	background-repeat: no-repeat;
	background-size: 866px 495px;
	background-position: top center;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
	only screen and (min-resolution: 1.5dppx),
	only screen and (min-resolution: 144dpi) {
	.image-business {
		background-image: url("/distribute/images/custom-apps-large_2x.png");
	}
}

.img-rounded {
	border-radius: 18px;
}

.img-border {
	border: 1px solid #eeeeee;
}

body[data-color-scheme="dark"] .img-border {
	border: 1px solid #333;
}

.figure-img-container {
	width: 100%;
	margin: 0 auto;
}

.figure-small-width {
	max-width: 820px;
}

.figure-aspect {
	position: relative;
	height: 0;
	padding-top: calc(var(--figure-height) / var(--figure-width) * 100%);
}

.figure-submit-vision {
	--figure-width: 1640;
	--figure-height: 1060;
}

.figure-aspect img {
	position: absolute;
	top: 0;
	left: 0;
	max-width: 100%;
	height: auto;
}

.lockup-safari {
	display: block;
	position: relative;
	margin: 2em auto 0;
	width: 980px;
}

.image-active-devices {
	width: 875px;
	height: 515px;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center center;
	background-image: url("/distribute/images/active-devices-large.png");
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
	only screen and (min-resolution: 1.5dppx),
	(-webkit-min-device-pixel-ratio: 1.5),
	(min-resolution: 144dpi) {
	.image-active-devices {
		background-image: url("/distribute/images/active-devices-large_2x.png");
	}
}

.topic-icon {
	margin-bottom: 1em;
	width: 64px;
	height: 64px;
	background-size: 100% 100%;
	background-position: center;
	background-repeat: no-repeat;
}
.icon-mac-app-store {
	background-image: url("/assets/elements/icons/mac-app-store-11/mac-app-store-11-64x64_2x.png");
}
.icon-vision-app-store {
	background-image: url("/assets/elements/icons/app-store-vision/app-store-vision-64x64_2x.png");
}
.icon-promote {
	background-image: url("/app-store/articles/images/promote.svg");
}
.icon-submitting {
	background-image: url("/app-store/index/images/submitting.svg");
}

@media only screen and (max-width: 1068px) {
	.distribute-hero {
		height: 210px;
		background-size: 1680px 376px;
		background-image: url("/distribute/images/hero-medium.png");
		background-position: center -35px;
	}
	@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
		only screen and (min-resolution: 1.5dppx),
		(-webkit-min-device-pixel-ratio: 1.5),
		(min-resolution: 144dpi) {
		.distribute-hero {
			background-image: url("/distribute/images/hero-medium_2x.png");
		}
	}
	.image-business {
		height: 343px;
		background-image: url("/distribute/images/custom-apps-medium.png");
		background-size: 600px 343px;
	}
	@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
		only screen and (min-resolution: 1.5dppx),
		only screen and (min-resolution: 144dpi) {
		.image-business {
			background-image: url("/distribute/images/custom-apps-medium_2x.png");
		}
	}
	.image-active-devices {
		width: 640px;
		height: 377px;
		background-image: url("/distribute/images/active-devices-medium.png");
	}
	@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
		only screen and (min-resolution: 1.5dppx),
		(-webkit-min-device-pixel-ratio: 1.5),
		(min-resolution: 144dpi) {
		.image-active-devices {
			background-image: url("/distribute/images/active-devices-medium_2x.png");
		}
	}
	.lockup-safari {
		width: 692px;
	}
}

@media only screen and (max-width: 734px) {
	.distribute-hero {
		height: 93px;
		background-size: 736px 165px;
		background-image: url("/distribute/images/hero-small.png");
		background-position: center -15px;
	}
	@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
		only screen and (min-resolution: 1.5dppx),
		(-webkit-min-device-pixel-ratio: 1.5),
		(min-resolution: 144dpi) {
		.distribute-hero {
			background-image: url("/distribute/images/hero-small_2x.png");
		}
	}
	.device-macos {
		margin-top: 1em;
	}
	.image-business {
		margin-top: 0;
		height: 183px;
		background-image: url("/distribute/images/custom-apps-small.png");
		background-size: 320px 183px;
		margin-bottom: 24px;
	}
	@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
		only screen and (min-resolution: 1.5dppx),
		only screen and (min-resolution: 144dpi) {
		.image-business {
			background-image: url("/distribute/images/custom-apps-small_2x.png");
		}
	}
	.image-active-devices {
		width: 440px;
		height: 259px;
		background-image: url("/distribute/images/active-devices-small.png");
	}
	@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
		only screen and (min-resolution: 1.5dppx),
		(-webkit-min-device-pixel-ratio: 1.5),
		(min-resolution: 144dpi) {
		.image-active-devices {
			background-image: url("/distribute/images/active-devices-small_2x.png");
		}
	}

	.lockup-safari {
		margin-top: 1em;
		width: 100%;
		max-width: 692px;
	}
}

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

/* Icons */
.icon-* {
	display: block;
	background-repeat: no-repeat;
}

.icon-distribute-hero {
	margin: 0 auto;
	width: 128px;
	height: 128px;
	background-image: url("/distribute/images/wwdr-distribute-128x128.svg");
	background-size: 128px 128px;
}

.icon-testflight {
	float: left;
	margin: 0 24px 24px 0;
	width: 64px;
	height: 64px;
	background-image: url("/assets/elements/icons/testflight/testflight-64x64.png");
	background-size: 64px 64px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
	only screen and (min-resolution: 1.5dppx),
	(-webkit-min-device-pixel-ratio: 1.5),
	(min-resolution: 144dpi) {
	.icon-testflight {
		background-image: url("/assets/elements/icons/testflight/testflight-64x64_2x.png");
	}
}
@media only screen and (max-width: 734px) {
	.icon-testflight {
		float: none;
	}
}

.icon-app-store {
	margin-bottom: 1.75em;
	width: 96px;
	height: 96px;
	background-size: 96px 96px;
	background-repeat: no-repeat;
	background-position: center center;
	background-image: url("/assets/elements/icons/app-store/app-store-96x96.png");
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
	only screen and (min-resolution: 1.5dppx),
	(-webkit-min-device-pixel-ratio: 1.5),
	(min-resolution: 144dpi) {
	.icon-app-store {
		background-image: url("/assets/elements/icons/app-store/app-store-96x96_2x.png");
	}
}

/* ========== Grid ========== */
#main section.section {
	margin-top: 1em;
	padding-top: 0;
	padding-bottom: 0;
}
#main section.section.section-hero {
	margin-top: 0;
	padding-top: 4em;
	padding-bottom: 4em;
}
#main section.section.section-adp,
#main section.section.section-silicon {
	margin-top: 0;
}
#main section.section.section-silicon {
	padding-bottom: 4em;
}
#main section.section.section-submote {
	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: 0;
		padding-bottom: 0;
	}
	#main section.section.section-hero {
		margin-top: 0;
		padding-bottom: 4em;
	}
	#main section.section.section-adp {
		margin-top: 0;
	}
	#main section.section.section-silicon {
		padding-bottom: 2em;
	}
	#main section.section.section-submote {
		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;
	}
}

/* === DARK MODE === */
body[data-color-scheme="dark"] .section a.section-link {
	color: var(--glyph-gray);
}
body[data-color-scheme="dark"] .section a.section-link .more {
	color: var(--glyph-blue);
}
body[data-color-scheme="dark"] .section.theme-dark a.section-link .more {
	color: var(--glyph-gray);
}
body[data-color-scheme="dark"] .section.section-submote a.tile-link .tile-wrap {
	background: var(--fill);
}
