/* Real, anonymised Neoo screens on the product pages (/neoo-starter, /neoo-business), 2026-10-03.
   Same treatment as the needs pages (neoo-needs.css): light frame on the night canvas, optional native-resolution
   zoom, "real screen" caption. In the existing tabbed tours each step becomes screen (8/12) + text (4/12); the tab
   runtime (neoo-starter-journey.js, neoo-business-os.js) is unchanged. Every 16:10 crop shares one aspect ratio, so
   switching steps never changes the tour height. Selectors start with #main to win over the night palette adapter
   (neoo-fusion-families.css), which sets text colours to inherit inside main. */
#main .rs-frame { position: relative; overflow: hidden; aspect-ratio: 16 / 10; margin: 0; border: 1px solid rgba(255, 255, 255, .18); border-radius: 14px; background: var(--nf-paper, #f5f7ff); box-shadow: 0 26px 64px rgba(2, 4, 16, .5); }
#main .rs-frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 0 0; }
#main .rs-step { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(24px, 3vw, 44px); align-items: center; }
#main .rs-step__body > :first-child { margin-top: 0; }
#main .rs-figure { position: relative; margin: 0; }
#main .rs-stage { position: relative; }
#main .rs-zoom { position: absolute; z-index: 2; left: -24px; bottom: -28px; display: block; width: min(var(--zw, 400px), 72%); height: auto; border: 1px solid var(--nf-paper, #f5f7ff); border-radius: 12px; background: var(--nf-paper, #f5f7ff); box-shadow: 0 0 0 6px rgba(106, 88, 255, .3), 0 24px 56px rgba(0, 0, 0, .5); }
#main .rs-caption { margin: 16px 0 0; color: var(--nf-text-3, #8b94b0); font-size: 13px; line-height: 1.5; }
#main .rs-figure--zoom .rs-caption { margin-top: 46px; text-align: right; }

/* Neoo Start: the five-step journey (lib/neoo-starter-journey.mjs) without the fictional customer column. */
body.starter10k-page #main .sx-cockpit--screens .sx-cockpit-work { padding: 28px; }
body.starter10k-page #main .sx-cockpit--screens .sx-journey-panel { min-height: 0; padding: 28px 0 8px; }
body.starter10k-page #main .sx-cockpit--screens .rs-step__body > p:not(.sx-record-label) { max-width: 46ch; margin: 0; font-size: 16px; line-height: 1.65; color: var(--nf-text-2, #b7bfd6); }
body.starter10k-page #main .sx-cockpit--screens .sx-journey-trace { margin-top: 20px; }

/* Neoo Business: customer journey (#product-proof), teams (#domains) and support (#support). */
/* The cockpit grid (neoo-product-experience.css) kept a 260px column for the fictional customer: one column now. */
body.neoo-home.neoo-product-page.business-os-page #main .os-proof .os-cockpit.os-cockpit--screens { grid-template-columns: minmax(0, 1fr); }
body.neoo-home.neoo-product-page.business-os-page #main .os-proof .os-cockpit--screens :is(.os-events, .os-cockpit-next) { grid-column: 1 / -1; }
body.neoo-home.neoo-product-page.business-os-page #main .os-proof .os-cockpit--screens .os-events .os-panel { min-height: 0; }
body.business-os-page #main .os-cockpit--screens .os-event p:last-child { font-size: 15px; line-height: 1.6; }
body.business-os-page #main .os-teams .os-panel .rs-frame { margin: 30px 0 0; }
body.business-os-page #main .os-support-screen { align-self: center; }
body.business-os-page #main .rs-note { margin: 18px 0 0; color: var(--nf-text-3, #8b94b0); font-size: 13px; }

@media (max-width: 900px) {
  #main .rs-step { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}
@media (max-width: 767px) {
  #main .rs-frame { border-radius: 10px; }
  #main .rs-zoom { position: relative; left: auto; bottom: auto; width: min(var(--zw, 400px), 92%); margin: -22px 0 0 10px; border-radius: 10px; box-shadow: 0 0 0 4px rgba(106, 88, 255, .3), 0 18px 40px rgba(0, 0, 0, .5); }
  #main .rs-figure--zoom .rs-caption { margin-top: 12px; text-align: left; }
  body.starter10k-page #main .sx-cockpit--screens .sx-cockpit-work { padding: 18px; }
  body.business-os-page #main .os-cockpit--screens .os-events .os-panel { padding: 14px; }
}