/* ============================================================
   XQUBE GLOBAL — SERVICE 07 · VIRTUAL CFO SERVICES
   Page-specific styles only. The system lives in css/main.css.
   Spine: title scene · the problem · paired panels ·
   THE ANALYSIS LAYER (signature device) · scope · questions · close

   Every state in the device is driven by a custom property whose
   DEFAULT is the finished state, so no-JS and reduced-motion get a
   completed board pack without a single line of script.
   ============================================================ */

/* ---------- current-page marks in the shared chrome ---------- */
.nav-links a.is-here { color: var(--text); }
.nav-links a.is-here::after { transform: scaleX(1); opacity: 0.4; }
.mobile-links a.is-here { color: var(--text); }
.mobile-links a.is-here .mono { color: var(--pink-soft); }
.footer-col a.is-here { color: var(--text); }
.footer-col a.is-here::before { content: "·\00a0"; color: var(--purple-soft); }

/* ============================================================
   1 · TITLE SCENE
   ============================================================ */
section[data-scene="prologue"].cfo-title { height: 190vh; }
.cfo-title-stage { justify-content: center; }
.cfo-title-stage .title-block { max-width: 1080px; }
.cfo-h1 {
  font-size: clamp(34px, 5.3vw, 76px);
  max-width: 17ch;
  margin: 0 auto;
}
.cfo-lede {
  margin: clamp(30px, 4.6vh, 52px) auto 0;
  max-width: 62ch;
  text-align: center;
}
@media (prefers-reduced-motion: no-preference) {
  .js .cfo-lede {
    opacity: var(--subop, 0);
    transform: translateY(calc((1 - var(--subop, 0)) * 22px));
  }
}

/* ============================================================
   2 · THE PROBLEM — a reading rest, narrow and unhurried
   ============================================================ */
.problem-h { max-width: 16ch; }
.problem-body {
  margin-top: clamp(28px, 4vh, 44px);
  max-width: 62ch;
  font-size: clamp(17px, 1.55vw, 20px);
  line-height: 1.85;
  color: var(--mist);
  border-left: 2px solid rgba(255, 77, 128, 0.35);
  padding-left: clamp(20px, 3vw, 34px);
}

/* ============================================================
   3 · PAIRED PANELS — the work, and what it changes
   ============================================================ */
.panel-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(18px, 2.4vw, 30px);
  align-items: stretch;
}
.cfo-panel {
  position: relative;
  display: flex; flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background-color: var(--surface);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09);
  padding: clamp(26px, 3.2vw, 46px);
  overflow: hidden;
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
.cfo-panel-do { background-image: linear-gradient(105deg, rgba(91, 76, 255, 0.13), transparent 42%); }
.cfo-panel-out { background-image: linear-gradient(105deg, rgba(255, 77, 128, 0.11), transparent 42%); }
.cfo-panel:hover {
  border-color: rgba(148, 138, 255, 0.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 20px 52px rgba(0, 0, 0, 0.45);
}
.panel-ix {
  display: block;
  font-size: 11.5px; letter-spacing: 0.2em;
  color: var(--purple-soft);
  margin-bottom: var(--s3);
}
.cfo-panel-out .panel-ix { color: var(--pink-soft); }
.panel-h {
  font-size: clamp(23px, 2.4vw, 31px);
  font-weight: 600; letter-spacing: -0.018em; line-height: 1.2;
  margin-bottom: var(--s3);
}
.panel-body { max-width: 46ch; }
.panel-body-2 { margin-top: var(--s3); }
/* the shorter panel centres its block so the pair reads as one spread */
.cfo-panel-out .panel-h { margin-top: auto; }
.cfo-panel-out .panel-body:last-child { margin-bottom: auto; }
/* the opening clause of "What Changes for You" is the promise; it is
   set as a lead-in but stays inside the same sentence flow */
.panel-lead {
  display: block;
  margin-bottom: var(--s2);
  font-size: clamp(20px, 2.1vw, 26px);
  line-height: 1.35;
  letter-spacing: -0.015em;
  font-weight: 500;
  color: var(--pink);
  text-shadow: 0 0 30px rgba(255, 77, 128, 0.25);
}

/* ============================================================
   4 · SIGNATURE DEVICE — THE ANALYSIS LAYER
   A board pack that assembles itself: the working capital cycle
   draws out, the receivables ageing schedule builds, the covenant
   ratios travel to their marks, then the pack collates. One scroll
   variable per sheet; the settled state is the CSS default.
   ============================================================ */
section[data-scene="cfopack"] { height: 440vh; }
.cfo-pack-stage { justify-content: center; }

.cfo-dev {
  position: relative; z-index: 2;
  width: min(1140px, 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(13, 13, 19, 0.55);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 26px 70px rgba(0, 0, 0, 0.45);
  padding: clamp(20px, 2.5vw, 32px);
  overflow: hidden;
}
.dev-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
  margin-bottom: clamp(14px, 2.2vh, 24px);
}
.dev-h {
  font-size: clamp(11.5px, 1.2vw, 13px); letter-spacing: 0.24em;
  font-weight: 400; color: var(--text);
}
.dev-sub { font-size: 10px; letter-spacing: 0.2em; color: var(--faint); white-space: nowrap; }
.dev-sub span { color: var(--mist); }

.dev-grid {
  display: grid;
  grid-template-columns: 1fr 246px;
  gap: clamp(18px, 2.4vw, 34px);
  align-items: start;
}

/* ---------- the sheets ---------- */
.cfo-sheets { display: flex; flex-direction: column; gap: clamp(14px, 2.2vh, 26px); }
.cfo-sheet {
  --on: 1;
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.014);
  padding: 12px 16px 14px;
  opacity: calc(0.24 + 0.76 * var(--on));
  transform: translateY(calc((1 - var(--on)) * 12px));
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.3, 0.7, 0.3, 1),
              border-color 0.5s ease, background 0.5s ease;
}
.cfo-sheet.on {
  border-color: rgba(148, 138, 255, 0.32);
  background: rgba(91, 76, 255, 0.045);
}
.sheet-head {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
}
.sheet-ix { font-size: 10px; letter-spacing: 0.16em; color: var(--faint); }
.sheet-h {
  font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 400; color: var(--mist);
}
.cfo-sheet.on .sheet-h { color: var(--text); }
.sheet-state {
  position: relative; display: block;
  min-width: 66px; height: 12px;
  font-size: 9px; letter-spacing: 0.2em; text-align: right;
  color: var(--faint);
}
.sheet-state b, .sheet-state em {
  position: absolute; right: 0; top: 0;
  font-weight: 400; font-style: normal;
  transition: opacity 0.45s ease;
}
.sheet-state b { opacity: calc(1 - var(--done, 1)); }
.sheet-state em { opacity: var(--done, 1); color: var(--purple-soft); }

