/* /cpi-stem-cell-cost. Loaded after site.css, by cpi-stem-cell-cost.html only.
   A page about a price nobody has published, so each part takes the shape of
   the thing it counts: two quote cards (one blank), six days in a row, an
   itemised receipt, three cards on reading a quote, a day drawn as three stops.
   White page, ink, the site blue. One tinted band (Celva's day), one navy
   band (the films). With scripts off nothing here is hidden. */

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

/* Text fills its column. The two resets are colors_and_type.css's: every bare
   <p> capped at 42rem, and a grey underline on every <a>. */
.cpi-cost main p { max-width: none; }
.cpi-cost main a:not(.btn) { border-bottom: 0; }
.cpi-cost main :is(h1, h2, h3) { text-wrap: wrap; }
.cpi-cost main h2 {
  font-family: var(--font-display); font-weight: 300; color: var(--ink);
  font-size: clamp(1.8rem, 3.1vw, 2.75rem); line-height: 1.1; letter-spacing: -.015em;
  margin: 0 0 clamp(16px, 1.8vw, 24px);
}
.cc-wrap { max-width: calc(var(--cc-max) + 2 * var(--cc-gut)); margin: 0 auto; padding: 0 var(--cc-gut); }
.cpi-cost main > section { padding-block: clamp(56px, 7vw, 100px); }
.cpi-cost .cc-lede { font-size: 18px; line-height: 1.6; color: var(--ink-muted); margin: 0; }

/* a part that receives focus after a jump is not itself a control */
.cpi-cost main [tabindex="-1"]:focus { outline: none; }
.cpi-cost main :is(a, button, summary):focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 3px; border-radius: 4px; }
.cpi-cost .cc-patients :is(a, button):focus-visible, .cpi-cost .pt-modal button:focus-visible { outline-color: #fff; }

/* a link inside running text */
.cpi-cost :is(.cc-faq__a, .cc-check__fine, .cc-src li) 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;
}
.cpi-cost :is(.cc-faq__a, .cc-check__fine, .cc-src li) a:hover { color: var(--accent-blue); text-decoration-color: currentColor; }

/* a link that goes somewhere, with its arrow */
.cc-go {
  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;
}
.cc-go span, .cpi-cost .btn span, .cc-next__go span { display: inline-block; transition: transform 320ms var(--cc-ease); }
.cc-go:hover { color: var(--accent-blue); text-decoration: underline; text-underline-offset: 4px; }
.cc-go:hover span, .cpi-cost .btn:hover span, .cc-next a:hover .cc-next__go span { transform: translateX(4px); }
.cc-go:active, .cpi-cost main .btn:active { transform: scale(.98); }
.cc-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; margin-top: clamp(28px, 3.4vw, 44px); }

/* ============ REVEALS ============
   Hidden only once the script has put .cc-js on <html>. Each part arrives in
   its own way; the ones that draw themselves keep their box at full opacity
   and move their own pieces. */
.cc-js [data-r="rise"] { opacity: 0; transform: translateY(18px); }
.cc-js [data-r="scale"] { opacity: 0; transform: scale(.965); }
.cc-js [data-r="doc"] { opacity: 0; transform: rotate(-8deg) translateY(28px); }
.cc-js [data-r="rise"], .cc-js [data-r="scale"], .cc-js [data-r="doc"] {
  transition: opacity 620ms var(--cc-ease), transform 760ms var(--cc-ease);
}
.cc-js [data-r].is-in { opacity: 1; transform: none; }
.cc-js [data-r="doc"].is-in { transform: rotate(-2.2deg); }
.cc-js .cc-bill li[data-r]:nth-child(2), .cc-js .cc-next li[data-r]:nth-child(2) { transition-delay: 90ms; }
.cc-js .cc-bill li[data-r]:nth-child(3), .cc-js .cc-next li[data-r]:nth-child(3) { transition-delay: 180ms; }

/* ============ HERO ============ */
.cpi-cost main > .cc-hero { padding-block: clamp(30px, 4.4vw, 64px) clamp(26px, 3vw, 40px); }
.cpi-cost .cc-hero__h {
  font-family: var(--font-display); font-weight: 300; color: var(--ink);
  font-size: clamp(2.5rem, 5.7vw, 5.1rem); line-height: 1.04; letter-spacing: -.025em;
  margin: 0 0 clamp(22px, 3vw, 44px);
}
/* a heading that has to wrap breaks where the colour changes */
.cc-hero__h > span { display: inline-block; }
.cc-hero__q { color: var(--accent-blue); }
.cc-hero__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 84px); align-items: center; }
.cpi-cost .cc-hero__answer {
  font-family: var(--font-display); font-weight: 300; color: var(--ink);
  font-size: clamp(1.45rem, 2.35vw, 2.1rem); line-height: 1.25; letter-spacing: -.01em; margin: 0;
}
.cc-hero__answer strong { font-weight: 400; color: var(--accent-blue); white-space: nowrap; }
.cc-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(22px, 2.6vw, 34px); }

