/* Familiar apps stay above the night-sky dissolve while leaving this chapter. */
.chapter-track.apps-track { position:relative;z-index:1; }
.chapter-track .apps-feature { grid-template-columns:.87fr 1.3fr;gap:52px; }
.apps-feature .chapter-copy { position:relative;z-index:2;isolation:isolate; }
.apps-feature .chapter-copy::before { content:'';position:absolute;z-index:-1;inset:-80px -75px;background:radial-gradient(ellipse,#edf5f2f2 15%,#edf5f2bd 48%,#edf5f200 73%);pointer-events:none; }
.feature.apps-feature .chapter-copy h2 { color:#102f3b; }
.feature.apps-feature .chapter-copy h2 em { color:#294e5d; }
.feature.apps-feature .chapter-copy>p { color:#183e4b;font-weight:500; }
.apps-feature .chapter-label { color:#355361; }
.apps-feature .chapter-copy h2 em { white-space:nowrap; }
.apps-feature .apps-scene { height:466px;min-width:0;position:relative;isolation:isolate; }
.apps-columns { position:absolute;inset:110px 6% 125px 12%;display:flex;align-items:flex-end;gap:21px; }
.apps-column { flex:1;min-width:0;position:relative;border-radius:18px 18px 5px 5px; }
.apps-column::after { content:'';position:absolute;bottom:-3px;left:4%;right:4%;height:5px;background:#294a5833;border-radius:50%;filter:blur(5px);z-index:-1; }
.apps-column-search { height:20%; }
.apps-column-write { height:30%; }
.apps-column-embel { height:100%; }
.apps-column-surface { position:absolute;inset:0;border:1px solid #f7ffffbd;border-radius:inherit;background:linear-gradient(110deg,#e5faff3d,#ffffff14 24%,#d7f3ff12 72%,#d0f1ff5c);backdrop-filter:blur(5px) saturate(1.35);-webkit-backdrop-filter:blur(5px) saturate(1.35);box-shadow:inset 3px 0 6px #fff8,inset -3px 0 8px #5c87904a,0 12px 20px -15px #2047535e;overflow:hidden;isolation:isolate; }
.apps-column-surface::before { content:'';position:absolute;inset:0 0 auto;height:10px;border-radius:16px 16px 50% 50%;border-top:1px solid #fff;border-bottom:1px solid #c5dde699;background:linear-gradient(#f8ffffcc,#d6e5e96b); }
.apps-column-write .apps-column-surface { background:linear-gradient(110deg,#edffff59,#b4e7fc16 24%,#dbf4ff18 72%,#c5f0ff61); }
.apps-column-embel .apps-column-surface { border-color:#d3e7edb3;background:linear-gradient(135deg,#6a98ad,#264c67 85%);box-shadow:inset 3px 0 8px #d3eeef70,inset -4px 0 9px #183c6899,0 16px 24px -15px #24485c7a; }
.apps-column-embel .apps-column-surface::before { z-index:2;border-color:#e6f4f0a3;background:linear-gradient(#adcfdbc7,#47788a70); }
.apps-column-sky { position:absolute;inset:0;background:linear-gradient(#5aa2cf08,#10518724),url('/assets/weather-clouds.png') 42% center / cover; }
.apps-column-embel .emble-orb { position:absolute;left:50%;top:35px;width:76px;height:76px;transform:translateX(-50%); }
.apps-feature[data-entered=true] .apps-column { animation:apps-column-arrive 850ms var(--ease) both; }
.apps-feature[data-entered=true] .apps-column-write { animation-delay:70ms; }
.apps-feature[data-entered=true] .apps-column-embel { animation-delay:140ms; }
@keyframes apps-column-arrive { from{opacity:0;transform:translateY(55px)}to{opacity:1;transform:translateY(0)} }
/* The continuous belt is one compositor transform; no per-frame JS or scroll sampling. */
.apps-conveyor { position:absolute;z-index:3;left:-9%;right:-7%;bottom:3px;height:146px;transform:rotate(-14deg);overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); }
.apps-conveyor-belt { display:flex;width:max-content;animation:apps-conveyor-travel 32s linear infinite; }
.apps-conveyor-group { display:flex;align-items:center;gap:18px;padding:24px 18px 20px 0; }
.apps-tile { display:grid;place-items:center;flex:0 0 76px;width:76px;height:76px;background:linear-gradient(145deg,#fff,#f4f6f6 80%);border:1px solid #ffffffde;border-radius:19px;box-shadow:inset 0 -3px 2px #e0e5e7,0 4px 2px #7794a31f,0 10px 12px -7px #25425763;transform:rotate(14deg); }
.apps-tile>img { display:block;width:49px;height:49px;object-fit:contain; }
.apps-tile-chrome>img { width:56px;height:56px; }.apps-tile-figma>img{width:45px;height:45px}.apps-tile-drive>img{width:51px;height:51px}
.apps-tile-doordash>img { width:52px;height:37px; }
.apps-tile-cursor>img { width:47px;height:47px; }
.apps-tile-spotify { background:#121b19;box-shadow:inset 0 1px #506158,0 8px 14px -7px #25425763;border-color:#283e35; }
.apps-tile-spotify>img { width:55px;height:55px; }
@keyframes apps-conveyor-travel { to{transform:translateX(-50%)} }
html[data-motion=paused] :is(.apps-conveyor-belt,.apps-column),html[data-visible=false] :is(.apps-conveyor-belt,.apps-column),[data-scene-active=false] :is(.apps-conveyor-belt,.apps-column) { animation-play-state:paused!important; }
html[data-motion=paused] .apps-column { animation:none!important;transform:none;opacity:1; }
@media(min-width:900px) and (max-width:1120px){
 .chapter-track .apps-feature{grid-template-columns:.85fr 1.15fr;gap:25px}.apps-feature .chapter-copy h2 em{white-space:normal}.apps-feature .apps-scene{height:420px}.apps-columns{gap:15px;left:8%;right:4%}.apps-column-embel .emble-orb{width:62px;height:62px}.apps-column-name{top:127px;font-size:16px}.apps-tile{flex-basis:65px;width:65px;height:65px;border-radius:16px}.apps-tile>img{width:43px;height:43px}.apps-conveyor-group{gap:15px;padding-right:15px}.apps-conveyor{bottom:3px}
}
@media(max-width:899px){
 .chapter-track .apps-feature{grid-template-columns:1fr;gap:28px}.apps-feature .apps-scene{height:465px;width:100%;max-width:570px;justify-self:center}.apps-columns{left:10%;right:8%}.apps-conveyor{left:-3%;right:-3%;bottom:3px}.apps-feature .chapter-copy h2 em{white-space:normal}
}
@media(max-width:520px){
 .apps-feature .apps-scene{height:364px}.apps-columns{inset:98px 5% 100px 9%;gap:13px}.apps-column{border-radius:13px 13px 4px 4px}.apps-column-surface::before{height:7px}.apps-podium-brand{width:33px;height:33px;top:19px}.apps-column-label{top:64px;font-size:11px}.apps-column-embel .emble-orb{width:54px;height:54px;top:40px}.apps-column-name{top:111px;font-size:14px}.apps-conveyor{bottom:-2px;height:115px;left:-4%;right:-4%}.apps-conveyor-group{gap:13px;padding:18px 13px 18px 0}.apps-tile{width:60px;height:60px;flex-basis:60px;border-radius:15px}.apps-tile>img{width:39px;height:39px}.apps-tile-chrome>img{width:44px;height:44px}.apps-tile-figma>img{width:36px;height:36px}.apps-tile-doordash>img{width:42px;height:29px}.apps-tile-spotify>img{width:45px;height:45px}
}
@media(prefers-reduced-motion:reduce){
 .apps-conveyor-belt,.apps-column{animation:none!important;transform:none;opacity:1}
}

.podium-heading{position:absolute;bottom:calc(100% + 13px);left:-10px;right:-10px;display:flex;flex-direction:column;align-items:center;gap:3px;color:#214552;text-shadow:0 1px 8px #eaf4f3}
.podium-heading strong{font:550 39px/1 system-ui;letter-spacing:-2px;font-variant-numeric:tabular-nums}.podium-heading strong>span{font-size:24px;padding-left:2px;font-weight:400}.podium-heading>span{font:500 12px/1.2 system-ui}
.apps-column-embel .podium-heading{color:#153b4b}.apps-column-embel .podium-heading strong{font-size:88px;font-weight:650;letter-spacing:-6px}.apps-column-embel .podium-heading strong>span{font-size:40px;font-weight:500;letter-spacing:-2px}.apps-column-embel .podium-heading>span{font-size:13px;font-weight:600}.apps-comparison-note{position:absolute;bottom:-13px;left:0;right:0;text-align:center;color:#23414e;font:500 12px/1.4 system-ui;letter-spacing:.1px;background:#edf5f1e8;border:1px solid #ffffffe0;border-radius:20px;width:max-content;max-width:100%;margin:0 auto;padding:7px 13px;box-shadow:0 2px 8px #25475314}
@media(max-width:520px){.podium-heading strong{font-size:31px}.podium-heading strong>span{font-size:20px}.podium-heading>span{font-size:10px}.apps-column-embel .podium-heading strong{font-size:62px;letter-spacing:-4px}.apps-column-embel .podium-heading strong>span{font-size:29px}.apps-column-embel .podium-heading>span{font-size:10px}.apps-column-embel .emble-orb{top:26px}.apps-comparison-note{bottom:-20px;font-size:11px}}

/* Warm porcelain light on a sunset world, separated from the cool pedestal. */
.apps-column-embel::before{content:'';position:absolute;z-index:1;left:25%;right:25%;top:105px;height:12px;border-radius:50%;background:#24587a80;filter:blur(5px)}
.apps-column-embel .emble-orb .logo-glaze{background:radial-gradient(ellipse at 28% 20%,#fffbd3bb,transparent 37%),radial-gradient(ellipse at 68% 88%,#672d6677,transparent 55%);box-shadow:inset 1px 2px 2px #ffffe9c9,inset -5px -7px 9px #51264888,inset 0 0 1px 1px #c7928166}
.apps-column-surface::after{content:'';position:absolute;inset:12px 4px 5px;border-radius:12px 12px 3px 3px;border-left:1px solid #ffffff40;border-right:1px solid #ffffff3b;background:linear-gradient(110deg,transparent 28%,#ffffff17 29%,#fff0 47%);pointer-events:none}
@media(max-width:520px){.apps-column-embel::before{top:76px;height:9px}}

/* Small windows onto familiar places, with a sunlit sky above them. */
.apps-column-search .apps-column-surface{background:linear-gradient(110deg,#edf9ffe0,#effaff8c 45%,#d6eaf3b5),url('/assets/clock-places/london-westminster.jpg') center 61% / cover;backdrop-filter:none;-webkit-backdrop-filter:none}
.apps-column-write .apps-column-surface{background:linear-gradient(110deg,#fff6e5cf,#fff9ec85 45%,#f7efd7a6),url('/assets/around-the-block.webp') 58% 38% / cover;backdrop-filter:none;-webkit-backdrop-filter:none}