/* ---------- sheet 01 · working capital cycle ---------- */
.wcc { --grow: 1; }
.wcc-bar {
  display: flex; gap: 2px;
  height: 30px;
  clip-path: inset(0 calc((1 - var(--grow)) * 100%) 0 0);
  transition: clip-path 0.4s linear;
}
.wcc-seg {
  position: relative;
  flex: var(--w) 1 0;
  border-radius: 3px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 9px;
  overflow: hidden;
  white-space: nowrap;
}
.wcc-seg i {
  font-style: normal;
  font-size: 9px; letter-spacing: 0.18em; color: rgba(255, 255, 255, 0.55);
}
.wcc-seg b { font-weight: 400; font-size: 12px; color: var(--text); }
.wcc-dso {
  background: linear-gradient(180deg, rgba(91, 76, 255, 0.4), rgba(91, 76, 255, 0.2));
  box-shadow: inset 0 0 0 1px rgba(148, 138, 255, 0.42);
}
.wcc-dio {
  background: linear-gradient(180deg, rgba(91, 76, 255, 0.22), rgba(91, 76, 255, 0.1));
  box-shadow: inset 0 0 0 1px rgba(148, 138, 255, 0.26);
}
.wcc-brackets {
  position: relative;
  height: 26px;
  margin-top: 7px;
  font-size: 9px; letter-spacing: 0.18em;
  opacity: calc(0.1 + 0.9 * var(--grow));
  transition: opacity 0.5s ease;
}
.wcc-br {
  position: absolute; top: 0;
  padding-top: 8px;
  color: var(--faint);
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.wcc-br::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: 5px;
  border: 1px solid currentColor;
  border-bottom: 0;
  opacity: 0.55;
}
/* the cycle is 83 days of operating capital; 38 of it is financed by
   suppliers, so the cash conversion cycle is the first 45/83 */
.wcc-br-ccc { left: 0; width: 54.2%; color: var(--purple-soft); }
.wcc-br-dpo { left: 54.2%; right: 0; color: var(--pink-soft); text-align: right; }
.wcc-br-ccc em { font-style: normal; color: #fff; font-size: 11px; letter-spacing: 0.06em; }

/* ---------- sheet 02 · receivables ageing ---------- */
.age { --grow: 1; }
.age-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  height: 96px;
  align-items: end;
}
.age-col {
  display: flex; flex-direction: column; justify-content: flex-end;
  height: 100%;
  gap: 5px;
  text-align: center;
}
.age-col b {
  font-weight: 400; font-size: 10.5px; color: var(--mist);
  opacity: calc(var(--grow) * 1);
  transition: opacity 0.5s ease;
}
.age-bar {
  display: block;
  height: calc(var(--h) * var(--grow) * 62px);
  min-height: 1px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, rgba(148, 138, 255, 0.55), rgba(91, 76, 255, 0.14));
  box-shadow: inset 0 0 0 1px rgba(148, 138, 255, 0.3);
  transition: height 0.4s linear;
}
.age-col-flag .age-bar {
  background: linear-gradient(180deg, rgba(255, 77, 128, 0.62), rgba(255, 77, 128, 0.14));
  box-shadow: inset 0 0 0 1px rgba(255, 125, 161, 0.45), 0 0 calc(var(--grow) * 18px) rgba(255, 77, 128, 0.3);
}
.age-col u {
  text-decoration: none;
  font-size: 9px; letter-spacing: 0.16em; color: var(--faint);
}
.age-col-flag u { color: var(--pink-soft); }
.age-foot {
  display: flex; justify-content: space-between; gap: 14px;
  margin-top: 11px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 9px;
  font-size: 9.5px; letter-spacing: 0.18em; color: var(--faint);
  opacity: calc(0.1 + 0.9 * var(--grow));
  transition: opacity 0.5s ease;
}
.age-foot em { font-style: normal; color: var(--text); font-size: 11px; letter-spacing: 0.04em; }
.age-flag { color: var(--pink-soft); }
.age-flag em { color: var(--pink-soft); }

