html {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}

abbr,blockquote,body,button,dd,dl,dt,fieldset,figure,form,h1,h2,h3,h4,h5,h6,hgroup,input,legend,li,ol,p,pre,ul {
    margin: 0;
    padding: 0
}

address,caption,code,figcaption,pre,th {
    font-size: 1em;
    font-weight: 400;
    font-style: normal
}

fieldset,iframe {
    border: 0
}

caption,th {
    text-align: left
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

details,main,summary {
    display: block
}

audio,canvas,progress,video {
    vertical-align: initial
}

button {
    background: none;
    border: 0;
    box-sizing: initial;
    color: inherit;
    cursor: pointer;
    font: inherit;
    line-height: inherit;
    overflow: visible;
    vertical-align: inherit
}

button:disabled {
    cursor: default
}

:focus {
    outline: 2px solid #0071e3;
    outline-offset: 0px
}

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

::-moz-focus-inner {
    border: 0;
    padding: 0
}

html {
    font-family: SF Pro Text,SF Pro Icons,Helvetica Neue,Helvetica,Arial,sans-serif;
    font-size: 106.25%;
    quotes: "“" "”";
    --sk-link-disabled-opacity: 0.42
}

[lang]:lang(ar) {
    font-family: SF Pro AR,SF Pro AR Text,SF Pro Text,SF Pro Gulf,SF Pro Icons,Helvetica Neue,Helvetica,Arial,sans-serif
}

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

[lang]:lang(ko) {
    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
}

[lang]:lang(th) {
    font-family: SF Pro TH,SF Pro Text,SF Pro Icons,Helvetica Neue,Helvetica,Arial,sans-serif
}

[lang]:lang(zh-CN) {
    font-family: SF Pro SC,SF Pro Text,SF Pro Icons,PingFang SC,Helvetica Neue,Helvetica,Arial,sans-serif
}

[lang]:lang(zh-HK) {
    font-family: SF Pro HK,SF Pro Text,SF Pro Icons,PingFang HK,Helvetica Neue,Helvetica,Arial,sans-serif
}

[lang]: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
}

[lang]:lang(zh-TW) {
    font-family: SF Pro TC,SF Pro Text,SF Pro Icons,PingFang TC,Helvetica Neue,Helvetica,Arial,sans-serif
}

:lang(cs),:lang(de) {
    quotes: "„" "“"
}

:lang(de-CH),:lang(de-LI) {
    quotes: "«" "»"
}

:lang(fr) {
    quotes: "« " " »"
}

:lang(es-ES),:lang(fr-CH) {
    quotes: "«" "»"
}

:lang(hu) {
    quotes: "„" "“"
}

:lang(ja-JP) {
    quotes: "「" "」"
}

:lang(no-NO) {
    quotes: "«" "»"
}

:lang(lt),:lang(pl) {
    quotes: "„" "“"
}

:lang(ru) {
    quotes: "« " " »"
}

:lang(zh) {
    quotes: "「" "」"
}

:lang(zh-CN) {
    quotes: "“" "”"
}

body {
    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;
    background-color: #fff;
    color: #1d1d1f;
    font-style: normal
}

body:lang(ar) {
    letter-spacing: 0em;
    font-family: SF Pro AR,SF Pro AR Text,SF Pro Text,SF Pro Gulf,SF Pro Icons,Helvetica Neue,Helvetica,Arial,sans-serif
}

body: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
}

body:lang(ko) {
    line-height: 1.5882352941;
    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
}

body:lang(ko),body:lang(th),body:lang(zh) {
    letter-spacing: 0em
}

body:lang(th) {
    line-height: 1.3529611765;
    font-family: SF Pro TH,SF Pro Text,SF Pro Icons,Helvetica Neue,Helvetica,Arial,sans-serif
}

body:lang(zh-CN) {
    font-family: SF Pro SC,SF Pro Text,SF Pro Icons,PingFang SC,Helvetica Neue,Helvetica,Arial,sans-serif
}

body:lang(zh-HK) {
    font-family: SF Pro HK,SF Pro Text,SF Pro Icons,PingFang HK,Helvetica Neue,Helvetica,Arial,sans-serif
}

body: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
}

body:lang(zh-TW) {
    font-family: SF Pro TC,SF Pro Text,SF Pro Icons,PingFang TC,Helvetica Neue,Helvetica,Arial,sans-serif
}

body,button,input,select,textarea {
    font-synthesis: none;
    -moz-font-feature-settings: "kern";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    direction: ltr;
    text-align: left
}

h1,h2,h3,h4,h5,h6 {
    font-weight: 600;
    color: #1d1d1f
}

h1 img,h2 img,h3 img,h4 img,h5 img,h6 img {
    display: block;
    margin: 0
}

h1+*,h2+*,h3+*,h4+*,h5+*,h6+* {
    margin-top: .8em
}

h1+h1,h1+h2,h1+h3,h1+h4,h1+h5,h1+h6,h2+h1,h2+h2,h2+h3,h2+h4,h2+h5,h2+h6,h3+h1,h3+h2,h3+h3,h3+h4,h3+h5,h3+h6,h4+h1,h4+h2,h4+h3,h4+h4,h4+h5,h4+h6,h5+h1,h5+h2,h5+h3,h5+h4,h5+h5,h5+h6,h6+h1,h6+h2,h6+h3,h6+h4,h6+h5,h6+h6 {
    margin-top: .4em
}

ol+h1,ol+h2,ol+h3,ol+h4,ol+h5,ol+h6,p+h1,p+h2,p+h3,p+h4,p+h5,p+h6,ul+h1,ul+h2,ul+h3,ul+h4,ul+h5,ul+h6 {
    margin-top: 1.6em
}

ol+*,p+*,ul+* {
    margin-top: .8em
}

ol,ul {
    margin-left: 1.1764705882em
}

ol ol,ol ul,ul ol,ul ul {
    margin-top: 0;
    margin-bottom: 0
}

nav ol,nav ul {
    margin: 0;
    list-style: none
}

li li {
    font-size: 1em
}

.link,a {
    color: #06c;
    letter-spacing: inherit
}

.link:link,.link:visited,a:link,a:visited {
    text-decoration: none
}

.link:hover,a:hover {
    text-decoration: underline
}

.link:active,a:active {
    text-decoration: none
}

.link.disabled,.link :disabled,a.disabled,a :disabled {
    opacity: var(--sk-link-disabled-opacity)
}

b,strong {
    font-weight: 600
}

cite,dfn,em,i {
    font-style: italic
}

sub,sup {
    position: relative;
    font-size: .6em;
    vertical-align: initial
}

sup {
    top: -0.5em
}

sub {
    bottom: -0.25em
}

abbr {
    border: 0
}

:lang(ja),:lang(ko),:lang(th),:lang(zh) {
    font-style: normal
}

:lang(ko) {
    word-break: keep-all
}

.icon::after,.icon::before,.more::after,.more::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
}

.icon::before,.more::before {
    display: none
}

.icon-after::after,.more::after {
    padding-left: 0.3em;
    top: 0
}

.more::after,.more::before {
    content: ""
}

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

a.icon-wrapper {
    text-decoration: none
}

a.icon-wrapper:hover .icon-copy {
    text-decoration: underline
}

