/* Landing page: styles not covered cleanly by Tailwind utilities */

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family);
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

.hero-grid {
  position: relative;
}

.hero-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(#e5e7eb 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: 0 0;
  -webkit-mask-image: radial-gradient(ellipse at center, black 55%, transparent 80%);
  mask-image: radial-gradient(ellipse at center, black 55%, transparent 80%);
  pointer-events: none;
  z-index: 0;
}

.hero-grid > * {
  position: relative;
  z-index: 1;
}

.media-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f9fafb;
  border: 1px dashed #e5e7eb;
  color: #94a3b8;
  font-size: 0.875rem;
}

details[data-faq-item] summary {
  list-style: none;
}

details[data-faq-item] summary::-webkit-details-marker {
  display: none;
}

details[data-faq-item][open] .faq-chevron {
  transform: rotate(180deg);
}

[hidden] {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

@media (max-width: 639px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
  select,
  textarea {
    font-size: 16px;
  }
}