/* /learn-compare-sci-panama. Loaded after site.css, by that page only.
   The page's one idea is distance: a continent away against a short drive.
   So the hero is a map with both trips on it, the tally is two lines drawn
   to scale (3,000 miles against 25), the totals are two bars drawn to scale
   (112 hours against 6), and every other part gets its own shape: a table
   whose rows span both clinics, two week calendars, a list with its icons
   struck through, a reel of four films, two maps on one clock.
   Script: scripts/compare-sci-panama.js. With the script absent every part
   is visible and every fold is open. */

/* On the root, because scroll-padding-top (below) is read there. */
html:has(body.pm) {
  --pm-max: 1200px;
  --pm-gut: clamp(20px, 4vw, 56px);
  --hc-nav-h: 64px;            /* fallback; the script sets the real header height */
  --hc-bar-h: 52px;
  --pm-ease: cubic-bezier(.16, 1, .3, 1);
  --pm-them: #5B6B7F;          /* Stem Cell Institute's key: a neutral slate */
  --pm-us: var(--accent-blue); /* Celva's key */
  --pm-navy: #0B1D3A;
  /* every jump, anchor and Tab stop lands below the header and the bar */
  scroll-padding-top: calc(var(--hc-nav-h) + var(--hc-bar-h) + 12px);
}
body.pm { background: var(--white); }

/* colors_and_type.css caps every bare <p> at 42rem and underlines every <a>.
   Here the column sets the measure, and a link says it is one in its own way. */
.pm main p { max-width: none; margin: 0; }
.pm main a:not(.btn) { border-bottom: 0; }
.pm main :is(h1, h2, h3) { text-wrap: wrap; }
.pm main :is(h1, h2) > :is(.h-lead, em) { display: inline-block; }
.pm main [tabindex="-1"]:focus { outline: none; }
.pm main :is(a, button, summary):focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 3px; border-radius: 3px; }
.pm :is(.pm-trip, .pm-end) :is(a, button, summary):focus-visible { outline-color: var(--accent-ice); }

.pm-wrap { max-width: calc(var(--pm-max) + 2 * var(--pm-gut)); margin: 0 auto; padding: 0 var(--pm-gut); }
.pm-h2 { font-weight: 300; font-size: clamp(1.85rem, 3.1vw, 2.75rem); line-height: 1.12; letter-spacing: -.012em; margin: 0 0 18px; }
.pm-h2 em { font-style: italic; color: var(--accent-blue); }
.pm-lede { font-size: clamp(1.06rem, 1.35vw, 1.19rem); line-height: 1.6; color: var(--ink-soft); }
.pm-fine { font-size: 14px; line-height: 1.5; color: var(--ink-muted); }
.pm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* a link that goes somewhere: its rule draws in from the left and its arrow steps */
.pm-go { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 16px; font-weight: 500; color: var(--accent-blue-hover); }
.pm-go::after { content: ""; position: absolute; left: 0; right: 26px; bottom: 9px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 360ms var(--pm-ease); }
.pm-go:hover::after, .pm-go:focus-visible::after { transform: scaleX(1); }
.pm-go svg, .learn-related__card a svg, .pm-end .btn svg { width: 18px; height: 18px; flex: none; transition: transform 360ms var(--pm-ease); }
.pm-go:hover svg, .pm-end .btn:hover svg { transform: translateX(4px); }
.pm-hero .pm-go:hover svg { transform: translateY(3px); }

/* a glossary term: dotted, so it reads as a definition and not as a route */
.pm-term { color: inherit; text-decoration: underline dotted var(--accent-blue) 1.5px; text-underline-offset: 3px; transition: color 200ms; }
.pm-term:hover { color: var(--accent-blue); }

/* ============ REVEALS ============
   Hidden only once the script has put .pm-js on <html>; the script shows
   anything it never claimed. [data-r="see"] is never hidden: its class only
   starts the drawing inside it. */
html.pm-js [data-r]:not([data-r="see"]) { opacity: 0; transition: opacity 620ms ease, transform 760ms var(--pm-ease); transition-delay: var(--d, 0ms); }
html.pm-js [data-r="rise"] { transform: translateY(18px); }
html.pm-js [data-r="left"] { transform: translateX(34px); }
html.pm-js [data-r].is-in { opacity: 1; transform: none; }

/* ============ HERO ============ */
.pm-hero { padding: clamp(20px, 2.6vw, 34px) 0 clamp(40px, 5vw, 72px); }
.pm-hero__h { font-weight: 300; font-size: clamp(2.1rem, 3.35vw, 3rem); line-height: 1.1; letter-spacing: -.015em; margin: 0 0 clamp(22px, 3vw, 40px); }
.pm-hero__h em { font-style: italic; color: var(--accent-blue); }
.pm-hero__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.pm-hero__answer { font-size: clamp(1.12rem, 1.5vw, 1.31rem); line-height: 1.55; color: var(--ink); }
.pm-hero__scope { margin-top: 16px !important; font-size: 15.5px; line-height: 1.55; color: var(--ink-muted); padding-left: 14px; border-left: 2px solid var(--accent-ice); }
.pm-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin: 30px 0 12px; }

/* the first paint: the headline sets in two halves, then the answer, then the map draws its two trips */
@keyframes pm-set { from { opacity: 0; transform: translateY(.35em); } to { opacity: 1; transform: none; } }
@keyframes pm-fade { from { opacity: 0; } to { opacity: 1; } }
.pm-hero__h .h-lead { animation: pm-set 720ms var(--pm-ease) both; }
.pm-hero__h em { animation: pm-set 720ms var(--pm-ease) 140ms both; }
.pm-hero__text > * { animation: pm-fade 700ms ease 320ms both; }
.pm-hero__text > .pm-hero__actions { animation-delay: 460ms; }

