/* Reviewed service and course copy paired with native, subject-specific drawings. */
body.visual-refresh.detail-scene-page .detail-scope--illustrated {
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.9fr); gap:clamp(28px,5vw,72px); align-items:center;
  margin-bottom:48px; padding-bottom:48px;
}
.detail-scope-copy { min-width:0; }
.detail-scope-copy h2 { max-width:17em; margin:0 0 22px; }
body.visual-refresh.detail-scene-page .detail-scope-copy p { margin-top:22px; }
.detail-scope-visual { min-width:0; width:100%; max-width:470px; margin:0; overflow:hidden; border:1px solid #ccdaeb; border-radius:20px; background:#eaf1fb; box-shadow:0 18px 50px -35px #21436c70; }
.detail-scope-visual img { display:block; width:100%; height:auto; aspect-ratio:600 / 460; }
.detail-item-drawing { display:block; width:104px; height:72px; color:#386a9c; }
body.visual-refresh.detail-scene-page .detail-deliverable small { display:flex; flex-direction:column; align-items:start; gap:10px; font-size:.8rem; line-height:1.4; }
body.visual-refresh.detail-scene-page .detail-deliverables.visual-tab-panels > [data-visual-panel] { grid-template-columns:116px minmax(0,.8fr) minmax(0,1.2fr); gap:28px; min-height:210px; }
body.visual-refresh.detail-scene-page .detail-deliverables.visual-tab-panels > [data-visual-panel] small { font-size:.8rem; }
.detail-step-drawing { display:block; width:76px; height:54px; margin:0 0 19px auto; color:#3f7293; }
.detail-step-drawing svg { width:100%; height:100%; }
body.visual-refresh.detail-scene-page .detail-steps li::before { position:absolute; top:35px; left:28px; }

.ocd-course-page .ocd-output-grid > article { padding:0 28px 30px; }
.course-output-visual { position:relative; overflow:hidden; min-width:0; margin:0 -28px 25px; padding:12px 18px 5px; color:#557599; border-bottom:1px solid #ffffff16; background:linear-gradient(145deg,#e8eff8,#dfeae8); }
.course-output-visual::before { content:''; position:absolute; width:160px; height:160px; top:-72px; right:-15px; border:1px solid #6487ac20; border-radius:50%; box-shadow:0 0 0 25px #6487ac08; }
.course-topic-drawing { position:relative; display:block; width:100%; max-width:320px; height:auto; margin:auto; }
.ocd-course-page .ocd-output-grid .ocd-output-number { margin-bottom:14px; font-size:18px; font-weight:650; }
.ocd-course-page .ocd-output-grid > article::after { display:none; }
.course-curriculum-visual { max-width:280px; margin:24px 0; padding:5px 8px; color:var(--ocd-accent,#315784); border:1px solid #c6d7e759; border-radius:16px; background:linear-gradient(135deg,#f4f7fc,#e7edf6); }
.ocd-course-page--spreadsheet .course-output-visual,.ocd-course-page--evaluation .course-output-visual { color:#527b6a; background:linear-gradient(145deg,#e6f1e9,#d5e8e3); }
.ocd-course-page--workflow .course-output-visual,.ocd-course-page--mcp .course-output-visual { color:#696293; background:linear-gradient(145deg,#e8e6f4,#dce3f3); }
.ocd-course-page--studio .course-output-visual { color:#8f6282; background:linear-gradient(145deg,#f3e7e8,#e4dcee); }
.ocd-course-page--field .course-output-visual { color:#597c87; background:linear-gradient(145deg,#e3edf0,#d9e8df); }
.ocd-course-page--deployment .course-output-visual { color:#4d7180; background:linear-gradient(145deg,#dcebed,#e1e7f1); }

@media(hover:hover) and (prefers-reduced-motion:no-preference) {
  .detail-scope-visual img,.course-topic-drawing,.detail-item-drawing { transition:transform .4s cubic-bezier(.2,.7,.2,1); }
  .detail-scope-visual:hover img { transform:scale(1.025); }
  .ocd-output-grid > article:hover .course-topic-drawing { transform:translateY(-4px); }
  .detail-deliverable:hover .detail-item-drawing { transform:translateY(-3px); }
}
@media(max-width:800px) {
  body.visual-refresh.detail-scene-page .detail-scope--illustrated { grid-template-columns:1fr; gap:26px; margin-bottom:32px; padding-bottom:32px; }
  .detail-scope-visual { max-width:580px; margin-inline:auto; }
  body.visual-refresh.detail-scene-page .detail-deliverables.visual-tab-panels > [data-visual-panel] { display:block; min-height:0; }
  body.visual-refresh.detail-scene-page .detail-deliverable small { flex-direction:row; align-items:center; gap:20px; margin-bottom:18px; }
  .detail-item-drawing { width:80px; height:56px; }
  body.visual-refresh.detail-scene-page .detail-steps li::before { left:0; top:25px; }
  .detail-step-drawing { width:62px; height:44px; margin-bottom:12px; }
}
@media(max-width:600px) {
  .ocd-course-page .ocd-output-grid > article { padding:0 24px 26px; }
  .course-output-visual { margin-inline:-24px; padding:12px 30px 6px; }
  .course-output-visual .course-topic-drawing { max-width:260px; }
  .course-curriculum-visual { max-width:260px; margin:20px 0; }
  .detail-scope-visual { border-radius:14px; }
}
@media(prefers-reduced-motion:reduce) {
  .detail-scope-visual img,.course-topic-drawing,.detail-item-drawing { transition:none; transform:none; }
}