/* Responsive presentation layer: content keeps its natural aspect ratio. */
#app-tools.tools-section{background:#e3ecf9!important}
#app-tools .showcase{margin:0;width:100%;overflow:visible;background:transparent}
#app-tools .showcase-track{background:transparent;overflow-y:hidden;padding-bottom:30px;clip-path:inset(-3px 0 0)}
#app-tools .showcase-card{box-shadow:none!important}
#app-tools .showcase-controls{position:relative;z-index:5;background:transparent;padding:8px 0 24px;gap:14px}
#app-tools .showcase-dots,#app-tools .showcase-play{background:rgba(210,212,220,.75)!important;border:0!important;box-shadow:none!important;backdrop-filter:blur(20px) saturate(1.6)!important;-webkit-backdrop-filter:blur(20px) saturate(1.6);color:#27272b!important}
#app-tools .showcase-dots{height:56px;padding:0 16px;gap:2px}
#app-tools .showcase-dots button{height:44px;min-width:26px;padding:10px 9px;display:grid;place-items:center}
#app-tools .showcase-dots span{width:8px;height:8px;background:#85858b}
#app-tools .showcase-dots [aria-pressed=true] span{width:48px;background:#a0a1a8}
#app-tools .showcase-dots [aria-pressed=true] span:after{background:#333339!important}
#app-tools .showcase-play{width:56px;height:56px;flex-shrink:0;font-size:20px;display:grid;place-items:center}
#app-tools .showcase-play svg{width:20px;height:20px;fill:currentColor}
.map-item-thumb{margin-top:8px;border:0;box-shadow:none;border-radius:14px}
.map-item-thumb img{height:auto!important;aspect-ratio:1320/790;object-fit:contain!important;object-position:center top;transform:none!important}
.feature-map-grid{align-items:start}
.feature-map-item{height:auto;min-width:0}
.landscape-sticky:before{content:'';position:absolute;z-index:4;left:0;right:0;bottom:-1px;height:100px;background:linear-gradient(transparent,#e3ecf9);pointer-events:none}
.landscape-caption{padding-bottom:40px}
.fold-device.device-photo{perspective:1800px}
.hinge-lid{transform:rotateX(var(--physical-lid-angle,0deg));filter:brightness(var(--lid-light,1));transform-origin:50% 88.7%}
.fold-device:after{content:'';position:absolute;bottom:0;left:15%;right:15%;height:5%;border-radius:50%;background:#14233b33;filter:blur(12px);transform:scaleX(var(--lid-shadow,1));z-index:-1}
@media(min-width:701px) and (max-width:1020px){.feature-map-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.clock-capture img{object-fit:contain!important;height:auto!important;max-height:60svh}}
@media(max-width:700px){
 html{scroll-padding-top:80px}body{overflow-x:clip}.wrap{width:calc(100% - 36px)}
 .site-header{height:64px}.nav-inner{height:64px;gap:12px}.nav-inner:before,.nav-inner:after{display:none}.brand{font-size:21px}.brand img{width:26px;height:26px}.menu-toggle{min-height:44px;min-width:44px}.nav-inner>.button{min-height:40px}
 .mobile-menu{max-height:calc(100svh - 72px);overflow:auto}
 .opening-sequence{height:240svh}.opening-sticky{height:100svh;min-height:0;padding:0;top:0}
 .opening-copy{padding:70px 22px 35px;width:100%}.opening-copy h1{font-size:clamp(82px,23vw,115px)}.opening-actions{gap:12px;flex-wrap:wrap}.opening-copy>p.hero-tagline{font-size:27px}.opening-copy>p.hero-description{font-size:15px;line-height:1.5}
 .opening-product.device-photo{width:100vw!important;max-width:none}.scroll-cue{bottom:24px;padding-inline:25px;max-width:100%}
 .kinetic-story{height:125svh}.kinetic-sticky{min-height:0;height:100svh}.kinetic-sticky h2{font-size:clamp(62px,17vw,90px)}
 .island-intro{padding:64px 0 35px}.island-intro-head h2{font-size:38px}.island-theater{width:calc(100% - 28px)}.island-scene{padding:10px 20px 28px;gap:22px}.island-product{width:100%;transform:none;animation:none}.island-tabs{position:relative;bottom:auto;left:auto;transform:none;width:max-content;max-width:calc(100% - 24px);margin:0 auto 20px}.island-tabs button{min-height:44px;padding:10px 15px}.theater-caption h3{font-size:30px;margin-block:12px}.theater-caption p{font-size:14px}.island-foot{font-size:11px;flex-wrap:wrap}.island-foot>span{max-width:100%}
 .zenith-atmosphere{padding:65px 20px!important;min-height:0!important}.zenith-atmosphere-inner{grid-template-columns:minmax(0,1fr);gap:30px}.atmosphere-copy{max-width:100%;transform:none}.atmosphere-copy h2{font-size:38px}.atmosphere-cards{gap:22px}.atmo-ui-box{opacity:1!important;transform:none!important;translate:none!important;animation:none!important}.atmo-box-head{font-size:8px}.atmo-box-foot{gap:12px;font-size:12px}.atmo-box-foot span{font-size:11px}
 .wallpaper-sequence{height:280svh!important}.wallpaper-sticky{height:100svh;min-height:0}.lock-intro-overlay{padding:80px 24px}.lock-intro-overlay h2{font-size:39px}.lock-intro-overlay .copy{font-size:16px;max-width:300px}.lock-intro-overlay .fine{font-size:11px;max-width:290px}
 .lock-stage.device-photo{width:100vw!important}.lock-stage .lyric-track p{font-size:11px!important}.wallpaper-canvas .live-lyrics-disclaimer{margin-top:16px!important;font-size:10px!important;max-width:280px;line-height:1.5}
 .lock-details-stage{padding:25px 0 90px}.lock-details{gap:20px}.lock-feature-panel{opacity:1!important;transform:none!important}.lock-feature-art{height:auto;aspect-ratio:1.55}.lock-feature-label{padding:18px}.lock-feature-label h3{font-size:24px}.lock-feature-note{max-width:300px;margin:22px auto 0}
 .face-demo{padding:50px 0}.face-copy{padding-inline:22px}.face-copy h2{font-size:40px}.face-device{width:100vw;margin-block:20px}.face-note{font-size:11px;line-height:1.5}.face-scan{top:42%}.face-status{font-size:12px}
 .value-section{padding:45px 20px 65px}.value-heading h2{font-size:36px}.value-option{padding:17px}.value-option label{gap:10px}.value-option input{width:22px;height:22px}.value-result{padding:26px}
 #sound.sound-journey{height:180svh}.sound-sticky{height:100svh;min-height:0;padding:70px 14px 30px;justify-content:center;gap:0}.sound-theater{width:100%!important;transform:translateY(var(--sound-y,0)) scale(1)!important}.sound-desktop{padding:70px 8px 18px}.sound-native-eq{width:100%}.sound-controls{flex-wrap:wrap;gap:8px;margin-top:18px}.sound-controls button{min-height:44px;padding:10px 13px;font-size:12px}.sound-sequence{margin-top:14px}.sound-note{max-width:300px;line-height:1.5}
 .personalize{padding-top:60px}.personalize-intro{padding-bottom:30px}.personalize-intro h2{font-size:38px}.depth-feature{display:flex;flex-direction:column;padding-bottom:55px;gap:22px}.depth-scene{width:100%;min-height:0;aspect-ratio:1.3;height:auto}.depth-copy-card{padding:0}.depth-feature h3{font-size:28px}.depth-time{font-size:clamp(60px,20vw,90px)}
 .landscape-story{height:180svh}.landscape-sticky{height:100svh;min-height:0;top:0;display:flex;flex-direction:column;justify-content:center;gap:20px;padding:80px 18px 70px}.clock-capture{position:relative!important;inset:auto!important;width:100%;height:auto;aspect-ratio:1.6;flex-shrink:0;overflow:hidden;border-radius:18px}.clock-capture:before{display:none}.clock-capture img{width:100%!important;height:100%!important;object-fit:contain!important;border-radius:18px;margin:0!important}.landscape-caption{position:relative!important;inset:auto!important;padding:0 0 20px;background:none;display:block;width:100%;text-align:center}.landscape-caption h3{font-size:26px}.landscape-caption p{font-size:14px}.landscape-caption small{font-size:10px;display:block}.clock-options{justify-content:center;gap:8px;margin-block:18px}.clock-options button{min-height:44px;padding:10px 16px}.landscape-sticky:after{display:none}
 #app-tools.tools-section{padding:60px 0 38px}#app-tools .section-head{width:calc(100% - 40px);margin-bottom:24px}#app-tools .section-head h2{font-size:35px}#app-tools .showcase-track{gap:14px;padding:4px 20px 22px;scroll-padding-inline:20px}#app-tools .showcase-card{flex-basis:calc(100vw - 48px);min-width:0;border-radius:23px!important}#app-tools .showcase-caption{min-height:0!important;display:block;padding:18px!important}#app-tools .showcase-card h3{font-size:23px;margin-bottom:7px}#app-tools .showcase-card p{font-size:13px;line-height:1.5}#app-tools .showcase-controls{gap:10px;padding:0 0 20px}#app-tools .showcase-dots{height:48px;padding:0 9px;gap:0}#app-tools .showcase-dots button{padding:10px 7px;min-width:22px}#app-tools .showcase-dots [aria-pressed=true] span{width:32px}#app-tools .showcase-play{width:48px;height:48px}
 .directory-link{width:calc(100% - 40px)!important;margin:15px auto 0!important;padding:25px!important;gap:15px}.directory-link h3{font-size:24px!important}.directory-link p{font-size:13px!important}.directory-kicker{font-size:8px}.directory-link .circle-arrow{flex-shrink:0;width:38px;height:38px}
 .feature-map{padding-block:55px 65px!important}.feature-map-heading{gap:18px}.feature-map-heading h2{font-size:36px!important}.feature-map-heading p:not(.eyebrow){font-size:15px!important}.feature-map-grid{gap:20px!important}.feature-map-item{padding:18px!important;opacity:1!important;transform:none!important}.map-item-copy p{margin-bottom:12px!important}.map-item-thumb img{aspect-ratio:1320/790}.map-item-top{margin-bottom:12px}
 .fold-story{height:200svh}.fold-sticky{height:100svh;min-height:0;gap:28px;padding:65px 0 55px;justify-content:center}.fold-copy{padding:0 22px}.fold-copy h2{font-size:36px}.fold-copy>p:last-child{font-size:15px;max-width:300px;margin:auto}.fold-device.device-photo{width:100vw;margin:0}.fold-note{bottom:25px;max-width:330px;font-size:11px}.fold-telemetry-pill{font-size:9px}
 .keyboard-story{height:auto}.keyboard-sticky{position:relative;min-height:0;height:auto;padding:55px 0}.keyboard-sticky article{padding:0;width:100%}.keyboard-sticky h2{font-size:36px}.keyboard-invitation{font-size:14px;padding:0 25px}.keyboard-platform{width:100%;overflow-x:auto;padding:12px 16px 22px;-webkit-overflow-scrolling:touch}.keyboard-platform .mac-keyboard{width:660px;min-width:660px;transform:none;padding:12px}.keyboard-platform .mac-key{min-height:44px;font-size:12px}.keyboard-status,.keyboard-sticky .demo-disclaimer{padding-inline:24px;font-size:12px}.sound-selector{flex-wrap:wrap}
 .more-apps{padding-block:55px!important}.more-apps-grid{gap:20px}.app-card{opacity:1!important;transform:none!important}.download-top{grid-template-columns:1fr;gap:24px}.download h2{font-size:40px}.download-right{min-width:0}.download-moods{gap:7px;flex-wrap:wrap}.download-moods>span{width:100%;text-align:center}.setup{gap:14px}.faq{padding-block:55px!important}.faq details{padding:18px!important}.faq summary{font-size:15px}.footer{padding-inline:20px}.footer nav{flex-wrap:wrap;gap:16px}
}
@media(max-width:700px) and (max-height:700px){.opening-copy{padding-top:55px}.opening-copy h1{font-size:82px}.sound-sticky{padding-top:60px}.sound-heading{margin-bottom:15px}.sound-desktop{padding-top:58px}.sound-heading h2{font-size:30px!important}.sound-sequence{display:none}.fold-sticky{gap:12px}.fold-copy h2{font-size:30px}}
@media(prefers-reduced-motion:reduce){.opening-sequence,.wallpaper-sequence,.landscape-story,.fold-story,#sound.sound-journey{height:auto!important}.opening-sticky,.wallpaper-sticky,.landscape-sticky,.fold-sticky,.sound-sticky{position:relative;height:auto;min-height:0}.opening-sticky{padding-block:100px 30px}.wallpaper-sticky{min-height:650px}.lock-stage.device-photo{opacity:1!important}.hinge-lid{transform:none}.sound-sticky{padding-block:70px}.fold-sticky{padding-block:70px}.opening-product.device-photo{position:relative;top:auto;transform:none!important}}
.landscape-sticky{background:linear-gradient(180deg,#dbe7f7 0%,#101d2e 160px)}
@media(max-width:700px){
 .more-apps-grid,.app-card,.download-top,.setup{min-width:0;max-width:100%}.app-card *,.download-right{min-width:0;overflow-wrap:anywhere}
 .atmosphere-cards{min-width:0}.atmo-ui-box{width:100%;min-width:0}.atmo-box-head{flex-wrap:wrap;gap:8px}.atmo-box-foot{display:flex;flex-direction:column;align-items:flex-start;gap:5px}
 .showcase-caption p{max-width:none!important;justify-self:start!important;text-align:left}
 .landscape-sticky{height:90svh}.landscape-story{height:160svh}
}
html{overflow-x:clip}
@media(max-width:700px){
 .opening-sticky,.wallpaper-sticky,.sound-sticky{overflow:clip}
 .more-apps{overflow:clip}.download{overflow:clip}
}
/* Keep the viewport as the single vertical scroller (including mobile WebKit). */
html{overflow-x:hidden;overflow-y:auto}
body{overflow:visible}
main{overflow-x:clip}
@media(prefers-reduced-motion:reduce){
 .wallpaper-sticky{display:flex;flex-direction:column;gap:30px;padding:75px 0 45px}
 .lock-intro-overlay{position:relative!important;inset:auto!important;padding:0 24px;margin:0;opacity:1!important;transform:none!important}
 .lock-anim-item{opacity:1!important;transform:none!important}
 .wallpaper-canvas{position:relative!important;inset:auto!important;height:auto!important;min-height:0!important;opacity:1!important;transform:none!important}
}

/* Give the clock, recognition prompt and user avatar separate space. */
.face-scan{top:49%;padding:11px 18px}
.face-scan svg{width:clamp(26px,3.5vw,40px)}
@media(max-width:700px){.face-scan{top:48%;padding:7px 11px}.face-time{font-size:clamp(34px,8vw,56px)}}
@media(max-width:700px){
 .face-scan{top:46%}
 .face-avatar{position:absolute;bottom:22%;margin:0;width:24px;font-size:13px}
 .face-lock>span{position:absolute;bottom:16%}
 .face-password{position:absolute;bottom:5%;margin:0;padding:4px 10px}
}
@media(max-width:700px){
 .face-lock>p{position:absolute;top:0}
 .face-time{position:absolute;top:8%;font-size:28px;line-height:1}
 .face-scan{top:48%;padding:6px 10px}
 .face-scan svg{width:20px}
}
/* Scale the lock-screen UI to its display, including short desktop windows. */
.face-display{container-type:inline-size}
.face-display .face-lock>p{position:absolute;top:0;font-size:clamp(7px,2cqw,15px)}
.face-display .face-time{position:absolute;top:8%;font-size:clamp(26px,12cqw,90px);line-height:1}
.face-display .face-avatar{position:absolute;bottom:22%;margin:0;width:clamp(22px,7.5cqw,56px);font-size:clamp(12px,3cqw,24px)}
.face-display .face-lock>span{position:absolute;bottom:16%;font-size:clamp(7px,1.8cqw,14px)}
.face-display .face-password{position:absolute;bottom:5%;margin:0;font-size:clamp(6px,1.5cqw,11px);padding:.8cqw 2cqw}
.face-display .face-scan{top:46%;gap:1.5cqw;padding:1.5cqw 2.5cqw;border-radius:2.5cqw}
.face-display .face-scan svg{width:clamp(18px,5cqw,40px)}
.face-display .face-scan-label{font-size:clamp(8px,2cqw,15px)}