/* Shared styling for all legal pages (/terms.html, /privacy.html,
 * /cookies.html, /dpa.html). Optimized for long-form readability —
 * generous line-height, constrained max-width, clear heading hierarchy.
 * Colors stay on the ExperClinic palette so legal pages don't feel like
 * they belong to a different site. */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
  background: #f8faff;
  color: #111827;
  line-height: 1.7;
  font-size: 15px;
}

.legal-topbar {
  background: white;
  border-bottom: 1px solid #e5e7eb;
  padding: 1rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.legal-topbar a.brand { font-size: 20px; font-weight: 800; color: #111827; text-decoration: none; letter-spacing: -0.5px; }
.legal-topbar a.brand span { color: #1a56db; }
.legal-topbar .back-link { font-size: 13px; color: #1a56db; text-decoration: none; }
.legal-topbar .back-link:hover { text-decoration: underline; }

main.legal-doc {
  max-width: 760px;
  margin: 0 auto;
  padding: 3rem 1.5rem 5rem;
}

.legal-doc h1 { font-size: 32px; font-weight: 800; color: #111827; margin: 0 0 0.5rem 0; letter-spacing: -0.5px; }
.legal-doc .meta { font-size: 13px; color: #9ca3af; margin-bottom: 2.5rem; }
.legal-doc h2 { font-size: 22px; font-weight: 700; color: #111827; margin: 2.5rem 0 0.75rem; letter-spacing: -0.3px; }
.legal-doc h3 { font-size: 16px; font-weight: 700; color: #374151; margin: 1.75rem 0 0.5rem; }
.legal-doc p { margin: 0 0 1rem 0; color: #374151; }
.legal-doc ul, .legal-doc ol { padding-left: 1.5rem; margin: 0 0 1.25rem 0; color: #374151; }
.legal-doc li { margin-bottom: 0.5rem; }
.legal-doc a { color: #1a56db; text-decoration: underline; }
.legal-doc a:hover { color: #1e40af; }
.legal-doc strong { color: #111827; font-weight: 600; }
.legal-doc code {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
  font-size: 13px;
  background: #f1f5f9;
  padding: 2px 5px;
  border-radius: 4px;
  color: #1e3a8a;
}

/* Disclaimer box for "this isn't legal advice" and similar callouts. */
.legal-doc .callout {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-left: 3px solid #f59e0b;
  border-radius: 8px;
  padding: 14px 16px;
  margin: 1.75rem 0;
  font-size: 14px;
  color: #92400e;
}
.legal-doc .callout strong { color: #78350f; }

/* Standard info-style callout for "in plain English" sections. */
.legal-doc .plain {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-left: 3px solid #1a56db;
  border-radius: 8px;
  padding: 14px 16px;
  margin: 1rem 0 1.75rem;
  font-size: 14px;
  color: #1e3a8a;
}
.legal-doc .plain strong { color: #1e3a8a; }

/* Footer with sibling legal doc links. */
.legal-footer {
  border-top: 1px solid #e5e7eb;
  padding: 1.5rem;
  background: white;
  text-align: center;
  font-size: 12px;
  color: #9ca3af;
}
.legal-footer a { color: #6b7280; text-decoration: none; margin: 0 10px; }
.legal-footer a:hover { color: #1a56db; text-decoration: underline; }

@media (max-width: 640px) {
  main.legal-doc { padding: 2rem 1.25rem 4rem; }
  .legal-doc h1 { font-size: 26px; }
  .legal-doc h2 { font-size: 19px; }
}