/* /stem-cell-therapy-spine. The page's own sheet: nothing in it reaches
   another page. It replaces celva-home.css on this page (2026-10-10), so the
   first screen carries only what it draws. Every class here is sp-, except
   the hooks other files or the analytics read: .btn, .hc-bar, .pt-tile,
   #pt-modal, .qz (the shared quiz, left alone). */

:root {
  --sp-nav-h: 81px;   /* the header's reserved height until the script measures it */
  --sp-bar-h: 52px;   /* the whole jump bar, its two hairlines included */
  --sp-r: 6px;
  interpolate-size: allow-keywords;
}
@media (max-width: 900px) { :root { --sp-nav-h: 76px; } }
/* a jump, or keyboard focus, stops clear of the header and the bar */
html { scroll-padding-top: calc(var(--sp-nav-h) + var(--sp-bar-h)); scroll-padding-bottom: 24px; }
/* parts waiting to slide in never widen the page */
.lp-spine main { overflow-x: clip; }
/* the site caps every bare paragraph at 42rem and gives it a bottom margin: here a
   paragraph fills its column, and each block sets its own spacing (kept at the
   weight of a bare `p`, so any class below outranks it) */
:where(.lp-spine :is(.sp-hero, .sp-sec, .sp-end)) p { max-width: none; margin: 0; }
.lp-spine :is(.sp-hero, .sp-sec, .sp-end, .hc-bar) a:not(.btn) { border-bottom: 0; }
.sp-wrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 56px); }
/* a heading that takes focus after a jump is read out, not ringed */
.lp-spine [tabindex="-1"]:focus { outline: none; }

/* ---------- Type ---------- */
.sp-sec h2, .sp-end h2 {
  font-family: var(--font-display); font-weight: 300; color: var(--ink);
  font-size: clamp(2rem, 3.3vw, 3rem); line-height: 1.08; letter-spacing: -0.015em; margin: 0;
}
/* a long heading breaks where the italic begins, never mid-phrase */
.sp-hl, .sp-sec h2 > em, .sp-end h2 > em { display: inline-block; }
.sp-sec h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; line-height: 1.2; color: var(--ink); margin: 0; }
.sp-lede { font-size: var(--body-lg-size); line-height: 1.62; color: var(--ink-soft); }
.sp-sec > .sp-wrap > .sp-lede { margin-top: 20px; }
.sp-sec { padding: clamp(56px, 8vw, 116px) 0; }
.sp-sec + .sp-sec:not(.sp-film-band) { border-top: 1px solid var(--border); }

