/* /learn-compare-cpi. Loaded after site.css, by learn-compare-cpi.html only.
   A comparison of two itineraries, so each part takes the shape of what it
   compares: the two weeks drawn to scale in the hero, one day column beside
   six on a shared clock, a filmstrip, a map with a clock, two clips side by
   side, a table of ticks, a ledger of what is struck out.
   One colour key runs through all of it: blue is Celva, slate is CPI, and
   gold is the treatment itself (the only place gold is used). */

/* On the root, because scroll-padding-top (below) is read there. */
html:has(body.cmp-cpi) {
  --cp-max: 1240px;
  --cp-gut: clamp(20px, 4vw, 56px);
  --hc-nav-h: 64px;            /* fallback; scripts/compare-cpi.js sets the real header height */
  --cp-bar-h: 52px;
  --cp-ease: cubic-bezier(.16, 1, .3, 1);
  --cp-deep: #07152B;
  --cp-gold: #E3C25F;
  --cp-on-dark: rgba(255, 255, 255, .8);
  /* every jump, anchor and Tab stop lands below the header and the bar */
  scroll-padding-top: calc(var(--hc-nav-h) + var(--cp-bar-h) + 20px);
}
/* clipped on the body, not on main: a part sliding in from the side must not widen the page */
body.cmp-cpi { background: var(--white); overflow-x: clip; }

/* Text fills its column; the column, not the paragraph, sets the measure.
   The two resets are colors_and_type.css's: bare <p> capped at 42rem, and a
   grey underline on every <a>. */
.cmp-cpi main p { max-width: none; }
.cmp-cpi main a:not(.btn) { border-bottom: 0; }
.cmp-cpi main :is(h1, h2, h3) { text-wrap: wrap; }
.cmp-cpi main :is(h1, h2, p) em { font-style: italic; }
/* a heading that has to wrap breaks where the styling changes */
.cmp-cpi .h-lead, .cmp-cpi main :is(h1, h2) > em { display: inline-block; }
.cmp-cpi main h2 {
  font-family: var(--font-display); font-weight: 300; color: var(--ink);
  font-size: clamp(1.85rem, 3.3vw, 2.9rem); line-height: 1.1; letter-spacing: -.015em;
  margin: 0 0 18px;
}
.cp-wrap { max-width: calc(var(--cp-max) + 2 * var(--cp-gut)); margin: 0 auto; padding: 0 var(--cp-gut); }
.cmp-cpi main > section { padding-block: clamp(60px, 7.5vw, 108px); }

/* a part that receives focus after a jump is not itself a control */
.cmp-cpi main [tabindex="-1"]:focus { outline: none; }
.cmp-cpi main :is(a, button, summary):focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 3px; border-radius: 4px; }
.cmp-cpi :is(.cp-hero, .cp-note, .jrny) :is(a, button):focus-visible { outline-color: var(--accent-ice); }

/* a link inside running text */
.cmp-cpi :is(.vs2-band__lede, .vs-faq__item p, .vs-magnet__fine) a {
  color: var(--accent-blue-hover); text-decoration: underline; text-decoration-color: var(--accent-blue);
  text-underline-offset: 3px; text-decoration-thickness: 1.5px; transition: color 200ms, text-decoration-color 200ms;
}
.cmp-cpi :is(.vs2-band__lede, .vs-faq__item p, .vs-magnet__fine) a:hover { color: var(--accent-blue); text-decoration-color: currentColor; }

/* ============ REVEALS ============
   Hidden only once the script has put .cp-js on <html>, so no script means
   nothing hidden. Each part arrives in its own way; the ones that draw
   themselves (the week, the calendar, the ticks) keep their box at full
   opacity and move their own pieces. */
.cp-js [data-r="rise"], .cp-js [data-r="card"] { opacity: 0; transform: translateY(18px); }
.cp-js [data-r="left"] { opacity: 0; transform: translateX(-28px); }
.cp-js [data-r="right"] { opacity: 0; transform: translateX(28px); }
.cp-js [data-r="scale"] { opacity: 0; transform: scale(.975); }
.cp-js [data-r="doc"] { opacity: 0; transform: rotate(-7deg) translateY(26px); }
.cp-js [data-r="rise"], .cp-js [data-r="card"], .cp-js [data-r="left"], .cp-js [data-r="right"], .cp-js [data-r="scale"], .cp-js [data-r="doc"] {
  transition: opacity 620ms var(--cp-ease), transform 760ms var(--cp-ease);
}
.cp-js [data-r].is-in { opacity: 1; transform: none; }
.cp-js [data-r="doc"].is-in { transform: rotate(-2.2deg); }
.cp-js .learn-related__card[data-r]:nth-child(2) { transition-delay: 90ms; }
.cp-js .learn-related__card[data-r]:nth-child(3) { transition-delay: 180ms; }