/* ---- two quote cards: one reads "Quoted in writing", the other is blank (no price has been published) ---- */
.cc-slips { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(12px, 2vw, 26px); padding: 10px 6px 16px; }
.cc-slip {
  display: flex; flex-direction: column; gap: 11px; padding: clamp(14px, 1.9vw, 24px);
  background: #fff; border-radius: 6px;
  box-shadow: 0 0 0 1px var(--border), 0 26px 44px -30px rgba(11, 29, 58, .55);
  transform: rotate(-1.6deg); transform-origin: 50% 100%;
}
.cc-slip--celva { transform: rotate(1.3deg) translateY(10px); box-shadow: 0 0 0 1px var(--accent-blue), 0 26px 44px -28px rgba(11, 29, 58, .6); }
.cc-slip__mark { align-self: flex-start; display: inline-flex; align-items: center; height: 34px; margin-bottom: 8px; }
.cc-slip__mark--cpi, .cc-slip__mark--celva { font-family: var(--font-display); font-size: 25px; letter-spacing: .01em; color: var(--ink); }
/* the eyelet of a price card */
.cc-slip::after { content: ""; position: absolute; right: clamp(14px, 1.9vw, 24px); top: clamp(14px, 1.9vw, 24px); width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(11, 29, 58, .3); }
.cc-slip__total {
  display: grid; place-items: center; min-height: clamp(64px, 7.6vw, 96px); margin-top: 10px; padding: 6px 8px; border-radius: 4px;
  background: var(--accent-blue); color: #fff; text-align: center;
}
.cc-slip__total b { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.02rem, 1.75vw, 1.5rem); line-height: 1.15; letter-spacing: .005em; }
.cc-slip__total--blank { background: none; border: 1.5px dashed rgba(11, 29, 58, .42); }

/* first paint: the heading in its two halves, the answer, then the two
   cards are laid down, Celva's number last */
@keyframes cc-rise { from { opacity: 0; transform: translateY(.5em); } to { opacity: 1; transform: none; } }
@keyframes cc-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cc-lay { from { opacity: 0; transform: translateY(34px) rotate(-7deg); } }
@keyframes cc-rule { from { transform: scaleX(0); } to { transform: none; } }
@keyframes cc-stamp { 0% { opacity: 0; transform: scale(1.18); } 60% { opacity: 1; transform: scale(.985); } 100% { opacity: 1; transform: none; } }
@media (scripting: enabled) {
  .cc-hero__h > span { animation: cc-rise 900ms var(--cc-ease) both; }
  .cc-hero__h > .cc-hero__q { animation-delay: 140ms; }
  .cc-hero__answer { animation: cc-fade 900ms 320ms both; }
  .cc-hero__actions, .cc-toc { animation: cc-fade 800ms 520ms both; }
  .cc-slip { animation: cc-lay 900ms var(--cc-ease) 380ms backwards; }
  .cc-slip--celva { animation-delay: 560ms; }
  .cc-slip__total { animation: cc-stamp 620ms var(--cc-ease) 1300ms backwards; }
  .cc-slip__total--blank { animation: cc-fade 620ms 1050ms backwards; }
}

/* ---- the parts of the page, as links ---- */
.cc-toc { display: flex; flex-wrap: wrap; gap: 0 clamp(16px, 2.4vw, 34px); margin-top: clamp(30px, 4vw, 56px); padding-top: 6px; border-top: 1px solid var(--border); }
.cpi-cost .cc-toc a {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px;
  font-size: 15px; font-weight: 500; color: var(--ink-soft); transition: color 200ms;
}
.cc-toc a::after { content: "\2193"; color: var(--accent-blue); transition: transform 320ms var(--cc-ease); }
.cpi-cost .cc-toc a:hover { color: var(--accent-blue); }
.cc-toc a:hover::after { transform: translateY(3px); }

