/* ===========================================================================
   ServicesAiAgent — Signature Figures & Responsive Switching
   Responsive landscape (> 600px) and portrait (<= 600px) SVG display,
   stage bounds (540px <= width <= 730px for landscape, >= 300px for portrait).
   =========================================================================== */

/* --- 1. Base SVG Rules --- */
svg.gal, svg.gap,
svg.gsl, svg.gsp,
svg.gfl, svg.gfp,
svg.gcl, svg.gcp {
  display: block;
  width: 100%;
  height: auto;
}

/* --- 2. Stage & Figure Wrapper Bounds --- */
.aa-fig-wrap,
.aa-story__stage,
.aa-auth__fig,
.aa-flow__fig {
  width: 100%;
  max-width: 720px;
  margin-inline: auto;
  box-sizing: border-box;
}

/* --- 3. Responsive Switching (Breakpoint: 600px / 601px) --- */

/* Mobile portrait: <= 600px */
@media (max-width: 600px) {
  svg.gal,
  svg.gsl,
  svg.gfl,
  svg.gcl {
    display: none !important;
  }
  svg.gap,
  svg.gsp,
  svg.gfp,
  svg.gcp {
    display: block !important;
  }

  .aa-hero__fig,
  .aa-fig-wrap,
  .aa-story__stage,
  .aa-auth__fig,
  .aa-flow__fig {
    max-width: 440px;
    margin-inline: auto;
  }
}

/* Desktop landscape: >= 601px */
@media (min-width: 601px) {
  svg.gap,
  svg.gsp,
  svg.gfp,
  svg.gcp {
    display: none !important;
  }
  svg.gal,
  svg.gsl,
  svg.gfl,
  svg.gcl {
    display: block !important;
  }

  .aa-fig-wrap,
  .aa-story__stage,
  .aa-auth__fig,
  .aa-flow__fig {
    min-width: 540px;
    max-width: 720px;
  }
}