/* ---------- Buttons: the site's, with a press and a focus ring ---------- */
.lp-spine :is(.sp-hero, .sp-sec, .sp-end) .btn {
  min-height: 48px; border-radius: 4px;
  transition: background-color 220ms var(--ease-out-expo), border-color 220ms var(--ease-out-expo), color 220ms var(--ease-out-expo), transform 220ms var(--ease-out-expo), box-shadow 220ms var(--ease-out-expo);
}
.lp-spine :is(.sp-hero, .sp-sec) .btn:not(.btn--ghost):not(.btn--ice) { background: var(--accent-blue); color: #fff; border-color: var(--accent-blue); }
.lp-spine :is(.sp-hero, .sp-sec) .btn:not(.btn--ghost):not(.btn--ice):hover { background: var(--accent-blue-hover); border-color: var(--accent-blue-hover); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.lp-spine :is(.sp-hero, .sp-sec, .sp-end) .btn:active { transform: translateY(1px); box-shadow: none; transition-duration: 80ms; }
.lp-spine :is(.sp-hero, .sp-sec) .btn:not(.btn--ghost):not(.btn--ice):active { background: #143c63; border-color: #143c63; }
.lp-spine .sp-hero .btn--ghost:active { background: rgba(11, 29, 58, 0.06); }
.lp-spine :is(.sp-hero, .sp-sec) .btn:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 3px; }
.lp-spine .sp-film-band .btn:focus-visible, .lp-spine .sp-end .btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.lp-spine .sp-film-band .btn:not(.btn--ghost):not(.btn--ice) { background: var(--accent-ice); border-color: var(--accent-ice); color: var(--ink); }
.lp-spine .sp-film-band .btn:not(.btn--ghost):not(.btn--ice):hover { background: #fff; border-color: #fff; color: var(--ink); }
.lp-spine .sp-end .btn--ice:hover { color: var(--ink); }

/* ---------- Reveals. Nothing is hidden unless the script has said it is
   running (html.sp-anim), and each part is shown again by the script the
   moment it is on screen, jumped to, or printed. ---------- */
[data-r] { transition: opacity 700ms var(--ease-out-expo), transform 900ms var(--ease-out-expo); }
html.sp-anim [data-r]:not(.is-in) { opacity: 0; }
html.sp-anim [data-r="up"]:not(.is-in) { transform: translateY(24px); }
html.sp-anim [data-r="left"]:not(.is-in) { transform: translateX(-36px); }
html.sp-anim [data-r="right"]:not(.is-in) { transform: translateX(36px); }
html.sp-anim [data-r="unveil"]:not(.is-in) { transform: scale(0.965); }

@keyframes sp-settle { from { transform: scale(1.1); } to { transform: scale(1.04); } }
@keyframes sp-rule { from { transform: scaleX(0); } to { transform: none; } }
@keyframes sp-halo { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.55); } 100% { box-shadow: 0 0 0 18px rgba(255, 255, 255, 0); } }
@keyframes sp-ring { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.12); opacity: 0.55; } }
@keyframes sp-bloom { from { transform: scale(0.2); opacity: 0; } to { transform: none; opacity: 0.92; } }
@keyframes sp-cell { from { transform: translateX(16px) scale(0.3); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sp-pop { 0% { transform: scale(0.6); } 55% { transform: scale(1.4); } 100% { transform: scale(1); } }
@keyframes sp-scan { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes sp-lift { from { transform: translateY(16px) scale(0.985); } to { transform: none; } }
@keyframes sp-swap { from { opacity: 0.35; } to { opacity: 1; } }

/* ---------- Hero: the headline across the top, the copy and the film
   under it. It paints finished; only the film settles. ---------- */
.sp-hero { padding: clamp(28px, 3.4vw, 52px) 0 clamp(26px, 3vw, 40px); }
.sp-hero__grid { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(0, 0.78fr); column-gap: clamp(32px, 5.5vw, 88px); align-items: start; }
.sp-hero h1 {
  grid-column: 1 / -1; font-family: var(--font-display); font-weight: 300; color: var(--ink);
  font-size: clamp(2.15rem, 4.2vw, 3.6rem); line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 clamp(22px, 2.6vw, 38px);
}
.sp-hero__copy { grid-column: 1; }
.sp-hero__sub { font-size: var(--body-lg-size); line-height: 1.62; color: var(--ink-soft); }
.sp-hero__ctas { display: flex; flex-wrap: wrap; gap: 14px 16px; margin-top: 30px; }
.lp-spine .sp-hero .sp-hero__next { margin-top: 14px; font-size: 14px; line-height: 1.5; color: var(--ink-muted); }
.sp-facts { grid-column: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 0 36px; margin-top: 34px; padding-top: 22px; position: relative; }
.sp-facts::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--border-strong); transform-origin: left; animation: sp-rule 1100ms var(--ease-out-expo) 200ms both; }
.sp-fact__n { font-family: var(--font-display); font-size: 1.6rem; line-height: 1.15; color: var(--ink); }
.sp-fact__n em { color: var(--accent-blue); }
.lp-spine .sp-hero .sp-fact__text { margin-top: 8px; font-size: 15px; line-height: 1.55; color: var(--ink-muted); }
.lp-spine .sp-hero .sp-reviewed { margin-top: 12px; font-size: 13px; color: var(--ink-muted); }

/* A film frame: the poster under the clip, so a clip that fails still shows the picture. */
.sp-film { position: relative; margin: 0; border-radius: var(--sp-r); overflow: hidden; background: #0b1d3a; }
.sp-film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-film video[width][height] { height: 100%; }
.sp-hero__film { grid-column: 2; grid-row: 2 / span 2; aspect-ratio: 5 / 6; background: #0b1d3a url('../images/spine-hero-poster.webp') center / cover no-repeat; }
/* the same 4% push-in the frame has always had; it eases into it once */
.sp-hero__film video { transform: scale(1.04); animation: sp-settle 1600ms var(--ease-out-expo) both; }
.sp-film__pause {
  position: absolute; left: 12px; bottom: 12px; width: 44px; height: 44px; padding: 0; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.5); background: rgba(11, 29, 58, 0.6); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}
.sp-film__pause[hidden] { display: none; }
.sp-film__pause:hover { background: rgba(11, 29, 58, 0.86); transform: scale(1.06); }
.sp-film__pause:active { transform: scale(0.94); }
.sp-film__pause:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.sp-film__pause svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; }
.sp-film__tri { display: none; fill: #fff; stroke: none; }
.sp-film__pause.is-paused .sp-film__bars { display: none; }
.sp-film__pause.is-paused .sp-film__tri { display: inline; }

/* ---------- The bar that follows the reader ---------- */
.hc-bar {
  position: sticky; top: var(--sp-nav-h); z-index: 40; background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: saturate(180%) blur(10px); backdrop-filter: saturate(180%) blur(10px);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  transition: box-shadow var(--dur-base) var(--ease-out-expo), opacity var(--dur-base) var(--ease-standard), visibility 0s;
}
.hc-bar.is-on { box-shadow: 0 10px 24px -20px rgba(11, 29, 58, 0.5); }
/* how far through the page the reader is, drawn along the bar's upper edge while it rides */
.hc-bar::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--accent-blue); transform-origin: left; transform: scaleX(var(--sp-read, 0)); opacity: 0; transition: opacity var(--dur-base) var(--ease-standard); }
.hc-bar.is-on::before { opacity: 1; }
.hc-bar.is-end { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--dur-base) var(--ease-standard), visibility 0s var(--dur-base); }
.hc-bar__list { list-style: none; margin: 0 -10px; padding: 0; display: flex; gap: clamp(0px, calc(2vw - 14px), 16px); overflow-x: auto; scrollbar-width: none; }
.hc-bar__list::-webkit-scrollbar { display: none; }
.hc-bar__list a {
  position: relative; display: flex; align-items: center; min-height: calc(var(--sp-bar-h) - 2px); padding: 0 10px;
  font-size: 14px; white-space: nowrap; color: var(--ink-muted); transition: color var(--dur-fast) var(--ease-standard);
}
.hc-bar__list a::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; background: var(--accent-blue); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-base) var(--ease-out-expo); }
.hc-bar__list a:hover { color: var(--ink); }
.hc-bar__list a:hover::after { transform: scaleX(0.35); }
.hc-bar__list a:active { color: var(--accent-blue); }
.hc-bar__list a[aria-current] { color: var(--ink); }
.hc-bar__list a[aria-current]::after { transform: scaleX(1); }
.hc-bar__list a:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: -3px; border-radius: 4px; }

/* ---------- Who qualifies: the reader's history and the reading room on
   one side, the six cases down the other, the two declines first ---------- */
.sp-qual__grid { display: grid; grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr); gap: clamp(32px, 5.5vw, 84px); align-items: start; margin-top: clamp(28px, 3.4vw, 44px); }
/* the side is taller than a screen: it scrolls with the page until its foot reaches
   the foot of the screen, then waits there while the six cases finish */
