/* /learn-cells-allogeneic-vs-autologous: its own sheet, loaded after site.css.
   One key runs the page and means the same thing everywhere: salmon is a
   patient's own cells (autologous), blue is a donor's (allogeneic). The same
   key is used on /learn-compare-ways2well, which links here.
   Script: scripts/learn-cells-allogeneic-vs-autologous.js. With that script
   absent every part is visible, every row can be opened and every link jumps. */

html:has(body.aa-page) {
  --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);
}
.aa-page {
  --aa-own: #e89b9b;           /* your own cells: dots and marks */
  --aa-own-line: #c87272;      /* the same, as a stroke on white */
  --aa-own-ink: #8a3a3a;       /* the same, as text on white */
  --aa-donor: var(--accent-blue);
  --aa-donor-ink: var(--accent-blue-hover);
  --aa-ease: cubic-bezier(.16, 1, .3, 1);
  --aa-gut: clamp(20px, 4vw, 56px);
}

/* ============ GROUND RULES ============ */
.aa-wrap { max-width: calc(1240px + 2 * var(--aa-gut)); margin-inline: auto; padding-inline: var(--aa-gut); }
/* text fills its column; the column sets the measure */
.aa-page main p { max-width: none; margin: 0; }
.aa-page main a:not(.btn) { border-bottom: 0; }
.aa-page main :is(ol, ul, dl, dd, figure) { margin: 0; padding: 0; list-style: none; }
.aa-page main h2 {
  font-family: var(--font-display); font-weight: 300; color: var(--ink);
  font-size: clamp(1.9rem, 3.1vw, 2.8rem); line-height: 1.12; letter-spacing: -.01em;
  margin: 0; max-width: none; text-wrap: wrap;
}
/* a heading that has to wrap breaks where the styling changes */
.aa-page main :is(h1, h2) > .h-lead, .aa-page main :is(h1, h2) > em { display: inline-block; }
.aa-page main h2 > em { color: var(--accent-blue); }
.aa-page main h3 { margin: 0; max-width: none; }
.aa-page main :is(a, button, summary):focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 3px; border-radius: 4px; }
.aa-page .aa-immune :is(a, button, summary):focus-visible { outline-color: var(--accent-ice); }
/* a part that receives focus after a jump is not itself a control */
.aa-page main :is(h1, h2, h3, section)[tabindex="-1"]:focus { outline: none; }

/* a term the glossary defines */
.aa-term { color: inherit; text-decoration: underline dotted; text-decoration-color: var(--accent-blue); text-decoration-thickness: 1.5px; text-underline-offset: 4px; transition: color 200ms, text-decoration-color 200ms; }
.aa-term:hover { color: var(--accent-blue-hover); text-decoration-style: solid; }
/* a plain link inside a sentence */
.aa-link { color: var(--accent-blue-hover); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; transition: color 200ms, text-decoration-thickness 200ms; }
.aa-link:hover { color: var(--accent-blue); text-decoration-thickness: 2px; }

/* the onward link: the arrow leans the way it points */
.aa-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; }
.aa-go span { display: inline-block; transition: transform 360ms var(--aa-ease); }
.aa-go:hover { color: var(--accent-blue); text-decoration-color: currentColor; }
.aa-go:hover span { transform: translateX(6px); }
.aa-go[href^="#"]:hover span { transform: translateY(4px) rotate(90deg); }
.aa-go--up:hover span { transform: translateX(-6px); }

/* ============ REVEALS ============
   Hidden only once the script has said it is running (aa-js on <html>), so
   with no script nothing is ever hidden. Each part comes in its own way. */
.aa-js [data-r] { transition: opacity 620ms ease, transform 820ms var(--aa-ease); }
.aa-js [data-r]:not(.is-in) { opacity: 0; transform: translateY(18px); }
.aa-js [data-r="left"]:not(.is-in) { transform: translateX(-32px); }
.aa-js [data-r="right"]:not(.is-in) { transform: translateX(32px); }
.aa-js [data-r="rows"]:not(.is-in) { opacity: 1; transform: none; }

/* ============ HERO ============ */
.aa-hero { padding-block: clamp(36px, 5vw, 72px) clamp(48px, 6vw, 88px); }
.aa-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; }
.aa-hero__h1 > em { color: var(--accent-blue); }
.aa-hero__row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.aa-hero__answer { font-size: clamp(1.12rem, 1.5vw, 1.3rem); line-height: 1.6; color: var(--ink); }
.aa-hero__limit { margin-top: 18px !important; padding-left: 18px; border-left: 3px solid var(--accent-blue); font-size: 17px; line-height: 1.6; color: var(--ink-soft); }
.aa-hero__text .aa-go { margin-top: 14px; }
.aa-hero__rev { margin-top: 10px !important; font-size: 14px; color: var(--ink-muted); }

