.two-image {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.two-image.on {
    opacity: 1;
}

.two-image .c_c_logo img {
    transform: scale(2);
    opacity: 0;
    position: absolute;
    top: 200%;
}

.two-image.on.on2 .c_c_logo img {
    opacity: 1;
    transform: scale(1);
    top: 0;
    transition: all 1.5s ease;
}

.home_banner2 .logo3a.on2>div {
    opacity: 1;
    transform: scale(1) translateZ(0) skewX(0deg) rotateX(0deg);
}

.home_banner2 .logo3a>div {
    display: inline-block;
    opacity: 0;
    font-size: 26px;
    transform: scale(1.5) translate3d(0, 50px, 0) skewX(60deg) rotateX(-80deg);
}

.will-change-transform {
    will-change: transform
}

.will-change-opacity {
    will-change: opacity
}

.will-change .parallax-this {
    will-change: transform
}

.will-change .parallax-this.fade-it {
    will-change: opacity
}

@keyframes fade-in {
    0% {
        opacity: .001
    }
    to {
        opacity: .999
    }
}

html.no-js picture[data-lazy] {
    display: none!important
}

.play-pause-button {
    width: 36px;
    height: 36px
}

.play-pause-button * {
    pointer-events: none
}

.play-pause-button.paused .play-icon {
    opacity: .999
}

.play-pause-button.paused .pause-icon,
.play-pause-button.playing .play-icon {
    opacity: .001
}

.play-pause-button.playing .pause-icon {
    opacity: .999
}

.play-pause-button .control-icon {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.play-pause-button svg {
    fill: currentColor
}

html.no-js .play-pause-button {
    display: none
}

.section-hero {
    --homepod-bottom: -245px;
    overflow: hidden;
    position: relative;
    padding-bottom: 150px;
    margin-bottom: -150px
}

@media only screen and (max-width: 1068px) {
    .section-hero {
        --homepod-bottom: -170px
    }
}

@media only screen and (max-width: 734px) {
    .section-hero {
        --homepod-bottom: -95px
    }
}

@media only screen and (max-width: 320px) {
    .section-hero {
        --homepod-bottom: -70px
    }
}

.section-hero .siri {
    background: url('../images/NewlineLogo.png') no-repeat 50%;
    -webkit-mask: url('../images/NewlineLogo.png');
    mask: url('../images/NewlineLogo.png');
    -webkit-mask-size: 100%;
    mask-size: 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    width: 384px;
    height: 218px;
    margin-left: -10px;
    z-index: 10;
    background: linear-gradient(121deg, #FE0576 24%, #EA12B6 40%, #38CBFF 60%);
    background-size: 300% 100%;
    animation: gradient 3s cubic-bezier(0.33, 1, 0.68, 1) forwards
}

@media only screen and (max-width: 1068px) {
    .section-hero .siri {
        width: 254px;
        height: 144px
    }
}

@media only screen and (max-width: 734px) {
    .section-hero .siri {
        width: 154px;
        height: 88px;
        margin-left: -5px
    }
}

@keyframes gradient {
    to {
        background-position: 38% 100%
    }
}

.section-hero-images {
    position: relative;
    z-index: 1;
    width: 100%;
    height: calc(100vh - var(--r-globalnav-height));
    display: grid;
    grid-template-columns: auto var(--middle-col-width) auto;
    margin: 0 auto calc(var(--homepod-bottom)*-1);
    --middle-col-width: 50%;
    min-height: 980px;
    max-width: 1200px
}

@media only screen and (min-width: 1441px) {
    .section-hero-images {
        --middle-col-width: 57%;
        max-width: 1920px;
    }
}

@media only screen and (max-width: 1200px) {
    .section-hero-images {
        --middle-col-width: 44%;
        max-width: 1068px
    }
}

@media only screen and (max-width: 1068px) {
    .section-hero-images {
        min-height: 730px
    }
}

@media only screen and (max-width: 734px) {
    .section-hero-images {
        --middle-col-width: 58%;
        min-height: max(98vh, 665px);
        min-width: 420px;
        left: 50%;
        transform: translateX(-50%)
    }
}

@media only screen and (max-width: 320px) {
    .section-hero-images {
        min-height: 575px;
        min-width: 320px
    }
}

.section-hero-images .column {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* justify-content: space-between; */
    justify-content: space-around;
}

.section-hero-images picture {
    --to-scale: 1;
    margin-top: 0px;
    opacity: 0;
    position: absolute
}

@media only screen and (max-width: 320px) {
    .section-hero-images picture {
        --to-scale: .8
    }
}

.section-hero-images picture.animate {
    animation: animate-hw 2s ease forwards
}

@keyframes animate-hw {
    to {
        opacity: 1;
        transform: scale(1) translateZ(0)
    }
}

@media only screen and (max-width: 320px) {
    .section-hero-images picture.iphone img {
        transform-origin: top
    }
    .section-hero-images picture img {
        transform: scale(var(--to-scale))
    }
}

.section-hero-images .airpods {
    z-index: 10;
    mix-blend-mode: darken;
    right: 0;
    top: 7%;
    transform: scale(1.5) translate3d(-50%, -60%, 0)
}

@media only screen and (max-width: 1068px) {
    .section-hero-images .airpods {
        top: 16%;
        transform: scale(1.5) translate3d(-110%, -95%, 0)
    }
}

@media only screen and (max-width: 734px) {
    .section-hero-images .airpods {
        right: -10px;
        transform: scale(1.5) translate3d(-50%, -60%, 0)
    }
}

@media only screen and (max-width: 320px) {
    .section-hero-images .airpods {
        top: 15%
    }
}

@media only screen and (max-width: 734px)and (min-height:668px) {
    .section-hero-images .airpods {
        top: 17%
    }
}

.section-hero-images .ipad {
    /* right: 33px; */
    /* bottom: -580px; */
    transform: scale(1.11) translate3d(-30%, -3%, 0)
}

@media only screen and (max-width: 1068px) {
    .section-hero-images .ipad {
        right: 0px;
        bottom: max(-80px, -10%);
        transform: scale(1.2) translate3d(-75%, -30%, 0)
    }
}

@media only screen and (max-width: 734px) {
    .section-hero-images .ipad {
        bottom: max(-35px, -5%);
        transform: scale(1.2) translate3d(-50%, -10%, 0)
    }
}

@media only screen and (max-width: 320px) {
    .section-hero-images .ipad {
        right: -30px;
        bottom: -55px
    }
}

@media only screen and (min-width: 735px)and (max-width:1068px)and (min-height:1025px) {
    .section-hero-images .ipad {
        bottom: 0
    }
}

@media only screen and (max-width: 734px)and (min-height:774px) {
    .section-hero-images .ipad {
        right: -20px
    }
}

.section-hero-images .iphone {
    z-index: 10;
    --scale: 1;
    position: relative;
    transform: scale(var(--scale)) translate3d(0, -100%, 0);
    transform-origin: top
}

@media only screen and (max-width: 320px) {
    .section-hero-images .iphone {
        --scale: .8
    }
}

.section-hero-images .homepod {
    z-index: 10;
    position: relative;
    margin-bottom: var(--homepod-bottom);
    transform: scale(1.3) translateY(50%)
}

.section-hero-images .homepod img {}

@media (-webkit-min-device-pixel-ratio: 1.5),
(min-resolution:144dpi),
only screen and (-webkit-min-device-pixel-ratio:1.5),
only screen and (min-resolution:1.5dppx) {
    .section-hero-images .homepod img {}
}

@media only screen and (max-width: 1068px) {
    .section-hero-images .homepod img {}
}

@media only screen and (max-width: 1068px)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) {
    .section-hero-images .homepod img {}
}

@media only screen and (max-width: 734px) {
    .section-hero-images .homepod img {}
}

@media only screen and (max-width: 734px)and (-webkit-min-device-pixel-ratio:1.5),
only screen and (max-width:734px)and (min-resolution:1.5dppx),
only screen and (max-width:734px)and (min-resolution:144dpi) {
    .section-hero-images .homepod img {}
}

.section-hero-images .watch {
    left: 18px;
    top: 18px;
    transform: scale(1.3) translate3d(70%, -65%, 0)
}

@media only screen and (max-width: 1068px) {
    .section-hero-images .watch {
        left: 0px;
        top: 13%;
        transform: scale(1.3) translate3d(88%, -107%, 0)
    }
}

@media only screen and (max-width: 734px) {
    .section-hero-images .watch {
        left: -10px;
        transform: scale(1.3) translate3d(75%, -50%, 0)
    }
}

@media only screen and (max-width: 320px) {
    .section-hero-images .watch {
        top: 11%
    }
}

@media only screen and (max-width: 734px)and (min-height:668px) {
    .section-hero-images .watch {
        top: 14%
    }
}

.section-hero-images .remote {
    left: 0%;
    bottom: -12%;
    transform: scale(1.3) translate3d(70%, -12%, 0)
}

@media only screen and (max-width: 1068px) {
    .section-hero-images .remote {
        bottom: max(-94px, -13%);
        transform: scale(1.3) translate3d(107%, -45%, 0)
    }
}

@media only screen and (max-width: 734px) {
    .section-hero-images .remote {
        bottom: max(-21px, -3%);
        transform: scale(1.3) translate3d(70%, -30%, 0)
    }
}

@media only screen and (max-width: 320px) {
    .section-hero-images .remote {
        left: -38px
    }
}

@media only screen and (min-width: 735px)and (max-width:1068px)and (min-height:1025px) {
    .section-hero-images .remote {
        left: 70px;
        margin: 0;
    }
}

@media only screen and (max-width: 734px)and (min-height:774px) {
    .section-hero-images .remote {
        left: -20px
    }
}

.section-hero-copy {
    position: relative;
    z-index: 2;
    margin: 0 auto;
    padding-top: var(--section-padding);
    max-width: 770px
}

@media only screen and (max-width: 1068px) {
    .section-hero-copy {
        max-width: 590px
    }
}

@media only screen and (max-width: 734px) {
    .section-hero-copy {
        max-width: 275px
    }
}

.section-hero-copy .typography-headline-elevated {
    text-align: center;
    padding-bottom: 35px;
    margin-top: 0px;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    --gradient-color-1: #ff007a;
    --gradient-color-2: #1e76c9;
    --gradient-color-3: #35fced
}

.section-hero-copy .typography-headline-elevated.parallax-0 {
    background-image: linear-gradient(135deg, var(--gradient-color-1) 10%, var(--gradient-color-2) 75%, var(--gradient-color-3) 150%)
}

.section-hero-copy .typography-headline-elevated.parallax-1 {
    background-image: linear-gradient(135deg, var(--gradient-color-1) -5%, var(--gradient-color-2) 50%, var(--gradient-color-3) 130%)
}

.section-hero-copy .typography-headline-elevated.parallax-2 {
    background-image: linear-gradient(135deg, var(--gradient-color-1) -30%, var(--gradient-color-2) 40%, var(--gradient-color-3) 105%)
}

.section-hero-copy .typography-headline-elevated .footnote {
    position: unset
}

@media only screen and (max-width: 734px) {
    .section-hero-copy .typography-headline-elevated {
        font-size: 48px;
        line-height: 1.0834933333;
        font-weight: 600;
        letter-spacing: -0.003em;
        font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-hero-copy .typography-headline-elevated:lang(ar) {
        letter-spacing: 0em;
        font-family: SF Pro AR, SF Pro Gulf, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-hero-copy .typography-headline-elevated:lang(ja) {
        line-height: 1.1459933333;
        letter-spacing: 0em;
        font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-hero-copy .typography-headline-elevated:lang(ko) {
        line-height: 1.1875;
        letter-spacing: 0em;
        font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-hero-copy .typography-headline-elevated:lang(zh) {
        letter-spacing: 0em
    }
    .section-hero-copy .typography-headline-elevated:lang(th) {
        line-height: 1.3334933333;
        font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-hero-copy .typography-headline-elevated:lang(zh-CN) {
        font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-hero-copy .typography-headline-elevated:lang(zh-HK) {
        font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-hero-copy .typography-headline-elevated:lang(zh-MO) {
        font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-hero-copy .typography-headline-elevated:lang(zh-TW) {
        font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif
    }
}

@media only screen and (max-width: 734px)and (max-width:1068px) {
    .section-hero-copy .typography-headline-elevated {
        font-size: 40px;
        line-height: 1.1;
        font-weight: 600;
        letter-spacing: 0em;
        font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-hero-copy .typography-headline-elevated:lang(ja) {
        line-height: 1.175;
        font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-hero-copy .typography-headline-elevated:lang(ko) {
        line-height: 1.2;
        font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-hero-copy .typography-headline-elevated:lang(th) {
        line-height: 1.35;
        font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-hero-copy .typography-headline-elevated:lang(ar) {
        font-family: SF Pro AR, SF Pro Gulf, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-hero-copy .typography-headline-elevated:lang(zh-CN) {
        font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-hero-copy .typography-headline-elevated:lang(zh-HK) {
        font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-hero-copy .typography-headline-elevated:lang(zh-MO) {
        font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-hero-copy .typography-headline-elevated:lang(zh-TW) {
        font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif
    }
}

@media only screen and (max-width: 734px)and (max-width:734px) {
    .section-hero-copy .typography-headline-elevated {
        font-size: 32px;
        line-height: 1.125;
        font-weight: 600;
        letter-spacing: .004em;
        font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-hero-copy .typography-headline-elevated:lang(ja) {
        line-height: 1.21875;
        font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-hero-copy .typography-headline-elevated:lang(ko) {
        line-height: 1.21875;
        font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-hero-copy .typography-headline-elevated:lang(th) {
        line-height: 1.375;
        font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-hero-copy .typography-headline-elevated:lang(ar) {
        font-family: SF Pro AR, SF Pro Gulf, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-hero-copy .typography-headline-elevated:lang(zh-CN) {
        font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-hero-copy .typography-headline-elevated:lang(zh-HK) {
        font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-hero-copy .typography-headline-elevated:lang(zh-MO) {
        font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-hero-copy .typography-headline-elevated:lang(zh-TW) {
        font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif
    }
}

@media only screen and (max-width: 734px) {
    .section-hero-copy .typography-headline-elevated:first-child {
        max-width: 264px;
        margin: 0 auto
    }
}

@media only screen and (max-height: 415px)and (max-width:1068px) {
    .section-hero {
        --homepod-bottom: -210px
    }
    .section-hero .siri {
        margin-top: 12px
    }
    .section-hero-images {
        margin-top: -30px;
        min-height: 610px
    }
    .section-hero picture img {
        transform: scale(0.8)
    }
    .section-hero picture.ipad {
        bottom: max(-95px, -14%)
    }
    .section-hero-copy {
        padding-top: 50px
    }
}

@media only screen and (max-height: 415px)and (max-width:734px) {
    .section-hero {
        --homepod-bottom: -80px
    }
    .section-hero-images {
        margin-top: -20px;
        min-height: 583px
    }
    .section-hero picture img {
        transform: scale(0.9)
    }
    .section-hero picture.ipad {
        bottom: max(-45px, -8%)
    }
}

@media only screen and (orientation: landscape)and (min-width:735px)and (max-width:1068px) {
    .section-hero-images .airpods {
        top: 11%;
        right: -30px
    }
    .section-hero-images .watch {
        /* top: 6% */
        left: 50px;
        top: -50px;
    }
}

.section-hero-static {
    display: flex;
    height: 90vh;
    align-items: center;
    justify-content: center;
    flex-direction: column
}

.section-hero-static .hero-static-image {
    margin-top: -20px;
    z-index: 10
}

html.reduced-motion .section-hero .siri {
    animation: none;
    background-position: 38% 100%
}

html.reduced-motion .section-hero-images picture {
    opacity: 1;
    animation: none;
    transform: scale(1) translateZ(0)
}

html.text-zoom .section-hero .section-hero-copy {
    max-width: var(--section-content)
}

.section-scenario {
    padding: var(--section-padding) 0;
    position: relative;
    border-radius: 60px
}

@media only screen and (max-width: 1068px) {
    .section-scenario {
        border-radius: 40px
    }
}

@media only screen and (max-width: 734px) {
    .section-scenario {
        border-radius: 20px;
        padding-top: 98px
    }
}

.section-scenario .gradient-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: 100% var(--bg-height);
    opacity: 0;
    z-index: 0;
    transition: opacity .75s ease-in-out;
    overflow: hidden;
    border-radius: 60px
}

@media only screen and (max-width: 1068px) {
    .section-scenario .gradient-bg {
        border-radius: 40px
    }
}

@media only screen and (max-width: 734px) {
    .section-scenario .gradient-bg {
        border-radius: 20px;
        opacity: 1;
        background-size: 100% 75%
    }
}

.section-scenario.will-change .gradient-bg {
    will-change: opacity
}

.section-scenario .section-content {
    position: relative
}

@media only screen and (max-width: 734px) {
    .section-scenario .section-content {
        max-width: var(--tile-max-width)
    }
}

.section-scenario-intro {
    position: relative;
    padding-left: var(--tile-padding);
    padding-right: var(--tile-padding)
}

@media only screen and (max-width: 734px) {
    .section-scenario-intro {
        padding-left: 0px;
        padding-right: 0px
    }
}

.section-scenario .grid {
    padding-left: 0px;
    padding-right: 0px;
    position: relative
}

.section-scenario .grid-main {
    -webkit-clip-path: inset(-200vh 0 0 0);
    clip-path: inset(-200vh 0 0 0);
    margin-bottom: 24px
}

.section-scenario .grid-main .image-wrapper-sticky {
    z-index: 1;
    display: flex;
    -webkit-clip-path: inset(-50vh -50% 0px -50%);
    clip-path: inset(-50vh -50% 0px -50%);
    pointer-events: none
}

.section-scenario .grid-main .image-wrapper-sticky picture {
    position: sticky;
    top: 40vh
}

@media only screen and (orientation: portrait) {
    .section-scenario .grid-main .image-wrapper-sticky picture {
        top: 60vh
    }
}

@media only screen and (max-width: 734px) {
    .section-scenario .grid-main .image-wrapper-sticky {
        display: none
    }
}

.section-scenario .grid-main .image-wrapper-static {
    display: none
}

@media only screen and (max-width: 734px) {
    .section-scenario .grid-main .image-wrapper-static {
        display: block
    }
}

.section-scenario .copy-container {
    --tile-y: 0;
    color: #86868b;
    margin-top: 70px;
    margin-bottom: 70px;
    grid-row: 1
}

@media only screen and (max-width: 734px) {
    .section-scenario .copy-container {
        margin-top: 30px;
        margin-bottom: 40px
    }
}

.section-scenario .copy-container .copy {
    margin-bottom: 0px
}

.section-scenario .align-hw-left .copy-container,
.section-scenario .align-hw-left .hey-siri {
    grid-column-end: 13;
    grid-column-start: 8;
    padding-right: var(--tile-padding)
}

@media only screen and (max-width: 1068px) {
    .section-scenario .align-hw-left .copy-container,
    .section-scenario .align-hw-left .hey-siri {
        grid-column-start: 7
    }
}

@media only screen and (max-width: 734px) {
    .section-scenario .align-hw-left .copy-container,
    .section-scenario .align-hw-left .hey-siri {
        grid-column-start: 1;
        padding-right: 0px
    }
}

.section-scenario .align-hw-left .image-wrapper-sticky {
    padding-left: var(--tile-padding);
    grid-area: 1/1/3/7
}

.section-scenario .align-hw-right .copy-container,
.section-scenario .align-hw-right .hey-siri {
    grid-column-start: 1;
    padding-left: var(--tile-padding);
    grid-column-end: 7
}

@media only screen and (max-width: 1200px) {
    .section-scenario .align-hw-right .copy-container,
    .section-scenario .align-hw-right .hey-siri {
        grid-column-end: 6
    }
}

@media only screen and (max-width: 734px) {
    .section-scenario .align-hw-right .copy-container,
    .section-scenario .align-hw-right .hey-siri {
        padding-left: 0px;
        grid-column-end: 13
    }
}

@media only screen and (max-width: 1200px) {
    .section-scenario .align-hw-right .copy-container.hey-siri,
    .section-scenario .align-hw-right .hey-siri.hey-siri {
        grid-column-end: 6
    }
}

.section-scenario .align-hw-right .image-wrapper-sticky {
    justify-content: flex-end;
    grid-area: 1/6/3/13
}

.section-scenario .align-hw-bottom .copy-container,
.section-scenario .align-hw-bottom .hey-siri {
    grid-column-start: 1;
    padding-left: var(--tile-padding);
    grid-column-end: 7
}

.section-scenario .align-hw-bottom .copy-container.copy-container,
.section-scenario .align-hw-bottom .hey-siri.copy-container {
    grid-row: 1
}

@media only screen and (max-width: 734px) {
    .section-scenario .align-hw-bottom .copy-container,
    .section-scenario .align-hw-bottom .hey-siri {
        padding-left: 0px;
        grid-column-end: 13
    }
}

.section-scenario .align-hw-bottom .image-wrapper-sticky {
    grid-area: 1/1/3/13;
    padding-left: var(--tile-padding)
}

.section-scenario .main-tile {
    width: 100%;
    grid-area: 2/1/3/13;
    border-radius: var(--tile-border-radius);
    box-sizing: border-box;
    min-height: var(--main-tile-height);
    background: #fbfbfd;
    -webkit-clip-path: inset(-200vh 0 0 0);
    clip-path: inset(-200vh 0 0 0);
    padding: var(--tile-padding) 0;
    display: grid
}

@media only screen and (max-width: 734px) {
    .section-scenario .main-tile {
        padding: var(--tile-padding) var(--tile-padding) 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        grid-row-gap: 0px
    }
}

@media only screen and (max-width: 734px)and (max-width:734px) {
    .section-scenario .main-tile-headline {
        font-size: 32px;
        line-height: 1.125;
        font-weight: 600;
        letter-spacing: .004em;
        font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-scenario .main-tile-headline:lang(ja) {
        line-height: 1.21875;
        font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-scenario .main-tile-headline:lang(ko) {
        line-height: 1.21875;
        font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-scenario .main-tile-headline:lang(th) {
        line-height: 1.375;
        font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-scenario .main-tile-headline:lang(ar) {
        font-family: SF Pro AR, SF Pro Gulf, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-scenario .main-tile-headline:lang(zh-CN) {
        font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-scenario .main-tile-headline:lang(zh-HK) {
        font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-scenario .main-tile-headline:lang(zh-MO) {
        font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-scenario .main-tile-headline:lang(zh-TW) {
        font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif
    }
}

@media only screen and (min-width: 735px) {
    .section-scenario .main-tile .hey-siri {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-self: center
    }
}

@media only screen and (max-width: 734px) {
    .section-scenario .main-tile .hey-siri {
        --tile-y: 0;
        --tile-opacity: 1;
        padding-bottom: var(--tile-padding)
    }
}

.section-scenario .main-tile .quote-icon {
    margin-bottom: 20px
}

@media only screen and (max-width: 1068px) {
    .section-scenario .main-tile .quote-icon {
        margin-bottom: 14px
    }
}

.section-scenario .scenario-tile {
    display: grid;
    box-sizing: border-box;
    border-radius: var(--tile-border-radius);
    background: #fbfbfd;
    overflow: hidden;
    z-index: 1;
    min-height: 750px
}

@media only screen and (max-width: 1068px) {
    .section-scenario .scenario-tile {
        min-height: 510px
    }
}

@media only screen and (max-width: 734px) {
    .section-scenario .scenario-tile {
        min-height: 384px;
        max-width: 300px
    }
}

.section-scenario .scenario-tile.tile-2 {
    --tile-stagger-index: .3
}

@media only screen and (max-width: 734px) {
    .section-scenario .scenario-tile.tile-2 {
        --tile-stagger-index: 0
    }
}

.section-scenario .scenario-tile.align-bottom .tile-image {
    align-self: flex-end;
    padding-bottom: 0px;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end
}

.section-scenario .scenario-tile.reverse {
    align-content: center
}

.section-scenario .scenario-tile.reverse .tile-image {
    grid-row: 1;
    padding-bottom: 0px;
    padding-top: var(--tile-padding)
}

.section-scenario .scenario-tile.text-center {
    text-align: center
}

.section-scenario .scenario-tile.large-span-12 {
    display: flex;
    min-height: 400px;
    align-items: center;
    justify-content: space-between
}

.section-scenario .scenario-tile.large-span-12 .tile-image {
    padding-right: var(--tile-padding);
    padding-top: var(--tile-padding)
}

.section-scenario .scenario-tile .tile-content {
    padding: var(--tile-padding)
}

@media only screen and (max-width: 734px) {
    .section-scenario .scenario-tile .tile-content {
        padding-bottom: 35px
    }
}

@media only screen and (max-width: 1068px) {
    .section-scenario .scenario-tile .tile-content-headline {
        max-width: 365px;
        font-size: 40px;
        line-height: 1.1;
        font-weight: 600;
        letter-spacing: 0em;
        font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-scenario .scenario-tile .tile-content-headline:lang(ja) {
        line-height: 1.175;
        font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-scenario .scenario-tile .tile-content-headline:lang(ko) {
        line-height: 1.2;
        font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-scenario .scenario-tile .tile-content-headline:lang(th) {
        line-height: 1.35;
        font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-scenario .scenario-tile .tile-content-headline:lang(ar) {
        font-family: SF Pro AR, SF Pro Gulf, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-scenario .scenario-tile .tile-content-headline:lang(zh-CN) {
        font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-scenario .scenario-tile .tile-content-headline:lang(zh-HK) {
        font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-scenario .scenario-tile .tile-content-headline:lang(zh-MO) {
        font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-scenario .scenario-tile .tile-content-headline:lang(zh-TW) {
        font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif
    }
}

@media only screen and (max-width: 1068px)and (max-width:1068px) {
    .section-scenario .scenario-tile .tile-content-headline {
        font-size: 32px;
        line-height: 1.125;
        font-weight: 600;
        letter-spacing: .004em;
        font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-scenario .scenario-tile .tile-content-headline:lang(ja) {
        line-height: 1.21875;
        font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-scenario .scenario-tile .tile-content-headline:lang(ko) {
        line-height: 1.21875;
        font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-scenario .scenario-tile .tile-content-headline:lang(th) {
        line-height: 1.375;
        font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-scenario .scenario-tile .tile-content-headline:lang(ar) {
        font-family: SF Pro AR, SF Pro Gulf, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-scenario .scenario-tile .tile-content-headline:lang(zh-CN) {
        font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-scenario .scenario-tile .tile-content-headline:lang(zh-HK) {
        font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-scenario .scenario-tile .tile-content-headline:lang(zh-MO) {
        font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-scenario .scenario-tile .tile-content-headline:lang(zh-TW) {
        font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif
    }
}

@media only screen and (max-width: 1068px)and (max-width:734px) {
    .section-scenario .scenario-tile .tile-content-headline {
        font-size: 28px;
        line-height: 1.1428571429;
        font-weight: 600;
        letter-spacing: .007em;
        font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-scenario .scenario-tile .tile-content-headline:lang(ko) {
        line-height: 1.25;
        font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-scenario .scenario-tile .tile-content-headline:lang(th) {
        line-height: 1.3928571429;
        font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-scenario .scenario-tile .tile-content-headline:lang(ar) {
        font-family: SF Pro AR, SF Pro Gulf, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-scenario .scenario-tile .tile-content-headline:lang(ja) {
        font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-scenario .scenario-tile .tile-content-headline:lang(zh-CN) {
        font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-scenario .scenario-tile .tile-content-headline:lang(zh-HK) {
        font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-scenario .scenario-tile .tile-content-headline:lang(zh-MO) {
        font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-scenario .scenario-tile .tile-content-headline:lang(zh-TW) {
        font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif
    }
}

.section-scenario .scenario-tile .tile-image {
    padding-bottom: var(--tile-padding);
    justify-self: center
}

.section-scenario .scenario-tile .quote-icon {
    margin-bottom: 25px
}

@media only screen and (max-width: 1068px) {
    .section-scenario .scenario-tile .quote-icon {
        margin-bottom: 17px
    }
}

@media only screen and (max-width: 734px) {
    .section-scenario .scenario-tile .quote-icon {
        margin-bottom: 10px
    }
}

.section-scenario .scenario-tile.dark {
    background: linear-gradient(-15deg, #0C0C21 25%, #1C4262)
}

.section-scenario .scenario-tile.dark .tile-content>* {
    color: #fff
}

.section-scenario+.color-bg {
    display: block;
    z-index: 0;
    position: relative;
    width: 100%;
    height: 100px;
    margin-top: -100px
}

html.static-layout .section-scenario .gradient-bg {
    opacity: 1
}

html.static-layout .section-scenario .image-wrapper-sticky {
    position: absolute;
    bottom: 0
}

html.static-layout .section-scenario .align-hw-right .image-wrapper-sticky {
    right: 0
}

html.static-layout .section-scenario .main-tile {
    overflow: hidden
}

html.static-layout .section-scenario+.color-bg {
    background: #152046
}

html.text-zoom .section-scenario {
    --main-tile-height: 650px
}

html.text-zoom .section-scenario .gradient-bg {
    opacity: 1
}

html.text-zoom .section-scenario .image-wrapper-sticky {
    position: absolute;
    bottom: 0
}

html.text-zoom .section-scenario [class*=align-hw-] .copy-container,
html.text-zoom .section-scenario [class*=align-hw-] .copy-container .copy,
html.text-zoom .section-scenario [class*=align-hw-] .hey-siri,
html.text-zoom .section-scenario [class*=align-hw-] .hey-siri .copy {
    max-width: unset
}

html.text-zoom .section-scenario [class*=align-hw-].align-hw-left .copy-container,
html.text-zoom .section-scenario [class*=align-hw-].align-hw-left .hey-siri {
    grid-column-start: 7
}

html.text-zoom .section-scenario [class*=align-hw-].align-hw-left .copy-container.copy-container,
html.text-zoom .section-scenario [class*=align-hw-].align-hw-left .hey-siri.copy-container {
    margin-bottom: 190px
}

html.text-zoom .section-scenario [class*=align-hw-].align-hw-right .copy-container {
    grid-column-end: 8
}

html.text-zoom .section-scenario [class*=align-hw-].align-hw-right .image-wrapper-sticky {
    right: 0
}

html.text-zoom .section-scenario [class*=align-hw-].align-hw-right .image-wrapper-sticky picture {
    height: auto
}

html.text-zoom .section-scenario [class*=align-hw-].align-hw-bottom .copy-container,
html.text-zoom .section-scenario [class*=align-hw-].align-hw-bottom .hey-siri {
    grid-column-end: 9
}

html.text-zoom .section-scenario [class*=align-hw-].align-hw-bottom .image-wrapper-sticky {
    left: 50%;
    transform: translateX(-50%)
}

.section-on-the-go {
    --main-tile-height: 504px
}

@media only screen and (max-width: 1068px) {
    .section-on-the-go {
        --main-tile-height: 360px
    }
}

@media only screen and (max-width: 734px) {
    .section-on-the-go {
        --main-tile-height: 384px
    }
}

.section-on-the-go .gradient-bg {
    background-image: linear-gradient(180deg, #fbfbfd, #E795B7 20%, #935893 45%, #224D88)
}

@media only screen and (max-width: 734px) {
    .section-on-the-go .gradient-bg {
        background-size: 100% 73%
    }
}

.section-on-the-go .gradient {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-image: linear-gradient(45deg, #224D88 32%, #935893 60%, #E896B8 80%)
}

.section-on-the-go .gradient.dark {
    background-image: linear-gradient(45deg, #C774C7, #FFA6CB 80%)
}

.section-on-the-go .headline {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-image: linear-gradient(45deg, #224D88 32%, #935893 60%, #E896B8 80%);
    padding: 10px 0 55px
}

.section-on-the-go .secondary-image {
    position: absolute;
    margin-top: 0px;
    z-index: 1;
    right: 30%;
    top: 41%
}

@media only screen and (max-width: 1068px) {
    .section-on-the-go .secondary-image {
        right: 22%
    }
}

@media only screen and (max-width: 734px) {
    .section-on-the-go .secondary-image {
        right: 20%;
        top: 33%
    }
}

.section-on-the-go .grid-main .copy-container,
.section-on-the-go .grid-main .hey-siri {
    grid-column-start: 7;
    padding-left: var(--tile-padding)
}

@media only screen and (max-width: 734px) {
    .section-on-the-go .grid-main .copy-container,
    .section-on-the-go .grid-main .hey-siri {
        grid-column-start: 1;
        padding-left: 0px
    }
}

.section-on-the-go .copy-container {
    margin-top: 190px
}

@media only screen and (max-width: 734px) {
    .section-on-the-go .copy-container {
        margin-top: 30px
    }
}

.section-on-the-go .copy-container .copy {
    max-width: 375px
}

@media only screen and (max-width: 1068px) {
    .section-on-the-go .copy-container .copy {
        max-width: 250px
    }
}

@media only screen and (max-width: 734px) {
    .section-on-the-go .copy-container .copy {
        max-width: none
    }
}

html.static-layout .section-on-the-go .copy-container {
    grid-column-start: 1;
    margin-top: 80px;
    padding-left: var(--tile-padding)
}

@media only screen and (max-width: 1068px) {
    html.static-layout .section-on-the-go .copy-container {
        margin-top: 40px
    }
}

@media only screen and (max-width: 734px) {
    html.static-layout .section-on-the-go .copy-container {
        margin-top: 30px;
        padding-left: 0px
    }
}

html.static-layout .section-on-the-go .copy-container .copy {
    max-width: 422px
}

@media only screen and (max-width: 1068px) {
    html.static-layout .section-on-the-go .copy-container .copy {
        max-width: 320px
    }
}

@media only screen and (max-width: 734px) {
    html.static-layout .section-on-the-go .copy-container .copy {
        max-width: 250px
    }
}

.section-on-the-go .image-wrapper-sticky picture {
    max-width: 100%;
    margin-top: -25px;
    height: calc(var(--main-tile-height) - var(--tile-padding))
}

@media only screen and (max-width: 734px) {
    .section-on-the-go .main-tile {
        align-items: flex-start
    }
}

@media only screen and (max-width: 734px) {
    .section-on-the-go .main-tile .hey-siri {
        padding-bottom: 35px
    }
}

@media only screen and (max-width: 1068px) {
    .section-on-the-go .main-tile .hey-siri .main-tile-headline {
        max-width: 240px
    }
}

.section-on-the-go.gradient-animate .gradient-bg {
    background-image: linear-gradient(180deg, #fbfbfd, #E795B7 20%, #935893 45%, #224D88 65%);
    background-size: 100% 100%
}

.section-on-the-go.long-headline .headline {
    line-height: .8em
}

.section-on-the-go.long-headline .secondary-image {
    right: 10%;
    top: 81%
}

@media only screen and (max-width: 1068px) {
    .section-on-the-go.long-headline .secondary-image {
        top: 77%
    }
}

@media only screen and (max-width: 734px) {
    .section-on-the-go.long-headline .secondary-image {
        right: 0%;
        top: 65%
    }
}

.section-on-the-go.long-headline .copy-container {
    margin-top: 320px
}

@media only screen and (max-width: 1068px) {
    .section-on-the-go.long-headline .copy-container {
        margin-top: 260px
    }
}

@media only screen and (max-width: 734px) {
    .section-on-the-go.long-headline .copy-container {
        margin-top: 40px
    }
}

@media only screen and (max-width: 320px) {
    .section-on-the-go.long-headline .copy-container {
        margin-top: 60px
    }
}

html.text-zoom .section-on-the-go .headline {
    padding-bottom: 85px
}

html.chrome {
    --chrome-car-x-offset: .5
}

@media (-webkit-min-device-pixel-ratio: 1.5),
(min-resolution:144dpi),
only screen and (-webkit-min-device-pixel-ratio:1.5),
only screen and (min-resolution:1.5dppx) {
    html.chrome {
        --chrome-car-x-offset: 0
    }
}

.section-in-the-car {
    --final-img-height: 410px
}

@media only screen and (min-width: 1441px) {
    .section-in-the-car {
        --final-img-height: 450px
    }
}

@media only screen and (max-width: 1200px) {
    .section-in-the-car {
        --final-img-height: 380px
    }
}

@media only screen and (max-width: 1068px) {
    .section-in-the-car {
        --final-img-height: 280px
    }
}

@media only screen and (max-width: 734px) {
    .section-in-the-car {
        --final-img-height: 220px
    }
}

.section-in-the-car .section-content {
    position: static
}

.section-in-the-car .gradient-bg {
    background-image: linear-gradient(180deg, #fbfbfd, #B2E1EA 20%, #415F96 45%, #39207D)
}

@media only screen and (max-width: 734px) {
    .section-in-the-car .gradient-bg {
        background-image: linear-gradient(180deg, #fbfbfd 5%, #B2E1EA 20%, #415F96 45%, #39207D);
        background-size: 100% 81%
    }
}

.section-in-the-car .gradient {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-image: linear-gradient(22deg, #381479 20%, #3D5791 55%, #80D6E1 110%)
}

.section-in-the-car .gradient.dark {
    background-image: linear-gradient(180deg, #C8FFF7 -10%, #84AAFF 80%)
}

.section-in-the-car .headline {
    --tile-y: -150px;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-image: linear-gradient(15deg, #381479 20%, #3D5791 35%, #80D6E1 75%);
    padding-bottom: 10px
}

.section-in-the-car .grid {
    position: static
}

.section-in-the-car .grid-main {
    -webkit-clip-path: unset;
    clip-path: unset
}

.section-in-the-car .grid .copy-container {
    padding-right: 0;
    --y-offset: -105px;
    grid-column-start: 7;
    margin-top: -105px
}

@media only screen and (min-width: 1441px) {
    .section-in-the-car .grid .copy-container {
        padding-right: var(--tile-padding)
    }
}

@media only screen and (max-width: 1068px) {
    .section-in-the-car .grid .copy-container {
        --y-offset: 0;
        margin-top: -80px;
        margin-left: -20px
    }
}

@media only screen and (max-width: 734px) {
    .section-in-the-car .grid .copy-container {
        grid-column-start: 1;
        margin-top: 30px;
        margin-left: 0;
        z-index: 1
    }
}

.section-in-the-car .grid .copy-container.max-height {
    max-height: 192px
}

@media only screen and (min-width: 1441px) {
    .section-in-the-car .grid .copy-container.max-height {
        max-height: 160px
    }
}

@media only screen and (max-width: 1068px) {
    .section-in-the-car .grid .copy-container.max-height {
        max-height: 196px
    }
}

@media only screen and (max-width: 734px) {
    .section-in-the-car .grid .copy-container.max-height {
        max-height: unset
    }
}

.section-in-the-car .grid .copy-container .copy {
    max-width: 440px
}

@media only screen and (min-width: 1441px) {
    .section-in-the-car .grid .copy-container .copy {
        max-width: unset
    }
}

@media only screen and (max-width: 1068px) {
    .section-in-the-car .grid .copy-container .copy {
        max-width: 324px
    }
}

@media only screen and (max-width: 734px) {
    .section-in-the-car .grid .copy-container .copy {
        max-width: none
    }
}

.section-in-the-car .main-tile {
    width: 100%;
    -webkit-clip-path: inset(-100vh -100vw round var(--tile-border-radius));
    clip-path: inset(-100vh -100vw round var(--tile-border-radius));
    padding-bottom: 0px;
    z-index: 1;
    --main-tile-height: 714px
}

@media only screen and (min-width: 1441px) {
    .section-in-the-car .main-tile {
        --main-tile-height: 780px
    }
}

@media only screen and (max-width: 1200px) {
    .section-in-the-car .main-tile {
        --main-tile-height: 690px
    }
}

@media only screen and (max-width: 1068px) {
    .section-in-the-car .main-tile {
        --main-tile-height: 505px
    }
}

@media only screen and (max-width: 734px) {
    .section-in-the-car .main-tile {
        --main-tile-height: 384px;
        align-items: flex-start;
        grid-template-rows: unset;
        -webkit-clip-path: unset;
        clip-path: unset;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        position: relative;
        transform: translateZ(0)
    }
}

html.static-layout .section-in-the-car .main-tile {
    transform: translateZ(0)
}

.section-in-the-car .main-tile .image-wrapper {
    position: absolute;
    left: 0px;
    z-index: 100;
    width: 100%;
    transform-origin: top;
    pointer-events: none;
    height: auto;
    top: 604px;
    --scroll-offset: 10vh;
    --image-offset: 100px
}

@media only screen and (min-width: 1441px) {
    .section-in-the-car .main-tile .image-wrapper {
        top: 518px;
        --scroll-offset: 0
    }
}

@media only screen and (max-width: 1200px) {
    .section-in-the-car .main-tile .image-wrapper {
        --scroll-offset: 15vh;
        --image-offset: 85px
    }
}

@media only screen and (max-width: 1068px) {
    .section-in-the-car .main-tile .image-wrapper {
        top: 450px;
        --scroll-offset: 32vh;
        --image-offset: 55px
    }
}

@media only screen and (max-width: 900px) {
    .section-in-the-car .main-tile .image-wrapper {
        --image-offset: 54px
    }
}

@media only screen and (max-width: 734px) {
    .section-in-the-car .main-tile .image-wrapper {
        top: auto;
        bottom: 0px
    }
}

@media only screen and (min-width: 2300px) {
    .section-in-the-car .main-tile .image-wrapper {
        top: 480px
    }
}

.section-in-the-car .main-tile .image-wrapper .sticky-hw {
    max-width: 100%
}

.section-in-the-car .main-tile .image-wrapper .sticky-hw img {}

@media (-webkit-min-device-pixel-ratio: 1.5),
(min-resolution:144dpi),
only screen and (-webkit-min-device-pixel-ratio:1.5),
only screen and (min-resolution:1.5dppx) {
    .section-in-the-car .main-tile .image-wrapper .sticky-hw img {}
}

@media only screen and (min-width: 1441px) {
    .section-in-the-car .main-tile .image-wrapper .sticky-hw img {}
}

@media only screen and (min-width: 1441px)and (-webkit-min-device-pixel-ratio:1.5),
only screen and (min-width:1441px)and (min-resolution:1.5dppx),
only screen and (min-width:1441px)and (min-resolution:144dpi) {
    .section-in-the-car .main-tile .image-wrapper .sticky-hw img {}
}

@media only screen and (max-width: 1068px) {
    .section-in-the-car .main-tile .image-wrapper .sticky-hw img {}
}

@media only screen and (max-width: 1068px)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) {
    .section-in-the-car .main-tile .image-wrapper .sticky-hw img {}
}

@media only screen and (max-width: 734px) {
    .section-in-the-car .main-tile .image-wrapper .sticky-hw img {}
}

@media only screen and (max-width: 734px)and (-webkit-min-device-pixel-ratio:1.5),
only screen and (max-width:734px)and (min-resolution:1.5dppx),
only screen and (max-width:734px)and (min-resolution:144dpi) {
    .section-in-the-car .main-tile .image-wrapper .sticky-hw img {}
}

@media only screen and (max-width: 320px) {
    .section-in-the-car .main-tile .image-wrapper .sticky-hw img {
        max-width: unset;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 0px
    }
}

@media only screen and (max-width: 734px) {
    .section-in-the-car .main-tile .image-wrapper .sticky-hw {
        height: auto
    }
}

.section-in-the-car .main-tile .hey-siri {
    grid-column-start: 7;
    align-self: flex-start;
    max-width: 450px;
    padding-bottom: var(--final-img-height);
    grid-column-end: 12;
    padding-right: 0px
}

@media only screen and (min-width: 735px)and (max-width:1068px) {
    .section-in-the-car .main-tile .hey-siri {
        margin-left: -20px;
        padding-right: 20px
    }
}

@media only screen and (max-width: 734px) {
    .section-in-the-car .main-tile .hey-siri {
        padding-right: 0px
    }
}

@media only screen and (max-width: 734px) {
    .section-in-the-car .main-tile .hey-siri .main-tile-headline {
        max-width: 220px
    }
}

.section-in-the-car .main-tile .hey-siri span {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-image: linear-gradient(15deg, #381479 25%, #3D5791 45%, #80D6E1 75%)
}

.section-in-the-car.long-headline .headline {
    line-height: .8em
}

html.static-layout .section-in-the-car .copy-container {
    z-index: 1
}

html.static-layout .section-in-the-car .main-tile .image-wrapper {
    top: auto;
    bottom: -7px
}

@media only screen and (max-width: 734px) {
    html.static-layout .section-in-the-car .main-tile .image-wrapper {
        bottom: 0px
    }
}

html.static-layout .section-in-the-car .main-tile .image-wrapper .sticky-hw {
    height: auto
}

html.text-zoom .section-in-the-car .grid .copy-container {
    --y-offset: 300px
}

html.text-zoom .section-in-the-car .grid .copy-container.max-height {
    max-height: unset
}

html.text-zoom .section-in-the-car .main-tile {
    --main-tile-height: 0;
    transform: translateZ(0);
    overflow: hidden
}

html.text-zoom .section-in-the-car .main-tile .image-wrapper {
    top: unset;
    bottom: -58px;
    position: relative;
    grid-column: span 12;
    margin-top: calc(-130px - var(--final-img-height))
}

html.text-zoom .section-in-the-car .main-tile .image-wrapper .sticky-hw {
    height: auto
}

.section-working-out {
    --main-tile-height: 542px;
    --hardware-x-offset: -225px
}

@media only screen and (max-width: 1068px) {
    .section-working-out {
        --main-tile-height: 358px;
        --hardware-x-offset: -127px
    }
}

@media only screen and (max-width: 734px) {
    .section-working-out {
        --main-tile-height: 384px;
        --hardware-x-offset: 0px
    }
}

.section-working-out.long-headline {
    --hardware-x-offset: -35px
}

@media only screen and (max-width: 1068px) {
    .section-working-out.long-headline {
        --hardware-x-offset: -10px
    }
}

.section-working-out .gradient-bg {
    background-image: linear-gradient(180deg, #fbfbfd, #68D8C8 20%, #327295 45%, #0E2C72)
}

@media only screen and (max-width: 734px) {
    .section-working-out .gradient-bg {
        background-size: 100% 78%
    }
}

.section-working-out .gradient {
    background-image: linear-gradient(22deg, #0E2C72 30%, #6BDECB 80%, #D4FBB5 96%)
}

.section-working-out .gradient,
.section-working-out .headline {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.section-working-out .headline {
    background-image: linear-gradient(17deg, #0E2C72 40%, #6BDECB 80%, #D4FBB5 96%);
    line-height: 220px
}

@media only screen and (max-width: 1068px) {
    .section-working-out .headline {
        line-height: 130px
    }
}

@media only screen and (max-width: 734px) {
    .section-working-out .headline {
        line-height: 72px
    }
}

@media only screen and (max-width: 320px) {
    .section-working-out .headline {
        line-height: 68px
    }
}

.section-working-out .copy-container .copy {
    max-width: 380px
}

@media only screen and (max-width: 1068px) {
    .section-working-out .copy-container .copy {
        max-width: 290px
    }
}

@media only screen and (max-width: 734px) {
    .section-working-out .copy-container .copy {
        max-width: 260px
    }
}

html.static-layout .section-working-out .copy-container {
    grid-column-end: 13
}

html.static-layout .section-working-out .copy-container .copy {
    max-width: 550px
}

@media only screen and (max-width: 1068px) {
    html.static-layout .section-working-out .copy-container .copy {
        max-width: 450px
    }
}

.section-working-out .image-wrapper-sticky picture {
    --p-offset: 92px;
    margin-top: var(--hardware-x-offset);
    padding-right: 29px;
    max-width: 100%;
    height: calc(var(--p-height) - var(--p-offset));
    --p-width: 498px;
    --p-height: 589px
}

@media only screen and (max-width: 1068px) {
    .section-working-out .image-wrapper-sticky picture {
        --p-offset: 70px
    }
}

@media only screen and (max-width: 1068px)and (max-width:1068px) {
    .section-working-out .image-wrapper-sticky picture {
        --p-width: 352px;
        --p-height: 415px
    }
}

@media only screen and (max-width: 734px) {
    [dir=ltr] .section-working-out .image-wrapper-static {
        margin-right: -8px
    }
    [dir=rtl] .section-working-out .image-wrapper-static {
        margin-left: -8px
    }
    .section-working-out .image-wrapper-static {
        align-self: flex-end
    }
}

.section-working-out .scenario-tile.gradient-text .tile-content-headline {
    margin-top: 30px;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-image: linear-gradient(120deg, #FA83DF 20%, #7DC0FF 50%, #04F0DF)
}

@media only screen and (max-width: 1068px) {
    .section-working-out .scenario-tile.gradient-text .tile-content-headline {
        max-width: 295px;
        margin-left: auto;
        margin-right: auto
    }
}

html.text-zoom .section-working-out .headline {
    line-height: 1em
}

html.text-zoom .section-working-out .image-wrapper {
    top: unset
}

.section-in-the-kitchen {
    --main-tile-height: 650px;
    --final-img-height: 300px
}

@media only screen and (max-width: 1068px) {
    .section-in-the-kitchen {
        --main-tile-height: 477px;
        --final-img-height: 220px
    }
}

@media only screen and (max-width: 734px) {
    .section-in-the-kitchen {
        --main-tile-height: 384px;
        --final-img-height: var(--tile-padding)
    }
}

.section-in-the-kitchen .gradient-bg {
    background-image: linear-gradient(180deg, #fbfbfd, #EC8580 20%, #613B91 45%, #142F6D)
}

@media only screen and (max-width: 734px) {
    .section-in-the-kitchen .gradient-bg {
        background-size: 100% 76%
    }
}

.section-in-the-kitchen .gradient {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-image: linear-gradient(45deg, #072E67 25%, #6B3C95 60%, #FE8F7E 95%)
}

.section-in-the-kitchen .gradient.dark {
    background-image: linear-gradient(45deg, #C774C7, #FFA6CB 80%)
}

.section-in-the-kitchen .headline {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-image: linear-gradient(17deg, #072E67 25%, #6B3C95 50%, #FE8F7E 80%);
    line-height: 220px
}

@media only screen and (max-width: 1068px) {
    .section-in-the-kitchen .headline {
        line-height: 145px
    }
}

@media only screen and (max-width: 734px) {
    .section-in-the-kitchen .headline {
        line-height: 78px
    }
}

.section-in-the-kitchen .copy-container .copy {
    max-width: 440px
}

@media only screen and (max-width: 734px) {
    .section-in-the-kitchen .copy-container .copy {
        max-width: none
    }
}

html.static-layout .section-in-the-kitchen .copy-container {
    grid-column-end: 13
}

html.static-layout .section-in-the-kitchen .copy-container .copy {
    max-width: 590px
}

@media only screen and (max-width: 1068px) {
    html.static-layout .section-in-the-kitchen .copy-container .copy {
        max-width: 570px
    }
}

@media only screen and (max-width: 734px) {
    html.static-layout .section-in-the-kitchen .copy-container .copy {
        max-width: 245px
    }
}

.section-in-the-kitchen .grid-main .image-wrapper-sticky picture {
    --p-offset: 133px;
    top: calc(100% - var(--p-height)*0.85);
    max-width: calc(100% - var(--tile-padding));
    margin-top: 175px;
    margin-left: -2px;
    height: calc(var(--p-height) - var(--p-offset));
    --p-width: 986px;
    --p-height: 544px
}

@media only screen and (max-width: 1200px) {
    .section-in-the-kitchen .grid-main .image-wrapper-sticky picture {
        --p-offset: 143px;
        margin-top: 210px
    }
}

@media only screen and (max-width: 1068px) {
    .section-in-the-kitchen .grid-main .image-wrapper-sticky picture {
        --p-offset: 90px;
        margin-top: 175px
    }
}

@media only screen and (max-width: 1068px)and (max-width:1068px) {
    .section-in-the-kitchen .grid-main .image-wrapper-sticky picture {
        --p-width: 699px;
        --p-height: 386px
    }
}

.section-in-the-kitchen .grid-main .image-wrapper-sticky picture img {
    max-width: 100%
}

@media only screen and (max-width: 734px) {
    .section-in-the-kitchen .main-tile {
        align-items: start;
        overflow: hidden
    }
}

.section-in-the-kitchen .main-tile .image-wrapper-static {
    margin-left: -208px;
    margin-bottom: -50px
}

.section-in-the-kitchen .main-tile .hey-siri {
    align-self: flex-start;
    padding-bottom: var(--final-img-height)
}

@media only screen and (max-width: 734px) {
    .section-in-the-kitchen .main-tile .hey-siri {
        margin-right: -10px
    }
}

.section-in-the-kitchen .overview-kitchen-tile-2 {
    height: auto
}

.section-in-the-kitchen .overview-kitchen-tile-2,
.section-in-the-kitchen .overview-kitchen-tile-2 img {
    width: 100%;
    display: block
}

.section-in-the-kitchen.gradient-animate .gradient-bg {
    background-image: linear-gradient(180deg, #fbfbfd, #EC8580 20%, #613B91 50%, #142F6D 70%);
    background-size: 100% 100%
}

html.static-layout .section-in-the-kitchen .image-wrapper-sticky picture {
    max-width: 100%
}

html.text-zoom .section-in-the-kitchen {
    --main-tile-height: 950px
}

html.text-zoom .section-in-the-kitchen .headline {
    line-height: 1em
}

html.text-zoom .section-in-the-kitchen .main-tile .image-wrapper {
    bottom: -90px;
    left: 50%;
    transform: translateX(-50%)
}

.section-winding-down {
    z-index: 1;
    --main-tile-height: 450px;
    --hardware-x-offset: -65px
}

@media only screen and (max-width: 1068px) {
    .section-winding-down {
        --main-tile-height: 350px;
        --hardware-x-offset: -30px
    }
}

@media only screen and (max-width: 734px) {
    .section-winding-down {
        --main-tile-height: 384px
    }
}

.section-winding-down .gradient-bg {
    background-image: linear-gradient(180deg, #fbfbfd, #E181C0 20%, #4B4294 45%, #0B1432)
}

@media only screen and (max-width: 734px) {
    .section-winding-down .gradient-bg {
        background-size: 100% 82%
    }
}

.section-winding-down .gradient {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-image: linear-gradient(45deg, #0C0C21 -50%, #3E3D91 30%, #E180C0 88%)
}

.section-winding-down .gradient.dark {
    background-image: linear-gradient(45deg, #C774C7, #FFA6CB 80%)
}

.section-winding-down .headline {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-image: linear-gradient(20deg, #0C0C21 6%, #3E3D91 50%, #E180C0 88%);
    line-height: 220px
}

@media only screen and (max-width: 1068px) {
    .section-winding-down .headline {
        line-height: 145px
    }
}

@media only screen and (max-width: 734px) {
    .section-winding-down .headline {
        line-height: 78px
    }
}

@media only screen and (max-width: 320px) {
    .section-winding-down .headline {
        line-height: 72px
    }
}

.section-winding-down .copy-container .copy {
    max-width: 365px
}

@media only screen and (max-width: 1068px) {
    .section-winding-down .copy-container .copy {
        max-width: 280px
    }
}

@media only screen and (max-width: 734px) {
    .section-winding-down .copy-container .copy {
        max-width: none
    }
}

html.static-layout .section-winding-down .copy-container {
    grid-column-end: 13
}

html.static-layout .section-winding-down .copy-container .copy {
    max-width: 510px
}

@media only screen and (max-width: 1068px) {
    html.static-layout .section-winding-down .copy-container .copy {
        max-width: 455px
    }
}

.section-winding-down .image-wrapper-sticky picture {
    margin-top: var(--hardware-x-offset);
    padding-right: 20px;
    height: calc(var(--main-tile-height) - var(--tile-padding)/2)
}

@media only screen and (max-width: 1200px) {
    .section-winding-down .image-wrapper-sticky picture {
        max-width: 500px
    }
    .section-winding-down .image-wrapper-sticky picture img {
        max-width: 100%
    }
}

@media only screen and (max-width: 1068px) {
    .section-winding-down .image-wrapper-sticky picture {
        max-width: 363px;
        padding-right: 14px
    }
}

.section-winding-down .main-tile {
    -webkit-clip-path: inset(-110vh 0 0 0);
    clip-path: inset(-110vh 0 0 0)
}

@media only screen and (max-width: 734px) {
    .section-winding-down .main-tile {
        overflow: hidden
    }
}

html.static-layout .section-winding-down .main-tile .image-wrapper picture {
    transform: scale(0.95);
    margin-right: -20px
}

@media only screen and (max-width: 734px) {
    html.static-layout .section-winding-down .main-tile .image-wrapper picture {
        margin-right: auto;
        transform: none
    }
}

@media only screen and (max-width: 734px) {
    .section-winding-down .main-tile .hey-siri {
        align-self: flex-start;
        max-width: 200px;
        margin-right: -2px
    }
}

.section-winding-down .scenario-tile.tile-1 {
    flex-direction: column
}

.section-winding-down .scenario-tile.tile-1 .tile-content {
    align-self: flex-start;
    padding-bottom: 60px
}

@media only screen and (max-width: 1068px) {
    .section-winding-down .scenario-tile.tile-1 .tile-content {
        padding-bottom: 35px
    }
}

@media only screen and (max-width: 734px) {
    .section-winding-down .scenario-tile.tile-1 .tile-content {
        padding-bottom: 30px
    }
}

.section-winding-down .scenario-tile.tile-1 .tile-content-headline {
    max-width: 540px
}

@media only screen and (max-width: 1068px) {
    .section-winding-down .scenario-tile.tile-1 .tile-content-headline {
        max-width: 365px
    }
}

@media only screen and (max-width: 734px) {
    .section-winding-down .scenario-tile.tile-1 .tile-content-headline {
        max-width: 200px
    }
}

.section-winding-down .scenario-tile.tile-1 .tile-image {
    padding: 0 0 32px
}

@media only screen and (max-width: 1068px) {
    .section-winding-down .scenario-tile.tile-1 .tile-image {
        padding-bottom: 20px
    }
}

.section-winding-down .scenario-tile.tile-2 {
    --tile-stagger-index: 0
}

.section-winding-down .scenario-tile.tile-3 {
    --tile-stagger-index: .3
}

@media only screen and (max-width: 734px) {
    .section-winding-down .scenario-tile.tile-3 {
        --tile-stagger-index: 0
    }
}

html.text-zoom .section-winding-down .headline {
    line-height: 1em
}

html.text-zoom .section-winding-down .image-wrapper-sticky {
    bottom: 28px
}

.section-digital-assistant {
    background-color: #152046
}

.section-digital-assistant .section-content {
    width: 100%;
    max-width: unset
}

.section-digital-assistant .section-content .callout {
    background-color: #000;
    border-color: transparent;
    color: #6e6e73;
    padding: calc(var(--digital-assistant-inset)*6) calc(var(--digital-assistant-inset)*2);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 0px;
    margin-top: -60px;
    text-align: center
}

.section-digital-assistant .section-content .callout .callout-title {
    color: #f5f5f7
}

@media only screen and (max-width: 734px) {
    .section-digital-assistant .section-content .callout {
        text-align: left;
        align-items: flex-start;
        margin-bottom: -65px
    }
}

@media only screen and (max-width: 320px) {
    .section-digital-assistant .section-content .callout {
        margin-bottom: -25px
    }
}

.section-digital-assistant .section-content .callout>* {
    margin: 0
}

.section-digital-assistant .section-content .callout-icon {
    margin-top: -9px;
    background-repeat: no-repeat;
    background-size: 960px 504px;
    width: 64px;
    height: 84px;
    animation: apple-lock-large .7166666667s steps(1) forwards;
    animation-delay: 1s;
    background-position: 0px 0px;
    animation-play-state: paused
}

@keyframes apple-lock-large {
    0% {
        background-position: 0px 0px
    }
    1.1627906977% {
        background-position: -64px 0px
    }
    2.3255813953% {
        background-position: -128px 0px
    }
    3.488372093% {
        background-position: -192px 0px
    }
    4.6511627907% {
        background-position: -256px 0px
    }
    5.8139534884% {
        background-position: -320px 0px
    }
    6.976744186% {
        background-position: -384px 0px
    }
    8.1395348837% {
        background-position: -448px 0px
    }
    9.3023255814% {
        background-position: -512px 0px
    }
    10.4651162791% {
        background-position: -576px 0px
    }
    11.6279069767% {
        background-position: -640px 0px
    }
    12.7906976744% {
        background-position: -704px 0px
    }
    13.9534883721% {
        background-position: -768px 0px
    }
    15.1162790698% {
        background-position: -832px 0px
    }
    16.2790697674% {
        background-position: -896px 0px
    }
    17.4418604651% {
        background-position: 0px -84px
    }
    18.6046511628% {
        background-position: -64px -84px
    }
    19.7674418605% {
        background-position: -128px -84px
    }
    20.9302325581% {
        background-position: -192px -84px
    }
    22.0930232558% {
        background-position: -256px -84px
    }
    23.2558139535% {
        background-position: -320px -84px
    }
    24.4186046512% {
        background-position: -384px -84px
    }
    25.5813953488% {
        background-position: -448px -84px
    }
    26.7441860465% {
        background-position: -512px -84px
    }
    27.9069767442% {
        background-position: -576px -84px
    }
    29.0697674419% {
        background-position: -640px -84px
    }
    30.2325581395% {
        background-position: -704px -84px
    }
    31.3953488372% {
        background-position: -768px -84px
    }
    32.5581395349% {
        background-position: -832px -84px
    }
    33.7209302326% {
        background-position: -896px -84px
    }
    34.8837209302% {
        background-position: 0px -168px
    }
    36.0465116279% {
        background-position: -64px -168px
    }
    37.2093023256% {
        background-position: -128px -168px
    }
    38.3720930233% {
        background-position: -192px -168px
    }
    39.5348837209% {
        background-position: -256px -168px
    }
    40.6976744186% {
        background-position: -320px -168px
    }
    41.8604651163% {
        background-position: -384px -168px
    }
    43.023255814% {
        background-position: -448px -168px
    }
    44.1860465116% {
        background-position: -512px -168px
    }
    45.3488372093% {
        background-position: -576px -168px
    }
    46.511627907% {
        background-position: -640px -168px
    }
    47.6744186047% {
        background-position: -704px -168px
    }
    48.8372093023% {
        background-position: -768px -168px
    }
    50% {
        background-position: -832px -168px
    }
    51.1627906977% {
        background-position: -896px -168px
    }
    52.3255813953% {
        background-position: 0px -252px
    }
    53.488372093% {
        background-position: -64px -252px
    }
    54.6511627907% {
        background-position: -128px -252px
    }
    55.8139534884% {
        background-position: -192px -252px
    }
    56.976744186% {
        background-position: -256px -252px
    }
    58.1395348837% {
        background-position: -320px -252px
    }
    59.3023255814% {
        background-position: -384px -252px
    }
    60.4651162791% {
        background-position: -448px -252px
    }
    61.6279069767% {
        background-position: -512px -252px
    }
    62.7906976744% {
        background-position: -576px -252px
    }
    63.9534883721% {
        background-position: -640px -252px
    }
    65.1162790698% {
        background-position: -704px -252px
    }
    66.2790697674% {
        background-position: -768px -252px
    }
    67.4418604651% {
        background-position: -832px -252px
    }
    68.6046511628% {
        background-position: -896px -252px
    }
    69.7674418605% {
        background-position: 0px -336px
    }
    70.9302325581% {
        background-position: -64px -336px
    }
    72.0930232558% {
        background-position: -128px -336px
    }
    73.2558139535% {
        background-position: -192px -336px
    }
    74.4186046512% {
        background-position: -256px -336px
    }
    75.5813953488% {
        background-position: -320px -336px
    }
    76.7441860465% {
        background-position: -384px -336px
    }
    77.9069767442% {
        background-position: -448px -336px
    }
    79.0697674419% {
        background-position: -512px -336px
    }
    80.2325581395% {
        background-position: -576px -336px
    }
    81.3953488372% {
        background-position: -640px -336px
    }
    82.5581395349% {
        background-position: -704px -336px
    }
    83.7209302326% {
        background-position: -768px -336px
    }
    84.8837209302% {
        background-position: -832px -336px
    }
    86.0465116279% {
        background-position: -896px -336px
    }
    87.2093023256% {
        background-position: 0px -420px
    }
    88.3720930233% {
        background-position: -64px -420px
    }
    89.5348837209% {
        background-position: -128px -420px
    }
    90.6976744186% {
        background-position: -192px -420px
    }
    91.8604651163% {
        background-position: -256px -420px
    }
    93.023255814% {
        background-position: -320px -420px
    }
    94.1860465116% {
        background-position: -384px -420px
    }
    95.3488372093% {
        background-position: -448px -420px
    }
    96.511627907% {
        background-position: -512px -420px
    }
    97.6744186047% {
        background-position: -576px -420px
    }
    98.8372093023% {
        background-position: -640px -420px
    }
    to {
        background-position: -640px -420px
    }
}

@media (-webkit-min-device-pixel-ratio: 1.5),
(min-resolution:144dpi),
only screen and (-webkit-min-device-pixel-ratio:1.5),
only screen and (min-resolution:1.5dppx) {
    .section-digital-assistant .section-content .callout-icon {}
}

html.reduced-motion .section-digital-assistant .section-content .callout-icon {
    animation: none;
    background-position: -640px -420px
}

@keyframes apple-lock-small {
    0% {
        background-position: 0px 0px
    }
    1.1627906977% {
        background-position: -36px 0px
    }
    2.3255813953% {
        background-position: -72px 0px
    }
    3.488372093% {
        background-position: -108px 0px
    }
    4.6511627907% {
        background-position: -144px 0px
    }
    5.8139534884% {
        background-position: -180px 0px
    }
    6.976744186% {
        background-position: -216px 0px
    }
    8.1395348837% {
        background-position: -252px 0px
    }
    9.3023255814% {
        background-position: -288px 0px
    }
    10.4651162791% {
        background-position: -324px 0px
    }
    11.6279069767% {
        background-position: -360px 0px
    }
    12.7906976744% {
        background-position: 0px -50px
    }
    13.9534883721% {
        background-position: -36px -50px
    }
    15.1162790698% {
        background-position: -72px -50px
    }
    16.2790697674% {
        background-position: -108px -50px
    }
    17.4418604651% {
        background-position: -144px -50px
    }
    18.6046511628% {
        background-position: -180px -50px
    }
    19.7674418605% {
        background-position: -216px -50px
    }
    20.9302325581% {
        background-position: -252px -50px
    }
    22.0930232558% {
        background-position: -288px -50px
    }
    23.2558139535% {
        background-position: -324px -50px
    }
    24.4186046512% {
        background-position: -360px -50px
    }
    25.5813953488% {
        background-position: 0px -100px
    }
    26.7441860465% {
        background-position: -36px -100px
    }
    27.9069767442% {
        background-position: -72px -100px
    }
    29.0697674419% {
        background-position: -108px -100px
    }
    30.2325581395% {
        background-position: -144px -100px
    }
    31.3953488372% {
        background-position: -180px -100px
    }
    32.5581395349% {
        background-position: -216px -100px
    }
    33.7209302326% {
        background-position: -252px -100px
    }
    34.8837209302% {
        background-position: -288px -100px
    }
    36.0465116279% {
        background-position: -324px -100px
    }
    37.2093023256% {
        background-position: -360px -100px
    }
    38.3720930233% {
        background-position: 0px -150px
    }
    39.5348837209% {
        background-position: -36px -150px
    }
    40.6976744186% {
        background-position: -72px -150px
    }
    41.8604651163% {
        background-position: -108px -150px
    }
    43.023255814% {
        background-position: -144px -150px
    }
    44.1860465116% {
        background-position: -180px -150px
    }
    45.3488372093% {
        background-position: -216px -150px
    }
    46.511627907% {
        background-position: -252px -150px
    }
    47.6744186047% {
        background-position: -288px -150px
    }
    48.8372093023% {
        background-position: -324px -150px
    }
    50% {
        background-position: -360px -150px
    }
    51.1627906977% {
        background-position: 0px -200px
    }
    52.3255813953% {
        background-position: -36px -200px
    }
    53.488372093% {
        background-position: -72px -200px
    }
    54.6511627907% {
        background-position: -108px -200px
    }
    55.8139534884% {
        background-position: -144px -200px
    }
    56.976744186% {
        background-position: -180px -200px
    }
    58.1395348837% {
        background-position: -216px -200px
    }
    59.3023255814% {
        background-position: -252px -200px
    }
    60.4651162791% {
        background-position: -288px -200px
    }
    61.6279069767% {
        background-position: -324px -200px
    }
    62.7906976744% {
        background-position: -360px -200px
    }
    63.9534883721% {
        background-position: 0px -250px
    }
    65.1162790698% {
        background-position: -36px -250px
    }
    66.2790697674% {
        background-position: -72px -250px
    }
    67.4418604651% {
        background-position: -108px -250px
    }
    68.6046511628% {
        background-position: -144px -250px
    }
    69.7674418605% {
        background-position: -180px -250px
    }
    70.9302325581% {
        background-position: -216px -250px
    }
    72.0930232558% {
        background-position: -252px -250px
    }
    73.2558139535% {
        background-position: -288px -250px
    }
    74.4186046512% {
        background-position: -324px -250px
    }
    75.5813953488% {
        background-position: -360px -250px
    }
    76.7441860465% {
        background-position: 0px -300px
    }
    77.9069767442% {
        background-position: -36px -300px
    }
    79.0697674419% {
        background-position: -72px -300px
    }
    80.2325581395% {
        background-position: -108px -300px
    }
    81.3953488372% {
        background-position: -144px -300px
    }
    82.5581395349% {
        background-position: -180px -300px
    }
    83.7209302326% {
        background-position: -216px -300px
    }
    84.8837209302% {
        background-position: -252px -300px
    }
    86.0465116279% {
        background-position: -288px -300px
    }
    87.2093023256% {
        background-position: -324px -300px
    }
    88.3720930233% {
        background-position: -360px -300px
    }
    89.5348837209% {
        background-position: 0px -350px
    }
    90.6976744186% {
        background-position: -36px -350px
    }
    91.8604651163% {
        background-position: -72px -350px
    }
    93.023255814% {
        background-position: -108px -350px
    }
    94.1860465116% {
        background-position: -144px -350px
    }
    95.3488372093% {
        background-position: -180px -350px
    }
    96.511627907% {
        background-position: -216px -350px
    }
    97.6744186047% {
        background-position: -252px -350px
    }
    98.8372093023% {
        background-position: -288px -350px
    }
    to {
        background-position: -288px -350px
    }
}

@media only screen and (max-width: 734px) {
    .section-digital-assistant .section-content .callout-icon {
        background-repeat: no-repeat;
        background-size: 396px 400px;
        width: 36px;
        height: 50px;
        animation: apple-lock-small .7166666667s steps(1) forwards;
        animation-delay: 1s;
        background-position: 0px 0px
    }
}

@media only screen and (max-width: 734px)and (-webkit-min-device-pixel-ratio:1.5),
only screen and (max-width:734px)and (min-resolution:1.5dppx),
only screen and (max-width:734px)and (min-resolution:144dpi) {
    .section-digital-assistant .section-content .callout-icon {}
}

@media only screen and (max-width: 734px) {
    html.reduced-motion .section-digital-assistant .section-content .callout-icon {
        animation: none;
        background-position: -288px -350px
    }
}

.section-digital-assistant .section-content .callout-title {
    margin: 30px auto 35px;
    max-width: 12ch
}

@media only screen and (max-width: 1068px) {
    .section-digital-assistant .section-content .callout-title {
        margin: 15px auto 25px
    }
}

@media only screen and (max-width: 734px) {
    .section-digital-assistant .section-content .callout-title {
        margin: 19px auto 24px 0;
        text-align: left;
        max-width: unset
    }
}

.section-digital-assistant .section-content .callout-copy {
    max-width: 49.25ch;
    margin-bottom: 30px
}

@media only screen and (max-width: 1068px) {
    .section-digital-assistant .section-content .callout-copy {
        max-width: 43ch;
        margin-bottom: 17px
    }
}

@media only screen and (max-width: 734px) {
    .section-digital-assistant .section-content .callout-copy {
        max-width: unset;
        margin-bottom: 25px
    }
}

@media only screen and (max-width: 734px) {
    .section-digital-assistant .section-content .callout-cta {
        align-self: flex-start
    }
}

.section-digital-assistant .section-content.animate .callout-icon {
    animation-play-state: running
}

html.reduced-motion .section-digital-assistant {
    padding: var(--section-padding) 0px
}

html.reduced-motion .section-digital-assistant .section-content {
    max-width: var(--section-content-wide)
}

html.reduced-motion .section-digital-assistant .section-content .callout {
    margin-top: 0px;
    border-radius: var(--digital-assistant-radius);
    margin-bottom: 0;
    padding: 90px var(--digital-assistant-inset)
}

@media only screen and (max-width: 1068px) {
    html.reduced-motion .section-digital-assistant .section-content .callout {
        padding: 80px var(--digital-assistant-inset)
    }
}

@media only screen and (max-width: 734px) {
    html.reduced-motion .section-digital-assistant .section-content .callout {
        padding: 50px var(--digital-assistant-inset)
    }
}

.section-routers {
    padding-top: 170px;
    padding-bottom: 100px
}

@media only screen and (max-width: 1068px) {
    .section-routers {
        padding-top: 100px;
        padding-bottom: 62px
    }
}

@media only screen and (max-width: 734px) {
    .section-routers {
        padding-top: 60px;
        padding-bottom: 18px
    }
}

.section-routers .section-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center
}

@media only screen and (max-width: 734px) {
    .section-routers .section-headline {
        font-size: 48px;
        line-height: 1.0834933333;
        font-weight: 600;
        letter-spacing: -0.003em;
        font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
        max-width: var(--tile-max-width)
    }
    .section-routers .section-headline:lang(ar) {
        letter-spacing: 0em;
        font-family: SF Pro AR, SF Pro Gulf, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-routers .section-headline:lang(ja) {
        line-height: 1.1459933333;
        letter-spacing: 0em;
        font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-routers .section-headline:lang(ko) {
        line-height: 1.1875;
        letter-spacing: 0em;
        font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-routers .section-headline:lang(zh) {
        letter-spacing: 0em
    }
    .section-routers .section-headline:lang(th) {
        line-height: 1.3334933333;
        font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-routers .section-headline:lang(zh-CN) {
        font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-routers .section-headline:lang(zh-HK) {
        font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-routers .section-headline:lang(zh-MO) {
        font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-routers .section-headline:lang(zh-TW) {
        font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif
    }
}

@media only screen and (max-width: 734px)and (max-width:1068px) {
    .section-routers .section-headline {
        font-size: 40px;
        line-height: 1.1;
        font-weight: 600;
        letter-spacing: 0em;
        font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-routers .section-headline:lang(ja) {
        line-height: 1.175;
        font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-routers .section-headline:lang(ko) {
        line-height: 1.2;
        font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-routers .section-headline:lang(th) {
        line-height: 1.35;
        font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-routers .section-headline:lang(ar) {
        font-family: SF Pro AR, SF Pro Gulf, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-routers .section-headline:lang(zh-CN) {
        font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-routers .section-headline:lang(zh-HK) {
        font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-routers .section-headline:lang(zh-MO) {
        font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-routers .section-headline:lang(zh-TW) {
        font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif
    }
}

@media only screen and (max-width: 734px)and (max-width:734px) {
    .section-routers .section-headline {
        font-size: 32px;
        line-height: 1.125;
        font-weight: 600;
        letter-spacing: .004em;
        font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-routers .section-headline:lang(ja) {
        line-height: 1.21875;
        font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-routers .section-headline:lang(ko) {
        line-height: 1.21875;
        font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-routers .section-headline:lang(th) {
        line-height: 1.375;
        font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-routers .section-headline:lang(ar) {
        font-family: SF Pro AR, SF Pro Gulf, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-routers .section-headline:lang(zh-CN) {
        font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-routers .section-headline:lang(zh-HK) {
        font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-routers .section-headline:lang(zh-MO) {
        font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-routers .section-headline:lang(zh-TW) {
        font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif
    }
}

@media only screen and (max-width: 320px) {
    .section-routers .section-headline {
        font-size: 40px;
        line-height: 1.1;
        font-weight: 600;
        letter-spacing: 0em;
        font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-routers .section-headline:lang(ja) {
        line-height: 1.175;
        font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-routers .section-headline:lang(ko) {
        line-height: 1.2;
        font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-routers .section-headline:lang(th) {
        line-height: 1.35;
        font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-routers .section-headline:lang(ar) {
        font-family: SF Pro AR, SF Pro Gulf, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-routers .section-headline:lang(zh-CN) {
        font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-routers .section-headline:lang(zh-HK) {
        font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-routers .section-headline:lang(zh-MO) {
        font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-routers .section-headline:lang(zh-TW) {
        font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif
    }
}

@media only screen and (max-width: 320px)and (max-width:1068px) {
    .section-routers .section-headline {
        font-size: 32px;
        line-height: 1.125;
        font-weight: 600;
        letter-spacing: .004em;
        font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-routers .section-headline:lang(ja) {
        line-height: 1.21875;
        font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-routers .section-headline:lang(ko) {
        line-height: 1.21875;
        font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-routers .section-headline:lang(th) {
        line-height: 1.375;
        font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-routers .section-headline:lang(ar) {
        font-family: SF Pro AR, SF Pro Gulf, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-routers .section-headline:lang(zh-CN) {
        font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-routers .section-headline:lang(zh-HK) {
        font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-routers .section-headline:lang(zh-MO) {
        font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-routers .section-headline:lang(zh-TW) {
        font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif
    }
}

@media only screen and (max-width: 320px)and (max-width:734px) {
    .section-routers .section-headline {
        font-size: 28px;
        line-height: 1.1428571429;
        font-weight: 600;
        letter-spacing: .007em;
        font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-routers .section-headline:lang(ko) {
        line-height: 1.25;
        font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-routers .section-headline:lang(th) {
        line-height: 1.3928571429;
        font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-routers .section-headline:lang(ar) {
        font-family: SF Pro AR, SF Pro Gulf, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-routers .section-headline:lang(ja) {
        font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-routers .section-headline:lang(zh-CN) {
        font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-routers .section-headline:lang(zh-HK) {
        font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-routers .section-headline:lang(zh-MO) {
        font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-routers .section-headline:lang(zh-TW) {
        font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif
    }
}

.section-routers .router-container {
    padding-left: 0;
    padding-right: 0;
    width: 100%;
    margin-top: 55px
}

@media only screen and (max-width: 1068px) {
    .section-routers .router-container {
        margin-top: 35px
    }
}

@media only screen and (max-width: 734px) {
    .section-routers .router-container {
        width: auto;
        margin-top: 28px
    }
}

.section-routers .router-container .router {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: var(--tile-border-radius);
    box-sizing: border-box;
    --tile-y: 150;
    padding: 95px 25px 0px
}

@media only screen and (max-width: 1068px) {
    .section-routers .router-container .router {
        --tile-y: 70;
        padding: 55px 24px 0px
    }
}

@media only screen and (max-width: 734px) {
    .section-routers .router-container .router {
        --tile-y: 50;
        max-width: var(--tile-max-width);
        min-height: 384px
    }
}

@media only screen and (orientation: portrait) {
    .section-routers .router-container .router {
        --tile-duration: 200
    }
}

.section-routers .router-container .router .cta {
    margin-top: 17px
}

@media only screen and (max-width: 1068px) {
    .section-routers .router-container .router .cta {
        font-size: 14px;
        line-height: 1.4285914286;
        font-weight: 400;
        letter-spacing: -0.016em;
        font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
        margin-top: 15px
    }
    .section-routers .router-container .router .cta:lang(ar) {
        letter-spacing: 0em;
        font-family: SF Pro AR, SF Pro Gulf, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-routers .router-container .router .cta:lang(ja) {
        letter-spacing: 0em;
        font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-routers .router-container .router .cta:lang(ko) {
        line-height: 1.5714285714;
        letter-spacing: 0em;
        font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-routers .router-container .router .cta:lang(zh) {
        letter-spacing: 0em
    }
    .section-routers .router-container .router .cta:lang(th) {
        line-height: 1.3571828571;
        letter-spacing: 0em;
        font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-routers .router-container .router .cta:lang(zh-CN) {
        font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-routers .router-container .router .cta:lang(zh-HK) {
        font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-routers .router-container .router .cta:lang(zh-MO) {
        font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-routers .router-container .router .cta:lang(zh-TW) {
        font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif
    }
}

.section-routers .router-container .router .cta>a {
    color: #fff
}

.section-routers .router-container .router picture {
    display: flex;
    flex-grow: 1;
    align-items: center
}

.section-routers .router-container .router picture img {
    width: 100%;
    height: auto
}

.section-routers .router-container .router.devices {
    background: linear-gradient(166deg, #1c4262 -10%, #0c0c21 70%)
}

@media only screen and (min-width: 735px)and (max-width:1068px) {
    .section-routers .router-container .router.devices picture {
        max-width: 56%
    }
}

.section-routers .router-container .router.shortcuts {
    background: linear-gradient(192deg, #004f7a, #000);
    --tile-stagger-index: .2
}

@media only screen and (max-width: 734px) {
    .section-routers .router-container .router.shortcuts {
        --tile-stagger-index: 0
    }
}

.section-routers .router-container .router.shortcuts picture {
    max-width: 100%;
    height: auto;
    align-items: flex-end;
    margin-top: 46px
}

@media only screen and (max-width: 1068px) {
    .section-routers .router-container .router.shortcuts picture {
        margin-top: 30px
    }
}

@media only screen and (max-width: 734px) {
    .section-routers .router-container .router.shortcuts picture {
        margin-top: 40px
    }
}

.section-routers .router-container .router.sirikit {
    background: linear-gradient(180deg, #423486 0%, #2E1549);
    --tile-stagger-index: .4
}

@media only screen and (max-width: 734px) {
    .section-routers .router-container .router.sirikit {
        --tile-stagger-index: 0
    }
}

@media only screen and (min-width: 735px)and (max-width:1068px) {
    .section-routers .router-container .router.sirikit picture {
        max-width: 65%
    }
}

.tabnav {
    width: 100%;
    position: relative;
    overflow: hidden;
    height: 3.1764705882em;
    font-size: 17px;
    text-align: center;
    z-index: 1
}

html.touch .tabnav-paddles {
    display: none
}

.tabnav-paddle {
    font-size: 40px;
    line-height: 1.5;
    font-weight: 300;
    letter-spacing: 0em;
    font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
    border: 0 solid rgba(29, 29, 31, .2);
    border-radius: 0;
    opacity: 1;
    position: absolute;
    top: 0;
    bottom: 0;
    text-align: center;
    width: 49px;
    transition: opacity 8px ease-out
}

.tabnav-paddle:lang(ar) {
    font-family: SF Pro AR, SF Pro Gulf, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
}

.tabnav-paddle:lang(ja) {
    font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif
}

.tabnav-paddle:lang(ko) {
    font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif
}

.tabnav-paddle:lang(th) {
    font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
}

.tabnav-paddle:lang(zh-CN) {
    font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif
}

.tabnav-paddle:lang(zh-HK) {
    font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif
}

.tabnav-paddle:lang(zh-MO) {
    font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif
}

.tabnav-paddle:lang(zh-TW) {
    font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif
}

.tabnav-paddle:after {
    opacity: .8;
    transition: opacity 200ms linear
}

.tabnav-paddle:disabled {
    opacity: 0
}

.tabnav-paddle:hover:after {
    opacity: 1
}

.tabnav-paddle:focus {
    outline: none
}

.tabnav-paddle:focus:after {
    outline: 4px solid rgba(0, 125, 250, .6);
    outline-offset: 4px;
    opacity: 1
}

.tabnav-paddle:active,
.tabnav-paddle:focus:after[data-focus-method=mouse]:not(input):not(textarea):not(select),
.tabnav-paddle:focus:after[data-focus-method=touch]:not(input):not(textarea):not(select) {
    outline: none
}

.tabnav-paddle:active:after {
    outline: none;
    opacity: 1
}

.theme-dark .tabnav-paddle {
    border-color: rgba(245, 245, 247, .2)
}

.tabnav-paddle-left {
    border-right-width: 1px;
    left: 0
}

.tabnav-paddle-left:after,
.tabnav-paddle-left:before {
    font-family: SF Pro Icons;
    color: inherit;
    display: inline-block;
    font-style: normal;
    font-weight: inherit;
    font-size: inherit;
    line-height: 1;
    text-decoration: underline;
    position: relative;
    z-index: 1;
    alt: "";
    text-decoration: none
}

.tabnav-paddle-left:before {
    display: none
}

.tabnav-paddle-left:after,
.tabnav-paddle-left:before {
    content: ""
}

.tabnav-paddle-left:after {
    margin-left: 1px
}

.tabnav-paddle-right {
    border-left-width: 1px;
    right: 0
}

.tabnav-paddle-right:after,
.tabnav-paddle-right:before {
    font-family: SF Pro Icons;
    color: inherit;
    display: inline-block;
    font-style: normal;
    font-weight: inherit;
    font-size: inherit;
    line-height: 1;
    text-decoration: underline;
    position: relative;
    z-index: 1;
    alt: "";
    text-decoration: none
}

.tabnav-paddle-right:before {
    display: none
}

.tabnav-paddle-right:after,
.tabnav-paddle-right:before {
    content: ""
}

.tabnav-paddle-right:after {
    margin-right: 1px
}

.tabnav .tabnav-items {
    margin: 0 50px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    padding: 0 0 3.1764705882em
}

html.touch .tabnav .tabnav-items {
    margin: 0;
    padding-left: 50px;
    padding-right: 50px
}

.tabnav.with-icons {
    height: 7.5294117647em
}

.tabnav.with-icons .tabnav-icon {
    margin: .3529411765em auto 1.6470588235em
}

.tabnav .tabnav-item {
    display: inline-block;
    padding-left: 60px;
    border-bottom: 1px solid keyline;
    list-style: none;
    outline: none
}

@media only screen and (max-width: 1068px) {
    .tabnav .tabnav-item {
        padding-left: 50px
    }
}

@media only screen and (max-width: 734px) {
    .tabnav .tabnav-item {
        padding-left: 30px
    }
}

.tabnav .tabnav-item:first-child {
    padding-left: 0
}

.tabnav-link {
    font-size: 34px;
    line-height: 1;
    font-weight: 400;
    letter-spacing: -0.021em;
    font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
    padding: 9px 0 11px;
    margin-top: 2px;
    margin-bottom: 4px;
    color: caption;
    text-align: left;
    text-decoration: none;
    display: block;
    position: relative;
    z-index: 0
}

.tabnav-link:lang(ar) {
    font-family: SF Pro AR, SF Pro Gulf, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
}

.tabnav-link:lang(ja) {
    font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif
}

.tabnav-link:lang(ko) {
    font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif
}

.tabnav-link:lang(th) {
    font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
}

.tabnav-link:lang(zh-CN) {
    font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif
}

.tabnav-link:lang(zh-HK) {
    font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif
}

.tabnav-link:lang(zh-MO) {
    font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif
}

.tabnav-link:lang(zh-TW) {
    font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif
}

.with-paddles .tabnav-link {
    text-align: center
}

.tabnav-link:hover {
    color: blue;
    text-decoration: none
}

.tabnav-link:focus {
    outline-offset: -1px
}

.tabnav-link.current {
    pointer-events: none;
    color: copy;
    text-decoration: none;
    cursor: default;
    z-index: 10
}

.tabnav-link.current:after {
    left: 0;
    position: absolute;
    bottom: -5px;
    width: 100%;
    border-bottom: 1px solid caption;
    content: ""
}

.theme-dark .tabnav .tabnav-item {
    border-bottom-color: keyline
}

.theme-dark .tabnav .tabnav-link {
    color: caption
}

.theme-dark .tabnav .tabnav-link:hover {
    color: blue
}

.theme-dark .tabnav .tabnav-link.current {
    color: copy
}

.theme-dark .tabnav .tabnav-link.current:after {
    border-bottom-color: caption
}

.section-siri-does-this {
    --color: white;
    background-color: #152046;
    color: var(--color);
    opacity: .001;
    text-align: center
}

.section-siri-does-this.hide,
.section-siri-does-this .hide {
    display: none;
    pointer-events: none
}

.section-siri-does-this.initialized,
.section-siri-does-this .initialized {
    opacity: 1
}

html.no-js .section-siri-does-this {
    display: none
}

.section-siri-does-this .typography-headline-super {
    color: var(--color);
    margin-bottom: 20px
}

@media only screen and (max-width: 734px) {
    .section-siri-does-this .typography-headline-super {
        font-size: 48px;
        line-height: 1.0834933333;
        font-weight: 600;
        letter-spacing: -0.003em;
        font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-siri-does-this .typography-headline-super:lang(ar) {
        letter-spacing: 0em;
        font-family: SF Pro AR, SF Pro Gulf, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-siri-does-this .typography-headline-super:lang(ja) {
        line-height: 1.1459933333;
        letter-spacing: 0em;
        font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-siri-does-this .typography-headline-super:lang(ko) {
        line-height: 1.1875;
        letter-spacing: 0em;
        font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-siri-does-this .typography-headline-super:lang(zh) {
        letter-spacing: 0em
    }
    .section-siri-does-this .typography-headline-super:lang(th) {
        line-height: 1.3334933333;
        font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-siri-does-this .typography-headline-super:lang(zh-CN) {
        font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-siri-does-this .typography-headline-super:lang(zh-HK) {
        font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-siri-does-this .typography-headline-super:lang(zh-MO) {
        font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-siri-does-this .typography-headline-super:lang(zh-TW) {
        font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif
    }
}

@media only screen and (max-width: 734px)and (max-width:1068px) {
    .section-siri-does-this .typography-headline-super {
        font-size: 40px;
        line-height: 1.1;
        font-weight: 600;
        letter-spacing: 0em;
        font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-siri-does-this .typography-headline-super:lang(ja) {
        line-height: 1.175;
        font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-siri-does-this .typography-headline-super:lang(ko) {
        line-height: 1.2;
        font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-siri-does-this .typography-headline-super:lang(th) {
        line-height: 1.35;
        font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-siri-does-this .typography-headline-super:lang(ar) {
        font-family: SF Pro AR, SF Pro Gulf, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-siri-does-this .typography-headline-super:lang(zh-CN) {
        font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-siri-does-this .typography-headline-super:lang(zh-HK) {
        font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-siri-does-this .typography-headline-super:lang(zh-MO) {
        font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-siri-does-this .typography-headline-super:lang(zh-TW) {
        font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif
    }
}

@media only screen and (max-width: 734px)and (max-width:734px) {
    .section-siri-does-this .typography-headline-super {
        font-size: 32px;
        line-height: 1.125;
        font-weight: 600;
        letter-spacing: .004em;
        font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-siri-does-this .typography-headline-super:lang(ja) {
        line-height: 1.21875;
        font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-siri-does-this .typography-headline-super:lang(ko) {
        line-height: 1.21875;
        font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-siri-does-this .typography-headline-super:lang(th) {
        line-height: 1.375;
        font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-siri-does-this .typography-headline-super:lang(ar) {
        font-family: SF Pro AR, SF Pro Gulf, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-siri-does-this .typography-headline-super:lang(zh-CN) {
        font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-siri-does-this .typography-headline-super:lang(zh-HK) {
        font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-siri-does-this .typography-headline-super:lang(zh-MO) {
        font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-siri-does-this .typography-headline-super:lang(zh-TW) {
        font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif
    }
}

@media only screen and (max-width: 320px) {
    .section-siri-does-this .typography-headline-super {
        font-size: 40px;
        line-height: 1.1;
        font-weight: 600;
        letter-spacing: 0em;
        font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-siri-does-this .typography-headline-super:lang(ja) {
        line-height: 1.175;
        font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-siri-does-this .typography-headline-super:lang(ko) {
        line-height: 1.2;
        font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-siri-does-this .typography-headline-super:lang(th) {
        line-height: 1.35;
        font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-siri-does-this .typography-headline-super:lang(ar) {
        font-family: SF Pro AR, SF Pro Gulf, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-siri-does-this .typography-headline-super:lang(zh-CN) {
        font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-siri-does-this .typography-headline-super:lang(zh-HK) {
        font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-siri-does-this .typography-headline-super:lang(zh-MO) {
        font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-siri-does-this .typography-headline-super:lang(zh-TW) {
        font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif
    }
}

@media only screen and (max-width: 320px)and (max-width:1068px) {
    .section-siri-does-this .typography-headline-super {
        font-size: 32px;
        line-height: 1.125;
        font-weight: 600;
        letter-spacing: .004em;
        font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-siri-does-this .typography-headline-super:lang(ja) {
        line-height: 1.21875;
        font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-siri-does-this .typography-headline-super:lang(ko) {
        line-height: 1.21875;
        font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-siri-does-this .typography-headline-super:lang(th) {
        line-height: 1.375;
        font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-siri-does-this .typography-headline-super:lang(ar) {
        font-family: SF Pro AR, SF Pro Gulf, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-siri-does-this .typography-headline-super:lang(zh-CN) {
        font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-siri-does-this .typography-headline-super:lang(zh-HK) {
        font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-siri-does-this .typography-headline-super:lang(zh-MO) {
        font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-siri-does-this .typography-headline-super:lang(zh-TW) {
        font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif
    }
}

@media only screen and (max-width: 320px)and (max-width:734px) {
    .section-siri-does-this .typography-headline-super {
        font-size: 28px;
        line-height: 1.1428571429;
        font-weight: 600;
        letter-spacing: .007em;
        font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-siri-does-this .typography-headline-super:lang(ko) {
        line-height: 1.25;
        font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-siri-does-this .typography-headline-super:lang(th) {
        line-height: 1.3928571429;
        font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-siri-does-this .typography-headline-super:lang(ar) {
        font-family: SF Pro AR, SF Pro Gulf, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-siri-does-this .typography-headline-super:lang(ja) {
        font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-siri-does-this .typography-headline-super:lang(zh-CN) {
        font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-siri-does-this .typography-headline-super:lang(zh-HK) {
        font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-siri-does-this .typography-headline-super:lang(zh-MO) {
        font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-siri-does-this .typography-headline-super:lang(zh-TW) {
        font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif
    }
}

.section-siri-does-this .tabnav {
    height: auto;
    display: flex;
    overflow: hidden;
    width: 100%;
    margin-bottom: 16px
}

html.text-zoom .section-siri-does-this .tabnav {
    width: 95%;
    margin-left: auto;
    margin-right: auto
}

.section-siri-does-this .tabnav .tabnav-item {
    padding-left: 0
}

.touch .section-siri-does-this .tabnav .tabnav-paddles {
    display: block;
    margin: 0
}

html.text-zoom .section-siri-does-this .tabnav .tabnav-paddles {
    display: none
}

.section-siri-does-this .tabnav-paddle {
    border: 0px;
    font-size: 24px;
    transition: opacity .5s ease-out
}

.section-siri-does-this .tabnav-paddle-right {
    background: linear-gradient(90deg, rgba(21, 32, 70, 0), #152046 50%);
    padding-right: 10px;
    text-align: right
}

.section-siri-does-this .tabnav-paddle-left {
    background: linear-gradient(270deg, rgba(21, 32, 70, 0), #152046 50%);
    padding-left: 10px;
    text-align: left
}

.section-siri-does-this .tabnav-paddle:disabled {
    pointer-events: none
}

.section-siri-does-this .utterance-tags {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(9, minmax(100px, 113px));
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -ms-overflow-style: none;
    scrollbar-width: none;
    padding-top: 4px;
    padding-bottom: 4px
}

.section-siri-does-this .utterance-tags::-webkit-scrollbar {
    display: none
}

html.text-zoom .section-siri-does-this .utterance-tags {
    max-width: unset;
    grid-template-columns: repeat(3, 220px);
    width: 100%;
    justify-content: center
}

@media only screen and (max-width: 1068px) {
    .section-siri-does-this .utterance-tags {
        width: 96%;
        justify-content: center;
        grid-template-columns: repeat(9, minmax(70px, 92px))
    }
}

@media only screen and (max-width: 734px) {
    .section-siri-does-this .utterance-tags {
        width: 94%;
        justify-content: unset;
        grid-template-columns: repeat(9, minmax(80px, 92px))
    }
}

.section-siri-does-this .utterance-tags-item {
    margin: 0 12px
}

@media only screen and (max-width: 1068px) {
    .section-siri-does-this .utterance-tags-item {
        margin: 0 2px
    }
}

.section-siri-does-this .utterance-tag {
    text-align: center;
    opacity: .5;
    transition: opacity .4s ease;
    white-space: normal;
    padding-top: 1px
}

@media only screen and (max-width: 1068px) {
    .section-siri-does-this .utterance-tag {
        font-size: 12px;
        line-height: 1.3333733333;
        font-weight: 400;
        letter-spacing: -0.01em;
        font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
        font-weight: 600
    }
    .section-siri-does-this .utterance-tag:lang(ar) {
        letter-spacing: 0em;
        font-family: SF Pro AR, SF Pro Gulf, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-siri-does-this .utterance-tag:lang(ja) {
        line-height: 1.4166666667;
        letter-spacing: 0em;
        font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-siri-does-this .utterance-tag:lang(ko) {
        line-height: 1.4166666667;
        letter-spacing: 0em;
        font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-siri-does-this .utterance-tag:lang(zh) {
        letter-spacing: 0em
    }
    .section-siri-does-this .utterance-tag:lang(th) {
        line-height: 1.3333733333;
        letter-spacing: 0em;
        font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-siri-does-this .utterance-tag:lang(zh-CN) {
        font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-siri-does-this .utterance-tag:lang(zh-HK) {
        font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-siri-does-this .utterance-tag:lang(zh-MO) {
        font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-siri-does-this .utterance-tag:lang(zh-TW) {
        font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif
    }
}

.section-siri-does-this .utterance-tag.active,
.section-siri-does-this .utterance-tag:hover {
    opacity: 1
}

.section-siri-does-this .utterance-tag.active .utterance-tag-icon,
.section-siri-does-this .utterance-tag:hover .utterance-tag-icon {
    border-width: 2px
}

.section-siri-does-this .utterance-tag-icon {
    width: 80px;
    height: 80px;
    border: 1px solid var(--color);
    border-radius: 42px;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    display: block
}

.section-siri-does-this .utterance-tag-icon .svg-icon {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transform-origin: top left
}

@media only screen and (max-width: 1068px) {
    .section-siri-does-this .utterance-tag-icon {
        width: 60px;
        height: 60px
    }
    .section-siri-does-this .utterance-tag-icon .svg-icon {
        transform: scale(0.75) translate(-50%, -50%)
    }
}

.section-siri-does-this .utterance-tag-icon.smart-home+span {
    display: block;
    max-width: 60px;
    margin: 0 auto
}

html.text-zoom .section-siri-does-this .utterance-tag-icon.smart-home+span {
    max-width: unset
}

.section-siri-does-this .utterance-item-all svg {
    width: 44px;
    height: 29px;
    fill: #fff
}

@media only screen and (max-width: 1068px) {
    .section-siri-does-this .utterance-item-all svg {
        transform: scale(0.75)
    }
}

.section-siri-does-this .utterance-item-all .utterance-tag.active .utterance-tag-icon.all,
.section-siri-does-this .utterance-item-all .utterance-tag:hover .utterance-tag-icon.all {
    background: linear-gradient(#152046, #152046) padding-box, linear-gradient(to bottom right, #D400A5, #1E76C9, #35FCED) border-box;
    border-radius: 50em;
    border: 2px solid transparent
}

.section-siri-does-this .utterance-item-all .utterance-tag.active .utterance-tag-icon.all svg.icon-all,
.section-siri-does-this .utterance-item-all .utterance-tag:hover .utterance-tag-icon.all svg.icon-all {
    fill: url(#allGradient)
}

.section-siri-does-this .utterance-item-calls-texts svg {
    width: 19px;
    height: 32px;
    fill: #fff
}

@media only screen and (max-width: 1068px) {
    .section-siri-does-this .utterance-item-calls-texts svg {
        transform: scale(0.75)
    }
}

.section-siri-does-this .utterance-item-calls-texts .utterance-tag.active .utterance-tag-icon,
.section-siri-does-this .utterance-item-calls-texts .utterance-tag:hover .utterance-tag-icon {
    border-color: #D03587
}

.section-siri-does-this .utterance-item-calls-texts .utterance-tag.active .utterance-tag-icon svg.icon-calls-texts,
.section-siri-does-this .utterance-item-calls-texts .utterance-tag:hover .utterance-tag-icon svg.icon-calls-texts {
    fill: #D03587
}

.section-siri-does-this .utterance-item-calls-texts .utterance-tag.active .utterance-tag-icon.all,
.section-siri-does-this .utterance-item-calls-texts .utterance-tag:hover .utterance-tag-icon.all {
    background: linear-gradient(#152046, #152046) padding-box, linear-gradient(to bottom right, #D400A5, #1E76C9, #35FCED) border-box;
    border-radius: 50em;
    border: 2px solid transparent
}

.section-siri-does-this .utterance-item-calls-texts .utterance-tag.active .utterance-tag-icon.all svg.icon-all,
.section-siri-does-this .utterance-item-calls-texts .utterance-tag:hover .utterance-tag-icon.all svg.icon-all {
    fill: url(#allGradient)
}

.section-siri-does-this .utterance-item-everyday-tasks svg {
    width: 37px;
    height: 34px;
    fill: #fff
}

@media only screen and (max-width: 1068px) {
    .section-siri-does-this .utterance-item-everyday-tasks svg {
        transform: scale(0.75)
    }
}

.section-siri-does-this .utterance-item-everyday-tasks .utterance-tag.active .utterance-tag-icon,
.section-siri-does-this .utterance-item-everyday-tasks .utterance-tag:hover .utterance-tag-icon {
    border-color: #10A48A
}

.section-siri-does-this .utterance-item-everyday-tasks .utterance-tag.active .utterance-tag-icon svg.icon-everyday-tasks,
.section-siri-does-this .utterance-item-everyday-tasks .utterance-tag:hover .utterance-tag-icon svg.icon-everyday-tasks {
    fill: #10A48A
}

.section-siri-does-this .utterance-item-everyday-tasks .utterance-tag.active .utterance-tag-icon.all,
.section-siri-does-this .utterance-item-everyday-tasks .utterance-tag:hover .utterance-tag-icon.all {
    background: linear-gradient(#152046, #152046) padding-box, linear-gradient(to bottom right, #D400A5, #1E76C9, #35FCED) border-box;
    border-radius: 50em;
    border: 2px solid transparent
}

.section-siri-does-this .utterance-item-everyday-tasks .utterance-tag.active .utterance-tag-icon.all svg.icon-all,
.section-siri-does-this .utterance-item-everyday-tasks .utterance-tag:hover .utterance-tag-icon.all svg.icon-all {
    fill: url(#allGradient)
}

.section-siri-does-this .utterance-item-smart-home svg {
    width: 44px;
    height: 40px;
    fill: #fff
}

@media only screen and (max-width: 1068px) {
    .section-siri-does-this .utterance-item-smart-home svg {
        transform: scale(0.75)
    }
}

.section-siri-does-this .utterance-item-smart-home .utterance-tag.active .utterance-tag-icon,
.section-siri-does-this .utterance-item-smart-home .utterance-tag:hover .utterance-tag-icon {
    border-color: #4DA3F9
}

.section-siri-does-this .utterance-item-smart-home .utterance-tag.active .utterance-tag-icon svg.icon-smart-home,
.section-siri-does-this .utterance-item-smart-home .utterance-tag:hover .utterance-tag-icon svg.icon-smart-home {
    fill: #4DA3F9
}

.section-siri-does-this .utterance-item-smart-home .utterance-tag.active .utterance-tag-icon.all,
.section-siri-does-this .utterance-item-smart-home .utterance-tag:hover .utterance-tag-icon.all {
    background: linear-gradient(#152046, #152046) padding-box, linear-gradient(to bottom right, #D400A5, #1E76C9, #35FCED) border-box;
    border-radius: 50em;
    border: 2px solid transparent
}

.section-siri-does-this .utterance-item-smart-home .utterance-tag.active .utterance-tag-icon.all svg.icon-all,
.section-siri-does-this .utterance-item-smart-home .utterance-tag:hover .utterance-tag-icon.all svg.icon-all {
    fill: url(#allGradient)
}

.section-siri-does-this .utterance-item-knowledge svg {
    width: 33px;
    height: 41px;
    fill: #fff
}

@media only screen and (max-width: 1068px) {
    .section-siri-does-this .utterance-item-knowledge svg {
        transform: scale(0.75)
    }
}

.section-siri-does-this .utterance-item-knowledge .utterance-tag.active .utterance-tag-icon,
.section-siri-does-this .utterance-item-knowledge .utterance-tag:hover .utterance-tag-icon {
    border-color: #F97659
}

.section-siri-does-this .utterance-item-knowledge .utterance-tag.active .utterance-tag-icon svg.icon-knowledge,
.section-siri-does-this .utterance-item-knowledge .utterance-tag:hover .utterance-tag-icon svg.icon-knowledge {
    fill: #F97659
}

.section-siri-does-this .utterance-item-knowledge .utterance-tag.active .utterance-tag-icon.all,
.section-siri-does-this .utterance-item-knowledge .utterance-tag:hover .utterance-tag-icon.all {
    background: linear-gradient(#152046, #152046) padding-box, linear-gradient(to bottom right, #D400A5, #1E76C9, #35FCED) border-box;
    border-radius: 50em;
    border: 2px solid transparent
}

.section-siri-does-this .utterance-item-knowledge .utterance-tag.active .utterance-tag-icon.all svg.icon-all,
.section-siri-does-this .utterance-item-knowledge .utterance-tag:hover .utterance-tag-icon.all svg.icon-all {
    fill: url(#allGradient)
}

.section-siri-does-this .utterance-item-music-podcasts svg {
    width: 34px;
    height: 35px;
    fill: #fff
}

@media only screen and (max-width: 1068px) {
    .section-siri-does-this .utterance-item-music-podcasts svg {
        transform: scale(0.75)
    }
}

.section-siri-does-this .utterance-item-music-podcasts .utterance-tag.active .utterance-tag-icon,
.section-siri-does-this .utterance-item-music-podcasts .utterance-tag:hover .utterance-tag-icon {
    border-color: #804EFE
}

.section-siri-does-this .utterance-item-music-podcasts .utterance-tag.active .utterance-tag-icon svg.icon-music-podcasts,
.section-siri-does-this .utterance-item-music-podcasts .utterance-tag:hover .utterance-tag-icon svg.icon-music-podcasts {
    fill: #804EFE
}

.section-siri-does-this .utterance-item-music-podcasts .utterance-tag.active .utterance-tag-icon.all,
.section-siri-does-this .utterance-item-music-podcasts .utterance-tag:hover .utterance-tag-icon.all {
    background: linear-gradient(#152046, #152046) padding-box, linear-gradient(to bottom right, #D400A5, #1E76C9, #35FCED) border-box;
    border-radius: 50em;
    border: 2px solid transparent
}

.section-siri-does-this .utterance-item-music-podcasts .utterance-tag.active .utterance-tag-icon.all svg.icon-all,
.section-siri-does-this .utterance-item-music-podcasts .utterance-tag:hover .utterance-tag-icon.all svg.icon-all {
    fill: url(#allGradient)
}

.section-siri-does-this .utterance-item-navigation-maps svg {
    width: 34px;
    height: 34px;
    fill: #fff
}

@media only screen and (max-width: 1068px) {
    .section-siri-does-this .utterance-item-navigation-maps svg {
        transform: scale(0.75)
    }
}

.section-siri-does-this .utterance-item-navigation-maps .utterance-tag.active .utterance-tag-icon,
.section-siri-does-this .utterance-item-navigation-maps .utterance-tag:hover .utterance-tag-icon {
    border-color: #F43F55
}

.section-siri-does-this .utterance-item-navigation-maps .utterance-tag.active .utterance-tag-icon svg.icon-navigation-maps,
.section-siri-does-this .utterance-item-navigation-maps .utterance-tag:hover .utterance-tag-icon svg.icon-navigation-maps {
    fill: #F43F55
}

.section-siri-does-this .utterance-item-navigation-maps .utterance-tag.active .utterance-tag-icon.all,
.section-siri-does-this .utterance-item-navigation-maps .utterance-tag:hover .utterance-tag-icon.all {
    background: linear-gradient(#152046, #152046) padding-box, linear-gradient(to bottom right, #D400A5, #1E76C9, #35FCED) border-box;
    border-radius: 50em;
    border: 2px solid transparent
}

.section-siri-does-this .utterance-item-navigation-maps .utterance-tag.active .utterance-tag-icon.all svg.icon-all,
.section-siri-does-this .utterance-item-navigation-maps .utterance-tag:hover .utterance-tag-icon.all svg.icon-all {
    fill: url(#allGradient)
}

.section-siri-does-this .utterance-item-sports svg {
    width: 55px;
    height: 32px;
    fill: #fff
}

@media only screen and (max-width: 1068px) {
    .section-siri-does-this .utterance-item-sports svg {
        transform: scale(0.75)
    }
}

.section-siri-does-this .utterance-item-sports .utterance-tag.active .utterance-tag-icon,
.section-siri-does-this .utterance-item-sports .utterance-tag:hover .utterance-tag-icon {
    border-color: #3D53FF
}

.section-siri-does-this .utterance-item-sports .utterance-tag.active .utterance-tag-icon svg.icon-sports,
.section-siri-does-this .utterance-item-sports .utterance-tag:hover .utterance-tag-icon svg.icon-sports {
    fill: #3D53FF
}

.section-siri-does-this .utterance-item-sports .utterance-tag.active .utterance-tag-icon.all,
.section-siri-does-this .utterance-item-sports .utterance-tag:hover .utterance-tag-icon.all {
    background: linear-gradient(#152046, #152046) padding-box, linear-gradient(to bottom right, #D400A5, #1E76C9, #35FCED) border-box;
    border-radius: 50em;
    border: 2px solid transparent
}

.section-siri-does-this .utterance-item-sports .utterance-tag.active .utterance-tag-icon.all svg.icon-all,
.section-siri-does-this .utterance-item-sports .utterance-tag:hover .utterance-tag-icon.all svg.icon-all {
    fill: url(#allGradient)
}

.section-siri-does-this .utterance-item-tv-movies svg {
    width: 39px;
    height: 32px;
    fill: #fff
}

@media only screen and (max-width: 1068px) {
    .section-siri-does-this .utterance-item-tv-movies svg {
        transform: scale(0.75)
    }
}

.section-siri-does-this .utterance-item-tv-movies .utterance-tag.active .utterance-tag-icon,
.section-siri-does-this .utterance-item-tv-movies .utterance-tag:hover .utterance-tag-icon {
    border-color: #AE5FFE
}

.section-siri-does-this .utterance-item-tv-movies .utterance-tag.active .utterance-tag-icon svg.icon-tv-movies,
.section-siri-does-this .utterance-item-tv-movies .utterance-tag:hover .utterance-tag-icon svg.icon-tv-movies {
    fill: #AE5FFE
}

.section-siri-does-this .utterance-item-tv-movies .utterance-tag.active .utterance-tag-icon.all,
.section-siri-does-this .utterance-item-tv-movies .utterance-tag:hover .utterance-tag-icon.all {
    background: linear-gradient(#152046, #152046) padding-box, linear-gradient(to bottom right, #D400A5, #1E76C9, #35FCED) border-box;
    border-radius: 50em;
    border: 2px solid transparent
}

.section-siri-does-this .utterance-item-tv-movies .utterance-tag.active .utterance-tag-icon.all svg.icon-all,
.section-siri-does-this .utterance-item-tv-movies .utterance-tag:hover .utterance-tag-icon.all svg.icon-all {
    fill: url(#allGradient)
}

.section-siri-does-this .has-fade {
    opacity: .001;
    transition: opacity .6s
}

.section-siri-does-this .has-fade.ready {
    opacity: 1
}

.section-siri-does-this .has-fade.hide-row {
    opacity: 0;
    transition: opacity 1s ease-out;
    transition-delay: -1s
}

.section-siri-does-this.near-section .has-fade {
    will-change: opacity
}

.section-siri-does-this.near-section .has-fade.faded-in {
    will-change: auto
}

.section-siri-does-this.near-section .has-fade p {
    will-change: opacity
}

.section-siri-does-this.near-section.fade-in {
    opacity: 1;
    transform: translateY(0)
}

.section-siri-does-this.near-section .fade-in p {
    animation: fade-in 300ms ease-in-out forwards
}

.section-siri-does-this.near-section .transform-wrapper {
    will-change: transform
}

html.reduced-motion .section-siri-does-this .utterance-marquee {
    overflow: auto;
    padding-bottom: 20px;
    display: flex;
    flex-direction: column
}

html.reduced-motion .section-siri-does-this .utterance-marquee .marquee__container {
    display: inline-block
}

html.reduced-motion .section-siri-does-this .cta-wrapper .controls {
    display: none
}

.cta-wrapper {
    --padding-vert: 180px;
    text-align: center;
    position: relative;
    padding-bottom: var(--padding-vert);
    margin-top: 18px;
    margin-right: 30px
}

@media only screen and (max-width: 1068px) {
    .cta-wrapper {
        --padding-vert: 120px
    }
}

@media only screen and (max-width: 734px) {
    .cta-wrapper {
        --padding-vert: 60px
    }
}

@media only screen and (orientation: landscape)and (max-width:1068px) {
    .cta-wrapper {
        margin-right: 60px
    }
}

.cta-wrapper .controls {
    display: flex;
    justify-content: flex-end
}

.cta-wrapper .controls.hide {
    display: none
}

.cta-wrapper .play-pause-marquee-button {
    font-weight: 700;
    position: relative;
    display: block;
    margin-left: 30px;
    pointer-events: none
}

.initialized .cta-wrapper .play-pause-marquee-button {
    pointer-events: auto
}

.section-utterances-content {
    background-color: #152046;
    display: flex;
    flex-wrap: wrap
}

.initialized .section-utterances-default {
    display: none
}

.section-utterances {
    transition: opacity .3s;
    --card-width: 304px;
    --card-gap: 24px;
    padding-top: 30px
}

@media only screen and (max-width: 1068px) {
    .section-utterances {
        --card-width: 250px;
        --card-gap: 19px
    }
}

@media only screen and (max-width: 734px) {
    .section-utterances {
        --card-width: 220px;
        padding-top: 5px
    }
}

.section-utterances.fade-out .utterance-card p {
    opacity: 0;
    transition: opacity .3s
}

.section-utterances .card-category-calls-texts {
    color: #D03587
}

.section-utterances .card-category-everyday-tasks {
    color: #10A48A
}

.section-utterances .card-category-smart-home {
    color: #4DA3F9
}

.section-utterances .card-category-knowledge {
    color: #F97659
}

.section-utterances .card-category-music-podcasts {
    color: #804EFE
}

.section-utterances .card-category-navigation-maps {
    color: #F43F55
}

.section-utterances .card-category-sports {
    color: #3D53FF
}

.section-utterances .card-category-tv-movies {
    color: #AE5FFE
}

.section-utterances .utterance-card {
    transition: opacity .15s ease-out;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 18px;
    display: none;
    flex-direction: column;
    text-align: left;
    width: var(--card-width);
    padding: 24px var(--card-gap) 21px;
    min-height: 193px;
    margin: 8px
}

.section-utterances .utterance-card.active {
    display: flex
}

@media only screen and (max-width: 1068px) {
    .section-utterances .utterance-card {
        padding: var(--card-gap);
        min-height: 160px
    }
}

@media only screen and (max-width: 734px) {
    .section-utterances .utterance-card {
        min-height: 140px;
        margin: 6px
    }
}

html.text-zoom .section-utterances .utterance-card {
    width: 550px;
    height: auto
}

.section-utterances .utterance-card .card-category {
    color: #6e6e73
}

@media only screen and (max-width: 734px) {
    .section-utterances .utterance-card .card-category {
        font-size: 12px;
        line-height: 1.3333733333;
        font-weight: 400;
        letter-spacing: -0.01em;
        font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-utterances .utterance-card .card-category:lang(ar) {
        letter-spacing: 0em;
        font-family: SF Pro AR, SF Pro Gulf, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-utterances .utterance-card .card-category:lang(ja) {
        line-height: 1.4166666667;
        letter-spacing: 0em;
        font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-utterances .utterance-card .card-category:lang(ko) {
        line-height: 1.4166666667;
        letter-spacing: 0em;
        font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-utterances .utterance-card .card-category:lang(zh) {
        letter-spacing: 0em
    }
    .section-utterances .utterance-card .card-category:lang(th) {
        line-height: 1.3333733333;
        letter-spacing: 0em;
        font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-utterances .utterance-card .card-category:lang(zh-CN) {
        font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-utterances .utterance-card .card-category:lang(zh-HK) {
        font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-utterances .utterance-card .card-category:lang(zh-MO) {
        font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-utterances .utterance-card .card-category:lang(zh-TW) {
        font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif
    }
}

.section-utterances .utterance-card .card-copy {
    margin-top: auto
}

@media only screen and (max-width: 1068px) {
    .section-utterances .utterance-card .card-copy {
        font-size: 19px;
        line-height: 1.2105263158;
        font-weight: 600;
        letter-spacing: .012em;
        font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-utterances .utterance-card .card-copy:lang(ja) {
        line-height: 1.2631578947;
        font-family: SF Pro JP, SF Pro Display, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-utterances .utterance-card .card-copy:lang(ko) {
        line-height: 1.3157894737;
        font-family: SF Pro KR, SF Pro Display, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-utterances .utterance-card .card-copy:lang(th) {
        line-height: 1.3684410526;
        font-family: SF Pro TH, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-utterances .utterance-card .card-copy:lang(ar) {
        font-family: SF Pro AR, SF Pro Gulf, SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-utterances .utterance-card .card-copy:lang(zh-CN) {
        font-family: SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-utterances .utterance-card .card-copy:lang(zh-HK) {
        font-family: SF Pro HK, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-utterances .utterance-card .card-copy:lang(zh-MO) {
        font-family: SF Pro HK, SF Pro TC, SF Pro Display, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-utterances .utterance-card .card-copy:lang(zh-TW) {
        font-family: SF Pro TC, SF Pro Display, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif
    }
}

@media only screen and (max-width: 734px) {
    .section-utterances .utterance-card .card-copy {
        font-size: 17px;
        line-height: 1.4705882353;
        font-weight: 400;
        letter-spacing: -0.022em;
        font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
        font-weight: 600;
        font-size: 16px
    }
    .section-utterances .utterance-card .card-copy:lang(ar) {
        letter-spacing: 0em;
        font-family: SF Pro AR, SF Pro Gulf, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-utterances .utterance-card .card-copy:lang(ja) {
        letter-spacing: 0em;
        font-family: SF Pro JP, SF Pro Text, SF Pro Icons, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-utterances .utterance-card .card-copy:lang(ko) {
        line-height: 1.5882352941;
        letter-spacing: 0em;
        font-family: SF Pro KR, SF Pro Text, SF Pro Icons, Apple Gothic, HY Gulim, MalgunGothic, HY Dotum, Lexi Gulim, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-utterances .utterance-card .card-copy:lang(zh) {
        letter-spacing: 0em
    }
    .section-utterances .utterance-card .card-copy:lang(th) {
        line-height: 1.3529611765;
        letter-spacing: 0em;
        font-family: SF Pro TH, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-utterances .utterance-card .card-copy:lang(zh-CN) {
        font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-utterances .utterance-card .card-copy:lang(zh-HK) {
        font-family: SF Pro HK, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-utterances .utterance-card .card-copy:lang(zh-MO) {
        font-family: SF Pro HK, SF Pro TC, SF Pro Text, SF Pro Icons, PingFang HK, Helvetica Neue, Helvetica, Arial, sans-serif
    }
    .section-utterances .utterance-card .card-copy:lang(zh-TW) {
        font-family: SF Pro TC, SF Pro Text, SF Pro Icons, PingFang TC, Helvetica Neue, Helvetica, Arial, sans-serif
    }
}

.utterance-marquee {
    width: 100%;
    overflow: hidden;
    position: relative;
    transition: transform .6s ease-out, opacity .6s
}

.utterance-marquee .transform-wrapper {
    display: flex
}

.utterance-marquee .hide {
    display: none
}

.utterance-marquee .marquee-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-shrink: 0
}

.utterance-marquee .static {
    display: grid;
    grid-template-columns: repeat(auto-fit, calc(var(--card-width) + var(--card-gap)));
    justify-content: center;
    max-width: 1640px;
    margin-left: auto;
    margin-right: auto
}

.overview-car-carplay {
    display: block;
    width: var(--p-width);
    height: var(--p-height);
    --p-width: 1440px;
    --p-height: 684px
}

@media only screen and (min-width: 1441px)and (min-width:1441px) {
    .overview-car-carplay {
        --p-width: 3008px;
        --p-height: 1543px
    }
}

@media only screen and (max-width: 1068px)and (max-width:1068px) {
    .overview-car-carplay {
        --p-width: 1068px;
        --p-height: 508px
    }
}

@media only screen and (max-width: 734px)and (max-width:734px) {
    .overview-car-carplay {
        --p-width: 300px;
        --p-height: 217px
    }
}

.overview-car-carplay-mask {
    display: block;
    width: var(--p-width);
    height: var(--p-height);
    --p-width: 1440px;
    --p-height: 684px
}

@media only screen and (min-width: 1441px)and (min-width:1441px) {
    .overview-car-carplay-mask {
        --p-width: 3008px;
        --p-height: 1543px
    }
}

@media only screen and (max-width: 1068px)and (max-width:1068px) {
    .overview-car-carplay-mask {
        --p-width: 1068px;
        --p-height: 508px
    }
}

@media only screen and (max-width: 734px)and (max-width:734px) {
    .overview-car-carplay-mask {
        --p-width: 300px;
        --p-height: 217px
    }
}

.overview-car-mic {
    display: block;
    width: var(--p-width);
    height: var(--p-height);
    --p-width: 46px;
    --p-height: 46px
}

@media only screen and (max-width: 1068px)and (max-width:1068px) {
    .overview-car-mic {
        --p-width: 33px;
        --p-height: 33px
    }
}

.overview-car-quote-dark-bg {
    display: block;
    width: var(--p-width);
    height: var(--p-height);
    --p-width: 47px;
    --p-height: 44px
}

@media only screen and (max-width: 1068px)and (max-width:1068px) {
    .overview-car-quote-dark-bg {
        --p-width: 36px;
        --p-height: 34px
    }
}

@media only screen and (max-width: 734px)and (max-width:734px) {
    .overview-car-quote-dark-bg {
        --p-width: 36px;
        --p-height: 34px
    }
}

.overview-car-quote-light-bg {
    display: block;
    width: var(--p-width);
    height: var(--p-height);
    --p-width: 47px;
    --p-height: 44px
}

@media only screen and (max-width: 1068px)and (max-width:1068px) {
    .overview-car-quote-light-bg {
        --p-width: 36px;
        --p-height: 34px
    }
}

@media only screen and (max-width: 734px)and (max-width:734px) {
    .overview-car-quote-light-bg {
        --p-width: 36px;
        --p-height: 34px
    }
}

.overview-car-tile-1 {
    display: block;
    width: var(--p-width);
    height: var(--p-height);
    --p-width: 442px;
    --p-height: 473px
}

@media only screen and (max-width: 1068px)and (max-width:1068px) {
    .overview-car-tile-1 {
        --p-width: 310px;
        --p-height: 312px
    }
}

@media only screen and (max-width: 734px)and (max-width:734px) {
    .overview-car-tile-1 {
        --p-width: 249px;
        --p-height: 258px
    }
}

.overview-car-tile-2 {
    display: block;
    width: var(--p-width);
    height: var(--p-height);
    --p-width: 424px;
    --p-height: 84px
}

@media only screen and (max-width: 1068px)and (max-width:1068px) {
    .overview-car-tile-2 {
        --p-width: 306px;
        --p-height: 61px
    }
}

@media only screen and (max-width: 734px)and (max-width:734px) {
    .overview-car-tile-2 {
        --p-width: 251px;
        --p-height: 51px
    }
}

.overview-go-airpods {
    display: block;
    width: var(--p-width);
    height: var(--p-height);
    --p-width: 327px;
    --p-height: 335px
}

@media only screen and (max-width: 1068px)and (max-width:1068px) {
    .overview-go-airpods {
        --p-width: 241px;
        --p-height: 248px
    }
}

@media only screen and (max-width: 734px)and (max-width:734px) {
    .overview-go-airpods {
        --p-width: 115px;
        --p-height: 117px
    }
}

.overview-go-iphone {
    display: block;
    width: var(--p-width);
    height: var(--p-height);
    --p-width: 440px;
    --p-height: 1243px
}

@media only screen and (max-width: 1068px)and (max-width:1068px) {
    .overview-go-iphone {
        --p-width: 292px;
        --p-height: 824px
    }
}

@media only screen and (max-width: 734px)and (max-width:734px) {
    .overview-go-iphone {
        --p-width: 207px;
        --p-height: 209px
    }
}

.overview-go-quote-dark-bg {
    display: block;
    width: var(--p-width);
    height: var(--p-height);
    --p-width: 47px;
    --p-height: 44px
}

@media only screen and (max-width: 1068px)and (max-width:1068px) {
    .overview-go-quote-dark-bg {
        --p-width: 36px;
        --p-height: 34px
    }
}

@media only screen and (max-width: 734px)and (max-width:734px) {
    .overview-go-quote-dark-bg {
        --p-width: 36px;
        --p-height: 34px
    }
}

.overview-go-quote-light-bg {
    display: block;
    width: var(--p-width);
    height: var(--p-height);
    --p-width: 47px;
    --p-height: 44px
}

@media only screen and (max-width: 1068px)and (max-width:1068px) {
    .overview-go-quote-light-bg {
        --p-width: 36px;
        --p-height: 34px
    }
}

@media only screen and (max-width: 734px)and (max-width:734px) {
    .overview-go-quote-light-bg {
        --p-width: 36px;
        --p-height: 34px
    }
}

.overview-go-tile-1 {
    display: block;
    width: var(--p-width);
    height: var(--p-height);
    --p-width: 435px;
    --p-height: 219px
}

@media only screen and (max-width: 1068px)and (max-width:1068px) {
    .overview-go-tile-1 {
        --p-width: 303px;
        --p-height: 148px
    }
}

@media only screen and (max-width: 734px)and (max-width:734px) {
    .overview-go-tile-1 {
        --p-width: 250px;
        --p-height: 127px
    }
}

.overview-go-tile-2 {
    display: block;
    width: var(--p-width);
    height: var(--p-height);
    --p-width: 442px;
    --p-height: 473px
}

@media only screen and (max-width: 1068px)and (max-width:1068px) {
    .overview-go-tile-2 {
        --p-width: 310px;
        --p-height: 312px
    }
}

@media only screen and (max-width: 734px)and (max-width:734px) {
    .overview-go-tile-2 {
        --p-width: 249px;
        --p-height: 228px
    }
}

.overview-hero-airpods {
    display: block;
    width: var(--p-width);
    height: var(--p-height);
    --p-width: 247px;
    --p-height: 287px
}

@media only screen and (max-width: 1068px)and (max-width:1068px) {
    .overview-hero-airpods {
        --p-width: 181px;
        --p-height: 197px
    }
}

@media only screen and (max-width: 734px)and (max-width:734px) {
    .overview-hero-airpods {
        --p-width: 125px;
        --p-height: 136px
    }
}

.overview-hero-r-b {
    display: block;
    width: var(--p-width);
    height: var(--p-height);
    --p-width: 636px;
    --p-height: 636px
}

@media only screen and (max-width: 1068px)and (max-width:1068px) {
    .overview-hero-r-b {
        --p-width: 342px;
        --p-height: 438px
    }
}

@media only screen and (max-width: 734px)and (max-width:734px) {
    .overview-hero-r-b {
        --p-width: 325px;
        --p-height: 325px
    }
}

.overview-hero-c-b {
    display: block;
    width: var(--p-width);
    height: var(--p-height);
    --p-width: 545px;
    --p-height: 300px;
}

.overview-hero-c-b img {
    position: absolute;
    top: -20px;
    left: -130px;
}

@media only screen and (max-width: 1068px)and (max-width:1068px) {
    .overview-hero-c-b {
        --p-width: 388px;
        --p-height: 388px
    }
    .overview-hero-c-b img {
        position: absolute;
        left: 50%;
        margin: 0 -200px;
        bottom: -140px;
    }
}

@media only screen and (max-width: 734px)and (max-width:734px) {
    .overview-hero-c-b {
        --p-width: 279px;
        --p-height: 279px
    }
}

.overview-hero-homepod-mini-mask {
    display: block;
    width: var(--p-width);
    height: var(--p-height);
    --p-width: 545px;
    --p-height: 545px
}

@media only screen and (max-width: 1068px)and (max-width:1068px) {
    .overview-hero-homepod-mini-mask {
        --p-width: 388px;
        --p-height: 388px
    }
}

@media only screen and (max-width: 734px)and (max-width:734px) {
    .overview-hero-homepod-mini-mask {
        --p-width: 279px;
        --p-height: 279px
    }
}

.overview-hero-l {
    display: block;
    width: var(--p-width);
    height: var(--p-height);
    --p-width: 735px;
    --p-height: 586px;
}

.overview-hero-l img {
    position: absolute;
    /* top: 50%; */
    right: 170px;
}

@media only screen and (max-width: 1068px)and (max-width:1068px) {
    .overview-hero-l {
        --p-width: 315px;
        --p-height: 658px
    }
    .overview-hero-l img {
        position: absolute;
        top: 0;
        right: 50px;
    }
}

@media only screen and (max-width: 734px)and (max-width:734px) {
    .overview-hero-l {
        --p-width: 268px;
        --p-height: 559px
    }
}

.overview-hero-c-t {
    display: block;
    width: var(--p-width);
    height: var(--p-height);
    --p-width: 414px;
    --p-height: 245px;
}

.overview-hero-c-t img {
    position: absolute;
    bottom: 80px;
    right: 0;
}

@media only screen and (max-width: 1068px)and (max-width:1068px) {
    .overview-hero-c-t {
        --p-width: 284px;
        --p-height: 300px;
    }
    .overview-hero-c-t img {
        bottom: 110px;
        right: -110px;
    }
}

@media only screen and (max-width: 734px)and (max-width:734px) {
    .overview-hero-c-t {
        --p-width: 209px;
        --p-height: 148px
    }
}

.overview-hero-siri,
.overview-hero-r-t {
    display: block;
    width: var(--p-width);
    height: var(--p-height)
}

.overview-hero-r-t {
    --p-width: 342px;
    --p-height: 342px
}

@media only screen and (max-width: 1068px)and (max-width:1068px) {
    .overview-hero-r-t {
        --p-width: 243px;
        --p-height: 243px
    }
}

@media only screen and (max-width: 734px)and (max-width:734px) {
    .overview-hero-r-t {
        --p-width: 176px;
        --p-height: 176px
    }
}

.overview-kitchen-ipad {
    display: block;
    width: var(--p-width);
    height: var(--p-height);
    --p-width: 986px;
    --p-height: 544px
}

@media only screen and (max-width: 1068px)and (max-width:1068px) {
    .overview-kitchen-ipad {
        --p-width: 699px;
        --p-height: 386px
    }
}

@media only screen and (max-width: 734px)and (max-width:734px) {
    .overview-kitchen-ipad {
        --p-width: 453px;
        --p-height: 250px
    }
}

.overview-kitchen-quote-dark-bg {
    display: block;
    width: var(--p-width);
    height: var(--p-height);
    --p-width: 47px;
    --p-height: 44px
}

@media only screen and (max-width: 1068px)and (max-width:1068px) {
    .overview-kitchen-quote-dark-bg {
        --p-width: 36px;
        --p-height: 34px
    }
}

@media only screen and (max-width: 734px)and (max-width:734px) {
    .overview-kitchen-quote-dark-bg {
        --p-width: 36px;
        --p-height: 34px
    }
}

.overview-kitchen-quote-light-bg {
    display: block;
    width: var(--p-width);
    height: var(--p-height);
    --p-width: 47px;
    --p-height: 44px
}

@media only screen and (max-width: 1068px)and (max-width:1068px) {
    .overview-kitchen-quote-light-bg {
        --p-width: 36px;
        --p-height: 34px
    }
}

@media only screen and (max-width: 734px)and (max-width:734px) {
    .overview-kitchen-quote-light-bg {
        --p-width: 36px;
        --p-height: 34px
    }
}

.overview-kitchen-tile-1 {
    display: block;
    width: var(--p-width);
    height: var(--p-height);
    --p-width: 424px;
    --p-height: 172px
}

@media only screen and (max-width: 1068px)and (max-width:1068px) {
    .overview-kitchen-tile-1 {
        --p-width: 307px;
        --p-height: 123px
    }
}

@media only screen and (max-width: 734px)and (max-width:734px) {
    .overview-kitchen-tile-1 {
        --p-width: 247px;
        --p-height: 100px
    }
}

.overview-kitchen-tile-2 {
    display: block;
    width: var(--p-width);
    height: var(--p-height);
    --p-width: 525px;
    --p-height: 361px
}

@media only screen and (max-width: 1068px)and (max-width:1068px) {
    .overview-kitchen-tile-2 {
        --p-width: 366px;
        --p-height: 259px
    }
}

@media only screen and (max-width: 734px)and (max-width:734px) {
    .overview-kitchen-tile-2 {
        --p-width: 300px;
        --p-height: 207px
    }
}

.overview-lock {
    display: block;
    width: var(--p-width);
    height: var(--p-height);
    --p-width: 960px;
    --p-height: 504px
}

@media only screen and (max-width: 734px)and (max-width:734px) {
    .overview-lock {
        --p-width: 396px;
        --p-height: 400px
    }
}

.overview-quote-black {
    display: block;
    width: var(--p-width);
    height: var(--p-height);
    --p-width: 47px;
    --p-height: 45px
}

@media only screen and (max-width: 1068px)and (max-width:1068px) {
    .overview-quote-black {
        --p-width: 36px;
        --p-height: 34px
    }
}

@media only screen and (max-width: 734px)and (max-width:734px) {
    .overview-quote-black {
        --p-width: 28px;
        --p-height: 26px
    }
}

.overview-quote-white {
    display: block;
    width: var(--p-width);
    height: var(--p-height);
    --p-width: 47px;
    --p-height: 45px
}

@media only screen and (max-width: 1068px)and (max-width:1068px) {
    .overview-quote-white {
        --p-width: 36px;
        --p-height: 34px
    }
}

@media only screen and (max-width: 734px)and (max-width:734px) {
    .overview-quote-white {
        --p-width: 28px;
        --p-height: 26px
    }
}

.overview-routers-tile-1 {
    display: block;
    width: var(--p-width);
    height: var(--p-height);
    --p-width: 177px;
    --p-height: 177px
}

@media only screen and (max-width: 1068px)and (max-width:1068px) {
    .overview-routers-tile-1 {
        --p-width: 132px;
        --p-height: 132px
    }
}

@media only screen and (max-width: 734px)and (max-width:734px) {
    .overview-routers-tile-1 {
        --p-width: 110px;
        --p-height: 110px
    }
}

.overview-routers-tile-2 {
    display: block;
    width: var(--p-width);
    height: var(--p-height);
    --p-width: 317px;
    --p-height: 293px
}

@media only screen and (max-width: 1068px)and (max-width:1068px) {
    .overview-routers-tile-2 {
        --p-width: 235px;
        --p-height: 213px
    }
}

@media only screen and (max-width: 734px)and (max-width:734px) {
    .overview-routers-tile-2 {
        --p-width: 248px;
        --p-height: 182px
    }
}

.overview-routers-tile-3 {
    display: block;
    width: var(--p-width);
    height: var(--p-height);
    --p-width: 210px;
    --p-height: 231px
}

@media only screen and (max-width: 1068px)and (max-width:1068px) {
    .overview-routers-tile-3 {
        --p-width: 152px;
        --p-height: 167px
    }
}

@media only screen and (max-width: 734px)and (max-width:734px) {
    .overview-routers-tile-3 {
        --p-width: 125px;
        --p-height: 137px
    }
}

.overview-siri-lock {
    --p-width: 62px;
    --p-height: 87px
}

.overview-siri-lock,
.overview-winding-down-homepod {
    display: block;
    width: var(--p-width);
    height: var(--p-height)
}

.overview-winding-down-homepod {
    --p-width: 575px;
    --p-height: 573px
}

@media only screen and (max-width: 1068px)and (max-width:1068px) {
    .overview-winding-down-homepod {
        --p-width: 427px;
        --p-height: 426px
    }
}

@media only screen and (max-width: 734px)and (max-width:734px) {
    .overview-winding-down-homepod {
        --p-width: 300px;
        --p-height: 196px
    }
}

.overview-winding-down-quote-dark-bg {
    display: block;
    width: var(--p-width);
    height: var(--p-height);
    --p-width: 47px;
    --p-height: 44px
}

@media only screen and (max-width: 1068px)and (max-width:1068px) {
    .overview-winding-down-quote-dark-bg {
        --p-width: 36px;
        --p-height: 34px
    }
}

@media only screen and (max-width: 734px)and (max-width:734px) {
    .overview-winding-down-quote-dark-bg {
        --p-width: 36px;
        --p-height: 34px
    }
}

.overview-winding-down-quote-light-bg {
    display: block;
    width: var(--p-width);
    height: var(--p-height);
    --p-width: 47px;
    --p-height: 44px
}

@media only screen and (max-width: 1068px)and (max-width:1068px) {
    .overview-winding-down-quote-light-bg {
        --p-width: 36px;
        --p-height: 34px
    }
}

@media only screen and (max-width: 734px)and (max-width:734px) {
    .overview-winding-down-quote-light-bg {
        --p-width: 36px;
        --p-height: 34px
    }
}

.overview-winding-down-tile-1 {
    display: block;
    width: var(--p-width);
    height: var(--p-height);
    --p-width: 442px;
    --p-height: 473px
}

@media only screen and (max-width: 1068px)and (max-width:1068px) {
    .overview-winding-down-tile-1 {
        --p-width: 310px;
        --p-height: 312px
    }
}

@media only screen and (max-width: 734px)and (max-width:734px) {
    .overview-winding-down-tile-1 {
        --p-width: 248px;
        --p-height: 228px
    }
}

.overview-winding-down-tile-2 {
    display: block;
    width: var(--p-width);
    height: var(--p-height);
    --p-width: 422px;
    --p-height: 113px
}

@media only screen and (max-width: 1068px)and (max-width:1068px) {
    .overview-winding-down-tile-2 {
        --p-width: 307px;
        --p-height: 83px
    }
}

@media only screen and (max-width: 734px)and (max-width:734px) {
    .overview-winding-down-tile-2 {
        --p-width: 248px;
        --p-height: 67px
    }
}

.overview-winding-down-weather {
    display: block;
    width: var(--p-width);
    height: var(--p-height);
    --p-width: 639px;
    --p-height: 641px
}

@media only screen and (max-width: 1068px)and (max-width:1068px) {
    .overview-winding-down-weather {
        --p-width: 421px;
        --p-height: 422px
    }
}

@media only screen and (max-width: 734px)and (max-width:734px) {
    .overview-winding-down-weather {
        --p-width: 252px;
        --p-height: 252px
    }
}

.overview-workingout-tile1 {
    display: block;
    width: var(--p-width);
    height: var(--p-height);
    --p-width: 237px;
    --p-height: 286px
}

.overview-workout-quote-light-bg {
    display: block;
    width: var(--p-width);
    height: var(--p-height);
    --p-width: 47px;
    --p-height: 44px
}

@media only screen and (max-width: 1068px)and (max-width:1068px) {
    .overview-workout-quote-light-bg {
        --p-width: 36px;
        --p-height: 34px
    }
}

@media only screen and (max-width: 734px)and (max-width:734px) {
    .overview-workout-quote-light-bg {
        --p-width: 35px;
        --p-height: 34px
    }
}

.overview-workout-tile-1 {
    display: block;
    width: var(--p-width);
    height: var(--p-height);
    --p-width: 327px;
    --p-height: 335px
}

@media only screen and (max-width: 1068px)and (max-width:1068px) {
    .overview-workout-tile-1 {
        --p-width: 241px;
        --p-height: 248px
    }
}

@media only screen and (max-width: 734px)and (max-width:734px) {
    .overview-workout-tile-1 {
        --p-width: 190px;
        --p-height: 206px
    }
}

.overview-workout-tile-2 {
    display: block;
    width: var(--p-width);
    height: var(--p-height);
    --p-width: 304px;
    --p-height: 304px
}

@media only screen and (max-width: 1068px)and (max-width:1068px) {
    .overview-workout-tile-2 {
        --p-width: 213px;
        --p-height: 214px
    }
}

@media only screen and (max-width: 734px)and (max-width:734px) {
    .overview-workout-tile-2 {
        --p-width: 149px;
        --p-height: 156px
    }
}

.overview-workout-watch {
    display: block;
    width: var(--p-width);
    height: var(--p-height);
    --p-width: 498px;
    --p-height: 589px
}

@media only screen and (max-width: 1068px)and (max-width:1068px) {
    .overview-workout-watch {
        --p-width: 352px;
        --p-height: 415px
    }
}

@media only screen and (max-width: 734px)and (max-width:734px) {
    .overview-workout-watch {
        --p-width: 201px;
        --p-height: 204px
    }
}