/* /learn-mexico-for-americans: its own sheet, loaded after site.css.
   One idea runs the page: the border, and how little of a trip it is. The hero
   drives a car across it, the crossing section is the road itself, and the
   follow-up section walks back over it. Blue marks the Mexican side wherever a
   side is marked. Script: scripts/learn-mexico-for-americans.js. With that
   script absent every part is visible and every link still jumps. */

html:has(body.mfa) {
  --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);
}
.mfa {
  --mfa-ease: cubic-bezier(.16, 1, .3, 1);
  --mfa-gut: clamp(20px, 4vw, 56px);
  background: #fff;
}

/* ============ GROUND RULES ============ */
.mfa main ::selection { background: var(--accent-blue); color: #fff; }
.mfa-wrap { max-width: calc(1240px + 2 * var(--mfa-gut)); margin-inline: auto; padding-inline: var(--mfa-gut); }
/* text fills its column; the column sets the measure */
.mfa main p { max-width: none; margin: 0; }
.mfa main a:not(.btn) { border-bottom: 0; }
.mfa main :is(ol, ul) { list-style: none; margin: 0; padding: 0; }
.mfa 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 0 clamp(24px, 3.4vw, 48px); max-width: none; text-wrap: wrap;
}
.mfa main h2 > .h-lead, .mfa main h2 > em { display: inline-block; }
.mfa main h2 > em { color: var(--accent-blue); }
.mfa main h3 { font-family: var(--font-display); font-weight: 400; color: var(--ink); margin: 0; max-width: none; text-wrap: wrap; }
.mfa main :is(a, summary):focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 3px; border-radius: 4px; }
.mfa .mfa-reg :is(a, summary):focus-visible, .mfa .mfa-ysidro :is(a, summary):focus-visible { outline-color: var(--accent-ice); }
/* a part that receives focus after a jump is not itself a control */
.mfa main :is(h1, h2, h3, section)[tabindex="-1"]:focus { outline: none; }
.mfa-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* a term the glossary defines */
.mfa-term { color: inherit; text-decoration: underline dotted; text-decoration-color: var(--accent-blue); text-decoration-thickness: 1.5px; text-underline-offset: 4px; transition: color 200ms, text-decoration-color 200ms; }
.mfa-term:hover { color: var(--accent-blue-hover); text-decoration-style: solid; }
.mfa-reg .mfa-term { text-decoration-color: var(--accent-ice); }
.mfa-reg .mfa-term:hover { color: #fff; }
/* a link inside a sentence */
.mfa-link { color: var(--accent-blue-hover); font-weight: 500; text-decoration: underline; text-decoration-color: rgba(45, 110, 177, .4); text-underline-offset: 4px; transition: color 200ms, text-decoration-color 200ms; }
.mfa-link:hover { color: var(--accent-blue); text-decoration-color: currentColor; }
.mfa-reg .mfa-link { color: #c9def2; text-decoration-color: rgba(124, 169, 209, .6); }
.mfa-reg .mfa-link:hover { color: #fff; }
/* the onward link: the arrow leans the way it points */
.mfa-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; }
.mfa-go span { display: inline-block; transition: transform 360ms var(--mfa-ease); }
.mfa-go:hover { color: var(--accent-blue); text-decoration-color: currentColor; }
.mfa-go[href^="#"]:hover span { transform: translateY(4px) rotate(90deg); }
.mfa-cap { font-size: 15px; font-weight: 500; color: var(--ink-muted); margin-bottom: 14px !important; }

/* ============ REVEALS ============
   Hidden only once the script has said it is running (mfa-js on <html>), so
   with no script nothing is ever hidden. Each part comes in its own way. */
.mfa-js [data-r] { transition: opacity 620ms ease, transform 820ms var(--mfa-ease); }
.mfa-js [data-r]:not(.is-in) { opacity: 0; transform: translateY(18px); }
.mfa-js [data-r="left"] { transition-delay: calc(var(--i, 0) * 90ms); }
.mfa-js [data-r="left"]:not(.is-in) { transform: translateX(-28px); }
.mfa-js [data-r="phase"] { transition-delay: calc(var(--i, 0) * 140ms); }
.mfa-js [data-r="road"]:not(.is-in) { transform: scale(.975); }
/* these stay put and animate their insides instead */
.mfa-js :is([data-r="trips"], [data-r="tally"], [data-r="map"], [data-r="adv"]):not(.is-in) { opacity: 1; transform: none; }

@keyframes mfa-up { from { opacity: 0; transform: translateY(22px); } }
@keyframes mfa-draw { from { stroke-dashoffset: 1; opacity: 0; } 12% { opacity: 1; } to { stroke-dashoffset: 0; opacity: 1; } }
@keyframes mfa-pop { from { transform: scale(0); opacity: 0; } 70% { transform: scale(1.2); opacity: 1; } }
@keyframes mfa-fade { from { opacity: 0; } }

/* ============ HERO ============ */
.mfa-hero { padding-block: clamp(36px, 5vw, 76px) clamp(48px, 6vw, 88px); }
.mfa-hero__h1 { font-family: var(--font-display); font-weight: 300; font-size: clamp(2.1rem, 4.3vw, 3.9rem); line-height: 1.06; letter-spacing: -.015em; color: var(--ink); margin: 0 0 clamp(28px, 4vw, 56px); max-width: none; text-wrap: wrap; }
.mfa-hero__h1 > .h-lead, .mfa-hero__h1 > em { display: inline-block; }
.mfa-hero__h1 > em { color: var(--accent-blue); }
.mfa-hero__row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.mfa-hero__answer { font-size: clamp(1.12rem, 1.5vw, 1.32rem); line-height: 1.6; color: var(--ink); margin-bottom: 18px !important; }
.mfa-hero__limit { font-size: 17px; line-height: 1.65; color: var(--ink-muted); margin-bottom: 14px !important; }
.mfa-hero__fig { margin: 0; }
.mfa-scene { display: block; width: 100%; height: auto; overflow: visible; }
.mfa-scene :is(path, circle) { fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mfa-scene .mfa-thin { stroke: var(--border-strong); stroke-width: 1.4; }
.mfa-scene .mfa-scene__road { stroke-width: 2; }
.mfa-scene .mfa-scene__line { stroke: var(--accent-blue); stroke-dasharray: 3 9; stroke-width: 2; }
.mfa-scene .mfa-scene__arm { stroke: var(--accent-blue); stroke-width: 3; transform-box: fill-box; transform-origin: right center; }
.mfa-scene .mfa-scene__cross { stroke: var(--accent-blue); stroke-width: 5; stroke-linecap: butt; transform-box: fill-box; transform-origin: center; }
/* the car rests where it ends: at the hospital door */
.mfa-scene .mfa-scene__car { transform: translateX(238px); }
.mfa-scene .mfa-scene__car path:first-child { fill: #fff; }
.mfa-scene .mfa-scene__car circle { fill: var(--ink); stroke: #fff; stroke-width: 1.5; }

/* first paint: the road, the house, the line, the hospital, then the drive across */
@keyframes mfa-drive { from { transform: translateX(0); } to { transform: translateX(238px); } }
@keyframes mfa-lift { 0%, 100% { transform: rotate(0); } 30%, 70% { transform: rotate(78deg); } }
.mfa-js .mfa-hero__h1 > * { animation: mfa-up 900ms var(--mfa-ease) both; }
.mfa-js .mfa-hero__h1 > em { animation-delay: 110ms; }
.mfa-js .mfa-hero__text > * { animation: mfa-up 900ms var(--mfa-ease) 240ms both; }
.mfa-js .mfa-hero__text > :nth-child(2) { animation-delay: 330ms; }
.mfa-js .mfa-hero__text > :nth-child(3) { animation-delay: 420ms; }
.mfa-js .mfa-scene .mfa-draw { stroke-dasharray: 1; animation: mfa-draw 800ms var(--mfa-ease) both; }
.mfa-js .mfa-scene .mfa-scene__road { animation-duration: 1100ms; animation-delay: 200ms; }
.mfa-js .mfa-scene__home .mfa-draw { animation-delay: 500ms; }
.mfa-js .mfa-scene__home .mfa-thin { animation-delay: 800ms; }
.mfa-js .mfa-scene .mfa-scene__line { animation: mfa-fade 600ms ease 900ms both; }
.mfa-js .mfa-scene__border .mfa-draw { animation-delay: 1000ms; }
.mfa-js .mfa-scene__hosp .mfa-draw { animation-delay: 1200ms; }
.mfa-js .mfa-scene__hosp .mfa-thin { animation-delay: 1500ms; }
.mfa-js .mfa-scene .mfa-scene__cross { animation: mfa-pop 460ms var(--mfa-ease) 1900ms both; }
.mfa-js .mfa-scene .mfa-scene__car { animation: mfa-fade 400ms ease 1700ms both, mfa-drive 3200ms cubic-bezier(.45, .05, .25, 1) 2000ms both; }
.mfa-js .mfa-scene .mfa-scene__arm { animation: mfa-fade 400ms ease 1300ms both, mfa-lift 2400ms var(--mfa-ease) 2500ms both; }

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

/* ============ DISTANCE ============ */
.mfa-dist { padding-block: clamp(56px, 7vw, 104px) clamp(48px, 6vw, 96px); }
.mfa-dist__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.mfa-dist__text p { font-size: 18px; line-height: 1.7; color: var(--ink-soft); }
.mfa-dist__text p + p { margin-top: 18px !important; }
.mfa-trip { display: grid; grid-template-columns: 150px minmax(0, 1fr) 132px 170px; gap: 6px 20px; align-items: center; padding: 14px 0; border-top: 1px solid var(--border); font-size: 14px; line-height: 1.4; color: var(--ink-muted); }
.mfa-trip:last-child { border-bottom: 1px solid var(--border); }
.mfa-trip b { display: block; font-size: 16px; font-weight: 600; color: var(--ink); }
.mfa-trip__time b { font-family: var(--font-display); font-size: 1.35rem; font-weight: 400; line-height: 1.15; }
/* a road as long as the trip, with what you travel in at its end */
.mfa-trip__bar { position: relative; height: 26px; container-type: inline-size; }
.mfa-trip__bar::before { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; border-bottom: 2px dotted var(--border-strong); }
.mfa-trip__bar i { position: absolute; left: 0; bottom: 3px; height: 4px; width: calc(var(--n) * 1%); border-radius: 2px; background: var(--accent-blue); transform-origin: left; }
.mfa-trip__bar svg { position: absolute; left: calc(var(--n) * 1%); bottom: 8px; width: 28px; height: 16px; translate: -100% 0; overflow: visible; }
.mfa-trip__bar svg :is(path, circle) { fill: var(--ink); stroke: #fff; stroke-width: 1; stroke-linejoin: round; }
.mfa-trip.is-near { background: linear-gradient(90deg, rgba(45, 110, 177, .09), transparent 70%); box-shadow: -3px 0 0 var(--accent-blue); padding-left: 12px; }
.mfa-trip__near { display: block; font-size: 13px; font-weight: 600; color: var(--accent-blue-hover); }
.mfa-js .mfa-trips .mfa-trip { transition: opacity 520ms ease calc(var(--i) * 90ms); }
.mfa-js .mfa-trips .mfa-trip__bar i { transition: transform 1100ms var(--mfa-ease) calc(200ms + var(--i) * 90ms); }
.mfa-js .mfa-trips .mfa-trip__bar svg { transition: transform 1100ms var(--mfa-ease) calc(200ms + var(--i) * 90ms); }
.mfa-js .mfa-trips:not(.is-in) .mfa-trip { opacity: 0; }
.mfa-js .mfa-trips:not(.is-in) .mfa-trip__bar i { transform: scaleX(0); }
.mfa-js .mfa-trips:not(.is-in) .mfa-trip__bar svg { transform: translateX(calc(var(--n) * -1cqw)); }
.mfa-dist__close { margin-top: clamp(28px, 4vw, 48px) !important; padding-top: clamp(24px, 3vw, 36px); border-top: 1px solid var(--border-strong); font-family: var(--font-display); font-size: clamp(1.3rem, 2vw, 1.7rem); font-weight: 400; line-height: 1.4; color: var(--ink); }

/* fly in, met at the curb, driven across */
.mfa-legs { display: block; width: min(100%, 300px); height: auto; margin-bottom: 24px; overflow: visible; }
.mfa-legs :is(path, circle) { fill: #fff; stroke: var(--ink); stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.mfa-legs .mfa-legs__way { fill: none; stroke: var(--accent-blue); stroke-width: 2; stroke-dasharray: 2 7; }
.mfa-legs__hosp path + path { stroke: var(--accent-blue); stroke-width: 4; stroke-linecap: butt; }
.mfa-legs__car circle { fill: var(--ink); stroke: #fff; }
@keyframes mfa-land { from { transform: translate(-26px, -18px); opacity: 0; } }
@keyframes mfa-roll { from { transform: translateX(-22px); opacity: 0; } }
.mfa-js .mfa-dist__text.is-in .mfa-legs__plane { animation: mfa-land 900ms var(--mfa-ease) 200ms both; }
.mfa-js .mfa-dist__text.is-in .mfa-legs__car { animation: mfa-roll 800ms var(--mfa-ease) 700ms both; }
.mfa-js .mfa-dist__text.is-in .mfa-legs__hosp { animation: mfa-fade 600ms ease 1200ms both; }
.mfa-js .mfa-dist__text.is-in .mfa-legs__way { animation: mfa-fade 600ms ease 1000ms both; }

/* ============ THE CROSSING ============ */
.mfa-cross { padding-block: clamp(48px, 6vw, 96px); border-top: 1px solid var(--border); }
.mfa .mfa-cross__head h2 { margin-bottom: 16px; }
.mfa-cross__head p { font-size: 18px; line-height: 1.7; color: var(--ink-soft); margin-bottom: clamp(28px, 4vw, 48px) !important; }
/* the road itself: navy, three lanes, each as full as its wait */
.mfa-ysidro { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 20px clamp(32px, 5vw, 72px); align-items: center; padding: clamp(28px, 4vw, 56px); border-radius: 12px; background: var(--ink); color: #fff; overflow: hidden; }
.mfa-suv { display: block; width: 132px; height: auto; margin-bottom: 20px; overflow: visible; }
.mfa-suv :is(path, circle) { fill: #fff; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.mfa-suv circle { fill: var(--ink); stroke: #fff; stroke-width: 3; }
.mfa-suv .mfa-suv__glass { fill: var(--ink); stroke: none; opacity: .82; }
.mfa .mfa-ysidro h3 { font-weight: 300; font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.05; color: #fff; margin-bottom: 16px; }
.mfa-ysidro__text p { font-size: 17px; line-height: 1.65; color: rgba(255, 255, 255, .84); }
.mfa-lane { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 8px 24px; align-items: center; padding: 14px 0; }
.mfa-lane + .mfa-lane { border-top: 1px solid rgba(255, 255, 255, .14); }
.mfa-lane__what { font-size: 15px; line-height: 1.4; color: rgba(255, 255, 255, .74); }
.mfa-lane__what b { display: block; font-family: var(--font-display); font-size: 1.5rem; font-weight: 400; line-height: 1.15; color: #fff; }
.mfa-lane__road { position: relative; display: flex; align-items: center; gap: 7px; height: 38px; padding-left: 16px; border-block: 2px dashed rgba(255, 255, 255, .2); overflow: hidden; }
/* the gate each queue is waiting at */
.mfa-lane__road::before { content: ""; position: absolute; left: 0; top: 3px; bottom: 3px; width: 4px; border-radius: 2px; background: var(--accent-ice); }
.mfa-lane--south .mfa-lane__road { justify-content: flex-end; padding: 0 16px 0 0; }
.mfa-lane--south .mfa-lane__road::before { left: auto; right: 0; }
.mfa-car { position: relative; flex: none; width: 28px; height: 15px; border-radius: 5px; background: #fff; }
.mfa-car::after { content: ""; position: absolute; left: 6px; top: 2.5px; bottom: 2.5px; width: 7px; border-radius: 2px; background: var(--ink); opacity: .55; }
.mfa-lane--south .mfa-car::after { left: auto; right: 6px; }
.mfa-lane--pub .mfa-car { background: rgba(255, 255, 255, .5); }
.mfa-lane--med .mfa-car, .mfa-lane--south .mfa-car { background: var(--accent-ice); }
.mfa-ysidro__why { grid-column: 2; font-size: 15px; color: rgba(255, 255, 255, .74); }
/* while it is on screen: one lane flows, one moves, one sits with its brake lights on */
@keyframes mfa-cruise { from { transform: translateX(-640px); } to { transform: translateX(60px); } }
@keyframes mfa-creep { 0% { transform: translateX(46px); opacity: 0; } 18%, 72% { transform: translateX(0); opacity: 1; } 100% { transform: translateX(-46px); opacity: 0; } }
@keyframes mfa-brake { 50% { opacity: .78; } }
.mfa-ysidro.is-live .mfa-lane--south .mfa-car { animation: mfa-cruise 3600ms linear infinite; }
.mfa-ysidro.is-live .mfa-lane--med .mfa-car { animation: mfa-creep 5200ms var(--mfa-ease) infinite; }
.mfa-ysidro.is-live .mfa-lane--med .mfa-car + .mfa-car { animation-delay: 420ms; }
.mfa-ysidro.is-live .mfa-lane--pub .mfa-car { animation: mfa-brake 2600ms ease-in-out infinite; }
.mfa-ysidro.is-live .mfa-lane--pub .mfa-car:nth-child(odd) { animation-delay: -1300ms; }

/* native "Read more": opened for print, found by in-page search */
.mfa-more { margin-top: clamp(16px, 2vw, 24px); }
.mfa-more summary { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; list-style: none; font-size: 16px; font-weight: 600; color: var(--accent-blue-hover); transition: color 200ms; }
.mfa-more summary::-webkit-details-marker { display: none; }
.mfa-more 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(--mfa-ease); }
.mfa-more summary:hover { color: var(--accent-blue); }
.mfa-more summary:hover::after { transform: translateY(3px) rotate(45deg); }
.mfa-more[open] summary::after { margin-top: 4px; transform: rotate(-135deg); }
.mfa-more[open] summary:hover::after { transform: translateY(-3px) rotate(-135deg); }
.mfa-more__shut, .mfa-more[open] .mfa-more__open { display: none; }
.mfa-more[open] .mfa-more__shut { display: inline; }
.mfa-more--dark summary { color: #c9def2; }
.mfa-more--dark summary:hover { color: #fff; }
@keyframes mfa-unfold { from { opacity: 0; transform: translateY(-8px); } }
.mfa-more[open] .mfa-more__body { animation: mfa-unfold 420ms var(--mfa-ease); }
.mfa-more__body { padding-top: 12px; }
.mfa-more__about { margin-top: clamp(24px, 3vw, 40px) !important; font-size: 17px; line-height: 1.6; color: var(--ink-soft); }
.mfa-more__about + .mfa-more { margin-top: 4px; }
.mfa-reg .mfa-more__about { color: rgba(255, 255, 255, .84); }

.mfa-others { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px clamp(32px, 5vw, 72px); }
.mfa-other { padding-left: 24px; border-left: 3px solid var(--border-strong); }
.mfa .mfa-other h3 { font-size: 1.7rem; line-height: 1.15; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.mfa-other h3 span { font-family: var(--font-body); font-size: 15px; font-weight: 500; color: var(--ink-muted); }
.mfa-other__sub { font-size: 16px; color: var(--ink-muted); margin: 6px 0 14px !important; }
.mfa-other dl { display: grid; grid-template-columns: 88px minmax(0, 1fr); margin: 0 0 14px; font-size: 15.5px; line-height: 1.45; }
.mfa-other :is(dt, dd) { margin: 0; padding: 9px 0; border-top: 1px solid var(--border); }
.mfa-other dt { color: var(--ink-muted); }
.mfa-other dd { color: var(--ink); font-weight: 500; }
.mfa-other > p:last-child { font-size: 16px; line-height: 1.65; color: var(--ink-soft); }

/* ============ THE COUNTRY ============ */
.mfa-country { padding-block: clamp(48px, 6vw, 96px); border-top: 1px solid var(--border); }
.mfa-country__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.mfa-country__lede { font-size: 18px; line-height: 1.7; color: var(--ink-soft); margin-bottom: clamp(20px, 3vw, 36px) !important; }
.mfa-five > li { display: grid; grid-template-columns: clamp(96px, 11vw, 150px) minmax(0, 1fr); gap: 4px clamp(16px, 2.4vw, 32px); align-items: baseline; padding: 22px 0; border-top: 1px solid var(--border); }
.mfa-five__n { font-family: var(--font-display); font-weight: 300; font-size: clamp(2.1rem, 3.6vw, 3.2rem); line-height: 1; color: var(--accent-blue); white-space: nowrap; }
.mfa .mfa-five h3 { font-size: 1.5rem; line-height: 1.2; margin-bottom: 8px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; }
.mfa-five h3 span { font-family: var(--font-body); font-size: 15px; font-weight: 500; color: var(--ink-muted); }
.mfa-five p { font-size: 16.5px; line-height: 1.65; color: var(--ink-soft); }
.mfa-five small { display: block; margin-top: 8px; font-size: 14px; color: var(--ink-muted); }
.mfa-map { position: sticky; top: calc(var(--hc-nav-h) + var(--hc-bar-h) + 28px); margin: 0; }
.mfa-map svg { display: block; width: 100%; height: auto; overflow: visible; }
.mfa-map__land { fill: var(--accent-wash); stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; }
.mfa-map__border { fill: none; stroke: var(--accent-blue); stroke-width: 3; stroke-dasharray: 2 7; stroke-linecap: round; }
.mfa-map__city circle { fill: var(--accent-blue); stroke: #fff; stroke-width: 2; transform-box: fill-box; transform-origin: center; }
.mfa-map__city text { font-family: var(--font-body); font-size: 21px; font-weight: 500; fill: var(--ink); paint-order: stroke; stroke: #fff; stroke-width: 5px; stroke-linejoin: round; }
.mfa-map__city--celva circle { fill: var(--ink); }
.mfa-map__city--celva .mfa-map__ring { fill: none; stroke: var(--ink); stroke-width: 2; opacity: 0; }
.mfa-map figcaption { margin-top: 14px; font-size: 15px; line-height: 1.5; color: var(--ink-muted); }
.mfa-map figcaption b { display: block; margin-bottom: 6px; font-family: var(--font-display); font-size: 1.5rem; font-weight: 400; color: var(--ink); }
.mfa-map__key { display: flex; align-items: center; gap: 10px; }
.mfa-map__key::before { content: ""; flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--accent-blue); }
.mfa-map__key--celva::before { background: var(--ink); }
@keyframes mfa-ping { from { transform: scale(1); opacity: .7; } to { transform: scale(2.6); opacity: 0; } }
.mfa-js .mfa-map:not(.is-in) .mfa-map__city { opacity: 0; }
.mfa-js .mfa-map.is-in .mfa-map__city { animation: mfa-fade 400ms ease calc(200ms + var(--i) * 130ms) both; }
.mfa-js .mfa-map.is-in .mfa-map__city circle:not(.mfa-map__ring) { animation: mfa-pop 460ms var(--mfa-ease) calc(200ms + var(--i) * 130ms) both; }
.mfa-js .mfa-map.is-in.is-live .mfa-map__ring { animation: mfa-ping 2400ms ease-out 1400ms infinite; }
.mfa-country__close { margin-top: clamp(28px, 4vw, 48px) !important; padding-top: clamp(24px, 3vw, 36px); border-top: 1px solid var(--border-strong); font-size: 18px; line-height: 1.7; color: var(--ink-soft); }

/* ============ THE REGULATOR ============ */
.mfa-reg { background: var(--ink); color: #fff; padding-block: clamp(56px, 7vw, 104px); }
.mfa .mfa-reg h2 { color: #fff; }
.mfa-reg__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.mfa-reg__text p { font-size: 17.5px; line-height: 1.7; color: rgba(255, 255, 255, .84); }
.mfa-reg__text p + p { margin-top: 18px !important; }
.mfa-reg__text .mfa-reg__answer { font-size: clamp(1.12rem, 1.5vw, 1.32rem); line-height: 1.6; color: #fff; }
/* six questions put to both regulators: five answers match, one does not */
.mfa-tally > li { position: relative; min-height: 48px; padding: 12px 0 12px 68px; font-size: 17px; line-height: 1.4; color: rgba(255, 255, 255, .9); }
.mfa-tally > li + li { border-top: 1px solid rgba(255, 255, 255, .14); }
.mfa-tally__icon { position: absolute; left: 0; top: 0; width: 48px; height: 48px; }
.mfa-tally__icon svg { display: block; width: 48px; height: 48px; }
.mfa-tally__icon path { fill: none; stroke: var(--accent-ice); stroke-width: 2.4; stroke-linecap: round; }
.mfa-tally__ne { color: #fff !important; font-weight: 600; }
.mfa-tally__ne .mfa-tally__icon path { stroke: #fff; }
.mfa-ne { margin-top: 12px; font-weight: 400; }
.mfa-ne p { padding-left: 16px; border-left: 3px solid rgba(255, 255, 255, .3); font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, .84); }
.mfa-ne p + p { margin-top: 12px !important; border-left-color: var(--accent-ice); }
.mfa-ne b { display: block; text-wrap: wrap; color: #fff; font-weight: 600; }
.mfa-js .mfa-tally > li { transition: opacity 520ms ease calc(var(--i) * 110ms); }
.mfa-js .mfa-tally:not(.is-in) > li { opacity: 0; }
.mfa-js .mfa-tally:not(.is-in) .mfa-tally__icon path { opacity: 0; }
.mfa-js .mfa-tally.is-in .mfa-tally__icon path { stroke-dasharray: 1; animation: mfa-draw 520ms var(--mfa-ease) calc(180ms + var(--i) * 110ms) both; }
.mfa-js .mfa-tally.is-in .mfa-tally__icon .mfa-tally__slash { animation-delay: 1100ms; animation-duration: 380ms; }

.mfa-mirror { width: 100%; border-collapse: collapse; table-layout: fixed; margin-top: 8px; }
.mfa-mirror caption { caption-side: top; text-align: left; padding-bottom: 16px; font-size: 15px; color: rgba(255, 255, 255, .74); }
.mfa-mirror thead td { width: 22%; }
.mfa-mirror thead th { padding: 0 20px 12px; text-align: left; font-family: var(--font-display); font-size: 1.5rem; font-weight: 400; color: #fff; border-bottom: 2px solid var(--accent-ice); }
.mfa-mirror tbody th { padding: 20px 16px 20px 0; text-align: left; vertical-align: top; font-size: 15px; font-weight: 500; line-height: 1.5; color: rgba(255, 255, 255, .74); border-bottom: 1px solid rgba(255, 255, 255, .14); }
.mfa-mirror tbody td { padding: 20px; vertical-align: top; font-size: 15.5px; line-height: 1.55; color: rgba(255, 255, 255, .84); border-bottom: 1px solid rgba(255, 255, 255, .14); }
.mfa-mirror tbody td + td { border-left: 1px solid rgba(255, 255, 255, .14); }
.mfa-mirror strong { display: block; font-size: 16.5px; font-weight: 600; color: #fff; }
.mfa-mirror em { display: block; margin-bottom: 6px; font-style: normal; font-size: 14px; color: var(--accent-ice); }

/* ============ AFTER ============ */
.mfa-after { background: var(--accent-wash); padding-block: clamp(56px, 7vw, 96px); }
.mfa .mfa-after__head h2 { margin-bottom: 16px; }
.mfa-after__head p { font-size: 18px; line-height: 1.7; color: var(--ink-soft); margin-bottom: clamp(32px, 4vw, 56px) !important; }
.mfa-phases { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto auto auto 1fr; column-gap: clamp(20px, 2.6vw, 40px); }
.mfa-phase { position: relative; display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
.mfa-phase__icon { position: relative; z-index: 1; width: 60px; height: 60px; margin-bottom: 20px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1.6px var(--ink); display: grid; place-items: center; }
.mfa-phase__icon svg { width: 30px; height: 30px; fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.mfa-phase--mx .mfa-phase__icon { background: var(--accent-blue); box-shadow: 0 0 0 1.6px var(--accent-blue); }
.mfa-phase--mx .mfa-phase__icon svg { stroke: #fff; }
/* one connector per gap, icon to icon; nothing after the last */
.mfa-phase:not(:last-child)::after { content: ""; position: absolute; left: 60px; top: 29px; height: 2px; width: calc(100% - 60px + clamp(20px, 2.6vw, 40px)); background: var(--ink); transform-origin: left; }
.mfa .mfa-phase h3 { font-size: 1.6rem; line-height: 1.15; }
.mfa-phase__when { margin: 4px 0 14px !important; font-size: 15px; font-weight: 500; color: var(--accent-blue-hover); }
.mfa-phase ul li { position: relative; padding: 9px 0 9px 18px; border-top: 1px solid var(--border); font-size: 15.5px; line-height: 1.5; color: var(--ink-soft); }
.mfa-phase ul li::before { content: ""; position: absolute; left: 2px; top: 18px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-blue); }
.mfa-js .mfa-phase:not(:last-child)::after { transition: transform 700ms var(--mfa-ease) calc(300ms + var(--i) * 140ms); }
.mfa-js .mfa-phase:not(.is-in)::after { transform: scaleX(0); }
.mfa-after__close { margin-top: clamp(28px, 4vw, 48px) !important; font-family: var(--font-display); font-size: clamp(1.3rem, 2vw, 1.7rem); font-weight: 400; line-height: 1.4; color: var(--ink); }
.mfa-after__close .mfa-link { display: inline-block; font-family: var(--font-body); font-size: 16px; }

/* ============ SAFETY ============ */
.mfa-safe { padding-block: clamp(56px, 7vw, 104px); }
/* One column since the advisory panel came off the page (2026-10-13). */
.mfa-safe__grid { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.mfa-safe__answer { font-size: 18px; line-height: 1.7; color: var(--ink-soft); margin-bottom: 24px !important; }
/* each claim opens to its answer */
.mfa-claim { border-top: 1px solid var(--border-strong); }
.mfa-claim:last-child { border-bottom: 1px solid var(--border-strong); }
.mfa-claim summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 44px; padding: 18px 0; cursor: pointer; list-style: none; font-family: var(--font-display); font-size: clamp(1.3rem, 1.9vw, 1.6rem); line-height: 1.25; color: var(--ink); transition: color 200ms; }
.mfa-claim summary::-webkit-details-marker { display: none; }
.mfa-claim summary::after { content: ""; flex: none; width: 10px; height: 10px; margin: -4px 6px 0 0; border-right: 2px solid var(--accent-blue); border-bottom: 2px solid var(--accent-blue); transform: rotate(45deg); transition: transform 360ms var(--mfa-ease); }
.mfa-claim summary:hover { color: var(--accent-blue-hover); }
.mfa-claim summary:hover::after { transform: translateY(3px) rotate(45deg); }
.mfa-claim[open] summary::after { margin-top: 6px; transform: rotate(-135deg); }
.mfa-claim[open] summary:hover::after { transform: translateY(-3px) rotate(-135deg); }
.mfa-claim p { padding: 0 32px 22px 0; font-size: 16.5px; line-height: 1.65; color: var(--ink-soft); }
.mfa-claim[open] p { animation: mfa-unfold 420ms var(--mfa-ease); }

.mfa-safe__close { margin-top: clamp(36px, 5vw, 64px); padding-top: clamp(28px, 4vw, 48px); border-top: 1px solid var(--border-strong); }
.mfa-safe__line { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.8rem, 3.4vw, 3rem); line-height: 1.15; color: var(--ink); margin-bottom: 18px !important; }
.mfa-safe__close p + p { font-size: 17.5px; line-height: 1.7; color: var(--ink-soft); }

/* ============ READ ON ============ */
.mfa-next { padding-block: clamp(48px, 6vw, 88px) clamp(56px, 7vw, 104px); border-top: 1px solid var(--border); }
.mfa-next__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.mfa .mfa-next h2 { margin-bottom: 18px; }
.mfa-next__line p { font-size: 17.5px; line-height: 1.7; color: var(--ink-soft); }
.mfa .mfa-next__rest h3 { font-size: 1.6rem; margin-bottom: 8px; }
.mfa .mfa-route a { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; padding: 16px 0; border-bottom: 1px solid var(--border); font-family: var(--font-display); font-size: clamp(1.3rem, 1.9vw, 1.6rem); line-height: 1.2; color: var(--ink); transition: color 200ms, padding-left 360ms var(--mfa-ease); }
.mfa-route a span { font-family: var(--font-body); font-size: 20px; color: var(--accent-blue-hover); transition: transform 360ms var(--mfa-ease); }
.mfa-route a:hover, .mfa-route a:focus-visible { color: var(--accent-blue-hover); }
.mfa-route a:hover span, .mfa-route a:focus-visible span { transform: translateX(8px); }
.mfa .mfa-next__up { display: flex; flex-wrap: wrap; gap: 4px 28px; margin-top: 18px; font-size: 16px; }
.mfa-next__up a { display: inline-flex; align-items: center; min-height: 44px; }

/* the way on: a signpost whose arms swing out */
.mfa-sign { display: block; width: 64px; height: 64px; margin-bottom: 14px; overflow: visible; }
.mfa-sign path { fill: #fff; stroke: var(--ink); stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.mfa-sign .mfa-sign__arm { stroke: var(--accent-blue); transform-box: fill-box; }
.mfa-sign .mfa-sign__arm--a { transform-origin: left center; }
.mfa-sign .mfa-sign__arm--b { transform-origin: right center; }
@keyframes mfa-swing { from { transform: scaleX(0); opacity: 0; } 60% { transform: scaleX(1.06); opacity: 1; } }
.mfa-js [data-r="sign"]:not(.is-in) { opacity: 1; transform: none; }
.mfa-js .mfa-sign:not(.is-in) .mfa-sign__arm { opacity: 0; }
.mfa-js .mfa-sign.is-in .mfa-sign__arm { animation: mfa-swing 700ms var(--mfa-ease) 200ms both; }
.mfa-js .mfa-sign.is-in .mfa-sign__arm--b { animation-delay: 460ms; }

/* ============ NARROWER ============ */
@media (max-width: 1100px) {
  /* the bar's track can scroll here, so its edges fade */
  .mfa .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); }
  .mfa-trip { grid-template-columns: 140px minmax(0, 1fr) 124px; }
  .mfa-trip__note { grid-column: 1 / -1; }
  .mfa-dist__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .mfa-hero__row, .mfa-ysidro, .mfa-country__grid, .mfa-reg__grid, .mfa-next__grid { grid-template-columns: minmax(0, 1fr); }
  .mfa-ysidro__why { grid-column: 1; }
  .mfa-map { position: static; max-width: 520px; }
  .mfa-others { grid-template-columns: minmax(0, 1fr); }
  /* the four phases stack, and each connector runs down to the next */
  .mfa-phases { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 28px; }
  .mfa-phase { grid-row: auto; grid-template-rows: none; grid-template-columns: 60px minmax(0, 1fr); column-gap: 18px; }
  .mfa-phase__icon { grid-row: 1 / span 2; margin: 0; }
  .mfa-phase :is(h3, p, ul) { grid-column: 2; }
  .mfa-phase:not(:last-child)::after { left: 29px; top: 60px; width: 2px; height: calc(100% - 60px + 28px); transform-origin: top; }
  .mfa-js .mfa-phase:not(.is-in)::after { transform: scaleY(0); }
  .mfa-js [data-r="left"]:not(.is-in) { transform: translateY(18px); }
  /* the table keeps its two columns, with each row's question set above them */
  .mfa-mirror, .mfa-mirror thead, .mfa-mirror tbody { display: block; }
  .mfa-mirror tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mfa-mirror thead td { display: none; }
  .mfa-mirror thead th { padding: 0 8px 10px 0; font-size: 1.2rem; }
  .mfa-mirror thead th + th { padding-left: 14px; }
  .mfa-mirror tbody th { grid-column: 1 / -1; padding: 16px 0 6px; border: 0; }
  .mfa-mirror tbody td { padding: 0 12px 16px 0; font-size: 15px; }
  .mfa-mirror tbody td + td { padding: 0 0 16px 14px; }
}
@media (max-width: 600px) {
  html:has(body.mfa) { --hc-bar-h: 48px; }
  .mfa .hc-bar__track { gap: 22px; }
  .mfa-trip { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; }
  .mfa-trip__time { text-align: right; }
  .mfa-trip__bar { grid-column: 1 / -1; grid-row: 2; }
  .mfa-ysidro { margin-inline: calc(var(--mfa-gut) * -1); border-radius: 0; padding-inline: var(--mfa-gut); }
  .mfa-lane { grid-template-columns: minmax(0, 1fr); }
  .mfa-five > li { grid-template-columns: minmax(0, 1fr); }
  .mfa-claim p { padding-right: 0; }
  .mfa-tally > li { padding-left: 60px; }
  .mfa-mirror tr { grid-template-columns: minmax(0, 1fr); }
  .mfa-mirror thead { display: none; }
  .mfa-mirror tbody td::before { content: attr(data-who); display: block; font-family: var(--font-display); font-size: 1.15rem; color: #fff; }
  .mfa-mirror tbody td + td { padding-left: 0; border-left: 0; }
}

/* ============ STILL ============
   Reduced motion: every drawing holds its finished state and nothing moves. */
@media (prefers-reduced-motion: reduce) {
  .mfa main *, .mfa main *::before, .mfa main *::after { animation: none !important; transition: none !important; }
  .mfa-js [data-r]:not(.is-in), .mfa-js [data-r]:not(.is-in) * { opacity: 1 !important; transform: none !important; }
  .mfa-js .mfa-scene .mfa-draw, .mfa-js .mfa-tally__icon path { stroke-dasharray: none !important; }
  .mfa-js .mfa-phase:not(.is-in)::after { transform: none !important; }
  .mfa-map__ring { display: none; }
  .mfa .hc-bar { transition: none !important; }
  .mfa-go:hover span, .mfa-route a:hover span { transform: none; }
}
@media print {
  .mfa .hc-bar { display: none !important; }
  .mfa-js [data-r], .mfa-js [data-r] * { opacity: 1 !important; transform: none !important; animation: none !important; }
  .mfa-reg, .mfa-ysidro { background: #fff; color: var(--ink); }
  .mfa-reg *, .mfa-ysidro * { color: var(--ink) !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; }
}

/* On paper every fold is open, so its Show less handle has nothing to do. */
@media print {
  details.mfa-more > summary { display: none !important; }
}