/* /learn-compare-bioxcellerator. Loaded after site.css, by that page only.
   The page is one trade: a week away that is a trip in itself, against one
   day and home that evening. Each part has its own shape: a drawn map beside
   the answer, two weeks drawn to one scale, two planner calendars, a strip of
   patient clips, two maps on one clock (navy), a list beside a sticky aside
   (the one tinted band), a table, an accordion beside a clock, link rows.
   Colour key in the calendars: navy is the cells, blue is travel, grey is the
   clinic, hatching is time with nothing in it. On the maps: white is Celva's
   route, ice is BioXcellerator's. */

/* On the root, because scroll-padding-top is read there. */
html:has(body.bx-page) {
  --bx-max: 1240px;
  --bx-gut: clamp(20px, 4vw, 56px);
  --hc-nav-h: 64px;            /* fallback; the script sets the real header height */
  --hc-bar-h: 52px;
  --bx-ease: cubic-bezier(.16, 1, .3, 1);
  --bx-hatch: repeating-linear-gradient(135deg, rgba(11, 29, 58, .07) 0 1px, transparent 1px 7px);
  /* 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);
}
body.bx-page { background: var(--white); }

/* colors_and_type.css caps every bare <p> at 42rem and underlines every <a> */
/* parts whose pieces arrive from the side keep them from widening the page */
.bx-page :is(.bx-rev, .bx-out) { overflow-x: clip; }
.bx-page main p { max-width: none; margin: 0; }
.bx-page main a:not(.btn) { border-bottom: 0; }
.bx-page main :is(h1, h2, h3) { text-wrap: wrap; max-width: none; }
.bx-page main h2 {
  font-size: clamp(1.9rem, 3.2vw, 2.9rem); line-height: 1.1; font-weight: 300; letter-spacing: -.01em;
  margin: 0 0 20px;
}
/* a heading that has to wrap breaks where the styling changes */
.bx-page .h-lead, .bx-page main :is(h1, h2) > em { display: inline-block; }
.bx-wrap { max-width: calc(var(--bx-max) + 2 * var(--bx-gut)); margin: 0 auto; padding: 0 var(--bx-gut); }

.bx-page main [tabindex="-1"]:focus { outline: none; }
.bx-page main :is(a, button, summary, .btn):focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 3px; border-radius: 3px; }
.bx-page .jrn :is(a, button, .btn):focus-visible { outline-color: var(--accent-ice); }

/* a link in running text, a glossary term, and the arrow links */
.bx-inline { color: var(--accent-blue-hover); text-decoration: underline; text-decoration-color: var(--accent-blue); text-underline-offset: 3px; text-decoration-thickness: 1.5px; transition: color 200ms; }
.bx-inline:hover { color: var(--accent-blue); }
.bx-term { color: inherit; text-decoration: underline dotted var(--accent-blue); text-underline-offset: 3px; text-decoration-thickness: 1.5px; transition: color 200ms; }
.bx-term:hover { color: var(--accent-blue); }
.bx-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 16px; font-weight: 500; color: var(--accent-blue-hover); transition: color 200ms; }
.bx-link span { transition: transform 260ms var(--bx-ease); }
.bx-link:hover { color: var(--accent-blue); }
.bx-link:hover span { transform: translateX(4px); }
.bx-link--ice { color: var(--accent-ice); }
.bx-link--ice:hover { color: #fff; }
.bx-note { font-size: 14.5px; color: var(--ink-muted); }
.bx-page main .btn:active { transform: scale(.98); }

/* ---------- reveals: hidden only once the script has said it will show them ---------- */
html.bx-js [data-r] { opacity: 0; transform: translateY(18px); transition: opacity 600ms var(--bx-ease), transform 760ms var(--bx-ease); }
html.bx-js [data-r].is-in { opacity: 1; transform: none; }
/* these carry their own entrance below; the block itself stays put */
html.bx-js :is(.bx-cal__wk, .bx-par__table)[data-r] { opacity: 1; transform: none; }
html.bx-js [data-r="still"] { transform: none; }

/* ============ THE BAR THAT FOLLOWS THE READER ============ */
.bx-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(--bx-ease), visibility 0s 360ms;
}
.bx-page .hc-bar.is-on { transform: none; opacity: 1; visibility: visible; transition: opacity 260ms, transform 360ms var(--bx-ease); }
body.bx-page.nav-open .hc-bar { opacity: 0; visibility: hidden; }
.bx-page .hc-bar__track {
  max-width: calc(var(--bx-max) + 2 * var(--bx-gut)); margin: 0 auto; padding: 0 var(--bx-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;
}
.bx-page .hc-bar__track::-webkit-scrollbar { display: none; }
.bx-page .hc-bar__track a {
  position: relative; flex: none; display: flex; align-items: center; border-bottom: 0;
  font-size: 14px; font-weight: 500; color: var(--ink-muted); white-space: nowrap; transition: color 200ms;
}
.bx-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(--bx-ease);
}
.bx-page .hc-bar__track a:hover, .bx-page .hc-bar__track a[aria-current] { color: var(--ink); }
.bx-page .hc-bar__track a[aria-current]::after { transform: scaleX(1); }
.bx-page .hc-bar__track a:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: -4px; border-radius: 4px; }
.bx-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)); }

/* ============ HERO: the answer beside a drawn map ============ */
.bx-hero { padding: clamp(20px, 3vw, 36px) 0 clamp(36px, 5vw, 72px); border-bottom: 1px solid var(--border); }
.bx-hero__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.bx-hero__title { font-size: clamp(2.3rem, 4.6vw, 4rem); line-height: 1.06; letter-spacing: -.015em; font-weight: 300; margin: 0 0 clamp(16px, 2vw, 24px); }
.bx-hero__title em { font-style: italic; color: var(--accent-blue); }
.bx-hero__answer { font-size: clamp(1.14rem, 1.5vw, 1.3rem); line-height: 1.5; color: var(--ink); }
.bx-hero__lede { font-size: 17px; line-height: 1.65; color: var(--ink-soft); margin-top: 14px !important; }
.bx-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 26px; margin-top: 28px; }
.bx-hero .bx-note { margin-top: 10px; }

