/* OPSDECK R7.3.0 — scoped showcase, does not alter other product pages */
body[data-product="opsdeck"] .opsdeck-showcase { padding: 28px 0 48px !important; }
body[data-product="opsdeck"] .opsdeck-showcase .container { width: min(1280px, calc(100% - 40px)); max-width: 1280px; margin-inline: auto; }
body[data-product="opsdeck"] .opsdeck-showcase-intro { margin: 0 auto 36px; text-align: center; }
body[data-product="opsdeck"] .opsdeck-showcase-intro h2 { max-width: 830px; margin-inline: auto; line-height: 1.2; }
body[data-product="opsdeck"] .opsdeck-showcase-intro p { max-width: 750px; margin: 14px auto 0; line-height: 1.7; color: #c7d8e6; }
body[data-product="opsdeck"] .opsdeck-showcase-overview,
body[data-product="opsdeck"] .opsdeck-showcase-detail {
  background: linear-gradient(130deg, rgba(10,38,55,.83), rgba(11,44,60,.70));
  border: 1px solid rgba(128,209,230,.23); border-radius: 20px;
  padding: clamp(18px, 2.5vw, 30px); margin-bottom: 22px;
  box-shadow: 0 12px 32px rgba(0,0,0,.12);
}
body[data-product="opsdeck"] .opsdeck-showcase-overview { display: grid; gap: 22px; }
body[data-product="opsdeck"] .opsdeck-showcase-overview .opsdeck-showcase-copy { max-width: 910px; }
body[data-product="opsdeck"] .opsdeck-showcase-detail { display: grid; grid-template-columns: minmax(230px, .72fr) minmax(0, 1.5fr); gap: clamp(20px, 3vw, 36px); align-items: center; }
body[data-product="opsdeck"] .opsdeck-showcase-reverse { grid-template-columns: minmax(0, 1.5fr) minmax(230px, .72fr); }
body[data-product="opsdeck"] .opsdeck-showcase-reverse .opsdeck-showcase-copy { order: 2; }
body[data-product="opsdeck"] .opsdeck-showcase-reverse .opsdeck-shot { order: 1; }
body[data-product="opsdeck"] .opsdeck-showcase-copy { min-width:0; text-align:left; }
body[data-product="opsdeck"] .opsdeck-showcase-kicker { display:block; margin-bottom:13px; font-size:.74rem; font-weight:750; letter-spacing:.115em; color:#72e0d0; text-transform:uppercase; }
body[data-product="opsdeck"] .opsdeck-showcase-copy h3 { margin:0 0 13px; color:#f4fbff; font-size:clamp(1.2rem, 2vw, 1.65rem); line-height:1.35; }
body[data-product="opsdeck"] .opsdeck-showcase-copy p { margin:0; font-size:clamp(.92rem,1.12vw,1rem); line-height:1.75; color:#c6d8e5; }
body[data-product="opsdeck"] .opsdeck-shot { display:block; position:relative; min-width:0; overflow:hidden; border-radius:13px; border:1px solid rgba(175,205,225,.2); background:#1b1e22; box-shadow:0 12px 24px rgba(0,0,0,.24); }
body[data-product="opsdeck"] .opsdeck-shot img { display:block; width:100%; height:auto; object-fit:contain; }
body[data-product="opsdeck"] .opsdeck-shot:focus-visible { outline:3px solid #65dcff; outline-offset:3px; }
body[data-product="opsdeck"] .opsdeck-zoom-hint { position:absolute; right:12px; bottom:10px; padding:7px 11px; border-radius:9px; background:rgba(6,20,33,.86); color:#e7f8ff; font-size:.72rem; font-weight:650; border:1px solid rgba(150,210,235,.36); }
body[data-product="opsdeck"] .opsdeck-showcase-note { text-align:center; font-size:.82rem; color:rgba(209,226,237,.72); line-height:1.6; margin:23px auto 0; }
@media (max-width: 850px) {
 body[data-product="opsdeck"] .opsdeck-showcase-detail,
 body[data-product="opsdeck"] .opsdeck-showcase-reverse { grid-template-columns: minmax(0,1fr); }
 body[data-product="opsdeck"] .opsdeck-showcase-reverse .opsdeck-showcase-copy,
 body[data-product="opsdeck"] .opsdeck-showcase-reverse .opsdeck-shot { order:initial; }
 body[data-product="opsdeck"] .opsdeck-showcase .container { width:calc(100% - 28px); }
}
@media (max-width: 480px) { body[data-product="opsdeck"] .opsdeck-zoom-hint { font-size:.65rem; padding:5px 7px; } }


/* R7.3.4 — OpsDeck architecture uses the same full-width image + Zoom Image
   presentation as the operational screenshot showcase. Changes are scoped
   to OpsDeck only; other product architecture sections are untouched. */
body[data-product="opsdeck"] .architecture-section > .container {
  width: min(1280px, calc(100% - 40px));
  max-width: 1280px;
  margin-inline: auto;
}
body[data-product="opsdeck"] .architecture-section .arch-container {
  width: 100%;
  padding: 0 !important;
  margin: 0 auto !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: visible !important;
}
body[data-product="opsdeck"] .architecture-section .arch-container::before,
body[data-product="opsdeck"] .architecture-section .opsdeck-architecture-media::before {
  display: none !important;
  content: none !important;
}
body[data-product="opsdeck"] .architecture-section .opsdeck-architecture-media {
  display: block !important;
  width: 100% !important;
  margin: 32px auto 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}
body[data-product="opsdeck"] .architecture-section .opsdeck-architecture-shot {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  overflow: hidden !important;
}
body[data-product="opsdeck"] .architecture-section .opsdeck-architecture-shot img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  max-height: none !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  filter: none !important;
  object-fit: contain !important;
}
body[data-product="opsdeck"] .architecture-section .opsdeck-architecture-shot .opsdeck-zoom-hint {
  right: 14px;
  bottom: 14px;
  z-index: 1;
}
@media(max-width: 850px) {
  body[data-product="opsdeck"] .architecture-section > .container {
    width: calc(100% - 28px);
  }
}