/* /learn-cells-testing-panel: its own sheet, loaded after site.css.
   One idea runs the page: a vial has to pass a line of checks, in order,
   before a signed page lets it leave the lab. The hero draws that line, the
   five tests are walked down a rail, and the sample certificate at the end
   is the page the line was heading for.
   Blue is "measured and passed"; ink is the spec it was measured against.
   Script: scripts/learn-cells-testing-panel.js. With that script absent every
   part is visible, every fold is open and every link still jumps. */

html:has(body.tpanel) {
  --hc-nav-h: 64px;            /* fallback; the script sets the real header height */
  --hc-bar-h: 52px;
  /* every jump, anchor and Tab stop lands below the header and the bar */
  scroll-padding-top: calc(var(--hc-nav-h) + var(--hc-bar-h) + 12px);
}
.tpanel {
  --tp-ease: cubic-bezier(.16, 1, .3, 1);
  --tp-gut: clamp(20px, 4vw, 56px);
  --tp-pass: var(--accent-blue);
  --tp-on-navy: #c9def2;
  --tp-gap: clamp(72px, 8vw, 120px);     /* between two tests on the rail */
}

/* ============ GROUND RULES ============ */
.tp-wrap { max-width: calc(1240px + 2 * var(--tp-gut)); margin-inline: auto; padding-inline: var(--tp-gut); }
/* text fills its column; the column sets the measure */
.tpanel main p { max-width: none; margin: 0; }
.tpanel main a:not(.btn) { border-bottom: 0; }
.tpanel main :is(ol, ul, dl, dd, figure) { margin: 0; padding: 0; list-style: none; }
.tpanel main h2 {
  font-family: var(--font-display); font-weight: 300; color: var(--ink);
  font-size: clamp(1.9rem, 3.3vw, 3rem); line-height: 1.1; letter-spacing: -.01em;
  margin: 0; max-width: none; text-wrap: wrap;
}
.tpanel main :is(h3, h4, h5) { margin: 0; max-width: none; text-wrap: wrap; color: var(--ink); }
.tpanel main :is(a, button, summary):focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 3px; border-radius: 4px; }
.tpanel :is(.tp-when, .tp-end) :is(a, button):focus-visible { outline-color: var(--accent-ice); }
/* a part that receives focus after a jump is not itself a control */
.tpanel main :is(h1, h2, h3, section, li)[tabindex="-1"]:focus { outline: none; }

/* a link inside a sentence */
.tp-link { color: var(--accent-blue-hover); text-decoration: underline; text-decoration-color: rgba(45, 110, 177, .45); text-decoration-thickness: 1.5px; text-underline-offset: 4px; transition: color 200ms, text-decoration-color 200ms; }
.tp-link:hover { color: var(--accent-blue); text-decoration-color: currentColor; }

/* the onward link: the arrow leans the way it points */
.tp-go { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 16px; font-weight: 600; color: var(--accent-blue-hover); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 5px; transition: color 200ms, text-decoration-color 260ms; }
.tp-go span { display: inline-block; transition: transform 360ms var(--tp-ease); }
.tp-go:hover { color: var(--accent-blue); text-decoration-color: currentColor; }
.tp-go:hover span { transform: translateX(6px); }
.tp-go[href^="#"]:hover span { transform: translateY(4px) rotate(90deg); }
.tp-next__up .tp-go:hover span { transform: translateX(-6px); }

