/* break points esp for XS */
@media (max-width: 535px) {
  .section-intro br.small {
    display: none;
  }
}

@media (max-width: 513px) {
  .section-header-siri-ai .section-intro br {
    display: none;
  }
}


/* chevron */
.icon-wrapper .icon-after:after, .icon-wrapper .more:after {
    position: relative;
    top: -0.08em;
}

.icon-wrapper .icon, .icon-wrapper .more:not(.icon-before):after, .icon-wrapper .icon-before:before, .icon-wrapper .icon-after:after {
    position: relative;
}

/* .section-header .section-intro {
line-height: 27.5px;
} */

.typography-body-copy:lang(ko) {
    line-height: 1.30952381;
}

.typography-body-copy-alt:lang(ko) {
    line-height: 1.30952381;
}

.typography-router-tv-plus-headline:lang(ko) {
    line-height: 1.30952381;
}

.icon-copy i {
    display: inline-block;
    transform: skewX(-10deg);
    font-style: normal; /* prevent double-italicizing the Latin parts */
}

.inline-video-caption i,
.icon-copy i,
.logo-attr i,
.room-copy i {
    font-style: italic;
}

.inline-video-caption i,
.icon-copy i,
.tile-shareplay .tile-copy i {
    font-style: italic;
}

/* the dink hover underline */
.welcome-attribute:hover {
  text-decoration: none !important;
}

.welcome-attribute:hover .icon-copy,
.welcome-attribute:hover .icon-copy * {
  text-decoration: underline !important;
}

/* make sure the icon never gets an underline */
.welcome-attribute .icon-external,
.welcome-attribute:hover .icon-external {
  text-decoration: none !important;
}

/* word break */
.no-break {
  white-space: nowrap;
}



/* Remote section */

.section-siri-remote .gestures {
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-siri-remote .gestures .left-column {
    margin: 0 auto;
}

.section-siri-remote .gestures .right-column {
    flex: 0 1 auto;
}

.section-siri-remote .gestures .left-column img {
    margin-bottom: -7px;
}

.section-siri-remote .siri-remote-copy-override {
    color: #86868b;
}

.section-siri-remote .siri-remote-copy-override strong {
    color: #1d1d1f;
}

.section-siri-remote .siri-remote-copy-override p {
    margin-bottom: 110px;
}

.section-siri-remote .siri-remote-copy-override p:last-child {
    margin-bottom: 0;
}

@media only screen and (min-width: 735px) {
    .section.section-siri-remote {
        padding-bottom: 0;
    }
}

@media only screen and (min-width: 735px) and (max-width: 1068px) {
    .section-siri-remote .gestures .left-column img {
        max-width: 85%;
        margin: 0 auto;
        display: block;
    }
}

@media only screen and (max-width: 734px) {
    .section-siri-remote .gestures {
        flex-direction: column;
        gap: 30px;
    }

    .section-siri-remote .gestures .right-column {
        text-align: left;
        width: calc(100% - 60px);
        margin-right: 60px;
    }

    .section-siri-remote .gestures .left-column img {
        max-width: 50%;
        margin: 0 auto;
        display: block;
    }

    .section-siri-remote .siri-remote-copy-override p {
        margin-bottom: 50px;
    }
}


/* updated tile (removed duplicate siri remote) */

.section-better-together .grid-item .tile-iphone-control {
    min-height: unset;
}

.section-better-together .grid-item .tile-iphone-control .tile-content {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    min-height: 490px;
}

@media only screen and (max-width: 1068px) {
    .section-better-together .grid-item .tile-iphone-control .tile-content {
        min-height: 269px;
    }
}

@media only screen and (max-width: 734px) {
    .section-better-together .grid-item .tile-iphone-control .tile-content {
        min-height: auto;
        display: block;
    }
}

@media only screen and (min-width: 1069px) {
    .section-better-together .grid-item .tile-iphone-control .tile-copy {
        padding: 40px 46px;
    }
}

@media only screen and (min-width: 735px) {
    .section-better-together .grid-item .tile-iphone-control .tile-copy {
        position: relative;
        z-index: 1;
    }
}

.section-better-together .grid-item .tile-iphone-control .tile-copy p {
    width: 379px;
}

@media only screen and (max-width: 1068px) {
    .section-better-together .grid-item .tile-iphone-control .tile-copy p {
        width: 270px;
    }
}

@media only screen and (max-width: 734px) {
    .section-better-together .grid-item .tile-iphone-control .tile-copy p {
        width: auto;
    }
}

.section-better-together .grid-item .tile-iphone-control .image-wrapper {
    padding-top: 54px;
}

@media only screen and (min-width: 735px) {
    .section-better-together .grid-item .tile-iphone-control .image-wrapper {
        position: relative;
        z-index: 0;
        width: 50%;
    }
}

@media only screen and (max-width: 1068px) {
    .section-better-together .grid-item .tile-iphone-control .image-wrapper {
        padding-top: 32px;
    }
}

@media only screen and (max-width: 734px) {
    .section-better-together .grid-item .tile-iphone-control .image-wrapper {
        padding-top: 0;
    }
}

.section-better-together .grid-item .tile-iphone-control .overview-better-together-iphone-control {
    right: -7px;
}

@media only screen and (min-width: 735px) {
    .section-better-together .grid-item .tile-iphone-control .overview-better-together-iphone-control {
        position: absolute;
        top: -113px;
        width: 100%;
        max-width: 100%;
        height: auto;
    }
}

@media only screen and (max-width: 1068px) {
    .section-better-together .grid-item .tile-iphone-control .overview-better-together-iphone-control {
        right: -2px;
        top: -80px; /* M-specific — adjust this value freely */
    }
}

@media only screen and (max-width: 734px) {
    .section-better-together .grid-item .tile-iphone-control .overview-better-together-iphone-control {
        right: unset;
        position: relative;
        left: 50%;
        margin-left: -100px;
        top: 0; /* explicitly locked for S — won't change when you adjust M above */
    }
}


/* updated static image for siri remote section upper */
/* ====== M view: adjust "top" freely ====== */
@media (min-width: 735px) and (max-width: 1068px) {
    .section-siri-ai .static-frame {
        position: relative;
        top: 90px; /* <-- adjust this value freely */
    }
}

/* ====== L view: adjust "top" freely ====== */
@media (min-width: 1069px) {
    .section-siri-ai .static-frame {
        position: relative;
        top: 150px; /* <-- adjust this value freely */
    }
}

/* ====== S view: enlarge image only, NO top/position change ====== */
@media (max-width: 734px) {
    .section-siri-ai .static-frame {
        position: relative;
        top: -50px; /* <-- adjust this value freely */
        width: 100px;
        height: 130px;
        max-width: 100px;
        max-height: 130px;
        margin: 50px;
        right: 5px;
        margin-top: 50px;
        padding-top: 50px;
    }
}