.apps-hero { min-height: 690px; display: grid; grid-template-columns: minmax(0,.88fr) minmax(560px,1.12fr); gap: 64px; align-items: center; }
.apps-hero-copy { max-width: 620px; }.apps-actions { margin-top: 30px; display: flex; gap: 14px; flex-wrap: wrap; }
.device-orbit { position: relative; min-height: 570px; }
.phone { position: absolute; width: 240px; height: 500px; padding: 30px 18px 20px; border: 10px solid var(--onyx); border-radius: 34px; background: var(--white); color: var(--onyx); overflow: hidden; box-shadow: 0 24px 54px rgba(105,50,118,.16); }
.phone-ios { left: 8%; top: 0; transform: rotate(-3deg); z-index: 2; }.phone-android { right: 3%; top: 42px; transform: rotate(4deg); z-index: 1; }
.phone-notch { position: absolute; left: calc(50% - 42px); top: 0; width: 84px; height: 22px; border-radius: 0 0 14px 14px; background: var(--onyx); }.camera-dot { position: absolute; top: 8px; left: calc(50% - 5px); width: 10px; height: 10px; border-radius: 50%; background: var(--onyx); }
.phone-top { display: flex; justify-content: space-between; font-size: 11px; color: var(--lav-800); }.phone > small { display: block; margin-top: 26px; color: var(--lav-800); }.phone > strong { display: block; margin-top: 4px; font-size: 28px; }.phone > p { margin: 22px 0 0; font-size: 17px; line-height: 1.45; }
.album-mark { margin: 22px auto 0; width: 112px; height: 112px; border-radius: 26px; background: var(--lav-700); display: grid; place-items: center; }.album-mark img { width: 58px; }
.audio-line { height: 40px; margin-top: 20px; display: flex; align-items: center; justify-content: center; gap: 4px; }.audio-line i, .lock-wave i { width: 4px; height: 28px; border-radius: 3px; background: var(--gal-600); transform-origin: center; }.audio-line i:nth-child(2),.audio-line i:nth-child(5) { height: 16px; }.audio-line i:nth-child(3) { height: 36px; }
.phone > button { width: 54px; height: 54px; margin: 12px auto 0; border: 0; border-radius: 50%; background: var(--lav-700); color: var(--white); display: grid; place-items: center; }.phone > button svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; }
.caption-ticker { margin-top: 34px; padding: 16px; border-radius: 14px; background: var(--lav-100); display: flex; flex-direction: column; gap: 4px; }.caption-ticker span { color: var(--lav-800); font-size: 13px; }.lang-chips { margin-top: 26px; display: flex; gap: 6px; }.lang-chips span { min-height: 34px; padding: 0 9px; border: 1px solid var(--lav-300); border-radius: 8px; display: inline-flex; align-items: center; font-size: 12px; }.lang-chips .on { background: var(--lav-700); color: var(--white); }
.web-card { position: absolute; left: 29%; right: 14%; bottom: 0; z-index: 3; min-height: 220px; border: 1px solid var(--lav-300); border-radius: 20px; background: var(--white); overflow: hidden; box-shadow: 0 20px 46px rgba(105,50,118,.14); }.browser-bar { min-height: 38px; padding: 0 12px; background: var(--onyx); color: var(--white); display: flex; align-items: center; gap: 6px; font-size: 12px; }.browser-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--lav-300); }.browser-bar span { margin-left: 8px; }.web-inner { padding: 20px; display: grid; grid-template-columns: 46px 1fr; gap: 3px 12px; }.web-inner img { grid-row: span 2; width: 42px; height: 42px; padding: 8px; border-radius: 11px; background: var(--lav-700); }.web-inner small { color: var(--lav-800); }.web-inner strong { font-size: 18px; }.web-inner button { min-height: 40px; margin-top: 10px; border: 1px solid var(--lav-700); border-radius: 10px; background: var(--white); color: var(--lav-800); }.web-inner button:first-of-type { grid-column: 1/-1; background: var(--lav-700); color: var(--white); }
@media (prefers-reduced-motion:no-preference) { .audio-line i,.lock-wave i { animation: appWave .8s ease-in-out infinite alternate; }.audio-line i:nth-child(even),.lock-wave i:nth-child(even){animation-delay:-.4s;} }
@keyframes appWave { to { transform: scaleY(.35); } }

