/* Responsive overrides — load LAST so media queries beat module styles. */
@media (max-width:900px){
  .nav{padding:1rem 1.5rem}
  .nav-links{gap:1.25rem}
  .nav-link{padding:.5rem .25rem}

  .home-grid,.create-grid{grid-template-columns:1fr}
  .home-left{padding:3.5rem 2rem}
  .home-left h1{font-size:2.75rem}
  .home-right{padding:3rem 2rem}

  .form-panel{border-right:none;border-bottom:1px solid var(--rule);max-height:none}
  .preview-panel{max-height:none;padding:3rem 2rem 6rem}

  /* WCAG 2.1 mobile touch targets — minimum 44x44 */
  .x-btn{width:44px;height:44px;font-size:1.2rem}
  .ig-row{grid-template-columns:1fr 80px 44px}
  .g-row{grid-template-columns:1fr 44px}

  /* Floating jump button so the form-side user can reach the preview */
  .mobile-jump{display:block;position:fixed;bottom:1rem;right:1rem;z-index:50;background:var(--ink);color:var(--paper);padding:.85rem 1.25rem;font-family:var(--font-ui);font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;border:none;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.25)}
  .mobile-jump:hover{background:#2a2924}
  .mobile-jump.hidden{display:none}
}

@media (max-width:560px){
  .home-left{padding:3rem 1.5rem}
  .home-left h1{font-size:2.25rem}
  .home-right{padding:2rem 1.5rem}
  .form-panel,.preview-panel{padding:2rem 1.5rem}
  .form-panel{padding-top:2rem}
  .preview-panel{padding-bottom:6rem}
  .nav{padding:1rem}
  .logo{font-size:1.25rem}
  .nav-links{gap:.75rem}
  .nav-link{font-size:.7rem}
}