.main {
	overflow: initial;
}

h3 {
	margin-top: 1.6em;
}
h3 span.badge {
	vertical-align: middle;
}

.flex-padding-bottom {
	margin-bottom: 2em;
}
@media only screen and (max-width: 734px) {
	.flex-padding-bottom {
		margin-bottom: 0.8em;
	}
}

/* ----- video grid ----- */
.resource-grid {
	display: grid;
	grid-template-columns: repeat(2, 2fr);
	/* grid-gap: 20px; */
	column-gap: 3em;
	row-gap: 2em;
	width: 100%;
	box-sizing: border-box;
	margin-top: 1.5em;
}

.resource-grid-item {
	height: auto;
	cursor: pointer !important;
	text-decoration: none !important;
}

/* .resource-grid-item-full {
	grid-column: 1/3;
} */

.resource-grid + h2,
.resource-grid + h3,
.resource-grid + p {
	margin-top: 2em;
}

.resource-grid + .divider-bottom {
	padding-top: 0;
}

@media only screen and (max-width: 1068px) {
	.resource-grid {
		grid-template-columns: repeat(2, 2fr);
		column-gap: 1.5em;
		row-gap: 1em;
	}

	.resource-grid-item {
		grid-column: unset;
	}
}

@media only screen and (max-width: 734px) {
	.resource-grid {
		grid-template-columns: repeat(3, 3fr);
		row-gap: 2em;
	}

	.resource-grid-item {
		grid-column: 1/3;
	}
}
/* Prevents content jumping */
.image-wrapper {
	width: 341px;
	height: 192px;
	border-radius: 8px;
}

@media only screen and (max-width: 1068px) {
	.image-wrapper {
		width: 250px;
		height: 141px;
	}
}

.resource-grid-item img {
	border-radius: 8px;
	position: absolute;
	top: 0;
	left: 0;
	max-width: 100%;
	height: auto;
}

a.resource-grid-item {
	color: unset;
}

a.resource-grid-item:hover {
	text-decoration: none !important;
}

.resource-grid-item h4 {
	color: #86868b;
	font-size: 15px;
	margin-top: 1em;
	cursor: pointer !important;
}
body[data-color-scheme="dark"] .resource-grid-item h4 {
	color: #6e6e73;
}

@media only screen and (max-width: 734px) {
	.resource-grid-item h4 {
		margin-top: 0.5em;
	}
}

.resource-grid-item h4:hover {
	text-decoration: none;
}

/* ----- Grid and Layout ----- */
.section {
	padding-top: 2em;
}
.section-content .row.split-row > .column {
	padding-top: 0;
	padding-bottom: 0;
}
.section-content .row > .column.sidebar {
	padding-left: 0;
}
.section.section-hero {
	margin-bottom: 0;
	padding-bottom: 3em;
}

section.section.section-hero .section-content {
	overflow-x: visible;
}

.section-autorenew {
	padding-top: 4em;
}
.section-autorenew .section-content .row > .column {
	padding-bottom: 0;
}

.section.section-related {
	padding-bottom: 2em;
}

/* medium viewport */
@media only screen and (max-width: 1068px) {
	.section-content .row > .column.sidebar {
		padding-left: 1em;
	}
}

/* small viewport */
@media only screen and (max-width: 734px) {
	.section {
		padding-top: 1em;
	}
	.section-content {
		max-width: 500px;
	}
	.section-content .row > .column.sidebar {
		padding-left: 0;
	}
	.section.section-hero {
		padding-bottom: 2em;
	}
	.section-autorenew {
		padding-top: 2em;
	}
	.section-autorenew .section-content .row > .column.sidebar {
		padding-bottom: 1em;
	}
	.section-autorenew .column p:last-of-type {
		margin-bottom: 18px;
	}
	.section-related .section-content .row > .column {
		padding: 0;
	}
}

/* ----- sidenav ----- */

.column-sidenav {
	height: 100%;
}

.headline-divider {
	margin-top: 1.6em;
	padding-top: 1.6em;
	border-top: 1px solid #e3e3e3;
}

