/* Unified mobile experience for every public page */
.mobile-nav{display:none}
img,video,iframe{max-width:100%}
@media(max-width:720px){
  html{scroll-padding-bottom:86px;-webkit-text-size-adjust:100%}
  body{margin-left:0!important;padding-bottom:calc(76px + env(safe-area-inset-bottom));overflow-x:hidden}
  .side,.side-nav{display:none!important}
  .mobile-nav{position:fixed;z-index:1000;left:0;right:0;bottom:0;display:flex;gap:2px;overflow-x:auto;overscroll-behavior-x:contain;padding:7px 6px calc(7px + env(safe-area-inset-bottom));background:#102d25;border-top:1px solid #ffffff24;box-shadow:0 -8px 30px #102d2530;scrollbar-width:none}
  .mobile-nav::-webkit-scrollbar{display:none}
  .mobile-nav a{flex:0 0 68px;min-height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border-radius:7px;color:#a9c0b8;text-decoration:none;font-size:10px;white-space:nowrap;touch-action:manipulation}
  .mobile-nav a i{font-style:normal;font-size:18px;line-height:1}
  .mobile-nav a.active{background:#ffffff14;color:#fff}
  main,.hero,.section,.consult-hero,.detail-hero,.agent-intro,.case-hero{min-width:0}
  .section{padding-top:48px;padding-bottom:48px}
  .section h2,.section-intro h2{font-size:clamp(28px,8vw,36px)}
  h1,h2,h3,p,li,span,b{overflow-wrap:anywhere}
  .top{min-height:60px;height:auto;padding:12px 5%}
  .top .actions>span{display:none}
  .top .actions{margin-left:auto}
  .btn,.ghost,button{min-height:44px;touch-action:manipulation}
  input,select,textarea{font-size:16px!important;max-width:100%}
  dialog{width:calc(100vw - 24px)!important;max-width:none;max-height:calc(100dvh - 28px);margin:auto;padding:22px 18px;overflow:auto;border-radius:4px}
  dialog .close,.dialog-close{position:sticky;z-index:20;float:right;top:0;right:0;display:grid;place-items:center;width:44px;height:44px;margin:-10px -8px 0 0;border-radius:50%;background:#fff;color:#17352d;box-shadow:0 3px 15px #0002}
  .course-dialog-head{margin:-22px -18px 22px;padding:54px 20px 24px}
  .price-box,.unlock-form,.card,.lecture-card{padding:20px}
  .preview-video-shell,.course-trial-player{min-height:0!important;aspect-ratio:16/10}
  .preview-video-shell iframe,.course-trial-player iframe{width:100%;height:100%}
  .preview-start,.preview-expired,.course-trial-cover,.course-trial-ended{padding:22px 16px!important}
  .locked-video,.video-cover,.video-shell{min-height:200px}
  .receipt-head{padding:26px 22px}.receipt-content{padding:22px}
  footer{padding-bottom:28px;text-align:center}
}
@media(min-width:721px) and (max-width:1024px){
  .section{padding-left:5%;padding-right:5%}
  dialog{max-height:90vh;overflow:auto}
}