/* ============================================================
   app-popup.css — small "download our app" popup.
   The Bright Center is on the App Store; this is the one quiet
   place the site announces it. Appears right after load, whole
   card at once (no inner stagger — it read as an empty dark box
   mid-animation), big tappable close, remembers dismissal.
   ============================================================ */

.app-popup{position:fixed;left:max(1.5rem,env(safe-area-inset-left));
  bottom:max(1.5rem,env(safe-area-inset-bottom));z-index:99999;
  display:flex;align-items:flex-start;gap:12px;max-width:330px;padding:14px 16px;border-radius:18px;
  background:rgba(15,23,42,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(94,200,214,.28);
  box-shadow:0 24px 60px -20px rgba(0,0,0,.55),0 0 40px -18px rgba(94,200,214,.35);
  opacity:0;transform:translateY(22px) scale(.95);pointer-events:none;
  transition:opacity .45s ease,transform .55s cubic-bezier(.34,1.56,.64,1)}
.app-popup.show{opacity:1;transform:none;pointer-events:auto}
/* the hidden attribute must ALWAYS win — display:flex above would otherwise
   override the UA's [hidden]{display:none} (author styles beat UA styles) */
.app-popup[hidden]{display:none!important}
.app-popup-icon{width:52px;height:52px;border-radius:12px;flex:0 0 auto;
  box-shadow:0 8px 20px -8px rgba(0,0,0,.6)}
.app-popup-body{display:flex;flex-direction:column;gap:2px;min-width:0;padding-right:26px}
.app-popup-body b{color:#fff;font-family:'Space Grotesk',sans-serif;font-size:.95rem;letter-spacing:-.01em}
.app-popup-body>span{color:#b6c4d6;font-size:.8rem;line-height:1.35}
.app-popup-badge{margin-top:8px;display:inline-block}
.app-popup-badge img{height:34px;width:auto;display:block}
.app-popup-close{position:absolute;top:4px;right:4px;width:36px;height:36px;display:grid;place-items:center;
  background:none;border:0;color:#9fb1c4;font-size:1.45rem;line-height:1;cursor:pointer;border-radius:50%;
  transition:color .2s ease,background .2s ease}
.app-popup-close:hover{color:#fff;background:rgba(255,255,255,.1)}
.app-popup-close:active{color:#fff;background:rgba(255,255,255,.16)}

@media(max-width:768px){
  .app-popup{left:12px;right:auto;
    bottom:max(12px,env(safe-area-inset-bottom));
    max-width:min(330px,calc(100vw - 88px))}
}
@media (prefers-reduced-motion: reduce){
  .app-popup{transition:none}
}