/* /learn-why-mexico. Loaded after site.css, by learn-why-mexico.html only.
   The page answers one question (why Mexico, and not somewhere else), so each
   part has its own shape and its own way of arriving: a drive that happens
   once on first paint, four rows that settle a question, three drawings drawn
   to the page's own numbers, one navy band that counts, cards on the one
   tinted band, five refusals struck through. Everything holds its end state
   with scripts off, with reduced motion and in print. */

html:has(body.why-mexico) {
  --mx-max: 1240px;
  --mx-gut: clamp(20px, 4vw, 56px);
  --hc-nav-h: 64px;            /* fallback; scripts/learn-why-mexico.js sets the real header height */
  --hc-bar-h: 52px;
  --mx-ease: cubic-bezier(.16, 1, .3, 1);
  /* 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) + 20px);
}
body.why-mexico { background: var(--white); }

/* Text fills its column. The two resets are colors_and_type.css's: a bare
   <p> capped at 42rem, and a grey underline on every <a>. */
.why-mexico main { overflow-x: clip; }
.why-mexico main p { max-width: none; margin: 0; }
.why-mexico main a:not(.btn) { border-bottom: 0; }
.why-mexico main :is(h1, h2, h3) { text-wrap: wrap; margin: 0; }
.why-mexico main :is(h1, h2) em { color: var(--accent-blue); font-style: italic; }
/* a heading that has to wrap breaks where the styling changes */
.why-mexico .h-lead, .why-mexico main :is(h1, h2) > em { display: inline-block; }
.why-mexico main h2 {
  font-family: var(--font-display); font-size: clamp(1.9rem, 3.1vw, 2.85rem); line-height: 1.1; font-weight: 300;
  color: var(--ink); margin: 0 0 clamp(22px, 2.8vw, 36px);
}
.mx-wrap { max-width: var(--mx-max); margin: 0 auto; padding: 0 var(--mx-gut); }

.why-mexico main [tabindex="-1"]:focus { outline: none; }
.why-mexico main a:focus-visible, .why-mexico main summary:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 3px; border-radius: 3px; }

/* a link inside running text: dotted, so it reads as a reference */
.mx-term, .mx-limit p a, a.mx-cite {
  color: inherit; padding-block: 6px;
  text-decoration: underline dotted var(--accent-blue) 1.5px; text-underline-offset: 3px;
  transition: color 200ms, text-decoration-color 200ms;
}
.mx-limit p a { color: var(--accent-blue-hover); }
.mx-term:hover, .mx-limit p a:hover { color: var(--accent-blue); text-decoration-style: solid; }

/* the arrow on a button or a link leans the way it points */
.mx-arr { display: inline-block; transition: transform 320ms var(--mx-ease); }
a:hover > .mx-arr, a:focus-visible > .mx-arr, a:hover .mx-art__go .mx-arr { transform: translateX(4px); }

/* said once for a screen reader, where the figure beside it is still counting */
.mx-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* the small drawings share one pen */
:where(.why-mexico main) svg { display: block; overflow: visible; fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ============ HERO: the drive happens once, in the order it is driven ============
   Pure CSS, so it runs from the first paint and needs no script. */
.mx-hero { padding: clamp(28px, 4vw, 56px) 0 clamp(48px, 6vw, 80px); }
.mx-hero__h1 { font-family: var(--font-display); font-size: clamp(2.2rem, 5vw, 4.1rem); line-height: 1.06; font-weight: 300; color: var(--ink); }
.mx-hero__h1 > * { animation: mx-rise 900ms var(--mx-ease) both; }
.mx-hero__h1 > em { animation-delay: 140ms; }
.mx-hero__row {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px); align-items: center; margin-top: clamp(24px, 3.4vw, 44px);
}
.mx-hero__text > * { animation: mx-rise 900ms var(--mx-ease) both; }
.mx-hero__answer {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(1.28rem, 1.85vw, 1.62rem); line-height: 1.38; color: var(--ink); animation-delay: 260ms;
}
.why-mexico .mx-hero__lede { margin-top: clamp(14px, 1.6vw, 20px); font-size: clamp(1.02rem, 1.25vw, 1.14rem); line-height: 1.6; color: var(--ink-soft); animation-delay: 360ms; }
.mx-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(22px, 2.8vw, 34px); animation-delay: 460ms; }
.mx-hero__actions .btn--lg { padding-inline: 24px; }

