/* ── Base resets ──────────────────────────────────────────── */
html, body {
  height: 100%;
  margin: 0;
  overflow-x: hidden;
}
body {
  font-family: "SN Pro", sans-serif;
  background-color: #19191c;
}

/* ── Custom color variables (matteblack / mattewhite) ────── */
:root {
  --mattewhite-50: #ffffff;
  --mattewhite-100: #fdfdfd;
  --mattewhite-200: #fafafa;
  --mattewhite-300: #f7f7f7;
  --mattewhite-400: #f5f5f5;
  --mattewhite-500: #f2f2f2;
  --mattewhite-600: #e6e6e6;
  --mattewhite-700: #d1d1d1;
  --mattewhite-800: #b5b5b5;
  --mattewhite-900: #9a9a9a;

  --matteblack-50: #4a4a4f;
  --matteblack-100: #3f3f44;
  --matteblack-200: #353538;
  --matteblack-300: #2f2f33;
  --matteblack-400: #2b2b2f;
  --matteblack-500: #28282b;
  --matteblack-600: #232326;
  --matteblack-700: #1e1e21;
  --matteblack-800: #19191c;
  --matteblack-900: #141416;
  --matteblack-950: #101012;
}

/* ── Homepage styles ─────────────────────────────────────── */
.hero-bg {
  background-image: url("assets/hero.jpg"), linear-gradient(135deg, #1e3b8a2e 0%, #4c1d95 100%);
  background-position: top center;
  background-attachment: fixed;
  background-size: cover;
  background-repeat: no-repeat;
  background-blend-mode: overlay;
}

/* ── Gradient text utilities ─────────────────────────────── */
.gradient-text {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.gradient-text-blue {
  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ── Privacy / ToS shared styles ────────────────────────── */
.content-section {
  background-color: #1f2937;
  padding: 1.5rem;
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}
@media (min-width: 768px) {
  .content-section { padding: 2.5rem; }
}
.content-section h2 {
  font-size: 1.5rem;
  font-weight: 600;
  color: white;
  margin-bottom: 1.25rem;
  margin-top: 2rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #374151;
}
@media (min-width: 768px) {
  .content-section h2 { font-size: 1.875rem; }
}
.content-section h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #e5e7eb;
  margin-bottom: 0.75rem;
  margin-top: 1.5rem;
}
@media (min-width: 768px) {
  .content-section h3 { font-size: 1.5rem; }
}
.content-section p,
.content-section li {
  color: #d1d5db;
  margin-bottom: 1rem;
  line-height: 1.75;
  font-size: 1rem;
}
@media (min-width: 768px) {
  .content-section p, .content-section li { font-size: 1.125rem; }
}
.content-section ul, .content-section ol {
  list-style-position: inside;
  margin-bottom: 1rem;
  padding-left: 1rem;
}
.content-section ul li { list-style-type: disc; }
.content-section ol li { list-style-type: decimal; }
.content-section ul ul { margin-top: 0.5rem; margin-bottom: 0.5rem; }
.content-section a { color: #60a5fa; font-weight: 500; }
.content-section a:hover { text-decoration: underline; }
.content-section strong { font-weight: 600; color: #f3f4f6; }

/* TOC sidebar */
.toc-nav {
  background-color: #1f2937;
  padding: 1rem;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.1);
}
@media (min-width: 768px) {
  .toc-nav { padding: 1.5rem; }
}
.toc-nav h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: white;
  margin-bottom: 0.75rem;
}
.toc-nav ul {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
}
.toc-nav ul li a {
  display: block;
  color: #d1d5db;
  padding: 0.25rem 0;
  transition: color 0.15s ease;
  font-size: 0.875rem;
  text-decoration: none;
}
.toc-nav ul li a:hover,
.toc-nav ul li a.active {
  color: #60a5fa;
  font-weight: 600;
}

/* ToS beta notice */
.beta-notice {
  background-color: #854d0e;
  border-left: 4px solid #facc15;
  color: #fef08a;
  padding: 1rem;
  margin: 1.5rem 0;
  border-radius: 0.375rem;
}
.beta-notice strong { color: #fef9c3; }
.beta-notice ul {
  list-style-position: inside;
  padding-left: 1rem;
}
.beta-notice ul li {
  list-style-type: disc;
  margin-bottom: 0.5rem;
}

/* ── Pricing page styles ─────────────────────────────────── */
.comparison-table th,
.comparison-table td {
  padding: 0.75rem 1rem;
  text-align: left;
}
.comparison-table thead th {
  position: sticky;
  top: 0;
  background-color: #1f2937;
  z-index: 10;
}
.comparison-table tbody tr:nth-child(even) {
  background-color: rgba(255, 255, 255, 0.02);
}
.comparison-table .feature-group-header td {
  font-weight: 600;
  padding-top: 1.5rem;
  padding-bottom: 0.5rem;
  background-color: #1f2937 !important;
  color: #60a5fa;
}

/* ── Reveal animation helper ─────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Billing toggle (pricing) ────────────────────────────── */
.billing-toggle {
  position: relative;
  width: 2.5rem;
  height: 1.5rem;
  background-color: var(--matteblack-700);
  border-radius: 9999px;
  cursor: pointer;
  transition: background-color 0.2s;
}
.billing-toggle.active {
  background-color: #2563eb;
}
.billing-toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 1.25rem;
  height: 1.25rem;
  background: white;
  border-radius: 9999px;
  transition: transform 0.2s;
}
.billing-toggle.active::after {
  transform: translateX(100%);
}