/* The account menu · it sits on whatever bar a page has along the bottom: the
   page says how tall in --kmb (0 when there is none).
   The account menu · the sheet from More on the phone, the panel from the
   chip on a computer. One file for every page that shows it (the send page,
   the manage page), with kmenu.js drawing its items, so it is the same menu
   wherever you open it. Every rule carries :not(#_): a page cannot reach in. */
@media (max-width:1023px){ .navmenu:not(#_){max-height:calc(100vh - 80px - var(--kmb, 0px));} }
.navmenu:not(#_){position:fixed; top:66px; right:22px; z-index:80; width:304px; max-width:calc(100vw - 32px); background:#1A1A1E; border:1px solid rgba(255,255,255,.12); box-shadow:0 24px 60px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.3); color:#fff; display:flex; flex-direction:column; overflow:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  transform-origin:top right; animation:navpop .18s cubic-bezier(.2,.7,.2,1);}
.navmenu:not(#_)[hidden]{display:none;}
.navmenu-scrim:not(#_){position:fixed; inset:0; z-index:79; background:rgba(0,0,0,.45); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); animation:navscrim .2s ease;}
.navmenu-scrim:not(#_)[hidden]{display:none;}
@media (min-width:1024px){ .navmenu-scrim:not(#_){display:none !important;} }
.navmenu-grip:not(#_){display:none;}
.navmenu-h:not(#_){display:flex; flex:none; align-items:center; gap:12px; padding:14px 14px 12px; border-bottom:1px solid rgba(255,255,255,.08);}
.navmenu-av:not(#_){width:36px; height:36px; font-size:15px;}
.navmenu-av:not(#_).anon{background:rgba(255,255,255,.08); color:rgba(255,255,255,.7); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);}
.navmenu-av:not(#_) svg{width:18px; height:18px;}
.navmenu-ht:not(#_){min-width:0; flex:1;}
.navmenu-ht:not(#_) b{display:block; font-size:13.5px; font-weight:600; letter-spacing:-.1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.navmenu-ht:not(#_) span{display:block; margin-top:2px; color:rgba(255,255,255,.6); font-size:11.5px;}
.navmenu-x:not(#_){display:none; flex:none; width:32px; height:32px; align-items:center; justify-content:center; background:none; border:0; color:rgba(255,255,255,.7); cursor:pointer; border-radius:0;}
.navmenu-x:not(#_) svg{width:16px; height:16px;}
.navmenu-x:not(#_):hover{color:#fff; background:rgba(255,255,255,.07);}
.navmenu-plan:not(#_){flex:none; padding:12px 14px 14px; border-bottom:1px solid rgba(255,255,255,.08);}
.navmenu-pt:not(#_){font-size:13px; font-weight:600;}
.navmenu-pt:not(#_) span{color:rgba(255,255,255,.6); font-weight:500;}
.navmenu-rows:not(#_){display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:10px;}
.navmenu-row:not(#_){font-size:11.5px; color:rgba(255,255,255,.66); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.navmenu-row:not(#_) i{display:block; height:2px; margin-top:6px; background:rgba(255,255,255,.1); overflow:hidden;}
.navmenu-row:not(#_) i b{display:block; height:100%; background:#DFFF3F; transition:width .3s;}
.navmenu-cta:not(#_){display:block; width:100%; margin-top:12px; height:36px; padding:0 12px; background:#DFFF3F; color:#17171A; border:0; font:inherit; font-size:13px; font-weight:600; cursor:pointer; transition:filter .15s, transform .12s;}
.navmenu-cta:not(#_):hover{filter:brightness(1.06);}
.navmenu-cta:not(#_):active{transform:scale(.99);}
.navmenu-cta:not(#_)[hidden]{display:none;}
.navmenu-l:not(#_){flex:none; padding:6px 6px 8px; border-bottom:1px solid rgba(255,255,255,.08);}
.navmenu-k:not(#_){padding:8px 10px 4px; color:rgba(255,255,255,.56); font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;}
.navmenu-l:not(#_)>button, .navmenu-l:not(#_)>a{box-sizing:border-box; display:flex; align-items:center; gap:10px; width:100%; height:36px; padding:0 10px; background:none; border:0; color:#F4F4F2; font:inherit; font-size:13.5px; text-decoration:none; text-align:left; cursor:pointer; border-radius:0; transition:background .12s;}
.navmenu-l:not(#_)>button>span, .navmenu-l:not(#_)>a>span{flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.navmenu-l:not(#_)>button>svg:first-child{width:16px; height:16px; flex:none; color:rgba(255,255,255,.62); transition:color .12s, transform .2s cubic-bezier(.2,.7,.2,1);}
.navmenu-l:not(#_)>button:hover>svg:first-child, .navmenu-l:not(#_)>button:focus-visible>svg:first-child{color:#DFFF3F; transform:translateX(1px);}
.navmenu-l:not(#_)>*:hover, .navmenu-l:not(#_)>*:focus-visible{background:rgba(255,255,255,.07); outline:none;}
.navmenu-l:not(#_)>*:focus-visible{box-shadow:inset 2px 0 0 #DFFF3F;}
.navmenu-l:not(#_) i{font-style:normal; flex:none; min-width:18px; height:18px; padding:0 5px; display:inline-flex; align-items:center; justify-content:center; background:#DFFF3F; color:#17171A; font-size:11px; font-weight:700;}
.navmenu-l:not(#_) i:empty{display:none;}
.navmenu-l:not(#_) em{font-style:normal; flex:none; color:rgba(255,255,255,.5); font-size:10.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;}
.navmenu-ext:not(#_){width:13px; height:13px; flex:none; color:rgba(255,255,255,.35);}
.navmenu-l:not(#_)>a:hover .navmenu-ext{color:rgba(255,255,255,.8);}
.navmenu-l2:not(#_){display:grid; grid-template-columns:1fr 1fr; column-gap:4px;}
.navmenu-l2:not(#_) .navmenu-k{grid-column:1/-1;}
.navmenu-l2:not(#_)>a{height:32px; font-size:12.5px; color:rgba(255,255,255,.82); gap:6px;}
.navmenu-l2:not(#_)>a>span{flex:1 1 auto;}
.navmenu-l2:not(#_) em{font-size:9.5px;}
.navmenu-l2:not(#_) .navmenu-wide{grid-column:1/-1;}
.navmenu-legal:not(#_){display:flex; flex:none; gap:4px; padding:4px 8px; border-bottom:1px solid rgba(255,255,255,.08);}
.navmenu-legal:not(#_) a{display:inline-flex; align-items:center; min-height:32px; padding:0 8px; color:rgba(255,255,255,.5); font-size:11.5px; text-decoration:none;}
.navmenu-legal:not(#_) a:hover{color:#fff; text-decoration:underline; text-underline-offset:3px;}
.navmenu-f:not(#_){flex:none; padding:12px 14px 14px;}
.navmenu-f:not(#_) button{display:flex; align-items:center; justify-content:center; width:100%; height:34px; padding:0 12px; background:none; border:0; box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); color:#fff; font:inherit; font-size:13px; font-weight:600; cursor:pointer; border-radius:0;}
.navmenu-f:not(#_) button:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.4); background:rgba(255,255,255,.04);}
.navmenu-f:not(#_) span{display:block; margin-top:8px; color:rgba(255,255,255,.56); font-size:11.5px; line-height:1.45; text-align:center;}
.navmenu-f:not(#_) span:empty, .navmenu-f:not(#_) [hidden]{display:none;}
.navmenu-f:not(#_):has(button[hidden]){display:none;}
.navmenu:not(#_):not([hidden]) .navmenu-l>button, .navmenu:not(#_):not([hidden]) .navmenu-l>a{animation:navrow .26s cubic-bezier(.2,.7,.2,1) both;}
.navmenu-l:not(#_)>:nth-child(2){animation-delay:.02s}
.navmenu-l:not(#_)>:nth-child(3){animation-delay:.04s}
.navmenu-l:not(#_)>:nth-child(4){animation-delay:.06s}
.navmenu-l:not(#_)>:nth-child(5){animation-delay:.08s}
.navmenu-l:not(#_)>:nth-child(6){animation-delay:.1s}
.navmenu-l:not(#_)>:nth-child(7){animation-delay:.12s}
@media (prefers-reduced-motion:reduce){ .navmenu:not(#_), .navmenu-scrim:not(#_), .navmenu-l:not(#_)>button, .navmenu-l:not(#_)>a{animation:none !important;} }
@media (max-width:1179px){ .navmenu:not(#_){top:62px; right:12px;} }
@media (min-width:1180px){ .navmenu:not(#_).signed .navmenu-h{display:none;} }
@media (max-width:1023px){ .navmenu:not(#_){top:auto !important; right:0 !important; left:0; bottom:var(--kmb, 0px); width:auto; max-width:none; border-left:0; border-right:0; border-bottom:0; max-height:calc(100vh - 72px - var(--kmb, 0px)); max-height:calc(100dvh - 72px - var(--kmb, 0px)); transform-origin:bottom center; animation:navsheet .26s cubic-bezier(.2,.7,.2,1);} }
@media (max-width:1023px){ .navmenu-grip:not(#_){display:block; flex:none; width:36px; height:4px; margin:8px auto 0; background:rgba(255,255,255,.18);} }
@media (max-width:1023px){ .navmenu-x:not(#_){display:inline-flex;} }
@media (max-width:1023px){ .navmenu:not(#_) [data-go="sent"], .navmenu:not(#_) [data-go="request"], .navmenu:not(#_) [data-go="albums"]{display:none;} }
@media (max-width:1023px){ .navmenu-l:not(#_)>button, .navmenu-l:not(#_)>a{height:44px; font-size:15px;} }
@media (max-width:1023px){ .navmenu-l2:not(#_)>a{height:42px; font-size:14.5px;} }
@media (max-width:1023px){ .navmenu-k:not(#_){padding-top:10px;} }
@media (max-width:1023px){ .navmenu-h:not(#_){padding:10px 14px 12px;} }
@media (max-width:1023px){ .navmenu-f:not(#_){padding-bottom:calc(14px + env(safe-area-inset-bottom));} }
@media (max-width:1023px){ html .navmenu:not(#_){top:0 !important; right:0 !important; left:0 !important; bottom:var(--kmb) !important; width:auto !important; max-width:none !important; max-height:none !important; height:auto !important;
    padding:calc(env(safe-area-inset-top) + 8px) 16px 28px; box-sizing:border-box; background:#0E0E10; border:0 !important; border-radius:0 !important; box-shadow:none !important; animation:kmorein .18s ease both; z-index:85;} }
@media (max-width:1023px){ html .navmenu:not(#_)::before{content:"More"; display:block; flex:none; padding:10px 4px 14px; font-size:34px; font-weight:700; letter-spacing:-.8px; line-height:1.1; color:#fff;} }
@media (max-width:1023px){ html .navmenu-scrim:not(#_){display:none !important;} }
@media (max-width:1023px){ html .navmenu-grip:not(#_), html .navmenu-x:not(#_){display:none !important;} }
@media (max-width:1023px){ html .navmenu-h:not(#_){flex:none; gap:14px; padding:14px 16px; background:#1C1C1F; border:0; border-radius:12px 12px 0 0;} }
@media (max-width:1023px){ html .navmenu-av:not(#_){width:52px; height:52px; border-radius:50%; font-size:21px;} }
@media (max-width:1023px){ html .navmenu-av:not(#_) svg{width:24px; height:24px;} }
@media (max-width:1023px){ html .navmenu-ht:not(#_) b{font-size:17px; font-weight:600; letter-spacing:-.2px;} }
@media (max-width:1023px){ html .navmenu-ht:not(#_) span{margin-top:3px; font-size:13.5px; color:rgba(235,235,245,.6);} }
@media (max-width:1023px){ html .navmenu-plan:not(#_){flex:none; padding:4px 16px 16px; background:#1C1C1F; border:0; border-radius:0 0 12px 12px; position:relative;} }
@media (max-width:1023px){ html .navmenu-plan:not(#_)::before{content:""; position:absolute; left:16px; right:0; top:0; height:.5px; background:rgba(255,255,255,.12);} }
@media (max-width:1023px){ html .navmenu-pt:not(#_){padding-top:12px; font-size:15px; font-weight:600;} }
@media (max-width:1023px){ html .navmenu-pt:not(#_) span{font-weight:400; color:rgba(235,235,245,.6);} }
@media (max-width:1023px){ html .navmenu-rows:not(#_){gap:14px; margin-top:12px;} }
@media (max-width:1023px){ html .navmenu-row:not(#_){font-size:13px; color:rgba(235,235,245,.6);} }
@media (max-width:1023px){ html .navmenu-row:not(#_) i{height:4px; margin-top:8px; border-radius:2px;} }
@media (max-width:1023px){ html .navmenu-row:not(#_) i b{border-radius:2px;} }
@media (max-width:1023px){ html .navmenu-cta:not(#_){height:50px; margin-top:16px; border-radius:12px; font-size:16px; font-weight:600;} }
@media (max-width:1023px){ html .navmenu-l:not(#_){flex:none; position:relative; display:block; margin-top:42px; padding:0; background:#1C1C1F; border:0; border-radius:12px;} }
@media (max-width:1023px){ html .navmenu-k:not(#_){position:absolute; left:16px; top:-27px; padding:0; font-size:13px; font-weight:400; letter-spacing:0; text-transform:none; color:rgba(235,235,245,.6);} }
@media (max-width:1023px){ html .navmenu:not(#_) [data-go="sent"], html .navmenu:not(#_) [data-go="request"], html .navmenu:not(#_) [data-go="albums"]{display:none !important;} }
@media (max-width:1023px){ html .navmenu-l:not(#_)>button, html .navmenu-l:not(#_)>a{position:relative; box-sizing:border-box; width:100%; height:52px; gap:14px; padding:0 40px 0 16px; font-size:17px; font-weight:400; letter-spacing:-.2px; color:#fff; border-radius:0; animation:none !important;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14'%3E%3Cpath d='M1 1l6 6-6 6' fill='none' stroke='%23ffffff' stroke-opacity='.3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center / 8px 14px;} }
@media (max-width:1023px){ html .navmenu-l:not(#_)>button:active, html .navmenu-l:not(#_)>a:active{background-color:rgba(255,255,255,.08);} }
@media (max-width:1023px){ html .navmenu-l:not(#_)>*:hover, html .navmenu-l:not(#_)>*:focus-visible{background-color:transparent; box-shadow:none;} }
@media (max-width:1023px){ html .navmenu-l:not(#_)>:nth-child(2){border-radius:12px 12px 0 0;} }
@media (max-width:1023px){ html .navmenu-l:not(#_)>:last-child{border-radius:0 0 12px 12px;} }
@media (max-width:1023px){ html .navmenu-l:not(#_)>button>svg:first-child{width:30px; height:30px; padding:6px; box-sizing:border-box; border-radius:7px; background:#2E2E33; color:#fff; transform:none !important;} }
@media (max-width:1023px){ html .navmenu-l:not(#_)>button[data-go="brand"]>svg:first-child{background:#DFFF3F; color:#17171A;} }
@media (max-width:1023px){ html .navmenu-l:not(#_)>button[data-go="brand"]>svg circle{fill:#DFFF3F;} }
@media (max-width:1023px){ html .navmenu-l:not(#_)>button::after, html .navmenu-l:not(#_)>a::after{content:""; position:absolute; left:60px; right:0; bottom:0; height:.5px; background:rgba(255,255,255,.12);} }
@media (max-width:1023px){ html .navmenu-l2:not(#_)>a::after{left:16px;} }
@media (max-width:1023px){ html .navmenu-l:not(#_)>:last-child::after{display:none;} }
@media (max-width:1023px){ html .navmenu-l2:not(#_){display:block;} }
@media (max-width:1023px){ html .navmenu-l2:not(#_)>a{height:48px; font-size:17px; color:#fff;} }
@media (max-width:1023px){ html .navmenu-l2:not(#_) em{font-size:12px; font-weight:500; letter-spacing:0; text-transform:none; color:rgba(235,235,245,.6);} }
@media (max-width:1023px){ html .navmenu-l2:not(#_)>a:has(.navmenu-ext){background-image:none; padding-right:16px;} }
@media (max-width:1023px){ html .navmenu-ext:not(#_){width:15px; height:15px; color:rgba(255,255,255,.35);} }
@media (max-width:1023px){ html .navmenu-l:not(#_) i{border-radius:9px;} }
@media (max-width:1023px){ html .navmenu-legal:not(#_){flex:none; justify-content:center; gap:18px; margin-top:22px; padding:0; border:0;} }
@media (max-width:1023px){ html .navmenu-legal:not(#_) a{min-height:32px; padding:0; font-size:13px; color:rgba(235,235,245,.5);} }
@media (max-width:1023px){ html .navmenu-f:not(#_){flex:none; margin-top:18px; padding:0;} }
@media (max-width:1023px){ html .navmenu-f:not(#_) button{height:50px; background:#1C1C1F; box-shadow:none; border-radius:12px; color:#FF453A; font-size:17px; font-weight:400;} }
@media (max-width:1023px){ html .navmenu-f:not(#_) button:active{background:#26262A;} }
@media (max-width:1023px){ html .navmenu-f:not(#_) span{margin-top:8px; font-size:13px;} }

/* its motion */
@keyframes kmorein{from{opacity:0;} to{opacity:1;}}
@keyframes navpop{from{opacity:0; transform:translateY(-6px) scale(.98);} to{opacity:1; transform:none;}}
@keyframes navrow{from{opacity:0; transform:translateX(-4px);} to{opacity:1; transform:none;}}
@keyframes navscrim{from{opacity:0;} to{opacity:1;}}
@keyframes navsheet{from{transform:translateY(24px); opacity:0;} to{transform:none; opacity:1;}}

/* 2026-11-14 · the links are anchors, and an anchor at width:100% plus its padding ran 20px
   past the menu's edge: "Early access" and the arrows in Learn were cut off (the box-sizing
   above). And the menu is never taller than the window · it scrolls inside itself. */
@media (min-width:1024px){ .navmenu:not(#_){max-height:calc(100vh - 78px);} }
