/* /learn-cells-cord-vs-bone-vs-fat: its own sheet, loaded after site.css.
   Three tissues, three colours, used the same way everywhere on the page:
   blue is the umbilical cord, red is bone marrow, yellow is fat. The hero
   draws the three, the table sets them side by side, and each part below
   takes one of them in turn. Script: scripts/learn-cells-cord-vs-bone-vs-fat.js.
   With that script absent every part is visible and every link still jumps. */

html:has(body.cbf-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);
}
.cbf-page {
  --cbf-cord: var(--accent-blue);
  --cbf-cord-ink: var(--accent-blue-hover);
  --cbf-marrow: #b4534f;       /* marrow: dots */
  --cbf-marrow-line: #c87272;  /* the same, as a stroke on white */
  --cbf-marrow-ink: #8a3a3a;   /* the same, as text on white */
  --cbf-marrow-tint: #f7e1e1;
  --cbf-fat: #c9a13a;          /* fat: strokes and dots */
  --cbf-fat-ink: #7a5a12;      /* the same, as text on white */
  --cbf-fat-tint: #fbf0cf;     /* inside a drawn fat cell only */
  --cbf-ease: cubic-bezier(.16, 1, .3, 1);
  --cbf-gut: clamp(20px, 4vw, 56px);
}

/* ============ GROUND RULES ============ */
.cbf-wrap { max-width: calc(1240px + 2 * var(--cbf-gut)); margin-inline: auto; padding-inline: var(--cbf-gut); }
.cbf-defs { position: absolute; }
/* text fills its column; the column sets the measure */
.cbf-page main p { max-width: none; margin: 0; }
.cbf-page main a:not(.btn) { border-bottom: 0; }
.cbf-page main :is(ul, ol, dl, dd, figure) { margin: 0; padding: 0; }
.cbf-page 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;
}
.cbf-page main h3 {
  font-family: var(--font-display); font-weight: 400; color: var(--ink);
  font-size: clamp(1.4rem, 2vw, 1.75rem); line-height: 1.2; letter-spacing: 0;
  margin: 0 0 12px; max-width: none; text-wrap: wrap;
}
.cbf-page main :is(a, summary):focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 3px; border-radius: 4px; }
.cbf-page .cbf-rules a:focus-visible { outline-color: var(--accent-ice); }
/* a part that receives focus after a jump is not itself a control */
.cbf-page main :is(h1, h2, h3, section)[tabindex="-1"]:focus { outline: none; }

.cbf-cord p, .cbf-marrow p, .cbf-fat p, .cbf-celva p { font-size: 17.5px; line-height: 1.7; color: var(--ink-soft); }
.cbf-page main p + p { margin-top: 16px; }
.cbf-page main p strong { font-weight: 600; color: var(--ink); }

