/* M2 — 17.10.2026: phone layout for the story pages (Agro, Apiary, Automatic, Analytic, Software, About).
   Same idea as Robotics M1: the scene owns a fixed band under the header, the copy starts below it and scrolls
   under the band, so text never covers the model, and chapters are not compacted (tour.js skips data-fit on
   phones and puts --slide-top under the band). Loaded after each page's tour.css. */
@media(max-width:760px){
  #experience{--band:44svh}
  #experience .stage{height:var(--band);margin-bottom:calc(-1 * var(--band));z-index:2;border-bottom:1px solid var(--line);box-shadow:0 14px 16px -4px var(--bg)}
  #experience .stage .viewport{inset:70px 0 6px 0!important;height:auto!important;min-height:0}
  #experience .stage .scene-word{top:auto;bottom:-4%;left:50%;transform:translateX(-50%);font-size:40vw}
  #experience .stage .scene-top{display:none}
  /* Scene captions sit inside the band: data card bottom right, motion switch bottom left. */
  #experience .stage .scene-hud{top:auto;right:var(--pad);bottom:8px;width:min(52%,200px);transform:scale(.86);transform-origin:100% 100%}
  #experience .stage .scene-bottom{top:auto;left:var(--pad);right:auto;bottom:8px}
  #experience .stage .scene-bottom>span{display:none}
  #experience .stage .scene-status{top:76px;bottom:auto;left:var(--pad);right:var(--pad)}
  #experience .stage :is(.cabinet-window,.visual-panels){top:76px!important;bottom:10px!important;left:var(--pad);right:var(--pad);height:auto}
  #experience .stage .chat-demo{top:76px;bottom:10px;left:var(--pad);right:var(--pad);height:auto;max-height:none}
  /* Copy under the band, readable type. */
  #experience .chapter,#experience .chapter[data-fit]{min-height:auto;align-items:flex-start;padding:20px var(--pad) 36px}
  /* M3: phones scroll natively, so only the opening chapter starts under the band; the rest follow on with a rule. */
  #experience .chapter--intro,#experience .chapter--intro[data-fit]{padding-top:var(--slide-top,44svh)}
  #experience .chapter:not(.chapter--intro) .chapter-copy{border-top:1px solid var(--line);padding-top:26px}
  #experience .chapter:last-of-type{min-height:100svh}
  #experience .chapter .chapter-copy{width:100%;max-width:none}
  #experience .chapter h1{font-size:44px;line-height:1.02}
  #experience .chapter h2{font-size:32px;line-height:1.06}
  #experience .chapter .eyebrow{font-size:11px;margin-bottom:12px}
  #experience .chapter-number{width:24px;height:24px;font-size:10px}
  #experience .chapter .chapter-description{font-size:15px;line-height:1.55;margin-top:14px;max-width:none}
  #experience .chapter--intro .chapter-description{font-size:17px!important}
  #experience .chapter .micro{font-size:13px!important;line-height:1.5;margin-top:12px;max-width:none}
  #experience .chapter .choices button{font-size:13px;padding:10px 12px}
  #experience .chapter :is(.choice-label,.result-line,.inline-link,.start-link,.signal-chain){font-size:12px}
  #experience .chapter .button{font-size:12px}
}