/* shoulder-pain: the page's own layer over site.css. Loaded by this page
   only, so nothing here moves the other condition pages (they share
   hub.css and sub.css, which this page no longer loads). */
/* The tokens and type scale sit on <main>, not <body>: the header and footer
   are shared with every other page and keep the site's own. */
.sp{overflow-x:clip}
.sp main{overflow-x:clip}
.sp main{
--navy:#132C5B;--accent:#2D6EB1;--accent-hover:#1A4B7A;--ice:#7CA9D1;--wash:#EAF1F8;
--border:rgba(11,29,58,.12);--border-strong:rgba(11,29,58,.26);
--shadow-md:0 14px 38px rgba(11,29,58,.13);
--ease:cubic-bezier(.16,1,.3,1);--wrap:1200px;--gut:32px;
font-size:1.0625rem;line-height:1.65;
}
:root{--hdr:81px;--toc:52px}
/* Anything brought into view (a jump link, Tab, find-in-page) stops below
   the header AND the contents bar, not under them. */
html{scroll-padding-top:calc(var(--hdr) + var(--toc) + 12px)}
/* The first section sits right under the bar. Land it a little high, so the
   bar is already stuck to the header rather than floating 10px below it:
   12px for the breathing room above, 12px more for the header, which
   shrinks by that much once the page has scrolled (an instant jump lands
   before it has). The section's own top padding keeps the heading clear. */
#candidacy{scroll-margin-top:-24px}
.sp main p{max-width:none}
.sp main img,.sp main video,.sp main svg{display:block;max-width:100%}
.sp main img[width][height]{height:auto}
.sp main h1,.sp main h2,.sp main h3{font-family:var(--font-display);font-weight:300;letter-spacing:-.012em;margin:0;color:var(--ink)}
.sp main em{font-style:italic;color:var(--accent)}
.sp main a{text-decoration:none;border-bottom:0}

.sp-wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.sp main :focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.sp-sec--dark :focus-visible,.sp-close :focus-visible{outline-color:var(--ice)!important}
/* A jump from the bar moves focus to the part's heading so Tab carries on
   from there; a heading is not a control and shows no ring. */
.sp main h2[tabindex="-1"]:focus{outline:0}

/* Headings run on one line while there is room. When they must wrap, they
   break between the two halves, never at a random word: each half is an
   inline-block, which breaks as a unit before it breaks inside. */
.sp main h2{font-size:clamp(2rem,3.9vw,3.35rem);line-height:1.08}
.sp main h1>.h-lead,.sp main h1>.h-tail,.sp main h2>.h-lead,.sp main h2>.h-tail{display:inline-block}

