/* YouTube Popup */
#youtube-popup {
  transition: opacity 0.3s ease;
}
#youtube-popup iframe {
  min-height: 400px;
}

@media (max-width: 1024px) {
  #youtube-popup iframe {
    min-height: 300px;
  }
}

@media (max-width: 640px) {
  #youtube-popup iframe {
    min-height: 200px;
  }
  #youtube-close {
    top: -50px;
  }
}

/* Mobile menu styles */
@media (max-width: 767px) {
  body {
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
  }
  
  #mobile-menu {
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  #mobile-menu a {
    display: block;
    padding: 12px 16px;
    font-size: 16px;
    border-bottom: 1px solid #f0f0f0;
  }
  
  #mobile-menu a:last-child {
    margin-top: 16px;
    border-bottom: none;
  }
  
  header {
    position: sticky;
    top: 0;
    z-index: 50;
  }

  /* Hero banner adjustments */
  section.relative.text-white {
    height: auto;
    min-height: 300px;
    padding: 2rem 1rem;
  }

  .max-w-7xl.mx-auto.h-full.flex.items-center.justify-end.px-8 {
    justify-content: center;
    text-align: center;
    padding: 0 1rem;
    height: 100%;
  }

  .max-w-3xl.text-right {
    text-align: center;
    margin: 0 auto;
    padding: 0;
    width: 100%;
  }

  .max-w-3xl.text-right h1 {
    font-size: 2rem;
    line-height: 1.2;
    margin-bottom: 1rem;
  }

  .max-w-3xl.text-right p {
    font-size: 1rem;
    margin-bottom: 1.5rem;
  }

  .max-w-3xl.text-right a {
    margin: 0 auto;
  }

  /* Features section */
  .grid.md\:grid-cols-2.gap-10 {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  /* System capabilities */
  .max-w-6xl.mx-auto.px-4 {
    padding: 0 1rem;
  }
}

/* Desktop styles */
@media (min-width: 768px) {
  section.relative.text-white {
    height: 346px;
  }

  .max-w-7xl.mx-auto.h-full.flex.items-center.justify-end.px-8 {
    padding-right: 2rem;
  }

  .max-w-3xl.text-right {
    margin-right: -5%;
  }

  .max-w-3xl.text-right h1 {
    margin-right: -20%;
  }
}
h1 {
	font-size: 16px;
	margin-top: 0;
}

p {
	color: rgb(107, 114, 128);
	font-size: 15px;
	margin-bottom: 10px;
	margin-top: 5px;
}
.card {
	max-width: 620px;
	margin: 0 auto;
	padding: 16px;
	border: 1px solid lightgray;
	border-radius: 16px;
	margin-bottom: 2rem;
}
.card p:last-child {
	margin-bottom: 0;
}