/* ============================================================
   /hip-pain: the hip condition page.
   Loaded only by hip-pain.html, after site.css (nav, buttons, the
   closing .ctaband, footer and the type tokens come from there), so
   nothing here can reach another page.
   ============================================================ */

/* <html> scrolls, so the bar heights and the landing offset live on it.
   hip-pain.js overwrites both heights from the live nav and jump bar. */
:root {
  --hp-navh: 70px;
  --hp-jumph: 52px;
  scroll-padding-top: calc(var(--hp-navh) + var(--hp-jumph) + 24px);
}
.hp {
  --hp-wrap: 1200px;
  --hp-gutter: clamp(20px, 4vw, 48px);
  --hp-ok: var(--accent-blue);
  --hp-also: #5B8DBF;        /* glyph strokes and dots only: 3.5:1, too light for text */
  --hp-no: #7F8C9E;          /* the same, 3.4:1 */
  --hp-also-text: #3F6E9E;   /* 5.2:1 on white */
  --hp-no-text: #5E6B7C;     /* 5.5:1 on white */
  --hp-blue-rgb: 45, 110, 177;  /* --accent-blue, for its translucent washes */
  --hp-navy-lift: #1D3B70;   /* a step's lit badge on the navy section */
  --hp-ease: cubic-bezier(.16, 1, .3, 1);
}

/* The headings fit on one line only in the display face, which is far
   narrower than any serif a browser falls back to. Until it arrives, the
   fallback is drawn at the display face's width, so a late font swaps in
   place instead of unwrapping the hero heading and moving the page up a line. */
@font-face { font-family: "hp-display-fallback"; src: local("Times New Roman"), local("Liberation Serif"), local("Noto Serif"); size-adjust: 78%; }
.hp main { --font-display: 'Cormorant Garamond', "hp-display-fallback", 'Times New Roman', Georgia, serif; }

/* No text block is capped tighter than the box that holds it. The global
   <p> measure (42rem) is lifted for this page only. */
.hp main p { max-width: none; }
/* parts waiting to slide in never give the page a sideways scroll */
.hp main { overflow-x: clip; }
/* a jump moves focus to the heading it lands on; the short rule drawn under
   it (hpArrive) is what shows the arrival, so the heading takes no ring */
.hp main h2[tabindex="-1"]:focus { outline: 0; }

