/* ============================================================
   Cloud Profit — Legal pages (Terms / Privacy / Cookies)
   Builds on styles.css design tokens. Readable long-form layout.
   ============================================================ */

.legal-hero {
  background:
    radial-gradient(900px 360px at 80% -20%, rgba(37, 99, 235, .08), transparent 60%);
  border-bottom: 1px solid var(--c-line-soft);
  padding: clamp(48px, 7vw, 80px) 0 clamp(32px, 4vw, 48px);
}
.legal-hero .container { max-width: 820px; }
.legal-hero h1 { font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: 12px; }
.legal-meta {
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  font-size: 14px; color: var(--c-muted); margin-top: 14px;
}
.legal-meta b { color: var(--c-ink); font-weight: 600; }

.legal-disclaimer {
  display: flex; gap: 12px; align-items: flex-start;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-top: 24px;
  font-size: 14.5px; color: #854d0e;
}
.legal-disclaimer svg { flex: none; color: #d97706; margin-top: 2px; }

/* Body layout: optional TOC + content */
.legal-body { padding: clamp(40px, 6vw, 72px) 0; }
.legal-body .container { max-width: 820px; }

.legal-content { color: var(--c-body); font-size: 16px; line-height: 1.7; }
.legal-content h2 {
  font-size: 1.45rem; margin: 40px 0 14px;
  padding-top: 12px;
  scroll-margin-top: 90px;
}
.legal-content h2:first-child { margin-top: 0; }
.legal-content h3 { font-size: 1.12rem; margin: 26px 0 10px; color: var(--c-ink); }
.legal-content p { margin: 0 0 14px; }
.legal-content ul, .legal-content ol { margin: 0 0 16px; padding-left: 22px; }
.legal-content li { margin-bottom: 8px; list-style: disc; }
.legal-content ol li { list-style: decimal; }
.legal-content a { color: var(--c-primary); text-decoration: underline; text-underline-offset: 2px; }
.legal-content a:hover { color: var(--c-primary-dark); }
.legal-content strong { color: var(--c-ink); font-weight: 600; }
.legal-content .ph {
  background: #fef3c7; color: #854d0e;
  padding: 1px 6px; border-radius: 4px; font-weight: 600;
  font-size: .95em;
}

/* Data / cookie tables */
.legal-table {
  width: 100%; border-collapse: collapse; font-size: 14.5px;
  margin: 8px 0 22px; border: 1px solid var(--c-line);
  border-radius: var(--radius-sm); overflow: hidden;
}
.legal-table th, .legal-table td {
  text-align: left; padding: 11px 14px; vertical-align: top;
  border-bottom: 1px solid var(--c-line-soft);
}
.legal-table thead th {
  background: var(--c-surface-subtle);
  font-size: 12px; text-transform: uppercase; letter-spacing: .03em;
  color: var(--c-muted); font-weight: 600;
}
.legal-table tbody tr:last-child td { border-bottom: none; }
.legal-table td .mono { font-family: ui-monospace, monospace; font-size: 13px; color: var(--c-ink); }

/* Back link + related */
.legal-back {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 600; color: var(--c-primary);
  margin-bottom: 18px;
}
.legal-back:hover { color: var(--c-primary-dark); }

.legal-related {
  margin-top: 48px; padding-top: 28px;
  border-top: 1px solid var(--c-line);
  display: flex; flex-wrap: wrap; gap: 12px;
}
.legal-related a {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14.5px; font-weight: 600; color: var(--c-ink);
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--radius-sm); padding: 10px 16px;
  transition: border-color .2s ease, color .2s ease;
}
.legal-related a:hover { border-color: var(--c-primary); color: var(--c-primary); }
.legal-related a svg { color: var(--c-muted); }
.legal-related a:hover svg { color: var(--c-primary); }