/* ============ CONTENTS BAR (follows the reader) ============ */
.cpi-cost .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(--cc-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(--cc-ease), visibility 0s 360ms;
}
.cpi-cost .hc-bar.is-on { transform: none; opacity: 1; visibility: visible; transition: opacity 260ms, transform 360ms var(--cc-ease); }
body.cpi-cost.nav-open .hc-bar { opacity: 0; visibility: hidden; }
.hc-bar__track {
  max-width: calc(var(--cc-max) + 2 * var(--cc-gut)); margin: 0 auto; padding: 0 var(--cc-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; }
.cpi-cost .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(--cc-ease);
}
.cpi-cost .hc-bar__track a:hover, .cpi-cost .hc-bar__track a[aria-current] { color: var(--ink); }
.hc-bar__track a[aria-current]::after { transform: scaleX(1); }
.cpi-cost .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)); }
/* where the track can run off the edge, it fades */
@media (max-width: 760px) {
  .hc-bar__track { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 36px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 36px), transparent 100%); }
}

/* ============ CPI'S NUMBER ============ */
.cpi-cost main > .cc-cpi { padding-top: clamp(40px, 5vw, 72px); }
.cc-cpi__text { max-width: 68ch; }
.cpi-cost .cc-cpi__text p { font-size: 18.5px; line-height: 1.62; color: var(--ink-soft); margin: 0 0 16px; }
.cpi-cost .cc-cpi__text p:last-child { margin-bottom: 0; }
.cc-cpi__text strong { font-weight: 600; color: var(--ink); }

