.main {
    overflow: initial;
}

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

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


/* ----- 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: 735px) {
    .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 ----- */
.violator {
    margin-left: 0;
    margin-bottom: 0.5em;
}

.violator-inline {
    vertical-align: middle;
}

.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;
}

/* small viewport */
@media only screen and (max-width: 735px) {
    .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: 735px) {
    .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: 735px) {
    .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: 735px) {
    .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;
    }
}

/* ---------- Chart ---------- */

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

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.table-chart td:last-of-type {
    padding-right: 0;
}

/* ---------- 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: 735px) {
    .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"].dmf .sidebar-graph-3 {
    filter: invert(1);
}
body[data-color-scheme="dark"].dmf .sidebar-graph-3 .graph-bar {
    filter: invert(1);
}