/* ----- Utilities ----- */
.badge {
	margin-left: 0;
	margin-bottom: 0.5em;
}

.small-show {
	display: none;
}

.row-flex {
	display: flex;
}

.row-flex .column-flex > .row-flex {
	margin-top: 2em;
}

.row-flex + h4 {
	margin-top: 1.6em;
}

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

ul.links.small li > a {
	display: initial;
}

.compound-item-list li > ul li {
	margin-bottom: 0;
}

.padding-top-alt {
	padding-top: 1em;
}

figcaption.caption {
	color: #666;
	font-size: 14px;
}

/* medium viewport */
@media only screen and (max-width: 1068px) {
	.column-flex-center {
		align-self: unset;
	}
}

/* small viewport */
@media only screen and (max-width: 734px) {
	.small-show {
		display: block;
	}
	h3 {
		margin-top: 1.6em;
	}
	.row-flex {
		display: block;
	}
	.row-flex + p {
		margin-top: 0.8em;
	}
	.row-flex .column-flex > .row-flex {
		margin-top: 0;
		margin-bottom: 0;
	}
	.column-flex-center .device-iphone-x-silver-container {
		margin-top: 2em;
		margin-bottom: 1em;
	}
}

/* Pins */
.pin-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
}

.pin {
	position: absolute;
	z-index: 1;
}

.pin:before,
.pin:after {
	background-color: #d6d6d6;
	content: "";
	display: block;
	border-left: 1px dotted #d6d6d6;
}

.pin:before {
	border-radius: 50%;
	margin: -1px;
	position: absolute;
	width: 3px;
	height: 3px;
	z-index: 1;
}

.pin-caption {
	font-size: 14px;
	line-height: 1.29286;
	font-weight: 400;
	letter-spacing: 0em;
	color: #666666;
}

.pin-caption-left {
	text-align: left;
}

.pin-caption-right {
	text-align: right;
}

.pin-horizontal {
	left: 0;
	right: 0;
	height: 1px;
}

.pin-horizontal:before {
	top: 0;
}

.pin-horizontal:after {
	overflow: hidden;
	height: 1px;
	width: 100%;
}

.pin-horizontal .pin-caption {
	margin-top: -0.64643em;
	max-width: 200px;
}

.pin-horizontal-left:before {
	left: 0;
}

.pin-horizontal-left .pin-caption {
	float: right;
	padding-left: 16px;
}

.pin-horizontal-right:before {
	right: 30px;
}

.pin-horizontal-right .pin-caption {
	float: left;
	padding-right: 16px;
}

.pin-horizontal-inline-start:before {
	left: 0;
}

.pin-horizontal-inline-start .pin-caption {
	padding-left: 16px;
	float: right;
}

.pin-horizontal-inline-end:before {
	right: 0;
}

.pin-horizontal-inline-end .pin-caption {
	padding-right: 16px;
	float: left;
}

.pin-vertical {
	top: 0;
	bottom: 0;
	width: 1px;
}

.pin-vertical:before {
	left: 0;
}

.pin-vertical:after {
	height: 100%;
	width: 1px;
}

.pin-vertical .pin-caption {
	margin-left: -100px;
	position: absolute;
	left: 0;
	width: 200px;
	text-align: center;
	z-index: 1;
}

.pin-vertical .pin-caption-left,
.pin-vertical .pin-caption-right {
	margin-left: 0;
}

.pin-vertical .pin-caption-left {
	text-align: left;
}

.pin-vertical .pin-caption-right {
	left: auto;
	right: 0;
	text-align: right;
}

.pin-vertical-top {
	padding-bottom: 26.1px;
}

.pin-vertical-top:before {
	top: 0;
}

.pin-vertical-top .pin-caption {
	top: 100%;
	margin-top: -18.1px;
}

.pin-vertical-bottom {
	padding-top: 26.1px;
}

.pin-vertical-bottom:before {
	bottom: 0;
}

.pin-vertical-bottom .pin-caption {
	bottom: 100%;
	margin-bottom: -18.1px;
}

/* ----- Service Pins ----- */

