/**
 * Landing page (/) rebrand: white background, black text, #7b4ff5 purple
 * accent. Scoped entirely to `body[data-landing-page="general"]`, which
 * only index.html sets, so /photobooth and /engage keep the existing
 * dark theme untouched. This works by overriding the same CSS custom
 * properties styles.css already uses (--near-black, --cream, etc.), so
 * every shared component (.card, .btn-primary, .toggle-option, the
 * results stat grid) automatically re-themes without duplicating rules.
 */
body[data-landing-page="general"] {
  --near-black: #ffffff; /* page background, and text color on purple buttons/pills */
  --panel: #f7f5fc;
  --panel-border: #e4e0ef;
  --deep-violet: #f1ebff;
  --deep-violet-soft: #f0edf7;
  --electric-violet: #7b4ff5;
  --electric-violet-soft: rgba(123, 79, 245, 0.08);
  --highlight: #7b4ff5;
  --cream: #121212; /* body text */
  --cream-dim: #5b5568; /* secondary/muted text */
}

body[data-landing-page="general"] h2 {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  color: var(--cream);
  margin: 0 0 6px;
}

body[data-landing-page="general"] h3 {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  color: var(--cream);
  margin: 0 0 4px;
}

body[data-landing-page="general"] .direct-answer {
  color: var(--cream);
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 28px;
}

body[data-landing-page="general"] .category-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 32px;
}

body[data-landing-page="general"] .category-card {
  display: block;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 18px;
  padding: 24px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, transform 0.15s;
}

body[data-landing-page="general"] .category-card:hover,
body[data-landing-page="general"] .category-card:focus-visible {
  border-color: var(--electric-violet);
  transform: translateY(-2px);
}

body[data-landing-page="general"] .category-card h2 {
  font-size: 19px;
}

body[data-landing-page="general"] .category-tagline {
  font-weight: 600;
  font-size: 14px;
  color: var(--electric-violet);
  margin: 0 0 10px;
}

body[data-landing-page="general"] .category-body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--cream-dim);
  margin: 0 0 14px;
}

body[data-landing-page="general"] .category-link {
  font-size: 13px;
  font-weight: 700;
  color: var(--electric-violet);
}

body[data-landing-page="general"] .faq-section {
  margin-bottom: 32px;
}

body[data-landing-page="general"] .faq-section > h2 {
  font-size: 20px;
  margin-bottom: 14px;
}

body[data-landing-page="general"] .faq-item {
  margin-bottom: 16px;
}

body[data-landing-page="general"] .faq-item h3 {
  font-size: 15px;
}

body[data-landing-page="general"] .faq-item p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--cream-dim);
  margin: 0;
}

body[data-landing-page="general"] .calculator-heading {
  font-size: 20px;
  margin-bottom: 14px;
}

@media (max-width: 640px) {
  body[data-landing-page="general"] .category-grid {
    grid-template-columns: 1fr;
  }
}