/* demo-frame.v1.css -- the real dashboard in the #interface tablet
 * (2026-09-27, patches/landing_demo). Pairs with demo-frame.v1.js and the
 * sections71.demo bundle, whose ScraperShot renders an <iframe class="ss-demo"
 * src="/demo/"> into the tablet's screen on anything wider than a phone.
 *
 * The frame is the dashboard's own page (agor.as/demo/: templates/jp +
 * static/jp, rendered with the members' real purchases and the network
 * stubbed), laid out at 1710x920 and scaled to the screen by the script.
 * Phones keep the static phone screenshot. */
.ss-screen.ss-live { position: relative; aspect-ratio: 1710 / 920; }
.ss-screen.ss-live > iframe.ss-demo {
  position: absolute;
  left: 0;
  top: 0;
  width: 1710px;
  height: 920px;
  border: 0;
  display: block;
  background: #FAFAFB;
  transform-origin: 0 0;
  transform: scale(.585);
}
@media (max-width: 1099px) {
  /* the scroll window: 1100px wide, swipe for the rest (scraper-scroll.v3) */
  .ss-screen.ss-live { aspect-ratio: auto; height: calc(1100px * 920 / 1710); min-height: 0; }
  .ss-screen.ss-live > iframe.ss-demo { position: static; flex: 0 0 auto; transform: scale(.6433); margin-right: calc(1100px - 1710px); margin-bottom: calc(920px * .6433 - 920px); }
}
@media (max-width: 768px) {
  .ss-screen.ss-live { aspect-ratio: auto; height: auto; }
  .ss-screen.ss-live > iframe.ss-demo { display: none !important; }
}
/* the illustrations note under the pills, like the one under #features */
#interface .ss-note {
  max-width: 44rem;
  margin: .9rem auto 0;
  text-align: center;
  font-size: 11px;
  line-height: 1.6;
  color: hsl(var(--fg-subtle));
}
@media (max-width: 768px) { #interface .ss-note { display: none; } }