/* /knee-pain: a condition page laid out for reading and moving around.
   Every class is kp- prefixed and this file loads only on this page.
   Visible-by-default: the reveal layer only hides things once knee-pain.js
   has added .kp-js to <html>, and reduced motion shows every end state. */

.kp {
  --kp-wrap: 1240px;
  --kp-pad: clamp(20px, 4vw, 48px);
  --kp-ease: cubic-bezier(.16, 1, .3, 1);
  --kp-line: rgba(11, 29, 58, .12);
  --kp-line-strong: rgba(11, 29, 58, .24);
  --kp-grey: #8A9BB0;                         /* "not a fit" ring, worn cartilage strokes */
  --kp-ice-line: rgba(124, 169, 209, .55);    /* accent-ice at line strength, on navy */
  --kp-nav-h: 64px;
  --kp-toc-h: 52px;
  /* the shared quiz paints with these; on this page it takes the brand wash and blue, not cream and gold */
  --pricing-cream: var(--accent-wash);
  --pricing-gold-deep: var(--accent-blue);
  background: #fff;
}
.kp main { overflow-x: clip; }   /* a block waiting to slide in never widens the page */
.kp main p { max-width: none; }
/* colors_and_type.css underlines every link with a border; this page draws its own
   (the rows under "Other joint regions" keep theirs: it is the rule between them) */
.kp main a:not(.btn):not(.kp-rel__card) { border-bottom: 0; }
.kp main h1, .kp main h2, .kp main h3 { text-wrap: balance; }
.kp-wrap { max-width: var(--kp-wrap); margin: 0 auto; padding: 0 var(--kp-pad); }
/* html's scroll-padding (nav + bar + 16px) keeps keyboard focus clear of the
   bars; a jump then pulls back into the section's own top padding so its
   heading lands just under the bar. 132px and --kp-nav-h above stand in until
   knee-pain.js has measured the real nav and bar, and it keeps them exact. */
html:has(> body.kp) { scroll-padding-top: 132px; }
.kp main section { scroll-margin-top: calc(-24px - clamp(32px, 6vw, 80px)); }
.kp .qz { scroll-margin-top: -92px; }

/* ---------- headings: one line on a desktop, break at the style change ---------- */
.kp-h2 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2rem, 3.6vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0;
}
.kp-h2 em, .kp-h1 em { color: var(--accent-blue); }
.kp main h2 > .h-lead, .kp main h2 > em { display: inline-block; }
.kp-lede {
  font-size: clamp(1.0625rem, 1.3vw, 1.1875rem);
  line-height: 1.65;
  color: var(--ink-muted);
  margin: 22px 0 0;
}
.kp-prose p { font-size: 1.0625rem; line-height: 1.7; color: var(--ink-soft); margin: 0 0 1.1em; }
.kp-prose p:last-child { margin-bottom: 0; }

.kp-sec { padding: clamp(60px, 9vw, 128px) 0; position: relative; }
/* white follows white: a hairline the width of the column, and the section
   above gives back some of its foot so the two do not stand a screen apart.
   The top padding is never touched: a jump lands by it. */
.kp-sec--rule::before {
  content: ""; position: absolute; top: 0; height: 1px; background: var(--kp-line);
  left: max(var(--kp-pad), calc(50% - var(--kp-wrap) / 2 + var(--kp-pad)));
  right: max(var(--kp-pad), calc(50% - var(--kp-wrap) / 2 + var(--kp-pad)));
}
.kp-cand { padding-bottom: clamp(56px, 6.5vw, 96px); }
.kp-faq { padding-bottom: clamp(24px, 3vw, 40px); }
.kp-rel.kp-sec--rule::before { content: none; }   /* the last answer's rule already closes the list above */
.kp-sec--dark { background: var(--navy-brand); color: #fff; overflow: hidden; }
.kp-sec--dark .kp-h2 { color: #fff; }
.kp-sec--dark .kp-h2 em { color: var(--accent-ice); }
.kp-sec--dark .kp-lede { color: rgba(255, 255, 255, .72); }

/* ---------- hero ---------- */
.kp-hero { padding: 0 0 clamp(56px, 7vw, 96px); }
.kp-reviewed { font-size: .8125rem; line-height: 1.5; color: var(--ink-muted); margin: 28px 0 0; }

.kp-h1 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.5rem, 5.6vw, 5rem);
  line-height: 1.04;
  letter-spacing: -.015em;
  margin: clamp(36px, 5.5vw, 76px) 0 0;
  color: var(--ink);
}
.kp-line { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.kp-line > span { display: block; }

.kp-hero__grid {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: clamp(40px, 6vw, 88px); align-items: start; margin-top: clamp(28px, 3.5vw, 44px);
}
.kp-hero__lede { font-size: clamp(1.125rem, 1.45vw, 1.3125rem); line-height: 1.6; color: var(--ink-soft); margin: 0; }
.kp-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 32px; margin-top: 32px; }

