/* Mobile uses the same content, without a canvas, pinning or card swaps.
   The mode is selected per visit in story-layout.js, not by CSS alone. */
.scenario-premise:has(+ #story.mobile-story){display:none}
#story.mobile-story{height:auto;background:#C2CCD6}
.mobile-story #story-sticky{position:relative;top:auto;height:auto;overflow:visible;background:#C2CCD6;--story-ui-opacity:1}
.mobile-story #story-canvas,.mobile-story #story-cover,
.mobile-story #object-hotspot,.mobile-story #status{display:none}
.mobile-story #premise{position:relative;inset:auto;transform:none;clip-path:none;visibility:visible;will-change:auto;pointer-events:auto;border-radius:0;overflow:hidden;background:#C2CCD6;padding:0}
.mobile-story .cost-intro{padding:48px 20px 28px}
.mobile-story .cost-stats{grid-template-columns:1fr;gap:32px;padding:32px 20px 16px;transform:none}
.mobile-story .cost-stat strong{font-size:48px;margin-bottom:12px}
.mobile-story .cost-stat p{font-size:var(--type-body,16px);line-height:var(--type-body-leading,1.5);letter-spacing:var(--type-body-tracking,-.025em)}
.mobile-story .cost-price-range::before{content:"\A";white-space:pre}
.mobile-story .cost-desktop-break{display:none}
#story.mobile-story #tour-plaques{
  position:relative;inset:auto;display:grid;gap:24px;box-sizing:border-box;
  width:100%;max-width:560px;height:auto;padding:40px 16px 56px;margin:0 auto;
  transform:none;opacity:1;pointer-events:auto;
}
.mobile-story #tour-plaques .tour-plaque{
  position:relative;inset:auto;display:flex!important;flex-direction:column;
  width:100%;height:auto;min-width:0;opacity:1;transform:none;clip-path:none;
}
.mobile-story + .benefits{margin-top:0}
.mobile-story .intro-tiles{min-height:210px}
.story-copy-mobile{display:none}
.mobile-story .story-copy-desktop{display:none}
.mobile-story .story-copy-mobile{display:inline}
.mobile-story :is(.intro-local,.solar-saving,.bess-saving,.bess-price-tile)>p{text-wrap:balance}
.mobile-story #tour-plaques .intro-tiles h3{font-size:15px;line-height:1.2}
.mobile-story .intro-compatibility h3{padding-inline:10px;text-wrap:balance}
.mobile-story .intro-plan-badge{font-size:14px;padding:8px 10px;gap:6px}
.mobile-story .intro-plan-badge>span:first-child{white-space:nowrap}
.mobile-story .intro-clock{width:28px;height:28px}
.mobile-story .intro-clock img{width:18px;height:18px}
@media(max-width:360px){
  .mobile-story .intro-plan-badge{font-size:12px;padding-inline:8px;gap:4px}
  .mobile-story .intro-clock{width:24px;height:24px}
  .mobile-story .solar-saving-number strong{font-size:30px}
  .mobile-story .summary-saving{padding:12px}
  .mobile-story .summary-saving strong{font-size:32px}
  .mobile-story .summary-saving span{font-size:15px}
}