/* Offerings menu, shared by every proposal page (styled after the Troopod × Happi Planet proposal sidebar) */
.menu-btn{flex:none;margin-right:-18px;padding:8px;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:none;border:1px solid rgba(255,255,255,.1);border-radius:8px;cursor:pointer;transition:border-color .15s}
.menu-btn:hover{border-color:rgba(255,255,255,.22)}
.menu-btn i{display:block;width:18px;height:2px;border-radius:2px;background:#F2F2F4;transition:all .2s}
.drawer-bg{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.6);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}
.drawer{position:fixed;top:0;left:0;bottom:0;z-index:91;width:280px;max-width:82vw;background:rgba(13,13,18,.7);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-right:1px solid rgba(255,255,255,.055);display:flex;flex-direction:column;overflow-y:auto;transform:translateX(-100%);visibility:hidden;transition:transform .25s cubic-bezier(.2,.7,.3,1),visibility .25s}
body.menu-open .drawer{transform:none;visibility:visible}
body.menu-open .drawer-bg{opacity:1;visibility:visible}

.sb-logo{display:flex;align-items:center;gap:11px;padding:22px 20px 18px;border-bottom:1px solid rgba(255,255,255,.055)}
.sb-icon{flex:none;width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,#8B6BF7,#7B5CF5);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#fff;box-shadow:0 0 20px rgba(139,107,247,.18)}
.sb-name{font-size:15px;font-weight:600;letter-spacing:-.3px;line-height:1.3}
.sb-sub{font-family:var(--mono);font-size:11px;color:#50505C;margin-top:1px;line-height:1.3}
.drawer-x{flex:none;margin-left:auto;width:30px;height:30px;border-radius:8px;border:1px solid rgba(255,255,255,.1);background:none;color:#8E8EA0;font-size:17px;line-height:1;cursor:pointer}
.drawer-x:hover{color:var(--txt)}

.sb-body{padding-bottom:12px}
.sb-group{font-family:var(--mono);font-size:10px;font-weight:500;color:#50505C;letter-spacing:1.3px;text-transform:uppercase;padding:20px 20px 7px}
.sb-item{display:flex;align-items:center;gap:11px;padding:10px 20px;font-size:13.5px;color:#8E8EA0;text-decoration:none;border-left:2px solid transparent;transition:all .15s;user-select:none}
.sb-item:hover{color:#F2F2F4;background:rgba(255,255,255,.025)}
.sb-item.active{color:#8B6BF7;border-left-color:#8B6BF7;background:rgba(139,107,247,.08)}
.sb-num{flex:none;width:24px;font-family:var(--mono);font-size:11px;color:#50505C}
.sb-item.active .sb-num{color:#8B6BF7}

.sb-foot{margin-top:auto;padding:16px 20px;border-top:1px solid rgba(255,255,255,.055)}
.sb-pill{display:inline-flex;align-items:center;gap:7px;background:rgba(139,107,247,.08);border:1px solid rgba(139,107,247,.22);border-radius:20px;padding:7px 12px;font-size:12px;color:#8B6BF7}
.sb-pill span{width:6px;height:6px;border-radius:50%;background:#8B6BF7;animation:sb-pulse 2s ease infinite}
@keyframes sb-pulse{0%,100%{opacity:1}50%{opacity:.3}}
@media (prefers-reduced-motion:reduce){.sb-pill span{animation:none}}

/* desktop: the menu stays open as a sidebar, the brand moves into it and the header keeps the section links */
@media (min-width:981px){
  body{padding-left:236px}
  .drawer{width:236px;max-width:none;transform:none;visibility:visible;transition:none}
  .drawer-bg,.menu-btn,.drawer-x,nav .brand{display:none}
}

/* phones and tablets: section links sit in a scrollable row under the brand */
@media (max-width:980px){
  html{scroll-padding-top:112px}
  .nav-in{flex-wrap:wrap;row-gap:12px;padding-bottom:12px}
  .nav-links{display:flex;flex-basis:100%;gap:22px;overflow-x:auto;scrollbar-width:none;white-space:nowrap;margin:0 -28px;padding:10px 28px 0;border-top:1px solid var(--line)}
  .nav-links::-webkit-scrollbar{display:none}
}
@media (max-width:720px){
  .nav-links{margin:0 -16px;padding:10px 16px 0}
}