/* ============ THE WEEK ============ */
.cpi-cost main > .cc-week { padding-top: 0; }
.cc-six { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(6px, 1vw, 14px); margin: clamp(26px, 3.2vw, 44px) 0 0; }
.cc-six > span {
  position: relative; display: block; height: clamp(58px, 7vw, 96px); border-radius: 6px; overflow: hidden;
  border: 1.5px solid var(--border-strong);
  background: repeating-linear-gradient(135deg, rgba(11, 29, 58, .075) 0 6px, transparent 6px 12px);
}
/* the one afternoon of treatment: the second half of one day */
.cc-six > .is-treat { border-color: var(--accent-blue); background: #fff; }
.cc-six > .is-treat b { position: absolute; inset: 0 0 0 50%; display: grid; place-items: center; background: var(--accent-blue); transform-origin: left; }
.cc-six svg { width: clamp(20px, 2.4vw, 30px); height: auto; fill: none; stroke: #fff; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
@keyframes cc-cell { from { opacity: 0; transform: translateY(12px) scale(.94); } to { opacity: 1; transform: none; } }
.cc-js [data-r="six"] > span { animation: cc-cell 520ms var(--cc-ease) both paused; animation-delay: calc(var(--d, 0) * 110ms); }
.cc-js [data-r="six"] > .is-treat b { animation: cc-rule 620ms var(--cc-ease) 900ms both paused; }
.cc-js [data-r="six"].is-in :is(span, b) { animation-play-state: running; }
.cc-six > span:nth-child(2) { --d: 1; } .cc-six > span:nth-child(3) { --d: 2; } .cc-six > span:nth-child(4) { --d: 3; }
.cc-six > span:nth-child(5) { --d: 4; } .cc-six > span:nth-child(6) { --d: 5; }

/* three costs, each two days wide */
.cc-bill { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(6px, 1vw, 14px); margin: clamp(18px, 2vw, 26px) 0 0; padding: 0; list-style: none; }
.cc-bill li { padding: 16px clamp(8px, 2vw, 28px) 0 0; border-top: 1.5px solid var(--ink); }
.cpi-cost .cc-bill h3 { margin: 0 0 6px; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.25rem, 1.8vw, 1.5rem); line-height: 1.2; color: var(--ink); }
.cpi-cost .cc-bill p { margin: 0; font-size: 16.5px; line-height: 1.55; color: var(--ink-muted); }
.cc-bill strong { font-weight: 600; color: var(--ink); }

/* ============ INSIDE A PROGRAM PRICE (a receipt) ============ */
.cpi-cost main > .cc-covers { padding-top: 0; }
.cc-covers__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 84px); align-items: start; }
.cc-covers__say { position: sticky; top: calc(var(--hc-nav-h) + var(--cc-bar-h) + 28px); }
.cpi-cost .cc-covers__close { margin: clamp(18px, 2vw, 26px) 0 0; font-family: var(--font-display); font-weight: 300; font-size: clamp(1.3rem, 1.9vw, 1.65rem); line-height: 1.3; color: var(--ink); }
.cc-ask { margin: clamp(20px, 2.4vw, 30px) 0 10px; padding: 4px 0 4px 20px; border-left: 3px solid var(--accent-blue); }
.cpi-cost .cc-ask p { margin: 0; font-size: 16.5px; line-height: 1.5; color: var(--ink-muted); }
.cpi-cost .cc-ask .cc-ask__q { margin-top: 4px; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.3rem, 1.9vw, 1.65rem); line-height: 1.25; color: var(--accent-blue-hover); }
/* the question, ready to paste into a message to CPI */
.cc-copy {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 12px; padding: 0 16px;
  border: 1px solid var(--border-strong); border-radius: 4px; background: #fff; cursor: pointer;
  font-family: var(--font-body); font-size: 14.5px; font-weight: 600; color: var(--ink-soft);
  transition: color 200ms, border-color 200ms, transform 200ms var(--cc-ease);
}
.cc-copy:hover { color: var(--accent-blue-hover); border-color: var(--accent-blue); }
.cc-copy:active { transform: scale(.97); }
.cc-copy svg { width: 0; height: 18px; fill: none; stroke: var(--accent-blue); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: width 260ms var(--cc-ease); }
.cc-copy.is-done { color: var(--accent-blue-hover); border-color: var(--accent-blue); }
.cc-copy.is-done svg { width: 18px; }
@keyframes cc-check { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }
.cc-copy.is-done svg path { stroke-dasharray: 24; animation: cc-check 420ms ease-out 120ms both; }
.cc-said { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cc-covers__btn { display: flex; width: fit-content; margin: clamp(18px, 2vw, 26px) 0 6px; }
.cc-receipt {
  margin: 0; padding: 6px clamp(16px, 2.6vw, 34px) 10px; list-style: none; background: #fff; border-radius: 3px;
  box-shadow: 0 0 0 1px var(--border), 0 34px 60px -40px rgba(11, 29, 58, .5);
}
.cc-receipt li {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) minmax(0, 150px); column-gap: clamp(12px, 1.6vw, 20px); align-items: center;
  padding: 18px 0; border-top: 1px dashed var(--border-strong);
}
.cc-receipt li:first-child { border-top: 0; }
.cc-receipt__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: rgba(45, 110, 177, .1); }
.cc-receipt__icon svg { width: 24px; height: 24px; fill: none; stroke: var(--accent-blue-hover); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cpi-cost .cc-receipt h3 { margin: 0 0 3px; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.2rem, 1.7vw, 1.42rem); line-height: 1.2; color: var(--ink); }
.cpi-cost .cc-receipt p { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--ink-muted); }
.cc-receipt__amt { text-align: right; font-size: 14.5px; font-weight: 600; line-height: 1.3; color: var(--ink); font-variant-numeric: tabular-nums; }
/* the last line is the only one that is treatment */
.cc-receipt li.is-treat { border-top: 1.5px solid var(--ink); }
.cc-receipt li.is-treat .cc-receipt__icon { background: var(--accent-blue); }
.cc-receipt li.is-treat .cc-receipt__icon svg { stroke: #fff; }
.cc-receipt li.is-treat .cc-receipt__amt { color: var(--accent-blue-hover); }
/* it prints, a line at a time */
@keyframes cc-print { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
.cc-js [data-r="receipt"] li { animation: cc-print 560ms var(--cc-ease) both paused; animation-delay: calc(var(--row, 0) * 150ms); }
.cc-js [data-r="receipt"].is-in li { animation-play-state: running; }
.cc-receipt li:nth-child(2) { --row: 1; } .cc-receipt li:nth-child(3) { --row: 2; } .cc-receipt li:nth-child(4) { --row: 3; }
.cc-receipt li:nth-child(5) { --row: 4; } .cc-receipt li:nth-child(6) { --row: 5.6; }

/* ============ ONE DAY WITH CELVA (the page's one tinted band) ============ */
.cpi-cost main > .cc-celva { background: var(--accent-wash); }
.cc-celva__head { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(18px, 5vw, 84px); align-items: start; }
.cpi-cost .cc-celva__num { margin: 0; font-family: var(--font-display); font-weight: 300; font-size: clamp(1.45rem, 2.3vw, 2.05rem); line-height: 1.25; color: var(--ink); }
.cc-celva__num strong { font-weight: 400; color: var(--accent-blue-hover); white-space: nowrap; }
.cpi-cost .cc-celva .cc-lede { color: var(--ink-soft); font-size: 17px; }

/* ---- three cards: how to read a quote ---- */
.price-bar { margin-top: clamp(30px, 4vw, 56px); }
.cc-band__panels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.pb-panel { padding: 18px 22px 18px; background: #fff; border-radius: 0 8px 8px 0; border-left: 3px solid var(--ink-soft); box-shadow: 0 0 0 1px var(--border); }
.pb-panel--gold { border-left-color: var(--accent-blue); }
.pb-panel--gray { border-left-color: rgba(11, 29, 58, .34); }
.pb-panel strong { display: block; margin-bottom: 10px; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.2rem, 1.7vw, 1.45rem); line-height: 1.2; color: var(--ink); }
.pb-panel ul { margin: 0; padding: 0; list-style: none; }
.pb-panel li { position: relative; margin-bottom: 5px; padding-left: 20px; font-size: 16px; line-height: 1.5; color: var(--ink-soft); }
.pb-panel li::before { content: ""; position: absolute; left: 0; top: .72em; width: 11px; height: 2px; background: currentColor; }

/* ---- who reads the imaging ---- */
.cc-team { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(24px, 5vw, 84px); align-items: center; margin-top: clamp(44px, 6vw, 88px); }
.cc-team__photo { margin: 0; border-radius: 10px; overflow: hidden; }
.cpi-cost .cc-team__photo img[width][height] { display: block; width: 100%; height: auto; }
.cpi-cost .cc-team h3 { margin: 0 0 12px; font-family: var(--font-display); font-weight: 300; font-size: clamp(1.55rem, 2.5vw, 2.2rem); line-height: 1.14; color: var(--ink); }
.cpi-cost .cc-team__body > p { margin: 0 0 clamp(18px, 2.2vw, 28px); font-size: 17px; line-height: 1.55; color: var(--ink-soft); }
.cc-team__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 18px); margin: 0 0 14px; padding: 0; list-style: none; }
.cc-team__row li { display: flex; flex-direction: column; gap: 8px; }
.cpi-cost .cc-team__row img[width][height] { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 6px; }
.cc-team__row span { font-size: 14px; line-height: 1.3; font-weight: 500; color: var(--ink); }
@keyframes cc-face { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.cc-js [data-r="faces"] li { animation: cc-face 620ms var(--cc-ease) both paused; }
.cc-js [data-r="faces"] li:nth-child(2) { animation-delay: 110ms; }
.cc-js [data-r="faces"] li:nth-child(3) { animation-delay: 220ms; }
.cc-js [data-r="faces"].is-in li { animation-play-state: running; }

/* ---- the day, as three stops on one line ---- */
.cc-day { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3.4vw, 56px); margin: clamp(40px, 5.4vw, 80px) 0 0; padding: 0; list-style: none; }
.cc-day li { position: relative; }
.cc-day__icon {
  position: relative; z-index: 1; display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 1.5px var(--border-strong); transition: background-color 420ms, box-shadow 420ms;
}
.cc-day__icon svg { width: 26px; height: 26px; fill: none; stroke: var(--ink-soft); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: stroke 420ms; }
/* one connector per gap, badge to badge, and nothing after the last */
.cc-day li:not(:last-child)::before, .cc-day li:not(:last-child)::after {
  content: ""; position: absolute; left: 64px; top: 27px; height: 2px; width: calc(100% - 72px + clamp(20px, 3.4vw, 56px));
  background: var(--border-strong);
}
.cc-day li:not(:last-child)::after { background: var(--accent-blue); transform: scaleX(0); transform-origin: left; transition: transform 700ms var(--cc-ease); }
.cc-day li.is-passed .cc-day__icon { background: var(--accent-blue); box-shadow: 0 0 0 1.5px var(--accent-blue); }
.cc-day li.is-passed .cc-day__icon svg { stroke: #fff; }
.cc-day li.is-passed::after { transform: scaleX(1); }
/* a stop is inked in as it lights */
@keyframes cc-ink { from { stroke-dasharray: 140; stroke-dashoffset: 140; } to { stroke-dasharray: 140; stroke-dashoffset: 0; } }
.cc-js .cc-day li.is-passed svg path { animation: cc-ink 1100ms ease-out backwards; }
.cc-js .cc-day li.is-passed:nth-child(2) svg path { animation-delay: 500ms; }
.cc-js .cc-day li.is-passed:nth-child(3) svg path { animation-delay: 1000ms; }
.cc-day li:nth-child(2) :is(.cc-day__icon, svg) { transition-delay: 500ms; } .cc-day li:nth-child(2)::after { transition-delay: 500ms; }
.cc-day li:nth-child(3) :is(.cc-day__icon, svg) { transition-delay: 1000ms; }
html:not(.cc-js) .cc-day__icon { background: var(--accent-blue); box-shadow: none; }
html:not(.cc-js) .cc-day__icon svg { stroke: #fff; }
.cpi-cost .cc-day p { margin: 0; font-size: 16.5px; line-height: 1.55; color: var(--ink-soft); }
.cc-day strong { font-weight: 600; color: var(--ink); }

/* ============ ACTUAL PATIENTS (navy) ============ */
/* clipped sideways: the frames wait off to the right before they slide in */
.cpi-cost main > .cc-patients { background: linear-gradient(180deg, var(--cc-deep) 0%, var(--ink) 70%); color: #fff; overflow-x: clip; }
.cpi-cost .cc-patients h2 { color: #fff; }
.cpi-cost .cc-patients .cc-lede { color: var(--cc-on-dark); }
.pt-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 18px); margin-top: clamp(28px, 3.4vw, 48px); }
.pt-tile {
  position: relative; display: block; width: 100%; align-self: start; aspect-ratio: 3 / 4; padding: 0; border: 0; border-radius: 8px; overflow: hidden;
  background: #0e1526; cursor: pointer; transition: transform 420ms var(--cc-ease), box-shadow 420ms;
}
.pt-tile__loop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--cc-ease); }
.pt-tile__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 21, 43, 0) 48%, rgba(7, 21, 43, .78) 100%); }
.pt-tile__play {
  position: absolute; left: 50%; top: 50%; width: clamp(48px, 5vw, 62px); aspect-ratio: 1 / 1; margin: calc(clamp(48px, 5vw, 62px) / -2) 0 0 calc(clamp(48px, 5vw, 62px) / -2);
  display: grid; place-items: center; border-radius: 50%; background: #fff; box-shadow: 0 10px 26px -8px rgba(0, 0, 0, .6);
  transition: transform 360ms var(--cc-ease), background-color 200ms;
}
.pt-tile__play svg { width: 42%; height: 42%; margin-left: 8%; fill: var(--ink); display: block; transition: fill 200ms; }
.pt-tile__cap {
  position: absolute; left: 12px; right: 12px; bottom: 10px; z-index: 2; display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  font-family: var(--font-body); font-size: 14.5px; font-weight: 600; line-height: 1.25; color: #fff; text-align: left; pointer-events: none;
}
.pt-tile__len { flex: none; font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--cc-on-dark); }
.pt-tile:hover, .pt-tile:focus-visible { transform: translateY(-4px); box-shadow: 0 24px 44px -22px rgba(0, 0, 0, .8); }
.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.1); background: var(--accent-ice); }
.pt-tile:active { transform: translateY(-1px) scale(.99); }
/* the strip slides in a frame at a time */
@keyframes cc-frame { from { opacity: 0; transform: translateX(36px); } to { opacity: 1; transform: none; } }
.cc-js [data-r="film"] .pt-tile { animation: cc-frame 760ms var(--cc-ease) backwards paused; }
.cc-js [data-r="film"] .pt-tile:nth-child(2) { animation-delay: 90ms; }
.cc-js [data-r="film"] .pt-tile:nth-child(3) { animation-delay: 180ms; }
.cc-js [data-r="film"] .pt-tile:nth-child(4) { animation-delay: 270ms; }
.cc-js [data-r="film"].is-in .pt-tile { animation-play-state: running; }
.cc-cta--dark { margin-top: clamp(28px, 3.4vw, 44px); }

