/* Legal Pages Styling */
.legal-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 10vw 5% 5vw;
}

.legal-container h1 {
  font-family: 'Instrument Serif', serif;
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 400;
  color: #e42070;
  margin-bottom: 0.5vw;
}

.legal-container .subtitle {
  font-family: 'Instrument Serif', serif;
  font-size: clamp(1rem, 1.5vw, 1.3rem);
  color: #e42070;
  margin-bottom: 0.5vw;
}

.legal-container .last-updated {
  font-family: 'Kode Mono', monospace;
  font-size: clamp(0.7rem, 1vw, 0.9rem);
  color: #7c7b78;
  margin-bottom: 3vw;
}

.legal-container .intro {
  font-family: 'Kode Mono', monospace;
  font-size: clamp(0.8rem, 1.1vw, 1rem);
  color: #333;
  line-height: 1.7;
  margin-bottom: 1.5vw;
}

.legal-container h2 {
  font-family: 'Instrument Serif', serif;
  font-size: clamp(1.3rem, 2vw, 1.8rem);
  font-weight: 400;
  color: #e42070;
  margin-top: 3vw;
  margin-bottom: 1.5vw;
}

.legal-container h3 {
  font-family: 'Kode Mono', monospace;
  font-size: clamp(0.9rem, 1.2vw, 1.1rem);
  font-weight: 700;
  color: #e42070;
  margin-top: 2vw;
  margin-bottom: 1vw;
}

.legal-container p {
  font-family: 'Kode Mono', monospace;
  font-size: clamp(0.75rem, 1vw, 0.95rem);
  color: #333;
  line-height: 1.7;
  margin-bottom: 1vw;
}

.legal-container ul {
  margin-left: 2vw;
  margin-bottom: 1.5vw;
}

.legal-container li {
  font-family: 'Kode Mono', monospace;
  font-size: clamp(0.75rem, 1vw, 0.95rem);
  color: #333;
  line-height: 1.8;
  margin-bottom: 0.5vw;
}

.legal-container a {
  color: #e42070;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.legal-container a:hover {
  opacity: 0.7;
}

.back-link {
  display: inline-block;
  font-family: 'Kode Mono', monospace;
  font-size: clamp(0.8rem, 1vw, 0.95rem);
  color: #e42070;
  text-decoration: none;
  margin-top: 4vw;
  padding: 0.8vw 1.5vw;
  border: 2px solid #e42070;
  border-radius: 0.5vw;
  transition: all 0.3s ease;
}

.back-link:hover {
  background: #e42070;
  color: white;
  opacity: 1;
}

/* Responsive */
@media (max-width: 768px) {
  .legal-container {
    padding: 20vw 5% 10vw;
  }

  .legal-container ul {
    margin-left: 5vw;
  }
}