/* Shared styles for static pages (privacy, terms, buy, success) */
/* Design tokens match the main landing page */
:root {
  --background:        hsl(0 0% 100%);
  --foreground:        hsl(240 10% 3.9%);
  --muted:             hsl(240 4.8% 95.9%);
  --muted-fg:          hsl(240 3.8% 46.1%);
  --muted-foreground:  hsl(240 3.8% 46.1%);
  --border:            hsl(240 5.9% 90%);
  --primary:           hsl(240 5.9% 10%);
  --primary-fg:        hsl(0 0% 98%);
  --primary-foreground:hsl(0 0% 98%);
  --card:              hsl(0 0% 100%);
  --radius:            0.5rem;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --container: min(1200px, 100%);
  --page-px: clamp(16px, 4vw, 48px);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  margin: 0; padding: 0;
  background: var(--background);
  color: var(--foreground);
  font: 16px/1.6 var(--font);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
body { margin: 0; min-width: 320px; background: var(--background); }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 0.75rem; }
p:last-child { margin-bottom: 0; }
h1, h2, h3, h4 { margin: 0 0 0.75rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; }
ul, ol { margin: 0; padding: 0; }

/* Layout */
.inner {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--page-px);
  padding-right: var(--page-px);
}

/* Nav / Header — same classes as the React landing page */
.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--background);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 12px;
  padding-bottom: 12px;
}
.brand {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--foreground);
  flex-shrink: 0;
}
.brand:hover { opacity: 0.8; }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-ghost {
  color: var(--muted-fg);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: var(--radius);
  transition: color 150ms;
}
.nav-ghost:hover { color: var(--foreground); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 40px; padding: 0 16px; border-radius: var(--radius);
  font-size: 0.875rem; font-weight: 500; border: 1px solid transparent;
  cursor: pointer; transition: opacity 150ms, background 150ms; white-space: nowrap; text-decoration: none;
  font-family: var(--font);
}
.btn-sm { height: 36px; padding: 0 12px; font-size: 0.8125rem; }
.btn-lg { height: 44px; padding: 0 20px; font-size: 0.9375rem; }
.btn-primary { background: var(--primary); color: var(--primary-fg); border-color: var(--primary); }
.btn-primary:hover { opacity: 0.88; }
.btn-outline { background: var(--background); color: var(--foreground); border-color: var(--border); }
.btn-outline:hover { background: var(--muted); }
/* Legacy btn-accent alias */
.btn-accent { background: var(--primary); color: var(--primary-fg); border-color: var(--primary); }
.btn-accent:hover { opacity: 0.88; }
.btn-large { height: 48px; padding: 0 24px; font-size: 1rem; }

/* Page main */
.page-main {
  padding-top: 56px;
  padding-bottom: 64px;
  min-height: calc(100vh - 120px);
}

/* Prose content container */
.prose-wrap {
  max-width: 760px;
}
.prose-wrap h1 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); margin-bottom: 0.5rem; }
.prose-wrap h3 { font-size: 1.125rem; font-weight: 600; margin-top: 1.75rem; margin-bottom: 0.5rem; letter-spacing: -0.01em; }
.prose-wrap p { font-size: 0.9375rem; color: var(--muted-fg); line-height: 1.7; margin-bottom: 0.75rem; }
.prose-wrap .prose-header {
  border-bottom: 1px solid var(--border);
  padding-bottom: 1.5rem;
  margin-bottom: 2rem;
}
.prose-wrap .prose-header p { color: var(--foreground); }
.prose-wrap .prose-date { font-size: 0.875rem; color: var(--muted-fg); margin-bottom: 0.5rem; }

/* Footer */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 32px 0;
}
.site-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.site-footer-links {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.site-footer-links a { font-size: 0.8125rem; color: var(--muted-fg); }
.site-footer-links a:hover { color: var(--foreground); }
.site-footer-copy { font-size: 0.8125rem; color: var(--muted-fg); }

@media (max-width: 640px) {
  .site-footer-inner { flex-direction: column; align-items: flex-start; gap: 12px; }
}