.kp-textlink {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 500; font-size: 1rem; color: var(--accent-blue);
  padding: 12px 0;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 8px) / 0 1px no-repeat;
  transition: background-size .45s var(--kp-ease), color .25s;
}
.kp-textlink svg, .kp-rel__go svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .4s var(--kp-ease); }
.kp-textlink:hover { background-size: 100% 1px; color: var(--accent-blue-hover); }
.kp-textlink:hover svg { transform: translateX(4px); }

.kp-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin: 48px 0 0; }
.kp-fact { position: relative; margin: 0; padding-top: 20px; }
/* the rule over each figure is its own line so the first paint can draw it */
.kp-fact::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--kp-line-strong); transform-origin: 0 0; }
.kp-fact dd { margin: 0; }
.kp-fact__n { font-family: var(--font-display); font-weight: 300; font-size: clamp(2.2rem, 3.2vw, 2.9rem); line-height: 1.1; color: var(--ink); }
.kp-fact__n em { color: var(--accent-blue); }
.kp-fact__t { font-size: .9375rem; line-height: 1.55; color: var(--ink-muted); margin-top: 8px !important; }

.kp-hero__media { margin: 0; }
.kp-hero__frame {
  position: relative; aspect-ratio: 3 / 4; max-height: 600px; margin-left: auto;
  border-radius: 16px; overflow: hidden; background: #05070c;
  box-shadow: 0 30px 80px -30px rgba(11, 29, 58, .45);
}
.kp-hero__frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- on-this-page bar ---------- */
.kp-toc {
  /* under the site nav (60) and under its phone menu sheet (55) */
  position: sticky; top: var(--kp-nav-h); z-index: 54;
  background: rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px);
  border-top: 1px solid var(--kp-line); border-bottom: 1px solid var(--kp-line);
  transition: top .3s var(--kp-ease), box-shadow .3s, transform .45s var(--kp-ease);
}
.kp-toc.is-stuck { box-shadow: 0 8px 24px -16px rgba(11, 29, 58, .25); }
.kp-toc.is-tucked { transform: translateY(calc(-100% - 2px)); box-shadow: none; pointer-events: none; }
.kp-toc__track {
  position: relative; max-width: var(--kp-wrap); margin: 0 auto; padding: 0 var(--kp-pad);
  display: flex; gap: clamp(20px, 3vw, 40px); overflow-x: auto; scrollbar-width: none;
  height: var(--kp-toc-h); align-items: stretch;
}
.kp-toc__track::-webkit-scrollbar { display: none; }
/* wherever the labels run past the edge, they fade out rather than stop dead
   (.is-over is set by the script from the track's real width) */
.kp-toc__track.is-over {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent 100%);
}
.kp-toc a {
  /* 8px each side, given back by the margin, so the inset focus ring clears the letters */
  display: flex; align-items: center; white-space: nowrap; flex: none;
  padding: 0 8px; margin: 0 -8px;
  font-size: .9375rem; color: var(--ink-muted); transition: color .25s;
}
.kp-toc a:hover { color: var(--ink); }
/* the bar is always on screen: tabbing through it must not scroll the page to
   clear html's scroll-padding, which the bar itself sits inside */
.kp .kp-toc a { scroll-margin-top: calc(-1 * var(--kp-toc-h) - 40px); }
.kp-toc a.is-on { color: var(--ink); font-weight: 500; }
.kp-toc__bar {
  /* inside the track: anything below its edge would make it scroll up and down */
  position: absolute; left: 0; bottom: 0; height: 2px; width: 1px;
  background: var(--accent-blue); transform-origin: 0 0;
  transform: translateX(var(--x, 0)) scaleX(var(--w, 0));
  transition: transform .5s var(--kp-ease);
}