/* ============ NOTE ABOVE THE HERO ============ */
.cp-note { background: var(--cp-deep); }
.cp-note p {
  max-width: calc(var(--cp-max) + 2 * var(--cp-gut)); margin: 0 auto; padding: 13px var(--cp-gut);
  font-size: 14.5px; line-height: 1.5; color: var(--cp-on-dark);
}
.cp-note strong { color: #fff; font-weight: 600; }
.cmp-cpi .cp-note a { color: #fff; text-decoration: underline; text-decoration-color: var(--accent-ice); text-underline-offset: 3px; text-decoration-thickness: 1.5px; transition: color 200ms; }
.cmp-cpi .cp-note a:hover { color: var(--accent-ice); }

/* ============ HERO ============ */
.cmp-cpi main > .cp-hero {
  padding-block: 0; color: #fff;
  background: radial-gradient(90% 120% at 88% 0%, #173463 0%, var(--ink) 52%, var(--cp-deep) 100%);
}
.cp-hero__head { padding: clamp(18px, 2.4vw, 30px) 0 clamp(26px, 3.4vw, 44px); }
.cmp-cpi .cp-hero__h {
  font-family: var(--font-display); font-weight: 300; color: #fff;
  font-size: clamp(2.1rem, 4.3vw, 3.85rem); line-height: 1.06; letter-spacing: -.02em;
  margin: 0 0 clamp(18px, 2vw, 26px);
}
.cp-hero__h em { color: var(--accent-ice); }
.cp-nb { white-space: nowrap; }
.cmp-cpi .cp-hero__answer { font-size: clamp(1.06rem, 1.45vw, 1.28rem); line-height: 1.6; color: var(--cp-on-dark); margin: 0; }
.cp-hero__answer strong { color: #fff; font-weight: 600; }

/* first paint: the heading comes up in its two halves, then the answer */
@keyframes cp-rise { from { opacity: 0; transform: translateY(.55em); } to { opacity: 1; transform: none; } }
@keyframes cp-fade { from { opacity: 0; } to { opacity: 1; } }
@media (scripting: enabled) {
  .cp-hero__h > * { animation: cp-rise 900ms var(--cp-ease) both; }
  .cp-hero__h > em { animation-delay: 140ms; }
  .cp-hero__answer { animation: cp-fade 900ms 320ms both; }
}

/* ---- the two weeks, drawn to scale ---- */
.cp-numbers { padding-bottom: clamp(44px, 5.5vw, 76px); }
.cp-tally__row {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 4vw, 64px); align-items: center;
  padding: clamp(20px, 2.4vw, 30px) 0; border-top: 1px solid rgba(255, 255, 255, .16);
}
.cp-tally__row--celva { border-bottom: 1px solid rgba(255, 255, 255, .16); }
.cmp-cpi .cp-tally__who { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; font-size: 15px; font-weight: 500; color: var(--cp-on-dark); }
.cmp-cpi .cp-tally__logo[width][height] { display: block; width: auto; height: 24px; }
.cmp-cpi .cp-tally__logo--celva[width][height] { height: 24px; }
.cmp-cpi .cp-tally__big { font-family: var(--font-display); font-weight: 300; font-size: clamp(2rem, 3.5vw, 3rem); line-height: 1.05; letter-spacing: -.02em; color: #fff; margin: 0 0 6px; }
.cp-tally__row--celva .cp-tally__big em { color: var(--accent-ice); }
.cmp-cpi .cp-tally__mx { font-size: 17px; color: var(--cp-on-dark); margin: 0 0 2px; }
.cp-tally__mx b { font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }
.cp-tally__row--celva .cp-tally__mx b { color: var(--accent-ice); }
.cmp-cpi .cp-tally__sub { font-size: 14.5px; color: rgba(255, 255, 255, .7); margin: 0; }

.cp-week__days { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(6px, 1vw, 12px); margin: 0; padding: 0; list-style: none; }
.cp-week__days li {
  position: relative; height: clamp(58px, 6vw, 76px); padding: 8px 10px; border-radius: 6px;
  border: 1px dashed rgba(255, 255, 255, .3); font-size: 13.5px; line-height: 1; color: rgba(255, 255, 255, .7);
}
.cp-week__days li.is-away { border-style: solid; border-color: rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .13); color: #fff; }
.cp-tally__row--celva .cp-week__days li.is-away { border-color: var(--accent-ice); background: var(--accent-ice); color: var(--ink); font-weight: 600; }
.cp-week__syr { position: absolute; left: 9px; bottom: 8px; width: 22px; height: 22px; fill: var(--cp-gold); }
.cp-tally__row--celva .cp-week__syr { fill: var(--ink); }
.cp-week__moon { position: absolute; right: 9px; bottom: 9px; width: 18px; height: 18px; fill: #fff; }
.cp-week__hours { height: 6px; margin-top: 12px; border-radius: 3px; background: rgba(255, 255, 255, .12); }
.cp-week__hours i { display: block; width: var(--w); height: 100%; border-radius: 3px; background: #fff; transform-origin: left; }
.cp-tally__row--celva .cp-week__hours i { background: var(--accent-ice); }

/* the week fills a day at a time, then the one day beside it */
@keyframes cp-day { from { background-color: transparent; border-style: dashed; color: rgba(255, 255, 255, .7); transform: scale(.94); } to { transform: none; } }
@keyframes cp-pop { from { opacity: 0; transform: scale(.3) rotate(-30deg); } to { opacity: 1; transform: none; } }
@keyframes cp-grow { from { transform: scaleX(0); } to { transform: none; } }
@media (scripting: enabled) {
  .cp-tally .cp-week__days li.is-away { animation: cp-day 520ms var(--cp-ease) both; }
  .cp-tally :is(.cp-week__moon, .cp-week__syr) { animation: cp-pop 520ms var(--cp-ease) both; }
  .cp-tally .cp-week__hours i { animation: cp-grow 1100ms var(--cp-ease) both; }
}
.cp-tally__row--cpi li:nth-child(1), .cp-tally__row--cpi .cp-week__hours i { animation-delay: 500ms !important; }
.cp-tally__row--cpi li:nth-child(2) { animation-delay: 620ms !important; }
.cp-tally__row--cpi li:nth-child(3) { animation-delay: 740ms !important; }
.cp-tally__row--cpi li:nth-child(4) { animation-delay: 860ms !important; }
.cp-tally__row--cpi li:nth-child(5) { animation-delay: 980ms !important; }
.cp-tally__row--cpi li:nth-child(6) { animation-delay: 1100ms !important; }
.cp-tally__row--cpi li:nth-child(1) .cp-week__moon { animation-delay: 700ms !important; }
.cp-tally__row--cpi li:nth-child(2) .cp-week__moon { animation-delay: 820ms !important; }
.cp-tally__row--cpi li:nth-child(3) .cp-week__moon { animation-delay: 940ms !important; }
.cp-tally__row--cpi li:nth-child(4) :is(.cp-week__moon, .cp-week__syr) { animation-delay: 1060ms !important; }
.cp-tally__row--cpi li:nth-child(5) .cp-week__moon { animation-delay: 1180ms !important; }
.cp-tally__row--celva :is(li.is-away, .cp-week__hours i) { animation-delay: 1700ms !important; }
.cp-tally__row--celva .cp-week__syr { animation-delay: 1900ms !important; }

/* ============ CALLS ============ */
.cp-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; margin-top: clamp(28px, 3.4vw, 44px); }
.cp-cta__link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  font-size: 15.5px; font-weight: 600; color: var(--accent-blue-hover); transition: color 200ms;
}
.cp-cta__link span, .cp-more span, .learn-related__card a span { display: inline-block; transition: transform 320ms var(--cp-ease); }
.cp-cta__link:hover { color: var(--accent-blue); text-decoration: underline; text-underline-offset: 4px; }
.cp-cta__link:hover span, .cp-more:hover span { transform: translateX(4px); }
.cmp-cpi .cp-cta__note { flex-basis: 100%; margin: 0; font-size: 14.5px; color: var(--ink-muted); }
.cp-cta--dark .cp-cta__link { color: #fff; }
.cp-cta--dark .cp-cta__link:hover { color: var(--accent-ice); }
.cmp-cpi .cp-cta--dark .cp-cta__note { color: rgba(255, 255, 255, .72); }
.cmp-cpi .btn span { display: inline-block; transition: transform 320ms var(--cp-ease); }
.cmp-cpi .btn:hover span { transform: translateX(4px); }

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

/* ============ DAY BY DAY ============ */
.cmp-cpi .cal__lede { font-size: 18px; line-height: 1.6; color: var(--ink-muted); margin: 0 0 clamp(26px, 3vw, 40px); }
.cal__lede--phone { display: none; }
.cal__stage {
  --cal-h: 640px;
  display: grid; grid-template-columns: 52px minmax(0, 1.25fr) minmax(0, 6fr); column-gap: clamp(14px, 2vw, 28px);
}
.cal__wk { display: contents; }
.cal__axis { grid-column: 1; grid-row: 2; position: relative; margin-top: 54px; height: var(--cal-h); font-size: 13px; color: var(--ink-muted); }
.cal__axis span { position: absolute; right: 0; top: var(--t); transform: translateY(-50%); white-space: nowrap; }
.cal__wkhead { grid-row: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 58px; padding: 0 2px 12px; border-bottom: 2px solid var(--ink); }
.cal__wk--celva .cal__wkhead { grid-column: 2; border-bottom-color: var(--accent-blue); flex-wrap: wrap; gap: 4px 12px; }
.cal__wk--cpi .cal__wkhead { grid-column: 3; }
.cmp-cpi .cal__mark[width][height] { display: block; width: auto; height: 26px; }
.cal__mark--cpi { display: inline-flex; align-items: center; padding: 9px 13px; background: var(--ink); }
.cmp-cpi .cal__mark--cpi img[width][height] { display: block; width: auto; height: 18px; }
.cal__sum { font-size: 15px; font-weight: 500; color: var(--ink); white-space: nowrap; }
.cal__wk--celva .cal__sum { color: var(--accent-blue-hover); }
.cal__days { grid-row: 2; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.cal__wk--celva .cal__days { grid-column: 2; }
.cal__wk--cpi .cal__days { grid-column: 3; }
.cal__day { border-left: 1px solid var(--border); }
.cal__day:last-child { border-right: 1px solid var(--border); }
.cal__dl { display: flex; align-items: baseline; gap: 8px; height: 54px; padding: 16px 10px 0; list-style: none; }
.cal__dl::-webkit-details-marker { display: none; }
summary.cal__dl { pointer-events: none; }
.cal__dl .dow { font-size: 15px; font-weight: 600; color: var(--ink); }
.cal__dl .dnum { font-size: 13px; color: var(--ink-muted); }
.cal__mini { display: none; }
.cal__lane {
  position: relative; height: var(--cal-h); border-top: 1px solid var(--border);
  background-image: linear-gradient(var(--border) 1px, transparent 1px); background-size: 100% calc(100% / 7); background-position: 0 -1px;
}
.cal__wk--celva .cal__lane { background-color: rgba(45, 110, 177, .035); }

/* an event: a button that opens its part of the day */
.ev {
  position: absolute; left: 3px; right: 3px; top: var(--t); height: max(var(--h), 23px);
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; overflow: hidden;
  padding: 6px 8px 6px 9px; border: 0; border-left: 3px solid var(--ink-muted); border-radius: 3px;
  background: #E6EAF0; color: var(--ink); font-family: var(--font-body); font-size: 12px; line-height: 1.25; text-align: left;
  cursor: pointer; transition: box-shadow 220ms, transform 220ms var(--cp-ease), background-color 220ms;
}
.ev--sm { flex-direction: row; align-items: center; gap: 6px; padding-block: 0; }
.ev__t { flex: none; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.ev__ttl { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.ev--travel { background: #DCE8F4; border-left-color: var(--accent-blue); }
.ev--med, .ev--talk { background: #E6EAF0; border-left-color: var(--ink-soft); }
.ev--talk { border-left-style: dashed; }
.ev--idle { background: repeating-linear-gradient(135deg, #EEF0F3 0 6px, #F8F9FA 6px 12px); border-left-color: #A9B4C2; }
.ev--idle .ev__t, .ev--idle .ev__ttl { color: var(--ink-muted); }
.ev--key { background: var(--cp-gold); border-left-color: #8A6A14; }
.ev--key .ev__t { color: var(--ink); }
.ev--key .ev__ttl { font-weight: 600; white-space: normal; }
.ev[data-v]::after {
  content: ""; position: absolute; right: 7px; top: 8px; width: 0; height: 0;
  border-left: 7px solid currentColor; border-block: 4.5px solid transparent; opacity: .45; transition: opacity 200ms, transform 220ms var(--cp-ease);
}
.ev--sm[data-v]::after { top: 50%; margin-top: -4.5px; }
.ev:hover, .ev.is-open { z-index: 2; box-shadow: 0 0 0 1.5px var(--ink), 0 10px 22px -10px rgba(11, 29, 58, .5); transform: translateX(2px); }
.ev:hover::after, .ev.is-open::after { opacity: 1; transform: translateX(2px); }
.cmp-cpi .ev:focus-visible { z-index: 2; outline-offset: 1px; }

/* Celva's other five days */
.cal__home { grid-row: 3; grid-column: 2 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 16px; padding: 12px 16px; border-left: 3px solid var(--accent-blue); background: rgba(45, 110, 177, .06); border-radius: 0 6px 6px 0; }
.cmp-cpi .cal__home-l { margin: 0; font-family: var(--font-display); font-style: italic; font-size: 20px; color: var(--accent-blue-hover); }
.cal__home-days { display: flex; flex-wrap: wrap; gap: 8px; }
.cal__home .ev {
  position: static; flex-direction: row; align-items: center; height: auto; min-height: 44px; min-width: 62px; justify-content: center; padding: 0 16px;
  border: 1px dashed rgba(26, 75, 122, .55); border-radius: 6px; background: #fff; font-size: 14px; font-weight: 600; color: var(--accent-blue-hover);
}
.cal__home .ev .ev__ttl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.cal__home .ev:hover, .cal__home .ev.is-open { transform: translateY(-2px); box-shadow: 0 0 0 1.5px var(--accent-blue), 0 10px 22px -12px rgba(11, 29, 58, .5); border-color: transparent; }

/* events arrive in the order of the day, a column at a time */
@keyframes cp-ev { from { opacity: 0; transform: translateY(-8px) scaleY(.7); } to { opacity: 1; transform: none; } }
.cp-js [data-r="cal"] .cal__lane .ev { transform-origin: top; animation: cp-ev 520ms var(--cp-ease) both paused; animation-delay: calc(var(--d, 0) * 110ms + var(--e, 0) * 45ms); }
.cp-js [data-r="cal"].is-in .cal__lane .ev { animation-play-state: running; }
.cal__wk--cpi .cal__day:nth-child(1) { --d: 2; } .cal__wk--cpi .cal__day:nth-child(2) { --d: 3; } .cal__wk--cpi .cal__day:nth-child(3) { --d: 4; }
.cal__wk--cpi .cal__day:nth-child(4) { --d: 5; } .cal__wk--cpi .cal__day:nth-child(5) { --d: 6; } .cal__wk--cpi .cal__day:nth-child(6) { --d: 7; }
.cal__lane .ev:nth-child(2) { --e: 1; } .cal__lane .ev:nth-child(3) { --e: 2; } .cal__lane .ev:nth-child(4) { --e: 3; } .cal__lane .ev:nth-child(5) { --e: 4; } .cal__lane .ev:nth-child(6) { --e: 5; }

/* the day that opens beside a block */
.cal__pop {
  position: fixed; z-index: 70; left: 0; top: 0; width: 304px; overflow: hidden; pointer-events: none;
  border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px var(--border), 0 28px 60px -22px rgba(11, 29, 58, .55);
  opacity: 0; transform: translateY(6px) scale(.97); transform-origin: left center; transition: opacity 180ms, transform 260ms var(--cp-ease);
}
.cal__pop[hidden] { display: none; }
.cal__pop.is-on { opacity: 1; transform: none; }
.cal__pop-fig { aspect-ratio: 16 / 9; background: var(--ink); overflow: hidden; }
.cal__pop[data-novid] .cal__pop-fig { display: none; }
.cal__pop-fig video { display: block; width: 100%; height: 100%; object-fit: cover; }
.cal__pop-body { padding: 14px 16px 16px; }
.cal__pop-t { display: block; font-size: 13px; font-weight: 600; color: var(--accent-blue-hover); font-variant-numeric: tabular-nums; }
.cmp-cpi .cal__pop-ttl { margin: 2px 0 2px; font-family: var(--font-display); font-weight: 400; font-size: 23px; line-height: 1.15; color: var(--ink); }
.cmp-cpi .cal__pop-w { margin: 0 0 8px; font-size: 13.5px; color: var(--ink-muted); }
.cmp-cpi .cal__pop-n { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink); }
.cal .cp-cta { margin-top: clamp(26px, 3vw, 40px); }

/* ============ PATIENT FILMS ============ */
.cmp-cpi main > .vs2-band { padding-top: 0; }
.vs2-band__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.cmp-cpi .vs2-band__stand { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.4rem, 2.1vw, 1.8rem); line-height: 1.2; color: var(--ink); margin: 0 0 16px; }
.vs2-band__stand em { color: var(--accent-blue); }
.cmp-cpi .vs2-band__lede { font-size: 17px; line-height: 1.62; color: var(--ink-muted); margin: 0 0 14px; }
.vs2-band__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; }
.cmp-cpi .vs2-band__note { margin: 0; font-size: 14.5px; color: var(--ink-muted); }
.cp-more { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 15.5px; font-weight: 600; color: var(--accent-blue-hover); transition: color 200ms; }
.cp-more:hover { color: var(--accent-blue); text-decoration: underline; text-underline-offset: 4px; }
.pt-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pt-tile { position: relative; display: block; width: 100%; aspect-ratio: 3 / 4; padding: 0; border: 0; border-radius: 8px; overflow: hidden; background: var(--ink); cursor: pointer; transition: transform 420ms var(--cp-ease), box-shadow 420ms; }
.pt-tile:nth-child(even) { margin-top: 28px; margin-bottom: -28px; }
.pt-tile__loop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--cp-ease); }
.pt-tile__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 21, 43, 0) 45%, rgba(7, 21, 43, .55) 100%); }
.pt-tile__play {
  position: absolute; left: 12px; bottom: 12px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
  background: #fff; box-shadow: 0 8px 22px -8px rgba(0, 0, 0, .6); transition: transform 360ms var(--cp-ease), background-color 200ms;
}
.pt-tile__play svg { width: 44%; height: 44%; margin-left: 8%; fill: var(--ink); display: block; transition: fill 200ms; }
.pt-tile:hover, .pt-tile:focus-visible { transform: translateY(-4px); box-shadow: 0 22px 40px -22px rgba(11, 29, 58, .6); }
.pt-tile:hover .pt-tile__loop { transform: scale(1.05); }
.pt-tile:hover .pt-tile__play, .pt-tile:focus-visible .pt-tile__play { transform: scale(1.12); background: var(--accent-blue); }
.pt-tile:hover .pt-tile__play svg, .pt-tile:focus-visible .pt-tile__play svg { fill: #fff; }
/* the strip slides in a frame at a time */
@keyframes cp-frame { from { opacity: 0; transform: translateX(34px); } to { opacity: 1; transform: none; } }
.cp-js [data-r="film"] .pt-tile { animation: cp-frame 760ms var(--cp-ease) both paused; }
.cp-js [data-r="film"] .pt-tile:nth-child(2) { animation-delay: 90ms; }
.cp-js [data-r="film"] .pt-tile:nth-child(3) { animation-delay: 180ms; }
.cp-js [data-r="film"] .pt-tile:nth-child(4) { animation-delay: 270ms; }
.cp-js [data-r="film"].is-in .pt-tile { animation-play-state: running; }

.pt-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: clamp(12px, 4vw, 48px); }
.pt-modal[hidden] { display: none; }
@keyframes cp-modal { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
.pt-modal__backdrop { position: absolute; inset: 0; background: rgba(7, 21, 43, .86); animation: cp-fade 220ms both; }
.pt-modal__box { position: relative; width: min(960px, 100%); animation: cp-modal 420ms var(--cp-ease) both; }
.pt-modal__frame { aspect-ratio: 16 / 9; background: #000; border-radius: 10px; overflow: hidden; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .7); }
.pt-modal__frame iframe { width: 100%; height: 100%; display: block; border: 0; }
.pt-modal__close { position: absolute; right: 0; top: -52px; width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer; font-size: 24px; line-height: 1; color: #fff; background: rgba(255, 255, 255, .16); transition: background-color 200ms, transform 320ms var(--cp-ease); }
.pt-modal__close:hover { background: rgba(255, 255, 255, .3); transform: rotate(90deg); }
.cmp-cpi .pt-modal__close:focus-visible { outline-color: #fff; }

/* ============ CHECKLIST (the page's one tinted band) ============ */
.cmp-cpi main > .vs-magnet { background: var(--accent-wash); padding-block: clamp(52px, 6vw, 84px); }
.vs-magnet__in { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.hc-doc {
  display: block; padding: 26px 26px 20px; background: #fff; color: var(--ink);
  box-shadow: 0 0 0 1px var(--border), 0 30px 50px -30px rgba(11, 29, 58, .5); transform: rotate(-2.2deg);
  transition: transform 520ms var(--cp-ease), box-shadow 520ms;
}
.cmp-cpi .hc-doc:hover { transform: rotate(0) translateY(-6px); box-shadow: 0 0 0 1px var(--accent-blue), 0 40px 60px -32px rgba(11, 29, 58, .55); }
.hc-doc__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.cmp-cpi .hc-doc__mark[width][height] { display: block; width: 84px; height: auto; }
.hc-doc__count { font-size: 13px; color: var(--ink-muted); }
.hc-doc__title { display: block; margin: 22px 0 16px; font-family: var(--font-display); font-weight: 300; font-size: clamp(1.6rem, 2.2vw, 1.95rem); line-height: 1.08; }
.hc-doc__title em { font-style: italic; color: var(--accent-blue); }
.hc-doc__rows { display: block; border-top: 1px solid var(--ink); }
.hc-doc__rows > span { display: flex; align-items: baseline; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 14.5px; }
.hc-doc__rows > span > span:first-child { display: flex; flex: 1; align-items: baseline; gap: 10px; }
.hc-doc__rows > span > span:first-child::after { content: ""; flex: 1; border-bottom: 1px dotted var(--border-strong); transform: translateY(-3px); }
.hc-doc__rows > span > span:last-child { font-weight: 600; font-variant-numeric: tabular-nums; }
.hc-doc__foot { display: block; margin-top: 16px; font-size: 13px; color: var(--ink-muted); }
/* its five lines are written in once the page lands */
@keyframes cp-line { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
.cp-js [data-r="doc"] .hc-doc__rows > span { animation: cp-line 520ms var(--cp-ease) both paused; }
.cp-js [data-r="doc"] .hc-doc__rows > span:nth-child(1) { animation-delay: 380ms; }
.cp-js [data-r="doc"] .hc-doc__rows > span:nth-child(2) { animation-delay: 470ms; }
.cp-js [data-r="doc"] .hc-doc__rows > span:nth-child(3) { animation-delay: 560ms; }
.cp-js [data-r="doc"] .hc-doc__rows > span:nth-child(4) { animation-delay: 650ms; }
.cp-js [data-r="doc"] .hc-doc__rows > span:nth-child(5) { animation-delay: 740ms; }
.cp-js [data-r="doc"].is-in .hc-doc__rows > span { animation-play-state: running; }
.cmp-cpi .vs-magnet__h { font-size: clamp(1.8rem, 2.9vw, 2.6rem); }
.vs-magnet__h em { color: var(--accent-blue); }
.cmp-cpi .vs-magnet__p { font-size: 18px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 12px; }
.vs-magnet__get { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 26px; }
.cmp-cpi .vs-magnet__fine { flex: 1 1 280px; margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-muted); }

/* ============ THE WHOLE TRIP (navy) ============ */
.cmp-cpi main > .jrny { background: linear-gradient(180deg, var(--cp-deep) 0%, var(--ink) 60%); color: #fff; }
.cmp-cpi .jrny__h { color: #fff; }
.cmp-cpi .jrny__stand { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.4rem, 2.3vw, 2rem); line-height: 1.2; color: #fff; margin: 0 0 14px; }
.jrny__stand em { color: var(--accent-ice); }
.cmp-cpi .jrny__lede { font-size: 18px; line-height: 1.6; color: var(--cp-on-dark); margin: 0 0 clamp(26px, 3vw, 40px); }
.jrny__stage { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: clamp(16px, 2vw, 28px); align-items: stretch; }
.jrny__mapcol { display: flex; flex-direction: column; min-width: 0; }
.jrny__mapwrap { position: relative; flex: 1; border: 1px solid rgba(255, 255, 255, .14); border-radius: 10px; background: rgba(255, 255, 255, .02); overflow: hidden; }
.jrny__map { display: block; width: 100%; height: auto; }
.jrny__map .land { fill: rgba(124, 169, 209, .08); stroke: rgba(124, 169, 209, .34); stroke-width: .8; vector-effect: non-scaling-stroke; }
.jrny__map .land--mx { fill: rgba(124, 169, 209, .16); stroke: rgba(124, 169, 209, .5); }
.jrny__map .route { fill: none; stroke: rgba(255, 255, 255, .16); stroke-width: 1; stroke-dasharray: 4 6; vector-effect: non-scaling-stroke; }
.jrny__map .trail { fill: none; stroke-width: 2; stroke-linecap: round; }
.jrny__map .trail--cpi { stroke: rgba(255, 255, 255, .92); }
.jrny__map .trail--celva { stroke: var(--accent-ice); stroke-width: 2.6; }
.jrny__map .city, .jrny__map .node { fill: #fff; }
.jrny__map .cityring { fill: none; stroke: rgba(255, 255, 255, .34); stroke-width: 1; vector-effect: non-scaling-stroke; }
/* --k is the map's scale (drawing units per pixel), set by the script, so its lettering stays 13.5px on screen at any width */
.jrny__map :is(.citylbl, .nodelbl, .inset-lbl) { font-family: var(--font-body); font-size: calc(13.5px * var(--k, 1.15)); fill: rgba(255, 255, 255, .86); }
.jrny__map .inset-lbl { fill: rgba(255, 255, 255, .7); }
.jrny__map .borderline { fill: none; stroke: rgba(255, 255, 255, .6); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.jrny__map .callout { fill: none; stroke: rgba(255, 255, 255, .2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.jrny__map .insetbox { fill: rgba(7, 21, 43, .9); stroke: rgba(255, 255, 255, .2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.jrny__map .link { fill: none; stroke: rgba(255, 255, 255, .15); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.jrny__map .tok { opacity: 0; transition: opacity 250ms; }
.jrny__map .tok.on { opacity: 1; }
.jrny__map .tok__dot { r: 5px; }
.jrny__map .tok--cpi .tok__dot { fill: #fff; }
.jrny__map .tok--celva .tok__dot { fill: var(--accent-ice); }
.jrny__map .tok__halo { fill: none; stroke: rgba(255, 255, 255, .6); stroke-width: 1; transform-box: fill-box; transform-origin: center; animation: cp-halo 2.4s ease-out infinite; }
.jrny__map .tok--celva .tok__halo { stroke: var(--accent-ice); }
@keyframes cp-halo { 0% { transform: scale(1.6); opacity: .7; } 70% { transform: scale(5); opacity: 0; } 100% { opacity: 0; } }
.jrny__hud { position: absolute; left: 16px; right: 16px; top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.jrny__clock { display: flex; align-items: baseline; gap: 8px; padding: 8px 14px; border-radius: 8px; background: rgba(7, 21, 43, .82); box-shadow: 0 0 0 1px rgba(255, 255, 255, .16); color: #fff; }
.jrny__clock-day { font-size: 15px; font-weight: 600; color: var(--accent-ice); }
.jrny__clock-time { min-width: 3.1ch; font-size: 30px; font-weight: 300; line-height: 1; font-variant-numeric: tabular-nums; text-align: right; }
.jrny__clock-mer { font-size: 13px; font-weight: 600; color: var(--cp-on-dark); }
.jrny__key { display: flex; gap: 18px; margin: 0; padding: 0; list-style: none; font-size: 14px; font-weight: 500; color: #fff; }
.jrny__key li { display: flex; align-items: center; gap: 8px; }
.jrny__key li::before { content: ""; width: 22px; height: 3px; border-radius: 2px; background: #fff; }
.jrny__key .jrny__key-celva::before { background: var(--accent-ice); }
.jrny__controls { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.jrny__controls[hidden] { display: none; }   /* until the script that works them has run */
.jrny__btn {
  min-width: 88px; min-height: 44px; padding: 0 18px; border: 1px solid rgba(255, 255, 255, .4); border-radius: 4px; background: transparent;
  font-family: var(--font-body); font-size: 15px; font-weight: 500; color: #fff; cursor: pointer; transition: background-color 200ms, color 200ms, border-color 200ms, transform 260ms var(--cp-ease);
}
.jrny__btn:hover { background: #fff; border-color: #fff; color: var(--ink); transform: translateY(-2px); }
.jrny__btn:active { transform: none; }
.jrny__bar { flex: 1; height: 4px; margin-left: 8px; border-radius: 2px; background: rgba(255, 255, 255, .16); overflow: hidden; }
.jrny__bar span { display: block; width: 0; height: 100%; background: var(--accent-ice); }
.jrny__side { display: grid; gap: clamp(12px, 1.4vw, 18px); grid-auto-rows: 1fr; }
.jrny__card { display: flex; flex-direction: column; padding: 20px 22px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .14); border-left: 3px solid #fff; background: rgba(255, 255, 255, .04); transition: background-color 600ms, border-color 600ms; }
.jrny__card--celva { border-left-color: var(--accent-ice); }
.jrny__card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.jrny__who { font-size: 15px; font-weight: 600; color: #fff; }
.jrny__card--celva .jrny__who { color: var(--accent-ice); }
.jrny__mode { padding: 4px 10px; border-radius: 4px; background: rgba(255, 255, 255, .1); font-size: 13px; font-weight: 500; color: var(--cp-on-dark); transition: background-color 300ms, color 300ms; }
.jrny__mode.is-moving { background: #fff; color: var(--ink); }
.cmp-cpi .jrny__act { margin: 0 0 6px; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.25rem, 1.7vw, 1.5rem); line-height: 1.2; color: #fff; min-height: 2.4em; }
.cmp-cpi .jrny__note { flex: 1; margin: 0 0 14px; font-size: 14.5px; line-height: 1.5; color: var(--cp-on-dark); min-height: 3em; }
.jrny__meters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .16); }
.jrny__meter-k { display: block; font-size: 13px; color: rgba(255, 255, 255, .72); }
.jrny__meter-v { display: block; margin-top: 2px; font-size: 17px; font-weight: 500; font-variant-numeric: tabular-nums; color: #fff; }
/* home for good: the Celva card settles */
.jrny.celva-home .jrny__card--celva { background: rgba(124, 169, 209, .16); border-color: var(--accent-ice); }
.jrny.celva-home .jrny__card--celva .jrny__mode { background: var(--accent-ice); color: var(--ink); }

.jrny__totals { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .9fr); margin-top: clamp(28px, 3.4vw, 48px); border-block: 1px solid rgba(255, 255, 255, .2); }
.jrny__tot, .jrny__delta { padding: clamp(20px, 2.4vw, 30px) clamp(16px, 2.4vw, 32px); }
.jrny__tot--cpi { padding-left: 0; }
.jrny__tot + .jrny__tot, .jrny__delta { border-left: 1px solid rgba(255, 255, 255, .2); }
.jrny__tot-k, .jrny__delta-k { font-size: 14.5px; font-weight: 500; color: var(--cp-on-dark); }
.jrny__tot-big { margin: 6px 0 14px; font-family: var(--font-display); font-weight: 300; font-size: clamp(2.6rem, 5vw, 4.4rem); line-height: 1; letter-spacing: -.02em; color: #fff; font-variant-numeric: tabular-nums; }
.jrny__tot--celva .jrny__tot-big { color: var(--accent-ice); }
.jrny__tot-split { display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 13px; color: rgba(255, 255, 255, .72); }
.jrny__tot-split b { display: block; margin-top: 1px; font-size: 15.5px; font-weight: 500; color: #fff; font-variant-numeric: tabular-nums; }
.jrny__delta { display: flex; flex-direction: column; justify-content: center; transition: background-color 900ms; }
.jrny__delta-v { margin: 6px 0; font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: clamp(1.7rem, 2.8vw, 2.5rem); line-height: 1.1; color: var(--accent-ice); }
.jrny__delta-s { font-size: 15.5px; color: #fff; }
.jrny.is-done .jrny__delta { background: rgba(124, 169, 209, .14); }
.cmp-cpi .jrny__fine { margin: clamp(22px, 2.6vw, 34px) 0 0; font-size: 13.5px; line-height: 1.55; color: rgba(255, 255, 255, .7); }

/* ============ PRIVACY ============ */
.cmp-cpi .priv__lede { font-size: 18px; line-height: 1.6; color: var(--ink-muted); margin: 0 0 clamp(28px, 3.4vw, 48px); }
.priv__pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 3.4vw, 56px); }
.priv__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; }
.priv__logo { display: inline-flex; padding: 10px 14px; background: var(--ink); }
.cmp-cpi .priv__logo img[width][height] { display: block; width: auto; height: 20px; }
.cmp-cpi .priv__celva[width][height] { display: block; width: auto; height: 30px; }
.priv__kind { font-size: 15px; font-weight: 500; color: var(--ink-muted); }
.priv__side--us .priv__kind { color: var(--accent-blue-hover); }
.cmp-cpi .priv__cap { margin: 14px 0 16px; font-family: var(--font-display); font-weight: 300; font-style: italic; font-size: clamp(1.35rem, 2.1vw, 1.8rem); line-height: 1.2; color: var(--ink); }
.priv__frame { margin: 0; }
.priv__frame video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; background: var(--ink); }
.priv__side--us .priv__frame video { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--accent-blue); }
.priv__framecap { margin-top: 10px; font-size: 14.5px; color: var(--ink-muted); }
.priv__rows { margin: 18px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.priv__side--us .priv__rows { border-top-color: var(--accent-blue); }
.priv__rows li { display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.priv__k { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.priv__v { font-size: 16px; line-height: 1.5; color: var(--ink-soft); }

/* ============ "READ MORE" (a phone folds what a reader can skip) ============ */
[data-fold] > summary { list-style: none; }
[data-fold] > summary::-webkit-details-marker { display: none; }
:is(.priv__fold, .par__fold, .learn-sources-band__fold) > summary { display: none; }
.cp-fold__less, [data-fold][open] .cp-fold__more { display: none; }
[data-fold][open] .cp-fold__less { display: inline; }
@keyframes cp-unfold { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ============ WHAT IS IDENTICAL ============ */
.par__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 84px); align-items: start; }
.par__head { position: sticky; top: calc(var(--hc-nav-h) + var(--cp-bar-h) + 28px); }
.cmp-cpi .par__lede { font-size: 18px; line-height: 1.6; color: var(--ink-muted); margin: 0 0 18px; }
.cmp-cpi .par__foot { margin: 0; padding-top: 16px; border-top: 1px solid var(--border); font-size: 14.5px; line-height: 1.55; color: var(--ink-muted); }
.pt { width: 100%; border-collapse: collapse; table-layout: fixed; }
.pt :is(th, td) { padding: 12px 12px 12px 0; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--border); font-weight: 400; }
.pt thead th { padding-top: 0; vertical-align: bottom; border-bottom: 2px solid var(--ink); font-size: 14.5px; color: var(--ink-muted); }
.pt thead th:first-child { width: 36%; }
.pt__brand { display: block; font-family: var(--font-display); font-size: 26px; line-height: 1.1; color: var(--ink); }
.pt thead th:nth-child(2) .pt__brand { color: var(--accent-blue); }
.pt__sub { display: block; margin-top: 2px; font-size: 13.5px; color: var(--ink-muted); }
.pt__feat { display: flex; align-items: center; gap: 12px; }
.pt__icon { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 10px; background: rgba(45, 110, 177, .1); color: var(--accent-blue-hover); }
.pt__icon svg { width: 24px; height: 24px; }
.pt__f { font-size: 16px; font-weight: 600; color: var(--ink); }
.pt td { font-size: 15px; line-height: 1.4; color: var(--ink-soft); }
.pt__tick { float: left; width: 20px; height: 20px; margin: 0 8px 0 0; fill: none; stroke: var(--ink-muted); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pt td[data-who="Celva"] .pt__tick { stroke: var(--accent-blue); }
.pt__d { display: block; overflow: hidden; }
.pt tfoot :is(th, td) { border-bottom: 0; padding-top: 18px; font-size: 16px; font-weight: 600; color: var(--ink); }
.pt__all { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 22px; }
/* each pair of ticks is drawn, row after row */
@keyframes cp-draw { from { stroke-dashoffset: 18; } to { stroke-dashoffset: 0; } }
.cp-js [data-r="ticks"] .pt__tick path { stroke-dasharray: 18; animation: cp-draw 420ms ease-out both paused; animation-delay: calc(var(--row, 0) * 90ms + 150ms); }
.cp-js [data-r="ticks"].is-in .pt__tick path { animation-play-state: running; }
.pt tbody tr:nth-child(2) { --row: 1; } .pt tbody tr:nth-child(3) { --row: 2; } .pt tbody tr:nth-child(4) { --row: 3; } .pt tbody tr:nth-child(5) { --row: 4; }
.pt tbody tr:nth-child(6) { --row: 5; } .pt tbody tr:nth-child(7) { --row: 6; } .pt tbody tr:nth-child(8) { --row: 7; }

/* ============ WHAT WE LEAVE OUT (a ledger, each line struck) ============ */
.cmp-cpi main > .cut, .cmp-cpi main > .par { padding-top: 0; }
.cmp-cpi .cut__lede { font-size: 18px; line-height: 1.6; color: var(--ink-muted); margin: 0 0 clamp(24px, 3vw, 40px); }
.cut__list { border-bottom: 1px solid var(--ink); }
.cut__row { border-top: 1px solid var(--border); padding: 20px 0; }
.cut__row:first-child { border-top-color: var(--ink); }
.cut__row::after { content: ""; display: block; clear: both; }
.cut__row > summary { float: left; width: 44%; display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 18px; align-items: center; pointer-events: none; }
.cut__ico { grid-row: span 2; display: block; width: 56px; height: 56px; }
.cut__ico svg { display: block; width: 100%; height: 100%; fill: none; stroke: var(--ink-soft); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cut__ico svg .f { fill: rgba(45, 110, 177, .22); stroke: none; }
.cut__ico svg .x { stroke: var(--accent-blue); stroke-width: 2.6; }
.cmp-cpi .cut__t { margin: 0; align-self: end; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.25rem, 1.8vw, 1.55rem); line-height: 1.15; color: var(--ink); }
.cut__amt { align-self: start; font-size: 14.5px; color: var(--ink-muted); }
.cut__body { margin-left: 48%; min-height: 56px; display: flex; align-items: center; }
.cmp-cpi .cut__why { margin: 0; font-size: 16.5px; line-height: 1.55; color: var(--ink-soft); }
.cp-js [data-r="strike"] .cut__ico .x { stroke-dasharray: 54; animation: cp-strike 520ms var(--cp-ease) both paused; animation-delay: calc(var(--row, 0) * 130ms + 200ms); }
@keyframes cp-strike { from { stroke-dashoffset: 54; } to { stroke-dashoffset: 0; } }
.cp-js [data-r="strike"].is-in .cut__ico .x { animation-play-state: running; }
.cut__row:nth-child(2) { --row: 1; } .cut__row:nth-child(3) { --row: 2; } .cut__row:nth-child(4) { --row: 3; } .cut__row:nth-child(5) { --row: 4; } .cut__row:nth-child(6) { --row: 5; }
.cut__end { margin-top: clamp(26px, 3vw, 40px); }
.cmp-cpi .cut__kicker { margin: 0; font-family: var(--font-display); font-weight: 300; font-size: clamp(1.3rem, 2vw, 1.7rem); line-height: 1.3; color: var(--ink); }
.cut__end .cp-cta { margin-top: 22px; }

/* ============ BEFORE YOU DECIDE ============ */
.cmp-cpi main > .vs-faq { padding-top: 0; }
.vs-faq__in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 5vw, 84px); align-items: start; }
.vs-faq__head { position: sticky; top: calc(var(--hc-nav-h) + var(--cp-bar-h) + 28px); }
.vs-faq__head .cp-cta { margin-top: 10px; flex-direction: column; align-items: flex-start; gap: 6px; }
.vs-faq__list { border-top: 1px solid var(--ink); }
.vs-faq__item { border-bottom: 1px solid var(--border); }
.vs-faq__item > summary { position: relative; display: block; padding: 18px 48px 18px 0; cursor: pointer; list-style: none; }
.vs-faq__item > summary::-webkit-details-marker { display: none; }
.cmp-cpi .vs-faq__item h3 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.25rem, 1.8vw, 1.5rem); line-height: 1.25; color: var(--ink); transition: color 200ms; }
.vs-faq__item > summary:hover h3 { color: var(--accent-blue); }
.vs-faq__item > summary::before, .vs-faq__item > summary::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 16px; height: 2px; margin-top: -1px; border-radius: 1px; background: var(--accent-blue);
  transition: transform 360ms var(--cp-ease);
}
.vs-faq__item > summary::after { transform: rotate(90deg); }
.vs-faq__item[open] > summary::after { transform: rotate(0); }
.vs-faq__item > summary:hover::before { transform: scaleX(1.25); }
.cmp-cpi .vs-faq__item p { margin: 0; padding: 0 48px 22px 0; font-size: 17px; line-height: 1.62; color: var(--ink-soft); }
.vs-faq__item[open] > p { animation: cp-unfold 360ms var(--cp-ease) both; }

/* ============ SOURCES (the foot of the answers) ============ */
.vs-faq__list, .learn-sources-band { grid-column: 2; }
.learn-sources-band { margin-top: clamp(30px, 3.6vw, 48px); }
.learn-sources-band__top { display: flex; align-items: center; gap: 14px; margin: 0 0 12px; }
.cmp-cpi .learn-sources-band__h { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.25rem, 1.8vw, 1.5rem); color: var(--ink); }
.learn-sources-band__mark { display: inline-flex; align-items: center; padding: 7px 10px; background: var(--ink); }
.cmp-cpi .learn-sources-band__mark img[width][height] { display: block; width: auto; height: 16px; }
.vs-sources { margin: 0; padding: 0 0 0 22px; font-size: 15.5px; line-height: 1.6; color: var(--ink-muted); }
.vs-sources li { padding: 0 0 10px 6px; }
.vs-sources li::marker { color: var(--ink); font-weight: 600; }
.vs-sources strong { color: var(--ink); font-weight: 600; }

/* ============ MORE COMPARISONS ============ */
.cmp-cpi main > .learn-related { padding-block: clamp(48px, 6vw, 80px); border-top: 1px solid var(--border); }
.cmp-cpi .learn-related__h { font-size: clamp(1.6rem, 2.6vw, 2.3rem); margin-bottom: clamp(22px, 2.6vw, 34px); }
.learn-related__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.learn-related__card { position: relative; display: flex; flex-direction: column; padding: 22px 0 6px; border-top: 2px solid var(--ink); }
.learn-related__card::before { content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 2px; background: var(--accent-blue); transform: scaleX(0); transform-origin: left; transition: transform 520ms var(--cp-ease); }
.learn-related__card:hover::before, .learn-related__card:focus-within::before { transform: scaleX(1); }
.learn-related__card:hover h3, .learn-related__card:focus-within h3 { color: var(--accent-blue-hover); }
.learn-related__mark { display: flex; align-items: flex-start; height: 48px; margin-bottom: 20px; }
.cmp-cpi .learn-related__logo[width][height] { display: block; width: auto; height: auto; max-width: min(100%, 220px); max-height: 100%; }
.cmp-cpi .learn-related__logo--sq[width][height] { height: 48px; width: 48px; }
.cmp-cpi .learn-related__logo--wide[width][height] { max-height: 34px; }
.cmp-cpi .learn-related__card h3 { margin: 0 0 10px; font-family: var(--font-display); font-size: 1.5rem; font-weight: 400; line-height: 1.2; color: var(--ink); transition: color 240ms; }
.learn-related__card h3 em { font-style: italic; color: var(--accent-blue); }
.cmp-cpi .learn-related__card p { flex: 1; margin: 0 0 10px; font-size: 16px; line-height: 1.6; color: var(--ink-muted); }
.cmp-cpi .learn-related__card a { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 15px; font-weight: 600; color: var(--accent-blue-hover); }
.learn-related__card a::after { content: ""; position: absolute; inset: 0; }
.learn-related__card:hover a span { transform: translateX(4px); }
.cmp-cpi .learn-related__card a:focus-visible { outline: none; }
.learn-related__card a:focus-visible::after { outline: 2px solid var(--accent-blue); outline-offset: 3px; }

/* ============ CLOSING: the self-assessment ============ */
.cmp-cpi main > .assess-band { padding-block: clamp(52px, 6.5vw, 92px); border-top: 1px solid var(--border); }
.assess-band__inner { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; max-width: 1040px; }
.assess-band__sheet { display: block; width: 132px; height: 160px; transform: rotate(3deg); }
.assess-band__sheet .sheet { fill: #fff; stroke: var(--ink); stroke-width: 1.5; }
.assess-band__sheet .ln { stroke: var(--border-strong); stroke-width: 3; stroke-linecap: round; }
.assess-band__sheet .tick { fill: none; stroke: var(--accent-blue); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cp-js [data-r="sheet"] .tick { stroke-dasharray: 13; animation: cp-tick 360ms ease-out both paused; animation-delay: calc(var(--i) * 130ms + 250ms); }
@keyframes cp-tick { from { stroke-dashoffset: 13; } to { stroke-dashoffset: 0; } }
.cp-js [data-r="sheet"].is-in .tick { animation-play-state: running; }
.cmp-cpi .assess-band__lede { font-size: 18px; line-height: 1.6; color: var(--ink-muted); margin: 0 0 22px; }
.assess-band__note { display: block; margin-top: 12px; font-size: 14.5px; color: var(--ink-muted); }

/* ============ PHONE AND TABLET: one column, the detail on demand ============ */
@media (max-width: 1100px) {
  .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); }
  .cal__stage { --cal-h: 600px; }
}
@media (max-width: 860px) {
  .cp-tally__row { grid-template-columns: minmax(0, 1fr); gap: 16px; }

  /* the calendars become two lists: one day open, six folded */
  .cal__lede--desk { display: none; }
  .cal__lede--phone { display: block; }
  .cal__stage, .cal__wk { display: block; }
  .cal__axis { display: none; }
  .cal__wk + .cal__wk { margin-top: 34px; }
  .cal__wkhead { flex-wrap: nowrap; }
  .cal__days { display: block; }
  .cal__day, .cal__day:last-child { border: 0; border-bottom: 1px solid var(--border); }
  .cal__dl { position: relative; height: auto; min-height: 56px; align-items: center; padding: 8px 40px 8px 2px; }
  summary.cal__dl { cursor: pointer; pointer-events: auto; }
  summary.cal__dl::after {
    content: ""; position: absolute; right: 10px; top: 50%; width: 9px; height: 9px; margin-top: -7px;
    border-right: 2px solid var(--accent-blue); border-bottom: 2px solid var(--accent-blue); transform: rotate(45deg); transition: transform 320ms var(--cp-ease);
  }
  .cal__day[open] > summary.cal__dl::after { transform: translateY(4px) rotate(-135deg); }
  .cal__dl .dow { flex: none; width: 2.4em; font-size: 16px; }
  .cal__dl .dnum { flex: none; width: 3.4em; font-size: 14px; }
  .cal__mini { display: block; position: relative; flex: 1; height: 14px; border-radius: 3px; background: #F1F3F6; overflow: hidden; }
  .cal__mini i { position: absolute; top: 0; bottom: 0; background: #B9C4D2; box-shadow: inset -1px 0 0 #fff; }
  .cal__mini .k-travel { background: #8FB3D9; }
  .cal__mini .k-idle { background: #DCE1E8; }
  .cal__mini .k-key { background: var(--cp-gold); }
  .cal__lane { height: auto; display: grid; gap: 6px; padding: 4px 0 14px; border-top: 0; background: none; }
  .cal__wk--celva .cal__lane { background: none; }
  .ev, .ev--sm { position: static; flex-direction: row; align-items: center; gap: 12px; height: auto; min-height: 46px; padding: 8px 30px 8px 12px; font-size: 15px; }
  .ev__t { width: 4.6em; font-size: 14px; }
  .ev__ttl, .ev--key .ev__ttl { white-space: normal; }
  .ev[data-v]::after, .ev--sm[data-v]::after { right: 12px; top: 50%; margin-top: -4.5px; }
  .ev:hover, .ev.is-open { transform: none; }
  .cp-js [data-r="cal"] .cal__lane .ev { animation: none; }
  .cal__day[open] > .cal__lane { animation: cp-unfold 360ms var(--cp-ease) both; }
  .cal__home { margin-top: 12px; padding: 10px 12px 12px; gap: 6px 14px; }
  .cal__home-days { gap: 6px; flex: 1 1 100%; }
  .cal__home .ev { flex: 1; min-width: 0; padding: 0 4px; }
  .cal__pop { position: static; width: auto; pointer-events: auto; transform: none; box-shadow: 0 0 0 1px var(--border-strong); margin: 2px 0 8px; }
  .cal__pop.is-on { animation: cp-unfold 320ms var(--cp-ease) both; }
  .cal__home .cal__pop { flex-basis: 100%; }

  .vs2-band__in { grid-template-columns: minmax(0, 1fr); }
  .pt-grid { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 46%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--cp-gut) * -1); padding-inline: var(--cp-gut); scroll-padding-inline: var(--cp-gut); }
  .pt-grid::-webkit-scrollbar { display: none; }
  .pt-tile { scroll-snap-align: start; }
  .pt-tile:nth-child(even) { margin-block: 0; }

  .vs-magnet__in { grid-template-columns: minmax(0, 1fr); }
  .hc-doc { max-width: 330px; padding: 18px 18px 14px; }
  .hc-doc__title { margin: 14px 0 10px; }
  .hc-doc__rows > span { padding: 6px 0; font-size: 13.5px; }
  .hc-doc__foot { margin-top: 10px; }

  .jrny__stage { grid-template-columns: minmax(0, 1fr); }
  .jrny__side { grid-auto-rows: auto; }
  .cmp-cpi .jrny__act { min-height: 0; }
  .jrny__totals { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .jrny__tot--celva { padding-right: 0; }
  .jrny__delta { grid-column: 1 / -1; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .2); padding-inline: 16px; }

  /* stacked, the two sides come up instead of in from the edges (a sideways start would widen the page) */
  .cp-js [data-r="left"]:not(.is-in), .cp-js [data-r="right"]:not(.is-in) { transform: translateY(18px); }
  .priv__pair { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .priv__rows li { grid-template-columns: 112px minmax(0, 1fr); min-height: 0 !important; }

  /* "Read more" / "Show less" */
  :is(.priv__fold, .par__fold, .learn-sources-band__fold) > summary {
    display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 8px; padding: 0 2px; cursor: pointer;
    font-size: 15.5px; font-weight: 600; color: var(--accent-blue-hover);
  }
  :is(.priv__fold, .par__fold, .learn-sources-band__fold) > summary::after {
    content: ""; width: 8px; height: 8px; margin-top: -4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg); transition: transform 320ms var(--cp-ease);
  }
  :is(.priv__fold, .par__fold, .learn-sources-band__fold)[open] > summary::after { transform: translateY(4px) rotate(-135deg); }
  [data-fold][open] > :not(summary) { animation: cp-unfold 360ms var(--cp-ease) both; }

  .par__in { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .par__head, .vs-faq__head { position: static; }
  .pt, .pt tbody, .pt tfoot, .pt tr, .pt td, .pt th { display: block; }
  .pt thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .pt tbody tr { padding: 12px 0; }
  .pt tbody th { padding: 0 0 8px; border: 0; }
  .pt tbody tr { border-bottom: 1px solid var(--border); }
  .pt td { padding: 3px 0 3px 60px; border: 0; }
  .pt td::before { content: attr(data-who); float: left; width: 3.6em; font-weight: 600; color: var(--ink); }
  .pt tfoot tr { display: grid; grid-template-columns: 1fr auto; padding: 14px 0 0; border-top: 1px solid var(--ink); align-items: baseline; }
  .pt tfoot :is(th, td) { padding: 0; }
  .pt tfoot td + td { display: none; }
  .pt tfoot td::before { content: none; }

  .cut__row { padding: 0; }
  .cut__row > summary { float: none; width: auto; position: relative; min-height: 76px; padding: 10px 36px 10px 0; pointer-events: auto; cursor: pointer; }
  .cut__row > summary::after {
    content: ""; position: absolute; right: 8px; top: 50%; width: 9px; height: 9px; margin-top: -7px;
    border-right: 2px solid var(--accent-blue); border-bottom: 2px solid var(--accent-blue); transform: rotate(45deg); transition: transform 320ms var(--cp-ease);
  }
  .cut__row[open] > summary::after { transform: translateY(4px) rotate(-135deg); }
  .cut__body { margin: 0; padding: 0 0 18px 74px; min-height: 0; display: block; }

  .vs-faq__in { grid-template-columns: minmax(0, 1fr); }
  .vs-faq__list, .learn-sources-band { grid-column: 1; }
  .vs-faq__head { margin-bottom: 26px; }
  .vs-sources { margin-top: 10px; }
  .learn-related__grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .learn-related__card { padding: 16px 0 2px; }
  .learn-related__mark { margin-bottom: 12px; }
  .cmp-cpi .learn-related__card p { margin-bottom: 2px; }
  .cmp-cpi .vs-faq__item p { padding-right: 0; }
}
@media (max-width: 600px) {
  html:has(body.cmp-cpi) { --cp-bar-h: 48px; }
  .hc-bar__track { gap: 22px; }
  .cp-week__days li { padding: 7px 6px; font-size: 13px; }
  .cp-week__syr { left: 6px; bottom: 6px; width: 18px; height: 18px; }
  .cp-week__moon { width: 15px; height: 15px; right: 6px; bottom: 7px; }
  .cp-cta .btn, .vs-magnet__get .btn { width: 100%; }
  .assess-band .btn { width: 100%; }
  .assess-band__inner { grid-template-columns: minmax(0, 1fr); }
  .assess-band__sheet { width: 92px; height: 112px; }
  .jrny__hud { position: static; padding: 10px 10px 0; }
  .jrny__clock { padding: 6px 10px; }
  .jrny__clock-time { font-size: 24px; }
  .jrny__key { gap: 12px; font-size: 13px; }
  .jrny__key li::before { width: 14px; }
  .jrny__card { padding: 16px 16px 14px; }
  .cmp-cpi .jrny__note { min-height: 3em; margin-bottom: 10px; }
  .jrny__tot-split { gap: 8px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .cmp-cpi main *, .cmp-cpi main *::before, .cmp-cpi main *::after, .cmp-cpi .hc-bar, .cal__pop { animation: none !important; transition: none !important; }
  .cp-js [data-r] { opacity: 1; transform: none; }
  .cp-js [data-r="doc"] { transform: rotate(-2.2deg); }
}
@media print {
  .cmp-cpi .hc-bar, .cal__pop, .jrny__controls, .pt-modal { display: none !important; }
  .cp-js [data-r] { opacity: 1 !important; transform: none !important; }
  .cmp-cpi main * { animation: none !important; transition: none !important; }
  .cal__stage { --cal-h: 560px; }
  /* the navy grounds are dropped on paper, so their white words go dark */
  .cp-hero, .jrny, .cp-note { background: #fff !important; }
  .cp-hero *, .jrny *, .cp-note * { color: var(--ink) !important; }
  /* the map is drawn in white for the navy ground: on paper its lettering, dots and lines are ink */
  .jrny__map :is(.citylbl, .nodelbl, .inset-lbl, .city, .node, .tok--cpi .tok__dot) { fill: var(--ink) !important; }
  .jrny__map :is(.trail--cpi, .route, .cityring, .borderline, .callout, .link, .tok__halo) { stroke: var(--ink) !important; }
  .jrny__map .insetbox { fill: #fff !important; stroke: var(--ink) !important; }
  /* drawn as a rule, not a ground: a ground is only printed when "Background graphics" is ticked */
  .jrny__key li::before { height: 0 !important; background: none !important; border-top: 3px solid var(--ink); border-radius: 0; }
  .jrny__key .jrny__key-celva::before { border-top-color: var(--accent-ice); }
  .jrny__clock { background: none !important; box-shadow: inset 0 0 0 1px var(--ink) !important; }
}

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