body {
    min-width: 320px
}

.button {
    cursor: pointer;
    display: inline-block;
    text-align: center;
    white-space: nowrap;
    font-size: 17px;
    line-height: 1.1764805882;
    font-weight: 400;
    letter-spacing: -0.022em;
    font-family: SF Pro Text,SF Pro Icons,Helvetica Neue,Helvetica,Arial,sans-serif;
    min-width: 30px;
    padding: 7px 15px;
    border-radius: 980px;
    background: #0071e3;
    color: #fff;
    border: 1px solid transparent;
    --sk-button-margin-horizontal: 14px;
    --sk-button-margin-vertical: 14px
}

.button:hover {
    text-decoration: none
}

.button:active {
    outline: none
}

.button.disabled,.button:disabled {
    cursor: default;
    pointer-events: none
}

.button:lang(ar) {
    letter-spacing: 0em;
    font-family: SF Pro AR,SF Pro AR Text,SF Pro Text,SF Pro Gulf,SF Pro Icons,Helvetica Neue,Helvetica,Arial,sans-serif
}

.button: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
}

.button:lang(ko) {
    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
}

.button:lang(ko),.button:lang(zh) {
    letter-spacing: 0em
}

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

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

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

.button: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
}

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

.button:focus,.button:hover {
    background: #0077ed;
    color: #fff;
    border-color: transparent
}

.button:focus {
    box-shadow: 0 0 0 3px white,0 0 0 5px #0071E3;
    outline: none
}

.button:focus[data-focus-method=mouse]:not(input):not(textarea):not(select),.button:focus[data-focus-method=touch]:not(input):not(textarea):not(select) {
    box-shadow: none
}

.button:active {
    background: #006edb;
    color: #fff;
    border-color: transparent
}

.button.disabled,.button:disabled {
    background: #0071e3;
    color: #fff;
    opacity: var(--sk-link-disabled-opacity)
}

.button-neutral {
    background: #1d1d1f;
    color: #fff;
    border-color: transparent
}

.button-neutral:focus,.button-neutral:hover {
    background: #272729;
    color: #fff;
    border-color: transparent
}

.button-neutral:focus {
    box-shadow: 0 0 0 3px white,0 0 0 5px #0071E3;
    outline: none
}

.button-neutral:focus[data-focus-method=mouse]:not(input):not(textarea):not(select),.button-neutral:focus[data-focus-method=touch]:not(input):not(textarea):not(select) {
    box-shadow: none
}

.button-neutral:active {
    background: #18181a;
    color: #fff;
    border-color: transparent
}

.button-neutral.disabled,.button-neutral:disabled {
    background: #1d1d1f;
    color: #fff;
    opacity: var(--sk-link-disabled-opacity)
}

.button-tertiary-neutral {
    background: transparent;
    color: #1d1d1f;
    border-color: #1d1d1f
}

.button-tertiary-neutral:focus,.button-tertiary-neutral:hover {
    background: #272729;
    color: #fff;
    border-color: transparent
}

.button-tertiary-neutral:focus {
    box-shadow: 0 0 0 3px white,0 0 0 5px #0071E3;
    outline: none
}

.button-tertiary-neutral:focus[data-focus-method=mouse]:not(input):not(textarea):not(select),.button-tertiary-neutral:focus[data-focus-method=touch]:not(input):not(textarea):not(select) {
    box-shadow: none
}

.button-tertiary-neutral:active {
    background: #18181a;
    color: #fff;
    border-color: transparent
}

.button-tertiary-neutral.disabled,.button-tertiary-neutral:disabled {
    background: transparent;
    color: #1d1d1f;
    opacity: var(--sk-link-disabled-opacity)
}

.typography-hero-tagline {
    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
}

.typography-hero-tagline: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
}

.typography-hero-tagline:lang(th) {
    line-height: 1.3928571429;
    font-family: SF Pro TH,SF Pro Display,SF Pro Icons,Helvetica Neue,Helvetica,Arial,sans-serif
}

.typography-hero-tagline:lang(zh) {
    line-height: 1.25
}

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

.typography-hero-tagline: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
}

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

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

.typography-hero-tagline: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
}

.typography-hero-tagline: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) {
    .typography-hero-tagline {
        font-size:24px;
        line-height: 1.1666666667;
        font-weight: 600;
        letter-spacing: .009em;
        font-family: SF Pro Display,SF Pro Icons,Helvetica Neue,Helvetica,Arial,sans-serif
    }

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

    .typography-hero-tagline:lang(ko) {
        line-height: 1.2916666667;
        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
    }

    .typography-hero-tagline:lang(th) {
        line-height: 1.375;
        font-family: SF Pro TH,SF Pro Display,SF Pro Icons,Helvetica Neue,Helvetica,Arial,sans-serif
    }

    .typography-hero-tagline:lang(zh) {
        line-height: 1.2916666667
    }

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

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

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

    .typography-hero-tagline: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
    }

    .typography-hero-tagline: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) {
    .typography-hero-tagline {
        font-size:17px;
        line-height: 1.2353641176;
        font-weight: 600;
        letter-spacing: -0.022em;
        font-family: SF Pro Text,SF Pro Icons,Helvetica Neue,Helvetica,Arial,sans-serif
    }

    .typography-hero-tagline:lang(ar) {
        letter-spacing: 0em;
        font-family: SF Pro AR,SF Pro AR Text,SF Pro Text,SF Pro Gulf,SF Pro Icons,Helvetica Neue,Helvetica,Arial,sans-serif
    }

    .typography-hero-tagline: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
    }

    .typography-hero-tagline:lang(ko) {
        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
    }

    .typography-hero-tagline:lang(ko),.typography-hero-tagline:lang(th),.typography-hero-tagline:lang(zh) {
        line-height: 1.3529611765;
        letter-spacing: 0em
    }

    .typography-hero-tagline:lang(th) {
        font-family: SF Pro TH,SF Pro Text,SF Pro Icons,Helvetica Neue,Helvetica,Arial,sans-serif
    }

    .typography-hero-tagline:lang(zh-CN) {
        font-family: SF Pro SC,SF Pro Text,SF Pro Icons,PingFang SC,Helvetica Neue,Helvetica,Arial,sans-serif
    }

    .typography-hero-tagline:lang(zh-HK) {
        font-family: SF Pro HK,SF Pro Text,SF Pro Icons,PingFang HK,Helvetica Neue,Helvetica,Arial,sans-serif
    }

    .typography-hero-tagline: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
    }

    .typography-hero-tagline:lang(zh-TW) {
        font-family: SF Pro TC,SF Pro Text,SF Pro Icons,PingFang TC,Helvetica Neue,Helvetica,Arial,sans-serif
    }
}

[class*=typography-eyebrow] {
    display: block;
    margin-bottom: .4em
}

[class*=typography-eyebrow]+* {
    margin-top: 0
}

:root {
    --r-viewport-height: 0;
    --responsive-video-width: 92%
}

@media only screen and (max-width: 1068px) {
    :root {
        --responsive-video-width:90%
    }
}

@media only screen and (max-width: 734px) {
    :root {
        --responsive-video-width:100%
    }
}

body {
    position: relative
}

