/* /learn-medical-tourism-safety: its own sheet, loaded after site.css.
   One idea runs the page: two buildings on the same street, and a list of
   five things to verify that tells them apart. The hero draws it, the five
   checks tick as they are read, and the trip list can be ticked and printed.
   Two colours are a key, used the same way everywhere: blue is an accredited
   setting, salmon is an unaccredited one.
   Script: scripts/learn-medical-tourism-safety.js. With that script absent
   every part is visible, every link still jumps and every box still ticks. */

html:has(body.med-safety) {
  --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);
}
.med-safety {
  --ms-warn-ink: #8a3a3a;      /* unaccredited: marks and text on white */
  --ms-ease: cubic-bezier(.16, 1, .3, 1);
  --ms-gut: clamp(20px, 4vw, 56px);
  --ms-navy: var(--navy-brand);
  --ms-on-navy: #c9def2;
}

/* ============ GROUND RULES ============ */
.ms-wrap { max-width: calc(1240px + 2 * var(--ms-gut)); margin-inline: auto; padding-inline: var(--ms-gut); }
/* text fills its column; the column sets the measure */
.med-safety main p { max-width: none; margin: 0; }
.med-safety main a:not(.btn) { border-bottom: 0; }
.med-safety main :is(ul, ol) { list-style: none; margin: 0; padding: 0; }
.med-safety 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;
}
.med-safety main h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.3rem, 1.9vw, 1.65rem); line-height: 1.2; letter-spacing: -.005em; color: var(--ink); margin: 0; max-width: none; text-wrap: wrap; }
.med-safety main h4 { font-family: var(--font-display); font-weight: 500; font-size: 1.28rem; line-height: 1.25; color: var(--ink); margin: 0; max-width: none; }
.med-safety main section p { font-size: 17px; line-height: 1.7; color: var(--ink-soft); }
.med-safety main .ms-lead { font-family: var(--font-display); font-size: clamp(1.3rem, 1.9vw, 1.65rem); line-height: 1.25; color: var(--ink); }
.med-safety main :is(a, .btn, summary, button):focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 3px; border-radius: 4px; }
.med-safety .ms-rates :is(a, .btn):focus-visible { outline-color: var(--accent-ice); }
/* a part that receives focus after a jump is not itself a control */
.med-safety main :is(h1, h2, h3, section)[tabindex="-1"]:focus { outline: none; }

.ms-arr { display: inline-block; font-style: normal; transition: transform 360ms var(--ms-ease); }
a:hover > .ms-arr, .btn:hover > .ms-arr { transform: translateX(6px); }
a:hover > .ms-arr--down, .btn:hover > .ms-arr--down { transform: translateY(4px); }

.ms-link { color: var(--accent-blue-hover); text-decoration: underline; text-decoration-color: var(--accent-blue); text-decoration-thickness: 1.5px; text-underline-offset: 4px; transition: color 200ms; }
.ms-link:hover { color: var(--accent-blue); }

/* the onward link */
.ms-go { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15.5px; 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; }
.ms-go:hover { color: var(--accent-blue); text-decoration-color: currentColor; }

/* ============ REVEALS ============
   Hidden only once the script has said it is running (ms-js on <html>), so
   with no script nothing is ever hidden. Each part comes in its own way. */
.ms-js [data-r] { transition: opacity 620ms ease, transform 820ms var(--ms-ease); }
.ms-js [data-r]:not(.is-in) { opacity: 0; transform: translateY(18px); }
/* these keep their box and animate their own pieces instead */
.ms-js :is([data-r="chart"], [data-r="grid"], [data-r="bubbles"], [data-r="next"]):not(.is-in) { opacity: 1; transform: none; }
.ms-js [data-r="claim"]:not(.is-in) { transform: translateX(-28px); }

