/* Zenith Floating Observatory: unified architectural world, scroll choreography & glass craft. */
:root{
 --ink:#152946;
 --muted:#5c7089;
 --accent:#2f5cd6;
}
body{
 background:#e6eef9;
 color:var(--ink);
 overflow-x:clip;
}
h2 em,.island-intro h2 span{color:#5e7dad}
.button{background:linear-gradient(135deg,#3563df,#2248b5);box-shadow:0 10px 26px #1e42a238}
.button:hover{background:linear-gradient(135deg,#2b56cc,#1b3b9b)}

/* 1. HERO OPENING SEQUENCE — Copy & CTA buttons 100% uncovered at scrollY=0; MacBook rises from below buttons */
.opening-sequence{background:#cbdcf0}
.opening-sticky{
 overflow:hidden;
 display:flex;
 flex-direction:column;
 align-items:center;
 justify-content:center!important;
 padding-top:36px!important;
 padding-bottom:0!important;
}
.observatory-arrival{
 position:absolute;
 inset:-4%;
 z-index:-1;
 background:linear-gradient(90deg,#c9ddf04d,#e5edf033),url('hero-options/03-soft-distance.webp') center/cover no-repeat;
 transform:scale(var(--arrival-scale,1));
 pointer-events:none;
}
.observatory-arrival:after{
 content:'';
 position:absolute;
 inset:0;
 background:radial-gradient(ellipse at 49% 34%,#f0f6ffe0 0%,#edf5ff94 34%,transparent 68%);
}
.hero-orbit{display:none}
.opening-copy{
 position:relative;
 z-index:6!important;
 padding:0 20px!important;
 margin:0 auto!important;
 max-width:920px;
 text-align:center;
 display:flex;
 flex-direction:column;
 align-items:center;
 justify-content:center;
}
.opening-copy h1{
 background:none;
 -webkit-text-fill-color:#153252;
 color:#153252;
 font-size:clamp(88px,10.5vw,152px)!important;
 line-height:1.02!important;
 letter-spacing:-.075em;
 text-shadow:0 6px 50px #eef6ff95;
 padding:.02em .08em .04em!important;
 margin-bottom:6px!important;
}
.opening-copy .eyebrow{color:#243e5c;text-shadow:0 1px 15px #fff;margin-bottom:8px!important}
.opening-copy>p.hero-tagline{
 font-size:clamp(24px,2.5vw,36px)!important;
 margin:6px 0 10px!important;
 color:#163252;
}
.opening-copy>p.hero-description{
 color:#35506b;
 font-size:16px!important;
 line-height:1.5!important;
 margin-bottom:18px!important;
}
.opening-actions{
 position:relative;
 z-index:7;
 display:flex;
 align-items:center;
 justify-content:center;
 gap:18px!important;
 margin:6px auto 0!important;
}
.opening-actions .text-link{
 display:inline-flex;
 align-items:center;
 padding:13px 22px;
 background:#ffffffd9;
 border:1px solid #fff;
 border-radius:30px;
 backdrop-filter:blur(14px);
 color:#1d395e;
 box-shadow:0 6px 22px #203d5c18;
}
.opening-copy .fine{
 color:#35506b;
 margin-top:14px!important;
}
.scroll-cue{
 color:#1f3c5d!important;
 text-shadow:0 1px 10px #fff;
 z-index:7;
 bottom:12px!important;
}
.opening-product.device-photo{
 position:absolute!important;
 top:50%!important;
 left:50%!important;
 translate:-50% 0!important;
 width:min(1080px,90vw,122svh)!important;
 z-index:4!important;
 transform-origin:50% 14%;
 pointer-events:none!important;
 transform:translateY(calc(-50% + 100vh));
 will-change:transform;
}
.device-photo .device-screen{
 background:#6d7f95;
}
.cloud-layer{
 position:absolute;
 background:url('editorial/observatory/cloud-bank.webp') center/contain no-repeat;
 width:66vw;
 height:30vw;
 pointer-events:none;
 z-index:2;
 will-change:transform;
}
.cloud-left{
 left:-26%;
 bottom:-15%;
 transform:translate3d(calc(var(--cloud-shift,0px) * -1),0,0);
 opacity:.85;
}
.cloud-right{
 right:-30%;
 top:5%;
 width:48vw;
 opacity:.5;
 transform:translate3d(var(--cloud-shift,0px),0,0) scaleX(-1);
}

/* KINETIC STORY & ISLAND THEATER */
.kinetic-story{
 height:175svh;
 background:radial-gradient(ellipse at 70% 30%,#d4e5f8,transparent 60%),linear-gradient(180deg,#e4eef9,#eef4fb);
 position:relative;
}
.kinetic-sticky{
 position:sticky;
 top:0;
 height:100svh;
 display:flex;
 flex-direction:column;
 justify-content:center;
 align-items:center;
 overflow:hidden;
 text-align:center;
 padding:30px;
}
.kinetic-sticky h2{
 font-size:clamp(65px,10vw,150px);
 line-height:.98;
 letter-spacing:-.075em;
 margin:25px 0;
 color:#1e3963;
}
.kinetic-so{display:inline-flex;align-items:baseline;gap:.015em}
.kinetic-o{
 display:inline-block;
 transform:scaleX(var(--o-stretch,1));
 transform-origin:left center;
 margin-right:calc((var(--o-stretch,1) - 1) * .52em);
 color:#4d70b3;
}
.kinetic-sticky>p:last-child{font-size:clamp(16px,2vw,22px);color:#496180}
.kinetic-sticky .eyebrow{color:#496180}

.island-intro{background:linear-gradient(180deg,#eef4fb,#e4ecf8);padding:110px 0 85px}
.island-theater,.island-theater[data-island=files],.island-theater[data-island=focus]{
 background:linear-gradient(90deg,#082246eb,#163b6f78),url('editorial/observatory/terrace.webp') center/cover no-repeat;
 border:1px solid #ffffff38;
 box-shadow:0 34px 80px -28px #0d234466;
}
.scene-orbit{display:block;position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.drift-orb{position:absolute;border-radius:50%;pointer-events:none;will-change:transform;opacity:.55}
.drift-a{width:18px;height:18px;background:radial-gradient(circle,#a8c4f0,#6894d8);top:18%;left:12%;animation:drift-float-a 23s ease-in-out infinite}
.drift-b{width:10px;height:10px;background:radial-gradient(circle,#f0d8e8,#c890b0);top:70%;left:22%;animation:drift-float-b 31s ease-in-out infinite}
.drift-c{width:14px;height:14px;background:radial-gradient(circle,#b8d8f8,#7aafe0);top:30%;right:14%;animation:drift-float-c 27s ease-in-out infinite}
.drift-d{width:8px;height:8px;background:radial-gradient(circle,#ffe4b0,#f0b860);top:72%;right:18%;animation:drift-float-d 19s ease-in-out infinite}
@keyframes drift-float-a{0%,100%{transform:translate(0,0) rotate(0deg)}25%{transform:translate(14px,-22px) rotate(12deg)}50%{transform:translate(-10px,-14px) rotate(-8deg)}75%{transform:translate(8px,12px) rotate(5deg)}}
@keyframes drift-float-b{0%,100%{transform:translate(0,0)}30%{transform:translate(-18px,10px)}65%{transform:translate(12px,-16px)}85%{transform:translate(-6px,6px)}}
@keyframes drift-float-c{0%,100%{transform:translate(0,0) scale(1)}20%{transform:translate(-12px,18px) scale(1.1)}55%{transform:translate(16px,-10px) scale(.9)}80%{transform:translate(-8px,14px) scale(1.05)}}
@keyframes drift-float-d{0%,100%{transform:translate(0,0) rotate(0deg)}40%{transform:translate(20px,-12px) rotate(20deg)}70%{transform:translate(-14px,8px) rotate(-15deg)}}
.theater-caption p,.theater-topline,.theater-caption>span{color:#dae8fa}
.island-tabs{background:#122d4e8c;border-color:#ffffff30}
.island-tabs button[aria-pressed=true]{color:#1e3f73}
.island-product{transform:rotate(-2deg)}

/* 2. ZENITH ATMOSPHERE (3RD IMAGE) — NON-OVERLAPPING 2-COLUMN + 2x2 BENTO GRID WITH SCROLL ANIMATION */
.zenith-atmosphere{
 margin:0!important;
 border-radius:0!important;
 height:auto!important;
 min-height:92svh!important;
 padding:clamp(95px,10vw,135px) max(5vw,28px) clamp(85px,9vw,115px)!important;
 background:#1d4373;
 position:relative;
 overflow:hidden;
 isolation:isolate;
 display:flex;
 flex-direction:column;
 justify-content:center;
}
.zenith-atmosphere>img{
 position:absolute;
 inset:0;
 z-index:-2;
 opacity:1;
 width:100%;
 height:100%;
 object-fit:cover;
 object-position:center;
 transform:scale(var(--atmo-bg-scale,1.06)) translateY(var(--atmo-bg-y,0px));
}
.zenith-atmosphere:after{
 content:'';
 position:absolute;
 inset:0;
 pointer-events:none;
 background:
  radial-gradient(ellipse at 20% 32%,#081f4298 0%,transparent 58%),
  linear-gradient(180deg,#0a1e3c45 0%,rgba(10,28,56,.38) 45%,#091a3488 100%);
 z-index:-1;
}
.zenith-atmosphere::before{
 content:'';
 position:absolute;
 bottom:0;
 left:0;
 right:0;
 height:clamp(460px,50vw,720px);
 pointer-events:none;
 z-index:2;
 background:linear-gradient(
  180deg,
  rgba(29,67,115,0) 0%,
  rgba(27,60,108,.20) 20%,
  rgba(25,52,98,.45) 40%,
  rgba(23,43,86,.70) 60%,
  rgba(21,36,74,.88) 78%,
  rgba(20,32,68,.97) 92%,
  #152240 100%
 );
}
.zenith-atmosphere-inner{
 width:min(1320px,100%);
 margin:0 auto;
 display:grid;
 grid-template-columns:minmax(300px,.88fr) minmax(480px,1.32fr);
 gap:clamp(28px,4vw,54px);
 align-items:center;
 position:relative;
 z-index:3;
}
.atmosphere-copy{
 position:relative!important;
 top:auto!important;
 left:auto!important;
 z-index:3;
 color:#fff;
 max-width:460px;
 transform:translate3d(0,var(--atmo-copy-y,0px),0);
}
.atmosphere-copy .eyebrow{color:#c8dffa;letter-spacing:.22em}
.atmosphere-copy h2{
 font-size:clamp(44px,5vw,76px);
 line-height:1.02;
 letter-spacing:-.065em;
 margin:18px 0;
 text-shadow:0 10px 35px #07162e66;
}
.atmosphere-copy p{color:#eef5ff;font-size:18px;line-height:1.55}
.atmosphere-cards{
 position:relative!important;
 inset:auto!important;
 z-index:3;
 display:grid;
 grid-template-columns:repeat(2,minmax(0,1fr));
 gap:32px 36px;
 pointer-events:auto;
 padding:28px 10px;
}
.atmo-ui-box{
 position:relative!important;
 top:auto!important;
 right:auto!important;
 bottom:auto!important;
 left:auto!important;
 width:100%!important;
 display:flex;
 flex-direction:column;
 border-radius:22px;
 overflow:hidden;
 text-decoration:none;
 color:#f4f8ff;
 background:linear-gradient(155deg,rgba(12,28,54,.84),rgba(20,45,82,.72));
 border:1px solid rgba(226,240,255,.4);
 box-shadow:0 24px 54px rgba(5,16,34,.42),inset 0 1px 0 rgba(255,255,255,.32);
 backdrop-filter:blur(20px);
 -webkit-backdrop-filter:blur(20px);
 transform:translate3d(var(--box-x,0px),var(--box-y,0px),0) rotate(var(--box-rot,0deg)) scale(var(--box-scale,1));
 opacity:var(--box-alpha,1);
 transition:border-color .25s ease,box-shadow .35s ease;
 will-change:transform,opacity,translate;
}
.atmo-box-1{
 margin-top:-22px;
 margin-left:-12px;
 animation:atmo-drift-1 8.5s ease-in-out infinite alternate;
}
.atmo-box-2{
 margin-top:28px;
 margin-left:16px;
 animation:atmo-drift-2 11s ease-in-out infinite alternate;
}
.atmo-box-3{
 margin-top:-14px;
 margin-left:-18px;
 animation:atmo-drift-3 9.5s ease-in-out infinite alternate;
}
.atmo-box-4{
 margin-top:22px;
 margin-left:14px;
 animation:atmo-drift-4 12s ease-in-out infinite alternate;
}

@keyframes atmo-drift-1{
 0%{translate:-10px -8px}
 25%{translate:12px -16px}
 50%{translate:-8px 12px}
 75%{translate:14px 6px}
 100%{translate:-10px -8px}
}
@keyframes atmo-drift-2{
 0%{translate:12px 8px}
 25%{translate:-14px 16px}
 50%{translate:8px -14px}
 75%{translate:-10px -6px}
 100%{translate:12px 8px}
}
@keyframes atmo-drift-3{
 0%{translate:-14px 12px}
 25%{translate:10px -10px}
 50%{translate:-8px -16px}
 75%{translate:12px 10px}
 100%{translate:-14px 12px}
}
@keyframes atmo-drift-4{
 0%{translate:14px -10px}
 25%{translate:-12px -14px}
 50%{translate:10px 14px}
 75%{translate:-6px 8px}
 100%{translate:14px -10px}
}

.atmo-ui-box:hover{
 border-color:rgba(255,255,255,.85);
 box-shadow:0 34px 75px rgba(5,16,34,.62),inset 0 1px 0 rgba(255,255,255,.6);
 z-index:8;
 animation-play-state:paused;
 translate:0 -6px!important;
}
.atmo-box-head{
 display:flex;
 align-items:center;
 justify-content:space-between;
 padding:11px 16px;
 font-size:9px;
 font-weight:700;
 letter-spacing:.16em;
 color:#bfd8fa;
 border-bottom:1px solid rgba(255,255,255,.12);
 background:rgba(8,20,40,.46);
}
.atmo-box-head b{font-size:12px;color:#fff}
.atmo-ui-box img{
 width:100%;
 height:auto;
 aspect-ratio:1320/790;
 object-fit:cover;
 display:block;
}
.atmo-box-foot{
 display:flex;
 align-items:baseline;
 justify-content:space-between;
 gap:10px;
 padding:12px 16px 13px;
 background:linear-gradient(90deg,rgba(9,22,44,.9),rgba(17,39,72,.82));
}
.atmo-box-foot strong{font-size:13px;font-weight:600;color:#fff;letter-spacing:-.01em}
.atmo-box-foot small{font-size:11px;color:#b9d1f0}
.art-note{
 position:relative!important;
 bottom:auto!important;
 left:auto!important;
 transform:none!important;
 align-self:center;
 margin-top:34px;
 z-index:4;
 font-size:11px;
 letter-spacing:.08em;
 text-transform:uppercase;
 color:#e4effd;
 background:rgba(10,25,48,.62);
 border:1px solid rgba(255,255,255,.26);
 padding:8px 18px;
 border-radius:30px;
 backdrop-filter:blur(12px);
}

/* 3. UNIFIED LOCK SCREEN SCROLL STAGE — Text animates in/out over rose-terrace, then crossfades into Lock Screen UI */
.wallpaper-sequence{
height:410svh!important;
position:relative;
background:#152240;
margin:0;
}
.wallpaper-sticky{
 position:sticky;
 top:0;
 height:100svh;
 min-height:640px;
 overflow:hidden;
 display:grid;
 place-items:center;
 isolation:isolate;
 background:#152240;
}
.wallpaper-sticky::after{
 content:'';
 position:absolute;
 bottom:0;
 left:0;
 right:0;
 height:clamp(200px,26svh,320px);
 background:linear-gradient(to bottom, transparent 0%, rgba(32,16,27,.3) 30%, rgba(32,16,27,.82) 75%, #20101b 100%);
 pointer-events:none;
 z-index:5;
}
.lock-backdrop-art{
 position:absolute;
 inset:0;
 z-index:1;
 overflow:hidden;
 pointer-events:none;
}
.lock-backdrop-art::before{
 content:'';
 position:absolute;
 top:0;
 left:0;
 right:0;
 height:clamp(240px,28vw,420px);
 pointer-events:none;
 z-index:3;
 background:linear-gradient(
  180deg,
  #152240 0%,
  rgba(21,34,64,.85) 25%,
  rgba(24,38,72,.45) 55%,
  rgba(28,42,78,.12) 80%,
  transparent 100%
 );
}
.lock-backdrop-art img{
 width:100%;
 height:100%;
 object-fit:cover;
 object-position:center;
 opacity:var(--lock-bg-alpha,1);
 transform:scale(var(--lock-bg-scale,1.04));
 filter:blur(var(--lock-bg-blur,0px)) brightness(var(--lock-bg-bright,.92));
 will-change:transform,opacity,filter;
}
.lock-backdrop-art:after{
 content:'';
 position:absolute;
 inset:0;
 background:
  radial-gradient(ellipse at 32% 52%,rgba(250,234,240,var(--lock-veil-alpha,.78)) 0%,rgba(232,208,218,var(--lock-veil-alpha,.52)) 42%,rgba(44,18,29,.35) 100%),
  linear-gradient(180deg,rgba(25,13,20,.85) 0%,rgba(25,13,20,.3) 18%,transparent 35%,transparent 70%,rgba(25,13,20,.95) 100%);
}
.music-scene-heading.lock-intro-overlay{
 position:absolute;
 inset:0;
 z-index:3;
 max-width:none;
 width:100%;
 min-height:0;
 margin:0;
 padding:0 max(7vw,28px);
 display:flex;
 flex-direction:column;
 justify-content:center;
 align-items:center;
 text-align:center;
 background:none!important;
 pointer-events:none;
 opacity:var(--lock-intro-visible,1);
}
.lock-intro-overlay .eyebrow{
 justify-content:center;
 color:#692c40;
 font-weight:600;
 letter-spacing:.22em;
 text-shadow:0 2px 18px rgba(255,245,248,.9);
}
.lock-intro-overlay h2{
 max-width:920px;
 font-size:clamp(54px,7.4vw,112px);
 letter-spacing:-.065em;
 line-height:.98;
 color:#341623;
 margin:18px 0 22px;
 text-shadow:0 8px 34px rgba(255,240,245,.65);
}
.lock-intro-overlay h2 em{
 color:#8f3552;
 font-style:normal;
}
.lock-intro-overlay .copy{
 color:#4a2333;
 font-size:clamp(18px,2vw,24px);
 max-width:580px;
 margin:0 auto 14px;
 font-weight:500;
 text-shadow:0 2px 16px rgba(255,245,248,.85);
}
.lock-intro-overlay .fine{
 color:#6c3b4e;
 font-size:13px;
 letter-spacing:.04em;
 text-shadow:0 1px 12px rgba(255,245,248,.8);
}
.lock-anim-item{
 will-change:transform,opacity,filter;
 opacity:var(--item-alpha,1);
 transform:translate3d(0,var(--item-y,0px),0) scale(var(--item-scale,1));
 filter:blur(var(--item-blur,0px));
}
.wallpaper-canvas{
 position:absolute!important;
 inset:0!important;
 z-index:6!important;
 width:100vw!important;
 height:100svh!important;
 margin:0!important;
 padding:clamp(10px,1.8vh,22px) clamp(14px,2.8vw,32px)!important;
 box-sizing:border-box!important;
 background:transparent!important;
 box-shadow:none!important;
 display:flex!important;
 flex-direction:column!important;
 align-items:center!important;
 justify-content:center!important;
 gap:clamp(10px,1.5vh,16px)!important;
 opacity:var(--lock-ui-alpha,0);
 transform:translate3d(0,var(--lock-ui-y,0px),0)!important;
 will-change:transform,opacity;
 -webkit-mask-image:none!important;
 mask-image:none!important;
}
.wallpaper-canvas:before{
 content:'';
 position:absolute;
 inset:-40px;
 background:url('editorial/lock-scroll.webp') center 30%/cover no-repeat;
 filter:blur(40px) saturate(1.15) brightness(.85);
 opacity:calc(var(--lock-ui-alpha,0) * .95);
 z-index:-1;
 pointer-events:none;
 display:block!important;
 transition:opacity .15s ease-out;
}
.lock-stage{
 border-radius:18px!important;
 box-shadow:none!important;
 overflow:visible!important;
 width:fit-content!important;
 height:fit-content!important;
 max-width:min(94vw,calc(74svh * 1.594))!important;
 max-height:clamp(460px,74svh,760px)!important;
 position:relative!important;
 display:flex!important;
 align-items:center!important;
 justify-content:center!important;
 background:transparent!important;
}
.lock-stage::after{
 display:none!important;
}
.lock-stage video,.lock-stage>video,#lock-scroll-video{
 width:auto!important;
 max-width:min(94vw,calc(74svh * 1.594))!important;
 height:auto!important;
 max-height:clamp(460px,74svh,760px)!important;
 object-fit:contain!important;
 object-position:center center!important;
 border-radius:16px!important;
 display:block!important;
 margin:0 auto!important;
 transform:none!important;
 box-shadow:0 24px 64px rgba(0,0,0,.60),0 4px 18px rgba(0,0,0,.35),inset 0 0 0 1px rgba(255,255,255,.14)!important;
 -webkit-mask-image:none!important;
 mask-image:none!important;
}
.scroll-lyrics{
 position:absolute!important;
 left:50%!important;
 top:50%!important;
 transform:translate(-50%,-50%)!important;
 width:min(720px,88%)!important;
 height:clamp(260px,42svh,420px)!important;
 overflow:hidden!important;
 z-index:4!important;
 pointer-events:none;
 mask-image:linear-gradient(to bottom,transparent 0%,#000 10%,#000 90%,transparent 100%)!important;
 -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 10%,#000 90%,transparent 100%)!important;
}
.lyric-track{
 display:flex!important;
 flex-direction:column!important;
 align-items:center!important;
 padding:40px 0!important;
 will-change:transform;
 text-align:center!important;
}
.lyric-track p{
 font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro",sans-serif!important;
 font-size:clamp(17px,2.1vw,26px)!important;
 font-weight:700!important;
 letter-spacing:-.025em!important;
 line-height:1.45!important;
 margin:0 0 14px!important;
 text-align:center!important;
 color:#fff!important;
 text-shadow:0 2px 14px rgba(0,0,0,.85),0 0 28px rgba(0,0,0,.55)!important;
 white-space:nowrap!important;
 transition:opacity .15s ease-out,filter .15s ease-out,transform .15s ease-out;
 will-change:transform,opacity,filter;
}
.wallpaper-canvas figcaption,.live-lyrics-disclaimer{
 position:relative!important;
 bottom:auto!important;
 left:auto!important;
 right:auto!important;
 top:auto!important;
 transform:none!important;
 margin:0 auto!important;
 width:fit-content!important;
 max-width:min(92vw,860px)!important;
 white-space:nowrap!important;
 text-align:center!important;
 z-index:10!important;
 font-size:clamp(10.5px,1vw,12px)!important;
 font-weight:500!important;
 letter-spacing:.02em!important;
 color:rgba(255,242,248,.92)!important;
 background:rgba(20,10,22,.82)!important;
 border:1px solid rgba(255,210,230,.24)!important;
 backdrop-filter:blur(20px)!important;
 -webkit-backdrop-filter:blur(20px)!important;
 padding:6px 20px!important;
 border-radius:24px!important;
 box-shadow:0 6px 22px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.12)!important;
 text-shadow:0 1px 3px rgba(0,0,0,.6)!important;
 pointer-events:none;
}
@media (max-width:768px){
 .wallpaper-canvas figcaption,.live-lyrics-disclaimer{
  max-width:calc(100vw - 28px)!important;
  white-space:normal!important;
  text-align:center!important;
  font-size:10px!important;
  padding:5px 12px!important;
 }
}

/* 4. LOCK DETAILS (01 / 02 / 03) — Atmospheric Rose-to-Twilight Transition */
.lock-details-stage{
 position:relative;
 isolation:isolate;
 overflow:hidden;
 padding:48px 0 clamp(110px,14vw,180px);
 background:linear-gradient(180deg,#20101b 0%,#321b32 35%,#685978 64%,#acb9d4 85%,#dbe7f7 100%);
 margin-top:-1px;
 z-index:3;
}
.lock-details-stage::before,.lock-details-stage::after{content:none}
.lock-details-backdrop{
 position:absolute;
 inset:0;
 z-index:-1;
 overflow:hidden;
 pointer-events:none;
 mask-image:linear-gradient(180deg,transparent,#000 24%,#000 48%,transparent 88%);
 -webkit-mask-image:linear-gradient(180deg,transparent,#000 24%,#000 48%,transparent 88%);
}
.lock-details-backdrop img{
 width:100%;height:120%;object-fit:cover;object-position:center 38%;
 transform:translate3d(0,var(--rose-gallery-y,-4%),0) scale(1.05);
 filter:saturate(.8) brightness(.6);will-change:transform;
}
.lock-details-backdrop:after{content:'';position:absolute;inset:0;background:#411c3b66}
.lock-details{
 position:relative;
 z-index:2;
 padding:0!important;
 background:transparent!important;
 display:grid;
 grid-template-columns:repeat(3,minmax(0,1fr));
 gap:26px;
 width:min(1260px,calc(100% - 56px));
 margin:0 auto;
}
.rose-glass-card{
 display:flex;
 flex-direction:column;
 padding:32px 28px 28px;
 border-radius:30px;
 background:linear-gradient(155deg,rgba(96,28,49,.78),rgba(52,16,32,.86));
 border:1px solid rgba(255,184,204,.34);
 box-shadow:0 28px 65px rgba(24,7,16,.44),inset 0 1px 0 rgba(255,220,230,.36);
 backdrop-filter:blur(24px);
 -webkit-backdrop-filter:blur(24px);
 color:#ffeef3;
 transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease;
}
.rose-glass-card:hover{
 transform:translateY(-6px);
 border-color:rgba(255,205,220,.62);
 box-shadow:0 34px 75px rgba(24,7,16,.58),inset 0 1px 0 rgba(255,230,238,.5);
}
.rose-card-top{
 display:flex;
 align-items:center;
 justify-content:space-between;
 margin-bottom:20px;
}
.lock-details .detail-number{
 display:inline-grid;
 place-items:center;
 width:38px;
 height:38px;
 border-radius:12px;
 background:rgba(255,126,158,.2);
 border:1px solid rgba(255,172,194,.4);
 color:#ff9eb8!important;
 font-size:13px;
 font-weight:700;
 letter-spacing:.08em;
}
.rose-pill{
 font-size:9px;
 font-weight:600;
 letter-spacing:.16em;
 color:#f7b9cb;
 padding:6px 12px;
 border-radius:20px;
 background:rgba(255,160,186,.12);
 border:1px solid rgba(255,184,204,.24);
}
.lock-details h3{
 font-size:clamp(24px,2.3vw,30px);
 font-weight:600;
 letter-spacing:-.035em;
 color:#ffdce6!important;
 margin:0 0 12px;
 text-shadow:0 2px 16px rgba(180,45,82,.35);
}
.lock-details p{
 color:#f2bfd0!important;
 font-size:15px;
 line-height:1.65;
 margin:0 0 22px;
}
.rose-card-preview{
 margin-top:auto;
 border-radius:18px;
 overflow:hidden;
 border:1px solid rgba(255,192,210,.26);
 box-shadow:0 14px 32px rgba(14,4,10,.45);
 background:#1c0b13;
}
.rose-card-preview img{
 width:100%;
 height:148px;
 object-fit:cover;
 display:block;
}
.rose-card-lyric-chip{
 margin-top:auto;
 padding:22px 20px;
 border-radius:18px;
 background:linear-gradient(145deg,rgba(132,38,68,.55),rgba(42,12,26,.78));
 border:1px solid rgba(255,186,206,.3);
 box-shadow:inset 0 1px 0 rgba(255,220,232,.25);
}
.rose-card-lyric-chip span{
 display:block;
 font-size:20px;
 font-weight:650;
 letter-spacing:-.03em;
 background:linear-gradient(90deg,#fff 65%,#ff9eb8 100%);
 -webkit-background-clip:text;
 background-clip:text;
 color:transparent;
 margin-bottom:8px;
}
.rose-card-lyric-chip small{
 display:block;
 font-size:10px;
 letter-spacing:.14em;
 text-transform:uppercase;
 color:#f2adc2;
}

/* UNIVERSAL SCROLL-DRIVEN 3D CARD CHOREOGRAPHY FOR ALL BOTTOM SECTIONS */
.scroll-card{
 opacity:var(--sc-alpha,1);
 transform:translate3d(0,var(--sc-y,0px),0) scale(var(--sc-scale,1));
 will-change:transform,opacity;
}

/* 5. SOUND & DEVICE EQ OBSERVATORY (#sound) */
.sound-observatory{
 position:relative;
 isolation:isolate;
 max-width:none!important;
 width:100%;
 margin:0;
 padding:clamp(90px,9vw,140px) 0!important;
 background:linear-gradient(180deg,#dbe7f7 0%,#e7effa 45%,#dce8f8 100%);
 overflow:hidden;
}
.sound-backdrop{
 position:absolute;
 inset:0;
 z-index:-1;
 background:
  linear-gradient(180deg,#dbe7f7 0%,rgba(225,236,250,.76) 30%,rgba(225,236,250,.82) 75%,#dce8f7 100%),
  url('editorial/observatory/terrace.webp') center/cover no-repeat;
 opacity:.65;
 pointer-events:none;
}
.sound-copy-col{
 padding:42px 38px;
 border-radius:32px;
 background:linear-gradient(150deg,rgba(255,255,255,.90),rgba(238,246,255,.80));
 border:1px solid rgba(255,255,255,.95);
 box-shadow:0 24px 60px rgba(21,45,82,.08),inset 0 1px 0 #fff;
 backdrop-filter:blur(24px);
 -webkit-backdrop-filter:blur(24px);
 display:flex;
 flex-direction:column;
 justify-content:center;
}
.sound-copy-col .eyebrow{color:#2a5796;letter-spacing:.2em;font-weight:700}
#sound h2{
 font-size:clamp(36px,4.2vw,56px);
 line-height:1.04;
 letter-spacing:-.045em;
 color:#122544;
 margin:16px 0;
}
#sound h2 em{color:#2b63be;font-style:normal}
#sound .copy{
 font-size:15.5px;
 line-height:1.65;
 color:#476082;
 margin-bottom:28px;
}
.sound-features-stack{
 display:flex;
 flex-direction:column;
 gap:14px;
 margin:0 0 28px;
}
.sound-feature-row{
 display:flex;
 align-items:flex-start;
 gap:16px;
 padding:15px 18px;
 border-radius:18px;
 background:rgba(255,255,255,.72);
 border:1px solid rgba(195,218,248,.65);
 box-shadow:0 6px 18px rgba(20,45,80,.04);
 transition:transform .25s ease,background .25s ease,border-color .25s ease;
}
.sound-feature-row:hover{
 transform:translateY(-2px);
 background:#fff;
 border-color:rgba(160,195,240,.9);
 box-shadow:0 10px 24px rgba(20,45,80,.08);
}
.feature-icon-bubble{
 display:inline-grid;
 place-items:center;
 width:36px;
 height:36px;
 border-radius:11px;
 background:linear-gradient(135deg,#3169e0,#1d48b4);
 color:#fff;
 flex-shrink:0;
 box-shadow:0 4px 12px rgba(33,72,180,.28);
}
.feature-row-text strong{
 display:block;
 font-size:14px;
 font-weight:600;
 color:#142948;
 margin-bottom:3px;
}
.feature-row-text p{
 margin:0;
 font-size:12px;
 color:#5c7394;
 line-height:1.5;
}
.sound-copy-col .fine{
 font-size:11px;
 color:#6c829f;
 margin:0;
}

/* EQ STAGE & DYNAMIC ISLAND NOTCH */
#sound .eq-stage{
 background:linear-gradient(160deg,#0a1526,#122544 55%,#183460);
 border:1px solid rgba(190,220,255,.35);
 box-shadow:0 34px 90px rgba(8,20,44,.35),inset 0 1px 0 rgba(255,255,255,.2);
 color:#f2f7ff;
 padding:28px 24px 24px;
 border-radius:34px;
 display:flex;
 flex-direction:column;
 gap:20px;
 position:relative;
}

/* ── Dynamic Island Notch Housing ── */
.notch-island-stage{
 display:flex;
 justify-content:center;
 align-items:flex-start;
 padding:0 0 4px;
 position:relative;
}
.macbook-notch-housing{
 position:relative;
 display:flex;
 justify-content:center;
}
.dynamic-island-capsule{
 height:36px;
 width:132px;
 background:#000;
 border-radius:0 0 18px 18px;
 display:flex;
 align-items:center;
 justify-content:space-between;
 padding:0 14px;
 box-shadow:0 12px 30px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.1);
 transition:width .72s cubic-bezier(.16,1,.3,1),height .4s ease,padding .5s ease,border-radius .4s ease;
 overflow:hidden;
 cursor:default;
}
.dynamic-island-capsule.is-connected{
 width:324px;
 height:40px;
 border-radius:20px;
 padding:0 16px;
 box-shadow:0 16px 36px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.16);
}
.dynamic-island-capsule.is-disconnecting{
 width:300px;
 height:40px;
 border-radius:20px;
 padding:0 16px;
 box-shadow:0 12px 30px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.12);
}
.di-ear{
 display:flex;
 align-items:center;
 gap:8px;
}
.di-airpods-3d{
 width:24px;
 height:24px;
 display:grid;
 place-items:center;
 perspective:500px;
}
.airpod-model{
 width:100%;
 height:100%;
 display:grid;
 place-items:center;
 transform-style:preserve-3d;
}
.airpod-svg{
 width:18px;
 height:24px;
 transform-origin:center center;
 filter:drop-shadow(0 2px 4px rgba(0,0,0,.4));
}
.dynamic-island-capsule.is-connected .airpod-svg{
 animation:airpod-spin-3d 2.8s cubic-bezier(.22,.8,.2,1) 1 forwards;
}
.dynamic-island-capsule.is-disconnecting .airpod-svg{
 opacity:.45;
 filter:grayscale(.8) drop-shadow(0 1px 2px rgba(0,0,0,.4));
}
@keyframes airpod-spin-3d{
 0%{transform:rotateY(0deg) scale(.92)}
 45%{transform:rotateY(190deg) scale(1.1)}
 75%{transform:rotateY(350deg) scale(1.02)}
 100%{transform:rotateY(360deg) scale(1)}
}
.di-status-badge{
 width:6px;
 height:6px;
 border-radius:50%;
 background:#32d74b;
 box-shadow:0 0 8px #32d74b;
 opacity:0;
 transition:opacity .4s ease,background .3s ease,box-shadow .3s ease;
}
.dynamic-island-capsule.is-connected .di-status-badge{opacity:1}
.dynamic-island-capsule.is-disconnecting .di-status-badge{
 opacity:1;
 background:#ff9f0a;
 box-shadow:0 0 8px #ff9f0a;
}
.di-content{
 display:flex;
 flex-direction:column;
 align-items:center;
 justify-content:center;
 opacity:0;
 transform:scale(.9);
 transition:opacity .4s ease .1s,transform .4s ease .1s;
 white-space:nowrap;
}
.dynamic-island-capsule.is-connected .di-content,
.dynamic-island-capsule.is-disconnecting .di-content{
 opacity:1;
 transform:scale(1);
}
.di-device-title{
 font-size:12px;
 font-weight:600;
 color:#fff;
 letter-spacing:-.01em;
 line-height:1.2;
}
.di-device-sub{
 font-size:9px;
 color:#a1a1a6;
 letter-spacing:.02em;
 line-height:1.2;
}
.dynamic-island-capsule.is-disconnecting .di-device-sub{
 color:#ff9f0a;
}
.di-waveform{
 display:flex;
 align-items:center;
 gap:2.5px;
 height:14px;
}
.di-waveform span{
 width:2.5px;
 border-radius:2px;
 background:#32d74b;
 height:4px;
 transition:height .3s ease;
}
.dynamic-island-capsule.is-connected .di-waveform span:nth-child(1){animation:di-pulse 1.1s ease-in-out infinite alternate}
.dynamic-island-capsule.is-connected .di-waveform span:nth-child(2){animation:di-pulse 0.9s ease-in-out infinite alternate .15s}
.dynamic-island-capsule.is-connected .di-waveform span:nth-child(3){animation:di-pulse 1.3s ease-in-out infinite alternate .3s}
.dynamic-island-capsule.is-connected .di-waveform span:nth-child(4){animation:di-pulse 0.8s ease-in-out infinite alternate .1s}
.dynamic-island-capsule.is-disconnecting .di-waveform span{
 height:2px!important;
 opacity:.3;
 animation:none!important;
}
@keyframes di-pulse{
 0%{height:4px;opacity:.6}
 100%{height:14px;opacity:1}
}

/* ── Authentic Apple Music Equalizer Window matching native-music-equalizer.png ── */
.native-eq-window{
 background:#202022;
 border-radius:14px;
 border:1px solid rgba(255,255,255,.15);
 box-shadow:0 24px 60px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.18);
 overflow:hidden;
 display:flex;
 flex-direction:column;
 width:100%;
}
.native-eq-titlebar{
 background:linear-gradient(180deg,#38383c,#2c2c30);
 border-bottom:1px solid #1a1a1c;
 padding:9px 14px;
 display:flex;
 align-items:center;
 position:relative;
}
.native-eq-traffic{
 display:flex;
 align-items:center;
 gap:7px;
}
.native-eq-traffic span{
 width:11px;
 height:11px;
 border-radius:50%;
 display:block;
}
.btn-close{background:#ff5f57;box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.btn-min{background:#febc2e;box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.btn-zoom{background:#28c840;box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.btn-zoom.is-disabled{background:#505054!important;box-shadow:inset 0 0 0 1px rgba(0,0,0,.25);opacity:.7}
.native-eq-title{
 position:absolute;
 left:50%;
 transform:translateX(-50%);
 font-size:13px;
 font-weight:600;
 color:#ececec;
 letter-spacing:-.01em;
}
.native-eq-toolbar{
 background:#242426;
 border-bottom:1px solid rgba(255,255,255,.07);
 padding:10px 18px;
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:16px;
}
.native-eq-toggle{
 display:flex;
 align-items:center;
 gap:8px;
 font-size:12.5px;
 font-weight:500;
 color:#f2f2f7;
 cursor:pointer;
 user-select:none;
}
.native-eq-toggle input{display:none}
.checkbox-visual{
 width:16px;
 height:16px;
 border-radius:4px;
 background:#fa2d55;
 border:1px solid #ff476d;
 display:grid;
 place-items:center;
 position:relative;
 box-shadow:0 1px 3px rgba(250,45,85,.35);
}
.checkbox-visual:after{
 content:'✓';
 font-size:11px;
 color:#fff;
 font-weight:800;
}
.native-eq-preset-picker{
 display:flex;
 align-items:center;
 justify-content:space-between;
 min-width:140px;
 padding:5px 12px;
 background:#2f2f33;
 border:1px solid rgba(255,255,255,.14);
 border-radius:6px;
 font-size:12px;
 color:#fff;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.preset-label{font-weight:500;color:#f2f2f7}
.preset-chevrons{font-size:11px;color:#8e8e93;margin-left:8px}

/* Sliders Grid & Guides matching native Apple Music */
.native-eq-grid{
 padding:22px 18px 18px;
 display:flex;
 align-items:center;
 gap:12px;
 background:#1c1c1e;
 position:relative;
}
.eq-grid-guides{
 position:absolute;
 left:18px;
 right:18px;
 top:22px;
 height:140px;
 pointer-events:none;
 z-index:0;
}
.guide-line{
 position:absolute;
 left:0;
 right:0;
 height:1px;
 background:rgba(255,255,255,.06);
}
.guide-plus12{top:12px}
.guide-plus6{top:41px}
.guide-zero{top:70px;background:rgba(255,255,255,.18)!important}
.guide-minus6{top:99px}
.guide-minus12{top:128px}

.eq-band-col{
 display:flex;
 flex-direction:column;
 align-items:center;
 gap:6px;
 flex:1;
 position:relative;
 z-index:1;
}
.eq-band-db{
 font-size:8px;
 color:#636366;
 font-weight:500;
}
.eq-band-hz{
 font-size:9px;
 font-weight:600;
 color:#98989d;
 margin-top:2px;
}
.eq-slider-channel{
 width:28px;
 height:140px;
 background:transparent;
 position:relative;
 display:flex;
 justify-content:center;
}
.eq-slider-channel:before{
 content:'';
 position:absolute;
 top:12px;
 bottom:12px;
 left:calc(50% - 1px);
 width:2px;
 background:#111113;
 border-radius:1px;
}
.eq-center-line{
 position:absolute;
 top:70px;
 left:2px;
 right:2px;
 height:1px;
 background:rgba(255,255,255,.2);
 z-index:1;
}

/* Authentic Pink/Red Fill Stems matching Apple Music */
.eq-stem{
 position:absolute;
 left:calc(50% - 1.25px);
 width:2.5px;
 background:#fa2d55;
 border-radius:1px;
 z-index:1;
 transition:height .65s cubic-bezier(.22,.8,.2,1),top .65s cubic-bezier(.22,.8,.2,1);
 pointer-events:none;
}

/* Authentic Circular Knob with Pink Core matching native-music-equalizer.png */
.eq-slider-thumb{
 position:absolute;
 top:0;
 left:calc(50% - 7px);
 width:14px;
 height:14px;
 border-radius:50%;
 background:#fa2d55;
 border:2px solid #5a5a60;
 box-shadow:0 2px 6px rgba(0,0,0,.6),inset 0 1px 1px rgba(255,255,255,.3);
 z-index:2;
 transition:transform .65s cubic-bezier(.22,.8,.2,1);
 cursor:pointer;
}
.preamp-col .eq-slider-thumb{
 transition:transform .65s cubic-bezier(.22,.8,.2,1);
}
.eq-col-divider{
 width:1px;
 height:140px;
 background:rgba(255,255,255,.08);
 margin:0 4px;
 position:relative;
 z-index:1;
}
.eq-bands-group{
 display:flex;
 flex:1;
 justify-content:space-between;
 position:relative;
 z-index:1;
}

/* Status Bar & Switches */
.native-eq-statusbar{
 background:#242426;
 border-top:1px solid rgba(255,255,255,.07);
 padding:11px 18px;
 display:flex;
 align-items:center;
 justify-content:space-between;
 flex-wrap:wrap;
 gap:12px;
}
.eq-device-switcher{
 display:flex;
 background:#1a1a1c;
 border:1px solid rgba(255,255,255,.12);
 border-radius:10px;
 padding:3px;
 gap:3px;
}
.dev-btn{
 display:inline-flex;
 align-items:center;
 gap:7px;
 padding:6px 13px;
 border-radius:7px;
 border:0;
 background:transparent;
 color:#8e8e93;
 font-size:11px;
 font-weight:500;
 cursor:pointer;
 transition:all .25s ease;
}
.dev-btn[aria-pressed=true]{
 background:#38383c;
 color:#fff;
 box-shadow:0 2px 8px rgba(0,0,0,.35);
}
.eq-status-meta{
 display:flex;
 align-items:center;
 gap:14px;
}
.eq-live-pill{
 font-size:11px;
 color:#32d74b;
 display:inline-flex;
 align-items:center;
 gap:6px;
 font-weight:500;
}
.live-dot{
 width:6px;
 height:6px;
 border-radius:50%;
 background:#32d74b;
 box-shadow:0 0 6px #32d74b;
}
.eq-autoplay-toggle{
 border:1px solid rgba(255,255,255,.2);
 border-radius:16px;
 background:rgba(255,255,255,.08);
 color:#e5e5ea;
 font-size:11px;
 font-weight:500;
 padding:5px 12px;
 cursor:pointer;
 transition:background .2s ease;
}
.eq-autoplay-toggle:hover{background:rgba(255,255,255,.15)}
#sound .eq-stage>.fine{
 font-size:11px;
 color:#8ea7cc;
 text-align:center;
 margin:0;
}

/* 6. PERSONALIZE & SCROLL-PARALLAX CLOCK DEPTH (#personalize) — Fixed Modern/Rounded/Serif stacking */
.personalize{
 background:linear-gradient(180deg,#dce8f8 0%,#eaf1fb 45%,#dde8f7 100%)!important;
 padding-top:130px;
}
.personalize-intro h2{color:#152c4e}
.personalize-intro h2 em{color:#4a70ad}
.personalize-intro>p:last-child{color:#536b88}
.depth-feature{
 padding:34px;
 border-radius:36px;
 background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(226,237,252,.72));
 border:1px solid rgba(255,255,255,.92);
 box-shadow:0 28px 70px rgba(19,42,78,.1),inset 0 1px 0 #fff;
 backdrop-filter:blur(22px);
 margin-bottom:90px;
}
.depth-scene{
 border-radius:26px;
 box-shadow:0 24px 55px rgba(15,34,64,.22);
 border:1px solid rgba(255,255,255,.65);
}
.depth-time{
 transform:translate3d(0,var(--depth-clock-y,0px),0);
 will-change:transform;
 text-shadow:0 8px 28px rgba(12,28,52,.32);
}
.depth-foreground{
 transform:translate3d(0,var(--depth-fg-y,0px),0) scale(1.03);
 will-change:transform;
}
.depth-copy-card{padding-right:16px}
.depth-chip{
 display:inline-block;
 font-size:9px;
 font-weight:700;
 letter-spacing:.16em;
 color:#2b57c0;
 background:rgba(53,99,223,.12);
 border:1px solid rgba(53,99,223,.24);
 padding:6px 12px;
 border-radius:20px;
 margin-bottom:14px;
}
.depth-feature h3{color:#162d50}
.depth-feature p{color:#4e6582}
.landscape-sticky{
 background:#101d2e;
}
.clock-capture{
 position:absolute!important;
 inset:0!important;
 overflow:hidden;
 background:
  radial-gradient(ellipse at 50% 40%,rgba(44,78,122,.42),rgba(12,22,36,.92)),
  url('editorial/landscape.webp') center/cover no-repeat;
}
.clock-capture:before{
 content:'';
 position:absolute;
 inset:-30px;
 background:url('editorial/clock-modern.webp') center/cover no-repeat;
 filter:blur(38px) brightness(.55);
 opacity:.85;
 z-index:0;
}
.clock-capture img{
 position:absolute!important;
 inset:0!important;
 z-index:1!important;
 width:min(92vw,1460px)!important;
 height:min(80svh,780px)!important;
 margin:auto!important;
 object-fit:cover!important;
 border-radius:28px;
 box-shadow:0 0 0 1px rgba(255,255,255,.22),0 35px 90px rgba(4,10,22,.65);
 transition:opacity .45s ease!important;
}
.landscape-caption{
 z-index:3!important;
}

/* 7. TOOLS SHOWCASE CAROUSEL & PORTAL BANNER (#app-tools) — Uncropped full UI screenshots */
.tools-section{
 background:linear-gradient(180deg,#dde8f7 0%,#eaf1fb 50%,#e1ebf8 100%)!important;
 padding-block:135px 90px;
}
.showcase-card{
 border-radius:32px!important;
 background:linear-gradient(160deg,#0f2342,#1a3763)!important;
 border:1px solid rgba(195,220,255,.35)!important;
 box-shadow:0 28px 65px rgba(13,31,60,.22),inset 0 1px 0 rgba(255,255,255,.25)!important;
 overflow:hidden;
}
/* Each card is the complete Mac capture, edge to edge. */
.showcase-card .showcase-scene{
 display:block!important;
 height:auto!important;
 min-height:0!important;
 aspect-ratio:1320/790!important;
 padding:0!important;
 overflow:hidden;
 background:#8895a3!important;
}
.showcase-card .showcase-scene>img{
 display:block;
 width:100%!important;
 height:auto!important;
 max-width:none!important;
 max-height:none!important;
 padding:0!important;
 border-radius:0!important;
 box-shadow:none!important;
 object-fit:contain!important;
 background:none!important;
}
.showcase-caption{
 background:linear-gradient(180deg,rgba(12,26,50,.92),rgba(9,20,40,.98))!important;
 border-top:1px solid rgba(196,220,255,.18);
 color:#f4f8ff!important;
 padding:26px 36px 30px!important;
}
.feature-caption-label{color:#8eb5f0!important;font-weight:600}
.showcase-card h3{color:#fff!important}
.showcase-card p{color:#c4d7f2!important}
.showcase-dots,.showcase-play,.gallery-arrow{
 background:rgba(255,255,255,.82)!important;
 border:1px solid rgba(180,204,238,.6)!important;
 box-shadow:0 10px 26px rgba(20,44,82,.08);
 backdrop-filter:blur(16px)!important;
 color:#183258!important;
}
.showcase-dots [aria-pressed=true] span:after{background:#2d59d4!important}
.directory-link{
 position:relative;
 overflow:hidden;
 padding:38px 44px!important;
 border-radius:30px!important;
 background:linear-gradient(135deg,#0e2242,#1c3f74 60%,#285599)!important;
 border:1px solid rgba(196,222,255,.38)!important;
 box-shadow:0 28px 65px rgba(13,31,60,.24),inset 0 1px 0 rgba(255,255,255,.28)!important;
 color:#fff!important;
}
.directory-kicker{
 display:block;
 font-size:10px;
 font-weight:700;
 letter-spacing:.18em;
 color:#9ec2f7;
 margin-bottom:8px;
}
.directory-link h3{color:#fff!important;font-size:clamp(22px,2.4vw,30px)!important;margin:0 0 6px}
.directory-link p{color:#cfe0fa!important;font-size:15px!important;margin:0}
.directory-link .circle-arrow{
 background:rgba(255,255,255,.16);
 border:1px solid rgba(255,255,255,.32);
 color:#fff;
 width:52px;
 height:52px;
 display:grid;
 place-items:center;
 border-radius:50%;
 font-size:20px;
}

/* 8. FEATURE MAP — 6-CARD VISUAL BENTO GRID (.feature-map) */
.feature-map{
 padding-block:95px 140px!important;
 display:block!important;
}
.feature-map-heading{
 display:flex;
 flex-wrap:wrap;
 align-items:flex-end;
 justify-content:space-between;
 gap:24px;
 margin-bottom:46px;
}
.feature-map-heading h2{
 font-size:clamp(42px,4.8vw,68px)!important;
 color:#152c4e;
 margin:10px 0 0;
}
.feature-map-heading p:not(.eyebrow){
 color:#4f6684!important;
 font-size:17px!important;
 margin:12px 0 0;
}
.map-all{
 display:inline-flex!important;
 align-items:center;
 gap:10px;
 padding:13px 22px!important;
 border-radius:30px;
 background:rgba(255,255,255,.86);
 border:1px solid rgba(186,208,240,.8);
 box-shadow:0 10px 24px rgba(20,44,82,.07);
 color:#1e4294!important;
 font-weight:600;
 font-size:13px!important;
 text-decoration:none;
}
.feature-map-grid{
 display:grid!important;
 grid-template-columns:repeat(3,minmax(0,1fr))!important;
 gap:22px!important;
}
.feature-map-item{
 display:flex!important;
 flex-direction:column!important;
 align-items:stretch!important;
 padding:24px!important;
 border-radius:28px!important;
 border:1px solid rgba(255,255,255,.92)!important;
 background:linear-gradient(150deg,rgba(255,255,255,.88),rgba(227,238,253,.74))!important;
 box-shadow:0 20px 50px rgba(21,45,82,.09),inset 0 1px 0 #fff!important;
 backdrop-filter:blur(18px);
 text-decoration:none;
 overflow:hidden;
 transition:transform .28s ease,box-shadow .28s ease!important;
}
.feature-map-item:hover{
 transform:translateY(-6px)!important;
 box-shadow:0 28px 64px rgba(21,45,82,.16),inset 0 1px 0 #fff!important;
}
.map-item-top{
 display:flex;
 align-items:center;
 justify-content:space-between;
 margin-bottom:16px;
}
.map-icon{
 width:44px!important;
 height:44px!important;
 border-radius:14px!important;
 background:linear-gradient(145deg,#4f7df0,#2952be)!important;
 color:#fff!important;
 box-shadow:0 8px 18px rgba(41,82,190,.28),inset 0 1px 0 rgba(255,255,255,.45);
}
.feature-map-item:nth-child(2n) .map-icon{
 background:linear-gradient(145deg,#4895b8,#276288)!important;
}
.map-item-top b{
 width:34px;
 height:34px;
 border-radius:50%;
 display:grid;
 place-items:center;
 background:rgba(21,45,82,.06);
 color:#2b4c7e!important;
 font-size:14px;
}
.map-item-copy h3{
 font-size:20px!important;
 font-weight:620!important;
 color:#152c4e;
 margin:0 0 6px!important;
}
.map-item-copy p{
 font-size:13.5px!important;
 color:#566d8a!important;
 margin:0 0 18px!important;
}
.map-item-thumb{
 margin-top:auto;
 border-radius:16px;
 overflow:hidden;
 background:#10223e;
 border:1px solid rgba(180,204,238,.5);
 box-shadow:0 12px 28px rgba(14,32,62,.16);
}
.map-item-thumb img{
 width:100%;
 height:136px;
 object-fit:cover;
 display:block;
 transition:transform .35s ease;
}
.feature-map-item:hover .map-item-thumb img{
 transform:scale(1.04);
}

/* 9. LID FOLD TELEMETRY & 4-SWITCH MECHANICAL KEYBOARD STUDIO (#lid-fold & #experience) */
.fold-story{
 background:
  radial-gradient(ellipse at 50% 25%,rgba(255,255,255,.85),transparent 62%),
  linear-gradient(180deg,#e1ebf8 0%,#cde0f5 55%,#dce8f7 100%)!important;
}
.fold-telemetry-pill{
 display:inline-flex;
 align-items:center;
 gap:8px;
 padding:6px 14px;
 border-radius:20px;
 background:rgba(16,36,68,.86);
 border:1px solid rgba(190,218,255,.35);
 color:#b8d6ff;
 font-size:10px;
 font-weight:700;
 letter-spacing:.16em;
 margin-bottom:12px;
 box-shadow:0 8px 22px rgba(14,32,62,.18);
}
.keyboard-story{
 background:
  linear-gradient(180deg,rgba(224,236,249,.88),rgba(212,228,246,.82)),
  url('editorial/observatory/gallery.webp') center/cover no-repeat!important;
}
.keyboard-sticky article{
 padding:20px 0!important;
}
.keyboard-sticky h2{
 color:#152c4e;
 font-size:clamp(38px,4.4vw,64px)!important;
 margin:10px 0 12px!important;
}
.keyboard-sticky h2 em{color:#3b63b0!important}
.keyboard-invitation{
 color:#48607e!important;
 margin:0 0 16px!important;
 font-size:16px!important;
}
.switch-profiles{
 display:inline-flex;
 flex-wrap:wrap;
 justify-content:center;
 gap:8px;
 padding:6px;
 border-radius:40px;
 background:rgba(16,35,66,.82);
 border:1px solid rgba(195,220,255,.35);
 box-shadow:0 16px 38px rgba(15,34,64,.18);
 backdrop-filter:blur(16px);
 margin-bottom:16px;
}
.switch-pill{
 border:0;
 background:transparent;
 color:#c5dbf7;
 padding:9px 16px;
 border-radius:30px;
 font-size:12.5px;
 font-weight:600;
 cursor:pointer;
 transition:background .2s ease,color .2s ease,box-shadow .2s ease;
}
.switch-pill[aria-pressed=true]{
 background:linear-gradient(135deg,#ffffff,#e6f0ff);
 color:#142b50;
 box-shadow:0 4px 14px rgba(0,0,0,.22);
}
.keyboard-platform{
 padding:8px 15px 14px!important;
}
.keyboard-platform .mac-keyboard{
 background:linear-gradient(155deg,#f8fbff,#c2d0e3)!important;
 box-shadow:inset 0 0 0 1px #fff,0 4px 0 #899bb4,0 38px 70px -20px rgba(17,37,68,.38)!important;
}
.keyboard-platform .mac-key.down{
 background:linear-gradient(135deg,#3867df,#2247ad)!important;
 color:#fff!important;
 box-shadow:0 0 22px rgba(56,103,223,.55)!important;
}
.keyboard-sticky .demo-controls{
 margin-top:14px!important;
}
.keyboard-sticky .demo-controls label{
 display:inline-flex;
 align-items:center;
 gap:14px;
 padding:8px 20px;
 border-radius:30px;
 background:rgba(255,255,255,.85);
 border:1px solid rgba(186,208,240,.8);
 box-shadow:0 10px 26px rgba(18,40,76,.08);
 font-size:12px;
 font-weight:600;
 color:#1d365c;
}
.keyboard-sticky .demo-controls input[type=range]{accent-color:#2f5cd6}

/* 10. MORE APPS 3-COLUMN BENTO, HORIZON DOWNLOAD FINALE & FROSTED FAQ (#more-apps, #download, #faq) */
.more-apps-section{padding-block:125px 110px!important}
.more-apps-grid{
 display:grid!important;
 grid-template-columns:repeat(3,minmax(0,1fr))!important;
 gap:24px!important;
 max-width:1200px!important;
 margin:0 auto!important;
}
.app-card{
 display:flex!important;
 flex-direction:column!important;
 align-items:stretch!important;
 justify-content:space-between;
 padding:30px 28px!important;
 border-radius:28px!important;
 background:linear-gradient(150deg,rgba(255,255,255,.88),rgba(228,239,253,.74))!important;
 border:1px solid rgba(255,255,255,.94)!important;
 box-shadow:0 22px 52px rgba(19,42,78,.09),inset 0 1px 0 #fff!important;
 backdrop-filter:blur(18px);
 transition:transform .28s ease,box-shadow .28s ease;
}
.app-card:hover{
 transform:translateY(-6px);
 box-shadow:0 30px 66px rgba(19,42,78,.16),inset 0 1px 0 #fff!important;
}
.app-card-top{
 display:flex;
 align-items:center;
 justify-content:space-between;
 margin-bottom:20px;
}
.app-card img{
 width:68px!important;
 height:68px!important;
 border-radius:16px!important;
 box-shadow:0 12px 26px rgba(15,34,64,.18);
 margin-bottom:0!important;
}
.app-platform-pill{
 font-size:10px;
 font-weight:700;
 letter-spacing:.12em;
 text-transform:uppercase;
 color:#2b55b8;
 background:rgba(47,92,214,.1);
 border:1px solid rgba(47,92,214,.22);
 padding:6px 12px;
 border-radius:20px;
}
.app-card-body h3{
 font-size:22px!important;
 color:#152c4e;
 margin:0 0 10px!important;
}
.app-card-body p{
 font-size:14.5px!important;
 color:#526985!important;
 line-height:1.65!important;
 margin:0 0 24px!important;
 max-width:none!important;
}
.app-store-pill{
 display:inline-flex;
 align-items:center;
 justify-content:space-between;
 padding:12px 18px;
 border-radius:20px;
 background:rgba(21,45,82,.06);
 color:#1b3e8a!important;
 font-weight:600;
 font-size:13px!important;
 text-decoration:none;
 margin-top:auto;
}
.app-card:hover .app-store-pill{
 background:#2f5cd6;
 color:#fff!important;
}

.download{
 position:relative;
 isolation:auto!important;
 overflow:hidden;
 background:#0c1e3c url('editorial/observatory/horizon.webp') center/cover no-repeat!important;
 padding-block:130px 105px!important;
 border-top:1px solid rgba(255,255,255,.35);
}
.download:before{
 content:''!important;
 position:absolute!important;
 inset:0!important;
 width:auto!important;
 height:auto!important;
 border-radius:0!important;
 background:linear-gradient(105deg,rgba(10,24,48,.90) 0%,rgba(16,36,70,.78) 55%,rgba(22,48,90,.70) 100%)!important;
 pointer-events:none;
 z-index:0;
}
.download>.wrap{
 position:relative;
 z-index:2;
}
.download-orbit{display:none!important}
.download h2 em{color:#b8d2f8!important}
.download .eyebrow,.download .fine,.setup span{color:#b4c9e6!important}
.download-right p,.setup p{color:#d2e2f8!important}
.download-monogram{
 background:none!important;
 box-shadow:none!important;
 border:0!important;
 overflow:visible;
}
.download-monogram img{
 display:block;
 width:100%;
 height:100%;
 object-fit:contain;
 filter:drop-shadow(0 14px 26px rgba(0,0,0,.38));
}
.setup{
 display:grid!important;
 grid-template-columns:repeat(3,minmax(0,1fr))!important;
 gap:22px!important;
 border:0!important;
 margin-top:64px!important;
 padding-top:0!important;
}
.setup>div{
 padding:28px 26px!important;
 border-radius:24px;
 background:linear-gradient(150deg,rgba(14,32,62,.88),rgba(9,22,44,.92));
 border:1px solid rgba(196,222,255,.32)!important;
 box-shadow:0 20px 48px rgba(5,14,30,.38),inset 0 1px 0 rgba(255,255,255,.22);
}
.setup h3{color:#fff!important;margin:10px 0 8px}

.faq{
 padding-block:120px 130px!important;
}
.faq details{
 margin-bottom:14px;
 padding:22px 26px!important;
 border-radius:22px;
 background:linear-gradient(145deg,rgba(255,255,255,.88),rgba(230,240,253,.74));
 border:1px solid rgba(255,255,255,.94)!important;
 box-shadow:0 14px 36px rgba(19,42,78,.07),inset 0 1px 0 #fff;
 backdrop-filter:blur(16px);
}
.faq summary{
 font-weight:600;
 color:#152c4e;
}
.faq details p{color:#4f6684}
.footer{
 background:linear-gradient(180deg,#dce8f7,#d0dff3)!important;
 border-top:1px solid rgba(255,255,255,.75);
}

@media(max-width:1020px){
 .zenith-atmosphere-inner{grid-template-columns:1fr;gap:32px}
 .atmosphere-copy{max-width:600px}
 .lock-details,.feature-map-grid,.more-apps-grid,.setup{grid-template-columns:1fr!important}
}
@media(max-width:700px){
 .observatory-arrival{background-position:58% center}
 .observatory-arrival:after{background:#dceafa8c}
 .cloud-layer{width:100vw;height:45vw}
 .cloud-left{left:-40%;bottom:-5%}
 .cloud-right{right:-55%;top:12%}
 .kinetic-story{height:140svh}
 .atmosphere-cards{grid-template-columns:1fr}
 .atmosphere-copy h2{font-size:44px}
 .lock-intro-overlay h2{font-size:46px}

}
@media(prefers-reduced-motion:reduce){
 .observatory-arrival,.lock-details-backdrop img,.atmo-ui-box,.scroll-card{transform:none!important;opacity:1!important}
 .kinetic-story{height:auto}
 .kinetic-sticky{position:relative;height:auto;min-height:65svh}
 .kinetic-o{transform:none;margin:0}
 .cloud-layer{will-change:auto;transform:none}
 .opening-product{will-change:auto}
 .wallpaper-canvas{opacity:1!important;transform:none!important}
 .lock-intro-overlay{position:relative;padding:80px 24px 40px}
}

/* Focused landing polish: preserve the existing sticky geometry and scroll owners. */
.lock-intro-overlay:before{content:'';position:absolute;width:min(960px,100%);height:70%;background:radial-gradient(ellipse,#fff0e6db 0%,#fff0e69c 45%,transparent 72%);z-index:-1;pointer-events:none;opacity:var(--lock-copy-veil,1)}
.lock-intro-overlay .copy{color:#381d2a;text-shadow:0 1px 12px #fff5ec}
.lock-intro-overlay .fine{color:#452335;font-weight:500;text-shadow:0 1px 10px #fff5ec}
.wallpaper-canvas:before{opacity:.95;transition:none;filter:blur(54px) saturate(.9) brightness(.65);mask-image:linear-gradient(#000 60%,transparent 100%);-webkit-mask-image:linear-gradient(#000 60%,transparent 100%)}
.lock-stage{overflow:hidden!important;border-radius:24px!important;transform:scale(var(--lock-ui-scale,1));mask-image:linear-gradient(90deg,transparent,#000 2.2%,#000 97.8%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 2.2%,#000 97.8%,transparent)}
.lock-stage video,#lock-scroll-video{box-shadow:none!important}
.wallpaper-sticky::after{opacity:1}
.native-eq-window{width:100%;min-width:0}
.eq-slider-thumb{cursor:default}
.eq-band-col{min-width:0}
.eq-band-hz{font-size:11px}
.eq-live-pill{font-variant-numeric:tabular-nums}
.eq-status-meta{flex-wrap:wrap;gap:10px}
@media(max-width:700px){.native-eq-statusbar{flex-wrap:wrap;gap:14px}.eq-bands-group{gap:2px}.eq-band-db{font-size:9px}.eq-band-hz{font-size:9px}.native-eq-grid{padding-inline:10px}.lock-stage{border-radius:16px!important}}
@media(prefers-reduced-motion:reduce){.eq-slider-thumb,.eq-stem,.preamp-thumb,.lyric-track p{transition:none!important}.lock-stage{transform:none}.lock-intro-overlay:before{opacity:1}}


.eq-band-db{white-space:nowrap;color:#a7a7b0}
.eq-slider-channel:before{background:#09090c;box-shadow:1px 0 #ffffff12}