/* ============================================================
   Micro Trends — Legal pages stylesheet (extends style.css)
============================================================ */
.legal-hero {
  background:
    radial-gradient(800px 300px at 80% -20%, rgba(6,182,212,.15), transparent 60%),
    linear-gradient(180deg, #F1F5F9, #FFFFFF);
  padding: 56px 0 36px;
  border-bottom: 1px solid var(--c-border);
}
.legal-hero h1 {
  font-size: clamp(28px, 3.6vw, 40px);
  margin: 8px 0 10px; letter-spacing: -.02em;
}
.legal-hero .meta {
  color: var(--c-muted); font-size: 14px;
}
.breadcrumbs {
  font-size: 13px; color: var(--c-muted);
  margin-bottom: 6px;
}
.breadcrumbs a { color: var(--c-muted); }
.breadcrumbs a:hover { color: var(--c-primary); }
.breadcrumbs span[aria-current] { color: var(--c-ink); font-weight: 500; }

.legal-body {
  padding: 48px 0 72px;
}
.legal-body .content {
  max-width: 820px; margin: 0 auto;
}
.legal-body h2 {
  font-size: 24px; margin: 36px 0 12px; letter-spacing: -.01em;
  color: var(--c-ink);
}
.legal-body h2:first-child { margin-top: 0; }
.legal-body h3 {
  font-size: 18px; margin: 24px 0 8px; color: var(--c-primary);
}
.legal-body p, .legal-body li {
  color: var(--c-ink); font-size: 16px; line-height: 1.75;
}
.legal-body ul, .legal-body ol {
  padding-left: 22px; margin: 10px 0 18px;
}
.legal-body li { margin-bottom: 6px; }
.legal-body a { color: var(--c-primary); text-decoration: underline; }
.legal-body .note {
  padding: 16px 18px; background: var(--c-soft);
  border-left: 4px solid var(--c-accent);
  border-radius: 8px; margin: 20px 0;
  font-size: 15px; color: var(--c-muted);
}
.legal-contact {
  margin-top: 32px; padding: 22px;
  border: 1px solid var(--c-border); border-radius: var(--radius);
  background: #FAFBFC;
}
.legal-contact h3 { margin-top: 0; color: var(--c-ink); }
.back-home {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 28px; padding: 10px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--c-border); color: var(--c-primary);
  font-weight: 600; font-size: 14px;
}
.back-home:hover {
  background: var(--c-primary); color: #fff; border-color: var(--c-primary);
  text-decoration: none;
}

@media (max-width: 900px) {
  .legal-hero { padding: 40px 0 28px; }
  .legal-body { padding: 32px 0 52px; }
}