/* Phone layouts preserve the desktop composition while fitting every demo canvas. */
@media (max-width: 767px) {
  .marketing-layout, .marketing-faq,
  html[data-container-page] .container-section-layout,
  html[data-container-page] .container-faq-layout {
    box-sizing: border-box;
    width: 100%;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    padding: 32px 20px !important;
    gap: 28px !important;
  }
  .marketing-layout > div, .marketing-faq > div { min-width: 0; max-width: 100% !important; }
  .marketing-copy { order: 0; }
  .marketing-stage { order: 1; min-width: 0; width: 100%; grid-template-columns: minmax(0, 1fr); }
  .marketing-stage > .marketing-scene {
    width: var(--mobile-canvas-width) !important;
    max-width: none !important;
    flex-shrink: 0;
    margin-left: 0 !important;
    justify-self: center;
  }
  .marketing-layout h2, .marketing-faq h2 { font-size: 32px !important; line-height: 1.12 !important; }
  .marketing-layout [role="tablist"] { min-height: 0 !important; }
  .marketing-layout [role="tab"] { padding-left: 16px !important; }
  .marketing-faq button { gap: 12px !important; }
}