:root {
    --button-padding-t: 16px;
    --button-padding-r: 37px;
    --button-padding-b: 17px;
    --button-padding-l: 27px;
    --button-transition-duration: 0.3s
}

@media only screen and (max-width: 1068px) {
    :root {
        --button-padding-t:11px;
        --button-padding-r: 18px;
        --button-padding-b: 11px;
        --button-padding-l: 15px
    }
}

:root {
    --viewport-content: 980px;
    --drawer-toggle-margin-bottom: 180px
}

@media only screen and (max-width: 1068px) {
    :root {
        --viewport-content:692px;
        --drawer-toggle-margin-bottom: 120px
    }
}

@media only screen and (max-width: 734px) {
    :root {
        --viewport-content:calc(min(87.5%, 390px));
        --drawer-toggle-margin-bottom: 60px
    }
}

@media only screen and (inverted-colors) {

    body .section-design .highlights .copy-container,body .section-design .image-sequence,body .section-design .subsection .headline-lockup,body .section-design .subsection .video-wrapper::after,body .section-design .video-container .inline-media-ui,body .section-design .video-container video,body .section-experiences .highlights .copy-container,body .section-experiences .image-sequence,body .section-experiences .subsection .headline-lockup,body .section-experiences .subsection .video-wrapper::after,body .section-experiences .video-container .inline-media-ui,body .section-experiences .video-container video,body .section-foundation,body .section-foundation picture img,body .section-hero,body .section-hero picture img,body .section-intro .highlights .copy-container,body .section-intro .image-sequence,body .section-intro .subsection .headline-lockup,body .section-intro .subsection .video-wrapper::after,body .section-intro .video-container .inline-media-ui,body .section-intro .video-container video,body .section-routers .highlights .copy-container,body .section-routers .image-sequence,body .section-routers .subsection .headline-lockup,body .section-routers .subsection .video-wrapper::after,body .section-routers .video-container .inline-media-ui,body .section-routers .video-container video,body .section-technology,body .section-technology picture img,body .section-values .highlights .copy-container,body .section-values .image-sequence,body .section-values .subsection .headline-lockup,body .section-values .subsection .video-wrapper::after,body .section-values .video-container .inline-media-ui,body .section-values .video-container video,body .section-visionos .highlights .copy-container,body .section-visionos .image-sequence,body .section-visionos .subsection .headline-lockup,body .section-visionos .subsection .video-wrapper::after,body .section-visionos .video-container .inline-media-ui,body .section-visionos .video-container video {
        filter: invert(1)
    }
}

.section-hero {
    --hero-max-height: 1366px;
    --hero-min-height: 725px;
    --padding-top: calc(var(--r-localnav-height));
    --localnav-globalnav-height-difference: calc(var(--r-localnav-height) - var(--r-globalnav-height));
    --locale-switcher-offset: 0px;
    background-color: #f5f5f7;
    box-sizing: border-box;
    height: 200svh;
    margin-bottom: calc(-100svh - var(--padding-top) + var(--localnav-globalnav-height-difference) + var(--locale-switcher-offset));
    margin-top: calc(var(--padding-top)*-1);
    padding-top: 0;
    position: relative
}

@media only screen and (min-width: 735px)and (max-height:725px) {
    .section-hero {
        margin-bottom:0;
        height: calc(var(--hero-min-height) - var(--r-globalnav-height))
    }
}

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

@media only screen and (max-width: 734px) {
    .section-hero {
        --hero-min-height:560px
    }
}

@media only screen and (max-width: 734px)and (orientation:landscape)and (max-height:560px) {
    .section-hero {
        margin-bottom:0;
        height: calc(var(--hero-min-height) - var(--r-globalnav-height))
    }
}

.section-hero .sticky-container {
    height: calc(100svh - var(--padding-top));
    position: sticky;
    top: var(--padding-top);
    width: 100%;
    z-index: 0
}

@media only screen and (min-width: 735px)and (max-height:725px) {
    .section-hero .sticky-container {
        height:100%;
        position: relative;
        top: 0
    }
}

@media only screen and (max-width: 734px)and (max-height:560px)and (orientation:landscape) {
    .section-hero .sticky-container {
        height:100%;
        position: relative;
        top: 0
    }
}

.section-hero .hero-content {
    background-color: #f5f5f7;
    height: 100%;
    position: relative;
    width: 100%;
    z-index: 1
}

@media only screen and (max-width: 734px) {
    .section-hero .hero-content {
        display:flex;
        flex-wrap: wrap;
        justify-content: center
    }
}

.section-hero .hero-gradient {
    background: linear-gradient(0deg,rgba(255,255,255,0.65),rgba(255,255,255,0.3) 50%,rgba(255,255,255,0));
    bottom: 0;
    height: 45%;
    position: absolute;
    width: 100%
}

@media only screen and (min-width: 1069px)and (max-height:850px) {
    .section-hero .hero-gradient {
        height:75%;
        background: linear-gradient(0deg,rgba(255,255,255,0.85),rgba(255,255,255,0.3) 50%,rgba(255,255,255,0))
    }
}

@media only screen and (max-width: 1068px)and (min-height:726px)and (max-height:959px) {
    .section-hero .hero-gradient {
        height:80%
    }
}

.section-hero .hero-hardware {
    align-items: flex-end;
    bottom: 0;
    display: flex;
    height: 100%;
    justify-content: center;
    overflow-x: hidden;
    width: 100%
}

.section-hero .hero-frame {
    height: 100%;
    position: absolute;
    max-width: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    width: -moz-fit-content;
    width: fit-content
}

.section-hero .hero-img {
    display: block;
    height: 100%;
    position: relative
}

@media only screen and (min-width: 1069px) {
    .section-hero .hero-img {
        bottom:10%;
        height: 110%
    }
}

/* Wordmark for the FLOWCORE rebrand: a single flat image
   (assets/images/flowcore-wordmark.svg — Apple's glyph baked
   together with the "FLOWCORE" text) in place of Apple's
   original background-image logo lockup (.avp-hero-logo, since removed
   as dead CSS — see hero.php's own docblock). Since glyph and text are
   one image now, there's no separate alignment between them to
   maintain — sizing is just the image's own height per breakpoint, with
   width following automatically from its intrinsic aspect ratio (418:106). */
.section-hero .avp-hero-brand {
    display: block;
    height: 100px;
    width: auto;
}

@media only screen and (max-width: 1068px) {
    .section-hero .avp-hero-brand {
        height: 72px;
    }
}

@media only screen and (max-width: 734px) {
    .section-hero .avp-hero-brand {
        height: 52px;
        margin: 0 auto;
    }
}

.section-hero .hero-copy {
    bottom: 0;
    box-sizing: border-box;
    margin: 0 auto;
    padding-left: 0;
    padding-right: 0;
    position: absolute;
    max-width: 1680px;
    left: 50%;
    transform: translateX(-50%);
    width: 87.5%;
    padding-bottom: 58px;
    z-index: 1
}

@media only screen and (max-width: 734px) {
    .section-hero .hero-copy {
        display:flex;
        flex-direction: column;
        flex-wrap: wrap;
        max-width: 400px;
        text-align: center;
        padding-bottom: 38px
    }
}

