/* preset-sections.css — styles for the shared tail sections
   (PresetSiteSections: #features / #about / #faq / #contact).
   The compiled component emits Tailwind utility classes, but several preset
   builds don't include those utilities in their CSS, so the sections rendered
   as unstyled text. Scoped to the four section IDs so template styles are
   untouched. Supports both the dark (border-white/10) and light
   (border-slate-200) variants by keying off the emitted class names. */

#features, #about, #faq, #contact {
  padding: 5rem 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
@media (min-width: 768px) {
  #features, #about, #faq, #contact { padding: 7rem 3rem; }
}
#features[class*="border-slate"], #about[class*="border-slate"],
#faq[class*="border-slate"], #contact[class*="border-slate"] {
  border-top-color: #e2e8f0;
  background: #fff;
}

#features > div, #about > div, #faq > div, #contact > div {
  max-width: 72rem;
  margin: 0 auto;
}

/* Eyebrow */
#features [class*="tracking-[0.2em]"], #about [class*="tracking-[0.2em]"],
#faq [class*="tracking-[0.2em]"], #contact [class*="tracking-[0.2em]"] {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.45);
  margin: 0;
}
#features [class*="text-slate-500"], #about [class*="text-slate-500"],
#faq [class*="text-slate-500"], #contact [class*="text-slate-500"] {
  color: #64748b;
}

/* Title */
#features h2, #about h2, #faq h2, #contact h2 {
  font-size: 1.875rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: #fff;
  margin: 0.75rem 0 0;
}
@media (min-width: 768px) {
  #features h2, #about h2, #faq h2, #contact h2 { font-size: 2.25rem; }
}
#features h2[class*="text-slate-900"], #about h2[class*="text-slate-900"],
#faq h2[class*="text-slate-900"], #contact h2[class*="text-slate-900"] {
  color: #0f172a;
}

/* Content wrapper */
#features [class*="mt-8"], #about [class*="mt-8"],
#faq [class*="mt-8"], #contact [class*="mt-8"] {
  margin-top: 2rem;
}

/* Cards grid */
#features [class*="grid"] {
  display: grid;
  gap: 1rem;
}
@media (min-width: 768px) {
  #features [class*="md:grid-cols-3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Cards (dark + light) */
#features [class*="rounded-2xl"], #faq [class*="rounded-2xl"] {
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  padding: 1.5rem;
}
#features [class*="border-slate-200"], #faq [class*="border-slate-200"] {
  border-color: #e2e8f0;
  background: #f8fafc;
}
#features [class*="rounded-2xl"] h3, #faq [class*="rounded-2xl"] dt {
  font-size: 1.05rem;
  font-weight: 500;
  color: #fff;
  margin: 0;
}
#features [class*="rounded-2xl"] h3[class*="text-slate-900"],
#faq [class*="rounded-2xl"] dt[class*="text-slate-900"] {
  color: #0f172a;
}

/* Body text */
#features p[class*="text-white/60"], #about p[class*="text-white/60"],
#faq dd[class*="text-white/60"], #contact p[class*="text-white/60"],
#features p[class*="text-sm"], #faq dd[class*="text-sm"] {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.9rem;
  line-height: 1.65;
  max-width: 42rem;
  margin: 0.5rem 0 0;
}
#about p[class*="text-base"], #contact p[class*="text-base"] {
  font-size: 1rem;
}
#features p[class*="text-slate-600"], #about p[class*="text-slate-600"],
#faq dd[class*="text-slate-600"], #contact p[class*="text-slate-600"] {
  color: #475569;
}

/* FAQ list spacing */
#faq dl {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 48rem;
  margin: 0;
}

/* Contact CTA pill */
#contact a[class*="rounded-full"] {
  margin-top: 1.5rem;
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  padding: 0.75rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  background: #fff;
  color: #000;
  text-decoration: none;
}
#contact a[class*="bg-slate-900"] {
  background: #0f172a;
  color: #fff;
}