/* "Get the app" prompt (app-promo.js). Self-contained: used on pages with different stylesheets. */
.app-promo-backdrop { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(8, 20, 30, .55); opacity: 0; transition: opacity .2s ease; }
.app-promo-backdrop.is-open { opacity: 1; }
.app-promo { position: relative; width: min(100%, 380px); padding: 28px 24px 22px; text-align: center; color: #10263d; background: #ffffff; border-radius: 20px; box-shadow: 0 18px 50px rgba(0, 0, 0, .25); font-family: inherit; }
.app-promo-close { position: absolute; top: 10px; inset-inline-end: 12px; width: 36px; height: 36px; font-size: 24px; line-height: 1; color: inherit; background: transparent; border: 0; border-radius: 50%; cursor: pointer; opacity: .65; }
.app-promo-close:hover, .app-promo-close:focus-visible { opacity: 1; background: rgba(16, 38, 61, .08); }
.app-promo-mark { width: 56px; height: 56px; margin: 0 auto 12px; display: grid; place-items: center; font-size: 26px; color: #10263d; background: #c1ecd8; border-radius: 16px; }
.app-promo-title { margin: 0 0 8px; font-size: 21px; line-height: 1.35; }
.app-promo-text { margin: 0 0 20px; font-size: 14.5px; line-height: 1.7; opacity: .85; }
.app-promo-actions { display: grid; gap: 10px; }
.app-promo-button { display: block; padding: 12px 16px; font: inherit; font-size: 15px; font-weight: 700; text-align: center; text-decoration: none; border-radius: 12px; cursor: pointer; }
.app-promo-primary { color: #ffffff; background: #24735d; border: 0; }
.app-promo-primary:hover, .app-promo-primary:focus-visible { background: #1d5e4c; }
.app-promo-secondary { color: inherit; background: transparent; border: 1px solid rgba(16, 38, 61, .2); }
.app-promo-button:focus-visible, .app-promo-close:focus-visible { outline: 3px solid #8ad7b7; outline-offset: 2px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .app-promo { color: #e8f2ef; background: #17242c; } :root:not([data-theme="light"]) .app-promo-secondary { border-color: rgba(232, 242, 239, .25); } }
:root[data-theme="dark"] .app-promo { color: #e8f2ef; background: #17242c; }
:root[data-theme="dark"] .app-promo-secondary { border-color: rgba(232, 242, 239, .25); }
@media (prefers-reduced-motion: reduce) { .app-promo-backdrop { transition: none; } }