/* =========================================================
   Hulahoot — mobile pass. Loaded LAST on every page.
   Fixes overlap and keeps every screen usable on a phone.
   ========================================================= */

/* nothing may push the page sideways */
html,body{max-width:100%;overflow-x:hidden}

@media (max-width:900px){
  /* ---- landing: brand strip stops stretching, starts scrolling ---- */
  .apps-row{justify-content:flex-start;gap:8px}
}

@media (max-width:640px){

  /* ---------- landing header ---------- */
  .hh-header-in{grid-template-columns:auto 1fr auto;gap:6px;padding:10px 14px}
  .logo-txt{font-size:22px}
  .logo{padding:2px 2px 6px}
  .logo-pin{width:12px;height:7px;bottom:-5px}
  .burger{width:32px;height:32px}
  .spark-sm{display:none}

  /* Sage signs in on mobile — Sign In wins, Create Account steps aside */
  .hdr-right{gap:6px}
  .hdr-right .btn-purple{display:none}
  .hdr-right .btn-outline{
    display:inline-flex;background:var(--purple);color:#fff;border-color:var(--purple);
  }
  .hdr-right .btn-outline:hover{background:var(--purple-d);border-color:var(--purple-d)}
  .bell{width:34px;height:34px}
  .bell svg{width:19px;height:19px}

  /* ---------- landing hero ---------- */
  .hero{padding:20px 14px 0}
  .hero-title{font-size:21px;margin-bottom:16px}
  .searchbar{height:48px;padding:0 8px 0 14px;gap:8px}
  .searchbar input{font-size:13.5px}
  .s-btn{width:32px;height:32px}
  .s-btn svg{width:17px;height:17px}
  .trending{gap:7px;margin-top:14px;padding-bottom:18px}
  .chip{height:30px;padding:0 12px;font-size:12px}

  /* ---------- landing brand strip ---------- */
  .app{width:70px;padding:6px 0 12px}
  .app-tile{width:48px;height:48px;border-radius:13px}
  .app-tile img{width:28px;height:28px}
  .app-name{font-size:10.5px}
  .app-viewall{min-width:80px;height:66px;padding:0 12px}

  /* ---------- landing content ---------- */
  .topstory{padding:10px;gap:12px}
  .topstory-body{padding:2px 2px 4px}
  .topstory-body h3{font-size:18px}
  .dek{font-size:13px}
  .sec-head h2{font-size:15px}

  /* ---------- home feed ---------- */
  .app-header-in{padding:10px 14px;gap:6px}
  .app-header .logo-txt{font-size:23px}
  .grid-btn{width:34px;height:34px}
  .grid-btn svg{width:20px;height:20px}
  .me,.me-menu{max-width:calc(100vw - 28px)}
  .me{width:34px;height:34px}
  .feedwrap{padding:4px 14px 44px}
  .askbar{height:46px;padding:0 8px 0 14px;margin-bottom:18px}
  .askbar input{font-size:14px}
  .carousel{padding:0 30px;margin-bottom:20px}
  .car-arrow{width:30px;height:30px}
  .car-arrow svg{width:14px;height:14px}

  .comp-top{gap:9px}
  .c-av{width:40px;height:40px}
  .comp-input{height:42px;padding:0 15px;font-size:14px}
  .comp-actions{gap:0}
  .comp-actions button{font-size:11.5px;gap:5px;padding:0 2px;height:38px}
  .comp-actions .ci{font-size:15px}
  .comp-div{display:none}

  .pc-head{padding:12px 13px 8px;gap:10px}
  .pc-av{width:40px;height:40px}
  .pc-name{font-size:14.5px}
  .pc-text{padding:0 13px 10px;font-size:14px}
  .pc-media{padding:0 13px}
  .pc-stats{padding:10px 13px;gap:8px;flex-wrap:wrap}
  .pc-counts{gap:12px;font-size:12px}
  .reacts b{font-size:12.5px;margin-left:12px}
  .pc-bar{margin:0 13px}
  .pc-bar button{font-size:11.5px;gap:5px;padding:0 2px}
  .pc-bar svg{width:17px;height:17px}

  /* ---------- profile ---------- */
  .pf-hero{height:170px}
  .pf-id{padding:18px 16px 0}
  .pf-name{font-size:21px}
  .pf-desc,.pf-bio{font-size:12.8px}
  .pf-actions{gap:18px;margin-top:14px}
  .pf-actions a{font-size:13.5px}
  .pf-buttons{gap:8px;margin-top:14px}
  .pf-btn{height:36px;padding:0 14px;font-size:12.8px;gap:6px}
  .pf-btn svg{width:14px;height:14px}
  .pf-stats{margin-top:15px;padding-bottom:16px}
  .pf-stats b{font-size:15px}
  .pf-stats span{font-size:11.5px}
  .pf-info{padding:14px 14px 16px;gap:8px}
  .pf-menubar{padding-right:10px;gap:4px}
  .pf-menu{padding:0 12px}
  .pf-menu button{padding:12px 10px;font-size:13px}
  .pf-drop-btn{height:30px;padding:0 10px;font-size:12.5px}
  .pf-drop-menu{width:min(240px,calc(100vw - 32px))}
  .pf-feed{padding:14px 13px 18px;gap:12px}
  .pf-post{padding:12px 13px}
  .pf-grid{padding:14px 13px 18px;gap:6px}

  /* ---------- business page ---------- */
  .bp-cover{height:160px}
  .bp-cover-copy{left:16px}
  .bp-cover-copy b{font-size:19px}
  .bp-cover-copy i{font-size:12.5px;margin-top:4px}
  .bp-logo{width:88px;height:88px;left:14px;bottom:-32px}
  .bp-logo .lg{border-width:3px}
  .bp-logo .lg span{font-size:36px}
  .bp-badge{width:24px;height:24px;border-width:2px;right:2px;bottom:2px}
  .bp-badge svg{width:12px;height:12px}

  /* actions clear the logo instead of sitting on it */
  .bp-top{padding:10px 14px 0;min-height:0}
  .bp-top-actions{
    margin-left:0;width:100%;padding-top:40px;
    display:grid;grid-template-columns:1fr 1fr auto;gap:7px;
  }
  .bp-top-actions .btn{height:36px;padding:0 10px;font-size:12.5px;gap:6px}
  .bp-top-actions .btn:nth-of-type(3){grid-column:1 / -2}
  .bp-top-actions .btn-dots{width:100%;height:36px}

  .bp-id{padding:12px 14px 0}
  .bp-name{font-size:22px}
  .bp-name .tick{width:18px;height:18px}
  .bp-meta,.bp-bio,.bp-stats{font-size:12.8px}
  .bp-friends p{font-size:11.5px}
  .bp-tabs{padding:12px 14px 0}
  .bp-tabs button,.bp-tabs a{padding:8px 11px 12px;font-size:13px}
  .bp-feed{padding:14px 13px 18px}
  .bp-post{padding:12px 13px}
  .bp-counts{gap:16px}

  /* ---------- hulasite ---------- */
  .hs-chrome{padding:11px 13px;gap:9px;flex-wrap:wrap}
  .hs-chrome h2{font-size:14.5px}
  .hs-chrome .hs-acts{gap:6px}
  .hs-chrome .btn{height:32px;padding:0 12px;font-size:12.5px}
  .hs-chrome .btn-dots{height:32px;width:34px}
  .hs-back{width:28px;height:28px}
  .hs-hero{height:180px}
  .hs-hero-copy{left:16px;right:16px}
  .hs-hero-copy b{font-size:26px}
  .hs-cta{height:36px;padding:0 16px;font-size:13px;margin-top:12px}
  .hs-nav{padding:0 10px}
  .hs-nav a{padding:12px 11px;font-size:13px}
  .hs-body{padding:16px 13px}
  .hs-sec h3{font-size:17px}
  .hs-grid{gap:9px}
  .hs-card{padding:8px}
  .hs-card b{font-size:12.4px}
  .hs-card p{font-size:11.4px}
  .hs-banner{padding:18px 16px;margin:18px 0}
  .hs-banner h4{font-size:17px}
  .hs-banner p{font-size:12.5px}
  .hs-foot{padding:22px 16px;gap:16px}
}

