/* stem-cell-therapy-shoulder.html, the paid shoulder landing page.
   Loaded after site.css and fit-quiz.css; this page no longer loads
   celva-home.css. Every class here is prefixed sh- so nothing collides with
   site.css's legacy component names (.hero, .faq__list, .ctaband); the five
   patient tiles and their dialog keep the pt- names their markup has always
   had, scoped under .sh-page.

   Staging: a snippet in the head adds .sh-js, which is the only thing that
   hides a part before it is revealed. The hero is never staged: it paints
   finished from this sheet alone. With scripts off nothing is hidden. */

/* On the root, because scroll-padding is read from it: a jump to a part, and
   a Tab to anything further up the page, stop below the site header and the
   bar instead of under them. */
:root {
  --sh-nav: 70px;   /* the sticky site header; the page script keeps it measured */
  --sh-bar: 54px;   /* the bar under it */
  scroll-padding-top: calc(var(--sh-nav) + var(--sh-bar) + 14px);
}
.sh-page {
  --sh-ease: var(--ease-out-expo);
  --sh-blue: var(--accent-blue);
  --sh-bone: #D3DDE8;
  --sh-bone-edge: #B9C6D4;
}
.sh-page main { overflow-x: clip; }
.sh-page main *, .sh-page main *::before, .sh-page main *::after { box-sizing: border-box; }
/* colors_and_type.css caps every bare <p> at 42rem and underlines every <a>. */
.sh-page main p { max-width: none; margin: 0; }
.sh-page main a:not(.btn) { border-bottom: 0; }
.sh-page main section[id] { scroll-margin-top: 0; }

.sh-sec { padding: clamp(64px, 8vw, 116px) 0; position: relative; }
.sh-page main h2 {
  font-size: clamp(2rem, 3.7vw, 3.1rem); line-height: 1.1; font-weight: 300;
  letter-spacing: -.012em; text-wrap: wrap; margin: 0;
}
.sh-page main h2 em { font-style: italic; color: var(--ink-soft); }
/* A heading that has to wrap breaks where the italic begins, never mid-phrase. */
.sh-page main h2 > .sh-h-lead, .sh-page main h2 > em { display: inline-block; }
.sh-page main h3 { font-weight: 400; letter-spacing: -.005em; text-wrap: wrap; margin: 0; }
.sh-lede { font-size: 1.1875rem; line-height: 1.62; color: var(--ink-soft); margin-top: 22px !important; }
.sh-cta { margin-top: clamp(32px, 4vw, 48px); }
.sh-cta--center { display: flex; justify-content: center; }

/* Buttons are the site's own (.btn in site.css). What this page adds: a
   pressed state, a ring a keyboard can see on any ground, and the white
   button on the closing band. */
