/* /stem-cell-therapy-hip: the paid landing page for hip searches.
   Its own sheet since 2026-10-10. Until then it ran on styles/celva-home.css,
   which the home page and the other landing pages share, plus a scoped style
   block in the page; it now loads only site.css, this file and the fit
   quiz's sheet, so nothing here reaches another page and a change to the
   home page cannot move this one. Everything is scoped to body.lp-hip.
   Classes are named hp-*, except the handful the page's spec
   (tests/e2e/hip-page.spec.ts) reads by name: .hero__ctas, .vial, .vial__col,
   .vial__pic--mri, .cell, .cell__media, .faq__list, and the patient tiles
   (.pt-*). site.css still ships an older .hero__ctas and .faq__list, pinned
   back where they would leak in.

   The page, top to bottom: a white hero that paints once, finished (nothing
   in it waits on a script); who qualifies, four profiles beside the MRI loop
   with marks that climb from a no to a yes; the injection, three drawn
   parts; the one tinted band, surgery and cells side by side; what sets the
   cost, three across; the day, four clips on a line; five patients on
   navy; the fit quiz's own white band; five questions; the closing call.
   Every reveal is off until scripts/stem-cell-therapy-hip.js puts hp-js on
   <html>, so with scripts off, reduced motion or print the page is all there. */

/* The headline face arrives a moment after first paint (font-display: swap),
   and until it does the display stack falls through to Times New Roman,
   which sets the same words about 30% wider: the headline took a third
   line, then gave it back, and everything under it moved. hp-times is the
   local Times at the size that matches (measured: the site's display face
   is 0.767 of Times, line for line), put second in this page's display
   stack, so the lines break in the same places before and after the swap.
   Nothing is downloaded; where there is no local Times the stack carries on
   as it always has. */
@font-face { font-family: 'hp-times'; font-weight: 100 900; font-style: normal; src: local('Times New Roman'), local('TimesNewRomanPSMT'); size-adjust: 77%; }
@font-face { font-family: 'hp-times'; font-weight: 100 900; font-style: italic; src: local('Times New Roman Italic'), local('TimesNewRomanPS-ItalicMT'); size-adjust: 77%; }

/* On the root, not :root: this sheet loads on this page alone, and a
   browser without :has() would drop the whole rule, the bar's height and the
   scroll padding with it. */
