@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;700;800&display=swap');

:root {
  --font-heading: "Space Grotesk", sans-serif;
  --font-body: "Inter", sans-serif;
  --background: 0 0% 100%;
  --foreground: 0 0% 9%;
  --card: 0 0% 98%;
  --primary: 0 88% 42%;
  --secondary: 0 5% 94%;
  --muted-foreground: 0 0% 40%;
  --accent: 0 88% 42%;
  --accent-foreground: 0 0% 100%;
  --border: 0 5% 88%;
  --chart-2: 0 75% 58%;

  --color-bg: hsl(var(--background));
  --color-bg-alt: hsl(var(--secondary));
  --color-surface: hsl(var(--card));
  --color-text: hsl(var(--foreground));
  --color-text-muted: hsl(var(--muted-foreground));
  --color-heading: hsl(var(--foreground));
  --color-accent: hsl(var(--accent));
  --color-accent-text: hsl(var(--accent-foreground));
  --color-border: hsl(var(--border));

  --gradient-hero:
    radial-gradient(ellipse 80% 50% at 50% -10%, hsla(var(--chart-2), 0.15), transparent 55%),
    radial-gradient(ellipse 40% 30% at 80% 80%, hsla(var(--primary), 0.08), transparent 60%);
  --gradient-cta: linear-gradient(to right, hsl(var(--accent)), hsl(var(--chart-2)));
  --gradient-text: linear-gradient(to right, hsl(var(--foreground)), hsl(var(--primary)));

  --radius: .75rem;
  --radius-btn: 9999px;
  --shadow-card: 0 12px 30px hsla(var(--foreground), 0.06);
  --shadow-btn: 0 12px 24px hsla(var(--primary), 0.22);

  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --container: 56rem;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background:
    var(--gradient-hero),
    var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--color-accent); text-decoration: none; font-weight: 600; }
a:hover { text-decoration: underline; }

.container {
  width: min(calc(100% - 2rem), var(--container));
  margin: 0 auto;
}

.legal-header {
  padding: var(--space-4) 0 var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-heading);
  font-weight: 800;
  color: var(--color-heading);
}

.brand-dot {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 9999px;
  background: var(--color-accent);
  flex: 0 0 auto;
}

.back-link {
  display: inline-block;
  margin-top: 0.75rem;
  font-size: 0.95rem;
}

.legal-main {
  padding: var(--space-5) 0 var(--space-6);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--color-border);
  border-radius: 9999px;
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.eyebrow-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 9999px;
  background: var(--color-accent);
  flex: 0 0 auto;
}

h1, h2, h3 {
  margin: 0 0 0.8rem;
  color: var(--color-heading);
  font-family: var(--font-heading);
  line-height: 1.18;
  letter-spacing: -0.02em;
}

h1 {
  font-size: clamp(1.9rem, 5vw, 3rem);
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

h2 { font-size: clamp(1.35rem, 3vw, 1.85rem); margin-top: var(--space-4); }
h3 { font-size: 1.1rem; margin-top: var(--space-3); }

p { margin: 0 0 1rem; }
.muted { color: var(--color-text-muted); }
.updated { font-size: 0.9rem; color: var(--color-text-muted); margin-bottom: var(--space-3); }

ul { margin: 0 0 1rem; padding-left: 1.2rem; }
li { margin-bottom: 0.6rem; }

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 1rem;
  padding: 1.35rem 1.5rem;
  box-shadow: var(--shadow-card);
  margin-bottom: var(--space-3);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3rem;
  padding: 0.85rem 1.4rem;
  border: 1px solid transparent;
  border-radius: var(--radius-btn);
  background: var(--gradient-cta);
  color: var(--color-accent-text);
  font-family: var(--font-body);
  font-weight: 800;
  box-shadow: var(--shadow-btn);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn:hover { transform: translateY(-2px); text-decoration: none; }

.site-footer {
  padding: var(--space-4) 0 var(--space-5);
  background: var(--color-bg-alt);
  border-top: 1px solid var(--color-border);
}

.footer-note {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin-bottom: 0.7rem;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin-bottom: var(--space-2);
  font-size: 0.92rem;
}