/* a term the glossary defines */
.cbf-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; }
.cbf-term:hover { color: var(--accent-blue-hover); text-decoration-style: solid; }
.cbf-rules .cbf-term { text-decoration-color: var(--accent-ice); }
.cbf-rules .cbf-term:hover { color: #fff; }
/* a link inside a sentence */
.cbf-inline { color: var(--accent-blue-hover); font-weight: 500; text-decoration: underline; text-decoration-color: rgba(45, 110, 177, .4); text-underline-offset: 4px; transition: color 200ms, text-decoration-color 200ms; }
.cbf-inline:hover { color: var(--accent-blue); text-decoration-color: currentColor; }

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

/* the drawings share one pen */
.cbf-ink { fill: #fff; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
path.cbf-ink { fill: none; }
.cbf-trio__bone path.cbf-draw { fill: #fff; }
.cbf-tube { fill: none; }
.cbf-tube--out { stroke: var(--ink); stroke-width: 17; }
.cbf-tube--in { stroke: #fff; stroke-width: 13.6; }
.cbf-tube--rib { stroke: var(--cbf-cord); stroke-width: 13.6; stroke-dasharray: 1.6 9; }
.cbf-cell { transform-box: fill-box; transform-origin: center; }
.cbf-cell--cord { fill: var(--cbf-cord); }
.cbf-cell--marrow { fill: var(--cbf-marrow); }
.cbf-cell--fat { fill: var(--cbf-fat-ink); }
.cbf-trio__marrow { fill: var(--cbf-marrow-tint); stroke: var(--cbf-marrow-line); stroke-width: 1.3; }
.cbf-lobe { fill: var(--cbf-fat-tint); stroke: var(--cbf-fat); stroke-width: 1.7; transform-box: fill-box; transform-origin: center; }

/* a jump says where it put you: a rule draws under the heading it landed on, once, then goes */
.cbf-page main h2 { position: relative; }
@keyframes cbf-landed { 0% { transform: scaleX(0); opacity: 1; } 45% { transform: scaleX(1); opacity: 1; } 80% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
.cbf-page main h2.is-landed::after { content: ""; position: absolute; left: 0; bottom: -12px; width: 72px; height: 2px; background: var(--accent-blue); transform-origin: left; animation: cbf-landed 2200ms var(--cbf-ease) both; }
.cbf-page .cbf-rules h2.is-landed::after { left: calc(50% - 36px); background: var(--accent-ice); }

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

/* ============ HERO ============ */
.cbf-hero { padding-block: clamp(36px, 5vw, 76px) clamp(48px, 6vw, 88px); }
.cbf-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, 52px); max-width: none; text-wrap: wrap; }
/* a heading that has to wrap breaks where the styling changes */
.cbf-hero__h1 > .h-lead, .cbf-hero__h1 > em { display: inline-block; }
.cbf-hero__h1 > em { color: var(--accent-blue); }
.cbf-hero__row { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.cbf-hero__answer { font-size: clamp(1.12rem, 1.5vw, 1.3rem); line-height: 1.6; color: var(--ink); }
.cbf-hero__celva { font-size: 17px; line-height: 1.65; color: var(--ink-soft); margin: 18px 0 14px !important; padding-left: 18px; border-left: 3px solid var(--cbf-cord); }
.cbf-trio { display: block; width: 100%; height: auto; overflow: visible; }
.cbf-hero__key { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
.cbf-key { display: block; font-size: 15px; line-height: 1.45; color: var(--ink-muted); padding-right: 8px; }
.cbf-key b { display: block; font-weight: 600; }
.cbf-key--cord b { color: var(--cbf-cord-ink); }
.cbf-key--marrow b { color: var(--cbf-marrow-ink); }
.cbf-key--fat b { color: var(--cbf-fat-ink); }
/* the marrow and fat drawings start 150 and 300 units along a 420-unit strip */
.cbf-key--marrow { padding-left: 7.2%; }
.cbf-key--fat { padding-left: 14.4%; }

/* first paint: the cord is drawn, then the bone and its needle, then the fat cells swell */
@keyframes cbf-up { from { opacity: 0; transform: translateY(22px); } }
@keyframes cbf-draw { from { stroke-dashoffset: 1; opacity: 0; } 12% { opacity: 1; } to { stroke-dashoffset: 0; opacity: 1; } }
@keyframes cbf-pop { from { transform: scale(0); opacity: 0; } 70% { transform: scale(1.3); opacity: 1; } }
@keyframes cbf-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes cbf-fade { from { opacity: 0; } }
@keyframes cbf-swell { from { transform: scale(.3); opacity: 0; } 65% { transform: scale(1.06); opacity: 1; } }
@keyframes cbf-needle { from { transform: translate(9px, -24px); opacity: 0; } }
.cbf-js .cbf-hero__h1 > * { animation: cbf-up 900ms var(--cbf-ease) both; }
.cbf-js .cbf-hero__h1 > em { animation-delay: 110ms; }
.cbf-js .cbf-hero__text > * { animation: cbf-up 900ms var(--cbf-ease) 240ms both; }
.cbf-js .cbf-hero__text > :nth-child(2) { animation-delay: 340ms; }
.cbf-js .cbf-hero__text > :nth-child(3) { animation-delay: 440ms; }
.cbf-js .cbf-trio :is(.cbf-tube--out, .cbf-tube--in, .cbf-draw) { stroke-dasharray: 1; animation: cbf-draw 900ms var(--cbf-ease) 300ms both; }
.cbf-js .cbf-trio .cbf-tube--rib { animation: cbf-fade 500ms ease 1000ms both; }
.cbf-js .cbf-trio :is(.cbf-trio__clamp, .cbf-trio__cut) { animation: cbf-fade 400ms ease 1000ms both; }
.cbf-js .cbf-trio__cord .cbf-cell { animation: cbf-pop 420ms var(--cbf-ease) calc(1200ms + var(--i) * 110ms) both; }
.cbf-js .cbf-trio__bone .cbf-draw { animation-delay: 1300ms; }
.cbf-js .cbf-trio__marrow { animation: cbf-fade 500ms ease 2000ms both; }
.cbf-js .cbf-trio__bone .cbf-cell { animation: cbf-pop 420ms var(--cbf-ease) calc(2300ms + var(--i) * 110ms) both; }
.cbf-js .cbf-trio__needle { animation: cbf-needle 700ms var(--cbf-ease) 2100ms both; }
.cbf-js .cbf-trio__fat .cbf-lobe { animation: cbf-swell 620ms var(--cbf-ease) calc(2500ms + var(--i) * 100ms) both; }
.cbf-js .cbf-trio__fat .cbf-cell { animation: cbf-pop 420ms var(--cbf-ease) calc(3200ms + var(--i) * 110ms) both; }
.cbf-js .cbf-hero__key > * { animation: cbf-rise 700ms var(--cbf-ease) 1100ms both; }
.cbf-js .cbf-hero__key > :nth-child(2) { animation-delay: 2100ms; }
.cbf-js .cbf-hero__key > :nth-child(3) { animation-delay: 3000ms; }

/* ============ CONTENTS BAR (follows the reader) ============ */
.cbf-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(--cbf-ease), visibility 0s 360ms;
}
.cbf-page .hc-bar.is-on { transform: none; opacity: 1; visibility: visible; transition: opacity 260ms, transform 360ms var(--cbf-ease); }
body.cbf-page.nav-open .hc-bar { opacity: 0; visibility: hidden; }
.cbf-page .hc-bar__track {
  max-width: calc(1240px + 2 * var(--cbf-gut)); margin: 0 auto; padding: 0 var(--cbf-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;
}
.cbf-page .hc-bar__track::-webkit-scrollbar { display: none; }
.cbf-page .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;
}
.cbf-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(--cbf-ease);
}
.cbf-page .hc-bar__track a:hover, .cbf-page .hc-bar__track a[aria-current] { color: var(--ink); }
.cbf-page .hc-bar__track a:hover::after { transform: scaleX(.35); }
.cbf-page .hc-bar__track a[aria-current]::after { transform: scaleX(1); }
.cbf-page .hc-bar__track a:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: -4px; border-radius: 4px; }
.cbf-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));
}