/* ---------- candidacy ---------- */
.kp-cand__grid {
  display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(40px, 6vw, 96px); margin-top: clamp(40px, 5vw, 64px); align-items: start;
}
.kp-fit { list-style: none; margin: 0; padding: 0; }
.kp-fit__row {
  display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 22px;
  padding: 26px 0; border-top: 1px solid var(--kp-line);
}
.kp-fit__row:first-child { padding-top: 0; border-top: 0; }
.kp-fit__row p { margin: 0; }
.kp-fit__ic { width: 52px; height: 52px; display: block; }
.kp-fit__ic svg { width: 52px; height: 52px; fill: none; stroke: var(--c); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.kp-fit__row--strong { --c: var(--accent-blue); }
.kp-fit__row--also { --c: var(--accent-ice); }
.kp-fit__row--not { --c: var(--kp-grey); }
.kp-fit__label { font-size: .875rem; font-weight: 600; color: var(--accent-blue); }
.kp-fit__row--not .kp-fit__label { color: var(--ink-muted); }
.kp-fit__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.3rem, 1.7vw, 1.55rem); line-height: 1.25; color: var(--ink); margin: 6px 0 8px; }
.kp-fit__text { font-size: 1rem; line-height: 1.6; color: var(--ink-muted); }

/* ---------- indications ---------- */
.kp-ind__grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(4, auto);
  margin-top: clamp(40px, 5vw, 64px);
}
.kp-cond {
  display: grid; grid-row: span 4; grid-template-rows: subgrid;
  padding: 0 clamp(20px, 2.6vw, 40px); border-left: 1px solid var(--kp-line-strong);
}
.kp-cond:first-child { padding-left: 0; border-left: 0; }
.kp-cond:last-child { padding-right: 0; }
.kp-cond p { margin: 0; }
.kp-cond__art { width: 96px; height: 96px; fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 24px; }
.kp-cond__art .kp-draw--accent { stroke: var(--accent-blue); }
.kp-cond__art .kp-draw--worn { stroke: var(--kp-grey); }
.kp-cond__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.45rem, 2vw, 1.8rem); line-height: 1.2; color: var(--ink); margin: 0 0 12px; }
.kp-cond__text { font-size: 1rem; line-height: 1.6; color: var(--ink-soft); }
.kp-ticks { list-style: none; margin: 20px 0 0; padding: 18px 0 0; border-top: 1px solid var(--kp-line); }
.kp-ticks li { position: relative; padding-left: 26px; font-size: .9375rem; line-height: 1.5; color: var(--ink-soft); }
.kp-ticks li + li { margin-top: 10px; }
.kp-ticks li::before {
  content: ""; position: absolute; left: 0; top: .45em; width: 14px; height: 8px;
  border-left: 1.6px solid var(--accent-blue); border-bottom: 1.6px solid var(--accent-blue);
  transform: rotate(-45deg) translate(1px, -1px);
}

/* ---------- protocol (dark) ---------- */
.kp-proto__grid {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(40px, 6vw, 96px); margin-top: clamp(40px, 5vw, 64px); align-items: start;
}
.kp-prose--dark p { color: rgba(255, 255, 255, .78); }
.kp-prose--dark strong { color: #fff; font-weight: 500; }
.kp main .kp-prose--dark a { color: var(--accent-ice); border-bottom: 1px solid rgba(124, 169, 209, .45); transition: border-color .25s, color .25s; }
.kp-prose--dark a:hover { color: #fff; border-color: #fff; }
.kp-proto__media {
  position: relative; margin: 40px 0 0; aspect-ratio: 5 / 6; max-width: 440px;
  border-radius: 16px; overflow: hidden; background: #0b1426;
}
.kp-proto__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.kp-steps { list-style: none; margin: 0; padding: 0; }
.kp-step { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 24px; padding-bottom: 44px; }
.kp-step:last-child { padding-bottom: 0; }
/* one connector per gap, node to node, nothing after the last */
.kp-step:not(:last-child)::after {
  content: ""; position: absolute; left: 23.5px; top: 56px; bottom: 8px; width: 1px;
  background: var(--kp-ice-line); transform-origin: 0 0;
}
.kp-step__node {
  position: relative; z-index: 1; width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--kp-ice-line); background: var(--navy-brand);
  transition: background .5s var(--kp-ease), border-color .5s;
}
.kp-step__node svg { width: 22px; height: 22px; fill: none; stroke: var(--accent-ice); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: stroke .4s; }
.kp-step.is-lit .kp-step__node { background: var(--accent-ice); border-color: var(--accent-ice); }
.kp-step.is-lit .kp-step__node svg { stroke: var(--navy-brand); }
.kp-step__body p { margin: 0; }
.kp-step h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.4rem, 1.9vw, 1.7rem); line-height: 1.2; color: #fff; margin: 0 0 10px; padding-top: 8px; }
.kp-step__body > p:not(.kp-step__meta) { font-size: 1rem; line-height: 1.65; color: rgba(255, 255, 255, .72); }
.kp-step__meta {
  display: inline-block; margin-top: 14px !important; padding: 5px 0 5px 12px;
  border-left: 2px solid var(--accent-ice); font-size: .875rem; color: rgba(255, 255, 255, .86);
}

