/* Interactive media belongs only to the first Services card. */
#digital-products {
  --product-on-blue: #fff;
  --product-on-blue-muted: #f2f3ff;
  --product-divider: rgba(242, 243, 255, .3);
  --product-hover: rgba(255, 255, 255, .04);
}
#digital-products > .sps-visual { container-type: inline-size; }
#digital-products .product-demo {
  position: absolute; inset: 0; display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(220px, .8fr);
  gap: 28px; padding: 28px;
  background: #111518;
  color: #171719;
}
.product-demo-scenarios { display: flex; flex-direction: column; align-self: center; min-width: 0; color: var(--product-on-blue, #171719); }
.product-demo-scenarios h4 { margin: 0; font: 600 26px/1.15 'Inter', sans-serif; letter-spacing: -.02em; }
.product-demo-intro { margin: 12px 0 24px; font: 400 15px/22px 'Inter', sans-serif; color: var(--product-on-blue-muted, #424849); }
.product-demo-scenario-list { display: flex; flex-direction: column; }
/* These are scenario tiles, not CTA buttons: the explanatory text wraps. */
.product-demo-scenario { position: relative; display: flex; flex-direction: column; gap: 7px; min-width: 0; min-height: 80px; padding: 18px 4px 18px 16px; border: 0; border-bottom: 1px solid var(--product-divider, #b8c0be); background: transparent; color: var(--product-on-blue, #171719); text-align: left; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.product-demo-scenario strong { font: 500 17px/23px 'Inter', sans-serif; }
.product-demo-scenario span { font: 400 14px/21px 'Inter', sans-serif; color: var(--product-on-blue-muted, #424849); }
.product-demo-scenario::before { content: ''; position: absolute; top: 26px; left: 2px; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0; }
.product-demo-scenario[aria-pressed="true"]::before { opacity: 1; }
.product-demo-scenario:hover { background: var(--product-hover, rgba(255,255,255,.28)); }
.product-demo-scenario:focus-visible { outline: 2px solid var(--product-on-blue, #171719); outline-offset: 3px; }
#digital-products .product-demo-reset { width: 100%; height: 44px; min-height: 44px; max-height: 44px; margin-top: 24px; padding-inline: 12px; font-size: 13px; }
.product-demo-stage { position: relative; min-height: 0; min-width: 0; }
/* Alexa: silver cut planes sit behind the phone only. The scenarios keep a
   uniform dark field and the original device frame stays black. */
.product-demo-stage::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: url('/assets/studio-editorial-20261019-v3/product-dark-metal-v3.jpg') center / cover no-repeat;
  /* Blend away the photograph's dark plate, then feather every image edge. */
  mix-blend-mode: lighten;
  mask-image:
    linear-gradient(to right, transparent, #000 16px, #000 calc(100% - 40px), transparent),
    linear-gradient(to bottom, transparent, #000 24px, #000 calc(100% - 32px), transparent);
  mask-composite: intersect;
}
.product-demo-phone {
  position: absolute; left: 50%; top: 50%; width: 417px; height: 876px; padding: 12px;
  border-radius: 62px; background: #0b0b0c;
  box-shadow: 0 0 0 2px #2b2b2f, 0 0 0 3px #4a4a50, 0 0 0 5px #2b2b2f, 0 24px 48px rgba(20, 20, 30, .2);
  transform: translate(-50%, -50%) scale(var(--demo-scale, .7)); transform-origin: center;
}
/* Alexa, 19.10.2026: the phone's left offset is 32% smaller than when centred
   in its column; the scenarios get the same offset on the right, stand 56px
   from the phone and take the freed width. Framed side-by-side layout only. */
@media (min-width: 720px) {
  @container (min-width: 620.02px) {
    #digital-products .product-demo {
      --demo-pair-gap: 56px;
      --demo-side-keep: .68;
      --demo-col-w: var(--demo-stage-w, min(.6 * (100cqw - 84px), 100cqw - 304px));
      --demo-phone-w: calc(417px * var(--demo-scale, .7));
      --demo-side: max(28px, (28px + (var(--demo-col-w) - var(--demo-phone-w)) / 2) * var(--demo-side-keep));
    }
    .product-demo-phone { left: calc(var(--demo-side) - 28px + var(--demo-phone-w) / 2); }
    /* The scenario column intentionally overlaps the original grid track.
       Bound artwork to the actual phone plus half of its 56px clear gap. */
    .product-demo-stage::before { width: calc(var(--demo-side) + var(--demo-phone-w)); }
    .product-demo-scenarios {
      margin-left: calc(var(--demo-side) + var(--demo-phone-w) + var(--demo-pair-gap) - var(--demo-col-w) - 56px);
      margin-right: calc(var(--demo-side) - 28px);
    }
  }
}
.product-demo-screen { --demo-screen-radius: 50px; position: relative; width: 393px; height: 852px; overflow: hidden; isolation: isolate; contain: paint; transform: translateZ(0); border-radius: var(--demo-screen-radius); clip-path: inset(0 round var(--demo-screen-radius)); background: #fff; }
/* Keep the iframe's fixed, filtered tab bar inside the rounded compositor layer. */
.product-demo-screen { -webkit-mask-image: -webkit-radial-gradient(white, black); }
.product-demo-status { position: absolute; inset: 0 0 auto; z-index: 2; height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 6px 28px 0 36px; color: #171719; background: #f2f3f7; font: 600 16px/1 system-ui, sans-serif; pointer-events: none; }
.product-demo-status svg { width: 62px; height: 14px; }
.product-demo-island { position: absolute; top: 11px; left: 50%; z-index: 3; width: 124px; height: 32px; border-radius: 20px; background: #000; transform: translateX(-50%); pointer-events: none; }
.product-demo iframe { position: absolute; top: 54px; left: 0; width: 100%; height: calc(100% - 54px); border: 0; border-radius: 0 0 var(--demo-screen-radius) var(--demo-screen-radius); clip-path: inset(0 round 0 0 var(--demo-screen-radius) var(--demo-screen-radius)); background: #fff; }
.product-demo iframe:focus-visible { outline: 3px solid #4259ac; outline-offset: -3px; }
.product-demo-home { position: absolute; z-index: 3; bottom: 7px; left: 50%; width: 134px; height: 5px; border-radius: 3px; background: #171719; transform: translateX(-50%); pointer-events: none; }
.product-demo-note { margin: 16px 0 0; font: 400 12px/18px 'Inter', sans-serif; color: var(--product-on-blue-muted, #424849); }
.product-demo-message { position: absolute; inset: 54px 0 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 30px; background: #f2f3f7; text-align: center; font: 400 18px/26px 'Inter', sans-serif; }
.product-demo-message[hidden], .product-demo [hidden] { display: none; }
.product-demo-message p { margin: 0; }
.product-demo-message .lab-btn { width: 100%; }
@media (max-width: 1439.98px) and (min-width: 1025px) {
  #digital-products > .sps-visual { min-height: 900px; }
}
@media (max-width: 1024px), (orientation: portrait) {
  #digital-products > .sps-visual { aspect-ratio: auto; height: 740px; min-height: 0; }
}
@media (max-width: 719.98px) {
  #digital-products > .sps-visual { height: 860px; }
  #digital-products .product-demo { padding: 12px 8px; gap: 12px; }
  .product-demo-phone { inset: 0; width: 100%; height: 100%; padding: 0; border-radius: 14px; box-shadow: none; transform: none; }
  .product-demo-screen { --demo-screen-radius: 14px; width: 100%; height: 100%; }
  .product-demo-status, .product-demo-island, .product-demo-home { display: none; }
  .product-demo iframe { top: 0; height: 100%; }
  .product-demo-message { inset: 0; font-size: 16px; }
  .product-demo-note { font-size: 12px; line-height: 16px; }
}
@container (max-width: 620px) {
  #digital-products .product-demo { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 16px; padding: 20px; }
  .product-demo-scenarios { align-self: stretch; }
  .product-demo-scenarios h4 { font-size: 18px; line-height: 24px; margin-bottom: 4px; }
  .product-demo-intro, .product-demo-scenario span { display: none; }
  .product-demo-scenario { min-height: 44px; padding: 12px 4px 12px 16px; }
  .product-demo-scenario strong { font-size: 15px; line-height: 20px; }
  .product-demo-scenario::before { top: 19px; }
  #digital-products .product-demo-reset { margin-top: 12px; }
  .product-demo-note { margin-top: 12px; }
}
@media (max-width: 719.98px) { #digital-products .product-demo { padding: 12px 8px; } }
@media (forced-colors: active) { .product-demo-phone { outline: 1px solid CanvasText; } }