/* ============ SIDE BY SIDE ============ */
.cbf-cmp { padding-block: clamp(48px, 6vw, 96px); border-top: 1px solid var(--border); }
.cbf-lede { font-size: 18px; line-height: 1.7; color: var(--ink-soft); margin: clamp(16px, 2vw, 24px) 0 clamp(28px, 4vw, 48px) !important; }
.cbf-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cbf-table thead td { width: 16%; }
.cbf-table thead th { padding: 0 20px 16px; text-align: left; vertical-align: bottom; border-bottom: 3px solid; }
.cbf-table thead svg { display: block; width: 84px; height: 70px; margin-bottom: 10px; overflow: visible; }
.cbf-table thead a > span { display: block; font-family: var(--font-display); font-size: 1.7rem; font-weight: 400; line-height: 1.1; color: var(--ink); }
.cbf-table thead small { font-family: var(--font-body); font-size: 15px; font-weight: 400; color: var(--ink-muted); }
/* each name is the way down to its own part of the page */
.cbf-page .cbf-table thead a { display: block; color: inherit; }
.cbf-table thead a > span { transition: color 200ms; }
.cbf-table thead a > span::after { content: "\2193"; display: inline-block; margin-left: 8px; font-family: var(--font-body); font-size: .62em; color: var(--accent-blue-hover); opacity: .55; transition: transform 360ms var(--cbf-ease), opacity 200ms; }
.cbf-table thead a svg { transition: transform 420ms var(--cbf-ease); }
.cbf-table thead a:hover > span, .cbf-table thead a:focus-visible > span { color: var(--accent-blue-hover); }
.cbf-table thead a:hover > span::after, .cbf-table thead a:focus-visible > span::after { transform: translateY(4px); opacity: 1; }
.cbf-table thead a:hover svg { transform: translateY(-3px); }
.cbf-nb { white-space: nowrap; }
.cbf-table__cord { border-bottom-color: var(--cbf-cord) !important; }
.cbf-table__marrow { border-bottom-color: var(--cbf-marrow-line) !important; }
.cbf-table__fat { border-bottom-color: var(--cbf-fat) !important; }
.cbf-table tbody th { padding: 20px 16px 20px 0; text-align: left; vertical-align: top; font-size: 15px; font-weight: 500; line-height: 1.5; color: var(--ink-muted); border-bottom: 1px solid var(--border); }
.cbf-table tbody td { padding: 16px 20px; vertical-align: top; font-size: 15.5px; line-height: 1.5; color: var(--ink-soft); border-bottom: 1px solid var(--border); }
.cbf-table tbody td + td { border-left: 1px solid var(--border); }
.cbf-table tbody tr:last-child :is(th, td) { border-bottom: 0; }
.cbf-table tbody strong { display: block; font-family: var(--font-display); font-size: 1.4rem; font-weight: 400; line-height: 1.2; margin-bottom: 2px; }
.cbf-table tbody td:nth-of-type(1) strong { color: var(--cbf-cord-ink); }
.cbf-table tbody td:nth-of-type(2) strong { color: var(--cbf-marrow-ink); }
.cbf-table tbody td:nth-of-type(3) strong { color: var(--cbf-fat-ink); }
.cbf-table tbody td > span { display: block; }
/* the one row a picture says faster */
.cbf-dots { display: flex !important; flex-wrap: wrap; gap: 5px; max-width: 150px; margin-top: 12px; }
.cbf-dots i { width: 8px; height: 8px; border-radius: 50%; }
.cbf-dots--cord i { background: var(--cbf-cord); }
.cbf-dots--marrow i { background: var(--cbf-marrow); }
.cbf-dots--fat i { background: var(--cbf-fat); }
@keyframes cbf-grow { from { transform: scale(0); opacity: 0; } 60% { transform: scale(1.4); opacity: 1; } }
.cbf-js .cbf-table tbody tr { transition: opacity 520ms ease, transform 720ms var(--cbf-ease); transition-delay: calc(var(--i) * 70ms); }
.cbf-js .cbf-table:not(.is-in) tbody tr { opacity: 0; transform: translateY(14px); }
.cbf-js .cbf-table:not(.is-in) .cbf-dots i { opacity: 0; }
.cbf-js .cbf-table.is-in .cbf-dots i { animation: cbf-grow 420ms var(--cbf-ease) calc(520ms + var(--n, 0) * 34ms) both; }
.cbf-cmp__note { margin-top: 18px !important; font-size: 15px; line-height: 1.6; color: var(--ink-muted); }
.cbf-cmp__aside { margin-top: clamp(24px, 3vw, 36px) !important; padding-left: 18px; border-left: 3px solid var(--cbf-marrow-line); font-size: 17px; line-height: 1.65; color: var(--ink-soft); }
.cbf-cmp__close { margin-top: clamp(24px, 3vw, 36px) !important; padding-top: clamp(24px, 3vw, 36px); border-top: 1px solid var(--border-strong); font-family: var(--font-display); font-size: clamp(1.35rem, 2.1vw, 1.8rem); font-weight: 400; line-height: 1.35; color: var(--ink); }