.hp-jump a, .hp-fact, .hp-rel__row, .hp-back { border-bottom: 0; }
.hp main summary:focus-visible { outline-offset: 3px; }
.hp main a:focus-visible, .hp main summary:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 3px; border-radius: 4px; }
.hp main .hp-sec--dark a:focus-visible, .hp .ctaband a:focus-visible { outline-color: #fff; }
/* the jump bar scrolls sideways and so clips anything outside it: ring inside */
.hp .hp-jump a:focus-visible { outline-offset: -2px; }

.hp-wrap { max-width: var(--hp-wrap); margin: 0 auto; padding: 0 var(--hp-gutter); }

/* Headings: one line on a desktop. When a phone forces a wrap, it breaks
   where the styling changes, never inside a half that would fit. */
.hp main h1 > .h-lead, .hp main h1 > em,
.hp main h2 > .h-lead, .hp main h2 > em { display: inline-block; }
.hp main h2 {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(2.1rem, 4.2vw, 3.5rem); line-height: 1.06; text-wrap: balance;
  letter-spacing: -.01em; margin: 0; color: var(--ink); max-width: none;
}
.hp main h2 em { color: var(--accent-blue); }
.hp main .hp-sec--dark h2 { color: #fff; }
.hp main .hp-sec--dark h2 em { color: var(--accent-ice); }

.hp-lede {
  font-size: 1.1875rem; line-height: 1.6; color: var(--ink-muted);
  font-weight: 300; margin: 22px 0 0;
}
.hp-prose p { margin: 0 0 1.1em; color: var(--ink-soft); line-height: 1.7; }
.hp-prose p:last-child { margin-bottom: 0; }

/* ---------------- hero ---------------- */
.hp-hero { padding: clamp(40px, 6vw, 84px) 0 clamp(36px, 4vw, 56px); position: relative; overflow-x: clip; }
.hp-hero h1 {
  font-family: var(--font-display); font-weight: 300; margin: 0;
  font-size: clamp(2.5rem, 4.6vw, 3.7rem); line-height: 1.04; letter-spacing: -.015em;
  color: var(--ink); text-wrap: balance;
}
.hp-hero h1 em { color: var(--accent-blue); }
.hp-hero__row {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(28px, 5vw, 72px); align-items: start; margin-top: clamp(24px, 3vw, 40px);
}
.hp-hero__lede { font-size: clamp(1.125rem, 1.5vw, 1.3125rem); line-height: 1.6; color: var(--ink-soft); font-weight: 300; margin: 0; }
.hp-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 32px; }
.hp-back {
  display: inline-flex; align-items: center; gap: 8px; padding: 13px 2px; min-height: 44px;
  font-size: .9375rem; color: var(--ink-soft); text-decoration: none;
}
.hp-back svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--hp-ease); }
.hp-back:focus-visible { color: var(--accent-blue); }
.hp-back:focus-visible svg { transform: translateX(-3px); }
.hp-hero__art { margin: 0; }
.hipart { width: 100%; height: auto; max-height: 340px; overflow: visible; }
.hipart * { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.hipart__bone, .hipart__head { stroke: var(--ink); stroke-width: 1.6; }
.hipart__cart { stroke: var(--accent-blue); stroke-width: 6; opacity: .35; }
.hipart__lab { fill: var(--accent-ice); stroke: none; }
.hipart__tendon { stroke: var(--accent-ice); stroke-width: 1.4; }
.hipart__needle line { stroke: var(--ink-soft); stroke-width: 2; }
.hipart__needle rect { fill: var(--ink-soft); stroke: none; }
.hipart__contrast { fill: rgba(var(--hp-blue-rgb), .16); stroke: none; }
.hipart__cells circle { fill: var(--accent-blue); stroke: none; }

/* ---------------- at a glance (the hero's two facts, as jump links) ---------------- */
.hp-glance { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.hp-glance__grid { display: grid; grid-template-columns: 1fr 1fr; }
.hp-fact {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; column-gap: 28px;
  padding: 30px 64px 30px 0; text-decoration: none; color: inherit;
}
.hp-fact + .hp-fact { padding-left: clamp(20px, 3vw, 40px); border-left: 1px solid var(--border); }
.hp-fact__n { font-family: var(--font-display); font-size: clamp(1.9rem, 2.6vw, 2.4rem); line-height: 1; color: var(--ink); white-space: nowrap; }
.hp-fact__n em { color: var(--accent-blue); }
.hp-fact__text { flex: 1 1 14rem; font-size: .9688rem; line-height: 1.5; color: var(--ink-soft); }
.hp-fact__text b { font-weight: 500; color: var(--ink); }
.hp-fact__go {
  width: 34px; height: 34px; padding: 7px; border-radius: 50%;
  border: 1px solid var(--border-strong); fill: none; stroke: var(--accent-blue); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  position: absolute; right: 8px; top: 50%; margin-top: -17px;
  transition: transform .35s var(--hp-ease), background .3s, border-color .3s;
}
.hp-fact:focus-visible .hp-fact__go { transform: translateY(3px); background: var(--accent-blue); border-color: var(--accent-blue); stroke: #fff; }
.hp-fact:focus-visible .hp-fact__n { color: var(--accent-blue-hover); }

/* ---------------- jump bar ---------------- */
.hp-jump {
  position: sticky; top: var(--hp-navh); z-index: 40;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(180%) blur(10px); -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow .35s var(--hp-ease), opacity .3s var(--hp-ease), transform .45s var(--hp-ease), visibility 0s;
}
/* at the closing call there is nothing left to jump to: the bar steps aside */
.hp-jump.is-done { opacity: 0; transform: translateY(-100%); visibility: hidden; pointer-events: none; transition: opacity .3s var(--hp-ease), transform .45s var(--hp-ease), visibility 0s .45s; }
.hp-jump.is-stuck { box-shadow: 0 6px 18px rgba(11, 29, 58, .06); }
/* how far through the page the reader is, drawn along the bar's own lower edge */
.hp-jump::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--accent-blue); transform: scaleX(var(--hp-p, 0)); transform-origin: left;
}
.hp-jump ul {
  list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(18px, 3vw, 40px);
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.hp-jump ul::-webkit-scrollbar { display: none; }
.hp-jump a {
  position: relative; display: block; padding: 15px 0 14px; white-space: nowrap;
  font-size: .9375rem; color: var(--ink-muted); text-decoration: none;
}
.hp-jump a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--accent-blue); transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--hp-ease);
}
.hp-jump a:focus-visible, .hp-jump a.is-current { color: var(--ink); }
.hp-jump a.is-current::after { transform: scaleX(1); }

