/* The menu button and the footer every public page shares: the homepage, privacy, the phone-app page, the guides, terms
   and about. The list looks like the recorder's account menu; the colours come from each page's own palette. */
.menuwrap{position:relative;flex:none;display:inline-flex}
.menubtn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border-radius:12px;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer}
.menubtn:hover,.menubtn[aria-expanded="true"]{border-color:var(--green)}
.menubtn svg{display:block}
.menubtn:focus-visible,.sitemenu a:focus-visible{outline:3px solid var(--green);outline-offset:2px}
.sitemenu{position:absolute;top:calc(100% + 8px);inset-inline-end:0;z-index:40;display:flex;flex-direction:column;width:min(260px,calc(100vw - 32px));padding:6px;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 40px rgba(0,0,0,.18)}
.sitemenu[hidden]{display:none}
.sitemenu a{display:block;padding:10px 12px;border-radius:8px;color:var(--ink);text-decoration:none;font:600 15px/1.3 "Instrument Sans",system-ui,sans-serif}
.sitemenu a:hover{background:var(--panel2)}
/* On a phone the menu button needs the room: a button the menu or the logo already covers leaves the top bar. */
@media (max-width:480px){.nav .wide-only{display:none}}
.foot{border-top:1px solid var(--line);padding:28px 0 44px;color:var(--muted);font-size:14px}
.foot .wrap{display:flex;justify-content:space-between;gap:10px 16px;flex-wrap:wrap}
.foot a{color:inherit;text-decoration:underline;text-underline-offset:3px}