.keyline-special {
	margin-top: 249px;
	border-top: solid 1px #d6d6d6;
}
.service-pins .device-iphone-x-silver-container,
.service-pins .device-iphone-13-pro-silver-container {
	margin-right: auto;
	margin-left: auto;
	width: 283px;
	height: 250px;
	background-size: 283px 566px;
	background-position: top center;
}

.service-pins .device-iphone-x-silver-container .device-hardware,
.service-pins .device-iphone-13-pro-silver-container .device-hardware {
	width: 283px;
	height: 249px;
	background-size: 283px 566px;
	background-position: top center;
}
.service-pins {
	position: relative;
	margin: 0 auto;
	width: 285px;
}
.service-pins .pin-horizontal-right,
.service-pins .pin-horizontal-left {
	padding-bottom: 20px;
}
.service-pins .pin-1 {
	top: 136px;
	right: -118px;
	left: 148px;
}
.service-pins .pin-1 .pin-caption {
	width: 91px;
}
.service-pins .pin-1.pin-horizontal:after {
	width: 166px;
}

.service-pins .pin-2 {
	top: 161px;
	right: 218px;
	left: -116px;
}
.service-pins .pin-2.pin-horizontal:after {
	width: 67px;
}

.service-pins .pin-3 {
	top: 147px;
	right: -116px;
	left: 116px;
}
.service-pins .pin-3.pin-horizontal:after {
	width: 195px;
}

.service-pins .pin-4 {
	top: 203px;
	right: 218px;
	left: -123px;
}
.service-pins .pin-4.pin-horizontal:after {
	width: 70px;
}

.service-pins .pin-horizontal .pin-caption {
	margin-left: 0;
	max-width: 173px;
	font-size: 11px;
	text-align: left;
	line-height: 1.29286em;
	white-space: normal;
}
.service-pins .pin-2 .pin-caption {
	width: 112px;
	margin-top: -20px;
	padding-right: 0;
	margin-right: -26px;
}
.service-pins .pin-3 .pin-caption {
	width: 88px;
}

/* medium viewport */
@media only screen and (max-width: 1068px) {
	.section.section-service .section-content .sidebar {
		margin-left: 0;
	}
	.service-pins .device-iphone-x-silver-container.device-large-for-medium,
	.service-pins .device-iphone-13-pro-silver-container.device-large-for-medium {
		width: 283px;
		height: 250px;
		background-size: 283px 566px;
	}

	.service-pins
		.device-iphone-x-silver-container.device-large-for-medium
		.device-hardware
		.service-pins
		.device-iphone-13-pro-silver-container.device-large-for-medium
		.device-hardware {
		width: 283px;
		height: 249px;
		background-size: 283px 566px;
	}
}

/* small viewport */
@media only screen and (max-width: 734px) {
	.service-pins .device-iphone-x-silver-container.device-medium-for-small,
	.service-pins .device-iphone-13-pro-silver-container.device-medium-for-small {
		width: 283px;
		height: 250px;
		background-size: 283px 566px;
	}

	.service-pins
		.device-iphone-x-silver-container.device-medium-for-small
		.device-hardware,
	.service-pins
		.device-iphone-13-pro-silver-container.device-medium-for-small
		.device-hardware {
		width: 283px;
		height: 249px;
		background-size: 283px 566px;
	}
}