@keyframes ms-up { from { opacity: 0; transform: translateY(22px); } }
@keyframes ms-draw { from { stroke-dashoffset: 1; opacity: 0; } 12% { opacity: 1; } to { stroke-dashoffset: 0; opacity: 1; } }
@keyframes ms-pop { from { transform: scale(0); opacity: 0; } 70% { transform: scale(1.18); opacity: 1; } }
@keyframes ms-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes ms-tick { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes ms-corner { from { opacity: 0; transform: translate(var(--dx), var(--dy)); } }
@keyframes ms-drop { from { opacity: 0; transform: translateY(-26px) scale(.6); } 70% { transform: translateY(2px) scale(1.04); opacity: 1; } }
@keyframes ms-unfold { from { opacity: 0; transform: translateY(-8px); } }
@keyframes ms-stamp { 40% { transform: scale(1.22); } }
@keyframes ms-slide { from { opacity: 0; transform: translateX(22px); } }

/* ============ HERO ============ */
.ms-hero { padding-block: clamp(36px, 5vw, 72px) clamp(48px, 6vw, 88px); }
.ms-hero__h1 { font-family: var(--font-display); font-weight: 300; font-size: clamp(2.1rem, 4.2vw, 3.8rem); line-height: 1.06; letter-spacing: -.015em; color: var(--ink); margin: 0 0 clamp(28px, 4vw, 52px); max-width: none; text-wrap: wrap; }
/* a heading that has to wrap breaks where the styling changes */
.ms-hero__h1 > .h-lead, .ms-hero__h1 > em { display: inline-block; }
.ms-hero__h1 > em { color: var(--accent-blue); }
.ms-hero__row { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.med-safety main .ms-hero__answer { font-size: clamp(1.12rem, 1.5vw, 1.3rem); line-height: 1.6; color: var(--ink); }
.med-safety main .ms-hero__lede { margin-top: 14px; }
.ms-hero__go { margin-top: 26px; }
.ms-toc { margin-top: clamp(32px, 4vw, 56px) !important; border-top: 1px solid var(--border); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(20px, 3vw, 44px); }
.ms-toc a { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 46px; padding-block: 8px; border-bottom: 1px solid var(--border) !important; font-size: 16px; color: var(--ink-soft); transition: color 200ms, padding-left 360ms var(--ms-ease); }
.ms-toc a::after { content: "\2193"; color: var(--accent-blue); transition: transform 360ms var(--ms-ease); }
.ms-toc a:hover { color: var(--accent-blue-hover); padding-left: 8px; }
.ms-toc a:hover::after { transform: translateY(4px); }

.ms-hero__fig { margin: 0; }
.ms-scene { display: block; width: 100%; height: auto; overflow: visible; }
.ms-scene :is(path, rect) { fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ms-scene .ms-draw--thin { stroke: var(--border-strong); stroke-width: 1.4; }
.ms-scene .ms-scene__shop > .ms-draw:not(.ms-draw--thin) { stroke: var(--ms-warn-ink); }
.ms-scene .ms-scene__shop > .ms-draw--thin { stroke: #c87272; }
.ms-scene .ms-draw--blue { stroke: var(--accent-blue); stroke-width: 3; }
.ms-scene__win rect { stroke: none; fill: var(--accent-wash); transform-box: fill-box; transform-origin: center; }
.ms-scene .ms-scene__paper { fill: #fff; stroke: var(--ink); }
.ms-scene__row rect { stroke: var(--accent-blue); fill: #fff; }
.ms-scene .ms-scene__tick { stroke: var(--accent-blue); stroke-width: 2.4; stroke-dasharray: 1; }
.ms-scene .ms-scene__rule { stroke: var(--border-strong); stroke-width: 1.6; }
.ms-scene .ms-draw { stroke-dasharray: 1; }

/* first paint: the street, the storefront, the hospital, then the list is ticked against it */
.ms-js .ms-hero__h1 > * { animation: ms-up 900ms var(--ms-ease) both; }
.ms-js .ms-hero__h1 > em { animation-delay: 110ms; }
.ms-js .ms-hero__text > * { animation: ms-up 900ms var(--ms-ease) 240ms both; }
.ms-js .ms-hero__text > .ms-hero__go { animation-delay: 340ms; }
.ms-js .ms-toc { animation: ms-up 900ms var(--ms-ease) 520ms both; }
.ms-js .ms-scene .ms-draw { animation: ms-draw 700ms var(--ms-ease) both; }
.ms-js .ms-scene .ms-scene__street { animation-duration: 900ms; animation-delay: 200ms; }
.ms-js .ms-scene__shop .ms-draw { animation-delay: 700ms; }
.ms-js .ms-scene__hosp .ms-draw { animation-delay: 1150ms; animation-duration: 900ms; }
.ms-js .ms-scene__hosp .ms-draw--blue { animation-delay: 1900ms; animation-duration: 420ms; }
.ms-js .ms-scene__win rect { animation: ms-pop 380ms var(--ms-ease) calc(1700ms + var(--i) * 60ms) both; }
.ms-js .ms-scene__list { animation: ms-rise 700ms var(--ms-ease) 2300ms both; }
.ms-js .ms-scene__list .ms-draw { animation-delay: 2500ms; }
.ms-js .ms-scene .ms-scene__tick { animation: ms-tick 380ms var(--ms-ease) calc(3000ms + var(--i) * 260ms) both; }

/* ============ CONTENTS BAR (follows the reader) ============ */
.med-safety .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(--ms-ease), visibility 0s 360ms;
}
.med-safety .hc-bar.is-on { transform: none; opacity: 1; visibility: visible; transition: opacity 260ms, transform 360ms var(--ms-ease); }
body.med-safety.nav-open .hc-bar { opacity: 0; visibility: hidden; }
.med-safety .hc-bar__track {
  max-width: calc(1240px + 2 * var(--ms-gut)); margin: 0 auto; padding: 0 var(--ms-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;
}
.med-safety .hc-bar__track::-webkit-scrollbar { display: none; }
.med-safety .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;
}
.med-safety .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(--ms-ease);
}
.med-safety .hc-bar__track a:hover, .med-safety .hc-bar__track a[aria-current] { color: var(--ink); }
.med-safety .hc-bar__track a:hover::after { transform: scaleX(.35); }
.med-safety .hc-bar__track a[aria-current]::after { transform: scaleX(1); }
.med-safety .hc-bar__track a:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: -4px; border-radius: 4px; }
.med-safety .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 RATES (navy: the headline, then the pull line) ============ */
.ms-rates { background: var(--ms-navy); padding-block: clamp(64px, 8vw, 116px); }
.med-safety main .ms-rates :is(h2, h3) { color: #fff; }
.med-safety main .ms-rates p { color: var(--ms-on-navy); }
.med-safety main .ms-rates .ms-lead { color: #fff; }
.ms-rates__head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(32px, 5vw, 88px); row-gap: 14px; align-items: start; margin-top: 24px; }
.ms-rates__foot { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 5vw, 88px); align-items: start; margin-top: clamp(36px, 5vw, 60px); }
.med-safety main .ms-rates__pull { font-family: var(--font-display); font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1.2; color: #fff; }
.ms-rates__pull em { color: var(--accent-ice); }

/* ============ THE QUADRANT ============ */
.ms-quad { padding-block: clamp(64px, 8vw, 116px) clamp(48px, 6vw, 80px); }
.ms-quad__intro { margin-top: 22px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(28px, 4vw, 64px); row-gap: 12px; }
.ms-quad__intro .ms-lead { grid-column: 1 / -1; }
.ms-grid { margin: clamp(36px, 5vw, 60px) 0 0; }
.ms-grid figcaption { margin-bottom: 18px; }
.ms-grid__plot { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 0 14px; }
.med-safety main .ms-grid__y { writing-mode: vertical-rl; transform: rotate(180deg); display: flex; justify-content: center; align-items: center; font-size: 14px; color: var(--ink-muted); border-left: 1.5px solid var(--border-strong); }
.ms-grid__y span::after { content: " \2192"; }
.ms-grid__cells { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; grid-template-areas: "q2 q1" "q4 q3"; }
.ms-cell { position: relative; padding: 26px 28px 28px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: #fff; }
.ms-cell--q1 { grid-area: q1; border: 1.5px solid var(--accent-blue); --dx: 26px; --dy: -26px; }
.ms-cell--q2 { grid-area: q2; --dx: -26px; --dy: -26px; }
.ms-cell--q3 { grid-area: q3; --dx: 26px; --dy: 26px; }
.ms-cell--q4 { grid-area: q4; --dx: -26px; --dy: 26px; }
.ms-ico { float: right; width: 56px; height: 56px; margin: 0 0 8px 16px; }
.ms-ico path { fill: none; stroke: var(--accent-blue); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
:is(.ms-cell--q2, .ms-cell--q4) .ms-ico path { stroke: var(--ms-warn-ink); }
.med-safety main .ms-cell__where { font-size: 14px; color: var(--ink-muted); margin-bottom: 6px; }
.ms-cell h4 { margin-bottom: 10px !important; }
.med-safety main .ms-cell p:last-child { font-size: 16px; line-height: 1.6; }
.ms-cell strong { color: var(--ink); font-weight: 600; }
.med-safety main .ms-grid__x { grid-column: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 12px; padding-top: 10px; border-top: 1.5px solid var(--border-strong); font-size: 14px; color: var(--ink-muted); text-align: center; }
.ms-grid__x span:first-child::before { content: "\2190  "; }
.ms-grid__x span:last-child::after { content: "  \2192"; }
/* each room comes in from its own corner of the grid */
.ms-js .ms-grid:not(.is-in) .ms-cell { opacity: 0; }
.ms-js .ms-grid.is-in .ms-cell { animation: ms-corner 820ms var(--ms-ease) both; }
.ms-js .ms-grid.is-in .ms-cell--q1 { animation-delay: 120ms; }
.ms-js .ms-grid.is-in .ms-cell--q3 { animation-delay: 240ms; }
.ms-js .ms-grid.is-in .ms-cell--q4 { animation-delay: 360ms; }

/* "Read more" */
.ms-more { margin-top: 18px; }
.ms-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; }
.ms-more summary::-webkit-details-marker { display: none; }
.ms-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(--ms-ease); }
.ms-more summary:hover { color: var(--accent-blue); }
.ms-more summary:hover::after { transform: translateY(3px) rotate(45deg); }
.ms-more[open] summary::after { margin-top: 4px; transform: rotate(-135deg); }
.ms-more[open] summary:hover::after { transform: translateY(-3px) rotate(-135deg); }
.ms-more__shut, .ms-more[open] .ms-more__open { display: none; }
.ms-more[open] .ms-more__shut { display: inline; }
.ms-more__body { padding-block: 8px 4px; }
.ms-more[open] .ms-more__body { animation: ms-unfold 420ms var(--ms-ease); }

/* ============ THE COUNTRIES ============ */
.ms-dest { padding-block: clamp(48px, 6vw, 80px) clamp(64px, 8vw, 116px); border-top: 1px solid var(--border); }
.ms-dest__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 80px); align-items: end; margin-top: 18px; }
.ms-bubbles { display: block; width: 100%; height: auto; overflow: visible; }
.ms-bubbles circle { fill: #fff; stroke: var(--ink-muted); stroke-width: 1.5; transform-box: fill-box; transform-origin: 50% 100%; }
.ms-bubbles .ms-bubbles__mx { fill: var(--accent-blue); stroke: var(--accent-blue); }
.ms-bubbles__base { fill: none; stroke: var(--border-strong); stroke-width: 1.5; }
.ms-js .ms-bubbles:not(.is-in) circle { opacity: 0; }
.ms-js .ms-bubbles.is-in circle { animation: ms-drop 700ms var(--ms-ease) calc(var(--i) * 90ms) both; }

.ms-table { margin-top: clamp(28px, 4vw, 48px); border-top: 1.5px solid var(--ink); }
.ms-table__head, .ms-row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .8fr) minmax(0, 1fr) minmax(0, 2.6fr); column-gap: clamp(14px, 2vw, 28px); align-items: start; }
.ms-table__head { padding-block: 12px; font-size: 14px; color: var(--ink-muted); border-bottom: 1px solid var(--border); }
.ms-row { padding-block: 20px; border-bottom: 1px solid var(--border); }
.med-safety main .ms-row__country { font-family: var(--font-display); font-size: 1.4rem; line-height: 1.2; color: var(--ink); }
.ms-row__country span { display: block; font-family: var(--font-body); font-size: 14.5px; color: var(--ink-muted); margin-top: 4px; }
.med-safety main .ms-row__n { font-size: 18px; color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
.med-safety main .ms-row__verdict { position: relative; padding-left: 20px; font-size: 16px; font-weight: 600; color: var(--ink); }
.ms-row__verdict::before { content: ""; position: absolute; left: 0; top: .5em; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--accent-blue); }
.ms-row__verdict[data-tier="strong"]::before { background: var(--accent-blue); }
.ms-row__verdict[data-tier="weak"] { color: var(--ms-warn-ink); }
.ms-row__verdict[data-tier="weak"]::before { border-color: var(--ms-warn-ink); background: var(--ms-warn-ink); }
.med-safety main .ms-row__why { font-size: 16px; line-height: 1.6; }
.ms-row--mx { position: relative; }
.ms-row--mx::before { content: ""; position: absolute; left: -16px; top: 18px; bottom: 18px; width: 3px; border-radius: 2px; background: var(--accent-blue); }
.ms-more--rows { margin-top: 0; }
.ms-more--rows summary { margin-top: 8px; }
.ms-more--rows .ms-more__body { padding-block: 0; position: relative; }
/* the folded rows are a table of their own: its header row is for a screen reader only */
.ms-vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.ms-clinic { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 10px; min-height: 44px; margin-top: 4px; font-weight: 600; font-size: 15.5px; color: var(--accent-blue-hover); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 5px; transition: color 200ms, text-decoration-color 260ms; }
.ms-clinic img { width: auto; height: 28px; }
.ms-clinic img[width][height] { height: 28px; }
.ms-clinic:hover { color: var(--accent-blue); text-decoration-color: currentColor; }
.ms-dest__after { margin-top: clamp(28px, 4vw, 44px) !important; }
.ms-dest__after strong { color: var(--ink); font-weight: 600; }

/* ============ THE FIVE CHECKS ============ */
.ms-checks { padding-block: clamp(64px, 8vw, 116px); border-top: 1px solid var(--border); }
.ms-checks__grid { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; margin-top: clamp(28px, 4vw, 48px); }
.ms-clip { position: sticky; top: calc(var(--hc-nav-h) + var(--hc-bar-h) + 32px); }
.ms-clip svg { display: block; width: 100%; height: auto; }
.ms-clip :is(rect, path) { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ms-clip .ms-clip__paper { fill: #fff; }
.ms-clip__row rect { stroke: var(--border-strong); transition: stroke 300ms, fill 300ms; }
.ms-clip__row path:not(.ms-clip__rule) { stroke: #fff; stroke-width: 3; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 420ms var(--ms-ease); }
.ms-clip .ms-clip__rule { stroke: var(--border-strong); transition: stroke 300ms; }
/* ticked is the resting state; the script un-ticks what has not been read yet */
.ms-clip__row rect { stroke: var(--accent-blue); fill: var(--accent-blue); }
.ms-clip .ms-clip__rule { stroke: var(--ink-muted); }
.ms-js .ms-clip__row:not(.is-ticked) rect { stroke: var(--border-strong); fill: #fff; }
.ms-js .ms-clip__row:not(.is-ticked) path:not(.ms-clip__rule) { stroke-dashoffset: 1; }
.ms-js .ms-clip__row:not(.is-ticked) .ms-clip__rule { stroke: var(--border-strong); }
.ms-js .ms-clip__row.is-now rect { animation: ms-stamp 420ms var(--ms-ease); transform-box: fill-box; transform-origin: center; }

.ms-checks__main > p + p { margin-top: 12px; }
.ms-list { margin-block: clamp(24px, 3vw, 36px) !important; border-top: 1px solid var(--border); }
.ms-check { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 18px; row-gap: 6px; padding-block: 24px; border-bottom: 1px solid var(--border); }
.ms-check > :not(svg) { grid-column: 2; }
.ms-check__box { grid-row: span 3; width: 34px; height: 34px; margin-top: 2px; }
.ms-check__box rect { fill: var(--accent-blue); stroke: var(--accent-blue); stroke-width: 2; transition: fill 300ms, stroke 300ms; }
.ms-check__box path { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 420ms var(--ms-ease) 80ms; }
.ms-js .ms-check:not(.is-passed) .ms-check__box rect { fill: #fff; stroke: var(--border-strong); }
.ms-js .ms-check:not(.is-passed) .ms-check__box path { stroke-dashoffset: 1; }
.med-safety main .ms-check__verify { font-size: 15.5px; color: var(--ink-muted); }
.ms-check__verify strong { color: var(--accent-blue-hover); font-weight: 600; margin-right: 6px; }
.ms-print, .ms-clear { font: inherit; cursor: pointer; background: none; color: var(--accent-blue-hover); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); min-height: 44px; padding: 0 18px; display: inline-flex; align-items: center; gap: 10px; font-size: 15.5px; font-weight: 600; transition: border-color 200ms, color 200ms, transform 360ms var(--ms-ease); }
.ms-print[hidden], .ms-clear[hidden] { display: none; }
.ms-print { margin-top: 22px; }
.ms-print svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform 360ms var(--ms-ease); }
:is(.ms-print, .ms-clear):hover { border-color: var(--accent-blue); color: var(--accent-blue); }
.ms-print:hover svg { transform: translateY(2px); }
:is(.ms-print, .ms-clear):active { transform: scale(.97); }

/* ============ THE TRIP ============ */
.ms-trip { padding-block: clamp(64px, 8vw, 116px); border-top: 1px solid var(--border); }
.ms-route { --g: clamp(20px, 3vw, 44px); position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--g); margin-top: clamp(28px, 4vw, 48px); }
.ms-route__line { position: absolute; left: 32px; right: calc((100% - 2 * var(--g)) / 3 - 32px); top: 31px; height: 2px; background: var(--border-strong); }
.ms-route__line i { position: absolute; inset: 0; background: var(--accent-blue); transform-origin: left; transform: scaleX(var(--ms-route, 1)); }
.ms-route__stop { position: relative; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--accent-blue); border: 2px solid var(--accent-blue); transition: background 400ms, border-color 400ms, transform 500ms var(--ms-ease); }
.ms-route__stop svg { width: 34px; height: 34px; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: stroke 400ms; }
.ms-js .ms-route__stop:not(.is-lit) { background: #fff; border-color: var(--border-strong); transform: scale(.9); }
.ms-js .ms-route__stop:not(.is-lit) svg { stroke: var(--ink-muted); }

.ms-phases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(20px, 3vw, 44px); margin-top: 22px; }
/* the three lists share their rows, so the first box of each sits on one line, and the second, and so on */
.ms-phase { display: grid; grid-template-rows: subgrid; grid-row: span 7; min-width: 0; }
.ms-phase > ul { display: contents; }
.ms-phase > ul > li { display: grid; }
@supports not (grid-template-rows: subgrid) { .ms-phase { display: block; } .ms-phase > ul { display: block; } }
.ms-phase__head { display: flex; align-items: baseline; gap: 12px; }
.ms-phase__when { font-family: var(--font-display); font-size: 1.7rem; color: var(--ink); }
.ms-phase__time { font-size: 14.5px; color: var(--ink-muted); font-variant-numeric: lining-nums; }
.ms-phase h3 { font-family: var(--font-body) !important; font-size: 16px !important; font-weight: 500 !important; color: var(--ink-soft) !important; margin: 6px 0 0 !important; padding-bottom: 14px; border-bottom: 1.5px solid var(--ink); }
.ms-tick { position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 14px; align-items: start; min-height: 44px; padding-block: 12px; border-bottom: 1px solid var(--border); cursor: pointer; font-size: 16px; line-height: 1.55; color: var(--ink-soft); transition: color 200ms; }
.ms-tick input { appearance: none; -webkit-appearance: none; margin: 1px 0 0; width: 24px; height: 24px; border: 2px solid var(--ink-muted); border-radius: 5px; background: #fff center / 16px 16px no-repeat; cursor: pointer; transition: border-color 200ms, background-color 200ms; }
.ms-tick:hover input { border-color: var(--accent-blue); }
.ms-tick input:checked { border-color: var(--accent-blue); background-color: var(--accent-blue); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.500l3.200 3.200L13 4.500' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); animation: ms-stamp 380ms var(--ms-ease); }
.ms-tick input:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 3px; }
.ms-tick strong { color: var(--ink); font-weight: 600; }
.ms-tick em { color: var(--ink-muted); }
.ms-tick:has(input:checked) { color: var(--ink-muted); }
.med-safety main .ms-phases__foot { grid-column: 1 / -1; grid-row: 8; display: flex; align-items: center; gap: 18px; min-height: 44px; margin-top: 20px; font-size: 16px; color: var(--ink-muted); font-variant-numeric: lining-nums tabular-nums; }
.ms-phases__foot[hidden] { display: none !important; }
/* every box ticked: one drawn check beside the count, and nothing louder */
.ms-allset { width: 26px; height: 26px; margin-right: -8px; display: none; }
.ms-allset circle { fill: var(--accent-blue); }
.ms-allset path { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
.ms-phases__foot.is-complete .ms-allset { display: block; animation: ms-pop 420ms var(--ms-ease) both; }
.ms-phases__foot.is-complete .ms-allset path { animation: ms-tick 420ms var(--ms-ease) 260ms both; }
.ms-phases__foot b { color: var(--ink); font-weight: 600; }

/* ============ APPLIED TO US ============ */
.ms-us { padding-block: clamp(64px, 8vw, 116px); border-top: 1px solid var(--border); }
.ms-us__head { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(24px, 4vw, 64px); align-items: start; margin-top: 26px; }
.ms-us__sub { margin-top: clamp(40px, 5vw, 64px) !important; padding-bottom: 16px; border-bottom: 1.5px solid var(--ink); }
.ms-claim { display: grid; grid-template-columns: 56px minmax(0, 4fr) minmax(0, 7fr); column-gap: clamp(18px, 3vw, 40px); row-gap: 4px; align-items: start; padding-block: 22px; border-bottom: 1px solid var(--border); }
.ms-badge { grid-row: span 2; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #fff; border: 1.5px solid var(--accent-blue); }
.ms-badge svg { width: 30px; height: 30px; fill: none; stroke: var(--accent-blue); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ms-badge path { stroke-dasharray: 1; }
.ms-js .ms-claim:not(.is-in) .ms-badge path { stroke-dashoffset: 1; }
.ms-js .ms-claim.is-in .ms-badge path { animation: ms-tick 1100ms var(--ms-ease) 200ms both; }
.ms-claim h4 { grid-column: 2; }
.med-safety main .ms-claim__chip { grid-column: 2; font-size: 15px; color: var(--ink-muted); }
.ms-claim > p:not(.ms-claim__chip) { grid-column: 3; grid-row: 1 / span 2; font-size: 16.5px !important; }
.ms-claim strong { color: var(--ink); font-weight: 600; }
.ms-claim .ms-go { grid-column: 3; }
.ms-limit { padding: clamp(24px, 3vw, 40px); background: var(--accent-wash); border-radius: var(--radius-lg); }
.med-safety main .ms-limit h3 { margin-bottom: 12px; }
.med-safety main .ms-limit p { color: var(--ink); }
.ms-limit strong { font-weight: 600; }

/* ============ THE BOTTOM LINE ============ */
.ms-end { padding-block: clamp(64px, 8vw, 116px); border-top: 1px solid var(--border); }
.ms-end__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.ms-end__text .ms-lead { margin-block: 16px 12px !important; }
.ms-five { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-block: 6px 18px !important; }
.ms-js .ms-end__text:not(.is-in) .ms-badge path { stroke-dashoffset: 1; }
.ms-js .ms-end__text.is-in .ms-badge path { animation: ms-tick 1100ms var(--ms-ease) both; }
.ms-js .ms-end__text.is-in .ms-badge:nth-child(2) path { animation-delay: 140ms; }
.ms-js .ms-end__text.is-in .ms-badge:nth-child(3) path { animation-delay: 280ms; }
.ms-js .ms-end__text.is-in .ms-badge:nth-child(4) path { animation-delay: 420ms; }
.ms-js .ms-end__text.is-in .ms-badge:nth-child(5) path { animation-delay: 560ms; }
.med-safety main .ms-end__src { margin-top: 18px; font-size: 15.5px; color: var(--ink-muted); }
.ms-next h3 { padding-bottom: 14px; border-bottom: 1.5px solid var(--ink); }
.ms-next a { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 24px; column-gap: 16px; padding-block: 18px; border-bottom: 1px solid var(--border) !important; color: var(--ink-soft); transition: padding-left 360ms var(--ms-ease); }
.ms-next a b { grid-column: 1; font-family: var(--font-display); font-weight: 500; font-size: 1.28rem; line-height: 1.25; color: var(--ink); transition: color 200ms; }
.ms-next a span { grid-column: 1; font-size: 15.5px; line-height: 1.55; margin-top: 4px; }
.ms-next a i { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--accent-blue); font-size: 20px; }
.ms-next a:hover { padding-left: 8px; }
.ms-next a:hover b { color: var(--accent-blue-hover); }
.ms-js .ms-next:not(.is-in) li { opacity: 0; }
.ms-js .ms-next.is-in li { animation: ms-slide 700ms var(--ms-ease) both; }
.ms-js .ms-next.is-in li:nth-child(2) { animation-delay: 110ms; }
.ms-js .ms-next.is-in li:nth-child(3) { animation-delay: 220ms; }

/* ============ CLOSING (navy) ============ */
.ms-cta { margin-top: clamp(56px, 7vw, 96px); padding: clamp(56px, 7vw, 96px) var(--ms-gut) 0; text-align: center; border-top: 1px solid var(--border); }
.ms-cta__inner { max-width: 820px; margin: 0 auto; }
.ms-cta__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 28px; margin-top: 30px; }
.ms-cta__up { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 16px; font-weight: 500; color: var(--accent-blue-hover); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 5px; transition: color 200ms, text-decoration-color 260ms; }
.ms-cta__up:hover { color: var(--accent-blue); text-decoration-color: currentColor; }

/* ============ NARROWER ============ */
@media (max-width: 1100px) {
  /* the bar's track can scroll here, so its edges fade */
  .med-safety .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); }
  .ms-table__head { display: none; }
  .ms-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 8px; }
  .ms-row__country, .ms-row__n, .ms-row__why { grid-column: 1 / -1; }
  .ms-row__verdict { grid-column: 1 / -1; }
  .ms-row__n::before { content: attr(data-label) ": "; font-size: 14.5px; color: var(--ink-muted); }
}
@media (max-width: 900px) {
  .ms-hero__row, .ms-rates__head, .ms-rates__foot, .ms-dest__head, .ms-us__head, .ms-end__grid, .ms-quad__intro, .ms-toc { grid-template-columns: minmax(0, 1fr); }
  .ms-hero__fig { max-width: 520px; }
  .ms-bubbles { max-width: 440px; }
  .ms-checks__grid { grid-template-columns: minmax(0, 1fr); }
  .ms-clip { display: none; }
  .ms-check { grid-template-columns: 48px minmax(0, 1fr); column-gap: 14px; }
  .ms-check__box { width: 48px; height: 48px; margin-top: -4px; }
  .ms-claim { grid-template-columns: 56px minmax(0, 1fr); }
  .ms-claim > p:not(.ms-claim__chip), .ms-claim .ms-go { grid-column: 2; grid-row: auto; }
  .ms-claim > p:not(.ms-claim__chip) { margin-top: 6px; }
}
@media (max-width: 760px) {
  .ms-grid__plot { grid-template-columns: minmax(0, 1fr); }
  .ms-grid__y, .med-safety main .ms-grid__x { display: none; }
  .ms-grid__cells { grid-template-columns: minmax(0, 1fr); grid-template-areas: "q1" "q2" "q3" "q4"; }
  .ms-cell { padding: 22px 20px 24px; --dy: 0px; }
  .ms-phases { grid-template-columns: minmax(0, 1fr); row-gap: 34px; }
  .ms-phase, .ms-phase > ul { display: block; grid-row: auto; }
  .med-safety main .ms-phases__foot { grid-row: auto; }
  .ms-route { --g: 0px; }
}
@media (max-width: 600px) {
  html:has(body.med-safety) { --hc-bar-h: 48px; }
  .med-safety .hc-bar__track { gap: 22px; }
  .ms-hero__go { width: 100%; justify-content: center; }
  .ms-route__stop { width: 56px; height: 56px; }
  .ms-route__line { top: 27px; left: 28px; right: calc(100% / 3 - 28px); }
  .ms-cta .btn { width: 100%; justify-content: center; }
}

/* ============ STILL ============
   Reduced motion: every drawing holds its finished state and nothing moves. */
@media (prefers-reduced-motion: reduce) {
  .med-safety main *, .med-safety main *::before, .med-safety main *::after { animation: none !important; transition: none !important; }
  .ms-js [data-r]:not(.is-in), .ms-js .ms-grid:not(.is-in) .ms-cell, .ms-js .ms-bubbles:not(.is-in) circle, .ms-js .ms-next:not(.is-in) li { opacity: 1 !important; transform: none !important; }
  .ms-js .ms-claim:not(.is-in) .ms-badge path, .ms-js .ms-end__text:not(.is-in) .ms-badge path { stroke-dashoffset: 0 !important; }
  .med-safety .hc-bar { transition: none !important; }
  a:hover > .ms-arr, .btn:hover > .ms-arr, .ms-toc a:hover::after, .ms-print:hover svg { transform: none; }
  .ms-toc a:hover, .ms-next a:hover { padding-left: 0; }
}

/* ============ ON PAPER ============
   The page a spouse prints: the five checks and the trip list, with boxes. */
@media print {
  .med-safety main *, .med-safety main *::before, .med-safety main *::after { animation: none !important; transition: none !important; }
  /* a fold is open on paper even when the script never ran */
  .ms-more:not([open]) > .ms-more__body { display: block !important; }
  .ms-more::details-content { content-visibility: visible !important; display: block !important; }
  .ms-js .ms-badge path, .ms-js .ms-check__box path { stroke-dashoffset: 0 !important; }
  .med-safety .hc-bar, .ms-hero__go, .ms-toc, .ms-hero__fig, .ms-clip, .ms-print, .ms-phases__foot, .ms-more summary, .ms-cta, .ms-route, .ms-bubbles, .ms-next { display: none !important; }
  .ms-js [data-r], .ms-js .ms-cell, .ms-js .ms-next li { opacity: 1 !important; transform: none !important; animation: none !important; }
  .ms-rates { background: #fff; }
  .med-safety main .ms-rates :is(h2, h3, p, .ms-lead), .ms-rates__pull em { color: #000 !important; }
  .med-safety main section { padding-block: 18pt !important; }
  .ms-check, .ms-tick, .ms-cell, .ms-row, .ms-claim { break-inside: avoid; }
  .ms-checks, .ms-trip { break-before: page; }
  .ms-check__box rect { fill: #fff !important; stroke: #000 !important; }
  .ms-check__box path { stroke: none !important; }
  .ms-checks__grid, .ms-phases { grid-template-columns: minmax(0, 1fr); }
  .ms-phase, .ms-phase > ul { display: block; grid-row: auto; }
  .med-safety main .ms-phases__foot { grid-row: auto; }
  .ms-phase + .ms-phase { margin-top: 14pt; }
}

/* Parts waiting to slide in sit a little to one side; without this a phone
   could be scrolled sideways until they arrive. clip keeps sticky working. */
main { overflow-x: clip; }