.aa-hero__figs { display: grid; gap: clamp(20px, 2.6vw, 36px); }
.aa-root { display: grid; align-items: center; gap: 8px clamp(16px, 2.4vw, 32px); }
.aa-root--own { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.aa-root--donor { padding-top: clamp(20px, 2.6vw, 36px); border-top: 1px solid var(--border); }
.aa-scene { display: block; width: 100%; height: auto; overflow: visible; }
.aa-root--donor .aa-scene { max-width: 560px; }
.aa-scene :is(path, rect, circle) { fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.aa-scene .aa-draw--loop { stroke: var(--aa-own-line); stroke-width: 2; }
.aa-scene .aa-draw--flow { stroke: var(--aa-donor); stroke-width: 2; }
.aa-scene .aa-cell { stroke: none; transform-box: fill-box; transform-origin: center; }
.aa-scene .aa-cell--own { fill: var(--aa-own); }
.aa-scene .aa-cell--donor { fill: var(--aa-donor); }
.aa-root figcaption { display: grid; gap: 2px; }
.aa-root figcaption b { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 2.1vw, 1.9rem); line-height: 1.1; color: var(--ink); }
.aa-root figcaption b i { font-style: italic; }
.aa-root--own figcaption b i { color: var(--aa-own-ink); }
.aa-root--donor figcaption b i { color: var(--aa-donor-ink); }
.aa-root__greek { font-size: 15px; color: var(--ink-muted); }
.aa-root__def { margin-top: 6px; font-size: 15.5px; line-height: 1.55; color: var(--ink-soft); }

/* first paint: the heading, the answer, then one person's loop, then the donor's chain, left to right */
@keyframes aa-up { from { opacity: 0; transform: translateY(22px); } }
@keyframes aa-draw { from { stroke-dashoffset: 1; opacity: 0; } 12% { opacity: 1; } to { stroke-dashoffset: 0; opacity: 1; } }
@keyframes aa-pop { from { transform: scale(0); opacity: 0; } 70% { transform: scale(1.25); opacity: 1; } }
@keyframes aa-rise { from { opacity: 0; transform: translateY(14px); } }
.aa-js .aa-hero__h1 > * { animation: aa-up 900ms var(--aa-ease) both; }
.aa-js .aa-hero__h1 > em { animation-delay: 110ms; }
.aa-js .aa-hero__text > * { animation: aa-up 900ms var(--aa-ease) 240ms both; }
.aa-js .aa-hero__text > :nth-child(n+2) { animation-delay: 360ms; }
.aa-js .aa-root figcaption { animation: aa-rise 700ms var(--aa-ease) 700ms both; }
.aa-js .aa-root--donor figcaption { animation-delay: 1500ms; }
.aa-js .aa-scene .aa-draw { stroke-dasharray: 1; animation: aa-draw 620ms var(--aa-ease) 420ms both; }
.aa-js .aa-scene .aa-draw--loop { animation-duration: 800ms; animation-delay: 760ms; }
.aa-js .aa-scene .aa-draw--head { animation-duration: 260ms; animation-delay: 1400ms; }
.aa-js .aa-root--own .aa-cell { animation: aa-pop 420ms var(--aa-ease) calc(1500ms + var(--i) * 110ms) both; }
.aa-js .aa-scene .aa-draw--back { animation-delay: 1900ms; }
.aa-js .aa-scene .aa-draw--back.aa-draw--head { animation-delay: 2550ms; }
.aa-js .aa-root--donor .aa-draw { animation-delay: 1500ms; }
.aa-js .aa-root--donor .aa-draw--flow { animation-delay: 1800ms; }
.aa-js .aa-root--donor .aa-draw--head { animation-delay: 2250ms; }
.aa-js .aa-scene__flask .aa-draw { animation-delay: 2150ms; }
.aa-js .aa-scene__flask .aa-cell { animation: aa-pop 380ms var(--aa-ease) calc(2500ms + var(--i) * 70ms) both; }
.aa-js .aa-root--donor .aa-draw--f2 { animation-delay: 3050ms; }
.aa-js .aa-root--donor .aa-draw--f2.aa-draw--head { animation-delay: 3400ms; }
.aa-js .aa-scene__vials .aa-draw { animation-delay: calc(3500ms + var(--v) * 160ms); }
.aa-js .aa-scene__vials .aa-cell { animation: aa-pop 380ms var(--aa-ease) calc(3800ms + var(--v) * 160ms) both; }
.aa-js .aa-scene__vials .aa-draw--f3 { animation-delay: calc(4000ms + var(--v) * 160ms); }
.aa-js .aa-scene__vials .aa-draw--p { animation-delay: calc(4350ms + var(--v) * 160ms); }

/* ============ CONTENTS BAR (follows the reader) ============ */
.aa-page .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(--aa-ease), visibility 0s 360ms;
}
.aa-page .hc-bar.is-on { transform: none; opacity: 1; visibility: visible; transition: opacity 260ms, transform 360ms var(--aa-ease); }
body.aa-page.nav-open .hc-bar { opacity: 0; visibility: hidden; }
.aa-page .hc-bar__track {
  max-width: calc(1240px + 2 * var(--aa-gut)); margin: 0 auto; padding: 0 var(--aa-gut);
  height: 100%; display: flex; align-items: stretch; gap: clamp(18px, 2.4vw, 32px);
  overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; scroll-padding-inline: 28px;
}
.aa-page .hc-bar__track::-webkit-scrollbar { display: none; }
.aa-page .hc-bar__track a {
  border-bottom: 0;
  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;
}
.aa-page .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(--aa-ease);
}
.aa-page .hc-bar__track a:hover, .aa-page .hc-bar__track a[aria-current] { color: var(--ink); }
.aa-page .hc-bar__track a:hover::after { transform: scaleX(.35); }
.aa-page .hc-bar__track a[aria-current]::after { transform: scaleX(1); }
.aa-page .hc-bar__track a:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: -4px; border-radius: 4px; }
.aa-page .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));
}

/* ============ WHICH ONE CELVA USES ============ */
.aa-celva { background: var(--accent-wash); padding-block: clamp(48px, 6vw, 88px); }
.aa-celva__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 88px); align-items: start; }
.aa-page .aa-celva h2 { font-family: var(--font-body); font-size: 17px; font-weight: 500; line-height: 1.5; letter-spacing: 0; color: var(--ink-muted); }
.aa-celva__big { margin-top: 8px !important; font-family: var(--font-display); font-weight: 300; font-size: clamp(2.1rem, 3.6vw, 3.3rem); line-height: 1.08; letter-spacing: -.01em; color: var(--ink); }
.aa-celva__text p { font-size: 17.5px; line-height: 1.7; color: var(--ink-soft); }
.aa-celva__text p + p { margin-top: 18px !important; }
.aa-celva__text strong { color: var(--ink); font-weight: 600; }
.aa-shelf { display: block; width: min(100%, 300px); height: auto; margin-top: clamp(20px, 3vw, 36px); overflow: visible; }
.aa-shelf :is(rect, path) { fill: #fff; stroke: var(--ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.aa-shelf .aa-shelf__line { fill: none; stroke: var(--border-strong); }
.aa-shelf circle { fill: var(--aa-donor); }
.aa-shelf .aa-shelf__level { stroke: var(--aa-own-line); }
.aa-shelf__vial { transform-box: fill-box; }
@keyframes aa-set { from { opacity: 0; transform: translateY(-16px); } 70% { transform: translateY(2px); } }
@keyframes aa-slide { from { opacity: 0; transform: translateX(26px); } }
.aa-js .aa-celva__head:not(.is-in) :is(.aa-shelf__vial, .aa-shelf__tube) { opacity: 0; }
.aa-js .aa-celva__head.is-in .aa-shelf__vial { animation: aa-set 620ms var(--aa-ease) calc(260ms + var(--i) * 140ms) both; }
.aa-js .aa-celva__head.is-in .aa-shelf__tube { animation: aa-slide 700ms var(--aa-ease) 900ms both; }

/* ============ SOURCE TO SYRINGE ============ */
.aa-path { padding-block: clamp(56px, 7vw, 104px) clamp(40px, 5vw, 72px); }
.aa-path__lede { margin-top: clamp(16px, 2vw, 24px) !important; font-size: 18px; line-height: 1.7; color: var(--ink-soft); }
.aa-track { --aa-c: var(--aa-own-line); --aa-c-ink: var(--aa-own-ink); --aa-c-fill: var(--aa-own); --aa-gap: clamp(20px, 3vw, 44px); margin-top: clamp(32px, 4vw, 52px); padding-top: clamp(24px, 3vw, 36px); border-top: 3px solid var(--aa-c); }
.aa-track--donor { --aa-c: var(--aa-donor); --aa-c-ink: var(--aa-donor-ink); --aa-c-fill: var(--aa-donor); }
.aa-track__head { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 10px clamp(28px, 4vw, 72px); align-items: baseline; }
.aa-track__head h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.7rem, 2.5vw, 2.3rem); line-height: 1.1; color: var(--ink); }
.aa-track__head h3 span { display: block; margin-top: 6px; font-family: var(--font-body); font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--aa-c-ink); }
.aa-track__head p { font-size: 17px; line-height: 1.7; color: var(--ink-soft); }
.aa-track__head strong { color: var(--ink); font-weight: 600; }