/* the one mark for "checked": a ring and the tick drawn inside it */
.tp-tick { display: block; width: 44px; height: 44px; overflow: visible; }
.tp-tick circle { fill: #fff; stroke: var(--ink); stroke-width: 1.7; }
.tp-tick path { fill: none; stroke: var(--tp-pass); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* ============ REVEALS ============
   Hidden only once the script has said it is running (tp-js on <html>), so
   with no script nothing is ever hidden. A plain block rises; a figure is
   left standing and its own parts move instead (below, with each figure). */
.tp-js [data-r] { transition: opacity 620ms ease, transform 820ms var(--tp-ease); }
.tp-js [data-r=""]:not(.is-in) { opacity: 0; transform: translateY(18px); }

@keyframes tp-up { from { opacity: 0; transform: translateY(22px); } }
@keyframes tp-rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes tp-draw { from { stroke-dashoffset: 1; opacity: 0; } 12% { opacity: 1; } to { stroke-dashoffset: 0; opacity: 1; } }
@keyframes tp-pop { from { transform: scale(0); opacity: 0; } 70% { transform: scale(1.2); opacity: 1; } }
@keyframes tp-line { from { transform: scaleX(0); } }
@keyframes tp-fall { from { transform: scaleY(0); } }
@keyframes tp-ride { from { background-position: 0 50%; opacity: 1; } 92% { opacity: 1; } to { background-position: 100% 50%; opacity: 0; } }
@keyframes tp-stamp { from { transform: scale(1.7) rotate(-8deg); opacity: 0; } 60% { transform: scale(.94) rotate(0); opacity: 1; } }
@keyframes tp-seal { from { transform: scale(1.8) rotate(8deg); opacity: 0; } 60% { transform: scale(.95) rotate(-9deg); opacity: 1; } to { transform: rotate(-9deg); } }
@keyframes tp-ring { from { box-shadow: 0 0 0 0 rgba(45, 110, 177, .55); } to { box-shadow: 0 0 0 18px rgba(45, 110, 177, 0); } }
@keyframes tp-slide { from { opacity: 0; transform: translateX(-14px); } }
@keyframes tp-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes tp-unfold { from { opacity: 0; transform: translateY(-8px); } }

/* ============ HERO ============ */
.tp-hero { padding-block: clamp(20px, 3vw, 36px) clamp(48px, 6vw, 88px); }
.tp-hero__h1 { font-family: var(--font-display); font-weight: 300; font-size: clamp(2.1rem, 4.3vw, 3.9rem); line-height: 1.06; letter-spacing: -.015em; color: var(--ink); margin: 0 0 clamp(28px, 4vw, 56px); max-width: none; text-wrap: wrap; }
/* a heading that has to wrap breaks where the styling changes */
.tp-hero__h1 > .h-lead, .tp-hero__h1 > em { display: inline-block; }
.tp-hero__h1 > em { color: var(--accent-blue); }
.tp-hero__row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.tp-hero__answer { font-size: clamp(1.12rem, 1.5vw, 1.32rem); line-height: 1.6; color: var(--ink); margin-bottom: 20px !important; }

/* the run: vial, a line through five checks, the signed page */
.tp-run { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 20px; align-items: start; padding-top: 40px; }
.tp-run__vial { display: block; width: 56px; height: 120px; margin-top: -38px; overflow: visible; }
.tp-run__vial .tp-ink { fill: #fff; stroke: var(--ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tp-run__vial .tp-ink--thin { stroke: var(--border-strong); stroke-width: 1.4; }
.tp-run__cells circle { fill: var(--tp-pass); transform-box: fill-box; transform-origin: center; }
.tp-run__gates { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
/* the line the vial travels, from its side to the middle of the page icon */
.tp-run__gates::before, .tp-run__gates::after { content: ""; position: absolute; left: -20px; right: calc(100% / 12); top: 21px; height: 2px; }
.tp-run__gates::before { background: var(--ink); transform-origin: left; }
/* one cell rides it, once */
.tp-run__gates::after { top: 16px; height: 12px; background: radial-gradient(circle at 6px 6px, var(--tp-pass) 5px, transparent 5.6px) no-repeat; background-size: 12px 12px; background-position: 100% 50%; opacity: 0; z-index: 2; pointer-events: none; }
.tp-run__gates li { position: relative; z-index: 1; }
.tp-run__gates a { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; padding: 0 4px 6px; color: var(--ink); min-height: 44px; }
.tp-run__gates b { margin-top: 12px; font-size: 15px; font-weight: 600; line-height: 1.3; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: color 200ms, text-decoration-color 240ms; }
.tp-run__gates span { font-size: 13px; line-height: 1.4; color: var(--ink-muted); }
.tp-run__gates svg { transition: transform 360ms var(--tp-ease); }
.tp-run__gates a:hover b { color: var(--accent-blue-hover); text-decoration-color: currentColor; }
.tp-run__gates a:hover svg { transform: translateY(-4px); }
.tp-run__gates a:hover .tp-tick circle { stroke: var(--tp-pass); }
.tp-tick circle { transition: stroke 200ms; }
.tp-page { display: block; width: 44px; height: 56px; margin-top: -6px; overflow: visible; }
.tp-page__sheet { fill: #fff; stroke: var(--ink); stroke-width: 1.7; stroke-linejoin: round; }
.tp-page__rule { fill: none; stroke: var(--border-strong); stroke-width: 1.4; stroke-linecap: round; }
.tp-page__seal { fill: #fff; stroke: var(--tp-pass); stroke-width: 1.6; }
.tp-page__ok { fill: none; stroke: var(--tp-pass); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tp-run__doc b { margin-top: 6px; }

/* first paint: the words, the vial, then the line and each check as it is reached */
.tp-js .tp-hero__h1 > * { animation: tp-up 900ms var(--tp-ease) both; }
.tp-js .tp-hero__h1 > em { animation-delay: 110ms; }
.tp-js .tp-hero__text > * { animation: tp-up 900ms var(--tp-ease) 240ms both; }
.tp-js .tp-hero__text > a { animation-delay: 340ms; }
.tp-js .tp-run__vial .tp-ink { stroke-dasharray: 1; animation: tp-draw 700ms var(--tp-ease) 300ms both; }
.tp-js .tp-run__cells circle { animation: tp-pop 380ms var(--tp-ease) calc(700ms + var(--i) * 50ms) both; }
.tp-js .tp-run__gates::before { animation: tp-line 2000ms cubic-bezier(.45, 0, .3, 1) 1100ms both; }
.tp-js .tp-run__gates li { animation: tp-rise 600ms var(--tp-ease) calc(1250ms + var(--i) * 330ms) both; }
.tp-js .tp-run__gates .tp-tick path { stroke-dasharray: 1; animation: tp-draw 420ms var(--tp-ease) calc(1500ms + var(--i) * 330ms) both; }
.tp-js .tp-run__gates .tp-page__seal { transform-box: fill-box; transform-origin: center; animation: tp-pop 420ms var(--tp-ease) 3300ms both; }
.tp-js .tp-run__gates .tp-page__ok { stroke-dasharray: 1; animation: tp-draw 420ms var(--tp-ease) 3600ms both; }
.tp-js .tp-run__gates::after { animation: tp-ride 2600ms cubic-bezier(.45, 0, .3, 1) 4100ms both; }

/* ============ CONTENTS BAR (follows the reader) ============ */
.tpanel .hc-bar {
  /* under the phone menu's sheet (55) and backdrop (50), over the page */
  position: fixed; left: 0; right: 0; top: var(--hc-nav-h); z-index: 49;
  height: var(--hc-bar-h);
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
  transform: translateY(-8px); opacity: 0; visibility: hidden;
  transition: opacity 260ms, transform 360ms var(--tp-ease), visibility 0s 360ms;
}
.tpanel .hc-bar.is-on { transform: none; opacity: 1; visibility: visible; transition: opacity 260ms, transform 360ms var(--tp-ease); }
body.tpanel.nav-open .hc-bar { opacity: 0; visibility: hidden; }
.tpanel .hc-bar__track {
  max-width: calc(1240px + 2 * var(--tp-gut)); margin: 0 auto; padding: 0 var(--tp-gut);
  height: 100%; display: flex; align-items: stretch; gap: clamp(18px, 2.2vw, 30px);
  overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; scroll-padding-inline: 28px;
}
.tpanel .hc-bar__track::-webkit-scrollbar { display: none; }
.tpanel .hc-bar__track a {
  position: relative; flex: none; display: flex; align-items: center;
  font-size: 14px; font-weight: 500; color: var(--ink-muted); white-space: nowrap;
  transition: color 200ms;
}
.tpanel .hc-bar__track a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--accent-blue); transform: scaleX(0); transform-origin: left;
  transition: transform 360ms var(--tp-ease);
}
.tpanel .hc-bar__track a:hover, .tpanel .hc-bar__track a[aria-current] { color: var(--ink); }
.tpanel .hc-bar__track a:hover::after { transform: scaleX(.35); }
.tpanel .hc-bar__track a[aria-current]::after { transform: scaleX(1); }
.tpanel .hc-bar__track a:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: -4px; border-radius: 4px; }
.tpanel .hc-bar__progress {
  position: absolute; left: 0; top: 0; height: 2px; width: 100%;
  background: var(--accent-ice); transform-origin: left; transform: scaleX(var(--hc-p, 0));
}

/* ============ THE CERTIFICATE (the page's one tinted band) ============ */
.tp-cert { background: var(--accent-wash); padding-block: clamp(56px, 7vw, 104px); }
.tp-cert__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: start; margin-top: clamp(28px, 3.4vw, 48px); }
.tp-cert__text p { font-size: 17px; line-height: 1.7; color: var(--ink-soft); }
.tp-cert__text .tp-cert__hand { text-wrap: wrap; font-family: var(--font-display); font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.25; color: var(--ink); margin-top: 28px !important; }
.tp-tally { display: block; width: 100%; max-width: 470px; height: auto; overflow: visible; }
.tp-tally circle { fill: #fff; stroke: var(--ink); stroke-width: 1.5; }
.tp-tally__on path { fill: none; stroke: var(--tp-pass); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tp-tally__to { fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tp-tally__sheet { fill: #fff; stroke: var(--ink); stroke-width: 1.7; stroke-linejoin: round; }
.tp-tally__rule { fill: none; stroke: var(--border-strong); stroke-width: 1.4; stroke-linecap: round; }
.tp-tally .tp-tally__seal { stroke: var(--tp-pass); stroke-width: 1.7; }
.tp-facts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 32px; margin-top: 36px !important; }
.tp-facts dt { font-family: var(--font-display); font-size: 1.55rem; line-height: 1.15; color: var(--ink); }
.tp-facts dd { margin-top: 6px !important; font-size: 15px; line-height: 1.55; color: var(--ink-soft); }
/* the checks are counted off, then the arrow reaches the page */
.tp-js [data-r="tally"]:not(.is-in) :is(.tp-tally__on, .tp-tally__to, .tp-tally__sheet, .tp-tally__rule, .tp-tally__seal) { opacity: 0; }
.tp-js [data-r="tally"]:not(.is-in) .tp-facts > div { opacity: 0; }
.tp-tally :is(.tp-tally__on, .tp-tally__seal) { transform-box: fill-box; transform-origin: center; }
.tp-js .is-in .tp-tally__on { animation: tp-pop 360ms var(--tp-ease) calc(var(--i) * 55ms) both; }
.tp-js .is-in .tp-tally__to { stroke-dasharray: 1; animation: tp-draw 500ms var(--tp-ease) 1150ms both; }
.tp-js .is-in :is(.tp-tally__sheet, .tp-tally__rule) { animation: tp-rise 600ms var(--tp-ease) 1500ms both; }
.tp-js .is-in .tp-tally__seal { animation: tp-pop 420ms var(--tp-ease) 1900ms both; }
.tp-js .is-in .tp-facts > div { animation: tp-rise 700ms var(--tp-ease) both; }
.tp-js .is-in .tp-facts > div:nth-child(2) { animation-delay: 300ms; }
.tp-js .is-in .tp-facts > div:nth-child(3) { animation-delay: 1150ms; }
.tp-js .is-in .tp-facts > div:nth-child(4) { animation-delay: 1700ms; }

/* ============ THE PANEL, IN ORDER ============ */
.tp-panel { padding-block: clamp(64px, 8vw, 120px) clamp(56px, 7vw, 104px); }
.tp-steps { counter-reset: tp-step; margin-top: clamp(40px, 5vw, 72px) !important; }
.tp-step { position: relative; counter-increment: tp-step; padding-left: 96px !important; scroll-margin-top: 8px; }
.tp-step + .tp-step { margin-top: var(--tp-gap) !important; }
/* the stop on the rail: lit once the reader has reached the test */
.tp-step::before {
  content: counter(tp-step); position: absolute; left: 0; top: -6px; width: 52px; height: 52px; box-sizing: border-box;
  display: grid; place-items: center; border-radius: 50%; border: 1.7px solid var(--ink); background: #fff;
  font-family: var(--font-display); font-size: 1.5rem; line-height: 1; color: var(--ink);
  transition: background 420ms, color 420ms, border-color 420ms;
}
.tp-step.is-passed::before { background: var(--ink); color: #fff; }
/* arriving by a jump: the stop the reader landed on says so, once */
.tp-step.is-landed::before { animation: tp-ring 900ms ease-out 2; }
/* one connector per gap, stop to stop, filled as far as the reader has read */
.tp-step:not(:last-child)::after {
  content: ""; position: absolute; left: 25px; top: 52px; bottom: calc(-1 * var(--tp-gap) + 6px); width: 2px;
  background: linear-gradient(var(--ink), var(--ink)) no-repeat top / 100% calc(var(--tp-p, 0) * 100%), var(--border);
}
.tp-step h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.2; }
.tp-step > p, .tp-step__text > p, .tp-step .tp-fold > p { font-size: 17px; line-height: 1.7; color: var(--ink-soft); margin-top: 18px !important; }
.tp-step :is(strong, em) { color: var(--ink); }
.tp-step strong { font-weight: 600; }
.tpanel main .tp-step figure, .tp-step .tp-fold { margin-top: 40px; }
.tpanel main .tp-step .tp-fold figure { margin-top: 0; }
.tp-step :is(figure, .tp-fold, table) + p { margin-top: 32px !important; }
.tp-step__text .tp-fold { margin-top: 18px; }
.tp-step__text .tp-fold > p:first-of-type { margin-top: 0 !important; }
.tp-step figcaption h4 { font-family: var(--font-display); font-weight: 400; font-size: 1.35rem; line-height: 1.25; }
.tp-step figcaption p { margin-top: 8px !important; font-size: 15.5px; line-height: 1.6; color: var(--ink-muted); }

/* --- 1. sterility: two cultures on one fourteen-day scale --- */
.tp-days__chart { margin-top: 24px; --tp-name: 190px; }
.tp-days__scale, .tp-days__row { display: grid; grid-template-columns: var(--tp-name) minmax(0, 1fr); align-items: center; }
.tp-days__scale { grid-template-columns: var(--tp-name) repeat(14, minmax(0, 1fr)); padding-bottom: 8px; font-size: 13px; color: var(--ink-muted); }
.tp-days__scale b { font-weight: 500; }
.tp-days__scale span { text-align: right; padding-right: 6px; font-variant-numeric: tabular-nums; }
.tp-days__row { padding-block: 10px; border-top: 1px solid var(--border); }
.tp-days__name { font-weight: 600; font-size: 16px; line-height: 1.3; color: var(--ink); padding-right: 16px; }
.tp-days__name small { display: block; font-weight: 400; font-size: 13.5px; color: var(--ink-muted); }
.tp-days__bar { position: relative; height: 36px; background: repeating-linear-gradient(90deg, transparent 0, transparent calc(100% / 14 - 1px), var(--border) calc(100% / 14 - 1px), var(--border) calc(100% / 14)); }
.tp-days__bar i { position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--tp-pass); transform-origin: left; }
.tp-days__row + .tp-days__row .tp-days__bar i { background: var(--ink); }
.tp-days__end { position: absolute; top: 0; bottom: 0; left: 0; width: var(--w); box-sizing: border-box; display: flex; align-items: center; justify-content: flex-end; padding-right: 10px; font-size: 13px; font-weight: 600; color: #fff; white-space: nowrap; }
.tp-days__row--gate { align-items: start; padding-bottom: 0; }
.tp-days__flags { position: relative; height: 40px; }
.tp-days__flags span { position: absolute; top: 0; left: 0; width: var(--w); box-sizing: border-box; padding: 12px 8px 0 0; border-right: 2px solid var(--ink); text-align: right; font-size: 13.5px; line-height: 1.3; color: var(--ink-soft); white-space: nowrap; }
.tp-days__flags em { font-style: normal; font-weight: 600; color: var(--accent-blue-hover); }
.tp-js [data-r="days"]:not(.is-in) :is(.tp-days__bar i) { transform: scaleX(0); }
.tp-js [data-r="days"]:not(.is-in) :is(.tp-days__end, .tp-days__flags span) { opacity: 0; }
.tp-js [data-r="days"].is-in .tp-days__bar i { animation: tp-line 1100ms cubic-bezier(.3, 0, .3, 1) 200ms both; }
.tp-js [data-r="days"].is-in .tp-days__row + .tp-days__row .tp-days__bar i { animation-duration: 2200ms; }
.tp-js [data-r="days"].is-in .tp-days__end { animation: tp-rise 500ms var(--tp-ease) 1200ms both; }
.tp-js [data-r="days"].is-in .tp-days__row + .tp-days__row .tp-days__end { animation-delay: 2300ms; }
.tp-js [data-r="days"].is-in .tp-days__flags span { animation: tp-rise 500ms var(--tp-ease) 1350ms both; }
.tp-js [data-r="days"].is-in .tp-days__flags span + span { animation-delay: 2450ms; }

/* the four things the sterility tests look for, as rows */
.tp-specs > div { display: grid; grid-template-columns: 190px minmax(0, 1fr) 170px; column-gap: 24px; align-items: baseline; padding-block: 16px; border-top: 1px solid var(--border); }
.tp-specs > div:last-child { border-bottom: 1px solid var(--border); }
.tp-specs dt { font-family: var(--font-display); font-size: 1.2rem; line-height: 1.3; color: var(--ink); }
.tp-specs dd { font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); }
.tp-specs .tp-specs__spec { font-weight: 600; color: var(--accent-blue-hover); text-align: right; white-space: nowrap; }
.tp-js [data-r="rows"]:not(.is-in) :is(.tp-specs > div, tbody tr) { opacity: 0; }
.tp-js [data-r="rows"].is-in :is(.tp-specs > div, tbody tr) { animation: tp-slide 600ms var(--tp-ease) calc(var(--i) * 80ms) both; }

/* --- 2. identity: three peaks pushed right, three kept left --- */
.tp-flow__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); margin-top: 24px; }
.tp-flow h5 { font-family: var(--font-display); font-weight: 400; font-size: 1.2rem; line-height: 1.3; padding-bottom: 12px; border-bottom: 1px solid var(--border-strong); }
.tp-flow h5 small { font-family: var(--font-body); font-size: 13.5px; color: var(--ink-muted); margin-left: 8px; }
.tp-flow__row { display: grid; grid-template-columns: 150px minmax(0, 1fr) 64px; gap: 14px; align-items: center; padding-block: 12px; border-bottom: 1px solid var(--border); }
.tp-flow__k { font-weight: 600; font-size: 15.5px; line-height: 1.3; color: var(--ink); }
.tp-flow__k small { display: block; font-weight: 400; font-size: 13px; color: var(--ink-muted); }
.tp-flow__row svg { display: block; width: 100%; height: 44px; overflow: visible; }
.tp-flow__peak { fill: none; stroke: var(--tp-pass); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.tp-flow__fill { fill: rgba(45, 110, 177, .16); stroke: none; }
.tp-flow__col--neg .tp-flow__peak { stroke: var(--ink); }
.tp-flow__col--neg .tp-flow__fill { fill: rgba(11, 29, 58, .1); }
.tp-flow__pct { font-family: var(--font-display); font-size: 1.2rem; text-align: right; color: var(--accent-blue-hover); font-variant-numeric: tabular-nums; }
.tp-flow__col--neg .tp-flow__pct { color: var(--ink); }
.tpanel main .tp-flow__spec { margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--ink-soft); }
/* each trace is swept in left to right, the way the instrument reads it; the
   plot keeps its box while hidden (opacity, never a clip to nothing) */
.tp-js [data-r="flow"]:not(.is-in) :is(.tp-flow__row svg, .tp-flow__pct) { opacity: 0; }
.tp-js [data-r="flow"].is-in .tp-flow__row svg { animation: tp-wipe 1100ms cubic-bezier(.45, 0, .3, 1) both; }
.tp-js [data-r="flow"].is-in .tp-flow__pct { animation: tp-rise 500ms var(--tp-ease) 900ms both; }
.tp-js [data-r="flow"].is-in .tp-flow__row:nth-of-type(2) > * { animation-delay: 160ms; }
.tp-js [data-r="flow"].is-in .tp-flow__row:nth-of-type(3) > * { animation-delay: 320ms; }
.tp-js [data-r="flow"].is-in .tp-flow__row:nth-of-type(2) .tp-flow__pct { animation-delay: 1060ms; }
.tp-js [data-r="flow"].is-in .tp-flow__row:nth-of-type(3) .tp-flow__pct { animation-delay: 1220ms; }

/* --- 3. viability: a hundred cells, and the floor of ninety-five --- */
.tp-step--split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: clamp(32px, 6vw, 96px); align-items: center; }
.tp-step--split .tp-ask { grid-column: 1 / -1; }
.tp-live { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 9px; width: 100%; max-width: 330px; justify-self: end; }
.tp-live i { aspect-ratio: 1; border-radius: 50%; background: var(--tp-pass); }
.tp-live .tp-live__off { background: none; border: 1.5px dashed var(--ink-muted); box-sizing: border-box; }
.tp-js [data-r="live"]:not(.is-in) i { opacity: 0; }
.tp-js [data-r="live"].is-in i { animation: tp-pop 320ms var(--tp-ease) calc(var(--n, 0) * 11ms) both; }
.tp-js [data-r="live"].is-in .tp-live__off { animation-delay: calc(1250ms + var(--n, 0) * 2ms); }

/* a question to take to a clinic, set apart from the page's own voice */
.tp-ask { margin-top: 36px; padding-left: 24px; border-left: 3px solid var(--tp-pass); }
.tpanel main .tp-ask p { font-size: 16.5px; line-height: 1.65; color: var(--ink-soft); }
.tpanel main .tp-ask p + p { margin-top: 12px; }
.tpanel main .tp-ask .tp-ask__q { text-wrap: wrap; font-family: var(--font-display); font-style: italic; font-size: clamp(1.25rem, 1.8vw, 1.55rem); line-height: 1.35; color: var(--ink); }

/* --- 4. potency: five measurements against the line they had to clear --- */
.tp-pot__rows { margin-top: 24px; }
.tp-pot__row { display: grid; grid-template-columns: 250px minmax(0, 1fr) 210px; gap: 24px; align-items: center; padding-block: 16px; border-top: 1px solid var(--border); }
.tp-pot__row:last-child { border-bottom: 1px solid var(--border); }
.tp-pot__k { font-weight: 600; font-size: 15.5px; line-height: 1.3; color: var(--ink); }
.tp-pot__k small { display: block; font-weight: 400; font-size: 13px; color: var(--ink-muted); }
.tp-pot__meter { position: relative; height: 12px; background: rgba(11, 29, 58, .08); }
.tp-pot__meter i { position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--tp-pass); transform-origin: left; }
.tp-pot__meter b { position: absolute; left: var(--t); top: -8px; bottom: -8px; width: 2px; background: var(--ink); transform-origin: top; }
.tp-pot__v { display: flex; align-items: center; justify-content: flex-end; gap: 12px; font-size: 14.5px; color: var(--ink-soft); text-align: right; }
.tp-pot__v span, .tp-pass { flex: none; display: inline-block; padding: 3px 9px; border-radius: 3px; background: var(--accent-blue-hover); color: #fff; font-size: 13px; font-weight: 600; line-height: 1.4; }
.tp-js [data-r="pot"]:not(.is-in) .tp-pot__meter :is(i, b) { transform: scale(0); }
.tp-js [data-r="pot"]:not(.is-in) .tp-pot__v { opacity: 0; }
.tp-js [data-r="pot"].is-in .tp-pot__meter b { animation: tp-fall 380ms var(--tp-ease) calc(var(--i) * 130ms) both; }
.tp-js [data-r="pot"].is-in .tp-pot__meter i { animation: tp-line 1100ms var(--tp-ease) calc(260ms + var(--i) * 130ms) both; }
.tp-js [data-r="pot"].is-in .tp-pot__v { animation: tp-rise 500ms var(--tp-ease) calc(1000ms + var(--i) * 130ms) both; }

/* --- 5. residuals: what is measured, how, and the limit --- */
.tp-res { width: 100%; border-collapse: collapse; }
.tp-res caption { caption-side: top; text-align: left; font-family: var(--font-display); font-size: 1.35rem; line-height: 1.25; color: var(--ink); padding-bottom: 16px; }
.tp-res :is(th, td) { padding: 16px 24px 16px 0; border-top: 1px solid var(--border); text-align: left; vertical-align: baseline; font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); }
.tp-res tr:last-child :is(th, td) { border-bottom: 1px solid var(--border); }
.tp-res th { width: 220px; font-family: var(--font-display); font-weight: 400; font-size: 1.2rem; line-height: 1.3; color: var(--ink); }
.tp-res td:last-child { width: 190px; padding-right: 0; text-align: right; font-weight: 600; color: var(--accent-blue-hover); white-space: nowrap; }

/* ============ "READ MORE" ============
   Every fold ships open and, on a desktop, has no handle: it is just part of
   the page. On a phone the script closes the ones a reader can skip. */
.tp-fold > summary { display: none; }
.tp-fold__less, .tp-fold[open] > summary .tp-fold__more { display: none; }
.tp-fold[open] > summary .tp-fold__less { display: inline; }

/* ============ WHEN EACH TEST RUNS (navy) ============ */
.tp-when { background: var(--navy-brand); color: #fff; padding-block: clamp(64px, 8vw, 112px); }
.tpanel main .tp-when h2 { color: #fff; }
.tpanel main .tp-when__head p { margin-top: 20px; font-size: 17px; line-height: 1.7; color: var(--tp-on-navy); }
.tp-stages { --g: clamp(20px, 3vw, 44px); position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--g); margin-top: clamp(44px, 5vw, 72px) !important; }
/* the cells' route, from the donor to the vial that is released */
.tp-stages::before { content: ""; position: absolute; left: 44px; top: 43px; height: 2px; width: calc(75% + .75 * var(--g)); background: var(--accent-ice); transform-origin: left; }
.tp-stages > li { position: relative; }
.tp-stages svg { display: block; box-sizing: border-box; width: 88px; height: 88px; padding: 16px; border-radius: 50%; border: 1.7px solid var(--accent-ice); background: var(--navy-brand); overflow: visible; }
.tp-stages svg :is(path, rect, circle) { fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tp-stages svg .tp-stages__ok { stroke: var(--accent-ice); stroke-width: 2.2; }
.tpanel main .tp-stages h3 { margin-top: 24px; font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; line-height: 1.2; color: #fff; }
.tpanel main .tp-stages__when { margin-top: 4px; font-size: 14px; color: var(--accent-ice); }
.tp-stages ul { margin-top: 16px !important; }
.tp-stages ul li { padding-block: 9px; border-top: 1px solid rgba(255, 255, 255, .16); font-size: 15.5px; line-height: 1.45; color: var(--tp-on-navy); }
.tp-js [data-r="stages"]:not(.is-in)::before { transform: scaleX(0); }
.tp-js [data-r="stages"]:not(.is-in) > li { opacity: 0; }
.tp-js [data-r="stages"].is-in::before { animation: tp-line 1500ms cubic-bezier(.45, 0, .3, 1) 150ms both; }
.tp-js [data-r="stages"].is-in > li { animation: tp-rise 700ms var(--tp-ease) calc(100ms + var(--i) * 400ms) both; }
.tp-js [data-r="stages"].is-in svg :is(path, rect, circle) { stroke-dasharray: 1; animation: tp-draw 900ms var(--tp-ease) calc(250ms + var(--i) * 400ms) both; }

/* ============ A SAMPLE COA ============ */
.tp-spec { padding-block: clamp(64px, 8vw, 120px); }
.tp-spec__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 80px); align-items: start; margin-top: clamp(32px, 4vw, 56px); }
.tp-spec__side { position: sticky; top: calc(var(--hc-nav-h) + var(--hc-bar-h) + 32px); }
.tpanel main .tp-spec__side p { font-size: 17px; line-height: 1.7; color: var(--ink-soft); }
.tpanel main .tp-spec__side h3 { margin-top: 36px; font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; line-height: 1.25; }
.tpanel main .tp-spec__side h3 + p { margin-top: 12px; }
/* the page itself */
.tp-coa { position: relative; overflow: hidden; padding: clamp(24px, 3.4vw, 48px); background: #fff; border: 1px solid var(--border-strong); box-shadow: 0 30px 60px -36px rgba(11, 29, 58, .38), 0 6px 16px -10px rgba(11, 29, 58, .18); }
.tp-coa__mark { position: absolute; right: -40px; top: 56%; font-family: var(--font-display); font-size: clamp(5rem, 11vw, 9rem); line-height: 1; letter-spacing: -.03em; text-transform: uppercase; color: rgba(11, 29, 58, .06); transform: rotate(-12deg); pointer-events: none; user-select: none; }
.tp-coa > :not(.tp-coa__mark) { position: relative; z-index: 1; }
.tp-coa__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-bottom: 16px; border-bottom: 1.5px solid var(--ink); }
.tpanel main .tp-coa__title { font-family: var(--font-display); font-size: 1.7rem; line-height: 1.15; color: var(--ink); }
.tpanel main .tp-coa__sub { margin-top: 4px; font-size: 14px; color: var(--ink-muted); }
.tpanel main .tp-coa__id p { font-size: 14px; line-height: 1.5; color: var(--ink-muted); text-align: right; white-space: nowrap; }
.tp-coa__id strong { color: var(--ink); font-weight: 600; }
.tp-coa__meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 28px; padding-block: 22px !important; border-bottom: 1px solid var(--border); }
.tp-coa__meta dt { font-size: 13px; color: var(--ink-muted); }
.tp-coa__meta dd { margin-top: 2px !important; font-size: 15.5px; font-weight: 600; color: var(--ink); }
.tp-coa__rows { width: 100%; border-collapse: collapse; margin-top: 8px; }
.tp-coa__rows caption { caption-side: top; text-align: left; padding: 16px 0 8px; font-size: 15px; font-weight: 600; color: var(--ink); }
.tp-coa__rows :is(th, td) { padding: 13px 16px 13px 0; text-align: left; vertical-align: middle; font-size: 15px; line-height: 1.45; color: var(--ink-soft); border-top: 1px solid var(--border); }
.tp-coa__rows thead th { border-top: 0; padding-block: 6px; font-size: 13px; font-weight: 500; color: var(--ink-muted); }
.tp-coa__rows tbody th { font-weight: 600; color: var(--ink); }
.tp-coa__rows tbody th { padding-block: 3px; }
.tp-coa__rows tbody th a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-decoration: underline dotted; text-decoration-color: var(--accent-blue); text-decoration-thickness: 1.5px; text-underline-offset: 4px; transition: color 200ms; }
.tp-coa__rows tbody th a:hover { color: var(--accent-blue-hover); text-decoration-style: solid; }
.tp-coa__rows tbody tr { transition: background 200ms; }
.tp-coa__rows tbody tr:hover { background: rgba(45, 110, 177, .05); }
.tp-coa__rows td strong { color: var(--ink); font-weight: 600; }
.tp-coa__rows :is(th, td):last-child { padding-right: 0; text-align: right; width: 64px; }
.tp-pass { transform-origin: center; }
.tp-coa__sig { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-top: 12px; padding-top: 26px; border-top: 1.5px solid var(--ink); }
.tp-coa__sig span { position: relative; display: inline-block; padding-bottom: 4px; font-family: var(--font-display); font-size: 1.3rem; color: var(--ink); }
.tp-coa__sig .tp-coa__name { font-style: italic; }
.tp-coa__sig span::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--ink); transform-origin: left; }
.tp-coa__sig small { display: block; margin-top: 6px; font-size: 13px; color: var(--ink-muted); }
/* the stamp the last check asks the reader to look for */
.tp-coa__seal { flex: none; display: block; width: 68px; height: 68px; margin-top: -8px; transform: rotate(-9deg); overflow: visible; }
.tp-coa__seal circle { fill: none; stroke: var(--tp-pass); stroke-width: 1.7; }
.tp-coa__seal .tp-coa__seal-in { stroke-width: 1; stroke-dasharray: 2.4 3; }
.tp-coa__seal path { fill: none; stroke: var(--tp-pass); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.tp-js [data-r="coa"]:not(.is-in) .tp-coa__seal { opacity: 0; }
.tp-js [data-r="coa"].is-in .tp-coa__seal { animation: tp-seal 520ms var(--tp-ease) 2500ms both; }
/* the page is set down, each result is stamped, then it is signed */
.tp-js [data-r="coa"]:not(.is-in) { opacity: 0; transform: translateY(26px) rotate(.6deg); }
.tp-js [data-r="coa"]:not(.is-in) .tp-pass { opacity: 0; }
.tp-js [data-r="coa"]:not(.is-in) .tp-coa__sig span::after { transform: scaleX(0); }
.tp-js [data-r="coa"].is-in .tp-pass { animation: tp-stamp 420ms var(--tp-ease) calc(500ms + var(--i) * 150ms) both; }
.tp-js [data-r="coa"].is-in tr .tp-pass { animation-delay: calc(500ms + var(--i) * 150ms); }
.tp-js [data-r="coa"].is-in .tp-coa__sig span::after { animation: tp-line 800ms var(--tp-ease) 1900ms both; }
.tp-coa__rows tbody tr { --i: 0; }

/* ============ WHAT TO ASK (navy) ============ */
.tp-end { background: var(--navy-brand); color: #fff; padding-block: clamp(64px, 8vw, 112px); }
.tpanel main .tp-end h2 { color: #fff; }
.tp-end__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(36px, 6vw, 104px); align-items: start; margin-top: clamp(32px, 4vw, 52px); }
.tp-end__lead > .tp-ask { margin-top: 0; }
.tpanel main .tp-end__lead > p { margin-top: 20px; font-size: 17px; line-height: 1.7; color: var(--tp-on-navy); }
.tp-end__lead strong { color: #fff; font-weight: 600; }
.tpanel main .tp-end__lead > .tp-end__line { margin-top: 44px; font-family: var(--font-display); font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.25; color: #fff; }
/* the three questions, ready to paste into a message to a clinic */
.tp-copy { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; margin-top: 28px; padding: 0 20px 0 16px; border: 1.5px solid var(--accent-ice); border-radius: 4px; background: transparent; color: #fff; font: 600 16px/1.2 var(--font-body); cursor: pointer; transition: background 220ms, border-color 220ms, transform 220ms var(--tp-ease); }
.tp-copy[hidden] { display: none; }
.tp-copy:hover { background: rgba(124, 169, 209, .16); border-color: #fff; }
.tp-copy:active { transform: scale(.98); }
.tp-copy svg { width: 24px; height: 24px; flex: none; }
.tp-copy path { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: opacity 200ms; }
.tp-copy .tp-copy__ok { stroke-width: 2.2; opacity: 0; }
.tp-copy__done, .tp-copy.is-done .tp-copy__do { display: none; }
.tp-copy.is-done .tp-copy__done { display: inline; }
.tp-copy.is-done .tp-copy__sheet { opacity: 0; }
.tp-copy.is-done .tp-copy__ok { opacity: 1; stroke-dasharray: 1; animation: tp-draw 420ms var(--tp-ease) both; }
.tp-say { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tp-ask--dark { border-left-color: var(--accent-ice); }
.tpanel main .tp-ask--dark p { color: var(--tp-on-navy); }
.tpanel main .tp-ask--dark .tp-ask__q { color: #fff; }
.tp-checks > li { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 20px; padding-block: 24px; border-top: 1px solid rgba(255, 255, 255, .18); }
.tp-checks > li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .18); }
.tp-checks .tp-tick { grid-row: span 2; width: 48px; height: 48px; }
.tp-checks .tp-tick circle { fill: none; stroke: var(--accent-ice); }
.tp-checks .tp-tick path { stroke: #fff; }
.tpanel main .tp-checks h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.4rem; line-height: 1.25; color: #fff; }
.tpanel main .tp-checks p { margin-top: 8px; font-size: 16px; line-height: 1.65; color: var(--tp-on-navy); }
.tp-js [data-r="checks"]:not(.is-in) > li { opacity: 0; }
.tp-js [data-r="checks"].is-in > li { animation: tp-rise 700ms var(--tp-ease) calc(var(--i) * 220ms) both; }
.tp-js [data-r="checks"].is-in .tp-tick path { stroke-dasharray: 1; animation: tp-draw 460ms var(--tp-ease) calc(380ms + var(--i) * 220ms) both; }

/* ============ READ ON ============ */
.tp-next { padding-block: clamp(64px, 8vw, 112px); }
.tp-next__grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); gap: clamp(32px, 6vw, 96px); align-items: start; margin-top: clamp(28px, 3.4vw, 48px); }
.tp-next__up { display: flex; flex-direction: column; align-items: flex-start; padding-top: 12px; }
.tp-route li { border-top: 1px solid var(--border); }
.tp-route li:last-child { border-bottom: 1px solid var(--border); }
.tp-route a { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) 72px 32px; column-gap: 24px; align-items: baseline; padding-block: 24px; color: var(--ink); transition: padding 360ms var(--tp-ease); }
.tp-route__t { font-family: var(--font-display); font-size: 1.4rem; line-height: 1.25; transition: color 200ms; }
.tp-route__d { font-size: 15.5px; line-height: 1.6; color: var(--ink-muted); }
.tp-route__go { grid-column: 4; justify-self: end; font-size: 18px; color: var(--accent-blue-hover); transition: transform 360ms var(--tp-ease); }
.tp-route__first a { align-items: center; }
.tp-route__pair { display: block; width: 72px; height: 54px; overflow: visible; }
.tp-route__pair :is(rect, path) { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tp-route__pair .tp-pair__ne { stroke: var(--ink-muted); }
.tp-route__pair circle { fill: var(--tp-pass); }
.tp-route__pair .tp-pair__few { fill: var(--ink-muted); }
.tp-pair__many circle { transform-box: fill-box; transform-origin: center; transition: transform 360ms var(--tp-ease); }
.tp-route a:hover .tp-pair__many circle { transform: scale(1.25); }
.tp-route a:hover { padding-left: 10px; }
.tp-route a:hover .tp-route__t { color: var(--accent-blue-hover); }
.tp-route a:hover .tp-route__go { transform: translateX(6px); }
.tp-js .tp-route li[data-r]:nth-child(2) { transition-delay: 90ms; }
.tp-js .tp-route li[data-r]:nth-child(3) { transition-delay: 180ms; }

/* ============ NARROWER ============ */
@media (max-width: 1100px) {
  .tp-pot__row { grid-template-columns: 210px minmax(0, 1fr) 190px; gap: 18px; }
  .tp-flow__row { grid-template-columns: 124px minmax(0, 1fr) 60px; }
  .tp-coa__meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tpanel .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: 980px) {
  .tp-hero__row, .tp-cert__grid, .tp-spec__grid, .tp-end__grid, .tp-next__grid { grid-template-columns: minmax(0, 1fr); }
  .tp-hero__row { row-gap: 44px; }
  .tp-spec__side { position: static; }
  .tp-spec__grid { row-gap: 32px; }
  .tp-flow__cols { grid-template-columns: minmax(0, 1fr); }
  .tp-step { padding-left: 76px !important; }
  .tp-step--split { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  .tp-live { justify-self: start; max-width: 300px; }
}
@media (max-width: 760px) {
  /* the run turns to read downwards: vial on top, the line falls through the checks */
  .tp-run { display: block; padding-top: 0; }
  .tp-run__vial { width: 48px; height: 103px; margin: 0 0 6px -2px; }
  .tp-run__gates { grid-template-columns: minmax(0, 1fr); row-gap: 6px; }
  .tp-run__gates::before { left: 21px; right: auto; top: -6px; bottom: 34px; width: 2px; height: auto; transform-origin: top; }
  .tp-run__gates::after { display: none; }
  .tp-run__gates a { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; row-gap: 0; align-items: center; text-align: left; padding: 4px 0; }
  .tp-run__gates a svg { grid-row: span 2; }
  .tp-run__gates b { margin-top: 0; align-self: end; }
  .tp-run__gates span { align-self: start; }
  .tp-run__gates a:hover svg { transform: none; }
  .tp-page { margin-top: 0; }
  .tp-run__doc b { margin-top: 0; }
  .tp-js .tp-run__gates::before { animation-name: tp-fall; }

  /* the rail folds away: each test keeps its number beside its name */
  .tp-step { padding-left: 0 !important; }
  .tp-step::before { top: -4px; width: 40px; height: 40px; font-size: 1.2rem; }
  .tp-step:not(:last-child)::after { display: none; }
  .tp-step h3 { padding-left: 54px; min-height: 36px; }

  .tp-fold > summary { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; list-style: none; font-size: 16px; font-weight: 600; color: var(--accent-blue-hover); -webkit-tap-highlight-color: transparent; }
  .tp-fold > summary::-webkit-details-marker { display: none; }
  .tp-fold > summary::after { content: ""; width: 9px; height: 9px; margin-top: -4px; border-right: 2px solid; border-bottom: 2px solid; transform: rotate(45deg); transition: transform 360ms var(--tp-ease); }
  .tp-fold[open] > summary::after { margin-top: 4px; transform: rotate(-135deg); }
  .tp-fold[open] > summary ~ * { animation: tp-unfold 420ms var(--tp-ease); }
  .tpanel main .tp-fold[open] > summary + * { margin-top: 12px !important; }
  .tp-step__text .tp-fold { margin-top: 8px; }
  .tp-step figure, .tp-step .tp-fold { margin-top: 24px; }
  .tp-fold--coa { border-bottom: 1px solid var(--border); }

  .tp-days__chart { --tp-name: 0px; }
  .tp-days__scale { grid-template-columns: repeat(14, minmax(0, 1fr)); }   /* no name column here: fourteen days, fourteen cells */
  .tp-days__scale b { display: none; }
  .tp-days__scale span { padding-right: 2px; font-size: 13px; }
  .tp-days__scale span:not(:nth-child(2), :nth-child(8), :nth-child(15)) { visibility: hidden; }   /* days 1, 7 and 14: the two results */
  .tp-days__row { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  .tp-specs > div { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
  .tp-specs .tp-specs__spec { text-align: left; }
  .tp-flow__row { grid-template-columns: 112px minmax(0, 1fr) 56px; gap: 10px; }
  .tp-pot__row { grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
  .tp-pot__v { justify-content: space-between; text-align: left; }
  .tp-res, .tp-res tbody, .tp-res tr, .tp-res :is(th, td), .tp-res caption { display: block; width: auto; }
  .tp-res tr { padding-block: 14px; border-top: 1px solid var(--border); }
  .tp-res tr:last-child { border-bottom: 1px solid var(--border); }
  .tp-res :is(th, td), .tp-res tr:last-child :is(th, td) { padding: 0; border: 0; }
  .tp-res td:last-child { width: auto; margin-top: 4px; text-align: left; }

  /* the route runs down the side, stage to stage */
  .tp-stages { grid-template-columns: minmax(0, 1fr); row-gap: 36px; }
  .tp-stages::before { left: 31px; top: 32px; width: 2px; height: auto; bottom: 150px; transform-origin: top; }
  .tp-stages > li { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 20px; }
  .tp-stages svg { width: 64px; height: 64px; padding: 11px; grid-row: span 2; }
  .tpanel main .tp-stages h3 { margin-top: 6px; }
  .tp-stages ul { grid-column: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px; }
  .tp-js [data-r="stages"]:not(.is-in)::before { transform: scaleY(0); }
  .tp-js [data-r="stages"].is-in::before { animation-name: tp-fall; }

  /* the certificate's table keeps its four facts per row, set as a block */
  .tp-coa__head { flex-direction: column; gap: 8px; }
  .tpanel main .tp-coa__id p { text-align: left; }
  .tp-coa__rows, .tp-coa__rows tbody, .tp-coa__rows caption { display: block; }
  .tp-coa__rows thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tp-coa__rows tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 2px; padding-block: 12px; border-top: 1px solid var(--border); }
  .tp-coa__rows tbody :is(th, td) { padding: 0; border: 0; grid-column: 1; }
  .tp-coa__rows tbody td:last-child { grid-column: 2; grid-row: 1; width: auto; }
  .tp-coa__sig { flex-wrap: wrap; gap: 18px 24px; }
  .tp-coa__seal { order: 3; margin-top: 0; }

  .tp-route a, .tp-route__first a { grid-template-columns: minmax(0, 1fr) 32px; padding-block: 20px; align-items: baseline; }
  .tp-route__pair { grid-column: 1; grid-row: 3; margin-top: 12px; }
  .tp-route__d { grid-column: 1; grid-row: 2; margin-top: 4px; }
  .tp-route__go { grid-column: 2; grid-row: 1; }
  .tp-facts { gap: 22px 20px; }
}
@media (max-width: 600px) {
  html:has(body.tpanel) { --hc-bar-h: 48px; }
  .tpanel .hc-bar__track { gap: 22px; }
  .tp-facts { grid-template-columns: minmax(0, 1fr); }
  .tp-ask { padding-left: 18px; }
}

/* ============ STILL ============
   Reduced motion: every drawing holds its finished state and nothing moves. */
@media (prefers-reduced-motion: reduce) {
  .tpanel main *, .tpanel main *::before, .tpanel main *::after { animation: none !important; transition: none !important; }
  .tp-js [data-r]:not(.is-in), .tp-js [data-r]:not(.is-in) * { opacity: 1 !important; transform: none !important; }
  .tp-js [data-r]:not(.is-in)::before, .tp-js [data-r]:not(.is-in) *::after { transform: none !important; }
  .tp-js :is(.tp-ink, .tp-tick path, .tp-page__ok, .tp-tally__to, .tp-stages svg *) { stroke-dasharray: none !important; }
  .tpanel .hc-bar { transition: none !important; }
  .tp-run__gates::after { display: none; }
}
@media print {
  .tpanel .hc-bar, .tp-fold > summary { display: none !important; }
  /* a printout is one still frame: nothing may be caught part way through moving */
  .tpanel main *, .tpanel main *::before, .tpanel main *::after { animation: none !important; transition: none !important; }
  .tp-js [data-r], .tp-js [data-r] *, .tp-js [data-r]::before, .tp-js [data-r] *::after { opacity: 1 !important; transform: none !important; animation: none !important; }
  .tp-copy { display: none !important; }
  /* these two drawings are made of fills; without this a printer drops them */
  .tp-days__bar i, .tp-live i { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .tp-when, .tp-end { background: #fff; color: var(--ink); }
  .tpanel main :is(.tp-when, .tp-end) :is(h2, h3, p, li) { color: var(--ink); }
  .tp-spec__side { position: static; }
  .tp-coa { box-shadow: none; break-inside: avoid; }
}