/* /learn-mexico-vs-panama-cayman: its own sheet, loaded after site.css.
   One idea runs the page: three places, measured from one front door in
   Los Angeles. The hero draws the three trips on a map, the trip section
   lays them on one scale, and the table's round map crops say which place
   each column is. One accent colour throughout: no country gets its own.
   Script: scripts/learn-mexico-vs-panama-cayman.js. With that script absent
   every part is visible, every drawing is whole and every link still jumps. */

html:has(body.mpc) {
  --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);
}
.mpc {
  --mpc-ease: cubic-bezier(.16, 1, .3, 1);
  --mpc-gut: clamp(20px, 4vw, 56px);
  --mpc-pad: clamp(64px, 8vw, 116px);
}

/* ============ GROUND RULES ============ */
.mpc main ::selection { background: var(--accent-blue); color: #fff; }
.mpc-wrap { max-width: calc(1240px + 2 * var(--mpc-gut)); margin-inline: auto; padding-inline: var(--mpc-gut); }
.mpc-defs { position: absolute; }
/* text fills its column; the column sets the measure */
.mpc main p { max-width: none; margin: 0; }
.mpc main a:not(.btn) { border-bottom: 0; }
.mpc 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;
}
.mpc main h3 { font-family: var(--font-display); font-weight: 400; color: var(--ink); font-size: 1.625rem; line-height: 1.15; letter-spacing: 0; margin: 0; max-width: none; }
.mpc main :is(a, .btn, summary):focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 3px; border-radius: 4px; }
/* a part that receives focus after a jump is not itself a control */
.mpc main :is(h1, h2, h3, section)[tabindex="-1"]:focus { outline: none; }
.mpc-sr { display: block; position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.mpc-lede { margin-top: 18px !important; font-size: clamp(1.0625rem, 1.35vw, 1.1875rem); line-height: 1.6; color: var(--ink-soft); }

/* a term a reader may want defined: dotted, and it goes to the glossary */
.mpc-term, .mpc-inline { color: inherit; text-decoration: underline dotted; text-decoration-thickness: 1.5px; text-underline-offset: 4px; text-decoration-color: var(--accent-blue); transition: color 200ms, text-decoration-color 200ms; }
.mpc-inline { text-decoration-style: solid; text-decoration-thickness: 1px; }
.mpc-term:hover, .mpc-inline:hover { color: var(--accent-blue-hover); text-decoration-style: solid; }

/* the plain "go there" link */
.mpc-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; }
.mpc-go span { display: inline-block; transition: transform 360ms var(--mpc-ease); }
.mpc-go:hover { color: var(--accent-blue); text-decoration-color: currentColor; }
.mpc-go:hover span { transform: translateX(6px); }

/* every drawn icon sits in a round badge */
.mpc-icon { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; border: 1.5px solid var(--border-strong); background: #fff; }
.mpc-icon svg { width: 30px; height: 30px; overflow: visible; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mpc-icon svg .f { fill: var(--accent-ice); stroke: none; }
.mpc-icon svg .k { stroke: var(--accent-blue); stroke-width: 2.6; }
.mpc-icon svg .d { stroke-dasharray: 2 5; }

/* ============ REVEALS ============
   Hidden only once the script has said it is running (mpc-js on <html>), so
   with no script nothing is ever hidden. */
.mpc-js [data-r] { transition: opacity 620ms ease, transform 820ms var(--mpc-ease); }
.mpc-js [data-r]:not(.is-in) { opacity: 0; transform: translateY(18px); }
.mpc-js [data-r="left"]:not(.is-in) { transform: translateX(-32px); }
.mpc-js [data-r="left"]:nth-child(2) { transition-delay: 90ms; }
.mpc-js [data-r="left"]:nth-child(3) { transition-delay: 180ms; }
/* these three keep their box and bring their own parts in */
.mpc-js :is([data-r="rows"], [data-r="chain"], [data-r="legs"]):not(.is-in) { opacity: 1; transform: none; }

@keyframes mpc-up { from { opacity: 0; transform: translateY(26px); } }
@keyframes mpc-rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes mpc-fade { from { opacity: 0; } }
@keyframes mpc-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes mpc-fill { from { fill-opacity: 0; } }
@keyframes mpc-pop { 0% { opacity: 0; transform: scale(.4); } 70% { transform: scale(1.12); } 100% { opacity: 1; transform: none; } }
@keyframes mpc-halo { 0% { opacity: .5; transform: scale(.4); } 100% { opacity: 0; transform: scale(2.1); } }
@keyframes mpc-unfold { from { opacity: 0; transform: translateY(-8px); } }

/* ============ HERO ============ */
.mpc-hero { padding-block: clamp(28px, 3.4vw, 52px) clamp(44px, 5vw, 76px); }
.mpc-hero__h1 {
  font-family: var(--font-display); font-weight: 300; color: var(--ink);
  font-size: clamp(2.375rem, 4.9vw, 4.375rem); line-height: 1.04; letter-spacing: -.015em;
  margin: 0 0 clamp(24px, 2.8vw, 38px); max-width: none; text-wrap: wrap;
}
/* the heading breaks where its styling changes, never mid-phrase */
.mpc-hero__h1 > .h-lead, .mpc-hero__h1 > em { display: inline-block; }
.mpc-hero__h1 > em { font-style: italic; color: var(--accent-blue-hover); }
.mpc-hero__row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 4.5vw, 72px); align-items: start; }
.mpc-hero__answer { font-size: clamp(1.125rem, 1.45vw, 1.28rem); line-height: 1.55; color: var(--ink); }
.mpc-hero__also { margin-top: 14px !important; font-size: 17px; line-height: 1.6; color: var(--ink-soft); }

