/* ClipboardKeyboard / digitalaugust.com
   Layout values live inline in each page. This file holds the breakpoint (900px),
   hover states, the mobile menu and the screenshot slideshow track. */

/* Breakpoint: 900px, as in the design */
@media (min-width: 900px) {
  .n-only, .mobile-menu { display: none !important; }
}
@media (max-width: 899.98px) {
  .w-only { display: none !important; }
  .price-row { flex-direction: column !important; align-items: stretch !important; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .shot { flex-basis: 100% !important; }
}
@media (max-width: 599.98px) {
  .steps { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Mobile menu */
.mobile-menu[hidden] { display: none !important; }

/* Screenshot slideshow track: hide the scrollbar */
#shot-track::-webkit-scrollbar { display: none; }

@media (prefers-reduced-motion: reduce) {
  html, #shot-track { scroll-behavior: auto !important; }
}

/* Hover states */
.hv1:hover, .hv1:focus-visible { color: #6dd5ed !important; }
.hv2:hover, .hv2:focus-visible { background: #122b68 !important; color: #ffffff !important; }
.hv3:hover, .hv3:focus-visible { background: var(--color-text) !important; color: #ffffff !important; }
.hv4:hover, .hv4:focus-visible { background: var(--color-text) !important; color: var(--color-bg) !important; }
.hv5:hover, .hv5:focus-visible { color: #2f62dc !important; }