/* ═══════════════════════════════════════════════════════════════════════════
   The two live embedded product screens in this deck:
     slide 4  /ecw-l2.html          eCW Office Visits + the price preview
     slide 5  /storefront-essen.html the Storefront, as this practice's own page

   This replaces the base deck's flat Skylight screenshot plus its .sko DOM
   overlay (skylight-overlay.css/.js), which are not loaded on this deck. The
   product being shown here is the browser extension, not the Skylight browser,
   so the visual is a live application window rather than a monitor render, and
   there is no POS device or payment-method row anywhere in it.

   Sizing: the base rule shapes .prod__visual as a height:0 / padding-top:76.65%
   box for the 2985x2288 Skylight PNG, which fixes height from width. That
   leaves a 16:9 screen far shorter than the row it sits in. Pure-CSS fixes all
   fail the same way: `aspect-ratio` with an explicit height is over-constrained
   (the height wins and the ratio is ignored), and with an explicit width the
   max-height clamp shortens the box without narrowing it — either way the
   embedded screen letterboxes itself inside a frame of the wrong shape.

   So the frame is laid out at its authored 1920x1080 and CSS-scaled to fit,
   with embeds.js measuring the column and setting both the scale and
   the stage's box. That guarantees the iframe's own viewport is exactly 16:9,
   so the screen inside it fills the frame edge to edge with no bands.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Give the frames more of the row than the base splits do — the copy columns
   are capped at 30ch and 28ch anyway, so the slack was dead space. */
.s-product .prod { grid-template-columns: 30% 70%; }
/* .prod is height:100% in the base, .store is not — so the storefront column
   had no height to fit into and the frame collapsed to its content size.
   Stretch the row and centre the copy inside it instead. */
.s-store .store { grid-template-columns: 32% 68%; height: 100%; align-items: stretch; }
.s-store .store__copy { align-self: center; }

/* width:100% + min-width:0 are load-bearing, not tidying. The stage's width is
   set by script from this box's measured width; as a plain auto-width flex item
   the box would then be pushed back out to the stage's width by min-width:auto,
   so once the frame was measured at a wide viewport it could never shrink again
   and it overflowed its column on a narrow one. Pinning the box to the column
   breaks that feedback loop. */
.prod__visual.ngs {
  height: 100%;
  width: 100%;
  min-width: 0;
  padding-top: 0;
  max-height: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* Box dimensions are set by embeds.js; everything else lives here. */
.ngs__stage {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  background: #22303A;
  box-shadow: 0 18px 44px rgba(0, 12, 30, .34), 0 2px 6px rgba(0, 12, 30, .22);
  opacity: 0;
  transition: opacity 1s ease .2s;
}
.s-product.in-view .ngs__stage { opacity: 1; }

.ngs__frame {
  position: absolute;
  top: 0;
  left: 0;
  border: 0;
  display: block;
  transform-origin: top left;
}

.ngs__cap {
  margin: 0;
  text-align: center;
  font-size: clamp(8px, .72vw, 10px);
  letter-spacing: .16em;
  color: rgba(255, 255, 255, .5);
  opacity: 0;
  transition: opacity .8s ease .8s;
}
.s-product.in-view .ngs__cap { opacity: 1; }

@media (max-width: 1100px) {
  /* Stacked layout: the row no longer has a height to fit into, so the script
     falls back to width-driven scaling. The max-width is the same cap the base
     deck applies to .prod__visual here — without it the visual jumps from ~66%
     of a two-column grid to 100% of a single stacked column, ballooning the
     frame for a few hundred px of viewport before shrinking again. */
  .prod__visual.ngs { height: auto; max-width: 560px; margin: 24px auto 0; }
}

@media (max-width: 700px) {
  .ngs__cap { font-size: 8px; letter-spacing: .12em; }
}

/* Below the product screen: the eligibility callout, then the eCW launch note.
   The wrapper carries data-embed-cap, so embeds.js takes its whole height out
   of the frame's budget the way it did the one-line caption it replaced. */
.ngs__below {
  margin: 0; display: flex; flex-direction: column; gap: clamp(8px, 1.1vh, 14px);
  opacity: 0; transition: opacity .8s ease .8s;
}
.s-product.in-view .ngs__below { opacity: 1; }
.ngs__note {
  border-left: 2px solid rgba(255, 255, 255, .45);
  padding-left: clamp(10px, .9vw, 16px);
}
.ngs__note-k {
  display: block; font-size: clamp(8px, .72vw, 10px); letter-spacing: .16em;
  color: rgba(255, 255, 255, .62); margin-bottom: 4px;
}
.ngs__note-b {
  margin: 0; font-size: clamp(11px, .92vw, 15px); line-height: 1.45;
  color: rgba(255, 255, 255, .92);
}
.ngs__note-b b { font-weight: 700; color: #fff; }
.ngs__launch {
  margin: 0; text-align: center;
  font-size: clamp(9px, .78vw, 12px); letter-spacing: .01em;
  color: rgba(255, 255, 255, .58);
}
@media (max-width: 700px) {
  .ngs__note-k { font-size: 8px; letter-spacing: .12em; }
}


/* ── slide 4: the Storefront ───────────────────────────────────────────────
   Same scaled-frame technique as slide 3, authored at 1200x990. The page is
   the shipped Storefront's own layout, so it carries no browser chrome of its
   own; the rounded card and shadow here stand in for the browser window.     */
.store__visual.sfs {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 100%;
}

.sfs__stage {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 22px 54px rgba(0, 18, 44, .30), 0 2px 6px rgba(0, 18, 44, .18);
  opacity: 0;
  transition: opacity 1s ease .2s;
  animation: none;
}
.s-store.in-view .sfs__stage { opacity: 1; }

.sfs__frame {
  position: absolute;
  top: 0;
  left: 0;
  border: 0;
  display: block;
  transform-origin: top left;
}

.sfs__cap {
  margin: 0;
  text-align: center;
  font-size: clamp(8px, .72vw, 10px);
  letter-spacing: .16em;
  color: rgba(255, 255, 255, .62);
  opacity: 0;
  transition: opacity .8s ease .8s;
}
.s-store.in-view .sfs__cap { opacity: 1; }

@media (max-width: 1100px) {
  .store__visual.sfs { height: auto; max-width: 560px; margin: 24px auto 0; }
}
@media (max-width: 700px) {
  .sfs__cap { font-size: 8px; letter-spacing: .12em; }
}