.sp-qual__side { position: sticky; bottom: 24px; align-self: end; }
.sp-qual__photo { margin: 28px 0 0; border-radius: var(--sp-r); overflow: hidden; aspect-ratio: 5 / 6; background: #0b1d3a; }
.sp-qual__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sp-qual__photo img[width][height] { height: 100%; }
.sp-fit { list-style: none; margin: 0; padding: 0; }
.sp-fit__row { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 18px; padding: 24px 0; border-top: 1px solid var(--border); }
.sp-fit__row:last-child { border-bottom: 1px solid var(--border); }
/* the two cases we turn away stand apart: this is the page's one tinted surface */
.sp-fit__row--no { background: var(--accent-wash); border-top: 0; padding: 24px 22px; }
.sp-fit__row--no:first-child { border-radius: var(--sp-r) var(--sp-r) 0 0; }
.sp-fit__row--no + .sp-fit__row--no { border-top: 1px solid rgba(11, 29, 58, 0.1); border-radius: 0 0 var(--sp-r) var(--sp-r); }
.sp-fit__row--no + .sp-fit__row:not(.sp-fit__row--no) { border-top: 0; }
.sp-fit__row:nth-child(2) { transition-delay: 70ms; }
.sp-fit__row:nth-child(3) { transition-delay: 140ms; }
.sp-fit__row:nth-child(4) { transition-delay: 210ms; }
.sp-fit__ic { width: 28px; height: 28px; margin-top: 1px; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sp-fit__ic circle { stroke: var(--accent-blue); stroke-width: 1.2; opacity: 0.45; }
.sp-fit__ic .d { stroke: var(--accent-blue); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 800ms var(--ease-out-expo) 320ms; }
.sp-fit__ic--no circle, .sp-fit__ic--no .d { stroke: var(--ink-muted); }
html.sp-anim [data-r]:not(.is-in) .sp-fit__ic .d { stroke-dashoffset: 1; }
.sp-fit__status { font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--accent-blue-hover); }
.sp-fit__row--no .sp-fit__status { color: var(--ink-muted); }
.sp-fit h3 { margin-top: 6px; }
.sp-fit h3 + p { margin-top: 10px; font-size: 16px; line-height: 1.65; color: var(--ink-soft); }

/* what a section leaves the reader with, and its one button */
.sp-close { margin-top: clamp(36px, 4.4vw, 60px); padding-top: 26px; border-top: 1px solid var(--border); }
.sp-close p { font-size: 1.125rem; line-height: 1.6; color: var(--ink); }
.sp-close .btn { margin-top: 22px; }

/* ---------- The injection: what the live X-ray shows, drawn; then the
   film of the rooms beside the four steps ---------- */
.sp-proc__top { display: grid; grid-template-columns: minmax(0, 1fr) clamp(220px, 21vw, 280px); gap: clamp(28px, 5vw, 72px); align-items: start; margin-top: 20px; }
.sp-proc__film { aspect-ratio: 4 / 5; }
.sp-fluoro { margin: 0; position: sticky; top: calc(var(--sp-nav-h) + var(--sp-bar-h) + 24px); }
.sp-fluoro svg { display: block; width: 100%; height: auto; max-height: calc(100vh - var(--sp-nav-h) - var(--sp-bar-h) - 48px); border-radius: 14px; }
.sp-fluoro__screen { fill: #0b1d3a; }
.sp-fluoro__field { fill: #16356b; }
.sp-fluoro__bone rect, .sp-fluoro__bone path { fill: rgba(255, 255, 255, 0.17); stroke: rgba(255, 255, 255, 0.7); stroke-width: 1.5; stroke-linejoin: round; }
.sp-fluoro__disc rect { fill: rgba(124, 169, 209, 0.22); }
.sp-fluoro__ring { fill: none; stroke: var(--accent-ice); stroke-width: 2; stroke-dasharray: 5 6; transform-box: fill-box; transform-origin: center; }
.sp-fluoro__needle path { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; }
.sp-fluoro__needle .sp-fluoro__hub { stroke-width: 7; }
.sp-fluoro__dye { fill: #fff; opacity: 0.4; transform-box: fill-box; transform-origin: 80% 50%; }
.sp-fluoro__cells circle { fill: var(--accent-ice); stroke: #0b1d3a; stroke-width: 1; transform-box: fill-box; transform-origin: center; }
/* The drawing follows the four steps beside it: the level is ringed, the
   needle comes up to the spine, it reaches the disc and the dye marks it,
   the cells follow. Where the steps sit under it (a phone) the same four
   beats run once, on a clock. Without the script, or with less motion asked
   for, it is simply drawn. */
.sp-fluoro__needle { transition: transform 900ms var(--ease-out-expo), opacity 300ms linear; }
.sp-fluoro__dye { transition: opacity 600ms var(--ease-standard); }
.sp-fluoro[data-stage="0"] .sp-fluoro__ring { opacity: 0; }
.sp-fluoro:is([data-stage="0"], [data-stage="1"]) .sp-fluoro__needle { transform: translate(120px, 21px); opacity: 0; }
.sp-fluoro[data-stage="2"] .sp-fluoro__needle { transform: translate(70px, 12px); }
.sp-fluoro:is([data-stage="0"], [data-stage="1"], [data-stage="2"]) .sp-fluoro__dye { opacity: 0; }
.sp-fluoro:is([data-stage="0"], [data-stage="1"], [data-stage="2"], [data-stage="3"]) .sp-fluoro__cells circle { opacity: 0; }
.sp-fluoro[data-stage="1"] .sp-fluoro__ring, .sp-fluoro[data-stage="2"] .sp-fluoro__ring { animation: sp-ring 1400ms var(--ease-standard) 2; }
.sp-fluoro[data-stage="3"] .sp-fluoro__dye { opacity: 0.92; animation: sp-bloom 700ms var(--ease-out-expo) both; }
.sp-fluoro[data-stage="4"] .sp-fluoro__cells circle { animation: sp-cell 700ms var(--ease-out-expo) both; }
.sp-fluoro[data-stage="4"] .sp-fluoro__cells circle:nth-child(2) { animation-delay: 90ms; }
.sp-fluoro[data-stage="4"] .sp-fluoro__cells circle:nth-child(3) { animation-delay: 180ms; }
.sp-fluoro[data-stage="4"] .sp-fluoro__cells circle:nth-child(4) { animation-delay: 270ms; }
.sp-fluoro[data-stage="4"] .sp-fluoro__cells circle:nth-child(5) { animation-delay: 360ms; }
.sp-fluoro[data-stage="4"] .sp-fluoro__cells circle:nth-child(6) { animation-delay: 450ms; }
.sp-fluoro[data-stage="4"] .sp-fluoro__cells circle:nth-child(7) { animation-delay: 540ms; }

.sp-proc__body { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: clamp(32px, 5vw, 76px); align-items: start; margin-top: clamp(40px, 5vw, 68px); }
/* a rail of four points, one connector per gap, nothing after the last */
.sp-steps { list-style: none; margin: 0; padding: 0; }
.sp-step { position: relative; padding: 0 0 clamp(30px, 3.4vw, 44px) 40px; }
.sp-step:last-child { padding-bottom: 0; }
.sp-step::before { content: ''; position: absolute; left: 0; top: 4px; width: 14px; height: 14px; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--accent-blue); background: var(--accent-blue); transition: background var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-out-expo); }
.sp-step:not(:last-child)::after { content: ''; position: absolute; left: 6px; top: 22px; bottom: 0; width: 2px; background: linear-gradient(var(--accent-blue), var(--accent-blue)) no-repeat top / 100% 100%, var(--border); transition: background-size 700ms var(--ease-out-expo); }
html.sp-led .sp-step:not(.is-on)::before { background: #fff; border-color: var(--border-strong); }
html.sp-led .sp-step:not(.is-on)::after { background-size: 100% 0%, auto; }
html.sp-led .sp-step.is-on::before, html.sp-led .sp-day__stop.is-on::before { animation: sp-pop 520ms var(--ease-out-expo); }
.sp-step__name { font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--accent-blue-hover); }
.sp-step h3 { margin-top: 6px; }
.sp-step h3 + p { margin-top: 10px; font-size: 16px; line-height: 1.68; color: var(--ink-soft); }
.lp-spine .sp-proc .sp-note { margin-top: clamp(36px, 4.4vw, 60px); padding-left: 20px; border-left: 2px solid var(--accent-blue); font-size: 1.125rem; line-height: 1.6; color: var(--ink); }

/* ---------- Patient films: a tile is one button ---------- */
.sp-story { margin: 0; }
.pt-tile { position: relative; display: block; width: 100%; aspect-ratio: 3 / 4; padding: 0; border: 0; border-radius: var(--sp-r); overflow: hidden; background: #0b1d3a; cursor: pointer; }
.pt-tile__loop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1200ms var(--ease-out-expo); }
.pt-tile:hover .pt-tile__loop { transform: scale(1.04); }
.pt-tile__play { position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%; background: #fff; display: grid; place-items: center; transition: transform var(--dur-base) var(--ease-out-expo); }
.pt-tile__play svg { width: 22px; height: 22px; fill: var(--ink); margin-left: 3px; }
.pt-tile:hover .pt-tile__play { transform: scale(1.1); }
.pt-tile:active .pt-tile__play { transform: scale(0.94); transition-duration: 80ms; }
.pt-tile:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 4px; }
.sp-story--dark .pt-tile:focus-visible { outline-color: #fff; }
/* once, as the tile arrives: this one plays */
html.sp-anim .sp-story.is-in .pt-tile__play { animation: sp-halo 1100ms var(--ease-out-expo) 500ms 2; }
.pt-fig__cap { margin-top: 12px; font-size: 15px; line-height: 1.4; color: var(--ink-muted); }
.sp-story--dark .pt-fig__cap { color: rgba(255, 255, 255, 0.82); }

/* ---------- A drawing and its illustrated MRI: one frame, a switch
   under it, and a control to open either at full size ---------- */
.sp-pair { position: relative; margin: 0; }
.sp-pair__pics { position: relative; display: block; overflow: hidden; border-radius: var(--sp-r); background: #0b1220; }
.sp-pair__pics picture { display: block; width: 100%; height: 100%; }
.sp-pair__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sp-pair__pics img[width][height] { height: 100%; }
.sp-pair__mri { position: absolute; inset: 0; opacity: 0; transition: opacity 500ms var(--ease-standard); pointer-events: none; }
.sp-pair[data-view="mri"] .sp-pair__mri { opacity: 1; transition-duration: 0s; animation: sp-scan 650ms var(--ease-out-expo); }
/* scripts off: a pointer still fades the drawing to its MRI, as it always has */
@media (hover: hover) { html:not(.sp-js) .sp-pair__pics:hover .sp-pair__mri { opacity: 1; transition-duration: 1500ms; } }
.sp-pair--disc .sp-pair__pics { aspect-ratio: 4 / 3; }
.sp-pair--sq .sp-pair__pics { aspect-ratio: 1; }
.sp-pair--wide .sp-pair__pics { aspect-ratio: 2 / 1; }
/* per-drawing framing, carried from the cards these replace: disc tight, facet on the lit joint, arm wider and higher */
.sp-pair--wide .sp-pair__art { object-position: var(--pos, center); transform: scale(var(--z, 1.08)); transform-origin: var(--pos, center); transition: transform 1200ms var(--ease-out-expo); }
.sp-pair--wide .sp-pair__pics:hover .sp-pair__art { transform: scale(calc(var(--z, 1.08) + 0.08)); }
.sp-pair--wide .sp-pair__art[src*="cervical-disc"] { --z: 1.62; }
.sp-pair--wide .sp-pair__art[src*="cervical-facet"] { --z: 1.4; --pos: 56% 42%; }
.sp-pair--wide .sp-pair__art[src*="cervical-arm"] { --z: 1.02; --pos: 50% 100%; }
.sp-pair__bar { display: none; }
html.sp-js .sp-pair__bar { display: flex; align-items: center; margin-top: 10px; }
.sp-pair__sw, .sp-zoom__sw { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 4px; overflow: hidden; background: #fff; }
.sp-pair__opt { min-height: 44px; padding: 0 12px; border: 0; background: #fff; color: var(--ink-soft); font-family: var(--font-body); font-size: 14px; font-weight: 500; line-height: 1; white-space: nowrap; cursor: pointer; transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard); }
.sp-pair__opt + .sp-pair__opt { border-left: 1px solid var(--border-strong); }
.sp-pair__opt:hover { background: var(--accent-wash); color: var(--ink); }
.sp-pair__opt:active { background: #d9e6f3; }
.sp-pair__opt[aria-pressed="true"] { background: var(--ink); color: #fff; }
.sp-pair__opt:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: -4px; }
.sp-pair__opt[aria-pressed="true"]:focus-visible { outline-color: #fff; }
.sp-pair__zoom, .sp-zoom__close, .sp-zoom__step, .sp-player__close {
  width: 44px; height: 44px; padding: 0; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.5); background: rgba(6, 16, 34, 0.66); color: #fff; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}
.sp-pair__zoom { position: absolute; top: 10px; right: 10px; display: none; }
html.sp-js .sp-pair__zoom { display: grid; }
.sp-pair__zoom svg, .sp-zoom__close svg, .sp-zoom__step svg, .sp-player__close svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
:is(.sp-pair__zoom, .sp-zoom__close, .sp-zoom__step, .sp-player__close):hover { background: rgba(6, 16, 34, 0.92); transform: scale(1.06); }
:is(.sp-pair__zoom, .sp-zoom__close, .sp-zoom__step, .sp-player__close):active { transform: scale(0.94); }
:is(.sp-pair__zoom, .sp-zoom__close, .sp-zoom__step, .sp-player__close):focus-visible { outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px var(--accent-blue); }

/* ---------- Discs: one patient beside two cases ---------- */
.sp-discs__grid { display: grid; grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr); gap: clamp(32px, 5vw, 76px); align-items: start; margin-top: clamp(36px, 4.4vw, 56px); }
.sp-discs .sp-story { position: sticky; top: calc(var(--sp-nav-h) + var(--sp-bar-h) + 24px); }
.sp-case { padding: 30px 0; border-top: 1px solid var(--border); }
.sp-case:first-child { padding-top: 0; border-top: 0; }
.sp-case:last-child { padding-bottom: 0; }
.sp-case__name, .sp-vs__name { font-family: var(--font-display); font-size: clamp(1.6rem, 2.1vw, 1.95rem); line-height: 1.15; color: var(--ink); }
.sp-case h3, .sp-vs h3 { margin-top: 8px; font-family: var(--font-body); font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--accent-blue-hover); }
.sp-case ul, .sp-vs ul { list-style: none; margin: 16px 0 0; padding: 0; }
.sp-case li, .sp-vs li { position: relative; padding: 10px 0 10px 24px; font-size: 16px; line-height: 1.62; color: var(--ink-soft); }
.sp-case li::before, .sp-vs li::before { content: ''; position: absolute; left: 0; top: 22px; width: 12px; height: 1.5px; background: var(--accent-blue); }
@media (min-width: 1081px) {
  /* the tall render is a column beside the text, its top level with the case's name */
  .sp-case { display: grid; grid-template-columns: minmax(0, 1fr) 230px; grid-template-rows: auto auto 1fr; column-gap: clamp(24px, 3vw, 44px); align-items: start; }
  .sp-case > :not(.sp-pair) { grid-column: 1; }
  .sp-case > .sp-pair { grid-column: 2; grid-row: 1 / span 3; }
  /* the tall render's own shape (900 x 1414), held before it loads so nothing below moves */
  .sp-pair--disc .sp-pair__pics { aspect-ratio: 900 / 1414; }
}
@media (max-width: 1080px) {
  .sp-case { display: flex; flex-direction: column; }
  .sp-case > .sp-pair { order: -1; margin-bottom: 22px; }
}

/* ---------- Sciatica: the quiet one ---------- */
.sp-sci__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: clamp(32px, 5vw, 72px); align-items: start; margin-top: clamp(24px, 3vw, 36px); }
.sp-sci__ask { margin-top: 20px; font-size: 1.125rem; line-height: 1.6; color: var(--ink); }
.sp-sci__copy .btn { margin-top: 26px; }

/* ---------- Neck: three cases, parts lined up across the row ---------- */
.sp-neck__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(20px, 2.6vw, 36px); margin-top: clamp(36px, 4.4vw, 56px); }
.sp-neckcard { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 0; }
.sp-neckcard:nth-child(2) { transition-delay: 90ms; }
.sp-neckcard:nth-child(3) { transition-delay: 180ms; }
.sp-neckcard h3 { margin-top: 20px; }
.sp-neckcard h3 + p { margin-top: 10px; font-size: 16px; line-height: 1.65; color: var(--ink-soft); }
@supports not (grid-template-rows: subgrid) { .sp-neckcard { display: block; } }

/* ---------- A fusion, or cells at the level: two columns and the
   patient who has had the first ---------- */
.sp-fus__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) clamp(240px, 22vw, 290px); gap: 0 clamp(28px, 3.6vw, 52px); margin-top: 20px; }
.sp-fus__grid > .sp-lede { grid-column: 1 / span 2; }
.sp-fus__grid > .sp-story { grid-column: 3; grid-row: 1 / span 2; align-self: start; }
.sp-vs { margin-top: clamp(32px, 4vw, 48px); padding-top: 26px; border-top: 2px solid var(--ink); }
.sp-vs--cells { border-top-color: var(--accent-blue); }
.sp-vs__art { display: block; width: 116px; height: 116px; margin-bottom: 16px; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sp-vs__art .b { stroke: var(--ink); stroke-width: 1.6; }
.sp-vs__art .k { stroke: var(--ink); stroke-width: 1.6; fill: var(--accent-wash); }
.sp-vs__art .d { stroke: var(--accent-blue); stroke-width: 3; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 900ms var(--ease-out-expo) 350ms; }
.sp-vs__art .d + .d { transition-delay: 800ms; }
.sp-vs__art .d + .d + .d { transition-delay: 1000ms; }
.sp-vs__art .c { fill: var(--accent-blue); stroke: none; transition: opacity 400ms linear 1100ms; }
html.sp-anim [data-r]:not(.is-in) .sp-vs__art .d { stroke-dashoffset: 1; }
html.sp-anim [data-r]:not(.is-in) .sp-vs__art .c { opacity: 0; }

/* ---------- The day: four stops in a row, each with its clip; the line
   runs stop to stop as the row arrives ---------- */
.sp-day__row { list-style: none; margin: clamp(40px, 4.8vw, 60px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(18px, 2.2vw, 30px); }
.sp-day__stop { position: relative; display: grid; grid-template-rows: subgrid; grid-row: span 3; padding-top: 32px; }
.sp-day__stop::before { content: ''; position: absolute; left: 0; top: 0; width: 14px; height: 14px; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--accent-blue); background: var(--accent-blue); transition: background var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard); }
.sp-day__stop:not(:last-child)::after { content: ''; position: absolute; left: 20px; top: 6px; width: calc(100% + clamp(18px, 2.2vw, 30px) - 26px); height: 2px; background: linear-gradient(var(--accent-blue), var(--accent-blue)) no-repeat left / 100% 100%, var(--border); transition: background-size 800ms var(--ease-out-expo); }
html.sp-led .sp-day__stop:not(.is-on)::before { background: #fff; border-color: var(--border-strong); }
html.sp-led .sp-day__stop:not(.is-on)::after { background-size: 0% 100%, auto; }
.sp-day__clip { position: relative; margin: 0; width: 100%; align-self: start; aspect-ratio: 1; border-radius: var(--sp-r); overflow: hidden; background: #0b1d3a; }
.sp-day__clip video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-day__clip video[width][height] { height: 100%; }
.sp-day__head { margin-top: 18px; }
.sp-day__name { font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--accent-blue-hover); }
.sp-day__stop h3 { margin-top: 6px; font-size: 1.4rem; }
.lp-spine .sp-day .sp-day__text { margin-top: 10px; font-size: 16px; line-height: 1.65; color: var(--ink-soft); }
@supports not (grid-template-rows: subgrid) { .sp-day__stop { display: block; } }

/* ---------- One patient, on navy ---------- */
.sp-film-band { background: var(--navy-brand); color: #fff; }
.sp-film-band h2 { color: #fff; }
.sp-film-band h2 em { color: var(--accent-ice); }
.sp-film-band .sp-lede { color: rgba(255, 255, 255, 0.84); }
.sp-film-band__grid { display: grid; grid-template-columns: minmax(0, 1fr) clamp(260px, 26vw, 340px); grid-template-rows: auto 1fr; gap: 0 clamp(32px, 6vw, 96px); align-items: start; margin-top: clamp(24px, 3vw, 36px); }
.sp-film-band__grid > .sp-story { grid-column: 2; grid-row: 1 / span 2; }
.sp-film-band__cta { grid-column: 1; grid-row: 2; margin-top: 30px; }

/* the quiz is the shared one and styles itself; here it only gets its band */
.lp-spine #fit.qz { border-top: 0; }

/* ---------- Questions ---------- */
.sp-faq__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.sp-faq__head { position: sticky; top: calc(var(--sp-nav-h) + var(--sp-bar-h) + 28px); }
.sp-faq__head .sp-lede { margin-top: 18px; }
.sp-faq__head .btn { margin-top: 26px; }
.sp-faq__list details { border-top: 1px solid var(--border); }
.sp-faq__list details:last-child { border-bottom: 1px solid var(--border); }
.sp-faq__list summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 44px; padding: 20px 0; cursor: pointer; list-style: none; font-family: var(--font-display); font-size: 1.4rem; line-height: 1.25; color: var(--ink); transition: color var(--dur-fast) var(--ease-standard); }
.sp-faq__list summary::-webkit-details-marker { display: none; }
.sp-faq__list summary::after { content: ''; flex: none; width: 14px; height: 14px; background: linear-gradient(var(--accent-blue), var(--accent-blue)) center / 100% 2px no-repeat, linear-gradient(var(--accent-blue), var(--accent-blue)) center / 2px 100% no-repeat; transition: transform var(--dur-base) var(--ease-out-expo); }
.sp-faq__list details[open] > summary::after { transform: rotate(45deg); }
.sp-faq__list summary:hover { color: var(--accent-blue); }
.sp-faq__list summary:active { color: var(--accent-blue-hover); }
.sp-faq__list summary:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 2px; border-radius: 4px; }
.sp-faq__a { padding: 0 44px 24px 0; font-size: 16px; line-height: 1.7; color: var(--ink-soft); }
.sp-faq__list details::details-content { block-size: 0; overflow: clip; transition: block-size 380ms var(--ease-out-expo), content-visibility 380ms allow-discrete; }
.sp-faq__list details[open]::details-content { block-size: auto; }

/* ---------- The closing call: narrow and centred on purpose ---------- */
.sp-end { background: var(--navy-brand); color: #fff; text-align: center; padding: clamp(72px, 9vw, 128px) 0; }
.sp-end__in { max-width: 760px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); }
.sp-end h2 { color: #fff; font-size: clamp(2.1rem, 3.8vw, 3.3rem); }
.sp-end h2 em { color: var(--accent-ice); }
.lp-spine .sp-end__in > p { margin: 22px 0 34px; font-size: 17px; line-height: 1.7; color: rgba(255, 255, 255, 0.84); }
.sp-end__disclaimer { margin-top: 30px; font-size: 13px; line-height: 1.6; color: rgba(255, 255, 255, 0.68); }

/* ---------- The two dialogs. The page behind neither scrolls nor takes a
   tab while one is open. A browser without :has() drops the first pair, so
   the page script also puts sp-dlg on the root while a dialog is open. ---------- */
html:has(dialog[open]) { scrollbar-gutter: stable; }
body:has(dialog[open]) { overflow: hidden; }
html.sp-dlg { scrollbar-gutter: stable; }
html.sp-dlg body { overflow: hidden; }
.sp-player, .sp-zoom { border: 0; padding: 0; background: transparent; color: #fff; overflow: visible; max-width: none; max-height: none; }
.sp-player::backdrop, .sp-zoom::backdrop { background: rgba(6, 16, 34, 0.9); }
.sp-player, .sp-player::backdrop, .sp-zoom, .sp-zoom::backdrop { opacity: 0; transition: opacity var(--dur-base) var(--ease-out-expo), display var(--dur-base) allow-discrete, overlay var(--dur-base) allow-discrete; }
.sp-player[open], .sp-player[open]::backdrop, .sp-zoom[open], .sp-zoom[open]::backdrop { opacity: 1; }
@starting-style { .sp-player[open], .sp-player[open]::backdrop, .sp-zoom[open], .sp-zoom[open]::backdrop { opacity: 0; } }
.sp-player__frame { position: relative; aspect-ratio: 16 / 9; width: min(94vw, 1100px, calc((100vh - 124px) * 16 / 9)); background: #000; border-radius: var(--sp-r); overflow: hidden; }
.sp-player__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity 300ms linear; }
.sp-player__frame.is-ready iframe { opacity: 1; }
/* until the player has painted, the story's own poster and name hold the frame */
.sp-player__hold { position: absolute; inset: 0; background: #0b1d3a center / cover no-repeat; display: flex; align-items: flex-end; padding: 18px 20px; font-size: 15px; color: #fff; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.8); transition: opacity 300ms linear; }
.sp-player__frame.is-ready .sp-player__hold { opacity: 0; pointer-events: none; }
.sp-player__close { position: absolute; right: 0; top: -54px; }
/* a dialog arrives: its content rises a little as the backdrop fades in */
.sp-player[open] .sp-player__frame, .sp-zoom[open] .sp-zoom__fig { animation: sp-lift 480ms var(--ease-out-expo); }

.sp-zoom__fig { margin: 0; }
.sp-zoom__img { display: block; object-fit: contain; background: #0b1220; border-radius: 4px; }
.sp-zoom__img.is-swap { animation: sp-swap 320ms var(--ease-standard); }
.sp-zoom__cap { margin-top: 12px; min-height: 44px; display: flex; align-items: center; font-size: 15px; line-height: 1.35; padding-right: 230px; }
.sp-zoom__sw { position: absolute; right: 0; bottom: 0; border-color: rgba(255, 255, 255, 0.5); }
.sp-zoom__close { position: absolute; top: 10px; right: 10px; }
.sp-zoom__step { position: absolute; top: calc(50% - 28px); margin-top: -22px; }
.sp-zoom__step--prev { left: 10px; }
.sp-zoom__step--next { right: 10px; }
.sp-zoom__now { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---------- Narrower ---------- */
@media (max-width: 1080px) {
  .sp-proc__body { grid-template-columns: minmax(0, 1fr); }
  .sp-fluoro { position: static; max-width: 300px; }
  .sp-fus__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sp-fus__grid > .sp-story { grid-column: 1 / -1; grid-row: auto; max-width: 300px; margin-top: 28px; }
  .sp-day__row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
  .sp-day__stop { padding-top: 0; }
  .sp-day__stop::before, .sp-day__stop::after { display: none; }
}
@media (max-width: 900px) {
  .sp-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .sp-hero__copy, .sp-hero__film, .sp-facts { grid-column: 1; grid-row: auto; }
  .sp-hero__film { margin-top: 32px; max-width: 520px; width: 100%; }
  .sp-qual__grid, .sp-discs__grid, .sp-sci__grid, .sp-faq__grid, .sp-film-band__grid { grid-template-columns: minmax(0, 1fr); }
  .sp-discs .sp-story, .sp-faq__head, .sp-qual__side { position: static; }
  .sp-discs .sp-story, .sp-film-band .sp-story { max-width: 260px; }
  .sp-film-band__grid > .sp-story { grid-column: 1; grid-row: auto; margin-top: 28px; }
  .sp-film-band__cta { grid-row: auto; }
  .sp-neck__row { grid-template-columns: minmax(0, 1fr); row-gap: 36px; }
  .sp-neckcard { display: block; }
  /* its track overflows here: the edges fade so a cut-off word reads as "more this way" */
  .hc-bar__list { margin: 0 calc(-1 * clamp(20px, 4vw, 56px)); padding: 0 calc(clamp(20px, 4vw, 56px) - 10px); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 30px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 30px), transparent 100%); }
}
@media (max-width: 700px) {
  /* a phone: the buttons come straight after the headline, as they always have here */
  .sp-hero__copy { display: contents; }
  .sp-hero h1 { order: 0; margin-bottom: 0; }
  .sp-hero__ctas { order: 1; margin-top: 24px; }
  .lp-spine .sp-hero .sp-hero__next { order: 2; }
  .sp-hero__sub { order: 3; margin-top: 26px; font-size: 17px; }
  .sp-facts { order: 4; grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 40px; }
  .lp-spine .sp-hero .sp-reviewed { order: 2; }
  /* last, as it has always been on a phone: at 390 x 844 the loop is then more than
     lazy-video.js's 250px below the first screen, so it is not fetched with it */
  .sp-hero__film { order: 6; margin-top: 32px; }
  .sp-lede { font-size: 17px; }
  .sp-proc__top { grid-template-columns: minmax(0, 1fr); }
  .sp-proc__film { max-width: 300px; }
  .sp-fluoro { max-width: 230px; }
  .sp-fit__row--no { padding: 22px 16px; }
  .sp-fus__grid { grid-template-columns: minmax(0, 1fr); }
  .sp-fus__grid > .sp-lede { grid-column: 1; }
  .sp-fus__grid > .sp-story { max-width: 260px; }
  /* a stop is its clip beside its name, the paragraph under both */
  .sp-day__row { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  .sp-day__stop { display: grid; grid-template-columns: 116px minmax(0, 1fr); grid-template-rows: auto auto; grid-row: auto; column-gap: 16px; align-items: start; }
  .sp-day__clip { grid-column: 1; }
  .sp-day__head { grid-column: 2; margin-top: 0; }
  .lp-spine .sp-day .sp-day__text { grid-column: 1 / -1; margin-top: 14px; }
  .sp-faq__list summary { font-size: 1.25rem; }
  .sp-faq__a { padding-right: 0; }
  .sp-zoom__cap { padding-right: 0; }
  .sp-zoom__sw { position: static; margin-top: 4px; }
  .sp-zoom__step { top: calc(50% - 56px); }
}
/* a short, wide window (a phone on its side): both dialogs still fit */
@media (max-height: 420px) {
  .sp-player__close { top: 6px; right: -54px; }
  .sp-player__frame { width: min(calc(94vw - 120px), calc((100vh - 32px) * 16 / 9)); }
  /* no room under the picture: its name and the switch sit on its lower edge */
  .sp-zoom__cap { position: absolute; left: 10px; bottom: 10px; margin: 0; padding: 0 12px; max-width: calc(100% - 250px); background: rgba(6, 16, 34, 0.74); border-radius: 4px; }
  .sp-zoom__sw { position: absolute; right: 10px; bottom: 10px; margin: 0; }
  .sp-zoom__step { top: calc(50% - 22px); margin-top: 0; }
}

/* ---------- Less motion: everything is simply there ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .lp-spine *, .lp-spine *::before, .lp-spine *::after,
  .sp-player, .sp-player::backdrop, .sp-zoom, .sp-zoom::backdrop { animation: none !important; transition: none !important; }
  [data-r] { opacity: 1 !important; transform: none !important; }
  .sp-hero__film video { transform: scale(1.04) !important; }
  .sp-fit__ic .d, .sp-vs__art .d { stroke-dashoffset: 0 !important; }
  .sp-vs__art .c { opacity: 1 !important; }
}
@media (forced-colors: active) {
  .sp-pair__opt[aria-pressed="true"] { background: Highlight; color: HighlightText; }
  .sp-film__pause svg, .sp-pair__zoom svg, .sp-zoom__close svg, .sp-zoom__step svg, .sp-player__close svg { stroke: ButtonText; }
  .hc-bar__list a::after { background: Highlight; }
}

/* ---------- On paper: the finished page, dark on white ---------- */
@media print {
  .lp-spine *, .lp-spine *::before, .lp-spine *::after { animation: none !important; transition: none !important; }
  [data-r] { opacity: 1 !important; transform: none !important; }
  .hc-bar, .hc-bar::before, .sp-film__pause, .sp-pair__bar, .sp-pair__zoom, .pt-tile__play, .sp-player, .sp-zoom, .sp-faq__list summary::after { display: none !important; }
  .sp-fit__ic .d, .sp-vs__art .d { stroke-dashoffset: 0 !important; }
  .sp-vs__art .c { opacity: 1 !important; }
  .sp-film-band, .sp-end { background: #fff !important; color: #000 !important; }
  .sp-film-band h2, .sp-film-band h2 em, .sp-end h2, .sp-end h2 em { color: #0b1d3a !important; }
  .sp-film-band .sp-lede, .lp-spine .sp-end__in > p, .sp-end__disclaimer, .sp-story--dark .pt-fig__cap { color: #1c3461 !important; }
  .sp-faq__list details::details-content { block-size: auto !important; content-visibility: visible !important; }
  .sp-fluoro, .sp-discs .sp-story, .sp-faq__head, .sp-qual__side { position: static !important; }
  .sp-sec { padding: 28px 0; }
  .sp-step::before, .sp-step::after, .sp-day__stop::before, .sp-day__stop::after { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  /* printed before the reader reached them: the rails are filled and the X-ray drawing is finished */
  html.sp-led .sp-step::before, html.sp-led .sp-day__stop::before { background: var(--accent-blue) !important; border-color: var(--accent-blue) !important; }
  html.sp-led .sp-step::after, html.sp-led .sp-day__stop::after { background-size: 100% 100%, auto !important; }
  .sp-fluoro[data-stage] .sp-fluoro__ring, .sp-fluoro[data-stage] .sp-fluoro__needle, .sp-fluoro[data-stage] .sp-fluoro__cells circle { opacity: 1 !important; transform: none !important; }
  .sp-fluoro[data-stage] .sp-fluoro__dye { opacity: 0.4 !important; }
  .sp-fluoro svg { print-color-adjust: exact; -webkit-print-color-adjust: exact; max-height: none; }
}

/* The headline keeps its line breaks while the display face loads: a local
   Times, scaled to the display face's width, stands in for it (the hip page's
   fix). Nothing is downloaded; with no local Times the stack carries on. */
@font-face { font-family: 'sp-times'; font-weight: 100 900; font-style: normal; src: local('Times New Roman'), local('TimesNewRomanPSMT'); size-adjust: 80%; }
@font-face { font-family: 'sp-times'; font-weight: 100 900; font-style: italic; src: local('Times New Roman Italic'), local('TimesNewRomanPS-ItalicMT'); size-adjust: 80%; }
.lp-spine .sp-hero h1 { font-family: 'Cormorant Garamond', 'sp-times', 'Times New Roman', Georgia, serif; }