/* ---------- sheet 03 · critical ratios ---------- */
.rats { display: flex; flex-direction: column; gap: 2px; }
.rat-row {
  --rp: 1; --rv: 1;
  display: grid;
  grid-template-columns: 78px 1fr 46px 42px;
  align-items: center;
  gap: 12px;
  padding: 5px 0;
}
.rat-name { font-size: 9.5px; letter-spacing: 0.16em; color: var(--faint); }
.rat-track {
  position: relative;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.07);
}
.rat-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: calc(var(--v) * var(--rp) * 100%);
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(91, 76, 255, 0.35), var(--purple-soft));
  transition: width 0.35s linear;
}
.rat-th {
  position: absolute; top: -5px; bottom: -5px;
  left: calc(var(--th) * 100%);
  width: 1px;
  background: rgba(255, 125, 161, 0.7);
}
.rat-th::after {
  content: "";
  position: absolute; left: 50%; bottom: -4px;
  width: 0; height: 0;
  transform: translateX(-50%);
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-bottom: 4px solid var(--pink);
}
.rat-mark {
  position: absolute; top: 50%;
  left: calc(var(--v) * var(--rp) * 100%);
  width: 9px; height: 9px;
  margin-left: -4.5px;
  transform: translateY(-50%) rotate(45deg);
  border-radius: 2px;
  background: color-mix(in srgb, rgba(255, 255, 255, 0.3), var(--purple) calc(var(--rv) * 100%));
  box-shadow: 0 0 calc(var(--rv) * 14px) rgba(91, 76, 255, 0.85);
  transition: left 0.35s linear, background 0.45s ease, box-shadow 0.45s ease;
}
/* the figure arrives with the marker: the number is the analysis landing */
.rat-val {
  font-size: 13px; text-align: right;
  color: color-mix(in srgb, var(--faint), #fff calc(var(--rv) * 100%));
  opacity: calc(0.1 + 0.9 * var(--rp));
  transition: color 0.45s ease, opacity 0.4s ease;
}
.rat-verdict {
  position: relative; display: block;
  height: 12px;
  font-size: 9px; letter-spacing: 0.18em; text-align: right;
  color: var(--faint);
}
.rat-verdict b, .rat-verdict em {
  position: absolute; right: 0; top: 0;
  font-weight: 400; font-style: normal;
  transition: opacity 0.45s ease;
}
.rat-verdict b { opacity: calc(1 - var(--rv)); }
.rat-verdict em { opacity: var(--rv); color: var(--purple-soft); }
.rats-foot {
  margin-top: 8px;
  font-size: 8.5px; letter-spacing: 0.2em; color: var(--pink-soft);
  opacity: 0.7;
}

/* ---------- the pack aside ---------- */
.cfo-aside {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.026);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  padding: 16px 18px 18px;
  transition: border-color 0.6s ease, box-shadow 0.6s ease;
}
.cfo-aside.complete {
  border-color: rgba(148, 138, 255, 0.42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 0 32px rgba(91, 76, 255, 0.15);
}
.pk-head, .pk-sub {
  font-size: 9.5px; letter-spacing: 0.24em; color: var(--faint);
}
.pk-sub { margin-top: 16px; }

.pk-cad { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.pk-cad-btn {
  font-family: var(--mono-f);
  font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--faint);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 100px;
  padding: 6px 11px;
  cursor: pointer;
  transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}
.pk-cad-btn:hover { color: var(--mist); border-color: var(--line-strong); }
.pk-cad-btn.is-on {
  color: #fff;
  border-color: rgba(148, 138, 255, 0.55);
  background: rgba(91, 76, 255, 0.16);
  box-shadow: 0 0 16px rgba(91, 76, 255, 0.25);
}

.pk-rows { margin: 14px 0 4px; }
.pk-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding: 8px 0 7px;
}
.pk-row dt { font-size: 9.5px; letter-spacing: 0.16em; color: var(--faint); }
.pk-row dd { font-size: 13px; letter-spacing: 0.02em; color: var(--faint); }
.pk-row em { font-style: normal; color: var(--text); }