.aa-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--aa-gap); margin-top: clamp(28px, 3.4vw, 44px) !important; }
.aa-steps li { position: relative; --f: 1; }
.aa-ico { display: block; width: 84px; height: 84px; padding: 13px; box-sizing: border-box; border: 2px solid var(--aa-c); border-radius: 50%; background: #fff; overflow: visible; transition: border-color 420ms, transform 520ms var(--aa-ease); }
.aa-ico :is(path, rect, circle) { fill: none; stroke: var(--ink); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.aa-ico .aa-ico__cell { fill: var(--aa-c-fill); stroke: none; transform-box: fill-box; transform-origin: center; }
.aa-ico :is(.aa-ico__in, .aa-ico__seal, .aa-ico__tick, .aa-ico__frost) { stroke: var(--aa-c); }
.aa-ico .aa-ico__seal { fill: #fff; }
.aa-ico .aa-ico__spin { stroke: var(--ink-muted); stroke-width: 1.5; stroke-dasharray: 5 7; }
/* one connector per gap, badge to badge; nothing runs on past the last */
.aa-steps li:not(:last-child)::after { content: ""; position: absolute; top: 41px; left: 96px; right: calc(12px - var(--aa-gap)); height: 2px; background: linear-gradient(var(--aa-c), var(--aa-c)) no-repeat left / calc(var(--f) * 100%) 100%, var(--border); }
.aa-steps__when { display: block; margin-top: 16px; font-size: 14px; font-weight: 600; color: var(--aa-c-ink); }
.aa-steps h4 { margin: 2px 0 6px; font-family: var(--font-display); font-weight: 400; font-size: 1.4rem; line-height: 1.2; color: var(--ink); max-width: none; }
.aa-steps p { font-size: 15.5px; line-height: 1.55; color: var(--ink-soft); }
/* scroll-led: a step waits, quiet, until the route reaches it */
.aa-js .aa-steps li > :not(.aa-ico) { transition: opacity 520ms ease; }
.aa-js .aa-steps li:not(.is-lit) > :not(.aa-ico) { opacity: .6; }
.aa-js .aa-steps li:not(.is-lit) .aa-ico { border-color: var(--border-strong); transform: scale(.92); }
.aa-js .aa-steps li:not(.is-lit) .aa-ico__cell { opacity: 0; }
@keyframes aa-spin { to { stroke-dashoffset: -24; } }
@keyframes aa-grow { from { transform: scale(0); opacity: 0; } 60% { transform: scale(1.4); opacity: 1; } }
@keyframes aa-tick { from { stroke-dashoffset: 12; } }
.aa-js .aa-steps li.is-lit .aa-ico__cell { animation: aa-grow 420ms var(--aa-ease) calc(var(--n, 0) * 60ms) both; }
.aa-js .aa-steps li.is-lit .aa-ico__spin { animation: aa-spin 900ms linear 3; }
.aa-js .aa-ico--list .aa-ico__tick { stroke-dasharray: 12; }
.aa-js .aa-steps li:not(.is-lit) .aa-ico--list .aa-ico__tick { stroke-dashoffset: 12; }
.aa-js .aa-steps li.is-lit .aa-ico--list .aa-ico__tick { animation: aa-tick 320ms ease-out calc(var(--n) * 110ms) both; }
/* your own cells go back where they came from: the route returns to its first stop */
.aa-track__back { display: block; position: relative; height: 22px; margin: 18px 0 0 41px; width: calc(75% + .75 * var(--aa-gap)); border: 2px dashed var(--aa-own-line); border-top: 0; border-radius: 0 0 16px 16px; box-sizing: border-box; }
.aa-track__back::before { content: ""; position: absolute; left: -7px; top: -4px; width: 10px; height: 10px; border-left: 2px solid var(--aa-own-line); border-top: 2px solid var(--aa-own-line); transform: rotate(45deg); }
.aa-track__sum { display: flex; flex-wrap: wrap; gap: 6px clamp(24px, 4vw, 56px); margin-top: clamp(20px, 2.4vw, 28px) !important; padding-top: 16px; border-top: 1px solid var(--border); font-size: 15.5px; }
.aa-track__sum div { display: flex; gap: 8px; }
.aa-track__sum dt { color: var(--ink-muted); }
.aa-track__sum dd { font-weight: 600; color: var(--ink); }
.aa-track__sum dd span { font-weight: 400; color: var(--ink-muted); }

/* ============ PROPERTY BY PROPERTY ============ */
.aa-cmp { padding-block: clamp(40px, 5vw, 72px) clamp(56px, 7vw, 104px); }
.aa-cmp__lede { margin: clamp(16px, 2vw, 24px) 0 clamp(28px, 4vw, 48px) !important; font-size: 18px; line-height: 1.7; color: var(--ink-soft); }
.aa-cmp__head { display: grid; grid-template-columns: minmax(0, 1fr) clamp(130px, 15vw, 200px); gap: clamp(24px, 4vw, 72px); align-items: center; }
/* weighed against each other: the beam sways once and comes to rest level */
.aa-scale { display: block; width: 100%; height: auto; overflow: visible; }
.aa-scale :is(path, rect) { fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.aa-scale .aa-scale__obj { fill: #fff; stroke-width: 1.4; }
.aa-scale__pivot { fill: #fff; stroke: var(--ink); stroke-width: 1.7; }
.aa-scale__own { fill: var(--aa-own); }
.aa-scale__donor { fill: var(--aa-donor); }
.aa-scale__beam { transform-origin: 100px 34px; }
@keyframes aa-weigh { 0% { transform: rotate(-7deg); } 30% { transform: rotate(5deg); } 55% { transform: rotate(-3deg); } 78% { transform: rotate(1.5deg); } 100% { transform: none; } }
.aa-js [data-r="scale"]:not(.is-in) { transform: none; }
.aa-js .aa-scale.is-in .aa-scale__beam { animation: aa-weigh 2200ms ease-in-out 200ms both; }
.aa-rows { --aa-cols: minmax(0, 26fr) minmax(0, 30fr) minmax(0, 30fr) 124px; }
.aa-rows__head { display: grid; grid-template-columns: var(--aa-cols); }
.aa-rows__head span { padding: 0 20px 16px; font-family: var(--font-display); font-size: 1.6rem; font-weight: 400; line-height: 1.1; color: var(--ink); border-bottom: 3px solid var(--border); }
.aa-rows__head small { display: block; margin-top: 4px; font-family: var(--font-body); font-size: 14px; color: var(--ink-muted); }
.aa-rows__head .aa-rows__own { border-bottom-color: var(--aa-own); }
.aa-rows__head .aa-rows__donor { border-bottom-color: var(--aa-donor); }
.aa-row { border-bottom: 1px solid var(--border); }
.aa-row summary { display: grid; grid-template-columns: var(--aa-cols); align-items: start; cursor: pointer; list-style: none; padding-block: 22px; transition: background-color 260ms; }
.aa-row summary::-webkit-details-marker { display: none; }
.aa-row summary:hover { background: rgba(45, 110, 177, .045); }
.aa-row__k { padding-right: 20px; font-size: 16.5px; font-weight: 600; line-height: 1.4; color: var(--ink); }
.aa-row__k small { display: block; font-size: 14px; font-weight: 400; color: var(--ink-muted); }
.aa-row__v { padding-inline: 20px; font-family: var(--font-display); font-size: 1.45rem; font-weight: 400; line-height: 1.2; }
.aa-row__v small { display: block; margin-top: 4px; font-family: var(--font-body); font-size: 14.5px; color: var(--ink-muted); }
.aa-row__v--own { color: var(--aa-own-ink); }
.aa-row__v--donor { color: var(--aa-donor-ink); border-left: 1px solid var(--border); }
/* which column a value sits in is said aloud; on a phone it is also shown */
.aa-who { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.aa-row__more { justify-self: end; display: inline-flex; align-items: center; gap: 10px; min-height: 28px; font-size: 14.5px; font-weight: 600; color: var(--accent-blue-hover); white-space: nowrap; transition: color 200ms; }
.aa-row__more::after { content: ""; width: 8px; height: 8px; margin-top: -4px; border-right: 2px solid; border-bottom: 2px solid; transform: rotate(45deg); transition: transform 360ms var(--aa-ease); }
.aa-row summary:hover .aa-row__more { color: var(--accent-blue); }
.aa-row summary:hover .aa-row__more::after { transform: translateY(3px) rotate(45deg); }
.aa-row[open] .aa-row__more::after { margin-top: 4px; transform: rotate(-135deg); }
.aa-row[open] summary:hover .aa-row__more::after { transform: translateY(-3px) rotate(-135deg); }
.aa-more__shut, [open] > summary .aa-more__open { display: none; }
[open] > summary .aa-more__shut { display: inline; }
.aa-row__body { margin-left: 26.9%; padding: 0 144px 26px 20px; }
.aa-row__body p { font-size: 16.5px; line-height: 1.7; color: var(--ink-soft); }
.aa-row__body p + p { margin-top: 14px !important; }
.aa-row__body .aa-go { margin-top: 6px; }
@keyframes aa-unfold { from { opacity: 0; transform: translateY(-8px); } }
.aa-row[open] .aa-row__body, .aa-ph[open] .aa-ph__body { animation: aa-unfold 420ms var(--aa-ease); }
/* the one row a picture says faster: one dot for every ten million cells */
.aa-dots { display: flex; gap: 5px; margin-top: 10px; }
.aa-dots i { width: 9px; height: 9px; border-radius: 50%; }
.aa-dots--own i { background: var(--aa-own); }
.aa-dots--donor i { background: var(--aa-donor); }
.aa-dots--donor i:last-child { opacity: .45; }
.aa-js .aa-rows .aa-row { transition: opacity 520ms ease, transform 720ms var(--aa-ease); transition-delay: calc(var(--i) * 70ms); }
.aa-js .aa-rows:not(.is-in) .aa-row { opacity: 0; transform: translateY(14px); }
.aa-js .aa-rows:not(.is-in) .aa-dots i { opacity: 0; }
.aa-js .aa-rows.is-in .aa-dots i { animation: aa-grow 420ms var(--aa-ease) calc(520ms + var(--n, 0) * 70ms) backwards; }

/* ============ HLA MATCHING ============ */
.aa-immune { background: var(--ink); color: #fff; padding-block: clamp(56px, 7vw, 104px); }
.aa-page .aa-immune h2 { color: #fff; }
.aa-immune__text { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px clamp(28px, 5vw, 88px); align-items: start; margin-top: clamp(18px, 2.4vw, 28px); }
.aa-immune__text p { font-size: 17px; line-height: 1.7; color: rgba(255, 255, 255, .84); }
.aa-immune__text .aa-immune__lede { font-size: clamp(1.1rem, 1.5vw, 1.28rem); line-height: 1.6; color: #fff; }
/* native "Read more": opened for print, found by in-page search */
.aa-more summary { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; list-style: none; font-size: 15.5px; font-weight: 600; color: #c9def2; transition: color 200ms; }
.aa-more summary::-webkit-details-marker { display: none; }
.aa-more summary::after { content: ""; width: 8px; height: 8px; margin-top: -4px; border-right: 2px solid; border-bottom: 2px solid; transform: rotate(45deg); transition: transform 360ms var(--aa-ease); }
.aa-more summary:hover { color: #fff; }
.aa-more summary:hover::after { transform: translateY(3px) rotate(45deg); }
.aa-more[open] summary::after { margin-top: 4px; transform: rotate(-135deg); }
.aa-more[open] summary:hover::after { transform: translateY(-3px) rotate(-135deg); }
.aa-more[open] > p { animation: aa-unfold 420ms var(--aa-ease); }
.aa-immune__text em { font-style: italic; color: #fff; }
.aa-cells { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 88px); margin-top: clamp(36px, 5vw, 64px); padding-top: clamp(32px, 4vw, 52px); border-top: 1px solid rgba(255, 255, 255, .16); }
.aa-cellfig { display: grid; grid-template-rows: auto auto auto; justify-items: center; text-align: center; }
.aa-cellfig h3 { font-family: var(--font-body); font-size: 15px; font-weight: 500; color: var(--accent-ice); }
.aa-cellfig h3 span { display: block; margin-top: 6px; font-family: var(--font-display); font-weight: 300; font-size: clamp(1.6rem, 2.4vw, 2.2rem); line-height: 1.1; color: #fff; }
.aa-cellfig figcaption p { margin-top: 10px !important; font-size: 15.5px; line-height: 1.55; color: rgba(255, 255, 255, .78); }
.aa-cellfig > svg { display: block; width: min(100%, 380px); height: auto; margin-block: 14px 6px; overflow: visible; }
.aa-cellfig__body { fill: rgba(255, 255, 255, .05); stroke: #fff; stroke-width: 2; }
.aa-cellfig__core { fill: rgba(124, 169, 209, .22); stroke: var(--accent-ice); stroke-width: 1.2; }
.aa-mk > g { transform-origin: 0 0; }
.aa-mk :is(polygon, rect, circle) { fill: #fff; }
.aa-mk line { stroke: #fff; stroke-width: 1.6; }
.aa-mk--ii :is(rect, line) { fill: var(--accent-ice); stroke: var(--accent-ice); }
.aa-mk--co :is(circle, line) { fill: var(--aa-own); stroke: var(--aa-own); }
.aa-mk--low { opacity: .42; }
.aa-mk--none :is(polygon, rect, circle) { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 1.2; stroke-dasharray: 2.5 2.5; }
.aa-legend { display: grid; grid-template-columns: repeat(2, auto); justify-content: center; gap: 4px 28px; width: 100%; padding-top: 16px !important; border-top: 1px solid rgba(255, 255, 255, .16); text-align: left; }
.aa-legend li { display: grid; grid-template-columns: 16px auto auto; align-items: center; gap: 10px; min-height: 30px; font-size: 15px; color: rgba(255, 255, 255, .84); }
.aa-legend svg { width: 16px; height: 14px; }
.aa-legend b { font-weight: 600; color: #fff; }
.aa-legend__net { grid-template-columns: auto auto !important; padding-left: 26px; }
.aa-cellfig--reg .aa-legend__net b { color: var(--aa-own); }
.aa-cellfig--msc .aa-legend__net b { color: var(--accent-ice); }
.aa-sw { fill: #fff; }
.aa-sw--ii { fill: var(--accent-ice); }
.aa-sw--co { fill: var(--aa-own); }
.aa-sw--low { opacity: .42; }
.aa-sw--none { fill: none; stroke: rgba(255, 255, 255, .6); stroke-width: 1.2; stroke-dasharray: 2.5 2.5; }
/* the markers grow out of the surface one at a time; on the MSC most of them never arrive */
@keyframes aa-sprout { from { opacity: 0; transform: translateY(9px) scale(.3); } 70% { transform: translateY(-1px) scale(1.12); } }
@keyframes aa-ghost { from { opacity: 0; } }
.aa-js .aa-cells:not(.is-live) .aa-mk > g { opacity: 0; }
.aa-js .aa-cells.is-live .aa-mk > g { animation: aa-sprout 520ms var(--aa-ease) calc(200ms + var(--n) * 150ms) both; }
.aa-js .aa-cells.is-live .aa-mk--none > g { animation: aa-ghost 900ms ease calc(400ms + var(--n) * 150ms) both; }
.aa-outcome { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px clamp(28px, 5vw, 88px); margin-top: clamp(28px, 4vw, 48px); }
.aa-outcome p { padding-left: 20px; border-left: 3px solid var(--aa-own); font-size: 16.5px; line-height: 1.65; color: rgba(255, 255, 255, .84); }
.aa-outcome p + p { border-left-color: var(--accent-ice); }
.aa-outcome span { display: block; font-size: 15px; font-weight: 500; color: var(--accent-ice); }
.aa-outcome strong { display: block; margin-block: 4px 8px; font-family: var(--font-display); font-weight: 300; font-size: clamp(1.45rem, 2.1vw, 1.9rem); line-height: 1.15; color: #fff; }

/* ============ WHERE IT IS AUTHORIZED ============ */
.aa-reg { padding-block: clamp(56px, 7vw, 104px); }
.aa-reg__head { display: grid; grid-template-columns: minmax(0, 1fr) clamp(110px, 13vw, 170px); gap: clamp(28px, 5vw, 88px); align-items: center; }
.aa-reg__text { margin-top: clamp(16px, 2vw, 24px); }
.aa-reg__text p { font-size: 17.5px; line-height: 1.7; color: var(--ink-soft); }
.aa-reg__text p + p { margin-top: 16px !important; }
.aa-stamp { display: block; width: 100%; height: auto; overflow: visible; }
.aa-stamp :is(path, circle) { fill: #fff; stroke: var(--ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.aa-stamp .aa-stamp__rule { stroke: var(--border-strong); }
.aa-stamp__seal { transform-box: fill-box; transform-origin: center; }
.aa-stamp .aa-stamp__seal :is(circle, path) { stroke: var(--aa-donor); stroke-width: 2.2; }
@keyframes aa-stamp { from { opacity: 0; transform: scale(1.9) rotate(-18deg); } 60% { opacity: 1; transform: scale(.94) rotate(-8deg); } to { transform: rotate(-8deg); } }
.aa-stamp__seal { transform: rotate(-8deg); }
.aa-js .aa-reg:not(.is-seen) .aa-stamp__seal { opacity: 0; }
.aa-js .aa-reg.is-seen .aa-stamp__seal { animation: aa-stamp 520ms cubic-bezier(.3, 1.3, .5, 1) 500ms both; }
.aa-reg__geo { margin-top: clamp(32px, 4vw, 56px) !important; font-family: var(--font-display); font-weight: 300; font-size: clamp(1.6rem, 2.4vw, 2.2rem); line-height: 1.15; color: var(--ink); }
.aa-ledgers { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px clamp(28px, 5vw, 88px); margin-top: clamp(18px, 2.4vw, 28px); }
.aa-ledger h3 { padding-bottom: 14px; border-bottom: 2px solid var(--ink); font-size: 15px; font-weight: 600; color: var(--ink-muted); font-family: var(--font-body); }
.aa-ledger h3 span { display: block; margin-top: 4px; font-family: var(--font-display); font-size: 1.35rem; font-weight: 400; line-height: 1.25; color: var(--ink); }
.aa-ledger li { display: grid; grid-template-columns: 124px minmax(0, 1fr) auto; gap: 6px 16px; align-items: baseline; padding-block: 16px; border-bottom: 1px solid var(--border); }
.aa-ledger__j { font-size: 14px; font-weight: 600; color: var(--ink-muted); }
.aa-ledger__n { font-size: 16.5px; line-height: 1.45; color: var(--ink); }
.aa-ledger__n i { font-style: italic; color: var(--ink-muted); }
.aa-st { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; white-space: nowrap; }
.aa-st::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.aa-st--ok { color: var(--aa-donor-ink); }
.aa-st--ok::before { background: var(--aa-donor); }
.aa-st--ind { color: var(--ink); }
.aa-st--ind::before { background: none; border: 2px solid var(--ink); box-sizing: border-box; }
.aa-st--exc { color: var(--aa-own-ink); }
.aa-st--exc::before { background: var(--aa-own); }
.aa-caveat { margin-top: clamp(32px, 4vw, 56px); padding: 4px 0 4px clamp(20px, 2.4vw, 32px); border-left: 3px solid var(--ink); }
.aa-caveat h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; line-height: 1.2; color: var(--ink); margin-bottom: 8px; }
.aa-caveat p { font-size: 17px; line-height: 1.7; color: var(--ink-soft); }

/* ============ SOURCE CLAIMS ============ */
.aa-phr { padding-block: clamp(56px, 7vw, 104px); border-top: 1px solid var(--border); }
.aa-phr__grid { margin-top: clamp(20px, 3vw, 36px); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 5vw, 88px); align-items: start; }
.aa-phr__head { position: sticky; top: calc(var(--hc-nav-h) + var(--hc-bar-h) + 28px); }
.aa-phr__head p { font-size: 17.5px; line-height: 1.7; color: var(--ink-soft); }
.aa-lens { display: block; width: clamp(110px, 12vw, 160px); height: auto; margin-top: clamp(20px, 3vw, 36px); overflow: visible; }
.aa-lens :is(path, circle) { fill: #fff; stroke: var(--ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.aa-lens .aa-lens__rule { stroke: var(--border-strong); }
.aa-lens__glass circle { fill: rgba(234, 241, 248, .8); }
.aa-lens__glass .aa-lens__rule { stroke: var(--accent-blue); stroke-width: 2.2; }
@keyframes aa-scan { from { transform: translate(-46px, -36px); } }
.aa-js .aa-phr__head.is-in .aa-lens__glass { animation: aa-scan 1500ms var(--aa-ease) 300ms both; }

.aa-ph { --aa-t: var(--ink-muted); border-bottom: 1px solid var(--border); }
.aa-ph:first-child { border-top: 2px solid var(--ink); }
.aa-ph--own { --aa-t: var(--aa-own-ink); }
.aa-ph--donor { --aa-t: var(--aa-donor-ink); }
.aa-ph summary { display: grid; grid-template-columns: minmax(0, 1fr) auto 20px; gap: 6px 20px; align-items: center; min-height: 44px; padding-block: 20px; cursor: pointer; list-style: none; }
.aa-ph summary::-webkit-details-marker { display: none; }
.aa-ph q { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(1.4rem, 2.1vw, 1.8rem); line-height: 1.2; color: var(--ink); quotes: "\201C" "\201D"; transition: color 200ms; }
.aa-ph summary:hover q { color: var(--accent-blue-hover); }
.aa-ph__tag { font-size: 14.5px; font-weight: 600; color: var(--aa-t); white-space: nowrap; }
.aa-ph summary::after { content: ""; justify-self: center; width: 9px; height: 9px; margin-top: -4px; border-right: 2px solid var(--accent-blue-hover); border-bottom: 2px solid var(--accent-blue-hover); transform: rotate(45deg); transition: transform 360ms var(--aa-ease); }
.aa-ph summary:hover::after { transform: translateY(3px) rotate(45deg); }
.aa-ph[open] summary::after { margin-top: 4px; transform: rotate(-135deg); }
.aa-ph__body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px clamp(24px, 3vw, 48px); align-items: start; padding-bottom: 28px; }
.aa-ph__body p { font-size: 16.5px; line-height: 1.7; color: var(--ink-soft); }
.aa-ph__body strong { color: var(--ink); font-weight: 600; }
.aa-ph__ask { padding-left: 18px; border-left: 3px solid var(--accent-blue); color: var(--ink) !important; font-weight: 500; }
.aa-ph__ask b { display: block; font-size: 14.5px; font-weight: 600; color: var(--accent-blue-hover); }
/* the question, ready to send (the button is added by the script) */
.aa-copy { display: flex; width: fit-content; align-items: center; gap: 8px; min-height: 44px; margin-top: 4px; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; font-size: 14.5px; 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; }
.aa-copy:hover { color: var(--accent-blue); text-decoration-color: currentColor; }
.aa-copy:active { transform: translateY(1px); }
.aa-copy svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16; animation: aa-check 360ms ease-out both; }
@keyframes aa-check { from { stroke-dashoffset: 16; } }
.aa-copy.is-done { text-decoration-color: transparent; }
.aa-copy__say { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.aa-ph__ask { position: relative; }
.aa-js .aa-phr__list .aa-ph { transition: opacity 520ms ease, transform 720ms var(--aa-ease); }
.aa-js .aa-phr__list:not(.is-in) .aa-ph { opacity: 0; transform: translateX(24px); }
.aa-js .aa-phr__list .aa-ph:nth-child(2) { transition-delay: 70ms; }
.aa-js .aa-phr__list .aa-ph:nth-child(3) { transition-delay: 140ms; }
.aa-js .aa-phr__list .aa-ph:nth-child(4) { transition-delay: 210ms; }
.aa-js .aa-phr__list .aa-ph:nth-child(5) { transition-delay: 280ms; }
.aa-js .aa-phr__list .aa-ph:nth-child(6) { transition-delay: 350ms; }

/* ============ DIFFERENT TOOLS ============ */
.aa-end { padding-block: clamp(56px, 7vw, 104px); border-top: 1px solid var(--border); }
.aa-page .aa-end h2 { font-size: clamp(2.2rem, 4.4vw, 4rem); line-height: 1.05; }
.aa-end__q { margin-top: clamp(18px, 2.4vw, 28px) !important; font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.6; color: var(--ink-soft); }
.aa-fits { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px clamp(28px, 5vw, 88px); margin-top: clamp(32px, 4vw, 56px); }
.aa-fit { --aa-c: var(--aa-own-line); --aa-c-fill: var(--aa-own); --aa-c-ink: var(--aa-own-ink); display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 4px 22px; align-items: start; padding-top: 24px; border-top: 3px solid var(--aa-c); }
.aa-fit--donor { --aa-c: var(--aa-donor); --aa-c-fill: var(--aa-donor); --aa-c-ink: var(--aa-donor-ink); }
.aa-fit__ico { grid-row: span 2; width: 72px; height: 72px; overflow: visible; }
.aa-fit__ico :is(path, rect) { fill: #fff; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.aa-fit__ico .aa-ico__cell { fill: var(--aa-c-fill); transform-box: fill-box; transform-origin: center; }
@keyframes aa-bob { 50% { transform: translateY(-3px); } }
.aa-js .aa-fit.is-in .aa-ico__cell { animation: aa-bob 2.4s ease-in-out 4; }
.aa-js .aa-fit.is-in .aa-ico__cell:nth-of-type(odd) { animation-delay: -900ms; }
.aa-fit h3 { font-family: var(--font-body); font-size: 15px; font-weight: 600; color: var(--aa-c-ink); }
.aa-fit p { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.35rem, 2vw, 1.75rem); line-height: 1.3; color: var(--ink); }
.aa-signal { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 10px clamp(28px, 4vw, 72px); align-items: baseline; margin-top: clamp(36px, 5vw, 64px); padding-top: clamp(24px, 3vw, 36px); border-top: 1px solid var(--border-strong); }
.aa-signal h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 2.2vw, 1.9rem); line-height: 1.2; color: var(--ink); }
.aa-signal p { font-size: 17.5px; line-height: 1.7; color: var(--ink-soft); }

/* ============ READ ON ============ */
.aa-next { padding-block: clamp(48px, 6vw, 88px) clamp(56px, 7vw, 96px); border-top: 1px solid var(--border); }
.aa-next__list { margin-top: clamp(20px, 3vw, 36px) !important; }
.aa-page .aa-next__list a { display: grid; grid-template-columns: 64px minmax(0, 5fr) minmax(0, 6fr) 44px; gap: 6px 28px; align-items: center; min-height: 44px; padding-block: 22px; border-bottom: 1px solid var(--border); color: var(--ink); }
.aa-next__list li:first-child a { border-top: 1px solid var(--border); }
.aa-next__ico { width: 56px; height: 56px; overflow: visible; transition: transform 420ms var(--aa-ease); }
.aa-next__ico :is(path, rect) { fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: stroke 200ms; }
.aa-next__ico .aa-next__dot { fill: var(--accent-blue); }
.aa-next__t { font-family: var(--font-display); font-size: clamp(1.4rem, 2.1vw, 1.8rem); font-weight: 400; line-height: 1.2; transition: color 200ms; }
.aa-next__d { font-size: 16px; line-height: 1.55; color: var(--ink-muted); }
.aa-next__go { justify-self: end; font-size: 20px; color: var(--accent-blue-hover); transition: transform 360ms var(--aa-ease); }
.aa-next__list a:hover .aa-next__t, .aa-next__list a:focus-visible .aa-next__t { color: var(--accent-blue-hover); }
.aa-next__list a:hover .aa-next__go, .aa-next__list a:focus-visible .aa-next__go { transform: translateX(8px); }
.aa-next__list a:hover .aa-next__ico, .aa-next__list a:focus-visible .aa-next__ico { transform: translateY(-3px) rotate(-4deg); }
.aa-js .aa-next__list li[data-r] { transition-delay: calc(var(--i) * 90ms); }
.aa-next__up { display: flex; flex-wrap: wrap; gap: 0 32px; margin-top: 20px !important; }

/* beside the short answer on a desktop the longer one simply stays open */
@media (min-width: 901px) { .aa-more[open] summary { display: none; } }

/* ============ NARROWER ============ */
@media (max-width: 1100px) {
  /* the bar's track can scroll here, so its edges fade */
  .aa-page .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); }
  .aa-rows { --aa-cols: minmax(0, 26fr) minmax(0, 30fr) minmax(0, 30fr) 104px; }
  .aa-row__body { padding-right: 20px; }
}
@media (max-width: 900px) {
  .aa-hero__row, .aa-celva__grid, .aa-track__head, .aa-immune__text, .aa-phr__grid, .aa-signal { grid-template-columns: minmax(0, 1fr); }
  .aa-phr__head { position: static; display: grid; grid-template-columns: minmax(0, 1fr) 88px; gap: 0 20px; align-items: center; }
  .aa-lens { width: 88px; margin: 0; }
  .aa-celva__head { display: grid; grid-template-columns: minmax(0, 1fr) 132px; gap: 0 16px; align-items: end; }
  .aa-celva__head h2, .aa-celva__big { grid-column: 1; }
  .aa-shelf { grid-column: 2; grid-row: 1 / span 2; width: 132px; margin: 0; }
  .aa-reg__head { grid-template-columns: minmax(0, 1fr); }
  .aa-cmp__head { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .aa-scale { width: 132px; margin-bottom: 28px; }
  .aa-cmp__lede { margin-bottom: 20px !important; }
  .aa-stamp { width: 96px; }
  .aa-ledgers, .aa-fits, .aa-outcome { grid-template-columns: minmax(0, 1fr); }
  .aa-js [data-r="left"]:not(.is-in), .aa-js [data-r="right"]:not(.is-in) { transform: translateY(18px); }
  .aa-page .aa-next__list a { grid-template-columns: 48px minmax(0, 1fr) 28px; gap: 4px 16px; }
  .aa-next__ico { width: 48px; height: 48px; grid-row: 1 / span 2; }
  .aa-next__d { grid-column: 2; grid-row: 2; }
  .aa-next__go { grid-column: 3; grid-row: 1 / span 2; }
}
@media (max-width: 760px) {
  /* the route turns to run down the page: a stop, then the line to the next */
  .aa-steps { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .aa-steps li { display: grid; grid-template-columns: 60px minmax(0, 1fr); column-gap: 18px; align-content: start; }
  .aa-ico { width: 60px; height: 60px; padding: 9px; grid-row: 1 / span 3; }
  .aa-steps__when { margin-top: 0; }
  .aa-steps li:not(:last-child)::after { top: 66px; bottom: -20px; left: 29px; right: auto; width: 2px; height: auto; background: linear-gradient(var(--aa-c), var(--aa-c)) no-repeat top / 100% calc(var(--f) * 100%), var(--border); }
  .aa-track__back { display: none; }
  .aa-track__sum { flex-direction: column; }
  .aa-cells { grid-template-columns: minmax(0, 1fr); row-gap: 44px; }

  /* each property: its name, then the two answers side by side, each under its own name */
  .aa-rows__head { display: none; }
  .aa-row summary { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 12px; padding-block: 20px 12px; }
  .aa-row__k { grid-column: 1 / -1; padding: 0; }
  .aa-row__v { padding: 0 12px 0 0; font-size: 1.22rem; }
  .aa-row__v--donor { padding: 0 0 0 14px; }
  .aa-who { position: static; display: block; width: auto; height: auto; clip-path: none; margin-bottom: 2px; font-family: var(--font-body); font-size: 13.5px; font-weight: 600; }
  .aa-row__more { grid-column: 1 / -1; justify-self: start; min-height: 44px; }
  .aa-row__body { margin: 0; padding: 0 0 22px; }
  .aa-dots { gap: 4px; }
  .aa-dots i { width: 7px; height: 7px; }

  .aa-ledger li { grid-template-columns: minmax(0, 1fr) auto; }
  .aa-ledger__j { grid-column: 1 / -1; }
  .aa-ph summary { grid-template-columns: minmax(0, 1fr) 20px; }
  .aa-ph__tag { grid-column: 1; grid-row: 2; white-space: normal; }
  .aa-ph summary::after { grid-column: 2; grid-row: 1 / span 2; }
  .aa-ph__body { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  html:has(body.aa-page) { --hc-bar-h: 48px; }
  .aa-page .hc-bar__track { gap: 22px; }
  .aa-root--own { grid-template-columns: 116px minmax(0, 1fr); }
  .aa-fit { grid-template-columns: 52px minmax(0, 1fr); column-gap: 16px; }
  .aa-fit__ico { width: 52px; height: 52px; }
  .aa-legend { gap: 2px 18px; }
}

/* ============ STILL ============
   Reduced motion: every drawing holds its finished state and nothing moves. */
@media (prefers-reduced-motion: reduce) {
  .aa-page main *, .aa-page main *::before, .aa-page main *::after { animation: none !important; transition: none !important; }
  .aa-js [data-r]:not(.is-in), .aa-js .aa-rows:not(.is-in) .aa-row, .aa-js .aa-phr__list:not(.is-in) .aa-ph { opacity: 1 !important; transform: none !important; }
  .aa-js .aa-scene .aa-draw, .aa-js .aa-ico--list .aa-ico__tick { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
  .aa-js .aa-steps li > :not(.aa-ico), .aa-js .aa-steps li .aa-ico__cell, .aa-js .aa-rows .aa-dots i, .aa-js .aa-cells .aa-mk > g,
  .aa-js .aa-celva__head :is(.aa-shelf__vial, .aa-shelf__tube), .aa-js .aa-reg .aa-stamp__seal { opacity: 1 !important; }
  .aa-js .aa-steps li .aa-ico { border-color: var(--aa-c) !important; transform: none !important; }
  .aa-page .hc-bar { transition: none !important; }
}
@media print {
  .aa-page .hc-bar { display: none !important; }
  /* a printout is one still frame: nothing may be caught part way through moving */
  .aa-page main *, .aa-page main *::before, .aa-page main *::after { animation: none !important; transition: none !important; }
  .aa-js [data-r], .aa-js .aa-rows .aa-row, .aa-js .aa-phr__list .aa-ph, .aa-js .aa-steps li > *, .aa-js .aa-mk > g, .aa-js .aa-dots i,
  .aa-js .aa-shelf__vial, .aa-js .aa-shelf__tube, .aa-js .aa-stamp__seal, .aa-js .aa-ico__cell { opacity: 1 !important; transform: none !important; animation: none !important; }
  .aa-ico__tick, .aa-draw { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
  .aa-immune { background: #fff; color: var(--ink); }
  .aa-immune * { color: var(--ink) !important; }
  .aa-row__more, .aa-ph summary::after, .aa-more summary, .aa-copy { display: none; }
  .aa-cellfig__body, .aa-mk line { stroke: var(--ink); }
  .aa-mk :is(polygon, rect, circle), .aa-sw { fill: var(--ink); }
  .aa-mk--none :is(polygon, rect, circle), .aa-sw--none { fill: none; stroke: var(--ink); }
}

/* Parts waiting to slide in sit a little to one side; without this a phone
   could be scrolled sideways until they arrive. clip keeps sticky working. */
main { overflow-x: clip; }