/* special viewport */
@media only screen and (max-width: 540px) {
	.special-hide {
		display: none;
	}
	.special-show {
		display: block;
	}
	#main
		.section.section-service
		.section-content
		.row
		> .column.sidebar
		h4.keyline-top {
		margin-top: 2em;
	}
	.keyline-special {
		border-top: solid 1px #d6d6d6;
		margin-top: 184px;
	}
	.service-pins .device-iphone-x-silver-container.device-medium-for-small,
	.service-pins .device-iphone-13-pro-silver-container.device-medium-for-small {
		margin: 100px auto 0;
		width: 212px;
		height: 186px;
		background-size: 212px 425px;
		background-position: top center;
	}
	.service-pins
		.device-iphone-x-silver-container.device-medium-for-small
		.device-hardware,
	.service-pins
		.device-iphone-13-pro-silver-container.device-medium-for-small
		.device-hardware {
		width: 212px;
		height: 185px;
		background-size: 212px 425px;
		background-position: top center;
	}
	.service-pins {
		margin: 0 auto;
		width: 280px;
		height: 250px;
	}
	.service-pins .pin-vertical-top {
		padding-bottom: 20px;
	}
	.service-pins .pin-vertical-bottom {
		padding-top: 20px;
	}
	.service-pins .pin-1 {
		top: -49px;
		bottom: 157px;
		left: 128px;
	}
	.service-pins .pin-2 {
		top: -40px;
		bottom: 148px;
		left: 173px;
	}
	.service-pins .pin-3 {
		top: 120px;
		bottom: -5px;
		left: 60px;
	}
	.service-pins .pin-4 {
		top: 168px;
		bottom: 20px;
		left: 135px;
	}
	.service-pins .pin-vertical .pin-caption {
		margin-left: 0;
		text-align: left;
		line-height: 1.29286em;
		font-size: 11px;
		white-space: normal;
	}
	.service-pins .pin-1 .pin-caption {
		left: -3px;
		width: 100px;
	}
	.service-pins .pin-2 .pin-caption {
		left: -3px;
	}
	.service-pins .pin-3 .pin-caption {
		left: -3px;
		width: 160px;
	}
	.service-pins .pin-4 .pin-caption {
		left: -2px;
	}
}

/* ----- Sidebar Styles ----- */

.sidebar {
	position: relative;
}

.sidebar h4 {
	line-height: 1.25em;
}

.keyline-top {
	border-top: 1px solid #d6d6d6;
	padding-top: 2em;
}

.pull-quote .quote-copy {
	color: #0365c0;
	font-size: 21px;
	line-height: 1.45;
	font-style: italic;
	font-weight: 300;
}

.pull-quote .quote-credit {
	font-size: 16px;
	line-height: 1.45;
	font-weight: 400;
}

.quote-copy.no-quote > :before,
.quote-copy.no-quote > :after {
	content: "";
}

/* Graphs */
.graph-data {
	width: 100%;
	height: 100%;
	display: inline-block;
}

.graph-sidebar .graph-unit {
	margin-bottom: 18px;
}

.graph-sidebar .graph-data {
	width: 100%;
}

.graph-bar-slot {
	background: #f2f2f2;
	height: 4px;
	margin-bottom: 8px;
}

.graph-bar {
	margin-bottom: 5px;
	background: #f46c0e;
	height: 4px;
}

.graph {
	margin-left: 2.5em;
	padding-bottom: 0.5em;
	position: relative;
}

.graph figcaption {
	margin-right: -1em;
	margin-left: -2.9em;
}

.graph-data {
	position: relative;
}

.graph-caption-total {
	position: absolute;
	right: 200px;
	text-align: right;
	white-space: nowrap;
	top: -10px;
	font-size: 14px;
	line-height: 1.29286;
	font-weight: 600;
	letter-spacing: 0em;
	color: #333;
}
.graph-wide .graph-caption-total {
	right: initial;
	left: -45px;
}

.graph-sidebar .pin-1 {
	left: 0;
}

.graph-sidebar .pin-2 {
	left: 34%;
}

.graph-sidebar .pin-3 {
	left: 67%;
}

/* medium viewport */
@media only screen and (max-width: 1068px) {
	.graph-caption-total {
		right: 173px;
	}
	.graph-wide .graph-caption-total {
		right: initial;
	}
}

/* small viewport */
@media only screen and (max-width: 734px) {
	.graph-caption-total {
		right: auto;
		left: -46px;
		max-width: 41px;
		white-space: normal;
	}
	.graph-wide .graph-caption-total {
		right: initial;
	}
}

.sidebar-3-unit-1 .graph-bar {
	width: 100%;
	opacity: 0.2;
}

.sidebar-3-unit-2 .graph-bar {
	width: 66%;
	float: right;
	opacity: 0.6;
}

.sidebar-3-unit-3 .graph-bar {
	width: 33%;
	float: right;
}