.sh-page main .btn { min-height: 48px; }
.sh-page main .btn:active { transform: translateY(1px); box-shadow: none; transition-duration: var(--dur-fast); }
.sh-page main .btn--primary:active { background: color-mix(in srgb, var(--accent-blue-hover) 86%, #000); border-color: color-mix(in srgb, var(--accent-blue-hover) 86%, #000); }
.sh-page main .btn--ghost:active { background: rgba(11, 29, 58, .05); }
.sh-page main :is(a, button, summary):focus-visible { outline: 2px solid var(--sh-blue); outline-offset: 3px; border-radius: 4px; }
.sh-page main [tabindex="-1"]:focus { outline: none; }

/* ============ hero ============ */
.sh-hero { position: relative; overflow: hidden; padding: clamp(24px, 4.4vw, 68px) 0 clamp(48px, 5.5vw, 80px); background: #fff; }
/* The labelled shoulder sketch behind the right half, only where the film
   stands beside the copy (above 1080px); it is not fetched below that. */
.sh-hero__sketch {
  position: absolute; inset: -6% -4%; width: 108%; height: 112%; pointer-events: none; opacity: .42;
  background: url('../images/shoulder-anatomy-sketch.webp') no-repeat 66% 46% / min(1150px, 90%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 34%, rgba(0, 0, 0, .12) 46%, rgba(0, 0, 0, .45) 56%, #000 64%, #000 90%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 16%, #000 76%, transparent 92%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0%, transparent 34%, rgba(0, 0, 0, .12) 46%, rgba(0, 0, 0, .45) 56%, #000 64%, #000 90%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 16%, #000 76%, transparent 92%);
  mask-composite: intersect;
  animation: sh-sketch 1.8s ease-out both;
}
@keyframes sh-sketch { from { opacity: 0; } to { opacity: .42; } }
.sh-hero__grid {
  position: relative; z-index: 1; display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(0, .84fr);
  column-gap: clamp(28px, 3.6vw, 56px); align-items: start;
}
/* The copy's children sit on the grid themselves: the headline spans both
   columns, the film stands beside everything under it. */
.sh-hero__copy { display: contents; }
.sh-hero h1 { grid-column: 1 / -1; }
.sh-hero__sub, .sh-hero__ctas, .sh-hero__after, .sh-hero__facts { grid-column: 1; }
.sh-hero__fig { grid-column: 2; grid-row: 2 / span 4; margin: 30px 0 0; }
.sh-hero h1 { font-size: clamp(2.2rem, 4.1vw, 3.7rem); line-height: 1.06; letter-spacing: -.018em; margin: 0; text-wrap: wrap; }
.sh-hero h1 em { color: var(--sh-blue); font-style: italic; }
.sh-hero__line { display: block; text-wrap: balance; }
.sh-hero__sub { font-size: 1.125rem; line-height: 1.66; color: var(--ink-soft); margin-top: 26px !important; }
.sh-hero__ctas { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.sh-hero__next { margin-top: 14px !important; font-size: .875rem; line-height: 1.5; color: var(--ink-muted); }
/* The poster sits under the video too, so a clip that fails still shows the picture. */
.sh-hero__frame {
  position: relative; width: 100%; aspect-ratio: 5 / 6; border-radius: 14px; overflow: hidden;
  background: #0b1d3a url('../images/shoulder-hero-poster.webp') center / cover no-repeat;
  box-shadow: var(--shadow-md);
}
.sh-hero__frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); animation: sh-settle 1.6s var(--sh-ease) both; }
.sh-hero__frame video[width][height] { height: 100%; }
@keyframes sh-settle { from { transform: scale(1.1); } to { transform: scale(1.04); } }
.sh-hero__cap { margin-top: 12px; font-size: .875rem; color: var(--ink-muted); }
.sh-hero__facts {
  position: relative; margin-top: calc(clamp(32px, 3.4vw, 44px) + 10px); padding-top: 28px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px clamp(24px, 3vw, 40px);
}
.sh-hero__facts::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--border); transform-origin: left; animation: sh-rule 1.2s var(--sh-ease) .25s both; }
@keyframes sh-rule { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.sh-fact__h { font-family: var(--font-display); font-size: 1.75rem; line-height: 1.1; color: var(--ink); }
.sh-fact__h em { color: var(--sh-blue); font-style: italic; }
.sh-fact__p { margin-top: 8px !important; font-size: .9375rem; line-height: 1.58; color: var(--ink-muted); }
/* The review line sits right under the next-step line. It used to close the
   facts a row gap (22px) below them: 12px here and 10px more above the facts
   keep every other line of the hero where it was. */
.sh-hero__reviewed { margin-top: 12px !important; font-size: .8438rem; line-height: 1.5; color: var(--ink-muted); }

/* ============ the bar that follows the reader ============ */
.sh-bar {
  position: sticky; top: var(--sh-nav); z-index: 45; background: #fff;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  transition: top .45s var(--sh-ease), box-shadow .4s var(--sh-ease), opacity .3s var(--sh-ease), visibility 0s;
}
.sh-bar.is-on { box-shadow: 0 10px 24px -18px rgba(11, 29, 58, .35); }
/* It steps aside for the closing call, which has nothing to jump to. */
.sh-bar.is-done { opacity: 0; visibility: hidden; transition: top .45s var(--sh-ease), opacity .3s var(--sh-ease), visibility 0s .3s; }
.sh-bar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--sh-blue); opacity: .35; transform-origin: left; transform: scaleX(var(--sh-read, 0));
}
.sh-bar .container { position: relative; }
.sh-bar ul {
  list-style: none; margin: 0 -6px; padding: 0; display: flex; gap: clamp(6px, calc(2.6vw - 12px), 26px);
  overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity;
}
.sh-bar ul::-webkit-scrollbar { display: none; }
.sh-bar li { flex: none; scroll-snap-align: start; }
.sh-page .sh-bar a {
  position: relative; display: block; padding: 16px 6px 15px; font-size: .9063rem; font-weight: 500;
  color: var(--ink-muted); text-decoration: none; white-space: nowrap; transition: color .25s var(--sh-ease);
}
.sh-bar a::after {
  content: ""; position: absolute; left: 6px; right: 6px; bottom: 0; height: 2px; background: var(--sh-blue);
  transform: scaleX(0); transform-origin: left; transition: transform .4s var(--sh-ease);
}
@media (hover: hover) { .sh-page .sh-bar a:hover { color: var(--ink); } .sh-bar a:hover::after { transform: scaleX(.35); } }
.sh-page .sh-bar a[aria-current="location"] { color: var(--ink); }
.sh-bar a[aria-current="location"]::after, .sh-bar a:focus-visible::after { transform: scaleX(1); }
.sh-bar a:active { color: var(--ink); }
/* The row scrolls sideways and clips what is drawn outside a link: the ring sits inside. */
.sh-page main .sh-bar a:focus-visible { outline-offset: -2px; }
.sh-bar .container::before, .sh-bar .container::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 40px; z-index: 1; pointer-events: none;
  opacity: 0; transition: opacity .25s var(--sh-ease);
}
.sh-bar .container::before { left: 0; background: linear-gradient(90deg, #fff 30%, rgba(255, 255, 255, 0)); }
.sh-bar .container::after { right: 0; background: linear-gradient(270deg, #fff 30%, rgba(255, 255, 255, 0)); }
.sh-bar.has-left .container::before, .sh-bar.has-right .container::after { opacity: 1; }

/* ============ reveals (only once the head snippet has said scripts run) ============ */
.sh-js [data-r] { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--sh-ease), transform .9s var(--sh-ease); }
.sh-js [data-r].is-in { opacity: 1; transform: none; }
.sh-js [data-r="photo"] { transform: scale(1.035); transition-duration: 1s, 1.4s; }
.sh-js [data-r="part"] { transform: translateX(-16px); }
.sh-js [data-r="quote"] { transform: none; }
.sh-js [data-r="scale"], .sh-js [data-r="tiles"] { opacity: 1; transform: none; }

/* ============ who qualifies: a photo beside four verdicts on one line ============ */
.sh-qual__grid {
  display: grid; grid-template-columns: minmax(0, .38fr) minmax(0, .62fr);
  gap: clamp(28px, 5vw, 76px); align-items: start; margin-top: clamp(36px, 4.4vw, 56px);
}
.sh-qual__fig { margin: 0; border-radius: 14px; overflow: hidden; background: #0b1d3a; position: sticky; top: calc(var(--sh-nav) + var(--sh-bar) + 24px); }
.sh-qual__fig img { display: block; width: 100%; height: auto; }
.sh-scale { display: grid; }
.sh-fit { position: relative; padding: 0 0 30px 64px; }
.sh-fit:last-child { padding-bottom: 0; }
.sh-fit__mark { position: absolute; left: 0; top: 0; width: 40px; height: 40px; }
.sh-fit__mark svg { display: block; width: 40px; height: 40px; fill: none; stroke: var(--ink-muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.sh-fit--yes .sh-fit__mark svg { stroke: var(--sh-blue); }
.sh-fit--strong .sh-fit__mark circle { fill: var(--sh-blue); stroke: var(--sh-blue); }
.sh-fit--strong .sh-fit__mark path { stroke: #fff; stroke-width: 2.4; }
/* One connector per gap, mark to mark, and nothing after the last. */
.sh-fit:not(:last-child)::before {
  content: ""; position: absolute; left: 19px; top: 46px; bottom: 6px; width: 2px; border-radius: 2px;
  background: var(--border-strong); transform-origin: top;
}
.sh-fit--refer::before { background: linear-gradient(var(--border-strong), var(--sh-blue)) !important; }
.sh-fit--yes::before { background: var(--sh-blue) !important; }
.sh-fit__verdict { font-size: .9063rem; font-weight: 600; letter-spacing: .01em; color: var(--ink-muted); line-height: 1.3; padding-top: 2px; }
.sh-fit--yes .sh-fit__verdict, .sh-fit--strong .sh-fit__verdict { color: var(--sh-blue); }
.sh-fit h3 { font-size: clamp(1.4rem, 2vw, 1.7rem); line-height: 1.18; margin-top: 4px; }
.sh-fit h3 + p { margin-top: 8px; font-size: 1rem; line-height: 1.62; color: var(--ink-muted); }
/* The marks arrive one after another down the line, and each connector follows its mark. */
.sh-js .sh-scale .sh-fit__mark { opacity: 0; transform: scale(.6); transition: opacity .5s var(--sh-ease), transform .7s var(--sh-ease); }
.sh-js .sh-scale .sh-fit::before { transform: scaleY(0); transition: transform .7s var(--sh-ease); }
.sh-js .sh-scale .sh-fit > :not(.sh-fit__mark) { opacity: 0; transform: translateY(10px); transition: opacity .7s var(--sh-ease), transform .8s var(--sh-ease); }
.sh-js .sh-scale.is-in .sh-fit__mark, .sh-js .sh-scale.is-in .sh-fit > :not(.sh-fit__mark) { opacity: 1; transform: none; }
.sh-js .sh-scale.is-in .sh-fit::before { transform: none; }
/* Each verdict's cross, arrow or check is drawn as its mark arrives. */
.sh-js .sh-scale .sh-fit__mark path { stroke-dasharray: 44; stroke-dashoffset: 44; }
.sh-js .sh-scale.is-in .sh-fit__mark path { animation: sh-draw .7s var(--sh-ease) .3s forwards; }
.sh-js .sh-scale.is-in .sh-fit:nth-child(2) .sh-fit__mark path { animation-delay: .46s; }
.sh-js .sh-scale.is-in .sh-fit:nth-child(3) .sh-fit__mark path { animation-delay: .62s; }
.sh-js .sh-scale.is-in .sh-fit:nth-child(4) .sh-fit__mark path { animation-delay: .78s; }
@keyframes sh-draw { to { stroke-dashoffset: 0; } }
.sh-scale .sh-fit:nth-child(2) > *, .sh-scale .sh-fit:nth-child(1)::before { transition-delay: .16s; }
.sh-scale .sh-fit:nth-child(3) > *, .sh-scale .sh-fit:nth-child(2)::before { transition-delay: .32s; }
.sh-scale .sh-fit:nth-child(4) > *, .sh-scale .sh-fit:nth-child(3)::before { transition-delay: .48s; }

/* ============ the injection: three parts, a drawing you can point, and the film ============ */
.sh-inj__grid {
  display: grid; grid-template-columns: minmax(0, 1.16fr) minmax(0, .84fr);
  gap: clamp(28px, 4.6vw, 72px); align-items: start; margin-top: clamp(36px, 4.4vw, 56px);
}
.sh-inj__fig { margin: 0; border-radius: 14px; overflow: hidden; background: #0b1d3a; box-shadow: var(--shadow-md); position: sticky; top: calc(var(--sh-nav) + var(--sh-bar) + 24px); }
.sh-inj__fig video { display: block; width: 100%; height: auto; }
.sh-part { padding: 28px 0; border-top: 1px solid var(--border); }
.sh-part:first-child { padding-top: 0; border-top: 0; }
.sh-part:last-child { padding-bottom: 0; }
.sh-part h3 { font-size: clamp(1.5rem, 2.2vw, 1.85rem); line-height: 1.16; }
.sh-part h3 + p { margin-top: 10px; font-size: 1.0313rem; line-height: 1.66; color: var(--ink-muted); }
.sh-us { margin-top: 22px; border: 1px solid var(--border); border-radius: 14px; padding: clamp(14px, 2vw, 22px); background: #fff; }
.sh-us__svg { display: block; width: 100%; height: auto; max-width: 520px; margin: 0 auto; overflow: visible; }
.sh-us__body { fill: #F1F5F9; }
.sh-us__bone { fill: var(--sh-bone); }
.sh-us__socket { fill: none; stroke: var(--sh-bone-edge); stroke-width: 12; stroke-linecap: round; }
.sh-us__roof { fill: none; stroke: var(--sh-bone); stroke-width: 22; stroke-linecap: round; stroke-linejoin: round; }
.sh-us__tendon { fill: none; stroke: var(--accent-ice); stroke-width: 12; stroke-linecap: round; }
.sh-us__beam { fill: var(--sh-blue); opacity: .1; }
.sh-us__probe rect { fill: var(--ink-soft); }
.sh-us__probe path { fill: none; stroke: var(--ink-soft); stroke-width: 3; stroke-linecap: round; }
.sh-us__halo { fill: var(--sh-blue); opacity: 0; transform-box: fill-box; transform-origin: center; }
.sh-us__dot { fill: #fff; stroke: var(--sh-blue); stroke-width: 2.5; transition: fill .35s var(--sh-ease); }
.sh-us[data-target="footprint"] [data-spot="footprint"] .sh-us__dot,
.sh-us[data-target="joint"] [data-spot="joint"] .sh-us__dot,
.sh-us[data-target="space"] [data-spot="space"] .sh-us__dot { fill: var(--sh-blue); }
.sh-us[data-target="footprint"] [data-spot="footprint"] .sh-us__halo,
.sh-us[data-target="joint"] [data-spot="joint"] .sh-us__halo,
.sh-us[data-target="space"] [data-spot="space"] .sh-us__halo { opacity: .16; animation: sh-ring .9s var(--sh-ease); }
@keyframes sh-ring { from { transform: scale(.3); opacity: .5; } to { transform: scale(1); opacity: .16; } }
/* The needle is drawn from its tip back along -x; each place sets where the
   tip rests and the angle it arrives at. */
.sh-us__needle { transform: translate(168px, 190px) rotate(40deg); transition: transform .95s var(--sh-ease); }
.sh-us[data-target="joint"] .sh-us__needle { transform: translate(302px, 212px) rotate(94.5deg); }
.sh-us[data-target="space"] .sh-us__needle { transform: translate(300px, 104px) rotate(11deg); }
.sh-us__shaft { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; }
.sh-us__hub { fill: none; stroke: var(--ink); stroke-width: 8; stroke-linecap: round; }
.sh-us__cell { fill: var(--sh-blue); }
/* The loops run only while the drawing is on screen (the page script marks it). */
.sh-us.is-live .sh-us__cell { animation: sh-emit 2.4s ease-out infinite; }
.sh-us.is-live .sh-us__cell:nth-of-type(2) { animation-delay: .5s; }
.sh-us.is-live .sh-us__cell:nth-of-type(3) { animation-delay: 1s; }
@keyframes sh-emit { 0% { transform: translate(-8px, 0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(9px, 0); opacity: 0; } }
.sh-us.is-live .sh-us__beam { animation: sh-beam 3.2s ease-in-out infinite; }
/* The sound sweeps down from the probe while the drawing is watched. */
.sh-us__scan { fill: none; stroke: var(--sh-blue); stroke-width: 2; opacity: 0; }
.sh-us.is-live .sh-us__scan { animation: sh-scan 3.2s linear infinite; }
@keyframes sh-scan { 0% { transform: translateY(0); opacity: 0; } 12% { opacity: .5; } 85% { opacity: .18; } 100% { transform: translateY(184px); opacity: 0; } }
@keyframes sh-beam { 0%, 100% { opacity: .07; } 50% { opacity: .14; } }
.sh-us__pick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; justify-content: center; }
.sh-us__pick button, .sh-view button {
  min-height: 44px; padding: 0 16px; border: 1px solid var(--border-strong); border-radius: 6px; background: #fff;
  font: 500 .9063rem/1.2 var(--font-body); color: var(--ink-soft); cursor: pointer;
  transition: border-color .25s var(--sh-ease), color .25s var(--sh-ease), background .25s var(--sh-ease), transform .2s var(--sh-ease);
}
.sh-us__pick button::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 9px; border-radius: 50%; border: 2px solid var(--sh-blue); vertical-align: 0; transition: background .25s var(--sh-ease); }
.sh-us__pick button[aria-pressed="true"]::before { background: var(--sh-blue); }
.sh-us__pick button[aria-pressed="true"], .sh-view button[aria-pressed="true"] { border-color: var(--sh-blue); color: var(--ink); box-shadow: inset 0 0 0 1px var(--sh-blue); }
@media (hover: hover) { .sh-us__pick button:hover, .sh-view button:hover { border-color: var(--sh-blue); color: var(--ink); } }
.sh-us__pick button:active, .sh-view button:active { transform: translateY(1px); background: rgba(11, 29, 58, .04); }
.sh-inj__closing { margin-top: clamp(36px, 4vw, 52px) !important; padding-top: 28px; border-top: 1px solid var(--border); font-size: 1.0625rem; line-height: 1.7; color: var(--ink-soft); }

/* ============ rotator cuff: the page's one tinted band ============ */
.sh-cuff { background: var(--accent-wash); }
.sh-view { display: flex; margin-top: clamp(28px, 3.4vw, 40px); }
.sh-view[hidden] { display: none; }
.sh-view button:first-child { border-radius: 6px 0 0 6px; }
.sh-view button:last-child { border-radius: 0 6px 6px 0; margin-left: -1px; }
.sh-view button[aria-pressed="true"] { position: relative; z-index: 1; }
.sh-cuff__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4.6vw, 72px); margin-top: 20px; align-items: start; }
.sh-tear__pics { position: relative; display: block; border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 3; background: #07162c; }
.sh-tear__pic { position: absolute; inset: 0; display: block; margin: 0; }
.sh-tear__pic--mri { opacity: 0; transition: opacity .7s var(--sh-ease); pointer-events: none; }
.sh-cuff.is-mri .sh-tear__pic--mri { opacity: 1; }
.sh-tear__img, .sh-tear__img[width][height] { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.sh-js [data-r="tear"] .sh-tear__img { transform: scale(1.07); transition: transform 1.6s var(--sh-ease); }
.sh-js [data-r="tear"].is-in .sh-tear__img { transform: none; }
.sh-tear__kind { margin-top: 22px !important; font-size: .9063rem; font-weight: 600; letter-spacing: .01em; color: var(--ink-muted); }
.sh-tear--offered .sh-tear__kind { color: var(--accent-blue-hover); }
.sh-tear h3 { font-size: clamp(1.5rem, 2.3vw, 1.95rem); line-height: 1.16; margin-top: 6px; }
.sh-tear ul { list-style: none; margin: 18px 0 0; padding: 0; }
.sh-tear li { position: relative; padding: 13px 0 13px 26px; border-top: 1px solid rgba(11, 29, 58, .13); font-size: 1rem; line-height: 1.6; color: var(--ink-soft); }
.sh-tear li::before { content: ""; position: absolute; left: 0; top: 1.5em; width: 12px; height: 2px; background: var(--ink-muted); }
.sh-tear--offered li::before { background: var(--sh-blue); }
.sh-cuff__closing { margin: clamp(40px, 5vw, 64px) auto 0 !important; text-align: center; font-family: var(--font-display); font-size: clamp(1.3rem, 2.1vw, 1.75rem); line-height: 1.38; color: var(--ink); }

/* ============ stem cells vs shoulder surgery: the quiet one ============ */
.sh-vs__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5.4vw, 88px); align-items: start; margin-top: clamp(32px, 4vw, 52px); }
.sh-quote { position: relative; margin: 0; font-family: var(--font-display); font-style: italic; font-size: clamp(1.5rem, 2.5vw, 2.15rem); line-height: 1.3; font-weight: 300; color: var(--ink); }
.sh-quote__mark { display: block; width: 72px; height: 54px; margin-bottom: 18px; fill: var(--accent-ice); transform-origin: left bottom; }
.sh-js [data-r="quote"] .sh-quote__mark { opacity: 0; transform: translateY(8px) scale(.8); transition: opacity .7s var(--sh-ease) .1s, transform .9s var(--sh-ease) .1s; }
.sh-js [data-r="quote"].is-in .sh-quote__mark { opacity: 1; transform: none; }
.sh-quote__who { display: block; margin-top: 16px; font-family: var(--font-body); font-style: normal; font-size: .9375rem; font-weight: 400; color: var(--ink-muted); }
.sh-vs__body p { font-size: 1.0625rem; line-height: 1.7; color: var(--ink-muted); }
.sh-vs__body p + p { margin-top: 18px; }
.sh-vs__body p b { font-weight: 600; color: var(--ink); }

/* ============ cost: the three lines of the written quote, with no figure on it ============ */
.sh-cost__grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); grid-template-areas: "head sheet" "foot sheet"; grid-template-rows: auto 1fr; column-gap: clamp(32px, 5vw, 80px); align-items: start; margin-top: clamp(4px, 1vw, 12px); }
.sh-cost__grid .sh-quoteform { margin-top: 22px; }
.sh-cost__head { grid-area: head; }
.sh-cost__foot { grid-area: foot; margin-top: 28px; }
.sh-cost__closing { font-size: 1rem; line-height: 1.66; color: var(--ink-muted); padding-top: 24px; border-top: 1px solid var(--border); }
.sh-quoteform { grid-area: sheet; position: relative; background: #fff; border: 1px solid var(--border); border-radius: 6px; box-shadow: var(--shadow-md); padding: 6px clamp(20px, 2.6vw, 36px); }
/* A turned corner, so the sheet reads as paper. */
.sh-quoteform::after { content: ""; position: absolute; right: -1px; top: -1px; width: 30px; height: 30px; background: linear-gradient(225deg, #fff 0 49.5%, var(--border-strong) 49.5% 51.5%, var(--accent-wash) 51.5%); border-bottom-left-radius: 4px; }
.sh-line { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 20px; padding: 24px 0; border-top: 1px solid var(--border); }
.sh-line:first-child { border-top: 0; }
.sh-line > * { grid-column: 2; }
.sh-line__icon { grid-column: 1; grid-row: 1 / span 3; width: 52px; height: 52px; border-radius: 50%; background: var(--accent-wash); display: grid; place-items: center; }
.sh-line__icon svg { width: 26px; height: 26px; fill: none; stroke: var(--accent-blue-hover); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sh-line__item { font-size: .9063rem; font-weight: 600; letter-spacing: .01em; color: var(--accent-blue-hover); line-height: 1.3; }
.sh-line h3 { font-size: clamp(1.35rem, 1.9vw, 1.6rem); line-height: 1.18; margin-top: 3px; }
.sh-line h3 + p { margin-top: 6px; font-size: 1rem; line-height: 1.6; color: var(--ink-muted); text-wrap: wrap; }
.sh-js [data-r="sheet"] .sh-line { opacity: 0; transform: translateX(14px); transition: opacity .6s var(--sh-ease), transform .7s var(--sh-ease); }
.sh-js [data-r="sheet"].is-in .sh-line { opacity: 1; transform: none; }
[data-r="sheet"] .sh-line:nth-child(2) { transition-delay: .12s; }
[data-r="sheet"] .sh-line:nth-child(3) { transition-delay: .24s; }

/* ============ the day: four stops along one line ============ */
.sh-steps { list-style: none; margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: clamp(18px, 2.2vw, 30px); }
.sh-step { position: relative; padding-top: 38px; }
/* The four stops share their rows (film, name, heading, sentence), so a
   heading that takes two lines lowers the sentence under all four at once. */
@supports (grid-template-rows: subgrid) {
  .sh-step { grid-row: span 4; display: grid; grid-template-rows: subgrid; }
}
.sh-step__body { display: contents; }
.sh-step::before { content: ""; position: absolute; left: 0; top: 0; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--border-strong); transition: background .45s var(--sh-ease), border-color .45s var(--sh-ease), transform .45s var(--sh-ease); }
/* One connector per gap, stop to stop, and nothing after the last. */
.sh-step:not(:last-child)::after {
  content: ""; position: absolute; left: 22px; top: 7px; height: 2px; width: calc(100% + clamp(18px, 2.2vw, 30px) - 28px); border-radius: 2px;
  background: linear-gradient(var(--sh-blue), var(--sh-blue)) left / 0% 100% no-repeat, var(--border);
  transition: background-size .8s var(--sh-ease);
}
.sh-step.is-lit::before { background: var(--sh-blue); border-color: var(--sh-blue); transform: scale(1.12); animation: sh-arrive 1s var(--sh-ease) both; }
@keyframes sh-arrive { 0% { box-shadow: 0 0 0 0 rgba(45, 110, 177, .45); } 100% { box-shadow: 0 0 0 12px rgba(45, 110, 177, 0); } }
.sh-step.is-lit:not(:last-child)::after { background-size: 100% 100%, auto; }
.sh-step:nth-child(2)::before { transition-delay: .5s; animation-delay: .5s; } .sh-step:nth-child(2)::after { transition-delay: .6s; }
.sh-step:nth-child(3)::before { transition-delay: 1s; animation-delay: 1s; } .sh-step:nth-child(3)::after { transition-delay: 1.1s; }
.sh-step:nth-child(4)::before { transition-delay: 1.5s; animation-delay: 1.5s; }
.sh-step:nth-child(1)::after { transition-delay: .1s; }
.sh-step__media { margin: 0; position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: #0b1d3a; width: 100%; }
.sh-step__media video, .sh-step__media video[width][height] { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.sh-step__when { margin-top: 18px !important; font-size: .9063rem; font-weight: 600; letter-spacing: .01em; color: var(--ink-muted); transition: color .45s var(--sh-ease); }
.sh-step.is-lit .sh-step__when { color: var(--sh-blue); }
.sh-step:nth-child(2) .sh-step__when { transition-delay: .5s; }
.sh-step:nth-child(3) .sh-step__when { transition-delay: 1s; }
.sh-step:nth-child(4) .sh-step__when { transition-delay: 1.5s; }
.sh-step h3 { font-size: clamp(1.3rem, 1.75vw, 1.55rem); line-height: 1.18; margin-top: 4px; }
.sh-step h3 + p { margin-top: 8px; font-size: .9688rem; line-height: 1.62; color: var(--ink-muted); }

/* ============ the people we said yes to: a navy band ============ */
.sh-people { background: var(--ink); color: #fff; }
.sh-page main .sh-people h2 { color: #fff; }
.sh-page main .sh-people h2 em { color: var(--accent-ice); }
.sh-people .sh-lede { color: rgba(255, 255, 255, .8); }
.sh-page .pt-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 18px); margin-top: clamp(36px, 4.4vw, 56px); }
.sh-page .pt-fig { margin: 0; }
.sh-page .pt-tile {
  display: block; position: relative; width: 100%; aspect-ratio: 3 / 4; padding: 0; border: 0; border-radius: 12px; overflow: hidden;
  cursor: pointer; background: var(--navy-mid); transition: transform .5s var(--sh-ease), box-shadow .5s var(--sh-ease);
}
@media (hover: hover) {
  .sh-page .pt-tile:hover { transform: translateY(-6px); box-shadow: 0 22px 50px rgba(0, 0, 0, .45); }
  .sh-page .pt-tile:hover .pt-tile__scrim { opacity: .6; }
  .sh-page .pt-tile:hover .pt-tile__play { transform: translate(-50%, -50%) scale(1.12); }
}
.sh-page .pt-tile:active { transform: translateY(1px) scale(.99); transition-duration: var(--dur-fast); }
.sh-page main .pt-tile:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 12px; }
.sh-page .pt-tile__loop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.sh-page .pt-tile__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 29, 58, .05), rgba(11, 29, 58, .55)); transition: opacity .4s; }
.sh-page .pt-tile__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 52px; height: 52px; border-radius: 50%; background: rgba(255, 255, 255, .94); display: grid; place-items: center; transition: transform .45s var(--sh-ease); }
.sh-page .pt-tile__play svg { width: 20px; height: 20px; fill: var(--ink); margin-left: 2px; display: block; }
.sh-page .pt-fig__cap { margin-top: 12px; font-size: .875rem; line-height: 1.4; color: rgba(255, 255, 255, .82); text-align: left; }
.sh-js [data-r="tiles"] .pt-fig { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--sh-ease), transform .9s var(--sh-ease); }
.sh-js [data-r="tiles"].is-in .pt-fig { opacity: 1; transform: none; }
[data-r="tiles"] .pt-fig:nth-child(2) { transition-delay: .08s; }
[data-r="tiles"] .pt-fig:nth-child(3) { transition-delay: .16s; }
[data-r="tiles"] .pt-fig:nth-child(4) { transition-delay: .24s; }
[data-r="tiles"] .pt-fig:nth-child(5) { transition-delay: .32s; }
.sh-people .btn--primary:focus-visible { outline-color: #fff !important; }

/* The player: locks the page behind it, fits a 568 by 320 window, hands focus back. */
.pt-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; }
.pt-modal[hidden] { display: none; }
.pt-modal__backdrop { position: absolute; inset: 0; background: rgba(7, 18, 38, .9); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.pt-modal__box { position: relative; width: min(920px, 92vw, calc((100vh - 128px) * 16 / 9)); width: min(920px, 92vw, calc((100dvh - 128px) * 16 / 9)); }
.pt-modal__frame { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #000; box-shadow: 0 40px 100px rgba(0, 0, 0, .6); }
.pt-modal__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity .5s var(--ease-out-expo); }
.pt-modal__frame.is-ready iframe { opacity: 1; }
.pt-modal__hold { position: absolute; inset: 0; background: var(--ink) center / cover no-repeat; display: flex; align-items: flex-end; padding: 22px 26px; }
.pt-modal__hold::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(7, 18, 38, .85), rgba(7, 18, 38, .25) 55%); }
.pt-modal__hold span { position: relative; color: #fff; font-family: var(--font-display); font-size: clamp(20px, 2.4vw, 28px); line-height: 1.2; }
.pt-modal__close { position: absolute; right: -8px; top: -50px; min-width: 44px; min-height: 44px; background: transparent; border: 0; border-radius: 6px; color: #fff; font-size: 1.9rem; line-height: 1; cursor: pointer; transition: background .2s; }
.pt-modal__close:hover { background: rgba(255, 255, 255, .12); }
.pt-modal__close:active { background: rgba(255, 255, 255, .2); }
.pt-modal__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ============ questions ============ */
.sh-faq__grid { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(36px, 6vw, 88px); align-items: start; margin-top: clamp(4px, 1vw, 12px); }
.sh-faq__list { margin-top: 22px; }
.sh-faq__head { position: sticky; top: calc(var(--sh-nav) + var(--sh-bar) + 28px); }
.sh-faq__list details { border-top: 1px solid var(--border); }
.sh-faq__list details:last-of-type { border-bottom: 1px solid var(--border); }
.sh-faq__list summary {
  display: flex; align-items: flex-start; gap: 20px; padding: 22px 0; min-height: 44px; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-size: clamp(1.2rem, 1.7vw, 1.45rem); line-height: 1.32; color: var(--ink);
  transition: color .25s var(--sh-ease);
}
.sh-faq__list summary::-webkit-details-marker { display: none; }
@media (hover: hover) { .sh-faq__list summary:hover { color: var(--sh-blue); } }
.sh-faq__list summary:active { color: var(--accent-blue-hover); }
/* A plus that turns into a minus: two drawn bars, one of which lies down. */
.sh-faq__ic { position: relative; flex: none; width: 16px; height: 16px; margin: .42em 2px 0 auto; }
.sh-faq__ic::before, .sh-faq__ic::after { content: ""; position: absolute; left: 0; top: 7px; width: 16px; height: 2px; border-radius: 2px; background: var(--sh-blue); transition: transform .4s var(--sh-ease); }
.sh-faq__ic::after { transform: rotate(90deg); }
details[open] .sh-faq__ic::after { transform: rotate(0deg); }
.sh-faq__a { padding: 0 36px 26px 0; font-size: 1rem; line-height: 1.72; color: var(--ink-muted); }
details[open] > .sh-faq__a { animation: sh-answer .5s var(--sh-ease); }
@keyframes sh-answer { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ============ the closing call ============ */
.sh-close { position: relative; background: var(--navy-mid); color: #fff; padding: clamp(88px, 11vw, 152px) 0; text-align: center; overflow: hidden; }
.sh-close__in { max-width: 52rem; margin: 0 auto; padding: 0 clamp(20px, 4vw, 56px); display: flex; flex-direction: column; align-items: center; }
.sh-page main .sh-close h2 { color: #fff; font-size: clamp(2.2rem, 4.6vw, 3.7rem); line-height: 1.06; text-wrap: balance; }
.sh-page main .sh-close h2 em { color: var(--accent-ice); }
.sh-close__in > p:not(.sh-close__disclaimer) { color: rgba(255, 255, 255, .84); font-size: 1.0625rem; line-height: 1.7; max-width: 40rem !important; margin: 24px 0 40px !important; }
.sh-page main .sh-close .btn--ice { background: #fff; border-color: #fff; color: var(--ink); padding: 17px 32px; font-size: 16px; }
.sh-page main .sh-close .btn--ice:hover { background: var(--accent-wash); border-color: var(--accent-wash); transform: translateY(-3px); box-shadow: 0 22px 56px rgba(0, 0, 0, .34); }
.sh-page main .sh-close .btn--ice:active { transform: translateY(1px); background: color-mix(in srgb, var(--accent-wash) 92%, #0b1d3a); box-shadow: none; }
.sh-page main .sh-close .btn--ice:focus-visible { outline-color: #fff; }
.sh-close__disclaimer { margin-top: 44px !important; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .18); color: rgba(255, 255, 255, .72); font-size: .8438rem; line-height: 1.7; max-width: 44rem !important; }

/* ============ narrower screens ============ */
@media (max-width: 1080px) {
  .sh-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .sh-hero__sketch { display: none; }
  .sh-hero__fig { grid-column: 1; grid-row: auto; max-width: 520px; width: 100%; margin-top: 40px; }
  .sh-inj__grid { grid-template-columns: minmax(0, 1fr); }
  .sh-inj__fig { position: static; max-width: 520px; order: -1; }
  .sh-cost__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "sheet" "foot"; row-gap: 32px; }
  .sh-cost__foot { margin-top: 0; }
  .sh-faq__grid { grid-template-columns: minmax(0, 1fr); }
  .sh-faq__head { position: static; }
}
@media (max-width: 940px) {
  .sh-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sh-step:nth-child(-n+2) { padding-bottom: 44px; }
  /* two to a row: the line runs along each row and does not jump between them */
  .sh-step:nth-child(2n)::after { display: none; }
}
@media (max-width: 860px) {
  .sh-qual__grid { grid-template-columns: minmax(0, 1fr); }
  .sh-qual__fig { position: static; max-width: 420px; }
  .sh-cuff__pair, .sh-vs__grid { grid-template-columns: minmax(0, 1fr); }
  .sh-cuff__pair { row-gap: 48px; }
  /* A phone gets the five stories as one row to swipe, with a fade where more waits. */
  .sh-people__row { margin: 0 calc(-1 * clamp(20px, 4vw, 56px)); position: relative; }
  .sh-people__row::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 44px; pointer-events: none; background: linear-gradient(270deg, var(--ink) 10%, rgba(11, 29, 58, 0)); transition: opacity .3s; }
  .sh-people__row.is-end::after { opacity: 0; }
  .sh-page .pt-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(58vw, 260px); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 6px clamp(20px, 4vw, 56px) 4px; scroll-padding-left: clamp(20px, 4vw, 56px); }
  .sh-page .pt-grid::-webkit-scrollbar { display: none; }
  .sh-page .pt-fig { scroll-snap-align: start; }
}
@media (max-width: 760px) {
  :root { --sh-bar: 50px; }
  /* The buttons sit high on a phone: headline, buttons and the line under
     them, then the rest. */
  .sh-hero h1 { order: 0; font-size: clamp(2.05rem, 9vw, 2.6rem); }
  .sh-hero__ctas { order: 1; margin-top: 22px; }
  .sh-hero__after { order: 2; }
  .sh-hero__sub { order: 3; margin-top: 26px !important; font-size: 1.0625rem; }
  /* The film comes after the two facts, as it always has on a phone: any
     higher and it is close enough to the first screen to be fetched on load. */
  .sh-hero__facts { order: 4; margin-top: 46px; grid-template-columns: minmax(0, 1fr); }
  .sh-hero__fig { order: 5; margin-top: 36px; }
  .sh-page .sh-bar a { font-size: .875rem; padding: 14px 6px 13px; min-width: 44px; text-align: center; }
  .sh-bar .container { padding-right: 0; }
  .sh-bar ul { padding-right: 36px; }
  .sh-lede { font-size: 1.0938rem; }
  .sh-fit { padding-left: 56px; }
  /* one stop under another: the line runs down the left edge */
  .sh-steps { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .sh-step, .sh-step:nth-child(-n+2) { padding: 0 0 36px 34px; display: grid; grid-row: auto; grid-template-rows: none; grid-template-columns: 124px minmax(0, 1fr); column-gap: 16px; }
  /* a small square beside the stop's name, the sentence under both */
  .sh-step__media { grid-column: 1; grid-row: 1 / span 2; align-self: start; }
  .sh-step__when { grid-column: 2; grid-row: 1; align-self: end; margin-top: 0 !important; }
  .sh-step h3 { grid-column: 2; grid-row: 2; align-self: start; }
  .sh-step h3 + p { grid-column: 1 / -1; grid-row: 3; margin-top: 14px; }
  .sh-step:last-child { padding-bottom: 0; }
  .sh-step::before { top: 2px; }
  .sh-step:not(:last-child)::after, .sh-step:nth-child(2n):not(:last-child)::after {
    display: block; left: 7px; top: 24px; width: 2px; height: calc(100% - 26px);
    background: linear-gradient(var(--sh-blue), var(--sh-blue)) top / 100% 0% no-repeat, var(--border);
  }
  .sh-step.is-lit:not(:last-child)::after { background-size: 100% 100%, auto; }
  .sh-step::before, .sh-step::after, .sh-step .sh-step__when { transition-delay: 0s !important; animation-delay: 0s !important; }
  .sh-line { grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; }
  .sh-line__icon { width: 44px; height: 44px; }
  .sh-line__icon svg { width: 22px; height: 22px; }
  .sh-faq__a { padding-right: 8px; }
  .sh-us__pick button { flex: 1 1 100%; text-align: left; }
}

/* ============ reduced motion: every end state, nothing looping ============ */
@media (prefers-reduced-motion: reduce) {
  /* Only what the reveals stage, by name: a blanket rule over every descendant
     also flattens the drawing's needle, beam and halos, the play discs and the
     picture switch. */
  .sh-js [data-r], .sh-js .sh-scale .sh-fit__mark, .sh-js .sh-scale .sh-fit > *, .sh-js [data-r="tear"] .sh-tear__img, .sh-js [data-r="quote"] .sh-quote__mark, .sh-js [data-r="sheet"] .sh-line, .sh-js [data-r="tiles"] .pt-fig { opacity: 1 !important; transform: none !important; }
  .sh-js .sh-scale .sh-fit::before { transform: none !important; }
  .sh-hero__sketch, .sh-hero__frame video, .sh-hero__facts::before, .sh-us__cell, .sh-us__beam, .sh-us__scan, .sh-us__halo, .sh-step::before, .sh-fit__mark path, details[open] > .sh-faq__a { animation: none !important; }
  .sh-js .sh-scale .sh-fit__mark path { stroke-dashoffset: 0 !important; }
  .sh-hero__frame video { transform: scale(1.04) !important; }
}

/* ============ print: the finished page, dark on white ============ */
@media print {
  .sh-bar, .sh-view, .sh-us__pick, .sh-faq__ic, .pt-modal, .sh-hero__sketch, .pt-tile__play { display: none !important; }
  .sh-page main *, .sh-page main *::before, .sh-page main *::after { animation: none !important; transition: none !important; }
  .sh-js [data-r], .sh-js .sh-scale .sh-fit > *, .sh-js .sh-scale .sh-fit__mark, .sh-js [data-r="tear"] .sh-tear__img, .sh-js [data-r="quote"] .sh-quote__mark, .sh-js [data-r="sheet"] .sh-line, .sh-js [data-r="tiles"] .pt-fig { opacity: 1 !important; transform: none !important; }
  .sh-js .sh-scale .sh-fit::before { transform: none !important; }
  .sh-js .sh-scale .sh-fit__mark path { stroke-dashoffset: 0 !important; }
  .sh-us__scan { display: none; }
  .sh-sec { padding: 28px 0; }
  .sh-people, .sh-close, .sh-cuff { background: #fff !important; color: #000 !important; }
  .sh-page main .sh-people h2, .sh-page main .sh-close h2, .sh-page main .sh-people h2 em, .sh-page main .sh-close h2 em,
  .sh-people .sh-lede, .sh-page .pt-fig__cap, .sh-close__in > p, .sh-close__disclaimer { color: #000 !important; }
  .sh-qual__fig, .sh-inj__fig, .sh-faq__head { position: static; }
  .sh-page .pt-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-flow: row; overflow: visible; padding: 0; }
  .sh-step::before { background: var(--sh-blue); border-color: var(--sh-blue); }
  .sh-step:not(:last-child)::after { background: var(--sh-blue); }
}