/* /value-chain/ : one film carried by one motif, the corridor thread (geometry in components/vc-overview/thread.ts).
   Every selector is scoped to this page (body[data-page="value-chain"] or a vcx- class). Pre-states exist only under
   :root[data-m-go][data-vcx] (motion allowed and the page script running); animated properties are transform, opacity,
   clip-path and filter, plus the kit's own dash flow. Scroll-driven rules are longhands inside @supports. */

body[data-page="value-chain"] {
  --vcx-night: #072d2b; --vcx-forest: #0e4d4a; --vcx-deep: #0a3d3a; --vcx-paper: #f6f4ef; --vcx-paper2: #ece8df;
  --vcx-ink: #25302e; --vcx-mut: #4a5b53; --vcx-lt: #cfe3d8; --vcx-wt: #f6f4ef;
  --vcx-sage: #6bb68f; --vcx-sage-t: #9fd4b6; --vcx-och: #c98a2b; --vcx-och-t: #e8bd73; --vcx-och-ink: #87570f;
  --vcx-ind: #8391b6; --vcx-ind-t: #b8c2e6; --vcx-leaf-ink: #2a6e50;
  --vcx-out: cubic-bezier(.16, 1, .3, 1); --vcx-soft: cubic-bezier(.4, 0, .2, 1);
  --vcx-mono: var(--gft-font-mono); --vcx-hex: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
body[data-page="value-chain"] main, body[data-page="value-chain"] footer { overflow-x: clip; }
body[data-page="value-chain"] .gft-seam { display: none !important; }

/* the kit's own section entrance would finish before a block is in view: each block's stage runs its own entrance */
:root[data-m-go] body[data-page="value-chain"] main > section.vcx-sec[data-m] { opacity: 1; transform: none; clip-path: none; animation-name: none; }

.vcx-sec { position: relative; isolation: isolate; overflow: clip; padding-block: 72px 80px; }
.vcx-sec > .gft-container { position: relative; z-index: 1; }
.vcx-sec--con { background-image: linear-gradient(var(--vcx-night), var(--vcx-night)); color: var(--vcx-wt); padding-top: 4px; view-timeline-name: --vcx-con; view-timeline-axis: block; }
.vcx-sec--gap { background-image: linear-gradient(var(--vcx-forest), var(--vcx-forest)); color: var(--vcx-wt); }
.vcx-sec--walk { background-image: linear-gradient(180deg, var(--vcx-deep) 0%, var(--vcx-night) 100%); color: var(--vcx-wt); padding-block: 56px 0; border-top: 1px solid #8fd0aa38; }
.vcx-sec--led { background-image: linear-gradient(var(--vcx-paper), var(--vcx-paper)); color: var(--vcx-ink); padding-top: 40px; padding-bottom: 0; border-top: 1px solid #c98a2b66; border-bottom: 1px solid #c98a2b80; }
.vcx-sec--cap { background-image: linear-gradient(var(--vcx-forest), var(--vcx-forest)); color: var(--vcx-wt); padding: 0; }
.vcx-sec--road { background-image: linear-gradient(var(--vcx-deep), var(--vcx-deep)); color: var(--vcx-wt); }
.vcx-sec--close { background-image: linear-gradient(var(--vcx-night), var(--vcx-night)); color: var(--vcx-wt); min-height: 100svh; padding-block: 40px 36px; }

/* ---------- type ---------- */
.vcx-head { max-width: 980px; }
.vcx-eyebrow { margin: 0 0 14px; font: 600 13px/1.5 var(--vcx-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--vcx-och-ink); }
.vcx-h2 { margin: 0; font: 850 clamp(30px, 3.1vw, 46px)/1.08 var(--gft-font-display); letter-spacing: -.035em; max-width: 24ch; text-wrap: balance; }
.vcx-w { display: inline-block; }
.vcx-lede { margin: 16px 0 0; font-size: 17px; line-height: 1.6; max-width: 62ch; color: var(--vcx-mut); }
.vcx-k { margin: 0; font: 600 13px/1.45 var(--vcx-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--vcx-mut); }
.vcx-ctl-k { display: block; margin: 0 0 8px; padding: 0; font: 600 13px/1.4 var(--vcx-mono); letter-spacing: .04em; text-transform: uppercase; color: inherit; }
.vcx-note { margin: 10px 0 0; font-size: 14px; line-height: 1.55; color: var(--vcx-mut); }
:is(.vcx-sec--con, .vcx-sec--gap, .vcx-sec--walk, .vcx-sec--cap, .vcx-sec--road, .vcx-sec--close, .vcx-loom) :is(.vcx-eyebrow) { color: var(--vcx-och-t); }
:is(.vcx-sec--con, .vcx-sec--gap, .vcx-sec--walk, .vcx-sec--cap, .vcx-sec--road, .vcx-sec--close, .vcx-loom) :is(.vcx-lede, .vcx-k, .vcx-note) { color: var(--vcx-lt); }

/* citations read as footnote markers on every ground */
body[data-page="value-chain"] main .gft-cite {
  position: relative; display: inline; min-height: 0; padding: 0 1px; margin-inline: 2px 3px; border: 0; background: none;
  font: 700 13px/1 var(--vcx-mono); letter-spacing: 0; color: inherit; vertical-align: baseline; cursor: pointer;
  text-decoration: underline dotted; text-underline-offset: 3px;
}
body[data-page="value-chain"] main .gft-cite::after { content: ''; position: absolute; inset: -14px -6px; }

/* controls */
.vcx-seg { display: flex; flex-wrap: wrap; gap: 0; margin: 0; padding: 0; border: 0; min-width: 0; }
.vcx-seg legend { float: left; width: 100%; }
.vcx-seg label { position: relative; cursor: pointer; }
.vcx-seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.vcx-seg span { display: flex; align-items: center; min-height: 44px; padding: 8px 16px; border: 1px solid currentColor; margin-left: -1px; font: 600 15px/1.2 var(--gft-font-display); }
.vcx-seg input:checked + span { background: var(--vcx-och); border-color: var(--vcx-och); color: var(--vcx-night); }
.vcx-seg input:focus-visible + span { outline: 3px solid var(--vcx-och-t); outline-offset: 2px; }
.vcx-btn { min-height: 44px; padding: 8px 16px; border: 1px solid currentColor; background: transparent; color: inherit; font: 600 15px/1.2 var(--gft-font-display); cursor: pointer; }
.vcx-btn:hover, .vcx-seg label:hover span { background: #ffffff1a; }
body[data-page="value-chain"] main input[type=range] { width: 100%; min-height: 44px; margin: 0; accent-color: var(--vcx-och); }
.vcx-more { margin-top: 16px; font-size: 15px; line-height: 1.6; }
.vcx-more summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font: 600 14px/1.3 var(--vcx-mono); letter-spacing: .03em; text-decoration: underline; text-underline-offset: 4px; }
.vcx-more p { margin: 6px 0 0; max-width: 90ch; }

/* ---------- heading entrances: whole words on fixed line boxes, triggered when the head is a third in view ---------- */
:root[data-m-go][data-vcx] .vcx-head:not([data-vcx-in]) :is(.vcx-w, .vcx-eyebrow, .vcx-lede) { opacity: 0; }
:root[data-m-go][data-vcx] .vcx-head[data-vcx-in] .vcx-w {
  animation-duration: 520ms; animation-timing-function: var(--vcx-out); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal;
  animation-delay: calc(min(var(--w), 14) * 26ms + 60ms); animation-name: vcx-w-rise;
}
:root[data-m-go][data-vcx] .vcx-head[data-fx=blur][data-vcx-in] .vcx-w { animation-name: vcx-w-blur; }
:root[data-m-go][data-vcx] .vcx-head[data-fx=turn][data-vcx-in] .vcx-w { animation-name: vcx-w-turn; }
:root[data-m-go][data-vcx] .vcx-head[data-fx=skew][data-vcx-in] .vcx-w { animation-name: vcx-w-skew; }
:root[data-m-go][data-vcx] .vcx-head[data-fx=zoom][data-vcx-in] .vcx-w { animation-name: vcx-w-zoom; }
:root[data-m-go][data-vcx] .vcx-head[data-fx=swing][data-vcx-in] .vcx-w { animation-name: vcx-w-swing; }
:root[data-m-go][data-vcx] .vcx-head[data-vcx-in] :is(.vcx-eyebrow, .vcx-lede) {
  animation-name: vcx-fade-up; animation-duration: 600ms; animation-timing-function: var(--vcx-out); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal;
}
:root[data-m-go][data-vcx] .vcx-head[data-vcx-in] .vcx-lede { animation-delay: 300ms; }
@keyframes vcx-w-rise { from { opacity: 0; transform: translateY(.38em); } }
@keyframes vcx-w-blur { from { opacity: 0; filter: blur(6px); } 60% { filter: blur(0); } }
@keyframes vcx-w-turn { from { opacity: 0; transform: perspective(500px) rotateX(-70deg); transform-origin: 50% 100%; } }
@keyframes vcx-w-skew { from { opacity: 0; transform: translateX(-.3em) skewX(-12deg); } }
@keyframes vcx-w-zoom { from { opacity: 0; transform: scale(.9); } }
@keyframes vcx-w-swing { from { opacity: 0; transform: rotate(-6deg) translateY(.3em); transform-origin: 0 100%; } }
@keyframes vcx-fade-up { from { opacity: 0; transform: translateY(14px); } }
@keyframes vcx-fade { from { opacity: 0; } }

/* ---------- ground wipes along the thread (2→3, 6→7, 7→8, 8→9): the old ground recedes as the block enters ---------- */
.vcx-wipe { position: absolute; inset: 0 0 auto 0; height: 100svh; z-index: 0; pointer-events: none; overflow: hidden; }
.vcx-wipe i { position: absolute; inset: 0; transform: scale(0); overflow-anchor: none; }
.vcx-wipe i + i { display: none; }
.vcx-wipe--x i { transform-origin: 100% 50%; background-image: linear-gradient(90deg, var(--vcx-och) 0 3px, var(--vcx-night) 3px); }
.vcx-wipe--y i { transform-origin: 50% 0; }
.vcx-wipe--cap i { background-image: linear-gradient(0deg, var(--vcx-och) 0 3px, var(--vcx-night) 3px); }
.vcx-wipe--road i { background-image: linear-gradient(0deg, var(--vcx-sage) 0 3px, var(--vcx-forest) 3px); }
.vcx-wipe--close i { transform-origin: 0 50%; background-image: linear-gradient(270deg, var(--vcx-sage) 0 3px, var(--vcx-deep) 3px); }
@supports (animation-timeline: view()) {
  .vcx-sec:has(> .vcx-wipe) { view-timeline-name: --vcx-wipe; view-timeline-axis: block; }
  :root[data-m-go] .vcx-wipe--x i { animation-name: vcx-wipe-x; }
  :root[data-m-go] .vcx-wipe--y i { animation-name: vcx-wipe-y; }
  :root[data-m-go] .vcx-wipe i {
    animation-duration: 1ms; animation-timing-function: linear; animation-fill-mode: both;
    animation-timeline: --vcx-wipe; animation-range-start: entry 0%; animation-range-end: entry 55%;
  }
}
@keyframes vcx-wipe-x { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes vcx-wipe-y { from { transform: scaleY(1); } to { transform: scaleY(0); } }

/* ---------- block 1: splash ---------- */
body[data-page="value-chain"] [data-splash="vc-a-overview"] { min-height: calc(84svh - 88px); }
body[data-page="value-chain"] [data-splash="vc-a-overview"] h1 { font-size: clamp(64px, min(7vw, 8.2svh), 112px); max-width: 11ch; }
body[data-page="value-chain"] [data-splash="vc-a-overview"] .gft-splash__lede { font-size: 19px; line-height: 1.55; max-width: 50ch; color: var(--vcx-lt); margin-top: 20px; }
body[data-page="value-chain"] [data-splash="vc-a-overview"] .gft-splash__actions { margin-top: 22px; }
body[data-page="value-chain"] [data-splash="vc-a-overview"] .gft-splash__data { display: none; }
body[data-page="value-chain"] [data-splash="vc-a-overview"] .gft-splash__position { font-size: 13px; color: var(--vcx-lt); }
body[data-page="value-chain"] [data-splash="vc-a-overview"] .gft-splash__cue { font-size: 15px; }
body[data-page="value-chain"] [data-splash="vc-a-overview"] .gft-splash__caption { font-size: 13px; color: var(--vcx-lt); }
.vcx-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.vcx-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px; border: 1px solid #6bb68f80; background: #072d2be6; color: var(--vcx-wt); font: 14px var(--vcx-mono); text-decoration: none; }
.vcx-pill strong { color: var(--vcx-sage-t); }
.vcx-pill--ochre { border-color: #c98a2bb3; }
.vcx-pill--ochre strong { color: var(--vcx-och-t); }
.vcx-pill:hover { background: var(--vcx-forest); }
.vcx-splash-bar { display: none; }
.vcx-splash { position: relative; width: 100%; height: 100%; overflow-anchor: none; }
.vcx-splash__svg--tall { display: none; }
.vcx-sp-trav { offset-distance: var(--park); offset-rotate: 0deg; offset-anchor: 0 0; transform-box: view-box; overflow-anchor: none; }
.vcx-sp-p { offset-distance: calc(var(--k, 10) * 5%); offset-rotate: 0deg; offset-anchor: 0 0; transform-box: view-box; }
.vcx-sp-p--local { offset-distance: 55%; }
.vcx-sp-tick { transform-box: fill-box; transform-origin: 50% 0; }
.vcx-sp-tick[data-up] { transform-origin: 50% 100%; }
.vcx-sp-name { opacity: 0; }
:root[data-m-go] .vcx-splash[data-m-on] .vcx-sp-trav { animation-name: vcx-lap; animation-duration: 14s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: normal; }
:root[data-m-go] .vcx-splash[data-m-on] .vcx-sp-p { animation-name: vcx-part; animation-duration: 3.8s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: normal; animation-delay: calc(var(--k, 0) * -.2s); }
:root[data-m-go] .vcx-splash[data-m-on] .vcx-sp-tick { animation-name: vcx-tick; animation-duration: 14s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: normal; animation-delay: var(--t); animation-fill-mode: backwards; }
:root[data-m-go] .vcx-splash[data-m-on] .vcx-sp-name { animation-name: vcx-name; animation-duration: 14s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: normal; animation-delay: var(--t); animation-fill-mode: backwards; }
@keyframes vcx-lap { 0% { offset-distance: 0%; opacity: 0; } 2% { opacity: 1; } 97% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
@keyframes vcx-part { 0% { offset-distance: 0%; opacity: 0; } 8% { opacity: 1; } 88% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
@keyframes vcx-tick { 0% { transform: scaleY(0); } 2.2% { transform: scaleY(1); } 72% { transform: scaleY(1); } 80%, 100% { transform: scaleY(0); } }
@keyframes vcx-name { 0%, 2% { opacity: 0; } 4.5% { opacity: 1; } 60% { opacity: 1; } 72%, 100% { opacity: 0; } }
/* hand-over 1→2: as the splash leaves, the loop's nodes dim in order while the rail below lights 01 to 09 */
@supports (animation-timeline: view()) {
  :root[data-m-go] .vcx-splash__svg--wide .vcx-sp-node {
    animation-name: vcx-dim; animation-duration: 1ms; animation-timing-function: linear; animation-fill-mode: both;
    animation-timeline: --gft-splash; animation-range-start: exit calc(var(--i) * 5%); animation-range-end: exit calc(var(--i) * 5% + 22%);
  }
}
@keyframes vcx-dim { from { opacity: 1; } to { opacity: .28; } }

/* ---------- block 2: the corridor console ---------- */
.vcx-con { position: relative; display: grid; gap: 22px; --sel: 1; }
.vcx-rail { position: relative; z-index: 2; padding-top: 80px; }
.vcx-pins { position: absolute; inset: 0 0 auto 0; height: 80px; }
.vcx-pin { position: absolute; top: 0; left: calc(var(--x) * 100%); transform: translateX(var(--shift)); display: grid; gap: 2px; min-height: 44px; padding: 6px 12px 8px; border: 1px solid #c98a2b99; background: var(--vcx-night); color: var(--vcx-wt); text-align: left; cursor: pointer; }
.vcx-pin b { font: 800 24px/1.05 var(--gft-font-display); letter-spacing: -.02em; color: var(--vcx-och-t); white-space: nowrap; }
.vcx-pin span { font: 13px/1.3 var(--vcx-mono); letter-spacing: .02em; color: var(--vcx-lt); white-space: nowrap; }
.vcx-pin::after { content: ''; position: absolute; top: 100%; left: calc(var(--shift) * -1); width: 2px; height: 14px; margin-left: -1px; background: var(--vcx-och); }
.vcx-pin[aria-pressed=true] { background: var(--vcx-och); border-color: var(--vcx-och); }
.vcx-pin[aria-pressed=true] :is(b, span) { color: var(--vcx-night); }
.vcx-rail__set { position: relative; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); margin: 0; padding: 0; border: 0; min-width: 0; }
.vcx-rail__line { position: absolute; left: calc(100% / 18); right: calc(100% / 18); top: 26px; height: 4px; }
.vcx-rail__line > * { position: absolute; inset: 0; display: block; }
.vcx-rail__warp { background: #6bb68f55; }
.vcx-rail__lit { background: linear-gradient(90deg, var(--vcx-sage), var(--vcx-och)); clip-path: inset(0 calc((8 - var(--sel)) / 8 * 100%) 0 0); transition: clip-path 600ms var(--vcx-out); }
.vcx-rail__pass { opacity: 0; background: linear-gradient(90deg, transparent 0 82%, #fff6e0 96%, transparent 100%); }
.vcx-rail__pulse { width: 100%; height: 100%; overflow: visible; }
.vcx-rail__pulse path { stroke: #fff6e6; stroke-width: 2; stroke-opacity: .8; --m-dash: 3 22; }
.vcx-node { position: relative; display: grid; justify-items: center; gap: 6px; cursor: pointer; padding-bottom: 6px; }
.vcx-node input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 2; }
.vcx-node__hex { position: relative; width: 56px; height: 56px; display: grid; place-items: center; clip-path: var(--vcx-hex); background: var(--tone, var(--vcx-sage)); }
.vcx-node__hex::before { content: ''; position: absolute; inset: 2.5px; clip-path: var(--vcx-hex); background: var(--vcx-night); transition: background-color 300ms; }
.vcx-node__hex b { position: relative; font: 700 17px/1 var(--vcx-mono); color: var(--vcx-wt); }
.vcx-node__name { font: 600 15px/1.2 var(--gft-font-display); color: var(--vcx-lt); }
.vcx-node__tick { width: 2px; height: 18px; background: repeating-linear-gradient(180deg, var(--vcx-ind-t) 0 4px, transparent 4px 7px); transform-origin: 50% 0; }
.vcx-node[data-tone=ochre] { --tone: var(--vcx-och); } .vcx-node[data-tone=indigo] { --tone: var(--vcx-ind); } .vcx-node[data-tone=leaf] { --tone: #4fa47c; }
.vcx-node input:checked + .vcx-node__hex::before { background: var(--tone, var(--vcx-sage)); }
.vcx-node input:checked + .vcx-node__hex b { color: var(--vcx-night); }
.vcx-node input:checked ~ .vcx-node__name { color: #fff; text-decoration: underline 2px var(--vcx-och); text-underline-offset: 5px; }
.vcx-node input:focus-visible + .vcx-node__hex { outline: 3px solid var(--vcx-och-t); outline-offset: 3px; }
.vcx-node:hover .vcx-node__hex::before { background: #0e4d4a; }
:root[data-m-go] .vcx-con[data-m-on] .vcx-node input:checked + .vcx-node__hex { animation-name: vcx-breathe; animation-duration: 2.4s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; }
:root[data-m-go] .vcx-con[data-m-on]:has(input[name=vcx-lens][value=weft]:checked) .vcx-node input:checked ~ .vcx-node__tick { animation-name: vcx-tickpulse; animation-duration: 1.1s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; }
@keyframes vcx-breathe { from { transform: scale(1); } to { transform: scale(1.09); } }
@keyframes vcx-tickpulse { from { transform: scaleY(.5); opacity: .6; } to { transform: scaleY(1.5); opacity: 1; } }
/* the ochre stub at 02: down past the block's foot, into the margin, towards the gap's field block */
.vcx-stub { position: absolute; z-index: -1; left: -28px; top: 200px; width: calc(100% / 6 + 28px); height: 3000px; border-top: 4px solid var(--vcx-och); border-left: 4px solid var(--vcx-och); border-top-left-radius: 26px; pointer-events: none; overflow-anchor: none; }
.vcx-stub::before { content: ''; position: absolute; right: -2px; top: -64px; width: 4px; height: 62px; background: var(--vcx-och); }
@supports (animation-timeline: view()) {
  :root[data-m-go] .vcx-stub { animation-name: vcx-stub; animation-duration: 1ms; animation-timing-function: linear; animation-fill-mode: both; animation-timeline: --vcx-con; animation-range-start: cover 10%; animation-range-end: exit 80%; }
}
@keyframes vcx-stub { from { clip-path: inset(0 0 calc(100% - 300px) 0); } to { clip-path: inset(0 0 0 0); } }

.vcx-con__mid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 48px; align-items: end; }
.vcx-con__mid .vcx-h2 { font-size: clamp(28px, 2.6vw, 38px); }
.vcx-con__ctl { display: grid; gap: 14px; }
.vcx-con__scrubrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: end; }
.vcx-scrub { display: block; }
.vcx-con__panels { position: relative; z-index: 1; display: grid; background: var(--vcx-deep); border: 1px solid #ffffff26; }
.vcx-panel { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(0, 1fr)); gap: 28px; padding: 24px 28px 26px; opacity: 0; visibility: hidden; transition: opacity 280ms var(--vcx-soft), visibility 0s linear 280ms; }
.vcx-panel__name { margin: 6px 0 0; font: 700 22px/1.2 var(--gft-font-display); }
.vcx-panel__big { margin: 6px 0 4px; font: 850 56px/1 var(--gft-font-display); letter-spacing: -.04em; color: var(--vcx-och-t); white-space: nowrap; }
.vcx-panel__lab { margin: 0; font-size: 15px; line-height: 1.5; color: var(--vcx-lt); }
.vcx-face { border-left: 1px solid #ffffff2e; padding-left: 20px; transition: opacity 300ms; }
.vcx-face__v { margin: 8px 0 0; font-size: 17px; line-height: 1.5; color: var(--vcx-wt); }
.vcx-face__s { margin: 10px 0 0; font-size: 14px; line-height: 1.5; color: var(--vcx-lt); }
.vcx-face--weft .vcx-k { color: var(--vcx-ind-t); }
.vcx-con:has(input[name=vcx-lens][value=warp]:checked) .vcx-face--weft, .vcx-con:has(input[name=vcx-lens][value=weft]:checked) :is(.vcx-face--warp, .vcx-face--loss) { opacity: .3; }
.vcx-basis { display: grid; position: relative; z-index: 1; }
.vcx-basis p { grid-area: 1 / 1; margin: 0; font-size: 15px; line-height: 1.5; color: var(--vcx-lt); opacity: 0; visibility: hidden; transition: opacity 240ms, visibility 0s linear 240ms; }
.vcx-basis .vcx-k { display: inline; color: var(--vcx-och-t); margin-right: 6px; }
.vcx-con[data-sel="0"] { --sel: 0; }
.vcx-con[data-sel="0"] [data-panel="0"], .vcx-con[data-basis="s0"] [data-basis-of="s0"] { opacity: 1; visibility: visible; transition-duration: 280ms; transition-delay: 0s; }
.vcx-con[data-sel="1"] { --sel: 1; }
.vcx-con[data-sel="1"] [data-panel="1"], .vcx-con[data-basis="s1"] [data-basis-of="s1"] { opacity: 1; visibility: visible; transition-duration: 280ms; transition-delay: 0s; }
.vcx-con[data-sel="2"] { --sel: 2; }
.vcx-con[data-sel="2"] [data-panel="2"], .vcx-con[data-basis="s2"] [data-basis-of="s2"] { opacity: 1; visibility: visible; transition-duration: 280ms; transition-delay: 0s; }
.vcx-con[data-sel="3"] { --sel: 3; }
.vcx-con[data-sel="3"] [data-panel="3"], .vcx-con[data-basis="s3"] [data-basis-of="s3"] { opacity: 1; visibility: visible; transition-duration: 280ms; transition-delay: 0s; }
.vcx-con[data-sel="4"] { --sel: 4; }
.vcx-con[data-sel="4"] [data-panel="4"], .vcx-con[data-basis="s4"] [data-basis-of="s4"] { opacity: 1; visibility: visible; transition-duration: 280ms; transition-delay: 0s; }
.vcx-con[data-sel="5"] { --sel: 5; }
.vcx-con[data-sel="5"] [data-panel="5"], .vcx-con[data-basis="s5"] [data-basis-of="s5"] { opacity: 1; visibility: visible; transition-duration: 280ms; transition-delay: 0s; }
.vcx-con[data-sel="6"] { --sel: 6; }
.vcx-con[data-sel="6"] [data-panel="6"], .vcx-con[data-basis="s6"] [data-basis-of="s6"] { opacity: 1; visibility: visible; transition-duration: 280ms; transition-delay: 0s; }
.vcx-con[data-sel="7"] { --sel: 7; }
.vcx-con[data-sel="7"] [data-panel="7"], .vcx-con[data-basis="s7"] [data-basis-of="s7"] { opacity: 1; visibility: visible; transition-duration: 280ms; transition-delay: 0s; }
.vcx-con[data-sel="8"] { --sel: 8; }
.vcx-con[data-sel="8"] [data-panel="8"], .vcx-con[data-basis="s8"] [data-basis-of="s8"] { opacity: 1; visibility: visible; transition-duration: 280ms; transition-delay: 0s; }
.vcx-con[data-basis="p0"] [data-basis-of="p0"] { opacity: 1; visibility: visible; transition-duration: 280ms; transition-delay: 0s; }
.vcx-con[data-basis="p1"] [data-basis-of="p1"] { opacity: 1; visibility: visible; transition-duration: 280ms; transition-delay: 0s; }
.vcx-con[data-basis="p2"] [data-basis-of="p2"] { opacity: 1; visibility: visible; transition-duration: 280ms; transition-delay: 0s; }
/* entrance "unspool": the rail unspools from 01, a pass of light runs 01 to 09, pins drop on their nodes, faces rise */
:root[data-m-go][data-vcx] .vcx-rail:not([data-vcx-in]) .vcx-rail__lit { clip-path: inset(0 100% 0 0); }
:root[data-m-go][data-vcx] .vcx-rail:not([data-vcx-in]) .vcx-node__hex { opacity: .4; transform: scale(.82); }
:root[data-m-go][data-vcx] .vcx-rail:not([data-vcx-in]) .vcx-pin { opacity: 0; }
:root[data-m-go][data-vcx] .vcx-rail[data-vcx-in] .vcx-rail__lit { animation-name: vcx-unspool; animation-duration: 760ms; animation-timing-function: cubic-bezier(.3, .1, .3, 1); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
:root[data-m-go][data-vcx] .vcx-rail[data-vcx-in] .vcx-rail__pass { animation-name: vcx-pass; animation-duration: 820ms; animation-timing-function: linear; animation-iteration-count: 1; animation-direction: normal; }
:root[data-m-go][data-vcx] .vcx-rail[data-vcx-in] .vcx-node__hex { animation-name: vcx-stamp; animation-duration: 320ms; animation-timing-function: var(--vcx-out); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; animation-delay: calc(var(--i) * 80ms); }
:root[data-m-go][data-vcx] .vcx-rail[data-vcx-in] .vcx-pin { animation-name: vcx-drop; animation-duration: 460ms; animation-timing-function: var(--vcx-out); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; animation-delay: calc(var(--x) * 1200ms + 160ms); }
:root[data-m-go][data-vcx] .vcx-con__panels:not([data-vcx-in]) :is(.vcx-panel__fig, .vcx-face) { opacity: 0; }
:root[data-m-go][data-vcx] .vcx-con__panels[data-vcx-in] :is(.vcx-panel__fig, .vcx-face) { animation-name: vcx-fade-up; animation-duration: 520ms; animation-timing-function: var(--vcx-out); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
:root[data-m-go][data-vcx] .vcx-con__panels[data-vcx-in] .vcx-face--warp { animation-delay: 90ms; }
:root[data-m-go][data-vcx] .vcx-con__panels[data-vcx-in] .vcx-face--loss { animation-delay: 180ms; }
:root[data-m-go][data-vcx] .vcx-con__panels[data-vcx-in] .vcx-face--weft { animation-delay: 270ms; }
@keyframes vcx-unspool { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes vcx-pass { 0% { opacity: 1; transform: translateX(-100%); } 90% { opacity: 1; } 100% { opacity: 0; transform: translateX(0); } }
@keyframes vcx-stamp { 0% { opacity: .35; transform: scale(.7); } 70% { opacity: 1; transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes vcx-drop { from { opacity: 0; transform: translateX(var(--shift)) scale(.85); } to { transform: translateX(var(--shift)); } }

/* ---------- block 3: the gap (forest) ---------- */
.vcx-gap { position: relative; display: grid; gap: 26px; }
.vcx-gap__top { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 40px; align-items: end; }
.vcx-gapread { display: flex; gap: 28px; justify-content: flex-end; align-items: flex-end; }
.vcx-gapread p { margin: 0; display: grid; gap: 4px; max-width: 15ch; }
.vcx-gapread b { font: 850 64px/.95 var(--gft-font-display); letter-spacing: -.05em; }
.vcx-gapread__raw b { color: var(--vcx-och-t); }
.vcx-gapread__loc b { color: var(--vcx-sage-t); }
.vcx-gapread p > span { font-size: 15px; line-height: 1.4; color: var(--vcx-lt); }
.vcx-sk { position: relative; margin: 0; container-type: inline-size; }
.vcx-sk__svg { display: block; width: 100%; height: auto; overflow: visible; }
.vcx-sk__svg--tall { display: none; }
.vcx-sk text { fill: var(--vcx-wt); font-family: var(--vcx-mono); }
.vcx-sk .sk-n { font-size: 40px; font-weight: 800; fill: var(--vcx-sage-t); }
.vcx-sk .sk-h { font-size: 19px; font-weight: 700; letter-spacing: .04em; }
.vcx-sk .sk-s { font-size: 17px; fill: var(--vcx-lt); }
.vcx-sk .sk-f { font-size: 36px; font-weight: 800; fill: var(--vcx-och-t); font-family: var(--gft-font-display); }
.vcx-sk .sk-f--leaf { fill: var(--vcx-sage-t); }
.vcx-sk__svg--tall .sk-h { font-size: 15px; } .vcx-sk__svg--tall .sk-s { font-size: 14px; } .vcx-sk__svg--tall .sk-f { font-size: 26px; }
.vcx-sk__lead { display: none; }
.vcx-sk__cap { margin-top: 12px; font-size: 14px; line-height: 1.55; color: var(--vcx-lt); max-width: 110ch; }
/* the ochre thread arrives from the console down the margin and enters the field block */
.vcx-sk::before { content: ''; position: absolute; z-index: -1; left: -28px; top: calc(17cqw - 3000px); width: calc(28px + 1.8cqw); height: 3000px; border-left: 4px solid var(--vcx-och); border-bottom: 4px solid var(--vcx-och); border-bottom-left-radius: 26px; pointer-events: none; }
/* the sage local thread leaves the flow at its right edge and runs down the margin into the walkthrough */
.vcx-sk::after { content: ''; position: absolute; z-index: -1; right: 0; top: calc(36.67cqw - 2px); height: 3000px; width: 4px; background: #8fd0aa; pointer-events: none; }
.vcx-sk__carry { fill: none; }
.vcx-gapctl { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 36px; align-items: start; padding-right: 24px; }
.vcx-gapctl__row { display: grid; grid-template-columns: minmax(0, 1fr) 6ch; gap: 16px; align-items: center; }
.vcx-gapctl__out { font: 800 28px/1 var(--gft-font-display); color: var(--vcx-sage-t); text-align: right; }
.vcx-presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-self: center; }
.vcx-presets button { display: grid; gap: 2px; min-height: 56px; padding: 8px 12px; border: 1px solid #ffffff59; background: transparent; color: var(--vcx-wt); font: 700 15px/1.2 var(--gft-font-display); text-align: left; cursor: pointer; }
.vcx-presets button span { font: 13px var(--vcx-mono); color: var(--vcx-lt); }
.vcx-presets button[aria-pressed=true] { background: var(--vcx-och); border-color: var(--vcx-och); color: var(--vcx-night); }
.vcx-presets button[aria-pressed=true] span { color: var(--vcx-night); }
.vcx-ruler { padding: 22px 24px 18px; margin-right: 24px; border: 1px solid #ffffff2e; background: #072d2b8c; }
.vcx-ruler__thread { position: relative; height: 44px; margin: 6px 0 14px; }
.vcx-ruler__thread::before { content: ''; position: absolute; left: calc(100% / 18); right: calc(100% / 18); top: 21px; height: 2px; background: #6bb68f66; }
.vcx-ruler__n { position: absolute; top: 4px; left: calc((var(--i) + .5) / 9 * 100%); width: 36px; height: 36px; margin-left: -18px; display: grid; place-items: center; clip-path: var(--vcx-hex); background: #0e4d4a; font: 700 13px var(--vcx-mono); z-index: 1; }
.vcx-ruler__seg { position: absolute; top: 15px; height: 14px; left: calc(var(--a) / 9 * 100% + 4px); width: calc((var(--b) - var(--a) + 1) / 9 * 100% - 8px); border-radius: 7px; background: var(--vcx-och); opacity: 0; transition: opacity 300ms; }
.vcx-ruler__tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.vcx-ruler__tabs label { position: relative; cursor: pointer; }
.vcx-ruler__tabs input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.vcx-ruler__tabs label > span { display: grid; gap: 2px; min-height: 56px; padding: 8px 12px; border: 1px solid #ffffff59; }
.vcx-ruler__tabs em { font: 600 13px var(--vcx-mono); font-style: normal; letter-spacing: .04em; text-transform: uppercase; color: var(--vcx-lt); }
.vcx-ruler__tabs b { font: 800 22px/1.15 var(--gft-font-display); }
.vcx-ruler__tabs input:checked + span { background: var(--vcx-och); border-color: var(--vcx-och); color: var(--vcx-night); }
.vcx-ruler__tabs input:checked + span em { color: var(--vcx-night); }
.vcx-ruler__tabs input:focus-visible + span { outline: 3px solid var(--vcx-och-t); outline-offset: 2px; }
.vcx-ruler__lines { display: grid; margin-top: 14px; }
.vcx-ruler__lines p { grid-area: 1 / 1; margin: 0; font-size: 17px; line-height: 1.55; max-width: 96ch; opacity: 0; visibility: hidden; }
.vcx-ruler:has(input[value="seed"]:checked) :is([data-seg="seed"], [data-line="seed"]) { opacity: 1; visibility: visible; }
.vcx-ruler:has(input[value="lint"]:checked) :is([data-seg="lint"], [data-line="lint"]) { opacity: 1; visibility: visible; }
.vcx-ruler:has(input[value="yarn"]:checked) :is([data-seg="yarn"], [data-line="yarn"]) { opacity: 1; visibility: visible; }
.vcx-ruler:has(input[value="garment"]:checked) :is([data-seg="garment"], [data-line="garment"]) { opacity: 1; visibility: visible; }
:root[data-m-go] .vcx-gap[data-m-on] .vcx-ruler__seg { animation-name: vcx-glow; animation-duration: 1.6s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; }
@keyframes vcx-glow { from { filter: brightness(1); } to { filter: brightness(1.35) drop-shadow(0 0 6px #e8bd73); } }
:root[data-m-go][data-vcx] .vcx-sk:not([data-vcx-in]) :is(.vcx-sk__in, .vcx-sk__fork, .vcx-sk__nums) { opacity: 0; }
:root[data-m-go][data-vcx] .vcx-sk[data-vcx-in] .vcx-sk__in { animation-name: vcx-weft-in; animation-duration: 460ms; animation-timing-function: var(--vcx-out); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
:root[data-m-go][data-vcx] .vcx-sk[data-vcx-in] .vcx-sk__fork { transform-box: fill-box; transform-origin: 0 50%; animation-name: vcx-fork; animation-duration: 620ms; animation-delay: 180ms; animation-timing-function: var(--vcx-out); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
:root[data-m-go][data-vcx] .vcx-sk[data-vcx-in] .vcx-sk__nums { animation-name: vcx-fade; animation-duration: 260ms; animation-delay: 640ms; animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
:root[data-m-go][data-vcx] .vcx-gapread:not([data-vcx-in]) b { opacity: 0; }
:root[data-m-go][data-vcx] .vcx-gapread[data-vcx-in] b { animation-name: vcx-stamp; animation-duration: 380ms; animation-delay: 420ms; animation-timing-function: var(--vcx-out); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
:root[data-m-go][data-vcx] .vcx-gapread[data-vcx-in] .vcx-gapread__loc b { animation-delay: 540ms; }
:root[data-m-go][data-vcx] :is(.vcx-gapctl, .vcx-ruler):not([data-vcx-in]) { opacity: 0; }
:root[data-m-go][data-vcx] :is(.vcx-gapctl, .vcx-ruler)[data-vcx-in] { animation-name: vcx-weft-in; animation-duration: 560ms; animation-timing-function: var(--vcx-out); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
@keyframes vcx-weft-in { from { opacity: 0; transform: translateX(-28px); } }
@keyframes vcx-fork { from { opacity: .2; transform: scaleX(0); } }

/* ---------- block 4: the walkthrough (dark film, sticky forest stage, layered glass card, hung ledger rack) ---------- */
.vcx-sec--walk .vcx-head { margin-bottom: 24px; }
.vcx-walk { position: relative; --stage-h: 100svh; }
.vcx-walk__stage { position: sticky; top: 0; z-index: 2; height: var(--stage-h); min-height: 660px; display: grid; grid-template-rows: auto auto minmax(0, 1fr); padding: 18px 28px 22px; background: var(--vcx-forest); border: 1px solid #6bb68f38; color: var(--vcx-wt); container-type: inline-size; }
.vcx-walk__stage::before { content: ''; position: absolute; right: 0; top: calc(60px + 7.4cqw - 3000px); height: 3000px; width: 4px; background: #8fd0aa; pointer-events: none; }
.vcx-walk__top { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.vcx-walk__now { display: grid; color: var(--vcx-lt); font-size: 14px; }
.vcx-walk__now span { grid-area: 1 / 1; opacity: 0; transition: opacity 300ms; }
.vcx-walk__zones { display: flex; gap: 6px; }
.vcx-walk__zones button { width: 44px; height: 44px; border: 1px solid #ffffff73; background: transparent; color: var(--vcx-wt); font: 700 15px var(--vcx-mono); cursor: pointer; }
.vcx-walk__thread { display: block; width: 100%; height: auto; overflow: hidden; }
.vcx-walk__cam, .vcx-walk__turn { transform-box: view-box; transition: transform 900ms var(--vcx-out), opacity 400ms; }
.vcx-walk__cam { transform-origin: 1200px 92px; }
.vcx-walk__turn { transform-origin: 66.7px 92px; }
.vcx-walk__line { stroke: #ffffff4d; }
.vcx-walk__seg { stroke: var(--vcx-och); opacity: 0; transition: opacity 400ms; }
.vcx-walk__seg[data-z="3"] { stroke: var(--vcx-ind-t); }
.vcx-walk__hook { opacity: 0; transition: opacity 350ms; }
.vcx-walk__br path { stroke: #ffffff59; transition: stroke 300ms; }
.vcx-walk__br text { fill: #ffffffb3; font: 700 16px var(--vcx-mono); }
.vcx-walk__node polygon { fill: var(--vcx-night); transition: fill 300ms; }
.vcx-walk__node text { fill: var(--vcx-wt); font: 700 15px var(--vcx-mono); }
.vcx-walk__body { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 28px; min-height: 0; align-items: stretch; }
.vcx-walk__left { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 12px; min-height: 0; }
.vcx-walk__art, .vcx-walk__read { display: grid; min-height: 0; align-items: center; }
.vcx-walk__art { height: 100%; }
.vcx-walk__right { display: grid; align-items: center; min-height: 0; }
.vcx-art { grid-area: 1 / 1; width: 100%; height: 100%; max-height: 220px; opacity: 0; visibility: hidden; clip-path: inset(0 100% 0 0); transition: opacity 300ms, clip-path 700ms var(--vcx-out), visibility 0s linear 300ms; }
.vcx-art .a-ink { stroke: #f6f4efcc; stroke-width: 2.4; }
.vcx-art .a-sage { stroke: var(--vcx-sage-t); stroke-width: 2.4; }
.vcx-art .a-ochre { stroke: var(--vcx-och); stroke-width: 3; }
.vcx-art .a-weave { stroke: #9fd4b680; stroke-width: 1.4; }
.vcx-art .a-teeth { stroke: var(--vcx-och-t); stroke-width: 6; stroke-dasharray: 4 6; }
.vcx-art .a-fill { fill: var(--vcx-och); }
.vcx-art .a-ochrefill { fill: var(--vcx-och); }
.vcx-art .a-dash { stroke-dasharray: 8 6; }
.vcx-art .a-txt { fill: var(--vcx-lt); font: 600 15px var(--vcx-mono); letter-spacing: .04em; }
.vcx-art .a-txt--dark { fill: var(--vcx-night); }
.vcx-art__saw, .vcx-art__needle, .vcx-art__scan { transform-box: fill-box; transform-origin: center; }
.vcx-wread { grid-area: 1 / 1; padding: 14px 18px; background: #072d2b8c; border: 1px solid #ffffff24; opacity: 0; visibility: hidden; transition: opacity 300ms, visibility 0s linear 300ms; }
.vcx-wread .vcx-k { color: var(--vcx-och-t); }
.vcx-wread__big { margin: 4px 0 2px; font: 850 44px/1 var(--gft-font-display); letter-spacing: -.035em; color: var(--vcx-och-t); white-space: nowrap; }
.vcx-wread__lab { margin: 0 0 10px; font-size: 15px; line-height: 1.45; color: var(--vcx-lt); }
.vcx-chart { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.vcx-chart li { display: grid; grid-template-columns: 9ch minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 14px; color: var(--vcx-lt); }
.vcx-chart--wage li { grid-template-columns: 12ch minmax(0, 1fr); }
.vcx-chart--wage li b { grid-column: 2; }
.vcx-chart li i { height: 12px; background: var(--vcx-sage); clip-path: inset(0 100% 0 0); transition: clip-path 800ms var(--vcx-out); }
.vcx-chart li.is-hi i { background: var(--vcx-och); }
.vcx-chart li b { font: 700 14px var(--vcx-mono); color: var(--vcx-wt); white-space: nowrap; }
.vcx-chart--kpi ul { margin: 0 0 8px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.vcx-chart--kpi li { display: block; padding: 4px 9px; border: 1px solid #ffffff59; font: 13px/1.3 var(--vcx-mono); opacity: .5; transition: opacity 300ms, background-color 300ms; }
.vcx-hist { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; font-size: 14px; color: var(--vcx-lt); }
.vcx-hist i { height: 10px; background: linear-gradient(90deg, var(--vcx-ind), var(--vcx-ind-t)); transform-origin: 0 50%; transform: scaleX(.12); transition: transform 1400ms var(--vcx-out) 300ms; }
.vcx-hist b { font: 700 13px var(--vcx-mono); color: var(--vcx-ind-t); }
.vcx-zglass { grid-area: 1 / 1; display: grid; gap: 12px; padding: 22px 24px 20px; background: #072d2be0; border: 1px solid #6bb68f66; border-left: 4px solid var(--vcx-och); box-shadow: 0 20px 44px #00000047; opacity: 0; visibility: hidden; transform: translateY(10px); transition-duration: 0s; }
.vcx-zglass__eb { color: var(--vcx-och-t); font-size: 13px; }
.vcx-zglass h3 { margin: 0; font: 800 clamp(21px, 2vw, 25px)/1.2 var(--gft-font-display); letter-spacing: -.015em; color: var(--vcx-wt); }
.vcx-zglass__p { margin: 0; font-size: 16.5px; line-height: 1.55; color: var(--vcx-lt); }
.vcx-zchips { margin: 2px 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.vcx-zchips li { display: grid; gap: 3px; padding: 9px 10px; background: #0e4d4ab3; border: 1px solid #6bb68f59; }
.vcx-zchips b { font: 800 17px/1.1 var(--vcx-mono); color: var(--vcx-och-t); white-space: nowrap; }
.vcx-zchips span { font: 500 12.5px/1.3 var(--vcx-mono); color: var(--vcx-lt); }
.vcx-wcard__links { display: flex; flex-wrap: wrap; gap: 8px 12px; margin: 2px 0 0 !important; }
.vcx-wcard__links a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 14px; border: 1px solid #6bb68f80; background: #0e4d4acc; font-size: 15px; font-weight: 600; color: var(--vcx-wt); text-decoration: none; }
.vcx-wcard__links a:hover { background: var(--vcx-och); border-color: var(--vcx-och); color: var(--vcx-night); }

/* step 4: hung ledger rack beside the upright thread */
.vcx-walk__ledger { position: absolute; left: 118px; right: 28px; top: 68px; bottom: 20px; display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: 10px; opacity: 0; visibility: hidden; pointer-events: none; transition-duration: 0s; }
.vcx-walk__lhead { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
.vcx-walk__lk { color: var(--vcx-och-t); margin-bottom: 4px; }
.vcx-walk__turnnote { margin: 0; font: 850 clamp(28px, 2.4vw, 33px)/1.12 var(--gft-font-display); letter-spacing: -.025em; color: var(--vcx-wt); max-width: 38ch; }
.vcx-walk__lcta { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border: 1px solid var(--vcx-och); background: #072d2be6; color: var(--vcx-och-t); font: 700 14px var(--vcx-mono); text-decoration: none; white-space: nowrap; }
.vcx-walk__railbar { position: relative; height: 4px; background: linear-gradient(90deg, var(--vcx-och), var(--vcx-sage) 65%, var(--vcx-ind-t)); }
.vcx-walk__railbar i { position: absolute; left: -16px; top: -5px; width: 14px; height: 14px; border-radius: 50%; border: 3px solid var(--vcx-och-t); background: var(--vcx-night); }
.vcx-walk__rack { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 10px 14px; min-height: 0; }
.vcx-hcard { position: relative; display: grid; grid-template-rows: auto auto 1fr; gap: 4px; padding: 10px 14px; background: #072d2beb; border: 1px solid #6bb68f59; border-top: 3px solid var(--vcx-och); min-height: 0; }
.vcx-hcard[data-tone="sage"] { border-top-color: var(--vcx-sage); }
.vcx-hcard[data-tone="indigo"] { border-top-color: var(--vcx-ind-t); }
.vcx-hcard[data-tone="leaf"] { border-top-color: #4fa47c; }
.vcx-hcard__pin { position: absolute; top: -11px; left: 22px; width: 2px; height: 9px; background: var(--vcx-och-t); }
.vcx-hcard__top { display: flex; align-items: center; gap: 10px; }
.vcx-hcard__hex { width: 32px; height: 32px; flex: none; display: grid; place-items: center; clip-path: var(--vcx-hex); background: var(--vcx-sage); }
.vcx-hcard[data-tone="ochre"] .vcx-hcard__hex { background: var(--vcx-och); }
.vcx-hcard[data-tone="indigo"] .vcx-hcard__hex { background: var(--vcx-ind-t); }
.vcx-hcard__hex b { font: 700 13px var(--vcx-mono); color: var(--vcx-night); }
.vcx-hcard__titles { display: grid; min-width: 0; }
.vcx-hcard__zone { font: 600 12px/1.2 var(--vcx-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--vcx-och-t); }
.vcx-hcard__name { font: 700 15px/1.2 var(--gft-font-display); color: var(--vcx-wt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vcx-hcard__mid { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 2px; }
.vcx-hcard__fig { font: 800 19px/1 var(--vcx-mono); color: var(--vcx-och-t); white-space: nowrap; }
.vcx-hcard__spark { width: 78px; height: 24px; flex: none; }
.vcx-hcard__spark polyline { stroke: var(--vcx-sage-t); stroke-width: 2; fill: none; }
.vcx-hcard[data-tone="ochre"] .vcx-hcard__spark polyline { stroke: var(--vcx-och-t); }
.vcx-hcard[data-tone="indigo"] .vcx-hcard__spark polyline { stroke: var(--vcx-ind-t); }
.vcx-hcard__sig { margin: 0; font-size: 13px; line-height: 1.35; color: var(--vcx-lt); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.vcx-walk__track { position: relative; margin-top: -100svh; pointer-events: none; }
.vcx-walk__track i { display: block; height: 76svh; }
.vcx-walk__track i[data-card="0"] { height: 94svh; }
.vcx-walk__track i[data-card="4"] { height: 118svh; }

.vcx-walk[data-step="0"] :is(.vcx-walk__now span[data-z="0"], .vcx-walk__seg[data-z="0"]) { opacity: 1; }
.vcx-walk[data-step="0"] :is(.vcx-art[data-z="0"], .vcx-wread[data-z="0"]) { opacity: 1; visibility: visible; clip-path: inset(0 0 0 0); transition-duration: 300ms, 700ms, 0s; transition-delay: 0s; }
.vcx-walk[data-step="0"] .vcx-zglass[data-z="0"] { opacity: 1; visibility: visible; transform: none; transition: opacity 300ms, transform 420ms var(--vcx-out); }
.vcx-walk[data-step="0"] .vcx-walk__br[data-z="0"] path { stroke: var(--vcx-och); }
.vcx-walk[data-step="0"] .vcx-walk__node[data-z="0"] polygon { fill: #6b4a14; }
.vcx-walk[data-step="0"] [data-zone-btn="0"] { background: var(--vcx-och); border-color: var(--vcx-och); color: var(--vcx-night); }

.vcx-walk[data-step="1"] :is(.vcx-walk__now span[data-z="1"], .vcx-walk__seg[data-z="1"]) { opacity: 1; }
.vcx-walk[data-step="1"] :is(.vcx-art[data-z="1"], .vcx-wread[data-z="1"]) { opacity: 1; visibility: visible; clip-path: inset(0 0 0 0); transition-duration: 300ms, 700ms, 0s; transition-delay: 0s; }
.vcx-walk[data-step="1"] .vcx-zglass[data-z="1"] { opacity: 1; visibility: visible; transform: none; transition: opacity 300ms, transform 420ms var(--vcx-out); }
.vcx-walk[data-step="1"] .vcx-walk__br[data-z="1"] path { stroke: var(--vcx-och); }
.vcx-walk[data-step="1"] .vcx-walk__node[data-z="1"] polygon { fill: #6b4a14; }
.vcx-walk[data-step="1"] [data-zone-btn="1"] { background: var(--vcx-och); border-color: var(--vcx-och); color: var(--vcx-night); }

.vcx-walk[data-step="2"] :is(.vcx-walk__now span[data-z="2"], .vcx-walk__seg[data-z="2"]) { opacity: 1; }
.vcx-walk[data-step="2"] :is(.vcx-art[data-z="2"], .vcx-wread[data-z="2"]) { opacity: 1; visibility: visible; clip-path: inset(0 0 0 0); transition-duration: 300ms, 700ms, 0s; transition-delay: 0s; }
.vcx-walk[data-step="2"] .vcx-zglass[data-z="2"] { opacity: 1; visibility: visible; transform: none; transition: opacity 300ms, transform 420ms var(--vcx-out); }
.vcx-walk[data-step="2"] .vcx-walk__br[data-z="2"] path { stroke: var(--vcx-och); }
.vcx-walk[data-step="2"] .vcx-walk__node[data-z="2"] polygon { fill: #6b4a14; }
.vcx-walk[data-step="2"] [data-zone-btn="2"] { background: var(--vcx-och); border-color: var(--vcx-och); color: var(--vcx-night); }

.vcx-walk[data-step="3"] :is(.vcx-walk__now span[data-z="3"], .vcx-walk__seg[data-z="3"]) { opacity: 1; }
.vcx-walk[data-step="3"] :is(.vcx-art[data-z="3"], .vcx-wread[data-z="3"]) { opacity: 1; visibility: visible; clip-path: inset(0 0 0 0); transition-duration: 300ms, 700ms, 0s; transition-delay: 0s; }
.vcx-walk[data-step="3"] .vcx-zglass[data-z="3"] { opacity: 1; visibility: visible; transform: none; transition: opacity 300ms, transform 420ms var(--vcx-out); }
.vcx-walk[data-step="3"] .vcx-walk__br[data-z="3"] path { stroke: var(--vcx-ind-t); }
.vcx-walk[data-step="3"] .vcx-walk__node[data-z="3"] polygon { fill: #2c3e7a; }
.vcx-walk[data-step="3"] [data-zone-btn="3"] { background: var(--vcx-och); border-color: var(--vcx-och); color: var(--vcx-night); }

.vcx-walk[data-step="4"] .vcx-walk__now span[data-z="3"] { opacity: 1; }
.vcx-walk:is([data-step="0"], [data-step="1"], [data-step="2"], [data-step="3"]) .vcx-wread .vcx-chart li i { clip-path: inset(0 100% 0 0); }
.vcx-walk[data-step="0"] .vcx-wread[data-z="0"] .vcx-chart li i, .vcx-walk[data-step="2"] .vcx-wread[data-z="2"] .vcx-chart li i { clip-path: inset(0 calc((1 - var(--v)) * 100%) 0 0); }
.vcx-walk[data-step="1"] .vcx-wread[data-z="1"] .vcx-chart li i { clip-path: inset(0 calc((1 - var(--b)) * 100%) 0 calc(var(--a) * 100%)); }
.vcx-chart li:nth-child(2) i { transition-delay: 120ms; } .vcx-chart li:nth-child(3) i { transition-delay: 240ms; } .vcx-chart li:nth-child(4) i { transition-delay: 360ms; }
.vcx-walk[data-step="3"] .vcx-chart--kpi li { opacity: 1; background-color: #2c3e7a; transition-delay: calc(var(--j) * 140ms); }
.vcx-walk:is([data-step="3"], [data-step="4"]) .vcx-hist i { transform: scaleX(1); }
.vcx-walk[data-step="2"] .vcx-walk__cam { transform: scale(1.72); }
/* Keep the turning thread inside the reserved gutter, including between its horizontal and upright states. */
.vcx-walk[data-step="4"] .vcx-walk__thread { overflow: visible; clip-path: inset(-80px calc(100% - 90px) -100svh -28px); }
.vcx-walk[data-step="4"] .vcx-walk__turn { transform: rotate(90deg) scale(.62); }
.vcx-walk[data-step="4"] .vcx-walk__hook { opacity: 1; }
.vcx-walk[data-step="4"] :is(.vcx-walk__br, .vcx-walk__seg) { opacity: 0; }
.vcx-walk[data-step="4"] .vcx-walk__node text { transform: rotate(-90deg); transform-box: fill-box; transform-origin: center; }
.vcx-walk[data-step="4"] .vcx-walk__body { opacity: 0; visibility: hidden; pointer-events: none; transition-duration: 0s; }
.vcx-walk[data-step="4"] .vcx-walk__line { stroke: var(--vcx-och); stroke-width: 5; }
.vcx-walk[data-step="4"] .vcx-walk__ledger { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 320ms; }
:root[data-m-go] .vcx-walk[data-step="4"] .vcx-hcard { animation-name: vcx-hang-unfold; animation-duration: 420ms; animation-timing-function: var(--vcx-out); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; animation-delay: calc(var(--i) * 28ms); }
@keyframes vcx-hang-unfold { from { opacity: 0; transform: translateY(-14px) scale(.96); } to { opacity: 1; transform: none; } }

:root[data-m-go] .vcx-walk[data-m-on] .vcx-art__saw { animation-name: vcx-spin; animation-duration: 3.2s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: normal; }
:root[data-m-go] .vcx-walk[data-m-on] .vcx-art__scan { animation-name: vcx-sweep; animation-duration: 2.6s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; }
:root[data-m-go] .vcx-walk[data-m-on] .vcx-art__needle { animation-name: vcx-beat; animation-duration: .45s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; }
:root[data-m-go] .vcx-walk[data-m-on] .vcx-art__fc { animation-name: vcx-extend; animation-duration: 3.6s; animation-timing-function: var(--vcx-soft); animation-iteration-count: infinite; animation-direction: alternate; }
:root[data-m-go] .vcx-walk[data-m-on][data-step="0"] .vcx-walk__node[data-z="0"] polygon { animation-name: vcx-nodepulse; animation-duration: 1.6s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; transform-box: fill-box; transform-origin: center; }
:root[data-m-go] .vcx-walk[data-m-on][data-step="1"] .vcx-walk__node[data-z="1"] polygon { animation-name: vcx-nodepulse; animation-duration: 1.6s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; transform-box: fill-box; transform-origin: center; }
:root[data-m-go] .vcx-walk[data-m-on][data-step="2"] .vcx-walk__node[data-z="2"] polygon { animation-name: vcx-nodepulse; animation-duration: 1.6s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; transform-box: fill-box; transform-origin: center; }
:root[data-m-go] .vcx-walk[data-m-on][data-step="3"] .vcx-walk__node[data-z="3"] polygon { animation-name: vcx-nodepulse; animation-duration: 1.6s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; transform-box: fill-box; transform-origin: center; }
@keyframes vcx-spin { to { transform: rotate(360deg); } }
@keyframes vcx-sweep { from { transform: translateX(0); } to { transform: translateX(236px); } }
@keyframes vcx-beat { from { transform: translateY(0); } to { transform: translateY(14px); } }
@keyframes vcx-extend { from { clip-path: inset(0 34% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes vcx-nodepulse { from { transform: scale(1); } to { transform: scale(1.14); } }
:root[data-m-go][data-vcx] .vcx-walk__stage:not([data-vcx-in]) .vcx-walk__body { opacity: 0; }
:root[data-m-go][data-vcx] .vcx-walk__stage[data-vcx-in] .vcx-walk__ni { animation-delay: calc(var(--i) * 30ms); transform-box: view-box; animation-name: vcx-twill; animation-duration: 340ms; animation-timing-function: var(--vcx-out); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
:root[data-m-go][data-vcx] .vcx-walk__stage[data-vcx-in] .vcx-walk__br { animation-name: vcx-fade; animation-duration: 240ms; animation-delay: 80ms; animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
:root[data-m-go][data-vcx] .vcx-walk__stage[data-vcx-in] .vcx-walk__body { animation-name: vcx-draw-on; animation-duration: 380ms; animation-delay: 40ms; animation-timing-function: var(--vcx-out); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
@keyframes vcx-twill { from { opacity: 0; transform: translate(-22px, 16px); } }
@keyframes vcx-draw-on { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }

/* ---------- block 5: the ledger (paper, forest read-out, table footer note, SVG thread bridge) ---------- */
.vcx-led { margin-top: 24px; }
.vcx-led__bar { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.vcx-seg--led span { border-color: #25302e99; }
.vcx-seg--led label:hover span { background: #0e4d4a14; }
.vcx-led__pill { display: grid; margin: 0; }
.vcx-led__pill span { grid-area: 1 / 1; visibility: hidden; padding: 8px 14px; border: 1px solid var(--vcx-och); font: 600 14px var(--vcx-mono); color: var(--vcx-och-ink); background: #c98a2b14; }
.vcx-led__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 340px); gap: 32px; margin-top: 20px; align-items: start; }
.vcx-led__main { position: relative; }
.vcx-led__spine { position: absolute; left: 25px; top: 48px; bottom: 52px; width: 4px; overflow: hidden; background: #2a6e5040; }
.vcx-led__bead { position: absolute; left: 0; top: 0; width: 4px; height: 100%; transform: translateY(-100%); }
.vcx-led__bead::after { content: ''; position: absolute; left: -4px; bottom: -6px; width: 12px; height: 12px; border-radius: 50%; background: var(--vcx-och); box-shadow: 0 0 10px var(--vcx-och); }
.vcx-table { position: relative; width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.45; }
.vcx-table thead th { height: 48px; padding: 0 12px; text-align: left; font: 600 13px var(--vcx-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--vcx-mut); border-bottom: 2px solid var(--vcx-ink); }
.vcx-table tbody tr { border-top: 1px solid #c6d1c9; }
.vcx-table tbody th { width: 220px; padding: 10px 8px 10px 0; text-align: left; font-weight: 400; }
.vcx-table td { padding: 12px 12px; vertical-align: top; }
.vcx-table__foot td { padding: 10px 14px 10px 56px; background: var(--vcx-paper2); border-top: 2px solid var(--vcx-ink); border-bottom: 1px solid #c6d1c9; }
.vcx-rowbtn { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 0 8px 0 0; border: 0; background: none; color: var(--vcx-ink); font: 700 16px/1.25 var(--gft-font-display); text-align: left; cursor: pointer; }
.vcx-rowbtn__hex { position: relative; flex: none; width: 52px; height: 52px; display: grid; place-items: center; clip-path: var(--vcx-hex); background: var(--tone, var(--vcx-sage)); }
.vcx-rowbtn__hex::before { content: ''; position: absolute; inset: 2.5px; clip-path: var(--vcx-hex); background: var(--vcx-paper); transition: background-color 300ms; }
.vcx-rowbtn__hex b { position: relative; font: 700 15px var(--vcx-mono); }
.vcx-rowbtn__hex[data-tone=ochre] { --tone: var(--vcx-och); } .vcx-rowbtn__hex[data-tone=indigo] { --tone: #2c3e7a; } .vcx-rowbtn__hex[data-tone=leaf] { --tone: #3f8f6b; }
.vcx-table tr[data-sel] th { box-shadow: inset -4px 0 0 var(--vcx-och); }
.vcx-table tr[data-sel] { background: #c98a2b17; }
.vcx-table tr[data-sel] .vcx-rowbtn__hex::before { background: var(--tone, var(--vcx-sage)); }
.vcx-table tr[data-sel] .vcx-rowbtn__hex b { color: #fff; }
.vcx-led .c-material, .vcx-led .c-scope, .vcx-led .c-evidence { display: none; }
.vcx-led:has(input[name=vcx-col][value=material]:checked) :is(.c-loss, .c-signal) { display: none; }
.vcx-led:has(input[name=vcx-col][value=material]:checked) .c-material { display: table-cell; }
.vcx-led:has(input[name=vcx-col][value=scope]:checked) :is(.c-loss, .c-signal) { display: none; }
.vcx-led:has(input[name=vcx-col][value=scope]:checked) .c-scope { display: table-cell; }
.vcx-led:has(input[name=vcx-col][value=evidence]:checked) :is(.c-loss, .c-signal) { display: none; }
.vcx-led:has(input[name=vcx-col][value=evidence]:checked) .c-evidence { display: table-cell; }
.vcx-led:has(input[name=vcx-col][value=all]:checked) :is(.c-material, .c-scope, .c-evidence) { display: table-cell; }
.vcx-led:has(input[name=vcx-col][value=all]:checked) .vcx-table { font-size: 15px; }
.vcx-led:has(input[name=vcx-col][value=core]:checked) [data-pill=core], .vcx-led:has(input[name=vcx-col][value=material]:checked) [data-pill=material],
.vcx-led:has(input[name=vcx-col][value=scope]:checked) [data-pill=scope], .vcx-led:has(input[name=vcx-col][value=evidence]:checked) [data-pill=evidence],
.vcx-led:has(input[name=vcx-col][value=all]:checked) [data-pill=all] { visibility: visible; }
.vcx-led__side { position: sticky; top: 20px; }
.vcx-lreads { display: grid; padding: 22px 22px 24px; background: var(--vcx-forest); color: var(--vcx-wt); }
.vcx-lread { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity 260ms, visibility 0s linear 260ms; }
.vcx-lread[data-on] { opacity: 1; visibility: visible; transition-duration: 260ms; transition-delay: 0s; }
.vcx-lread .vcx-k { color: var(--vcx-och-t); }
.vcx-lread__name { margin: 6px 0 0; font: 800 24px/1.2 var(--gft-font-display); }
.vcx-lread__big { margin: 8px 0 4px; font: 850 48px/1 var(--gft-font-display); letter-spacing: -.035em; color: var(--vcx-och-t); white-space: nowrap; }
.vcx-lread__lab { margin: 0; font-size: 15px; line-height: 1.5; color: var(--vcx-lt); }
.vcx-lread dl { margin: 14px 0 0; display: grid; gap: 10px; }
.vcx-lread dt { font: 600 13px var(--vcx-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--vcx-sage-t); }
.vcx-lread dd { margin: 2px 0 0; font-size: 16px; line-height: 1.45; }
.vcx-more--led { margin-top: 0; max-width: 100ch; }
.vcx-led__bridge { position: relative; height: 72px; margin-top: 0; display: flex; align-items: center; view-timeline-name: --vcx-weft; view-timeline-axis: block; }
.vcx-led__bsvg { position: absolute; left: 0; top: 0; width: 120px; height: 72px; overflow: visible; pointer-events: none; }
.vcx-led__btrack { stroke: #2c3e7a40; stroke-width: 3; fill: none; }
.vcx-led__bpath { stroke-width: 4; fill: none; stroke-linecap: round; overflow-anchor: none; }
.vcx-led__blab { position: relative; z-index: 1; margin: 0 0 0 58px; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 6px 14px; background: var(--vcx-paper2); border: 1px solid #c98a2b80; border-left: 4px solid #2c3e7a; font-size: 14px; color: var(--vcx-ink); }
.vcx-led__blab span { font: 700 12.5px var(--vcx-mono); letter-spacing: .04em; color: var(--vcx-och-ink); }
.vcx-led__blab em { font-style: normal; color: var(--vcx-mut); }
@supports (animation-timeline: view()) {
  :root[data-m-go] .vcx-led__bpath { animation-name: vcx-bridge-draw; animation-duration: 1ms; animation-timing-function: linear; animation-fill-mode: both; animation-timeline: --vcx-weft; animation-range-start: entry 0%; animation-range-end: cover 45%; }
}
@keyframes vcx-bridge-draw { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
:root[data-m-go] .vcx-led__spine[data-m-on] .vcx-led__bead { animation-name: vcx-bead; animation-duration: 9s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: normal; }
:root[data-m-go] .vcx-led:has(.vcx-led__spine[data-m-on]) .vcx-rowbtn__hex::after { content: ''; position: absolute; inset: 0; clip-path: var(--vcx-hex); background: #c98a2b66; opacity: 0; animation-name: vcx-nodelit; animation-duration: 9s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: normal; }
@keyframes vcx-bead { from { transform: translateY(0); } to { transform: translateY(100%); } }
@keyframes vcx-nodelit { 0%, 1% { opacity: 0; } 4% { opacity: 1; } 10%, 100% { opacity: 0; } }
/* entrance "pick": rows are picked out from their nodes one by one, rule first, text after */
:root[data-m-go][data-vcx] .vcx-led__main:not([data-vcx-in]) tbody tr { opacity: 0; }
:root[data-m-go][data-vcx] .vcx-led__main[data-vcx-in] tbody tr { animation-name: vcx-pick; animation-duration: 420ms; animation-timing-function: var(--vcx-out); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; animation-delay: calc(var(--i) * 60ms); }
:root[data-m-go][data-vcx] .vcx-led__bar:not([data-vcx-in]) { opacity: 0; }
:root[data-m-go][data-vcx] .vcx-led__bar[data-vcx-in] { animation-name: vcx-pick; animation-duration: 460ms; animation-timing-function: var(--vcx-out); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
@keyframes vcx-pick { 0% { opacity: 0; transform: translateX(26px); } 45% { opacity: 1; } 100% { transform: none; } }

/* ---------- block 6: the loom (night, pinned) ---------- */
.vcx-loom { position: relative; height: 250svh; background-image: linear-gradient(var(--vcx-night), var(--vcx-night)); color: var(--vcx-wt); view-timeline-name: --vcx-loom; view-timeline-axis: block; overflow: clip; padding: 0; }
.vcx-loom__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.vcx-loom__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.vcx-loom__svg--tall { display: none; }
.vcx-loom__warps line { stroke: #6bb68f40; stroke-width: 1; transform-box: fill-box; transform-origin: 50% 0; transition: stroke 500ms; }
.vcx-loom__warps { overflow-anchor: none; }
.vcx-loom__row { stroke: #b8c2e666; stroke-width: 1.6; transition: stroke 400ms, stroke-width 400ms; }
.vcx-loom__lead { stroke: var(--vcx-och); stroke-width: 4; stroke-dasharray: 6 4; fill: none; }
.vcx-loom__diag { transform-box: view-box; transform-origin: 1350px 790px; transition: transform 900ms var(--vcx-out), opacity 600ms; }
.vcx-loom__svg--tall .vcx-loom__diag { transform-origin: 344px 362px; }
.vcx-loom__thread { stroke: var(--vcx-och); stroke-width: 3.5; fill: none; }
.vcx-loom__pulse { transform-box: fill-box; transform-origin: center; }
.vcx-loom__pulse polygon { fill: var(--vcx-night); stroke: var(--vcx-sage); stroke-width: 2.4; transition: fill 400ms; }
.vcx-loom__pulse polygon[data-tone=ochre] { stroke: var(--vcx-och); } .vcx-loom__pulse polygon[data-tone=indigo] { stroke: var(--vcx-ind-t); }
.vcx-loom__no { fill: var(--vcx-wt); font: 700 15px var(--vcx-mono); }
.vcx-loom__lab { fill: var(--vcx-lt); font: 600 15px var(--vcx-mono); letter-spacing: .05em; }
.vcx-loom__lab--sm { font-size: 13px; }
.vcx-loom__ply { opacity: 0; clip-path: inset(0 100% 0 0); transition: opacity 400ms, clip-path 900ms var(--vcx-out); }
.vcx-loom__a { stroke: var(--vcx-och); stroke-width: 4; fill: none; }
.vcx-loom__b { stroke: var(--vcx-sage); stroke-width: 4; fill: none; }
.vcx-loom__type { position: absolute; z-index: 1; background: var(--vcx-night); box-shadow: 0 0 0 14px var(--vcx-night); top: 6svh; right: 4vw; width: min(46vw, 700px); }
.vcx-loom__lines { margin: 0; font: italic 400 clamp(36px, 3.5vw, 56px)/1.12 var(--gft-font-serif); letter-spacing: -.01em; max-width: none; }
.vcx-loom__ln { position: relative; display: block; }
.vcx-loom__ln + .vcx-loom__ln { margin-top: 14px; }
.vcx-loom__dim { color: #a9c4b8; }
.vcx-loom__lit { position: absolute; inset: 0; color: #fff; text-shadow: 0 0 22px #6bb68f80; }
.vcx-loom__ln[data-ln="2"] .vcx-loom__lit { color: #e3e8ff; text-shadow: 0 0 22px #8391b6aa; }
.vcx-loom__counters { position: absolute; left: 0; right: 0; bottom: 5svh; margin-inline: auto; }
.vcx-loom__cbtns { display: flex; gap: 12px; }
.vcx-loom__cbtns button { display: grid; justify-items: start; gap: 4px; min-width: 150px; max-width: 220px; padding: 10px 16px 12px; border: 1px solid #ffffff59; background: #072d2bd9; color: var(--vcx-wt); text-align: left; cursor: pointer; }
.vcx-loom__cbtns b { font: 850 72px/.95 var(--gft-font-display); letter-spacing: -.04em; color: var(--vcx-sage-t); }
.vcx-loom__cbtns button[data-lit-btn="1"] b { color: var(--vcx-ind-t); }
.vcx-loom__cbtns span { font: 13px/1.35 var(--vcx-mono); color: var(--vcx-lt); }
.vcx-loom__cbtns button[aria-pressed=true] { border-color: var(--vcx-och); box-shadow: inset 0 -4px 0 var(--vcx-och); }
.vcx-loom__read { display: grid; margin: 10px 0 0; max-width: 64ch; }
.vcx-loom__read span { grid-area: 1 / 1; font-size: 16px; color: var(--vcx-lt); visibility: hidden; padding: 6px 10px; background: #072d2bd9; justify-self: start; }
.vcx-loom__marks i { position: absolute; left: 0; width: 1px; }
.vcx-loom__marks [data-mark="0"] { top: 0; height: 65svh; } .vcx-loom__marks [data-mark="1"] { top: 65svh; height: 55svh; } .vcx-loom__marks [data-mark="2"] { top: 120svh; height: 130svh; }
.vcx-loom__stage[data-lit="8"] .vcx-loom__read [data-read="8"], .vcx-loom__stage[data-lit="1"] .vcx-loom__read [data-read="1"], .vcx-loom__stage[data-lit="9"] .vcx-loom__read [data-read="9"] { visibility: visible; }
.vcx-loom__stage:is([data-lit="8"], [data-lit="9"]) .vcx-loom__row:not([data-r="8"]) { stroke: var(--vcx-sage-t); stroke-width: 2.4; }
.vcx-loom__stage:is([data-lit="1"], [data-lit="9"]) .vcx-loom__row[data-r="8"] { stroke: var(--vcx-ind-t); stroke-width: 3.4; }
.vcx-loom__stage[data-lit="9"] .vcx-loom__pulse polygon { fill: #0e4d4a; }
.vcx-loom__stage[data-lit="8"] .vcx-loom__node:not([data-r="8"]) .vcx-loom__pulse polygon { fill: #0e4d4a; }
.vcx-loom__stage[data-lit="1"] .vcx-loom__node[data-r="8"] .vcx-loom__pulse polygon { fill: #2c3e7a; }
.vcx-loom__stage[data-step="0"] .vcx-loom__warps line { stroke: #6bb68f7a; }
.vcx-loom__stage[data-step="2"] .vcx-loom__diag { transform: rotate(-29.25deg); opacity: 0; }
.vcx-loom__svg--tall .vcx-loom__diag { transition: opacity 600ms; }
.vcx-loom__stage[data-step="2"] .vcx-loom__svg--tall .vcx-loom__diag { transform: none; }
.vcx-loom__stage[data-step="2"] .vcx-loom__ply { opacity: 1; clip-path: inset(0 0 0 0); }
.vcx-loom__stage[data-step="2"] .vcx-loom__node { opacity: .45; transition: opacity 500ms; }
:root[data-m-go][data-vcx] .vcx-loom__stage[data-step="0"] .vcx-loom__row { stroke: #b8c2e640; }
:root[data-m-go] .vcx-loom__stage[data-m-on]:is([data-step="1"], [data-lit="9"]) .vcx-loom__pulse { animation-name: vcx-nodepulse; animation-duration: 1.2s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; animation-delay: calc(var(--i) * -.13s); }
:root[data-m-go] .vcx-loom__stage[data-m-on] .vcx-loom__warps { animation-name: vcx-warpdrift; animation-duration: 12s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; }
@keyframes vcx-warpdrift { from { transform: translateX(0); } to { transform: translateX(2px); } }
@supports (animation-timeline: view()) {
  :root[data-m-go] .vcx-loom__lit { animation-name: vcx-light; animation-duration: 1ms; animation-timing-function: linear; animation-fill-mode: both; animation-timeline: --vcx-loom; }
  :root[data-m-go] .vcx-loom__ln[data-ln="1"] .vcx-loom__lit { animation-range-start: contain 0%; animation-range-end: contain 34%; }
  :root[data-m-go] .vcx-loom__ln[data-ln="2"] .vcx-loom__lit { animation-range-start: contain 42%; animation-range-end: contain 76%; }
}
@keyframes vcx-light { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
/* entrance "beat-up": the weft rows beat up into place like a reed, then the warps draw down */
:root[data-m-go][data-vcx] .vcx-loom__stage:not([data-vcx-in]) :is(.vcx-loom__row, .vcx-loom__warps line, .vcx-loom__counters) { opacity: 0; }
:root[data-m-go][data-vcx] .vcx-loom__stage[data-vcx-in] .vcx-loom__row { animation-name: vcx-beatup; animation-duration: 380ms; animation-timing-function: var(--vcx-out); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; animation-delay: calc(var(--i) * 70ms); }
:root[data-m-go][data-vcx] .vcx-loom__stage[data-vcx-in] .vcx-loom__warps line { animation-name: vcx-warpdraw; animation-duration: 300ms; animation-timing-function: var(--vcx-out); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; animation-delay: calc(560ms + var(--i) * 6ms); }
:root[data-m-go][data-vcx] .vcx-loom__stage[data-vcx-in] .vcx-loom__counters { animation-name: vcx-fade-up; animation-duration: 500ms; animation-delay: 300ms; animation-timing-function: var(--vcx-out); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
@keyframes vcx-beatup { from { opacity: 0; transform: translateY(22px); } }
@keyframes vcx-warpdraw { from { opacity: 0; transform: scaleY(0); } }

/* ---------- block 7: the capital boundary (forest, sticky) ---------- */
.vcx-cap { position: relative; --sh: 146px; }
.vcx-cap__stage { position: sticky; top: 0; z-index: 2; height: 100svh; min-height: 640px; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 14px; padding: 26px 0 24px; }
.vcx-cap__top { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 40px; align-items: end; }
.vcx-cap__top .vcx-h2 { font-size: clamp(26px, 2.4vw, 36px); max-width: 30ch; }
.vcx-cap__ctl { display: grid; gap: 10px; }
.vcx-seg--arch span { border-color: #ffffff8c; }
.vcx-dial__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.vcx-dial__out { font: 600 14px var(--vcx-mono); color: var(--vcx-och-t); min-width: 28ch; }
.vcx-cap__mid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 32px; align-items: center; min-height: 0; }
.vcx-cap__strands { position: relative; display: grid; grid-template-rows: var(--sh) var(--sh) auto; gap: 10px; }
.vcx-strand { position: relative; transform-origin: 0 0; transition: transform 800ms var(--vcx-out), opacity 500ms; }
.vcx-strand__t { margin: 0 0 6px; display: flex; gap: 12px; align-items: baseline; font: 700 16px var(--gft-font-display); }
.vcx-strand__t span { font: 600 13px var(--vcx-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--vcx-och-t); }
.vcx-strand__nodes { position: relative; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.vcx-strand__line { position: absolute; left: calc(100% / 18); right: calc(100% / 18); top: 30px; height: 3px; background: #ffffff4d; }
.vcx-strand[data-strand="b"] .vcx-strand__line { background: var(--vcx-sage); }
.vcx-strand__nodes > li[data-i] { position: relative; display: grid; justify-items: center; gap: 3px; text-align: center; }
.vcx-strand__hex { position: relative; width: 62px; height: 62px; display: grid; place-items: center; clip-path: var(--vcx-hex); background: #ffffff8c; }
.vcx-strand__hex::before { content: ''; position: absolute; inset: 3px; clip-path: var(--vcx-hex); background: var(--vcx-forest); }
.vcx-strand__hex b { position: relative; font: 700 17px var(--vcx-mono); }
.vcx-strand__nm { position: relative; z-index: 1; background: var(--vcx-forest); padding-inline: 3px; font: 600 15px var(--gft-font-display); }
.vcx-strand em { font: 13px/1.2 var(--vcx-mono); font-style: normal; color: var(--vcx-lt); }
li[data-role=built] .vcx-strand__hex { background: var(--vcx-och); } li[data-role=built] .vcx-strand__hex::before { background: var(--vcx-och); } li[data-role=built] .vcx-strand__hex b { color: var(--vcx-night); }
li[data-role=partnered] .vcx-strand__hex { background: repeating-linear-gradient(45deg, var(--vcx-sage) 0 5px, transparent 5px 9px); }
li[data-role=metered] .vcx-strand__hex { background: radial-gradient(circle, var(--vcx-ind-t) 1.6px, transparent 2px) 0 0 / 7px 7px; }
li[data-role=owned] .vcx-strand__hex { background: var(--vcx-sage); } li[data-role=owned] .vcx-strand__hex::before { background: var(--vcx-sage); } li[data-role=owned] .vcx-strand__hex b { color: var(--vcx-night); }
li[data-role=sourced] .vcx-strand__hex { background: #ffffffb3; }
.vcx-strand[data-strand="a"] { opacity: .6; }
.vcx-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 4px 0 0; padding: 0; list-style: none; font-size: 14px; color: var(--vcx-lt); transition: opacity 400ms; }
.vcx-legend li { display: flex; align-items: center; gap: 8px; }
.vcx-legend i { width: 18px; height: 18px; clip-path: var(--vcx-hex); background: #ffffffb3; }
.vcx-legend [data-role=built] i { background: var(--vcx-och); } .vcx-legend [data-role=owned] i { background: var(--vcx-sage); }
.vcx-legend [data-role=partnered] i { background: repeating-linear-gradient(45deg, var(--vcx-sage) 0 4px, transparent 4px 7px); }
.vcx-legend [data-role=metered] i { background: radial-gradient(circle, var(--vcx-ind-t) 1.6px, transparent 2px) 0 0 / 6px 6px; }
.vcx-knot { position: absolute; top: -9px; left: calc((var(--at) + .5) / 9 * 100%); width: 70px; height: 70px; margin-left: -35px; border: 3px solid var(--vcx-och-t); border-radius: 50%; opacity: 0; transform: scale(1.6); transition: opacity 300ms, transform 500ms var(--vcx-out); transition-delay: calc(var(--j) * 140ms); pointer-events: none; }
.vcx-knot i { position: absolute; right: -10px; top: -10px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--vcx-och); color: var(--vcx-night); font: 700 13px var(--vcx-mono); font-style: normal; }
.vcx-gate { position: absolute; top: -4px; height: 70px; left: calc((1 + var(--g) * 2) / 9 * 100%); width: 0; opacity: 0; transform: translateY(-40px); transition: opacity 300ms, transform 500ms var(--vcx-out); transition-delay: calc(var(--g) * 120ms); pointer-events: none; }
.vcx-gate i { position: absolute; left: -4px; top: 0; bottom: 0; width: 8px; border-radius: 2px; background: var(--vcx-och-t); }
.vcx-gate span { display: none; }
.vcx-hang { position: absolute; top: 58px; left: calc((var(--a) + .5) / 9 * 100%); width: calc((var(--b) - var(--a)) / 9 * 100%); height: calc(70px + var(--j) * 16px); border: 2px solid var(--vcx-och-t); border-top: 0; opacity: 0; clip-path: inset(0 0 100% 0); transition: opacity 300ms, clip-path 700ms var(--vcx-out); transition-delay: calc(var(--j) * 160ms); pointer-events: none; }
.vcx-hang[style*='--j:1'] { border-color: var(--vcx-sage-t); } .vcx-hang[style*='--j:2'] { border-color: var(--vcx-ind-t); }
.vcx-cap__panel { display: grid; transition: opacity 400ms; }
.vcx-apanel { grid-area: 1 / 1; padding: 18px 20px 16px; background: var(--vcx-night); border: 1px solid #ffffff2e; opacity: 0; visibility: hidden; transform: translateX(30px); transition: opacity 400ms, transform 500ms var(--vcx-out), visibility 0s linear 400ms; }
.vcx-cap[data-arch="a"] .vcx-apanel[data-panel="a"], .vcx-cap[data-arch="b"] .vcx-apanel[data-panel="b"] { opacity: 1; visibility: visible; transform: none; transition-duration: 400ms; transition-delay: 0s; }
.vcx-apanel .vcx-k { color: var(--vcx-lt); }
.vcx-apanel__figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 12px 0 10px; padding: 0; border: 0; min-width: 0; }
.vcx-apanel__figs label { position: relative; cursor: pointer; }
.vcx-apanel__figs input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.vcx-apanel__figs label > span { display: grid; gap: 2px; min-height: 76px; align-content: start; padding: 8px 10px; border: 1px solid #ffffff4d; }
.vcx-apanel__figs b { font: 850 24px/1.05 var(--gft-font-display); letter-spacing: -.02em; color: var(--vcx-och-t); }
.vcx-apanel__figs em { font: 13px var(--vcx-mono); font-style: normal; color: var(--vcx-lt); }
.vcx-apanel__figs input:checked + span { background: var(--vcx-och); border-color: var(--vcx-och); }
.vcx-apanel__figs input:checked + span :is(b, em) { color: var(--vcx-night); }
.vcx-apanel__figs input:focus-visible + span { outline: 3px solid var(--vcx-och-t); outline-offset: 2px; }
.vcx-apanel__reads { display: grid; }
.vcx-apanel__reads p { grid-area: 1 / 1; margin: 0; font-size: 15px; line-height: 1.5; visibility: hidden; }
.vcx-apanel__reads .vcx-k { display: inline; color: var(--vcx-och-t); }
.vcx-apanel:has(input[value="0"]:checked) [data-fread="0"], .vcx-apanel:has(input[value="1"]:checked) [data-fread="1"], .vcx-apanel:has(input[value="2"]:checked) [data-fread="2"] { visibility: visible; }
.vcx-apanel__mid { margin: 10px 0 0; font-size: 13px; color: var(--vcx-lt); visibility: hidden; }
.vcx-cap:is([data-dial="1"], [data-dial="2"]) .vcx-apanel__mid { visibility: visible; color: var(--vcx-och-t); }
.vcx-conds { grid-area: 1 / 1; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; align-content: start; opacity: 0; visibility: hidden; transition: opacity 400ms, visibility 0s linear 400ms; }
.vcx-conds li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 12px; border: 1px solid #e8bd7366; background: var(--vcx-night); font-size: 16px; line-height: 1.45; }
.vcx-conds i { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--vcx-och); color: var(--vcx-night); font: 700 14px var(--vcx-mono); font-style: normal; }
.vcx-cap__low { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 32px; align-items: stretch; }
.vcx-tiles, .vcx-dels, .vcx-conds { grid-area: 1 / 1; }
.vcx-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-content: start; transition: opacity 400ms; }
.vcx-tile { padding: 12px 14px; border: 1px solid #ffffff3d; background: #072d2b8c; }
.vcx-tile p { margin: 0; font-size: 15px; color: var(--vcx-lt); }
.vcx-tile b { font: 850 40px/1 var(--gft-font-display); color: var(--vcx-wt); }
.vcx-tile i { display: block; height: 8px; margin: 8px 0 6px; background: var(--vcx-och); clip-path: inset(0 calc((1 - var(--v)) * 100%) 0 0); transition: clip-path 600ms var(--vcx-out); }
.vcx-tile[data-tile=owned] i { background: var(--vcx-sage); } .vcx-tile[data-tile=shared] i { background: var(--vcx-ind-t); }
.vcx-tile > span { font-size: 14px; color: var(--vcx-lt); }
.vcx-tiles__note { grid-column: 1 / -1; margin: 0; font-size: 13px; }
.vcx-dels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; align-content: start; opacity: 0; visibility: hidden; transition: opacity 400ms, visibility 0s linear 400ms; }
.vcx-dels a { display: grid; gap: 6px; height: 100%; padding: 12px 14px; border: 1px solid #e8bd7399; border-top: 4px solid var(--vcx-och-t); background: var(--vcx-night); color: var(--vcx-wt); text-decoration: none; }
.vcx-dels li:nth-child(2) a { border-top-color: var(--vcx-sage-t); } .vcx-dels li:nth-child(3) a { border-top-color: var(--vcx-ind-t); }
.vcx-dels b { font: 800 18px var(--gft-font-display); }
.vcx-dels span { font-size: 15px; line-height: 1.45; color: var(--vcx-lt); }
.vcx-dels a:hover { background: #0e4d4a; }
.vcx-cap__cards { display: grid; }
.vcx-scard { grid-area: 1 / 1; padding: 14px 18px; border-left: 4px solid var(--vcx-och); background: #072d2bd9; opacity: 0; transform: translateY(14px); transition: opacity 360ms, transform 500ms var(--vcx-out); }
.vcx-scard:focus-within { opacity: 1; }
.vcx-scard .vcx-k { color: var(--vcx-och-t); }
.vcx-scard h3 { margin: 4px 0 6px; font: 800 20px/1.25 var(--gft-font-display); }
.vcx-scard p { margin: 0; font-size: 17px; line-height: 1.5; }
.vcx-cap__track { position: relative; margin-top: -50svh; }
.vcx-cap__track i { display: block; height: 88svh; }
.vcx-cap__track i:nth-child(4) { height: 100svh; } .vcx-cap__track i:nth-child(5) { height: 92svh; }
.vcx-cap[data-step="0"] .vcx-scard[data-card="0"] { opacity: 1; transform: none; transition-duration: 360ms; }
.vcx-cap[data-step="1"] .vcx-scard[data-card="1"] { opacity: 1; transform: none; transition-duration: 360ms; }
.vcx-cap[data-step="2"] .vcx-scard[data-card="2"] { opacity: 1; transform: none; transition-duration: 360ms; }
.vcx-cap[data-step="3"] .vcx-scard[data-card="3"] { opacity: 1; transform: none; transition-duration: 360ms; }
.vcx-cap[data-step="4"] .vcx-scard[data-card="3"] { opacity: 1; transform: none; transition-duration: 360ms; }
.vcx-cap:is([data-step="2"], [data-step="3"], [data-step="4"]) .vcx-strand[data-strand="a"] { opacity: 0; }
.vcx-cap:is([data-step="2"], [data-step="3"], [data-step="4"]) .vcx-strand[data-strand="b"] { transform: scale(1.5); }
.vcx-cap:is([data-step="2"], [data-step="3"], [data-step="4"]) :is(.vcx-cap__panel .vcx-apanel, .vcx-legend) { opacity: 0; visibility: hidden; }
.vcx-cap[data-step="2"] .vcx-conds { opacity: 1; visibility: visible; transition-delay: 0s; }
.vcx-cap:is([data-step="2"], [data-step="3"]) .vcx-knot { opacity: 1; transform: none; }
.vcx-cap[data-step="4"] .vcx-gate { opacity: 1; transform: none; }
.vcx-cap[data-step="3"] .vcx-hang { opacity: 1; clip-path: inset(0 0 0 0); }
.vcx-cap:is([data-step="2"], [data-step="3"], [data-step="4"]) .vcx-tiles { opacity: 0; visibility: hidden; }
.vcx-cap:is([data-step="3"], [data-step="4"]) .vcx-dels { opacity: 1; visibility: visible; transition-delay: 0s; }
.vcx-cap:is([data-step="2"], [data-step="3"], [data-step="4"]) .vcx-strand[data-strand="b"] em { opacity: 0; }
:root[data-m-go] .vcx-cap[data-m-on] .vcx-strand[data-strand="b"] .vcx-strand__line { animation-name: vcx-flowline; animation-duration: 2.2s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; }
:root[data-m-go] .vcx-cap[data-m-on][data-step="4"] .vcx-gate i { animation-name: vcx-glow; animation-duration: 1.4s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; }
@keyframes vcx-flowline { from { opacity: .6; } to { opacity: 1; } }
:root[data-m-go][data-vcx] .vcx-cap__stage:not([data-vcx-in]) :is(.vcx-strand, .vcx-cap__panel, .vcx-strand__nodes > li[data-i]) { opacity: 0; }
:root[data-m-go][data-vcx] .vcx-cap__stage[data-vcx-in] .vcx-strand { animation-duration: 620ms; animation-timing-function: var(--vcx-out); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
:root[data-m-go][data-vcx] .vcx-cap__stage[data-vcx-in] .vcx-strand[data-strand="a"] { animation-name: vcx-ply-a; }
:root[data-m-go][data-vcx] .vcx-cap__stage[data-vcx-in] .vcx-strand[data-strand="b"] { animation-name: vcx-ply-b; }
:root[data-m-go][data-vcx] .vcx-cap__stage[data-vcx-in] .vcx-strand__nodes > li[data-i] { animation-name: vcx-stamp; animation-duration: 300ms; animation-timing-function: var(--vcx-out); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; animation-delay: calc(260ms + var(--i, 0) * 45ms); }
.vcx-strand__nodes > li[data-i="0"] { --i: 0; }
.vcx-strand__nodes > li[data-i="1"] { --i: 1; }
.vcx-strand__nodes > li[data-i="2"] { --i: 2; }
.vcx-strand__nodes > li[data-i="3"] { --i: 3; }
.vcx-strand__nodes > li[data-i="4"] { --i: 4; }
.vcx-strand__nodes > li[data-i="5"] { --i: 5; }
.vcx-strand__nodes > li[data-i="6"] { --i: 6; }
.vcx-strand__nodes > li[data-i="7"] { --i: 7; }
.vcx-strand__nodes > li[data-i="8"] { --i: 8; }
:root[data-m-go][data-vcx] .vcx-cap__stage[data-vcx-in] .vcx-cap__panel { animation-name: vcx-slide-in; animation-duration: 600ms; animation-delay: 220ms; animation-timing-function: var(--vcx-out); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
@keyframes vcx-ply-a { from { opacity: .15; transform: translateX(-60px) scaleX(.94); } }
@keyframes vcx-ply-b { from { opacity: .15; transform: translateX(60px) scaleX(.94); } }
@keyframes vcx-slide-in { from { opacity: 0; transform: translateX(70px); } }

/* ---------- block 8: the roadmap (deep) ---------- */
.vcx-sec--road { --ink: #f6f4ef; --rule: #ffffff73; --ground: #0a3d3a; --muted: #cfe3d8; }
.vcx-road { position: relative; display: grid; gap: 18px; }
.vcx-road__top { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 40px; align-items: end; }
.vcx-road__count { margin: 0 0 8px; font: 700 22px var(--gft-font-display); }
.vcx-road__count b { display: inline-block; min-width: 1ch; font-size: 44px; color: var(--vcx-och-t); }
.vcx-road__count b:not(:first-of-type) { display: none; }
/* Keep every phase status legible, including the widget's inline width hint. */
.vcx-road .mw-scrub__row { grid-template-columns: auto minmax(0, 1fr); }
.vcx-road .mw-scrub__out { grid-column: 1 / -1; min-width: 0; max-width: none; min-height: 3em; white-space: normal; overflow: visible; text-overflow: clip; text-align: left; font-size: 15px; line-height: 1.5; }
.vcx-road .mw-scrub__play { font-size: 15px; }
.vcx-road__thread svg { display: block; width: 100%; height: auto; overflow: visible; }
.vcx-road__line { stroke: #ffffff40; stroke-width: 4; fill: none; }
.vcx-road__lit { stroke: var(--vcx-sage); stroke-width: 6; fill: none; clip-path: inset(0 calc((3 - var(--st, 1)) / 4 * 100%) 0 0); transition: clip-path 700ms var(--vcx-out); }
.vcx-road__beadg { clip-path: inset(0 calc((3 - var(--st, 1)) / 4 * 100%) 0 0); transition: clip-path 700ms var(--vcx-out); }
.vcx-road__bead { fill: #fff6e0; offset-distance: 30%; offset-rotate: 0deg; offset-anchor: 0 0; transform-box: view-box; }
.vcx-road__curl { stroke: var(--vcx-och); stroke-width: 6; fill: none; opacity: 0; clip-path: inset(0 0 100% 0); transition: opacity 300ms, clip-path 800ms var(--vcx-out); }
.vcx-road__gate rect { fill: #ffffff33; transform-box: fill-box; transform-origin: 50% 0; transform: translateY(-26px); opacity: .5; transition: transform 500ms var(--vcx-out), opacity 300ms, fill 300ms; }
.vcx-road__gate text { fill: var(--vcx-lt); font: 600 15px var(--vcx-mono); }
.vcx-road__base { fill: var(--vcx-night); stroke: #ffffff66; stroke-width: 2; }
.vcx-mk { opacity: 0; transition: opacity 450ms; }
.vcx-mk--dash { fill: none; stroke: var(--vcx-sage-t); stroke-width: 2.4; stroke-dasharray: 6 5; }
.vcx-mk--ring { fill: none; stroke: var(--vcx-ind-t); stroke-width: 3; }
.vcx-mk--thick { fill: none; stroke: var(--vcx-och-t); stroke-width: 6; }
.vcx-mk--ext { fill: none; stroke: var(--vcx-sage-t); stroke-width: 4; }
.vcx-mk--tick { fill: none; stroke: var(--vcx-och-t); stroke-width: 4; stroke-linecap: round; }
.vcx-road__no { fill: var(--vcx-wt); font: 700 16px var(--vcx-mono); paint-order: stroke; stroke: var(--vcx-night); stroke-width: 3px; }
.vcx-road__nm { paint-order: stroke; stroke: var(--vcx-deep); stroke-width: 6px; stroke-linejoin: round; fill: var(--vcx-lt); font: 600 15px var(--vcx-mono); letter-spacing: .04em; }
.vcx-road__note { margin-top: 4px; }
.vcx-road__low { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 36px; align-items: start; }
.vcx-road__cards { display: grid; }
.vcx-phase { grid-area: 1 / 1; padding: 18px 22px; border-left: 5px solid var(--vcx-och); background: #072d2bb3; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 360ms, transform 500ms var(--vcx-out), visibility 0s linear 360ms; }
.vcx-phase .vcx-k { color: var(--vcx-och-t); }
.vcx-phase h3 { margin: 8px 0 0; font: 800 clamp(24px, 2.2vw, 32px)/1.2 var(--gft-font-display); letter-spacing: -.02em; }
.vcx-gauges { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.vcx-gauge { min-width: 0; }
.vcx-gauge__dial { position: relative; width: 180px; max-width: 100%; aspect-ratio: 2 / 1.1; overflow: hidden; }
.vcx-gauge__arc { position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 1; border-radius: 50%; border: 12px solid #ffffff26; border-top-color: var(--vcx-sage); border-left-color: var(--vcx-sage); transform: rotate(-45deg); }
.vcx-gauge[data-g=mat] .vcx-gauge__arc { border-top-color: var(--vcx-ind-t); border-left-color: var(--vcx-ind-t); }
.vcx-gauge__needle { position: absolute; left: calc(50% - 2px); bottom: 8%; width: 4px; height: 80%; background: var(--vcx-och-t); border-radius: 2px; transform-origin: 50% 100%; transform: rotate(var(--rot, -30deg)); transition: transform 800ms var(--vcx-out); }
.vcx-gauge__readout { display: block; width: 180px; max-width: 100%; margin-top: 8px; text-align: center; font: 850 26px/1.2 var(--gft-font-display); }
.vcx-gauge__readout span { display: none; } .vcx-gauge__readout small { font: 600 14px var(--vcx-mono); }
.vcx-gauge .vcx-k { margin-top: 8px; }
.vcx-gauge__v { display: grid; margin: 4px 0 0; }
.vcx-gauge__v span { grid-area: 1 / 1; font-size: 15px; line-height: 1.45; visibility: hidden; }
.vcx-road[data-step="0"] { --st: 0; --rot: -75deg; }
.vcx-road[data-step="0"] :is(.vcx-mk[data-on~="0"]) { opacity: 1; }
.vcx-road[data-step="0"] :is(.vcx-phase[data-ph="0"]) { opacity: 1; visibility: visible; transform: none; transition-duration: 220ms; transition-delay: 0s; }
.vcx-road[data-step="0"] :is(.vcx-gauge__v span[data-n="0"]) { visibility: visible; }
.vcx-road[data-step="0"] .vcx-gauge__readout span[data-n="0"] { display: inline; }
.vcx-road[data-step="0"] .vcx-road__count b[data-n="0"] { display: inline-block; }
.vcx-road[data-step="0"] .vcx-road__gate[data-g="0"] rect { transform: none; opacity: 1; fill: var(--vcx-och-t); }
.vcx-road[data-step="1"] { --st: 1; --rot: -25deg; }
.vcx-road[data-step="1"] :is(.vcx-mk[data-on~="1"]) { opacity: 1; }
.vcx-road[data-step="1"] :is(.vcx-phase[data-ph="1"]) { opacity: 1; visibility: visible; transform: none; transition-duration: 220ms; transition-delay: 0s; }
.vcx-road[data-step="1"] :is(.vcx-gauge__v span[data-n="1"]) { visibility: visible; }
.vcx-road[data-step="1"] .vcx-gauge__readout span[data-n="1"] { display: inline; }
.vcx-road[data-step="1"] .vcx-road__count b[data-n="1"] { display: inline-block; }
.vcx-road[data-step="1"] .vcx-road__gate[data-g="0"] rect,.vcx-road[data-step="1"] .vcx-road__gate[data-g="1"] rect { transform: none; opacity: 1; fill: var(--vcx-och-t); }
.vcx-road[data-step="2"] { --st: 2; --rot: 25deg; }
.vcx-road[data-step="2"] :is(.vcx-mk[data-on~="2"]) { opacity: 1; }
.vcx-road[data-step="2"] :is(.vcx-phase[data-ph="2"]) { opacity: 1; visibility: visible; transform: none; transition-duration: 220ms; transition-delay: 0s; }
.vcx-road[data-step="2"] :is(.vcx-gauge__v span[data-n="2"]) { visibility: visible; }
.vcx-road[data-step="2"] .vcx-gauge__readout span[data-n="2"] { display: inline; }
.vcx-road[data-step="2"] .vcx-road__count b[data-n="2"] { display: inline-block; }
.vcx-road[data-step="2"] .vcx-road__gate[data-g="0"] rect,.vcx-road[data-step="2"] .vcx-road__gate[data-g="1"] rect,.vcx-road[data-step="2"] .vcx-road__gate[data-g="2"] rect { transform: none; opacity: 1; fill: var(--vcx-och-t); }
.vcx-road[data-step="3"] { --st: 3; --rot: 75deg; }
.vcx-road[data-step="3"] :is(.vcx-mk[data-on~="3"]) { opacity: 1; }
.vcx-road[data-step="3"] :is(.vcx-phase[data-ph="3"]) { opacity: 1; visibility: visible; transform: none; transition-duration: 220ms; transition-delay: 0s; }
.vcx-road[data-step="3"] :is(.vcx-gauge__v span[data-n="3"]) { visibility: visible; }
.vcx-road[data-step="3"] .vcx-gauge__readout span[data-n="3"] { display: inline; }
.vcx-road[data-step="3"] .vcx-road__count b[data-n="3"] { display: inline-block; }
.vcx-road[data-step="3"] .vcx-road__gate[data-g="0"] rect,.vcx-road[data-step="3"] .vcx-road__gate[data-g="1"] rect,.vcx-road[data-step="3"] .vcx-road__gate[data-g="2"] rect,.vcx-road[data-step="3"] .vcx-road__gate[data-g="3"] rect { transform: none; opacity: 1; fill: var(--vcx-och-t); }
.vcx-road[data-step="3"] .vcx-road__curl { opacity: 1; clip-path: inset(0 0 0 0); }
.vcx-road:not([data-step="0"]) .vcx-road__count b[data-n="0"] { display: none; }
:root[data-m-go] .vcx-road[data-m-on][data-step="0"] .vcx-road__gate[data-g="0"] rect { animation-name: vcx-gatepulse; animation-duration: 1.2s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; }
:root[data-m-go] .vcx-road[data-m-on][data-step="1"] .vcx-road__gate[data-g="1"] rect { animation-name: vcx-gatepulse; animation-duration: 1.2s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; }
:root[data-m-go] .vcx-road[data-m-on][data-step="2"] .vcx-road__gate[data-g="2"] rect { animation-name: vcx-gatepulse; animation-duration: 1.2s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; }
:root[data-m-go] .vcx-road[data-m-on][data-step="3"] .vcx-road__gate[data-g="3"] rect { animation-name: vcx-gatepulse; animation-duration: 1.2s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; }
@keyframes vcx-gatepulse { from { opacity: 1; } to { opacity: .55; } }
:root[data-m-go] .vcx-road[data-m-on] .vcx-road__bead { animation-name: vcx-roadbead; animation-duration: 5s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: normal; }
@keyframes vcx-roadbead { from { offset-distance: 0%; } to { offset-distance: 100%; } }
:root[data-m-go][data-vcx] .vcx-road__thread:not([data-vcx-in]) :is(.vcx-road__line, .vcx-road__node, .vcx-road__gate text) { opacity: 0; }
:root[data-m-go][data-vcx] .vcx-road__thread[data-vcx-in] .vcx-road__line { animation-name: vcx-unspool; animation-duration: 700ms; animation-timing-function: var(--vcx-out); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
:root[data-m-go][data-vcx] .vcx-road__thread[data-vcx-in] .vcx-road__node { animation-name: vcx-fade; animation-duration: 300ms; animation-delay: 240ms; animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
:root[data-m-go][data-vcx] .vcx-road__thread[data-vcx-in] .vcx-road__gate text { animation-name: vcx-drop-y; animation-duration: 420ms; animation-timing-function: var(--vcx-out); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
:root[data-m-go][data-vcx] .vcx-road__thread[data-vcx-in] .vcx-road__gate[data-g="0"] text { animation-delay: 300ms; }
:root[data-m-go][data-vcx] .vcx-road__thread[data-vcx-in] .vcx-road__gate[data-g="1"] text { animation-delay: 420ms; }
:root[data-m-go][data-vcx] .vcx-road__thread[data-vcx-in] .vcx-road__gate[data-g="2"] text { animation-delay: 540ms; }
:root[data-m-go][data-vcx] .vcx-road__thread[data-vcx-in] .vcx-road__gate[data-g="3"] text { animation-delay: 660ms; }
:root[data-m-go][data-vcx] .vcx-road__low:not([data-vcx-in]) :is(.vcx-gauge__needle, .vcx-road__cards) { opacity: 0; }
:root[data-m-go][data-vcx] .vcx-road__low[data-vcx-in] .vcx-gauge__needle { animation-name: vcx-sweepin; animation-duration: 800ms; animation-timing-function: var(--vcx-out); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
:root[data-m-go][data-vcx] .vcx-road__low[data-vcx-in] .vcx-road__cards { animation-name: vcx-fade-up; animation-duration: 520ms; animation-timing-function: var(--vcx-out); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
@keyframes vcx-drop-y { from { opacity: 0; transform: translateY(-30px); } }
@keyframes vcx-sweepin { from { transform: rotate(-90deg); } }

/* ---------- block 9: the closing (night): the shuttle on the woven loop, cloth swatch, 320px+ tool cards ---------- */
.vcx-sec--close .vcx-head { max-width: none; position: relative; z-index: 2; background: var(--vcx-night); box-shadow: 0 0 0 16px var(--vcx-night); }
.vcx-sec--close .vcx-h2 { font-size: clamp(26px, 2.3vw, 34px); max-width: none; }
.vcx-close { position: relative; }
.vcx-close__fig { position: relative; margin-top: 4px; aspect-ratio: 1200 / 480; container-type: inline-size; }
.vcx-close__svg { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; overflow: visible; }
.vcx-close__svg--tall { display: none; }
.vcx-close__branch { fill: none; stroke: var(--vcx-och); stroke-opacity: .85; stroke-linecap: round; display: none; }
.vcx-close__blab { fill: var(--vcx-och-t); font: 700 15px var(--vcx-mono); letter-spacing: .04em; display: none; }
.vcx-close[data-share="5"] [data-share="5"], .vcx-close[data-share="25"] [data-share="25"], .vcx-close[data-share="50"] [data-share="50"] { display: inline; }
.vcx-close__glow { fill: none; stroke: var(--vcx-sage); stroke-opacity: .22; stroke-width: 14; stroke-linecap: round; }
.vcx-close__thread { fill: none; stroke: #9fd4b6; stroke-width: 3.4; stroke-linecap: round; }
.vcx-close__weft { transform-box: fill-box; transform-origin: center; }
.vcx-close__weft path { fill: none; stroke: var(--vcx-ind-t); stroke-width: 3; }
.vcx-close__weft circle { fill: var(--vcx-ind-t); }
.vcx-close__nm { paint-order: stroke; stroke: var(--vcx-night); stroke-width: 6px; stroke-linejoin: round; fill: var(--vcx-lt); font: 700 15px var(--vcx-mono); letter-spacing: .05em; }
.vcx-close__shut { offset-distance: var(--sd); offset-rotate: auto; offset-anchor: 0 0; transform-box: view-box; transition: offset-distance 700ms var(--vcx-out); overflow-anchor: none; }
.vcx-close__shut--tall { offset-distance: var(--hsd); }
.vcx-close__in, .vcx-close__sway { transform-box: view-box; }
.vcx-close__halo { fill: #e8a33b33; stroke: #e8a33b; stroke-width: 1.5; stroke-dasharray: 3 4; }
.vcx-close__bead { fill: #e8a33b; }
.vcx-close__drop { position: absolute; left: 0; top: 0; z-index: 0; width: 4px; height: calc(100% - var(--fy) * 1cqw + 340px); margin-left: 44px; background: linear-gradient(180deg, #e8a33b, #e8a33b 70%, #e8a33b99); transform: translate(calc(var(--fx) * 1cqw), calc(var(--fy) * 1cqw + 22px)); transition: transform 700ms var(--vcx-out); pointer-events: none; overflow-anchor: none; }
.vcx-close__drop::before { content: ''; position: absolute; top: 0; right: 0; width: 46px; height: 4px; background: #e8a33b; }
.vcx-close__nodes { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.vcx-cnode { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: 54px; height: 54px; margin: -27px 0 0 -27px; padding: 0; border: 0; display: grid; place-items: center; clip-path: var(--vcx-hex); background: var(--tone, var(--vcx-sage)); color: var(--vcx-wt); cursor: pointer; pointer-events: auto; }
.vcx-cnode::before { content: ''; position: absolute; inset: 3px; clip-path: var(--vcx-hex); background: var(--vcx-night); transition: background-color 300ms; }
.vcx-cnode b { position: relative; font: 700 16px var(--vcx-mono); }
.vcx-cnode[data-tone=ochre] { --tone: var(--vcx-och); } .vcx-cnode[data-tone=indigo] { --tone: var(--vcx-ind-t); } .vcx-cnode[data-tone=leaf] { --tone: #4fa47c; }
.vcx-cnode[aria-pressed=true]::before { background: var(--tone, var(--vcx-sage)); }
.vcx-cnode[aria-pressed=true] b { color: var(--vcx-night); }
.vcx-cnode[data-lit]::before { background: #6b4a14; }
.vcx-cnode:focus-visible { outline: 3px solid var(--vcx-och-t); outline-offset: 2px; }
.vcx-close__bay { position: absolute; z-index: 1; left: 15.5%; right: 12%; top: 37%; height: 33%; display: grid; }
.vcx-cread { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr) auto; gap: 22px; align-items: center; padding: 12px 18px; background: #072d2bf2; border: 1px solid #ffffff2e; opacity: 0; visibility: hidden; transition: opacity 260ms, visibility 0s linear 260ms; }
.vcx-cread .vcx-k { color: var(--vcx-och-t); }
.vcx-cread h3 { margin: 2px 0 0; font: 800 22px/1.15 var(--gft-font-display); }
.vcx-cread__big { margin: 4px 0 0; font: 850 34px/1 var(--gft-font-display); letter-spacing: -.03em; color: var(--vcx-och-t); white-space: nowrap; }
.vcx-cread__rows { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.vcx-cread__rows dt { font: 600 13px var(--vcx-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--vcx-sage-t); }
.vcx-cread__rows dd { margin: 3px 0 0; font-size: 15px; line-height: 1.4; }
.vcx-cread__go { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px; background: var(--vcx-paper); color: var(--vcx-night); font: 700 15px var(--gft-font-display); text-decoration: none; white-space: nowrap; }
.vcx-cread__go--soon { background: transparent; color: var(--vcx-lt); border: 1px dashed #ffffff73; margin: 0; }

.vcx-close__loombar { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.28fr) minmax(340px, .92fr); gap: 22px; align-items: center; margin-top: 8px; padding: 16px 20px; background: #0a3d3ae6; border: 1px solid #6bb68f59; }
.vcx-close__ctl { display: grid; gap: 8px; }
.vcx-close__ctlhead { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.vcx-close__ctl .vcx-ctl-k { margin: 0; color: var(--vcx-och-t); }
.vcx-close__status { margin: 0; font: 500 13.5px var(--vcx-mono); color: var(--vcx-lt); }
.vcx-close__status strong { color: var(--vcx-wt); font-weight: 800; }
.vcx-close__ticks { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 4px; }
.vcx-close__ticks span { padding: 4px 2px; text-align: center; font: 600 12px/1.2 var(--vcx-mono); color: var(--vcx-lt); border-top: 2px solid #ffffff26; opacity: .55; transition: opacity 250ms, border-color 250ms, color 250ms; }
.vcx-close__ticks span[data-on] { opacity: 1; border-top-color: var(--vcx-och); color: var(--vcx-wt); }
.vcx-swatch { display: grid; gap: 6px; padding: 10px 12px; background: #072d2bf2; border: 1px solid #6bb68f59; }
.vcx-swatch__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.vcx-swatch__head .vcx-k { color: var(--vcx-sage-t); font-size: 12.5px; }
.vcx-swatch__tag { font: 600 12px var(--vcx-mono); color: var(--vcx-och-t); }
.vcx-swatch__svg { display: block; width: 100%; height: auto; max-height: 112px; }
.vcx-swatch__pick { opacity: .22; clip-path: inset(0 86% 0 0); transition: opacity 320ms, clip-path 520ms var(--vcx-out); }
.vcx-swatch__pick[data-woven] { opacity: 1; clip-path: inset(0 0 0 0); }

.vcx-tools { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(320px, 1fr)); gap: 18px; margin: 16px 0 0; padding: 0; list-style: none; }
.vcx-tools li { display: flex; }
.vcx-tools a { position: relative; display: grid; grid-template-rows: auto auto auto 1fr; gap: 6px; width: 100%; height: 100%; padding: 18px 20px; border: 1px solid #ffffff3d; background: var(--vcx-deep); color: var(--vcx-wt); text-decoration: none; transition: border-color 260ms, background-color 260ms, box-shadow 260ms; }
.vcx-tools li[data-active] a { border-color: var(--vcx-och); background: #0e4d4acc; box-shadow: inset 0 3px 0 var(--vcx-och), 0 12px 28px #00000040; }
.vcx-tools a:hover, .vcx-tools a:focus-visible { background: var(--vcx-forest); border-color: var(--vcx-och-t); }
.vcx-tools__top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.vcx-tools .vcx-k { color: var(--vcx-och-t); font-size: 12.5px; }
.vcx-tools__nodes { display: inline-flex; gap: 3px; }
.vcx-tools__nodes b { display: inline-grid; place-items: center; width: 22px; height: 22px; clip-path: var(--vcx-hex); background: #072d2b; font: 700 12px var(--vcx-mono); color: var(--vcx-lt); }
.vcx-tools li[data-active] .vcx-tools__nodes b { background: var(--vcx-och); color: var(--vcx-night); }
.vcx-tools strong { font: 800 20px/1.2 var(--gft-font-display); color: var(--vcx-wt); }
.vcx-tools em { font-size: 15px; font-style: normal; line-height: 1.45; color: var(--vcx-lt); }
.vcx-tprev { margin-top: 6px; padding: 6px 8px; background: #072d2be6; border: 1px solid #6bb68f45; align-self: end; }
.vcx-tprev__svg { display: block; width: 100%; height: 64px; }
.vcx-notice { position: relative; z-index: 1; margin-top: 12px; font-size: 15px; line-height: 1.55; }
.vcx-notice summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font: 13px var(--vcx-mono); letter-spacing: .02em; color: var(--vcx-lt); }
.vcx-notice p { margin: 4px 0 0; max-width: 110ch; color: var(--vcx-lt); background: var(--vcx-night); }
.vcx-close[data-cur="0"] [data-cread="0"] { opacity: 1; visibility: visible; transition-duration: 260ms; transition-delay: 0s; }
.vcx-close[data-cur="1"] [data-cread="1"] { opacity: 1; visibility: visible; transition-duration: 260ms; transition-delay: 0s; }
.vcx-close[data-cur="2"] [data-cread="2"] { opacity: 1; visibility: visible; transition-duration: 260ms; transition-delay: 0s; }
.vcx-close[data-cur="3"] [data-cread="3"] { opacity: 1; visibility: visible; transition-duration: 260ms; transition-delay: 0s; }
.vcx-close[data-cur="4"] [data-cread="4"] { opacity: 1; visibility: visible; transition-duration: 260ms; transition-delay: 0s; }
.vcx-close[data-cur="5"] [data-cread="5"] { opacity: 1; visibility: visible; transition-duration: 260ms; transition-delay: 0s; }
.vcx-close[data-cur="6"] [data-cread="6"] { opacity: 1; visibility: visible; transition-duration: 260ms; transition-delay: 0s; }
.vcx-close[data-cur="7"] [data-cread="7"] { opacity: 1; visibility: visible; transition-duration: 260ms; transition-delay: 0s; }
.vcx-close[data-cur="8"] [data-cread="8"] { opacity: 1; visibility: visible; transition-duration: 260ms; transition-delay: 0s; }
:root[data-m-go] .vcx-close[data-m-on] .vcx-close__sway { animation-name: vcx-sway; animation-duration: 2.2s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; }
:root[data-m-go] .vcx-close[data-m-on] .vcx-tprev__trace { animation-name: vcx-spark; animation-duration: 3.4s; animation-timing-function: var(--vcx-soft); animation-iteration-count: infinite; animation-direction: normal; }
@keyframes vcx-sway { from { transform: translateY(-2px); } to { transform: translateY(2px); } }
@keyframes vcx-spark { 0% { clip-path: inset(0 100% 0 0); } 55%, 100% { clip-path: inset(0 0 0 0); } }
:root[data-m-go][data-vcx] .vcx-close__fig:not([data-vcx-in]) :is(.vcx-close__weft, .vcx-close__in, .vcx-cnode, .vcx-close__bay) { opacity: 0; }
:root[data-m-go][data-vcx] .vcx-close__fig[data-vcx-in] .vcx-close__weft { animation-name: vcx-knot; animation-duration: 340ms; animation-timing-function: var(--vcx-out); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; animation-delay: calc(var(--i) * 70ms); }
:root[data-m-go][data-vcx] .vcx-close__fig[data-vcx-in] .vcx-cnode { animation-name: vcx-fade; animation-duration: 300ms; animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
:root[data-m-go][data-vcx] .vcx-close__fig[data-vcx-in] .vcx-cnode[data-cnode="0"] { animation-delay: 0ms; }
:root[data-m-go][data-vcx] .vcx-close__fig[data-vcx-in] .vcx-cnode[data-cnode="1"] { animation-delay: 70ms; }
:root[data-m-go][data-vcx] .vcx-close__fig[data-vcx-in] .vcx-cnode[data-cnode="2"] { animation-delay: 140ms; }
:root[data-m-go][data-vcx] .vcx-close__fig[data-vcx-in] .vcx-cnode[data-cnode="3"] { animation-delay: 210ms; }
:root[data-m-go][data-vcx] .vcx-close__fig[data-vcx-in] .vcx-cnode[data-cnode="4"] { animation-delay: 280ms; }
:root[data-m-go][data-vcx] .vcx-close__fig[data-vcx-in] .vcx-cnode[data-cnode="5"] { animation-delay: 350ms; }
:root[data-m-go][data-vcx] .vcx-close__fig[data-vcx-in] .vcx-cnode[data-cnode="6"] { animation-delay: 420ms; }
:root[data-m-go][data-vcx] .vcx-close__fig[data-vcx-in] .vcx-cnode[data-cnode="7"] { animation-delay: 490ms; }
:root[data-m-go][data-vcx] .vcx-close__fig[data-vcx-in] .vcx-cnode[data-cnode="8"] { animation-delay: 560ms; }
:root[data-m-go][data-vcx] .vcx-close__fig[data-vcx-in] .vcx-close__in { animation-name: vcx-shuttle-drop; animation-duration: 360ms; animation-delay: 560ms; animation-timing-function: cubic-bezier(.3, 1.4, .5, 1); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
:root[data-m-go][data-vcx] .vcx-close__fig[data-vcx-in] .vcx-close__bay { animation-name: vcx-fade-up; animation-duration: 420ms; animation-delay: 420ms; animation-timing-function: var(--vcx-out); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
:root[data-m-go][data-vcx] .vcx-tools:not([data-vcx-in]) li { opacity: 0; }
:root[data-m-go][data-vcx] .vcx-tools[data-vcx-in] li { animation-name: vcx-deal; animation-duration: 480ms; animation-timing-function: var(--vcx-out); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
:root[data-m-go][data-vcx] .vcx-tools[data-vcx-in] li:nth-child(2) { animation-delay: 110ms; } :root[data-m-go][data-vcx] .vcx-tools[data-vcx-in] li:nth-child(3) { animation-delay: 220ms; }
@keyframes vcx-knot { from { opacity: 0; transform: scaleY(0) rotate(-20deg); } }
@keyframes vcx-shuttle-drop { from { opacity: 0; transform: scale(2.4); } }
@keyframes vcx-deal { from { opacity: 0; transform: translateY(26px) rotate(-1.5deg); } }

/* footer handover on /value-chain/: 64px+ "Continue the thread / Field" headline link whose arrow follows the shuttle */
body[data-page="value-chain"] .gft-footer { border-top: 2px solid #c98a2b66; background-image: radial-gradient(circle at 80% 20%, #0e4d4a66 0%, transparent 55%), linear-gradient(var(--vcx-night), var(--vcx-night)); }
body[data-page="value-chain"] .gft-footer__next { padding-block: 36px 34px; margin-bottom: 42px; border-bottom: 1px solid #6bb68f45; }
body[data-page="value-chain"] .gft-footer__next-k { font-size: 13px; color: var(--vcx-och-t); }
body[data-page="value-chain"] .gft-footer__next-t { font-size: clamp(64px, 5.4vw, 82px); font-weight: 850; letter-spacing: -.045em; line-height: 1; color: var(--vcx-wt); }
body[data-page="value-chain"] .gft-footer__next-line { height: 6px; background: #ffffff24; border-radius: 3px; }
body[data-page="value-chain"] .gft-footer__next-line i { background: linear-gradient(90deg, var(--vcx-sage), var(--vcx-och)); transform-origin: 0 50%; transform: scaleX(calc(.18 + var(--shuttle-p, .75) * .82)); transition: transform 400ms var(--vcx-out); }
body[data-page="value-chain"] .gft-footer__next-go { font-size: clamp(44px, 3.8vw, 60px); color: var(--vcx-och-t); transform: translateX(calc((var(--shuttle-p, .75) - 1) * 36px)); transition: transform 400ms var(--vcx-out); }

/* stacked state swaps: the outgoing state leaves at once, the incoming one fades in, so no frame shows two at once */
:is(.vcx-panel, .vcx-wread, .vcx-zglass, .vcx-walk__ledger, .vcx-lread, .vcx-apanel, .vcx-scard, .vcx-phase, .vcx-cread, .vcx-art, .vcx-basis p) { transition-duration: 0s; transition-delay: 0s; }
.vcx-con[data-sel] .vcx-panel, .vcx-walk[data-step] :is(.vcx-wread, .vcx-zglass, .vcx-walk__ledger), .vcx-led .vcx-lread[data-on], .vcx-cap .vcx-apanel, .vcx-cap .vcx-scard, .vcx-road .vcx-phase, .vcx-close .vcx-cread { transition-property: opacity, transform, visibility; }

.vcx-road__thread .vcx-road__tall { display: none; }
.vcx-road__lit--v { clip-path: inset(0 0 calc((3 - var(--st, 1)) / 4 * 100%) 0); }

/* ---------- mid widths ---------- */
@media (max-width: 1100px) {
  .vcx-rail { padding-top: 0; }
  .vcx-pins { position: static; height: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
  .vcx-pin { position: static; transform: none; }
  .vcx-pin::after { display: none; }
  :root[data-m-go][data-vcx] .vcx-rail[data-vcx-in] .vcx-pin { animation-name: vcx-fade-up; }
  .vcx-stub { top: 210px; }
  .vcx-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vcx-cap__mid, .vcx-cap__low { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .vcx-cread { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }
  .vcx-cread__go { grid-column: 1 / -1; justify-self: start; }
  .vcx-close__loombar { grid-template-columns: 1fr; }
  .vcx-tools { grid-template-columns: 1fr; }
}

/* ---------- phones ---------- */
@media (max-width: 760px) {
  .vcx-sec { padding-block: 48px 56px; }
  .vcx-h2 { font-size: 28px; }
  .vcx-lede { font-size: 17px; }
  /* splash: the head measured at top, the hairpin loop in its own band, pills as a grid */
  body[data-page="value-chain"] [data-splash="vc-a-overview"] { min-height: 0; }
  body[data-page="value-chain"] [data-splash="vc-a-overview"] h1 { font-size: 48px; line-height: 1.02; }
  body[data-page="value-chain"] [data-splash="vc-a-overview"] .gft-splash__lede { font-size: 17px; }
  body[data-page="value-chain"] [data-splash="vc-a-overview"] .gft-splash__content { padding-bottom: calc(min(100vw, 440px) * 400 / 360 + 16px); }
  body[data-page="value-chain"] [data-splash="vc-a-overview"] .gft-splash__structure { inset: auto 0 var(--splash-strip-h, 70px) 0; height: calc(min(100vw, 440px) * 400 / 360); }
  body[data-page="value-chain"] [data-splash="vc-a-overview"] .gft-splash__structure::after { display: none; }
  body[data-page="value-chain"] [data-splash="vc-a-overview"] :is(.gft-splash__data, .gft-splash__position) { display: none; }
  .vcx-splash__svg--wide { display: none; }
  .vcx-splash__svg--tall { display: block; min-height: 0; }
  .vcx-pills { display: grid; grid-template-columns: 1fr 1fr; }
  .vcx-pills .vcx-pill:last-child { grid-column: 1 / -1; }
  .vcx-splash-bar { display: grid; gap: 2px; margin: 14px 0 0; padding: 10px 12px; border: 1px solid #6bb68f73; font: 13px/1.45 var(--vcx-mono); color: var(--vcx-lt); }
  .vcx-splash-bar span:first-child { color: var(--vcx-sage-t); font-weight: 700; }

  /* console */
  .vcx-rail { padding-top: 0; }
  .vcx-pins { position: static; height: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 14px; }
  .vcx-pin { position: static; transform: none; padding: 6px 8px; }
  .vcx-pin::after { display: none; }
  .vcx-pin b { font-size: 18px; white-space: normal; } .vcx-pin span { white-space: normal; }
  :root[data-m-go][data-vcx] .vcx-rail[data-vcx-in] .vcx-pin { animation-name: vcx-fade-up; }
  .vcx-rail__line { top: 17px; }
  .vcx-node__hex { width: 36px; height: 36px; }
  .vcx-node__hex b { font-size: 13px; }
  .vcx-node { padding-bottom: 26px; }
  .vcx-node__name { display: none; }
  .vcx-node input:checked ~ .vcx-node__name { display: block; position: absolute; top: 44px; white-space: nowrap; font-size: 15px; }
  .vcx-rail__set .vcx-node:first-of-type input:checked ~ .vcx-node__name { left: 0; } .vcx-rail__set .vcx-node:last-of-type input:checked ~ .vcx-node__name { right: 0; }
  .vcx-node__tick { display: none; }
  .vcx-stub { left: -12px; top: 132px; width: calc(100% / 6 + 12px); }
  .vcx-stub::before { top: -96px; height: 94px; }
  .vcx-con__mid { grid-template-columns: 1fr; gap: 20px; }
  .vcx-seg:not(.vcx-seg--led) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vcx-seg:not(.vcx-seg--led) legend { grid-column: 1 / -1; }
  .vcx-seg:not(.vcx-seg--led) span { justify-content: center; text-align: center; height: 100%; padding: 6px 8px; }
  .vcx-seg--arch { grid-template-columns: 1fr 1fr !important; }
  .vcx-con__scrubrow { grid-template-columns: 1fr; }
  .vcx-panel { grid-template-columns: 1fr; gap: 14px; padding: 18px; }
  .vcx-panel__big { font-size: 44px; white-space: normal; }
  .vcx-face { border-left: 0; border-top: 1px solid #ffffff2e; padding: 10px 0 0; }
  .vcx-face__s { font-size: 14px; }

  /* gap: the flow turned to run top to bottom */
  .vcx-gap__top { grid-template-columns: 1fr; gap: 20px; }
  .vcx-gapread { justify-content: flex-start; }
  .vcx-gapread b { font-size: 48px; }
  .vcx-sk__svg--wide { display: none; } .vcx-sk__svg--tall { display: block; max-height: 60svh; margin-inline: auto; }
  .vcx-sk::before { left: -12px; top: calc(14cqw - 3000px); width: calc(12px + 2cqw); }
  .vcx-sk::after { display: none; }
  .vcx-gapctl, .vcx-ruler { padding-right: 0; margin-right: 0; }
  .vcx-gapctl { grid-template-columns: 1fr; gap: 16px; }
  .vcx-ruler { padding: 16px 14px; }
  .vcx-ruler__n { width: 30px; height: 30px; margin-left: -15px; top: 7px; font-size: 13px; }
  .vcx-ruler__tabs { grid-template-columns: 1fr 1fr; }
  .vcx-ruler__tabs b { font-size: 20px; }

  /* walkthrough on phones */
  .vcx-walk { --stage-h: 100svh; }
  .vcx-walk__stage { min-height: 0; padding: 10px 14px 12px; gap: 6px; }
  .vcx-walk__stage::before { display: none; }
  .vcx-walk__now { font-size: 13px; }
  .vcx-walk__cam { transform-origin: 0 92px; }
  .vcx-walk[data-step="0"] .vcx-walk__cam { transform: translateX(600px) scale(2.3) translateX(-133px); }
  .vcx-walk[data-step="1"] .vcx-walk__cam { transform: translateX(600px) scale(2.3) translateX(-400px); }
  .vcx-walk[data-step="2"] .vcx-walk__cam { transform: translateX(600px) scale(2.3) translateX(-800px); }
  .vcx-walk[data-step="3"] .vcx-walk__cam { transform: translateX(600px) scale(2.3) translateX(-1133px); }
  .vcx-walk__node text, .vcx-walk__br text { font-size: 22px; }
  .vcx-art .a-txt { display: none; }
  .vcx-walk__body { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 8px; }
  .vcx-walk__left { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; gap: 8px; align-items: center; }
  .vcx-walk__art { height: auto; min-height: 0; }
  .vcx-art { max-height: 110px; }
  .vcx-wread { padding: 8px 10px; }
  .vcx-wread__big { font-size: 26px; }
  .vcx-wread__lab { font-size: 12.5px; margin-bottom: 0; }
  .vcx-wread .vcx-chart, .vcx-wread > .vcx-k { display: none; }
  .vcx-zglass { padding: 12px 14px; gap: 8px; }
  .vcx-zglass h3 { font-size: 18px; }
  .vcx-zglass__p { font-size: 14.5px; line-height: 1.42; }
  .vcx-zchips { gap: 4px; }
  .vcx-zchips li { padding: 5px 6px; }
  .vcx-zchips b { font-size: 13px; }
  .vcx-zchips span { font-size: 12px; }
  .vcx-wcard__links a { padding: 4px 10px; font-size: 13.5px; }
  .vcx-walk__ledger { left: 54px; right: 12px; top: 56px; bottom: 10px; gap: 6px; }
  .vcx-walk[data-step="4"] .vcx-walk__thread { clip-path: inset(-56px calc(100% - 40px) -100svh -14px); }
  .vcx-walk__turnnote { font-size: 18px; }
  .vcx-walk__lcta, .vcx-hcard__spark, .vcx-hcard__zone { display: none; }
  .vcx-walk__rack { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .vcx-hcard { padding: 6px 8px; }
  .vcx-hcard__hex { width: 24px; height: 24px; }
  .vcx-hcard__name { font-size: 12.5px; }
  .vcx-hcard__fig { font-size: 13.5px; }
  .vcx-hcard__sig { font-size: 12px; -webkit-line-clamp: 3; }
  .vcx-walk__track i[data-card="4"] { height: 64svh; }

  /* ledger: rows become cards hanging from the spine */
  .vcx-led__grid { grid-template-columns: 1fr; }
  .vcx-led__side { display: none; }
  .vcx-table, .vcx-table tbody, .vcx-table tfoot, .vcx-table tr, .vcx-table th, .vcx-table td { display: block; width: auto; }
  .vcx-table thead { display: none; }
  .vcx-table tbody tr { padding: 10px 0 12px 0; }
  .vcx-table tbody th { width: auto; padding: 0; }
  .vcx-table td { padding: 4px 0 0 64px; font-size: 16px; }
  .vcx-table__foot td { padding: 10px 12px; }
  .vcx-table tbody td::before { content: attr(data-k); display: block; font: 600 13px var(--vcx-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--vcx-mut); }
  .vcx-led:has(input[name=vcx-col]) .vcx-table tbody td { display: none; }
  .vcx-led:has(input[name=vcx-col][value=core]:checked) :is(.c-loss, .c-signal), .vcx-led:has(input[name=vcx-col][value=material]:checked) .c-material,
  .vcx-led:has(input[name=vcx-col][value=scope]:checked) .c-scope, .vcx-led:has(input[name=vcx-col][value=evidence]:checked) .c-evidence,
  .vcx-led:has(input[name=vcx-col][value=all]:checked) .vcx-table tbody td { display: block; }
  .vcx-led__spine { top: 0; left: 24px; }
  .vcx-seg--led span { padding: 6px 12px; }
  .vcx-led__bridge { height: auto; padding: 12px 0 14px; }
  .vcx-led__blab { margin-left: 48px; font-size: 13px; }

  /* loom */
  .vcx-loom { height: 220svh; }
  .vcx-loom__svg--wide { display: none; }
  .vcx-loom__svg--tall { display: block; top: 30svh; height: 50svh; }
  .vcx-loom__type { top: 4svh; left: 16px; right: 16px; width: auto; }
  .vcx-loom__lines { font-size: 30px; }
  .vcx-loom__counters { bottom: 3svh; width: calc(100% - 32px); }
  .vcx-loom__cbtns { gap: 6px; }
  .vcx-loom__cbtns button { min-width: 0; flex: 1; padding: 6px 8px 8px; }
  .vcx-loom__cbtns b { font-size: 40px; }
  .vcx-loom__read span { font-size: 14px; }
  .vcx-loom__marks [data-mark="0"] { height: 50svh; } .vcx-loom__marks [data-mark="1"] { top: 50svh; height: 45svh; } .vcx-loom__marks [data-mark="2"] { top: 95svh; height: 125svh; }

  /* capital */
  .vcx-cap { --sh: 84px; }
  .vcx-cap__mid { min-height: auto; }
  .vcx-cap__low { display: grid; }
  .vcx-cap__low > * { grid-area: 1 / 1; }
  .vcx-seg--arch legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .vcx-cap:is([data-step="2"], [data-step="3"]) .vcx-scard { opacity: 0 !important; visibility: hidden; }
  .vcx-dels span { display: none; }
  .vcx-dels a { min-height: 44px; align-content: center; }
  .vcx-cap[data-step="4"] .vcx-dels { opacity: 0; visibility: hidden; }
  .vcx-cap__stage { min-height: 0; padding: 14px 0 12px; gap: 10px; }
  .vcx-cap__top { grid-template-columns: 1fr; gap: 10px; }
  .vcx-cap__top .vcx-h2 { font-size: 21px; }
  .vcx-cap__top .vcx-eyebrow, .vcx-apanel > .vcx-k, .vcx-strand__t span { display: none; }
  .vcx-cap__stage { grid-template-rows: auto auto auto; align-content: start; }
  .vcx-dial .vcx-ctl-k { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .vcx-strand__t { font-size: 14px; margin-bottom: 4px; }
  .vcx-cap__mid { grid-template-columns: 1fr; gap: 10px; }
  .vcx-cap__low { grid-template-columns: 1fr; gap: 10px; }
  .vcx-strand__hex { width: 34px; height: 34px; }
  .vcx-strand__hex b { font-size: 13px; }
  .vcx-strand__line { top: 16px; }
  .vcx-strand__nm { font-size: 13px; }
  .vcx-strand em, .vcx-legend, .vcx-tiles, .vcx-apanel__mid, .vcx-dial__row .vcx-dial__out { display: none; }
  .vcx-dial__row { grid-template-columns: 1fr; }
  .vcx-cap:is([data-step="2"], [data-step="3"], [data-step="4"]) .vcx-strand[data-strand="b"] { transform: none; }
  .vcx-conds { grid-template-columns: 1fr; }
  .vcx-knot { width: 46px; height: 46px; margin-left: -23px; top: -6px; }
  .vcx-hang { top: 40px; height: calc(30px + var(--j) * 10px); }
  .vcx-gate { height: 70px; top: -14px; } .vcx-gate span { display: none; }
  .vcx-apanel { padding: 10px 12px; }
  .vcx-apanel__figs label > span { min-height: 60px; padding: 6px 8px; }
  .vcx-apanel__figs b { font-size: 18px; }
  .vcx-apanel__reads p, .vcx-conds li { font-size: 14px; }
  .vcx-conds li { padding: 6px 8px; }
  .vcx-dels { grid-template-columns: 1fr; gap: 6px; }
  .vcx-dels a { padding: 6px 10px; }
  .vcx-scard { padding: 8px 12px; } .vcx-scard .vcx-k { display: none; } .vcx-scard h3 { font-size: 17px; margin-top: 0; } .vcx-scard p { font-size: 15px; line-height: 1.4; }

  /* roadmap: the thread vertical down the left, the card beside it */
  .vcx-road { grid-template-columns: 132px minmax(0, 1fr); column-gap: 12px; }
  .vcx-road__top { grid-column: 1 / -1; grid-template-columns: 1fr; gap: 16px; }
  .vcx-road__thread { grid-column: 1; }
  .vcx-road__thread > svg:first-child { display: none; }
  .vcx-road__thread .vcx-road__tall { display: block; width: 100%; height: auto; }
  .vcx-road__note { grid-column: 1 / -1; }
  .vcx-road__low { grid-column: 2; grid-template-columns: minmax(0, 1fr); gap: 16px; align-self: start; min-width: 0; }
  .vcx-gauge__dial { width: 100%; }
  .vcx-road__note { font-size: 13px; }
  .vcx-phase { padding: 12px 14px; } .vcx-phase h3 { font-size: 19px; }
  .vcx-gauges { grid-template-columns: 1fr 1fr; gap: 8px; }
  .vcx-gauge__v span { font-size: 13px; }
  .vcx-gauge__readout { font-size: 18px; }

  /* closing */
  .vcx-close__fig { aspect-ratio: auto; padding-top: min(111%, 489px); max-width: 440px; margin-inline: auto; }
  .vcx-close__svg, .vcx-close__nodes { inset: 0 0 auto 0; height: auto; aspect-ratio: 360 / 400; }
  .vcx-close__svg--wide { display: none; } .vcx-close__svg--tall { display: block; }
  .vcx-close__drop { display: none; }
  .vcx-cnode { left: calc(var(--hx) * 1%); top: calc(var(--hy) * 1%); width: 40px; height: 40px; margin: -20px 0 0 -20px; }
  .vcx-cnode b { font-size: 14px; }
  .vcx-close__bay { position: static; height: auto; margin-top: 12px; }
  .vcx-cread { grid-template-columns: 1fr; gap: 10px; }
  .vcx-cread__rows { grid-template-columns: 1fr; }
  .vcx-cread__rows dd { font-size: 17px; }
  .vcx-close__loombar { grid-template-columns: 1fr; padding: 12px 14px; }
  .vcx-close__ticks { display: none; }
  .vcx-tools { grid-template-columns: 1fr; }
  body[data-page="value-chain"] .gft-footer__next-t { font-size: 48px; }
  body[data-page="value-chain"] .gft-footer__next-go { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="value-chain"] :is(.vcx-wipe i, .vcx-stub, .vcx-loom__lit, .vcx-led__bpath, .vcx-sp-node) { animation-name: none; animation-timeline: auto; }
}