/* Dev Fabric Flow v5.1 — scene geometry correction, 2026-10-29.
   Strictly visual. Preserve all module buttons and CRM event handlers. */
:root[data-brand="dev-fabric"] .df-hero .fa-platform {
  display: none !important;
}

/* The frame must contain the entire animated scene, not cut across its first card.
   A separate reserved row keeps the interactive instruction outside the scene. */
@media (min-width: 721px) {
  :root[data-brand="dev-fabric"] .df-hero .fa-assembly-wrap {
    min-height: 640px !important;
    padding: 30px 24px 70px !important;
    overflow: visible;
    display: grid;
    place-items: center;
  }
  :root[data-brand="dev-fabric"] .df-hero .fa-assembly-wrap::before {
    inset: 0 0 55px !important;
    border-radius: 28px;
  }
  :root[data-brand="dev-fabric"] .df-hero .fa-assembly-wrap::after {
    top: 22px !important;
    left: 28px !important;
  }
  :root[data-brand="dev-fabric"] .df-hero .fa-assembly {
    width: min(100%, 680px);
    height: 540px;
  }
  :root[data-brand="dev-fabric"] .df-hero .fa-module-web {
    top: 7% !important;
  }
  :root[data-brand="dev-fabric"] .df-hero .fa-assembly-detail {
    bottom: 0 !important;
    width: min(90%, 520px);
    max-width: calc(100% - 24px);
  }
}

/* Phone layout is a two-column readable grid, not a scaled 3D stage.
   No floating label may overlap mobile cards. */
@media (max-width: 720px) {
  :root[data-brand="dev-fabric"] .df-hero .fa-assembly-wrap {
    min-height: 0 !important;
    padding: 16px !important;
    margin-inline: 0 !important;
    overflow: visible !important;
    width: 100%;
  }
  :root[data-brand="dev-fabric"] .df-hero .fa-assembly-wrap::before {
    inset: 0 !important;
    border-radius: 20px !important;
  }
  :root[data-brand="dev-fabric"] .df-hero .fa-assembly-wrap::after {
    content: none !important;
  }
  :root[data-brand="dev-fabric"] .df-hero .fa-assembly-detail {
    max-width: 100%;
    border-radius: 14px !important;
  }
}


/* Keep section-only light effects inside the page width at 721px and above. */
:root[data-brand="dev-fabric"] .df-ready-section::before {
  right: 0 !important;
  width: 57% !important;
}