/* Xhub hero mockup: the app window with a device list, a mirrored phone and the info inspector. */
.app-window { display: grid; grid-template-columns: 26% 1fr 28%; aspect-ratio: 16 / 9.5; border-radius: inherit; overflow: hidden; background: #16181d; color: #e5e7eb; font-size: 12px; }
.app-side { padding: 38px 12px 12px; background: #1d2027; display: grid; align-content: start; gap: 6px; position: relative; }
.app-side::before { content: ""; position: absolute; left: 14px; top: 14px; width: 52px; height: 12px; background: radial-gradient(circle at 6px 6px, #ff5f57 5px, transparent 6px), radial-gradient(circle at 26px 6px, #febc2e 5px, transparent 6px), radial-gradient(circle at 46px 6px, #28c840 5px, transparent 6px); }
.app-search { height: 26px; border-radius: 8px; background: #262a33; margin-bottom: 6px; }
.app-dev { display: grid; grid-template-columns: 22px 1fr; column-gap: 8px; align-items: center; padding: 8px; border-radius: 10px; }
.app-dev.is-active { background: #0e7490; }
.app-dev i { grid-row: span 2; width: 14px; height: 22px; border: 2px solid currentColor; border-radius: 4px; justify-self: center; opacity: .9; }
.app-dev b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-dev small { color: #9ca3af; font-size: 11px; }
.app-dev.is-active small { color: #cffafe; }
.app-stage > div { width: 100%; }
.app-stage { display: grid; place-items: center; background: radial-gradient(80% 70% at 50% 40%, #232833, #16181d); }
.app-phone { width: 36%; aspect-ratio: 9 / 19; border-radius: 22px; padding: 6px; background: #0b0c0f; box-shadow: 0 0 0 2px #3a3f4b, 0 24px 60px rgba(0, 0, 0, .5); }
.app-screen { height: 100%; border-radius: 17px; background: linear-gradient(180deg, #fde68a, #f59e0b 55%, #b45309); display: grid; grid-template-columns: repeat(4, 1fr); align-content: start; gap: 10%; padding: 22% 10% 0; }
.app-screen span { aspect-ratio: 1; border-radius: 26%; background: rgba(255, 255, 255, .55); }
.app-keys { display: flex; gap: 6px; margin-top: 10px; justify-content: center; }
.app-keys span { width: 26px; height: 26px; border-radius: 8px; background: #262a33; }
.app-inspector { padding: 38px 14px 14px; background: #1d2027; display: grid; align-content: start; gap: 10px; }
.app-inspector div { display: grid; gap: 2px; }
.app-inspector small { color: #9ca3af; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }
.app-pill { margin-top: 6px; padding: 7px 10px; border-radius: 999px; background: #0ea5b7; color: #04262b; text-align: center; font-weight: 700; }
@media (max-width: 600px) {
  .app-window { grid-template-columns: 1fr 1fr; aspect-ratio: 4 / 5; }
  .app-inspector { display: none; }
  .app-phone { width: 66%; }
}