.mx-drive { margin: 0; animation: mx-fade 700ms 200ms both; }
.mx-drive__stage { position: relative; }
.mx-drive svg { width: 100%; height: auto; }
.mx-drive__ground { stroke: var(--border-strong); }
.mx-drive__route { stroke: var(--accent-blue); stroke-width: 2.5; stroke-dasharray: 100; stroke-dashoffset: 0; animation: mx-route 3600ms 900ms linear both; }
.mx-drive__border { stroke: var(--ink-muted); stroke-dasharray: 1 7; stroke-width: 2; animation: mx-fade 600ms 500ms both; }
.mx-drive__sd { animation: mx-fade 600ms 300ms both; }
.mx-drive__plane { animation: mx-land 1400ms 300ms var(--mx-ease) both; }
.mx-drive__gate { animation: mx-fade 600ms 500ms both; }
.mx-drive__arm { stroke: var(--accent-blue); stroke-width: 2.5; transform-origin: 395px 152px; transform: rotate(72deg); animation: mx-arm 3600ms 900ms both; }
.mx-drive__hosp { animation: mx-fade 600ms 700ms both; }
.mx-drive__cross { stroke: var(--accent-blue); stroke-width: 3; transform-box: fill-box; transform-origin: center; animation: mx-pop 700ms 4400ms var(--mx-ease) both; }
.mx-drive__suv { transform: translateX(424px); animation: mx-suv 3600ms 900ms both; }
.mx-drive__suv path { fill: var(--ink); }
.mx-drive__suv circle { fill: var(--white); stroke-width: 2; }
/* the three stops, named under the places they are drawn */
.mx-drive__stops { list-style: none; margin: 6px 0 0; padding: 0; position: relative; height: 24px; font-size: 14px; font-weight: 500; line-height: 24px; color: var(--ink); white-space: nowrap; }
.mx-drive__stops li { position: absolute; top: 0; transform: translateX(-50%); animation: mx-fade 600ms both; }
.mx-drive__stops li:nth-child(1) { left: 10.7%; animation-delay: 400ms; }
.mx-drive__stops li:nth-child(2) { left: 69.1%; animation-delay: 2700ms; }
.mx-drive__stops li:nth-child(3) { left: 89.3%; animation-delay: 4300ms; }
.mx-drive__stage { padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.mx-drive figcaption { margin-top: 12px; font-size: 15px; line-height: 1.5; color: var(--ink-muted); animation: mx-fade 700ms 4500ms both; }

@keyframes mx-fade { from { opacity: 0; } }
@keyframes mx-rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes mx-rule { from { transform: scaleX(0); } }
@keyframes mx-pop { from { opacity: 0; transform: scale(0); } 60% { transform: scale(1.25); } }
@keyframes mx-land { from { opacity: 0; transform: translate(-46px, -26px); } }
/* out of San Diego, a pause at the gate while the arm lifts, then across */
@keyframes mx-suv {
  0% { transform: translateX(66px); animation-timing-function: cubic-bezier(.45, 0, .3, 1); }
  58% { transform: translateX(338px); }
  70% { transform: translateX(338px); animation-timing-function: cubic-bezier(.45, 0, .2, 1); }
  100% { transform: translateX(424px); }
}
@keyframes mx-route {
  0% { stroke-dashoffset: 91; animation-timing-function: cubic-bezier(.45, 0, .3, 1); }
  58% { stroke-dashoffset: 27; }
  70% { stroke-dashoffset: 27; animation-timing-function: cubic-bezier(.45, 0, .2, 1); }
  100% { stroke-dashoffset: 0; }
}
@keyframes mx-arm { 0%, 56% { transform: rotate(0deg); } 68%, 100% { transform: rotate(72deg); } }

/* Contents: the page's own headings, as links. */
.mx-toc { position: relative; margin-top: clamp(36px, 5vw, 64px); }
.mx-toc::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--ink); transform-origin: left; animation: mx-rule 1100ms 620ms var(--mx-ease) both; }
.mx-toc__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-rows: repeat(3, auto); grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); column-gap: clamp(24px, 4vw, 64px); }
.mx-toc__list li { animation: mx-rise 800ms var(--mx-ease) both; animation-delay: calc(760ms + var(--i, 0) * 80ms); }
.mx-toc__list li:nth-child(2) { --i: 1; } .mx-toc__list li:nth-child(3) { --i: 2; }
.mx-toc__list li:nth-child(4) { --i: 3; } .mx-toc__list li:nth-child(5) { --i: 4; }
.mx-toc__list a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px; min-height: 44px; padding: 15px 0;
  border-bottom: 1px solid var(--border) !important;
  font-family: var(--font-display); font-size: clamp(1.12rem, 1.45vw, 1.3rem); line-height: 1.25; color: var(--ink);
  transition: color 220ms, padding 320ms var(--mx-ease);
}
.mx-toc__list a::after { content: "\2193"; flex: none; font-family: var(--font-body); font-size: 18px; color: var(--accent-blue); opacity: .35; transform: translateY(-4px); transition: transform 320ms var(--mx-ease), opacity 220ms; }
.mx-toc__list a:hover, .mx-toc__list a:focus-visible { color: var(--accent-blue); padding-left: 8px; }
.mx-toc__list a:hover::after, .mx-toc__list a:focus-visible::after { opacity: 1; transform: translateY(2px); }

