/* WOOPIFY responsive layout layer — loaded after page styles */
:root{--ss-mobile-gutter:clamp(14px,3.5vw,28px)}
html{max-width:100%;overflow-x:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{max-width:100%;overflow-x:hidden}
img,video,iframe,svg,canvas{max-width:100%}
img,video{height:auto}
button,input,select,textarea{max-width:100%;font:inherit}
input,select,textarea{min-width:0}
pre,code{max-width:100%;overflow-x:auto;white-space:pre-wrap;overflow-wrap:anywhere}
main,.wrap,.container,.content,.page-content,.dashboard-content{min-width:0}
.grid,.cards,.feature-grid,.steps,.plans-grid,.contact-grid,.footer-grid{min-width:0}
.grid>* ,.cards>*,.feature-grid>*,.steps>*,.plans-grid>*,.contact-grid>*,.footer-grid>*{min-width:0}
.table-wrap,.table-responsive,.overflow-x-auto{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
table{max-width:100%}
.btn,.button,button[type=submit],input[type=submit]{touch-action:manipulation}
input,select,textarea{font-size:16px}
@media(max-width:900px){
  .container,.wrap{width:min(100% - 32px,100%);}
  .desktop-only{display:none!important}
  .grid,.cards,.feature-grid,.steps,.plans-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .contact-grid{grid-template-columns:minmax(0,1fr)}
  .table-wrap{width:100%}
  .panel,.card,.content-card{max-width:100%}
  .form-row,.form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  html,body{width:100%;min-width:320px}
  .container,.wrap{width:calc(100% - 28px);max-width:none}
  header,.site-header{max-width:100%}
  .grid,.cards,.feature-grid,.steps,.plans-grid,.form-row,.form-grid,.footer-grid{grid-template-columns:minmax(0,1fr)!important}
  .hero-grid{grid-template-columns:minmax(0,1fr)!important}
  .contact-grid{grid-template-columns:minmax(0,1fr)!important}
  .hero{padding-top:36px!important;padding-bottom:36px!important}
  h1,.intro h1{font-size:clamp(27px,8vw,38px)!important;line-height:1.15;overflow-wrap:anywhere}
  h2{font-size:clamp(20px,6vw,27px)}
  p{overflow-wrap:anywhere}
  .navrow{gap:8px;min-width:0}
  .logo,.brand{min-width:0;max-width:58vw;overflow:hidden;text-overflow:ellipsis}
  .logo img,.brand img{max-width:100%;height:auto}
  .navcta{display:flex;gap:7px;align-items:center;min-width:0}
  .navcta .btn{padding:9px 10px;font-size:12px;white-space:nowrap}
  .navlinks{max-height:calc(100dvh - 66px);overflow-y:auto}
  .hero-actions,.actions,.toolbar-bottom,.section-head,.inline{flex-wrap:wrap;min-width:0}
  .hero-actions .btn,.actions .btn{flex:1 1 140px}
  .search-card,.panel,.content-card,.card,.plan-card,.faq-item{padding:16px!important;border-radius:13px}
  .stats{grid-template-columns:minmax(0,1fr)!important}
  .stat{border-right:0!important}
  .table-wrap{width:100%;margin-left:0;margin-right:0;overflow-x:auto}
  table{min-width:640px}
  th,td{padding:10px 9px;white-space:normal;overflow-wrap:anywhere}
  .tools{align-items:stretch}
  .tools>*{max-width:100%!important;flex:1 1 100%}
  .tools input,.tools select{width:100%;max-width:none}
  .pagination{flex-wrap:wrap}
  .toolbar-bottom{align-items:flex-start}
  .field,.form-group{min-width:0}
  .field input,.field select,.field textarea,.form-group input,.form-group select,.form-group textarea{width:100%;max-width:100%}
  .modal,.dialog,.popup,.popover{max-width:calc(100vw - 24px)!important;max-height:calc(100dvh - 24px);overflow:auto}
  .ss-preferences{flex-shrink:0}
  footer,.site-footer{overflow-wrap:anywhere}
  .copyright{gap:8px}
}
@media(max-width:380px){
  .container,.wrap{width:calc(100% - 22px)}
  .navcta .btn.outline{display:none}
  .navcta .btn{padding:8px 9px}
  .ss-preferences{gap:3px;margin:0}
  .ss-preferences button,.ss-preferences select{height:33px;min-width:33px}
  .ss-preferences select{width:43px;min-width:43px}
  .userbar span{max-width:28vw}
}
@media(hover:none){.nav a:hover,.btn:hover{transition:none}}