/* Local compositions for the two standalone demos. Desktop stays unchanged. */
.ga-mobile-context,.ga-mobile-evidence,.ga-mobile-links{display:none}
.ab-concept-intro{display:contents}

@media(max-width:840px){
  .iq-page-gap-analysis .ga-story-shell{margin-top:36px}
  .iq-page-gap-analysis .ga-story-visual .ga-plant{
    margin-inline:0;padding:16px 0;max-width:100%;overflow:visible!important;
  }
  .iq-page-gap-analysis :is(.ga-plant-top,.ga-plant-controls,.ga-plant-readout){min-width:0}
  .iq-page-gap-analysis .ga-plant-top{display:block;font-size:10px;line-height:1.6;margin-bottom:14px}
  .iq-page-gap-analysis .ga-plant-top span{display:block;letter-spacing:.02em}
  .iq-page-gap-analysis .ga-plant-scene-svg{display:none}
  .ga-mobile-context{display:block;border:1px solid #d7d7d7;background:#f6f6f6;margin-bottom:14px}
  .ga-mobile-layer{padding:10px 13px;border-left:3px solid transparent}
  .ga-mobile-layer+.ga-mobile-layer{border-top:1px solid #d7d7d7}
  .ga-mobile-layer small,.ga-mobile-gate>span{display:block;font-size:10px;letter-spacing:.08em;color:#5a5a5a}
  .ga-mobile-process{display:flex;align-items:center;justify-content:space-between;gap:5px;margin-top:8px;font-size:13px}
  .ga-mobile-process strong{font-weight:500;border:1px solid #999999;padding:6px;background:#fff}
  .ga-mobile-process i{font-style:normal;color:#787878}
  .ga-mobile-layer p{font-size:14px;line-height:1.4;margin:5px 0 0}
  .ga-mobile-layer>span{display:block;font-size:12px;line-height:1.5;color:#5a5a5a;margin-top:3px}
  .ga-mobile-gate{padding:11px 13px;border-top:1px solid #b0b0b0;display:flex;align-items:center;justify-content:space-between;gap:10px}
  .ga-mobile-gate strong{font-size:13px;font-weight:500}
  .ga-plant[data-active="plant"] [data-mobile-layer="plant"],
  .ga-plant[data-active="control"] [data-mobile-layer="control"],
  .ga-plant[data-active="cyber"] [data-mobile-layer="cyber"]{border-left-color:#111111;background:#ededed}
  .ga-plant[data-active="iqai"] .ga-mobile-gate{background:#111;color:#fff}
  .ga-plant[data-active="iqai"] .ga-mobile-gate>span{color:#ddd}
  .iq-page-gap-analysis .ga-plant-controls{grid-template-columns:repeat(4,minmax(0,1fr))}
  .iq-page-gap-analysis .ga-plant-controls button{padding:8px 5px;min-height:48px;text-align:center;font-size:12px}
  .iq-page-gap-analysis .ga-plant-controls button span{display:none}
  .iq-page-gap-analysis .ga-plant-readout{grid-template-columns:1fr;gap:9px;font-size:14px;line-height:1.5}
  .iq-page-gap-analysis .ga-plant-readout>strong{font-size:18px}
  .ga-mobile-evidence{display:grid;gap:9px;margin:3px 0 0}
  .ga-mobile-evidence>div{display:grid;grid-template-columns:88px 1fr;gap:10px;border-top:1px solid #e2e2e2;padding-top:9px}
  .ga-mobile-evidence dt{font-size:12px;font-weight:500;color:#333}
  .ga-mobile-evidence dd{margin:0;font-size:13px;color:#555555}
  .ga-mobile-links{display:grid;gap:2px;margin-top:15px;border-top:1px solid #d7d7d7}
  .ga-mobile-links a{min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;text-decoration:underline;text-underline-offset:3px}
  /* The selected readout replaces the four repeated scroll chapters. */
  .ga-story-shell:has(.ga-mobile-enhanced) .ga-story-steps{display:none}
  /* The site already reserves the sticky header via scroll-padding-top. */
  .iq-page-gap-analysis :is(#interactive-example,#retained-assessment){scroll-margin-top:0}
  .iq-page-gap-analysis .ga-flow-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:#ddd}
  .iq-page-gap-analysis .ga-flow-row i{display:none}
  .iq-page-gap-analysis .ga-flow-row button{min-height:84px}
  .iq-page-gap-analysis .ga-proof-grid{grid-template-columns:1fr}
  .iq-page-gap-analysis .ga-proof-grid>div{min-height:0;padding:20px 0;display:grid;grid-template-columns:85px 1fr;gap:20px;align-items:center;border-left:0}
  .iq-page-gap-analysis .ga-proof-grid strong{font-size:48px}
  .iq-page-gap-analysis .ga-proof-grid span{max-width:none;font-size:14px}
}

@media(max-width:760px){
  /* Contents keeps the existing DOM/control wiring; the intro precedes the local demo. */
  .iq-page-ab .ab-editorial{display:contents}
  .iq-page-ab .ab-concept-intro{display:block;order:-1;padding:24px 20px 18px;background:#fff}
  .iq-page-ab .ab-concept-intro .ab-overline{margin-bottom:12px}
  .iq-page-ab .ab-concept-intro h3{font-size:28px}
  .iq-page-ab .ab-concept-intro .ab-editorial-intro{margin-bottom:0}
  .iq-page-ab .ab-figure{position:sticky;top:64px;z-index:6;align-self:start}
  .iq-page-ab .ab-figure-head{padding:9px 14px;font-size:9px;gap:12px}
  .iq-page-ab .ab-stage{height:246px;min-height:0;aspect-ratio:auto;flex:none}
  .iq-page-ab .ab-figure figcaption{padding:8px 14px;font-size:10px;line-height:1.4}
  .iq-page-ab .ab-monogram{font-size:40px;left:14px;bottom:12px}
  .iq-page-ab .ab-stage-controls{right:12px;bottom:10px}
  .iq-page-ab .ab-lenses{margin:0;padding:14px 14px 10px;gap:6px;background:#fff;scroll-margin-top:400px}
  .iq-page-ab .ab-lenses button{font-size:12px;padding:10px 12px;min-height:44px}
  .iq-page-ab .ab-perspectives{padding:0 14px;min-height:172px;background:#fff}
  .iq-page-ab .ab-perspective{padding-top:12px;margin-bottom:14px;scroll-margin-top:510px}
  .iq-page-ab .ab-perspective h4{font-size:20px}
  .iq-page-ab .ab-perspective>p:last-child{line-height:1.55}
  .iq-page-ab .ab-text-link{margin:0 14px 12px}
  /* Reuse the existing concept highlights, with no mobile draw animation. */
  .iq-page-ab .ab-working-set{display:block}
  .iq-page-ab .ab-working-set-note{display:none}
  .iq-page-ab .ab-working-label{font-size:8px;padding:5px;transition:none}
  .iq-page-ab .ab-working-line{animation:none!important;transition:none;stroke-dashoffset:0!important}
}

/* On short landscape screens, let the visual scroll instead of covering content. */
@media(max-width:760px) and (max-height:650px){
  .iq-page-ab .ab-figure{position:relative;top:auto}
}