.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 cc-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, .88); animation: cc-fade 220ms both; }
.pt-modal__box { position: relative; width: min(960px, 100%, calc((100dvh - 120px) * 16 / 9)); animation: cc-modal 420ms var(--cc-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(--cc-ease);
}
.pt-modal__close:hover { background: rgba(255, 255, 255, .3); transform: rotate(90deg); }

/* ============ THE CHECKLIST ============ */
.cc-check__in { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: clamp(32px, 6vw, 100px); align-items: center; margin-top: clamp(14px, 2vw, 28px); }
.cc-doc {
  display: block; padding: 24px 24px 18px; 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(--cc-ease), box-shadow 520ms;
}
.cpi-cost .cc-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); color: var(--ink); }
.cc-doc__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.cpi-cost .cc-doc__mark { display: block; width: 64px; height: auto; }
.cc-doc__count { font-size: 13.5px; color: var(--ink-muted); }
.cc-doc__title { display: block; margin: 20px 0 16px; font-family: var(--font-display); font-weight: 300; font-size: clamp(1.6rem, 2.2vw, 1.95rem); line-height: 1.08; }
.cc-doc__rows { display: block; border-top: 1px solid var(--ink); }
.cc-doc__rows > span { display: flex; align-items: baseline; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 14.5px; }
.cc-doc__rows > span > span:first-child { display: flex; flex: 1; align-items: baseline; gap: 10px; }
.cc-doc__rows > span > span:first-child::after { content: ""; flex: 1; border-bottom: 1px dotted var(--border-strong); transform: translateY(-3px); }
.cc-doc__rows > span > span:last-child { font-weight: 600; font-variant-numeric: tabular-nums; }
.cc-doc__foot { display: block; margin-top: 14px; font-size: 13px; color: var(--ink-muted); }
/* its five lines are written in once the page lands */
@keyframes cc-line { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
.cc-js [data-r="doc"] .cc-doc__rows > span { animation: cc-line 520ms var(--cc-ease) both paused; animation-delay: calc(380ms + var(--row, 0) * 90ms); }
.cc-js [data-r="doc"].is-in .cc-doc__rows > span { animation-play-state: running; }
.cc-doc__rows > span:nth-child(2) { --row: 1; } .cc-doc__rows > span:nth-child(3) { --row: 2; } .cc-doc__rows > span:nth-child(4) { --row: 3; } .cc-doc__rows > span:nth-child(5) { --row: 4; }
.cpi-cost .cc-check__lead { margin: clamp(18px, 2.2vw, 28px) 0 4px; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.3rem, 1.9vw, 1.6rem); line-height: 1.2; color: var(--ink); }
.cpi-cost .cc-check__sub { margin: 0; font-size: 17px; line-height: 1.55; color: var(--ink-soft); }
.cc-check__get { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 22px; }
.cpi-cost .cc-check__fine { flex: 1 1 260px; margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-muted); }