.graph-caption {
	font-size: 14px;
	line-height: 1.28583;
	font-weight: 400;
	letter-spacing: 0em;
	text-align: start;
	color: #666666;
	position: absolute;
	top: 160px;
}

.graph-caption-total {
	font-weight: 600;
	color: #333333;
}

.graph-wide {
	margin-bottom: 3em;
}

.graph-wide .graph-caption {
	position: absolute;
	left: 110%;
	top: 0;
	margin: 0;
}

.graph-wide .graph-caption ul {
	list-style: none;
	margin: -1em 0 0;
	line-height: 3em;
	white-space: nowrap;
}

@media only screen and (max-width: 734px) {
	.graph-wide {
		margin-bottom: 8em;
	}
	.graph-wide .graph-caption {
		top: 160px;
		left: auto;
	}
	.graph-wide .graph-caption ul {
		list-style: initial;
		margin: 0 -1em 0 1em;
		line-height: 1.28583;
		white-space: initial;
	}
}

/* ---------- tables ---------- */

table {
	width: 100%;
}
table tbody {
	vertical-align: top;
}
table th,
table td {
	margin-left: 0;
	margin-bottom: 0.6em;
	padding: 0.75em 1em 0.75em 1em;
	border-bottom: 1px solid #ccc;
}
table.table-chart td:first-of-type {
	padding-left: 0;
}
table.table-chart td:last-of-type {
	padding-right: 0;
}

table.table-chart td:nth-of-type(1) {
	width: 16%;
}
table.table-chart td:nth-of-type(2) {
	width: 28%;
}
table.table-chart td:nth-of-type(3) {
	width: 28%;
}
table.table-chart td:nth-of-type(4) {
	width: 28%;
}

table td figure.icon-checksolid {
	width: 16px;
	margin: auto;
}

table.table-offers {
	border: 1px solid #ccc;
}
body[data-color-scheme="dark"] table.table-offers {
	border: 1px solid #ccc;
}
table.table-offers th,
table.table-offers td {
	margin-left: 0;
	margin-bottom: 0.6em;
	padding: 0.75em 1em 0.75em 1em;
	border-bottom: 1px solid #ccc;
}
body[data-color-scheme="dark"] table.table-offers th,
body[data-color-scheme="dark"] table.table-offers td {
	border-bottom: 1px solid #555;
}
table.table-offers thead tr:nth-of-type(odd) {
	background-color: #f5f5f7;
}
table.table-offers thead tr th {
	background-color: transparent;
}
table.table-offers tbody tr:nth-of-type(even) {
	background-color: #fafafc;
}
body[data-color-scheme="dark"] table.table-offers thead tr:nth-of-type(odd) {
	background-color: #1d1d1f;
}
body[data-color-scheme="dark"] table.table-offers tbody tr:nth-of-type(even) {
	background-color: #161617;
}

/* ---------- Images ---------- */
.image-subscriptions-hero {
	margin-top: 1em;
	display: block;
	width: 830px;
	height: 588px;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: center;
	background-image: url("/app-store/subscriptions/images/lockup-hero-large_2x.png");
}

:lang(ja) .image-subscriptions-hero {
	background-image: url("/jp/app-store/subscriptions/images/jp-lockup-hero-alt-large_2x.png");
}