/* ---------- timeline rail ---------- */
.kp-rail {
  --p: 0;
  list-style: none; margin: clamp(48px, 6vw, 80px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 44px);
  position: relative;
}
.kp-rail::before, .kp-rail::after {
  content: ""; position: absolute; top: 10px; left: 11px; height: 2px;
  width: calc(75% + .75 * clamp(20px, 3vw, 44px));
  background: var(--kp-line-strong);
}
.kp-rail::after { background: var(--accent-blue); transform-origin: 0 0; transform: scaleX(var(--p)); }
.kp-rail__pt { position: relative; padding-top: 44px; }
.kp-rail__pt p { margin: 0; }
.kp-rail__dot {
  position: absolute; z-index: 1; top: 0; left: 0; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; border: 2px solid var(--kp-line-strong);
  transition: border-color .4s, background .4s;
}
.kp-rail__pt.is-lit .kp-rail__dot { border-color: var(--accent-blue); }
.kp-rail__pt--key.is-lit .kp-rail__dot { background: var(--accent-blue); }
.kp-rail__pt--key.is-lit .kp-rail__dot::after {
  content: ""; position: absolute; inset: -8px; border-radius: 50%;
  border: 1px solid var(--accent-blue); animation: kp-ring 2.6s var(--kp-ease) 3 forwards;
}
.kp-rail__when { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.6rem, 2.3vw, 2.1rem); line-height: 1.1; color: var(--ink); }
.kp-rail__pt--key .kp-rail__when { color: var(--accent-blue); }
.kp-rail__pt h3 { font-family: var(--font-body); font-weight: 500; font-size: 1.0625rem; line-height: 1.35; color: var(--ink); margin: 12px 0 8px; }
.kp-rail__pt > p:last-child { font-size: .9375rem; line-height: 1.6; color: var(--ink-muted); }

.kp-time__after {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(32px, 5vw, 72px); margin-top: clamp(56px, 7vw, 88px);
  padding-top: clamp(40px, 5vw, 56px); border-top: 1px solid var(--kp-line);
}
/* the limit is said plainly beside the follow-up: a ruled statement, not a tinted box */
.kp-limit { margin: 0; padding: 2px 0 2px clamp(22px, 2.6vw, 32px); border-left: 3px solid var(--accent-blue); }
.kp-limit p { margin: 0; font-size: 1.0625rem; line-height: 1.7; color: var(--ink-soft); }
.kp-limit .kp-limit__label { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.4rem, 1.9vw, 1.7rem); line-height: 1.2; color: var(--ink); margin: 0 0 12px; }

