/* FocusSoc Terms of Use page-specific styles */
.tou-hero {
  margin-top: var(--space-12);
  margin-bottom: var(--space-8);
  text-align: center;
  background: linear-gradient(96deg,#1e1c2e 60%,#222430 100%);
  box-shadow: var(--shadow-md);
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}
.tou-hero h1 { color: var(--color-primary); margin-bottom: var(--space-4); }

.tou-section {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
  margin: var(--space-6) auto;
  text-align: center;
  max-width: 80ch;
}
.tou-section h2 { color: var(--color-warning); margin-bottom: var(--space-3); }
.tou-section ul, .tou-section ol {
  list-style: disc;
  color: var(--color-text);
  margin-bottom: var(--space-3);
  text-align: left;
  max-width: 70ch;
  margin-left: auto; margin-right: auto;
  padding-left: var(--space-4);
}
.tou-section ul li, .tou-section ol li { margin-bottom: var(--space-2); font-size: var(--font-size-base); }
.tou-section a { color: var(--color-primary); text-decoration: underline; }
.tou-section a.button { text-decoration: none; }

.tou-contact-cta { margin-top: var(--space-4); }
.tou-contact-cta .button { font-size: var(--font-size-lg); padding: var(--space-3) var(--space-8); }
.tou-final { text-align: center; background: linear-gradient(120deg,#f443360d 0,#222430cc 100%); box-shadow: var(--shadow-sm); }
.tou-final h3 { color: var(--color-success); margin-bottom: var(--space-4); }
.tou-final-text { font-size: var(--font-size-lg); }
.tou-final-text a.button { margin-left: var(--space-3); }

@media (max-width: 800px) { .tou-hero, .tou-section { padding: var(--space-4) var(--space-3); } }
@media (max-width: 520px) {
  .tou-hero, .tou-section { padding: var(--space-3) var(--space-2); }
  .tou-hero { margin-top: var(--space-4); margin-bottom: var(--space-3); }
  .tou-contact-cta .button { width: 100%; text-align: center; }
  .tou-final-text { font-size: var(--font-size-base); }
}