/* Outer hosting only. The private client stylesheet supplies the taller window. */
:root{
  --demo-client-width:1366px;
  --demo-window-shadow:0 3px 12px rgba(27,32,48,.17);
  --demo-gap-tint:rgba(27,32,48,.045);
}
html,body{margin:0;width:100%;background:transparent}
html.demo-standalone{background:var(--surface-page)}
#clients{display:flex;flex-direction:column;padding:var(--sp-4) 0;container:demo-clients / inline-size}
.demo-window-gap{flex:0 0 var(--sp-6);background:var(--demo-gap-tint)}
.client-scroll{width:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
.client-scroll iframe{display:block;width:var(--demo-client-width);height:866px;border:0;margin:0 auto}
.client-scroll iframe#mechanic{height:790px}
/* Shadow outside the iframe: 1366px window plus 16px of space on each side. */
@container demo-clients (min-width:1398px){
  .demo-window-gap{background:transparent}
  .client-scroll,.client-scroll iframe{position:relative}
  .client-scroll::before{
    content:'';position:absolute;pointer-events:none;
    inset-block:var(--sp-4) var(--sp-6);left:50%;transform:translateX(-50%);width:var(--demo-client-width);
    border-radius:var(--r-card);box-shadow:var(--demo-window-shadow)
  }
}
@media (max-width:1023.98px){
  #clients{padding:0}
  .client-scroll{overflow:hidden}
  .client-scroll iframe,.client-scroll iframe#mechanic{width:100%;height:var(--demo-mobile-height,100svh);margin:0}
}