/* Shared public navigation; sizes stay in CSS pixels on wide displays. */
#nav{gap:20px;padding:12px clamp(16px,3vw,40px);padding-top:calc(12px + env(safe-area-inset-top,0px));background:rgba(11,8,24,.96)}
#nav .brand{flex-shrink:0;gap:10px}
#nav .brand svg,#nav .brand img{width:44px;height:36px;display:block}
#nav .brand-word{font-size:13px;letter-spacing:.14em}
#nav .nav-actions{display:flex;align-items:center;gap:8px;min-width:0}
#nav .navlinks{gap:2px}
#nav .navlink{padding:10px 12px;font-size:13px;white-space:nowrap}
#nav .btn.small{min-height:44px;padding:0 16px;font-size:13px;font-weight:500}
#nav .nav-login{max-width:220px}
#nav .nav-login .ini{flex-shrink:0;margin-left:0}
#nav .nav-login .txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
#nav .nav-login .nav-plan{flex-shrink:0}
#nav .acct-menu{width:264px;min-width:0;padding:8px;border-radius:16px;max-height:calc(100dvh - 88px - env(safe-area-inset-top,0px));overflow-y:auto;overscroll-behavior:contain;background:#140e2b;box-shadow:0 20px 60px -12px rgba(0,0,0,.7)}
#nav .acct-menu p{overflow-wrap:anywhere}
#nav .acct-menu .acct-head{gap:10px;padding:8px 6px 10px}
#nav .acct-head p{flex:1;min-width:0}
#nav .acct-head strong{font-size:13px;white-space:normal;line-height:1.5}
#nav .acct-head span{font-size:11px}
#nav .acct-pic{width:36px;height:36px;font-size:12px}
#nav .acct-menu a,#nav .acct-menu button{min-height:44px;padding:8px 10px;font-size:13px;font-weight:400;line-height:1.45;overflow-wrap:anywhere}
#nav .acct-menu a:hover,#nav .acct-menu button:hover{background:rgba(167,139,250,.16);color:#fff}
#nav .acct-menu a:focus-visible,#nav .acct-menu button:focus-visible{outline-offset:-2px}
#nav .acct-plan{gap:8px;margin-bottom:4px;padding:8px 10px!important;font-size:12px!important}
#nav .navlink[aria-current="page"]{color:#fff}
@media(min-width:961px){#nav .navlinks{position:static;opacity:1;transform:none;pointer-events:auto}#nav .menu-btn,#nav .nav-cta-mobile{display:none}}
@media(max-width:960px){
  #nav{gap:12px}
  #nav .brand-word,#nav .cta-top{display:none}
  #nav .menu-btn{display:inline-flex;flex-shrink:0;width:44px;height:44px}
  #nav .nav-login{max-width:min(220px,calc(100vw - 132px))}
  #nav .nav-login .txt{max-width:100px}
  #nav .navlinks{position:fixed;left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));top:calc(76px + env(safe-area-inset-top,0px));display:flex;flex-direction:column;align-items:stretch;gap:0;padding:8px;border:1px solid var(--line-strong);border-radius:16px;background:#140e2b!important;max-height:calc(100dvh - 88px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));overflow-y:auto;overscroll-behavior:contain;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px);transition:opacity .2s,transform .2s,visibility .2s}
  #nav .navlinks.open{opacity:1;visibility:visible;pointer-events:auto;transform:none}
  #nav .navlinks .navlink{font-size:14px;min-height:44px;padding:12px}
  #nav .nav-cta-mobile{display:flex;min-height:44px;margin:6px 4px 4px;font-size:13px}
  #nav .acct-menu{position:fixed;top:calc(76px + env(safe-area-inset-top,0px));left:auto;right:max(12px,env(safe-area-inset-right,0px));width:min(264px,calc(100vw - 24px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)));max-height:calc(100dvh - 88px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))}
}
.pricing-page main{padding:clamp(112px,12vw,144px) 0 56px}
.pricing-page #pricing{padding-bottom:0}
.pricing-page .h2{font-size:clamp(30px,3.4vw,46px);max-width:24ch;margin:0 auto 20px;text-wrap:balance}
.pricing-page .sub{margin-bottom:28px;font-size:15px}
.pricing-page .plan{padding:24px;gap:14px;min-width:0}
.pricing-page .wrap{width:min(1120px,100% - 2*clamp(18px,4vw,40px))}
@media(max-width:480px){.pricing-page .plan{padding:22px}.pricing-page .sub{font-size:14px}}
@media(prefers-reduced-motion:reduce){#nav .navlinks{transition:none}}