@media (max-width:640px){
  /* ---------- hulasite layout styles ---------- */
  .hs-editorial .hs-hero{height:210px}
  .hs-editorial .hs-hero-copy b{font-size:27px}
  .hs-editorial .hs-nav{justify-content:flex-start}
  .hs-editorial .hs-sec h3{font-size:19px}
  .hs-formal .hs-hero{height:190px}
  .hs-formal .hs-hero-copy b{font-size:22px}
  .hs-formal .hs-nav a{font-size:12px;padding:12px 10px}
  .hs-formal .hs-sec h3{font-size:16px}
  .hs-bold .hs-hero{height:200px}
  .hs-bold .hs-hero-copy b{font-size:29px}
  .hs-bold .hs-nav{padding:8px 10px}
  .hs-bold .hs-nav a{padding:8px 13px;font-size:12.5px}
  .hs-bold .hs-sec h3{font-size:18px}

  /* ---------- directories ---------- */
  .dirhead h2{font-size:18px}
  .dirhead p{font-size:12.8px}

  /* ---------- work surfaces (HHire / Freelance / Customs / Plugins) ----------
     the shared responsive rules live in work.css; these are the shell-level
     tweaks that only matter once the sidebar has collapsed */
  .fm-actions .btn{flex:1;min-width:132px}
  .pg-buy{position:static}
}

@media (max-width:400px){
  .hdr-right .btn{height:34px;padding:0 12px;font-size:12.5px}
  .hero-title{font-size:19px}
  .comp-actions button{font-size:0;gap:0}
  .comp-actions .ci{font-size:17px}
  .pc-bar button{font-size:0;gap:0}
  .pc-bar svg{width:19px;height:19px}
  .bp-top-actions{grid-template-columns:1fr 1fr}
  .bp-top-actions .btn:nth-of-type(3){grid-column:1 / -1}
  .bp-top-actions .btn-dots{display:none}
  .explore{grid-template-columns:repeat(2,minmax(0,1fr))}
}