@media (max-width: 900px) {
  .nav {
    display: none;
  }

  .hero-grid {
    grid-template-columns: 1fr;
  }

  .builder-shell {
    grid-template-columns: 1fr;
  }

  .visi-panel {
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
}

@media (max-width: 600px) {
  .container {
    width: min(calc(100% - 26px), var(--container));
  }

  .brand-studio {
    display: none;
  }

  .hero {
    min-height: auto;
    padding: 65px 0 80px;
  }

  .hero h1 {
    font-size: 52px;
  }

  .hero-actions {
    flex-direction: column;
  }

  .computer {
    width: min(310px, 90vw);
  }

  .demo-links {
    display: none;
  }

  .demo-hero {
    padding: 40px 24px;
  }

  .demo-hero h3 {
    font-size: 38px;
  }
}