.sp-sec{padding:clamp(60px,7.4vw,108px) 0;background:#fff}
.sp-sec--wash{background:var(--wash)}
.sp-sec--tight{padding-top:0}
.sp-sec--tight>.sp-wrap::before{content:"";display:block;border-top:1px solid var(--border-strong);margin-bottom:clamp(48px,5.5vw,80px)}
.sp-sec--dark,.sp-close{background:var(--navy);color:#fff}
.sp-sec--dark h2,.sp-sec--dark h3{color:#fff!important}
.sp-lede{font-size:1.1875rem;line-height:1.62;color:var(--ink-muted);font-weight:300;margin:22px 0 0}
.sp-sec--dark .sp-lede{color:rgba(255,255,255,.74)}

/* ---------- buttons and links ---------- */
/* Both buttons carry data-magnet: site.js moves them with an inline
   transform. Under the cursor a transition would only make that lag, so the
   transform eases on release alone. */
.sp-btn{display:inline-flex;align-items:center;gap:10px;font-size:.9375rem;font-weight:500;padding:16px 30px;border-radius:8px;background:var(--accent);color:#fff!important;transition:background .3s var(--ease),box-shadow .4s var(--ease)}
.sp-btn:not(:hover){transition:background .3s var(--ease),box-shadow .4s var(--ease),transform .3s var(--ease)}
@media (hover:hover){.sp-btn:hover{background:var(--accent-hover);box-shadow:var(--shadow-md)}}
.sp-btn--lg{padding:18px 34px;font-size:1rem}
.sp-btn--ice{background:#fff;color:var(--ink)!important}
@media (hover:hover){.sp-btn--ice:hover{background:var(--wash)}}
.sp-textlink{color:var(--accent);font-weight:500;font-size:.9375rem;background:linear-gradient(currentColor,currentColor) 0 calc(100% - 10px)/0 1px no-repeat;display:inline-flex;align-items:center;min-height:44px;transition:background-size .35s var(--ease)}
@media (hover:hover){.sp-textlink:hover{background-size:100% 1px;color:var(--accent-hover)}}

/* ---------- hero ---------- */
.sp-hero{padding:clamp(28px,4vw,56px) 0 clamp(56px,7vw,96px);background:#fff}
.sp-hero__grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(32px,5vw,72px);align-items:center}
.sp-hero h1{font-size:clamp(2.4rem,4.9vw,4.15rem);line-height:1.04;letter-spacing:-.02em}
.sp-hero__lede{font-size:clamp(1.0625rem,1.4vw,1.25rem);line-height:1.62;color:var(--ink-muted);font-weight:300;margin:28px 0 0}
.sp-hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin:34px 0 0}
.sp-reviewed{margin:28px 0 0;font-size:.8125rem;color:var(--ink-muted);display:flex;align-items:center;gap:8px}
.sp main .sp-reviewed__ic{width:16px;height:16px;flex:none;fill:none;stroke:var(--accent);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.sp-hero__fig{margin:0;border-radius:16px;overflow:hidden;aspect-ratio:4/5;box-shadow:var(--shadow-md);background:var(--wash)}
.sp main .sp-hero__fig img[width][height]{width:100%;height:100%;object-fit:cover;object-position:50% 30%}

/* ---------- contents bar ---------- */
.sp-toc{position:sticky;top:var(--hdr);z-index:40;background:rgba(255,255,255,.94);backdrop-filter:saturate(170%) blur(10px);-webkit-backdrop-filter:saturate(170%) blur(10px);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.sp-toc__inner{display:flex;gap:clamp(18px,3vw,40px);overflow-x:auto;overflow-y:hidden;scroll-padding-inline:36px;scrollbar-width:none;height:var(--toc);align-items:stretch}
.sp-toc__inner::-webkit-scrollbar{display:none}
/* The edge fades only on a side that has links off screen (set by the script). */
.sp-toc__inner.is-more{-webkit-mask-image:linear-gradient(90deg,#000 80%,transparent);mask-image:linear-gradient(90deg,#000 80%,transparent)}
.sp-toc__inner.is-back{-webkit-mask-image:linear-gradient(90deg,transparent,#000 28px);mask-image:linear-gradient(90deg,transparent,#000 28px)}
.sp-toc__inner.is-back.is-more{-webkit-mask-image:linear-gradient(90deg,transparent,#000 28px,#000 80%,transparent);mask-image:linear-gradient(90deg,transparent,#000 28px,#000 80%,transparent)}
.sp-toc a{position:relative;display:flex;align-items:center;white-space:nowrap;font-size:.9375rem;color:var(--ink-muted);padding:0 2px;transition:color .25s var(--ease)}
.sp-toc a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.sp-toc a.is-current{color:var(--ink)}
@media (hover:hover){.sp-toc a:hover{color:var(--ink)}}
/* The bar clips what sticks out above and below it, a focus ring included. */
.sp main .sp-toc a:focus-visible{outline-offset:-2px}
.sp-toc a.is-current::after{transform:scaleX(1)}
/* How far down the page the reader is, drawn along the bar's lower edge
   once it has stuck (--read is set by the script's scroll pass). */
.sp-toc::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--ice);transform-origin:left;transform:scaleX(var(--read,0));opacity:0;transition:opacity .35s var(--ease)}
.sp-toc.is-on::after{opacity:1}
/* At the closing call the bar steps aside: the band has its own button. */
.sp-toc.is-off{opacity:0;visibility:hidden;pointer-events:none}

/* ---------- candidacy ---------- */
.sp-fit{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(36px,5vw,80px);margin-top:clamp(40px,5vw,64px);align-items:start}
.sp-fit__pair{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.sp-tear{margin:0;position:relative}
.sp-tear__frame{position:relative;aspect-ratio:1;border-radius:14px;overflow:hidden;background:var(--ink)}
.sp main .sp-tear__frame img[width][height]{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sp-tear__mri{opacity:0}
/* Each picture is named under it, with the dot its row of the scale wears. */
.sp-tear figcaption{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:.9375rem;font-weight:500;color:var(--ink)}
.sp-tear figcaption::before{content:"";flex:none;width:12px;height:12px;border-radius:50%;background:var(--accent)}
.sp-tear--no figcaption::before{background:#fff;border:2px solid var(--ink-muted)}
.sp-fit__copy{grid-column:1/-1;margin-top:16px}
.sp-fit__copy p{margin:0 0 14px;color:var(--ink-soft)}
.sp-fit__floor{font-family:var(--font-display);font-size:1.5rem;line-height:1.35;color:var(--ink)!important;font-weight:400}

.sp-scale{list-style:none;margin:0;padding:0;position:relative}
.sp-scale::before{content:"";position:absolute;left:8px;top:14px;height:var(--last-top,80%);width:2px;background:linear-gradient(var(--accent),var(--ice) 55%,var(--border-strong))}
.sp-scale__row{display:grid;grid-template-columns:18px 1fr;gap:22px;padding:0 0 30px}
.sp-scale__row:last-child{padding-bottom:0}
.sp-scale__dot{width:18px;height:18px;border-radius:50%;margin-top:4px;position:relative;z-index:1;background:var(--accent);box-shadow:0 0 0 5px #fff}
.sp-scale__row--also .sp-scale__dot{background:#fff;border:2px solid var(--accent)}
.sp-scale__row--not .sp-scale__dot{background:#fff;border:2px solid var(--ink-muted)}
.sp-scale__label{font-size:.8125rem;font-weight:600;letter-spacing:.01em;color:var(--accent)}
.sp-scale__row--not .sp-scale__label{color:var(--ink-muted)}
.sp-scale h3{font-size:1.65rem;line-height:1.2;margin:4px 0 6px!important}
.sp-scale p{margin:0;color:var(--ink-muted);font-size:1rem}

/* ---------- conditions ---------- */
.sp-cond{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(32px,5vw,72px);margin-top:clamp(40px,5vw,64px);align-items:start}
.sp-cond__map{position:sticky;top:calc(var(--hdr) + var(--toc) + 32px)}
.sp-cond__map svg{width:100%;height:auto;overflow:visible}
.sp-cond__map .bone .fill{fill:#fff;stroke:var(--ink);stroke-opacity:.5;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.zone__line{fill:none;stroke:var(--ink);stroke-opacity:.18;stroke-width:7;stroke-linecap:round;transition:stroke .5s var(--ease),stroke-opacity .5s var(--ease)}
.zone__line--dash{stroke-width:3;stroke-dasharray:3 6}
.zone__node{fill:var(--ink-muted);transition:fill .5s var(--ease)}
.zone__halo{fill:var(--accent);opacity:0;transform-box:fill-box;transform-origin:center}
.zone.is-on .zone__line{stroke:var(--accent);stroke-opacity:.85}
.zone.is-on .zone__node{fill:var(--accent)}
.zone.is-on .zone__halo{animation:spHalo 1.8s var(--ease) 3}
@keyframes spHalo{0%{transform:scale(.6);opacity:.6}100%{transform:scale(2.4);opacity:0}}
.sp-cond__cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.sp-cond__col{padding:26px 26px 8px;border-top:2px solid var(--border-strong);transition:border-color .4s var(--ease)}
.sp-cond__col+.sp-cond__col{border-left:1px solid var(--border)}
.sp-cond__col.is-on{border-top-color:var(--accent)}
/* The word that ties a column to its part of the drawing, with that part's dot. */
.sp-cond__kind{display:flex;align-items:center;gap:8px;font-size:.875rem;font-weight:600;color:var(--ink-muted);transition:color .4s var(--ease)}
.sp-cond__kind::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--ink-muted);transition:background .4s var(--ease)}
.sp-cond__col.is-on .sp-cond__kind{color:var(--accent)}
.sp-cond__col.is-on .sp-cond__kind::before{background:var(--accent)}
.sp-cond__col h3{font-size:1.75rem;line-height:1.15;margin:6px 0 12px!important}
.sp-cond__col p{margin:0 0 16px;color:var(--ink-muted);font-size:1rem}
.sp-cond__col ul{list-style:none;margin:0;padding:0}
.sp-cond__col li{position:relative;padding:9px 0 9px 22px;border-top:1px solid var(--border);font-size:.9375rem}
.sp-cond__col li::before{content:"";position:absolute;left:2px;top:17px;width:8px;height:8px;border-radius:50%;border:1.5px solid var(--accent)}

/* ---------- protocol ---------- */
.sp-proto{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,5vw,80px);margin-top:clamp(40px,5vw,64px);align-items:start}
.sp-proto__fig{position:relative;margin:0 0 28px;border-radius:14px;overflow:hidden;aspect-ratio:5/4;background:var(--ink) url('../images/shoulder-injection-poster.webp') center/cover}
.sp-proto__fig video{width:100%;height:100%;object-fit:cover}
.sp-vidctl{position:absolute;right:12px;bottom:12px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(11,29,58,.55);color:#fff;display:grid;place-items:center;cursor:pointer;padding:0;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:background .25s var(--ease)}
.sp-vidctl[hidden]{display:none}
@media (hover:hover){.sp-vidctl:hover{background:rgba(11,29,58,.8)}}
.sp-vidctl svg{width:18px;height:18px;fill:currentColor}
.sp-vidctl .play,.sp-vidctl.is-paused .pause{display:none}
.sp-vidctl.is-paused .play{display:block}
.sp-proto__copy p{color:rgba(255,255,255,.78);margin:0 0 16px}
.sp-proto__copy strong{color:#fff;font-weight:500}
.sp main .sp-proto__copy a{color:var(--ice);border-bottom:1px solid rgba(124,169,209,.45)}
@media (hover:hover){.sp main .sp-proto__copy a:hover{color:#fff;border-color:#fff}}
.sp-rail{list-style:none;margin:0;padding:0;position:relative;--p:0}
.sp-rail::before,.sp-rail::after{content:"";position:absolute;left:7px;top:10px;height:var(--last-top,90%);width:2px;background:rgba(255,255,255,.16)}
.sp-rail::after{background:var(--ice);transform-origin:top;transform:scaleY(var(--p))}
.sp-rail__step{position:relative;padding:0 0 34px 46px}
.sp-rail__step:last-child{padding-bottom:0}
.sp-rail__node{position:absolute;left:0;top:8px;width:16px;height:16px;border-radius:50%;background:var(--navy);border:2px solid rgba(255,255,255,.4);z-index:1;transition:background .5s var(--ease),border-color .5s var(--ease)}
.sp-rail__step.is-lit .sp-rail__node{background:var(--ice);border-color:var(--ice)}
.sp-rail h3{font-size:1.65rem;line-height:1.2}
.sp-rail__meta{display:block;margin:6px 0 0;font-size:.9375rem;font-weight:500;color:var(--ice)}
.sp-rail p{margin:8px 0 0;color:rgba(255,255,255,.74);font-size:1rem}

/* ---------- timeline ---------- */
.sp-time__top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px clamp(32px,5vw,72px);align-items:end}
.sp-fact{display:grid;grid-template-columns:auto minmax(0,24ch);grid-template-areas:"n t" "k t";column-gap:22px;align-items:center;margin:0}
.sp-fact dt{grid-area:k;font-size:.875rem;font-weight:500;color:var(--ink-muted)}
.sp-fact dd{margin:0}
.sp-fact__n{grid-area:n;font-family:var(--font-display);font-size:clamp(2.2rem,3.4vw,3rem);line-height:1;font-weight:300;white-space:nowrap;color:var(--accent)}
.sp-fact__t{grid-area:t;color:var(--ink-muted);font-size:1rem;line-height:1.5;padding-left:22px;border-left:1px solid var(--border-strong)}
.sp-time{list-style:none;margin:clamp(48px,6vw,72px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;position:relative}
.sp-time::before,.sp-time::after{content:"";position:absolute;left:10px;right:calc((100% - 84px) / 4 - 10px);top:9px;height:2px;background:var(--border)}
.sp-time::after{background:var(--accent);transform-origin:left;transform:scaleX(1);transition:transform 1.8s var(--ease) .2s}
.sp-time__pt{position:relative;padding-top:40px}
.sp-time__dot{position:absolute;top:0;left:0;width:20px;height:20px;border-radius:50%;background:#fff;border:2px solid var(--accent);z-index:1}
.sp-time__pt--on .sp-time__dot{background:var(--accent);box-shadow:0 0 0 6px rgba(45,110,177,.14)}
.sp-time__when{font-family:var(--font-display);font-size:1.9rem;line-height:1.1;color:var(--accent)}
.sp-time h3{font-size:1.35rem;line-height:1.2;margin:6px 0 8px!important;font-family:var(--font-body)!important;font-weight:500!important;letter-spacing:0!important}
.sp-time p{margin:0;color:var(--ink-muted);font-size:1rem}
.sp-time__foot{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);margin-top:clamp(48px,6vw,72px);align-items:start}
.sp-time__foot>p{margin:0;font-size:1.125rem;color:var(--ink-soft)}
.sp-limit{display:grid;grid-template-columns:48px 1fr;gap:20px;align-items:start;padding:24px 26px;border-radius:12px;border:1px solid var(--border-strong)}
.sp-limit__ic circle{fill:none;stroke:var(--accent);stroke-width:2}
.sp-limit__ic path{stroke:var(--accent);stroke-width:2.4;stroke-linecap:round}
.sp-limit__ic .dot{fill:var(--accent);stroke:none}
.sp-limit p{margin:0;color:var(--ink)}

/* ---------- questions ---------- */
.sp-faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:clamp(32px,5vw,80px);align-items:start}
.sp-faq__h{position:sticky;top:calc(var(--hdr) + var(--toc) + 32px)}
.sp-faq__h>.h-lead,.sp-faq__h>.h-tail{display:block!important}
.sp-faq__list{border-top:1px solid var(--border-strong)}
.sp-faq__list details{border-bottom:1px solid var(--border-strong)}
.sp-faq__list summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 4px;font-family:var(--font-display);font-size:clamp(1.3rem,2vw,1.6rem);line-height:1.3;color:var(--ink);transition:color .25s var(--ease)}
.sp-faq__list summary::-webkit-details-marker{display:none}
.sp-faq__list summary i{flex:none;position:relative;width:34px;height:34px;border-radius:50%;border:1px solid var(--border-strong);transition:background .3s var(--ease),border-color .3s var(--ease),transform .45s var(--ease)}
.sp-faq__list summary i::before,.sp-faq__list summary i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;background:var(--ink);transform:translate(-50%,-50%)}
.sp-faq__list summary i::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .45s var(--ease)}
.sp-faq__list details[open] summary i{background:var(--accent);border-color:var(--accent)}
.sp-faq__list details[open] summary i::before,.sp-faq__list details[open] summary i::after{background:#fff}
.sp-faq__list details[open] summary i::after{transform:translate(-50%,-50%) rotate(0deg)}
.sp-faq__a{padding:0 64px 26px 4px;color:var(--ink-muted)}
.sp-faq__list details[open] .sp-faq__a{animation:spOpen .45s var(--ease)}
@keyframes spOpen{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---------- related ---------- */
.sp-rel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:clamp(32px,4vw,48px)}
.sp-rel__card{display:flex;flex-direction:column;color:var(--ink)!important;border-radius:14px}
.sp-rel__ph{display:block;aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:var(--wash)}
.sp main .sp-rel__ph img[width][height]{width:100%;height:100%;object-fit:cover;object-position:50% 35%;transition:transform 1s var(--ease),opacity .7s var(--ease)}
.sp-rel__t{font-family:var(--font-display);font-size:1.6rem;line-height:1.2;margin:18px 0 6px}
.sp-rel__p{color:var(--ink-muted);font-size:1rem;flex:1}
.sp-rel__go{margin-top:12px;color:var(--accent);font-size:1.125rem;line-height:1;align-self:flex-start;transition:transform .35s var(--ease)}
/* Hover answers a cursor only, here and throughout: on a touch screen it
   would stay on after a tap. */
@media (hover:hover){
  .sp-faq__list summary:hover{color:var(--accent)}
  .sp-faq__list summary:hover i{border-color:var(--accent)}
  .sp-rel__card:hover .sp-rel__ph img{transform:scale(1.05)}
  .sp-rel__card:hover .sp-rel__go{transform:translateX(6px)}
  .sp-rel__card:hover .sp-rel__t{color:var(--accent)}
}

/* ---------- closing band ---------- */
.sp-close{padding:clamp(80px,10vw,128px) var(--gut);text-align:center}
.sp-close__inner{max-width:720px;margin:0 auto}
.sp-close h2{color:#fff!important;font-size:clamp(2.2rem,4.4vw,3.4rem)!important}
.sp-close em{color:var(--ice)!important;display:inline-block}
.sp-close p{color:rgba(255,255,255,.76);margin:22px auto 34px;font-size:1.125rem}
.sp-close .sp-close__fine{margin:34px auto 0;font-size:.8125rem;color:rgba(255,255,255,.5)}

/* ---------- motion, layered over visible defaults ---------- */
.js-anim .sp [data-r]{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .9s var(--ease)}
.js-anim .sp [data-r="scale"]{transform:scale(.96)}
.js-anim .sp [data-r="left"]{transform:translateX(-28px)}
.js-anim .sp [data-r="fade"]{transform:none}
.js-anim .sp [data-r].is-in{opacity:1;transform:none}
/* A column is a reveal too, and still eases its top rule when it lights. */
.js-anim .sp .sp-cond__col{transition:opacity .8s var(--ease),transform .9s var(--ease),border-color .4s var(--ease)}
.js-anim .sp .sp-scale__row{opacity:0;transform:translateX(-18px);transition:opacity .7s var(--ease),transform .8s var(--ease)}
.js-anim .sp .sp-scale.is-in .sp-scale__row{opacity:1;transform:none}
.js-anim .sp .sp-scale.is-in .sp-scale__row:nth-child(2){transition-delay:.18s}
.js-anim .sp .sp-scale.is-in .sp-scale__row:nth-child(3){transition-delay:.36s}
/* The shoulder is drawn bone by bone, each outline first and then its
   fill, and the three regions arrive once there is a joint to sit on. */
.js-anim .sp .sp-cond__map .bone .fill{stroke-dasharray:1;stroke-dashoffset:1;fill-opacity:0}
.js-anim .sp .sp-cond__map.is-in .bone .fill{animation:spBone 1.5s var(--ease) both}
.js-anim .sp .sp-cond__map.is-in .bone .fill:nth-child(2){animation-delay:.14s}
.js-anim .sp .sp-cond__map.is-in .bone .fill:nth-child(3){animation-delay:.28s}
.js-anim .sp .sp-cond__map.is-in .bone .fill:nth-child(4){animation-delay:.42s}
.js-anim .sp .sp-cond__map.is-in .bone .fill:nth-child(5){animation-delay:.56s}
@keyframes spBone{0%{stroke-dashoffset:1;fill-opacity:0}70%{stroke-dashoffset:0;fill-opacity:0}100%{stroke-dashoffset:0;fill-opacity:1}}
.js-anim .sp .sp-cond__map .zone{opacity:0;transition:opacity .7s var(--ease) 1.3s}
.js-anim .sp .sp-cond__map.is-in .zone{opacity:1}
/* The limit is the one thing on the page that must not be skimmed: its
   mark is drawn, then the dot lands. */
.js-anim .sp .sp-limit__ic circle:not(.dot),.js-anim .sp .sp-limit__ic path{stroke-dasharray:1;stroke-dashoffset:1}
.js-anim .sp .sp-limit.is-in .sp-limit__ic circle:not(.dot){animation:spDraw .9s var(--ease) .3s both}
.js-anim .sp .sp-limit.is-in .sp-limit__ic path{animation:spDraw .4s var(--ease) 1s both}
.js-anim .sp .sp-limit__ic .dot{transform-box:fill-box;transform-origin:center;transform:scale(0)}
.js-anim .sp .sp-limit.is-in .sp-limit__ic .dot{animation:spPop .45s var(--ease) 1.3s both}
@keyframes spDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes spPop{0%{transform:scale(0)}60%{transform:scale(1.5)}100%{transform:scale(1)}}
/* A step of the protocol rings once as the line reaches it. */
.sp-rail__node::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--ice);opacity:0}
.js-anim .sp .sp-rail__step.is-lit .sp-rail__node::after{animation:spRing .9s var(--ease) both}
@keyframes spRing{from{opacity:.7;transform:scale(1)}to{opacity:0;transform:scale(2.6)}}
/* The pause control arrives when the loop starts, not before. */
.sp-vidctl:not([hidden]){animation:spCtl .5s var(--ease) both}
@keyframes spCtl{from{opacity:0;transform:scale(.8)}}
/* First paint. CSS alone, because the page's script loads last: the
   heading arrives a line at a time, then the answer, the button and the
   reviewed line, whose shield draws itself. The photo is never faded (it
   is the largest thing on the screen); it settles into its frame. */
@media (prefers-reduced-motion:no-preference){
  .sp-hero h1>span{animation:spRise .95s var(--ease) both}
  .sp-hero h1>span:nth-child(2){animation-delay:.09s}
  .sp-hero h1>span:nth-child(3){animation-delay:.18s}
  .sp-hero__lede{animation:spRise .95s var(--ease) .32s both}
  .sp-hero__actions{animation:spRise .95s var(--ease) .44s both}
  .sp-reviewed{animation:spRise .95s var(--ease) .56s both}
  .sp-reviewed__ic path{stroke-dasharray:1;animation:spDraw .7s var(--ease) 1s both}
  .sp-reviewed__ic .tick{animation-delay:1.5s}
  .sp-hero__fig{animation:spLift 1.2s var(--ease) .1s both}
  .sp main .sp-hero__fig img{animation:spSettle 1.8s var(--ease) both}
}
@keyframes spRise{from{opacity:0;transform:translateY(20px)}}
@keyframes spLift{from{transform:translateY(26px)}}
@keyframes spSettle{from{transform:scale(1.07)}}
.js-anim .sp .sp-time::after{transform:scaleX(0)}
.js-anim .sp .sp-time.is-in::after{transform:scaleX(1)}
.js-anim .sp .sp-time__dot{transform:scale(0);transition:transform .6s var(--ease)}
.js-anim .sp .sp-time.is-in .sp-time__dot{transform:none}
.js-anim .sp .sp-time.is-in .sp-time__pt:nth-child(2) .sp-time__dot{transition-delay:.45s}
.js-anim .sp .sp-time.is-in .sp-time__pt:nth-child(3) .sp-time__dot{transition-delay:.9s}
.js-anim .sp .sp-time.is-in .sp-time__pt:nth-child(4) .sp-time__dot{transition-delay:1.35s}
.js-anim .sp .sp-fit__pair.is-in .sp-tear__mri{animation:spMri 9s ease-in-out 2}
.js-anim .sp .sp-fit__pair.is-in .sp-tear--no .sp-tear__mri{animation-delay:-4.5s}
@keyframes spMri{0%,38%{opacity:0}50%,88%{opacity:1}100%{opacity:0}}

/* ---------- tablet and phone ---------- */
@media (max-width:980px){
  .sp-fit,.sp-proto,.sp-faq,.sp-time__foot,.sp-time__top,.sp-cond,.sp-cond__cols{grid-template-columns:1fr}
  .sp-time__top{align-items:start}
  .sp-cond__map{position:static;max-width:260px}
  .sp-cond__col{padding:22px 0 8px}
  .sp-cond__col+.sp-cond__col{border-left:0}
  .sp-faq__h{position:static}
  .sp-faq__h>.h-lead,.sp-faq__h>.h-tail{display:inline-block!important}
  .sp-proto__fig{aspect-ratio:16/10}
}
@media (max-width:760px){
  .sp main{--gut:20px}
  :root{--toc:48px}
  .sp-hero__grid{grid-template-columns:1fr}
  .sp-hero__fig{aspect-ratio:16/10}
  .sp-hero__actions .sp-btn{width:100%;justify-content:center}
  .sp-time{grid-template-columns:1fr;gap:0}
  .sp-time::before,.sp-time::after{left:9px;right:auto;top:10px;height:var(--last-top,80%);width:2px}
  .sp-time::after{transform-origin:top}
  .js-anim .sp .sp-time::after{transform:scaleY(0)}
  .js-anim .sp .sp-time.is-in::after{transform:scaleY(1)}
  .sp-time__pt{padding:0 0 30px 44px}
  .sp-time__pt:last-child{padding-bottom:0}
  .sp-rel{grid-template-columns:1fr;gap:24px}
  .sp-faq__a{padding-right:8px}
  .sp-scale h3,.sp-rail h3,.sp-cond__col h3{font-size:1.5rem}
  .sp-limit{gap:16px;padding:20px}
  .sp-fact{grid-template-columns:auto minmax(0,1fr);column-gap:16px}
  .sp-fact__t{padding-left:16px}
  /* Three more places to go, as three rows: a photo beside its name, not
     three screens of photographs after the page has made its case. */
  .sp-rel__card{display:grid;grid-template-columns:120px minmax(0,1fr);column-gap:16px;align-items:start}
  .sp-rel__ph{grid-row:1/4;aspect-ratio:4/3;border-radius:10px}
  .sp-rel__t{margin:0 0 4px;font-size:1.35rem}
  .sp-rel__go{margin-top:6px}
}
@media (prefers-reduced-motion:reduce){
  .sp *,.sp *::before,.sp *::after{animation:none!important;transition:none!important}
}

/* ---------- arrivals and print (surprise-and-delight) ---------- */
/* A lazy photo fades in once decoded, over its frame's tint, instead of
   snapping in line by line on a slow phone connection. */
.js-anim .sp main img.sp-lazy{opacity:0;transition:opacity .7s var(--ease)}
.js-anim .sp main img.sp-lazy.is-loaded{opacity:1}
/* The MRI crossfade plays twice and rests on the illustration. Once it has
   rested, a cursor on either picture (its marker dot included) brings that
   MRI back for as long as it stays. */
.sp-tear__mri{transition:opacity .6s var(--ease)}
@media (hover:hover){.sp-tear:hover .sp-tear__mri{opacity:1}}
/* A finger and a keyboard have no hover: the button over each picture holds its MRI (set by the script). */
html .sp .sp-fit__pair .sp-tear.is-mri .sp-tear__mri{opacity:1;animation:none}
.sp-tear__btn{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;border-radius:inherit;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
/* the frame clips, so the ring sits inside it; white over a dark line reads on either picture */
.sp main .sp-tear__btn:focus-visible{outline:2px solid #fff;outline-offset:-5px;box-shadow:inset 0 0 0 3px var(--ink)}
/* The contents bar says it is following you once it sticks. */
.sp-toc{transition:box-shadow .35s var(--ease),opacity .3s var(--ease),visibility .3s}
.sp-toc.is-stuck{box-shadow:0 6px 18px rgba(11,29,58,.07)}
/* Printed for a surgeon's appointment: every section visible whether or
   not it was scrolled to, answers open, no sticky chrome, no motion. */
@media print{
  .sp-toc,.sp .nav,.sp-hero__actions .sp-btn,.sp-close .sp-btn,.sp-vidctl,.sp-tear__btn{display:none!important}
  .sp-fit__pair{max-width:460px}
  .sp-hero__fig{max-width:300px;box-shadow:none}
  .sp [data-r],.sp .sp-scale__row,.sp .sp-time__dot,.sp main img.sp-lazy,.sp-cond__map .bone{opacity:1!important;transform:none!important;transition:none!important}
  .sp *,.sp *::before,.sp *::after{animation:none!important;transition:none!important}
  .sp-sec,.sp-hero{padding:28px 0!important}
  .sp-sec--dark,.sp-close{background:#fff!important;color:var(--ink)!important}
  .sp-sec--dark h2,.sp-sec--dark h3,.sp-close h2{color:var(--ink)!important}
  .sp-sec--dark p,.sp-proto__copy p,.sp-rail p,.sp-close p{color:var(--ink-soft)!important}
  .sp-faq__h,.sp-cond__map{position:static!important}
  .sp-time::after{transform:none!important}
  .sp-cond__map .bone .fill,.sp-limit__ic *,.sp-reviewed__ic path{stroke-dashoffset:0!important;fill-opacity:1!important}
  .sp-cond__map .zone,.sp-hero *{opacity:1!important}
  .sp-limit__ic .dot{transform:none!important}
  .sp-proto__copy strong{color:var(--ink)!important}
  .sp-rail::before{background:var(--border-strong)!important}
  .sp-rail::after{transform:none!important;background:var(--accent)!important}
  .sp-rail__node{background:var(--accent)!important;border-color:var(--accent)!important}
  .sp-rail__meta,.sp-close em,.sp main .sp-proto__copy a{color:var(--accent)!important;border-color:var(--accent)!important}
  .sp-rel__card,.sp-time__pt,.sp-rail__step,.sp-scale__row,details{break-inside:avoid}
}