/* In document flow; the homepage's floating navigation clears the banner. */
.app-banner{display:flex;align-items:center;gap:12px;padding:14px 16px;background:radial-gradient(ellipse at 8% 0%,rgba(255,255,255,.94),transparent 65%),radial-gradient(ellipse at 95% 100%,rgba(221,183,125,.32),transparent 70%),linear-gradient(110deg,rgba(243,229,208,.96),rgba(238,217,190,.9));-webkit-backdrop-filter:blur(20px) saturate(1.25);backdrop-filter:blur(20px) saturate(1.25);color:#483329;border-bottom:1px solid #cbb79e;box-shadow:inset 0 1px rgba(255,255,255,.9),0 4px 18px rgba(93,64,35,.06);font:16px/1.4 system-ui,sans-serif}
.app-banner img{width:48px;height:48px;border-radius:11px;flex-shrink:0}
.app-banner-copy{flex:1;min-width:0;overflow-wrap:anywhere}
.app-banner-copy strong,.app-banner-copy small{display:block}
.app-banner-copy small{font-size:13px}
.app-banner a{display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;border-radius:24px;background:#483329;color:#fff;text-decoration:none;font-weight:600;box-shadow:inset 0 1px rgba(255,255,255,.14),0 3px 8px rgba(72,51,41,.12)}
.app-banner button{width:44px;min-height:44px;flex-shrink:0;border:0;background:transparent;color:inherit;font:26px/1 system-ui;cursor:pointer}
.app-banner :focus-visible{outline:3px solid #865029;outline-offset:3px}
html.has-app-banner .nav{top:var(--app-banner-height)}
@media(min-width:701px){.app-banner{padding-inline:max(16px,calc((100% - 1080px)/2))}}