.listen-head,.captions-head { max-width: 800px; }.listen-head p,.captions-head p,.paths-copy p,.switch-copy-block > p { margin: 18px 0 0; max-width: 680px; font-size: 19px; line-height: 1.55; }
.listen-grid { margin-top: 46px; display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 24px; }.listen-grid article { min-width: 0; padding: 26px; border: 1px solid var(--lav-300); border-radius: 22px; background: var(--nebula); }.listen-grid article h3 { margin: 22px 0 7px; font-size: 24px; }.listen-grid article p { margin: 0; line-height: 1.5; }
.listen-app { grid-column: span 7; }.listen-web { grid-column: span 5; }.listen-embed { grid-column: span 5; }.listen-connex { grid-column: span 7; }.listen-radio { grid-column: 3/span 8; }
.app-pair { min-height: 250px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }.mini-device { padding: 22px; border-radius: 24px; background: var(--onyx); color: var(--white); display: flex; flex-direction: column; justify-content: flex-end; gap: 7px; }.mini-device.android { background: var(--lav-700); }.mini-device span { color: var(--lav-300); font-size: 13px; }.mini-device strong { font-size: 20px; }.lock-wave { height: 50px; display: flex; align-items: center; gap: 5px; }
.web-join { min-height: 250px; padding: 26px; border-radius: 18px; background: var(--lav-100); display: grid; grid-template-columns: 74px 1fr 30px; gap: 16px; align-items: center; }.scan-symbol { width: 74px; height: 74px; padding: 8px; background: var(--white); display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }.scan-symbol i { border: 7px solid var(--onyx); }.web-join svg { width: 28px; height: 28px; fill: none; stroke: var(--lav-800); stroke-width: 2; }.browser-pill { grid-column: 1/-1; min-height: 50px; padding: 0 16px; border-radius: 10px; background: var(--white); display: flex; align-items: center; color: var(--lav-800); }
.code-window { min-height: 250px; border-radius: 16px; background: var(--onyx); color: var(--white); overflow: hidden; }.code-window > div { min-height: 38px; padding: 0 12px; border-bottom: 1px solid var(--dark-line); display: flex; align-items: center; gap: 7px; font-size: 12px; }.code-window > div i { width: 8px; height: 8px; border-radius: 50%; background: var(--lav-300); }.code-window > div span { margin-left: 7px; }.code-window code { min-height: 96px; padding: 18px; display: flex; align-items: center; color: var(--gal-300); overflow-wrap: anywhere; }.code-window section { min-height: 86px; padding: 16px; background: var(--white); color: var(--onyx); display: flex; align-items: center; justify-content: space-between; gap: 12px; }.code-window button { min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--lav-700); color: var(--white); }
.webcast-player { min-height: 250px; border-radius: 16px; background: var(--onyx); overflow: hidden; }.video-frame { position: relative; height: 188px; }.video-frame img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.58); }.video-frame span { position: absolute; top: 14px; left: 14px; padding: 6px 9px; border-radius: 7px; background: var(--gal-300); color: var(--onyx); font-size: 12px; }.player-controls { min-height: 62px; padding: 10px; display: flex; gap: 8px; flex-wrap: wrap; }.player-controls button { min-height: 40px; padding: 0 11px; border: 1px solid var(--dark-line); border-radius: 9px; background: var(--dark-2); color: var(--white); }
.receiver-row { min-height: 190px; padding: 28px; border-radius: 18px; background: var(--lav-100); display: flex; justify-content: center; align-items: flex-end; gap: 24px; }.receiver-row > div { position: relative; width: 92px; height: 126px; padding: 14px; border-radius: 18px; background: var(--onyx); display: grid; place-items: center; }.receiver-row i { position: absolute; top: -38px; width: 5px; height: 50px; border-radius: 4px; background: var(--onyx); }.receiver-row span { width: 52px; height: 52px; border-radius: 50%; background: var(--gal-300); display: grid; place-items: center; font-size: 25px; }

.paths-section { display: grid; grid-template-columns: minmax(280px,.72fr) minmax(0,1.28fr); gap: 70px; align-items: center; }.paths-copy .eyebrow { color: var(--lav-100); }.path-map { min-width:0; display:grid; grid-template-columns:150px minmax(240px,1fr) 150px; gap:22px; align-items:center; }.path-source,.path-listener { min-height:150px; padding:20px; border-radius:20px; background:var(--dark-2); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; text-align:center; }.path-source img { width:38px; }.path-listener svg { width:40px; height:40px; fill:none; stroke:var(--gal-300); stroke-width:1.6; }.path-source span,.path-listener span { color:var(--lav-300); font-size:13px; }.path-lanes { display:flex; flex-direction:column; gap:20px; }.path-lane { min-height:34px; display:grid; grid-template-columns:54px 1fr; gap:12px; align-items:center; position:relative; }.path-lane > span { color:var(--lav-300); font-size:12px; }.path-lane i { height:2px; background:var(--lav-300); }.path-lane b { position:absolute; left:65px; top:10px; width:12px; height:12px; border-radius:50%; background:var(--gal-300); }.path-lane em { position:absolute; right:26%; top:5px; padding:3px 7px; border-radius:5px; background:var(--lav-800); color:var(--white); font-size:10px; font-style:normal; }.path-lane.blocked i { height:0; border-top:2px dashed var(--lav-300); background:transparent; }
/* Live lanes: the dot runs the full length of its line to the listener, then restarts (scales in/out so the loop never pops).
   Blocked lane: the dot travels to the Blocked tag and stops there. Positions use % of the lane, so they hold at every width. */