/* ============ UMBILICAL CORD ============ */
.cbf-cord { padding-block: clamp(48px, 6vw, 96px); border-top: 1px solid var(--border); }
.cbf-cord h2 { margin-bottom: clamp(28px, 4vw, 52px) !important; }
.cbf-cord__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.cbf-flow__svg { display: block; width: 100%; height: auto; overflow: visible; }
.cbf-flow figcaption, .cbf-svf figcaption { margin-top: 14px; font-size: 15px; line-height: 1.5; color: var(--ink-muted); text-align: center; }
.cbf-flow__arrow { fill: none; stroke: var(--ink-muted); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cbf-flow__rule { fill: none; stroke: var(--border-strong); stroke-width: 1.5; stroke-linecap: round; }
.cbf-flow__tick { fill: none; stroke: var(--cbf-cord); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cbf-flow__cells circle { fill: var(--cbf-cord); transform-box: fill-box; transform-origin: center; transition: transform 380ms var(--cbf-ease), opacity 260ms; }
.cbf-flow__frost { fill: none; stroke: var(--accent-ice); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transform-box: fill-box; transform-origin: center; }
/* once it is on screen: the checklist ticks, the vials frost over; the script doubles the culture */
@keyframes cbf-frost { from { transform: rotate(-60deg) scale(.4); opacity: 0; } }
.cbf-js .cbf-flow:not(.is-in) .cbf-flow__tick { opacity: 0; }
.cbf-js .cbf-flow.is-in .cbf-flow__tick { stroke-dasharray: 1; animation: cbf-draw 420ms var(--cbf-ease) calc(500ms + var(--i) * 220ms) both; }
.cbf-js .cbf-flow:not(.is-in) .cbf-flow__frost { opacity: 0; }
.cbf-js .cbf-flow.is-in .cbf-flow__frost { animation: cbf-frost 900ms var(--cbf-ease) 1400ms both; }
.cbf-flow.is-counting .cbf-flow__cells circle:not(.is-on) { opacity: 0; transform: scale(0); }

.cbf-cord__why { margin-top: clamp(36px, 5vw, 64px); padding-top: clamp(32px, 4vw, 52px); border-top: 1px solid var(--border); }
.cbf-cord__cols { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px clamp(32px, 5vw, 80px); align-items: start; }
.cbf-cord__cols p + p { margin-top: 0; color: var(--ink); }
.cbf-screen { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px 24px; margin: 12px 0 14px !important; }
.cbf-screen li { position: relative; padding: 7px 0 7px 30px; font-size: 17px; line-height: 1.45; color: var(--ink); }
.cbf-screen li::before { content: ""; position: absolute; left: 3px; top: 11px; width: 13px; height: 7px; border-left: 2px solid var(--cbf-cord); border-bottom: 2px solid var(--cbf-cord); transform: rotate(-45deg); transform-origin: center; }
@keyframes cbf-check { from { opacity: 0; transform: rotate(-45deg) scale(.2); } }
.cbf-js .cbf-more[open] .cbf-screen li::before { animation: cbf-check 380ms var(--cbf-ease) calc(300ms + var(--i) * 90ms) both; }

/* ============ BONE MARROW ============ */
.cbf-marrow { padding-block: clamp(48px, 6vw, 96px); border-top: 1px solid var(--border); }
.cbf-marrow h2 { margin-bottom: clamp(24px, 3vw, 40px) !important; }
.cbf-marrow__lead { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: clamp(24px, 4vw, 72px); align-items: center; }
.cbf-asp { display: block; width: 100%; max-width: 260px; height: auto; overflow: visible; justify-self: center; }
.cbf-asp .cbf-asp__bone { fill: #fff; }
/* the needle goes in, and three cells come up the barrel */
@keyframes cbf-plunge { from { transform: translateY(-46px); opacity: 0; } }
.cbf-js .cbf-asp:not(.is-in) .cbf-asp__syr { opacity: 0; }
.cbf-js .cbf-asp.is-in .cbf-asp__syr { animation: cbf-plunge 900ms var(--cbf-ease) 200ms both; }
.cbf-js .cbf-asp.is-in .cbf-asp__syr .cbf-cell { animation: cbf-pop 420ms var(--cbf-ease) calc(1100ms + var(--i) * 260ms) both; }
.cbf-marrow__text p + p { margin-top: 16px; color: var(--ink); }
.cbf-marrow__yield { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 8px clamp(24px, 4vw, 72px); margin-top: clamp(36px, 5vw, 64px); padding-top: clamp(28px, 4vw, 44px); border-top: 1px solid var(--border); }
.cbf-marrow__age { margin-top: clamp(36px, 5vw, 64px); padding-top: clamp(28px, 4vw, 44px); border-top: 1px solid var(--border); }
.cbf-agefig { position: relative; margin-top: clamp(28px, 4vw, 48px) !important; }
.cbf-agefig figcaption { font-size: 15px; color: var(--ink-muted); margin-bottom: 26px; }
.cbf-agefig figcaption b { display: block; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.35rem, 2vw, 1.7rem); line-height: 1.2; color: var(--ink); margin-bottom: 4px; }
/* a life line: the gaps are to scale (40, 20 and 15 years), one connector per gap */
.cbf-age { list-style: none; position: relative; display: grid; grid-template-columns: 40fr 20fr 15fr 190px; }
.cbf-age li { position: relative; padding: 30px 16px 0 0; }
.cbf-age li::before { content: ""; position: absolute; left: 0; top: 0; width: 16px; height: 16px; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--cbf-marrow-line); background: var(--cbf-marrow-line); z-index: 1; transition: background-color 320ms, border-color 320ms, transform 420ms var(--cbf-ease); }
.cbf-age li.cbf-age__cord::before { border-color: var(--cbf-cord); background: var(--cbf-cord); }
.cbf-age li:not(:last-of-type)::after { content: ""; position: absolute; left: 8px; right: -8px; top: 7px; height: 2px; background: linear-gradient(90deg, var(--cbf-cord), var(--cbf-marrow-line)) no-repeat left / 100% 100%, var(--border); transition: background-size 520ms var(--cbf-ease); }
.cbf-age li:nth-child(n+2):not(:last-child)::after { background-image: linear-gradient(var(--cbf-marrow-line), var(--cbf-marrow-line)); }
.cbf-age b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 1.6rem; line-height: 1.1; color: var(--cbf-marrow-ink); }
.cbf-age .cbf-age__cord b { color: var(--cbf-cord-ink); }
.cbf-age span { display: block; margin-top: 4px; font-size: 15px; line-height: 1.45; color: var(--ink-soft); }
/* with the script: a stop fills as the cell reaches it, and the cell fades as it ages */
.cbf-age.is-led li:not(.is-passed)::before { background: #fff; border-color: var(--border-strong); }
.cbf-age.is-led li:not(.is-passed):not(:last-child)::after { background-size: 0 100%, auto; }
.cbf-age.is-led li.is-passed::before { transform: scale(1.12); }
.cbf-age__cell { position: absolute; left: 0; top: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--cbf-cord); z-index: 2; pointer-events: none; will-change: transform; }
.cbf-age__cell::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 5px rgba(45, 110, 177, .22); }
.cbf-age__cell.is-live::after { animation: cbf-pulse 2.4s ease-out infinite; }
@keyframes cbf-pulse { 50% { box-shadow: 0 0 0 11px rgba(45, 110, 177, 0); } }
.cbf-marrow__verdict { margin-top: clamp(28px, 4vw, 44px) !important; font-family: var(--font-display); font-size: clamp(1.35rem, 2.1vw, 1.8rem) !important; font-weight: 400; line-height: 1.35 !important; color: var(--ink) !important; }