/* ---------------- sections ---------------- */
.hp-sec { padding: clamp(72px, 9vw, 128px) 0; position: relative; }
.hp-sec--tight { padding: clamp(64px, 7vw, 96px) 0; }
/* the wash is used once (the map); white sections that meet are parted by a rule */
.hp-sec--rule { padding-top: clamp(56px, 7vw, 96px); }
.hp-sec--rule::before { content: ""; position: absolute; top: 0; left: max(var(--hp-gutter), calc((100% - var(--hp-wrap)) / 2 + var(--hp-gutter))); right: max(var(--hp-gutter), calc((100% - var(--hp-wrap)) / 2 + var(--hp-gutter))); height: 1px; background: var(--border); }
.hp-sec--wash { background: var(--accent-wash); }
.hp-sec--dark { background: var(--navy-brand); color: #fff; }
.hp-sec--dark .hp-lede { color: rgba(255, 255, 255, .74); }
.hp-sec--dark .hp-prose p { color: rgba(255, 255, 255, .82); }
.hp-sec--dark .hp-prose strong { color: #fff; font-weight: 500; }
.hp-sec--dark .hp-prose a { color: var(--accent-ice); border-bottom: 1px solid rgba(124, 169, 209, .4); }
.hp-sec--dark .hp-prose a:focus-visible { color: #fff; border-color: #fff; }

/* ---------------- candidacy ---------------- */
.hp-cand {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(32px, 5vw, 80px); margin-top: clamp(36px, 4vw, 56px); align-items: start;
}
.hp-fit { list-style: none; margin: 0; padding: 0; display: grid; }
.hp-fit__item {
  display: grid; grid-template-columns: 64px 1fr; gap: 22px; align-items: start;
  padding: 24px 0; border-top: 1px solid var(--border);
}
.hp-fit__item:last-child { border-bottom: 1px solid var(--border); }
.hp-fit__label { font-size: .8125rem; font-weight: 500; letter-spacing: .02em; display: flex; align-items: center; gap: 8px; }
.hp-fit__label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--dot); }
.hp-fit__item--strong .hp-fit__label { color: var(--hp-ok); --dot: var(--hp-ok); }
.hp-fit__item--also .hp-fit__label { color: var(--hp-also-text); --dot: var(--hp-also); }
.hp-fit__item--not .hp-fit__label { color: var(--hp-no-text); --dot: var(--hp-no); }
.hp-fit h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.55rem; line-height: 1.2; margin: 6px 0; color: var(--ink); }
.hp-fit p { margin: 0; color: var(--ink-muted); font-size: .9688rem; line-height: 1.6; }

.hp-glyph { width: 64px; height: 64px; }
.hp-glyph * { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.hp-glyph .g-socket, .hp-glyph .g-head, .hp-glyph .g-neck { stroke: var(--ink); stroke-width: 1.6; }
.hp-glyph .g-cart { stroke: var(--accent-blue); stroke-width: 3.4; opacity: .45; }
.hp-glyph .g-tear { stroke: var(--hp-also); stroke-width: 2; }
.hp-glyph .g-crack { stroke: var(--hp-no); stroke-width: 1.6; }
.hp-fit__item--not .g-head, .hp-fit__item--not .g-socket, .hp-fit__item--not .g-neck { stroke: var(--hp-no); }

/* ---------------- indications ---------------- */
.hp-ind {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 5vw, 80px); margin-top: clamp(36px, 4vw, 56px); align-items: start;
}
.hp-ind__map { margin: 0; position: sticky; top: calc(var(--hp-navh) + var(--hp-jumph) + 32px); }
/* on a short laptop screen the pinned map stays whole under the two bars */
.hipmap { width: 100%; height: auto; max-width: 420px; max-height: calc(100vh - var(--hp-navh) - var(--hp-jumph) - 64px); }
.hipmap * { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.hm-bone { stroke: var(--ink); stroke-width: 1.5; opacity: .75; }
.hm-zone { stroke: var(--accent-ice); stroke-width: 8; opacity: .35; transition: opacity .5s var(--hp-ease), stroke .5s var(--hp-ease); }
.hm-zone--lab { fill: var(--accent-ice); stroke-width: 2; }
.hm-pin { fill: #fff; stroke: var(--accent-ice); stroke-width: 2; transform-box: fill-box; transform-origin: center; transition: transform .5s var(--hp-ease), fill .4s, stroke .4s; }
.hipmap[data-on="oa"] .hm-zone--oa,
.hipmap[data-on="lab"] .hm-zone--lab,
.hipmap[data-on="fai"] .hm-zone--fai { stroke: var(--accent-blue); opacity: 1; }
.hipmap[data-on="lab"] .hm-zone--lab { fill: var(--accent-blue); }
.hipmap[data-on="oa"] .hm-pin--oa,
.hipmap[data-on="lab"] .hm-pin--lab,
.hipmap[data-on="fai"] .hm-pin--fai { fill: var(--accent-blue); stroke: var(--accent-blue); transform: scale(1.35); }

.hm-ring { stroke: var(--accent-blue); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
/* the pin that has just lit sends one ring out, so the eye finds what changed */
.hipmap[data-on="oa"] .hm-ring--oa,
.hipmap[data-on="lab"] .hm-ring--lab,
.hipmap[data-on="fai"] .hm-ring--fai { animation: hpPing .9s var(--hp-ease) 1; }
@keyframes hpPing { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(3.2); } }

.hp-ind__list { display: grid; }
.hp-cond { padding: 30px 0 30px 28px; border-left: 2px solid rgba(var(--hp-blue-rgb), .16); transition: border-color .45s var(--hp-ease); }
.hp-cond.is-on { border-left-color: var(--accent-blue); }
.hp-cond h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.6rem, 2.2vw, 2rem); line-height: 1.15; margin: 0 0 10px; color: var(--ink); }
.hp-cond p { margin: 0; color: var(--ink-soft); line-height: 1.65; }
.hp-cond ul { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.hp-cond li { position: relative; padding-left: 22px; font-size: .9375rem; color: var(--ink-muted); }
.hp-cond li::before {
  content: ""; position: absolute; left: 2px; top: .42em; width: 10px; height: 6px;
  border-left: 1.6px solid var(--accent-blue); border-bottom: 1.6px solid var(--accent-blue); transform: rotate(-45deg);
}

/* ---------------- protocol ---------------- */
.hp-proto {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px); margin-top: clamp(36px, 4vw, 56px); align-items: start;
}
.hp-steps { list-style: none; margin: 0; padding: 0; }