@media only screen and (max-width: 734px)and (max-height:600px) {
    .section-hero .hero-copy {
        padding-bottom:25px
    }
}

.section-hero .copy-wrap {
    height: -moz-fit-content;
    height: fit-content;
    align-self: flex-end
}

@media only screen and (max-width: 1068px) {
    .section-hero .copy-wrap {
        align-self:center
    }
}

@media only screen and (max-width: 734px) {
    .section-hero .copy-wrap {
        align-self:center;
        margin-bottom: 26px
    }
}

@media only screen and (max-width: 734px)and (max-height:600px) {
    .section-hero .copy-wrap {
        margin-bottom:12px
    }
}

.section-hero .hero-headline {
    position: relative
}

@media only screen and (max-width: 1068px) {
    .section-hero .hero-headline {
        margin-bottom:4px
    }
}

@media only screen and (max-width: 734px) {
    .section-hero .hero-headline {
        margin-bottom:9px
    }
}

.section-hero .lower-wrapper {
    display: flex;
    justify-content: space-between;
    margin-top: 0;
    position: relative;
    padding-top: 0
}

@media only screen and (max-width: 734px) {
    .section-hero .lower-wrapper {
        align-items:center;
        justify-content: center;
        flex-direction: column;
        flex-wrap: wrap;
        padding-top: 0
    }
}

@media only screen and (min-width: 735px) {
    .section-hero .lower-wrapper .copy-wrap {
        padding-right:60px
    }
}

.section-hero .hero-tagline {
    position: relative;
    margin: 0
}

@media only screen and (min-width: 735px)and (max-width:1068px) {
    .section-hero .hero-tagline {
        max-width:435px
    }
}

@media only screen and (max-width: 1068px) {
    .section-hero .hero-tagline {
        align-self:center
    }
}

@media only screen and (max-width: 734px) {
    .section-hero .hero-tagline {
        margin-top:0;
        max-width: 280px
    }
}

/* Second tagline line — lighter italic subline under the bold
   .hero-tagline headline, stepping down with it at each breakpoint. */
.section-hero .avp-hero-subtagline {
    margin: 10px 0 0;
    font-size: 21px;
    line-height: 1.2;
    font-style: italic;
    font-weight: 400;
    color: #1d1d1f;
}

@media only screen and (max-width: 1068px) {
    .section-hero .avp-hero-subtagline {
        font-size: 19px;
    }
}

@media only screen and (max-width: 734px) {
    .section-hero .avp-hero-subtagline {
        margin-top: 6px;
        font-size: 15px;
    }
}

.section-hero .hero-ctas {
    display: flex;
    justify-content: flex-end;
    list-style: none;
    position: relative;
    margin-left: 0
}

.section-hero .hero-ctas .hero-headline {
    padding-bottom: 7px
}

@media only screen and (max-width: 1068px) {
    .section-hero .hero-ctas .hero-headline {
        padding-bottom:0
    }
}

@media only screen and (max-width: 734px) {
    .section-hero .hero-ctas .hero-headline {
        padding-bottom:10px
    }
}

@media only screen and (max-width: 734px) {
    .section-hero .hero-ctas {
        left:0;
        margin: 0;
        position: relative
    }
}

.section-hero .hero-ctas a.icon-wrapper:hover .icon-copy {
    text-decoration: none
}

.section-hero .hero-ctas li a {
    padding: 11px 21px
}

@media only screen and (max-width: 734px) {
    .section-hero .hero-ctas li a {
        font-size:14px
    }
}

.section-hero .hero-ctas li .icon-after {
    display: none
}

.section-hero .hero-ctas li .button-tertiary-neutral {
    margin-right: 12px
}

@media only screen and (max-width: 734px) {
    .section-hero .hero-ctas li .button-tertiary-neutral {
        padding:9px 17px;
        position: relative
    }
}

@media only screen and (max-width: 734px) {
    .section-hero .hero-ctas li .button-neutral {
        padding:9px 14px 9px 15px
    }
}