/* ============ CONTENTS BAR (follows the reader) ============ */
.why-mexico .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(--mx-ease), visibility 0s 360ms;
}
.why-mexico .hc-bar.is-on { transform: none; opacity: 1; visibility: visible; transition: opacity 260ms, transform 360ms var(--mx-ease); }
body.nav-open.why-mexico .hc-bar { opacity: 0; visibility: hidden; }
.why-mexico .hc-bar__track {
  max-width: var(--mx-max); margin: 0 auto; padding: 0 var(--mx-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;
}
.why-mexico .hc-bar__track::-webkit-scrollbar { display: none; }
.why-mexico .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; }
.why-mexico .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(--mx-ease); }
.why-mexico .hc-bar__track a:hover, .why-mexico .hc-bar__track a[aria-current] { color: var(--ink); }
.why-mexico .hc-bar__track a:hover::after { transform: scaleX(.3); }
.why-mexico .hc-bar__track a[aria-current]::after { transform: scaleX(1); }
.why-mexico .hc-bar__track a:focus-visible { outline-offset: -4px; border-radius: 4px; }
.why-mexico .hc-bar__progress { position: absolute; left: 0; top: 0; height: 2px; width: 100%; background: var(--accent-ice); transform-origin: left; transform: scaleX(var(--hc-p, 0)); }