.pk-stack {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 3px;
  margin: 9px 0 2px;
}
.pk-slip {
  --lit: 1;
  height: 30px;
  display: flex; flex-direction: column; justify-content: center; gap: 3px;
  padding: 0 2px;
  border: 1px solid color-mix(in srgb, rgba(255, 255, 255, 0.08), rgba(148, 138, 255, 0.5) calc(var(--lit) * 100%));
  border-radius: 2px;
  background: color-mix(in srgb, rgba(255, 255, 255, 0.015), rgba(91, 76, 255, 0.12) calc(var(--lit) * 100%));
  opacity: calc(0.28 + 0.72 * var(--lit));
  transform: translateY(calc((1 - var(--lit)) * 5px));
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.3, 0.7, 0.3, 1),
              border-color 0.5s ease, background 0.5s ease;
}
.pk-slip i {
  display: block; height: 2px; border-radius: 1px;
  background: color-mix(in srgb, rgba(255, 255, 255, 0.16), rgba(178, 170, 255, 0.6) calc(var(--lit) * 100%));
  transition: background 0.5s ease;
}
.pk-slip i:nth-child(2) { width: 68%; }
.pk-slip i:nth-child(3) { width: 42%; }

.pk-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.rf-chip {
  --lit: 1;
  font-size: 9px; letter-spacing: 0.14em;
  padding: 5px 9px;
  border-radius: 100px;
  border: 1px solid color-mix(in srgb, rgba(255, 255, 255, 0.08), rgba(255, 125, 161, 0.6) calc(var(--lit) * 100%));
  background: color-mix(in srgb, transparent, rgba(255, 77, 128, 0.12) calc(var(--lit) * 100%));
  color: color-mix(in srgb, var(--faint), var(--pink-soft) calc(var(--lit) * 100%));
  box-shadow: 0 0 calc(var(--lit) * 18px) rgba(255, 77, 128, 0.18);
  opacity: calc(0.36 + 0.64 * var(--lit));
  transition: opacity 0.5s ease, color 0.5s ease, border-color 0.5s ease, background 0.5s ease, box-shadow 0.5s ease;
}

/* ============================================================
   5 · SCOPE OF WORK — the length is the argument
   ============================================================ */
.scope-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  border-bottom: 1px solid var(--line);
  padding-bottom: var(--s2);
}
.scope-h {
  font-size: clamp(12.5px, 1.4vw, 16px); letter-spacing: 0.24em;
  font-weight: 400; color: var(--text);
}
.scope-count { font-size: 10.5px; letter-spacing: 0.22em; color: var(--faint); white-space: nowrap; }
.scope-list { list-style: none; margin: 0; padding: 0; }
.scope-item {
  display: grid;
  grid-template-columns: 58px 22px 1fr;
  align-items: center;
  gap: var(--s2);
  padding: clamp(14px, 1.9vh, 21px) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.045);
}
.js .scope-item.reveal { transition-delay: calc(var(--i, 0) * 0.055s); }
.scope-ix { font-size: 12px; letter-spacing: 0.12em; color: var(--faint); transition: color 0.4s ease; }
.scope-item:hover .scope-ix { color: var(--purple-soft); }
.scope-tick { width: 20px; height: 20px; overflow: visible; }
.tick-path {
  fill: none;
  stroke: var(--purple-soft);
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 24; stroke-dashoffset: 24;
}
.js .scope-item.in .tick-path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.7s cubic-bezier(0.22, 0.6, 0.2, 1) calc(var(--i, 0) * 0.055s + 0.14s);
}
.scope-text {
  font-size: clamp(16px, 1.6vw, 19.5px);
  line-height: 1.45;
  color: var(--text);
}

/* ============================================================
   6 · QUESTIONS — THE BOARD PACK
   The questions are the contents page of the pack this service
   delivers: a paper sheet on top of the rest of the pack, four
   agenda rows, each with a leader-dot line running out to its
   item number, and a stamp when the last one is in.

   Two state variables, both defaulting to the FINISHED document:
     --land / --lead   per row: dropped into place, leader run out
     --stamp / --spine per sheet: the stamp pressed, the rule drawn
   so the no-JS and reduced-motion page is a prepared board pack
   with four plainly readable questions.
   ============================================================ */
section[data-scene="cfoask"] { height: 300vh; }
.cfo-ask-stage { justify-content: center; }

.bpk {
  --stamp: 1;
  --spine: 1;
  position: relative; z-index: 2;
  width: min(940px, 100%);
}

/* the rest of the pack, sitting under the contents page */
.bpk-behind {
  position: absolute; inset: 0;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 3px;
  background: rgba(20, 20, 28, 0.75);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
  z-index: 0;
}
.bpk-behind-1 { transform: translate(7px, 8px); }
.bpk-behind-2 { transform: translate(14px, 16px); border-color: rgba(255, 255, 255, 0.075); }

