/* /programmes/cameroon-textile/economics/ : "the bead on the overhead curve". Imported only by this route.
   One hyperbola (overhead per garment = 70 ÷ utilisation, illustrative GFT arithmetic on R12) and one bead on it carry
   the page: the breakeven surface in the splash, the display curve over the regime ribbon, the effective-labour curve,
   the sticky utilisation stage, the vinculum of the interlude, the stepped ramp of the gates and the surface again at
   the close, where the thread runs into the footer. Three tonal acts: night (#1 to #2), paper (#3 to #5), night (#6 on).
   Stability: transform, opacity, clip-path and filter only; pins are native sticky; pre-states live under
   :root[data-m-go]; scroll-driven rules are longhands; every read-out and caption box is fixed-size. */

body[data-page="economics"] {
  --header: 0px;
  --gutter: clamp(20px, 4vw, 56px);
  --ink: #25302e;
  --ground: #f6f4ef;
  --rule: #b8c8bd;
  --muted: #2c3d36;
  --font-ui: var(--gft-font-display);
  --laterite: #c98a2b;
  --ec-night: #072d2b;
  --ec-forest: #0e4d4a;
  --ec-paper: #f6f4ef;
  --ec-sage: #6bb68f;
  --ec-leaf: #3f8f6b;
  --ec-ochre: #c98a2b;
  --ec-ochre-ink: #7d5417;
  --ec-indigo: #2c3e7a;
  --ec-indigo-l: #a9b6e6;
  --ec-cap-d: rgba(232, 240, 236, .82);
  --ec-cap-p: #2c3d36;
  --ec-ease: cubic-bezier(.22, .8, .24, 1);
}
body[data-page="economics"] main { overflow-x: clip; }
body[data-page="economics"] .gft-cite { min-height: 28px; min-width: 32px; padding: 2px 7px; margin-inline: 2px; width: fit-content; }
.prog-c-ec-sec.gft-section--dark .gft-cite, .prog-c-ec-int .gft-cite { color: var(--ec-sage); }
.prog-c-ec-t { max-width: 60ch; text-wrap: pretty; }
.prog-c-ec-sec { --ec-c: var(--ec-sage); }
.prog-c-ec-sec .gft-section__rail { background: var(--ec-c); }
.prog-c-ec-sec--labour, .prog-c-ec-sec--util, .prog-c-ec-sec--ledger { --ec-c: var(--ec-ochre); }
.prog-c-ec-sec--levers { --ec-c: #7d8fd0; }
/* pinned scenes and heads sit above the rail decoration */
.prog-c-ec-sec > .gft-container { position: relative; }

/* ================= section heads: a partial pre-state, settled in 700 ms, per-heading fx ================= */
.prog-c-ec-head { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 20px 56px; align-items: end; margin-bottom: clamp(36px, 4vw, 56px); }
.prog-c-ec-head__k { grid-column: 1 / -1; }
.prog-c-ec-head__t { font-size: clamp(2rem, 3.4vw, 3.4rem); max-width: 24ch; line-height: 1.04; }
.prog-c-ec-head__l { font-size: clamp(1rem, 1.15vw, 1.14rem); line-height: 1.62; max-width: 52ch; }
.gft-section--dark .prog-c-ec-head__l { color: #dbe6df; }
.prog-c-ec-hw { display: inline-block; }
:root[data-m-go] [data-m="prog-c-ec-h"]:not([data-m-in]) .prog-c-ec-hw { opacity: .35; transform: translateY(.42em); }
:root[data-m-go] [data-m="prog-c-ec-h"][data-m-in] .prog-c-ec-hw {
  animation-name: prog-c-ec-h-rise; animation-duration: 700ms; animation-timing-function: var(--ec-ease);
  animation-delay: calc(var(--i, 0) * 26ms); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal;
}
:root[data-m-go] [data-m="prog-c-ec-h"][data-ec-fx="skew"]:not([data-m-in]) .prog-c-ec-hw { transform: translateY(.36em) skewY(7deg); }
:root[data-m-go] [data-m="prog-c-ec-h"][data-ec-fx="skew"][data-m-in] .prog-c-ec-hw { animation-name: prog-c-ec-h-skew; }
:root[data-m-go] [data-m="prog-c-ec-h"][data-ec-fx="wdth"]:not([data-m-in]) .prog-c-ec-hw { transform: scaleX(.72); transform-origin: 0 100%; }
:root[data-m-go] [data-m="prog-c-ec-h"][data-ec-fx="wdth"][data-m-in] .prog-c-ec-hw { animation-name: prog-c-ec-h-wdth; transform-origin: 0 100%; }
:root[data-m-go] [data-m="prog-c-ec-h"][data-ec-fx="track"]:not([data-m-in]) .prog-c-ec-hw { transform: scaleX(1.28); }
:root[data-m-go] [data-m="prog-c-ec-h"][data-ec-fx="track"][data-m-in] .prog-c-ec-hw { animation-name: prog-c-ec-h-track; }
:root[data-m-go] [data-m="prog-c-ec-h"][data-ec-fx="zoom"]:not([data-m-in]) .prog-c-ec-hw { transform: scale(1.12); filter: blur(4px); }
:root[data-m-go] [data-m="prog-c-ec-h"][data-ec-fx="zoom"][data-m-in] .prog-c-ec-hw { animation-name: prog-c-ec-h-zoom; }
:root[data-m-go] [data-m="prog-c-ec-h"][data-ec-fx="blur"]:not([data-m-in]) .prog-c-ec-hw { transform: translateY(.2em); filter: blur(7px); }
:root[data-m-go] [data-m="prog-c-ec-h"][data-ec-fx="blur"][data-m-in] .prog-c-ec-hw { animation-name: prog-c-ec-h-blur; }
:root[data-m-go] [data-m="prog-c-ec-h"][data-ec-fx="turn"]:not([data-m-in]) .prog-c-ec-hw { transform: perspective(600px) rotateX(-62deg); transform-origin: 50% 100%; }
:root[data-m-go] [data-m="prog-c-ec-h"][data-ec-fx="turn"][data-m-in] .prog-c-ec-hw { animation-name: prog-c-ec-h-turn; transform-origin: 50% 100%; }
:root[data-m-go] [data-m="prog-c-ec-h"][data-ec-fx="swing"]:not([data-m-in]) .prog-c-ec-hw { transform: perspective(700px) rotateY(52deg); transform-origin: 0 50%; }
:root[data-m-go] [data-m="prog-c-ec-h"][data-ec-fx="swing"][data-m-in] .prog-c-ec-hw { animation-name: prog-c-ec-h-swing; transform-origin: 0 50%; }
:root[data-m-go] [data-m="prog-c-ec-h"][data-ec-fx="drop"]:not([data-m-in]) .prog-c-ec-hw { transform: translateY(-.5em); }
:root[data-m-go] [data-m="prog-c-ec-h"][data-ec-fx="drop"][data-m-in] .prog-c-ec-hw { animation-name: prog-c-ec-h-drop; }
@keyframes prog-c-ec-h-rise { from { opacity: .35; transform: translateY(.42em); } to { opacity: 1; transform: none; } }
@keyframes prog-c-ec-h-skew { from { opacity: .35; transform: translateY(.36em) skewY(7deg); } to { opacity: 1; transform: none; } }
@keyframes prog-c-ec-h-wdth { from { opacity: .35; transform: scaleX(.72); } to { opacity: 1; transform: none; } }
@keyframes prog-c-ec-h-track { from { opacity: .35; transform: scaleX(1.28); } to { opacity: 1; transform: none; } }
@keyframes prog-c-ec-h-zoom { from { opacity: .35; transform: scale(1.12); filter: blur(4px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes prog-c-ec-h-blur { from { opacity: .35; transform: translateY(.2em); filter: blur(7px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes prog-c-ec-h-turn { from { opacity: .35; transform: perspective(600px) rotateX(-62deg); } to { opacity: 1; transform: perspective(600px) rotateX(0); } }
@keyframes prog-c-ec-h-swing { from { opacity: .35; transform: perspective(700px) rotateY(52deg); } to { opacity: 1; transform: perspective(700px) rotateY(0); } }
@keyframes prog-c-ec-h-drop { from { opacity: .35; transform: translateY(-.5em); } to { opacity: 1; transform: none; } }
:root[data-m-go] [data-m="prog-c-ec-lede"]:not([data-m-in]) { opacity: .35; transform: translateY(12px); }
:root[data-m-go] [data-m="prog-c-ec-lede"][data-m-in] {
  animation-name: prog-c-ec-lede; animation-duration: 700ms; animation-delay: 140ms; animation-timing-function: var(--ec-ease);
  animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal;
}
@keyframes prog-c-ec-lede { from { opacity: .35; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ================= native-control skins ================= */
.prog-c-ec-seg { display: flex; flex-wrap: wrap; margin: 0; padding: 0; min-width: 0; border: 1px solid #6f8478; background: #fff; }
.prog-c-ec-seg legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.prog-c-ec-seg label { position: relative; flex: 1 1 auto; cursor: pointer; }
.prog-c-ec-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.prog-c-ec-seg span { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 16px; text-align: center; font: 650 13px/1.25 var(--gft-font-display); color: var(--ec-night); transition: background-color 200ms, color 200ms; }
.prog-c-ec-seg input:checked + span { background: var(--ec-forest); color: #fff; }
.prog-c-ec-seg input:focus-visible + span { outline: 2px solid var(--ec-ochre); outline-offset: -4px; }
.prog-c-ec-seg--dark { background: transparent; border-color: #ffffff55; }
.prog-c-ec-seg--dark span { color: var(--ec-paper); }
.prog-c-ec-seg--dark input:checked + span { background: var(--ec-sage); color: var(--ec-night); }
.prog-c-ec-sl { display: grid; grid-template-columns: minmax(120px, .9fr) minmax(0, 2fr) 5ch; gap: 12px; align-items: center; font: 600 14px/1.3 var(--gft-font-display); }
.prog-c-ec-sl output { font: 700 14px var(--gft-font-mono); text-align: right; font-variant-numeric: tabular-nums; }
.prog-c-ec-sl input { width: 100%; margin: 0; accent-color: var(--ec-forest); }
.prog-c-ec-sl--dark { color: var(--ec-paper); }
.prog-c-ec-sl--dark input { accent-color: var(--ec-sage); }
.prog-c-ec-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.prog-c-ec-presets button { display: grid; gap: 2px; min-height: 48px; min-width: 76px; padding: 6px 12px; text-align: left; border: 1px solid #f6f4ef66; background: transparent; color: var(--ec-paper); }
.prog-c-ec-presets b { font: 700 13px/1.2 var(--gft-font-display); }
.prog-c-ec-presets span { font: 12px/1.2 var(--gft-font-mono); }
.prog-c-ec-presets button:hover { background: #ffffff14; }
.prog-c-ec-presets button[aria-pressed="true"] { background: var(--ec-sage); color: var(--ec-night); border-color: var(--ec-sage); }
.prog-c-ec-scrub { color: var(--ec-paper); display: grid; gap: 8px; }
.prog-c-ec-scrub label { color: #dbe6df; font-size: 12.5px; }
.prog-c-ec-scrub .mw-scrub__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.prog-c-ec-scrub .mw-scrub__play { min-height: 44px; min-width: 72px; padding: 6px 14px; border: 1px solid #f6f4ef88; background: transparent; color: var(--ec-paper); font: 650 13px var(--gft-font-display); }
.prog-c-ec-scrub .mw-scrub__play[aria-pressed="true"] { background: var(--ec-paper); color: var(--ec-night); }
.prog-c-ec-scrub input[type=range] { width: 100%; margin: 0; accent-color: var(--ec-sage); }
.prog-c-ec-scrub__out { min-width: 6ch; font: 700 14px var(--gft-font-mono); color: var(--ec-paper); text-align: right; }
.prog-c-ec-scrub__out::after { content: '%'; color: var(--ec-sage); }

/* the bead (shared): a paper dot with a sage halo */
.prog-c-ec-bead circle { fill: var(--ec-paper); stroke: var(--ec-night); stroke-width: 2; }
.prog-c-ec-bead circle.prog-c-ec-mk__halo, .prog-c-ec-tool__dot circle.prog-c-ec-mk__halo { fill: var(--ec-sage); fill-opacity: .32; stroke: none; }
g[data-m-live] { transform-box: fill-box; transform-origin: center; }

/* ================= #1 splash: the breakeven surface ================= */
.prog-c-ec-sp { position: absolute; inset: 0; display: flex; align-items: center; }
.prog-c-ec-sp__svg { width: 100%; height: 100%; }
.prog-c-ec-sp__svg--phone { display: none; }
.prog-c-ec-sp__c { fill: none; }
.prog-c-ec-sp__scan { opacity: 0; }
.prog-c-ec-sp__scan line { stroke: #f6f4ef; stroke-opacity: .55; stroke-width: 1.4; stroke-dasharray: 2 5; }
.prog-c-ec-sp__scan circle { fill: var(--ec-ochre); }
.prog-c-ec-sp__band { fill: #6bb68f; fill-opacity: .28; }
.prog-c-ec-sp__band--1 { fill: var(--ec-ochre); fill-opacity: .55; }
.prog-c-ec-sp__band--2 { fill: var(--ec-ochre); fill-opacity: .3; }
.prog-c-ec-sp__band--3 { fill: #f6f4ef; fill-opacity: .35; }
.prog-c-ec-sp__band--4 { fill: var(--ec-sage); fill-opacity: .6; }
.prog-c-ec-sp[data-reg="1"] .prog-c-ec-sp__band--1, .prog-c-ec-sp[data-reg="2"] .prog-c-ec-sp__band--2,
.prog-c-ec-sp[data-reg="3"] .prog-c-ec-sp__band--3, .prog-c-ec-sp[data-reg="4"] .prog-c-ec-sp__band--4 { fill-opacity: .95; }
.prog-c-ec-sp:not([data-reg]) .prog-c-ec-sp__band--1 { fill-opacity: .95; }
.prog-c-ec-cl__mv { stroke: #f6f4ef; stroke-opacity: .8; stroke-width: 1.3; stroke-dasharray: 3 4; transform: translateX(calc(var(--cx) * 1px)); transition: transform 380ms var(--ec-ease); }
.prog-c-ec-cl__md { transform: translate(calc(var(--cx) * 1px), calc(var(--cy) * 1px)); transition: transform 380ms var(--ec-ease); }
.prog-c-ec-hmk, .prog-c-ec-sp__scan, .prog-c-ec-sp__surf { overflow-anchor: none; }
/* load entrances: contours draw left to right, outer pair first and the breakeven contour last; points light in order */
:root[data-m-go] .prog-c-ec-sp__c {
  animation-name: prog-c-ec-cdraw; animation-duration: 420ms; animation-delay: calc(var(--k) * 140ms); animation-timing-function: var(--ec-ease);
  animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal;
}
@keyframes prog-c-ec-cdraw { from { clip-path: inset(-10px 100% -10px 0); opacity: .25; } to { clip-path: inset(-10px 0 -10px 0); opacity: 1; } }
.prog-c-ec-sp__pt { transform-box: fill-box; transform-origin: 50% 100%; }
:root[data-m-go] .prog-c-ec-sp__pt {
  animation-name: prog-c-ec-light; animation-duration: 340ms; animation-delay: calc(300ms + var(--k) * 140ms); animation-timing-function: var(--ec-ease);
  animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal;
}
@keyframes prog-c-ec-light { from { opacity: .15; transform: scale(.6); } to { opacity: 1; transform: none; } }
:root[data-m-go] .prog-c-ec-sp__call, :root[data-m-go] .prog-c-ec-sp .prog-c-ec-hmk {
  animation-name: prog-c-ec-fadein; animation-duration: 400ms; animation-delay: 560ms; animation-timing-function: ease-out;
  animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal;
}
@keyframes prog-c-ec-fadein { from { opacity: .2; } to { opacity: 1; } }
/* the accent line swings in on its left edge */
[data-splash="prog-c-economics"] h1 .gft-serif { display: inline-block; transform-origin: 0 50%; }
:root[data-m-go] [data-splash="prog-c-economics"] h1 .gft-serif {
  animation-name: prog-c-ec-h-swing; animation-duration: 760ms; animation-delay: 240ms; animation-timing-function: var(--ec-ease);
  animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal;
}
/* alive: a weft reading line crosses the surface every nine seconds, on screen only */
:root[data-m-go] .prog-c-ec-sp__scan[data-m-on] {
  animation-name: prog-c-ec-weft; animation-duration: 9s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: normal;
}
@keyframes prog-c-ec-weft { 0% { opacity: 0; transform: translateX(0); } 6% { opacity: 1; } 60% { opacity: 1; transform: translateX(580px); } 66%, 100% { opacity: 0; transform: translateX(580px); } }
/* hand-over: the surface steps back and dims as the splash leaves; the ribbon stays and the next section opens on it */
.prog-c-ec-sp__surf { transform-box: fill-box; transform-origin: 50% 60%; }
@supports (animation-timeline: view()) {
  :root[data-m-go] .prog-c-ec-sp__surf {
    animation-name: prog-c-ec-recede; animation-duration: 1ms; animation-timing-function: linear; animation-fill-mode: both;
    animation-timeline: --gft-splash; animation-range-start: exit 0%; animation-range-end: exit 75%;
  }
}
@keyframes prog-c-ec-recede { from { transform: scale(1); opacity: 1; } to { transform: scale(.94); opacity: .45; } }
/* the hero instrument: its own band under the actions */
.prog-c-ec-hero { margin-top: 24px; max-width: 520px; padding: 14px 18px 8px; border: 1px solid #a3c8b34d; background: #072d2bd9; display: grid; gap: 4px; }
.prog-c-ec-hero__ro { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 2px 18px; }
.prog-c-ec-hero__big { font: 850 clamp(2.6rem, 4vw, 3.6rem)/1 var(--gft-font-display); letter-spacing: -.06em; color: var(--ec-paper); min-width: 4ch; }
.prog-c-ec-hero__reg { font-size: 13px; line-height: 1.45; color: var(--ec-paper); max-width: none; padding-bottom: 6px; }
.prog-c-ec-hero__k { grid-column: 1 / -1; font-size: 12px; color: var(--ec-cap-d); max-width: none; }
.prog-c-ec-hero__ctl { display: grid; }
.prog-c-ec-hero__ctl span { font-size: 12px; color: var(--ec-cap-d); }
.prog-c-ec-hero__ctl input { width: 100%; margin: 0; accent-color: var(--ec-sage); }

/* ================= #2 regimes (night) ================= */
.prog-c-ec-sec--structure { padding-top: clamp(72px, 7vw, 104px); }
.prog-c-ec-rg { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, .9fr) minmax(170px, 210px); gap: 28px 32px; align-items: start; position: relative; padding-bottom: 96px; }
.prog-c-ec-rg__main { min-width: 0; }
.prog-c-ec-rg__chart svg { width: 100%; height: auto; touch-action: none; cursor: ew-resize; }
.prog-c-ec-band { fill: #6bb68f; opacity: .05; transition: opacity 300ms; }
.prog-c-ec-band--1 { fill: var(--ec-ochre); }
.prog-c-ec-band--2 { fill: var(--ec-ochre); opacity: .03; }
.prog-c-ec-rg[data-reg="1"] .prog-c-ec-band--1, .prog-c-ec-rg[data-reg="2"] .prog-c-ec-band--2,
.prog-c-ec-rg[data-reg="3"] .prog-c-ec-band--3, .prog-c-ec-rg[data-reg="4"] .prog-c-ec-band--4 { opacity: .2; }
.prog-c-ec-grid { stroke: #ffffff1c; }
.prog-c-ec-tk { fill: #dbe6df; font: 13px var(--gft-font-mono); }
.prog-c-ec-tk--be { fill: #f0d7a8; }
.prog-c-ec-target { stroke: var(--ec-sage); stroke-width: 1.4; stroke-dasharray: 6 5; }
.prog-c-ec-be { stroke: #f6f4ef; stroke-opacity: .55; stroke-dasharray: 3 5; }
.prog-c-ec-area { fill: #6bb68f; fill-opacity: .07; }
.prog-c-ec-curve { fill: none; stroke: var(--ec-paper); stroke-width: 2.6; }
.prog-c-ec-pt { fill: var(--ec-ochre); stroke: var(--ec-night); stroke-width: 2; }
.prog-c-ec-pl { fill: #f6f4ef; font: 600 13px var(--gft-font-mono); }
.prog-c-ec-mk { overflow-anchor: none; }
.prog-c-ec-mk__v { stroke: var(--ec-sage); stroke-width: 1.4; stroke-dasharray: 3 4; transform: translateX(calc(var(--mx) * 1px)); transition: transform 300ms var(--ec-ease); }
.prog-c-ec-mk__h { transform: translateY(calc(var(--my) * 1px)); transition: transform 300ms var(--ec-ease); }
.prog-c-ec-mk__h line { stroke: var(--ec-ochre); stroke-width: 1.2; stroke-dasharray: 2 4; transform: translateX(56px) scaleX(calc(var(--mx) - 56)); transform-box: view-box; transform-origin: 0 0; transition: transform 300ms var(--ec-ease); }
.prog-c-ec-mk__h path { fill: var(--ec-ochre); }
.prog-c-ec-mk__y { fill: #f0d7a8; font: 700 13px var(--gft-font-mono); }
.prog-c-ec-mk__dot { transform: translate(calc(var(--mx) * 1px), calc(var(--my) * 1px)); transition: transform 300ms var(--ec-ease); }
/* the ribbon: the regime tiles are the bands, at true widths, aligned under the chart's x range */
.prog-c-ec-rib { display: flex; gap: 3px; margin: 6px 0 0 calc(56 / 680 * 100%); width: calc(608 / 680 * 100%); }
.prog-c-ec-rib__b { position: relative; display: grid; align-content: start; gap: 2px; min-height: 76px; min-width: 0; padding: 14px 8px 8px; text-align: left; border: 0; background: #ffffff0d; color: var(--ec-paper); overflow: hidden; }
.prog-c-ec-rib__b::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 6px; background: var(--ec-sage); opacity: .55; }
.prog-c-ec-rib__b--1::before { background: var(--ec-ochre); opacity: .9; }
.prog-c-ec-rib__b--2::before { background: var(--ec-ochre); opacity: .55; }
.prog-c-ec-rib__b--3::before { background: var(--ec-paper); opacity: .6; }
.prog-c-ec-rib__b b { font: 800 15px/1 var(--gft-font-display); }
.prog-c-ec-rib__n { font: 600 12.5px/1.25 var(--gft-font-display); }
.prog-c-ec-rib__r { font: 12px/1.3 var(--gft-font-mono); color: var(--ec-cap-d); }
.prog-c-ec-rib__b[aria-pressed="true"] { background: #6bb68f33; box-shadow: inset 0 0 0 1px var(--ec-sage); }
.prog-c-ec-rib__b:hover { background: #ffffff1c; }
.prog-c-ec-rib__b:focus-visible { outline: 2px solid var(--ec-ochre); outline-offset: 2px; }
/* the active band's caption opens by clip-path inside one fixed box (all four share the cell) */
.prog-c-ec-caps { display: grid; margin: 14px 0 0 calc(56 / 680 * 100%); }
.prog-c-ec-cap { grid-area: 1 / 1; padding: 18px 20px; border-left: 3px solid var(--ec-sage); background: #0e4d4a8c; clip-path: inset(0 0 100% 0); opacity: 0; visibility: hidden; transition: clip-path 420ms var(--ec-ease), opacity 260ms, visibility 0s linear 420ms; }
.prog-c-ec-cap--warn { border-left-color: var(--ec-ochre); }
.prog-c-ec-cap__k { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #f0d7a8; }
.prog-c-ec-cap h3 { font-size: clamp(1.15rem, 1.5vw, 1.45rem); margin: 6px 0 8px; }
.prog-c-ec-cap__p { font-size: 14.5px; line-height: 1.6; color: #e8f0ec; }
.prog-c-ec-cap__m { margin-top: 10px; font-size: 12px; color: var(--ec-cap-d); }
.prog-c-ec-rg[data-reg="1"] .prog-c-ec-cap[data-n="1"], .prog-c-ec-rg[data-reg="2"] .prog-c-ec-cap[data-n="2"],
.prog-c-ec-rg[data-reg="3"] .prog-c-ec-cap[data-n="3"], .prog-c-ec-rg[data-reg="4"] .prog-c-ec-cap[data-n="4"] { clip-path: inset(0); opacity: 1; visibility: visible; transition: clip-path 520ms var(--ec-ease) 120ms, opacity 300ms 120ms, visibility 0s; }
/* read-out panel */
.prog-c-ec-rg__panel { display: grid; gap: 20px; min-width: 0; }
.prog-c-ec-ro { padding: 20px 22px; background: var(--ec-forest); border: 1px solid #6bb68f40; }
.prog-c-ec-ro__k { font-size: 12px; color: var(--ec-cap-d); text-transform: uppercase; letter-spacing: .06em; }
.prog-c-ec-ro__u { font: 800 2.1rem/1.1 var(--gft-font-display); letter-spacing: -.04em; margin-bottom: 10px; }
.prog-c-ec-ro__u span { color: var(--ec-sage); }
.prog-c-ec-ro__big { font: 850 clamp(3.2rem, 5vw, 4.8rem)/1 var(--gft-font-display); letter-spacing: -.06em; margin: 4px 0 10px; min-width: 4ch; }
.prog-c-ec-ro__reg { font-size: 15px; }
.prog-c-ec-ro__reg b { color: #a8dcc0; margin-right: 6px; }
.prog-c-ec-ro .gft-cite, .prog-c-ec-cl__ro .gft-cite, .prog-c-ec-card .gft-cite, .prog-c-ec-frac__ro .gft-cite { color: #cfe6d9 !important; }
.prog-c-ec-ro__lines { display: grid; margin-top: 8px; }
.prog-c-ec-ro__line { grid-area: 1 / 1; font-size: 13.5px; line-height: 1.5; color: #e8f0ec; opacity: 0; visibility: hidden; transition: opacity 260ms, visibility 0s linear 260ms; }
.prog-c-ec-rg[data-reg="1"] .prog-c-ec-ro__line[data-n="1"], .prog-c-ec-rg[data-reg="2"] .prog-c-ec-ro__line[data-n="2"],
.prog-c-ec-rg[data-reg="3"] .prog-c-ec-ro__line[data-n="3"], .prog-c-ec-rg[data-reg="4"] .prog-c-ec-ro__line[data-n="4"] { opacity: 1; visibility: visible; transition: opacity 300ms 120ms, visibility 0s; }
.prog-c-ec-ro__src { margin-top: 10px; font-size: 12px; color: var(--ec-cap-d); display: flex; align-items: center; gap: 4px; }
/* inputs rail, right edge */
.prog-c-ec-rail { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.prog-c-ec-rail__i { padding: 14px 14px 10px; border-top: 3px solid var(--ec-sage); background: #ffffff0a; }
.prog-c-ec-rail__i--a { border-top-color: var(--ec-ochre); }
.prog-c-ec-rail__v { font: 850 1.7rem/1.05 var(--gft-font-display); letter-spacing: -.04em; color: var(--ec-paper); }
.prog-c-ec-rail__go { display: block; min-height: 44px; padding: 0; border: 0; background: none; text-align: left; text-decoration: underline; text-decoration-color: #6bb68f; text-underline-offset: .18em; }
.prog-c-ec-rail__t { margin-top: 6px; font-size: 12.5px; line-height: 1.5; color: #e8f0ec; }
.prog-c-ec-rail__c { margin-top: 4px; }
/* entrance: bands and chips beat up into place from the left, 80 ms apart */
:root[data-m-go] [data-m="prog-c-ec-beat"]:not([data-m-in]) > * { opacity: .3; transform: translate(-14px, 10px) scaleY(.92); }
:root[data-m-go] [data-m="prog-c-ec-beat"][data-m-in] > * {
  animation-name: prog-c-ec-beat; animation-duration: 600ms; animation-delay: calc(var(--i, 0) * 80ms); animation-timing-function: var(--ec-ease);
  animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal;
}
@keyframes prog-c-ec-beat { from { opacity: .3; transform: translate(-14px, 10px) scaleY(.92); } to { opacity: 1; transform: none; } }
/* hand-over 2 → 3: the two wage inputs extend into bars that cross the selvedge */
.prog-c-ec-sec--structure { z-index: 2; }
.prog-c-ec-sec--structure > .gft-section__seam { display: none; }
.prog-c-ec-selv { position: absolute; left: calc(50% - 50vw); right: calc(50% - 50vw); bottom: calc(-1 * clamp(64px, 9vw, 136px) - 26px); display: grid; gap: 6px; pointer-events: none; z-index: 3; }
.prog-c-ec-selv__b { display: flex; align-items: center; justify-content: flex-end; height: 24px; padding-right: var(--gutter); font: 700 12.5px var(--gft-font-mono); color: var(--ec-night); overflow-anchor: none; }
.prog-c-ec-selv__b--a { background: var(--ec-ochre); width: 100%; }
.prog-c-ec-selv__b--b { background: var(--ec-sage); width: 100%; }
@supports (animation-timeline: view()) {
  :root[data-m-go] .prog-c-ec-selv__b {
    animation-name: prog-c-ec-selv; animation-duration: 1ms; animation-timing-function: linear; animation-fill-mode: both;
    animation-timeline: view(); animation-range-start: entry 0%; animation-range-end: cover 45%;
  }
}
@keyframes prog-c-ec-selv { from { clip-path: inset(0 0 0 80%); } to { clip-path: inset(0 0 0 0%); } }

/* ================= #3 labour (paper, not pinned) ================= */
.prog-c-ec-sec--labour { position: relative; overflow: clip; padding-top: clamp(84px, 8vw, 128px); }
.prog-c-ec-lb__weave { position: absolute; inset: 0; pointer-events: none; overflow-anchor: none; z-index: 0; }
.prog-c-ec-lb__weave svg { width: 100%; height: 100%; }
.prog-c-ec-lb__wline { fill: none; stroke-width: 1.4; opacity: var(--o, .1); }
.prog-c-ec-lb__wline--1 { stroke: var(--ec-forest); }
.prog-c-ec-lb__wline--2 { stroke: var(--ec-ochre); }
:root[data-m-go] .prog-c-ec-lb__weave[data-m-on] {
  animation-name: prog-c-ec-lbwave; animation-duration: 18s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate;
}
@keyframes prog-c-ec-lbwave { from { transform: translate3d(0, -6px, 0); } to { transform: translate3d(-16px, 6px, 0); } }
.prog-c-ec-lb { position: relative; z-index: 1; }
.prog-c-ec-lb__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-bottom: 14px; padding: 14px 18px; background: var(--ec-night); color: var(--ec-paper); border-top: 3px solid var(--ec-ochre); }
.prog-c-ec-lb__bar .prog-c-ec-seg { border-color: #6bb68f66; background: #0e4d4a66; }
.prog-c-ec-lb__bar .prog-c-ec-seg span { color: var(--ec-paper); font-size: 13.5px; }
.prog-c-ec-lb__bar .prog-c-ec-seg input:checked + span { background: var(--ec-ochre); color: var(--ec-night); font-weight: 750; }
.prog-c-ec-lb__quick { display: grid; grid-template-columns: auto minmax(120px, 160px) 4.5ch; gap: 10px; align-items: center; font: 600 13px/1.2 var(--gft-font-display); color: #e8f0ec; }
.prog-c-ec-lb__quick input { width: 100%; margin: 0; accent-color: var(--ec-ochre); }
.prog-c-ec-lb__quick output { font: 700 14px var(--gft-font-mono); color: #f0d7a8; text-align: right; }
.prog-c-ec-lb__unit { font-size: 13px; color: #dbe6df; min-height: 2.4em; display: flex; align-items: center; max-width: 34ch; }
.prog-c-ec-race { margin-inline: calc(50% - 50vw); display: grid; gap: 6px; }
.prog-c-ec-race__row { position: relative; height: 74px; background: #e8e2d4; overflow: hidden; cursor: pointer; transition: box-shadow 200ms; }
.prog-c-ec-race__row:focus-visible { outline: 2px solid var(--ec-ochre); outline-offset: -2px; }
.prog-c-ec-race__row[data-active="true"] { box-shadow: inset 6px 0 0 var(--ec-night); }
.prog-c-ec-race__fill { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(var(--v)); transition: transform 760ms var(--ec-ease); background: var(--ec-ochre); }
.prog-c-ec-race__row--kh .prog-c-ec-race__fill { background: var(--ec-sage); }
.prog-c-ec-race__row--avg .prog-c-ec-race__fill { background: var(--ec-indigo-l); }
.prog-c-ec-race__n { position: absolute; left: var(--gutter); top: 10px; font: 650 13.5px/1.2 var(--gft-font-mono); color: var(--ec-night); letter-spacing: .02em; display: inline-flex; align-items: center; gap: 8px; }
.prog-c-ec-race__tag { padding: 2px 7px; background: #072d2b18; border-radius: 2px; font-size: 12px; font-weight: 700; }
.prog-c-ec-race__v { position: absolute; inset: auto 0 8px 0; display: block; text-align: right; transform: translateX(calc((var(--v) - 1) * 100%)); transition: transform 760ms var(--ec-ease); padding-right: 14px; font: 850 clamp(1.5rem, 2.4vw, 2.2rem)/1.1 var(--gft-font-display); letter-spacing: -.04em; color: var(--ec-night); }
.prog-c-ec-race__row[data-out] .prog-c-ec-race__v { text-align: left; transform: translateX(calc(var(--v) * 100%)); padding-left: 14px; padding-right: 0; }
.prog-c-ec-race__row--avg[data-out] .prog-c-ec-race__v { font-size: 15px; font-family: var(--gft-font-mono); font-weight: 650; letter-spacing: 0; bottom: 14px; padding-left: var(--gutter); }
.prog-c-ec-race__ro { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 10px 0 22px; padding: 12px 16px; background: #ece6d8; border-left: 4px solid var(--ec-ochre); min-height: 3.4em; }
.prog-c-ec-race__ro-k { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ec-ochre-ink); }
.prog-c-ec-race__ro-txt { font-size: 14px; line-height: 1.45; color: var(--ec-night); max-width: none; margin: 0; }
:root[data-m-go] [data-m="prog-c-ec-race"]:not([data-m-in]) > * { opacity: .35; transform: translateX(calc(var(--s) * 60px)); }
:root[data-m-go] [data-m="prog-c-ec-race"][data-m-in] > * {
  animation-name: prog-c-ec-race; animation-duration: 640ms; animation-timing-function: var(--ec-ease); animation-fill-mode: backwards;
  animation-iteration-count: 1; animation-direction: normal;
}
:root[data-m-go] [data-m="prog-c-ec-race"][data-m-in] > :nth-child(2) { animation-delay: 90ms; }
:root[data-m-go] [data-m="prog-c-ec-race"][data-m-in] > :nth-child(3) { animation-delay: 180ms; }
@keyframes prog-c-ec-race { from { opacity: .35; transform: translateX(calc(var(--s) * 60px)); } to { opacity: 1; transform: none; } }
/* horizontal 3-step tab rail + stacked note card paired in the left column beside the curve */
.prog-c-ec-lb__low { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 28px clamp(28px, 3.6vw, 52px); align-items: start; }
.prog-c-ec-lb__left { display: grid; gap: 14px; min-width: 0; }
.prog-c-ec-lb__rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.prog-c-ec-lb__tab { display: grid; gap: 2px; min-height: 54px; padding: 8px 12px; text-align: left; border: 1px solid #25302e44; background: #ece6d8; color: var(--ec-night); cursor: pointer; transition: background-color 200ms, color 200ms, border-color 200ms; }
.prog-c-ec-lb__tab span { font: 700 12px/1.2 var(--gft-font-mono); color: var(--ec-ochre-ink); }
.prog-c-ec-lb__tab b { font: 700 13.5px/1.2 var(--gft-font-display); }
.prog-c-ec-lb__tab[aria-pressed="true"] { background: var(--ec-night); color: var(--ec-paper); border-color: var(--ec-night); box-shadow: inset 0 -3px 0 var(--ec-ochre); }
.prog-c-ec-lb__tab[aria-pressed="true"] span { color: #f0d7a8; }
.prog-c-ec-notes { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; background: #fffdf8; border: 1px solid #d6cfbf; border-left: 4px solid var(--ec-ochre); }
.prog-c-ec-note { grid-area: 1 / 1; position: relative; padding: 18px 20px; opacity: 0; visibility: hidden; transition: opacity 240ms, visibility 0s linear 240ms; }
.prog-c-ec-note::before, .prog-c-ec-note::after { display: none; }
.prog-c-ec-lb:not([data-lb-step]) .prog-c-ec-note[data-lb-card="1"],
.prog-c-ec-lb[data-lb-step="0"] .prog-c-ec-note[data-lb-card="0"],
.prog-c-ec-lb[data-lb-step="1"] .prog-c-ec-note[data-lb-card="1"],
.prog-c-ec-lb[data-lb-step="2"] .prog-c-ec-note[data-lb-card="2"] { opacity: 1; visibility: visible; transition: opacity 280ms 80ms, visibility 0s; }
.prog-c-ec-note .gft-eyebrow { color: var(--ec-ochre-ink); font-size: 12.5px; }
.prog-c-ec-note h3 { font-size: clamp(1.2rem, 1.5vw, 1.45rem); margin: 6px 0 8px; color: var(--ec-night); }
.prog-c-ec-note > :last-child { font-size: 15.5px; line-height: 1.62; color: #1b2926; }
.prog-c-ec-lb__ctl { display: grid; gap: 14px; padding: 20px 22px; background: #ece6d8; border-top: 3px solid var(--ec-forest); }
.prog-c-ec-lb__cross { font: 750 clamp(1.15rem, 1.6vw, 1.5rem)/1.3 var(--gft-font-display); letter-spacing: -.02em; }
.prog-c-ec-lb__cross b { color: #2a6b4f; white-space: nowrap; }
.prog-c-ec-lb__cross .gft-mono { font-size: 12px; font-weight: 500; color: var(--ec-cap-p); }
.prog-c-ec-lb__sum { font-size: 14px; line-height: 1.6; min-height: 6.4em; color: var(--ec-night); }
.prog-c-ec-lb__cap { font-size: 12px; color: var(--ec-cap-p); line-height: 1.6; }
.prog-c-ec-eff svg { width: 100%; height: auto; }
.prog-c-ec-eff__g { stroke: #0e4d4a1f; }
.prog-c-ec-eff__tk { fill: #2c3d36; font: 13px var(--gft-font-mono); }
.prog-c-ec-eff__ax { stroke: #25302e; }
.prog-c-ec-eff__c { fill: none; stroke: var(--ec-night); stroke-width: 2.6; }
.prog-c-ec-eff__kh { transform: translateY(calc(var(--ky) * 1px)); transition: transform 400ms var(--ec-ease); }
.prog-c-ec-eff__kh line { stroke: var(--ec-leaf); stroke-width: 2; stroke-dasharray: 7 5; }
.prog-c-ec-eff__kh text { fill: #2a6b4f; font: 700 13px var(--gft-font-mono); }
.prog-c-ec-eff__now { transform: translate(calc(var(--ex) * 1px), calc(var(--ey) * 1px)); transition: transform 300ms var(--ec-ease); }
.prog-c-ec-eff__now circle { fill: none; stroke: var(--ec-ochre); stroke-width: 2.5; }
.prog-c-ec-eff__x { transform: translateX(calc(var(--cx) * 1px)); transition: transform 400ms var(--ec-ease); }
.prog-c-ec-eff__x line { stroke: var(--ec-leaf); stroke-dasharray: 2 4; }
.prog-c-ec-eff__xy { transform: translateY(calc(var(--cy) * 1px)); transition: transform 400ms var(--ec-ease); }
.prog-c-ec-eff__shut path { fill: var(--ec-ochre); }
.prog-c-ec-eff__shut { overflow-anchor: none; }
:root[data-m-go] .prog-c-ec-eff__shut[data-m-on] {
  animation-name: prog-c-ec-shuttle; animation-duration: 7s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate;
}
@keyframes prog-c-ec-shuttle { from { transform: translateX(0); } to { transform: translateX(calc(var(--sx) * 1px)); } }
.prog-c-ec-eff__shut { transform-box: view-box; transform-origin: 0 0; }
.prog-c-ec-eff__cap { display: grid; gap: 6px; margin-top: 6px; }
.prog-c-ec-eff__axes { display: grid; height: 1.6em; perspective: 400px; font: 700 13px/1.6 var(--gft-font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ec-night); }
.prog-c-ec-eff__a, .prog-c-ec-eff__b { grid-area: 1 / 1; transform-origin: 50% 50%; backface-visibility: hidden; }
.prog-c-ec-eff__b { opacity: 0; color: var(--ec-ochre-ink); }
.prog-c-ec-eff__cap > .gft-mono { font-size: 12px; color: var(--ec-cap-p); line-height: 1.55; }
/* hand-over 3 → 4: the axis label flips from efficiency to utilisation as the curve passes up the screen */
@supports (animation-timeline: view()) {
  :root[data-m-go] .prog-c-ec-eff__a {
    animation-name: prog-c-ec-flipout; animation-duration: 1ms; animation-timing-function: linear; animation-fill-mode: both;
    animation-timeline: view(); animation-range-start: cover 52%; animation-range-end: cover 62%;
  }
  :root[data-m-go] .prog-c-ec-eff__b {
    animation-name: prog-c-ec-flipin; animation-duration: 1ms; animation-timing-function: linear; animation-fill-mode: both;
    animation-timeline: view(); animation-range-start: cover 65%; animation-range-end: cover 75%;
  }
}
@keyframes prog-c-ec-flipout { from { transform: rotateX(0); opacity: 1; } to { transform: rotateX(90deg); opacity: 0; } }
@keyframes prog-c-ec-flipin { from { transform: rotateX(-90deg); opacity: 0; } to { transform: rotateX(0); opacity: 1; } }

/* ================= #4 utilisation (paper, sticky, steps left, stage right 60%) ================= */
.prog-c-ec-sec--util { padding-top: clamp(24px, 3vw, 48px); }
.prog-c-ec-sec--util .prog-c-ec-head { margin-bottom: clamp(14px, 2vw, 24px); }
.prog-c-ec-sec--labour { padding-bottom: clamp(40px, 4vw, 64px); }
.prog-c-ec-sec--levers, .prog-c-ec-sec--capital { padding-bottom: clamp(48px, 5vw, 72px); }
.prog-c-ec-sec--capital, .prog-c-ec-sec--gates { padding-top: clamp(56px, 6vw, 88px); }
.prog-c-ec-ut-intro { position: relative; margin-bottom: 18px; padding: 12px 16px; background: #ece6d8; border: 1px solid #d6cfbf; border-left: 4px solid var(--ec-ochre); overflow: hidden; }
.prog-c-ec-ut-intro__svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.prog-c-ec-ut-intro__strip { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 18px; }
.prog-c-ec-ut-intro__item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 6px 10px; background: #fffdf8cc; border-top: 2px solid var(--ec-ochre); }
.prog-c-ec-ut-intro__item--tg { border-top-color: var(--ec-leaf); background: #3f8f6b14; }
.prog-c-ec-ut-intro__item span { font: 700 12px/1.2 var(--gft-font-mono); color: var(--ec-ochre-ink); }
.prog-c-ec-ut-intro__item--tg span { color: #2a6b4f; }
.prog-c-ec-ut-intro__item b { font: 750 14px/1.2 var(--gft-font-display); color: var(--ec-night); }
.prog-c-ec-ut-intro__item em { font: 700 13px/1.2 var(--gft-font-mono); font-style: normal; color: var(--ec-cap-p); margin-left: auto; }
.prog-c-ec-ut.mw-steps { grid-template-columns: minmax(0, .66fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); }
.prog-c-ec-ut .mw-steps__visual { order: 2; top: 3svh; height: auto; min-height: 0; align-items: start; padding-top: 6px; }
.prog-c-ec-ut__stage { display: grid; gap: 10px; }
.prog-c-ec-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.prog-c-ec-chips legend { float: left; width: 100%; margin-bottom: 6px; font-size: 12px; color: var(--ec-cap-p); }
.prog-c-ec-chip-r { position: relative; cursor: pointer; }
.prog-c-ec-chip-r input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.prog-c-ec-chip-r span { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 14px; border: 1px solid #25302e66; font: 13px var(--gft-font-mono); color: var(--ec-night); background: #fff; transition: background-color 200ms, color 200ms; }
.prog-c-ec-chip-r b { font-family: var(--gft-font-display); font-weight: 700; }
.prog-c-ec-chip-r em { font-style: normal; }
.prog-c-ec-chip-r input:checked + span { background: var(--ec-night); color: var(--ec-paper); border-color: var(--ec-night); }
.prog-c-ec-chip-r--tg input:checked + span { background: #2a6b4f; border-color: #2a6b4f; color: #fff; }
.prog-c-ec-chip-r input:focus-visible + span { outline: 2px solid var(--ec-ochre); outline-offset: 2px; }
.prog-c-ec-ut__svg { width: 100%; height: auto; max-height: 56svh; }
.prog-c-ec-ut__g { stroke: #0e4d4a1c; }
.prog-c-ec-ut__tk { fill: #2c3d36; font: 13px var(--gft-font-mono); }
.prog-c-ec-ut__tk--be { fill: var(--ec-ochre-ink); }
.prog-c-ec-ut__tk--tg { fill: #2a6b4f; font-weight: 700; }
.prog-c-ec-ut__ax { stroke: #25302e; }
.prog-c-ec-ut__be { stroke: var(--ec-ochre); stroke-dasharray: 4 5; stroke-width: 1.4; }
.prog-c-ec-ut__tgt line { stroke: var(--ec-leaf); stroke-width: 3; }
:root[data-m-go] .prog-c-ec-ut__tgt[data-m-on] { animation-name: prog-c-ec-glint; animation-duration: 3.2s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; }
@keyframes prog-c-ec-glint { from { opacity: .55; } to { opacity: 1; } }
.prog-c-ec-ut__c { fill: none; stroke: #25302e; stroke-opacity: .35; stroke-width: 2; }
.prog-c-ec-ut__thread { fill: none; stroke: var(--ec-night); stroke-width: 3.2; transition: clip-path 760ms var(--ec-ease); clip-path: inset(-12px var(--t3) -12px -12px); }
.prog-c-ec-ut__bar rect { fill: var(--ec-ochre); transform-box: fill-box; transform-origin: 50% 0; transition: transform 640ms var(--ec-ease), opacity 400ms; opacity: .32; }
.prog-c-ec-ut__bl { fill: var(--ec-night); font: 600 13px var(--gft-font-mono); transition: opacity 400ms; }
.prog-c-ec-ut__tag { transition: opacity 400ms; }
.prog-c-ec-ut__tag text { fill: var(--ec-ochre-ink); }
.prog-c-ec-ut__tag line { stroke: var(--ec-ochre); stroke-dasharray: 2 4; }
.prog-c-ec-ut__plate rect { transform-box: fill-box; transform-origin: 0 50%; transition: transform 700ms var(--ec-ease), opacity 400ms; }
.prog-c-ec-ut__plate-a { fill: #25302e; fill-opacity: .18; }
.prog-c-ec-ut__plate-b { fill: var(--ec-leaf); }
.prog-c-ec-ut__plate text { transition: opacity 400ms; }
.prog-c-ec-ut__bead { transform: translate(calc(var(--bx) * 1px), calc(var(--by) * 1px)); }
.prog-c-ec-ut__bead .prog-c-ec-bead circle { stroke: var(--ec-night); }
.prog-c-ec-ut__bead .prog-c-ec-bead circle:not(.prog-c-ec-mk__halo) { fill: var(--ec-ochre); }
.prog-c-ec-ut__ro { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 18px; align-items: end; padding: 12px 18px; background: var(--ec-forest); color: var(--ec-paper); min-height: 96px; }
.prog-c-ec-ut__big { grid-row: 1 / 3; font: 850 clamp(2.6rem, 4vw, 3.6rem)/1 var(--gft-font-display); letter-spacing: -.06em; min-width: 4ch; }
.prog-c-ec-ut__who { font-size: 12.5px; color: #e8f0ec; max-width: none; }
.prog-c-ec-ut__gap { font-size: 12.5px; color: #f0d7a8; max-width: none; }
/* step states (data-ec-on, set by the scroll steps when motion is allowed, or by the plant chips) */
.prog-c-ec-ut[data-ec-on="0"] .prog-c-ec-ut__thread { clip-path: inset(-12px var(--t0) -12px -12px); }
.prog-c-ec-ut[data-ec-on="1"] .prog-c-ec-ut__thread { clip-path: inset(-12px var(--t1) -12px -12px); }
.prog-c-ec-ut[data-ec-on="2"] .prog-c-ec-ut__thread { clip-path: inset(-12px var(--t2) -12px -12px); }
.prog-c-ec-ut[data-ec-on="0"] .prog-c-ec-ut__bar:not(.prog-c-ec-ut__bar--0) rect,
.prog-c-ec-ut[data-ec-on="1"] .prog-c-ec-ut__bar--2 rect { transform: scaleY(0); }
.prog-c-ec-ut[data-ec-on="0"] .prog-c-ec-ut__bar:not(.prog-c-ec-ut__bar--0) text,
.prog-c-ec-ut[data-ec-on="1"] .prog-c-ec-ut__bar--2 text { opacity: 0; }
.prog-c-ec-ut:is([data-ec-on="0"], [data-ec-on="1"], [data-ec-on="2"]) .prog-c-ec-ut__bar rect { opacity: 1; }
.prog-c-ec-ut:not([data-ec-on="2"]) .prog-c-ec-ut__tag { opacity: 0; }
.prog-c-ec-ut:not([data-ec-on]) .prog-c-ec-ut__tag { opacity: 1; }
.prog-c-ec-ut:is([data-ec-on="0"], [data-ec-on="1"], [data-ec-on="2"]) .prog-c-ec-ut__plate rect { transform: scaleX(0); }
.prog-c-ec-ut:is([data-ec-on="0"], [data-ec-on="1"], [data-ec-on="2"]) .prog-c-ec-ut__plate text { opacity: 0; }
.prog-c-ec-ut__track > .prog-c-ec-ut__step { min-height: 58svh; align-content: start; padding-block: 10px 28px; }
.prog-c-ec-ut__track > .prog-c-ec-ut__step:first-child { min-height: 52svh; padding-top: 6px; }
.prog-c-ec-ut__track > .prog-c-ec-ut__step:last-child { min-height: 78svh; }
.prog-c-ec-ut__step h3 { font-size: clamp(1.4rem, 2.1vw, 2rem); margin: 10px 0 14px; max-width: 18ch; }
.prog-c-ec-ut__step .prog-c-ec-t { font-size: 15.5px; line-height: 1.66; color: var(--ec-cap-p); }
.prog-c-ec-ut__step .gft-eyebrow { color: var(--ec-ochre-ink); }

/* ================= #5 ledger (paper) ================= */
.prog-c-ec-sec--ledger { padding-top: clamp(40px, 5vw, 72px); }
.prog-c-ec-lg__bar { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.prog-c-ec-lg__count { font-size: 13px; color: var(--ec-cap-p); }
.prog-c-ec-lg__grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 28px; align-items: start; }
.prog-c-ec-lg__sheet { position: relative; min-width: 0; background: #fffdf8; border: 1px solid #d6cfbf; box-shadow: 0 1px 0 #d6cfbf, 0 18px 40px -30px #25302e55; }
.prog-c-ec-tbl { width: 100%; border-collapse: collapse; }
.prog-c-ec-tbl th, .prog-c-ec-tbl td { padding: 14px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid #e4ddcc; font-size: 14px; line-height: 1.45; }
.prog-c-ec-tbl thead th { font: 600 12px var(--gft-font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ec-cap-p); background: #f1ece0; }
.prog-c-ec-tbl tbody th { font-weight: 700; color: var(--ec-night); }
.prog-c-ec-tbl__fig { font-family: var(--gft-font-mono); font-size: 13.5px !important; color: var(--ec-night); }
.prog-c-ec-tbl__role { color: var(--ec-cap-p); font-size: 13.5px !important; }
.prog-c-ec-tbl__st { background-image: repeating-linear-gradient(45deg, #0e4d4a08 0 6px, transparent 6px 12px), repeating-linear-gradient(-45deg, #c98a2b08 0 6px, transparent 6px 12px); white-space: nowrap; }
.prog-c-ec-tbl__st small { display: block; margin-top: 4px; font-size: 12px; color: var(--ec-cap-p); }
.prog-c-ec-tbl tbody tr { cursor: pointer; transition: background-color 180ms; }
.prog-c-ec-tbl tbody tr:hover { background: #0e4d4a0d; }
.prog-c-ec-tbl tbody tr[aria-selected="true"] { background: #0e4d4a17; box-shadow: inset 4px 0 0 var(--ec-forest); }
.prog-c-ec-tbl tbody tr:focus-visible { outline: 2px solid var(--ec-ochre); outline-offset: -2px; }
.prog-c-ec-tbl tbody tr:first-child th { color: var(--ec-ochre-ink); }
.prog-c-ec-sort { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; }
th[aria-sort="ascending"] .prog-c-ec-sort span::after { content: '↑'; }
th[aria-sort="descending"] .prog-c-ec-sort span::after { content: '↓'; }
.prog-c-ec-chip { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; font: 700 12px/1.4 var(--gft-font-mono); border: 1px solid currentColor; }
.prog-c-ec-chip i { position: absolute; inset: -3px; border-radius: 2px; box-shadow: 0 0 0 2px currentColor; opacity: 0; }
:root[data-m-go] tr:not([aria-selected="true"]) .prog-c-ec-chip i[data-m-live] { animation-name: none; }
.prog-c-ec-chip--sourced { color: #2a6b4f; background: #3f8f6b1a; }
.prog-c-ec-chip--estimate { color: var(--ec-ochre-ink); background: #c98a2b1f; }
.prog-c-ec-chip--assumption { color: var(--ec-indigo); background: #2c3e7a14; }
tr[aria-selected="true"] .prog-c-ec-chip i { opacity: .5; }
/* the reading line stays on the reading band while the sheet passes it (sticky inside an overlay, no scroll script) */
.prog-c-ec-lg__read { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.prog-c-ec-lg__read i { position: sticky; top: 50svh; display: block; height: 34px; margin-top: -17px; background: linear-gradient(90deg, #c98a2b18, #c98a2b0d 88%, transparent); border-left: 3px solid var(--ec-ochre); opacity: .85; }
/* each status chip lights as its row crosses the reading band (its own view timeline, opacity only) */
.prog-c-ec-chip__lit { position: absolute; inset: -5px; background: currentColor; opacity: 0; pointer-events: none; text-decoration: none; overflow-anchor: none; }
@supports (animation-timeline: view()) {
  :root[data-m-go] .prog-c-ec-chip__lit {
    animation-name: prog-c-ec-chiplit; animation-duration: 1ms; animation-timing-function: linear; animation-fill-mode: both;
    animation-timeline: view(); animation-range-start: cover 42%; animation-range-end: cover 58%;
  }
}
@keyframes prog-c-ec-chiplit { 0%, 100% { opacity: 0; } 50% { opacity: .18; } }
/* entrance: rows combed in top to bottom, 40 ms apart; the first row docks from above (the nameplate strip) */
:root[data-m-go] [data-m="prog-c-ec-rows"]:not([data-m-in]) tbody tr { opacity: .35; transform: translateY(-10px); }
:root[data-m-go] [data-m="prog-c-ec-rows"][data-m-in] tbody tr {
  animation-name: prog-c-ec-comb; animation-duration: 520ms; animation-delay: calc(min(var(--i, 0), 6) * 40ms); animation-timing-function: var(--ec-ease);
  animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal;
}
:root[data-m-go] [data-m="prog-c-ec-rows"][data-m-in] tbody tr:first-child { animation-name: prog-c-ec-dock; animation-duration: 700ms; }
@keyframes prog-c-ec-comb { from { opacity: .35; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes prog-c-ec-dock { from { opacity: .4; transform: translateY(-46px); } to { opacity: 1; transform: none; } }
/* the read-out card: forest, a third of the frame, sticky beside the sheet */
.prog-c-ec-card { position: sticky; top: 12svh; display: grid; gap: 10px; padding: 24px; background: var(--ec-forest); color: var(--ec-paper); min-height: 420px; align-content: start; }
.prog-c-ec-card .gft-eyebrow { color: #cfe6d9; }
.prog-c-ec-card h3 { font-size: 1.45rem; min-height: 2.2em; }
.prog-c-ec-card__fig { font: 800 1.3rem/1.3 var(--gft-font-display); letter-spacing: -.02em; color: #f0d7a8; min-height: 2.6em; }
.prog-c-ec-card__src { font-size: 12px; color: #cfe6d9; }
.prog-c-ec-card__txt { font-size: 14px; line-height: 1.6; color: #e8f0ec; min-height: 7.2em; }
.prog-c-ec-spark { display: grid; gap: 8px; min-height: 104px; align-content: start; }
.prog-c-ec-spark__r { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 12.5px; }
.prog-c-ec-spark__r span { color: #e8f0ec; }
.prog-c-ec-spark__r i { height: 8px; background: #ffffff1f; overflow: hidden; }
.prog-c-ec-spark__r b { display: block; height: 100%; background: var(--ec-sage); transform-origin: 0 50%; transform: scaleX(var(--v)); transition: transform 600ms var(--ec-ease); }
.prog-c-ec-spark__r em { font: 700 12.5px var(--gft-font-mono); font-style: normal; color: var(--ec-paper); }
/* hand-over 5 → 6: two rows lift out of the sheet; the night rises behind them at the seam */
.prog-c-ec-lift { display: grid; justify-items: center; gap: 0; margin: clamp(56px, 7vw, 96px) auto 0; max-width: 640px; }
.prog-c-ec-lift__r { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; width: 100%; padding: 14px 18px; background: #fffdf8; border: 1px solid #d6cfbf; box-shadow: 0 14px 30px -18px #25302e66; overflow-anchor: none; }
.prog-c-ec-lift__r span { font-size: 13px; color: var(--ec-cap-p); }
.prog-c-ec-lift__r b { grid-row: 2; font: 850 clamp(1.3rem, 2.2vw, 1.9rem)/1.1 var(--gft-font-display); letter-spacing: -.03em; color: var(--ec-night); }
.prog-c-ec-lift__r em { grid-row: 1 / 3; grid-column: 2; align-self: center; font: 12px var(--gft-font-mono); font-style: normal; color: var(--ec-ochre-ink); text-transform: uppercase; letter-spacing: .08em; }
.prog-c-ec-lift__bar { display: block; width: 100%; height: 4px; margin: 10px 0; background: var(--ec-night); }
@supports (animation-timeline: view()) {
  :root[data-m-go] .prog-c-ec-lift__r--n, :root[data-m-go] .prog-c-ec-lift__r--d {
    animation-name: prog-c-ec-lift; animation-duration: 1ms; animation-timing-function: linear; animation-fill-mode: both;
    animation-timeline: view(); animation-range-start: entry 40%; animation-range-end: cover 50%;
  }
}
@keyframes prog-c-ec-lift { from { transform: translateY(14px) scale(.98); opacity: .7; } to { transform: translateY(0) scale(1); opacity: 1; } }

/* ================= #6 interlude (night, the one breath, sticky 100svh) ================= */
.prog-c-ec-int { position: relative; isolation: isolate; background: var(--ec-night); color: var(--ec-paper); min-height: 154svh; padding-block: 0; view-timeline-name: --ec-int; view-timeline-axis: block; }
.prog-c-ec-int__pin { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; overflow: clip; padding-block: clamp(12px, 2svh, 24px); }
.prog-c-ec-int__pin > .gft-container { width: 100%; }
.prog-c-ec-int__weave { position: absolute; inset: -4% -2%; z-index: -1; pointer-events: none; overflow-anchor: none; }
.prog-c-ec-int__weave svg { width: 100%; height: 100%; }
.prog-c-ec-int__line { fill: none; stroke-width: 1.3; opacity: var(--o); }
.prog-c-ec-int__line--1 { stroke: #6bb68f; }
.prog-c-ec-int__line--2 { stroke: #f6f4ef; }
.prog-c-ec-int__line--3 { stroke: #c98a2b; }
:root[data-m-go] .prog-c-ec-int__weave[data-m-on] { animation-name: prog-c-ec-wave; animation-duration: 16s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; }
@keyframes prog-c-ec-wave { from { transform: translate3d(0, -6px, 0) scaleY(1); } to { transform: translate3d(-18px, 8px, 0) scaleY(1.03); } }
.prog-c-ec-int__top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 12px 40px; align-items: end; margin-bottom: clamp(12px, 1.8svh, 20px); }
.prog-c-ec-int__head { grid-template-columns: 1fr; margin-bottom: 0; }
.prog-c-ec-int__head .prog-c-ec-head__t { font-size: clamp(2rem, 3.4vw, 3.3rem); max-width: 19ch; letter-spacing: -.05em; line-height: 1.04; }
.prog-c-ec-int__head .gft-eyebrow { color: var(--ec-sage); }
.prog-c-ec-int__lede { font-size: clamp(1rem, 1.2vw, 1.15rem); line-height: 1.48; color: #dbe6df; max-width: 44ch; margin-bottom: 0; }
.prog-c-ec-frac { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px, 340px); gap: 18px clamp(24px, 3.5vw, 44px); align-items: stretch; padding: clamp(14px, 1.8svh, 20px) clamp(18px, 2.4vw, 28px); background: #0a3836cc; border: 1px solid #6bb68f44; border-top: 3px solid var(--ec-sage); }
.prog-c-ec-frac__body { display: grid; gap: 8px; min-width: 0; align-content: center; }
.prog-c-ec-frac__num-row, .prog-c-ec-frac__den-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; padding: 6px 12px; background: #072d2b99; border-left: 3px solid var(--ec-ochre); }
.prog-c-ec-frac__den-row { border-left-color: var(--ec-sage); }
.prog-c-ec-frac__role { font: 700 12px/1.2 var(--gft-font-mono); letter-spacing: .08em; text-transform: uppercase; color: #f0d7a8; }
.prog-c-ec-frac__den-row .prog-c-ec-frac__role { color: var(--ec-sage); }
.prog-c-ec-frac__num, .prog-c-ec-frac__den { font: 850 clamp(1.8rem, 3vw, 2.8rem)/1.05 var(--gft-font-display); letter-spacing: -.05em; text-align: left; margin: 0; }
.prog-c-ec-frac__num span { font-weight: 500; font-size: .52em; letter-spacing: -.02em; color: #cfe6d9; }
.prog-c-ec-frac__den { color: var(--ec-sage); font-family: var(--gft-font-serif); font-style: italic; font-weight: 400; letter-spacing: -.02em; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.prog-c-ec-frac__den span { display: inline; margin-top: 0; font: 12.5px var(--gft-font-mono); font-style: normal; letter-spacing: 0; color: #dbe6df; }
.prog-c-ec-vin { position: relative; height: 72px; margin-block: 4px 2px; }
.prog-c-ec-vin__ghost { position: absolute; left: 10%; width: 80%; top: -88px; height: 112px; overflow: visible; transform-origin: 50% 100%; opacity: 0; pointer-events: none; }
.prog-c-ec-vin__ghost path { fill: none; stroke: var(--ec-paper); stroke-width: 2; stroke-opacity: .7; }
@supports (animation-timeline: view()) {
  :root[data-m-go] .prog-c-ec-vin__ghost {
    animation-name: prog-c-ec-flatten; animation-duration: 1ms; animation-timing-function: linear; animation-fill-mode: both;
    animation-timeline: --ec-int; animation-range-start: entry 30%; animation-range-end: cover 38%;
  }
}
@keyframes prog-c-ec-flatten { from { transform: scaleY(1); opacity: .8; } 85% { opacity: .5; } to { transform: scaleY(.02); opacity: 0; } }
.prog-c-ec-vin__bar { position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--ec-paper); transform-origin: 0 50%; }
:root[data-m-go] [data-m="prog-c-ec-vin"]:not([data-m-in]) .prog-c-ec-vin__bar { clip-path: inset(0 70% 0 0); opacity: .5; }
:root[data-m-go] [data-m="prog-c-ec-vin"][data-m-in] .prog-c-ec-vin__bar {
  animation-name: prog-c-ec-vindraw; animation-duration: 800ms; animation-timing-function: var(--ec-ease); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal;
}
@keyframes prog-c-ec-vindraw { from { clip-path: inset(0 70% 0 0); opacity: .5; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
.prog-c-ec-vin__stops { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.prog-c-ec-vin__stops li { position: absolute; top: -8px; left: calc(var(--u) * 1%); }
.prog-c-ec-vin__stops i { display: block; width: 2px; height: 22px; background: var(--ec-ochre); translate: -1px 0; }
.prog-c-ec-vin__stops .is-tg i { background: var(--ec-sage); width: 3px; height: 30px; }
.prog-c-ec-vin__stops span { position: absolute; top: 28px; left: 0; translate: -50% 0; white-space: nowrap; font: 12.5px var(--gft-font-mono); color: #e8f0ec; }
.prog-c-ec-vin__stops b { display: block; font-family: var(--gft-font-display); font-weight: 700; font-size: 13px; color: var(--ec-paper); }
.prog-c-ec-vin__stops li:first-child span { translate: -10% 0; }
.prog-c-ec-vin__fpy { position: absolute; left: 60%; right: 0; top: -18px; height: 8px; display: flex; pointer-events: none; }
.prog-c-ec-vin__fpy-m { position: absolute; left: 0; width: calc(10 / 40 * 100%); height: 100%; border: 1px solid #f0d7a8; border-bottom: 0; }
.prog-c-ec-vin__fpy-c { position: absolute; left: calc(30 / 40 * 100%); right: 0; height: 100%; border: 1px solid var(--ec-sage); border-bottom: 0; }
/* the bead rides the vinculum: a full-width carrier translated by the utilisation share of its own width */
.prog-c-ec-vin__bead { position: absolute; left: 0; right: 0; top: 3px; height: 0; transform: translateX(70%); overflow-anchor: none; pointer-events: none; transition: transform 380ms var(--ec-ease); }
.prog-c-ec-vin__bead i { position: absolute; left: -11px; top: -11px; width: 22px; height: 22px; border-radius: 50%; background: var(--ec-paper); box-shadow: 0 0 0 2px var(--ec-night), 0 0 0 10px #6bb68f55; }
@supports (animation-timeline: view()) {
  :root[data-m-go] .prog-c-ec-vin__bead {
    animation-name: prog-c-ec-ride; animation-duration: 1ms; animation-timing-function: linear; animation-fill-mode: both;
    animation-timeline: --ec-int; animation-range-start: cover 25%; animation-range-end: cover 75%;
  }
}
:root[data-m-go] .prog-c-ec-int[data-play] .prog-c-ec-vin__bead {
  animation-name: prog-c-ec-ride; animation-duration: 5200ms; animation-timing-function: linear; animation-fill-mode: both;
  animation-timeline: auto; animation-range-start: normal; animation-range-end: normal; animation-iteration-count: 1; animation-direction: normal;
}
.prog-c-ec-int[data-int-stop="0"] .prog-c-ec-vin__bead { animation-name: none !important; transform: translateX(10.83%); }
.prog-c-ec-int[data-int-stop="1"] .prog-c-ec-vin__bead { animation-name: none !important; transform: translateX(33.7%); }
.prog-c-ec-int[data-int-stop="2"] .prog-c-ec-vin__bead { animation-name: none !important; transform: translateX(48.9%); }
.prog-c-ec-int[data-int-stop="3"] .prog-c-ec-vin__bead { animation-name: none !important; transform: translateX(70%); }
@keyframes prog-c-ec-ride {
  0%, 14% { transform: translateX(10.83%); }
  28%, 40% { transform: translateX(33.7%); }
  54%, 66% { transform: translateX(48.9%); }
  82%, 100% { transform: translateX(70%); }
}
.prog-c-ec-frac__ro { padding: 18px 20px; border: 1px solid #6bb68f55; background: #0e4d4acc; display: grid; gap: 6px; align-content: center; }
.prog-c-ec-frac__ro > .gft-mono { font-size: 12px; color: var(--ec-cap-d); }
.prog-c-ec-frac__big { font: 850 clamp(2.6rem, 4.4vw, 4rem)/1 var(--gft-font-display); letter-spacing: -.06em; min-width: 4ch; }
.prog-c-ec-frac__at { font-size: 13.5px; color: #f0d7a8; min-height: 1.6em; }
.prog-c-ec-frac__stops { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 2px; }
.prog-c-ec-frac__chip { min-height: 36px; padding: 4px 6px; border: 1px solid #6bb68f55; background: #072d2b99; color: var(--ec-paper); font: 700 12px/1.2 var(--gft-font-mono); cursor: pointer; }
.prog-c-ec-frac__chip[aria-pressed="true"] { background: var(--ec-sage); color: var(--ec-night); border-color: var(--ec-sage); }
.prog-c-ec-frac__run { justify-self: start; margin-top: 4px; min-height: 44px; padding: 8px 16px; border: 1px solid var(--ec-paper); background: transparent; color: var(--ec-paper); font: 650 13px var(--gft-font-display); }
.prog-c-ec-frac__run:hover { background: #ffffff14; }
.prog-c-ec-int__fpy { margin-top: clamp(10px, 1.4svh, 16px); max-width: 82ch; font-size: 13px; line-height: 1.55; color: #e8f0ec; }
.prog-c-ec-int__fpyk { margin-right: 6px; color: #f0d7a8; text-transform: uppercase; letter-spacing: .08em; }
/* hand-over 6 → 7: the first-pass-yield tick drops and lengthens into Lever 01's detection track */
.prog-c-ec-int__drop { position: absolute; left: 50%; bottom: 0; width: 2px; height: 84px; background: linear-gradient(#f0d7a8, #a9b6e6); transform-origin: 50% 0; overflow-anchor: none; }
@supports (animation-timeline: view()) {
  :root[data-m-go] .prog-c-ec-int__drop {
    animation-name: prog-c-ec-drop; animation-duration: 1ms; animation-timing-function: linear; animation-fill-mode: both;
    animation-timeline: view(); animation-range-start: entry 0%; animation-range-end: cover 60%;
  }
}
@keyframes prog-c-ec-drop { from { transform: scaleY(.1); } to { transform: scaleY(1); } }

/* ================= #7 levers (night, indigo data layer, sticky, stage left) ================= */
.prog-c-ec-sec--levers { background: var(--ec-night); padding-top: clamp(88px, 10svh, 124px); }
.prog-c-ec-sec--levers::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 70% 50% at 30% 40%, #2c3e7a55, transparent 70%); }
.prog-c-ec-lv.mw-steps { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 4vw, 64px); }
.prog-c-ec-lv .mw-steps__visual { top: 5svh; height: 90svh; min-height: 0; align-items: center; }
.prog-c-ec-lv__stage { display: grid; gap: 14px; padding: 24px; background: #0b2340e6; border: 1px solid #a9b6e640; }
.prog-c-ec-lv__state { font-size: 12.5px; color: #cdd5f2; letter-spacing: .06em; text-transform: uppercase; }
.prog-c-ec-lv__views { display: grid; }
.prog-c-ec-view { grid-area: 1 / 1; display: grid; gap: 8px; align-content: start; transition: opacity 360ms, clip-path 520ms var(--ec-ease), visibility 0s; }
.prog-c-ec-view figcaption { font-size: 12px; color: #cdd5f2; line-height: 1.5; }
.prog-c-ec-view--1, .prog-c-ec-view--2 { opacity: 0; visibility: hidden; clip-path: inset(0 0 0 100%); transition: opacity 150ms, clip-path 200ms, visibility 0s linear 200ms; }
.prog-c-ec-lv[data-ec-on="0"] .prog-c-ec-view--1, .prog-c-ec-lv[data-ec-on="1"] .prog-c-ec-view--2 { opacity: 1; visibility: visible; clip-path: inset(0); transition: opacity 280ms 60ms, clip-path 460ms var(--ec-ease) 60ms, visibility 0s; }
.prog-c-ec-lv[data-ec-on="0"] .prog-c-ec-view--3, .prog-c-ec-lv[data-ec-on="1"] .prog-c-ec-view--3 { opacity: 0; visibility: hidden; clip-path: inset(0 100% 0 0); transition: opacity 150ms, clip-path 200ms, visibility 0s linear 200ms; }
.prog-c-ec-gate { position: relative; height: clamp(220px, 32svh, 320px); background: linear-gradient(#2c3e7a33, #2c3e7a11); border: 1px solid #a9b6e633; overflow: hidden; }
.prog-c-ec-gate canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.prog-c-ec-gate__line { position: absolute; left: 0; right: 0; top: 50%; height: 3px; background: var(--ec-sage); box-shadow: 0 0 14px #6bb68f88; }
.prog-c-ec-gate__k, .prog-c-ec-gate__e { position: absolute; left: 14px; font-size: 12.5px; color: #e8f0ec; background: #0b2340d9; padding: 4px 8px; }
.prog-c-ec-gate__k { top: calc(50% - 38px); }
.prog-c-ec-gate__e { bottom: 12px; }
.prog-c-ec-gate b { color: var(--ec-paper); }
.prog-c-ec-gate__e b { color: #f0d7a8; }
.prog-c-ec-view svg { width: 100%; height: auto; max-height: 34svh; }
.prog-c-ec-dial__arc { fill: none; stroke: #a9b6e655; stroke-width: 14; }
.prog-c-ec-dial__ok { fill: none; stroke: var(--ec-sage); stroke-width: 14; }
.prog-c-ec-dial__t { stroke: #cdd5f2; stroke-width: 2; }
.prog-c-ec-dial__l { fill: #e8f0ec; font: 14px var(--gft-font-mono); }
.prog-c-ec-dial__n { transform: rotate(var(--ang)); transform-box: view-box; transform-origin: 200px 200px; transition: transform 600ms var(--ec-ease); }
.prog-c-ec-dial__n line { stroke: #f0d7a8; stroke-width: 4; stroke-linecap: round; }
.prog-c-ec-dial__n circle { fill: var(--ec-paper); }
.prog-c-ec-dial__n > g { transform-box: view-box; transform-origin: 200px 200px; }
:root[data-m-go] .prog-c-ec-lv[data-ec-on="1"] .prog-c-ec-dial__n > g[data-m-on] { animation-name: prog-c-ec-sway; animation-duration: 2.6s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; }
@keyframes prog-c-ec-sway { from { transform: rotate(-1deg); } to { transform: rotate(1deg); } }
.prog-c-ec-peg__ax line { stroke: #cdd5f2; }
.prog-c-ec-peg__ax text { fill: #e8f0ec; font: 13px var(--gft-font-mono); }
.prog-c-ec-peg__eur line { stroke: var(--ec-paper); stroke-width: 5; }
.prog-c-ec-peg__eur text { fill: var(--ec-paper); font: 700 13px var(--gft-font-mono); }
.prog-c-ec-peg__usd rect { fill: #a9b6e6; fill-opacity: .35; stroke: #a9b6e6; }
.prog-c-ec-peg__usd text { fill: #cdd5f2; font: 13px var(--gft-font-mono); }
:root[data-m-go] .prog-c-ec-peg__usd g[data-m-on] { animation-name: prog-c-ec-ribbon; animation-duration: 4s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; }
@keyframes prog-c-ec-ribbon { from { transform: scaleY(.86); opacity: .75; } to { transform: scaleY(1); opacity: 1; } }
.prog-c-ec-peg__dot { transform: translateX(calc(var(--px) * 1px)); transition: transform 300ms var(--ec-ease); }
.prog-c-ec-peg__dot line { stroke: #f0d7a8; stroke-dasharray: 3 4; }
.prog-c-ec-peg__dot circle { fill: #f0d7a8; stroke: var(--ec-night); stroke-width: 2; }
/* the leak waterfall at the stage's foot: it builds one bar per step */
.prog-c-ec-wf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, 210px); gap: 18px; align-items: end; padding-top: 14px; border-top: 1px solid #a9b6e633; }
.prog-c-ec-wf__plot { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.prog-c-ec-wf__col { display: grid; gap: 4px; text-align: center; transition: opacity 400ms; }
.prog-c-ec-wf__well { position: relative; height: 96px; background: #ffffff0a; overflow: hidden; }
.prog-c-ec-wf__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; transform-origin: 50% 100%; transform: translateY(calc(var(--s) * -100%)) scaleY(var(--h)); transition: transform 600ms var(--ec-ease); background: var(--ec-indigo-l); }
.prog-c-ec-wf__col[data-k="a"] .prog-c-ec-wf__bar { background: var(--ec-ochre); }
.prog-c-ec-wf__col[data-k="b"] .prog-c-ec-wf__bar { background: var(--ec-sage); }
.prog-c-ec-wf__col[data-k="t"] .prog-c-ec-wf__bar { background: var(--ec-paper); }
.prog-c-ec-wf__col b { font: 700 14px var(--gft-font-mono); }
.prog-c-ec-wf__col span { font-size: 12.5px; color: #cdd5f2; }
.prog-c-ec-wf__ref { position: absolute; left: 0; right: 0; top: calc(96px * (1 - 30 / 36)); border-top: 1px dashed #f0d7a8; z-index: 1; pointer-events: none; }
.prog-c-ec-wf__ref span { position: absolute; right: 0; top: -20px; font: 12px var(--gft-font-mono); color: #f0d7a8; }
.prog-c-ec-wf__big { font: 850 clamp(2.4rem, 3.6vw, 3.4rem)/1 var(--gft-font-display); letter-spacing: -.05em; display: grid; gap: 6px; }
.prog-c-ec-wf__big small { font: 12.5px/1.45 var(--gft-font-display); letter-spacing: 0; color: #cdd5f2; }
.prog-c-ec-wf__col, .prog-c-ec-wf__big { transition: opacity 400ms, visibility 0s; }
.prog-c-ec-lv[data-ec-on="0"] .prog-c-ec-wf__col:not([data-k="a"]) > :not(.prog-c-ec-wf__well), .prog-c-ec-lv[data-ec-on="1"] .prog-c-ec-wf__col:is([data-k="c"], [data-k="t"]) > :not(.prog-c-ec-wf__well) { opacity: 0; visibility: hidden; transition: opacity 200ms, visibility 0s linear 200ms; }
.prog-c-ec-lv[data-ec-on="0"] .prog-c-ec-wf__col:not([data-k="a"]) .prog-c-ec-wf__bar, .prog-c-ec-lv[data-ec-on="1"] .prog-c-ec-wf__col:is([data-k="c"], [data-k="t"]) .prog-c-ec-wf__bar { transform: translateY(calc(var(--s) * -100%)) scaleY(0); }
.prog-c-ec-lv:is([data-ec-on="0"], [data-ec-on="1"]) .prog-c-ec-wf__big { opacity: 0; visibility: hidden; transition: opacity 200ms, visibility 0s linear 200ms; }
.prog-c-ec-lv__track > .prog-c-ec-lvs { min-height: 92svh; padding-inline-start: 1.6rem; }
.prog-c-ec-lv__track > .prog-c-ec-lvs:last-child { min-height: 112svh; }
.prog-c-ec-lvs h3 { font-size: clamp(1.35rem, 2vw, 1.9rem); margin: 10px 0 12px; max-width: 20ch; }
.prog-c-ec-lvs .prog-c-ec-t { font-size: 15px; line-height: 1.62; color: #e8f0ec; }
.prog-c-ec-lvs .gft-eyebrow { color: #cdd5f2; }
.prog-c-ec-lvs__l { display: block; margin-top: 18px; font-size: 12.5px; color: #e8f0ec; }
.prog-c-ec-lvs input { width: 100%; margin: 4px 0 0; accent-color: #a9b6e6; }
.prog-c-ec-lvs__sc { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: #cdd5f2; }
.prog-c-ec-lvs__ro { margin-top: 14px; padding: 14px 16px; background: #0b2340; border-left: 3px solid #a9b6e6; }
.prog-c-ec-lvs__big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font: 850 clamp(1.9rem, 2.8vw, 2.6rem)/1.05 var(--gft-font-display); letter-spacing: -.045em; }
.prog-c-ec-lvs__big small { font: 13px var(--gft-font-display); letter-spacing: 0; color: #cdd5f2; }
.prog-c-ec-lvs__txt { margin-top: 8px; font-size: 13.5px; line-height: 1.55; color: #e8f0ec; min-height: 4.7em; }
.prog-c-ec-lv__note { margin-top: 28px; max-width: 90ch; font-size: 12px; line-height: 1.6; color: var(--ec-cap-d); }

/* ================= #8 capital (night, ochre benchmark light, not pinned) ================= */
.prog-c-ec-sec--capital { background: var(--ec-night); --ec-c: var(--ec-ochre); }
.prog-c-ec-sec--capital::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 45% at 70% 30%, #c98a2b26, transparent 70%); }
.prog-c-ec-sec--capital .prog-c-ec-head__t { font-size: clamp(2rem, 3.2vw, 3.2rem); max-width: 22ch; }
.prog-c-ec-cp { --tw: 64%; position: relative; }
.prog-c-ec-cp__top { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px, .85fr); gap: 20px 32px; align-items: stretch; margin-bottom: 24px; }
.prog-c-ec-cp__ctl { display: grid; grid-template-columns: 1fr; gap: 12px; align-content: start; padding: 18px 20px; background: #0a3836b3; border: 1px solid #f0d7a840; border-top: 3px solid var(--ec-ochre); margin-top: 0; width: 100%; }
.prog-c-ec-cp__card { display: grid; gap: 6px; align-content: center; padding: 18px 22px; background: var(--ec-forest); border: 1px solid #6bb68f55; border-left: 4px solid var(--ec-ochre); min-height: 136px; }
.prog-c-ec-cp__card-k { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: #f0d7a8; }
.prog-c-ec-cp__card-big { font: 850 clamp(1.85rem, 2.8vw, 2.5rem)/1.05 var(--gft-font-display); letter-spacing: -.04em; color: var(--ec-paper); min-height: 1.15em; }
.prog-c-ec-cp__card-sub { font-size: 13.5px; line-height: 1.5; color: #e8f0ec; min-height: 3em; }
.prog-c-ec-cp__axis { position: relative; width: var(--tw); height: 56px; perspective: 500px; background: #0a383699; padding-inline: 10px; border-top: 1px solid #f0d7a844; }
.prog-c-ec-cp__ax { position: absolute; inset: 0 10px; border-bottom: 1.5px solid #f0d7a888; transform-origin: 50% 100%; }
.prog-c-ec-cp__ax em { position: absolute; bottom: 5px; translate: -50% 0; font: 700 13.5px var(--gft-font-mono); font-style: normal; color: #fff; background: #072d2bd9; padding: 1px 6px; border-radius: 2px; }
.prog-c-ec-cp__ax em:first-child { translate: 0 0; }
.prog-c-ec-cp__ax em:nth-last-of-type(1) { translate: -100% 0; }
.prog-c-ec-cp__ax small { position: absolute; left: 0; top: 4px; font: 700 12px var(--gft-font-mono); color: #f0d7a8; text-transform: uppercase; letter-spacing: .08em; }
.prog-c-ec-cp__ax--fx { opacity: 0; }
/* hand-over 7 → 8: the XAF-per-dollar axis zooms out and re-ticks into XAF billion */
@supports (animation-timeline: view()) {
  :root[data-m-go] .prog-c-ec-cp__ax--fx {
    animation-name: prog-c-ec-axout; animation-duration: 1ms; animation-timing-function: linear; animation-fill-mode: both;
    animation-timeline: view(); animation-range-start: entry 30%; animation-range-end: cover 40%;
  }
  :root[data-m-go] .prog-c-ec-cp__ax--bn {
    animation-name: prog-c-ec-axin; animation-duration: 1ms; animation-timing-function: linear; animation-fill-mode: both;
    animation-timeline: view(); animation-range-start: entry 30%; animation-range-end: cover 40%;
  }
}
@keyframes prog-c-ec-axout { 0% { opacity: 1; transform: scaleX(.42) rotateX(0); } 45% { opacity: 1; } 70%, 100% { opacity: 0; transform: scaleX(1) rotateX(80deg); } }
@keyframes prog-c-ec-axin { 0%, 45% { opacity: 0; transform: rotateX(-80deg); } 100% { opacity: 1; transform: rotateX(0); } }
.prog-c-ec-cp__scale { position: relative; display: grid; grid-template-columns: var(--tw) minmax(0, 1fr); }
.prog-c-ec-cp__bl { grid-column: 1; grid-row: 1 / span 4; position: relative; pointer-events: none; z-index: 2; }
.prog-c-ec-cp__blc { position: absolute; inset: 0; transform: translateX(calc(var(--bl) * 100%)); transition: transform 300ms var(--ec-ease); overflow-anchor: none; }
.prog-c-ec-cp__blc::before { content: ''; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: #f6e7c8; box-shadow: 0 0 10px #f0d7a888; }
.prog-c-ec-cp__blc b { position: absolute; top: 0; left: -3px; width: 8px; height: 60px; background: linear-gradient(transparent, #fff, transparent); opacity: 0; }
:root[data-m-go] .prog-c-ec-cp__blc b[data-m-on] { animation-name: prog-c-ec-glide; animation-duration: 5s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: normal; }
@keyframes prog-c-ec-glide { 0% { opacity: 0; translate: 0 0; } 15% { opacity: .9; } 85% { opacity: .9; } 100% { opacity: 0; translate: 0 420px; } }
.prog-c-ec-cp__row { display: contents; }
.prog-c-ec-cp__row:nth-child(2) > * { grid-row: 1; }
.prog-c-ec-cp__row:nth-child(3) > * { grid-row: 2; }
.prog-c-ec-cp__row:nth-child(4) > * { grid-row: 3; }
.prog-c-ec-cp__row:nth-child(5) > * { grid-row: 4; }
.prog-c-ec-cp__track { grid-column: 1; position: relative; min-height: 112px; padding: 14px 10px 18px 0; border-bottom: 1px solid #ffffff14; cursor: pointer; }
.prog-c-ec-cp__note { grid-column: 2; position: relative; padding: 14px 0 18px 36px; border-bottom: 1px solid #ffffff14; }
.prog-c-ec-cp__note::before { content: ''; position: absolute; left: -28px; top: 54px; width: 56px; height: 1px; background: #f0d7a8; }
.prog-c-ec-cp__note::after { content: ''; position: absolute; left: 26px; top: 50px; width: 9px; height: 9px; border-radius: 50%; background: var(--ec-ochre); }
.prog-c-ec-cp__note .gft-eyebrow { color: #f0d7a8; padding-left: 12px; }
.prog-c-ec-cp__note > :last-child { margin-top: 6px; font-size: 14.5px; line-height: 1.6; color: #e8f0ec; }
.prog-c-ec-cp__lab { position: relative; z-index: 3; display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 14px; color: #e8f0ec; margin-bottom: 10px; padding: 4px 10px; background: #072d2bf2; border-left: 3px solid var(--ec-ochre); border-radius: 2px; }
.prog-c-ec-cp__lab b { display: inline; font-size: 15.5px; color: var(--ec-paper); }
.prog-c-ec-cp__lane { position: relative; min-height: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.prog-c-ec-cp__lane--ticks { height: 52px; display: block; }
.prog-c-ec-cp__bar { display: block; height: 26px; width: 100%; background: linear-gradient(90deg, #c98a2b, #e3a94b); transform-origin: 0 50%; transform: scaleX(var(--w)); }
.prog-c-ec-cp__pill { position: relative; z-index: 3; padding: 3px 9px; background: #072d2bf2; border: 1px solid #f0d7a866; font: 700 12.5px var(--gft-font-mono); color: #f0d7a8; }
.prog-c-ec-cp__tail { position: relative; z-index: 3; display: inline-block; margin-top: 4px; padding: 2px 8px; background: #072d2bf2; font-size: 12.5px; color: #f0d7a8; }
.prog-c-ec-cp__band { position: absolute; bottom: 8px; height: 28px; background: #c98a2bb3; border: 1.5px solid #f0d7a8; }
.prog-c-ec-cp__tick { position: absolute; bottom: 4px; width: 3px; height: 38px; background: var(--ec-paper); z-index: 3; }
.prog-c-ec-cp__tick em { position: absolute; left: 8px; top: 4px; white-space: nowrap; padding: 2px 6px; background: #072d2bf2; border: 1px solid #ffffff33; font: 700 13px var(--gft-font-mono); font-style: normal; color: var(--ec-paper); }
/* the focused venture: a dashed, empty outline whose dashes crawl (it is waiting for quotes) */
.prog-c-ec-cp__tbd { position: relative; display: block; height: 26px; width: 34%; border-left: 2px dashed #f6e7c8; border-right: 2px dashed #f6e7c8; background: #c98a2b1f; overflow: hidden; }
.prog-c-ec-cp__tbd i { position: absolute; left: -24px; right: -24px; top: 0; height: 2px; background: repeating-linear-gradient(90deg, #f6e7c8 0 8px, transparent 8px 14px); }
.prog-c-ec-cp__tbd i.is-b { top: auto; bottom: 0; }
:root[data-m-go] .prog-c-ec-cp__tbd i[data-m-on] { animation-name: prog-c-ec-crawl; animation-duration: 1.4s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: normal; }
@keyframes prog-c-ec-crawl { from { transform: translateX(0); } to { transform: translateX(14px); } }
.prog-c-ec-cp__gates { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; perspective: 600px; }
.prog-c-ec-cp__gates li { display: grid; gap: 2px; padding: 10px 12px; border-top: 3px solid var(--ec-ochre); background: #072d2bd9; font-size: 13.5px; color: #e8f0ec; transform-origin: 50% 100%; overflow-anchor: none; position: relative; z-index: 3; }
.prog-c-ec-cp__gates b { font: 850 1.5rem/1 var(--gft-font-display); color: var(--ec-paper); }
/* hand-over 8 → 9: the phase chips stand up as heddles */
@supports (animation-timeline: view()) {
  :root[data-m-go] .prog-c-ec-cp__gates li {
    animation-name: prog-c-ec-standup; animation-duration: 1ms; animation-timing-function: linear; animation-fill-mode: both;
    animation-timeline: view(); animation-range-start: entry 40%; animation-range-end: cover 38%;
  }
}
@keyframes prog-c-ec-standup { from { transform: rotateX(48deg); } to { transform: rotateX(0); } }
.prog-c-ec-cp[data-focus="a"] .prog-c-ec-cp__row[data-r="a"] .prog-c-ec-cp__track,
.prog-c-ec-cp[data-focus="b"] .prog-c-ec-cp__row[data-r="b"] .prog-c-ec-cp__track,
.prog-c-ec-cp[data-focus="c"] .prog-c-ec-cp__row[data-r="c"] .prog-c-ec-cp__track { box-shadow: inset 4px 0 0 var(--ec-ochre); padding-left: 14px; background: #c98a2b12; }
.prog-c-ec-cp[data-focus="a"] .prog-c-ec-cp__row[data-r="a"] .prog-c-ec-cp__note::after,
.prog-c-ec-cp[data-focus="b"] .prog-c-ec-cp__row[data-r="b"] .prog-c-ec-cp__note::after,
.prog-c-ec-cp[data-focus="c"] .prog-c-ec-cp__row[data-r="c"] .prog-c-ec-cp__note::after { box-shadow: 0 0 0 5px #c98a2b55; }
/* entrance: rows open upward from the shed line */
:root[data-m-go] [data-m="prog-c-ec-shed"]:not([data-m-in]) :is(.prog-c-ec-cp__track, .prog-c-ec-cp__note) { opacity: .35; clip-path: inset(45% 0 0 0); }
:root[data-m-go] [data-m="prog-c-ec-shed"][data-m-in] :is(.prog-c-ec-cp__track, .prog-c-ec-cp__note) {
  animation-name: prog-c-ec-shed; animation-duration: 640ms; animation-timing-function: var(--ec-ease); animation-fill-mode: backwards;
  animation-iteration-count: 1; animation-direction: normal;
}
:root[data-m-go] [data-m="prog-c-ec-shed"][data-m-in] .prog-c-ec-cp__row:nth-child(3) :is(.prog-c-ec-cp__track, .prog-c-ec-cp__note) { animation-delay: 80ms; }
:root[data-m-go] [data-m="prog-c-ec-shed"][data-m-in] .prog-c-ec-cp__row:nth-child(4) :is(.prog-c-ec-cp__track, .prog-c-ec-cp__note) { animation-delay: 160ms; }
:root[data-m-go] [data-m="prog-c-ec-shed"][data-m-in] .prog-c-ec-cp__row:nth-child(5) :is(.prog-c-ec-cp__track, .prog-c-ec-cp__note) { animation-delay: 240ms; }
@keyframes prog-c-ec-shed { from { opacity: .35; clip-path: inset(45% 0 0 0); } to { opacity: 1; clip-path: inset(0); } }
.prog-c-ec-cp__sl { display: grid; grid-template-columns: auto minmax(0, 1fr) 9ch; gap: 12px; align-items: center; }
.prog-c-ec-cp__sl label { font-size: 13px; color: #e8f0ec; }
.prog-c-ec-cp__sl input { width: 100%; margin: 0; accent-color: var(--ec-ochre); }
.prog-c-ec-cp__sl output { font-size: 14.5px; font-weight: 700; color: #f0d7a8; text-align: right; }
.prog-c-ec-cp__ro { grid-column: 1 / -1; font-size: 14px; line-height: 1.55; color: #e8f0ec; min-height: 3.1em; }

/* ================= #9 gates (night, sticky overlay loom) ================= */
.prog-c-ec-sec--gates { padding-bottom: clamp(40px, 5vw, 72px); }
.prog-c-ec-gx .mw-steps__visual { display: grid; grid-template-columns: minmax(0, .4fr) minmax(0, .6fr); grid-template-rows: auto minmax(0, 1fr); gap: 12px 32px; padding-block: 6svh 4svh; }
.prog-c-ec-gx__panel { grid-column: 2; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 20px; align-items: center; padding: 12px 16px; background: #0a3836cc; border: 1px solid #6bb68f40; border-top: 3px solid var(--ec-ochre); }
.prog-c-ec-gx__state { font: 700 15px/1.2 var(--gft-font-mono); color: #f6e7c8; text-transform: uppercase; letter-spacing: .06em; }
.prog-c-ec-gx__tests { grid-column: 1; display: grid; min-height: 3em; }
.prog-c-ec-gx__test { grid-area: 1 / 1; font-size: 15.5px; line-height: 1.52; color: #f6f4ef; opacity: 0; visibility: hidden; transition: opacity 300ms, visibility 0s linear 300ms; }
.prog-c-ec-gx:not([data-ec-on]) .prog-c-ec-gx__test[data-for="3"], .prog-c-ec-gx[data-ec-on="0"] .prog-c-ec-gx__test[data-for="0"], .prog-c-ec-gx[data-ec-on="1"] .prog-c-ec-gx__test[data-for="1"],
.prog-c-ec-gx[data-ec-on="2"] .prog-c-ec-gx__test[data-for="2"], .prog-c-ec-gx[data-ec-on="3"] .prog-c-ec-gx__test[data-for="3"] { opacity: 1; visibility: visible; transition: opacity 360ms 160ms, visibility 0s; }
.prog-c-ec-gx__step { grid-column: 2; grid-row: 1 / 3; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; pointer-events: auto; }
.prog-c-ec-gx__step button { min-height: 46px; min-width: 48px; padding: 6px 14px; border: 1px solid #f6f4ef99; background: #072d2bcc; color: var(--ec-paper); font: 700 15px var(--gft-font-display); cursor: pointer; }
.prog-c-ec-gx__step button[aria-pressed="true"] { background: var(--ec-paper); color: var(--ec-night); }
.prog-c-ec-gx__nodes { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; }
.prog-c-ec-gx__nodes a { display: inline-grid; place-items: center; min-width: 46px; min-height: 46px; font: 700 15px var(--gft-font-mono); color: var(--ec-paper); text-decoration: none; border: 1px solid #ffffff44; background: #072d2b99; }
.prog-c-ec-gx__nodes a[data-active="true"] { background: var(--ec-ochre); color: var(--ec-night); border-color: var(--ec-ochre); }
.prog-c-ec-gx__loom { grid-column: 2; position: relative; min-height: 0; display: grid; align-content: end; }
.prog-c-ec-gx__loom svg { width: 100%; height: auto; max-height: 54svh; }
.prog-c-ec-gx__contour { stroke: #f0d7a8; stroke-width: 2.2; stroke-dasharray: 6 5; stroke-opacity: .9; }
.prog-c-ec-gx__lbl { fill: #f6f4ef; font: 700 14.5px var(--gft-font-mono); }
.prog-c-ec-gx__lbl--c { fill: #f6e7c8; }
.prog-c-ec-gx__ramp-ghost { fill: none; stroke: #ffffff38; stroke-width: 2.4; }
.prog-c-ec-gx__bar { fill: #c98a2b; fill-opacity: .22; stroke: #e3a94b; stroke-width: 1.8; transition: fill-opacity 400ms, opacity 400ms; }
.prog-c-ec-gx__bar--2, .prog-c-ec-gx__bar--3 { fill: #3f8f6b; fill-opacity: .26; stroke: #6bb68f; }
.prog-c-ec-gx[data-ec-on="0"] .prog-c-ec-gx__bar--0,
.prog-c-ec-gx[data-ec-on="1"] .prog-c-ec-gx__bar--1 { fill-opacity: .42; stroke-width: 2.6; }
.prog-c-ec-gx[data-ec-on="2"] .prog-c-ec-gx__bar--2,
.prog-c-ec-gx[data-ec-on="3"] .prog-c-ec-gx__bar--3,
.prog-c-ec-gx:not([data-ec-on]) .prog-c-ec-gx__bar--3 { fill-opacity: .46; stroke-width: 2.6; }
.prog-c-ec-gx[data-ec-on="0"] :is(.prog-c-ec-gx__bar--1, .prog-c-ec-gx__bar--2, .prog-c-ec-gx__bar--3),
.prog-c-ec-gx[data-ec-on="1"] :is(.prog-c-ec-gx__bar--2, .prog-c-ec-gx__bar--3),
.prog-c-ec-gx[data-ec-on="2"] .prog-c-ec-gx__bar--3 { fill-opacity: .08; opacity: .45; }
.prog-c-ec-gx__tread line { stroke: var(--ec-paper); stroke-width: 8; stroke-linecap: round; transition: stroke 400ms, opacity 400ms; }
.prog-c-ec-gx__tread--0 line { stroke: #f0d7a8; }
.prog-c-ec-gx__tread--1 line { stroke: var(--ec-ochre); }
.prog-c-ec-gx__tread--2 line, .prog-c-ec-gx__tread--3 line { stroke: var(--ec-sage); }
.prog-c-ec-gx__post line { stroke: #dbe6df; stroke-width: 3; }
.prog-c-ec-gx__post rect { fill: #f0d7a8; }
.prog-c-ec-gx__post { transition: transform 600ms var(--ec-ease), opacity 400ms; transform: translateY(-14px); }
.prog-c-ec-gx__post > g { transform-box: fill-box; transform-origin: 50% 100%; }
.prog-c-ec-gx__be { fill: none; stroke: var(--ec-paper); stroke-width: 4; clip-path: inset(-10px 0 -10px 0); transition: clip-path 900ms var(--ec-ease) 200ms, opacity 400ms; }
.prog-c-ec-gx__tag { fill: #f6e7c8; transition: opacity 400ms; }
.prog-c-ec-gx__thread line { stroke: var(--ec-ochre); stroke-width: 3.5; transform-box: fill-box; transform-origin: 0 50%; transition: transform 700ms var(--ec-ease); }
.prog-c-ec-gx__bead { transform: translate(670px, 170px); transition: transform 700ms var(--ec-ease); }
.prog-c-ec-gx__nums { position: relative; height: clamp(3.2rem, 6.4vw, 6.6rem); margin-top: 4px; }
.prog-c-ec-gx__num { position: absolute; top: 0; translate: -50% 0; overflow: hidden; font: 850 clamp(3.2rem, 6.4vw, 6.6rem)/.9 var(--gft-font-display); letter-spacing: -.06em; color: var(--ec-paper); opacity: 1; transition: opacity 400ms; }
.prog-c-ec-gx__num i { display: block; font-style: normal; clip-path: inset(-4px -4px -4px -4px); transition: clip-path 600ms var(--ec-ease); }
/* gate states: posts after the current one wait unlifted, numerals rest at .4 (never lower), treads and bead step */
.prog-c-ec-gx[data-ec-on="0"] :is(.prog-c-ec-gx__post--1, .prog-c-ec-gx__post--2, .prog-c-ec-gx__post--3),
.prog-c-ec-gx[data-ec-on="1"] :is(.prog-c-ec-gx__post--2, .prog-c-ec-gx__post--3),
.prog-c-ec-gx[data-ec-on="2"] .prog-c-ec-gx__post--3 { transform: none; opacity: .45; }
.prog-c-ec-gx[data-ec-on="0"] :is(.prog-c-ec-gx__num--1, .prog-c-ec-gx__num--2, .prog-c-ec-gx__num--3),
.prog-c-ec-gx[data-ec-on="1"] :is(.prog-c-ec-gx__num--0, .prog-c-ec-gx__num--2, .prog-c-ec-gx__num--3),
.prog-c-ec-gx[data-ec-on="2"] :is(.prog-c-ec-gx__num--0, .prog-c-ec-gx__num--1, .prog-c-ec-gx__num--3),
.prog-c-ec-gx[data-ec-on="3"] :is(.prog-c-ec-gx__num--0, .prog-c-ec-gx__num--1, .prog-c-ec-gx__num--2) { opacity: .5; }
/* gates not yet reached: the whole numeral drawn, dimmer (never clipped), so all four read in every step */
.prog-c-ec-gx__num i { transition: color 400ms; }
.prog-c-ec-gx[data-ec-on="0"] :is(.prog-c-ec-gx__num--1, .prog-c-ec-gx__num--2, .prog-c-ec-gx__num--3) i,
.prog-c-ec-gx[data-ec-on="1"] :is(.prog-c-ec-gx__num--2, .prog-c-ec-gx__num--3) i,
.prog-c-ec-gx[data-ec-on="2"] .prog-c-ec-gx__num--3 i { color: #8fb3a4; }
.prog-c-ec-gx[data-ec-on="0"] .prog-c-ec-gx__tread line { opacity: .35; }
.prog-c-ec-gx[data-ec-on="1"] :is(.prog-c-ec-gx__tread--2, .prog-c-ec-gx__tread--3) line,
.prog-c-ec-gx[data-ec-on="2"] .prog-c-ec-gx__tread--3 line { opacity: .35; }
.prog-c-ec-gx:is([data-ec-on="0"], [data-ec-on="1"], [data-ec-on="2"]) :is(.prog-c-ec-gx__be, .prog-c-ec-gx__tag, .prog-c-ec-gx__tag-box) { opacity: 0; clip-path: inset(-10px 100% -10px 0); transition: clip-path 300ms, opacity 300ms; }
.prog-c-ec-gx[data-ec-on="0"] .prog-c-ec-gx__thread line { transform: scaleX(.16); }
.prog-c-ec-gx[data-ec-on="1"] .prog-c-ec-gx__thread line { transform: scaleX(.39); }
.prog-c-ec-gx[data-ec-on="2"] .prog-c-ec-gx__thread line { transform: scaleX(.62); }
.prog-c-ec-gx[data-ec-on="0"] .prog-c-ec-gx__bead { transform: translate(130px, 440px); }
.prog-c-ec-gx[data-ec-on="1"] .prog-c-ec-gx__bead { transform: translate(310px, 352px); }
.prog-c-ec-gx[data-ec-on="2"] .prog-c-ec-gx__bead { transform: translate(490px, 262px); }
:root[data-m-go] .prog-c-ec-gx:is([data-ec-on="0"]) .prog-c-ec-gx__post--0 > g[data-m-on],
:root[data-m-go] .prog-c-ec-gx:is([data-ec-on="1"]) .prog-c-ec-gx__post--1 > g[data-m-on],
:root[data-m-go] .prog-c-ec-gx:is([data-ec-on="2"]) .prog-c-ec-gx__post--2 > g[data-m-on],
:root[data-m-go] .prog-c-ec-gx:is([data-ec-on="3"]) .prog-c-ec-gx__post--3 > g[data-m-on] { animation-name: prog-c-ec-sway; animation-duration: 2.8s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; }
/* the track only paces the pin: four compact step spacers; the copy lives in the pinned stage */
.prog-c-ec-gx__track > .prog-c-ec-gx__card { min-height: 62svh; padding: 0; }
.prog-c-ec-gx__track > .prog-c-ec-gx__card:last-child { min-height: 78svh; }
/* the pinned gate card: one fixed box in the stage's left column; the copy swaps out, then in (never two texts at once) */
.prog-c-ec-gx__copy { grid-column: 1; grid-row: 1 / 3; align-self: center; display: grid; padding: 24px 26px; background: #072d2bf2; border: 1px solid #6bb68f44; border-top: 3px solid var(--ec-ochre); max-height: 76svh; min-width: 0; }
.prog-c-ec-gx__gc { grid-area: 1 / 1; min-width: 0; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 140ms, transform 140ms, visibility 0s linear 140ms; }
.prog-c-ec-gx:not([data-ec-on]) .prog-c-ec-gx__gc[data-for="3"], .prog-c-ec-gx[data-ec-on="0"] .prog-c-ec-gx__gc[data-for="0"], .prog-c-ec-gx[data-ec-on="1"] .prog-c-ec-gx__gc[data-for="1"],
.prog-c-ec-gx[data-ec-on="2"] .prog-c-ec-gx__gc[data-for="2"], .prog-c-ec-gx[data-ec-on="3"] .prog-c-ec-gx__gc[data-for="3"] { opacity: 1; visibility: visible; transform: none; transition: opacity 300ms 150ms, transform 420ms var(--ec-ease) 150ms, visibility 0s; }
.prog-c-ec-gx__gc .gft-eyebrow { color: #f6e7c8; font-size: 13px; }
.prog-c-ec-gx__gc h3 { font-size: clamp(1.3rem, 1.85vw, 1.75rem); margin: 8px 0 10px; }
.prog-c-ec-gx__gc .prog-c-ec-t { font-size: 15px; line-height: 1.58; color: #f6f4ef; }
.prog-c-ec-gx__ro { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin-top: 14px; padding: 12px 14px; background: #0e4d4acc; border: 1px solid #6bb68f55; border-left: 3px solid var(--ec-ochre); }
.prog-c-ec-gx__ro-cell { display: grid; gap: 2px; }
.prog-c-ec-gx__ro-cell span { font: 600 12px/1.2 var(--gft-font-mono); color: #cfe6d9; text-transform: uppercase; letter-spacing: .04em; }
.prog-c-ec-gx__ro-cell strong { font: 800 1.25rem/1.1 var(--gft-font-display); color: var(--ec-paper); }
.prog-c-ec-gx__ro-cell strong.is-ochre { color: #f6e7c8; }
.prog-c-ec-gx__ro-wide { grid-column: 1 / -1; display: grid; gap: 4px; }
.prog-c-ec-gx__ro-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.prog-c-ec-gx__ro-top span { font: 600 12px/1.2 var(--gft-font-mono); color: #cfe6d9; text-transform: uppercase; letter-spacing: .04em; }
.prog-c-ec-gx__ro-top b { font: 800 1.15rem/1 var(--gft-font-mono); color: #f6e7c8; }
.prog-c-ec-gx__ro-bar { display: block; height: 8px; background: #ffffff1f; overflow: hidden; }
.prog-c-ec-gx__ro-bar b { display: block; height: 100%; background: linear-gradient(90deg, var(--ec-ochre), var(--ec-sage)); transform-origin: 0 50%; transform: scaleX(var(--gp, .25)); transition: transform 500ms var(--ec-ease); }
.prog-c-ec-gates__note { margin-top: 24px; max-width: 90ch; font-size: 12.5px; line-height: 1.6; color: var(--ec-cap-d); }

/* ================= #10 closing (night): the surface returns; the thread runs into the footer ================= */
.prog-c-ec-sec--close { padding-bottom: clamp(36px, 3.6vw, 52px); } /* the console is the last screen: it sits right on the footer bridge */
.prog-c-ec-cl { position: relative; }
/* one head, pinned beside the surface only while the surface passes (its sticky range is the __top box), never above 0 */
.prog-c-ec-cl__top { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: clamp(72px, 14svh, 140px); }
.prog-c-ec-head--close { grid-area: 1 / 1; z-index: 2; grid-template-columns: 1fr; align-self: start; width: 36%; margin: 0; padding-top: 8px; pointer-events: none; position: sticky; top: calc(var(--header, 0px) + 9svh); scroll-margin-top: 12svh; }
.prog-c-ec-head--close > * { pointer-events: auto; }
/* as the pin releases, the head leaves by fading on the surface box's own timeline, so it is gone before it can meet
   the top edge (opacity only; motion allowed only; reduced motion and Calm keep it plain) */
@supports (animation-timeline: view()) {
  :root[data-m-go] .prog-c-ec-cl__top { view-timeline: --prog-c-ec-cltop block; }
  :root[data-m-go] .prog-c-ec-head--close { animation-name: prog-c-ec-headout; animation-duration: 1ms; animation-timing-function: linear; animation-fill-mode: both; animation-timeline: --prog-c-ec-cltop; animation-range: exit calc(100% - 68svh) exit calc(100% - 52svh); }
}
@keyframes prog-c-ec-headout { from { opacity: 1; } to { opacity: 0; } }
.prog-c-ec-head--close .prog-c-ec-head__t { font-size: clamp(42px, 3.8vw, 62px); max-width: 12ch; line-height: 1; letter-spacing: -.055em; }
.prog-c-ec-head--close .prog-c-ec-head__l { font-size: 15px; color: #dbe6df; max-width: 40ch; }
.prog-c-ec-cl__stage { grid-area: 1 / 1; position: relative; }
.prog-c-ec-cl__chart svg { width: 100%; height: auto; touch-action: none; cursor: ew-resize; }
.prog-c-ec-cl__fill { fill: #6bb68f; fill-opacity: .1; transform-box: fill-box; transform-origin: 0 50%; transform: scaleX(var(--f)); transition: transform 380ms var(--ec-ease); }
.prog-c-ec-cl__rl { fill: #cfe6d9; font: 13px var(--gft-font-mono); }
.prog-c-ec-cl__pl { fill: var(--ec-paper); font: 600 13px var(--gft-font-mono); }
.prog-c-ec-cl__tk { fill: #dbe6df; font: 13px var(--gft-font-mono); }
.prog-c-ec-cl__ax { fill: #cfe6d9; font: 12px var(--gft-font-mono); letter-spacing: .05em; }
.prog-c-ec-cl__lead { margin-top: 18px; margin-left: 37.5%; max-width: 62ch; } /* right of the pinned head column, never under it */
.prog-c-ec-cl__quote { font-size: clamp(1.2rem, 1.7vw, 1.6rem); line-height: 1.4; color: #8fa69c; }
.prog-c-ec-cl__w { transition: color 300ms; }
.prog-c-ec-cl__w[data-lit] { color: #fff; }
.prog-c-ec-cl__deck { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1.15fr); gap: 24px 32px; margin-top: 28px; align-items: start; }
.prog-c-ec-cl__ro { padding: 18px 20px; background: var(--ec-forest); border: 1px solid #6bb68f40; }
.prog-c-ec-cl__k { font-size: 12px; color: var(--ec-cap-d); text-transform: uppercase; letter-spacing: .06em; }
.prog-c-ec-cl__u { display: flex; align-items: baseline; gap: 4px 14px; flex-wrap: wrap; font: 850 clamp(2.4rem, 3.6vw, 3.4rem)/1 var(--gft-font-display); letter-spacing: -.05em; margin: 6px 0 8px; }
.prog-c-ec-cl__u span { color: var(--ec-sage); }
.prog-c-ec-cl__u b { font-size: .62em; color: #f0d7a8; min-width: 4ch; }
.prog-c-ec-cl__reg { font-size: 14.5px; }
.prog-c-ec-cl__reg b { color: #a8dcc0; margin-right: 6px; }
.prog-c-ec-cl__rec { display: grid; margin-top: 8px; }
.prog-c-ec-cl__rec p { grid-area: 1 / 1; font-size: 13.5px; line-height: 1.5; color: #e8f0ec; opacity: 0; visibility: hidden; transition: opacity 260ms, visibility 0s linear 260ms; }
.prog-c-ec-cl[data-reg="1"] .prog-c-ec-cl__rec p[data-for="1"], .prog-c-ec-cl[data-reg="2"] .prog-c-ec-cl__rec p[data-for="2"],
.prog-c-ec-cl[data-reg="3"] .prog-c-ec-cl__rec p[data-for="3"], .prog-c-ec-cl[data-reg="4"] .prog-c-ec-cl__rec p[data-for="4"] { opacity: 1; visibility: visible; transition: opacity 300ms 100ms, visibility 0s; }
.prog-c-ec-cl__ctl { display: grid; gap: 12px; }
.prog-c-ec-cl__ctl label { font-size: 12.5px; color: #e8f0ec; }
.prog-c-ec-cl__ctl input { width: 100%; margin: 0; accent-color: var(--ec-sage); }
.prog-c-ec-cl__run { justify-self: start; min-height: 48px; padding: 10px 18px; border: 1px solid var(--ec-ochre); background: var(--ec-ochre); color: var(--ec-night); font: 700 14px var(--gft-font-display); }
.prog-c-ec-cl__run[aria-pressed="true"] { background: transparent; color: var(--ec-paper); }
/* the drawer: a fixed-size console, three instruments sharing one cell */
.prog-c-ec-dr { display: grid; grid-template-rows: auto 1fr; border: 1px solid #6bb68f40; background: #0a3d3a; min-width: 0; }
.prog-c-ec-dr__tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.prog-c-ec-dr__tabs button { display: grid; gap: 2px; min-height: 56px; padding: 8px 10px; text-align: left; border: 0; border-bottom: 1px solid #6bb68f40; background: transparent; color: #e8f0ec; font: 600 13px/1.25 var(--gft-font-display); }
.prog-c-ec-dr__tabs button span { font: 700 13px var(--gft-font-mono); color: #f0d7a8; }
.prog-c-ec-dr__tabs button[aria-selected="true"] { background: var(--ec-forest); box-shadow: inset 0 -3px 0 var(--ec-sage); color: var(--ec-paper); }
.prog-c-ec-dr__tabs button:focus-visible { outline: 2px solid var(--ec-ochre); outline-offset: -3px; }
.prog-c-ec-dr__stage { display: grid; padding: 16px 18px; min-height: 230px; }
.prog-c-ec-tool { grid-area: 1 / 1; display: grid; gap: 10px; align-content: start; }
.prog-c-ec-dr[data-tabs-ready] .prog-c-ec-tool { opacity: 0; visibility: hidden; transition: opacity 220ms, visibility 0s linear 220ms; }
.prog-c-ec-dr[data-tab="unit"] [data-mini="unit"], .prog-c-ec-dr[data-tab="lab"] [data-mini="lab"], .prog-c-ec-dr[data-tab="oee"] [data-mini="oee"] { opacity: 1 !important; visibility: visible !important; transition: opacity 300ms 200ms, visibility 0s !important; }
.prog-c-ec-dr:not([data-tabs-ready]) .prog-c-ec-tool + .prog-c-ec-tool { display: none; }
.prog-c-ec-tool svg { width: 100%; height: auto; max-height: 96px; }
.prog-c-ec-tool__base { stroke: var(--ec-sage); stroke-dasharray: 4 4; }
.prog-c-ec-tool__curve { fill: none; stroke: var(--ec-paper); stroke-width: 2; }
.prog-c-ec-tool__dot { transform: translate(calc(var(--mx) * 1px), calc(var(--my) * 1px)); transition: transform 300ms var(--ec-ease); }
.prog-c-ec-tool__dot circle { fill: var(--ec-paper); }
.prog-c-ec-tool__ro { font-size: 13.5px; line-height: 1.5; color: #e8f0ec; }
.prog-c-ec-tool__ro b { font: 800 1.25rem var(--gft-font-display); color: var(--ec-paper); }
.prog-c-ec-tool__ro a { color: #cfe6d9; display: inline-block; min-height: 24px; }
.prog-c-ec-tool__pair { display: grid; gap: 8px; }
.prog-c-ec-tool__pair span { display: block; height: 18px; background: #ffffff12; overflow: hidden; }
.prog-c-ec-tool__f { display: block; height: 100%; transform-origin: 0 50%; transition: transform 400ms var(--ec-ease); }
.prog-c-ec-tool__f--a { background: var(--ec-ochre); transform: scaleX(var(--a)); }
.prog-c-ec-tool__f--b { background: var(--ec-sage); transform: scaleX(var(--b)); }
.prog-c-ec-tool__oee { height: 18px; background: #ffffff12; overflow: hidden; }
.prog-c-ec-tool__oee i { display: block; height: 100%; background: var(--ec-sage); transform-origin: 0 50%; transform: scaleX(var(--o)); transition: transform 400ms var(--ec-ease); }
.prog-c-ec-tool__three { display: grid; gap: 4px; }
.prog-c-ec-tool .prog-c-ec-sl { grid-template-columns: minmax(96px, .8fr) minmax(0, 2fr) 5ch; font-size: 13px; }
/* the thread: seven doors strung at the regimes they serve; the chosen regime lights its doors */
.prog-c-ec-th { margin-top: 28px; }
.prog-c-ec-th__line { position: relative; height: 64px; margin-left: calc((510 - 150) / 960 * 100%); margin-right: 0; }
.prog-c-ec-th__line { margin-left: 0; }
.prog-c-ec-th__line::before { content: ''; position: absolute; left: 37.5%; right: 0; top: 14px; height: 2px; background: #ffffff33; }
.prog-c-ec-th__lit { position: absolute; left: 37.5%; right: 0; top: 13px; height: 4px; background: var(--ec-ochre); transform-origin: 100% 50%; transform: scaleX(calc(1 - var(--f) * .966)); transition: transform 400ms var(--ec-ease); }
.prog-c-ec-th__dot { position: absolute; top: calc(6px + var(--t) * 24px); translate: -50% 0; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--ec-night); border: 2px solid #ffffff66; font: 700 11px/1 var(--gft-font-mono); color: transparent; transition: background-color 300ms, border-color 300ms; }
.prog-c-ec-th__dot b { position: absolute; left: 22px; top: -2px; padding: 2px 5px; background: var(--ec-night); border-radius: 2px; font: 700 12.5px/1 var(--gft-font-mono); color: #dbe6df; }
.prog-c-ec-th__doors { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 6px 20px; }
.prog-c-ec-th__doors a { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; grid-template-areas: 'n t p' 'n s s'; gap: 0 10px; align-items: baseline; min-height: 56px; padding: 10px 12px; text-decoration: none; color: var(--ec-paper); border-left: 3px solid #ffffff22; transition: border-color 300ms, background-color 300ms; }
.prog-c-ec-th__doors a:hover, .prog-c-ec-th__doors a:focus-visible { background: #ffffff0d; }
.prog-c-ec-th__n { grid-area: n; font: 700 13px var(--gft-font-mono); color: #dbe6df; }
.prog-c-ec-th__t { grid-area: t; font: 700 15px/1.3 var(--gft-font-display); text-decoration: underline; text-decoration-color: #ffffff44; text-underline-offset: .2em; }
.prog-c-ec-th__s { grid-area: s; font-size: 13px; line-height: 1.45; color: #dbe6df; }
.prog-c-ec-th__p { grid-area: p; font-size: 12px; color: #dbe6df; min-width: 6ch; text-align: right; }
.prog-c-ec-cl[data-reg="1"] [data-w~="1"], .prog-c-ec-cl[data-reg="2"] [data-w~="2"], .prog-c-ec-cl[data-reg="3"] [data-w~="3"], .prog-c-ec-cl[data-reg="4"] [data-w~="4"] { --lit: 1; }
.prog-c-ec-th__dot { --lit: 0; }
.prog-c-ec-cl[data-reg="1"] .prog-c-ec-th__dot[data-w~="1"], .prog-c-ec-cl[data-reg="2"] .prog-c-ec-th__dot[data-w~="2"],
.prog-c-ec-cl[data-reg="3"] .prog-c-ec-th__dot[data-w~="3"], .prog-c-ec-cl[data-reg="4"] .prog-c-ec-th__dot[data-w~="4"] { background: var(--ec-sage); border-color: var(--ec-paper); }
.prog-c-ec-cl[data-reg="1"] li[data-w~="1"] a, .prog-c-ec-cl[data-reg="2"] li[data-w~="2"] a,
.prog-c-ec-cl[data-reg="3"] li[data-w~="3"] a, .prog-c-ec-cl[data-reg="4"] li[data-w~="4"] a { border-left-color: var(--ec-sage); background: #6bb68f14; }
.prog-c-ec-cl[data-reg="1"] li[data-w~="1"] .prog-c-ec-th__p, .prog-c-ec-cl[data-reg="2"] li[data-w~="2"] .prog-c-ec-th__p,
.prog-c-ec-cl[data-reg="3"] li[data-w~="3"] .prog-c-ec-th__p, .prog-c-ec-cl[data-reg="4"] li[data-w~="4"] .prog-c-ec-th__p { color: var(--ec-sage); }
:root[data-m-go] .prog-c-ec-cl[data-reg="4"] li[data-w~="4"] .prog-c-ec-th__t { background-image: linear-gradient(100deg, transparent 40%, #ffffff40 50%, transparent 60%); background-size: 250% 100%; }
/* entrance: nodes tie onto the thread one by one */
:root[data-m-go] [data-m="prog-c-ec-knot"]:not([data-m-in]) :is(.prog-c-ec-th__dot, .prog-c-ec-th__doors li) { opacity: .3; transform: scale(.7); }
:root[data-m-go] [data-m="prog-c-ec-knot"][data-m-in] :is(.prog-c-ec-th__dot, .prog-c-ec-th__doors li) {
  animation-name: prog-c-ec-knot; animation-duration: 520ms; animation-delay: calc(var(--i, 0) * 34ms); animation-timing-function: var(--ec-ease);
  animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal;
}
@keyframes prog-c-ec-knot { from { opacity: .3; transform: scale(.7); } to { opacity: 1; transform: none; } }
.prog-c-ec-th__doors li { transform-origin: 0 50%; }
/* the qualification: an open, full-width footnote band */
.prog-c-ec-legal { margin-top: 0; padding: 24px 0 0; border-top: 1px solid #ffffff2a; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 40px; }
.prog-c-ec-legal .gft-eyebrow { grid-column: 1 / -1; color: #f0d7a8; }
.prog-c-ec-legal > :not(.gft-eyebrow) { font-size: 13px; line-height: 1.7; color: #dbe6df; max-width: none; }
/* footer bridge: the thread leaves at the bottom right, where "Continue the thread" starts */
.prog-c-ec-cl__exit { position: absolute; right: 0; bottom: calc(-1 * clamp(36px, 3.6vw, 52px)); width: 2px; height: clamp(36px, 3.6vw, 52px); background: var(--ec-ochre); opacity: .45; transition: opacity 400ms; pointer-events: none; }
.prog-c-ec-cl[data-reg="4"] .prog-c-ec-cl__exit { opacity: 1; }
.prog-c-ec-cl__exit i { position: absolute; left: -5px; top: 0; width: 8px; height: 22px; border-radius: 4px; background: #f6e7c8; opacity: 0; }
:root[data-m-go] .prog-c-ec-cl__exit i[data-m-on] { animation-name: prog-c-ec-spark; animation-duration: 3.6s; animation-timing-function: ease-in; animation-iteration-count: infinite; animation-direction: normal; }
@keyframes prog-c-ec-spark { 0% { opacity: .2; transform: translateY(0); } 20% { opacity: 1; } 90% { opacity: 1; transform: translateY(clamp(14px, 1.6vw, 30px)); } 100% { opacity: .2; transform: translateY(clamp(14px, 1.6vw, 30px)); } }

/* ================= tablet ================= */
@media (max-width: 1180px) {
  .prog-c-ec-rg { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .prog-c-ec-rail { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .prog-c-ec-cl__deck { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .prog-c-ec-dr { grid-column: 1 / -1; }
  .prog-c-ec-cp { --tw: 58%; }
}

/* ================= phone ================= */
@media (max-width: 760px) {
  .prog-c-ec-head { grid-template-columns: 1fr; gap: 14px; }
  .prog-c-ec-head__t { font-size: clamp(1.85rem, 8.4vw, 2.4rem); }
  /* splash: headline and accent top, the cropped surface in the free band below */
  [data-splash="prog-c-economics"] .gft-splash__content { padding-bottom: 372px; }
  .gft-splash--instrument[data-splash="prog-c-economics"] .gft-splash__structure { inset: auto 0 calc(var(--splash-strip-h, 64px) + 4px) 0; height: 360px; }
  [data-splash="prog-c-economics"] .gft-splash__structure::after { background: linear-gradient(180deg, #072d2b 0%, #072d2b00 22%); }
  .prog-c-ec-sp__svg--wide { display: none; }
  .prog-c-ec-sp__svg--phone { display: block; }
  .prog-c-ec-hero { max-width: none; padding: 10px 12px 4px; }
  .prog-c-ec-hero__ro { grid-template-columns: auto minmax(0, 1fr); }
  .prog-c-ec-hero__big { font-size: 2.2rem; }
  .prog-c-ec-hero__k { display: none; }
  /* #2 */
  .prog-c-ec-rg { grid-template-columns: 1fr; padding-bottom: 72px; }
  .prog-c-ec-rg__chart svg { height: auto; }
  .prog-c-ec-rib__n, .prog-c-ec-rib__r { display: none; }
  .prog-c-ec-rib__b { min-height: 44px; padding: 12px 4px 4px; }
  .prog-c-ec-presets { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; padding-bottom: 4px; }
  .prog-c-ec-presets button { flex: 0 0 auto; }
  .prog-c-ec-rail { grid-template-columns: 1fr; }
  .prog-c-ec-rail__i { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; align-items: baseline; }
  .prog-c-ec-rail__c { grid-column: 1 / -1; }
  .prog-c-ec-selv__b { height: 18px; font-size: 12px; }
  /* #3 */
  .prog-c-ec-lb__bar { padding: 12px 14px; gap: 10px 16px; }
  .prog-c-ec-lb__quick { width: 100%; grid-template-columns: auto minmax(0, 1fr) 4.5ch; }
  .prog-c-ec-race__row { height: 70px; }
  .prog-c-ec-race__n { font-size: 12px; left: 20px; right: 20px; }
  .prog-c-ec-race__tag { display: none; }
  .prog-c-ec-race__v { font-size: 1.4rem; }
  .prog-c-ec-lb__rail { gap: 4px; }
  .prog-c-ec-lb__tab { padding: 6px 8px; min-height: 48px; }
  .prog-c-ec-lb__tab b { font-size: 12.5px; }
  .prog-c-ec-note { padding: 14px 16px; }
  .prog-c-ec-lb__low { grid-template-columns: 1fr; }
  .prog-c-ec-eff { order: -1; }
  .prog-c-ec-eff svg { height: auto; }
  .prog-c-ec-sl { grid-template-columns: minmax(0, 1fr) 5ch; }
  .prog-c-ec-sl input { grid-column: 1 / -1; grid-row: 2; }
  .prog-c-ec-sl output { grid-column: 2; grid-row: 1; }
  /* #4: an opaque pinned band, steps scroll beneath */
  .prog-c-ec-ut-intro__strip { grid-template-columns: 1fr 1fr; gap: 6px 10px; }
  .prog-c-ec-ut.mw-steps { grid-template-columns: 1fr; gap: 0; }
  .prog-c-ec-ut .mw-steps__visual { order: 0; position: sticky; top: 0; height: auto; z-index: 2; background: var(--ec-paper); padding-block: 8px; box-shadow: 0 10px 18px -14px #25302e66; }
  .prog-c-ec-ut__stage { gap: 6px; }
  .prog-c-ec-chips legend { display: none; }
  .prog-c-ec-chips { flex-wrap: nowrap; gap: 4px; }
  .prog-c-ec-chip-r span { padding: 4px 8px; font-size: 12px; min-height: 44px; }
  .prog-c-ec-chip-r span em { display: none; }
  .prog-c-ec-ut__svg { max-height: 22svh; }
  .prog-c-ec-ut__tk, .prog-c-ec-ut__bl { font-size: 22px; }
  .prog-c-ec-ut__tag, .prog-c-ec-ut__plate text, .prog-c-ec-ut__tk--be, .prog-c-ec-ut__tk--tg { display: none; }
  .prog-c-ec-ut__ro { min-height: 0; padding: 6px 12px; }
  .prog-c-ec-ut__big { font-size: 1.9rem; }
  .prog-c-ec-ut__gap, .prog-c-ec-ut__who { display: none; }
  .prog-c-ec-ut__ro { grid-template-columns: 1fr; height: 52px; align-items: center; }
  .prog-c-ec-lb__sum { min-height: 11.5em; }
  .prog-c-ec-ut__track > .prog-c-ec-ut__step { min-height: 64svh; }
  .prog-c-ec-ut__track > .prog-c-ec-ut__step:last-child { min-height: 92svh; }
  /* #5: rows become cards; the read-out card docks after the list */
  .prog-c-ec-lg__grid { grid-template-columns: 1fr; }
  .prog-c-ec-card { position: static; min-height: 0; }
  .prog-c-ec-tbl, .prog-c-ec-tbl tbody, .prog-c-ec-tbl tr, .prog-c-ec-tbl th, .prog-c-ec-tbl td { display: block; }
  .prog-c-ec-tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .prog-c-ec-tbl tbody tr { padding: 12px 14px; border-bottom: 1px solid #e4ddcc; }
  .prog-c-ec-tbl th, .prog-c-ec-tbl td { padding: 2px 0; border: 0; }
  .prog-c-ec-tbl__st { background: none; padding-block: 6px !important; }
  .prog-c-ec-tbl__st small { display: inline; margin-left: 8px; }
  /* #6 */
  .prog-c-ec-int { min-height: 0; }
  .prog-c-ec-int__pin { position: static; height: auto; padding-block: 56px; }
  .prog-c-ec-int__top { grid-template-columns: 1fr; gap: 10px; }
  .prog-c-ec-frac { grid-template-columns: 1fr; padding: 16px; }
  .prog-c-ec-vin { height: auto; padding-top: 30px; }
  .prog-c-ec-vin__ghost { top: -96px; height: 120px; }
  .prog-c-ec-vin__stops { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin-top: 10px; }
  .prog-c-ec-vin__stops li { position: static; }
  .prog-c-ec-vin__stops i { display: none; }
  .prog-c-ec-vin__stops span, .prog-c-ec-vin__stops li:first-child span { position: static; translate: none; white-space: normal; }
  .prog-c-ec-vin__bar { top: 0; }
  .prog-c-ec-vin__bead { top: 3px; }
  .prog-c-ec-vin__fpy { top: 12px; }
  /* #7: the pinned band holds the lever's visual and the mini waterfall */
  .prog-c-ec-lv.mw-steps { grid-template-columns: 1fr; gap: 0; }
  .prog-c-ec-lv .mw-steps__visual { position: sticky; top: 0; height: auto; z-index: 2; background: var(--ec-night); padding: 8px 0; }
  .prog-c-ec-lv__stage { padding: 10px 12px; gap: 6px; margin-inline: 4px; }
  .prog-c-ec-lv__state, .prog-c-ec-view figcaption { display: none; }
  .prog-c-ec-gate { height: 17svh; }
  .prog-c-ec-gate__k { display: none; }
  .prog-c-ec-gate__e { font-size: 12px; left: 8px; right: 8px; bottom: 6px; }
  .prog-c-ec-view svg { max-height: 17svh; }
  .prog-c-ec-wf { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding-top: 8px; }
  .prog-c-ec-wf__well { height: 48px; }
  .prog-c-ec-wf__ref { top: calc(48px * (1 - 30 / 36)); }
  .prog-c-ec-wf__ref span { display: none; }
  .prog-c-ec-wf__col b { font-size: 12px; }
  .prog-c-ec-wf__col span { font-size: 12px; }
  .prog-c-ec-wf__big { font-size: 1.8rem; }
  .prog-c-ec-wf__big small { display: none; }
  .prog-c-ec-lv__track > .prog-c-ec-lvs { min-height: 70svh; padding-block: 28px; }
  .prog-c-ec-lv__track > .prog-c-ec-lvs:last-child { min-height: 92svh; }
  .prog-c-ec-lvs__sc span:nth-child(2) { display: none; }
  /* #8 */
  .prog-c-ec-cp { --tw: 100%; }
  .prog-c-ec-cp__top { grid-template-columns: 1fr; gap: 14px; }
  .prog-c-ec-cp__scale { grid-template-columns: 1fr; }
  .prog-c-ec-cp__row { display: block; }
  .prog-c-ec-cp__bl { display: none; }
  .prog-c-ec-cp__track { border-bottom: 0; min-height: 0; }
  .prog-c-ec-cp__note { padding: 4px 0 18px 14px; border-left: 1px solid #f0d7a866; }
  .prog-c-ec-cp__note::before, .prog-c-ec-cp__note::after { display: none; }
  .prog-c-ec-cp__note .gft-eyebrow { padding-left: 0; }
  .prog-c-ec-cp__band, .prog-c-ec-cp__tick { bottom: 6px; }
  .prog-c-ec-cp__row[data-r="c"] .prog-c-ec-cp__track { padding-bottom: 18px; }
  .prog-c-ec-cp__gates { grid-template-columns: 1fr 1fr; }
  .prog-c-ec-cp__ctl { grid-template-columns: 1fr; width: 100%; }
  .prog-c-ec-cp__sl { grid-template-columns: minmax(0, 1fr) 9ch; }
  .prog-c-ec-cp__sl input { grid-column: 1 / -1; grid-row: 2; }
  /* #9: a pinned band (ramp, bead, numeral), captions beneath */
  .prog-c-ec-gx.mw-steps--overlay > .mw-steps__visual { position: sticky; top: 0; height: auto; z-index: 2; background: var(--ec-night); grid-template-columns: 1fr; grid-template-rows: auto auto; padding: 8px 0; gap: 6px; }
  .prog-c-ec-gx__panel, .prog-c-ec-gx__loom { grid-column: 1; }
  .prog-c-ec-gx__panel { grid-template-columns: 1fr; padding: 8px 12px; }
  .prog-c-ec-gx__tests { display: none; }
  .prog-c-ec-gx__step { grid-column: 1; grid-row: auto; justify-content: flex-start; }
  .prog-c-ec-gx__nodes { display: none; }
  .prog-c-ec-gx__lbl { font-size: 30px; }
  .prog-c-ec-gx__lbl--c, .prog-c-ec-gx__tag { display: none; }
  .prog-c-ec-gx__num { font-size: 30vw; opacity: .14; }
  .prog-c-ec-gx[data-ec-on] .prog-c-ec-gx__num { opacity: 0; }
  .prog-c-ec-gx[data-ec-on="0"] .prog-c-ec-gx__num--0, .prog-c-ec-gx[data-ec-on="1"] .prog-c-ec-gx__num--1, .prog-c-ec-gx[data-ec-on="2"] .prog-c-ec-gx__num--2, .prog-c-ec-gx[data-ec-on="3"] .prog-c-ec-gx__num--3, .prog-c-ec-gx:not([data-ec-on]) .prog-c-ec-gx__num--3 { opacity: .22; }
  .prog-c-ec-gx__nums { position: absolute; inset: 0; height: auto; margin: 0; pointer-events: none; }
  .prog-c-ec-gx__num { left: 50% !important; top: 50%; translate: -50% -50%; }
  .prog-c-ec-gx.mw-steps--overlay > .mw-steps__track { margin-top: 0; pointer-events: auto; z-index: 1; }
  .prog-c-ec-gx.mw-steps--overlay > .mw-steps__visual { z-index: 3; }
  .prog-c-ec-gx__loom svg { max-height: 24svh; }
  .prog-c-ec-gx.mw-steps--overlay > .mw-steps__track > .prog-c-ec-gx__card { min-height: 60svh; padding: 0; }
  .prog-c-ec-gx.mw-steps--overlay > .mw-steps__track > .prog-c-ec-gx__card:last-child { min-height: 82svh; }
  /* the pinned stage fills the screen (panel, loom, gate card), so the empty step spacers pass unseen beneath it */
  .prog-c-ec-gx.mw-steps--overlay > .mw-steps__visual { height: 100svh; grid-template-rows: auto auto auto; align-content: center; }
  .prog-c-ec-gx__copy { grid-column: 1; grid-row: 3; align-self: start; max-height: none; padding: 12px 14px; margin-top: 4px; }
  .prog-c-ec-gx__gc h3 { font-size: 1.15rem; margin: 4px 0 6px; }
  .prog-c-ec-gx__gc .prog-c-ec-t { font-size: 13.5px; line-height: 1.5; }
  .prog-c-ec-gx__ro { padding: 8px 10px; margin-top: 8px; gap: 4px 10px; }
  .prog-c-ec-gx__ro b { font-size: 1.05rem; }
  /* #10: the thread turns vertical down the left edge, the nodes as rows */
  .prog-c-ec-cl__top { display: block; margin-top: 56px; }
  .prog-c-ec-head--close { width: auto; margin-bottom: 18px; position: static; animation: none !important; }
  .prog-c-ec-head--close .prog-c-ec-head__t { font-size: clamp(2.2rem, 10vw, 3rem); }
  .prog-c-ec-cl__chart svg { height: 50svh; }
  .prog-c-ec-cl__lead { position: static; width: auto; margin-top: 8px; margin-left: 0; }
  .prog-c-ec-cl__deck { grid-template-columns: 1fr; }
  .prog-c-ec-th__line { display: none; }
  .prog-c-ec-th__doors { grid-template-columns: 1fr; gap: 0; border-left: 2px solid var(--ec-ochre); margin-left: 6px; }
  .prog-c-ec-th__doors a { grid-template-columns: 26px minmax(0, 1fr); grid-template-areas: 'n t' 'n s' 'n p'; border-left: 0; }
  .prog-c-ec-th__p { text-align: left; }
  .prog-c-ec-legal { grid-template-columns: 1fr; }
  .prog-c-ec-cl__exit { left: 6px; right: auto; }
}

/* ================= splash type (page-specific sizes; the shared splash is untouched) ================= */
body[data-page="economics"] .gft-splash__data, body[data-page="economics"] .gft-splash__caption,
body[data-page="economics"] .gft-splash__position, body[data-page="economics"] .gft-splash__signal { font-size: 12px; color: #cedbd2; }
body[data-page="economics"] .gft-splash__cue { font-size: 13px; }
body[data-page="economics"] .gft-splash h1 { font-size: clamp(2.8rem, min(4.5vw, 7.6svh), 5.2rem); max-width: 18ch; margin-top: 22px; line-height: 1; }
body[data-page="economics"] .gft-splash h1 .gft-serif { font-size: .84em; }
body[data-page="economics"] .gft-splash__lede { font-size: clamp(15px, 1.15vw, 17px); margin-top: 20px; max-width: 46ch; line-height: 1.6; }
body[data-page="economics"] .gft-splash__actions { margin-top: 22px; }
@media (max-width: 760px) {
  body[data-page="economics"] .gft-splash h1 { font-size: clamp(2.3rem, 10vw, 3.2rem); max-width: 14ch; }
  body[data-page="economics"] .gft-splash__lede { font-size: 14px; }
}

/* ================= block entrances ================= */
/* The section-level grammar is carried by each block's own instrument (below), never by fading a whole band: a band
   at partial opacity showed the paper body through the night act on the mid frame. */
:root[data-m-go] :is(.prog-c-ec-sec, .prog-c-ec-int)[data-m]:not([data-m-in]) { opacity: 1; transform: none; clip-path: none; }
:root[data-m-go] :is(.prog-c-ec-sec, .prog-c-ec-int)[data-m][data-m-in] { animation-name: none; }
/* #4 twill-shift: the stage arrives on a diagonal */
:root[data-m-go] [data-m="prog-c-ec-twill"]:not([data-m-in]) { opacity: .35; transform: translate(-22px, 16px); }
:root[data-m-go] [data-m="prog-c-ec-twill"][data-m-in] { animation-name: prog-c-ec-twill; animation-duration: 720ms; animation-timing-function: var(--ec-ease); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
@keyframes prog-c-ec-twill { from { opacity: .35; transform: translate(-22px, 16px); } to { opacity: 1; transform: none; } }
/* #7 pick: the stage is picked up from the shed line */
:root[data-m-go] [data-m="prog-c-ec-pick"]:not([data-m-in]) { opacity: .35; transform: translateY(24px) skewY(-1.2deg); }
:root[data-m-go] [data-m="prog-c-ec-pick"][data-m-in] { animation-name: prog-c-ec-pick; animation-duration: 700ms; animation-timing-function: var(--ec-ease); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
@keyframes prog-c-ec-pick { from { opacity: .35; transform: translateY(24px) skewY(-1.2deg); } to { opacity: 1; transform: none; } }
/* #9 heddle: the posts lift and the numerals rise out of the baseline */
:root[data-m-go] [data-m="prog-c-ec-heddle"]:not([data-m-in]) svg { opacity: .4; transform: translateY(30px); }
:root[data-m-go] [data-m="prog-c-ec-heddle"]:not([data-m-in]) .prog-c-ec-gx__nums { clip-path: inset(60% 0 0 0); }
:root[data-m-go] [data-m="prog-c-ec-heddle"][data-m-in] svg { animation-name: prog-c-ec-heddle; animation-duration: 760ms; animation-timing-function: var(--ec-ease); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
:root[data-m-go] [data-m="prog-c-ec-heddle"][data-m-in] .prog-c-ec-gx__nums { animation-name: prog-c-ec-numrise; animation-duration: 760ms; animation-delay: 120ms; animation-timing-function: var(--ec-ease); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
@keyframes prog-c-ec-heddle { from { opacity: .4; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes prog-c-ec-numrise { from { clip-path: inset(60% 0 0 0); } to { clip-path: inset(0); } }