/* ============ THE CASE: three single questions, then all of them at once ============ */
.mx-case { padding: clamp(48px, 6vw, 88px) 0; border-top: 1px solid var(--border); }
.why-mexico .mx-case h2 { margin-bottom: 14px; }
.why-mexico .mx-case__lead { font-family: var(--font-display); font-size: clamp(1.3rem, 2vw, 1.75rem); line-height: 1.3; font-weight: 300; color: var(--ink-soft); }
.mx-only { list-style: none; margin: clamp(28px, 3.6vw, 48px) 0 0; padding: 0; border-top: 1px solid var(--ink); }
.mx-only li {
  display: grid; grid-template-columns: 56px minmax(0, 5fr) minmax(0, 9fr); column-gap: clamp(18px, 3vw, 44px); align-items: center;
  padding: 18px 0; border-bottom: 1px solid var(--border);
}
.mx-only svg { width: 56px; height: 56px; }
.mx-only__mark { stroke: var(--accent-blue); stroke-width: 2; }
.why-mexico .mx-only__q { font-family: var(--font-display); font-size: clamp(1.2rem, 1.7vw, 1.5rem); line-height: 1.25; color: var(--ink); }
.why-mexico .mx-only__a { font-size: 17px; line-height: 1.6; color: var(--ink-soft); }
.mx-only__a strong { font-weight: 600; color: var(--ink); }
/* the fourth row is the answer: the page's one tinted surface besides the cards' band */
.mx-only__all .mx-only__cell { grid-column: 2 / -1; }
.mx-only li.mx-only__all { padding: 22px clamp(16px, 2vw, 28px); margin-top: 18px; border: 0; border-radius: 8px; background: var(--ink); }
.mx-only__all svg { stroke: #fff; }
.mx-only__all .mx-only__mark { stroke: var(--accent-ice); }
.why-mexico .mx-only__all .mx-only__a { font-family: var(--font-display); font-size: clamp(1.2rem, 1.7vw, 1.5rem); line-height: 1.35; color: #fff; }
.mx-only__all .mx-only__a strong { font-weight: 400; color: var(--accent-ice); }
.mx-case__prose { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 64px); margin-top: clamp(28px, 3.6vw, 48px); }
.mx-case__prose p { font-size: 17.5px; line-height: 1.7; color: var(--ink-soft); }
.mx-case__prose em { font-style: italic; color: var(--ink); }

/* ============ THREE THINGS THAT COMPOUND: one drawing each, none alike ============ */
.mx-vars { padding: clamp(48px, 6vw, 88px) 0; border-top: 1px solid var(--border); }
.mx-var { padding: clamp(28px, 3.6vw, 48px) 0; border-top: 1px solid var(--border); }
.mx-var:first-of-type { border-top-color: var(--ink); }
.why-mexico .mx-var h3 { font-family: var(--font-display); font-size: clamp(1.45rem, 2.1vw, 1.9rem); line-height: 1.2; font-weight: 400; color: var(--ink); margin-bottom: 16px; }
.mx-var p { font-size: 17.5px; line-height: 1.7; color: var(--ink-soft); }
.mx-var p + p { margin-top: 14px; }
.mx-var--law { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.mx-var__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 64px); margin-top: clamp(20px, 2.6vw, 32px); }

/* distance: the first two lanes are drawn to one scale, and take that long to draw */
.mx-lanes { list-style: none; margin: 8px 0 0; padding: 0; }
.mx-lane { display: grid; grid-template-columns: 104px minmax(0, 1fr); column-gap: 20px; align-items: center; padding: 10px 0; }
.mx-lane b { font-size: 16px; font-weight: 600; color: var(--ink); }
.mx-lane__line { display: flex; align-items: center; gap: 8px; }
.mx-ic { flex: none; width: 28px; height: 28px; }
.mx-lane__line i { height: 0; border-top: 2px solid var(--ink-muted); transform-origin: left; }
.mx-lane--tj .mx-lane__line i { flex: 0 0 calc((100% - 72px) / 12); border-top: 3px solid var(--accent-blue); }
.mx-lane--tj .mx-ic { stroke: var(--accent-blue); }
.mx-lane--pa .mx-lane__line i { flex: 1 1 0; }
.mx-lane--ky .mx-lane__line i { flex: 1 1 0; border-top-style: dashed; }
.mx-lane__what { grid-column: 2; margin-top: 2px; font-size: 15px; line-height: 1.45; color: var(--ink-muted); }
@keyframes mx-draw { from { transform: scaleX(0); } }


/* regulation: the ring goes round the physician, and the plant stands outside it */
.mx-who { margin: 0; }
.mx-who svg { width: 100%; height: auto; }
.mx-who__ring { stroke: var(--accent-blue); stroke-width: 2.5; stroke-dasharray: 100; transform: rotate(-90deg); transform-origin: 86px 84px; }
.mx-who__scope { stroke: var(--accent-blue); }
.mx-who__plant { stroke: var(--ink-muted); }
.mx-who__ground { stroke: var(--border-strong); }
.mx-who figcaption { display: grid; column-gap: 12px; margin-top: 12px; font-size: 15px; line-height: 1.45; color: var(--ink-muted); }
.mx-who figcaption { grid-template-columns: 55fr 45fr; }
.mx-who figcaption span:last-child { padding-left: 12%; }
.mx-who figcaption b { display: block; font-size: 16px; font-weight: 600; color: var(--ink); }
@keyframes mx-ring { from { stroke-dashoffset: 100; } }


