/* site.css — the few rules the inline-styled design cannot express itself.
   v0.1.2 (2026-09-23): section eyebrows tighten on phones.
   v0.1.1 (2026-09-23): floating video button sizing.
   v0.1.0 (2026-09-23) */

/* site.js toggles this on every [data-if] element; !important beats the inline display:flex */
.dc-hide { display: none !important; }

/* Header navigation: desktop links vs the Menu button. The design switched these on
   window width in JS; a media query does it without a flash on load. */
.nav-narrow { display: none !important; }
@media (max-width: 819px) {
  .nav-wide { display: none !important; }
  .nav-narrow { display: inline-flex !important; align-items: center; }
}

/* The three demo photos must not start a native image drag */
[data-down] img { -webkit-user-drag: none; user-select: none; }

/* Photo buttons in the tray keep a square-ish footprint even before the image loads */
[data-down] { aspect-ratio: auto; }

/* The floating button over the hero video never wraps; a little smaller on phones */
#video-cta { white-space: nowrap; }
@media (max-width: 560px) {
  #video-cta { height: 44px; font-size: 15px; padding: 0 18px 0 14px; }
}

/* Section eyebrows: one line on desktop; on phones the tracking tightens instead of wrapping */
@media (max-width: 560px) {
  span[style*="text-transform: uppercase"][style*="font-size: 13.5px"] { font-size: 12.5px !important; letter-spacing: .1em !important; }
}