/* ============================================================
   PixelForge — Responsive adjustments (mobile-first tweaks)
   ============================================================ */

/* ≤ 640px : phones */
@media (max-width:640px){
  .section{padding:52px 0}
  .hero{padding:56px 0 44px}
  .hero-cta .btn{width:100%}
  .upload-area{padding:38px 16px}
  .tool-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
  .tool-card{padding:16px 14px}
  .tool-card h3{font-size:15px}
  .tool-card p{font-size:12.5px}
  .file-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
  .footer-grid .brand-col{grid-column:span 1}
  .newsletter{padding:34px 20px}
  .newsletter form{flex-direction:column}
  .auth-card{padding:26px 20px}
  .otp-row input{width:44px;height:50px;font-size:19px}
  .float-icon{display:none} /* keep hero clean & fast on small screens */
  .cmp-foot{flex-direction:column}
}

/* 641–919px : tablets */
@media (min-width:641px) and (max-width:919px){
  .tool-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
}

/* ≥ 920px : desktop — panel sticks beside the file grid */
@media (min-width:920px){
  .panel-body{max-height:calc(100vh - 300px)}
}

/* Very large screens: cap content growth */
@media (min-width:1600px){
  .container{max-width:1240px}
}

/* Print: strip chrome */
@media print{
  .site-header,.site-footer,.upload-area,.panel,.toast,.page-loader{display:none!important}
}