.video-image {
	display: inline-block;
	width: 250px;
	height: 141px;
	background-size: 100% 100%;
	background-position: left;
	background-repeat: no-repeat;
}
.video-success {
	display: inline-block;
	background-image: url("/app-store/subscriptions/images/video-designing-for-subscription-success.jpg");
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
	only screen and (min-resolution: 1.5dppx),
	only screen and (min-resolution: 144dpi) {
	.video-success {
		background-image: url("/app-store/subscriptions/images/video-designing-for-subscription-success_2x.jpg");
	}
}
.video-storekit {
	display: inline-block;
	background-image: url("/app-store/subscriptions/images/video-storekit.jpg");
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
	only screen and (min-resolution: 1.5dppx),
	only screen and (min-resolution: 144dpi) {
	.video-storekit {
		background-image: url("/app-store/subscriptions/images/video-storekit_2x.jpg");
	}
}

.device-iphone-x-silver-container .device-screen.image-user-options,
.device-iphone-13-pro-silver-container .device-screen.image-user-options {
	width: 246px;
	height: 233px;
	background-size: 246px 532px;
	background-position: top center;
	background-image: url("/app-store/subscriptions/images/screen-hero-iphone-large_2x.png");
}

.icon-family-sharing {
	width: 96px;
	height: 96px;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
	background-image: url("/assets/elements/icons/family-sharing/family-sharing-128x128.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-family-sharing {
		background-image: url("/assets/elements/icons/family-sharing/family-sharing-128x128_2x.png");
	}
}

.image-purchase-flow-1 {
	background-image: url("/app-store/subscriptions/images/screen-purchase-flow-1-large.jpg");
}
@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-purchase-flow-1 {
		background-image: url("/app-store/subscriptions/images/screen-purchase-flow-1-large_2x.jpg");
	}
}
.image-purchase-flow-2 {
	background-image: url("/app-store/subscriptions/images/screen-purchase-flow-2-large.jpg");
}
@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-purchase-flow-2 {
		background-image: url("/app-store/subscriptions/images/screen-purchase-flow-2-large_2x.jpg");
	}
}
.screen-onboarding {
	background-image: url("/app-store/subscriptions/images/screen-onboarding-large.jpg");
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
	only screen and (min-resolution: 1.5dppx),
	only screen and (min-resolution: 144dpi) {
	.screen-onboarding {
		background-image: url("/app-store/subscriptions/images/screen-onboarding-large_2x.jpg");
	}
}
.screen-freemium {
	background-image: url("/app-store/subscriptions/images/screen-freemium-large.jpg");
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
	only screen and (min-resolution: 1.5dppx),
	only screen and (min-resolution: 144dpi) {
	.screen-freemium {
		background-image: url("/app-store/subscriptions/images/screen-freemium-large_2x.jpg");
	}
}
.screen-paywall {
	background-image: url("/app-store/subscriptions/images/screen-paywall-large.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) {
	.screen-paywall {
		background-image: url("/app-store/subscriptions/images/screen-paywall-large_2x.png");
	}
}

.screen-redemption {
	background-image: url("/app-store/subscriptions/images/screen-redemption-large.jpg");
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
	only screen and (min-resolution: 1.5dppx),
	only screen and (min-resolution: 144dpi) {
	.screen-redemption {
		background-image: url("/app-store/subscriptions/images/screen-redemption-large_2x.jpg");
	}
}

.screen-offers {
	background-image: url("/app-store/subscriptions/images/screen-offers-large.jpg");
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
	only screen and (min-resolution: 1.5dppx),
	only screen and (min-resolution: 144dpi) {
	.screen-offers {
		background-image: url("/app-store/subscriptions/images/screen-offers-large_2x.jpg");
	}
}

.screen-offer-codes {
	background-image: url("/app-store/subscriptions/images/screen-redeem-large.jpg");
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
	only screen and (min-resolution: 1.5dppx),
	only screen and (min-resolution: 144dpi) {
	.screen-offer-codes {
		background-image: url("/app-store/subscriptions/images/screen-redeem-large_2x.jpg");
	}
}

.image-promote-iap {
	display: block;
	width: 276px;
	height: 114px;
	margin-top: 8px;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: center;
	background-image: url("/app-store/subscriptions/images/promote-iap-large.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) {
	.image-promote-iap {
		background-image: url("/app-store/subscriptions/images/promote-iap-large_2x.png");
	}
}
:lang(zh) .image-promote-iap {
	background-image: url("/cn/app-store/subscriptions/images/cn-aside-promoted-large.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) {
	:lang(zh) .image-promote-iap {
		background-image: url("/cn/app-store/subscriptions/images/cn-aside-promoted-large_2x.png");
	}
}
:lang(ja) .image-promote-iap {
	background-image: url("/jp/app-store/subscriptions/images/jp-aside-promoted-large.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) {
	:lang(ja) .image-promote-iap {
		background-image: url("/jp/app-store/subscriptions/images/jp-aside-promoted-large_2x.png");
	}
}
:lang(ko) .image-promote-iap {
	background-image: url("/kr/app-store/subscriptions/images/kr-aside-promoted-large.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) {
	:lang(ko) .image-promote-iap {
		background-image: url("/kr/app-store/subscriptions/images/kr-aside-promoted-large_2x.png");
	}
}

@media only screen and (max-width: 1068px) {
	.image-subscriptions-hero {
		width: 692px;
		height: 490px;
		background-image: url("/app-store/subscriptions/images/lockup-hero-medium_2x.png");
	}
	:lang(ja) .image-subscriptions-hero {
		background-image: url("/jp/app-store/subscriptions/images/jp-lockup-hero-alt-medium_2x.png");
	}

	.image-promote-iap {
		display: block;
		width: 196px;
		height: 81px;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-position: center;
		background-image: url("/app-store/subscriptions/images/promote-iap-medium.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) {
		.image-promote-iap {
			background-image: url("/app-store/subscriptions/images/promote-iap-medium_2x.png");
		}
	}
	:lang(zh) .image-promote-iap {
		background-image: url("/cn/app-store/subscriptions/images/cn-aside-promoted-medium.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) {
		:lang(zh) .image-promote-iap {
			background-image: url("/cn/app-store/subscriptions/images/cn-aside-promoted-medium_2x.png");
		}
	}
	:lang(ja) .image-promote-iap {
		background-image: url("/jp/app-store/subscriptions/images/jp-aside-promoted-medium.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) {
		:lang(ja) .image-promote-iap {
			background-image: url("/jp/app-store/subscriptions/images/jp-aside-promoted-medium_2x.png");
		}
	}
	:lang(ko) .image-promote-iap {
		background-image: url("/kr/app-store/subscriptions/images/kr-aside-promoted-medium.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) {
		:lang(ko) .image-promote-iap {
			background-image: url("/kr/app-store/subscriptions/images/kr-aside-promoted-medium_2x.png");
		}
	}

	.device-iphone-x-silver-container.device-large-for-medium
		.device-screen.image-user-options {
		width: 246px;
		height: 233px;
		background-size: 246px 532px;
	}
	.image-purchase-flow-1 {
		background-image: url("/app-store/subscriptions/images/screen-purchase-flow-1-medium.jpg");
	}
	@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
		only screen and (max-width: 1068px) and (min-resolution: 1.5dppx),
		only screen and (max-width: 1068px) and (min-resolution: 144dpi) {
		.image-purchase-flow-1 {
			background-image: url("/app-store/subscriptions/images/screen-purchase-flow-1-medium_2x.jpg");
		}
	}
	.image-purchase-flow-2 {
		background-image: url("/app-store/subscriptions/images/screen-purchase-flow-2-medium.jpg");
	}
	@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
		only screen and (max-width: 1068px) and (min-resolution: 1.5dppx),
		only screen and (max-width: 1068px) and (min-resolution: 144dpi) {
		.image-purchase-flow-2 {
			background-image: url("/app-store/subscriptions/images/screen-purchase-flow-2-medium_2x.jpg");
		}
	}
	.screen-onboarding {
		background-image: url("/app-store/subscriptions/images/screen-onboarding-medium.jpg");
	}
	@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
		only screen and (min-resolution: 1.5dppx),
		only screen and (min-resolution: 144dpi) {
		.screen-onboarding {
			background-image: url("/app-store/subscriptions/images/screen-onboarding-medium_2x.jpg");
		}
	}
	.screen-freemium {
		background-image: url("/app-store/subscriptions/images/screen-freemium-medium.jpg");
	}
	@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
		only screen and (min-resolution: 1.5dppx),
		only screen and (min-resolution: 144dpi) {
		.screen-freemium {
			background-image: url("/app-store/subscriptions/images/screen-freemium-medium_2x.jpg");
		}
	}
	.screen-paywall {
		background-image: url("/app-store/subscriptions/images/screen-paywall-medium.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) {
		.screen-paywall {
			background-image: url("/app-store/subscriptions/images/screen-paywall-medium_2x.png");
		}
	}
	.screen-redemption {
		background-image: url("/app-store/subscriptions/images/screen-redemption-medium.jpg");
	}
	@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
		only screen and (min-resolution: 1.5dppx),
		only screen and (min-resolution: 144dpi) {
		.screen-redemption {
			background-image: url("/app-store/subscriptions/images/screen-redemption-medium_2x.jpg");
		}
	}
	.screen-offers {
		background-image: url("/app-store/subscriptions/images/screen-offers-medium.jpg");
	}
	@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
		only screen and (min-resolution: 1.5dppx),
		only screen and (min-resolution: 144dpi) {
		.screen-offers {
			background-image: url("/app-store/subscriptions/images/screen-offers-medium_2x.jpg");
		}
	}
	.screen-offer-codes {
		background-image: url("/app-store/subscriptions/images/screen-redeem-medium.jpg");
	}
	@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
		only screen and (min-resolution: 1.5dppx),
		only screen and (min-resolution: 144dpi) {
		.screen-offer-codes {
			background-image: url("/app-store/subscriptions/images/screen-redeem-medium_2x.jpg");
		}
	}
}

@media only screen and (max-width: 734px) {
	.image-subscriptions-hero {
		width: 310px;
		height: 220px;
		background-image: url("/app-store/subscriptions/images/lockup-hero-small_2x.png");
	}

	:lang(ja) .image-subscriptions-hero {
		background-image: url("/jp/app-store/subscriptions/images/jp-lockup-hero-alt-medium_2x.png");
	}

	.image-promote-iap {
		margin-top: 1.6em;
		display: block;
		width: 276px;
		height: 114px;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-position: center;
		background-image: url("/app-store/subscriptions/images/promote-iap-large.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) {
		.image-promote-iap {
			background-image: url("/app-store/subscriptions/images/promote-iap-large_2x.png");
		}
	}
	:lang(zh) .image-promote-iap {
		background-image: url("/cn/app-store/subscriptions/images/cn-aside-promoted-large.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) {
		:lang(zh) .image-promote-iap {
			background-image: url("/cn/app-store/subscriptions/images/cn-aside-promoted-large_2x.png");
		}
	}
	:lang(ja) .image-promote-iap {
		background-image: url("/jp/app-store/subscriptions/images/jp-aside-promoted-large.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) {
		:lang(ja) .image-promote-iap {
			background-image: url("/jp/app-store/subscriptions/images/jp-aside-promoted-large_2x.png");
		}
	}
	:lang(ko) .image-promote-iap {
		background-image: url("/kr/app-store/subscriptions/images/kr-aside-promoted-large.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) {
		:lang(ko) .image-promote-iap {
			background-image: url("/kr/app-store/subscriptions/images/kr-aside-promoted-large_2x.png");
		}
	}
	.device-iphone-x-silver-container.device-medium-for-small
		.device-screen.image-user-options,
	.device-iphone-13-pro-silver-container.device-medium-for-small
		.device-screen.image-user-options {
		top: 17px;
		left: 19px;
		width: 246px;
		height: 233px;
		background-size: 246px 532px;
		background-position: top center;
		background-image: url("/app-store/subscriptions/images/screen-hero-iphone-large_2x.png");
	}
}

@media only screen and (max-width: 540px) {
	.device-iphone-x-silver-container.device-medium-for-small
		.device-screen.image-user-options,
	.device-iphone-13-pro-silver-container.device-medium-for-small
		.device-screen.image-user-options {
		top: 12px;
		left: 14px;
		width: 185px;
		height: 173px;
		background-size: 185px 399px;
		background-position: top center;
		background-image: url("/app-store/subscriptions/images/screen-hero-iphone-medium_2x.png");
	}
}

/* === DARK MODE === */
body[data-color-scheme="dark"] .sidebar-graph-3 {
	filter: invert(1);
}
body[data-color-scheme="dark"] .sidebar-graph-3 .graph-bar {
	filter: invert(1);
}