.pm-hero__map { position: relative; margin-right: calc(-1 * var(--pm-gut)); }
.pm-hmap {
  display: block; width: 100%; height: auto; overflow: hidden; --u: 1.35;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 90%, transparent), linear-gradient(to bottom, transparent, #000 8%, #000 90%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 9%, #000 90%, transparent), linear-gradient(to bottom, transparent, #000 8%, #000 90%, transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.pm-hmap__land path { fill: var(--shape-slate); stroke: rgba(11, 29, 58, .16); stroke-width: 1; vector-effect: non-scaling-stroke; }
.pm-hmap__land .land--mx, .pm-hmap__land .land--pa { fill: #DDE8F3; stroke: rgba(45, 110, 177, .45); }
.pm-hmap__haul { fill: none; stroke: var(--pm-them); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 0; vector-effect: non-scaling-stroke; }
.pm-hmap__ghost { fill: none; stroke: rgba(11, 29, 58, .18); stroke-width: 1; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; }
.pm-hmap__hop { fill: none; stroke: var(--accent-blue); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.pm-hmap__pin { transform-box: fill-box; transform-origin: center; }
.pm-hmap__pin--sd, .pm-hmap__pin--pa { fill: var(--ink); }
.pm-hmap__pin--tj { fill: var(--accent-blue); }
.pm-hmap__halo { fill: none; stroke: var(--accent-blue); stroke-width: 1.2; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; opacity: 0; }
.pm-hmap__lbl { font-family: var(--font-body); font-size: calc(13.5px * var(--u)); font-weight: 500; fill: var(--ink); paint-order: stroke; stroke: #fff; stroke-width: calc(4px * var(--u)); stroke-linejoin: round; }
.pm-hmap__lbl--tj { fill: var(--accent-blue-hover); }
.pm-hmap__plane { color: var(--ink); opacity: 0; }
.pm-hmap__plane path { fill: #fff; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

@keyframes pm-pin { 0% { transform: scale(0); } 60% { transform: scale(1.5); } 100% { transform: scale(1); } }
@keyframes pm-halo { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(7); opacity: 0; } }
@keyframes pm-land { from { opacity: 0; } to { opacity: 1; } }
/* the script adds .is-go to start the sequence and steps .is-1 to .is-4 through it */
html.pm-js .pm-hmap:not(.is-go) :is(.pm-hmap__land, .pm-hmap__pin, .pm-hmap__lbl, .pm-hmap__hop, .pm-hmap__ghost) { opacity: 0; }
html.pm-js .pm-hmap:not(.is-go) .pm-hmap__haul { stroke-dashoffset: 1; }
html.pm-js .pm-hmap.is-go .pm-hmap__land { animation: pm-land 900ms ease both; }
html.pm-js .pm-hmap.is-go :is(.pm-hmap__pin, .pm-hmap__lbl, .pm-hmap__hop, .pm-hmap__ghost) { opacity: 0; }
html.pm-js .pm-hmap.is-go .pm-hmap__haul { stroke-dashoffset: var(--haul, 1); }
html.pm-js .pm-hmap.is-1 :is(.pm-hmap__pin--sd, .pm-hmap__lbl--sd) { opacity: 1; }
html.pm-js .pm-hmap.is-1 .pm-hmap__pin--sd { animation: pm-pin 480ms var(--pm-ease) both; }
html.pm-js .pm-hmap.is-2 :is(.pm-hmap__hop, .pm-hmap__pin--tj, .pm-hmap__lbl--tj) { opacity: 1; }
html.pm-js .pm-hmap.is-2 .pm-hmap__pin--tj { animation: pm-pin 480ms var(--pm-ease) both; }
html.pm-js .pm-hmap.is-3 .pm-hmap__ghost { opacity: 1; transition: opacity 600ms; }
html.pm-js .pm-hmap.is-4 :is(.pm-hmap__pin--pa, .pm-hmap__lbl--pa) { opacity: 1; }
html.pm-js .pm-hmap.is-4 .pm-hmap__pin--pa { animation: pm-pin 480ms var(--pm-ease) both; }
html.pm-js .pm-hmap.is-4 .pm-hmap__halo { animation: pm-halo 2.8s ease-out 400ms 3; }
.pm-hmap__lbl { transition: opacity 400ms; }

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

/* ============ BY THE NUMBERS: two lines, drawn to scale ============ */
.pm-far { padding: clamp(40px, 5vw, 72px) 0 clamp(56px, 7vw, 104px); border-top: 1px solid var(--border); }
.pm-far .pm-h2 { margin-bottom: clamp(20px, 3vw, 36px); }
.pm-far__row + .pm-far__row { margin-top: clamp(28px, 4vw, 52px); }
.pm-far__track { position: relative; height: 56px; }
.pm-far__rule { position: absolute; left: 0; right: 0; top: 27px; height: 2px; background: repeating-linear-gradient(90deg, var(--border-strong) 0 2px, transparent 2px 8px); }
.pm-far__fill { position: absolute; left: 0; top: 26px; height: 4px; width: calc(100% - 28px); border-radius: 2px; background: var(--pm-them); transform-origin: left; transform: scaleX(var(--f)); }
.pm-far__row--us .pm-far__fill { background: var(--pm-us); }
.pm-far__icon { position: absolute; top: 0; left: calc((100% - 56px) * var(--f)); width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid var(--pm-them); color: var(--pm-them); }
.pm-far__row--us .pm-far__icon { border-color: var(--pm-us); color: var(--pm-us); }
.pm-far__icon svg { width: 28px; height: 28px; }
.pm-far__facts { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.2fr) minmax(0, 1fr); gap: 8px 40px; align-items: end; margin-top: 14px; }
.pm-far__who { display: flex; flex-direction: column; gap: 10px; font-size: 15.5px; font-weight: 600; color: var(--ink-soft); }
.pm-far__who img[width][height] { width: auto; height: 30px; max-width: 100%; object-fit: contain; object-position: left; align-self: flex-start; }
.pm-far__row--us .pm-far__who img[width][height] { height: 34px; }
.pm-far__big { font-family: var(--font-display); font-weight: 300; font-size: clamp(2.3rem, 4.6vw, 3.9rem); line-height: 1; letter-spacing: -.02em; color: var(--ink); }
.pm-far__big em { font-style: italic; color: var(--pm-them); }
.pm-far__row--us .pm-far__big em { color: var(--pm-us); }
.pm-far__mi { font-family: var(--font-display); font-style: italic; font-size: clamp(1.3rem, 2vw, 1.7rem); line-height: 1.15; color: var(--ink-soft); grid-column: 3; }
.pm-far__mi b { font-style: normal; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.pm-far__sub { font-size: 15px; color: var(--ink-muted); grid-column: 3; }
.pm-far__who, .pm-far__big { grid-row: 1 / span 2; }

/* ============ WHAT IS IDENTICAL: the one tinted band ============ */
.pm-same { background: var(--accent-wash); padding: clamp(56px, 7vw, 104px) 0; }
.pm-same__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px clamp(24px, 5vw, 80px); align-items: center; margin-bottom: clamp(28px, 4vw, 48px); }
.pm-vials { width: clamp(150px, 17vw, 220px); height: auto; overflow: visible; }
.pm-vial__glass { fill: #fff; stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; }
.pm-vial__cap { fill: var(--ink); }
.pm-vial__liq { fill: var(--accent-ice); transform-box: fill-box; transform-origin: bottom; }
.pm-vial__tag { fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; }
.pm-vials__eq path { fill: none; stroke: var(--accent-blue); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 24; }
@keyframes pm-fill { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes pm-dash { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }
html.pm-js .pm-same__head:not(.is-in) .pm-vial__liq { transform: scaleY(0); }
html.pm-js .pm-same__head:not(.is-in) .pm-vials__eq path { stroke-dashoffset: 24; }
html.pm-js .pm-same__head.is-in .pm-vial__liq { animation: pm-fill 1100ms var(--pm-ease) 200ms both; }
html.pm-js .pm-same__head.is-in .pm-vials__eq path { animation: pm-dash 500ms ease 1100ms both; }
html.pm-js .pm-same__head.is-in .pm-vials__eq path + path { animation-delay: 1250ms; }

.pm-tbl { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 16.5px; }
.pm-tbl th, .pm-tbl td { text-align: left; vertical-align: middle; padding: 16px 20px 16px 0; font-weight: 400; }
.pm-tbl thead th { vertical-align: bottom; padding-bottom: 14px; border-bottom: 2px solid var(--ink); font-size: 15px; font-weight: 600; color: var(--ink-muted); }
.pm-tbl thead th:first-child { width: 34%; }
.pm-tbl__brand { display: block; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.35rem, 2vw, 1.75rem); line-height: 1.1; color: var(--ink); }
.pm-tbl__sub { display: block; margin-top: 4px; font-weight: 400; font-size: 14.5px; color: var(--ink-muted); }
.pm-tbl tbody tr { border-bottom: 1px solid var(--border); transition: background-color 240ms; }
.pm-tbl tbody th { font-weight: 600; color: var(--ink); }
.pm-tbl td { color: var(--ink-soft); }
.pm-tbl td > span { vertical-align: middle; }
/* a row both clinics share is one cell across both columns, its check on the line between them */
.pm-tbl td[colspan] { padding-right: 0; }
.pm-both { display: flex; align-items: center; }
.pm-both::before, .pm-both::after { content: ""; flex: 1; height: 1px; background: rgba(11, 29, 58, .22); }
.pm-both::before { margin-right: 20px; }
.pm-both::after { margin-left: 20px; }
.pm-check { display: inline-block; vertical-align: middle; width: 26px; height: 26px; margin-right: 12px; flex: none; }
.pm-check circle { fill: var(--accent-blue); }
.pm-check path { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 14; }
@keyframes pm-check { from { stroke-dashoffset: 14; } to { stroke-dashoffset: 0; } }
@keyframes pm-stamp { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
html.pm-js .pm-tbl:not(.is-in) .pm-check { opacity: 0; }
html.pm-js .pm-tbl.is-in .pm-check { transform-origin: center; animation: pm-stamp 420ms var(--pm-ease) calc(var(--i, 0) * 110ms + 150ms) both; }
html.pm-js .pm-tbl.is-in .pm-check path { animation: pm-check 360ms ease calc(var(--i, 0) * 110ms + 330ms) both; }
.pm-tbl tfoot th, .pm-tbl tfoot td { padding-top: 20px; border-top: 2px solid var(--ink); font-weight: 600; color: var(--ink); }
.pm-tbl__all { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(1.4rem, 2.2vw, 1.9rem); color: var(--accent-blue-hover); }
.pm-same__limit { margin-top: clamp(24px, 3vw, 36px) !important; font-size: 16px; line-height: 1.6; color: var(--ink-soft); padding-left: 16px; border-left: 2px solid var(--accent-blue); }

/* ============ DAY BY DAY: two week calendars ============ */
.pm-cal { padding: clamp(56px, 7vw, 104px) 0 clamp(40px, 5vw, 72px); }
.pm-cal__hint { margin: 10px 0 clamp(20px, 3vw, 36px) !important; font-size: 15px; color: var(--ink-muted); }
.pm-cal__hint--phone { display: none; }
.pm-wk + .pm-wk { margin-top: clamp(28px, 4vw, 52px); }
.pm-wk__d > summary { list-style: none; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 6px 20px; padding-bottom: 12px; border-bottom: 2px solid var(--ink); }
.pm-wk__d > summary::-webkit-details-marker { display: none; }
.pm-wk__name { display: flex; align-items: center; gap: 14px; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 2.3vw, 2rem); line-height: 1.1; color: var(--ink); }
.pm-wk__name img[width][height] { width: auto; height: 32px; }
.pm-wk__total { font-size: 15.5px; font-weight: 600; color: var(--pm-them); }
.pm-wk--us .pm-wk__total { color: var(--accent-blue-hover); }
.pm-wk__days, .pm-wk__glance, .pm-wk__more { display: none; }
.pm-wk__grid { --lane: 460px; position: relative; display: grid; grid-template-columns: 52px repeat(6, minmax(0, 1fr)); }
.pm-wk__hours { position: relative; grid-row: 2; grid-column: 1; height: var(--lane); }
.pm-wk__hours span { position: absolute; top: var(--t); right: 10px; transform: translateY(-50%); font-size: 13px; color: var(--ink-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pm-wk__hours span:first-child { transform: none; }
.pm-wk__hours span:last-child { transform: translateY(-100%); }
.pm-wk__rules { position: absolute; left: 52px; right: 0; bottom: 0; height: var(--lane); width: calc(100% - 52px); pointer-events: none; }
.pm-wk__rules line { stroke: var(--border); stroke-width: 1; vector-effect: non-scaling-stroke; }
.pm-day { display: contents; }
.pm-day__h { grid-row: 1; grid-column: var(--col); padding: 12px 10px 10px; font-size: 14px; color: var(--ink-muted); border-left: 1px solid var(--border); }
.pm-day__h b { display: block; font-size: 15px; font-weight: 600; color: var(--ink); }
.pm-day__lane { grid-row: 2; grid-column: var(--col); position: relative; height: var(--lane); border-left: 1px solid var(--border); }
.pm-day:last-child :is(.pm-day__h, .pm-day__lane) { border-right: 1px solid var(--border); }

.ev {
  position: absolute; left: 4px; right: 4px; top: var(--t); height: var(--h); z-index: 1;
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 7px 9px; margin: 0;
  font: inherit; font-size: 12px; line-height: 1.25; text-align: left; color: var(--ink); cursor: pointer;
  background: #fff; border: 1px solid var(--border-strong); border-left: 3px solid var(--accent-ice); border-radius: 4px;
  overflow: hidden; transform-origin: top;
  transition: transform 260ms var(--pm-ease), box-shadow 260ms, border-color 200ms, background-color 200ms;
}
.ev__t { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-muted); white-space: nowrap; }
.ev__ttl { font-weight: 500; }
.ev--sm { flex-direction: row; align-items: center; gap: 6px; padding-block: 0; line-height: 1; min-height: 18px; z-index: 2; }
.ev--sm .ev__ttl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev--key { background: var(--accent-blue-hover); border-color: var(--accent-blue-hover); border-left-color: var(--accent-ice); color: #fff; }
.ev--key .ev__t { color: #D5E4F2; }
.ev--med { background: #E3EDF7; border-color: #C5D8EA; border-left-color: var(--accent-blue); }
.ev--med .ev__t { color: var(--ink-soft); }
.ev--idle { background: repeating-linear-gradient(135deg, #F1F3F6 0 8px, #E6E9EE 8px 9px); border-color: #D5DAE1; border-left-color: var(--pm-them); color: #3C4A5C; }
.ev--idle .ev__t { color: #4A586B; }
.ev--off { left: 6px; right: 6px; top: 6px; height: calc(100% - 12px); align-items: center; justify-content: center; background: transparent; border: 1px dashed var(--border-strong); color: var(--ink-muted); }
.ev--off .ev__ttl { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 17px; }
.ev--idle::after, .ev--off::before { content: ""; width: 18px; height: 18px; flex: none; background: currentColor; -webkit-mask: var(--g) center / contain no-repeat; mask: var(--g) center / contain no-repeat; }
.ev--idle::after { --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.72C20.53 18.61 14.36 22.93 7.99 20.12 6.14 19.31 4.64 17.8 3.84 15.95 1.11 9.59 5.4 3.48 11.27 3c-.56 2.52.14 5.47 1.98 7.31 1.83 1.83 5.02 3.02 7.75 2.41Z'/%3E%3C/svg%3E"); margin-top: auto; opacity: .7; }
.ev--off::before { --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 8.78v8.67c0 1.69 1.37 3.06 3.06 3.06h8.88c1.69 0 3.06-1.37 3.06-3.06V8.78'/%3E%3Cpath d='M21 9.96 13.47 4a2.37 2.37 0 0 0-2.94 0L3 9.96'/%3E%3C/svg%3E"); margin-bottom: 6px; opacity: .7; }
.ev--off { flex-direction: column; }
.ev:hover, .ev.is-open { z-index: 3; transform: translateY(-2px); box-shadow: var(--shadow-lift); border-color: var(--accent-blue); }
.ev--off:hover, .ev--off.is-open { background: #fff; }
.ev:focus-visible { z-index: 3; }
/* the week fills in, one block after another, when it comes into view */
@keyframes pm-ev { from { opacity: 0; transform: scaleY(.2); } to { opacity: 1; transform: none; } }
html.pm-js .pm-wk__grid:not(.is-in) .ev { opacity: 0; }
html.pm-js .pm-wk__grid.is-in .ev { animation: pm-ev 520ms var(--pm-ease) calc(var(--i, 0) * 70ms) both; }

/* the day a block opens */
.pm-pop { position: fixed; z-index: 58; width: 320px; background: #fff; border: 1px solid var(--border-strong); border-radius: 8px; box-shadow: 0 18px 50px rgba(11, 29, 58, .22); overflow: hidden; pointer-events: none; opacity: 0; transform: translateY(6px) scale(.97); transform-origin: var(--ox, left) center; transition: opacity 180ms ease, transform 260ms var(--pm-ease); }
.pm-pop.is-on { opacity: 1; transform: none; }
.pm-pop__fig { aspect-ratio: 16 / 9; background: var(--pm-navy); }
.pm-pop[data-novid] .pm-pop__fig { display: none; }
.pm-pop__fig video { display: block; width: 100%; height: 100%; object-fit: cover; }
.pm-pop__body { padding: 14px 16px 16px; }
.pm-pop__t { display: block; font-size: 13px; font-weight: 600; color: var(--accent-blue-hover); font-variant-numeric: tabular-nums; }
.pm-pop__ttl { font-family: var(--font-display); font-size: 1.45rem; line-height: 1.15; color: var(--ink); margin: 2px 0 !important; }
.pm-pop__w { font-size: 13.5px; font-weight: 600; color: var(--ink-muted); }
.pm-pop__n { margin-top: 8px !important; font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); }
.pm-pop.is-inline { position: static; width: auto; pointer-events: auto; box-shadow: none; margin: 6px 0 10px; transform-origin: top center; }

/* ============ FOLDS (native details) ============
   Shipped open. On a phone the script closes the ones a reader can skip; on a
   desktop their summaries are headings, not controls. */
.pm details > summary { cursor: default; }
.pm details > summary::-webkit-details-marker { display: none; }
.pm details > summary { list-style: none; }
.pm-chev { width: 20px; height: 20px; flex: none; color: var(--accent-blue-hover); transition: transform 320ms var(--pm-ease); display: none; }
.pm details[open] > summary .pm-chev { transform: rotate(180deg); }
.pm-fold > summary { display: none; }
.pm-fold__less, details[open] > summary .pm-fold__more { display: none; }
details[open] > summary .pm-fold__less { display: inline; }
@keyframes pm-unfold { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ============ WHAT WE LEAVE OUT: a list, each item struck off ============ */
.pm-out { padding: clamp(40px, 5vw, 72px) 0 clamp(56px, 7vw, 104px); }
.pm-out .pm-h2, .pm-seen .pm-h2 { margin-bottom: clamp(20px, 3vw, 36px); }
.pm-out__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px clamp(32px, 6vw, 96px); align-items: start; }
.pm-out__head { position: sticky; top: calc(var(--hc-nav-h) + var(--hc-bar-h) + 28px); }
.pm-out__list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.pm-out__row { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 0 22px; padding: 22px 0; border-bottom: 1px solid var(--border); }
.pm-out__icon { position: relative; width: 64px; height: 64px; border-radius: 50%; background: var(--shape-slate); display: grid; place-items: center; }
.pm-out__icon svg:first-child { width: 36px; height: 36px; fill: none; stroke: var(--ink-soft); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pm-out__icon svg:first-child .f { fill: var(--accent-ice); stroke: none; }
.pm-out__strike { position: absolute; inset: 0; width: 100%; height: 100%; }
.pm-out__strike line { stroke: var(--accent-blue-hover); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 68; }
@keyframes pm-strike { from { stroke-dashoffset: 68; } to { stroke-dashoffset: 0; } }
html.pm-js .pm-out__row:not(.is-in) .pm-out__strike line { stroke-dashoffset: 68; }
html.pm-js .pm-out__row.is-in .pm-out__strike line { animation: pm-strike 520ms var(--pm-ease) 420ms both; }
.pm-out__d > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.pm-out__d h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.3rem, 1.9vw, 1.6rem); line-height: 1.2; color: var(--ink); }
.pm-out__amt { font-size: 15px; font-weight: 600; color: var(--accent-blue-hover); font-variant-numeric: tabular-nums; }
.pm-out__d p { margin-top: 8px !important; font-size: 16.5px; line-height: 1.6; color: var(--ink-soft); }
.pm-out__end { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: clamp(1.4rem, 2.5vw, 2.1rem); line-height: 1.3; color: var(--ink); padding-top: clamp(8px, 2vw, 24px); }

/* ============ CELVA PATIENTS: a reel of four films ============ */
.pm-seen { padding: clamp(40px, 5vw, 72px) 0 clamp(64px, 8vw, 112px); }
.pm-seen__in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px clamp(28px, 5vw, 72px); align-items: center; }
.pm-seen__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; margin-top: 18px; }
.pm-seen__note { font-size: 14px; color: var(--ink-muted); }
.pm-seen__reel { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.pm-clip { display: block; aspect-ratio: 3 / 4; border-radius: 8px; overflow: hidden; background: var(--shape-slate); }
.pm-clip:nth-child(even) { margin-top: 36px; margin-bottom: -36px; }
.pm-clip video { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--pm-ease); }
.pm-clip:hover video { transform: scale(1.05); }
html.pm-js .pm-seen__reel:not(.is-in) .pm-clip { opacity: 0; transform: translateX(40px); }
.pm-seen__reel .pm-clip { transition: opacity 600ms ease, transform 900ms var(--pm-ease); transition-delay: calc(var(--i, 0) * 110ms); }

/* ============ THE TRIP, ON TWO MAPS: navy, one clock ============ */
.pm-trip { background: var(--pm-navy); color: #fff; padding: clamp(56px, 7vw, 104px) 0 clamp(48px, 6vw, 80px); }
.pm-trip .pm-h2 { color: #fff; }
.pm-trip .pm-h2 em { color: var(--accent-ice); }
.pm-trip .pm-lede { color: rgba(255, 255, 255, .78); }
.pm-clock { display: grid; grid-template-columns: auto minmax(60px, 1fr) auto; align-items: center; gap: 14px 28px; margin: clamp(24px, 3vw, 40px) 0 0; padding: 14px 0; border-top: 1px solid rgba(255, 255, 255, .22); border-bottom: 1px solid rgba(255, 255, 255, .22); }
.pm-clock__now { display: flex; align-items: baseline; gap: 10px; font-variant-numeric: tabular-nums; min-width: 11.5ch; }
.pm-clock__day { font-size: 15px; font-weight: 600; color: var(--accent-ice); }
.pm-clock__time { font-family: var(--font-display); font-weight: 300; font-size: 2.2rem; line-height: 1; color: #fff; min-width: 3.1ch; text-align: right; }
.pm-clock__mer { font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, .7); }
.pm-clock__bar { position: relative; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .16); overflow: hidden; }
.pm-clock__bar span { position: absolute; inset: 0; background: var(--accent-ice); transform-origin: left; transform: scaleX(0); }
.pm-clock__btns { display: flex; gap: 10px; }
.pm-clock__btns[hidden] { display: none; }   /* until the script that works them has run */
.pm-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; font: inherit; font-size: 14.5px; font-weight: 500; color: #fff; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .3); border-radius: 4px; cursor: pointer; transition: background-color 200ms, border-color 200ms, transform 260ms var(--pm-ease); }
.pm-btn:hover { background: rgba(255, 255, 255, .16); border-color: #fff; transform: translateY(-2px); }
.pm-btn:active { transform: none; }
.pm-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 500ms var(--pm-ease); }
.pm-btn[data-j="replay"]:hover svg { transform: rotate(-200deg); }
.pm-btn .pm-ico-play, .pm-btn.is-paused .pm-ico-pause { display: none; }
.pm-btn.is-paused .pm-ico-play { display: block; }

.pm-maps { display: grid; grid-template-columns: 1fr 1fr; }
.pm-map { display: flex; flex-direction: column; padding: 22px 0 26px; min-width: 0; }
.pm-map--us { padding-right: clamp(16px, 2.5vw, 36px); border-right: 1px solid rgba(255, 255, 255, .22); }
.pm-map--them { padding-left: clamp(16px, 2.5vw, 36px); }
.pm-map__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-bottom: 10px; }
.pm-map__brand { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.5rem, 2.2vw, 1.9rem); line-height: 1.1; }
.pm-map__sum { font-size: 14.5px; font-weight: 500; color: rgba(255, 255, 255, .72); }
.pm-map__svg { display: block; width: 100%; height: auto; --u: 1; transition: opacity 600ms ease; }
.pm-map__svg .land { fill: rgba(255, 255, 255, .055); stroke: rgba(255, 255, 255, .2); stroke-width: .8; vector-effect: non-scaling-stroke; }
.pm-map__svg .land--hi { fill: rgba(124, 169, 209, .22); stroke: rgba(124, 169, 209, .6); }
.pm-map__svg .route { fill: none; stroke: rgba(255, 255, 255, .22); stroke-width: 1; stroke-dasharray: 4 6; vector-effect: non-scaling-stroke; }
/* Trails are dash-revealed (dashoffset from getTotalLength), so they must NOT use
   non-scaling-stroke: that measures the reveal in screen px while the path scales
   with the viewBox, leaving little gaps before the dots on any zoom but 1x. */
.pm-map__svg .trail { fill: none; stroke-width: 2; stroke-linecap: round; }
.pm-map__svg .trail--tf { stroke-width: 1.2; opacity: .6; }
.pm-map--us .trail { stroke: var(--accent-ice); }
.pm-map--them .trail { stroke: #fff; }
.pm-map__svg .city { fill: #fff; }
.pm-map__svg .ring { fill: none; stroke: rgba(255, 255, 255, .34); stroke-width: 1; vector-effect: non-scaling-stroke; }
.pm-map__svg .lbl { font-family: var(--font-body); font-size: calc(13px * var(--u)); font-weight: 500; fill: rgba(255, 255, 255, .86); }
.pm-map__svg .lbl--dim { fill: rgba(255, 255, 255, .7); font-weight: 400; }
.pm-map__svg .insetbox { fill: rgba(5, 14, 30, .88); stroke: rgba(255, 255, 255, .24); stroke-width: 1; vector-effect: non-scaling-stroke; }
.pm-map__svg .link { fill: none; stroke: rgba(255, 255, 255, .22); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.pm-map__svg .node { fill: #fff; }
.pm-map__svg .tok { opacity: 0; transition: opacity 250ms ease; }
.pm-map__svg .tok.on { opacity: 1; }
.pm-map--us .tok__dot { fill: var(--accent-ice); stroke: #fff; stroke-width: 1; }
.pm-map--them .tok__dot { fill: #fff; }
.pm-map__svg .tok__halo { fill: none; stroke: rgba(255, 255, 255, .6); stroke-width: 1; transform-box: fill-box; transform-origin: center; animation: pm-tok 2.4s ease-out infinite; }
@keyframes pm-tok { 0% { transform: scale(1); opacity: .85; } 100% { transform: scale(5); opacity: 0; } }
.pm-trip.is-idle .tok__halo { animation-play-state: paused; }
.pm-map__status { margin-top: 12px; min-height: 108px; }
.pm-map__mode { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, .7); transition: color 200ms; }
.pm-map__mode::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.pm-map__mode.is-moving { color: var(--accent-ice); }
.pm-map__act { font-family: var(--font-display); font-style: italic; font-size: clamp(1.3rem, 1.9vw, 1.55rem); line-height: 1.2; color: #fff; margin: 4px 0 !important; }
.pm-map__note { font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, .76); }
.pm-map__meters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 14px 0 0; }
.pm-map__meters dt { font-size: 13.5px; color: rgba(255, 255, 255, .7); }
.pm-map__meters dd { margin: 2px 0 0; font-size: 1.15rem; font-weight: 500; font-variant-numeric: tabular-nums; color: #fff; }
.pm-map__stamp { display: flex; align-items: center; gap: 10px; margin-top: 16px !important; font-size: 15px; font-weight: 600; color: #fff; visibility: hidden; }
.pm-map__stamp .pm-check { width: 24px; height: 24px; margin: 0; }
.pm-map__stamp .pm-check circle { fill: var(--accent-ice); }
.pm-map__stamp .pm-check path { stroke: var(--pm-navy); }
.pm-map--them .pm-map__stamp .pm-check circle { fill: rgba(255, 255, 255, .85); }
.pm-map.is-done .pm-map__stamp { visibility: visible; }
.pm-map.is-done .pm-map__stamp .pm-check { animation: pm-stamp 420ms var(--pm-ease) both; }
.pm-map.is-done .pm-map__stamp .pm-check path { animation: pm-check 360ms ease 200ms both; }
.pm-map.is-done .pm-map__svg { opacity: .5; }

/* the totals: two bars drawn to scale, 112 hours against 6 */
.pm-sum { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 26px clamp(28px, 5vw, 72px); align-items: center; margin-top: clamp(20px, 3vw, 36px); padding-top: clamp(24px, 3vw, 40px); border-top: 1px solid rgba(255, 255, 255, .22); }
.pm-sum__row { grid-column: 1; display: grid; grid-template-columns: 7.2rem minmax(0, 1fr); gap: 4px 20px; align-items: center; }
.pm-sum__k { grid-column: 1 / -1; font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, .78); }
.pm-sum__big { font-family: var(--font-display); font-weight: 300; font-size: clamp(2.6rem, 4.6vw, 3.9rem); line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.pm-sum__bar { display: block; height: 14px; border-radius: 3px; background: #fff; transform-origin: left; transform: scaleX(var(--f)); }
.pm-sum__row--us .pm-sum__bar { background: var(--accent-ice); }
html.pm-js .pm-sum:not(.is-in) .pm-sum__bar { transform: scaleX(0); }
html.pm-js .pm-sum.is-in .pm-sum__bar { transition: transform calc(2200ms * var(--f) + 250ms) cubic-bezier(.3, .1, .3, 1) 200ms; }
.pm-sum__fold { grid-column: 1 / -1; }
.pm-sum__split { display: flex; flex-wrap: wrap; gap: 6px 32px; margin: 8px 0 0; }
.pm-sum__split div { display: flex; align-items: baseline; gap: 8px; }
.pm-sum__split dt { font-size: 14px; color: rgba(255, 255, 255, .7); }
.pm-sum__split dd { margin: 0; font-size: 15.5px; font-weight: 500; font-variant-numeric: tabular-nums; color: #fff; }
.pm-sum__delta { grid-column: 2; grid-row: 1 / span 2; max-width: 300px; padding-left: clamp(24px, 4vw, 56px); border-left: 1px solid rgba(255, 255, 255, .22); }
.pm-sum__v { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: clamp(1.8rem, 3vw, 2.5rem); line-height: 1.12; color: var(--accent-ice); margin: 6px 0 8px !important; }
.pm-sum__s { font-size: 15.5px; font-weight: 600; color: #fff; }
.pm-ask { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; margin-top: clamp(32px, 4vw, 48px); }
.pm-ask .pm-fine { flex-basis: 100%; }
.pm-trip :is(.pm-go) { color: #fff; }
.pm-trip .pm-fine { color: rgba(255, 255, 255, .76); }
.pm-trip__fine { margin-top: 28px !important; font-size: 13.5px; line-height: 1.55; color: rgba(255, 255, 255, .7); }

/* ============ BEFORE YOU DECIDE ============ */
.pm-faq { padding: clamp(56px, 7vw, 104px) 0 clamp(40px, 5vw, 64px); }
.pm-faq .pm-h2 { margin-bottom: clamp(20px, 3vw, 36px); }
.pm-faq__list { columns: 2; column-gap: clamp(32px, 6vw, 96px); }
.pm-q { break-inside: avoid; padding: 0 0 28px; }
.pm-q:first-child { padding-bottom: 28px; }
.pm-q > summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.pm-q h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.25rem, 1.8vw, 1.5rem); line-height: 1.25; color: var(--ink); }
.pm-q p { margin-top: 8px !important; font-size: 16.5px; line-height: 1.62; color: var(--ink-soft); }
.pm-ask--light { margin-top: 12px; }

/* ============ SOURCES ============ */
.pm-src { padding: 0 0 clamp(48px, 6vw, 80px); }
.pm-src__d { border-top: 1px solid var(--border); padding-top: 24px; }
.pm-src__d > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pm-src__h { font-family: var(--font-body); font-size: 15px; font-weight: 600; letter-spacing: 0; color: var(--ink-muted); }
.pm-src ol { margin: 12px 0 0; padding-left: 1.3em; display: grid; gap: 8px; font-size: 15px; line-height: 1.55; color: var(--ink-soft); }
.pm-src strong { font-weight: 600; color: var(--ink); }
.pm-src a { color: var(--accent-blue-hover); text-decoration: underline; text-decoration-color: var(--accent-ice); text-underline-offset: 3px; padding: 6px 0; transition: text-decoration-color 200ms, color 200ms; }
.pm-src a:hover { color: var(--accent-blue); text-decoration-color: currentColor; }

/* ============ RELATED: three rows, each one link ============ */
.pm-rel { padding: clamp(40px, 5vw, 72px) 0 clamp(64px, 8vw, 112px); border-top: 1px solid var(--border); }
.pm-rel .pm-h2 { margin-bottom: clamp(16px, 2.4vw, 28px); }
.pm-rel__list { border-top: 2px solid var(--ink); }
.learn-related__card { position: relative; display: grid; grid-template-columns: 220px minmax(0, 1fr) auto; align-items: center; gap: 12px clamp(20px, 4vw, 56px); padding: 22px 0; border-bottom: 1px solid var(--border); }
.pm-rel__mark { display: flex; align-items: center; height: 48px; }
.pm-rel__logo[width][height] { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; }
.pm-rel__logo--sq[width][height] { height: 48px; width: 48px; border-radius: 9px; }
.pm-rel__logo--chip[width][height] { height: 48px; padding: 12px 16px; border-radius: 8px; background: var(--ink); box-sizing: border-box; }
.pm-rel__logo--wide[width][height] { max-height: 34px; max-width: 200px; }
.learn-related__card h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.25rem, 1.8vw, 1.5rem); line-height: 1.2; color: var(--ink); transition: color 200ms; }
.learn-related__card p { margin-top: 4px !important; font-size: 16px; line-height: 1.5; color: var(--ink-soft); }
.learn-related__card a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 15.5px; font-weight: 500; color: var(--accent-blue-hover); white-space: nowrap; }
/* the whole row is the link */
.learn-related__card a::after { content: ""; position: absolute; inset: 0; }
.learn-related__card:hover h3 { color: var(--accent-blue-hover); }
.learn-related__card:hover a svg { transform: translateX(6px); }

/* ============ SELF-ASSESSMENT: the closing band ============ */
.pm-end { background: var(--pm-navy); color: #fff; padding: clamp(56px, 7vw, 96px) 0; }
.pm-end__in { max-width: 760px; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.pm-end__h { font-weight: 300; font-size: clamp(1.9rem, 3.4vw, 2.8rem); line-height: 1.1; color: #fff; }
.pm-end__lede { font-size: 18px; line-height: 1.6; color: rgba(255, 255, 255, .8); }
.pm-end .pm-fine { color: rgba(255, 255, 255, .74); }

/* ============ BELOW A DESKTOP ============ */
/* Between the phone's list and a full desktop the day columns are narrow, and
   a short block's name was cut off. There it gives its whole width to the
   name: its place in the column already says when, the card beside it gives
   the hour, and a screen reader still hears it. */
@media (min-width: 821px) and (max-width: 1140px) {
  .ev--sm { padding-inline: 5px; }
  .ev--sm .ev__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}
@media (min-width: 821px) and (max-width: 900px) {
  .ev--sm { padding-inline: 4px; }
  .ev--sm .ev__ttl { font-size: 11px; }
}

@media (max-width: 1040px) {
  .pm-hero__cols { grid-template-columns: 1fr; }
  .pm-hero__map { margin-right: 0; max-width: 720px; }
  .pm-seen__in { grid-template-columns: 1fr; }
  .pm-out__in { grid-template-columns: 1fr; }
  .pm-out__head { position: static; }
  .pm-sum { grid-template-columns: 1fr; }
  .pm-sum__delta { grid-column: 1; grid-row: auto; max-width: none; padding-left: 0; border-left: 0; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .22); }
  .learn-related__card { grid-template-columns: 180px minmax(0, 1fr); }
  .learn-related__card a { grid-column: 2; }
}

/* ============ A PHONE ============
   The calendars become a week at a glance that opens into its days; the
   maps stack; what a reader can skip sits behind a fold. */
@media (max-width: 820px) {
  .pm-hmap { --u: 2.2; }
  .pm-hero__h { margin-bottom: 14px; }
  .pm-hero__cols { gap: 8px; }
  .pm-hero__map { margin: 8px calc(-1 * var(--pm-gut)) 0; }
  .pm-hero__actions { margin-top: 22px; }

  .pm-far__facts { grid-template-columns: 1fr; gap: 4px; margin-top: 10px; }
  .pm-far__who { grid-row: auto; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
  .pm-far__who img[width][height] { height: 22px; }
  .pm-far__row--us .pm-far__who img[width][height] { height: 24px; }
  .pm-far__big { grid-row: auto; font-size: clamp(2.1rem, 10vw, 2.7rem); margin-top: 4px !important; }
  .pm-far__mi, .pm-far__sub { grid-column: 1; }
  .pm-far__mi { margin-top: 4px !important; }

  .pm-same__head { grid-template-columns: 1fr; }
  .pm-vials { width: 120px; order: -1; }
  .pm-tbl, .pm-tbl tbody, .pm-tbl tfoot, .pm-tbl tr, .pm-tbl th, .pm-tbl td { display: block; }
  .pm-tbl thead { display: none; }
  .pm-tbl tbody tr, .pm-tbl tfoot tr { padding: 12px 0; }
  .pm-tbl tbody tr:first-child { border-top: 2px solid var(--ink); }
  .pm-tbl th, .pm-tbl td, .pm-tbl tfoot th, .pm-tbl tfoot td { padding: 0; border: 0; }
  .pm-both { flex: 1; }
  .pm-both::before, .pm-both::after { content: none; }
  .pm-tbl td { display: flex; align-items: center; margin-top: 6px; font-size: 15.5px; }
  .pm-tbl td > span, .pm-both > span { flex: 1; }
  .pm-tbl__split td > span::before { content: attr(data-who) ": "; font-weight: 600; color: var(--ink); }
  .pm-tbl tfoot tr { border-top: 2px solid var(--ink); display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
  .pm-check { width: 22px; height: 22px; margin-right: 10px; }

  /* the calendars: a week at a glance, and the days on demand */
  .pm-cal__hint--desk { display: none; }
  .pm-cal__hint--phone { display: inline; }
  .pm-wk__d > summary { cursor: pointer; grid-template-columns: 1fr auto; padding-bottom: 0; border-bottom: 0; -webkit-tap-highlight-color: transparent; }
  .pm-wk__name { font-size: 1.5rem; }
  .pm-wk__name img[width][height] { height: 24px; }
  .pm-wk__days { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(6, 1fr); margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--ink-muted); text-align: center; }
  .pm-wk__glance { grid-column: 1 / -1; display: block; width: 100%; height: 132px; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--border); background: linear-gradient(90deg, var(--border) 1px, transparent 1px) 0 0 / calc(100% / 6) 100%; }
  .pm-wk__glance .g--travel { fill: #fff; stroke: var(--accent-ice); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
  .pm-wk__glance .g--key { fill: var(--accent-blue-hover); }
  .pm-wk__glance .g--med { fill: #BDD3E8; }
  .pm-wk__glance .g--idle { fill: #C9CED6; }
  .pm-wk__glance .g--off { fill: none; stroke: var(--border-strong); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
  .pm-wk__more { grid-column: 1 / -1; display: flex; align-items: center; justify-content: flex-end; gap: 6px; min-height: 44px; font-size: 15px; font-weight: 500; color: var(--accent-blue-hover); }
  .pm-chev { display: block; }
  .pm-wk__grid { display: block; }
  .pm-wk__hours, .pm-wk__rules { display: none; }
  .pm-day { display: block; }
  .pm-day__h { display: flex; align-items: baseline; gap: 8px; padding: 14px 0 6px; border: 0 !important; }
  .pm-day__h b { display: inline; }
  .pm-day__lane { height: auto; border: 0 !important; display: grid; gap: 6px; }
  .ev, .ev--off { position: static; height: auto; min-height: 44px; width: 100%; flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; padding: 10px 12px; font-size: 14.5px; }
  .ev__t { min-width: 4.2em; }
  .ev--sm .ev__ttl { white-space: normal; }
  .ev--idle::after { margin: 0 0 0 auto; }
  .ev--off::before { margin: 0; }
  .ev--off .ev__ttl { font-size: 17px; }
  .ev:hover, .ev.is-open { transform: none; box-shadow: none; }
  .pm-day--home + .pm-day--home .pm-day__h { padding-top: 8px; }
  details[open] > .pm-wk__grid, details[open] > :is(p, ol, dl) { animation: pm-unfold 360ms var(--pm-ease) both; }

  .pm-fold > summary, .pm-q > summary, .pm-src__d > summary, .pm-out__d > summary { cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .pm-fold > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 15px; font-weight: 500; color: var(--accent-ice); }
  .pm-fold > summary .pm-chev { color: currentColor; }
  .pm-q > summary, .pm-src__d > summary { min-height: 44px; align-items: center; }
  .pm-out__d > summary { position: relative; padding-right: 30px; min-height: 44px; align-content: center; }
  .pm-out__d > summary .pm-chev { position: absolute; right: 0; top: 12px; }

  .pm-out__row { grid-template-columns: 48px minmax(0, 1fr); gap: 0 14px; padding: 14px 0; }
  .pm-out__icon { width: 48px; height: 48px; }
  .pm-out__icon svg:first-child { width: 28px; height: 28px; }

  .pm-seen__reel { display: flex; gap: 10px; margin: 0 calc(-1 * var(--pm-gut)); padding: 0 var(--pm-gut) 4px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .pm-seen__reel::-webkit-scrollbar { display: none; }
  .pm-clip { flex: 0 0 42%; scroll-snap-align: center; }
  .pm-clip:nth-child(even) { margin: 0; }

  .pm-clock { grid-template-columns: 1fr auto; position: sticky; top: calc(var(--hc-nav-h) + var(--hc-bar-h)); z-index: 5; background: var(--pm-navy); gap: 10px 12px; padding: 8px 0 10px; }
  .pm-clock__bar { grid-column: 1 / -1; order: 3; }
  .pm-clock__time { font-size: 1.7rem; }
  .pm-btn { padding: 0 12px; }
  .pm-maps { grid-template-columns: 1fr; }
  .pm-map { padding: 18px 0 20px; }
  .pm-map--us { padding-right: 0; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .22); }
  .pm-map--them { padding-left: 0; }
  .pm-map__status { min-height: 96px; }
  .pm-map__svg .lbl--dim { display: none; }
  .pm-map__svg.is-close .lbl--dim { display: inline; }
  .pm-sum__row { grid-template-columns: 5.4rem minmax(0, 1fr); gap: 2px 14px; }

  .pm-faq__list { columns: 1; border-top: 2px solid var(--ink); }
  .pm-q, .pm-q:first-child { padding: 6px 0; border-bottom: 1px solid var(--border); }
  .pm-q p { margin: 0 0 12px !important; }
  .pm-src__d { padding-top: 6px; }
  .pm-src ol { margin: 4px 0 8px; }

  .learn-related__card { grid-template-columns: 1fr; gap: 6px; padding: 18px 0; }
  .learn-related__card a { grid-column: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .pm-hero__h .h-lead, .pm-hero__h em, .pm-hero__text > *, .pm-hmap *, .pm-check, .pm-check path, .pm-vial__liq, .pm-vials__eq path,
  .ev, .pm-out__strike line, .pm-map__svg .tok__halo, details > * { animation: none !important; }
  html.pm-js [data-r], html.pm-js .pm-seen__reel .pm-clip { opacity: 1 !important; transform: none !important; transition: none !important; }
  html.pm-js .pm-hmap :is(.pm-hmap__land, .pm-hmap__pin, .pm-hmap__lbl, .pm-hmap__hop, .pm-hmap__ghost) { opacity: 1 !important; }
  html.pm-js .pm-hmap .pm-hmap__haul { stroke-dashoffset: 0 !important; }
  html.pm-js .pm-wk__grid .ev, html.pm-js .pm-tbl .pm-check { opacity: 1 !important; }
  html.pm-js .pm-vial__liq { transform: none !important; }
  html.pm-js .pm-sum .pm-sum__bar { transform: scaleX(var(--f)) !important; transition: none !important; }
  html.pm-js .pm-vials__eq path, html.pm-js .pm-out__strike line { stroke-dashoffset: 0 !important; }
  .pm-clip:hover video, .pm-btn:hover, .ev:hover { transform: none; }
}

@media print {
  .pm .hc-bar, .pm-clock__btns, .pm-pop { display: none !important; }
  html.pm-js [data-r] { opacity: 1 !important; transform: none !important; }
  /* paper is taken the instant the folds open and the reveals are shown: nothing waits on a first frame */
  .pm main *, .pm main *::before, .pm main *::after { animation: none !important; transition: none !important; }
  html.pm-js .pm-hmap :is(.pm-hmap__land, .pm-hmap__pin, .pm-hmap__lbl, .pm-hmap__hop, .pm-hmap__ghost) { opacity: 1 !important; }
  html.pm-js .pm-wk__grid .ev, html.pm-js .pm-tbl .pm-check { opacity: 1 !important; }
  html.pm-js .pm-vial__liq { transform: none !important; }
  html.pm-js .pm-sum .pm-sum__bar { transform: scaleX(var(--f)) !important; }
  html.pm-js .pm-hmap .pm-hmap__haul, html.pm-js .pm-vials__eq path, html.pm-js .pm-out__strike line { stroke-dashoffset: 0 !important; }
  .pm-trip, .pm-end { background: #fff; color: #000; }
  .pm-trip *, .pm-end * { color: #000 !important; transition: none !important; }
  /* the maps are drawn in white for the navy ground: on paper their lettering, dots and lines are black */
  .pm-map__svg :is(.lbl, .city, .node), .pm-map--them .tok__dot { fill: #000 !important; }
  .pm-map__svg :is(.land, .route, .ring, .link, .tok__halo), .pm-map--them .trail { stroke: #000 !important; }
  .pm-map__svg .insetbox { fill: #fff !important; stroke: #000 !important; }
  .pm-clock { background: none !important; }
}

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

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