/* ---------- FAQ ---------- */
.kp-faq__list { margin-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--kp-line-strong); }
.kp-faq details { border-bottom: 1px solid var(--kp-line); }
.kp-faq summary {
  list-style: none; cursor: pointer; position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 24px 0;
  font-family: var(--font-display); font-weight: 400; font-size: clamp(1.25rem, 1.8vw, 1.55rem); line-height: 1.3; color: var(--ink);
  transition: color .25s, padding-left .45s var(--kp-ease);
}
.kp-faq summary::-webkit-details-marker { display: none; }
/* hover styles only where a pointer hovers: a tap would leave them stuck */
@media (hover: hover) {
  .kp-faq summary:hover { color: var(--accent-blue); padding-left: 8px; }
  .kp-faq summary:hover .kp-faq__ic { background: var(--accent-wash); border-color: var(--accent-blue); }
}
.kp-faq__ic {
  flex: none; position: relative; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--kp-line-strong); transition: background .3s, border-color .3s, transform .5s var(--kp-ease);
}
.kp-faq__ic::before, .kp-faq__ic::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; margin: -.75px 0 0 -7px;
  background: var(--ink); transition: transform .45s var(--kp-ease), background .3s;
}
.kp-faq__ic::after { transform: rotate(90deg); }
/* .is-closing is set at the press, so the icon turns back with the answer, not after it */
.kp-faq details[open]:not(.is-closing) .kp-faq__ic { background: var(--accent-blue); border-color: var(--accent-blue); transform: rotate(180deg); }
.kp-faq details[open]:not(.is-closing) .kp-faq__ic::before, .kp-faq details[open]:not(.is-closing) .kp-faq__ic::after { background: #fff; }
.kp-faq details[open]:not(.is-closing) .kp-faq__ic::after { transform: rotate(0deg); }
.kp-faq__a { overflow: hidden; }
.kp-faq__a p { margin: 0; padding: 0 64px 28px 0; font-size: 1.0625rem; line-height: 1.7; color: var(--ink-soft); }

/* ---------- related: rows, each one link ---------- */
.kp-rel__grid { margin-top: clamp(28px, 3.5vw, 44px); border-top: 1px solid var(--kp-line-strong); }
.kp main a.kp-rel__card {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr) 24px; align-items: center;
  gap: 6px clamp(20px, 4vw, 64px); padding: 26px 0; min-height: 44px;
  border-bottom: 1px solid var(--kp-line); color: var(--ink);
  transition: opacity .8s var(--kp-ease), transform .9s var(--kp-ease), border-color .3s;
}
/* out-ranks the reveal's own transition list, so the rule's colour still eases */
.kp-js .kp-sec a.kp-rel__card[data-r] { transition: opacity .8s var(--kp-ease), transform .9s var(--kp-ease), border-color .3s; }
.kp-rel__card p { margin: 0; }
.kp-rel__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.3rem, 1.9vw, 1.6rem); line-height: 1.2; margin: 0; color: var(--ink); transition: color .25s; }
.kp-rel__text { font-size: 1rem; line-height: 1.6; color: var(--ink-muted); }
.kp-rel__go { display: grid; place-items: center; width: 24px; height: 24px; color: var(--accent-blue); }
.kp-rel__card--all .kp-rel__title { grid-column: 1 / 3; font-family: var(--font-body); font-weight: 500; font-size: 1rem; color: var(--accent-blue); }
@media (hover: hover) {
  .kp main a.kp-rel__card:hover { border-bottom-color: var(--accent-blue); color: var(--ink); }
  .kp-rel__card:hover .kp-rel__title { color: var(--accent-blue); }
  .kp-rel__card:hover .kp-rel__go svg { transform: translateX(5px); }
}

