/* Quiet, distinct clinical diagrams; one visual idea per treatment. */
.treatment.section{gap:0;background:#eee7f0;align-items:stretch}
.treatment-content{padding:clamp(30px,4vw,68px);align-self:center}
.treatment-content h2{font-size:clamp(35px,3.5vw,60px)}
.treatment-tabs{margin-block:32px 24px}
.treatment-panels{min-height:0}
.treatment-visual.procedure-study{display:flex;flex-direction:column;min-height:600px;background:radial-gradient(ellipse at 55% 46%,#fbf8f4 0%,#f1eaf1 78%);color:#49364b;isolation:isolate}
.procedure-header{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:36px 36px 0}
.procedure-index{display:block;font-size:10px;letter-spacing:.12em;color:#968797;margin-bottom:12px;font-variant-numeric:tabular-nums}
.procedure-header .visual-state{font-weight:400;font-style:normal;letter-spacing:-.035em;font-size:25px;line-height:1.2}
.procedure-toggle{align-self:flex-start;display:flex;align-items:center;gap:7px;background:transparent;color:#79697c;min-height:44px;font-size:11px;padding:0}
.procedure-toggle svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.3}
.procedure-toggle .procedure-play{display:none}
.procedure-study[data-playing=false] .procedure-play{display:block}.procedure-study[data-playing=false] .procedure-pause{display:none}
.procedure-art{flex:1;display:grid;align-items:center;padding:10px 8px;min-height:360px}
.procedure-diagram{width:100%;height:auto;max-height:470px;overflow:visible;stroke:none;stroke-width:0;fill:none}
.procedure-diagram[hidden]{display:none}
.procedure-diagram text{stroke:none;fill:#7b667d;font-size:13px;font-weight:400;letter-spacing:.015em}
.procedure-diagram .diagram-leader{fill:none;stroke:#a691a6;stroke-width:.8}
.procedure-footer{margin:0 36px 32px;padding-top:20px;border-top:1px solid #b9a7bd55;display:flex;flex-direction:column;gap:8px}
.procedure-caption{font-size:13px;line-height:1.5;color:#655367}
.procedure-notice{font-size:10px;color:#9b8a9d;letter-spacing:.025em}
.diagram-pulse{animation:point-breathe 4.5s ease-in-out infinite}
.diagram-needle{animation:needle-insert 8s cubic-bezier(.45,0,.15,1) infinite}
.diagram-joint{animation:joint-examine 6s ease-in-out infinite}
.diagram-movement{animation:movement-emphasis 6s ease-in-out infinite}
.procedure-study[data-playing=false] *, .procedure-study[data-in-view=false] *{animation-play-state:paused!important}
@keyframes point-breathe{0%,100%{transform:scale(.9);opacity:.4}50%{transform:scale(1.12);opacity:1}}
@keyframes needle-insert{0%,12%,100%{transform:translateY(-72px)}42%,64%{transform:translateY(0)}88%{transform:translateY(-72px)}}
@keyframes joint-examine{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(5deg)}}
@keyframes movement-emphasis{0%,100%{opacity:.45}50%{opacity:1}}
@media(max-width:1050px){.treatment-content{padding:32px 26px}.procedure-header{padding:28px 24px 0}.procedure-footer{margin:0 24px 28px}.treatment-visual.procedure-study{min-height:570px}.procedure-art{padding:0}}
@media(max-width:600px){.treatment.section{margin-inline:0}.treatment-visual.procedure-study{min-height:0;height:460px}.procedure-header{padding:26px 24px 0}.procedure-header .visual-state{font-size:24px}.procedure-art{min-height:0}.procedure-footer{margin:0 24px 25px;padding-top:17px}.procedure-caption{font-size:12px}.treatment-content{padding:34px 24px 42px}.treatment-tabs{gap:18px}.procedure-diagram text{font-size:14px}}
@media(prefers-reduced-motion:reduce){.procedure-study[data-playing=false] .diagram-needle{transform:translateY(0)}}
/* On phones the tabs precede the artwork, so switching never changes an
   illustration above the viewport while the reader is looking at the tabs. */
@media(max-width:600px){
 .treatment.section{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
 .treatment-content{display:contents}
 .treatment-content>.section-kicker{grid-row:1;margin:34px 24px 16px;padding:0}
 .treatment-content>h2{grid-row:2;margin:0 24px;font-size:36px}
 .treatment-content>.treatment-tabs{grid-row:3;margin:24px 24px 0;gap:18px}
 .treatment-visual.procedure-study{grid-row:4;height:400px;min-height:0;margin-top:20px}
 .procedure-art{display:block;min-height:0;padding:0}
 .procedure-diagram{height:100%;max-height:none}
 .procedure-header{padding-top:24px}
 .procedure-header .visual-state{font-size:21px}
 .procedure-footer{margin-bottom:24px}
 .treatment-content>.treatment-panels{grid-row:5;padding:28px 24px 0;margin:0}
 .treatment-content>.text-link{grid-row:6;margin:24px 24px 36px;justify-self:start}
}