/* SAP Logistics Management page: the "SaaS from SAP" label and the sandbox demo (hero card + dialog player). */
.saas-pill { display: inline-flex; align-items: center; margin-left: 14px; padding: 4px 10px; vertical-align: middle;
             border: 1px solid rgba(179,210,48,.55); border-radius: 999px; background: rgba(179,210,48,.08);
             font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--lime); }

.demo-card { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 16px; align-items: center; max-width: 460px; margin-top: 22px;
             padding: 10px 16px 10px 10px; border: 1px solid var(--line); border-radius: 12px; background: rgba(10,14,10,.55);
             color: inherit; text-decoration: none; transition: border-color .2s, background .2s; }
.demo-card:hover, .demo-card:focus-visible { border-color: rgba(179,210,48,.55); background: rgba(179,210,48,.06); }
.demo-card:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
.demo-thumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #0b0f0b; }
.demo-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.demo-play { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(5,8,5,.38); }
.demo-play svg { width: 34px; height: 34px; padding: 10px 9px 10px 11px; border-radius: 50%; background: var(--lime); color: #0d1600; }
.demo-txt { display: grid; gap: 4px; }
.demo-k { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--lime); }
.demo-t { font-size: 15px; font-weight: 600; line-height: 1.35; }
.demo-d { font-size: 12.5px; line-height: 1.45; color: var(--text-dim); }

/* margin:auto restores the browser's own centring of a modal dialog, which the site's reset (margin:0 on everything) removes */
.demo-dialog { width: min(1100px, 94vw); max-width: none; max-height: 94vh; margin: auto; padding: 0; border: 1px solid var(--line); border-radius: 14px;
               background: #0b0f0b; color: inherit; overflow: auto; }
.demo-dialog::backdrop { background: rgba(3,5,3,.82); backdrop-filter: blur(4px); }
.demo-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px 12px 20px; border-bottom: 1px solid var(--line); }
.demo-dialog-head p { margin: 0; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--lime); }
.demo-close { width: 36px; height: 36px; flex: none; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: inherit;
              font-size: 20px; line-height: 1; cursor: pointer; }
.demo-close:hover, .demo-close:focus-visible { border-color: var(--lime); color: var(--lime); }
.demo-dialog video { display: block; width: 100%; height: auto; max-height: 76vh; aspect-ratio: 1138 / 640; background: #000; }
.demo-note { margin: 0; padding: 12px 20px 16px; font-size: 13px; line-height: 1.55; color: var(--text-dim); }

@media (max-width: 620px) {
  .saas-pill { display: flex; width: max-content; margin: 10px 0 0; }   /* own line, never flush against the eyebrow */
  .demo-card { grid-template-columns: 112px minmax(0, 1fr); gap: 12px; }
  .demo-t { font-size: 14px; }
  .demo-dialog { width: 100vw; border-radius: 0; border-left: 0; border-right: 0; }
}