:root {
  --hc-nav-h: 64px;            /* fallback; the script sets the real header height */
  --hc-bar-h: 52px;
  --hc-link-pad: 15px;
  scroll-padding-top: calc(var(--hc-nav-h) + var(--hc-bar-h) + 12px);
}
.lp-hip {
  --font-display: 'Cormorant Garamond', 'hp-times', 'Times New Roman', Georgia, serif;
  --hp-e: cubic-bezier(.16, 1, .3, 1);
  --hp-wrap: 1200px;
  --hp-pad: 32px;
  --hp-navy: var(--navy-brand, #132C5B);
  --hp-ice: var(--accent-ice, #7CA9D1);
  background: #fff; color: var(--ink);
  font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
/* Parts waiting to slide in must not widen the page. Not on the fit quiz:
   it lays itself out. */
.lp-hip main { overflow-x: clip; }
:where(.lp-hip main > :not(.qz)), :where(.lp-hip main > :not(.qz)) *, :where(.lp-hip main > :not(.qz)) *::before, :where(.lp-hip main > :not(.qz)) *::after { box-sizing: border-box; }
/* colors_and_type.css caps every bare <p> at 42rem and gives it a bottom margin.
   These resets carry no weight of their own (:where), so any rule below
   that names a class outranks them, and none of them reaches the fit quiz. */
:where(.lp-hip main > :not(.qz)) p { max-width: none; margin: 0; }
:where(.lp-hip main > :not(.qz)) :is(h1, h2, h3) { margin: 0; font-family: var(--font-display); font-weight: 300; letter-spacing: -.01em; color: inherit; text-wrap: pretty; }
/* The italic half of a heading is kept for the first and the last thing the
   reader meets. In between a heading is one plain sentence. */
:where(.lp-hip main > :not(.qz)) :is(h2, h3) em { font-style: normal; font-weight: inherit; color: inherit; }
/* A heading breaks where its halves meet, never mid-phrase. */
:where(.lp-hip main > :not(.qz)) h2 > :is(.h-lead, em) { display: inline-block; }
:where(.lp-hip main > :not(.qz)) svg { display: block; overflow: visible; }
:where(.lp-hip main > :not(.qz)) :is(a, button, summary):focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 3px; border-radius: 4px; }
.lp-hip :is(.hp-pt, .hp-end) :is(a, button):focus-visible { outline-color: #fff; }
:where(.lp-hip main > :not(.qz)) :is(h1, h2, h3)[tabindex="-1"]:focus { outline: 0; }
.lp-hip ::selection { background: var(--accent-blue); color: #fff; }
.hp-wrap { max-width: var(--hp-wrap); margin: 0 auto; padding: 0 var(--hp-pad); }

/* ---------- buttons ----------
   The page's calls to action keep their classes (btn, btn--primary, btn--lg,
   btn--ghost, btn--ice); site.css's own .btn is the header's, so the ones in
   the page are set here in full. A press sinks 1px and darkens; nothing
   changes size. */
.lp-hip main .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 52px; padding: 0 26px; overflow: visible; border: 1px solid var(--accent-blue); border-radius: 4px; background: var(--accent-blue); color: #fff; font-family: var(--font-body); font-size: .9375rem; font-weight: 500; line-height: 1; letter-spacing: .01em; text-decoration: none; cursor: pointer; transition: background .3s var(--hp-e), border-color .3s var(--hp-e), color .3s var(--hp-e), transform .3s var(--hp-e), box-shadow .4s var(--hp-e); }
.lp-hip main .btn:hover { background: var(--accent-blue-hover); border-color: var(--accent-blue-hover); color: #fff; transform: translateY(-2px); box-shadow: 0 14px 34px rgba(11, 29, 58, .18); }
.lp-hip main .btn:active { transform: translateY(1px); background: #143D63; border-color: #143D63; box-shadow: none; transition-duration: 120ms; }
.lp-hip main .btn--lg { min-height: 56px; padding: 0 30px; font-size: 1rem; }
.lp-hip main .btn--ghost { background: transparent; border-color: var(--border-strong); color: var(--ink); }
.lp-hip main .btn--ghost:hover { background: transparent; border-color: var(--accent-blue); color: var(--accent-blue); box-shadow: none; }
.lp-hip main .btn--ghost:active { background: rgba(11, 29, 58, .06); border-color: var(--accent-blue); }
.lp-hip main .btn--ice { background: #fff; border-color: #fff; color: var(--ink); }
.lp-hip main .btn--ice:hover { background: var(--accent-wash); border-color: var(--accent-wash); color: var(--ink); box-shadow: 0 18px 44px rgba(0, 0, 0, .3); }
.lp-hip main .btn--ice:active { background: #DCE7F2; border-color: #DCE7F2; }
.hp-arr { display: inline-block; transition: transform .35s var(--hp-e); }
.lp-hip main .btn:hover .hp-arr { transform: translateX(5px); }
.lp-hip .cta { margin-top: clamp(28px, 3.4vw, 40px); }
.lp-hip .cta--center { display: flex; justify-content: center; }

/* ---------- hero ---------- */
.hp-hero { padding: clamp(32px, 5vw, 76px) 0 clamp(52px, 6.4vw, 92px); background: #fff; }
.hp-hero__in { display: grid; grid-template-columns: minmax(0, 1.16fr) minmax(0, .84fr); gap: clamp(28px, 4.6vw, 76px); align-items: center; }
.hp-hero h1 { font-size: clamp(2.2rem, 4.1vw, 3.7rem); line-height: 1.06; letter-spacing: -.018em; color: var(--ink); text-wrap: balance; }
.hp-hero__line { display: block; }
.hp-hero h1 em { font-style: italic; font-weight: inherit; color: var(--accent-blue); }
.lp-hip main .hp-hero__sub { margin-top: 26px; font-size: 1.1875rem; line-height: 1.6; color: var(--ink-soft); }
/* site.css gives .hero__ctas a 56px bottom margin for its own older hero */
.lp-hip .hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 16px; margin: 30px 0 0; }
.lp-hip main .hp-hero__next { margin-top: 14px; font-size: .9375rem; line-height: 1.5; color: var(--ink-muted); }
.hp-hero__facts { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px clamp(24px, 3vw, 40px); margin-top: 34px; padding-top: 28px; }
/* The rule over the two facts draws itself once, from the sheet alone: no
   script is involved and nothing is ever hidden behind it. */
.hp-hero__facts::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--border-strong); transform-origin: left; animation: hpRule 1.1s var(--hp-e) .15s both; }
@keyframes hpRule { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.lp-hip main .hp-hero__fact-n { font-family: var(--font-display); font-size: 1.75rem; line-height: 1.12; color: var(--ink); }
.hp-hero__fact-n em { font-style: italic; color: var(--accent-blue); }
.lp-hip main .hp-hero__fact-t { margin-top: 8px; font-size: .9375rem; line-height: 1.55; color: var(--ink-muted); }
.lp-hip main .hp-hero__reviewed { margin-top: 26px; font-size: .875rem; line-height: 1.5; color: var(--ink-muted); }
.hp-hero__fig { min-width: 0; }
/* The frame carries the film's own first picture, so it is never an empty
   navy box while the poster or the film arrives. The film sits 4% larger
   than its frame, as it always has: the crop is unchanged. */
.hp-hero__frame { position: relative; aspect-ratio: 5 / 6; overflow: hidden; border-radius: 14px; background: #0b1d3a url('../images/hip-evaluation-loop-poster.webp') center / cover no-repeat; box-shadow: 0 4px 12px rgba(11, 29, 58, .06), 0 18px 44px rgba(11, 29, 58, .1); }
.hp-hero__frame video, .hp-hero__frame video[width][height] { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; transform: scale(1.04); }

/* ---------- the bar that follows the reader ---------- */
.lp-hip .hc-bar { position: fixed; left: 0; right: 0; top: var(--hc-nav-h); z-index: 49; height: var(--hc-bar-h); background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--border); transform: translateY(-10px); opacity: 0; visibility: hidden; transition: opacity 200ms, transform 300ms var(--hp-e), visibility 0s 300ms; }
.lp-hip .hc-bar.is-on { transform: none; opacity: 1; visibility: visible; transition: opacity 260ms, transform 360ms var(--hp-e); }
body.lp-hip.nav-open .hc-bar, html.qz-lock .lp-hip .hc-bar { opacity: 0; visibility: hidden; }
.lp-hip .hc-bar__track { display: flex; align-items: stretch; gap: 0; height: 100%; max-width: var(--hp-wrap); margin: 0 auto; padding: 0 calc(var(--hp-pad) - var(--hc-link-pad)); overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; scroll-padding-inline: 28px; }
.lp-hip .hc-bar__track::-webkit-scrollbar { display: none; }
.lp-hip .hc-bar__track a { position: relative; flex: none; display: inline-flex; align-items: center; padding: 0 var(--hc-link-pad); border-bottom: 0; color: var(--ink-muted); font-size: .875rem; font-weight: 500; white-space: nowrap; text-decoration: none; transition: color .25s; }
.lp-hip .hc-bar__track a::after { content: ""; position: absolute; left: var(--hc-link-pad); right: var(--hc-link-pad); bottom: 0; height: 2px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--hp-e); }
.lp-hip .hc-bar__track a:hover, .lp-hip .hc-bar__track a[aria-current] { color: var(--ink); }
.lp-hip .hc-bar__track a:hover::after { transform: scaleX(.35); }
.lp-hip .hc-bar__track a[aria-current]::after { transform: scaleX(1); }
.lp-hip .hc-bar__track a:active { color: var(--accent-blue); }
.lp-hip .hc-bar__track a:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: -4px; border-radius: 4px; }
.lp-hip .hc-bar__progress { position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--hp-ice); transform-origin: left; transform: scaleX(var(--hc-p, 0)); }

/* ---------- sections ---------- */
.hp-sec { padding: clamp(64px, 8.4vw, 120px) 0; }
.lp-hip main section[id] { scroll-margin-top: 0; }
.hp-qual, .hp-inj, .hp-day, .hp-faq { border-top: 1px solid var(--border); }
.hp-sec h2 { font-size: clamp(2rem, 4.1vw, 3.375rem); line-height: 1.08; color: var(--ink); }
.lp-hip main .hp-lede { margin-top: 18px; font-size: 1.1875rem; line-height: 1.6; color: var(--ink-soft); }
.lp-hip main .hp-close { margin-top: clamp(32px, 4vw, 52px); font-size: 1.0625rem; line-height: 1.7; color: var(--ink-soft); }

/* reveals: hidden only once the script has confirmed it can show them */
.hp-js [data-r] { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--hp-e) var(--d, 0ms), transform .8s var(--hp-e) var(--d, 0ms); }
.hp-js [data-r="left"] { transform: translateX(-28px); }
.hp-js [data-r="right"] { transform: translateX(28px); }
.hp-js [data-r="zoom"] { transform: scale(.965); }
.hp-js [data-r].is-in { opacity: 1; transform: none; }

/* ---------- who qualifies ---------- */
.hp-qual__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5.4vw, 88px); align-items: start; margin-top: clamp(36px, 4.6vw, 60px); }
.hp-qual__fig { position: sticky; top: calc(var(--hc-nav-h) + var(--hc-bar-h) + 24px); margin: 0; }
.hp-qual__frame { position: relative; aspect-ratio: 5 / 6; overflow: hidden; border-radius: 14px; background: #0b1d3a url('../images/hip-mri-poster.webp') center / cover no-repeat; }
.hp-qual__frame video, .hp-qual__frame video[width][height] { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.hp-qual__fig figcaption { margin-top: 12px; font-size: .875rem; line-height: 1.5; color: var(--ink-muted); }
.hp-fit { list-style: none; margin: 0; padding: 0; }
.hp-fit__row { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: clamp(16px, 2vw, 26px); padding-bottom: clamp(30px, 3.6vw, 44px); }
.hp-fit__row:last-child { padding-bottom: 0; }
/* One connector per gap, mark to mark, and nothing after the last. The grey
   line is the track; the blue one fills as the reader reaches the next mark. */
.hp-fit__row:not(:last-child)::before, .hp-fit__row:not(:last-child)::after { content: ""; position: absolute; left: 19px; top: 46px; bottom: 6px; width: 2px; border-radius: 2px; background: var(--border); }
.hp-fit__row:not(:last-child)::after { background: var(--accent-blue); transform-origin: top; transition: transform .7s var(--hp-e) .25s; }
.hp-js .hp-fit__row:not(.is-in)::after { transform: scaleY(0); }
.hp-fit__mark { width: 40px; height: 40px; }
.hp-ring { fill: #fff; stroke: var(--border-strong); stroke-width: 1.5; transition: stroke .5s, fill .5s .35s; }
.hp-draw { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset .7s var(--hp-e) .1s; }
.hp-fit__row--yes .hp-ring { stroke: var(--accent-blue); }
.hp-fit__row--yes .hp-draw { stroke: var(--accent-blue); }
.hp-fit__row--strong .hp-ring { fill: var(--accent-blue); }
.hp-fit__row--strong .hp-draw { stroke: #fff; }
.hp-js .hp-fit__row:not(.is-in) .hp-draw { stroke-dashoffset: 1; }
.hp-js .hp-fit__row:not(.is-in) .hp-ring { stroke: var(--border-strong); fill: #fff; }
/* the last mark, the yes, settles into place once it is drawn */
.hp-js .hp-fit__row--strong.is-in .hp-fit__mark { animation: hpSettle .7s var(--hp-e) calc(var(--d, 0ms) + .85s) 1 both; }
@keyframes hpSettle { 0% { transform: scale(1); } 45% { transform: scale(1.16); } 100% { transform: scale(1); } }
.lp-hip main .hp-fit__v { padding-top: 8px; font-size: .9375rem; font-weight: 500; line-height: 1.5; color: var(--ink-muted); }
.lp-hip main .hp-fit__row--yes .hp-fit__v { color: var(--accent-blue); }
.hp-fit__body h3 { margin-top: 4px; font-size: clamp(1.4rem, 2vw, 1.75rem); line-height: 1.2; color: var(--ink); }
.lp-hip main .hp-fit__body h3 + p { margin-top: 10px; font-size: 1rem; line-height: 1.65; color: var(--ink-soft); }

/* ---------- the injection ---------- */
.hp-inj__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: clamp(32px, 6vw, 96px); align-items: center; }
/* the room keeps the frame it has always had: 5 by 6, cover */
.hp-inj__photo { margin: 0; aspect-ratio: 5 / 6; overflow: hidden; border-radius: 14px; background: #0b1d3a; }
.hp-inj__photo img, .hp-inj__photo img[width][height] { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.hp-inj__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, auto); column-gap: clamp(28px, 3.6vw, 52px); margin-top: clamp(40px, 5vw, 68px); }
/* each part lines up with its neighbours: drawing, heading, text */
.hp-step { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 0; padding-top: 26px; border-top: 1px solid var(--border-strong); }
@supports not (grid-template-rows: subgrid) { .hp-step { display: block; } }
.hp-step__art { width: 100%; max-width: 320px; height: auto; aspect-ratio: 320 / 200; }
.hp-step h3 { margin-top: 20px; font-size: clamp(1.4rem, 2vw, 1.65rem); line-height: 1.2; color: var(--ink); }
.lp-hip main .hp-step p { margin-top: 10px; font-size: 1rem; line-height: 1.65; color: var(--ink-soft); }

/* the drawings' pen: ink lines, the site blue, the wash for what is liquid or lit */
.lp-hip .d-l { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.lp-hip .d-b { fill: none; stroke: var(--accent-blue); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.lp-hip .d-w { fill: var(--accent-wash); }
.lp-hip .d-f { fill: var(--accent-blue); }
.lp-hip .d-c { fill: #fff; stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; }
.lp-hip .d-d { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1.5 6; }
.lp-hip .d-fillw { fill: #fff; }
.lp-hip .d-thick { stroke-width: 5; }
.lp-hip .d-bone { fill: none; stroke: var(--ink); stroke-width: 10; stroke-linecap: round; opacity: .2; }
.lp-hip .d-contrast { fill: none; stroke: var(--accent-blue); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; opacity: .85; }
.lp-hip .hp-scan { fill: none; stroke: var(--accent-blue); stroke-width: 1.5; opacity: 0; }
.lp-hip .hp-wedge { fill: none; stroke: var(--accent-blue); stroke-opacity: .26; stroke-width: 32; stroke-dasharray: 120 360; transform-box: view-box; transform-origin: 268px 96px; transform: rotate(60deg); }
.hp-float, .hp-tip { transform-box: fill-box; transform-origin: center; }

/* 1. the cells: three kinds drift in the vial, six tests tick one after another */
.hp-tests .hp-draw { stroke: var(--accent-blue); transition: stroke-dashoffset .45s var(--hp-e) calc(var(--n, 0) * 130ms + 350ms); }
.hp-tests .hp-draw:nth-of-type(2) { --n: 1; } .hp-tests .hp-draw:nth-of-type(3) { --n: 2; }
.hp-tests .hp-draw:nth-of-type(4) { --n: 3; } .hp-tests .hp-draw:nth-of-type(5) { --n: 4; } .hp-tests .hp-draw:nth-of-type(6) { --n: 5; }
.hp-js .hp-step:not(.is-in) .hp-tests .hp-draw { stroke-dashoffset: 1; }
.hp-step.is-live .hp-float { animation: hpFloat 5.2s ease-in-out infinite; }
.hp-step.is-live .hp-float--b { animation-duration: 6.4s; animation-delay: -2s; }
.hp-step.is-live .hp-float--c { animation-duration: 4.6s; animation-delay: -1s; }
@keyframes hpFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.hp-step.is-live .d-d { animation: hpMarch 1.6s linear infinite; }
@keyframes hpMarch { to { stroke-dashoffset: -15; } }
/* 2. the needle arrives, then the contrast outlines the joint, on a screen that is live */
.hp-needle { transition: transform 1.1s var(--hp-e) .3s, opacity .5s .3s; }
.hp-js .hp-step:not(.is-in) .hp-needle { transform: translate(-46px, -18px); opacity: 0; }
.hp-tip { transition: transform .5s var(--hp-e) 1.25s; }
.hp-js .hp-step:not(.is-in) .hp-tip { transform: scale(0); }
.lp-hip .d-contrast { transition: stroke-dashoffset 1s var(--hp-e) 1.45s; }
.hp-js .hp-step:not(.is-in) .d-contrast { stroke-dashoffset: 1; }
.hp-step.is-live .hp-scan { animation: hpScan 4.2s linear infinite; }
@keyframes hpScan { 0% { transform: translateY(0); opacity: 0; } 12% { opacity: .5; } 88% { opacity: .5; } 100% { transform: translateY(120px); opacity: 0; } }
.hp-step.is-live .hp-tip { animation: hpPing 2.6s ease-in-out 2.4s infinite; }
@keyframes hpPing { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.5); } }
/* 3. the clock sweeps from 25 minutes to 45 */
.lp-hip .hp-wedge { transition: stroke-dasharray 1.5s var(--hp-e) .5s; }
.hp-js .hp-step:not(.is-in) .hp-wedge { stroke-dasharray: 0 360; }

/* ---------- two tools: the one tinted band ---------- */
.hp-vs { background: var(--accent-wash); }
/* the one part that is set to the middle: two answers, weighed evenly */
.hp-vs h2, .lp-hip main .hp-vs .hp-lede { text-align: center; }
.lp-hip main .hp-vs .hp-lede { text-wrap: balance; }
.lp-hip .vial { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); column-gap: clamp(28px, 4.4vw, 72px); margin-top: clamp(36px, 4.6vw, 60px); }
.lp-hip .vial__col { display: grid; grid-template-rows: subgrid; grid-row: span 5; row-gap: 0; min-width: 0; }
@supports not (grid-template-rows: subgrid) { .lp-hip .vial__col { display: block; } }
.lp-hip main .hp-vs__name { font-family: var(--font-display); font-size: clamp(1.6rem, 2.4vw, 2.1rem); line-height: 1.15; color: var(--ink); }
.lp-hip main .vial__col h3 { margin-top: 8px; font-family: var(--font-body); font-size: 1.0625rem; font-weight: 500; line-height: 1.5; letter-spacing: 0; color: var(--ink-soft); }
/* each picture keeps its 4 by 3 frame and its crop; the MRI lies over the
   render and fades in, 1.5 s, on hover or from the button under it */
.lp-hip .vial__pics { position: relative; display: block; margin-top: 22px; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 12px; background: #07162c; }
.lp-hip .vial__pics > .vial__pic { position: absolute; inset: 0; display: block; margin: 0; }
.lp-hip .vial__pics > .vial__pic--mri { opacity: 0; transition: opacity 1.5s var(--hp-e); pointer-events: none; }
.lp-hip .vial__col.is-mri .vial__pic--mri { opacity: 1; }
/* A finger leaves :hover stuck on whatever it last touched, so the hover
   belongs only to a pointer that can really hover. */
@media (hover: hover) { .lp-hip .vial__col:hover .vial__pic--mri { opacity: 1; } }
.lp-hip .vial__img, .lp-hip .vial__img[width][height] { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; }
.lp-hip .vial__pic--mri .vial__img { object-position: 0% center; }
/* The button sits on the picture's lower corner. A mouse already has the
   hover, so there it stays out of sight until the keyboard reaches it; a
   touch screen, which has no hover, always shows it. */
.hp-vs__swap { position: relative; z-index: 2; justify-self: start; display: inline-flex; align-items: center; min-height: 44px; margin: -56px 0 12px 12px; padding: 0 16px; border: 0; border-radius: 4px; background: rgba(255, 255, 255, .94); color: var(--ink); font-family: var(--font-body); font-size: .9375rem; font-weight: 500; line-height: 1; cursor: pointer; box-shadow: 0 6px 18px rgba(7, 22, 44, .28); transition: background .2s, transform .25s var(--hp-e), opacity .2s; }
.hp-vs__swap[hidden] { display: none; }
.hp-vs__swap:hover { background: #fff; }
.hp-vs__swap:active { transform: translateY(1px); background: var(--accent-wash); }
@media (hover: hover) and (pointer: fine) { .hp-vs__swap:not(:focus-visible) { opacity: 0; pointer-events: none; } }
.lp-hip .vial__col ul { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.lp-hip .vial__col li { position: relative; padding-left: 26px; font-size: 1rem; line-height: 1.6; color: var(--ink-soft); }
.lp-hip .vial__col li::before { content: ""; position: absolute; left: 0; top: .74em; width: 13px; height: 2px; border-radius: 1px; background: var(--border-strong); }
.lp-hip .vial__col--celva li::before { background: var(--accent-blue); }
.lp-hip main .hp-vs__close { margin-top: clamp(40px, 5vw, 64px); font-family: var(--font-display); font-size: clamp(1.3rem, 2.1vw, 1.75rem); line-height: 1.38; text-align: center; color: var(--ink); text-wrap: balance; }

/* ---------- cost: three across ---------- */
/* the heading and the reason there is no price sit side by side */
.hp-cost__head { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); column-gap: clamp(32px, 5.4vw, 88px); align-items: end; }
.lp-hip main .hp-cost__head .hp-lede { margin-top: 0; }
.hp-cost__grid { list-style: none; margin: clamp(36px, 4.6vw, 60px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--border-strong); }
/* three across, the drawing above its words; one column, the drawing beside
   them, from 1080px down */
.hp-cost__item { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: clamp(18px, 2.2vw, 28px); row-gap: 18px; align-content: start; padding: clamp(26px, 3vw, 38px) clamp(22px, 2.8vw, 44px); border-bottom: 1px solid var(--border); }
.hp-cost__item:not(:last-child) { border-right: 1px solid var(--border); }
.hp-cost__item:first-child { padding-left: 0; }
.hp-cost__item:last-child { padding-right: 0; }
.hp-cost__art { width: 64px; height: 64px; }
.hp-cost__item h3 { font-size: clamp(1.4rem, 2vw, 1.65rem); line-height: 1.2; color: var(--ink); }
.lp-hip main .hp-cost__say { margin-top: 6px; font-size: 1.0625rem; font-weight: 500; line-height: 1.5; color: var(--ink); }
.lp-hip main .hp-cost__say + p { margin-top: 6px; font-size: 1rem; line-height: 1.65; color: var(--ink-soft); }

/* ---------- the day: four clips on a line ---------- */
.hp-day { --g: clamp(18px, 2.2vw, 30px); }
.hp-day__route { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--g); height: 14px; margin-top: clamp(36px, 4.6vw, 60px); }
/* the line runs from the first stop to the last, and no further */
.hp-day__route::before, .hp-day__fill { content: ""; position: absolute; left: 7px; right: calc((100% - 3 * var(--g)) / 4 - 7px); top: 6px; height: 2px; border-radius: 2px; background: var(--border); }
.hp-day__fill { background: var(--accent-blue); transform-origin: left; transform: scaleX(var(--p, 1)); transition: transform .5s linear; }
.hp-js .hp-day__fill { --p: 0; }
.hp-day__route b { position: relative; z-index: 1; display: block; width: 14px; height: 14px; border: 2px solid var(--accent-blue); border-radius: 50%; background: var(--accent-blue); transition: background .3s, border-color .3s; }
.hp-js .hp-day__route b:not(.is-on) { border-color: var(--border-strong); background: #fff; }
.hp-day__route b.is-on { animation: hpPop .5s var(--hp-e); }
@keyframes hpPop { 0% { transform: scale(.6); } 60% { transform: scale(1.35); } 100% { transform: scale(1); } }
.hp-day__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); column-gap: var(--g); margin-top: 18px; }
.lp-hip .cell { display: grid; grid-template-rows: subgrid; grid-row: span 4; row-gap: 0; min-width: 0; }
.lp-hip .cell__body { display: contents; }
@supports not (grid-template-rows: subgrid) { .lp-hip .cell, .lp-hip .cell__body { display: block; } }
/* width and align-self are load-bearing: a ratio-sized grid item that is
   STRETCHED into an auto row has no definite size to derive from, and WebKit
   resolves that to a 0 by 0 box. Its own width, and no stretch, and both
   engines size it from the column. */
.lp-hip .cell__media { position: relative; width: 100%; align-self: start; margin: 0; aspect-ratio: 1; overflow: hidden; border-radius: 12px; background: #0b1d3a; }
.lp-hip .cell__media video, .lp-hip .cell__media video[width][height] { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.lp-hip main .hp-day__name { margin-top: 18px; font-size: .9375rem; font-weight: 500; line-height: 1.5; color: var(--ink-muted); transition: color .4s; }
.lp-hip main .cell.is-lit .hp-day__name { color: var(--accent-blue); }
.lp-hip .cell h3 { margin-top: 2px; font-size: clamp(1.35rem, 1.9vw, 1.6rem); line-height: 1.2; color: var(--ink); }
.lp-hip main .cell h3 + p { margin-top: 10px; font-size: 1rem; line-height: 1.65; color: var(--ink-soft); }

/* ---------- five patients, on navy ---------- */
.hp-pt { background: var(--hp-navy); color: #fff; }
.lp-hip .hp-pt__quote { margin: 0; font-family: var(--font-display); font-style: normal; font-size: clamp(1.6rem, 3.2vw, 2.7rem); font-weight: 300; line-height: 1.22; color: #fff; text-wrap: pretty; }
.hp-pt__quote cite { display: block; margin-top: 18px; font-family: var(--font-body); font-style: normal; font-size: .9375rem; font-weight: 400; line-height: 1.5; letter-spacing: 0; color: rgba(255, 255, 255, .76); }
.hp-pt__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 40px; margin-top: clamp(44px, 5.6vw, 76px); padding-top: clamp(28px, 3.4vw, 40px); border-top: 1px solid rgba(255, 255, 255, .18); }
.hp-pt h2 { color: #fff; }
.lp-hip main .hp-pt .hp-lede { margin-top: 0; color: rgba(255, 255, 255, .82); }
.lp-hip .pt-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-top: clamp(28px, 3.4vw, 40px); }
.lp-hip .pt-fig { margin: 0; min-width: 0; }
.lp-hip .pt-tile { position: relative; display: block; width: 100%; aspect-ratio: 3 / 4; padding: 0; overflow: hidden; border: 0; border-radius: 12px; background: var(--navy-mid); cursor: pointer; transition: transform .5s var(--hp-e), box-shadow .5s var(--hp-e); }
.lp-hip .pt-tile:hover { transform: translateY(-5px); box-shadow: 0 22px 50px rgba(0, 0, 0, .4); }
.lp-hip .pt-tile:active { transform: translateY(0) scale(.985); transition-duration: 120ms; }
.lp-hip .pt-tile__loop { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.lp-hip .pt-tile__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 29, 58, .05), rgba(11, 29, 58, .55)); transition: opacity .4s; }
.lp-hip .pt-tile:hover .pt-tile__scrim { opacity: .6; }
.lp-hip .pt-tile__play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: rgba(255, 255, 255, .94); transform: translate(-50%, -50%); transition: transform .45s var(--hp-e), background .3s; }
.lp-hip .pt-tile__play svg { width: 20px; height: 20px; margin-left: 2px; fill: var(--ink); }
.lp-hip .pt-tile:hover .pt-tile__play { transform: translate(-50%, -50%) scale(1.12); background: #fff; }
.lp-hip .pt-fig__cap { margin-top: 12px; font-size: .875rem; line-height: 1.45; text-align: left; color: rgba(255, 255, 255, .82); }

@keyframes hpPeek { 0%, 100% { transform: translateX(0); } 42% { transform: translateX(-26px); } }

/* the player: a dialog on <body>, the page behind it held still */
.lp-hip .pt-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; }
.lp-hip .pt-modal[hidden] { display: none; }
.lp-hip .pt-modal__backdrop { position: absolute; inset: 0; background: rgba(7, 18, 38, .9); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
/* Capped by height too, so on a landscape phone the frame and the close
   button above it both fit the screen. */
.lp-hip .pt-modal__box { position: relative; width: min(920px, 92vw, calc((100vh - 128px) * 16 / 9)); width: min(920px, 92vw, calc((100dvh - 128px) * 16 / 9)); }
.lp-hip .pt-modal__frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; background: #000; box-shadow: 0 40px 100px rgba(0, 0, 0, .6); }
.lp-hip .pt-modal__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity .5s var(--hp-e); }
.lp-hip .pt-modal__frame.is-ready iframe { opacity: 1; }
/* Until the player paints, the story's own picture and name hold the frame,
   and a line along its foot says something is on its way. */
.lp-hip .pt-modal__hold { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 22px 26px; background: var(--ink) center / cover no-repeat; }
.lp-hip .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%); }
.lp-hip .pt-modal__hold::after { content: ""; position: absolute; left: 0; bottom: 0; width: 34%; height: 2px; background: var(--hp-ice); animation: hpHold 1.3s ease-in-out infinite; }
.lp-hip .pt-modal__frame.is-ready .pt-modal__hold::after { animation: none; opacity: 0; }
@keyframes hpHold { from { transform: translateX(-100%); } to { transform: translateX(300%); } }
.lp-hip .pt-modal__hold span { position: relative; font-family: var(--font-display); font-size: clamp(20px, 2.4vw, 28px); line-height: 1.2; color: #fff; }
.lp-hip .pt-modal__close { position: absolute; right: -8px; top: -50px; min-width: 44px; min-height: 44px; border: 0; border-radius: 50%; background: transparent; color: #fff; font-size: 1.9rem; line-height: 1; cursor: pointer; transition: background .2s; }
.lp-hip .pt-modal__close:hover { background: rgba(255, 255, 255, .14); }
.lp-hip .pt-modal__close:active { background: rgba(255, 255, 255, .24); }
.lp-hip .pt-modal__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---------- five questions ---------- */
.hp-faq__in { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(40px, 6vw, 88px); align-items: start; }
.hp-faq__head { position: sticky; top: calc(var(--hc-nav-h) + var(--hc-bar-h) + 28px); }
.hp-faq h2 { font-size: clamp(1.9rem, 3.1vw, 2.75rem); line-height: 1.1; }
.lp-hip .faq__list details { border-top: 1px solid var(--border); }
.lp-hip .faq__list details:last-of-type { border-bottom: 1px solid var(--border); }
.lp-hip .faq__list summary { display: flex; align-items: center; gap: 20px; min-height: 68px; padding: 18px 0; list-style: none; font-family: var(--font-display); font-size: clamp(1.2rem, 1.7vw, 1.45rem); font-weight: 400; line-height: 1.3; color: var(--ink); cursor: pointer; transition: color .25s; }
.lp-hip .faq__list summary::-webkit-details-marker { display: none; }
/* site.css draws its own plus after every .faq__list summary */
.lp-hip .faq__list summary::after, .lp-hip .faq__list details[open] summary::after { content: none; }
.lp-hip .faq__list summary:hover { color: var(--accent-blue); }
.lp-hip .faq__list summary:active { color: var(--accent-blue-hover); }
/* the mark is first in the markup (the spec reads the question as the second
   span) and last on the line */
.hp-faq__ic { order: 2; flex: none; position: relative; width: 28px; height: 28px; margin-left: auto; border: 1px solid var(--border-strong); border-radius: 50%; transition: border-color .25s, transform .45s var(--hp-e); }
.hp-faq__ic::before, .hp-faq__ic::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.5px; margin: -.75px 0 0 -5.5px; background: var(--ink); transition: transform .45s var(--hp-e), background .25s; }
.hp-faq__ic::after { transform: rotate(90deg); }
.lp-hip .faq__list summary:hover .hp-faq__ic { border-color: var(--accent-blue); }
.lp-hip .faq__list summary:hover .hp-faq__ic::before, .lp-hip .faq__list summary:hover .hp-faq__ic::after { background: var(--accent-blue); }
.lp-hip .faq__list details[open] .hp-faq__ic::after { transform: rotate(0deg); }
.lp-hip .faq__a { padding: 0 48px 26px 0; font-size: 1rem; line-height: 1.7; color: var(--ink-soft); }

/* ---------- the closing call ---------- */
.hp-end { padding: clamp(84px, 11vw, 148px) 0; background: var(--hp-navy); color: #fff; text-align: center; }
.hp-end__in { display: flex; flex-direction: column; align-items: center; max-width: 54rem; margin: 0 auto; padding: 0 var(--hp-pad); }
.hp-end h2 { font-size: clamp(2.2rem, 4.6vw, 3.9rem); line-height: 1.05; color: #fff; text-wrap: balance; }
.lp-hip main .hp-end h2 em { font-style: italic; color: var(--hp-ice); }
.lp-hip main .hp-end__say { max-width: 40rem; margin: 22px 0 36px; font-size: 1.0625rem; line-height: 1.7; color: rgba(255, 255, 255, .84); }
.lp-hip main .hp-end__legal { max-width: 44rem; margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .18); font-size: .8125rem; line-height: 1.7; color: rgba(255, 255, 255, .7); }

/* ---------- narrower ---------- */
@media (max-width: 1080px) {
  .hp-hero__in { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .hp-hero__fig { max-width: 520px; }
  .hp-qual__grid { grid-template-columns: minmax(0, 1fr); }
  .hp-cost__head { grid-template-columns: minmax(0, 1fr); row-gap: 18px; }
  .hp-cost__grid { grid-template-columns: minmax(0, 1fr); }
  .hp-cost__item:nth-child(n) { grid-template-columns: 64px minmax(0, 1fr); row-gap: 0; padding-left: 0; padding-right: 0; border-right: 0; }
  .hp-qual__fig { position: static; max-width: 520px; }
  .hp-inj__steps { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 36px; }
  .hp-step { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-row: auto; column-gap: clamp(20px, 4vw, 40px); }
  .hp-step__art { grid-row: 1 / span 2; }
  .hp-step h3 { margin-top: 0; }
  .hp-day__route { display: none; }
  .hp-day__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; row-gap: 44px; margin-top: clamp(32px, 4.6vw, 52px); }
  .lp-hip .cell { display: block; }
  .lp-hip .cell__body { display: block; }
  .lp-hip .pt-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 26px; }
  .hp-faq__in { grid-template-columns: minmax(0, 1fr); }
  .hp-faq__head { position: static; }
  .lp-hip .hc-bar__track { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent); }
}
@media (max-width: 760px) {
  :root { --hc-bar-h: 48px; --hc-link-pad: 11px; }
  .lp-hip { --hp-pad: 20px; }
  .hp-inj__head { grid-template-columns: minmax(0, 1fr); }
  .hp-inj__photo { max-width: 520px; }
  .hp-step { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .hp-step__art { grid-row: auto; max-width: 300px; margin-bottom: 18px; }
  .lp-hip .vial { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 44px; }
  .lp-hip .vial__col { display: block; }
  .hp-vs__swap { display: flex; width: max-content; }
  .hp-cost__item:nth-child(n) { grid-template-columns: 52px minmax(0, 1fr); }
  .hp-cost__art { width: 52px; height: 52px; }
  /* five tiles become a row to swipe; a tile off the right edge is never
     held back waiting to be revealed */
  .lp-hip .pt-grid { display: flex; gap: 12px; margin-inline: calc(var(--hp-pad) * -1); padding-inline: var(--hp-pad); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--hp-pad); scrollbar-width: none; overscroll-behavior-x: contain; -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 40px), transparent); }
  .lp-hip .pt-grid::-webkit-scrollbar { display: none; }
  .lp-hip .pt-fig { flex: 0 0 62%; scroll-snap-align: start; }
  .hp-js .pt-fig[data-r] { opacity: 1; transform: none; }
  /* once, as the row arrives: a small pull to the left and back, to show there is more to swipe to */
  .lp-hip .pt-grid.is-peek .pt-fig { animation: hpPeek 1.2s var(--hp-e) .45s 1; }
  .lp-hip .faq__a { padding-right: 0; }
}
/* Phone: the buttons come straight after the headline, as they always have.
   The text wrapper dissolves into the grid so its children can be ordered.
   700px, not 760, so a 768px WebKit window with classic scrollbars (layout
   width 753) keeps the desktop order. */
@media (max-width: 700px) {
  .hp-hero__in { gap: 0; }
  .hp-hero__text { display: contents; }
  .lp-hip .hero__ctas { order: 1; margin-top: 24px; }
  .lp-hip main .hp-hero__next { order: 2; }
  .lp-hip main .hp-hero__sub { order: 3; margin-top: 26px; }
  .hp-hero__facts { order: 4; grid-template-columns: minmax(0, 1fr); margin-top: 30px; }
  .lp-hip main .hp-hero__reviewed { order: 2; }
  .hp-hero__fig { order: 6; margin-top: 32px; }
}
@media (max-width: 620px) {
  .hp-day__grid { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .lp-hip main .btn { min-height: 52px; }
}
@media (max-width: 380px) {
  .lp-hip .hero__ctas .btn { width: 100%; }
}

/* ---------- reduced motion: every end state, nothing looping ---------- */
@media (prefers-reduced-motion: reduce) {
  .lp-hip main *, .lp-hip main *::before, .lp-hip main *::after, .lp-hip .hc-bar, .lp-hip .hc-bar * { animation: none !important; transition: none !important; }
  .lp-hip .pt-modal *, .lp-hip .pt-modal *::after { animation: none !important; transition: none !important; }
}

/* ---------- print: the finished page, dark on white ---------- */
@media print {
  .lp-hip .hc-bar, .lp-hip .hp-vs__swap, .lp-hip .hp-faq__ic, .lp-hip .pt-tile__play, .lp-hip .pt-tile__scrim, .lp-hip .pt-modal, .lp-hip .hp-scan { display: none !important; }
  .lp-hip main *, .lp-hip main *::before, .lp-hip main *::after { animation: none !important; transition: none !important; }
  .lp-hip [data-r] { opacity: 1 !important; transform: none !important; }
  .lp-hip .hp-draw, .lp-hip .d-contrast { stroke-dashoffset: 0 !important; }
  .lp-hip .hp-wedge { stroke-dasharray: 120 360 !important; }
  .lp-hip .hp-needle, .lp-hip .hp-tip { transform: none !important; opacity: 1 !important; }
  .lp-hip .hp-fit__row::after { transform: none !important; }
  .lp-hip .hp-day__fill { transform: none !important; }
  .lp-hip .hp-day__route b { border-color: var(--accent-blue) !important; background: var(--accent-blue) !important; }
  .lp-hip .hp-qual__fig, .lp-hip .hp-faq__head { position: static; }
  .lp-hip :is(.hp-pt, .hp-end, .hp-vs) { background: #fff !important; color: #000 !important; }
  .lp-hip :is(.hp-pt, .hp-end) :is(h2, p, cite, blockquote, figcaption, em) { color: #000 !important; }
  .lp-hip .hp-end__legal { border-top-color: #999 !important; }
  .lp-hip main .btn { border: 1px solid #000 !important; background: #fff !important; color: #000 !important; box-shadow: none !important; }
  .lp-hip .pt-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); overflow: visible; -webkit-mask-image: none; mask-image: none; margin-inline: 0; padding-inline: 0; }
  .hp-sec, .hp-end { padding: 28px 0 !important; }
  .hp-fit__row, .hp-step, .hp-cost__item, .lp-hip .cell, .lp-hip .faq__list details, .lp-hip .pt-fig { break-inside: avoid; }
}