/* Header: "Download the app" with a QR panel, after Muse's */
.ap { position: relative; }
.ap-b { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 15px 0 12px; border: 0; border-radius: 999px; background: #f1f1f3; font: 500 14px/1 var(--font); color: var(--ink); cursor: pointer; }
.ap-b:hover, .ap-b[aria-expanded="true"] { background: #e9e9ec; }
.ap-b svg { width: 17px; height: 17px; }
.ap-m { position: absolute; top: calc(100% + 12px); right: 0; z-index: 60; width: 340px; padding: 14px 14px 20px; border-radius: 28px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 24px 56px -20px rgba(20, 20, 40, 0.3); text-align: center; }
.ap-t { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 999px; background: #f0f0f2; }
.ap-t button { height: 38px; border: 0; border-radius: 999px; background: none; font: 500 15px/1 var(--font); color: var(--ink); cursor: pointer; }
.ap-t button[aria-selected="true"] { background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.ap-p img { display: block; width: 156px; height: 156px; margin: 22px auto 0; }
.ap-p p { margin: 16px 12px 0; font: 400 13.5px/19px var(--font); color: var(--mute); }
.ap-o { display: inline-flex; align-items: center; gap: 10px; height: 44px; margin-top: 16px; padding: 0 20px; border-radius: 999px; background: #f0f0f2; font: 500 15px/1 var(--font); color: var(--ink); text-decoration: none; }
.ap-o:hover { background: #e7e7ea; }
.ap-o span { color: var(--mute); }
@media (max-width: 899px) { .ap { display: none; } }

/* The homepage shows once this, its last stylesheet, is in (see the head) */
body:has(> main[data-view="site-home"]) { opacity: 1; }