@media (prefers-reduced-motion:no-preference) { .path-lane:not(.blocked) b { animation:pathTravel 2.4s linear infinite; }.path-lane:nth-child(2) b { animation-delay:-.8s; }.path-lane:nth-child(4) b { animation-delay:-1.6s; }.path-lane.blocked b { animation:pathBlocked 2.4s ease-out infinite; } }
@keyframes pathTravel { 0% { left:66px; transform:scale(0); } 8% { transform:scale(1); } 92% { transform:scale(1); } 100% { left:calc(100% - 12px); transform:scale(0); } }
@keyframes pathBlocked { 0% { left:66px; transform:scale(0); } 10% { transform:scale(1); } 55%,85% { left:calc(74% - 44px); transform:scale(1); } 100% { left:calc(74% - 44px); transform:scale(0); } }
.path-proof { grid-column:2; margin:0; padding:14px 18px; border-left:3px solid var(--gal-300); color:var(--lav-100); }

.caption-layouts { margin-top:42px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }.caption-layouts article h3 { margin:14px 0 0; font-size:18px; }.caption-demo { min-height:230px; padding:20px; border-radius:20px; background:var(--onyx); color:var(--white); overflow:hidden; }.layout-full { display:flex; align-items:flex-end; }.layout-full p { margin:0; font-size:27px; line-height:1.25; }.layout-focus { display:flex; flex-direction:column; justify-content:center; gap:16px; }.layout-focus small { color:var(--lav-300); }.layout-focus p { margin:0; padding-left:14px; border-left:3px solid var(--gal-300); font-size:22px; line-height:1.3; }.layout-split { display:grid; grid-template-rows:1fr 1fr; gap:10px; }.layout-split div { padding:13px; border-radius:11px; background:var(--dark-2); }.layout-split span { color:var(--gal-300); font-size:11px; }.layout-split p { margin:7px 0 0; line-height:1.35; }.layout-compact { display:flex; align-items:flex-end; gap:10px; }.layout-compact i { width:9px; height:9px; border-radius:50%; background:var(--gal-300); flex:0 0 auto; }.layout-compact p { margin:0; padding:10px 12px; border-radius:10px; background:var(--dark-2); line-height:1.35; }

.switch-section { display:grid; grid-template-columns:minmax(320px,.85fr) minmax(0,1.15fr); gap:72px; align-items:center; }.switch-visual { display:grid; place-items:center; }.switch-player { width:min(100%,390px); min-height:550px; border:10px solid var(--onyx); border-radius:34px; background:var(--white); overflow:hidden; }.switch-status { min-height:56px; padding:0 20px; background:var(--lav-700); color:var(--white); display:flex; align-items:center; gap:12px; }.switch-status span { padding:5px 8px; border-radius:7px; background:var(--gal-300); color:var(--onyx); font-size:11px; }.switch-copy { padding:34px 24px; min-height:230px; display:flex; flex-direction:column; justify-content:center; gap:7px; }.switch-copy small { color:var(--lav-800); }.switch-copy strong { font-size:34px; }.switch-copy p { margin:14px 0 0; font-size:18px; line-height:1.45; }.switch-sheet { padding:18px; border-top:1px solid var(--lav-300); display:grid; grid-template-columns:1fr 1fr; gap:10px; }.switch-sheet button { min-height:48px; border:1px solid var(--lav-700); border-radius:11px; background:var(--white); color:var(--lav-800); }.switch-sheet .selected { background:var(--lav-700); color:var(--white); }.switch-copy-block ul { margin:28px 0 0; padding:0; list-style:none; display:grid; gap:12px; }.switch-copy-block li { padding-left:28px; position:relative; }.switch-copy-block li::before { content:""; position:absolute; left:0; top:7px; width:10px; height:10px; background:var(--gal-600); }
.apps-photo > div { max-width:790px; }

@media(max-width:1100px){.apps-hero,.paths-section,.switch-section{grid-template-columns:1fr}.device-orbit{max-width:720px;width:100%;margin:auto}.listen-app,.listen-web,.listen-embed,.listen-connex,.listen-radio{grid-column:span 12}.path-proof{grid-column:1}.caption-layouts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.apps-hero{gap:32px}.apps-actions{flex-direction:column}.apps-actions .btn{width:100%}.device-orbit{min-height:650px}.phone{width:196px;height:430px;padding:28px 14px 16px;border-width:8px}.phone-ios{left:0}.phone-android{right:0;top:60px}.phone>p{font-size:15px}.album-mark{width:86px;height:86px}.web-card{left:6%;right:6%;bottom:0}.listen-grid{display:block}.listen-grid article+article{margin-top:20px}.app-pair{grid-template-columns:1fr}.web-join{grid-template-columns:62px 1fr 24px}.code-window code{font-size:12px}.receiver-row{gap:12px;padding:22px 10px}.receiver-row>div{width:72px}.path-map{grid-template-columns:1fr}.path-lanes{min-height:210px;padding:10px 0}.path-lane{grid-template-columns:54px 1fr}.path-source,.path-listener{min-height:120px}.caption-layouts{grid-template-columns:1fr}.caption-demo{min-height:190px}.switch-player{min-height:500px}.switch-sheet{grid-template-columns:1fr}.player-controls button{width:100%}}
@media(prefers-reduced-motion:reduce){.path-lane b{left:55%;}.audio-line i,.lock-wave i{transform:none}}