.visual-cases { padding:38px 0; border-bottom:1px solid #dce7ed; }
.visual-cases__intro { max-width:760px; color:#607682; line-height:1.7; }
.visual-cases__notice { color:#73858d; font-size:.82rem; line-height:1.6; }
.visual-cases__grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;margin-top:28px; }
.visual-case { min-width:0; }
.visual-case h3 { margin:18px 0 10px; font-size:1.4rem; }
.visual-case p { line-height:1.65;color:#607682;font-size:.95rem; }
.case-compare { position:relative;aspect-ratio:3/4;max-height:420px;background:#e8eff4;overflow:hidden;border-radius:6px; }
.case-layer { position:absolute;inset:0;background-image:var(--case-image);background-size:200% 100%;background-repeat:no-repeat; }
.case-layer--before { background-position:left center; }
.case-layer--after { background-position:right center;clip-path:inset(0 0 0 var(--split,50%)); }
.case-line { position:absolute;top:0;bottom:0;left:var(--split,50%);width:2px;background:white;pointer-events:none; }
.case-line:after { content:'↔';position:absolute;top:48%;left:-19px;width:40px;height:40px;background:#fff;border-radius:50%;display:grid;place-items:center;color:#246c83;box-shadow:0 2px 12px #203d4830; }
.case-labels { position:absolute;inset:12px 12px auto;display:flex;justify-content:space-between;pointer-events:none; }
.case-labels span { background:#fffffff0;color:#345564;padding:6px 10px;font-size:.75rem;border-radius:4px; }
.case-range { position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0; }
.case-compare:focus-within { outline:3px solid #24738d;outline-offset:3px; }
.case-tools { display:flex;justify-content:space-between;gap:12px;margin-top:10px;font-size:.8rem;color:#667982; }
.case-tools a,.case-book { color:#246c83;text-underline-offset:4px; }
.case-dialog { max-width:1100px;width:calc(100% - 32px);border:0;border-radius:8px;padding:20px; }
.case-dialog::backdrop { background:#142e3bd9; }
.case-dialog img { width:100%;height:auto;max-height:75vh;object-fit:contain; }
.case-dialog button { padding:10px 16px;float:right;cursor:pointer; }
.case-dialog p { clear:both;color:#536d78; }
@media(max-width:700px){.visual-cases__grid{grid-template-columns:1fr;gap:30px}.case-compare{max-height:none}.visual-cases{padding:26px 0}}

/* Full frames prevent mismatched anatomy at an overlay seam. */
.case-pair{position:relative;overflow:hidden;border-radius:8px;background:#f0ece8;}
.case-pair>img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;}
.case-pair .case-labels{inset:12px 12px auto;}
.visual-cases__grid{gap:36px 28px;}
.case-tools{align-items:center;flex-wrap:wrap;}
.doctor-scenario-card:has(>h3:first-child){padding:22px;}
.visual-cases .case-pair{display:block;margin:0;} @media(max-width:850px){.visual-cases__grid{grid-template-columns:1fr;}}