.bpk-page {
  position: relative; z-index: 1;
  border: 1px solid rgba(148, 138, 255, 0.3);
  border-radius: 3px;
  background-color: rgba(12, 12, 18, 0.72);
  background-image: linear-gradient(176deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012) 26%, rgba(255, 255, 255, 0.004) 70%);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 30px 78px rgba(0, 0, 0, 0.5);
  padding: clamp(22px, 2.9vw, 40px) clamp(20px, 3.2vw, 46px) clamp(18px, 2.2vw, 28px);
  transition: border-color 0.7s ease, box-shadow 0.7s ease;
}

/* ---------- the sheet's masthead ---------- */
.bpk-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s2);
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
}
.bpk-for {
  font-size: 10px; letter-spacing: 0.3em;
  color: var(--mist);
}
.bpk-file {
  font-size: 10px; letter-spacing: 0.22em;
  color: var(--faint);
  white-space: nowrap;
}
.bpk-title {
  margin-top: clamp(18px, 2.6vh, 30px);
  font-size: clamp(13px, 1.55vw, 19px);
  letter-spacing: 0.2em;
  line-height: 1.5;
  font-weight: 400;
  color: var(--text);
}
.bpk-kind {
  margin-top: 9px;
  font-size: 9.5px; letter-spacing: 0.24em;
  color: var(--faint);
}
.bpk-kind em { font-style: normal; color: var(--purple-soft); }

/* ---------- the agenda ---------- */
.bpk-agenda {
  position: relative;
  list-style: none;
  margin: clamp(14px, 2.2vh, 24px) 0 0;
  padding: 0 0 0 clamp(14px, 2vw, 26px);
}
/* the document's margin rule, drawn as the pack fills */
.bpk-agenda::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, rgba(148, 138, 255, 0.5), rgba(148, 138, 255, 0.1));
  transform: scaleY(var(--spine, 1));
  transform-origin: 50% 0;
}
.bpk-item {
  --land: 1;
  --lead: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(52px, 12%, 128px) 34px;
  align-items: baseline;
  column-gap: clamp(10px, 1.5vw, 20px);
  padding: clamp(11px, 2vh, 21px) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.bpk-item:last-child { border-bottom: 0; padding-bottom: clamp(6px, 1.2vh, 12px); }
.bpk-q {
  font-size: clamp(16px, 1.85vw, 23px);
  line-height: 1.42;
  letter-spacing: -0.01em;
  color: var(--text);
}
/* the leader: dots on the baseline, run out left to right */
.bpk-lead {
  display: block;
  align-self: baseline;
  height: 3px;
  color: rgba(148, 138, 255, 0.5);
  background-image: radial-gradient(circle at 1.5px 1.5px, currentColor 1.15px, transparent 1.25px);
  background-size: 7px 3px;
  background-repeat: repeat-x;
  background-position: 0 100%;
  clip-path: inset(0 calc((1 - var(--lead)) * 100%) 0 0);
  transition: color 0.6s ease, clip-path 0.3s linear;
}
.bpk-ix {
  font-size: 13.5px; letter-spacing: 0.12em; text-align: right;
  color: var(--purple-soft);
  transition: color 0.5s ease;
}

/* ---------- the foot, and the stamp ---------- */
.bpk-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3);
  min-height: 44px;
  margin-top: clamp(14px, 2.2vh, 26px);
  border-top: 1px solid var(--line);
  padding-top: 14px;
}
.bpk-sig { font-size: 9.5px; letter-spacing: 0.24em; color: var(--faint); }
.bpk-stamp {
  position: relative;
  flex: none;
  font-size: clamp(10px, 1.05vw, 12.5px);
  letter-spacing: 0.34em;
  line-height: 1;
  color: var(--pink-soft);
  border: 1px solid rgba(255, 77, 128, 0.55);
  border-radius: 2px;
  padding: 8px 8px 7px 14px;
  opacity: var(--stamp);
  transform: rotate(-6deg) scale(calc(1.16 - 0.16 * var(--stamp)));
  filter: blur(calc((1 - var(--stamp)) * 2.5px));
  box-shadow: 0 0 calc(var(--stamp) * 26px) rgba(255, 77, 128, 0.2);
}
.bpk-stamp::before {
  content: "";
  position: absolute; inset: 3px;
  border: 1px solid rgba(255, 77, 128, 0.26);
  border-radius: 1px;
}

/* ---------- the pending state exists only where motion does ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .bpk-item {
    opacity: calc(0.26 + 0.74 * var(--land));
    transform: translateY(calc((1 - var(--land)) * -13px));
    transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.3, 0.7, 0.3, 1);
  }
  .js .bpk-item:not(.landed) .bpk-lead { color: rgba(255, 255, 255, 0.2); }
  .js .bpk-item:not(.landed) .bpk-ix { color: var(--faint); }
  .js .bpk:not(.prepared) .bpk-page { border-color: rgba(255, 255, 255, 0.11); }
}

/* ============================================================
   7 · CLOSE
   ============================================================ */