.mpc-toc { list-style: none; margin: clamp(22px, 2.6vw, 34px) 0 0; padding: 0; border-top: 1px solid var(--border-strong); }
.mpc-toc a { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 44px; padding: 8px 0; border-bottom: 1px solid var(--border) !important; font-size: 16px; font-weight: 500; line-height: 1.35; color: var(--ink); transition: color 200ms, padding-left 360ms var(--mpc-ease); }
.mpc-toc a span { flex: none; color: var(--accent-blue); transition: transform 360ms var(--mpc-ease); }
.mpc-toc a:hover { color: var(--accent-blue-hover); padding-left: 8px; }
.mpc-toc a:active, .mpc-next__list a:active, .mpc-go:active, .mpc-pick__clinic:active { color: var(--accent-blue); }
.mpc-toc a:hover span { transform: translateY(3px) rotate(90deg); }

/* the map: land in the wash, three trips from one front door */
.mpc-map { position: relative; margin: 0; aspect-ratio: 742 / 490; }
.mpc-map__svg { display: block; width: 100%; height: 100%; border: 1px solid var(--border); border-radius: 8px; }
.mpc-map__land path { fill: var(--accent-wash); stroke: var(--accent-ice); stroke-width: 1.3; stroke-linejoin: round; }
.mpc-map__border { fill: none; stroke: var(--ink-muted); stroke-width: 1.3; stroke-dasharray: 1.5 4.5; stroke-linecap: round; }
.mpc-route { fill: none; stroke: var(--accent-blue); stroke-width: 2.2; stroke-linecap: round; transition: stroke-width 260ms, opacity 260ms; }
.mpc-route--road { stroke: var(--ink); stroke-width: 3.4; }
.mpc-map__home { fill: var(--ink); stroke: #fff; stroke-width: 2.5; }
.mpc-map__stop { fill: #fff; stroke: var(--accent-blue); stroke-width: 2.2; }
.mpc-pin__dot { fill: var(--accent-blue); stroke: #fff; stroke-width: 2.6; }
.mpc-pin__halo { fill: var(--accent-blue); opacity: 0; transform-box: fill-box; transform-origin: center; }
.mpc-pin__dot, .mpc-map__home, .mpc-map__stop { transform-box: fill-box; transform-origin: center; }
/* the car and the two planes exist only while the script is flying them */
.mpc-craft { display: none; fill: var(--ink); stroke: #fff; stroke-width: 1.2; paint-order: stroke; }
.mpc-craft.is-out { display: block; }

.mpc-map__tag { position: absolute; font-size: 14px; line-height: 1.25; font-weight: 600; color: var(--ink); white-space: nowrap; pointer-events: none; text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 4px #fff; }
/* the three destinations are links to their own trip, further down */
a.mpc-map__tag { pointer-events: auto; transition: color 200ms, opacity 260ms; }
a.mpc-map__tag > span { text-decoration: underline; text-decoration-color: var(--accent-ice); text-decoration-thickness: 1.5px; text-underline-offset: 4px; transition: text-decoration-color 200ms; }
a.mpc-map__tag::after { content: ""; position: absolute; inset: -6px -10px; }
a.mpc-map__tag:hover, a.mpc-map__tag:focus-visible { color: var(--accent-blue-hover); }
a.mpc-map__tag:hover > span, a.mpc-map__tag:focus-visible > span { text-decoration-color: var(--accent-blue); }
a.mpc-map__tag:active { color: var(--accent-blue); }
.mpc-map__tag b { display: block; font-weight: 500; color: var(--accent-blue-hover); font-variant-numeric: tabular-nums lining-nums; }
.mpc-map__tag--la { left: 13.9%; top: 17.7%; transform: translate(8px, calc(-100% - 8px)); }
.mpc-map__tag--mx { left: 15.8%; top: 21.8%; transform: translate(calc(-100% - 12px), 2px); text-align: right; }
.mpc-map__tag--pa { left: 75.4%; top: 84.2%; transform: translate(calc(-100% - 22px), 8px); text-align: right; }
.mpc-map__tag--mia { left: 74.2%; top: 39.7%; transform: translate(12px, -50%); }
.mpc-map__tag--ky { left: 72.6%; top: 56.9%; transform: translate(calc(-100% + 12px), 13px); text-align: right; }

/* a trip the reader points at stands forward, the other two step back */
.mpc-map[data-lit] .mpc-route { opacity: .22; }
.mpc-map[data-lit="mx"] .mpc-route[data-route="mx"],
.mpc-map[data-lit="pa"] .mpc-route[data-route="pa"],
.mpc-map[data-lit="ky"] .mpc-route:is([data-route="ky"], [data-route="ky2"]) { opacity: 1; stroke-width: 3.4; }
.mpc-map[data-lit="mx"] .mpc-route[data-route="mx"] { stroke-width: 4.6; }
.mpc-map[data-lit] a.mpc-map__tag { opacity: .45; }
.mpc-map[data-lit="mx"] .mpc-map__tag--mx, .mpc-map[data-lit="pa"] .mpc-map__tag--pa, .mpc-map[data-lit="ky"] .mpc-map__tag--ky { opacity: 1; }

/* first paint: the heading, the answer, the coast, then the three trips */
.mpc-js .mpc-hero__h1 > * { animation: mpc-up 900ms var(--mpc-ease) both; }
.mpc-js .mpc-hero__h1 > em { animation-delay: 110ms; }
.mpc-js .mpc-hero__text > p { animation: mpc-up 900ms var(--mpc-ease) 240ms both; }
.mpc-js .mpc-hero__text > .mpc-hero__also { animation-delay: 320ms; }
.mpc-js .mpc-toc { animation: mpc-fade 600ms ease 420ms both; }
.mpc-js .mpc-toc li { animation: mpc-rise 700ms var(--mpc-ease) both; animation-delay: calc(460ms + var(--n, 0) * 70ms); }
.mpc-js .mpc-map__land path { stroke-dasharray: 1; animation: mpc-draw 1700ms cubic-bezier(.4, 0, .2, 1) 150ms both, mpc-fill 900ms ease 900ms both; }
.mpc-js .mpc-map__border { animation: mpc-fade 700ms ease 1500ms both; }
.mpc-js .mpc-map__home { animation: mpc-pop 460ms var(--mpc-ease) 1500ms both; }
.mpc-js .mpc-map__tag--la { animation: mpc-rise 600ms var(--mpc-ease) 1600ms both; }
/* each place waits for its trip to arrive (the script marks it) */
.mpc-js .mpc-map.is-set:not(.is-done) :is(.mpc-pin, .mpc-map__stop, .mpc-map__tag:not(.mpc-map__tag--la)):not(.is-there) { opacity: 0; }
.mpc-js .mpc-map :is(.mpc-pin__dot, .mpc-map__stop).is-there, .mpc-js .mpc-map .is-there .mpc-pin__dot { animation: mpc-pop 460ms var(--mpc-ease) both; }
.mpc-js .mpc-map .is-there .mpc-pin__halo { animation: mpc-halo 900ms ease-out 120ms both; }
.mpc-js .mpc-map__tag.is-there { animation: mpc-rise 520ms var(--mpc-ease) both; }

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

/* ============ REGULATORS ============
   Three entries, name on the left, what the body does on the right, then
   the same three read across five things a regulator can do. */
.mpc-reg { padding-block: var(--mpc-pad); border-top: 1px solid var(--border); }
.mpc-reg__list { margin-top: clamp(32px, 4vw, 56px); border-top: 1px solid var(--border-strong); }
.mpc-reg__item { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 14px clamp(24px, 4vw, 64px); padding-block: clamp(24px, 3vw, 36px); border-bottom: 1px solid var(--border); }
.mpc-reg__agency { margin-top: 8px !important; font-size: 14px; line-height: 1.45; color: var(--ink-muted); }
.mpc-reg__body p { font-size: 17px; line-height: 1.65; color: var(--ink-soft); }
.mpc-reg__body strong { font-weight: 600; color: var(--ink); }
.mpc-reg__marks { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 26px; margin: 16px 0 0; padding: 0; font-size: 15px; font-weight: 500; color: var(--ink); }
.mpc-reg__marks li { display: flex; align-items: center; gap: 9px; }
.mpc-reg__marks li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-blue); }

.mpc-read { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 14px clamp(24px, 4vw, 64px); margin-top: clamp(36px, 4.5vw, 60px); }
.mpc-read h3 { align-self: start; }
.mpc-read p { font-size: clamp(1.125rem, 1.5vw, 1.3rem); line-height: 1.55; color: var(--ink); }

/* ============ TABLES ============ */
.mpc-table { width: 100%; border-collapse: collapse; table-layout: fixed; margin-top: clamp(28px, 3.6vw, 48px); }
.mpc-table caption { caption-side: top; text-align: left; padding-bottom: 18px; font-family: var(--font-display); font-size: 1.625rem; line-height: 1.15; color: var(--ink); }
.mpc-table thead th { text-align: left; vertical-align: bottom; padding: 0 18px 14px; font-size: 16px; font-weight: 600; color: var(--ink); }
.mpc-table thead tr { border-bottom: 2px solid var(--ink); }
.mpc-table col:first-child { width: 28%; }
.mpc-table thead td { border: 0; padding: 0; }
.mpc-table tbody tr { border-bottom: 1px solid var(--border); }
.mpc-table tbody th { text-align: left; vertical-align: top; padding: 18px 18px 18px 0; font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--ink); }
.mpc-table td { vertical-align: top; padding: 18px; font-size: 16px; line-height: 1.5; color: var(--ink-soft); border-left: 1px solid var(--border); }
.mpc-table td b { display: block; font-weight: 600; color: var(--ink); }
.mpc-table td span { display: block; }
.mpc-table thead small { display: block; margin-top: 2px; font-size: 14px; font-weight: 400; color: var(--ink-muted); }
/* five things a regulator can do, each with its drawing */
/* the second half of the long table reads on from the first */
.mpc-table--rest { margin-top: 0; }

.mpc-js .mpc-table[data-r] tbody tr { transition: opacity 520ms ease, transform 720ms var(--mpc-ease); transition-delay: calc(var(--i, 0) * 80ms); }
.mpc-js .mpc-table[data-r]:not(.is-in) tbody tr { opacity: 0; transform: translateY(14px); }
/* each icon is drawn as its row arrives */

/* the round map crops that head the long table */
.mpc-loupe { display: block; width: 76px; height: 76px; margin-bottom: 14px; border-radius: 50%; border: 1.5px solid var(--border-strong); background: #fff; overflow: hidden; }
.mpc-loupe use { fill: var(--accent-wash); stroke: var(--accent-ice); stroke-width: 1.6; }
.mpc-loupe__pin { fill: var(--accent-blue); stroke: #fff; stroke-width: 3; transform-box: fill-box; transform-origin: center; }
.mpc-js .mpc-table:not(.is-in) .mpc-loupe__pin { opacity: 0; }
.mpc-js .mpc-table.is-in .mpc-loupe__pin { animation: mpc-pop 520ms var(--mpc-ease) both; }
.mpc-js .mpc-table.is-in th:nth-child(3) .mpc-loupe__pin { animation-delay: 140ms; }
.mpc-js .mpc-table.is-in th:nth-child(4) .mpc-loupe__pin { animation-delay: 280ms; }

/* ============ "READ MORE" (a phone only: wider screens show it all) ============ */
.mpc-fold > summary { display: none; }
.mpc-fold > summary::-webkit-details-marker { display: none; }
.mpc-fold__shut, .mpc-fold[open] .mpc-fold__open { display: none; }
.mpc-fold[open] .mpc-fold__shut { display: inline; }

/* ============ THE CELLS (navy band) ============
   Three chains. A cell leaves the lab and is handed on; the chain that
   crosses a border is dashed and takes longer. */
.mpc-cells { padding-block: var(--mpc-pad); background: var(--navy-brand); color: #fff; }
.mpc .mpc-cells h2, .mpc .mpc-cells h3 { color: #fff; }
.mpc-chain { list-style: none; margin: clamp(32px, 4.5vw, 60px) 0 0; padding: 0; }
.mpc-chain__row { display: grid; grid-template-columns: minmax(120px, 2fr) minmax(0, 10fr); align-items: center; gap: 20px; padding-block: 28px; border-top: 1px solid rgba(255, 255, 255, .18); }
.mpc-chain__row:last-child { border-bottom: 1px solid rgba(255, 255, 255, .18); }
.mpc-chain__row ul { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; }
.mpc-chain__row li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; padding-inline: 8px; text-align: center; font-size: 15px; line-height: 1.4; color: rgba(255, 255, 255, .88); }
.mpc-cells .mpc-icon { position: relative; z-index: 1; width: 64px; height: 64px; border-color: var(--accent-ice); background: var(--navy-brand); }
.mpc-cells .mpc-icon svg { width: 32px; height: 32px; stroke: #dbe8f5; }
.mpc-cells .mpc-icon svg .f { fill: rgba(124, 169, 209, .5); }
.mpc-cells .mpc-icon svg .k { stroke: #fff; }
/* one connector per gap, badge to badge, and nothing after the last */
.mpc-chain__row li + li::before { content: ""; position: absolute; top: 31px; left: calc(-50% + 42px); width: calc(100% - 84px); border-top: 2px solid rgba(124, 169, 209, .6); }
.mpc-chain__row--far li + li::before { border-top-style: dashed; }
.mpc-chain__run { position: absolute; top: 32px; left: calc(-50% + 42px); width: calc(100% - 84px); height: 0; opacity: 0; pointer-events: none; }
.mpc-chain__run::after { content: ""; position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, .2); }
.mpc-cells__note { margin-top: clamp(28px, 3.6vw, 44px) !important; font-size: 17px; line-height: 1.65; color: rgba(255, 255, 255, .86); }

@keyframes mpc-run { 0% { opacity: 0; transform: translateX(0); } 3% { opacity: 1; } 17% { opacity: 1; transform: translateX(100%); } 20%, 100% { opacity: 0; transform: translateX(100%); } }
@keyframes mpc-run-far { 0% { opacity: 0; transform: translateX(0); } 3% { opacity: 1; } 13% { transform: translateX(46%); } 24% { transform: translateX(46%); } 37% { opacity: 1; transform: translateX(100%); } 40%, 100% { opacity: 0; transform: translateX(100%); } }
@keyframes mpc-node { 0%, 15% { border-color: var(--accent-ice); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } 19% { border-color: #fff; box-shadow: 0 0 0 0 rgba(255, 255, 255, .5); } 34% { border-color: var(--accent-ice); box-shadow: 0 0 0 12px rgba(255, 255, 255, 0); } 100% { border-color: var(--accent-ice); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } }
@keyframes mpc-node-far { 0%, 35% { border-color: var(--accent-ice); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } 39% { border-color: #fff; box-shadow: 0 0 0 0 rgba(255, 255, 255, .5); } 54% { border-color: var(--accent-ice); box-shadow: 0 0 0 12px rgba(255, 255, 255, 0); } 100% { border-color: var(--accent-ice); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } }
/* the chain comes in a row at a time, then runs while it is on screen */
.mpc-js .mpc-chain__row { transition: opacity 620ms ease, transform 820ms var(--mpc-ease); }
.mpc-js .mpc-chain__row:nth-child(2) { transition-delay: 120ms; }
.mpc-js .mpc-chain__row:nth-child(3) { transition-delay: 240ms; }
.mpc-js .mpc-chain:not(.is-in) .mpc-chain__row { opacity: 0; transform: translateY(18px); }
.mpc-chain.is-live .mpc-chain__run { animation: mpc-run 7s cubic-bezier(.45, 0, .25, 1) 900ms infinite both; }
.mpc-chain.is-live li:nth-child(3) .mpc-chain__run { animation-delay: 2100ms; }
.mpc-chain.is-live li:nth-child(2) .mpc-icon { animation: mpc-node 7s ease-out 900ms infinite both; }
.mpc-chain.is-live li:nth-child(3) .mpc-icon { animation: mpc-node 7s ease-out 2100ms infinite both; }
.mpc-chain.is-live .mpc-chain__row--far .mpc-chain__run { animation-name: mpc-run-far; }
.mpc-chain.is-live .mpc-chain__row--far li:nth-child(3) .mpc-chain__run { animation-delay: 3500ms; }
.mpc-chain.is-live .mpc-chain__row--far li .mpc-icon { animation-name: mpc-node-far; }
.mpc-chain.is-live .mpc-chain__row--far li:nth-child(3) .mpc-icon { animation-delay: 3500ms; }

/* ============ THE TRIP ============
   One scale for all three: the full track is the longest trip. */
.mpc-trip { padding-block: var(--mpc-pad); }
.mpc-legs { list-style: none; margin: clamp(32px, 4.5vw, 60px) 0 0; padding: 0; border-bottom: 1px solid var(--border); }
.mpc-leg { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); column-gap: clamp(24px, 4vw, 64px); padding-block: clamp(24px, 3vw, 34px); border-top: 1px solid var(--border); }
.mpc-leg__time { margin-top: 2px !important; font-size: 15px; line-height: 3.5rem; color: var(--ink-muted); }
.mpc-leg__time b { font-family: var(--font-display); font-weight: 300; font-size: clamp(2.25rem, 3.4vw, 3rem); line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums lining-nums; margin-right: 6px; }
.mpc-leg__sum { margin-top: 4px !important; font-size: 15px; line-height: 1.5; color: var(--ink-soft); }
.mpc-leg__bar { position: relative; height: 56px; }
.mpc-leg__bar::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px dotted var(--border-strong); }
.mpc-leg__fill, .mpc-leg__run { position: absolute; left: 0; width: calc((100% - 56px) * var(--h) / 10.5 + 28px); }
.mpc-leg__fill { top: 50%; height: 6px; margin-top: -2px; border-radius: 3px; background: var(--accent-blue); transform-origin: left; }
.mpc-leg__run { top: 0; height: 56px; }
.mpc-leg__run .mpc-icon { position: absolute; right: -28px; top: 0; border-color: var(--accent-blue); }
.mpc-leg__run .mpc-icon svg .f { fill: var(--accent-blue); }
.mpc-leg dl { display: flex; flex-wrap: wrap; gap: 8px 36px; margin: 16px 0 0; }
.mpc-leg dl div { display: flex; align-items: baseline; gap: 10px; font-size: 15px; line-height: 1.5; }
.mpc-leg dt { color: var(--ink-muted); }
.mpc-leg dd { margin: 0; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.mpc-leg__key { margin-top: 12px !important; font-size: 15px; line-height: 1.5; color: var(--ink-soft); }
.mpc-trip__east { margin-top: clamp(28px, 3.6vw, 44px) !important; font-size: 17px; line-height: 1.65; color: var(--ink-soft); }
.mpc-trip__east strong { font-weight: 600; color: var(--ink); }

/* each bar grows for as long as its trip is long */
.mpc-js .mpc-leg { transition: opacity 620ms ease; }
.mpc-js .mpc-leg__fill, .mpc-js .mpc-leg__run { transition: transform calc(520ms + var(--h) * 170ms) cubic-bezier(.3, .1, .2, 1) 200ms; }
.mpc-js .mpc-legs:not(.is-in) .mpc-leg { opacity: 0; }
.mpc-js .mpc-legs:not(.is-in) .mpc-leg__fill { transform: scaleX(0); }
.mpc-js .mpc-legs:not(.is-in) .mpc-leg__run { transform: translateX(-100%); }
/* the trip a reader arrived at from the map is marked for a moment */
@keyframes mpc-mark { 0% { box-shadow: 0 0 0 0 rgba(45, 110, 177, .45); } 100% { box-shadow: 0 0 0 16px rgba(45, 110, 177, 0); } }
.mpc-leg:target .mpc-leg__run .mpc-icon { animation: mpc-mark 1100ms ease-out 500ms 2; }

/* ============ SIDE BY SIDE ============ */
.mpc-matrix { padding-block: var(--mpc-pad); border-top: 1px solid var(--border); }

/* ============ WHICH FITS (the one tinted band) ============ */
.mpc-fit { padding-block: var(--mpc-pad); background: var(--accent-wash); }
.mpc-picks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto 1fr auto; margin-top: clamp(32px, 4vw, 52px); }
.mpc-pick { grid-row: span 4; display: grid; grid-template-rows: subgrid; padding-inline: clamp(20px, 2.4vw, 36px); border-left: 1px solid var(--border-strong); }
.mpc-pick:first-child { padding-left: 0; border-left: 0; }
.mpc-pick:last-child { padding-right: 0; }
.mpc .mpc-pick h3 { margin-top: 22px; }
.mpc-pick p { margin-top: 12px !important; font-size: 17px; line-height: 1.65; color: var(--ink-soft); }
.mpc-pick p em { font-style: italic; color: var(--ink); }
@supports not (grid-template-rows: subgrid) { .mpc-pick { display: flex; flex-direction: column; } }
.mpc-js .mpc-pick[data-r] { transition-delay: calc(var(--i) * 110ms); }
.mpc-js .mpc-pick[data-r]:not(.is-in) { transform: translateY(26px); }
/* the one link out to a named clinic, with that clinic's own mark */
.mpc-pick__clinic { align-self: end; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 22px; font-size: 15px; font-weight: 600; color: var(--accent-blue-hover); transition: color 200ms; }
.mpc-pick__clinic img[width][height] { display: block; width: auto; height: auto; max-width: min(100%, 230px); }
.mpc-pick__clinic > span { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.mpc-pick__clinic > span span { transition: transform 360ms var(--mpc-ease); }
.mpc-pick__clinic:hover { color: var(--accent-blue); }
.mpc-pick__clinic:hover > span span { transform: translateX(6px); }

.mpc-caution { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: clamp(18px, 2.4vw, 32px); align-items: start; margin-top: clamp(32px, 4vw, 52px); padding-top: clamp(24px, 3vw, 36px); border-top: 1px solid var(--border-strong); }
.mpc-caution p { margin-top: 10px !important; font-size: 17px; line-height: 1.65; color: var(--ink-soft); }

/* ============ KEEP READING ============ */
.mpc-next { padding-block: var(--mpc-pad) clamp(40px, 5vw, 72px); }
.mpc-next__list { list-style: none; margin: clamp(24px, 3vw, 40px) 0 0; padding: 0; border-top: 1px solid var(--border-strong); }
.mpc-next__list a { display: flex; align-items: center; gap: clamp(14px, 2vw, 24px); min-height: 76px; padding: 12px 0; border-bottom: 1px solid var(--border) !important; font-family: var(--font-display); font-size: clamp(1.3rem, 2vw, 1.625rem); line-height: 1.2; color: var(--ink); transition: color 200ms, padding-left 420ms var(--mpc-ease); }
.mpc-next .mpc-icon { width: 52px; height: 52px; transition: border-color 260ms, background-color 260ms; }
.mpc-next .mpc-icon svg { width: 22px; height: 26px; stroke-width: 1.8; }
.mpc-next__go { margin-left: auto; font-family: var(--font-body); font-size: 18px; color: var(--accent-blue); transition: transform 420ms var(--mpc-ease); }
.mpc-next__list a:hover { color: var(--accent-blue-hover); padding-left: 10px; }
.mpc-next__list a:hover .mpc-icon { border-color: var(--accent-blue); background: var(--accent-wash); }
.mpc-next__list a:hover .mpc-next__go { transform: translateX(8px); }
.mpc-js .mpc-next__list li[data-r] { transition-delay: calc(var(--i) * 70ms); }
.mpc-js .mpc-next__list li[data-r]:not(.is-in) { transform: translateX(-20px); }

/* ============ SELF-ASSESSMENT ============ */
.mpc-end { border-top: 1px solid var(--border); padding-block: clamp(56px, 7vw, 96px); background: #fff; }
.mpc-end .assess-band__inner { max-width: 720px; margin: 0 auto; padding: 0 var(--mpc-gut); display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.mpc .mpc-end .assess-band__title { font-size: clamp(1.9rem, 3.6vw, 2.8rem); line-height: 1.05; text-wrap: balance; }
.mpc-end .assess-band__lede { font-size: 18px; line-height: 1.6; color: var(--ink-soft); }
.mpc-end .btn { margin-top: 6px; }
.mpc-end .assess-band__note { font-size: 14px; color: var(--ink-muted); }

/* ============ NARROWER ============ */
@media (max-width: 1100px) {
  /* the bar's track can scroll here, so its edges fade */
  .mpc .hc-bar__track { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent); }
}
@media (max-width: 980px) {
  /* a narrow screen reads the answer first, then the map, then the contents */
  .mpc-hero__row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .mpc-hero__text { display: contents; }
  .mpc-map { order: 1; max-width: 640px; margin-top: 26px; }
  .mpc-toc { order: 2; }
  .mpc-picks { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .mpc-pick { grid-row: auto; display: block; padding: 28px 0 0; margin-top: 28px; border-left: 0; border-top: 1px solid var(--border-strong); }
  .mpc-pick:first-child { padding-top: 0; margin-top: 0; border-top: 0; }
  .mpc-reg__item, .mpc-read, .mpc-leg { grid-template-columns: minmax(0, 1fr); }
  .mpc-leg__path { margin-top: 14px; }
  .mpc-chain__row { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  html:has(body.mpc) { --hc-bar-h: 48px; }
  .mpc .hc-bar__track { gap: 22px; }
  .mpc-map__tag { font-size: 13px; }
  .mpc-js [data-r="left"]:not(.is-in) { transform: translateY(18px); }

  /* tables turn into one block a row: the row's name, then each country */
  .mpc-table, .mpc-table :is(tbody, tr, th, td) { display: block; }
  .mpc-table caption { display: block; }
  .mpc-table colgroup { display: none; }
  .mpc-table--main:not(.mpc-table--rest) thead { display: block; }
  .mpc-table--main:not(.mpc-table--rest) thead tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding-bottom: 16px; }
  .mpc-table--main thead td { display: none; }
  .mpc-table--main thead th { display: block; padding: 0; font-size: 15px; }
  .mpc-table--main thead small { font-size: 13px; line-height: 1.35; }
  .mpc-loupe { width: 64px; height: 64px; margin-bottom: 10px; }
  .mpc-table tbody tr { padding-block: 16px; }
  .mpc-table tbody th { padding: 0 0 8px; font-size: 17px; }
  /* the five short rows keep their three answers side by side */
  .mpc-table td { position: relative; min-height: 28px; padding: 5px 0 5px 92px; border-left: 0; }
  .mpc-table td::before { content: attr(data-c); position: absolute; left: 0; top: 5px; font-size: 14px; font-weight: 500; color: var(--ink-muted); }

  /* the rest of the long table waits behind a native "Read more" */
  .mpc-fold > summary { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; margin-top: 6px; cursor: pointer; list-style: none; font-size: 16px; font-weight: 600; color: var(--accent-blue-hover); transition: color 200ms; }
  .mpc-fold > summary::after { content: ""; width: 9px; height: 9px; margin-top: -4px; border-right: 2px solid; border-bottom: 2px solid; transform: rotate(45deg); transition: transform 360ms var(--mpc-ease); }
  .mpc-fold > summary:hover { color: var(--accent-blue); }
  .mpc-fold[open] > summary::after { margin-top: 4px; transform: rotate(-135deg); }
  .mpc-fold[open] > .mpc-fold__body { animation: mpc-unfold 420ms var(--mpc-ease); }
  .mpc-fold--rows[open] > summary { order: 2; }
  .mpc-fold--rows[open] { display: flex; flex-direction: column; }

  .mpc-chain__row { padding-block: 22px; gap: 16px; }
  .mpc-chain__row li { font-size: 14px; padding-inline: 4px; }
  .mpc-cells .mpc-icon { width: 56px; height: 56px; }
  .mpc-chain__row li + li::before, .mpc-chain__run { top: 27px; left: calc(-50% + 36px); width: calc(100% - 72px); }
  .mpc-chain__run { top: 28px; }
  .mpc-reg__marks { flex-direction: column; }
  .mpc-leg dl { flex-direction: column; gap: 6px; }
  .mpc-leg dl div { justify-content: space-between; }
  .mpc-caution { grid-template-columns: minmax(0, 1fr); }
  .mpc-end .btn { width: 100%; }
}

@media (hover: none) {
  .mpc-toc a:hover, .mpc-next__list a:hover { padding-left: 0; }
  .mpc-next__list a:hover .mpc-icon { border-color: var(--border-strong); background: #fff; }
}

/* ============ STILL ============
   Reduced motion: every drawing holds its finished state and nothing moves. */
@media (prefers-reduced-motion: reduce) {
  .mpc main *, .mpc main *::before, .mpc main *::after { animation: none !important; transition: none !important; }
  .mpc-js [data-r]:not(.is-in), .mpc-js .mpc-table:not(.is-in) tbody tr, .mpc-js .mpc-chain:not(.is-in) .mpc-chain__row, .mpc-js .mpc-legs:not(.is-in) .mpc-leg { opacity: 1 !important; transform: none !important; }
  .mpc-js .mpc-legs:not(.is-in) :is(.mpc-leg__fill, .mpc-leg__run) { transform: none !important; }
  .mpc-js .mpc-map__land path { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; opacity: 1 !important; }
  .mpc-js .mpc-loupe__pin, .mpc-js .mpc-map :is(.mpc-pin, .mpc-map__stop, .mpc-map__tag) { opacity: 1 !important; }
  .mpc-chain__run, .mpc-craft { display: none !important; }
  .mpc .hc-bar { transition: none !important; }
}
@media print {
  .mpc .hc-bar, .mpc-chain__run, .mpc-craft, .mpc-fold > summary { display: none !important; }
  .mpc-js [data-r], .mpc-js .mpc-table tbody tr, .mpc-js .mpc-chain__row, .mpc-js .mpc-leg, .mpc-js .mpc-loupe__pin { opacity: 1 !important; transform: none !important; animation: none !important; }
  .mpc-js :is(.mpc-leg__fill, .mpc-leg__run) { transform: none !important; }
  .mpc-js .mpc-map :is(.mpc-pin, .mpc-map__stop, .mpc-map__tag), .mpc-js .mpc-icon svg * { opacity: 1 !important; stroke-dashoffset: 0 !important; animation: none !important; }
  .mpc-cells, .mpc-fit { background: #fff; color: var(--ink); }
  .mpc .mpc-cells h2, .mpc .mpc-cells h3, .mpc-cells li, .mpc-cells__note { color: var(--ink) !important; }
  .mpc-cells .mpc-icon { background: #fff; border-color: var(--ink); }
  .mpc-cells .mpc-icon svg { stroke: var(--ink); }
}

/* 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; }
}