/* Menus live in a body portal so cards and sticky navigation cannot clip them. */
.glass-select { display: block; min-width: 0; width: 100%; }
.glass-select-button { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 56px; padding: 14px 17px; border-radius: 18px; border-color: #c3c9d5; color: var(--text); font-size: 16px; line-height: 1.5; text-align: left; transition: border-color 180ms, box-shadow 180ms, background-color 180ms; }
.glass-select-button:hover { border-color: #8da6cf; }
.glass-select-button[aria-expanded="true"] { border-color: #77a1d8; box-shadow: 0 0 0 3px rgba(0,102,204,.08),var(--glass-shadow); }
.glass-select-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.glass-select-arrow { flex-shrink: 0; width: 8px; height: 8px; border-right: 1.6px solid #666d7c; border-bottom: 1.6px solid #666d7c; transform: translateY(-2px) rotate(45deg); transition: transform 200ms; }
.glass-select-button[aria-expanded="true"] .glass-select-arrow { transform: translateY(2px) rotate(225deg); }
.glass-select-popup { position: fixed; z-index: 1000; padding: 7px; border-radius: 24px; overflow-y: auto; overscroll-behavior: contain; scroll-behavior: auto; box-shadow: 0 22px 60px -16px rgba(36,51,80,.26),inset 0 1px 0 #fff; transform-origin: top center; animation: menu-appear 180ms cubic-bezier(.2,.75,.25,1) both; }
.glass-select-popup[data-direction="up"] { transform-origin: bottom center; --menu-shift: 6px; }
.glass-select-option { display: flex; align-items: center; gap: 12px; min-height: 62px; padding: 10px 12px; margin: 2px 0; border: 1px solid transparent; border-radius: 17px; color: var(--text); cursor: pointer; user-select: none; }
.glass-select-option.is-active { background: #edf4fe; border-color: #dbe8fa; }
.glass-select-option[aria-disabled="true"] { opacity: .5; cursor: default; }
.glass-select-icon { display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; border-radius: 11px; background: rgba(255,255,255,.75); color: #426695; box-shadow: inset 0 0 0 1px rgba(54,77,109,.06); }
.glass-select-icon svg { width: 20px; height: 20px; }
.glass-select-copy { display: grid; gap: 1px; min-width: 0; flex: 1; font-size: 15px; }
.glass-select-copy > span { overflow-wrap: anywhere; }
.glass-select-copy small { font-size: 11px; font-weight: 400; color: var(--muted); }
.glass-select-check { flex-shrink: 0; color: var(--accent); font-size: 17px; opacity: 0; }
.glass-select-option.is-selected .glass-select-check { opacity: 1; }
.account-proxy-toolbar .glass-select { width: min(320px,100%); }
.account-proxy-toolbar label { min-width: 0; }

@keyframes menu-appear {
  from { opacity: 0; transform: translateY(var(--menu-shift,-6px)) scale(.97); }
  to { opacity: 1; transform: none; }
}
@keyframes surface-appear {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
@keyframes desktop-float {
  0%,100% { transform: rotate(-4deg) translateY(0); }
  50% { transform: rotate(-3deg) translateY(-8px); }
}
@keyframes phone-float {
  0%,100% { transform: rotate(7deg) translateY(0); }
  50% { transform: rotate(5deg) translateY(-10px); }
}
@keyframes chip-float {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
@media (prefers-reduced-motion: no-preference) {
  .hero > .eyebrow, .hero > h1, .hero > .lead, .hero > .actions, .hero > .note { animation: surface-appear 700ms cubic-bezier(.2,.75,.25,1) both; }
  .hero > h1 { animation-delay: 70ms; }
  .hero > .lead { animation-delay: 140ms; }
  .hero > .actions { animation-delay: 210ms; }
  .hero > .note { animation-delay: 260ms; }
  .motion-reveal { animation: surface-appear 650ms cubic-bezier(.2,.75,.25,1) backwards; }
  .scene-in-view .scene-desktop { animation: desktop-float 8s ease-in-out infinite; }
  .scene-in-view .scene-phone { animation: phone-float 7s ease-in-out infinite; }
  .scene-in-view .scene-chip { animation: chip-float 6s ease-in-out infinite; }
  [data-client-guide], .account-contact-editor[open] > form, #help details[open] > p,
  .client-guide details[open] > p { animation: surface-appear 300ms ease-out both; }
  .motion-paused .hero-scene * { animation-play-state: paused; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .app-card, .platform-entry .panel { transition: transform 250ms, box-shadow 250ms; }
  .app-card:hover, .platform-entry .panel:hover { transform: translateY(-4px); box-shadow: 0 16px 38px -18px rgba(36,51,80,.17); }
  .button:hover, .account-primary:hover { transform: translateY(-1px); }
  .button:active, .account-primary:active { transform: scale(.97); }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .glass-select-button, .glass-select-popup { border-color: #8b8b96; }
}
@media (forced-colors: active) {
  .glass-select-button, .glass-select-popup { border: 1px solid CanvasText; }
  .glass-select-option.is-active { outline: 2px solid Highlight; outline-offset: -2px; }
  .glass-select-check { color: Highlight; }
  .glass-select-arrow { border-color: CanvasText; }
}
.glass-select-current-icon{display:inline-flex;flex-shrink:0}.glass-select-current-icon[hidden]{display:none}.glass-select-current-icon img{width:28px;height:28px;border-radius:8px}.glass-select-icon img{width:36px;height:36px;border-radius:10px;object-fit:cover}.glass-select-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