.why-mexico .mx-vars__note { padding-top: clamp(28px, 3.6vw, 48px); border-top: 1px solid var(--ink); font-family: var(--font-display); font-size: clamp(1.35rem, 2.1vw, 1.8rem); font-weight: 300; line-height: 1.35; color: var(--ink); }

/* ============ TWO NUMBERS: the navy band ============ */
.mx-nums { padding: clamp(56px, 7vw, 104px) 0; background: var(--navy-brand); }
.why-mexico .mx-nums h2 { color: #fff; }
.mx-nums__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.mx-num { margin: 0; padding: clamp(8px, 1.4vw, 16px) 0; }
.mx-num--cross { padding-right: clamp(28px, 5vw, 72px); }
.why-mexico .mx-num__n { font-family: var(--font-display); font-size: clamp(4.2rem, 9vw, 7.6rem); line-height: .95; font-weight: 300; color: #fff; font-variant-numeric: lining-nums tabular-nums; }
.mx-num__n sup { font-size: .36em; vertical-align: top; position: relative; top: .3em; margin-left: .08em; color: var(--accent-ice); }
.mx-num figcaption { margin-top: 18px; font-size: 17.5px; line-height: 1.55; color: rgba(255, 255, 255, .9); }
.why-mexico main .mx-cite { display: block; margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--accent-ice); }
.why-mexico main a.mx-cite { width: fit-content; min-height: 44px; padding-block: 11px; margin-top: 0; text-decoration-color: var(--accent-ice); }
.why-mexico main a.mx-cite:hover { color: #fff; text-decoration-style: solid; }
.why-mexico .mx-nums a:focus-visible { outline-color: var(--accent-ice); }
/* fourteen people, one for every hundred thousand, past the line and toward the hospital */
.mx-cross { display: flex; align-items: flex-end; gap: 14px; margin-top: 22px; }
.mx-cross__people { order: 2; display: flex; flex-wrap: wrap; gap: 6px clamp(3px, .7vw, 9px); }
.mx-cross__people i { width: clamp(11px, 1.3vw, 16px); }
.why-mexico .mx-cross svg { stroke: var(--accent-ice); stroke-width: 1.6; }
.mx-cross__people svg { width: 100%; height: auto; }
.mx-cross__line { order: 1; align-self: stretch; border-left: 2px dotted rgba(255, 255, 255, .6); }
.mx-cross > .mx-ic { order: 3; width: 36px; height: 36px; margin-left: 2px; }
.why-mexico .mx-cross > .mx-ic { stroke: #fff; }
.why-mexico .mx-cross > .mx-ic .mx-plus { stroke: var(--accent-ice); stroke-width: 2; }
@keyframes mx-step { from { opacity: 0; transform: translateX(-26px); } }

/* ============ THE COMPARISONS: the one tinted band ============ */
.mx-arts { padding: clamp(56px, 7vw, 96px) 0; background: var(--accent-wash); }
.why-mexico .mx-arts h2 { margin-bottom: 14px; }
.why-mexico .mx-arts__lede { font-size: 18px; line-height: 1.6; color: var(--ink-soft); }
.mx-arts__list { list-style: none; margin: clamp(24px, 3vw, 40px) 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 5fr) repeat(2, minmax(0, 4fr)); gap: 16px; }
.mx-art--first { grid-row: span 2; }
.mx-art a {
  position: relative; display: flex; flex-direction: column; height: 100%; padding: clamp(20px, 2.2vw, 28px);
  background: var(--white); border: 1px solid var(--border) !important; border-radius: 8px; color: var(--ink);
  transition: transform 420ms var(--mx-ease), box-shadow 420ms var(--mx-ease), border-color 220ms;
}
.mx-art a:hover, .mx-art a:focus-visible { transform: translateY(-3px); border-color: var(--accent-blue) !important; box-shadow: var(--shadow-lift); color: var(--ink); }
/* a finger gets an answer too: the card gives a little under the press */
.mx-art a:active { transform: scale(.985); transition-duration: 120ms; }
.mx-also a:active { color: var(--accent-blue); }
/* a comparison already opened in this visit carries a tick when the reader comes back */
.why-mexico main .mx-tick { position: absolute; top: clamp(18px, 2vw, 26px); right: clamp(18px, 2vw, 26px); width: 22px; height: 22px; margin: 0; stroke: var(--accent-blue); stroke-width: 2; }
.why-mexico main .mx-also .mx-tick { position: static; display: inline-block; width: 18px; height: 18px; margin-left: 8px; vertical-align: -2px; }
.mx-tick path { stroke-dasharray: 100; animation: mx-ring 700ms 500ms var(--mx-ease) both; }
.mx-art svg { width: 56px; height: 56px; margin-bottom: 18px; }
.mx-art--first svg { width: min(100%, 320px); height: auto; aspect-ratio: 1; margin: -8px auto auto 0; }
.mx-art--first svg * { vector-effect: non-scaling-stroke; }
.mx-art--first h3 { margin-top: 24px !important; }
.mx-art__move { stroke: var(--accent-blue); transition: transform 520ms var(--mx-ease); transform-box: fill-box; transform-origin: center; }
.mx-art a:hover .mx-art__move, .mx-art a:focus-visible .mx-art__move { transform: translateX(7px); }
.mx-art:nth-child(2) a:hover .mx-art__move { transform: rotate(-7deg); }
.mx-art:nth-child(4) a:hover .mx-art__move { transform: scale(1.3); }
.mx-art:nth-child(5) a:hover .mx-art__move { transform: translate(14px, 9px); }
.why-mexico .mx-art h3 { font-family: var(--font-display); font-size: clamp(1.3rem, 1.75vw, 1.55rem); line-height: 1.2; font-weight: 400; color: var(--ink); margin-bottom: 10px; }
.why-mexico .mx-art--first h3 { font-size: clamp(1.6rem, 2.5vw, 2.2rem); font-weight: 300; }
.mx-art p { font-size: 16px; line-height: 1.6; color: var(--ink-soft); margin-bottom: 16px !important; }
.mx-art--first p { font-size: 17.5px; }
.mx-art a > .mx-arr, .mx-art__go { margin-top: auto; color: var(--accent-blue); font-size: 18px; }
.mx-art__go { font-size: 16px; font-weight: 600; color: var(--accent-blue-hover); }
.mx-art--first .mx-art__go { margin-top: 4px; }
.mx-also { list-style: none; margin: 24px 0 0; padding: 0; border-top: 1px solid var(--border-strong); }
.mx-also a { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 8fr) auto; column-gap: clamp(16px, 3vw, 40px); align-items: baseline; padding: 16px 0; min-height: 44px; border-bottom: 1px solid var(--border-strong) !important; color: var(--ink); transition: color 220ms, padding 320ms var(--mx-ease); }
.mx-also b { font-family: var(--font-display); font-size: clamp(1.15rem, 1.5vw, 1.35rem); font-weight: 400; line-height: 1.25; }
.mx-also a > span:not(.mx-arr) { font-size: 16px; line-height: 1.55; color: var(--ink-soft); }
.mx-also .mx-arr { color: var(--accent-blue); font-size: 18px; }
.mx-also a:hover, .mx-also a:focus-visible { color: var(--accent-blue-hover); padding-left: 8px; }

/* ============ FIVE REFUSALS: each claim is struck as it arrives ============ */
.mx-limits { padding: clamp(56px, 7vw, 96px) 0; }
.mx-limits__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.mx-limits__aside { position: sticky; top: calc(var(--hc-nav-h) + var(--hc-bar-h) + 28px); }
.mx-limits__aside p { font-size: 17.5px; line-height: 1.6; color: var(--ink-soft); }
.mx-leaflet { width: clamp(110px, 13vw, 170px); height: auto; margin-top: 28px; }
.mx-leaflet path:not(.mx-leaflet__strike), .mx-leaflet circle { stroke: var(--ink-muted); }
.why-mexico .mx-leaflet__strike { stroke: var(--accent-blue); stroke-width: 3; stroke-dasharray: 100; }
.mx-limits__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.mx-limit { padding: 22px 0; border-bottom: 1px solid var(--border); }
.why-mexico .mx-limit h3 { font-family: var(--font-display); font-size: clamp(1.3rem, 1.9vw, 1.7rem); line-height: 1.3; font-weight: 400; color: var(--ink); margin-bottom: 8px; }
.mx-limit s { text-decoration: none; background: linear-gradient(var(--accent-blue), var(--accent-blue)) no-repeat 0 56% / 100% 1.5px; }
.mx-limit p { font-size: 17.5px; line-height: 1.65; color: var(--ink-soft); }

/* ============ CLOSING ============ */
.mx-cta { padding: clamp(64px, 8vw, 112px) var(--mx-gut); text-align: center; border-top: 1px solid var(--border); }
.mx-cta__inner { max-width: 760px; margin: 0 auto; }
.why-mexico .mx-cta h2 { margin-bottom: 16px; }
.mx-cta p { font-size: 18px; line-height: 1.65; color: var(--ink-soft); }
.mx-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }

