@media (max-width: 1024px) {
  .generator-app { grid-template-columns: 300px 1fr; gap: 1.5rem; }
  .content-grid { grid-template-columns: 1fr; gap: 2rem; }
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; text-align: center; gap: 3rem; }
  .hero-content p { margin: 0 auto 2.5rem; }
  .hero-actions { justify-content: center; }
  .hero-section { padding: 4rem 0 3rem; }
  .hero-content h1 { font-size: 2.75rem; }
  .faux-window { transform: none; }
  .faux-window:hover { transform: none; }
  .steps-container { flex-direction: column; }
}

@media (max-width: 768px) {
  .generator-app { grid-template-columns: 1fr; }
  .output-card { min-height: 400px; }
  .output-textarea { min-height: 250px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
  
  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-surface);
    flex-direction: column;
    padding: 2rem 1.5rem;
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
    display: none;
    gap: 2rem;
  }
  .main-nav.active { display: flex; }
  .mobile-menu-toggle { display: block; }
  .nav-links { flex-direction: column; width: 100%; align-items: center; gap: 1.5rem; }
  .nav-cta { width: 100%; }
  .nav-cta .btn { width: 100%; }
}

@media (max-width: 480px) {
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; }
  .footer-grid { grid-template-columns: 1fr; }
  .output-footer { flex-direction: column; }
  .output-footer .btn { width: 100%; }
  .action-row { flex-direction: column; }
  .segmented-control { flex-direction: column; }
}