/* The two paragraphs a phone reader can skip sit behind a native fold. On a
   desktop the fold is always open and its handle is not shown. */
.hp-more > summary {
  list-style: none; cursor: pointer; display: none; align-items: center; gap: 8px;
  min-height: 44px; margin: 0 0 6px; color: var(--accent-ice); font-size: .9375rem; font-weight: 500;
}
.hp-more > summary::-webkit-details-marker { display: none; }
.hp-more > summary svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s var(--hp-ease); }
.hp-more[open] > summary svg { transform: rotate(180deg); }
.hp-more[open] .hp-more__open, .hp-more:not([open]) .hp-more__shut { display: none; }
.hp main .hp-sec--dark .hp-more > summary:focus-visible { outline: 2px solid #fff; border-radius: 4px; }
.hp-more.is-unfolding > .hp-more__body { animation: hpUnfold .5s var(--hp-ease) both; }
@keyframes hpUnfold { 0% { opacity: 0; transform: translateY(-8px); } 100% { opacity: 1; transform: none; } }
/* each step draws the line down to the next one, so the rail ends on the
   last circle instead of running past it */
.hp-step::before, .hp-step::after { content: ""; position: absolute; left: 23.5px; top: 48px; bottom: 0; width: 1px; }
.hp-step::before { background: rgba(255, 255, 255, .18); }
.hp-step::after {
  background: var(--accent-ice); transform: scaleY(0); transform-origin: top;
  transition: transform .9s var(--hp-ease);
}
.hp-step.is-past::after { transform: scaleY(1); }
.hp-step:last-child::before, .hp-step:last-child::after { display: none; }
.hp-step { position: relative; z-index: 1; display: grid; grid-template-columns: 48px 1fr; gap: 20px; padding-bottom: 30px; }
.hp-step:last-child { padding-bottom: 0; }
.hp-step__icon {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: var(--navy-brand); border: 1px solid rgba(124, 169, 209, .45);
  transition: background .5s var(--hp-ease), border-color .5s;
}
.hp-step.is-on .hp-step__icon { background: var(--hp-navy-lift); border-color: var(--accent-ice); }
.hp-step__icon svg { width: 22px; height: 22px; fill: none; stroke: var(--accent-ice); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.hp-step__icon .hp-drip { fill: var(--accent-ice); stroke: none; }
.hp-step h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.45rem; line-height: 1.2; margin: 10px 0 6px; color: #fff; }
.hp-step p { margin: 0; color: rgba(255, 255, 255, .74); font-size: .9688rem; line-height: 1.6; }
.hp-step p.hp-step__meta { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-size: .875rem; color: var(--accent-ice); }
.hp-step__meta svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
/* the clock beside "~45 min" turns its hand once when the reader reaches it */
.hp-step__meta svg path { transform-origin: 8px 8px; }
.hp-step.is-on .hp-step__meta svg path { animation: hpTick 1.4s var(--hp-ease) .3s 1; }
@keyframes hpTick { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }

/* ---------------- timeline ---------------- */
.hp-time {
  list-style: none; margin: clamp(40px, 5vw, 64px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 28px; position: relative;
}
/* the track, and the band over the two points where most change happens */
.hp-time::before {
  content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 2px;
  background: var(--border-strong);
  transform: scaleX(var(--draw, 1)); transform-origin: left; transition: transform 1.4s var(--hp-ease);
}
.hp-time::after {
  content: ""; position: absolute; top: 3px; height: 12px; border-radius: 6px;
  left: calc(25% + 7px); width: 25%;
  background: rgba(var(--hp-blue-rgb), .16);
  opacity: var(--draw, 1); transition: opacity .8s var(--hp-ease) .9s;
}
.hp-time__pt { position: relative; padding-top: 34px; }
.hp-time__dot {
  position: absolute; top: 0; left: 0; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 2px solid var(--ink-muted); z-index: 1;
}
.hp-time__pt--peak .hp-time__dot { background: var(--accent-blue); border-color: var(--accent-blue); }
.hp-time__when { font-family: var(--font-display); font-size: 1.75rem; line-height: 1; color: var(--ink); }
.hp-time__pt--peak .hp-time__when { color: var(--accent-blue); }
.hp-time h3 { font-family: var(--font-body); font-size: 1rem; font-weight: 500; margin: 12px 0 6px; color: var(--ink); line-height: 1.35; }
.hp-time p { margin: 0; font-size: .9375rem; line-height: 1.6; color: var(--ink-muted); }
.hp-time__after {
  display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: center;
  margin-top: clamp(44px, 5vw, 72px);
}
/* the hip under load: the weight the sentence beside it tells the reader to watch */
.hp-load { width: 72px; height: auto; overflow: visible; }
.hp-glyph .g-load { stroke: var(--accent-blue); stroke-width: 2; }
.hp-js .hp-time.is-in ~ .hp-time__after .g-load { animation: hpLoad 1.3s ease-in-out 1.5s 2; }
@keyframes hpLoad { 0%, 100% { transform: none; } 45% { transform: translateY(5px); } }
.hp main .hp-time__signal { margin: 0; font-family: var(--font-display); font-size: clamp(1.45rem, 2.1vw, 1.85rem); line-height: 1.3; color: var(--ink); font-weight: 400; }

/* ---------------- questions ---------------- */
.hp-faq__list { border-top: 1px solid var(--border-strong); margin-top: clamp(32px, 4vw, 48px); }
.hp-faq__list details { border-bottom: 1px solid var(--border-strong); }
.hp-faq__list summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 24px 0; font-family: var(--font-display); font-size: clamp(1.3rem, 1.8vw, 1.6rem); line-height: 1.25; color: var(--ink);
  transition: color .25s;
}
.hp-faq__list summary::-webkit-details-marker { display: none; }
.hp-faq__ic { flex: none; position: relative; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border-strong); transition: background .3s, border-color .3s, transform .45s var(--hp-ease); }
.hp-faq__ic::before, .hp-faq__ic::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; margin: -.75px 0 0 -6px; background: var(--ink); transition: transform .45s var(--hp-ease), background .3s; }
.hp-faq__ic::after { transform: rotate(90deg); }
/* is-closing: still [open] while the answer eases shut, but the icon has already turned back */
.hp-faq__list details[open]:not(.is-closing) .hp-faq__ic { background: var(--accent-blue); border-color: var(--accent-blue); }
.hp-faq__list details[open]:not(.is-closing) .hp-faq__ic::before, .hp-faq__list details[open]:not(.is-closing) .hp-faq__ic::after { background: #fff; }
.hp-faq__list details[open]:not(.is-closing) .hp-faq__ic::after { transform: rotate(0deg); }
.hp-faq__a { padding: 0 60px 26px 0; color: var(--ink-soft); line-height: 1.7; }

/* ---------------- related ---------------- */
.hp-rel { list-style: none; margin: clamp(32px, 4vw, 48px) 0 0; padding: 0; border-top: 1px solid var(--border); }
.hp-rel li { border-bottom: 1px solid var(--border); }
.hp-rel__row {
  display: grid; grid-template-columns: 48px minmax(0, 15rem) minmax(0, 1fr) 40px; gap: 28px; align-items: center;
  padding: 22px 8px; text-decoration: none; color: inherit; transition: background .3s var(--hp-ease), padding .4s var(--hp-ease);
}
.hp-rel__ic { width: 48px; height: 48px; fill: none; stroke: var(--accent-blue); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.hp-rel__title { font-family: var(--font-display); font-size: 1.6rem; line-height: 1.15; color: var(--ink); }
.hp-rel__text { color: var(--ink-muted); font-size: .9688rem; line-height: 1.55; }
.hp-rel__go { width: 40px; height: 40px; padding: 10px; border-radius: 50%; border: 1px solid var(--border-strong); fill: none; stroke: var(--accent-blue); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .4s var(--hp-ease), background .3s, stroke .3s, border-color .3s; }
.hp-rel__row:focus-visible .hp-rel__title { color: var(--accent-blue-hover); }
.hp-rel__row:focus-visible .hp-rel__go { background: var(--accent-blue); border-color: var(--accent-blue); stroke: #fff; transform: translateX(4px); }

/* The press is answered in colour on every device (a finger gets none of the
   hover states below). Colour only: nothing moves under a finger. */
.hp-fact:active .hp-fact__go, .hp-rel__row:active .hp-rel__go { background: var(--accent-blue); border-color: var(--accent-blue); stroke: #fff; }
.hp-jump a:active { color: var(--ink); }
.hp-faq__list summary:active { color: var(--accent-blue); }
.hp-faq__list summary:active .hp-faq__ic { border-color: var(--accent-blue); }

/* Pointer-only states. A finger leaves :hover behind after a tap, which would
   hold a row in its shifted, washed state until the next tap elsewhere. */
@media (hover: hover) {
  .hp-back:hover { color: var(--accent-blue); }
  .hp-back:hover svg { transform: translateX(-3px); }
  .hp-fact:hover .hp-fact__go { transform: translateY(3px); background: var(--accent-blue); border-color: var(--accent-blue); stroke: #fff; }
  .hp-fact:hover .hp-fact__n { color: var(--accent-blue-hover); }
  .hp-jump a:hover { color: var(--ink); }
  .hp-faq__list summary:hover { color: var(--accent-blue); }
  .hp-faq__list summary:hover .hp-faq__ic { border-color: var(--accent-blue); }
  .hp-sec--dark .hp-prose a:hover { color: #fff; border-color: #fff; }
  .hp-rel__row:hover { background: var(--accent-wash); padding-left: 18px; padding-right: 14px; }
  .hp-rel__row:hover .hp-rel__title { color: var(--accent-blue-hover); }
  .hp-rel__row:hover .hp-rel__go { background: var(--accent-blue); border-color: var(--accent-blue); stroke: #fff; transform: translateX(4px); }
}

.hp-sec h2 { position: relative; }
.hp-sec h2::after {
  content: ""; position: absolute; left: 0; bottom: -10px; width: 64px; height: 2px;
  background: var(--accent-blue); transform: scaleX(0); transform-origin: left; opacity: 0;
}
.hp-sec--dark h2::after { background: var(--accent-ice); }
.hp-sec h2.is-arrived::after { animation: hpArrive 2.1s var(--hp-ease) both; }
@keyframes hpArrive { 0% { transform: scaleX(0); opacity: 1; } 35% { transform: scaleX(1); opacity: 1; } 75% { opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }

/* closing band: site.css lays it out; these set its heading for this page */
.hp .ctaband h2 { margin: 0 0 20px; color: #fff; font-size: clamp(2.2rem, 4vw, 3.5rem); }
.hp .ctaband h2 em { color: var(--accent-ice); }

/* ---------------- motion (layered over visible defaults) ---------------- */
.hp-js .draw { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); }
.hp-js .is-in .draw { stroke-dashoffset: 0; transition: stroke-dashoffset 1.8s var(--hp-ease); }
.hp-js .is-in .hipart__head.draw { transition-delay: .25s; }
.hp-js .is-in .hipart__cart.draw { transition-delay: .6s; }
.hp-js .is-in .hipart__tendon.draw { transition-delay: .9s; }
.hp-js .hipart__lab, .hp-js .hipart__contrast, .hp-js .hipart__cells circle { opacity: 0; }
.hp-js .is-in .hipart__lab { opacity: 1; transition: opacity .6s .9s; }
.hp-js .hipart__needle { transform: translate(60px, -44px); opacity: 0; }
.hp-js .is-in .hipart__needle { transform: none; opacity: 1; transition: transform 1.2s var(--hp-ease) 1.3s, opacity .4s 1.3s; }
.hp-js .is-in .hipart__contrast { animation: hpContrast 1.4s var(--hp-ease) 2.4s both; }
/* the cells arrive once and stay: nothing on the page moves for good */
.hp-js .is-in .hipart__cells circle { animation: hpCell 2.7s ease-out both; }
.hp-js .is-in .hipart__cells circle:nth-child(1) { animation-delay: 3.0s; }
.hp-js .is-in .hipart__cells circle:nth-child(2) { animation-delay: 3.2s; }
.hp-js .is-in .hipart__cells circle:nth-child(3) { animation-delay: 3.4s; }
.hp-js .is-in .hipart__cells circle:nth-child(4) { animation-delay: 3.6s; }
.hp-js .is-in .hipart__cells circle:nth-child(5) { animation-delay: 3.3s; }
.hp-js .is-in .hipart__cells circle:nth-child(6) { animation-delay: 3.5s; }
@keyframes hpContrast { 0% { opacity: 0; transform: scale(.4); } 40% { opacity: 1; } 100% { opacity: .55; transform: none; } }
@keyframes hpCell { 0% { opacity: 0; transform: translateY(-4px); } 33% { opacity: .95; transform: none; } 100% { opacity: .95; transform: none; } }
.hipart__contrast, .hipart__cells circle { transform-box: fill-box; transform-origin: center; }

/* first paint: the heading rises a line at a time, then the answer and the
   way in; the two arrows under the hero dip once to say they lead down */
.hp-js .hp-hero h1 > *, .hp-js .hp-hero__lede, .hp-js .hp-hero__actions { animation: hpRise .8s var(--hp-ease) both; }
.hp-js .hp-hero h1 > em { animation-delay: .12s; }
.hp-js .hp-hero__lede { animation-delay: .26s; }
.hp-js .hp-hero__actions { animation-delay: .38s; }
@keyframes hpRise { 0% { opacity: 0; transform: translateY(.5em); } 100% { opacity: 1; transform: none; } }
.hp-js .hp-fact__go { animation: hpNudge .9s ease-in-out 1.5s 2; }
.hp-js .hp-fact + .hp-fact .hp-fact__go { animation-delay: 1.65s; }
@keyframes hpNudge { 0%, 100% { transform: none; } 50% { transform: translateY(4px); } }

/* fit glyphs settle in one after another */
.hp-js .hp-fit__item .hp-glyph { opacity: 0; transform: scale(.85); transition: opacity .6s var(--hp-ease), transform .8s var(--hp-ease); }
.hp-js .hp-fit.is-in .hp-glyph { opacity: 1; transform: none; }
.hp-js .hp-fit.is-in .hp-fit__item:nth-child(2) .hp-glyph { transition-delay: .15s; }
.hp-js .hp-fit.is-in .hp-fit__item:nth-child(3) .hp-glyph { transition-delay: .3s; }
.hp-fit__item--also .g-tear { transform-box: fill-box; transform-origin: left center; }
.hp-js .hp-fit.is-in .hp-fit__item--also .g-tear { animation: hpTear 2.6s ease-in-out 1s 2; }
@keyframes hpTear { 0%, 100% { transform: none; } 50% { transform: rotate(-14deg); } }

/* the timeline track draws in when it arrives */
.hp-js .hp-time { --draw: 0; }
.hp-js .hp-time.is-in { --draw: 1; }
.hp-js .hp-time__dot { transform: scale(0); transition: transform .5s var(--hp-ease); }
.hp-js .hp-time.is-in .hp-time__dot { transform: none; }
.hp-js .hp-time.is-in .hp-time__pt:nth-child(2) .hp-time__dot { transition-delay: .35s; }
.hp-js .hp-time.is-in .hp-time__pt:nth-child(3) .hp-time__dot { transition-delay: .7s; }
.hp-js .hp-time.is-in .hp-time__pt:nth-child(4) .hp-time__dot { transition-delay: 1.05s; }

@keyframes hpDrip { 0% { transform: translateY(-3px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(5px); opacity: 0; } }
/* three drops when the reader reaches the IV step, then the bag rests */
.hp-step.is-on .hp-step__icon .hp-drip { animation: hpDrip 2.2s ease-in 3; }

/* Reduced motion and print both get the finished page. */
@media (prefers-reduced-motion: reduce), print {
  .hp *, .hp *::before, .hp *::after { animation: none !important; transition: none !important; }
  .hp-js .draw { stroke-dashoffset: 0; }
  .hp-js .hipart__lab, .hp-js .hipart__cells circle { opacity: 1; }
  .hp-js .hipart__contrast { opacity: .55; }
  .hp-js .hipart__needle { transform: none; opacity: 1; }
  .hp-js .hp-fit__item .hp-glyph { opacity: 1; transform: none; }
  .hp-js .hp-time { --draw: 1; }
  .hp-js .hp-time__dot { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hp-step::after { transform: scaleY(1); }
}

/* ---------------- tablet ---------------- */
@media (max-width: 960px) {
  .hp-hero__row { grid-template-columns: 1fr; }
  .hp-hero__art { max-width: 380px; margin: 0 auto; }
  .hp-cand, .hp-ind, .hp-proto { grid-template-columns: 1fr; }
  .hp-ind__map { position: static; display: flex; justify-content: center; }
  .hipmap { max-width: 220px; }
  .hp-time { grid-template-columns: 1fr 1fr; gap: 36px 28px; }
  .hp-time::before, .hp-time::after { display: none; }
}

/* ---------------- phone ---------------- */
@media (max-width: 640px) {
  :root { --hp-jumph: 48px; }
  .hp-hero { padding-top: 28px; }
  .hp-hero__art { max-width: 240px; }
  .hp-hero__row { gap: 20px; }
  .hp-hero__actions .btn { width: 100%; justify-content: center; }
  .hp-glance__grid { grid-template-columns: 1fr; }
  .hp-fact { padding: 20px 52px 20px 0; }
  .hp-fact + .hp-fact { padding-left: 0; border-left: 0; border-top: 1px solid var(--border); }
  .hp-fact__n { font-size: 2rem; margin: 0 0 6px; flex: 0 0 100%; }
  .hp-jump a { padding: 13px 0 12px; font-size: .875rem; }
  .hp-jump ul { mask-image: linear-gradient(90deg, #000 85%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); }
  /* once the track has moved, links leave under a fade on the left as well */
  .hp-jump ul.is-moved { mask-image: linear-gradient(90deg, transparent, #000 9%, #000 85%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 85%, transparent); }
  /* room past the last link, so the current one never sits under the fade */
  .hp-jump ul::after { content: ""; flex: 0 0 15%; }
  .hp-fit__item { grid-template-columns: 52px 1fr; gap: 16px; }
  .hp-glyph { width: 52px; height: 52px; }
  .hp-time__after { grid-template-columns: 1fr; }
  .hp-load { width: 60px; }
  .hp-fit h3 { font-size: 1.35rem; }
  .hipmap { max-width: 180px; }
  .hp-cond { padding: 24px 0 24px 18px; }
  .hp-step { gap: 16px; }
  .hp-more > summary { display: inline-flex; }
  /* the timeline becomes a vertical track */
  .hp-time { grid-template-columns: 1fr; gap: 0; }
  .hp-time__pt { padding: 0 0 28px 38px; border-left: 2px solid var(--border-strong); margin-left: 8px; }
  .hp-time__pt:last-child { border-left-color: transparent; padding-bottom: 0; }
  .hp-time__pt--peak { border-left-color: rgba(var(--hp-blue-rgb), .35); }
  .hp-time__dot { left: -10px; }
  .hp-time h3 { margin-top: 8px; }
  .hp-faq__a { padding-right: 0; }
  .hp-rel__row { grid-template-columns: 48px 1fr 32px; grid-template-areas: "ic title go" "ic text go"; gap: 4px 16px; padding: 18px 0; }
  .hp-rel__ic { grid-area: ic; width: 48px; height: 48px; align-self: start; }
  .hp-rel__title { grid-area: title; font-size: 1.35rem; }
  .hp-rel__text { grid-area: text; }
  .hp-rel__go { grid-area: go; width: 32px; height: 32px; padding: 7px; }
  .hp-rel__row:hover { padding-left: 0; padding-right: 0; background: none; }
}

/* ---------------- print: the page without its bars ---------------- */
@media print {
  .hp-jump, .hp-jump::after, .hp-fact__go, .hp-rel__go, .hp-faq__ic, .hp-more > summary, .hp-back { display: none; }
  .hp-ind__map { position: static; }
  .hp-more::details-content, .hp-faq__list details::details-content { content-visibility: visible; display: block; }
  /* dark text on white paper, whatever the printer does with backgrounds */
  .hp-sec--dark, .hp-sec--wash, .hp .ctaband { background: #fff; }
  .hp main .hp-sec--dark h2, .hp main .hp-sec--dark h2 em, .hp-sec--dark .hp-lede, .hp-sec--dark .hp-prose p, .hp-sec--dark .hp-prose strong,
  .hp-sec--dark .hp-prose a, .hp-step h3, .hp-step p, .hp-step p.hp-step__meta,
  .hp .ctaband h2, .hp .ctaband h2 em, .hp .ctaband p { color: #111; }
  .hp-step__icon { background: #fff; border-color: #111; }
  .hp-step__icon svg { stroke: #111; }
  .hp-step::before { background: #999; }
  .hp-step::after { display: none; }
  /* a button's white label has no fill behind it on paper */
  .hp .btn { color: #111 !important; background: none !important; border: 1px solid #111 !important; box-shadow: none !important; }
}