.close-cta { margin-top: 0; }
.close-chips {
  display: flex; flex-wrap: wrap; gap: var(--s2);
  margin-top: var(--s4);
}
/* related services — the lean row list the other service pages share */
.siblings {
  margin-top: var(--s7);
  border-top: 1px solid var(--line);
  padding-top: var(--s4);
  text-align: left;
}
.sib-head {
  font-size: 10.5px; letter-spacing: 0.24em;
  color: var(--faint);
  margin-bottom: var(--s2);
}
.sib {
  display: grid;
  grid-template-columns: 62px 1fr 24px;
  align-items: center;
  gap: var(--s2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
  padding: var(--s3) 0;
  transition: padding-left 0.35s cubic-bezier(0.3, 0.7, 0.3, 1), border-color 0.35s ease;
}
.sib:hover { padding-left: 10px; border-bottom-color: rgba(148, 138, 255, 0.35); }
.sib-num { font-size: 11.5px; letter-spacing: 0.1em; color: var(--purple-soft); }
.sib-name { font-size: clamp(16px, 1.5vw, 19px); font-weight: 500; letter-spacing: -0.01em; }
.sib-arrow {
  justify-self: end;
  font-size: 15px; color: var(--faint);
  transform: translateX(-4px);
  transition: transform 0.3s cubic-bezier(0.3, 0.7, 0.3, 1), color 0.3s ease;
}
.sib:hover .sib-arrow { transform: translateX(0); color: var(--purple-soft); }

/* ============================================================
   SHORT DESKTOP WINDOWS: the pack compresses instead of clipping

   THE DEVICE IS THE TALLEST THING IN THIS FILM. At full rhythm the three
   sheets stand about 690px, and a pinned .scene-stage only ever offers
   (window height − 190px of stage padding) — so it wants a window around
   880px high to stand up straight. Below that the stage, a flex column,
   SQUEEZES it (flex-shrink defaults to 1) and .cfo-dev's own
   overflow:hidden amputates whatever did not fit, at every scroll
   position: measured at 1024x600 the device wanted 605px and was given
   408, taking sheet 03, the ▲ LENDER COVENANT legend and the whole
   READY FOR row off the page for good. The fit guard in js/main.js
   cannot catch it — by design it only runs at vw <= 980.

   So the device gets a ladder. Each rung is density only; no copy moves
   and nothing is hidden:
     <= 940px   the rhythm tightens             (fits a ~600px device)
     <= 800px   everything the sheets can give
                up without losing a line        (fits a ~500px device)
     <= 700px   nothing fits any more: both scenes unpin exactly as they
                do on a phone, and js/service-virtual-cfo.js reads the
                unpinned stage and runs its own clock, so the
                choreography is re-timed rather than lost.
   The 820px rung below keeps the type and board-pack rules it always
   had, so windows above it look exactly as they did.
   ============================================================ */
/* 880, not 940. The device is ~690px and the stage offers roughly the
   window minus 190px of chrome, so it fits any window from about 880px
   up — widening this rung to 940 restyled the 881-940 band, which was
   never clipping, and that is a desktop change for no reason. */
@media (min-width: 981px) and (max-height: 880px) {
  .cfo-sheet { padding: 9px 14px 11px; }
  .cfo-sheets { gap: 12px; }
  .wcc-bar { height: 26px; }
  .age-cols { height: 78px; }
  .age-bar { height: calc(var(--h) * var(--grow) * 48px); }
  .rat-row { padding: 3px 0; }
  .pk-slip { height: 24px; }
  .pk-row { padding: 6px 0 5px; }
}

@media (min-width: 981px) and (max-height: 820px) {
  .cfo-title-stage .scroll-cue { display: none; }
  .cfo-h1 { font-size: clamp(32px, 4.5vw, 62px); }
  .bpk-page { padding: 24px clamp(20px, 3vw, 38px) 20px; }
  .bpk-q { font-size: clamp(15px, 1.55vw, 19px); }
  .bpk-item { padding: 13px 0; }
  .bpk-title { margin-top: 18px; }
  .bpk-foot { min-height: 40px; margin-top: 14px; }
}

/* rung two — a 1366x768 laptop is about 640px of window once the browser
   has taken its chrome, and that is the commonest short desktop there is.
   Every value here is spacing: the sheets keep every line they had. */
@media (min-width: 981px) and (max-height: 800px) {
  .cfo-dev { padding: 18px 20px; }
  .dev-head { padding-bottom: 10px; margin-bottom: 10px; }
  .cfo-sheet { padding: 7px 12px 8px; }
  .cfo-sheets { gap: 9px; }
  .sheet-head { margin-bottom: 8px; }
  .wcc-bar { height: 22px; }
  .wcc-brackets { height: 22px; margin-top: 5px; }
  .age-cols { height: 62px; }
  .age-bar { height: calc(var(--h) * var(--grow) * 38px); }
  .age-foot { margin-top: 8px; padding-top: 7px; }
  .rat-row { padding: 1px 0; }
  .rats-foot { margin-top: 6px; }
  .pk-slip { height: 20px; }
  .pk-row { padding: 5px 0 4px; }
}

/* rung three — below this the stage cannot hold either device at any
   density, so it stops pretending to be a viewport. This is the same
   unpin the phone gets; the scene functions ask the LAYOUT whether they
   are pinned, so they pick the unpinned clock up here without a second
   breakpoint to keep in sync. */
@media (min-width: 981px) and (max-height: 700px) {
  section[data-scene="cfopack"], section[data-scene="cfoask"] { height: auto; }
  section[data-scene="cfopack"] .scene-stage,
  section[data-scene="cfoask"] .scene-stage {
    position: static; height: auto; overflow: visible;
    padding-top: var(--section-gap); padding-bottom: 0;
  }
  section[data-scene="cfoask"] .ghost-center { display: none; }
}

/* ============================================================
   responsive — pinned scenes go static; nothing overflows
   ============================================================ */
@media (max-width: 980px) {
  section[data-scene="prologue"].cfo-title { height: auto; }
  section[data-scene="prologue"].cfo-title .scene-stage {
    justify-content: center;
    min-height: 100svh;
    padding-bottom: var(--s7);
  }
  .cfo-h1 { max-width: 100%; }

  .panel-pair { grid-template-columns: 1fr; }
  .panel-body { max-width: none; }

  section[data-scene="cfopack"] { height: auto; }
  section[data-scene="cfopack"] .scene-stage {
    position: static; height: auto; overflow: visible;
    padding-top: var(--section-gap); padding-bottom: 0;
  }
  .dev-grid { grid-template-columns: 1fr; }
  .cfo-aside { margin-top: var(--s3); }
  .dev-head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .dev-sub { white-space: normal; }
  .rat-row { grid-template-columns: 68px 1fr 42px 38px; gap: 9px; }
  .rat-name { font-size: 8.5px; letter-spacing: 0.1em; }
  .pk-stack { grid-template-columns: repeat(9, 1fr); }

  /* THE SAME GROWTH, AT A PRICE A PHONE CAN PAY.
     These two used to be dead weight below 980px — the device was handed
     its finished state and nothing was scrubbed. Now that the pack builds
     here too, the ageing schedule would be reflowing four column heights
     on every frame of its beat, which is the one thing this film must not
     do on a handset. The bar is drawn at its full height and scaled from
     its foot instead: identical at rest, compositor-only in flight. */
  .age-bar {
    height: calc(var(--h) * 62px);
    transform: scaleY(var(--grow));
    transform-origin: 50% 100%;
    transition: transform 0.4s linear;
  }
  /* the ratio fill and its marker keep width/left: those ARE the position of
     the answer on the scale, and a percentage transform cannot say that.
     Both are out of flow inside a track of fixed size, so containment keeps
     whatever the browser does for them inside those 3 pixels. (contain does
     not clip paint, so the marker's glow and the covenant pennant still
     hang outside the track as they always did.) */
  .rat-track { contain: layout; }

  section[data-scene="cfoask"] { height: auto; }
  section[data-scene="cfoask"] .scene-stage {
    position: static; height: auto; overflow: visible;
    padding-top: var(--section-gap); padding-bottom: 0;
  }
  section[data-scene="cfoask"] .ghost-center { display: none; }
  /* THE SEVEN LINES THAT USED TO LIVE HERE PINNED THE FINISHED DOCUMENT.
     They were written when an unpinned scene meant no scroll to drive it,
     and they belted-and-braced a JS gate that did the same thing: the
     phone got a sheet that was already prepared before it was reached, so
     the rows never dropped, the leaders never ran out, the margin rule
     never drew and the stamp never pressed. The scene now has a clock of
     its own (js/service-virtual-cfo.js) and needs the pending state back.
     Nothing is at risk in losing them: --land/--lead/--stamp/--spine all
     default to the finished document, .no-js restores it below, and so
     does prefers-reduced-motion — under which the engine never calls a
     scene at all. */
  .bpk-q { font-size: clamp(16px, 2.5vw, 21px); }

  .scope-item { grid-template-columns: 44px 20px 1fr; gap: 12px; }
  .sib { grid-template-columns: 52px 1fr 20px; }
}

/* the contents page on a narrow sheet: the item number takes the head
   of the row, the leader runs the width of the line, the question sits
   underneath it — still a table of contents, one column wide */
@media (max-width: 700px) {
  .bpk-item {
    grid-template-columns: 30px minmax(0, 1fr);
    grid-template-areas: "ix lead" "q q";
    align-items: baseline;
    row-gap: 9px;
    column-gap: 10px;
  }
  .bpk-ix { grid-area: ix; text-align: left; font-size: 12.5px; }
  .bpk-lead { grid-area: lead; }
  .bpk-q { grid-area: q; }
  .bpk-behind-1 { transform: translate(4px, 5px); }
  .bpk-behind-2 { transform: translate(8px, 10px); }
  .bpk-foot { align-items: flex-end; gap: var(--s2); }
  .bpk-sig { letter-spacing: 0.16em; }
}

@media (max-width: 640px) {
  .cfo-dev { padding: 16px 14px 18px; }
  .cfo-sheet { padding: 11px 12px 13px; }
  .sheet-head { grid-template-columns: 20px 1fr auto; gap: 7px; }
  .sheet-h { font-size: 10px; letter-spacing: 0.1em; }
  .sheet-state { min-width: 56px; font-size: 8px; letter-spacing: 0.12em; }
  .wcc-seg { padding: 0 6px; }
  .wcc-seg i { font-size: 8px; letter-spacing: 0.1em; }
  .wcc-brackets { font-size: 8px; letter-spacing: 0.1em; }
  .age-cols { gap: 6px; }
  .age-col b { font-size: 9px; }
  .age-col u { font-size: 8px; letter-spacing: 0.08em; }
  .age-foot { font-size: 8.5px; letter-spacing: 0.1em; }
  .rat-row { grid-template-columns: 56px 1fr 36px 32px; gap: 7px; }
  .rat-name { font-size: 8px; letter-spacing: 0.06em; }
  .rat-val { font-size: 11px; }
  .rat-verdict { font-size: 8px; letter-spacing: 0.1em; }
  .pk-stack { grid-template-columns: repeat(5, 1fr); }
  .close-cta .btn { width: 100%; justify-content: center; }
  .scope-item { grid-template-columns: 38px 18px 1fr; }
  .bpk-page { padding: 20px 16px 18px; }
  .bpk-head { flex-direction: column; align-items: flex-start; gap: 5px; }
  .bpk-for { letter-spacing: 0.22em; }
  .bpk-title { letter-spacing: 0.13em; line-height: 1.65; }
  .bpk-agenda { padding-left: 12px; }
  .bpk-stamp { letter-spacing: 0.22em; padding: 7px 7px 6px 11px; }
}

/* ============================================================
   statics — no-JS and reduced motion get the finished pack
   ============================================================ */
.no-js .cfo-lede { opacity: 1; transform: none; }
/* the stage is no longer a viewport, so the cue has nothing to point at */
.no-js .cfo-title-stage .scroll-cue { display: none; }
.no-js .tick-path { stroke-dashoffset: 0; }
.no-js .pk-cad-btn { cursor: default; }
/* the board pack: printed, stamped, and fully legible without a script */
.no-js .bpk-item { opacity: 1; transform: none; }
.no-js .bpk-lead { clip-path: none; color: rgba(148, 138, 255, 0.5); }
.no-js .bpk-ix { color: var(--purple-soft); }
.no-js .bpk-agenda::before { transform: none; }
.no-js .bpk-stamp { opacity: 1; transform: rotate(-6deg); filter: none; }

@media (prefers-reduced-motion: reduce) {
  .cfo-lede { opacity: 1; transform: none; }
  .tick-path { stroke-dashoffset: 0; }
  .bpk-item { opacity: 1; transform: none; }
  .bpk-lead { clip-path: none; color: rgba(148, 138, 255, 0.5); transition: none; }
  .bpk-ix { color: var(--purple-soft); }
  .bpk-agenda::before { transform: none; }
  .bpk-stamp { opacity: 1; transform: rotate(-6deg); filter: none; }
  .bpk-page { border-color: rgba(148, 138, 255, 0.3); }
}


/* ============================================================
   GLASS, COSTED FOR A PHONE (page-scoped)
   css/main.css flattens its OWN glass components below 980px, but it cannot
   reach the devices this page declares. backdrop-filter re-blurs everything
   behind an element on every frame it moves, and these sit inside a
   scrolling film — it is the most expensive thing a handset does here.

   Blur removed below 980px. Where the surface was too sheer to survive
   without it (var(--surface) is 3.5% white) an opaque base is added as
   background-COLOR, not background, so any ruled gradient painted on top
   of it is left intact.
   ============================================================ */
@media (max-width: 980px) {
  .cfo-panel {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background-color: var(--glass-flat);
  }
  .cfo-dev {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    /* the one that was missed. Its own colour is 45% transparent and the
       blur was the only thing carrying it; behind it sits 'forecast', the
       brightest region on the site (REGION_ALPHA 0.62, and js/main.js does
       not dim this one on phones), so the projection fan was drawing
       straight through the receivables figures. background-COLOR, not the
       shorthand, for the reason this block's own note gives. */
    background-color: var(--glass-flat);
  }
  .bpk-page {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background-color: var(--glass-flat);
  }
}