__non-relevant-classname__ {
    background-image: url(https://www.apple.com/v/apple-vision-pro/k/images/overview/experiences/productivity/productivity_startframe__bl6ywkogf3qq_large.jpg);
    background-repeat: no-repeat;
    background-image: url(https://www.apple.com/v/apple-vision-pro/k/images/overview/experiences/productivity/drawer/mac_startframe__ez7om6vgeis2_large.jpg)
}

@media only screen and (max-width: 1068px) {
    __non-relevant-classname__ {
        background-repeat:no-repeat;
        background-image: url(https://www.apple.com/v/apple-vision-pro/k/images/overview/experiences/productivity/productivity_startframe__bl6ywkogf3qq_medium.jpg)
    }
}

@media only screen and (max-width: 734px) {
    __non-relevant-classname__ {
        background-repeat:no-repeat;
        background-image: url(https://www.apple.com/v/apple-vision-pro/k/images/overview/experiences/productivity/productivity_startframe__bl6ywkogf3qq_small.jpg)
    }
}

@media only screen and (max-width: 1068px) {
    __non-relevant-classname__ {
        background-repeat:no-repeat;
        background-image: url(https://www.apple.com/v/apple-vision-pro/k/images/overview/experiences/productivity/drawer/mac_startframe__ez7om6vgeis2_medium.jpg)
    }
}

@media only screen and (max-width: 734px) {
    __non-relevant-classname__ {
        background-repeat:no-repeat;
        background-image: url(https://www.apple.com/v/apple-vision-pro/k/images/overview/experiences/productivity/drawer/mac_startframe__ez7om6vgeis2_small.jpg)
    }
}

/* ====================================================================
   Custom additions — apple-vision-pro theme
   ====================================================================
   Everything above this point is a captured copy of Apple's own
   page-specific CSS for apple.com/apple-vision-pro, which is why
   template-parts/vision-pro/hero.php reuses Apple's real class names
   (.section-hero, .hero-content, …) instead of an avp-* namespace.
   Apple's site-wide chrome (the global nav bar and the local nav bar)
   lived in a separate, shared stylesheet that was NOT part of this
   page's CSS capture — only a couple of page-specific overrides for it
   came through above (#ac-localnav, .ac-ln-menu-link). header.php never
   implements those nav bars at all (see its own docblock), but
   .section-hero's height/margin math still depends on the --r-*-height
   values below, so they're kept as a fixed spacing constant.
   ==================================================================== */

:root {
    --r-globalnav-height: 44px;
    --r-localnav-height: 88px; /* globalnav (44px) + localnav (44px) stacked */
}

/* Body-level offset for the immersive layout — see avp_body_classes() in
   functions.php, which adds .avp-page on the front page and on any page
   using the "Apple Vision Pro" template. This flow-space is what
   .section-hero's own negative top margin (--padding-top, above) cancels
   out, so the hero renders flush behind the fixed nav bars instead of
   being pulled up underneath them. */
body.avp-page {
    padding-top: var(--r-localnav-height);
    margin: 0;
}

/* ====================================================================
   Original design system — avp-* sections
   ====================================================================
   Foundation, Design, Experiences, visionOS, Technology and Values all
   use the avp-* namespaced markup already in template-parts/vision-pro/.
   This is hand-written, original CSS for that markup (colors, spacing,
   and type sizes chosen independently) — it does not reuse or adapt any
   rules from the captured Apple stylesheet above.
   ==================================================================== */

.avp-main {
    font-family: -apple-system, "SF Pro Display", BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #1d1d1f;
    /* No overflow-x here: it implicitly sets overflow-y to auto, turning
       .avp-main into a scroll container that breaks position:sticky on
       every descendant (foundation, portals, the technology scrub). */
}

.avp-eyebrow {
    margin: 0 0 8px;
    font-size: 19px;
    font-weight: 600;
    color: #6e6e73;
}

.avp-section-headline {
    margin: 0 0 20px;
    max-width: 780px;
    font-size: clamp(32px, 5vw, 56px);
    line-height: 1.1;
    font-weight: 600;
    letter-spacing: -0.015em;
}

.avp-headline-xl {
    margin: 0;
    font-size: 56px;
    line-height: 1.1;
    font-weight: 600;
    letter-spacing: -0.015em;
}

@media only screen and (max-width: 733px) {
    .avp-headline-xl {
        font-size: clamp(32px, 9vw, 44px);
    }
}

.avp-headline-reduced {
    margin: 0 0 16px;
    font-size: clamp(24px, 3vw, 32px);
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.avp-highlight {
    font-weight: 600;
}

.avp-body {
    max-width: 640px;
    margin: 0;
    font-size: 19px;
    line-height: 1.42;
    color: #424245;
}

/* Reveal-on-scroll (IntersectionObserver adds .is-visible — see avp.js) */
.avp-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.avp-reveal.is-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .avp-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* --------------------------------------------------------------------
   Foundation — pinned frosted-glass reveal. All the statements sit
   together as one crisp block; a backdrop-blurred veil behind them (over
   the hero, still visible through the negative-margin overlap) is what's
   actually scrubbed by scroll (initFoundation() in avp.js). Tall enough
   for a smooth reveal plus a short hold before it unpins.
   -------------------------------------------------------------------- */
.avp-foundation {
    position: relative;
    z-index: 1;
    /* svh (not vh) — see .avp-scroll-container's comment: plain vh doesn't
       track mobile browsers' collapsing address bar, which desyncs this
       reserved scroll distance from avp.js's pinProgress() (window.innerHeight-
       based) and leaves dead blank space once the pin finishes early. */
    height: 200svh;
}

.avp-foundation__pin {
    position: sticky;
    top: 0;
    height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.avp-foundation__veil {
    position: absolute;
    inset: 0;
    background: rgba(245, 245, 247, 0.9);
    opacity: 0;
    -webkit-backdrop-filter: blur(0);
    backdrop-filter: blur(0);
    will-change: opacity, backdrop-filter;
}

.avp-foundation__list {
    position: relative;
    z-index: 1;
    margin: 0 auto;
    padding: 0 24px;
    list-style: none;
    max-width: 800px;
    text-align: center;
    opacity: 0;
    will-change: opacity, transform;
}

.avp-foundation__headline {
    margin: 0 0 28px;
    font-size: clamp(30px, 3.9vw, 44px);
    line-height: 1.28;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: #1d1d1f;
}

/* Supporting sentence between headlines — same block, quieter voice, so
   the longer copy still fits inside the 100svh pin. */
.avp-foundation__lede {
    max-width: 680px;
    margin: 0 auto 28px;
    font-size: clamp(19px, 2.2vw, 24px);
    line-height: 1.4;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #6e6e73;
}

.avp-foundation__headline:last-child,
.avp-foundation__lede:last-child {
    margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
    .avp-foundation {
        height: auto;
    }

    .avp-foundation__pin {
        position: relative;
        height: auto;
        padding: 80px 0;
    }

    .avp-foundation__veil {
        opacity: 1;
        background: #f5f5f7;
    }

    .avp-foundation__list {
        opacity: 1;
    }
}

/* --------------------------------------------------------------------
   Design — "Take a closer look" card gallery (lives inside .avp-experiences
   now, directly under the Entertainment video — no section boundary
   between them, just a deliberate top margin on the heading).
   -------------------------------------------------------------------- */
.avp-design__head {
    max-width: 1200px;
    margin: 192px auto 100px;
    padding: 0 24px;
}

.avp-gallery {
    position: relative;
}

/* Extra breathing room above a gallery that follows a video/portal's own
   copy directly (Entertainment, Productivity, Photos and Videos,
   Connection, Apps) — doesn't apply to the "Take a closer look" design
   gallery, which already has its own deliberate gap via .avp-design__head. */
.avp-portal + .avp-gallery {
    margin-top: 64px;
}

.avp-gallery__track {
    display: flex;
    gap: 20px;
    margin: 0;
    padding: 0 24px;
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
}

.avp-gallery__track::-webkit-scrollbar {
    display: none;
}

.avp-gallery__item {
    --card-width: 400px;
    flex: 0 0 auto;
    width: min(85vw, var(--card-width));
    scroll-snap-align: start;
    cursor: pointer;
}

/* Leading/trailing spacers — at rest, the first/last real card sits inset
   from the edge (matching the page's own 1200px content column) instead of
   flush against the viewport edge; everything scrolled-to in between fills
   the width normally. Collapses to 0 below that column's own width, so
   small screens still get edge-to-edge cards rather than a forced gutter. */
.avp-gallery__spacer {
    flex: 0 0 auto;
    width: max(0px, calc((100vw - 1200px) / 2));
    /* Snap-aligned (not none) so the resting position with the spacer
       showing — first/last card inset — is itself a stable snap point,
       not just a transient scroll offset the snap system pulls away from. */
    scroll-snap-align: start;
}

.avp-gallery__spacer:last-child {
    scroll-snap-align: end;
}

.avp-gallery__media {
    position: relative;
    height: 530px;
    border-radius: 18px;
    overflow: hidden;
    background: #f5f5f7;
}

.avp-gallery__media img,
.avp-gallery__media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.avp-gallery__media video {
    position: absolute;
    inset: 0;
}

@media only screen and (max-width: 733px) {
    .avp-gallery__media {
        height: 380px;
    }
}

.avp-gallery__caption {
    margin-top: 30px;
    width: 85%;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.4;
    color: #86868b;
}

.avp-gallery__caption b {
    font-weight: 700;
    color: #1d1d1f;
}

.avp-theme-dark .avp-gallery__caption b {
    color: #f5f5f7;
}

.avp-gallery__controls {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    max-width: 1200px;
    margin: 50px auto 0;
    padding: 0 24px;
}

.avp-gallery__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #d2d2d7;
    background: #fff;
    color: #1d1d1f;
    cursor: pointer;
}

.avp-gallery__btn:disabled {
    opacity: 0.35;
    cursor: default;
}

/* --------------------------------------------------------------------
   Portal — scroll-driven "InlineMedia" pattern
   (shared by Experiences and visionOS via avp_render_portal())
   -------------------------------------------------------------------- */
.avp-experiences,
.avp-visionos {
    background: #fff;
}

.avp-experiences,
.avp-entertainment-full,
.avp-productivity,
.avp-photos-videos,
.avp-connection,
.avp-apps,
.avp-visionos-platform {
    padding-bottom: 120px;
}

.avp-entertainment-full,
.avp-productivity,
.avp-photos-videos,
.avp-connection,
.avp-apps,
.avp-visionos-platform {
    background: #fff;
}

.avp-portal {
    position: relative;
}

.avp-scroll-container {
    position: relative;
    /* svh, not vh: on mobile, plain vh doesn't track the browser's
       collapsing address bar, which desyncs this reserved scroll distance
       from avp.js's pinProgress() (window.innerHeight-based) and leaves
       dead blank space once the pin finishes early. */
    height: 300svh;
}

.avp-sticky {
    position: sticky;
    top: 0;
    height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #000;
}

.avp-portal__media {
    position: absolute;
    inset: 0;
}

.avp-portal__poster,
.avp-portal__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avp-portal__video {
    opacity: 0;
    transition: opacity 0.4s ease;
}

.avp-portal__video.is-ready {
    opacity: 1;
}

/* Intro lockup — plain text in normal flow ABOVE the pinned video, not an
   overlay on top of it (matches the real page's actual layout: the
   eyebrow/headline sits on the section's own background and scrolls away
   before the video pins, rather than being laid over the video pixels). */
.avp-portal__intro {
    max-width: 900px;
    margin: 0 auto;
    padding: 96px 24px 48px;
    text-align: center;
}

.avp-portal__eyebrow {
    margin: 0 0 8px;
    font-size: 19px;
    font-weight: 600;
    color: #6e6e73;
}

.avp-portal__headline {
    margin: 0;
    font-size: clamp(28px, 4.4vw, 48px);
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #1d1d1f;
}

.avp-theme-dark .avp-portal__eyebrow,
.avp-portal--grad-d .avp-portal__eyebrow {
    color: rgba(245, 245, 247, 0.75);
}

.avp-theme-dark .avp-portal__headline,
.avp-portal--grad-d .avp-portal__headline {
    color: #f5f5f7;
}

.avp-portal__ui {
    position: absolute;
    right: 24px;
    bottom: 24px;
    z-index: 1;
    width: 40px;
    height: 40px;
}

.avp-portal__ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.avp-portal__ring-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.3);
    stroke-width: 6;
}

.avp-portal__ring-fill {
    fill: none;
    stroke: #fff;
    stroke-width: 6;
    stroke-dasharray: 283;
    stroke-dashoffset: 283;
    transition: stroke-dashoffset 0.1s linear;
}

.avp-portal__pause {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
}

.avp-portal__pause span {
    width: 3px;
    height: 12px;
    background: #fff;
    border-radius: 1px;
}

.avp-portal__attribution {
    position: absolute;
    left: 24px;
    bottom: 24px;
    z-index: 1;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.75);
}

.avp-portal__copy {
    max-width: 1200px;
    margin: 0 auto;
    padding: 64px 24px 0;
}

.avp-portal__ext {
    display: inline-block;
    width: 11px;
    height: 11px;
    margin-left: 2px;
    border: 1.4px solid currentColor;
    border-radius: 50%;
}

@media (prefers-reduced-motion: reduce) {
    .avp-scroll-container {
        height: auto;
    }

    .avp-sticky {
        position: relative;
        height: auto;
        aspect-ratio: 16 / 10;
    }

    .avp-portal__video {
        display: none;
    }

    .avp-portal__ui {
        display: none;
    }
}

/* --------------------------------------------------------------------
   Drawer — horizontal gallery of wide cards below a portal
   -------------------------------------------------------------------- */
.avp-drawer {
    max-width: 1200px;
    margin: 56px auto 0;
    padding: 0 24px 96px;
}

.avp-drawer__track {
    display: flex;
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
}

.avp-drawer__track::-webkit-scrollbar {
    display: none;
}

.avp-drawer__item {
    flex: 0 0 auto;
    width: min(85vw, 420px);
}

.avp-drawer__media {
    position: relative;
    aspect-ratio: 16 / 10;
    border-radius: 18px;
    overflow: hidden;
    background: #f5f5f7;
}

.avp-drawer__media img,
.avp-drawer__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avp-drawer__video {
    opacity: 0;
    transition: opacity 0.4s ease;
}

.avp-drawer__video.is-ready {
    opacity: 1;
}

.avp-drawer__toggle {
    position: absolute;
    right: 12px;
    bottom: 12px;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    background: none;
    color: #fff;
    cursor: pointer;
}

.avp-drawer__toggle .avp-portal__pause span {
    height: 10px;
}

.avp-drawer__toggle.is-paused .avp-portal__pause {
    display: none;
}

.avp-drawer__play {
    display: none;
}

.avp-drawer__toggle.is-paused .avp-drawer__play {
    display: block;
    width: 0;
    height: 0;
    margin: 0 auto;
    border-style: solid;
    border-width: 6px 0 6px 10px;
    border-color: transparent transparent transparent #fff;
}

.avp-drawer__caption {
    margin: 14px 0 0;
    font-size: 14px;
    line-height: 1.4;
    color: #1d1d1f;
}

.avp-drawer__attribution {
    margin: 4px 0 0;
    font-size: 12px;
    color: #6e6e73;
}

/* --------------------------------------------------------------------
   Video — plain autoplay-in-view block (no scroll-scrub), corner toggle.
   Shares .avp-drawer__toggle's click/ring/pause-icon behavior (avp.js
   selects it generically); avp-video__toggle here only repositions it
   from the drawer card's bottom-right corner to the top-right.
   -------------------------------------------------------------------- */
.avp-video {
    /* White by default so hero sections (eyebrow/headline overlaid on a
       pinned video, body copy below) don't show gray on either side of
       their width-constrained .avp-portal__copy box — the portal's own
       background was showing through there before this. */
    background: #fff;
}

/* --------------------------------------------------------------------
   Video portal with a scroll-linked text overlay (avp_render_video() with
   an eyebrow/headline) — the video fills the pinned viewport full-bleed,
   the eyebrow/headline sit on top of it, and initVideoIntro() in avp.js
   holds that text centered while pinned, then translates it up and fades
   it out as the section scrolls past (and back again scrolling up).
   -------------------------------------------------------------------- */
.avp-video__scroll {
    /* svh — see .avp-scroll-container's comment. */
    height: 220svh;
}

.avp-video__scroll .avp-video__media {
    /* .avp-sticky centers its content via flex; since both poster and video
       are position:absolute (no in-flow content to size by), this needs an
       explicit width or it collapses to 0 instead of filling the pin. */
    width: 100%;
    max-width: none;
    aspect-ratio: auto;
    height: 100%;
    margin: 0;
    flex: none;
}

.avp-video__scrim {
    /* Flat dark scrim behind the text — simple, and shared by every section
       using this overlay pattern, so busy/light video frames underneath
       (charts, bright rooms, etc.) don't fight the white text's legibility.
       A separate, never-moving element from .avp-video__intro below: that
       one gets translated by scroll to animate the text, and this element
       used to BE that one — sliding a full-height background along with
       the text uncovered a strip of raw video at the opposite edge every
       time, showing as a visible seam. This one just stays put. */
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(0, 0, 0, 0.25);
    pointer-events: none;
}

.avp-video__intro {
    position: absolute;
    inset: 0;
    /* .avp-portal__intro (base class, also on this element) sets
       max-width:900px; margin:0 auto — inset:0 alone doesn't override an
       explicit max-width, so without this the text column only covered a
       centered 900px column instead of the full video width. */
    max-width: none;
    margin: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 24px;
    pointer-events: none;
    will-change: opacity, transform;
}

/* --------------------------------------------------------------------
   Hero video sections (avp_render_video() with an eyebrow/headline —
   Entertainment, Productivity, and any more added the same way): exact
   spec for the overlaid eyebrow/headline (white, over the video) and the
   body copy below it (dark gray, on white). Structural selectors, not
   per-ID, so "same design" carries to every section built this way.
   -------------------------------------------------------------------- */
.avp-video__intro .avp-portal__eyebrow {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
}

.avp-video__intro .avp-portal__headline {
    margin-top: 13px;
    font-size: 80px;
    font-weight: 700;
    color: #fff;
}

.avp-video .avp-portal__copy {
    padding-top: 80px;
    background: #fff;
}

.avp-video .avp-body {
    margin-top: 0;
    max-width: 820px;
    padding-bottom: 80px;
    color: #86868b;
}

.avp-video .avp-portal__copy a {
    color: #06c;
    text-decoration: none;
}

.avp-video .avp-portal__copy a:hover {
    text-decoration: underline;
}

@media only screen and (max-width: 1068px) {
    .avp-video__intro .avp-portal__headline {
        font-size: clamp(36px, 8vw, 64px);
    }
}

.avp-video__media {
    /* No side gutter below the cap — full-bleed edge to edge on laptop and
       smaller screens. Only screens wider than 1800px get the centered,
       capped-width look with visible margins on either side. */
    position: relative;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #000;
}

.avp-video__poster,
.avp-video__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avp-video__video {
    opacity: 0;
    transition: opacity 0.4s ease;
}

.avp-video__video.is-ready {
    opacity: 1;
}

.avp-video__toggle {
    top: 24px;
    right: 24px;
    bottom: auto;
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.32);
    border-radius: 50%;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* --------------------------------------------------------------------
   Technology — dark theme, exploded-view scrub, sensor/chip grid
   -------------------------------------------------------------------- */
.avp-theme-dark {
    background: #000;
    color: #f5f5f7;
}

/* The Spatial Audio panel below breaks its video out to 100vw, which on
   most browsers is a hair wider than the true visible width (100vw
   includes the vertical scrollbar's own width). Hiding overflow-x on the
   root — not on .avp-technology itself, which would create a new
   scrolling context and break that panel's position:sticky pin — absorbs
   that few-px excess without a page-level horizontal scrollbar. */
html {
    overflow-x: hidden;
}

.avp-technology {
    padding: 120px 0;
}

.avp-technology__intro {
    max-width: 1200px;
    margin: 0 auto 56px;
    padding: 0 24px;
    text-align: center;
}

.avp-technology__intro .avp-section-headline {
    margin-left: auto;
    margin-right: auto;
    font-size: clamp(32px, 6vw, 80px);
}

.avp-technology__lede {
    margin-top: 32px;
    margin-left: auto;
    margin-right: auto;
    max-width: 640px;
}

.avp-technology__lede .avp-body {
    color: rgba(245, 245, 247, 0.75);
}

.avp-technology__lede h3,
.avp-technology__lede p {
    font-size: 24px;
}

.avp-theme-dark .avp-section-headline,
.avp-theme-dark .avp-highlight {
    color: #f5f5f7;
}

.avp-scrub {
    position: relative;
    /* svh — see .avp-scroll-container's comment. */
    height: 250svh;
}

.avp-scrub__sticky {
    position: sticky;
    top: 0;
    height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.avp-scrub__poster,
.avp-scrub__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.avp-scrub__video {
    opacity: 0;
    transition: opacity 0.4s ease;
}

.avp-scrub__video.is-ready {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .avp-scrub {
        height: auto;
    }

    .avp-scrub__sticky {
        position: relative;
        height: auto;
        aspect-ratio: 16 / 10;
    }

    .avp-scrub__video {
        display: none;
    }
}

.avp-technology__copy {
    max-width: 1200px;
    margin: 0 auto;
    padding: 96px 24px 0;
    text-align: center;
}

.avp-technology__copy .avp-body {
    margin: 0 auto;
    color: rgba(245, 245, 247, 0.75);
    font-size: 21px;
}

/* Full-bleed media (video or image) followed by centered copy — the
   repeating pattern for Spatial Audio / Eye Tracking / Sensor Array /
   Chip Performance, matching apple.com/apple-vision-pro's own layout. */
.avp-tech-panel {
    max-width: 1200px;
    margin: 96px auto 0;
    padding: 0 24px;
    text-align: center;
}

.avp-tech-panel__media {
    position: relative;
    aspect-ratio: 16 / 8;
    margin: 0 0 40px;
    border-radius: 18px;
    overflow: hidden;
    background: #000;
}

.avp-tech-panel__media img,
.avp-tech-panel__media video {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avp-tech-panel .avp-headline-reduced,
.avp-tech-panel .avp-body {
    margin-left: auto;
    margin-right: auto;
}

.avp-tech-panel .avp-headline-reduced {
    color: #f5f5f7;
}

.avp-tech-panel .avp-body {
    color: rgba(245, 245, 247, 0.75);
}

/* Spatial Audio panel — ports apple.com/apple-vision-pro's own
   "speakers-container" grid-stack technique: the media and copy are both
   placed in the SAME single grid cell (grid-area: 1/1), so they overlap
   directly rather than needing position:absolute/overlay markup. Unlike
   the real site's own margin-top values (which assume a much taller video
   track than this panel's 16:9 box), align-self:end bottom-anchors the
   copy against the video's own bottom edge regardless of its height. */
.avp-tech-panel--audio {
    display: grid;
    grid-template-columns: 100%;
    overflow: hidden;
    max-width: none;
    padding: 0 0 190px;
}

.avp-tech-panel--audio .avp-tech-panel__media,
.avp-tech-panel--audio .avp-tech-panel__copy {
    grid-area: 1 / 1;
}

.avp-tech-panel--audio .avp-tech-panel__media {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    aspect-ratio: 16 / 9;
    border-radius: 0;
}

.avp-tech-panel__copy {
    position: relative;
    z-index: 1;
    align-self: end;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px 32px;
    text-align: left;
    top: 190px;
}

.avp-gap {
    margin: 50px 0;
}

.avp-tech-panel__copy .avp-headline-reduced,
.avp-tech-panel__copy .avp-body {
    max-width: 460px;
    margin-left: auto;
    margin-right: 0;
    text-align: left;
}

.avp-tech-panel__copy .avp-body {
    font-size: 21px;
}

@media only screen and (max-width: 733px) {
    .avp-tech-panel__copy .avp-headline-reduced,
    .avp-tech-panel__copy .avp-body {
        max-width: none;
    }
}

/* Sensor array "Replay" pulse — a soft light glow over the same photo,
   faded in briefly on click via .is-lit (initTechReplay() in avp.js). */
/* Eye Tracking / Sensor Array photos — apple.com's own reference renders
   these at a fixed, moderate pixel size (966x518 / 1026x508) centered
   within the section, not stretched to the panel's full width. */
.avp-tech-panel__media--eye-tracking {
    max-width: 966px;
    aspect-ratio: 966 / 518;
    margin-left: auto;
    margin-right: auto;
}

/* LEDs off by default; crossfades to the lit photo only while in view
   (.is-lit toggled by initEyeTrackingLight() in avp.js) — reverses when
   scrolled away in either direction, it's never a one-time reveal. */
.avp-eye-tracking__on {
    opacity: 0;
    transition: opacity 0.8s ease;
}

.avp-tech-panel__media--eye-tracking.is-lit .avp-eye-tracking__on {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .avp-eye-tracking__on {
        transition: none;
        opacity: 1;
    }
}

.avp-tech-replay {
    position: relative;
    max-width: 1026px;
    aspect-ratio: 1026 / 508;
    margin-left: auto;
    margin-right: auto;
}

/* sensors_off is the always-present dark base; sensors_all crossfades in
   on top once a run settles (.is-lit), giving the true photographed
   fully-lit look instead of relying only on the CSS dot glows. */
.avp-sensor-photo--on {
    opacity: 0;
    transition: opacity 0.8s ease;
}

.avp-tech-replay.is-lit .avp-sensor-photo--on {
    opacity: 1;
}

.avp-tech-replay__glow {
    position: absolute;
    inset: 0;
    opacity: 0;
    background: radial-gradient(circle at 50% 40%, rgba(120, 200, 255, 0.35), rgba(120, 200, 255, 0) 60%);
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.avp-tech-replay.is-lit .avp-tech-replay__glow {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .avp-sensor-photo--on {
        transition: none;
    }
}

/* Individual sensor lights — positioned per-dot via --x/--y/--s custom
   properties set inline in the markup (hand-placed to match the camera/
   sensor locations in sensors_all__....jpg). initSensorLights() in avp.js
   toggles .is-on per dot at random intervals for a run's duration. */
.avp-sensor-dot {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--s);
    height: var(--s);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, #bfe8ff 0%, rgba(150, 210, 255, 0.8) 45%, rgba(150, 210, 255, 0) 75%);
    box-shadow: 0 0 calc(var(--s) * 0.9) rgba(140, 200, 255, 0.85);
    opacity: 0;
    transition: opacity 0.12s ease;
    pointer-events: none;
}

.avp-sensor-dot.is-on {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .avp-sensor-dot {
        transition: none;
    }
}

/* Chip performance media — the outer .avp-tech-panel__media (full size,
   never transformed) reserves the final footprint and is what scroll
   progress is measured against (initGrowReveal() in avp.js); its
   .avp-tech-panel__media-grow child is always full-size itself (so the
   image inside never needs to be re-cropped by object-fit as it grows —
   narrowing the box directly was cropping/re-cover-ing the image at
   every scroll step, ragged at the edges) and instead uses clip-path to
   mask down to a centered, narrower slice, widening to the full image
   as it scrolls into view; it also rises from the bottom of the
   viewport, reversing the same way scrolling back up. Base state here
   is the pre-scroll starting point the JS animates from. */
.avp-tech-panel__media-grow {
    position: absolute;
    inset: 0;
    clip-path: inset(0 10%);
    transform: translateY(50vh);
    will-change: transform, clip-path;
}

@media (prefers-reduced-motion: reduce) {
    .avp-tech-panel__media-grow {
        clip-path: none;
        transform: none;
    }
}

.avp-tech-replay__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 48px;
    padding: 0;
    border: 0;
    background: none;
    color: rgba(245, 245, 247, 0.85);
    font-size: 15px;
    cursor: pointer;
}

.avp-tech-replay__btn:hover {
    color: #fff;
}

.avp-tech-replay__btn:disabled {
    color: rgba(245, 245, 247, 0.35);
    cursor: default;
    pointer-events: none;
}

.avp-tech-replay__btn svg {
    width: 15px;
    height: 15px;
}

/* Chip performance stat row */
.avp-tech-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    max-width: 900px;
    margin: 40px auto 0;
    padding-top: 32px;
    border-top: 1px solid rgba(245, 245, 247, 0.2);
    text-align: left;
}

.avp-tech-stat__label {
    margin: 0 0 4px;
    font-size: 15px;
    color: rgba(245, 245, 247, 0.65);
}

.avp-tech-stat__value {
    margin: 0;
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 600;
    letter-spacing: -0.01em;
}

.avp-tech-stat__unit {
    margin: 4px 0 0;
    font-size: 15px;
    color: rgba(245, 245, 247, 0.65);
}

@media only screen and (max-width: 733px) {
    .avp-tech-stats {
        grid-template-columns: 1fr;
        gap: 24px;
        text-align: center;
    }
}

.avp-technology .avp-gallery {
    margin-top: 96px;
}

/* --------------------------------------------------------------------
   Values ("Designed to make a difference.") — light theme, sits between
   Technology and the closing Developers pitch (avp-developers below).
   -------------------------------------------------------------------- */
.avp-values-diff {
    padding: 140px 24px 0;
    background: #fff;
    text-align: center;
}

.avp-values-diff__intro {
    max-width: 720px;
    margin: 0 auto;
}

.avp-values-diff__intro .avp-eyebrow {
    font-size: 24px;
}

.avp-values-diff__intro .avp-section-headline {
    font-size: clamp(32px, 6vw, 80px);
}

.avp-values-diff__lede {
    max-width: 680px;
    margin: 20px auto 0;
    font-size: 24px;
    line-height: 1.4;
    color: #86868b;
}

.avp-values-diff__lede .avp-highlight {
    color: #1d1d1f;
}

.avp-values-diff .avp-gallery {
    margin-top: 96px;
}

@media only screen and (max-width: 733px) {
    .avp-values-diff {
        padding: 80px 24px 0;
    }

    .avp-values-diff__lede {
        font-size: 19px;
    }
}

/* --------------------------------------------------------------------
   Developers — closing platform pitch before the footer
   -------------------------------------------------------------------- */
.avp-developers {
    padding: 140px 24px;
    background: #f5f5f7;
    text-align: center;
}

.avp-developers__intro {
    max-width: 720px;
    margin: 0 auto;
}

.avp-developers__lede {
    margin: 20px auto 0;
}

.avp-developers__link {
    display: inline-block;
    margin-top: 24px;
    font-size: 17px;
    font-weight: 600;
    color: #0071e3;
    text-decoration: none;
}

.avp-developers__link:hover {
    text-decoration: underline;
}

.avp-button__chevron {
    display: inline-block;
    margin-left: 2px;
}

.avp-button__chevron::after {
    content: "\203A";
}

@media only screen and (max-width: 733px) {
    .avp-developers {
        padding: 80px 24px;
    }
}

/* --------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------- */
.avp-footer {
    background: #f5f5f7;
    padding: 48px 0;
    font-size: 12px;
    color: #6e6e73;
}

.avp-footer__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.avp-footer__sosumi p {
    margin: 0 0 12px;
    max-width: 900px;
    line-height: 1.5;
}

.avp-footer__nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #d2d2d7;
}

.avp-footer__copyright {
    margin: 0;
}

.avp-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.avp-footer__links a {
    color: #6e6e73;
    text-decoration: none;
}

.avp-footer__links a:hover {
    text-decoration: underline;
}