/* native "Read more": opened for print, found by in-page search */
.cbf-more { margin-top: clamp(20px, 3vw, 32px); }
.cbf-more 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); transition: color 200ms; }
.cbf-more summary::-webkit-details-marker { display: none; }
.cbf-more summary::after { content: ""; flex: none; width: 9px; height: 9px; margin-top: -4px; border-right: 2px solid; border-bottom: 2px solid; transform: rotate(45deg); transition: transform 360ms var(--cbf-ease); }
.cbf-more summary:hover { color: var(--accent-blue); }
.cbf-more summary:hover::after { transform: translateY(3px) rotate(45deg); }
.cbf-more[open] summary::after { margin-top: 4px; transform: rotate(-135deg); }
.cbf-more[open] summary:hover::after { transform: translateY(-3px) rotate(-135deg); }
.cbf-more__shut, .cbf-more[open] .cbf-more__open { display: none; }
.cbf-more[open] .cbf-more__shut { display: inline; }
.cbf-more__body { padding: 16px 0 4px 20px; border-left: 3px solid var(--border-strong); margin-top: 8px; }
@keyframes cbf-unfold { from { opacity: 0; transform: translateY(-8px); } }
.cbf-more[open] .cbf-more__body { animation: cbf-unfold 420ms var(--cbf-ease); }

