/* legal.css — shared styling for Clo legal pages (privacy / terms), matches the landing design */

@font-face {
  font-family: 'Gauntly';
  src: url('fonts/GauntlyRegular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  --bg: #F2F7FC;
  --surface: #FFFFFF;
  --ink: #1C1C1E;
  --ink-soft: #3C4858;
  --ink-mute: #8B95A5;
  --accent: #3E8FE0;
  --line: rgba(28,28,30,.08);
  --radius-lg: 32px;
  --font-sans: 'Manrope', ui-sans-serif, system-ui, sans-serif;
  --font-brand: 'Gauntly', cursive;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg); color: var(--ink-soft);
  font-family: var(--font-sans); font-size: 16px; line-height: 1.7;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* header */
.legal-nav {
  max-width: 880px; margin: 0 auto; padding: 28px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.logo { display: inline-flex; align-items: center; gap: 8px; }
.logo__icon {
  width: 36px; height: 36px; border-radius: 11px; background: #fff;
  display: flex; align-items: center; justify-content: center; padding: 3px;
  box-shadow: 0 2px 6px -2px rgba(28,40,60,0.10);
}
.logo__icon img { width: 100%; height: 100%; border-radius: 50%; }
.logo__word {
  font-family: var(--font-brand); font-size: 30px; line-height: .95; color: #000;
  -webkit-text-stroke: 1.8px #000; paint-order: stroke fill; transform: translateY(2px);
}
.legal-back { font-size: 14px; font-weight: 600; color: var(--ink-soft); white-space: nowrap; }

/* article */
.legal {
  max-width: 880px; margin: 0 auto 56px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 56px clamp(22px, 5vw, 64px);
}
.legal h1 {
  font-family: var(--font-sans); font-weight: 600; font-size: clamp(30px, 5vw, 46px);
  line-height: 1.1; letter-spacing: -.02em; color: var(--ink); text-align: center; margin: 0 0 8px;
}
.legal .updated { text-align: center; color: var(--ink-mute); font-size: 14px; margin: 0 0 40px; }
.legal h2 {
  font-family: var(--font-sans); font-weight: 600; font-size: 22px; letter-spacing: -.01em;
  color: var(--ink); margin: 40px 0 12px;
}
.legal p { margin: 0 0 16px; }
.legal ul { margin: 0 0 16px; padding-left: 22px; }
.legal ul ul { margin: 8px 0 4px; }
.legal li { margin: 0 0 8px; }
.legal strong { color: var(--ink); font-weight: 600; }

/* footer */
.legal-footer {
  max-width: 880px; margin: 0 auto; padding: 0 24px 48px;
  display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: center;
  color: var(--ink-mute); font-size: 13px;
}
.legal-footer a { color: var(--ink-soft); }