/* =========================================================
   MOCK SOCIAL STUDIO — RESPONSIVE RULES
   ========================================================= */

/* Tablet and below: stack preview + controls */
@media (max-width: 980px){
  .mss-workspace{
    grid-template-columns:1fr;
  }
  .mss-preview-col{
    position:relative;top:0;
  }
  .mss-controls-col{
    max-height:none;
  }
}

/* Small tablet */
@media (max-width: 720px){
  .mss-app{padding:20px 14px 60px;}
  .mss-hero{padding:56px 10px 24px;}
  .mss-theme-toggle{top:10px;right:10px;width:38px;height:38px;}
  .mss-tabs{width:100%;max-width:100%;justify-content:flex-start;overflow-x:auto;border-radius:16px;}
  .mss-tab{flex-shrink:0;}
  .mss-features-grid{grid-template-columns:1fr 1fr;}
}

/* Phones */
@media (max-width: 480px){
  .mss-features-grid{grid-template-columns:1fr;}
  .field-row{flex-direction:column;gap:0;}
  .mss-preview-col,.mss-controls-col{padding:14px;}
  .ig-card,.dm-stage,.wa-stage{max-width:100%;}
  .story-stage{max-width:240px;}
  .mss-preview-toolbar .btn span{display:none;}
  .mss-section__title{font-size:1.4rem;}
}