/* responsive.css - loaded LAST on every page. Mobile-first safety layer (v6). */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;max-width:100%;overflow-x:clip}
body{max-width:100%;overflow-x:clip}
img,video,iframe,canvas,embed,object{max-width:100%}
table{max-width:100%}
pre,code{white-space:pre-wrap;overflow-wrap:anywhere}
h1,h2,h3,h4,p,li,a,span,label,summary{overflow-wrap:break-word}
input,select,textarea,button{max-width:100%;font-size:max(16px,1em)}
.wrap,.hero-inner{padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}
.mbtn{min-width:44px;min-height:44px;display:none;align-items:center;justify-content:center}
.logo img.brand-logo{display:block;height:var(--logo-h,38px);width:auto;max-width:min(220px,48vw);object-fit:contain}
.logo{min-width:0}

@media(max-width:1100px){
 .footer-grid{grid-template-columns:1.4fr 1fr 1fr!important;gap:32px!important}
 .hero-inner{gap:32px!important}
}
@media(max-width:860px){
 nav.links{width:min(86vw,340px)!important;overflow-y:auto;-webkit-overflow-scrolling:touch}
 .mbtn{display:flex!important;flex-direction:column}
 .nav{padding:12px 0!important}
 .hero{padding-top:36px!important;padding-bottom:36px!important}
 section{scroll-margin-top:70px}
 .footer-grid{grid-template-columns:1fr 1fr!important}
 .footer-brand{grid-column:1/-1}
 .footer-brand p{max-width:none!important}
}
@media(max-width:700px){
 .wrap,.hero-inner{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
 .nav{gap:10px!important}
 .logo{font-size:.98rem!important;gap:8px!important;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex:0 1 auto}
 .logo-icon{width:34px!important;height:34px!important;flex:none}
 .nav-actions{gap:8px!important}
 .nav-actions .btn{padding:9px 13px!important;font-size:.76rem!important;white-space:nowrap}
 .nav-actions .btn svg{display:none}
 .hero-biz{flex-direction:column!important;align-items:stretch!important;gap:10px!important}
 .hero-biz input,.hero-biz .btn{width:100%!important;justify-content:center}
 .ptabs{width:100%!important;overflow-x:auto;flex-wrap:nowrap!important;-webkit-overflow-scrolling:touch}
 .ptab2{white-space:nowrap;flex:none}
 .proc-grid,.stats-grid{grid-template-columns:1fr 1fr!important}
 .cont-grid,.fr{grid-template-columns:1fr!important}
 .tcard2{flex:0 0 100%!important;min-width:100%!important}
 .btn{min-height:44px}
 .exit,.ai-panel{max-width:calc(100vw - 24px)!important}
 .cms-bar{flex-wrap:wrap;justify-content:center;text-align:center;gap:6px 12px;padding:8px 40px 8px 12px}
 .cms-t{grid-template-columns:1fr!important}
}
@media(max-width:480px){
 .footer-grid{grid-template-columns:1fr!important;gap:26px!important}
 h1{font-size:clamp(1.65rem,8vw,2.3rem)!important;line-height:1.18!important}
 h2{font-size:clamp(1.35rem,6.2vw,1.9rem)!important}
 .proc-grid,.stats-grid{grid-template-columns:1fr!important}
 section{padding-left:0;padding-right:0}
}
@media(max-width:400px){
 .nav-actions .btn{display:none!important}
 .logo{font-size:.92rem!important}
}
@media(max-width:340px){
 .logo{font-size:.84rem!important}
 .logo-icon{display:none!important}
}
@media(hover:none) and (pointer:coarse){
 nav.links a,.dd-menu a,.footer-grid a{min-height:40px;display:flex;align-items:center}
}
.cont-grid>*,.fr>*,.footer-grid>*,.hero-inner>*,.proc-grid>*,.stats-grid>*{min-width:0}
.ci-val,.ci-card a,.footer-grid a,.footer-brand p{overflow-wrap:anywhere}
@media(max-width:860px){
 header{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:rgba(2,6,16,.97)!important}
 nav.links{height:100vh;height:100dvh;max-height:none;padding-bottom:max(28px,env(safe-area-inset-bottom))!important}
}

/* ===== v11 Package grids: 3 per row on desktop, 2 on tablet, 1 on mobile =====
   Controlled by CSS variables so the Visual Editor can change columns / gap / card padding per device.
   A last row with fewer cards (e.g. 4 packages = 3 + 1) is centred. */
.pkg-grid,.pc-grid{--pkg-cols:3;--pkg-gap:20px;display:flex!important;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:var(--pkg-gap)}
.pkg-grid>*,.pc-grid>*{flex:0 0 calc((100% - (var(--pkg-cols) - 1) * var(--pkg-gap)) / var(--pkg-cols));min-width:0;box-sizing:border-box}
@media(max-width:900px){.pkg-grid,.pc-grid{--pkg-cols:2}}
@media(max-width:640px){.pkg-grid,.pc-grid{--pkg-cols:1}}
.pkg-grid .pkg-card{padding:var(--pkg-pad,32px) var(--pkg-pad,26px)}
.pc-grid .pcard2{padding:var(--pkg-pad,32px) var(--pkg-pad,28px)}