.ribbon a.link-spread {
	margin-left: 1em;
	margin-right: 1em;
}

.small-show {
	display: none;
}

.section-hero .column {
	align-self: center;
}

.hero-wrap {
	margin: 0 auto;
}

.device-row,
.device-row-3up {
	margin: 2em 0;
}

.device-row:last-of-type,
.device-row-3up:last-of-type {
	margin-bottom: 0;
}

.device-row-3up .column .device-wrap {
	width: 283px;
}
.device-row-3up .column:nth-of-type(2) .device-wrap {
	margin-left: 5em;
}
.device-row-3up .column:nth-of-type(3) .device-wrap {
	margin-left: 10em;
}
.device-row p.typography-caption {
	margin-top: 1em;
	width: 283px;
}

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

.icon-app-store {
	background-image: url("/assets/elements/icons/app-store/app-store-64x64.png");
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
	only screen and (min-resolution: 1.5dppx),
	only screen and (min-resolution: 144dpi) {
	.icon-app-store {
		background-image: url("/assets/elements/icons/app-store/app-store-64x64_2x.png");
	}
}

.icon-app-store-connect {
	background-image: url("/assets/elements/icons/asc-outline/asc-outline-64x64.png");
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
	only screen and (min-resolution: 1.5dppx),
	only screen and (min-resolution: 144dpi) {
	.icon-app-store-connect {
		background-image: url("/assets/elements/icons/asc-outline/asc-outline-64x64_2x.png");
	}
}

.icon-analytics {
	margin-bottom: 1em;
	width: 48px;
	height: 48px;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
	background-image: url("/assets/elements/icons/app-analytics/app-analytics-48x48.png");
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
	only screen and (min-resolution: 1.5dppx),
	only screen and (min-resolution: 144dpi) {
	.icon-analytics {
		background-image: url("/assets/elements/icons/app-analytics/app-analytics-48x48_2x.png");
	}
}

.card-metadata-do {
	width: 283px;
	height: 243px;
	background-size: 100% 100%;
	background-position: center;
	background-repeat: no-repeat;
	background-image: url("/app-store/in-app-events/images/event-card-good-b-large_2x.png");
}

.card-metadata-dont {
	width: 283px;
	height: 243px;
	background-size: 100% 100%;
	background-position: center;
	background-repeat: no-repeat;
	background-image: url("/app-store/in-app-events/images/event-card-bad-b-large_2x.png");
}

.section-configuring {
	overflow-x: scroll;
}

table.specs-table {
	margin-top: 1.5em;
}
table.specs-table thead tr th,
table.specs-table tbody tr td {
	line-height: 1.2em;
	padding: 0.5em;
}
table.specs-table thead tr th {
	background-color: transparent;
	font-weight: 600;
	border-right: 1px solid #d2d2d7;
	border-bottom: 1px solid #d2d2d7;
}
table.specs-table thead tr th:last-of-type {
	border-right: none;
}
table.specs-table tbody tr td {
	background-color: transparent;
	border-right: 1px solid #d2d2d7;
	border-bottom: 1px solid #d2d2d7;
}
table.specs-table tbody tr td:first-of-type {
	white-space: nowrap;
}
table.specs-table tbody tr td:last-of-type {
	border-right: none;
}
table.specs-table tbody tr:last-of-type td {
	border-bottom: none;
}

@media only screen and (max-width: 1068px) {
	.device-row-3up .column .device-wrap,
	p.typography-caption {
		width: 212px;
	}
	.device-row-3up .column:nth-of-type(2) .device-wrap {
		margin-left: 4em;
	}
	.device-row-3up .column:nth-of-type(3) .device-wrap {
		margin-left: 8em;
	}
	table.specs-table tbody tr td:first-of-type {
		white-space: normal;
	}
}

@media only screen and (max-width: 734px) {
	.section-hero .column {
		align-self: top;
		text-align: center;
	}
	.hero-wrap {
		margin: 2em auto 0;
	}
	.device-hero {
		margin-right: auto;
		margin-left: auto;
	}
	.device-row-3up .column .device-wrap {
		margin: 0 0 3em;
		width: 283px;
	}
	.device-row-3up .column:nth-of-type(2) .device-wrap {
		margin: 0 0 3em;
	}
	.device-row-3up .column:nth-of-type(3) .device-wrap {
		margin: 0;
	}
	.device-row-3up .column .device-wrap,
	p.typography-caption {
		width: 283px;
	}
}

@media only screen and (max-width: 734px) {
	.section-hero .device-wrap {
		margin-top: 2em;
	}
	.section-discovery .device-row {
		margin-top: 0;
	}
	.section-discovery .device-wrap {
		margin-top: 3em;
		margin-left: 0;
	}
	table.specs-table thead tr th,
	table.specs-table tbody tr td {
		font-size: 12px;
	}
}

/* ========== Pins ========== */
.callout-do,
.callout-dont {
	position: relative;
	background-color: #fff;
}
.callout-do {
	margin: 2em 0 0;
}
.callout-dont {
	margin: 2em 0 4em;
}
.section .pin-horizontal .pin-caption {
	white-space: normal;
	min-width: 200px;
}
.section .pin-horizontal-left .pin-caption {
	padding-left: 12px;
	text-align: left;
}
.section .pin-horizontal-right .pin-caption {
	padding-right: 12px;
	text-align: right;
}
.callout-do .pin-1 {
	top: 220px;
	left: 60px;
	right: 527px;
}
.callout-do .pin-2 {
	top: 220px;
	left: 432px;
	right: 60px;
}
.callout-do .pin-3 {
	top: 239px;
	left: 60px;
	right: 527px;
}
.callout-dont .pin-1 {
	top: 160px;
	left: 60px;
	right: 485px;
}
.callout-dont .pin-2 {
	top: 224px;
	left: 470px;
	right: 60px;
}
.callout-dont .pin-3 {
	top: 240px;
	left: 60px;
	right: 528px;
}

@media only screen and (max-width: 1068px) {
	.section .pin-horizontal .pin-caption {
		min-width: 160px;
	}
	.callout-do .pin-1 {
		top: 220px;
		left: 10px;
		right: 437px;
	}
	.callout-do .pin-2 {
		top: 220px;
		left: 342px;
		right: 10px;
	}
	.callout-do .pin-3 {
		top: 239px;
		left: 10px;
		right: 437px;
	}
	.callout-dont .pin-1 {
		top: 160px;
		left: 10px;
		right: 395px;
	}
	.callout-dont .pin-2 {
		top: 224px;
		left: 380px;
		right: 10px;
	}
	.callout-dont .pin-3 {
		top: 240px;
		left: 10px;
		right: 438px;
	}
}

@media only screen and (max-width: 734px) {
	.small-hide {
		display: none;
	}
	.small-show {
		display: flex;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		margin: 0 auto;
		width: 283px;
	}
	.pin-wrapper {
		width: 283px;
		margin: 0 auto;
	}
	.callout-do figure,
	.callout-dont figure {
		margin-top: 4em;
	}
	.callout-do figcaption,
	.callout-dont figcaption {
		margin-bottom: 4em;
	}
	.pin.pin-vertical.pin-vertical-bottom,
	.pin.pin-vertical.pin-vertical-top {
		right: unset;
	}
	.section .pin-vertical .pin-caption {
		width: 130px;
		text-align: left;
	}
	.callout-do .pin-1 {
		top: 95px;
		bottom: 197px;
		left: 20px;
	}
	.callout-do .pin-1 .pin-caption {
		left: 95px;
	}
	.callout-do .pin-2 {
		top: 107px;
		bottom: 197px;
		left: 165px;
	}
	.callout-do .pin-2 .pin-caption {
		left: 71px;
	}
	.callout-do .pin-3 {
		top: 292px;
		bottom: 58px;
		left: 20px;
	}
	.callout-do .pin-3 .pin-caption {
		left: 95px;
	}

	.callout-dont .pin-1 {
		top: 95px;
		bottom: 258px;
		left: 65px;
	}
	.callout-dont .pin-1 .pin-caption {
		left: 51px;
	}
	.callout-dont .pin-2 {
		top: 122px;
		bottom: 195px;
		left: 199px;
	}
	.callout-dont .pin-2 .pin-caption {
		left: 55px;
	}
	.callout-dont .pin-3 {
		top: 294px;
		bottom: 58px;
		left: 20px;
	}
	.callout-dont .pin-3 .pin-caption {
		left: 96px;
	}
}

@media only screen and (max-width: 320px) {
	.callout.callout-do,
	.callout.callout-dont {
		width: 320px;
		margin-left: -20px;
		margin-right: -20px;
	}
	.callout-do .pin-1 {
		left: 27px;
	}
	.callout-do .pin-2 {
		left: 170px;
	}
	.callout-do .pin-3 {
		left: 27px;
	}
	.callout-dont .pin-1 {
		left: 70px;
	}
	.callout-dont .pin-2 {
		left: 204px;
	}
	.callout-dont .pin-3 {
		left: 26px;
	}
}

/* ========== Grid ========== */
#main section.section {
	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: 3em;
		padding-bottom: 3em;
	}
	#main section .section-content .row {
		margin-left: 0;
		margin-right: 0;
	}
	#main section .section-content .row > .column {
		padding: 0;
	}
}

/* === DARK MODE === */
html body[data-color-scheme="dark"] .pin::before {
	background-color: var(--fill-gray);
}
html body[data-color-scheme="dark"] .pin::after {
	background-color: var(--fill-gray);
}
html body[data-color-scheme="dark"] .pin .pin-caption {
	color: var(--fill-gray);
}
body[data-color-scheme="dark"] table.specs-table thead tr th,
body[data-color-scheme="dark"] table.specs-table tbody tr td {
	background-color: transparent;
	border-color: var(--fill-gray-tertiary);
}
body[data-color-scheme="dark"] .callout-do,
body[data-color-scheme="dark"] .callout-dont {
	background-color: var(--fill-tertiary);
}