/* ============================================================
   MOBILE STATIC PAGE
   Loaded LAST, and only applies under .mobile-static (set by
   mobile-static.js). Phones get a plain scrollable page; the
   desktop scroll-story containers are removed from the flow
   because their scripts are not loaded on mobile, so they would
   otherwise sit there empty and hold dead vertical space.
   ============================================================ */

.mobile-static #bgField,
.mobile-static #sem1Bg,
.mobile-static #patchReveal,
.mobile-static #patchFinal,
.mobile-static #uspDimOverlay,
.mobile-static #op1Scene,
.mobile-static #op1Text,
.mobile-static #uspSection {
  display: none !important;
}

/* ── Hero ────────────────────────────────────────────────
   On desktop the hero is 500vh tall and both the 3D logo and
   the two copy blocks are position:fixed, so they hover over
   the scroll story. On a phone that made them float on top of
   the images below. Put everything back into normal flow, in
   one column at the top: logo, then the description, then the
   page scrolls on to the images. */
.mobile-static .hero {
  height: auto !important;
  min-height: 0 !important;
  position: static !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 88px 18px 10px !important;
}

.mobile-static #logo3d {
  position: static !important;
  order: -1;                       /* logo above the copy */
  width: min(50vw, 190px) !important;
  margin: 0 auto !important;
  transform: none !important;      /* drop the fixed-centering translate */
  opacity: 1 !important;
  visibility: visible !important;
}

/* logoPop animates transform, which would re-introduce the
   -50% centering offset now that the logo is in flow. */
.mobile-static #logo3d.reveal,
.mobile-static #logo3d.docked {
  transform: none !important;
  animation: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.mobile-static .hero-copy {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
  max-width: 620px;
  padding: 0 !important;
  z-index: auto !important;
  pointer-events: auto !important;
  opacity: 1 !important;
  transform: none !important;
  /* justify + text-align-last:justify stretched words across the
     screen on a narrow viewport */
  text-align: left !important;
  text-align-last: left !important;
  font-size: 14px !important;
  line-height: 1.62 !important;
}

/* preloader.js splits the copy into per-word spans that fade in. */
.mobile-static .hero-copy span {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

/* The finale + footer are normally revealed by op1-scene.js,
   which never runs here — show them outright. */
.mobile-static #finalCta,
.mobile-static .site-footer {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  visibility: visible !important;
  position: static !important;
}

/* No motion anywhere on the static page. */
.mobile-static .ms-wrap *,
.mobile-static #finalCta,
.mobile-static .site-footer {
  animation: none !important;
}

.mobile-static .ms-wrap {
  padding: 8px 16px 32px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* ── Product stills ─────────────────────────────────────── */
.ms-shot {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ms-shot img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: #07070f;
}

.ms-shot figcaption {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.62);
  text-align: center;
}

/* ── Feature list ───────────────────────────────────────── */
.ms-features {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.ms-h2 {
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #fff;
  margin: 4px 0 2px;
  text-align: center;
}

.ms-card {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ms-card h3 {
  margin: 0;
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #4da3ff;
}

.ms-card p {
  margin: 0;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.76);
}

.ms-card img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}