.bx-hero__art {
  position: relative; margin-right: calc(var(--bx-gut) * -.6); overflow: hidden;
  /* the land runs off every side of the drawing, so each edge fades out */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent), linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent), linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent);
  mask-composite: intersect;
}
.bx-hero__map { display: block; width: 100%; height: auto; overflow: visible; }
.bx-hero__map .land { fill: rgba(45, 110, 177, .06); stroke: rgba(45, 110, 177, .3); stroke-width: .8; vector-effect: non-scaling-stroke; }
.bx-hero__map :is(.land--mx, .land--pa) { fill: rgba(45, 110, 177, .17); stroke: rgba(45, 110, 177, .5); }
.bx-hero__map .haul { fill: none; stroke: var(--ink-muted); stroke-width: 1.4; stroke-dasharray: 1 7; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.bx-hero__map .haul-run { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.bx-hero__map .hop { fill: none; stroke: var(--accent-blue); stroke-width: 2; vector-effect: non-scaling-stroke; }
.bx-hero__map .pin { fill: var(--ink); }
.bx-hero__map .pin--gold { fill: var(--accent-blue); }
.bx-hero__map .pin--ice { fill: var(--ink); }
.bx-hero__map .halo { fill: none; stroke: var(--accent-blue); stroke-width: 1.2; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; animation: bx-halo 3.2s ease-out 1.4s infinite; }
.bx-hero__map .plane { fill: var(--ink); }
.bx-hero__map .lbl { font-family: var(--font-body); font-size: calc(var(--lbl, 18) * 1px); font-weight: 500; fill: var(--ink); paint-order: stroke; stroke: #fff; stroke-width: calc(var(--lbl, 18) * .28px); stroke-linejoin: round; }
.bx-hero__map .lbl--gold { fill: var(--accent-blue-hover); }
/* on a narrow map the names are large against the drawing, so they step inside it */
.bx-hero__map.is-tight .lbl { text-anchor: start; transform: translate(16px, -14px); }
.bx-hero__map.is-tight .lbl--gold { transform: translate(-4px, 34px); }
.bx-hero__map.is-tight .lbl--ice { text-anchor: end; transform: translate(-36px, -30px); }
@keyframes bx-halo { 0% { transform: scale(1); opacity: .9; } 70%, 100% { transform: scale(7); opacity: 0; } }

/* first paint: the heading rises in two halves, the answer follows, the map settles */
@keyframes bx-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes bx-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes bx-pin { 0% { transform: scale(0); } 70% { transform: scale(1.5); } 100% { transform: scale(1); } }
html.bx-js .bx-hero :is(.h-lead, .bx-hero__title em, .bx-hero__answer, .bx-hero__lede, .bx-hero__actions, .bx-note) { animation: bx-rise 820ms var(--bx-ease) both; }
html.bx-js .bx-hero .h-lead { animation-delay: 80ms; }
html.bx-js .bx-hero__title em { animation-delay: 200ms; }
html.bx-js .bx-hero__answer { animation-delay: 340ms; }
html.bx-js .bx-hero__lede { animation-delay: 430ms; }
html.bx-js .bx-hero__actions { animation-delay: 520ms; }
html.bx-js .bx-hero .bx-note { animation-delay: 600ms; }
html.bx-js .bx-hero__art { animation: bx-fade 1100ms ease 150ms both; }
html.bx-js .bx-hero__map .pin { transform-box: fill-box; transform-origin: center; animation: bx-pin 520ms var(--bx-ease) 700ms both; }
html.bx-js .bx-hero__map .pin--gold { animation-delay: 1000ms; }
html.bx-js .bx-hero__map .pin--ice { animation-delay: 2700ms; }
html.bx-js .bx-hero__map .lbl { animation: bx-fade 500ms ease 800ms both; }
html.bx-js .bx-hero__map .lbl--gold { animation-delay: 1100ms; }
html.bx-js .bx-hero__map .lbl--ice { animation-delay: 2800ms; }

/* ============ HOW LONG: two weeks drawn to one scale ============ */
.bx-len { padding: clamp(44px, 5.5vw, 80px) 0 clamp(36px, 4vw, 56px); }
.bx-len__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.bx-len__say p { font-size: clamp(1.1rem, 1.45vw, 1.25rem); line-height: 1.6; color: var(--ink-soft); }
.bx-wk { padding: 4px 0 28px; }
.bx-wk + .bx-wk { border-top: 1px solid var(--border); padding-top: 28px; padding-bottom: 0; }
.bx-wk__who { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 14px !important; }
.bx-wk__who img[width][height] { height: 22px; width: auto; }
.bx-wk__days { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.bx-wk__days span {
  position: relative; height: 52px; padding: 7px 9px; border-radius: 4px; font-size: 13px; font-weight: 500; line-height: 1;
  color: var(--ink-muted); background: var(--bx-hatch); box-shadow: inset 0 0 0 1px var(--border);
}
.bx-wk__days span::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--ink); z-index: -1; }
.bx-wk__days span { isolation: isolate; }
.bx-wk--them .bx-wk__days span, .bx-wk--us .bx-wk__days span:nth-child(2) { color: #fff; background: none; box-shadow: none; }
.bx-wk--us .bx-wk__days span::before { background: var(--accent-blue); }
.bx-wk--us .bx-wk__days span:not(:nth-child(2))::before { content: none; }
/* a night between two days away: a moon on the seam */
.bx-wk--them .bx-wk__days span:not(:last-child)::after {
  content: ""; position: absolute; right: 8px; bottom: 8px; width: 15px; height: 15px; border-radius: 50%;
  box-shadow: inset -4.5px -2px 0 0 #fff; transform: rotate(-18deg);
}
.bx-wk__big { font-family: var(--font-display); font-size: clamp(2rem, 3.4vw, 3rem); font-weight: 300; line-height: 1.05; letter-spacing: -.01em; color: var(--ink); margin: 18px 0 6px !important; }
.bx-wk__dist { display: block; width: 100%; height: 14px; overflow: visible; }
.bx-wk__rule { stroke: var(--border-strong); stroke-width: 1; stroke-dasharray: 1 5; stroke-linecap: round; }
.bx-wk__run { stroke: var(--ink); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.bx-wk--us .bx-wk__run { stroke: var(--accent-blue); stroke-width: 6; }
.bx-wk__mi { font-size: 17px; color: var(--ink-soft); margin-top: 6px !important; }
.bx-wk__mi b { font-weight: 600; color: var(--ink); }
.bx-wk__sub { font-size: 15px; color: var(--ink-muted); }
/* entrance: the days fill one at a time, each night lands after its day, then the distance runs out */
@keyframes bx-cell { from { transform: scaleX(0); } to { transform: none; } }
@keyframes bx-moon { from { opacity: 0; transform: rotate(-80deg) scale(.3); } to { opacity: 1; transform: rotate(-18deg); } }
@keyframes bx-run { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
html.bx-js .bx-wk[data-r] { transform: none; }
html.bx-js .bx-wk.is-in .bx-wk__days span::before { transform-origin: left; animation: bx-cell 420ms var(--bx-ease) both; animation-delay: calc(var(--n, 0) * 130ms + 150ms); }
html.bx-js .bx-wk.is-in .bx-wk__days span::after { animation: bx-moon 360ms var(--bx-ease) both; animation-delay: calc(var(--n, 0) * 130ms + 420ms); }
.bx-wk__days span:nth-child(2) { --n: 1; } .bx-wk__days span:nth-child(3) { --n: 2; } .bx-wk__days span:nth-child(4) { --n: 3; } .bx-wk__days span:nth-child(5) { --n: 4; } .bx-wk__days span:nth-child(6) { --n: 5; }
html.bx-js .bx-wk.is-in .bx-wk__run { animation: bx-run 1500ms var(--bx-ease) 500ms both; }
html.bx-js .bx-wk--us.is-in .bx-wk__run { animation-duration: 300ms; }

/* ============ TWO CALENDARS ============ */
.bx-cal { padding: clamp(40px, 5vw, 72px) 0 clamp(56px, 7vw, 104px); }
.bx-cal__say p { font-size: 18px; line-height: 1.65; color: var(--ink-soft); }
.bx-cal__hint { color: var(--ink); font-weight: 500; }
.bx-cal__hint--tap { display: none; }
.bx-cal__wk { border: 1px solid var(--border-strong); border-top: 2px solid var(--ink); background: #fff; margin-top: 28px; }
.bx-cal__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px; border-bottom: 1px solid var(--border); }
.bx-cal__brand { font-family: var(--font-display); font-size: 1.7rem; line-height: 1; color: var(--ink); }
.bx-cal__logo[width][height] { height: 26px; width: auto; }
.bx-cal__sum { font-size: 15px; font-weight: 500; color: var(--ink-muted); }
.bx-cal__cols, .bx-cal__body { display: grid; grid-template-columns: 58px repeat(6, minmax(0, 1fr)); }
.bx-cal__cols span { padding: 10px 12px; font-size: 13px; color: var(--ink-muted); border-left: 1px solid var(--border); white-space: nowrap; overflow: hidden; }
.bx-cal__cols span:first-child { border-left: 0; }
.bx-cal__cols b { font-size: 14px; font-weight: 600; color: var(--ink); margin-right: 6px; }
.bx-cal__cols i { font-style: normal; }
.bx-cal__body { height: 528px; padding-block: 12px; border-top: 1px solid var(--border); }
.bx-cal__hrs { position: relative; }
.bx-cal__hrs span { position: absolute; right: 10px; top: var(--t); transform: translateY(-50%); font-size: 13px; color: var(--ink-muted); white-space: nowrap; }
.bx-cal__day { position: relative; border-left: 1px solid var(--border); }
.bx-cal__lane { position: absolute; inset: 0; background: repeating-linear-gradient(to bottom, var(--border) 0 1px, transparent 1px calc(100% / 7)); }
.bx-cal .ev {
  --ev-bg: #e8eff7; --ev-rule: var(--accent-blue);
  position: absolute; left: 4px; right: 4px; top: var(--t); height: calc(var(--h) - 2px); min-height: 16px;
  display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; text-align: left; overflow: hidden;
  border: 0; border-left: 3px solid var(--ev-rule); border-radius: 3px; background: var(--ev-bg);
  font: 500 12px/1.25 var(--font-body); color: var(--ink); cursor: pointer;
  transition: transform 220ms var(--bx-ease), box-shadow 220ms, filter 200ms;
}
.bx-cal .ev__t { font-weight: 600; color: var(--accent-blue-hover); }
.bx-cal .ev--sm { flex-direction: row; align-items: center; gap: 6px; padding-block: 0; white-space: nowrap; }
.bx-cal .ev--med { --ev-bg: #ebedf0; --ev-rule: var(--ink-soft); }
.bx-cal .ev--med .ev__t { color: var(--ink-soft); }
.bx-cal .ev--key { --ev-bg: var(--ink); --ev-rule: var(--accent-ice); color: #fff; }
.bx-cal .ev--key .ev__t { color: var(--accent-ice); }
.bx-cal :is(.ev--idle, .ev--off) { --ev-rule: var(--border-strong); background: var(--bx-hatch), #fff; color: var(--ink-muted); }
.bx-cal :is(.ev--idle, .ev--off) .ev__t { color: var(--ink-muted); }
.bx-cal .ev--off { left: 0; right: 0; height: var(--h); border-left: 0; border-radius: 0; align-items: center; justify-content: center; gap: 8px; font-size: 13px; }
.bx-cal .ev__home { width: 48px; height: 48px; fill: none; stroke: var(--ink-muted); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: transform 320ms var(--bx-ease), stroke 200ms; }
.bx-cal .ev:hover, .bx-cal .ev.is-open { z-index: 2; transform: translateX(3px); box-shadow: 0 8px 22px rgba(11, 29, 58, .2); }
.bx-cal .ev--off:hover, .bx-cal .ev--off.is-open { transform: none; box-shadow: none; }
.bx-cal .ev--off:hover .ev__home, .bx-cal .ev--off.is-open .ev__home { transform: translateY(-4px); stroke: var(--accent-blue); }
.bx-cal .ev:focus-visible { z-index: 3; outline-offset: 1px; }
/* entrance: the week fills in the order it happens */
@keyframes bx-ev-in { from { opacity: 0; transform: translateY(-8px) scaleY(.7); } to { opacity: 1; transform: none; } }
html.bx-js .bx-cal__wk:not(.is-in) .ev { opacity: 0; }
html.bx-js .bx-cal__wk.is-in .ev { transform-origin: top; animation: bx-ev-in 460ms var(--bx-ease) backwards; animation-delay: calc(var(--i, 0) * 55ms); }

/* the day, opened: a card beside the block on a desktop, a sheet under the week on a phone */
.bx-pop {
  position: fixed; z-index: 60; width: 340px; pointer-events: none;
  background: #fff; border-radius: 10px; box-shadow: 0 18px 50px rgba(11, 29, 58, .26), 0 0 0 1px var(--border);
  opacity: 0; transform: translateY(8px) scale(.97); transition: opacity 160ms, transform 240ms var(--bx-ease);
}
.bx-pop.is-on { opacity: 1; transform: none; }
.bx-pop[hidden] { display: none; }
.bx-pop__fig { aspect-ratio: 16 / 9; background: var(--ink); overflow: hidden; border-radius: 10px 10px 0 0; }
.bx-pop__fig video { display: block; width: 100%; height: 100%; object-fit: cover; }
.bx-pop[data-novid] .bx-pop__fig { display: none; }
.bx-pop__body { padding: 14px 18px 18px; }
.bx-pop__t { font-size: 13px; font-weight: 600; color: var(--accent-blue-hover); }
.bx-pop .bx-pop__ttl { font-family: var(--font-display); font-size: 1.5rem; font-weight: 400; line-height: 1.15; margin: 4px 0 2px; color: var(--ink); }
.bx-pop .bx-pop__w { font-size: 13.5px; color: var(--ink-muted); margin: 0; max-width: none; }
.bx-pop .bx-pop__n { font-size: 15px; line-height: 1.5; color: var(--ink-soft); margin: 10px 0 0; max-width: none; }
.bx-pop__step { display: none; }
.bx-pop__btn { width: 48px; height: 44px; display: grid; place-items: center; border: 1px solid var(--border-strong); border-radius: 4px; background: #fff; color: var(--ink); cursor: pointer; transition: border-color 200ms, color 200ms, transform 200ms var(--bx-ease); }
.bx-pop__btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bx-pop__btn:hover { border-color: var(--accent-blue); color: var(--accent-blue); }
.bx-pop__btn:active { transform: scale(.94); }
.bx-pop__btn--x { margin-left: auto; }

/* ============ FOUR PATIENTS ============ */
.bx-rev { padding: clamp(40px, 5vw, 72px) 0 clamp(56px, 7vw, 104px); border-top: 1px solid var(--border); }
.bx-rev__say { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(16px, 5vw, 80px); align-items: start; }
.bx-rev__say p { font-size: 18px; line-height: 1.65; color: var(--ink-soft); }
.bx-rev__say .bx-rev__aside { font-size: 16px; color: var(--ink-muted); padding-left: 18px; border-left: 2px solid var(--accent-blue); }
.bx-rev__strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: clamp(28px, 4vw, 48px) 0 0; padding: 0 6px; }
.bx-rev__clip { display: block; overflow: hidden; border-radius: 6px; aspect-ratio: 8 / 5; background: var(--ink); }
.bx-rev__clip video { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--bx-ease); }
.bx-rev__clip:hover video { transform: scale(1.045); }
html.bx-js .bx-rev__clip[data-r] { transform: translateX(46px); transition-duration: 700ms, 900ms; }
html.bx-js .bx-rev__clip[data-r]:nth-child(2) { transition-delay: 90ms; }
html.bx-js .bx-rev__clip[data-r]:nth-child(3) { transition-delay: 180ms; }
html.bx-js .bx-rev__clip[data-r]:nth-child(4) { transition-delay: 270ms; }
html.bx-js .bx-rev__clip[data-r].is-in { transform: none; }
.bx-rev__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 24px; margin-top: 12px; font-size: 14.5px; color: var(--ink-muted); }

/* ============ TWO MAPS, ONE CLOCK (navy) ============ */
.jrn { background: var(--ink); color: #fff; padding: clamp(56px, 7vw, 100px) 0; }
.bx-page main .jrn__h { color: #fff; }
.jrn__h em { font-style: italic; color: var(--accent-ice); }
.jrn__lede { font-size: 18px; line-height: 1.65; color: rgba(255, 255, 255, .74); }
.jrn__clockbar { position: relative; display: flex; align-items: center; gap: 12px 28px; flex-wrap: wrap; margin: 32px 0 20px; padding: 14px 0 18px; }
.jrn__clock { display: flex; align-items: baseline; gap: 10px; min-width: 232px; font-variant-numeric: tabular-nums; color: #fff; }
.jrn__cday { font-size: 17px; font-weight: 600; color: var(--accent-ice); width: 2.4em; }
.jrn__ctime { font-family: var(--font-display); font-size: 2.6rem; line-height: 1; font-weight: 300; min-width: 2.6em; text-align: right; }
.jrn__cmer { font-size: 15px; font-weight: 500; color: rgba(255, 255, 255, .74); }
.jrn__week { list-style: none; margin: 0; padding: 0; flex: 1 1 280px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); font-size: 13.5px; color: rgba(255, 255, 255, .62); }
.jrn__week li { padding-left: 8px; border-left: 1px solid rgba(255, 255, 255, .22); line-height: 1.9; transition: color 300ms; }
.jrn__week li.is-now { color: #fff; font-weight: 600; }
.jrn__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255, 255, 255, .16); }
.jrn__bar span { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); background: var(--accent-ice); }
.jrn__ctl { display: flex; gap: 8px; }
.jrn__ctl[hidden] { display: none; }   /* until the script that works them has run */
.jrn__btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; font: 500 15px/1 var(--font-body); color: #fff; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .3); border-radius: 4px; cursor: pointer; transition: background 200ms, border-color 200ms, transform 200ms var(--bx-ease); }
.jrn__btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 500ms var(--bx-ease); }
.jrn__btn:hover { background: rgba(255, 255, 255, .16); border-color: #fff; }
.jrn__btn:active { transform: scale(.96); }
.jrn__btn[data-j="replay"]:hover svg { transform: rotate(-360deg); }
.jrn__ico-play { display: none; fill: currentColor; }
.jrn.is-paused .jrn__ico-play { display: block; }
.jrn.is-paused .jrn__ico-pause { display: none; }

.jrn__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.jrn__panel { --side: #fff; display: flex; flex-direction: column; border: 1px solid rgba(255, 255, 255, .16); border-top: 2px solid var(--side); border-radius: 0 0 8px 8px; background: rgba(255, 255, 255, .03); overflow: hidden; }
.jrn__panel--them { --side: var(--accent-ice); }
.jrn__phead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 18px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.jrn__brand { font-family: var(--font-display); font-size: 1.6rem; line-height: 1; color: var(--side); }
.jrn__psum { font-size: 14px; color: rgba(255, 255, 255, .74); }
.jrn__map { display: block; width: 100%; height: auto; transition: opacity 600ms ease, filter 600ms ease; }
.jrn__map .land { fill: rgba(124, 169, 209, .07); stroke: rgba(124, 169, 209, .26); stroke-width: .8; vector-effect: non-scaling-stroke; }
.jrn__map .land--hi { fill: rgba(124, 169, 209, .2); stroke: rgba(124, 169, 209, .55); }
.jrn__map .route { fill: none; stroke: rgba(255, 255, 255, .22); stroke-width: 1; stroke-dasharray: 1 6; stroke-linecap: round; vector-effect: non-scaling-stroke; }
/* trails are revealed by dash offset measured in path units, so they must scale with the drawing */
.jrn__map .trail { fill: none; stroke: var(--side); stroke-width: 1.9; stroke-linecap: round; }
.jrn__map .trail--tf { stroke-width: 1.1; opacity: .6; }
.jrn__map .city { fill: #fff; }
.jrn__map .ring { fill: none; stroke: rgba(255, 255, 255, .34); stroke-width: 1; vector-effect: non-scaling-stroke; }
.jrn__map .lbl { font-family: var(--font-body); font-size: calc(var(--lbl, 13) * 1px); font-weight: 500; fill: rgba(255, 255, 255, .9); paint-order: stroke; stroke: var(--ink); stroke-width: calc(var(--lbl, 13) * .3px); stroke-linejoin: round; }
.jrn__map .lbl--dim { fill: rgba(255, 255, 255, .78); font-weight: 400; }
.jrn__map .jrn__ins { transition: opacity 400ms ease; }
/* on a narrow map the names on its right-hand edge turn to face inward */
.jrn__panel--them .jrn__map.is-far .jrn__base text:nth-of-type(2) { text-anchor: end; transform: translate(-20px, 0); }
.jrn__panel--them .jrn__map.is-far .jrn__base text:nth-of-type(3) { text-anchor: end; transform: translate(34px, 6px); }
.jrn__map.is-far .jrn__ins { opacity: 0; }
.jrn__map .insetbox { fill: rgba(6, 16, 34, .9); stroke: rgba(255, 255, 255, .22); stroke-width: 1; vector-effect: non-scaling-stroke; }
.jrn__map .link { fill: none; stroke: rgba(255, 255, 255, .24); stroke-width: 1; stroke-dasharray: 1 5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.jrn__map .node { fill: #fff; }
.jrn__map .tok { opacity: 0; transition: opacity 250ms ease; }
.jrn__map .tok.on { opacity: 1; }
.jrn__map .tok__dot { fill: var(--side); }
.jrn__map .tok__halo { fill: none; stroke: var(--side); stroke-width: 1; opacity: .6; animation: bx-tok 2.4s ease-out infinite; }
@keyframes bx-tok { 0% { r: 3px; opacity: .85; } 100% { r: 15px; opacity: 0; } }
.jrn__status { display: flex; flex-direction: column; gap: 4px; padding: 14px 18px 12px; border-top: 1px solid rgba(255, 255, 255, .12); min-height: 8.4em; }
.jrn__mode { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 500; color: rgba(255, 255, 255, .7); }
.jrn__mode::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.jrn__mode.is-moving { color: var(--side); }
.jrn__mode.is-moving::before { animation: bx-blink 1s steps(2, jump-none) infinite; }
@keyframes bx-blink { from { opacity: 1; } to { opacity: .25; } }
.jrn__act { font-family: var(--font-display); font-size: 1.45rem; line-height: 1.2; color: #fff; }
.jrn__note { font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, .74); }
.jrn__meters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgba(255, 255, 255, .12); }
.jrn__meter { padding: 12px 18px; }
.jrn__meter + .jrn__meter { border-left: 1px solid rgba(255, 255, 255, .12); }
.jrn__mk { display: block; font-size: 13px; color: rgba(255, 255, 255, .7); }
.jrn__mv { font-size: 1.25rem; font-weight: 500; font-variant-numeric: tabular-nums; color: #fff; }
/* the stamp keeps its place from the start, so nothing below it moves when it lands */
.jrn__stamp { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 14.5px; font-weight: 600; color: var(--ink); background: var(--side); opacity: 0; transform: translateY(100%); transition: opacity 300ms, transform 520ms var(--bx-ease); }
.jrn__stamp svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.jrn__stamp path { stroke-dasharray: 14; stroke-dashoffset: 14; transition: stroke-dashoffset 420ms ease 380ms; }
.jrn__panel.is-done .jrn__stamp { opacity: 1; transform: none; }
.jrn__panel.is-done .jrn__stamp path { stroke-dashoffset: 0; }
.jrn__panel.is-done .jrn__map { opacity: .55; filter: saturate(.3); }

.jrn__totals { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .9fr); gap: 20px clamp(24px, 4vw, 56px); margin-top: clamp(40px, 5vw, 64px); padding-top: clamp(28px, 4vw, 44px); border-top: 1px solid rgba(255, 255, 255, .18); }
.jrn__tot-k, .jrn__delta-k { font-size: 14.5px; color: rgba(255, 255, 255, .74); }
.jrn__tot-big { font-family: var(--font-display); font-size: clamp(3rem, 6vw, 5rem); font-weight: 300; line-height: 1; color: #fff; margin: 6px 0 12px !important; }
.jrn__tot--them .jrn__tot-big { color: var(--accent-ice); }
.jrn__tot-bar { display: block; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.jrn__tot-bar i { display: block; height: 100%; width: 100%; border-radius: 2px; background: var(--accent-ice); transform-origin: left; }
.jrn__tot--us .jrn__tot-bar i { width: 5.22%; min-width: 6px; background: #fff; }
html.bx-js .jrn__totals:not(.is-in) .jrn__tot-bar i { transform: scaleX(0); }
html.bx-js .jrn__totals .jrn__tot-bar i { transition: transform 1400ms var(--bx-ease) 250ms; }
.jrn__tot-split { display: flex; flex-wrap: wrap; gap: 12px clamp(16px, 2.2vw, 30px); margin: 16px 0 0; }
.jrn__tot-split dt { font-size: 13.5px; color: rgba(255, 255, 255, .7); }
.jrn__tot-split dd { margin: 0; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; color: #fff; }
.jrn__delta { display: flex; flex-direction: column; align-items: flex-start; }
.jrn__delta-v { font-family: var(--font-display); font-size: clamp(1.7rem, 2.6vw, 2.3rem); font-weight: 300; line-height: 1.12; color: #fff; margin: 6px 0 6px !important; }
.jrn__delta-s { font-size: 17px; color: var(--accent-ice); margin-bottom: 20px !important; }
.jrn__fine { font-size: 13.5px; line-height: 1.55; color: rgba(255, 255, 255, .66); margin-top: 32px !important; }

/* ============ WHAT THE WEEK INCLUDES (the one tinted band) ============ */
.bx-out { background: var(--accent-wash); padding: clamp(56px, 7vw, 100px) 0; }
.bx-out__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 clamp(28px, 5vw, 80px); align-items: start; }
.bx-out__say { position: sticky; top: calc(var(--hc-nav-h) + var(--hc-bar-h) + 28px); grid-row: span 2; padding-top: 18px; }
.bx-out__say p { font-size: 17px; line-height: 1.65; color: var(--ink-soft); }
.bx-out__say p + p { margin-top: 14px; }
.bx-out__list { list-style: none; margin: 0; padding: 0; }
.bx-out__list li { border-top: 1px solid var(--border-strong); }
.bx-out__list summary { position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: 0 20px; padding: 18px 36px 6px 0; list-style: none; cursor: pointer; }
.bx-out__list summary::-webkit-details-marker { display: none; }
.bx-out__icon { width: 72px; height: 72px; display: grid; place-items: center; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px var(--border); }
.bx-out__icon svg { width: 48px; height: 48px; fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.bx-out__icon svg .f { fill: var(--accent-blue); stroke: none; }
.bx-out__list h3 { font-size: clamp(1.35rem, 2vw, 1.7rem); line-height: 1.15; font-weight: 400; }
.bx-out__amt { font-size: 15px; font-weight: 600; color: var(--accent-blue-hover); white-space: nowrap; }
.bx-out__list details > p { padding: 0 0 22px 92px; font-size: 16.5px; line-height: 1.6; color: var(--ink-soft); }
.bx-out__end { grid-column: 2; margin-top: 8px; padding-top: 26px; border-top: 2px solid var(--ink); }
.bx-out__end p:first-child { font-family: var(--font-display); font-size: clamp(1.4rem, 2.1vw, 1.8rem); font-weight: 300; line-height: 1.3; color: var(--ink); }
.bx-out__end p + p { margin-top: 14px; font-size: 16.5px; line-height: 1.6; color: var(--ink-soft); }
/* entrance: each row comes from the side and its icon is drawn */
@keyframes bx-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
html.bx-js .bx-out__list li[data-r] { transform: translateX(28px); }
html.bx-js .bx-out__list li[data-r].is-in { transform: none; }
html.bx-js .bx-out__list li .bx-out__icon { transform: scale(.82); transition: transform 700ms var(--bx-ease) 120ms; }
html.bx-js .bx-out__list li.is-in .bx-out__icon { transform: none; }
/* on a desktop the rows stand open and their headings are not controls */
@media (min-width: 761px) {
  html.bx-on [data-open-wide] > summary { cursor: default; pointer-events: none; }
  html.bx-on [data-open-wide] > summary::after { content: none; }
  html.bx-on .bx-out__list summary { padding-right: 0; }
}
@keyframes bx-unfold { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ============ WHAT IS IDENTICAL: eight rows ============ */
.bx-par { padding: clamp(56px, 7vw, 104px) 0; }
.bx-par__in { max-width: 1040px; }
.bx-par__lede { font-size: 18px; line-height: 1.65; color: var(--ink-soft); }
.bx-par__table { width: 100%; border-collapse: collapse; margin-top: 32px; table-layout: fixed; }
.bx-par__table :is(th, td) { text-align: left; vertical-align: middle; padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: 15.5px; line-height: 1.4; color: var(--ink-soft); }
.bx-par__table thead th { vertical-align: bottom; padding-bottom: 14px; border-bottom: 2px solid var(--ink); font-weight: 500; font-size: 14.5px; color: var(--ink-muted); }
.bx-par__table th:first-child { width: 38%; padding-left: 0; }
.bx-par__brand { display: block; font-family: var(--font-display); font-size: 1.6rem; line-height: 1.1; color: var(--ink); font-weight: 400; }
.bx-par__logo[width][height] { display: block; height: 26px; width: auto; margin-bottom: 4px; }
.bx-par__sub { display: block; font-size: 14px; color: var(--ink-muted); font-weight: 400; }
.bx-par__table tbody th { font: 400 1.25rem/1.2 var(--font-display); color: var(--ink); }
.bx-par__icon { display: inline-grid; place-items: center; width: 48px; height: 48px; margin-right: 14px; vertical-align: middle; border-radius: 50%; background: rgba(45, 110, 177, .1); color: var(--accent-blue-hover); }
.bx-par__icon svg { width: 24px; height: 24px; fill: currentColor; }
.bx-tick { width: 18px; height: 18px; margin-right: 10px; vertical-align: -3px; fill: none; stroke: var(--accent-blue); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bx-tick path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.bx-par__table tfoot :is(th, td) { border-bottom: 0; border-top: 2px solid var(--ink); padding-block: 16px; font-size: 16px; font-weight: 600; color: var(--ink); }
.bx-par__foot { margin-top: 20px; font-size: 15px; line-height: 1.6; color: var(--ink-muted); }
/* entrance: the ticks are drawn a row at a time, both columns together */
html.bx-js .bx-par__table:not(.is-in) .bx-tick path { stroke-dashoffset: 1; }
html.bx-js .bx-par__table.is-in .bx-tick path { animation: bx-draw 420ms ease both; animation-delay: calc(var(--row, 0) * 110ms + 150ms); }
.bx-par__table tbody tr:nth-child(2) { --row: 1; } .bx-par__table tbody tr:nth-child(3) { --row: 2; } .bx-par__table tbody tr:nth-child(4) { --row: 3; }
.bx-par__table tbody tr:nth-child(5) { --row: 4; } .bx-par__table tbody tr:nth-child(6) { --row: 5; } .bx-par__table tbody tr:nth-child(7) { --row: 6; } .bx-par__table tbody tr:nth-child(8) { --row: 7; }

/* ============ QUESTIONS, beside a fifteen-minute clock ============ */
.bx-faq { padding: clamp(48px, 6vw, 88px) 0 clamp(56px, 7vw, 104px); border-top: 1px solid var(--border); }
.bx-faq__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.bx-faq__clock { display: block; width: 96px; height: 96px; margin: 4px 0 20px; }
.bx-faq__face { fill: #fff; stroke: var(--ink); stroke-width: 1.5; }
.bx-faq__wedge { fill: var(--accent-blue); opacity: .26; }
.bx-faq__ticks { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; }
.bx-faq__hand { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.bx-faq__hand--min { stroke: var(--accent-blue); transform-origin: 48px 48px; }
.bx-faq__pin { fill: var(--ink); }
@keyframes bx-wedge { from { opacity: 0; } to { opacity: .26; } }
@keyframes bx-hand { from { transform: rotate(-90deg); } to { transform: none; } }
html.bx-js .bx-faq__say.is-in .bx-faq__wedge { animation: bx-wedge 700ms ease 1100ms both; }
html.bx-js .bx-faq__say.is-in .bx-faq__hand--min { animation: bx-hand 1300ms var(--bx-ease) 200ms both; }
.bx-faq__cta .bx-note { margin-top: 10px; }
.bx-faq__item { border-top: 1px solid var(--border-strong); }
.bx-faq__item:last-child { border-bottom: 1px solid var(--border-strong); }
.bx-faq__item summary { position: relative; display: block; min-height: 44px; padding: 20px 48px 20px 0; list-style: none; cursor: pointer; }
.bx-faq__item summary::-webkit-details-marker { display: none; }
.bx-faq__item h3 { font-size: clamp(1.3rem, 1.9vw, 1.6rem); line-height: 1.2; font-weight: 400; transition: color 200ms; }
.bx-faq__item summary:hover h3 { color: var(--accent-blue); }
.bx-faq__item summary::after, [data-open-wide] > summary::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 11px; height: 11px; margin-top: -8px;
  border-right: 1.8px solid var(--ink); border-bottom: 1.8px solid var(--ink); transform: rotate(45deg); transition: transform 300ms var(--bx-ease);
}
.bx-faq__item[open] summary::after, [data-open-wide][open] > summary::after { transform: translateY(5px) rotate(-135deg); }
.bx-faq__item p { padding: 0 48px 22px 0; font-size: 17px; line-height: 1.65; color: var(--ink-soft); }
:is(.bx-faq__item, [data-open-wide])[open] > :not(summary) { animation: bx-unfold 380ms var(--bx-ease) both; }

/* ============ SOURCES AND THE OTHER COMPARISONS ============ */
.bx-more { padding: 0 0 clamp(56px, 7vw, 104px); }
.bx-more__in { display: grid; gap: clamp(36px, 5vw, 64px); }
.bx-page main .bx-src h2 { font-family: var(--font-body); font-size: 15px; font-weight: 600; letter-spacing: 0; line-height: 1.4; margin: 0; }
.bx-src summary { position: relative; list-style: none; min-height: 44px; display: flex; align-items: center; cursor: pointer; }
.bx-src summary::-webkit-details-marker { display: none; }
.bx-src ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px clamp(28px, 4vw, 56px); margin: 4px 0 0; padding-left: 20px; font-size: 15px; line-height: 1.6; color: var(--ink-muted); }
.bx-src strong { color: var(--ink); font-weight: 600; }
.bx-src a { color: var(--accent-blue-hover); text-decoration: underline; text-decoration-color: var(--accent-blue); text-underline-offset: 3px; padding-block: 6px; transition: color 200ms; }
.bx-src a:hover { color: var(--accent-blue); }
.bx-page main .bx-rel h2 { font-size: clamp(1.5rem, 2.2vw, 1.9rem); line-height: 1.2; margin-bottom: 12px; }
/* each row is one link: its arrow link is stretched over the whole row */
.learn-related__card { position: relative; display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 0 24px; padding: 18px 0; border-top: 1px solid var(--border-strong); }
.learn-related__card:last-child { border-bottom: 1px solid var(--border-strong); }
.bx-rel__mark { display: flex; align-items: center; height: 48px; }
.bx-rel__logo[width][height] { display: block; width: auto; height: auto; max-width: 150px; max-height: 100%; }
.bx-rel__logo--sq[width][height] { width: 48px; height: 48px; border-radius: 9px; }
.bx-rel__logo--chip[width][height] { height: 48px; max-height: none; padding: 13px 14px; border-radius: 8px; background: var(--ink); box-sizing: border-box; }
.bx-rel__logo--wide[width][height] { max-height: 22px; }
.bx-rel__text h3 { font-size: 1.4rem; line-height: 1.2; font-weight: 400; transition: color 200ms; }
.bx-rel__text p { font-size: 15.5px; line-height: 1.5; color: var(--ink-muted); margin-top: 2px; }
.learn-related__card > a { grid-column: 2; justify-self: start; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; font-size: 15px; font-weight: 500; color: var(--accent-blue-hover); white-space: nowrap; }
.learn-related__card > a::before { content: ""; position: absolute; inset: 0; }
.learn-related__card > a span { transition: transform 260ms var(--bx-ease); }
.learn-related__card:hover > a span { transform: translateX(5px); }
.learn-related__card:hover h3 { color: var(--accent-blue); }
.learn-related__card > a:focus-visible { outline: none; }
.learn-related__card:has(> a:focus-visible) { outline: 2px solid var(--accent-blue); outline-offset: 4px; border-radius: 3px; }

/* ============ CLOSING ============ */
.bx-end { border-top: 1px solid var(--border); padding: clamp(56px, 7vw, 100px) 0; }
.bx-end__in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(28px, 6vw, 96px); align-items: center; }
.bx-end p { font-size: 18px; line-height: 1.65; color: var(--ink-soft); margin-bottom: 28px !important; }
.bx-end small { display: block; margin-top: 12px; font-size: 14.5px; color: var(--ink-muted); }
.bx-end__ten { display: block; width: 100%; max-width: 330px; height: auto; justify-self: end; }
.bx-end__ten circle { fill: none; stroke: var(--border-strong); stroke-width: 1.4; }
.bx-end__ten path { fill: none; stroke: var(--accent-blue); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
/* ten short questions: ten ticks, drawn one after another */
html.bx-js .bx-end__in:not(.is-in) .bx-end__ten path { stroke-dashoffset: 1; }
html.bx-js .bx-end__in.is-in .bx-end__ten path { animation: bx-draw 380ms ease both; animation-delay: calc(var(--i) * 140ms + 200ms); }

/* ============ NARROWER ============ */
@media (max-width: 1040px) {
  .jrn__pair { grid-template-columns: minmax(0, 1fr); }
  .jrn__totals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jrn__delta { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .bx-hero__in, .bx-len__in, .bx-rev__say, .bx-out__in, .bx-faq__in, .bx-end__in { grid-template-columns: minmax(0, 1fr); }
  .bx-src ol { grid-template-columns: minmax(0, 1fr); }
  .bx-hero__art { max-width: 620px; margin: 4px auto -20px; width: 100%; }
  .bx-out__say { position: static; margin-bottom: 24px; }
  .bx-out__end { grid-column: 1; }
  .bx-faq__say { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 24px; align-items: center; }
  .bx-faq__clock { width: 84px; height: 84px; margin: 0; }
  .bx-faq__in { gap: 28px; }
  .bx-end__ten { justify-self: start; max-width: 250px; }
}
@media (max-width: 760px) {
  html:has(body.bx-page) { --hc-bar-h: 48px; }
  .bx-page .hc-bar__track { gap: 22px; -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); }
  .bx-rev__strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html.bx-js .bx-rev__clip[data-r] { transform: translateY(18px); }
  .bx-out__list summary { position: relative; grid-template-columns: 56px minmax(0, 1fr); gap: 0 14px; padding: 14px 36px 14px 0; min-height: 44px; }
  .bx-out__icon { width: 56px; height: 56px; grid-row: span 2; }
  .bx-out__icon svg { width: 40px; height: 40px; }
  .bx-out__amt { grid-column: 2; }
  .bx-out__list details > p { padding: 0 0 18px; }
  .bx-par__table, .bx-par__table :is(thead, tbody, tfoot) { display: block; }
  .bx-par__table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; padding: 12px 0; border-bottom: 1px solid var(--border); }
  .bx-par__table :is(th, td) { padding: 0; border: 0; font-size: 14.5px; }
  .bx-par__table tr > :first-child { grid-column: 1 / -1; width: auto; margin-bottom: 6px; }
  .bx-par__table thead tr { border-bottom: 2px solid var(--ink); position: sticky; top: calc(var(--hc-nav-h) + var(--hc-bar-h)); background: #fff; z-index: 1; }
  .bx-par__table thead th:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); margin: 0; }
  .bx-par__table tfoot tr { border-bottom: 0; border-top: 2px solid var(--ink); }
  .bx-par__table tfoot :is(th, td) { border: 0; padding: 0; }
  .bx-par__table tbody tr:last-child { border-bottom: 0; }
  .bx-par__table tbody th { font-size: 1.15rem; }
  .bx-par__icon { width: 48px; height: 48px; margin-right: 10px; }
  .bx-tick { margin-right: 6px; }
  .learn-related__card { grid-template-columns: minmax(0, 1fr); padding: 16px 0; }
  .learn-related__card > a { grid-column: 1; }
  .bx-rel__mark { height: 40px; }
  .jrn__clock { min-width: 0; }
  .jrn__ctime { font-size: 2.2rem; }
  .jrn__week { order: 3; flex-basis: 100%; }
  .jrn__ctl { margin-left: auto; }
  .jrn__totals { grid-template-columns: minmax(0, 1fr); }
  .jrn__status { min-height: 9.6em; }
  .jrn__meter { padding: 10px 12px; }
}
/* the calendars on a phone: the whole week at a glance, a day's detail on a tap */
@media (max-width: 640px) {
  .bx-cal__cols, .bx-cal__body { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .bx-cal__cols span:first-child, .bx-cal__hrs { display: none; }
  .bx-cal__cols span { padding: 8px 0; text-align: center; }
  .bx-cal__cols i { display: none; }
  .bx-cal__cols span:nth-child(2), .bx-cal__day:first-of-type { border-left: 0; }
  .bx-cal__cols b { font-size: 13px; margin: 0; }
  .bx-cal__head { padding: 12px 14px; }
  .bx-cal__body { height: 236px; padding-block: 6px; }
  .bx-cal .ev { left: 2px; right: 2px; padding: 0; min-height: 9px; border-left-width: 2px; border-radius: 2px; }
  .bx-cal .ev :is(.ev__t, .ev__ttl) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .bx-cal .ev--off { left: 0; right: 0; }
  .bx-cal .ev__home { width: 26px; height: 26px; stroke-width: 2; }
  .bx-cal .ev:hover, .bx-cal .ev.is-open { transform: none; box-shadow: none; }
  .bx-cal .ev.is-open { outline: 2px solid var(--accent-blue); outline-offset: 1px; z-index: 3; }
  .bx-cal__day { cursor: pointer; }
  .bx-pop.is-inline { position: static; width: auto; pointer-events: auto; border-radius: 0; box-shadow: none; border-top: 1px solid var(--border-strong); opacity: 1; transform: none; }
  .bx-pop.is-inline .bx-pop__fig { border-radius: 0; }
  .bx-pop.is-inline .bx-pop__body { animation: bx-unfold 320ms var(--bx-ease); min-height: 9.5em; }
  .bx-pop.is-inline .bx-pop__step { display: flex; gap: 8px; padding: 0 18px 16px; }
}
/* a phone with scripts off cannot open a block, so each week is written out as a list */
@media (max-width: 640px) {
  html:not(.bx-on) .bx-cal__cols { display: none; }
  html:not(.bx-on) .bx-cal__body { display: block; height: auto; padding: 0; }
  html:not(.bx-on) .bx-cal__day { border-left: 0; border-top: 1px solid var(--border); padding: 10px 12px 12px; cursor: auto; }
  html:not(.bx-on) .bx-cal__day::before { content: attr(data-day); display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; }
  html:not(.bx-on) .bx-cal__lane { position: static; display: grid; gap: 4px; background: none; }
  html:not(.bx-on) .bx-cal .ev { position: static; height: auto; min-height: 32px; flex-direction: row; align-items: center; gap: 10px; padding: 8px 10px; cursor: auto; }
  html:not(.bx-on) .bx-cal .ev :is(.ev__t, .ev__ttl) { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  html:not(.bx-on) .bx-cal .ev__home { display: none; }
}
@media (hover: none), (max-width: 640px) {
  .bx-cal__hint--hover { display: none; }
  .bx-cal__hint--tap { display: inline; }
}
@media (max-width: 480px) {
  .bx-hero__actions .btn { width: 100%; }
  .bx-wk__days span { padding: 6px 5px; height: 48px; }
  .bx-wk--them .bx-wk__days span:not(:last-child)::after { right: 5px; bottom: 6px; width: 13px; height: 13px; box-shadow: inset -4px -2px 0 0 #fff; }
  .jrn__btn { padding: 0 12px; }
  .jrn__delta .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html.bx-js [data-r] { opacity: 1; transform: none; }
  .bx-hero__map .halo, .jrn__map .tok__halo, .jrn__mode.is-moving::before { animation: none; }
  .bx-page .hc-bar, .bx-page .hc-bar__track a::after { transition: none !important; }
}
@media print {
  .bx-page .hc-bar, .jrn__ctl, .bx-pop { display: none !important; }
  html.bx-js [data-r] { opacity: 1 !important; transform: none !important; }
  /* paper is taken the instant the folds open and the reveals are shown: nothing waits on a first frame */
  .bx-page main *, .bx-page main *::before, .bx-page main *::after { animation: none !important; transition: none !important; }
  /* the dark grounds are dropped on paper, so their white words go dark; a
     day away keeps its outline and its moon */
  .jrn, .bx-wk { background: #fff !important; }
  .jrn *, .bx-wk__days span { color: var(--ink) !important; transition: none !important; }
  .bx-wk__days span::before { background: none !important; box-shadow: inset 0 0 0 2px var(--ink); }
  .bx-wk--them .bx-wk__days span:not(:last-child)::after { box-shadow: inset -4.5px -2px 0 0 var(--ink); }
  /* the maps are drawn in white for the dark ground: on paper their lettering, dots and lines are ink */
  .jrn__map :is(.city, .node), .jrn__panel--us .tok__dot { fill: var(--ink) !important; }
  .jrn__map :is(.route, .ring, .link, .tok__halo), .jrn__panel--us .trail { stroke: var(--ink) !important; }
  .jrn__map .insetbox { fill: #fff !important; stroke: var(--ink) !important; }
  .jrn__map .lbl { fill: var(--ink) !important; stroke: #fff !important; }
  /* the hero's flown line is drawn by the script: on paper it has arrived */
  .bx-hero__map .haul-run { stroke-dashoffset: 0 !important; }
}

/* Paper is taken the instant the print dialog opens: nothing may still be fading or sliding in. */
@media print {
  main *, main *::before, main *::after { animation: none !important; transition: none !important; }
}