/* DBeloper marketing site — small layer of styles on top of Tailwind CDN */

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }

/* Language toggle */
.lang-btn { color: #475569; transition: background 120ms ease, color 120ms ease; }
.lang-btn:hover { color: #0f172a; }
.lang-btn-active { background: #0f172a; color: #fff; }
.lang-btn-active:hover { color: #fff; }

/* Pricing billing toggle */
.billing-btn { color: #475569; transition: background 120ms ease, color 120ms ease; }
.billing-btn-active { background: #0f172a; color: #fff; }

/* Screen tabs */
.screen-tab {
  position: relative;
  padding: 0.6rem 0.9rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #64748b;
  border-bottom: 2px solid transparent;
  transition: color 120ms ease, border-color 120ms ease;
  white-space: nowrap;
}
.screen-tab:hover { color: #0f172a; }
.screen-tab.is-active {
  color: #4f46e5;
  border-bottom-color: #4f46e5;
}

/* Mock screen panel transition */
.screen-panel { animation: fade 200ms ease; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* details summary chevron */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }

/* dotted-grid backgrounds work even without crisp DPR scaling */
@media (max-width: 640px) {
  .screen-tab { padding: 0.5rem 0.6rem; font-size: 0.8125rem; }
}