/* /stem-cell-therapy-cost: the page's own sheet. It loads after
   styles/celva-home.css, which the home page and the other landing pages
   share and which this file never edits. Everything here is scoped to
   body.lp-cost or to lc- classes only this page carries.
   What it does: takes the mono-caps labels, pills, numerals and the cream
   tint off; sets the headline across the hero and paints the first screen
   without waiting on a script; itemizes the five cost factors on a rail that
   fills as they are read; draws the two cell pathways, the quote as a sheet
   of paper and the forum lines as speech; slides the patient films on a
   phone; adds the bar that follows the reader; and prints the finished page.
   No drawing on this page shows an amount. */

/* On the root, not :root: this sheet loads on this page alone, and a
   browser without :has() would drop the whole rule, the bar's height and the
   scroll padding with it. */
:root {
  --hc-nav-h: 76px;            /* fallback; the page script sets the real header height */
  --lc-bar-h: 52px;
  --lc-ease: cubic-bezier(.16, 1, .3, 1);
  /* every jump, anchor and Tab stop lands below the header and the bar */
  scroll-padding-top: calc(var(--hc-nav-h) + var(--lc-bar-h) + 20px);
}
.lp-cost main { overflow-x: clip; }
.lp-cost main section[id] { scroll-margin-top: 0; }
.lp-cost main a:not(.btn):not(.door) { border-bottom: 0; }
.lp-cost main :is(a, button, summary):focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 3px; border-radius: 4px; }
.lp-cost :is(.hero, .ctaband, .lc-col--celva, .doc__card) :is(a, button, summary):focus-visible { outline-color: #fff; }
.lp-cost main [tabindex="-1"]:focus { outline: 0; }

/* A heading breaks where its styling changes, never mid-phrase and never on
   a hard break. */
.lp-cost main :is(h1, h2) > :is(.h-lead, .h-tail, em) { display: inline-block; }
.lp-cost .sec { padding: clamp(52px, 8vw, 116px) 0; }
.lp-cost .sec-h2 { font-size: clamp(2.1rem, 4.4vw, 3.5rem); line-height: 1.06; margin: 0; }
.lp-cost .lede { margin-top: 16px; font-size: 1.125rem; line-height: 1.62; }
.lp-cost .cta { margin-top: clamp(28px, 3.4vw, 40px); }
.lp-cost main .btn:active { transform: translateY(1px) scale(.985); transition-duration: .08s; }
.lp-cost main :is(a, button, summary) { -webkit-tap-highlight-color: rgba(45, 110, 177, .12); }
/* arriving by a jump: a rule draws under the heading just reached, then goes */
.lp-cost main h2.is-landed { position: relative; }
.lp-cost main h2.is-landed::after { content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 2px; background: var(--accent-blue); transform-origin: left; animation: lcLanded 1.5s var(--lc-ease) both; pointer-events: none; }
@keyframes lcLanded { 0% { transform: scaleX(0); opacity: 1; } 50% { transform: none; opacity: 1; } 100% { transform: none; opacity: 0; } }

/* the drawings share one pen */
.lc-ln { stroke: var(--navy-brand); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.lc-fl { fill: rgba(124, 169, 209, .3); }
.lc-halo { fill: rgba(124, 169, 209, .42); }
.lc-dt { fill: var(--navy-brand); }
.lc-badge { fill: #fff; stroke: var(--navy-brand); stroke-width: 1.5; }
.lc-tick { stroke: var(--accent-blue); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lc-six path { stroke: var(--accent-blue); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ============ HERO ============
   Painted by this sheet alone: the shared sheet hides [data-r] parts and
   clips the picture until a script says otherwise, so this hero carries no
   [data-r] and un-clips the picture. What moves on arrival (the picture
   settling, a rule drawing over the promises) never hides a word. */
.lp-cost .hero { padding-top: clamp(96px, 9vw, 124px); }
.lp-cost .hero__grid { grid-template-columns: minmax(0, 1.28fr) minmax(0, .72fr); grid-template-areas: "h h" "t v"; align-items: start; row-gap: clamp(22px, 3vw, 40px); margin-block: auto; padding-bottom: clamp(28px, 4vw, 48px); }
/* Until the site's display face arrives the headline is set in the reader's
   own Times, which runs a quarter wider: it took an extra line and gave it
   back a moment later, moving the paragraph and the button under a thumb.
   This is that same Times, sized to the width the display face will have
   (measured: 909px against 1138px for the first line at 1440), so the
   headline holds its lines through the swap. It is not a new font and
   nothing is downloaded. */
@font-face { font-family: "lc-headline-hold"; src: local("Times New Roman"), local("TimesNewRomanPSMT"), local("Times"); size-adjust: 80%; }
.lp-cost .hero__h1 { grid-area: h; font-family: 'Cormorant Garamond', "lc-headline-hold", 'Times New Roman', Georgia, serif; font-size: clamp(2.3rem, 4.2vw, 3.65rem); line-height: 1.06; letter-spacing: -.02em; }
.lp-cost .hero__text { grid-area: t; }
.lp-cost .hero__visual { grid-area: v; }
.lp-cost .hero__sub { margin: 0; max-width: none; font-size: 1.125rem; line-height: 1.68; color: rgba(255, 255, 255, .86); }
.lp-cost .hero__ctas { margin-top: clamp(24px, 2.6vw, 34px); }
.lp-cost .hero__note { margin: 16px 0 0; max-width: none; font-family: var(--font-body); font-size: .875rem; letter-spacing: 0; text-transform: none; line-height: 1.6; color: rgba(255, 255, 255, .82); }
.js-anim .lp-cost .hero__img { clip-path: none; }
/* site.js writes a scroll offset onto this clip as an inline transform, which
   slid the picture inside its own frame; it keeps to its frame instead. */
.lp-cost .hero__img video { transform: none !important; }
.lp-cost .hero__img { animation: lcSettle 1.5s var(--lc-ease) both; }
@keyframes lcSettle { from { transform: translateY(18px) scale(.975); box-shadow: 0 10px 30px rgba(0, 0, 0, .2); } to { transform: none; } }
.lp-cost .ticker { position: relative; border-top-color: transparent; }
.lp-cost .ticker::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: rgba(255, 255, 255, .2); transform-origin: left; animation: lcRule 1.6s var(--lc-ease) .2s both; }
@keyframes lcRule { from { transform: scaleX(0); } to { transform: none; } }
.lp-cost .ticker__row { font-family: var(--font-body); font-size: .875rem; letter-spacing: .01em; text-transform: none; color: rgba(255, 255, 255, .78); }
/* The drifting pattern is sized from the screen, not from the hero: the hero
   is taller than a phone's screen and grows a little when the fonts arrive,
   and a pattern stretched over it moved with it, which was this page's whole
   layout-shift score. */
.lp-cost .hero__lattice { inset: auto -5%; top: -10svh; height: 120svh; }
/* loops rest while the hero is off screen (the page script toggles is-live);
   with scripts off they simply run */
.lc-js .lp-cost .hero:not(.is-live) :is(.hero__lattice, .ticker__row) { animation-play-state: paused; }

/* ============ THE BAR THAT FOLLOWS THE READER ============ */
.lp-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(--lc-bar-h);
  background: rgba(255, 255, 255, .95);
  -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(--lc-ease), visibility 0s 360ms;
}
.lp-cost .hc-bar.is-on { transform: none; opacity: 1; visibility: visible; transition: opacity 260ms, transform 360ms var(--lc-ease); }
body.lp-cost.nav-open .hc-bar { opacity: 0; visibility: hidden; }
.lp-cost .hc-bar__track {
  max-width: var(--wrap); margin: 0 auto; padding: 0 32px;
  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;
}
.lp-cost .hc-bar__track::-webkit-scrollbar { display: none; }
.lp-cost .hc-bar__track a {
  position: relative; flex: none; display: flex; align-items: center;
  font-size: .875rem; font-weight: 500; color: var(--ink-muted); white-space: nowrap; text-decoration: none; transition: color 200ms;
}
.lp-cost .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(--lc-ease);
}
.lp-cost .hc-bar__track a:hover, .lp-cost .hc-bar__track a[aria-current] { color: var(--ink); }
.lp-cost .hc-bar__track a:active { color: var(--accent-blue-hover); }
.lp-cost .hc-bar__track a[aria-current]::after { transform: scaleX(1); }
.lp-cost .hc-bar__track a:focus-visible { outline-offset: -4px; }
.lp-cost .hc-bar__progress { position: absolute; left: 0; top: 0; height: 2px; width: 100%; background: var(--ice); transform-origin: left; transform: scaleX(var(--hc-p, 0)); }

/* ============ reveals: hidden only once the page script says it can show them ============ */
.lc-js [data-rv] { transition: opacity .8s var(--lc-ease), transform .9s var(--lc-ease); }
.lc-js [data-rv]:not(.is-in) { opacity: 0; }
.lc-js [data-rv="rise"]:not(.is-in) { transform: translateY(22px); }
.lc-js [data-rv="left"]:not(.is-in) { transform: translateX(-32px); }
.lc-js [data-rv="right"]:not(.is-in) { transform: translateX(32px); }
.lc-js [data-rv="sheet"]:not(.is-in) { transform: translateY(26px) rotate(-1.2deg); }
.lc-js [data-rv="out"]:not(.is-in) { transform: translateX(22px); }
.lc-js [data-rv="tile"]:not(.is-in) { transform: scale(.94); }
.lc-js [data-rv="say"]:not(.is-in) { opacity: 1; }
.lc-js .lp-cost [data-rv="doc"]:not(.is-in) { transform: translateY(20px) rotate(-5deg); }
/* a door waits on this page's own class: the shared script marks every .door
   is-in from its own observer, which would cut the step between the three */
.lc-js [data-rv="door"]:not(.lc-in) { opacity: 0; transform: translateY(26px); }
.lc-js [data-rv="bill"]:not(.is-in) { opacity: 1; }
/* a film tile or a door keeps its own hover motion once it has arrived */
.lc-js .door[data-rv] { transition: opacity .8s var(--lc-ease), transform .6s var(--lc-ease), box-shadow .5s var(--lc-ease), border-color .5s; }

/* ============ WHAT DECIDES YOUR PRICE: five lines on a rail ============ */
.lc-bill { list-style: none; margin: clamp(30px, 4vw, 52px) 0 0; padding: 0; border-top: 1px solid var(--border); }
.lc-item { position: relative; display: grid; grid-template-columns: 76px minmax(0, .82fr) minmax(0, 1.5fr); column-gap: clamp(20px, 3.2vw, 48px); align-items: start; padding: 28px 0; border-bottom: 1px solid var(--border); }
.lc-item__icon { position: relative; z-index: 1; display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: #fff; border: 1px solid var(--border-strong); transition: border-color .5s var(--lc-ease), box-shadow .5s var(--lc-ease); }
.lc-item__icon svg { width: 52px; height: 52px; overflow: visible; }
.lc-item.is-read .lc-item__icon { border-color: var(--accent-blue); box-shadow: 0 0 0 5px rgba(124, 169, 209, .22); }
/* one connector per gap, badge to badge, and nothing after the last */
.lc-item:not(:last-child)::before, .lc-item:not(:last-child)::after { content: ""; position: absolute; left: 37.5px; top: 104px; bottom: -29px; width: 1px; }
.lc-item:not(:last-child)::before { background: var(--border-strong); }
.lc-item:not(:last-child)::after { background: var(--accent-blue); transform: scaleY(0); transform-origin: top; transition: transform .7s var(--lc-ease); }
.lc-item.is-read:not(:last-child)::after { transform: none; }
.lc-item__code { display: block; font-size: .9375rem; line-height: 1.4; color: var(--accent-blue-hover); }
.lc-item h3 { margin: 6px 0 0; font-size: clamp(1.4rem, 2vw, 1.75rem); line-height: 1.16; font-weight: 400; text-wrap: balance; }
.lc-item p { margin: 0; font-size: 1rem; line-height: 1.66; color: var(--ink-muted); }
.lc-item__name { padding-top: 2px; }
.lc-item__say { padding-top: 6px; }
.lc-drip { animation: lcDrip 2.4s ease-in infinite; }
@keyframes lcDrip { 0% { transform: translateY(-3px); opacity: 0; } 20% { opacity: 1; } 80% { transform: translateY(4px); opacity: 1; } 100% { transform: translateY(5px); opacity: 0; } }
.lc-js .lc-bill:not(.is-live) .lc-drip { animation-play-state: paused; }
/* arriving: each line's drawing steps forward in turn */
.lc-js .lc-bill:not(.is-in) .lc-item__icon { opacity: 0; transform: scale(.82); }
.lc-js .lc-bill .lc-item__icon { transition: opacity .6s var(--lc-ease), transform .8s var(--lc-ease), border-color .5s var(--lc-ease), box-shadow .5s var(--lc-ease); }
.lc-js .lc-bill.is-in .lc-item:nth-child(2) .lc-item__icon { transition-delay: 90ms, 90ms, 0s, 0s; }
.lc-js .lc-bill.is-in .lc-item:nth-child(3) .lc-item__icon { transition-delay: 180ms, 180ms, 0s, 0s; }
.lc-js .lc-bill.is-in .lc-item:nth-child(n+4) .lc-item__icon { transition-delay: 260ms, 260ms, 0s, 0s; }
.lc-factors__closing { margin: clamp(26px, 3vw, 38px) 0 0; font-size: 1.0625rem; line-height: 1.7; color: var(--ink-muted); }

/* ============ CELLS YOU CANNOT GET IN THE UNITED STATES ============ */
.lp-cost .lc-cells { background: var(--accent-wash); }
.lc-pair { display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); gap: 24px; margin-top: clamp(32px, 4.4vw, 56px); align-items: start; }
.lc-col { position: relative; background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: clamp(24px, 2.8vw, 36px); }
.lc-col--celva { background: var(--navy-mid); color: #fff; border-color: transparent; box-shadow: var(--shadow-md); overflow: hidden; }
.lc-col--celva::before { content: ""; position: absolute; inset: 0; background: url('../assets/bg-pattern-1.svg') right -120px top -80px / 620px no-repeat; opacity: .16; pointer-events: none; }
.lc-col > * { position: relative; }
.lc-col__tag { display: block; font-size: .9375rem; line-height: 1.4; color: var(--ink-muted); }
.lc-col--celva .lc-col__tag { color: var(--ice); }
.lp-cost :is(.lc-col, .lc-sheet, .lc-out) h3 { margin: 4px 0 0; font-size: clamp(1.55rem, 2.2vw, 2rem); line-height: 1.14; font-weight: 400; text-wrap: balance; }
.lc-col ul, .lc-out ul, .lc-sheet ul { list-style: none; margin: 20px 0 0; padding: 0; }
.lc-col li { position: relative; padding-left: 26px; font-size: 1rem; line-height: 1.6; color: var(--ink-muted); }
.lc-col li + li { margin-top: 13px; }
.lc-col li::before { content: ""; position: absolute; left: 0; top: .78em; width: 12px; height: 1px; background: var(--border-strong); }
.lc-col--celva li { color: rgba(255, 255, 255, .86); }
.lc-col--celva li::before { background: var(--ice); }
/* the two pathways, drawn: a few cells in a syringe going straight to a joint;
   cells multiplying in a flask, six ticks, then a vial that has been checked */
.lc-flow { display: flex; align-items: center; height: 64px; margin-bottom: 22px; }
.lc-flow svg { flex: none; height: 64px; width: auto; overflow: visible; }
.lc-flow__gap { flex: 0 1 56px; min-width: 20px; height: 2px; margin: 0 10px; background: repeating-linear-gradient(90deg, var(--ink-muted) 0 5px, transparent 5px 11px); opacity: .6; transform-origin: left; }
.lc-flow--celva .lc-flow__gap { background: var(--ice); opacity: 1; }
.lc-col--celva .lc-ln { stroke: rgba(255, 255, 255, .88); }
.lc-col--celva .lc-dt { fill: var(--ice); }
.lc-col--celva .lc-fl { fill: rgba(124, 169, 209, .26); }
.lc-col--celva .lc-badge { fill: var(--navy-mid); stroke: var(--ice); }
.lc-col--celva .lc-tick { stroke: #fff; }
.lc-col--celva .lc-six path { stroke: var(--ice); }
/* arriving: on the right the flask fills, cell by cell, the line runs on,
   the six tests are ticked, and the vial gets its check */
.lc-js .lc-col .lc-flow__gap { transition: transform .5s var(--lc-ease) .3s; }
.lc-js .lc-col:not(.is-in) .lc-flow__gap { transform: scaleX(0); }
.lc-js .lc-flow--celva .lc-flow__gap:nth-of-type(1) { transition-delay: 1.25s; }
.lc-js .lc-flow--celva .lc-flow__gap:nth-of-type(2) { transition-delay: 2.2s; }
.lc-grow circle { transform-box: fill-box; transform-origin: center; }
.lc-js .lc-col.is-in .lc-grow circle { animation: lcPop .5s var(--lc-ease) both; animation-delay: calc(.35s + var(--n, 0) * 75ms); }
.lc-js .lc-col:not(.is-in) .lc-grow circle { opacity: 0; }
@keyframes lcPop { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: none; } }
.lc-flow--celva .lc-six path, .lc-flow--celva .lc-tick { stroke-dasharray: 80; }
.lc-js .lc-col:not(.is-in) :is(.lc-six path, .lc-tick) { stroke-dashoffset: 80; }
.lc-js .lc-col.is-in .lc-six path { animation: lcDraw 1s linear 1.5s both; }
.lc-js .lc-col.is-in .lc-tick { animation: lcDraw .9s var(--lc-ease) 2.5s both; }
.lc-js .lc-col .lc-badge { transition: opacity .4s var(--lc-ease) 2.4s; }
.lc-js .lc-col:not(.is-in) .lc-badge { opacity: 0; }
/* one pen for every stroke that draws itself: each says how long it is */
@keyframes lcDraw { from { stroke-dashoffset: var(--len, 80); } to { stroke-dashoffset: 0; } }
.lc-closing { margin: clamp(32px, 4vw, 48px) auto 0; text-align: center; font-family: var(--font-display); font-size: clamp(1.3rem, 2.1vw, 1.7rem); line-height: 1.38; font-weight: 300; color: var(--ink); text-wrap: balance; }

/* ============ WHAT A REAL QUOTE INCLUDES: the sheet, and what is not on it ============ */
.lc-ledger { display: grid; grid-template-columns: minmax(0, 1.14fr) minmax(0, .86fr); gap: clamp(28px, 5vw, 76px); align-items: start; margin-top: clamp(32px, 4.4vw, 56px); }
.lc-sheet { position: relative; background: #fff; border: 1px solid var(--border); border-top: 3px solid var(--accent-blue); border-radius: 4px; padding: clamp(24px, 3vw, 40px); box-shadow: 0 1px 0 rgba(11, 29, 58, .05), 0 26px 50px -30px rgba(11, 29, 58, .38); }
.lc-sheet__pen { position: absolute; right: clamp(18px, 2.6vw, 34px); top: clamp(18px, 2.4vw, 30px); width: 64px; height: 64px; }
.lc-sheet__pen .lc-sig { --len: 60; stroke: var(--accent-blue); stroke-dasharray: 60; }
.lc-js .lc-sheet:not(.is-in) .lc-sig { stroke-dashoffset: 60; }
.lc-js .lc-sheet.is-in .lc-sig { animation: lcDraw 1.1s var(--lc-ease) 1.15s both; }
.lc-sheet .lc-col__tag { color: var(--accent-blue-hover); }
.lc-sheet h3, .lc-sheet .lc-col__tag { padding-right: 84px; }
.lc-sheet li { position: relative; padding: 13px 0 13px 36px; border-top: 1px solid var(--border); font-size: 1rem; line-height: 1.55; color: var(--ink); }
.lc-sheet li:first-child { border-top-color: var(--border-strong); }
/* a tick per line, drawn in turn as the sheet arrives */
.lc-sheet li::before { content: ""; position: absolute; left: 5px; top: 1.02em; width: 7px; height: 13px; border: solid var(--accent-blue); border-width: 0 2px 2px 0; transform: rotate(42deg); transform-origin: 100% 100%; }
.lc-js .lc-sheet:not(.is-in) li::before { opacity: 0; transform: rotate(42deg) scale(.2); }
.lc-js .lc-sheet.is-in li::before { animation: lcTick .45s var(--lc-ease) both; animation-delay: calc(.25s + var(--n, 0) * 85ms); }
@keyframes lcTick { from { opacity: 0; transform: rotate(42deg) scale(.2); } to { opacity: 1; transform: rotate(42deg); } }
.lc-out { padding-top: clamp(0px, 3vw, 43px); }
.lc-out li { position: relative; padding: 11px 0 11px 34px; font-size: 1rem; line-height: 1.55; color: var(--ink-muted); }
/* crossed off: two strokes, the second landing after the first */
.lc-out li::before, .lc-out li::after { content: ""; position: absolute; left: 2px; top: 1.42em; width: 15px; height: 1.5px; background: var(--ink-muted); transform: rotate(45deg); }
.lc-out li::after { transform: rotate(-45deg); }
.lc-js .lc-out li::before, .lc-js .lc-out li::after { transition: clip-path .32s var(--lc-ease); transition-delay: calc(.3s + var(--n, 0) * 70ms); clip-path: inset(0); }
.lc-js .lc-out li::after { transition-delay: calc(.44s + var(--n, 0) * 70ms); }
.lc-js .lc-out:not(.is-in) li::before, .lc-js .lc-out:not(.is-in) li::after { clip-path: inset(0 100% 0 0); }

/* ============ IN THEIR WORDS ============ */
.lp-cost .band { background: #fff; padding: clamp(52px, 8vw, 116px) 0; border-top: 1px solid var(--border); }
.lp-cost .pt-grid { margin-top: clamp(30px, 4vw, 48px); }
.lp-cost .pt-fig__cap { font-family: var(--font-body); font-size: .875rem; letter-spacing: 0; text-transform: none; line-height: 1.4; color: var(--ink-muted); }
.lp-cost .pt-tile:active { transform: scale(.985); }
.lp-cost .pt-modal__close:hover { color: var(--ice); }
/* the player fits a short, wide window too (a phone on its side) */
@media (max-height: 420px) { .lp-cost .pt-modal__box { width: min(920px, 92vw, calc((100dvh - 64px) * 16 / 9)); } .lp-cost .pt-modal__close { top: -6px; right: -48px; } }

/* the quiz mount: a clean white band of its own */
.lp-cost #fit.qz { background: #fff; border-top: 1px solid var(--border); }

/* ============ THE COST QUESTIONS ============ */
.lp-cost .lc-faq { border-top: 1px solid var(--border); }
.lp-cost .faq { grid-template-columns: minmax(0, .6fr) minmax(0, 1.4fr); margin-top: clamp(22px, 3vw, 36px); }
.lp-cost .faq__head { top: calc(var(--hc-nav-h) + var(--lc-bar-h) + 28px); }
.lp-cost .faq__head .lede { margin-top: 0; }
.lp-cost .faq__list summary { min-height: 44px; align-items: center; padding: 20px 0; }
.lp-cost .faq__list summary:active { color: var(--accent-blue-hover); }
.lp-cost .faq__a { padding: 0 0 24px; max-width: none; font-size: 1rem; line-height: 1.72; }
.lp-cost .faq__ic { width: 28px; height: 28px; display: grid; place-items: center; }

/* ============ FIVE SIGNS: the sign, and somebody else's words ============ */
.lc-said { margin-top: clamp(28px, 4vw, 48px); border-top: 1px solid var(--border); }
.lc-sign { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); column-gap: clamp(28px, 5vw, 72px); align-items: center; padding: clamp(22px, 2.6vw, 32px) 0; border-bottom: 1px solid var(--border); }
.lc-sign h3 { margin: 0; font-size: clamp(1.4rem, 2vw, 1.75rem); line-height: 1.16; font-weight: 400; text-wrap: balance; }
.lc-sign__what p { margin: 8px 0 0; font-size: 1rem; line-height: 1.66; color: var(--ink-muted); }
.lp-cost .post { position: relative; display: block; margin: 0; padding: 20px 24px 18px 84px; background: #fff; border: 1px solid var(--border-strong); border-radius: 16px 16px 16px 3px; transform-origin: 0 100%; }
.post__mark { position: absolute; left: 20px; top: 14px; width: 48px; height: 48px; fill: var(--ice); }
.lp-cost .post__text { margin: 0; font-family: var(--font-display); font-size: clamp(1.2rem, 1.7vw, 1.45rem); line-height: 1.32; font-style: normal; color: var(--ink); }
/* the drawn mark says these are somebody else's words; the shared sheet's own marks would say it twice */
.lp-cost .post__text::before, .lp-cost .post__text::after { content: none; }
.lp-cost .post__foot { display: block; margin-top: 8px; font-family: var(--font-body); font-size: .875rem; letter-spacing: 0; text-transform: none; color: var(--ink-muted); }
/* arriving: the line is said (the bubble opens from its tail), after the sign is read */
.lc-js .lc-sign .post { transition: opacity .5s var(--lc-ease) .18s, transform .7s var(--lc-ease) .18s; }
.lc-js .lc-sign:not(.is-in) .post { opacity: 0; transform: scale(.9) translateY(10px); }
.lc-js .lc-sign .lc-sign__what { transition: opacity .6s var(--lc-ease), transform .7s var(--lc-ease); }
.lc-js .lc-sign:not(.is-in) .lc-sign__what { opacity: 0; transform: translateX(-16px); }

/* ============ THE CHECKLIST ============ */
.lp-cost .lc-check { border-top: 1px solid var(--border); }
.lp-cost .doc { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(32px, 5.4vw, 80px); align-items: center; margin-top: clamp(30px, 4vw, 52px); }
.lp-cost .doc__card { position: relative; background: var(--navy-mid); color: #fff; border-radius: 6px 14px 14px 6px; padding: clamp(26px, 3vw, 38px); overflow: hidden; box-shadow: var(--shadow-md), inset 6px 0 0 rgba(255, 255, 255, .08); transform: rotate(-1.5deg); }
.lp-cost .doc__card::before { content: ""; position: absolute; inset: 0; background: url('../assets/bg-pattern-1.svg') right -120px top -80px / 620px no-repeat; opacity: .16; }
.lp-cost .doc__card > * { position: relative; z-index: 1; }
/* pointing at the button that opens it squares the cover up, the way a hand would */
.lp-cost .doc__card { transition: opacity .8s var(--lc-ease), transform .7s var(--lc-ease), box-shadow .6s var(--lc-ease); }
.lp-cost .doc:has(.btn:hover, .btn:focus-visible) .doc__card.is-in, html:not(.lc-js) .lp-cost .doc:has(.btn:hover, .btn:focus-visible) .doc__card { transform: rotate(0deg) translateY(-3px); box-shadow: var(--shadow-lift); }
.doc__emblem { position: absolute !important; right: clamp(18px, 2.4vw, 30px); top: clamp(18px, 2.4vw, 28px); width: 60px; height: 60px; }
.doc__emblem .lc-ln { stroke: rgba(255, 255, 255, .8); }
.doc__emblem .lc-six path { --len: 40; stroke: var(--ice); stroke-dasharray: 40; }
.lc-js .doc__card:not(.is-in) .lc-six path { stroke-dashoffset: 40; }
.lc-js .doc__card.is-in .lc-six path { animation: lcDraw 1s linear .5s both; }
.doc__edition { display: block; padding-right: 76px; font-size: .9375rem; line-height: 1.4; color: var(--ice); }
.lp-cost .doc__card h3 { margin: 10px 0 20px; padding-right: 76px; font-size: clamp(1.7rem, 2.5vw, 2.3rem); line-height: 1.1; font-weight: 300; }
.lp-cost .doc__card h3 em { color: var(--ice); }
.lp-cost .doc__toc { list-style: none; margin: 0; padding: 0; font-family: var(--font-body); font-size: .9375rem; letter-spacing: 0; text-transform: none; color: rgba(255, 255, 255, .86); }
.lp-cost .doc__toc li { display: flex; gap: 14px; padding: 11px 0; border-top: 1px solid rgba(255, 255, 255, .16); }
.lp-cost .doc__toc li span:last-child { margin-left: auto; color: var(--ice); font-variant-numeric: tabular-nums; }
.lp-cost .doc__text h3 { margin: 0 0 10px; font-size: clamp(1.55rem, 2.2vw, 2rem); line-height: 1.14; font-weight: 400; }
.lp-cost .doc__text p { margin: 0 0 24px; max-width: none; font-size: 1.0625rem; line-height: 1.7; color: var(--ink-muted); }
.lp-cost .doc__fine { margin: 16px 0 0; font-size: .9375rem; color: var(--ink-muted); }
.lp-cost .doc__fine a { display: inline-block; padding: 11px 0; margin: -11px 0; color: var(--accent-blue-hover); text-decoration: underline; text-decoration-color: var(--accent-blue); text-underline-offset: 3px; }
.lp-cost .doc__fine a:hover { color: var(--accent-blue); text-decoration-color: currentColor; }

/* ============ WHAT BROUGHT YOU HERE ============ */
.lp-cost .lc-doors { border-top: 1px solid var(--border); }
.lp-cost .doors { margin-top: clamp(30px, 4vw, 52px); }
.lp-cost .door__meta { font-family: var(--font-body); font-size: .875rem; letter-spacing: 0; text-transform: none; }
.lp-cost .door:active .door__go { background: var(--accent-hover); transform: translateY(1px); }
.lp-cost .door__quote { text-wrap: balance; }

/* ============ THE CLOSE ============ */
.lp-cost .ctaband { padding: clamp(80px, 10vw, 132px) 0; }
.lp-cost .ctaband__disclaimer { font-family: var(--font-body); font-size: .875rem; letter-spacing: 0; text-transform: none; line-height: 1.6; color: rgba(255, 255, 255, .72); }

/* ============ widths ============ */
@media (min-width: 1081px) {
  /* three doors, one set of rows: a title that runs to two lines no longer
     pushes its own card's text below its neighbours' */
  .lp-cost .doors { grid-template-rows: auto auto 1fr auto auto; row-gap: 0; }
  .lp-cost .door { display: grid; grid-template-rows: subgrid; grid-row: span 5; }
  .lp-cost .door__go { justify-self: start; }
  @supports not (grid-template-rows: subgrid) { .lp-cost .door { display: flex; } }
}
@media (min-width: 900px) {
  .lp-cost .pt-grid { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 1080px) {
  .lp-cost .hero__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "h" "t" "v"; }
  .lp-cost .hero__visual { margin-top: 12px; }
  /* stacked, the words run the full width, over the side of the film the shared
     scrim leaves lighter: the scrim is evened out so every line reads */
  .lp-cost .hero__scrim { background: linear-gradient(180deg, rgba(6, 18, 38, .93) 0%, rgba(7, 21, 43, .88) 62%, rgba(9, 26, 52, .74) 100%); }
  .lc-pair, .lc-ledger, .lp-cost .faq, .lp-cost .doc { grid-template-columns: minmax(0, 1fr); }
  .lc-out { padding-top: 0; }
  .lp-cost .doc__card { max-width: 520px; }
  .lp-cost .faq__head { position: static; }
  .lp-cost .faq__head .cta { margin-top: 20px; }
  .lp-cost .faq__list { margin-top: 8px; }
}
@media (min-width: 860px) and (max-width: 1080px) {
  /* the two pathways stay side by side for as long as both fit */
  .lc-pair { grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); }
  .lc-ledger { grid-template-columns: minmax(0, 1.14fr) minmax(0, .86fr); gap: 36px; }
  .lc-out { padding-top: 28px; }
}
@media (min-width: 621px) and (max-width: 1080px) {
  /* a door: film on the left, its words beside it */
  .lp-cost .door { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); column-gap: 28px; grid-template-rows: auto 1fr auto auto; padding: 26px 28px 26px 0; }
  .lp-cost .door__ph { grid-column: 1; grid-row: 1 / -1; margin: -26px 0; height: auto; min-height: 240px; }
  .lp-cost .door > :not(.door__ph) { grid-column: 2; }
  .lp-cost .door__go { justify-self: start; }
}
@media (max-width: 899px) {
  /* five people in one row that slides, so nobody is left alone on a line */
  .lp-cost .pt-grid { display: flex; gap: 12px; width: auto; align-self: stretch; margin-inline: -32px; padding: 8px 32px 6px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 32px; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 44px), transparent); }
  .lp-cost .pt-grid::-webkit-scrollbar { display: none; }
  .lp-cost .pt-grid.is-start { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); }
  .lp-cost .pt-grid.is-end { -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px); mask-image: linear-gradient(90deg, transparent, #000 28px); }
  .lp-cost .pt-fig { flex: 0 0 clamp(190px, 56vw, 250px); scroll-snap-align: start; }
  .lp-cost .pt-tile:hover { transform: none; }
  /* in the row a tile is simply there: one that faded in as it slid under a
     thumb would read as late */
  .lc-js .lp-cost .pt-fig[data-rv] { opacity: 1; transform: none; }
  .lc-item { grid-template-columns: 56px minmax(0, 1fr); column-gap: 18px; padding: 22px 0; }
  .lc-item__icon { width: 56px; height: 56px; }
  .lc-item__icon svg { width: 36px; height: 36px; }
  .lc-item:not(:last-child)::before, .lc-item:not(:last-child)::after { left: 27.5px; top: 78px; bottom: -23px; }
  .lc-item__say { grid-column: 2; margin-top: 8px; }
  .lc-sign { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
}
@media (max-width: 760px) {
  /* where the bar's track can run off the edge, it fades */
  .lp-cost .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%); }
}
@media (max-width: 620px) {
  .lp-cost .hero { padding-top: 92px; }
  .lp-cost .hero__sub { font-size: 1.0625rem; line-height: 1.62; }
  .lp-cost .hc-bar__track { padding-inline: 20px; }
  .lp-cost .pt-grid { margin-inline: -20px; padding-inline: 20px; scroll-padding-inline: 20px; }
  .lp-cost .door__ph { height: 168px; }
  .lp-cost .post { padding: 16px 18px 16px 68px; }
  .post__mark { left: 12px; top: 10px; }
  .lc-flow { height: 52px; }
  .lc-flow svg { height: 52px; }
  .lc-sheet__pen { width: 52px; height: 52px; }
  .lc-sheet h3, .lc-sheet .lc-col__tag { padding-right: 62px; }
}

/* Under reduced motion the page script never adds lc-js, so nothing above
   is hidden or staged; the shared sheet already cuts every animation short.
   What is left to say: the drip does not loop, and the bar does not slide. */
@media (prefers-reduced-motion: reduce) {
  .lc-drip { animation: none; }
  .lp-cost .hero__img, .lp-cost .ticker::before { animation: none; }
  .lp-cost .hc-bar, .lp-cost .hc-bar.is-on { transition: none; transform: none; }
}

/* ============ print: the finished page, dark on white ============ */
@media print {
  .lp-cost main *, .lp-cost main *::before, .lp-cost main *::after { animation: none !important; transition: none !important; }
  .lc-js :is([data-rv], .lc-item__icon, .post, .lc-sign__what, .lc-grow circle, .lc-badge, .lc-flow__gap) { opacity: 1 !important; transform: none !important; }
  .lc-js .lc-sheet li::before { opacity: 1 !important; transform: rotate(42deg) !important; }
  .lc-js .lc-out li::before, .lc-js .lc-out li::after { clip-path: none !important; }
  .lc-js :is(.lc-six path, .lc-tick, .lc-sig) { stroke-dashoffset: 0 !important; }
  .lc-item:not(:last-child)::after { transform: none !important; }
  .lp-cost .hc-bar, .lp-cost .pt-modal, .lp-cost :is(.hero__vid, .hero__scrim, .hero__lattice, .hero__grain, .ctaband__pattern, .pt-tile__play, .faq__ic) { display: none !important; }
  .lp-cost > .nav { position: static; }
  .lp-cost :is(.hero, .ctaband) { background: #fff !important; color: var(--ink) !important; min-height: 0; padding: 24px 0; }
  .lp-cost :is(.hero, .ctaband) :is(h1, h2, p, em, div, span) { color: var(--ink) !important; }
  .lp-cost .ticker { -webkit-mask-image: none; mask-image: none; border-color: var(--border); }
  .lp-cost .ticker__row { width: auto; white-space: normal; flex-wrap: wrap; gap: 4px 28px; padding: 0 32px; }
  .lp-cost .ticker__row span[aria-hidden] { display: none; }
  .lp-cost .pt-grid { display: grid; grid-template-columns: repeat(5, 1fr); overflow: visible; margin: 24px 0 0; padding: 0; -webkit-mask-image: none; mask-image: none; }
  .lp-cost :is(.sec, .band, .ctaband) { padding-block: 26px; }
  .lp-cost .faq__head { position: static; }
  .lp-cost .lc-cells { background: none; }
  .lp-cost :is(.lc-col--celva, .doc__card) { background: #fff; color: var(--ink); border: 1px solid var(--border-strong); box-shadow: none; }
  .lp-cost :is(.lc-col--celva, .doc__card) :is(h3, li, span, em) { color: var(--ink) !important; }
  .lp-cost :is(.lc-col--celva, .doc__card) .lc-ln { stroke: var(--navy-brand); }
  .lp-cost main :is(.btn, .door__go) { background: #fff !important; color: var(--ink) !important; border: 1px solid var(--ink) !important; box-shadow: none !important; }
  .lp-cost :is(.lc-item, .lc-sign, .lc-col, .lc-sheet, .door, .faq__list details) { break-inside: avoid; }
}