/* Shared styles for /privacy, /terms, /sms-consent. Pulled from the same
   ZiggyBook design tokens as index.html so the policy pages look like
   part of the same product, not a hastily-attached legal page. */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --cyan: #00D4FF;
  --amber: #FFB020;
  --bg-primary: #0A0E17;
  --bg-card: #111827;
  --text-primary: #F1F5F9;
  --text-secondary: #94A3B8;
  --text-muted: #64748B;
  --border: rgba(255, 255, 255, 0.06);
  --border-bright: rgba(255, 255, 255, 0.12);
}

html { scroll-behavior: smooth; }

body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.page {
  max-width: 760px;
  margin: 0 auto;
  padding: 56px 24px 96px;
}

header.mast {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 40px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}

.logo-mark {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--cyan), var(--amber));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  color: var(--bg-primary);
  font-size: 20px;
  transform: rotate(-3deg);
  box-shadow: 0 0 24px rgba(0, 212, 255, 0.3);
}

.wordmark {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
}
.wordmark .accent { color: var(--cyan); }

h1 {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(28px, 4vw, 40px);
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}

.eyebrow {
  font-family: "Space Grotesk", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 11px;
  font-weight: 700;
  color: var(--cyan);
  margin-bottom: 12px;
}

.updated {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 32px;
}

h2 {
  font-family: "Space Grotesk", sans-serif;
  font-size: 22px;
  margin-top: 40px;
  margin-bottom: 12px;
  color: var(--text-primary);
}

h3 {
  font-size: 15px;
  margin-top: 24px;
  margin-bottom: 6px;
  color: var(--text-primary);
  font-weight: 600;
}

p {
  margin-bottom: 14px;
  color: var(--text-secondary);
}

ul {
  padding-left: 24px;
  margin-bottom: 14px;
  color: var(--text-secondary);
}

li { margin-bottom: 6px; }

a {
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px dotted rgba(0, 212, 255, 0.4);
  transition: color 0.15s, border-color 0.15s;
}
a:hover {
  color: var(--amber);
  border-bottom-color: var(--amber);
}

code, .mono {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 13px;
  background: rgba(255, 255, 255, 0.04);
  padding: 1px 6px;
  border-radius: 4px;
  color: var(--text-primary);
}

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 24px;
  margin: 16px 0 24px;
}

.card h3:first-child { margin-top: 0; }

footer.foot {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

footer.foot a { border-bottom: none; }

@media (max-width: 640px) {
  .page { padding: 32px 20px 64px; }
}