/* SigmaTracker landing (/tracker) — page-specific rules only.
 * Reuses tokens, .hero/.neon-grid/.rain, .card, .not-list, .store-badge,
 * .section/.container and .footer from the shared /styles.css.
 */

/* Card grids — generic N-across layout for this page's sections,
 * built on the shared .card component. Mobile-first: 1 column always,
 * widening at the breakpoints the shared stylesheet already uses. */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 640px) {
  .card-grid-2,
  .card-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  .card-grid-3 {
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }
}

/* Section 2 — sub-line under the sources grid listing exchanges/chains */
.sources-detail {
  text-align: center;
  max-width: 640px;
  margin: 22px auto 0;
  font-size: 14px;
  color: var(--text-dim);
}

/* Section 3 — read-only, on purpose: cyberpunk2 as a faint section
 * background accent. A dark overlay is baked into the same background-image
 * stack (rather than a separate pseudo-element) so the text above stays
 * legible without extra stacking-context bookkeeping. */
.section-accent {
  background-image:
    linear-gradient(rgba(5, 6, 12, 0.88), rgba(5, 6, 12, 0.88)),
    url('../assets/cyberpunk2.jpeg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Section 5 — privacy: one item per row, single column, positive framing
 * (distinct from the "what it's not" list's negative dash bullets). */
.privacy-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  max-width: 520px;
  margin: 0 auto;
}

.privacy-item {
  font-size: 15px;
  color: var(--text-dim);
  padding-left: 4px;
}

.privacy-item::before {
  content: "✓ ";
  color: var(--cyan);
  opacity: 0.8;
}

/* Section 7 — pricing footnote */
.pricing-footnote {
  text-align: center;
  max-width: 520px;
  margin: 20px auto 0;
  font-size: 13px;
  color: var(--text-dim);
}

/* Section 8 — languages: one line, no card, tighter section padding */
.languages-section {
  padding: 32px 0;
  text-align: center;
}

.languages-section p {
  margin: 0;
  color: var(--text-dim);
  font-size: 14.5px;
}

/* Final CTA — reuse .section h2 styling, just center the badge below it */
.cta-section .badges {
  margin-top: 8px;
  justify-content: center;
}