/* Home page: responsive adjustments for the hero stage and story sections. */

/* Design-time fixed box on the well-being value overflows narrow columns. */
[data-bstyle="color:fStateColor"] { width: auto !important; height: auto !important; }

/* Story canvases scale with their column; keep them from collapsing to zero height while fonts load. */
[data-sb="viewA"], [data-sb="viewB"] { min-height: 200px; }

/* Below 960px the hero stage is rendered at its 1120px design width and scaled down by home.js. */
.hero-scale-wrap { position: relative; width: 100%; margin: 0 auto; flex: none; overflow: visible; }

@media (max-width: 960px) {
  #top { min-height: auto !important; }
  /* Stacked layout: the story ends at the coherent simulator — hide the Layer 3 trunk, branches and data points. */
  [data-story] [data-sb="stream2"], [data-story] [data-sb="glow2"],
  [data-story] [data-sb="stream3"], [data-story] [data-sb="glow3"],
  [data-story] [data-sb^="br"], [data-story] [data-sb^="aq"] { display: none !important; }
  [data-sb="app1"], [data-sb="app2"], [data-sb="app3"] { opacity: 1 !important; transform: none !important; }
  /* Simulator 2 alternates sides on desktop (chart first); stacked, the card always comes before its chart. */
  [data-sb="app2viz"], [data-sb="viewB"] { order: 2; }
}

@media (max-width: 640px) {
  #top h1 { font-size: clamp(32px, 9.5vw, 44px) !important; }
  section, [data-story], .site-header__inner { padding-left: 20px !important; padding-right: 20px !important; }
  #demo form { padding: 22px 18px 24px !important; }
}