/* Phone-only refinements. Desktop layout and assets are intentionally untouched. */
@media (max-width:760px){
  html{max-width:100%;overflow-x:clip;-webkit-text-size-adjust:100%}
  body{max-width:100%;overflow-x:clip}
  .site-header{padding-left:max(22px,env(safe-area-inset-left));padding-right:max(22px,env(safe-area-inset-right));padding-top:max(23px,env(safe-area-inset-top))}
  .site-header.scrolled{padding-left:max(15px,env(safe-area-inset-left));padding-right:max(15px,env(safe-area-inset-right))}
  .menu-button{width:44px!important;height:44px!important;min-width:44px;min-height:44px;padding:11px!important;transform:translateY(-8px)}
  .menu-button span{width:20px}
  .mobile-menu{justify-content:flex-start;gap:12px;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:calc(84px + env(safe-area-inset-top)) max(27px,env(safe-area-inset-right)) calc(30px + env(safe-area-inset-bottom)) max(27px,env(safe-area-inset-left))}
  .mobile-menu a,.mobile-menu button{font-size:clamp(31px,10vw,43px);line-height:1.03;min-height:44px;flex:0 0 auto}
  .mobile-menu>span{margin-top:18px;padding-bottom:env(safe-area-inset-bottom)}
  .hero-buttons .button{width:min(100%,330px);min-height:50px}
  .filter,.pool-add{min-height:44px}
  .search{min-height:44px}
  .market-bottom button,.closing-action .button{min-height:44px}
  .marquee{max-width:100vw}
  .asset-fan{overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
  .way-card:active{transform:translateY(-14px) rotate(0deg)}
  .way-card:active .token:first-child{transform:rotate(-25deg) translateX(-5px)}
  .way-card:active .token+.token{transform:rotate(25deg) translateX(5px)}
  .pool-row:active:before{transform:scaleY(1)}
  .pool-row:active .token-pair .token:first-child{transform:rotate(-15deg) translateX(-3px)}
  .pool-row:active .token-pair .token:last-child{transform:rotate(15deg) translateX(3px)}
  .map-node:active .token{transform:scale(1.12) rotate(-8deg)}
  .fan-card:active{transform:translateY(-8px);box-shadow:0 15px 20px #0004}
  dialog{overscroll-behavior:contain}
  .dialog-body{overflow-x:hidden}
  .review-actions{flex-wrap:wrap}
  .review-actions .button{min-height:44px}
}

@media (max-width:600px){
  body.page{max-width:100%;overflow-x:clip}
  .doc-header{display:grid;grid-template-columns:minmax(0,1fr);align-items:start;gap:12px;padding-top:max(16px,env(safe-area-inset-top));padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
  .doc-header .wordmark{font-size:34px}
  .doc-header nav{width:100%;gap:4px 14px;flex-wrap:wrap}
  .doc-header nav a,.doc-header nav button{display:inline-flex;align-items:center;min-height:40px}
  .doc-header nav .pill{min-height:44px}
  .doc,.policy .doc,.doc-body,.doc-body>section,.doc-toc{min-width:0;max-width:100%}
  .doc-body pre{max-width:100%;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
  .doc-body table{display:block;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
  .table-wrap{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
  .doc-body code,.addr{overflow-wrap:anywhere;word-break:break-word}
  .doc-footer nav a{display:inline-flex;align-items:center;min-height:40px}
  .synth-page .net-pill,.synth-page .wallet-button{min-height:44px}
}

@media (max-width:360px){
  .site-header{padding-left:18px;padding-right:18px}
  .section-pad{padding-left:18px;padding-right:18px}
  .hero-copy{padding-left:16px;padding-right:16px}
  .hero h1{font-size:40px}
  .section-heading h2,.ways h2,.faq h2{font-size:50px}
  .routes h2{font-size:48px}
  .way-card{padding-left:24px;padding-right:24px}
  .footer-links{gap:28px 14px}
}

@media (max-width:760px) and (max-height:700px){
  .mobile-menu{gap:8px;padding-top:calc(72px + env(safe-area-inset-top))}
  .mobile-menu a,.mobile-menu button{font-size:clamp(28px,8.6vw,36px)}
  .mobile-menu>span{margin-top:10px}
}

/* Keep the full desktop navigation from crowding tablets and landscape phones. */
@media (min-width:761px) and (max-width:900px), (min-width:761px) and (max-width:950px) and (max-height:500px){
  html,body{max-width:100%;overflow-x:clip}
  .site-header{padding:18px max(22px,env(safe-area-inset-right)) 18px max(22px,env(safe-area-inset-left))}
  .site-header nav,.header-actions>.button,.header-actions>.wallet-button,.header-actions>.net-pill{display:none}
  .menu-button{display:flex;flex-direction:column;justify-content:center;gap:5px;width:44px!important;height:44px!important;min-width:44px;min-height:44px;padding:11px!important;border:1px solid #24282b44;border-radius:50%}
  .menu-button span{display:block;width:20px;height:1px;background:var(--ink);transition:transform .3s}
  .menu-button[aria-expanded=true] span:first-child{transform:translateY(3px) rotate(45deg)}
  .menu-button[aria-expanded=true] span:last-child{transform:translateY(-3px) rotate(-45deg)}
  .mobile-menu{display:flex;position:fixed;inset:0;background:var(--purple);z-index:25;flex-direction:column;justify-content:flex-start;gap:10px;overflow-y:auto;overscroll-behavior:contain;padding:calc(76px + env(safe-area-inset-top)) max(27px,env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) max(27px,env(safe-area-inset-left));clip-path:inset(0 0 100% 0);transition:clip-path .65s var(--ease)}
  .mobile-menu.open{clip-path:inset(0 0 0 0)}
  .mobile-menu a,.mobile-menu button{font-size:clamp(30px,5vw,40px);letter-spacing:-1.5px;line-height:1.03;text-align:left;padding:0;min-height:42px;flex:0 0 auto}
  .mobile-menu .mobile-wallet{display:block}
  .mobile-menu>span{font-size:11px;margin-top:12px}
}