/* ============ ARRIVALS (only once the script has said it is running) ============
   Each part comes in its own way, once. Nothing is clipped to no area. */
.mx-js [data-r] { opacity: 0; transition: opacity 700ms var(--mx-ease), transform 900ms var(--mx-ease); }

/* the four rows settle one after another; the last one's cross is drawn */
.mx-js .mx-only[data-r] { opacity: 1; }
.mx-js .mx-only li { transition: opacity 600ms var(--mx-ease), transform 800ms var(--mx-ease); transition-delay: calc(var(--i, 0) * 170ms); }
.mx-js .mx-only:not(.is-in) li { opacity: 0; transform: translateX(-22px); }
.mx-js .mx-only:not(.is-in) li.mx-only__all { transform: scale(.97); }
.mx-js .mx-only.is-in .mx-only__mark { animation: mx-fade 500ms calc(300ms + var(--i, 0) * 170ms) both; }
.mx-js .mx-case__prose[data-r] { transform: translateY(16px); }

/* the lanes draw at the speed of the trip: the drive is over before the flight has left */
.mx-js .mx-lanes[data-r] { opacity: 1; }
.mx-js .mx-lanes:not(.is-in) :is(i, .mx-ic:last-child, .mx-lane__what) { opacity: 0; }
.mx-js .mx-lanes:not(.is-in) i { transform: scaleX(0); }
.mx-js .mx-lanes.is-in i { animation: mx-draw 3000ms 300ms linear both; }
.mx-js .mx-lanes.is-in .mx-lane--tj i { animation-duration: 250ms; }
.mx-js .mx-lanes.is-in .mx-lane--ky i { animation-duration: 1500ms; }
.mx-js .mx-lanes.is-in .mx-lane--ky i:last-of-type { animation-delay: 1800ms; }
.mx-js .mx-lanes.is-in :is(.mx-ic:last-child, .mx-lane__what) { animation: mx-fade 500ms 3300ms both; }
.mx-js .mx-lanes.is-in .mx-lane--tj :is(.mx-ic:last-child, .mx-lane__what) { animation-delay: 550ms; }

