/* Talenta Pros — mobile layout pass (Oct 2026).
   Loaded last so it wins over the older layered stylesheets. Phones only. */

/* ---------- Header menu button (injected by mobile-fix.js) ---------- */
.m-menu-btn{display:none}
.m-menu-panel{display:none}
@media (max-width:980px){
  .m-menu-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:none;
    border:1px solid #DCE3EE;border-radius:12px;background:#fff;color:#0E1B3D;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .m-menu-btn svg{width:22px;height:22px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round}
  .m-menu-btn .x{display:none}
  .nav.m-open .m-menu-btn .bars{display:none}
  .nav.m-open .m-menu-btn .x{display:block}
  .nav .wrap{position:relative}
  .nav .nav-links{display:flex;align-items:center;gap:8px;margin-left:auto}
  .m-menu-panel{display:none}
  .nav.m-open .m-menu-panel{display:block;position:absolute;left:12px;right:12px;top:calc(100% + 6px);z-index:60;
    background:#fff;border:1px solid #E3E8F0;border-radius:16px;padding:8px;box-shadow:0 18px 40px -12px rgba(14,27,61,.28)}
  .m-menu-panel a{display:flex;align-items:center;justify-content:space-between;padding:14px 14px;border-radius:10px;
    font:600 16px/1.2 Manrope,system-ui,sans-serif;color:#172033!important;text-decoration:none}
  .m-menu-panel a::after{content:"›";font-size:20px;color:#12B886}
  .m-menu-panel a:active,.m-menu-panel a:hover{background:#EAF8F2}
  .m-menu-panel .m-menu-login{margin-top:6px;border-top:1px solid #EEF1F6;border-radius:0 0 10px 10px}
}

@media (max-width:640px){
  /* ---------- Global breathing room ---------- */
  html,body{overflow-x:clip}
  main .wrap{padding-inline:18px!important}

  /* ---------- Header: logo + trial button + menu fit on one line ---------- */
  .nav .wrap{padding-inline:14px!important;gap:8px!important}
  .nav .logo{flex:none;min-width:0;overflow:hidden}
  html body header.nav .logo img{height:32px!important;width:auto!important;max-width:none!important}
  .nav .nav-links{gap:6px!important}
  .nav .nav-links .tools{display:none!important}
  .nav .nav-links .btn-gold{padding:0 14px!important;min-height:40px;display:inline-flex;align-items:center;font-size:13.5px!important;white-space:nowrap}
  .m-menu-btn{width:40px;height:40px;margin-right:2px}
  .nav .nav-links{margin-right:0!important;padding-right:0!important}

  /* ---------- Bottom bar: one slim row instead of two ---------- */
  nav.mbar{flex-wrap:nowrap!important;align-items:center!important;gap:10px!important;
    padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px))!important;min-height:0!important}
  nav.mbar>span:first-child{flex:1 1 auto!important;min-width:0;font-size:11.5px!important;line-height:1.15!important;white-space:nowrap}
  nav.mbar>span:first-child b{display:block;font-size:15px!important;line-height:1.2!important}
  nav.mbar>span:last-child{flex:0 0 auto!important;flex-wrap:nowrap!important;gap:8px!important;justify-content:flex-end!important}
  nav.mbar .btn{padding:0 16px!important;min-height:42px;display:inline-flex!important;align-items:center;font-size:14px!important;white-space:nowrap}
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}

  /* ---------- WhatsApp button: smaller, sits above the bar, never on top of buttons ---------- */
  a.wa-float{right:12px!important;bottom:calc(74px + env(safe-area-inset-bottom,0px))!important;
    width:48px!important;height:48px!important;min-width:48px!important;min-height:48px!important;padding:5px!important}
  a.wa-float svg{width:36px!important;height:36px!important;padding:7px!important}

  /* ---------- Learning path: compact cards, no side rail ---------- */
  #curr{padding-left:0!important}
  #curr .rm-rail{display:none!important}
  #curr .rm-phase{width:auto!important;margin-left:0!important}
  #curr .rm-ph{padding:14px 16px!important;gap:6px!important}
  #curr .rm-ph h3{font-size:19px!important;margin:0!important}
  #curr .rm-ph p{font-size:14px!important;margin:2px 0 0!important}
  #curr .rm-row{grid-template-columns:34px 1fr!important;column-gap:12px!important;row-gap:4px!important;padding:14px 16px!important}
  #curr .rm-row .rm-hex{transform:scale(.85);transform-origin:left top}
  #curr .rm-main h4{font-size:16.5px!important;margin:0 0 2px!important}
  #curr .rm-main p{font-size:14px!important;margin:0!important}
  #curr .rm-meta{flex-direction:row!important;flex-wrap:wrap!important;gap:2px 12px!important;margin-top:2px!important;font-size:13px!important}
  #curr .rm-meta>span:nth-child(n+3),#curr .rm-meta .rm-notes{display:none!important}
  #curr .rm-les-d>summary{padding:4px 0!important}
  .rm-sum{gap:0!important}

  /* ---------- Plan comparison: stacked rows, all three plans visible ---------- */
  #pricing .price-compare{padding:20px 14px!important;background:#fff!important}
  #pricing .price-compare-title span{padding-left:0!important}
  #pricing .price-compare .cmp-wrap{overflow:visible!important;border:0!important;margin-top:16px!important}
  #pricing .price-compare .cmp,#pricing .price-compare .cmp tbody{display:block;width:100%;min-width:0!important}
  #pricing .price-compare .cmp thead{display:none}
  #pricing .price-compare .cmp tr{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:12px 0;border-bottom:1px solid #E6EAF0}
  #pricing .price-compare .cmp tbody th{grid-column:1/-1;padding:0 0 4px!important;border:0!important;font-size:14.5px!important;font-weight:700!important;text-align:left;background:none!important}
  #pricing .price-compare .cmp td{display:flex;flex-direction:column;gap:3px;padding:8px 6px!important;border:0!important;border-radius:10px;
    background:#F4F6FA;font-size:13px!important;line-height:1.3;text-align:left!important;word-break:break-word}
  #pricing .price-compare .cmp td.col-pop{background:#E3F6EE!important}
  #pricing .price-compare .cmp td::before{font-size:10.5px;font-weight:700;letter-spacing:.02em;color:#596579}
  #pricing .price-compare .cmp td:nth-of-type(1)::before{content:"Best Pros"}
  #pricing .price-compare .cmp td:nth-of-type(2)::before{content:"Successful Pros";color:#0B7A55}
  #pricing .price-compare .cmp td:nth-of-type(3)::before{content:"Advanced Pros"}

  /* ---------- Portal highlight tabs: clean horizontal scroller ---------- */
  .ph-tabs{scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;padding-bottom:4px}
  .ph-tabs::-webkit-scrollbar{display:none}
  .ph-tabs .ph-tab{scroll-snap-align:start;flex:none}

  /* ---------- Headings and buttons sized for thumbs ---------- */
  main h2{font-size:clamp(26px,7.4vw,32px)!important;line-height:1.15!important}
  main .btn{min-height:46px}
}

@media (max-width:370px){
  html body header.nav .logo img{height:26px!important}
  .nav .nav-links .btn-gold{padding:0 11px!important;font-size:12.5px!important}
}