/* ═══════════════════════════════════════
   MOTIONLAB — LEGAL PAGES
═══════════════════════════════════════ */

.legal-page {
  padding: calc(var(--nav-h) + 4rem) 2rem 5rem;
  background: var(--off-white);
  min-height: 100vh;
}

.legal-container {
  max-width: 980px;
  margin: 0 auto;
}

.legal-card {
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--r-xl);
  padding: 3rem;
  box-shadow: var(--shadow);
}

.legal-header {
  margin-bottom: 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--gray-100);
}

.legal-label {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}

.legal-label::before {
  content: '';
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
}

.legal-title {
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1.1;
  letter-spacing: -.03em;
  font-weight: 800;
  color: var(--gray-900);
  margin-bottom: 1rem;
}

.legal-subtitle {
  color: var(--gray-600);
  font-size: .98rem;
  line-height: 1.7;
  font-weight: 300;
}

.legal-content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.legal-section h2 {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: .9rem;
  letter-spacing: -.02em;
}

.legal-section p,
.legal-section li {
  color: var(--gray-600);
  line-height: 1.8;
  font-size: .95rem;
  font-weight: 300;
}

.legal-section ul {
  padding-left: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: .7rem;
}

.legal-highlight {
  background: var(--accent-soft);
  border: 1px solid rgba(120,184,74,.2);
  border-radius: var(--r-lg);
  padding: 1.2rem 1.4rem;
}

.legal-table {
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  border-radius: var(--r);
  border: 1px solid var(--gray-100);
}

.legal-table th {
  background: var(--gray-50);
  text-align: left;
  padding: 1rem;
  font-size: .82rem;
  color: var(--gray-900);
  font-weight: 600;
}

.legal-table td {
  padding: 1rem;
  border-top: 1px solid var(--gray-100);
  font-size: .9rem;
  color: var(--gray-600);
  font-weight: 300;
}

.legal-footer-note {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--gray-100);
  color: var(--gray-400);
  font-size: .82rem;
}

@media(max-width:768px) {
  .legal-page {
    padding: calc(var(--nav-h) + 2rem) 1rem 3rem;
  }

  .legal-card {
    padding: 2rem 1.4rem;
  }

  .legal-title {
    font-size: 2rem;
  }

  .legal-table {
    display: block;
    overflow-x: auto;
  }
}