/* ============ FAT ============ */
.cbf-fat { padding-block: clamp(48px, 6vw, 96px); border-top: 1px solid var(--border); }
.cbf-fat__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 56px) clamp(32px, 5vw, 88px); align-items: center; }
.cbf-fat h2 { margin-bottom: clamp(20px, 3vw, 32px) !important; }
.cbf-page .cbf-fat__text h3 { margin-top: 32px; }
.cbf-svf__svg { display: block; width: 100%; max-width: 380px; height: auto; margin-inline: auto; overflow: visible; }
.cbf-svf__level { fill: none; stroke: var(--cbf-fat); stroke-width: 1.5; stroke-dasharray: 3 5; stroke-linecap: round; }
.cbf-svf__other { fill: #fff; stroke: var(--ink-muted); stroke-width: 1.5; }
.cbf-svf__msc { fill: var(--cbf-fat); stroke: var(--cbf-fat-ink); stroke-width: 1.2; }
.cbf-svf__mix circle { transform-box: fill-box; transform-origin: center; }
@keyframes cbf-bob { 50% { transform: translateY(-3px); } }
.cbf-svf.is-live .cbf-svf__mix circle { animation: cbf-bob 2.2s ease-in-out infinite; }
.cbf-svf.is-live .cbf-svf__mix circle:nth-child(odd) { animation-delay: -900ms; }
.cbf-svf.is-live .cbf-svf__mix circle:nth-child(3n) { animation-delay: -1500ms; }
.cbf-fat__fda { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 8px clamp(24px, 4vw, 72px); padding-top: clamp(28px, 4vw, 44px); border-top: 1px solid var(--border); }
.cbf-fat__fda .cbf-go { grid-column: 2; justify-self: start; }

/* ============ U.S. RULES (the navy band) ============ */
.cbf-rules { background: var(--ink); color: #fff; padding-block: clamp(56px, 7vw, 104px); }
.cbf-page .cbf-rules h2 { color: #fff; text-align: center; margin-bottom: clamp(32px, 5vw, 60px); }
.cbf-ledger { display: grid; grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); }
.cbf-ledger__rule { background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .34) 12%, rgba(255, 255, 255, .34) 88%, transparent); }
.cbf-ledger__glyph { display: block; width: 60px; height: 60px; margin-bottom: 18px; overflow: visible; }
.cbf-ledger__glyph :is(path, circle) { fill: none; stroke: var(--accent-ice); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cbf-ledger__glyph .cbf-ledger__bub { fill: var(--accent-ice); stroke: none; }
.cbf-ledger__hand { transform-origin: 32px 32px; }
@keyframes cbf-hand { from { transform: rotate(-360deg); } }
.cbf-js .cbf-ledger__side.is-in .cbf-ledger__hand { animation: cbf-hand 1600ms var(--cbf-ease) 300ms both; }
@keyframes cbf-bubble { from { transform: translateY(8px); opacity: 0; } }
.cbf-js .cbf-ledger__side.is-in .cbf-ledger__bub { animation: cbf-bubble 700ms var(--cbf-ease) 500ms both; }
.cbf-js .cbf-ledger__side.is-in .cbf-ledger__bub + .cbf-ledger__bub { animation-delay: 700ms; }
.cbf-page .cbf-ledger h3 { color: #fff; font-size: clamp(1.7rem, 2.6vw, 2.4rem); font-weight: 300; margin-bottom: 20px; }
.cbf-ledger h3 span { display: block; margin-top: 8px; font-family: var(--font-body); font-size: 16px; font-weight: 400; line-height: 1.5; color: #c9def2; }
.cbf-ledger dl > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-top: 1px solid rgba(255, 255, 255, .16); }
.cbf-ledger dt { font-size: 15px; color: rgba(255, 255, 255, .7); }
.cbf-ledger dd { font-size: 17px; line-height: 1.45; color: #fff; }
.cbf-js .cbf-ledger__side dl > div { transition: opacity 520ms ease, transform 720ms var(--cbf-ease); transition-delay: calc(240ms + var(--i) * 80ms); }
.cbf-js .cbf-ledger__side:not(.is-in) dl > div { opacity: 0; transform: translateY(10px); }
.cbf-rules__foot { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px clamp(32px, 6vw, 96px); margin-top: clamp(36px, 5vw, 60px); padding-top: clamp(28px, 4vw, 44px); border-top: 1px solid rgba(255, 255, 255, .16); }
.cbf-rules__foot p { font-size: 17px; line-height: 1.65; color: rgba(255, 255, 255, .84); margin: 0 !important; }
.cbf-rules__foot p:first-child { font-size: clamp(1.08rem, 1.4vw, 1.22rem); color: #fff; }
.cbf-page .cbf-rules__foot strong { color: #fff; }

/* ============ WHAT CELVA USES ============ */
.cbf-celva { padding-block: clamp(56px, 7vw, 104px); }
.cbf-celva h2 { margin-bottom: clamp(28px, 4vw, 48px) !important; }
.cbf-celva__lead { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.cbf-photo { position: relative; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: var(--shape-slate); }
.cbf-photo img[width][height] { display: block; width: 100%; height: 100%; object-fit: cover; }
/* the photo settles into its frame; it starts larger, so no edge is ever exposed */
.cbf-js .cbf-photo img { transition: transform 1600ms var(--cbf-ease), opacity 700ms ease; }
.cbf-js .cbf-photo:not(.is-in) img { transform: scale(1.1); opacity: 0; }
.cbf-types { list-style: none; margin-top: clamp(36px, 5vw, 64px) !important; }
.cbf-types li { position: relative; display: grid; grid-template-columns: 88px minmax(0, 1fr); column-gap: clamp(20px, 3vw, 44px); padding-bottom: clamp(28px, 4vw, 44px); }
.cbf-types li:last-child { padding-bottom: 0; }
.cbf-types__badge { position: relative; z-index: 1; display: grid; place-items: center; width: 88px; height: 88px; border-radius: 50%; background: #fff; border: 1.5px solid var(--border-strong); transition: border-color 420ms, box-shadow 620ms var(--cbf-ease); }
.cbf-types__badge svg { display: block; width: 60px; height: 50px; overflow: visible; }
/* one connector per gap, badge to badge; nothing runs on past the last */
.cbf-types li:not(:last-child)::after { content: ""; position: absolute; left: 43px; top: 88px; bottom: 0; width: 2px; background: linear-gradient(var(--accent-blue), var(--accent-blue)) no-repeat top / 100% 0, var(--border); transition: background-size 720ms var(--cbf-ease); }
.cbf-types li.is-passed .cbf-types__badge { border-color: var(--accent-blue); box-shadow: 0 0 0 6px var(--accent-wash); }
.cbf-types li.is-passed:not(:last-child)::after { background-size: 100% 100%, auto; }
.cbf-types h3 { align-self: center; margin: 0 !important; }
.cbf-types__body { grid-column: 2; }
.cbf-page .cbf-types__for { font-size: 18px; line-height: 1.55; color: var(--ink); font-weight: 500; margin-top: 4px; }
.cbf-types .cbf-more { margin-top: 2px; }
@media (min-width: 1101px) {
  .cbf-types li { grid-template-columns: 88px minmax(0, 4fr) minmax(0, 7fr); align-items: start; }
  .cbf-types h3 { align-self: start; margin: 28px 0 0 !important; }
  .cbf-types__body { grid-column: 3; margin-top: 26px; }
}
.cbf-call { margin-top: clamp(36px, 5vw, 64px); padding-top: clamp(28px, 4vw, 44px); border-top: 1px solid var(--border); }
.cbf-call > p { font-family: var(--font-display); font-size: clamp(1.35rem, 2.1vw, 1.8rem) !important; font-weight: 400; line-height: 1.35 !important; color: var(--ink) !important; }

/* ============ WHAT TO ASK (the one tinted band) ============ */
.cbf-ask { background: var(--accent-wash); padding-block: clamp(56px, 7vw, 96px); }
.cbf-ask__top { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 32px); margin-bottom: clamp(28px, 4vw, 48px); }
.cbf-ask__top h2 { flex: 1; min-width: 0; }
.cbf-ask__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.cbf-ask__bubble { flex: none; display: block; width: 84px; height: 77px; overflow: visible; }
.cbf-ask__shape { fill: #fff; stroke: var(--ink); stroke-width: 1.8; stroke-linejoin: round; }
.cbf-ask__mark { fill: none; stroke: var(--accent-blue); stroke-width: 3; stroke-linecap: round; }
.cbf-ask__dot { fill: var(--accent-blue); transform-box: fill-box; transform-origin: center; }
.cbf-js .cbf-ask__bubble:not(.is-in) :is(.cbf-ask__mark, .cbf-ask__dot) { opacity: 0; }
.cbf-js .cbf-ask__bubble.is-in .cbf-ask__shape { stroke-dasharray: 1; animation: cbf-draw 900ms var(--cbf-ease) both; }
.cbf-js .cbf-ask__bubble.is-in .cbf-ask__mark { stroke-dasharray: 1; animation: cbf-draw 600ms var(--cbf-ease) 700ms both; }
.cbf-js .cbf-ask__bubble.is-in .cbf-ask__dot { animation: cbf-pop 420ms var(--cbf-ease) 1250ms both; }
.cbf-ask__head p { font-size: 17.5px; line-height: 1.7; color: var(--ink-soft); }
.cbf-ask__qs { list-style: none; }
.cbf-ask__qs li { position: relative; padding: 18px 0 20px; font-family: var(--font-display); font-weight: 300; font-size: clamp(1.45rem, 2.4vw, 2.1rem); line-height: 1.25; color: var(--ink); }
.cbf-ask__qs li:first-child { padding-top: 0; }
/* each question is ruled off as it lands */
.cbf-ask__qs li::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--border-strong); transform-origin: left; transition: transform 900ms var(--cbf-ease) calc(200ms + var(--i) * 140ms); }
.cbf-js .cbf-ask__qs li:not(.is-in)::after { transform: scaleX(0); }
.cbf-js .cbf-ask__qs li { transition-delay: calc(var(--i) * 140ms); }
/* take the questions with you: the button is added by the script, so it is only there when it works */
.cbf-copy { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 14px; padding: 0 18px; border: 1.5px solid var(--accent-blue-hover); border-radius: 6px; background: #fff; color: var(--accent-blue-hover); font: 600 15px/1 var(--font-body); cursor: pointer; transition: background-color 200ms, color 200ms, border-color 200ms, transform 200ms var(--cbf-ease); }
.cbf-copy:hover { background: var(--accent-blue-hover); color: #fff; }
.cbf-copy:active { transform: scale(.98); }
.cbf-copy:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 3px; }
.cbf-copy svg { width: 18px; height: 18px; overflow: visible; }
.cbf-copy svg path { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cbf-copy .cbf-copy__tick { display: none; }
.cbf-copy.is-done { background: var(--accent-blue-hover); border-color: var(--accent-blue-hover); color: #fff; }
.cbf-copy.is-done .cbf-copy__sheet { display: none; }
.cbf-copy.is-done .cbf-copy__tick { display: inline; stroke-dasharray: 1; animation: cbf-draw 420ms var(--cbf-ease) both; }
.cbf-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cbf-ask__body > p { margin-top: 22px !important; font-size: 17.5px; line-height: 1.7; color: var(--ink-soft); }

/* ============ READ ON ============ */
.cbf-next { padding-block: clamp(56px, 7vw, 96px); }
.cbf-next__head { display: flex; align-items: center; gap: clamp(16px, 2vw, 28px); margin-bottom: clamp(16px, 2vw, 28px); }
.cbf-next__head h2 { flex: 1; min-width: 0; }
.cbf-next__pages { flex: none; display: block; width: 66px; height: 59px; overflow: visible; }
.cbf-next__pages path { fill: #fff; stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.cbf-next__pages .cbf-next__lines { fill: none; stroke: var(--accent-blue); }
/* three more pages, dealt one onto the next */
@keyframes cbf-deal { from { transform: translate(14px, -10px); opacity: 0; } }
.cbf-js .cbf-next__pages:not(.is-in) path { opacity: 0; }
.cbf-js .cbf-next__pages.is-in path { animation: cbf-deal 620ms var(--cbf-ease) calc(var(--i, 3) * 140ms) both; }
.cbf-route { list-style: none; }
.cbf-page .cbf-route a { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) 44px; gap: 6px 32px; align-items: baseline; min-height: 44px; padding: 24px 0; border-bottom: 1px solid var(--border); color: var(--ink); }
.cbf-route__t { font-family: var(--font-display); font-size: clamp(1.4rem, 2.2vw, 1.9rem); font-weight: 400; line-height: 1.2; transition: color 200ms, transform 420ms var(--cbf-ease); }
.cbf-route__d { font-size: 16px; line-height: 1.55; color: var(--ink-muted); }
.cbf-route__go { justify-self: end; align-self: center; font-size: 20px; color: var(--accent-blue-hover); transition: transform 360ms var(--cbf-ease); }
.cbf-route a:hover .cbf-route__t, .cbf-route a:focus-visible .cbf-route__t { color: var(--accent-blue-hover); transform: translateX(6px); }
.cbf-route a:hover .cbf-route__go, .cbf-route a:focus-visible .cbf-route__go { transform: translateX(8px); }
.cbf-next__up { display: flex; flex-wrap: wrap; gap: 4px 36px; margin-top: 20px !important; }

/* ============ NARROWER ============ */
@media (max-width: 1100px) {
  /* the bar's track can scroll here, so its edges fade */
  .cbf-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); }
}
@media (max-width: 900px) {
  .cbf-screen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cbf-asp { max-width: 200px; justify-self: start; }
  .cbf-hero__row, .cbf-cord__grid, .cbf-cord__cols, .cbf-marrow__lead, .cbf-marrow__yield, .cbf-fat__grid, .cbf-fat__fda, .cbf-celva__lead, .cbf-ask__grid, .cbf-rules__foot { grid-template-columns: minmax(0, 1fr); }
  .cbf-fat__fda .cbf-go { grid-column: 1; }
  .cbf-cord__text { order: -1; }
  .cbf-flow { max-width: 560px; margin-inline: auto !important; width: 100%; }
  .cbf-svf__svg { max-width: 300px; }
  .cbf-photo { max-width: 560px; }
  /* the life line stands up: one stop under another */
  .cbf-age { grid-template-columns: minmax(0, 1fr); }
  .cbf-age li { padding: 0 0 26px 34px; min-height: 30px; }
  .cbf-age li:last-of-type { padding-bottom: 0; }
  .cbf-age li::before { top: 6px; }
  .cbf-age li:not(:last-of-type)::after { left: 7px; right: auto; top: 14px; bottom: -6px; width: 2px; height: auto; background: linear-gradient(180deg, var(--cbf-cord), var(--cbf-marrow-line)) no-repeat top / 100% 100%, var(--border); }
  .cbf-age.is-led li:not(.is-passed):not(:last-child)::after { background-size: 100% 0, auto; }
  .cbf-page .cbf-route a { grid-template-columns: minmax(0, 1fr) 32px; padding-block: 20px; }
  .cbf-route__d { grid-column: 1; grid-row: 2; }
  .cbf-route__go { grid-column: 2; grid-row: 1; align-self: start; }
}
@media (max-width: 760px) {
  .cbf-js [data-r="left"]:not(.is-in), .cbf-js [data-r="right"]:not(.is-in) { transform: translateY(18px); }
  /* the two sides stack, and the line is drawn across between them */
  .cbf-ledger { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .cbf-ledger__rule { height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .34) 12%, rgba(255, 255, 255, .34) 88%, transparent); }
  .cbf-page .cbf-rules h2 { text-align: left; }
  /* the table keeps its three columns, each row's question set above them,
     and the three names stay in sight while the rows pass under them */
  .cbf-table, .cbf-table thead, .cbf-table tbody { display: block; }
  .cbf-table tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cbf-table thead { position: sticky; top: calc(var(--hc-nav-h) + var(--hc-bar-h)); z-index: 3; background: #fff; padding-top: 8px; }
  .cbf-table thead td { display: none; }
  .cbf-table thead th { padding: 0 6px 10px 0; }
  .cbf-table thead th + th { padding-left: 10px; }
  .cbf-table thead svg { width: 60px; height: 50px; margin-bottom: 4px; }
  .cbf-table thead a > span { font-size: 1.12rem; }
  .cbf-table thead a > span::after { display: none; }
  .cbf-table thead small { display: block; font-size: 13px; }
  .cbf-table tbody tr { padding-block: 16px; border-bottom: 1px solid var(--border); }
  .cbf-table tbody tr:last-child { border-bottom: 0; padding-bottom: 0; }
  .cbf-table tbody th { grid-column: 1 / -1; padding: 0 0 8px; border: 0; font-size: 14.5px; }
  .cbf-table tbody td { padding: 0 8px 0 0; border: 0; font-size: 14px; line-height: 1.45; overflow-wrap: break-word; }
  /* each answer shares its rows with the two beside it, so second lines and the dots start level */
  .cbf-table tbody td { display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: start; }
  @supports not (grid-template-rows: subgrid) { .cbf-table tbody td { display: block; } }
  .cbf-table tbody td + td { padding: 0 6px 0 10px; }
  .cbf-table tbody strong { font-size: 1.14rem; }
  .cbf-dots { gap: 4px; }
  .cbf-dots i { width: 7px; height: 7px; }
  .cbf-types li { grid-template-columns: 64px minmax(0, 1fr); column-gap: 16px; }
  .cbf-types__badge { width: 64px; height: 64px; }
  .cbf-types__badge svg { width: 58px; height: 48px; transform: scale(.72); }
  .cbf-types li:not(:last-child)::after { left: 31px; top: 64px; }
  .cbf-types__body { grid-column: 1 / -1; margin-top: 12px; }
  .cbf-types li:not(:last-child)::after { display: none; }
  .cbf-screen li { font-size: 16px; }
}
@media (max-width: 600px) {
  html:has(body.cbf-page) { --hc-bar-h: 48px; }
  .cbf-ask__bubble { width: 60px; height: 55px; }
  .cbf-next__pages { width: 54px; height: 48px; }
  .cbf-page .hc-bar__track { gap: 22px; }
  .cbf-key { font-size: 14px; padding-right: 4px; }
  .cbf-key--marrow { padding-left: 4%; }
  .cbf-key--fat { padding-left: 8%; }
  .cbf-cord p, .cbf-marrow p, .cbf-fat p, .cbf-celva p, .cbf-ask__head p, .cbf-ask__body > p, .cbf-lede, .cbf-rules__foot p { font-size: 16.5px; line-height: 1.62; }
  .cbf-hero__answer { line-height: 1.55; }
  .cbf-cmp, .cbf-cord, .cbf-marrow, .cbf-fat { padding-block: 44px; }
  .cbf-ledger dl > div { grid-template-columns: 92px minmax(0, 1fr); gap: 12px; }
}

/* ============ STILL ============
   Reduced motion: every drawing holds its finished state and nothing moves. */
@media (prefers-reduced-motion: reduce) {
  .cbf-page main *, .cbf-page main *::before, .cbf-page main *::after { animation: none !important; transition: none !important; }
  .cbf-js [data-r]:not(.is-in), .cbf-js .cbf-table:not(.is-in) tbody tr, .cbf-js .cbf-ledger__side:not(.is-in) dl > div { opacity: 1 !important; transform: none !important; }
  .cbf-js .cbf-table:not(.is-in) .cbf-dots i, .cbf-js .cbf-flow:not(.is-in) :is(.cbf-flow__tick, .cbf-flow__frost), .cbf-js .cbf-ask__bubble:not(.is-in) :is(.cbf-ask__mark, .cbf-ask__dot) { opacity: 1 !important; }
  .cbf-js .cbf-photo:not(.is-in) img { opacity: 1 !important; transform: none !important; }
  .cbf-js .cbf-asp:not(.is-in) .cbf-asp__syr, .cbf-js .cbf-next__pages:not(.is-in) path { opacity: 1 !important; }
  .cbf-js .cbf-ask__qs li:not(.is-in)::after { transform: none !important; }
  .cbf-js :is(.cbf-trio, .cbf-flow, .cbf-ask__bubble) [pathLength] { stroke-dasharray: none !important; }
  .cbf-age__cell { display: none; }
  .cbf-page .hc-bar { transition: none !important; }
}
@media print {
  .cbf-page .hc-bar, .cbf-age__cell { display: none !important; }
  /* a printout is one still frame: nothing may be caught part way through moving */
  .cbf-page main *, .cbf-page main *::before, .cbf-page main *::after { animation: none !important; transition: none !important; }
  .cbf-js [data-r], .cbf-js .cbf-table tbody tr, .cbf-js .cbf-dots i, .cbf-js .cbf-ledger__side dl > div, .cbf-js .cbf-photo img { opacity: 1 !important; transform: none !important; animation: none !important; }
  .cbf-js :is(.cbf-flow__tick, .cbf-flow__frost, .cbf-ask__mark, .cbf-ask__dot, .cbf-asp__syr, .cbf-next__pages path) { opacity: 1 !important; animation: none !important; }
  .cbf-table thead { position: static; }
  .cbf-copy { display: none !important; }
  .cbf-table, .cbf-ledger, .cbf-agefig, .cbf-types li, .cbf-ask__qs, figure { break-inside: avoid; }
  .cbf-page main h2, .cbf-page main h3 { break-after: avoid; }
  .cbf-cmp, .cbf-cord, .cbf-marrow, .cbf-fat, .cbf-celva, .cbf-ask, .cbf-next, .cbf-rules { padding-block: 24px; }
  .cbf-rules, .cbf-ask { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .cbf-more summary { display: none; }
}