/* the ring closes around the physician */
.mx-js .mx-who[data-r] { transform: translateX(24px); }
.mx-js .mx-who:not(.is-in) .mx-who__ring { stroke-dashoffset: 100; }
.mx-js .mx-who.is-in .mx-who__ring { animation: mx-ring 1500ms 350ms var(--mx-ease) both; }


.mx-js .mx-vars__note[data-r] { transform: translateY(16px); }

/* the band's picture runs each time it comes back into view (the script sets is-live) */
.mx-js .mx-num[data-r] { transition-duration: 500ms; }
.mx-js .mx-num:not(.is-live) .mx-cross__people i { opacity: 0; }
.mx-js .mx-num.is-live .mx-cross__people i { animation: mx-step 620ms var(--mx-ease) both; animation-delay: calc(120ms + var(--i, 0) * 85ms); }

/* cards rise in turn; the two rows under them follow */
.mx-js .mx-art[data-r] { transform: translateY(22px); transition-delay: calc(var(--i, 0) * 90ms); }
.mx-js .mx-also[data-r] { transform: translateY(12px); }

/* each refusal is struck as it arrives; the leaflet is struck once */
.mx-js .mx-limit[data-r] { transform: translateY(14px); }
.mx-js .mx-limit s { transition: background-size 900ms 250ms var(--mx-ease); }
.mx-js .mx-limit:not(.is-in) s { background-size: 0 1.5px; }
.mx-js .mx-leaflet:not(.is-in) .mx-leaflet__strike { stroke-dashoffset: 100; }
.mx-js .mx-leaflet.is-in .mx-leaflet__strike { animation: mx-ring 900ms 300ms var(--mx-ease) both; }
.mx-js .mx-cta__inner[data-r] { transform: translateY(18px); }
/* arrived (after every starting position above, so it wins) */
.mx-js [data-r].is-in { opacity: 1; transform: none; }