/* ============ QUESTIONS ============ */
.cpi-cost main > .vs-faq { padding-top: 0; }
.cc-faq__in { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(28px, 5vw, 84px); align-items: start; }
.vs-faq__list { border-top: 1.5px 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; }
.cpi-cost .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::before, .vs-faq__item > summary::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 16px; height: 1.5px; background: var(--ink); transition: transform 360ms var(--cc-ease), background-color 200ms;
}
.vs-faq__item > summary::after { transform: rotate(90deg); }
.vs-faq__item[open] > summary::after { transform: rotate(0); }
.vs-faq__item > summary:hover h3 { color: var(--accent-blue); }
.vs-faq__item > summary:hover::before, .vs-faq__item > summary:hover::after { background: var(--accent-blue); }
.cpi-cost .cc-faq__a p { margin: 0; padding: 0 clamp(0px, 4vw, 56px) 22px 0; font-size: 16.5px; line-height: 1.62; color: var(--ink-soft); }
@keyframes cc-unfold { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.vs-faq__item[open] .cc-faq__a { animation: cc-unfold 360ms var(--cc-ease) both; }
.cc-faq__call { position: sticky; top: calc(var(--hc-nav-h) + var(--cc-bar-h) + 28px); padding-top: 14px; }
.cpi-cost .cc-faq__note { margin: 14px 0 2px; font-size: 15px; line-height: 1.5; color: var(--ink-muted); }

/* ============ SOURCES, AND WHERE TO GO NEXT ============ */
.cpi-cost main > .cc-end { padding-top: 0; }
.cc-src { border-block: 1px solid var(--border); }
.cc-src > summary { position: relative; display: block; padding: 14px 40px 14px 0; cursor: pointer; list-style: none; }
.cc-src > summary::-webkit-details-marker { display: none; }
.cpi-cost .cc-src h2 { margin: 0; font-family: var(--font-body); font-weight: 600; font-size: 16px; letter-spacing: 0; line-height: 1.4; color: var(--ink); }
.cc-src > summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: rotate(45deg); transition: transform 320ms var(--cc-ease); }
.cc-src[open] > summary::after { transform: translateY(4px) rotate(-135deg); }
.cc-src ol { margin: 0; padding: 0 0 16px; list-style: none; }
.cc-src li { padding: 7px 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-muted); }
.cc-src li strong { font-weight: 600; color: var(--ink); }
.cc-src[open] ol { animation: cc-unfold 360ms var(--cc-ease) both; }

