/* ---------------------------------------------------------------- procedure explainers */
.ex-section { padding-top: 72px; padding-bottom: 24px; }
.ex-section + .article-grid { padding-top: 48px; }
.ex { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 28px; align-items: stretch; background: var(--surface); border: 1px solid var(--line); border-radius: 28px; padding: 24px; box-shadow: var(--shadow); }
.ex-stage { margin: 0; display: flex; flex-direction: column; justify-content: center; background: linear-gradient(180deg, #fbf9f4 0%, #f2ede3 100%); border-radius: 20px; padding: 18px 18px 12px; }
.ex-stage svg { width: 100%; height: auto; display: block; overflow: hidden; border-radius: 12px; }
.ex-stage figcaption { margin-top: 8px; font-size: .78rem; color: var(--ink-3); text-align: center; letter-spacing: .02em; }

/* anatomy */
.ex-skin { fill: #f3e2d6; opacity: .6; }
.ex-body, .ex-post { fill: url(#exBone); stroke: #d6c9b1; stroke-width: 1.5; }
.ex-disc { fill: url(#exDisc); stroke: #b7cfd3; stroke-width: 1.2; }
.ex-nucleus { fill: #fff; opacity: .55; }
.ex-sac { fill: #fbf4df; stroke: #ead6a1; stroke-width: 1.5; }
.ex-fiber { stroke: #e7c46d; stroke-width: 2.6; stroke-linecap: round; }
.ex-lig { fill: #f0c06a; stroke: #d9a246; stroke-width: 1.2; transform-box: fill-box; transform-origin: 100% 50%; transition: transform 1.8s cubic-bezier(.4, 0, .2, 1); }
.ex-labels text { font: 500 11px var(--sans); fill: #9b8f78; text-anchor: middle; letter-spacing: .02em; }
.ex-labels .ex-lab-dir { font-size: 10px; fill: #b3a891; letter-spacing: .08em; text-transform: uppercase; }
.ex-tag text { font: 700 12.5px var(--sans); fill: var(--teal-ink); paint-order: stroke; stroke: #fbf9f4; stroke-width: 5px; stroke-linejoin: round; }

/* step-driven visibility and draw-in */
.ex [data-show] { opacity: 0; transition: opacity .7s ease; }
.ex[data-step="0"] [data-show~="0"], .ex[data-step="1"] [data-show~="1"],
.ex[data-step="2"] [data-show~="2"], .ex[data-step="3"] [data-show~="3"] { opacity: 1; }
.ex [data-draw] { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.5s cubic-bezier(.4, 0, .2, 1); }
.ex[data-step="0"] [data-draw~="0"], .ex[data-step="1"] [data-draw~="1"],
.ex[data-step="2"] [data-draw~="2"], .ex[data-step="3"] [data-draw~="3"] { stroke-dashoffset: 0; }
.ex-needle { fill: none; stroke: #61717a; stroke-width: 3; stroke-linecap: round; }
.ex-lead { fill: none; stroke: var(--teal); stroke-width: 5; stroke-linecap: round; }
.ex-wire { fill: none; stroke: var(--teal-2); stroke-width: 2.5; stroke-linecap: round; }
.ex-device { fill: var(--teal); }

/* glows */
.ex-glow-hot { fill: url(#exHot); transform-box: fill-box; transform-origin: center; animation: exBreathe 1.6s ease-in-out infinite alternate; }
.ex-glow-calm { fill: url(#exCalm); }
@keyframes exBreathe { from { transform: scale(.82); } to { transform: scale(1.08); } }

/* spinal cord stimulation */
.ex-signal circle { fill: #e2553a; animation: exUp 2.2s linear infinite; }
.ex-signal-blocked circle { animation-name: exUpBlocked; animation-duration: 1.6s; }
@keyframes exUp { 0% { transform: translateY(0); opacity: 0; } 10%, 85% { opacity: 1; } 100% { transform: translateY(-440px); opacity: 0; } }
@keyframes exUpBlocked { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 70% { opacity: .9; } 100% { transform: translateY(-148px); opacity: 0; } }
.ex-pulse, .ex-heat { fill: none; stroke: var(--teal-2); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: exPulse 1.4s ease-out infinite; }
.ex-heat { stroke: #f08a3a; stroke-width: 2.5; }
@keyframes exPulse { from { transform: scale(.5); opacity: 1; } to { transform: scale(3); opacity: 0; } }

/* MILD and Superion: the middle ligament thickens with stenosis */
.ex-mild-procedure .ex-lig-1, .ex-vertiflex-superion .ex-lig-1 { transform: scaleX(2.4); }
.ex-mild-procedure[data-step="2"] .ex-lig-1 { transform: scaleX(1.6); }
.ex-mild-procedure[data-step="3"] .ex-lig-1 { transform: scaleX(1); }
.ex-vertiflex-superion[data-step="2"] .ex-lig-1, .ex-vertiflex-superion[data-step="3"] .ex-lig-1 { transform: scaleX(1.35); }
.ex-frag { fill: #f0c06a; stroke: #d9a246; animation: exOut 1.5s ease-in infinite; }
@keyframes exOut { from { transform: translate(0, 0); opacity: 1; } to { transform: translate(150px, 38px); opacity: 0; } }
.ex-spacer { transform: translateX(200px); opacity: 0; transition: transform 1.5s cubic-bezier(.2, .8, .2, 1), opacity .5s; }
.ex-vertiflex-superion:not([data-step="0"]) .ex-spacer { transform: none; opacity: 1; }
.ex-spacer-core { fill: var(--teal); }
.ex-wing { fill: var(--teal-ink); transform-box: fill-box; transform-origin: center; transform: scaleY(.35); transition: transform .9s .2s ease; }
.ex-vertiflex-superion[data-step="2"] .ex-wing, .ex-vertiflex-superion[data-step="3"] .ex-wing { transform: none; }
.ex-squeeze path, .ex-open path { fill: none; stroke: #e2553a; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.ex-open path { stroke: var(--teal-2); }

/* radiofrequency ablation */
.ex-facet { fill: #e8dcc5; stroke: #c4ad86; stroke-width: 1.5; }
.ex-branch { fill: none; stroke: #e2b552; stroke-width: 3; stroke-linecap: round; }
.ex-branch-off { fill: none; stroke: #ece3d1; stroke-width: 7; stroke-linecap: round; }
.ex-nerve-sig { fill: #e2553a; offset-path: path("M312 128 C298 146 282 154 256 154"); offset-rotate: 0deg; animation: exAlong 1.8s linear infinite; }
@keyframes exAlong { from { offset-distance: 0%; opacity: 0; } 15% { opacity: 1; } to { offset-distance: 100%; opacity: 0; } }
.ex-block { fill: url(#exMed); }

/* epidural injection */
.ex-herniation { fill: url(#exDisc); stroke: #b7cfd3; stroke-width: 1.2; }
.ex-med { fill: url(#exMed); transform-box: fill-box; transform-origin: center; transform: scale(0); opacity: 0; transition: transform 1.8s ease, opacity .8s; }
.ex-interventional-injections[data-step="2"] .ex-med { transform: scale(1); opacity: 1; }
.ex-interventional-injections[data-step="3"] .ex-med { transform: scale(1.1); opacity: .45; }

/* step list */
.ex-panel { display: flex; flex-direction: column; min-width: 0; }
.ex-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ex-steps button { position: relative; width: 100%; display: grid; grid-template-columns: 32px 1fr; gap: 14px; align-items: start; text-align: left; padding: 14px 16px 16px; border: 1px solid transparent; border-radius: 16px; background: none; font: inherit; color: var(--ink); cursor: pointer; overflow: hidden; transition: background .25s, border-color .25s; }
.ex-steps button:hover { background: var(--bg); }
.ex-steps button[aria-current] { background: var(--teal-soft); border-color: #cfe2df; }
.ex-n { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .88rem; border: 1.5px solid var(--line); color: var(--ink-3); background: var(--surface); transition: all .25s; }
.ex-steps button[aria-current] .ex-n { background: var(--teal); border-color: var(--teal); color: #fff; }
.ex-txt { display: grid; grid-template-rows: auto 0fr; transition: grid-template-rows .35s ease; min-width: 0; }
.ex-txt b { font-weight: 600; font-size: 1rem; line-height: 1.35; padding-top: 5px; }
.ex-txt > span { overflow: hidden; color: var(--ink-2); font-size: .93rem; line-height: 1.5; }
.ex-steps button[aria-current] .ex-txt { grid-template-rows: auto 1fr; }
.ex-steps button[aria-current] .ex-txt > span { padding-top: 6px; }
.ex-bar { position: absolute; left: 16px; right: 16px; bottom: 7px; height: 3px; border-radius: 3px; background: rgba(12, 92, 99, .12); opacity: 0; }
.ex-steps button[aria-current] .ex-bar { opacity: 1; }
.ex-bar > span { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--teal); }
.ex-steps button.run .ex-bar > span { animation: exProg var(--ex-dur, 5s) linear forwards; }
.ex.ex-hold .ex-bar > span, .ex.ex-paused .ex-bar > span { animation-play-state: paused; }
@keyframes exProg { from { width: 0; } to { width: 100%; } }
.ex-ctrl { display: flex; align-items: center; gap: 12px; margin-top: auto; padding: 16px 16px 4px; }
.ex-play { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--surface); color: var(--teal); display: grid; place-items: center; cursor: pointer; }
.ex-play:hover { border-color: var(--teal); }
.ex-play svg { width: 16px; height: 16px; }
.ex-play .i-play { display: none; }
.ex.ex-paused .ex-play .i-play { display: block; }
.ex.ex-paused .ex-play .i-pause { display: none; }
.ex-status { font-size: .85rem; color: var(--ink-3); }

@media (max-width: 960px) {
  .ex { grid-template-columns: 1fr; padding: 16px; gap: 16px; border-radius: 22px; }
  .ex-stage { padding: 10px 10px 8px; }
}
@media (max-width: 600px) {
  .ex { padding: 10px; border-radius: 18px; }
  .ex-stage { padding: 6px 6px 8px; border-radius: 14px; }
  .ex-labels text { font-size: 17px; }
  .ex-labels .ex-lab-dir { font-size: 15px; }
  .ex-tag text { font-size: 20px; stroke-width: 7px; }
  .ex-steps button { padding: 12px 10px 14px; gap: 10px; }
  .ex-ctrl { padding: 12px 10px 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .ex-signal circle, .ex-pulse, .ex-heat, .ex-frag, .ex-nerve-sig, .ex-glow-hot { animation: none; }
  .ex-signal circle { transform: translateY(-200px); }
  .ex-nerve-sig { offset-distance: 50%; }
}