/* ============ NARROWER ============ */
@media (max-width: 1100px) {
  .why-mexico .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: 960px) {
  .mx-hero__row { grid-template-columns: minmax(0, 1fr); }
  .mx-arts__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mx-art--first { grid-row: auto; grid-column: 1 / -1; }
  .mx-art--first svg { width: 120px; margin: 0 0 4px; }
  .mx-limits__grid { grid-template-columns: minmax(0, 1fr); }
  .mx-limits__aside { position: static; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; align-items: start; }
  .mx-leaflet { width: 96px; margin-top: 0; }
}
@media (max-width: 760px) {
  .mx-toc__list { grid-template-rows: none; grid-auto-flow: row; }
  .mx-only li { grid-template-columns: 48px minmax(0, 1fr); row-gap: 4px; align-items: start; }
  .mx-only svg { width: 48px; height: 48px; grid-row: span 2; }
  .mx-only li.mx-only__all { align-items: center; }
  .mx-case__prose, .mx-var__cols, .mx-var--law { grid-template-columns: minmax(0, 1fr); }
  .mx-who { max-width: 420px; }
  .mx-lane { grid-template-columns: minmax(0, 1fr); }
  .mx-lane__what { grid-column: 1; }
  .mx-nums__grid { grid-template-columns: minmax(0, 1fr); }
  .mx-num--cross { padding-right: 0; padding-bottom: 32px; }
  .mx-arts__list { grid-template-columns: minmax(0, 1fr); }
  .mx-art--first svg { width: 96px; margin: 0 0 4px; }
  .mx-also a { grid-template-columns: minmax(0, 1fr) auto; }
  .mx-also a > span:not(.mx-arr) { grid-column: 1; grid-row: 2; margin-top: 4px; }
  .mx-hero__actions .btn { width: 100%; justify-content: center; text-align: center; }
}

/* ============ STILL: reduced motion, and paper ============ */
@media (prefers-reduced-motion: reduce) {
  .why-mexico main *, .why-mexico main *::before, .why-mexico main *::after { animation: none !important; transition: none !important; }
}
@media print {
  .mx-tick, .mx-hero__actions, .mx-toc, .mx-cta__actions { display: none; }
  .mx-arts { background: none; }
  .mx-art a { break-inside: avoid; }
  .mx-var, .mx-limit, .mx-num { break-inside: avoid; }
  .why-mexico .hc-bar { display: none; }
  .why-mexico main * { animation: none !important; transition: none !important; }
  .mx-js [data-r], .mx-js .mx-only li, .mx-js .mx-lanes :is(i, .mx-ic, .mx-lane__what), .mx-js .mx-num i { opacity: 1 !important; transform: none !important; }
  .mx-nums { background: none; }
  .why-mexico .mx-nums h2, .why-mexico .mx-num__n, .mx-num figcaption { color: var(--ink); }
}