.cc-next { margin-top: clamp(44px, 6vw, 84px); }
.cc-next__list { margin: 0; padding: 0; list-style: none; border-top: 1.5px solid var(--ink); }
.cc-next__list li { border-bottom: 1px solid var(--border); }
.cpi-cost .cc-next a { display: flex; align-items: center; gap: 12px clamp(14px, 2vw, 24px); min-height: 68px; padding: 12px 0; color: var(--ink); transition: color 200ms, padding 360ms var(--cc-ease); }
.cc-next__t { flex: 1; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.25rem, 1.9vw, 1.6rem); line-height: 1.2; }
.cc-next__go { flex: none; font-size: 15.5px; font-weight: 600; color: var(--accent-blue-hover); }
.cpi-cost .cc-next a:hover { color: var(--accent-blue); padding-left: 8px; }
.cc-next a:active { transform: scale(.995); }

/* ============ NARROWER ============ */
@media (max-width: 1020px) {
  .cc-faq__in { grid-template-columns: minmax(0, 1fr); }
  .cc-faq__call { position: static; }
  /* one column: the receipt comes before the line that sums it up */
  .cc-covers__in { display: flex; flex-direction: column; gap: 0; }
  .cc-covers__say { display: contents; }
  .cc-receipt { order: 1; margin-top: clamp(22px, 3vw, 34px); }
  .cc-covers__close { order: 2; }
  .cc-ask { order: 3; }
  .cc-covers__btn { order: 4; }
  .cc-covers__say .cc-go { order: 5; align-self: flex-start; }
  .cc-celva__head { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}
@media (max-width: 860px) {
  .cc-hero__in, .cc-team, .cc-check__in { grid-template-columns: minmax(0, 1fr); }
  .cc-team__photo { order: 2; }
  /* narrow enough that the sheet, tilted as it waits, stays inside the screen */
  .cc-doc { width: min(300px, 100% - 24px); margin-inline: auto; }
  .cc-bill { grid-template-columns: minmax(0, 1fr); }
  .cc-bill li { padding-bottom: 16px; }
  .pt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* the day runs down the page: badge on the left, the line beneath it */
  .cc-day { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .cc-day li { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 16px; padding-bottom: 26px; }
  .cc-day li:last-child { padding-bottom: 0; }
  .cc-day__icon { margin-bottom: 0; }
  .cc-day p { align-self: center; }
  .cc-day li:not(:last-child)::before, .cc-day li:not(:last-child)::after { left: 27px; top: 62px; width: 2px; height: calc(100% - 68px); }
  .cc-day li:not(:last-child)::after { transform: scaleY(0); transform-origin: top; }
  .cc-day li.is-passed::after { transform: scaleY(1); }
  .cc-day li:nth-child(n) :is(.cc-day__icon, svg), .cc-day li:nth-child(n)::after { transition-delay: 0ms; }
  .cc-band__panels { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .cpi-cost .cc-lede, .cpi-cost .cc-cpi__text p { font-size: 17px; }
  .cc-hero__actions .btn { width: 100%; }
  .cc-slip { gap: 9px; }
  .cc-slip__mark { height: 28px; }
  .cc-slip__mark--cpi, .cc-slip__mark--celva { font-size: 21px; }
  .cc-receipt li { grid-template-columns: 48px minmax(0, 1fr); row-gap: 8px; }
  .cc-receipt__amt { grid-column: 2; text-align: left; }
  /* a two-line name must not start higher than its neighbour's one-line name */
  .pt-tile__cap { flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 2px; left: 10px; right: 10px; min-height: 4.1em; padding-bottom: 1.5em; font-size: 14px; }
  .pt-tile__len { position: absolute; left: 0; bottom: 0; }
  .cc-cta .btn, .cc-check__get .btn, .cc-faq__call .btn, .cc-covers__btn { width: 100%; }
  .cpi-cost .cc-next a { flex-wrap: wrap; }
  .cc-next__t { flex: 1 1 60%; }
  .cc-next__go { flex-basis: 100%; }
}

/* ============ REDUCED MOTION: every end state, nothing in between ============ */
@media (prefers-reduced-motion: reduce) {
  .cpi-cost main *, .cpi-cost main *::before, .cpi-cost main *::after { animation: none !important; transition: none !important; }
  .cc-day li:not(:last-child)::after { transform: none; }
  .cc-day__icon { background: var(--accent-blue); box-shadow: none; }
  .cc-day__icon svg { stroke: #fff; }
}

/* ============ PRINT: the finished page, dark on white ============ */
@media print {
  .cpi-cost main *, .cpi-cost main *::before, .cpi-cost main *::after { animation: none !important; transition: none !important; }
  .cpi-cost .hc-bar, .cc-toc, .pt-modal, .pt-tile__play, .cc-hero__actions, .cc-copy, .cc-src > summary::after, .vs-faq__item > summary::before, .vs-faq__item > summary::after { display: none !important; }
  .cc-js [data-r], .cc-js [data-r] * { opacity: 1 !important; transform: none !important; }
  .cpi-cost main > section { padding-block: 22px; break-inside: avoid-page; }
  .cpi-cost main > .cc-celva, .cpi-cost main > .cc-patients { background: none; color: var(--ink); }
  .cpi-cost .cc-patients h2, .cpi-cost .cc-patients .cc-lede { color: var(--ink); }
  .cc-band__panels, .cc-js .cc-band__panels { grid-template-columns: minmax(0, 1fr); }
  .cc-covers__say, .cc-faq__call { position: static; }
  .cc-day li:not(:last-child)::after { transform: none; }
}