/* AIOptimize marketing — custom styles that supplement Tailwind CDN.
   Keep this file small; use Tailwind utilities first. */

:root {
  color-scheme: dark;
}

html {
  scroll-behavior: smooth;
}

body {
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Focus ring for keyboard users only. */
:focus-visible {
  outline: 2px solid #38bdf8;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Accordion chevron animation for <details>/<summary>. */
details > summary {
  list-style: none;
  cursor: pointer;
}
details > summary::-webkit-details-marker {
  display: none;
}
details > summary .chev {
  transition: transform 200ms ease;
}
details[open] > summary .chev {
  transform: rotate(90deg);
}

/* Copy-button transient state. */
.copy-btn[data-copied="true"] {
  background-color: #0c4a6e;
  color: #7dd3fc;
  border-color: #0369a1;
}

/* Soft glow under hero headline. */
.hero-glow {
  background: radial-gradient(
    ellipse at 50% 0%,
    rgba(56, 189, 248, 0.15),
    transparent 60%
  );
}

/* Terminal block framing. */
.terminal {
  background: #0a0a0a;
  border: 1px solid #27272a;
  border-radius: 0.75rem;
  box-shadow: 0 10px 30px -15px rgba(0, 0, 0, 0.7);
}
.terminal-bar {
  background: #18181b;
  border-bottom: 1px solid #27272a;
  border-top-left-radius: 0.75rem;
  border-top-right-radius: 0.75rem;
}
.terminal-dot {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 9999px;
  display: inline-block;
}

/* Docs sidebar active state. */
.doc-link[aria-current="page"] {
  background-color: #1e293b;
  color: #7dd3fc;
}

/* Subtle grid for pricing table on wide screens. */
.price-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1rem;
}
@media (min-width: 768px) {
  .price-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
  }
}
@media (min-width: 1024px) {
  .price-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
  }
}

/* Reduced-motion respect. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  details > summary .chev { transition: none; }
}