/* ---------- closing band (narrow and centered on purpose) ---------- */
.kp-close { position: relative; overflow: hidden; background: var(--navy-brand); color: #fff; text-align: center; padding: clamp(80px, 10vw, 140px) var(--kp-pad); }
.kp-close__inner { position: relative; max-width: 760px; margin: 0 auto; }
.kp-close__h { font-family: var(--font-display); font-weight: 300; font-size: clamp(2.2rem, 4.4vw, 3.6rem); line-height: 1.08; color: #fff; margin: 0; }
.kp-close__h em { color: var(--accent-ice); }
.kp-close p { color: rgba(255, 255, 255, .76); font-size: 1.125rem; line-height: 1.65; margin: 22px auto 32px; }
.kp-close .kp-close__fine { font-size: .8125rem; color: rgba(255, 255, 255, .62); margin: 32px auto 0; }
.kp-close .btn--ice:hover { background: #fff; }

/* ---------- motion ---------- */
@keyframes kp-ring { 0% { transform: scale(.7); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes kp-rise { from { transform: translateY(105%); } to { transform: none; } }
@keyframes kp-frame { from { opacity: 0; transform: scale(.94) translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes kp-draw { to { stroke-dashoffset: 0; } }
@keyframes kp-redraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes kp-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes kp-slide-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes kp-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
@keyframes kp-rule { from { transform: scaleX(0); } to { transform: none; } }
@keyframes kp-tick { from { opacity: 0; transform: rotate(-45deg) translate(1px, -1px) scale(.3); } to { opacity: 1; transform: rotate(-45deg) translate(1px, -1px); } }

/* hero: a loading sequence on first paint */
.kp-js .kp-hero .kp-line > span { animation: kp-rise 1.1s var(--kp-ease) .1s both; }
.kp-js .kp-hero .kp-fact::before { animation: kp-rule 1s var(--kp-ease) .75s both; }
.kp-js .kp-hero .kp-fact:nth-child(2)::before { animation-delay: .9s; }
.kp-js .kp-hero .kp-fact:nth-child(2), .kp-js .kp-hero .kp-reviewed { transition-delay: .5s; }
.kp-js .kp-hero__media { animation: kp-frame 1.2s var(--kp-ease) .35s both; }
.kp-js .kp-toc { animation: kp-slide-in .7s var(--kp-ease) .7s backwards; }
.kp-js .kp-textlink:not(:hover) svg { animation: kp-nudge 2.8s var(--kp-ease) 2.2s 2; }

/* .kp-late: the page had already been painted when the script ran, so what was
   on screen stays as it was seen (.kp-seen, set by the script on those blocks) */
.kp-late .kp-hero .kp-line > span, .kp-late .kp-hero .kp-fact::before, .kp-late .kp-hero__media, .kp-late .kp-toc { animation: none; }

/* scroll reveals, different by what each block is doing */
.kp-js .kp-sec [data-r], .kp-js .kp-close [data-r] { opacity: 0; transition: opacity .8s var(--kp-ease), transform .9s var(--kp-ease); }
.kp-js .kp-hero [data-r] { opacity: 0; transform: translateY(16px); transition: opacity .8s var(--kp-ease) .35s, transform .9s var(--kp-ease) .35s; }
.kp-js [data-r=""] { transform: translateY(22px); }
.kp-js [data-r="left"] { transform: translateX(-28px); }
.kp-js [data-r="frame"] { transform: scale(.96); }
.kp-js [data-r].is-in { opacity: 1; transform: none; }
.kp-js .kp-fit__row:nth-child(2) { transition-delay: .12s; }
.kp-js .kp-fit__row:nth-child(3) { transition-delay: .24s; }
.kp-js .kp-cond:nth-child(2), .kp-js main a.kp-rel__card:nth-child(2) { transition-delay: .08s; }
.kp-js .kp-cond:nth-child(3), .kp-js main a.kp-rel__card:nth-child(3) { transition-delay: .16s; }
.kp-js main a.kp-rel__card:nth-child(4) { transition-delay: .24s; }
/* the stagger is for the arrival only: a row under the pointer answers at once */
.kp-js main a.kp-rel__card.is-in:hover { transition-delay: 0s; }
/* each condition's checks are made one after another once its drawing is down */
.kp-js .kp-cond .kp-ticks li::before { opacity: 0; }
.kp-js .kp-cond.is-in .kp-ticks li::before { animation: kp-tick .5s var(--kp-ease) .55s both; }
.kp-js .kp-cond.is-in .kp-ticks li:nth-child(2)::before { animation-delay: .67s; }
.kp-js .kp-cond.is-in .kp-ticks li:nth-child(3)::before { animation-delay: .79s; }
.kp-js .kp-cond.kp-seen .kp-ticks li::before { animation: none; opacity: 1; }

/* line drawings draw themselves when their block arrives */
.kp-js .kp-draw:not(.kp-draw--worn) { stroke-dasharray: 1; stroke-dashoffset: 1; }
.kp-js .is-in .kp-draw:not(.kp-draw--worn) { animation: kp-draw 1.4s var(--kp-ease) .25s forwards; }
.kp-js .kp-draw--worn, .kp-js .kp-dashed { opacity: 0; transition: opacity .8s ease .9s; }
.kp-js .is-in .kp-draw--worn, .kp-js .is-in .kp-dashed { opacity: 1; }
.kp-js .kp-seen .kp-draw:not(.kp-draw--worn) { stroke-dashoffset: 0; animation: none; }
.kp-js .kp-seen .kp-draw--worn, .kp-js .kp-seen .kp-dashed { transition: none; }

/* the protocol's connectors draw one gap at a time as each node lights */
.kp-js .kp-step:not(:last-child)::after { transform: scaleY(0); transition: transform .9s var(--kp-ease); }
.kp-js .kp-step.is-lit:not(:last-child)::after { transform: none; }
.kp-js .kp-step.is-lit .kp-step__node { animation: kp-pop .6s var(--kp-ease); }
/* and its icon is drawn again in the filled node, so each step is seen to be
   reached; a step still waiting shows its icon in outline, never an empty ring */
.kp-js .kp-step__node svg > * { stroke-dasharray: 1; }
.kp-js .kp-step.is-lit .kp-step__node svg > * { animation: kp-redraw .9s var(--kp-ease) .1s backwards; }
.kp-js .kp-step .kp-step__body { opacity: .9; transition: opacity .6s var(--kp-ease); }
.kp-js .kp-step.is-lit .kp-step__body { opacity: 1; }

/* the timeline points brighten as the rail reaches them */
.kp-js .kp-rail__pt > :not(.kp-rail__dot) { opacity: .9; transition: opacity .6s var(--kp-ease); }
.kp-js .kp-rail__pt.is-lit > * { opacity: 1; }
.kp-js .kp-rail__pt.is-lit .kp-rail__dot { animation: kp-pop .6s var(--kp-ease); }

/* ---------- tablet and phone ---------- */
@media (max-width: 960px) {
  .kp-cand__grid, .kp-proto__grid, .kp-time__after { grid-template-columns: minmax(0, 1fr); }
  /* on a phone the loop follows the buttons, ahead of the two facts */
  .kp-hero__grid { display: flex; flex-direction: column; gap: 0; }
  .kp-hero__copy { display: contents; }
  .kp-hero__media { order: 3; margin-top: 36px; width: 100%; align-self: stretch; }
  .kp-facts { order: 4; }
  .kp-reviewed { order: 5; }
  .kp-hero__frame { margin: 0; width: 100%; max-height: none; aspect-ratio: 4 / 3; }
  .kp-hero__frame video { object-position: 50% 30%; }
  .kp-proto__media { max-width: none; aspect-ratio: 4 / 3; }
  .kp-ind__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 44px; }
  .kp-cond { grid-row: auto; grid-template-rows: none; padding: 0; border-left: 0; }
  .kp-cond + .kp-cond { padding-top: 44px; border-top: 1px solid var(--kp-line-strong); }
  .kp-cond__art { width: 72px; height: 72px; }
  .kp main a.kp-rel__card { grid-template-columns: minmax(0, 1fr) 24px; padding: 22px 0; }
  .kp-rel__title, .kp-rel__text, .kp-rel__card--all .kp-rel__title { grid-column: 1; }
  .kp-rel__go { grid-column: 2; grid-row: 1 / span 2; }
  .kp-rail { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .kp-rail::before, .kp-rail::after { top: 11px; left: 10px; width: 2px; height: var(--kp-rail-len, calc(100% - 22px)); }
  .kp-rail::after { transform: scaleY(var(--p)); }
  .kp-rail__pt { padding: 0 0 0 48px; }
}
@media (max-width: 640px) {
  .kp-facts { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 36px; }
  .kp-hero__actions { gap: 4px 24px; }
  .kp-hero__actions .btn { width: 100%; justify-content: center; }
  .kp-fit__row { grid-template-columns: 40px minmax(0, 1fr); gap: 16px; }
  .kp-fit__ic, .kp-fit__ic svg { width: 40px; height: 40px; }
  .kp-step { grid-template-columns: 40px minmax(0, 1fr); gap: 18px; }
  .kp-step__node { width: 40px; height: 40px; }
  .kp-step:not(:last-child)::after { left: 19.5px; top: 48px; }
  .kp-faq summary { font-size: 1.2rem; padding: 20px 0; }
  .kp-faq__ic { width: 34px; height: 34px; }
  .kp-faq__a p { padding-right: 0; }
}

/* ---------- keyboard: one clear ring everywhere ---------- */
.kp main a:focus-visible, .kp main summary:focus-visible {
  outline: 2px solid var(--accent-blue); outline-offset: 4px; border-radius: 4px;
}
.kp-sec--dark a:focus-visible, .kp-close a:focus-visible { outline-color: var(--accent-ice); }
.kp main .kp-rel__card:focus-visible { outline-offset: 2px; }
/* the bar's track scrolls sideways, which clips anything drawn outside it */
.kp main .kp-toc a:focus-visible { outline-offset: -6px; }
.kp main h2[tabindex="-1"]:focus { outline: none; }

/* ---------- a press is answered at once ---------- */
/* Colour only, and no wait on the colour: on a touch screen there is no hover
   to say the tap landed, and nothing may move under a finger. Each duration
   list follows its element's own transition list, so only the colour is cut. */
.kp-faq summary:active { color: var(--accent-blue); transition-duration: 0s, .45s; }
.kp-faq summary:active .kp-faq__ic { border-color: var(--accent-blue); transition-duration: .3s, 0s, .5s; }
.kp-toc a:active { color: var(--ink); transition-duration: 0s; }
/* a card already lifts under a pointer that hovers; this is for the ones that cannot */
@media (hover: none) {
  .kp main a.kp-rel__card:active { border-bottom-color: var(--accent-blue); transition-duration: 0s; }
  .kp main a.kp-rel__card:active .kp-rel__title { color: var(--accent-blue); transition-duration: 0s; }
}

/* ---------- print: a clean document, every answer open ---------- */
@media print {
  .kp-toc, .kp-hero__media, .kp-proto__media, .kp-faq__ic, .kp-rel__go { display: none !important; }
  .kp *, .kp *::before, .kp *::after { animation: none !important; transition: none !important; }
  .kp [data-r], .kp .kp-step__body, .kp .kp-rail__pt > * { opacity: 1 !important; transform: none !important; }
  .kp .kp-draw:not(.kp-draw--worn) { stroke-dashoffset: 0 !important; }
  .kp .kp-draw--worn, .kp .kp-dashed, .kp .kp-ticks li::before { opacity: 1 !important; }
  .kp .kp-step:not(:last-child)::after, .kp .kp-rail::after, .kp .kp-fact::before { transform: none !important; }
  .kp-rail__dot::after { display: none !important; }
  .kp-sec, .kp-close { padding: 28px 0 !important; }
  .kp-sec--dark, .kp-close { background: #fff !important; color: var(--ink) !important; }
  .kp-sec--dark .kp-h2, .kp-sec--dark h3, .kp-sec--dark .kp-lede, .kp-close__h, .kp-close p, .kp-prose--dark p, .kp-prose--dark strong, .kp-step__body > p { color: var(--ink) !important; }
  .kp-sec--dark .kp-h2 em, .kp-close__h em, .kp main .kp-prose--dark a { color: var(--accent-blue) !important; }
  /* an answer caught mid-animation prints whole (an important rule out-ranks a running animation) */
  .kp-faq__a { height: auto !important; opacity: 1 !important; }
  .kp-hero__grid, .kp-proto__grid, .kp-cand__grid, .kp-time__after { grid-template-columns: minmax(0, 1fr) !important; }
  /* a button's white label has no fill behind it on paper */
  .kp .btn { color: var(--ink) !important; background: none !important; border: 1px solid var(--ink) !important; box-shadow: none !important; }
}

/* ---------- reduced motion: every end state, nothing moving ---------- */
@media (prefers-reduced-motion: reduce) {
  .kp *, .kp *::before, .kp *::after { animation: none !important; transition: none !important; }
  .kp-js [data-r] { opacity: 1 !important; transform: none !important; }
  .kp-js .kp-draw:not(.kp-draw--worn) { stroke-dashoffset: 0 !important; }
  .kp-js .kp-draw--worn, .kp-js .kp-dashed, .kp-js .kp-ticks li::before { opacity: 1 !important; }
  .kp-js .kp-step:not(:last-child)::after { transform: none !important; }
  .kp-rail__dot::after { display: none !important; }
  .kp-js .kp-step .kp-step__body, .kp-js .kp-rail__pt > * { opacity: 1 !important; }
  .kp-rail::after { transform: none !important; }
  html { scroll-behavior: auto; }
}