/* Page /value-chain/field/ only. Every selector, variable and keyframe is prefixed vc-a-fl- (or scoped to this page's
   body). Motif: one northern boll (#vc-a-fl-boll) and its ochre hex core (#vc-a-fl-hex), from a plant on the field
   plate to a sealed, weighed lot at the gin gate.
   Acts: I night (splash, forest console, the plant pin whose ground changes per step) > II paper (network, corridor)
   > III night (interlude, ticket printer, weighbridge closing).
   Stability: the HTML is the composed end state; pre-states exist only under :root[data-m-go][data-fl-armed] (set by
   this page's script); entrances run once and settle by about 900 ms; only transform, opacity, clip-path and filter
   animate; pins are native sticky; read-outs keep the height of their longest state. */

.vc-a-fl, .vc-a-fl-sp {
  --fl-night: #072d2b; --fl-abyss: #041c1b; --fl-forest: #0e4d4a; --fl-paper: #f6f4ef; --fl-sage: #6bb68f; --fl-mint: #8fd1ad;
  --fl-ochre: #c98a2b; --fl-amber: #e0a645; --fl-amber2: #e6b455; --fl-ink: #072d2b; --fl-ink2: #24403a; --fl-leafink: #2a6e50;
  --fl-soft: #dbe7df; --tw: min(640px, 44vw); --fl-ease: cubic-bezier(0.16, 1, 0.3, 1); --fl-swing: cubic-bezier(0.65, 0, 0.35, 1);
}
.vc-a-fl { position: relative; isolation: isolate; overflow-anchor: none; }
.vc-a-fl :where(p) { max-width: none; }
.vc-a-fl [hidden] { display: none !important; }
:where(.vc-a-fl) svg { display: block; }
.vc-a-fl-svgt { font: 600 15px var(--gft-font-mono); letter-spacing: 0.06em; fill: #d6e6dc; }
.vc-a-fl-svgt--o { fill: var(--fl-amber2); }
.vc-a-fl-svgt--ink { fill: #1d3a33; }
.vc-a-fl-net .vc-a-fl-svgt--o { fill: #8a560c; }
:root:not([data-m-go]) .vc-a-fl * { transition-duration: 0s !important; transition-delay: 0s !important; }

/* heads: kicker, assertion, lede */
.vc-a-fl-head h2 { font-size: clamp(1.7rem, 2.35vw, 2.45rem); line-height: 1.08; letter-spacing: -0.045em; max-width: 22ch; }
.vc-a-fl-kick { font: 600 13px/1.5 var(--gft-font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fl-mint); margin-bottom: 14px; }
.vc-a-fl-lede { font-size: 18px; line-height: 1.55; color: var(--fl-soft); margin-top: 14px; max-width: 46ch; }

/* source chips */
.vc-a-fl .gft-cite { min-height: 30px; min-width: 40px; justify-content: center; padding: 2px 8px; position: relative; font: 600 13px/1 var(--gft-font-mono); letter-spacing: 0.04em; border-radius: 2px; background: #ffffff14; color: #e4efe8; border-color: #e4efe8aa; }
.vc-a-fl .gft-cite::after { content: ''; position: absolute; inset: -7px -3px; }
.vc-a-fl .gft-cite:hover { background: var(--fl-ochre); color: var(--fl-night); border-color: var(--fl-ochre); }
.vc-a-fl:is(.vc-a-fl-net, .vc-a-fl-sit) .gft-cite { background: #0e4d4a10; color: var(--fl-forest); border-color: #0e4d4aa0; }
.vc-a-fl .vc-a-fl-netout .gft-cite { background: #ffffff14; color: #e4efe8; border-color: #e4efe8aa; }

/* segmented controls (native radios) */
.vc-a-fl-seg { display: flex; flex-wrap: wrap; gap: 0; border: 0; margin: 0; padding: 0; min-width: 0; }
.vc-a-fl-seg__opt { position: relative; display: inline-flex; }
.vc-a-fl-seg__opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.vc-a-fl-seg__opt span { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border: 1px solid #8fd1ad99; margin-left: -1px; color: var(--fl-soft); font: 650 16px var(--gft-font-display); transition: background-color 200ms, color 200ms; }
.vc-a-fl-seg__opt input:checked + span { background: var(--fl-paper); border-color: var(--fl-paper); color: var(--fl-night); }
.vc-a-fl-seg__opt input:focus-visible + span { outline: 3px solid var(--fl-ochre); outline-offset: 3px; }
.vc-a-fl-seg--ink .vc-a-fl-seg__opt span { border-color: #0e4d4aa0; color: var(--fl-forest); }
.vc-a-fl-seg--ink .vc-a-fl-seg__opt input:checked + span { background: var(--fl-forest); border-color: var(--fl-forest); color: var(--fl-paper); }
.vc-a-fl-btn { display: inline-flex; align-items: center; gap: 18px; min-height: 48px; padding: 10px 18px; background: var(--fl-forest); color: var(--fl-paper); font-size: 15px; font-weight: 650; text-decoration: none; border: 1px solid var(--fl-forest); }
.vc-a-fl-btn::after { content: '↗'; }

/* ---------- page-owned entrance triggers: kit entrances inside a stage wait until it is on ---------- */
:root[data-m-go][data-fl-armed] [data-fl-stage]:not([data-fl-on]) :is([data-m], .m-k, .m-ln, .m-fd, .m-c, .m-w) { animation-play-state: paused !important; }

/* ================= 1 · splash: the field plate ================= */
body[data-page='value-chain-field'] .gft-splash__structure { inset: 0; display: block; }
body[data-page='value-chain-field'] .gft-splash__structure::after { background: linear-gradient(90deg, #072d2b 0%, #072d2bf2 24%, #072d2b9e 38%, #072d2b00 54%); }
body[data-page='value-chain-field'] .gft-splash__lede { font-size: 19px; color: #dbe7df; }
body[data-page='value-chain-field'] :is(.gft-splash__data, .gft-splash__data span, .gft-splash__position) { font-size: 12px; color: #c4d8cc; }
body[data-page='value-chain-field'] .gft-splash__bottom { border-top-color: #c98a2b80; }
.vc-a-fl-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.vc-a-fl-sp { position: absolute; inset: 0; }
.vc-a-fl-sp__plate, .vc-a-fl-sp__plants { position: absolute; inset: 0; }
.vc-a-fl-sp__plate svg, .vc-a-fl-sp__plants svg { width: 100%; height: 100%; }
.vc-a-fl-sp__lbl { font: 600 15px var(--gft-font-mono); letter-spacing: 0.08em; fill: #cfe3d7; }
.vc-a-fl-sp__lbl--o { fill: var(--fl-amber2); }
.vc-a-fl-sp__plant { transform: translate(calc(var(--x) * 1px), calc(var(--y) * 1px)); }
.vc-a-fl-sp__plant.is-proj { opacity: 0.78; }
.vc-a-fl-sp__stalk { transform-box: fill-box; transform-origin: 50% 100%; }
.vc-a-fl-sp__boll, .vc-a-fl-sp__ring { transform-box: fill-box; transform-origin: 50% 50%; }
.vc-a-fl-sp__fig { font: 700 17px var(--gft-font-mono); fill: #f6f4ef; }
.vc-a-fl-sp__tag { font: 600 15px var(--gft-font-mono); fill: #cfe3d7; letter-spacing: 0.04em; }
.vc-a-fl-sp__tag--o { fill: var(--fl-amber2); }
.vc-a-fl-sp__motes { position: absolute; inset: 34% 0 0 0; --m-particle: 246, 244, 239; }
.vc-a-fl-sp__motes canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.vc-a-fl-sp__front { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--fl-ochre); }
.vc-a-fl-series { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; max-width: 560px; }
.vc-a-fl-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px; border: 1px solid #8fd1ad99; background: #072d2bd9; color: var(--gft-paper); font: 600 14px var(--gft-font-mono); text-decoration: none; }
.vc-a-fl-pill strong { color: var(--gft-sage); }
.vc-a-fl-pill[aria-current] { border-color: #e0a645; }
.vc-a-fl-pill--ochre strong { color: #e6b455; }
.vc-a-fl-pill:hover { border-color: var(--gft-sage); background: #0e4d4a; }
:root[data-m-go] .vc-a-fl-sp__plate { animation-name: vc-a-fl-sp-plate; animation-duration: 460ms; animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
:root[data-m-go] .vc-a-fl-sp__stalk { animation-name: vc-a-fl-grow; animation-duration: 380ms; animation-timing-function: var(--fl-ease); animation-delay: calc(430ms + var(--i) * 30ms); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
:root[data-m-go] .vc-a-fl-sp__boll { animation-name: vc-a-fl-open; animation-duration: 340ms; animation-timing-function: cubic-bezier(0.34, 1.5, 0.5, 1); animation-delay: calc(540ms + var(--i) * 30ms); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
:root[data-m-go] .vc-a-fl-sp__chip { animation-name: vc-a-fl-fade; animation-duration: 300ms; animation-delay: calc(580ms + var(--i) * 30ms); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
@keyframes vc-a-fl-sp-plate { from { clip-path: circle(3% at 62.5% 37%); opacity: 0.4; } to { clip-path: circle(130% at 62.5% 37%); opacity: 1; } }
@keyframes vc-a-fl-grow { from { transform: scaleY(0.04); opacity: 0.3; } }
@keyframes vc-a-fl-open { from { transform: scale(0.2); opacity: 0; } }
@keyframes vc-a-fl-fade { from { opacity: 0; } }
:root[data-m-go] [data-m-live~='fl-sweep'][data-m-on] { animation-name: vc-a-fl-sweep; animation-duration: 9s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: normal; }
@keyframes vc-a-fl-sweep { 0% { transform: translateX(300px); opacity: 0; } 8% { opacity: 1; } 55% { transform: translateX(1700px); opacity: 1; } 62%, 100% { transform: translateX(1700px); opacity: 0; } }
:root[data-m-go] [data-m-live~='fl-ring'][data-m-on] { animation-name: vc-a-fl-ring; animation-duration: 2.6s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; }
@keyframes vc-a-fl-ring { from { transform: scale(0.92); opacity: 0.45; } to { transform: scale(1.06); opacity: 1; } }

/* ================= 2 · harvest console (forest) ================= */
.vc-a-fl-con { background: linear-gradient(180deg, #0b3f3c 0, var(--fl-forest) 40%); color: var(--fl-paper); min-height: 100svh; border-top: 3px solid var(--fl-ochre); display: flex; flex-direction: column; }
.vc-a-fl-con__grid { width: min(1440px, calc(100% - 96px)); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 60fr) minmax(0, 40fr); grid-template-areas: 'chart head' 'chart ro' 'ctl ro' 'axis ro'; grid-template-rows: auto 1fr auto auto; column-gap: clamp(28px, 3.6vw, 60px); flex: 1; padding-bottom: 8px; }
.vc-a-fl-con__head { grid-area: head; padding-top: 36px; }
.vc-a-fl-con__head h2 { font-size: clamp(1.6rem, 2.1vw, 2.2rem); }
.vc-a-fl-con__chart { grid-area: chart; position: relative; align-self: start; }
.vc-a-fl-con__roots { width: 100%; height: 34px; }
.vc-a-fl-con__roots path { fill: none; stroke: var(--fl-ochre); stroke-width: 2; stroke-dasharray: 3 5; }
.vc-a-fl-con__svg { width: 100%; height: auto; }
.vc-a-fl-con__tick line { stroke: #8fd1ad; stroke-opacity: 0.22; }
.vc-a-fl-con__tick text, .vc-a-fl-con__yr, .vc-a-fl-con__ref text { font: 600 15px var(--gft-font-mono); fill: #d6e6dc; }
.vc-a-fl-con__yr { font-size: 16px; }
.vc-a-fl-con__ref line { stroke: var(--fl-amber); stroke-dasharray: 6 6; stroke-width: 2; }
.vc-a-fl-con__ref text { fill: var(--fl-amber2); }
.vc-a-fl-con__ref { transition: translate 500ms var(--fl-ease), opacity 300ms; }
.vc-a-fl-con__base { stroke: var(--fl-ochre); stroke-width: 3; }
.vc-a-fl-con__scan { stroke: var(--fl-amber); stroke-opacity: 0.55; stroke-width: 1.5; }
.vc-a-fl-con__stalk { fill: var(--fl-sage); transform-box: fill-box; transform-origin: 50% 100%; transition: scale 600ms var(--fl-ease); }
.vc-a-fl-con__col[data-on] .vc-a-fl-con__stalk { fill: var(--fl-amber); }
.vc-a-fl-con__col[data-proj] .vc-a-fl-con__stalk { fill-opacity: 0.55; }
.vc-a-fl-con__boll { transition: translate 600ms var(--fl-ease); }
.vc-a-fl-con__rise { transform-box: fill-box; }
.vc-a-fl-con__ring { fill: none; stroke: var(--fl-amber); stroke-width: 3; opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; }
.vc-a-fl-con__col[data-on] .vc-a-fl-con__ring { opacity: 1; }
.vc-a-fl-con__val { font: 700 17px var(--gft-font-mono); fill: #f6f4ef; }
.vc-a-fl-con__col[data-on] .vc-a-fl-con__val { fill: var(--fl-amber2); }
.vc-a-fl-con__core { opacity: 0; transition: transform 900ms cubic-bezier(0.55, 0, 0.8, 0.4), opacity 900ms; }
.vc-a-fl-con__col[data-on] .vc-a-fl-con__core { opacity: 1; }
.vc-a-fl-con[data-fl-drop] .vc-a-fl-con__col[data-on] .vc-a-fl-con__core { transform: translateY(420px); opacity: 0; }
.vc-a-fl-con__hits { position: absolute; inset: 34px 0 0 0; }
.vc-a-fl-con__hit { position: absolute; top: 4%; bottom: 0; left: calc(var(--x) - 48px); width: 96px; background: transparent; border: 0; cursor: pointer; }
.vc-a-fl-con__hit:focus-visible { outline: 3px solid var(--fl-ochre); outline-offset: -3px; }
.vc-a-fl-con__ctl { grid-area: ctl; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 4px; }
.vc-a-fl-scrub { display: grid; grid-template-columns: auto minmax(160px, 1fr); align-items: center; gap: 2px 14px; flex: 1; min-width: 260px; }
.vc-a-fl-scrub__l { font: 600 13px var(--gft-font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fl-mint); grid-row: span 2; }
.vc-a-fl-scrub input { width: 100%; accent-color: var(--fl-amber); }
.vc-a-fl-scrub__ticks { display: flex; justify-content: space-between; font: 600 13px var(--gft-font-mono); color: #cfe3d7; }
.vc-a-fl-con__axis { grid-area: axis; font: 13px/1.6 var(--gft-font-mono); color: #cfe3d7; margin-top: 10px; }
.vc-a-fl-ro { grid-area: ro; align-self: start; margin-top: 22px; padding: 22px 24px; background: #072d2bcc; border: 1px solid #8fd1ad55; border-top: 3px solid var(--fl-amber); }
.vc-a-fl-ro__k { font: 600 13px var(--gft-font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fl-amber2); }
.vc-a-fl-ro__year { font: 700 22px var(--gft-font-mono); margin-top: 6px; }
.vc-a-fl-ro__tag { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 8px; border: 1px solid #8fd1ad99; color: var(--fl-mint); vertical-align: middle; }
.vc-a-fl-ro__fig { font: 800 40px/1.1 var(--gft-font-display); letter-spacing: -0.04em; margin-top: 6px; font-variant-numeric: tabular-nums; }
.vc-a-fl-ro__metric { font: 13px var(--gft-font-mono); color: #cfe3d7; letter-spacing: 0.06em; text-transform: uppercase; }
.vc-a-fl-ro__rows { margin: 12px 0 0; display: grid; gap: 0; }
.vc-a-fl-ro__rows div { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; border-top: 1px solid #ffffff1f; font-size: 16px; }
.vc-a-fl-ro__rows dt { color: #cfe3d7; }
.vc-a-fl-ro__rows dd { margin: 0; font-family: var(--gft-font-mono); font-weight: 650; }
.vc-a-fl-ro__rows [data-on] dd { color: var(--fl-amber2); }
.vc-a-fl-ro__note { margin-top: 10px; font-size: 16px; color: var(--fl-soft); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.vc-a-fl-ro__ctx { margin-top: 12px; padding-top: 10px; border-top: 1px dashed #8fd1ad66; font-size: 16px; color: var(--fl-soft); display: grid; gap: 6px; }
.vc-a-fl-ro__link { display: inline-flex; margin-top: 12px; min-height: 44px; align-items: center; font-size: 16px; font-weight: 650; color: var(--fl-paper); text-underline-offset: 0.2em; }
.vc-a-fl-con__soil { position: relative; height: 96px; margin-top: 4px; background: linear-gradient(180deg, #0e4d4a00, #072d2b 70%); }
.vc-a-fl-con__soil svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.vc-a-fl-con__soil span { position: absolute; left: max(48px, calc(50% - 720px)); bottom: 8px; font: 600 13px var(--gft-font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fl-amber2); }
:root[data-m-go] [data-m-live~='fl-scan'][data-m-on] { animation-name: vc-a-fl-scan; animation-duration: 6s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: normal; }
@keyframes vc-a-fl-scan { 0% { transform: translateX(0); opacity: 0; } 10% { opacity: 1; } 80% { transform: translateX(640px); opacity: 1; } 85%, 100% { transform: translateX(640px); opacity: 0; } }
/* entrance: beat-up (gridlines beat in from the right like a reed, then stalks grow and bolls ride up) */
:root[data-m-go][data-fl-armed] .vc-a-fl-con:not([data-fl-on]) :is(.vc-a-fl-con__tick, .vc-a-fl-con__stalk, .vc-a-fl-con__rise, .vc-a-fl-ro, .vc-a-fl-con__roots) { opacity: 0.2; }
:root[data-m-go][data-fl-armed] .vc-a-fl-con:not([data-fl-on]) .vc-a-fl-con__stalk { transform: scaleY(0.05); }
:root[data-m-go][data-fl-armed] .vc-a-fl-con:not([data-fl-on]) .vc-a-fl-con__rise { transform: translateY(var(--rise)); }
:root[data-m-go][data-fl-armed] .vc-a-fl-con[data-fl-on] .vc-a-fl-con__tick { animation-name: vc-a-fl-beat; animation-duration: 340ms; animation-timing-function: var(--fl-ease); animation-delay: calc(var(--j) * 40ms); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
:root[data-m-go][data-fl-armed] .vc-a-fl-con[data-fl-on] .vc-a-fl-con__roots { animation-name: vc-a-fl-drop-in; animation-duration: 340ms; animation-timing-function: var(--fl-ease); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
:root[data-m-go][data-fl-armed] .vc-a-fl-con[data-fl-on] .vc-a-fl-con__stalk { animation-name: vc-a-fl-grow; animation-duration: 460ms; animation-timing-function: var(--fl-ease); animation-delay: calc(350ms + var(--i) * 40ms); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
:root[data-m-go][data-fl-armed] .vc-a-fl-con[data-fl-on] .vc-a-fl-con__rise { animation-name: vc-a-fl-ride; animation-duration: 460ms; animation-timing-function: var(--fl-ease); animation-delay: calc(350ms + var(--i) * 40ms); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
:root[data-m-go][data-fl-armed] .vc-a-fl-con[data-fl-on] .vc-a-fl-ro { animation-name: vc-a-fl-from-right; animation-duration: 520ms; animation-timing-function: var(--fl-ease); animation-delay: 160ms; animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
@keyframes vc-a-fl-beat { from { transform: translateX(70px); opacity: 0; } }
@keyframes vc-a-fl-drop-in { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
@keyframes vc-a-fl-ride { from { transform: translateY(var(--rise)); opacity: 0.2; } }
@keyframes vc-a-fl-from-right { from { transform: translateX(36px); opacity: 0.2; } }

/* ================= 3 · the plant pin ================= */
.vc-a-fl-pin { display: grid; grid-template-areas: 'pin'; }
.vc-a-fl-pin > * { grid-area: pin; min-width: 0; }
.vc-a-fl-pl { background: var(--fl-night); color: var(--fl-paper); --L: min(240px, 26svh); --bx: 71%; --by: 26%; }
.vc-a-fl-pl__stage { position: sticky; top: 0; height: 100svh; overflow: clip; align-self: start; }
.vc-a-fl-pl__inner { position: absolute; inset: 0; background: var(--fl-night); }
.vc-a-fl-pl__grounds, .vc-a-fl-pl__g, .vc-a-fl-pl__fibre, .vc-a-fl-pl__iris { position: absolute; inset: 0; }
.vc-a-fl-pl__g { opacity: 0; transition: opacity 700ms ease; }
.vc-a-fl-pl__g[data-shown] { opacity: 1; }
.vc-a-fl-pl__g--0 { background: radial-gradient(70% 60% at 62% 72%, #12403a 0, #072d2b 70%); }
.vc-a-fl-pl__g--1 { background: linear-gradient(180deg, #0b3a46 0, #13355a 55%, #0a3240 100%); }
.vc-a-fl-pl__g--2 { background: radial-gradient(48% 46% at 70% 24%, #7a5a1c 0, #0e4d4a 62%); }
.vc-a-fl-pl__g--3 { background: linear-gradient(160deg, #4f3414 0, #3a2f16 42%, #0e3b36 100%); }
.vc-a-fl-pl__g--4 { background: radial-gradient(60% 50% at 70% 30%, #1f4a3c 0, #0a2f2c 70%); }
.vc-a-fl-pl__rain { position: absolute; inset: -30% -10%; opacity: 0; transition: opacity 600ms; background: repeating-linear-gradient(104deg, transparent 0 26px, #b9d6ec2e 26px 28px); }
.vc-a-fl-pl__stage[data-step='1'] .vc-a-fl-pl__rain { opacity: 1; }
:root[data-m-go] .vc-a-fl-pl__stage[data-step='1'] [data-m-live~='fl-rain'][data-m-on] { animation-name: vc-a-fl-rain; animation-duration: 1.4s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: normal; }
@keyframes vc-a-fl-rain { from { transform: translate(0, 0); } to { transform: translate(-30px, 112px); } }

.vc-a-fl-pl__fibre { background: radial-gradient(60% 70% at 64% 50%, #4a3414 0, #1e2a1a 70%); clip-path: circle(0px at calc(78vw + var(--L) / 2) calc(100svh - 196px - var(--L) / 2)); transition: clip-path 900ms var(--fl-swing); }
.vc-a-fl-pl__fibre svg { width: 100%; height: 100%; }
.vc-a-fl-pl__stage[data-step='3'] .vc-a-fl-pl__fibre { clip-path: circle(150% at calc(78vw + var(--L) / 2) calc(100svh - 196px - var(--L) / 2)); }
.vc-a-fl-pl__ringspin { transform-box: fill-box; transform-origin: 50% 50%; }
:root[data-m-go] .vc-a-fl-pl__stage[data-step='3'] [data-m-live~='fl-spin'][data-m-on] { animation-name: vc-a-fl-spin; animation-duration: 24s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: normal; }
@keyframes vc-a-fl-spin { to { transform: rotate(360deg); } }

/* Keep the camera's lower leaves and stalk above the instrument band throughout the push-in. */
.vc-a-fl-pl__plant { position: absolute; left: 44%; right: 2%; top: 64px; bottom: 150px; clip-path: inset(-100vmax -100vmax 0 -100vmax); }
.vc-a-fl-pl__plant svg { width: 100%; height: 100%; overflow: visible; }
.vc-a-fl-pl__cam { transform-box: view-box; transform-origin: 400px 140px; transition: transform 950ms var(--fl-swing); }
.vc-a-fl-pl__stage[data-step='2'] .vc-a-fl-pl__cam { transform: translate(-130px, 130px) scale(1.6); }
.vc-a-fl-pl__stage[data-step='3'] .vc-a-fl-pl__cam { transform: translate(300px, -60px) scale(0.42); }
.vc-a-fl-pl__l { opacity: 0; transition: opacity 500ms ease; }
.vc-a-fl-pl__l[data-shown] { opacity: 1; }
.vc-a-fl-pl__rock { transform-box: fill-box; transform-origin: 50% 90%; }
:root[data-m-go] .vc-a-fl-pl__stage[data-step='0'] [data-m-live~='fl-rock'][data-m-on] { animation-name: vc-a-fl-rock; animation-duration: 2.2s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; }
@keyframes vc-a-fl-rock { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
.vc-a-fl-pl__bracket { transform-box: fill-box; transform-origin: 0 50%; }
:root[data-m-go] .vc-a-fl-pl__stage[data-step='2'] [data-m-live~='fl-pulse'][data-m-on] { animation-name: vc-a-fl-pulse; animation-duration: 1.6s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; }
@keyframes vc-a-fl-pulse { from { transform: scaleX(0.82); opacity: 0.6; } to { transform: scaleX(1); opacity: 1; } }
.vc-a-fl-pl__lock { transform-box: fill-box; transition: transform 1000ms var(--fl-ease) 200ms; }
.vc-a-fl-pl__stage[data-step='4'] .vc-a-fl-pl__lock { transform: translate(var(--lx), var(--ly)); }
:root[data-m-go] .vc-a-fl-pl__stage[data-step='4'] [data-m-live~='fl-lint'][data-m-on] { animation-name: vc-a-fl-lint; animation-duration: 3.2s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: normal; }
@keyframes vc-a-fl-lint { from { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } to { transform: translateY(-60px); opacity: 0; } }

.vc-a-fl-pl__lens { position: absolute; left: 38vw; bottom: 160px; width: var(--L); transition: transform 900ms var(--fl-swing), opacity 500ms; }
.vc-a-fl-pl__lensdisc { position: relative; width: var(--L); height: var(--L); border-radius: 50%; overflow: hidden; border: 2px solid var(--fl-mint); background: radial-gradient(#0e4d4a, #041c1b); box-shadow: 0 0 0 10px #8fd1ad1a; }
.vc-a-fl-pl__lv { position: absolute; inset: 0; width: 100%; height: 100%; clip-path: circle(0% at 50% 50%); transition: clip-path 600ms var(--fl-swing); }
.vc-a-fl-pl__lv[data-shown] { clip-path: circle(72% at 50% 50%); z-index: 1; }
.vc-a-fl-pl__cell { transform-box: fill-box; transform-origin: 0 50%; }
:root[data-m-go] .vc-a-fl-pl__stage[data-step='2'] .vc-a-fl-pl__cell { animation-name: vc-a-fl-cell; animation-duration: 2.4s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; }
@keyframes vc-a-fl-cell { from { transform: scaleX(0.35); } to { transform: scaleX(1); } }
.vc-a-fl-pl__lcap { display: grid; margin-top: 10px; width: calc(var(--L) + 40px); }
/* The grid reserves the tallest caption. Hide the old text immediately, including
   on interrupted or reverse changes, before fading in the selected caption. */
.vc-a-fl-pl__lcap p { grid-area: 1 / 1; font: 600 13px/1.45 var(--gft-font-mono); color: #d6e6dc; opacity: 0; visibility: hidden; transition: opacity 160ms ease; }
.vc-a-fl-pl__lcap p[data-shown] { opacity: 1; visibility: visible; transition: opacity 220ms ease 180ms; }
.vc-a-fl-pl__stage[data-step='2'] .vc-a-fl-pl__lens, .vc-a-fl-pl__stage[data-step='3'] .vc-a-fl-pl__lens { transform: translateX(40vw); }
.vc-a-fl-pl__stage[data-step='3'] .vc-a-fl-pl__lens { opacity: 0; }

/* the hand-over iris: it opens from the picked boll only as the pin is about to release, and it is never a flat disc:
   it carries the growers' dot grid, anchored to the stage's bottom edge so the grid runs on across the seam into the
   network's top band (same pitch, same anchor). The plant, lens and band stay drawn underneath until it covers them. */
.vc-a-fl-pl { --dp: 44px; --dbig: 308px 220px; --dot: #2a6e5070; --dotbig: #2a6e50a8; }
.vc-a-fl-pl__iris { position: absolute; inset: 0; z-index: 2; background-color: var(--fl-paper); background-image: radial-gradient(circle at 50% 50%, var(--dotbig) 0 5.5px, transparent 6px), radial-gradient(circle at 50% 50%, var(--dot) 0 3.6px, transparent 4.1px); background-size: var(--dbig), var(--dp) var(--dp); background-position: 50% 100%, 50% 100%; clip-path: circle(0px at var(--bx) var(--by)); transition: clip-path 560ms var(--fl-swing); }
.vc-a-fl-pl[data-burst] .vc-a-fl-pl__iris { clip-path: circle(150% at var(--bx) var(--by)); transition: clip-path 900ms var(--fl-swing) 60ms; }
.vc-a-fl-pl__irissvg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 200ms; }
.vc-a-fl-pl[data-burst] .vc-a-fl-pl__irissvg { opacity: 1; transition: opacity 420ms ease 540ms; }
.vc-a-fl-pl__iristag { position: absolute; left: 50%; top: 52px; translate: -50% 0; margin: 0; width: max-content; max-width: min(620px, 86vw); padding: 8px 14px; background: var(--fl-paper); border: 1px solid #2a6e5066; font: 600 13px/1.45 var(--gft-font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fl-ink); text-align: center; opacity: 0; transition: opacity 200ms; }
.vc-a-fl-pl[data-burst] .vc-a-fl-pl__iristag { opacity: 1; transition: opacity 400ms ease 700ms; }
.vc-a-fl-pl__fringe { position: absolute; inset: auto 0 0; height: 176px; opacity: 0; pointer-events: none; background-image: radial-gradient(circle at 50% 50%, #8fd1ad66 0 5.5px, transparent 6px), radial-gradient(circle at 50% 50%, #8fd1ad40 0 3.6px, transparent 4.1px); background-size: var(--dbig), var(--dp) var(--dp); background-position: 50% 100%, 50% 100%; -webkit-mask-image: linear-gradient(0deg, #000 0, transparent 100%); mask-image: linear-gradient(0deg, #000 0, transparent 100%); transition: opacity 300ms; }
.vc-a-fl-pl[data-burst] .vc-a-fl-pl__fringe { opacity: 1; transition: opacity 180ms; }
.vc-a-fl-pl__end { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; pointer-events: none; }

/* The annotation stays outside the camera and the controls, including during the flower push-in. */
.vc-a-fl-pl__soil { position: absolute; left: 4vw; right: 66%; bottom: 156px; min-height: 32px; display: flex; align-items: center; color: var(--fl-amber2); font: 600 13px/1.5 var(--gft-font-mono); letter-spacing: 0.06em; text-transform: uppercase; }
.vc-a-fl-pl__band { position: absolute; left: 4vw; right: 4vw; bottom: 18px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 32px; align-items: center; }
.vc-a-fl-rail { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; }
.vc-a-fl-rail button { display: flex; align-items: baseline; gap: 8px; min-height: 44px; padding: 8px 12px; border: 1px solid #8fd1ad66; background: #041c1bb3; color: var(--fl-soft); font: 600 14px var(--gft-font-mono); cursor: pointer; transition: background-color 250ms, color 250ms; }
.vc-a-fl-rail button b { color: var(--fl-amber2); }
.vc-a-fl-rail button[aria-current] { background: var(--fl-paper); color: var(--fl-night); border-color: var(--fl-paper); }
.vc-a-fl-rail button[aria-current] b { color: #8a560c; }
.vc-a-fl-gauges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 20px; }
.vc-a-fl-gauge { display: grid; gap: 6px; padding: 6px 0; background: none; border: 0; color: inherit; text-align: left; cursor: help; min-height: 44px; }
.vc-a-fl-gauge__l { font: 600 13px var(--gft-font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: #e2ede6; }
.vc-a-fl-gauge__t { display: block; height: 8px; background: #ffffff24; }
.vc-a-fl-gauge__t b { display: block; height: 100%; background: linear-gradient(90deg, var(--fl-sage), var(--fl-amber)); transform-origin: 0 50%; transition: scale 700ms var(--fl-ease); }
.vc-a-fl-gauges__out { grid-column: 1 / -1; font: 13px/1.5 var(--gft-font-mono); color: #d6e6dc; }
.vc-a-fl-chips { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.vc-a-fl-chips__k { font: 600 13px var(--gft-font-mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--fl-amber2); margin-right: 6px; }
.vc-a-fl-chips__c { font: 600 13px var(--gft-font-mono); padding: 4px 8px; border: 1px dashed #8fd1ad66; color: #ffffff00; transition: color 300ms, background-color 300ms, border-color 300ms; }
.vc-a-fl-chips__c[data-shown] { color: var(--fl-night); background: var(--fl-paper); border: 1px solid var(--fl-paper); }

.vc-a-fl-pl__track { display: grid; }
.vc-a-fl-mark { height: 90svh; }
.vc-a-fl-pl__track .vc-a-fl-mark:nth-child(5) { height: 100svh; }
.vc-a-fl-mark--burst { height: 50svh !important; }
.vc-a-fl-pl__slot { position: sticky; top: 0; height: 100svh; align-self: start; pointer-events: none; padding: 52px 0 0 4vw; width: calc(34vw + 4vw); box-sizing: border-box; }
.vc-a-fl-pl__slot > * { pointer-events: auto; }
.vc-a-fl-pl__head h2 { font-size: clamp(1.5rem, 2.05vw, 2.1rem); }
.vc-a-fl-pl__cards { display: grid; margin-top: 20px; }
/* Finish the outgoing fade before revealing any incoming copy in the shared card cell. */
.vc-a-fl-card { grid-area: 1 / 1; padding: 18px 22px 20px; background: #041c1b; border-left: 3px solid var(--fl-amber); opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity 160ms ease, transform 160ms var(--fl-ease), visibility 0s linear 160ms; }
.vc-a-fl-card[data-active] { opacity: 1; visibility: visible; transform: none; transition: opacity 420ms ease 180ms, transform 520ms var(--fl-ease) 180ms, visibility 0s linear 180ms; }
.vc-a-fl-card__n { font: 600 13px var(--gft-font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: #cfe3d7; }
.vc-a-fl-card__n b { color: var(--fl-amber2); font-size: 22px; margin-right: 6px; }
.vc-a-fl-card h3 { font-size: clamp(1.15rem, 1.5vw, 1.45rem); margin: 8px 0 8px; line-height: 1.15; }
.vc-a-fl-card__b { font-size: 17px; line-height: 1.5; color: #e2ede6; }
.vc-a-fl-card__chips { display: none; font: 600 13px var(--gft-font-mono); color: var(--fl-amber2); margin-top: 8px; }
.vc-a-fl-card--spacer { display: none; }
/* the burst: the slot (heading and card) fades out first, while the night stage is still whole; the iris opens far
   from the card (at the boll, top right) and reaches the card's edge only after about 300 ms, when the card is gone,
   so no text ever sits on the opening disc. The dark stage's bottom edge takes up the same dot grid at once, so the
   motif crosses the seam even while the pin is releasing. */
.vc-a-fl-pl__slot { transition: opacity 320ms ease 240ms, visibility 0s; }
.vc-a-fl-pl[data-burst] .vc-a-fl-pl__slot { opacity: 0; visibility: hidden; transition: opacity 200ms ease, visibility 0s linear 200ms; }
/* entrance: shed (the stage opens from the soil line; the seed falls in; the lens irises open) */
:root[data-m-go][data-fl-armed] .vc-a-fl-pl:not([data-fl-on]) .vc-a-fl-pl__inner { clip-path: inset(70% 0 30% 0); }
:root[data-m-go][data-fl-armed] .vc-a-fl-pl:not([data-fl-on]) :is(.vc-a-fl-pl__seed, .vc-a-fl-pl__band) { opacity: 0.2; }
:root[data-m-go][data-fl-armed] .vc-a-fl-pl:not([data-fl-on]) .vc-a-fl-pl__lensdisc { clip-path: circle(0% at 50% 50%); }
:root[data-m-go][data-fl-armed] .vc-a-fl-pl[data-fl-on] .vc-a-fl-pl__inner { animation-name: vc-a-fl-shed; animation-duration: 400ms; animation-timing-function: cubic-bezier(0.6, 0, 0.3, 1); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
:root[data-m-go][data-fl-armed] .vc-a-fl-pl[data-fl-on] .vc-a-fl-pl__seed { animation-name: vc-a-fl-seedfall; animation-duration: 460ms; animation-timing-function: linear; animation-delay: 380ms; animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
:root[data-m-go][data-fl-armed] .vc-a-fl-pl[data-fl-on] .vc-a-fl-pl__lensdisc { animation-name: vc-a-fl-lensopen; animation-duration: 440ms; animation-timing-function: var(--fl-ease); animation-delay: 420ms; animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
:root[data-m-go][data-fl-armed] .vc-a-fl-pl[data-fl-on] .vc-a-fl-pl__band { animation-name: vc-a-fl-up; animation-duration: 420ms; animation-timing-function: var(--fl-ease); animation-delay: 440ms; animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
@keyframes vc-a-fl-shed { from { clip-path: inset(70% 0 30% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes vc-a-fl-seedfall { 0% { transform: translateY(-360px); opacity: 0.3; animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.5); } 70% { transform: translateY(0); opacity: 1; animation-timing-function: ease-out; } 85% { transform: translateY(-14px); } 100% { transform: translateY(0); } }
@keyframes vc-a-fl-lensopen { from { clip-path: circle(0% at 50% 50%); } to { clip-path: circle(71% at 50% 50%); } }
@keyframes vc-a-fl-up { from { transform: translateY(22px); opacity: 0.2; } }

/* ================= 4 · producer network (paper with a sage tint) ================= */
.vc-a-fl-net { background: linear-gradient(180deg, var(--fl-paper) 0, #e9f0ea 30%, #e6eee8 100%); color: var(--fl-ink); padding-top: 40px; --dp: 44px; --dbig: 308px 220px; --dot: #2a6e5070; --dotbig: #2a6e50a8; }
/* the iris's dot grid runs on across the seam (top-anchored here, bottom-anchored on the stage: same pitch) and thins
   out above the heading, so the paper the iris opened is the paper the growers' field is drawn on */
.vc-a-fl-net::before { content: ''; position: absolute; inset: 0 0 auto; height: 264px; z-index: -1; pointer-events: none; background-image: radial-gradient(circle at 50% 50%, var(--dotbig) 0 5.5px, transparent 6px), radial-gradient(circle at 50% 50%, var(--dot) 0 3.6px, transparent 4.1px); background-size: var(--dbig), var(--dp) var(--dp); background-position: 50% 0, 50% 0; -webkit-mask-image: linear-gradient(180deg, #000 0, #0006 45%, transparent 100%); mask-image: linear-gradient(180deg, #000 0, #0006 45%, transparent 100%); }
.vc-a-fl-net .vc-a-fl-kick { color: var(--fl-leafink); }
.vc-a-fl-net .vc-a-fl-lede, .vc-a-fl-sit .vc-a-fl-lede { color: var(--fl-ink2); }
.vc-a-fl-net__in { width: min(1440px, calc(100% - 96px)); margin-inline: auto; position: relative; }
.vc-a-fl-net__top { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px 56px; align-items: end; }
.vc-a-fl-net__top h2 { max-width: 26ch; }
.vc-a-fl-net__ctl { display: grid; gap: 14px; }
.vc-a-fl-net__ctl .vc-a-fl-lede { margin-top: 0; }
.vc-a-fl-net__fig { margin-top: 14px; }
.vc-a-fl-net__svg { width: 100%; height: auto; }
.vc-a-fl-net__svg--tall { display: none !important; }
.vc-a-fl-net__dot { fill: var(--fl-leafink); }
.vc-a-fl-net__dots, .vc-a-fl-net__feeds, .vc-a-fl-net__nodes, .vc-a-fl-net__cash path { transition: opacity 400ms; }
.vc-a-fl-net:not([data-focus='growers']) [data-g='growers'] .vc-a-fl-net__dots { opacity: 0.4; }
.vc-a-fl-net:not([data-focus='gins']) [data-g='gins'] .vc-a-fl-net__feeds { opacity: 0.4; }
.vc-a-fl-net:not([data-focus='cash']) [data-g='cash'] path { opacity: 0.45; }
.vc-a-fl-net[data-focus='cash'] [data-g='cash'] path { stroke-width: 4; }
.vc-a-fl-net__halo { fill: #c98a2b22; stroke: #a86d14; stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; transition: opacity 300ms; }
.vc-a-fl-net[data-node='market'] .vc-a-fl-net__halo { opacity: 1; }
.vc-a-fl-net__gin { transform-box: fill-box; transform-origin: 50% 50%; }
.vc-a-fl-net[data-node='gins'] [data-n='gins'] use { color: #a86d14 !important; }
.vc-a-fl-net[data-node='growers'] .vc-a-fl-net__dots { opacity: 1; }
.vc-a-fl-net[data-node='growers'] .vc-a-fl-net__dot { fill: #8a560c; }
.vc-a-fl-net[data-node='cash'] [data-g='cash'] path { opacity: 1; stroke-width: 4; }
.vc-a-fl-net__lower { display: grid; grid-template-columns: minmax(0, 30fr) minmax(0, 70fr); gap: 36px; margin-top: 14px; padding-right: 48px; position: relative; }
.vc-a-fl-net__lower::after { content: ''; position: absolute; left: calc(97.5% - 1px); top: -14px; bottom: 0; width: 3px; background: var(--fl-ochre); }
.vc-a-fl-netout { align-self: start; padding: 20px 22px; background: var(--fl-forest); color: var(--fl-paper); border-top: 3px solid var(--fl-amber); display: grid; }
.vc-a-fl-netout > [data-net-panel] { grid-area: 1 / 1; transition: opacity 300ms; }
.vc-a-fl-netout > [data-off] { opacity: 0; visibility: hidden; }
.vc-a-fl-netout__k { font: 600 13px var(--gft-font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fl-amber2); }
.vc-a-fl-netout__fig { font: 800 48px/1.08 var(--gft-font-display); letter-spacing: -0.04em; margin-top: 6px; }
.vc-a-fl-netout__t { font-size: 17px; line-height: 1.5; color: var(--fl-soft); margin-top: 8px; }
.vc-a-fl-netout__link { grid-row: 2; margin-top: 14px; min-height: 44px; display: inline-flex; align-items: center; font-weight: 650; font-size: 16px; color: var(--fl-paper); }
.vc-a-fl-ledger__bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; align-items: end; }
.vc-a-fl-sel { min-width: 280px; flex: 1; max-width: 460px; padding: 10px 14px; border-left: 3px solid #a86d14; background: #ffffffb3; }
.vc-a-fl-sel__k { font: 600 13px var(--gft-font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fl-leafink); }
.vc-a-fl-sel__n { font-size: 17px; font-weight: 700; }
.vc-a-fl-sel__f { font: 600 15px var(--gft-font-mono); color: var(--fl-ink2); }
.vc-a-fl-table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 15px; }
.vc-a-fl-table caption { text-align: left; font: 13px/1.5 var(--gft-font-mono); color: var(--fl-ink2); padding-bottom: 8px; caption-side: top; }
.vc-a-fl-table th, .vc-a-fl-table td { text-align: left; padding: 6px 10px; border-bottom: 1px solid #0e4d4a2e; vertical-align: middle; }
.vc-a-fl-table thead th { font: 600 13px var(--gft-font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fl-ink2); }
.vc-a-fl-sort { background: none; border: 0; padding: 0; min-height: 36px; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 4px; }
.vc-a-fl-sort[data-dir='asc']::after { content: ' ↑'; }
.vc-a-fl-sort[data-dir='desc']::after { content: ' ↓'; }
.vc-a-fl-table tbody tr { cursor: pointer; transition: background-color 200ms; }
.vc-a-fl-table tbody tr[data-on] { background: #c98a2b24; }
.vc-a-fl-table tbody tr:focus-visible { outline: 3px solid var(--fl-ochre); outline-offset: -3px; }
.vc-a-fl-table tbody th { font-weight: 650; }
.vc-a-fl-table__f { font-family: var(--gft-font-mono); font-weight: 650; white-space: nowrap; }
.vc-a-fl-table__bar { width: 16%; }
.vc-a-fl-table__bar i { display: block; height: 8px; background: var(--fl-leafink); transform-origin: 0 50%; transform: scaleX(var(--w)); }
.vc-a-fl-table tr[data-on] .vc-a-fl-table__bar i { background: #a86d14; }
.vc-a-fl-table__q { color: var(--fl-ink2); }
.vc-a-fl-net__turn { width: min(1440px, calc(100% - 96px)); margin-inline: auto; height: 120px; margin-top: 8px; }
.vc-a-fl-net__turn svg { width: 100%; height: 100%; }
.vc-a-fl-net__turn path { stroke: var(--fl-ochre); stroke-width: 3; fill: none; }
:root[data-m-go] .vc-a-fl-net__nodes[data-m-on] .vc-a-fl-net__halo { animation-name: vc-a-fl-halo; animation-duration: 2.4s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; }
/* entrance: pick (dot columns insert like a weft, then the market and gin hexes pop and the flows appear) */
:root[data-m-go][data-fl-armed] .vc-a-fl-net:not([data-fl-on]) :is(.vc-a-fl-net__dot, .vc-a-fl-net__market, .vc-a-fl-net__gin, .vc-a-fl-net__feeds, .vc-a-fl-net__south, .vc-a-fl-netout) { opacity: 0.15; }
:root[data-m-go][data-fl-armed] .vc-a-fl-net[data-fl-on] .vc-a-fl-net__dot { animation-name: vc-a-fl-weft; animation-duration: 260ms; animation-timing-function: var(--fl-ease); animation-delay: calc(var(--c) * 9ms); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
:root[data-m-go][data-fl-armed] .vc-a-fl-net[data-fl-on] :is(.vc-a-fl-net__market, .vc-a-fl-net__gin) { animation-name: vc-a-fl-pop; animation-duration: 340ms; animation-timing-function: cubic-bezier(0.34, 1.5, 0.5, 1); animation-delay: calc(450ms + var(--i, 0) * 24ms); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
:root[data-m-go][data-fl-armed] .vc-a-fl-net[data-fl-on] :is(.vc-a-fl-net__feeds, .vc-a-fl-net__south) { animation-name: vc-a-fl-fade; animation-duration: 360ms; animation-delay: 480ms; animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
:root[data-m-go][data-fl-armed] .vc-a-fl-net[data-fl-on] .vc-a-fl-netout { animation-name: vc-a-fl-up; animation-duration: 480ms; animation-timing-function: var(--fl-ease); animation-delay: 300ms; animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
.vc-a-fl-net__market { transform-box: fill-box; transform-origin: 50% 50%; }
@keyframes vc-a-fl-halo { from { transform: scale(0.9); } to { transform: scale(1.1); } }
@keyframes vc-a-fl-weft { from { transform: translateX(-22px); opacity: 0; } }
@keyframes vc-a-fl-pop { from { transform: scale(0); opacity: 0; } }

/* ================= 5 · siting corridor (paper) ================= */
.vc-a-fl-sit { background: var(--fl-paper); color: var(--fl-ink); padding-top: 40px; min-height: 100svh; }
.vc-a-fl-sit .vc-a-fl-kick { color: var(--fl-leafink); }
.vc-a-fl-sit::before, .vc-a-fl-sit::after { content: ''; position: absolute; left: calc(50% - 1.5px); width: 3px; background: var(--fl-ochre); }
.vc-a-fl-sit::before { top: 0; height: calc(40px + 5svh); }
.vc-a-fl-sit::after { bottom: 0; height: 14svh; }
.vc-a-fl-sit__in { width: min(1440px, calc(100% - 96px)); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr) 220px minmax(0, 1fr); gap: 40px; min-height: calc(100svh - 40px); }
.vc-a-fl-sit__left { display: flex; flex-direction: column; gap: 22px; padding-bottom: 14svh; }
.vc-a-fl-sit__left h2 { font-size: clamp(1.55rem, 2.1vw, 2.2rem); }
/* Mask padding can expose the descending words while the stage holds their entrance paused. */
:root[data-m-go] #vc-a-fl-sit-h:not([data-m-in]) .m-c { opacity: 0; }
:root[data-m-go] #vc-a-fl-sit-h[data-m-in] .m-c { animation-name: vc-a-fl-siting-drop; }
@keyframes vc-a-fl-siting-drop { from { translate: 0 -112%; opacity: 0; } to { translate: 0 0; opacity: 1; } }
.vc-a-fl-pole { padding: 16px 18px; border: 1px solid #0e4d4a40; background: #fff; border-left: 3px solid var(--fl-forest); }
.vc-a-fl-pole--s { margin-top: auto; border-left-color: #a86d14; }
.vc-a-fl-pole__k { font: 600 13px var(--gft-font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fl-leafink); }
.vc-a-fl-pole h3 { font-size: 1.2rem; margin: 6px 0 6px; }
.vc-a-fl-pole ul { margin: 0; padding-left: 18px; font-size: 16px; line-height: 1.5; color: var(--fl-ink2); }
.vc-a-fl-pole[data-near] { box-shadow: 0 0 0 2px var(--fl-ochre); }
.vc-a-fl-cor { position: relative; height: 76svh; margin-top: 5svh; }
.vc-a-fl-cor__axis { position: absolute; left: calc(50% - 1.5px); top: 0; bottom: 0; width: 3px; background: #0e4d4a40; }
.vc-a-fl-cor__leg { position: absolute; left: calc(50% - 4px); width: 8px; top: 0; bottom: 0; transition: scale 160ms linear; }
.vc-a-fl-cor__leg--in { background: var(--fl-ochre); transform-origin: 50% 0; scale: 1 var(--fl-p); }
.vc-a-fl-cor__leg--out { background: var(--fl-forest); transform-origin: 50% 100%; scale: 1 calc(1 - var(--fl-p)); }
.vc-a-fl-cor__bead { position: absolute; left: 50%; top: 0; height: 100%; width: 0; }
.vc-a-fl-cor__bead::before { content: ''; position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: var(--fl-paper); border: 3px solid var(--fl-ochre); }
.vc-a-fl-cor__bead--out::before { border-color: var(--fl-forest); }
:root[data-m-go] .vc-a-fl-cor[data-m-on] .vc-a-fl-cor__bead--in { animation-name: vc-a-fl-bead-in; animation-duration: calc(0.8s + var(--fl-p) * 4s); animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: normal; }
:root[data-m-go] .vc-a-fl-cor[data-m-on] .vc-a-fl-cor__bead--out { animation-name: vc-a-fl-bead-out; animation-duration: calc(0.8s + (1 - var(--fl-p)) * 4s); animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: normal; }
@keyframes vc-a-fl-bead-in { from { transform: translateY(0); } to { transform: translateY(calc(var(--fl-p) * 100%)); } }
@keyframes vc-a-fl-bead-out { from { transform: translateY(calc(var(--fl-p) * 100%)); } to { transform: translateY(100%); } }
.vc-a-fl-cor__pole { position: absolute; left: 50%; display: grid; grid-template-columns: 56px auto; column-gap: 10px; align-items: center; translate: -28px -50%; }
.vc-a-fl-cor__pole svg { width: 56px; height: 56px; grid-row: span 2; background: var(--fl-paper); }
.vc-a-fl-cor__pole b { font-size: 17px; white-space: nowrap; }
.vc-a-fl-cor__pole em { font: 13px var(--gft-font-mono); font-style: normal; color: var(--fl-ink2); white-space: nowrap; }
.vc-a-fl-cor__pole--n { top: 0; }
.vc-a-fl-cor__pole--s { top: 100%; }
.vc-a-fl-cor__mk { position: absolute; left: 50%; top: 0; height: 100%; width: 0; transform: translateY(calc(var(--fl-p) * 100%)); transition: transform 160ms linear; }
.vc-a-fl-cor__dot { position: absolute; left: -38px; top: -38px; width: 76px; height: 76px; border-radius: 50%; }
.vc-a-fl-cor__dot svg { width: 76px; height: 76px; }
.vc-a-fl-cor__pill { position: absolute; right: 86px; top: 22px; white-space: nowrap; font: 700 15px var(--gft-font-mono); padding: 5px 10px; background: var(--fl-ink); color: var(--fl-paper); }
.vc-a-fl-cor__range { position: absolute; left: 50%; top: -20px; height: calc(100% + 40px); width: 110px; margin: 0; translate: -55px 0; opacity: 0; cursor: grab; writing-mode: vertical-lr; direction: ltr; }
.vc-a-fl-cor:has(.vc-a-fl-cor__range:focus-visible) .vc-a-fl-cor__dot { outline: 3px solid var(--fl-ochre); outline-offset: 4px; }
.vc-a-fl-sit__ro { align-self: center; padding: 22px 24px; background: var(--fl-forest); color: var(--fl-paper); border-top: 3px solid var(--fl-amber); margin-bottom: 8svh; }
.vc-a-fl-sit__fig { font: 800 48px/1.05 var(--gft-font-display); letter-spacing: -0.04em; margin-top: 6px; }
.vc-a-fl-sit__fig small { font: 600 15px var(--gft-font-mono); letter-spacing: 0; margin-left: 8px; color: var(--fl-soft); }
.vc-a-fl-sit__lean { display: grid; margin-top: 10px; }
.vc-a-fl-sit__lean p { grid-area: 1 / 1; font-size: 17px; line-height: 1.5; padding-left: 12px; border-left: 3px solid var(--fl-amber); opacity: 0; visibility: hidden; transition: opacity 250ms; }
.vc-a-fl-sit__lean p[data-on] { opacity: 1; visibility: visible; }
:root[data-m-go] .vc-a-fl-sit__lean[data-m-on] p[data-on] { animation-name: vc-a-fl-breathe; animation-duration: 3s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; }
@keyframes vc-a-fl-breathe { from { border-left-color: #e0a645; } to { border-left-color: #8fd1ad; } }
.vc-a-fl-legs { display: grid; gap: 8px; margin-top: 14px; }
.vc-a-fl-legs div { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 10px; font: 600 13px var(--gft-font-mono); text-transform: uppercase; letter-spacing: 0.06em; }
.vc-a-fl-legs i { display: block; height: 10px; background: #ffffff24; }
.vc-a-fl-legs b { display: block; height: 100%; background: var(--fl-amber); transform-origin: 0 50%; transition: scale 160ms linear; }
.vc-a-fl-legs div + div b { background: var(--fl-mint); }
.vc-a-fl-sit__note { font: 13px/1.6 var(--gft-font-mono); color: #d6e6dc; margin-top: 10px; }
.vc-a-fl-sit__ro .vc-a-fl-btn { margin-top: 14px; background: var(--fl-paper); color: var(--fl-ink); border-color: var(--fl-paper); }
.vc-a-fl .vc-a-fl-sit__ro .gft-cite { background: #ffffff14; color: #e4efe8; border-color: #e4efe8aa; }
/* entrance: thread (the axis draws north to south, the poles drop onto its ends, the marker slides to its place) */
:root[data-m-go][data-fl-armed] .vc-a-fl-sit:not([data-fl-on]) :is(.vc-a-fl-cor__axis, .vc-a-fl-cor__leg) { clip-path: inset(0 0 100% 0); }
:root[data-m-go][data-fl-armed] .vc-a-fl-sit:not([data-fl-on]) :is(.vc-a-fl-cor__pole, .vc-a-fl-cor__mk, .vc-a-fl-sit__ro, .vc-a-fl-pole) { opacity: 0.2; }
:root[data-m-go][data-fl-armed] .vc-a-fl-sit[data-fl-on] :is(.vc-a-fl-cor__axis, .vc-a-fl-cor__leg) { animation-name: vc-a-fl-drop-in; animation-duration: 500ms; animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
:root[data-m-go][data-fl-armed] .vc-a-fl-sit[data-fl-on] .vc-a-fl-cor__pole { animation-name: vc-a-fl-polefall; animation-duration: 360ms; animation-timing-function: cubic-bezier(0.34, 1.4, 0.5, 1); animation-delay: 480ms; animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
:root[data-m-go][data-fl-armed] .vc-a-fl-sit[data-fl-on] .vc-a-fl-cor__pole--s { animation-delay: 540ms; }
:root[data-m-go][data-fl-armed] .vc-a-fl-sit[data-fl-on] .vc-a-fl-cor__mk { animation-name: vc-a-fl-slide; animation-duration: 380ms; animation-timing-function: var(--fl-ease); animation-delay: 500ms; animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
:root[data-m-go][data-fl-armed] .vc-a-fl-sit[data-fl-on] .vc-a-fl-sit__ro { animation-name: vc-a-fl-from-right; animation-duration: 500ms; animation-timing-function: var(--fl-ease); animation-delay: 260ms; animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
:root[data-m-go][data-fl-armed] .vc-a-fl-sit[data-fl-on] .vc-a-fl-pole { animation-name: vc-a-fl-from-left; animation-duration: 500ms; animation-timing-function: var(--fl-ease); animation-delay: 200ms; animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
@keyframes vc-a-fl-polefall { from { transform: translateY(-46px); opacity: 0; } }
@keyframes vc-a-fl-slide { from { translate: 0 calc(var(--fl-p) * -76svh); opacity: 0.4; } }
@keyframes vc-a-fl-from-left { from { transform: translateX(-36px); opacity: 0.2; } }

/* ================= 6 · interlude: pooled or ticketed (night abyss) ================= */
.vc-a-fl-int { background: var(--fl-paper); color: var(--fl-paper); overflow: hidden; }
.vc-a-fl-int__night { position: relative; min-height: 112svh; background: var(--fl-abyss); overflow: clip; }
.vc-a-fl-int__glow { position: absolute; left: -12%; bottom: -24%; width: 70%; height: 80%; background: radial-gradient(closest-side, #c98a2b40, #c98a2b00); }
.vc-a-fl-int__motes { position: absolute; inset: 0; --m-particle: 224, 166, 69; }
.vc-a-fl-int__motes canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.vc-a-fl-int__fan { position: absolute; inset: 0; transform-origin: 50% 50%; }
.vc-a-fl-int__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.vc-a-fl-int__svg--tall { display: none; }
.vc-a-fl-int__svg--wide.vc-a-fl-int__pooled { clip-path: inset(0 calc(100% - var(--d) * 1%) 0 0); }
.vc-a-fl-int__svg--wide.vc-a-fl-int__ticketed { clip-path: inset(0 0 0 calc(var(--d) * 1%)); }
.vc-a-fl-int__th { stroke: var(--fl-mint); stroke-opacity: 0.6; stroke-width: 2.2; }
.vc-a-fl-int__th--t { stroke: #a9dcc0; }
.vc-a-fl-int__strand { stroke: var(--fl-amber); stroke-width: 7; }
.vc-a-fl-int__stamp { font: 800 24px var(--gft-font-mono); letter-spacing: 0.08em; fill: var(--fl-amber2); }
.vc-a-fl-int__lab { font: 600 15px var(--gft-font-mono); letter-spacing: 0.05em; fill: #d6e6dc; }
.vc-a-fl-int__labs { z-index: 3; pointer-events: none; }
/* Labels ride just above their thread (it stays within 3 units of the row here); a ground-coloured halo keeps glyphs clear. */
.vc-a-fl-int__labs .vc-a-fl-int__lab { paint-order: stroke; stroke: var(--fl-abyss); stroke-width: 4px; stroke-linejoin: round; }
@media (max-width: 1500px) { .vc-a-fl-int__camp { display: none; } }
:root[data-m-go] .vc-a-fl-int__fan[data-m-on] .vc-a-fl-int__th { animation-name: vc-a-fl-shimmer; animation-duration: 3.6s; animation-timing-function: ease-in-out; animation-delay: calc(var(--i, 0) * -0.3s); animation-iteration-count: infinite; animation-direction: alternate; }
@keyframes vc-a-fl-shimmer { from { opacity: 0.45; } to { opacity: 1; } }
:root[data-m-go] [data-m-live~='fl-strand'][data-m-on] { animation-name: vc-a-fl-strand; animation-duration: 4s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; }
@keyframes vc-a-fl-strand { from { opacity: 0.6; } to { opacity: 1; } }
.vc-a-fl-int__gate { position: absolute; top: 0; bottom: 0; left: calc(50% - 1.5px); width: 3px; background: var(--fl-ochre); }
.vc-a-fl-int__div { position: absolute; top: 0; bottom: 0; left: calc(var(--d) * 1%); width: 2px; margin-left: -1px; background: #f6f4efcc; }
.vc-a-fl-int__div b { position: absolute; top: 24px; left: -15px; width: 30px; height: 30px; border-radius: 50%; background: var(--fl-paper); border: 3px solid var(--fl-amber); }
.vc-a-fl-int__rise { position: absolute; left: calc(50% + var(--tw) / 2 - 39px); top: 62%; bottom: 0; width: 4px; margin-left: -2px; background: linear-gradient(180deg, #e0a64500, var(--fl-amber) 18%); }
.vc-a-fl-int__in { position: relative; z-index: 2; width: min(1440px, calc(100% - 96px)); margin-inline: auto; padding: 11svh 0 7svh; display: grid; gap: 26px; }
/* The opaque foreground excludes comparison lines at every divider position; the handle stays above it. */
.vc-a-fl-int__head { width: fit-content; max-width: 100%; background: var(--fl-abyss); box-shadow: 0 0 0 12px var(--fl-abyss); }
.vc-a-fl-int__head h2 { font-size: clamp(44px, 4.9vw, 72px); line-height: 1.02; letter-spacing: -0.05em; max-width: 19ch; text-shadow: 0 2px 22px #041c1b, 0 0 4px #041c1b; }
.vc-a-fl-int__lede { font-size: 19px; line-height: 1.55; max-width: 48ch; margin-top: 18px; padding: 10px 14px; background: #041c1bd9; color: #e2ede6; }
.vc-a-fl-int__ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; padding: 12px 14px; background: #041c1bd9; justify-self: start; }
.vc-a-fl-int__btns { display: flex; gap: 0; }
.vc-a-fl-int__btns button { min-height: 44px; padding: 8px 18px; border: 1px solid #8fd1ad99; margin-left: -1px; background: transparent; color: var(--fl-soft); font: 650 16px var(--gft-font-display); cursor: pointer; }
.vc-a-fl-int__btns button[aria-pressed='true'] { background: var(--fl-paper); color: var(--fl-night); }
.vc-a-fl-int__l { font: 600 13px var(--gft-font-mono); letter-spacing: 0.06em; color: #d6e6dc; }
.vc-a-fl-int__ctl input { width: min(360px, 60vw); accent-color: var(--fl-amber); }
.vc-a-fl-int__outs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 980px; }
.vc-a-fl-int__out { padding: 16px 20px; background: #041c1be6; border: 1px solid #8fd1ad55; border-top: 3px solid #8fd1ad80; transition: border-color 300ms, transform 300ms var(--fl-ease); }
.vc-a-fl-int[data-lean='pooled'] .vc-a-fl-int__out--p, .vc-a-fl-int[data-lean='ticketed'] .vc-a-fl-int__out--t { border-top-color: var(--fl-amber); transform: translateY(-4px); }
.vc-a-fl-int__ok { font: 600 13px var(--gft-font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fl-amber2); }
.vc-a-fl-int__claim { font-size: 28px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; margin-top: 6px; }
.vc-a-fl-int__ctx { grid-column: 1 / -1; font-size: 17px; line-height: 1.5; color: #e2ede6; padding: 10px 14px; background: #041c1bd9; }
/* entrance: iris (night opens from the port node where the corridor axis entered, then the threads fan out from the gate) */
:root[data-m-go][data-fl-armed] .vc-a-fl-int:not([data-fl-on]) .vc-a-fl-int__night { clip-path: circle(0% at 50% 0%); }
:root[data-m-go][data-fl-armed] .vc-a-fl-int:not([data-fl-on]) .vc-a-fl-int__fan { transform: scaleX(0.04); }
:root[data-m-go][data-fl-armed] .vc-a-fl-int:not([data-fl-on]) .vc-a-fl-int__outs { opacity: 0.2; }
:root[data-m-go][data-fl-armed] .vc-a-fl-int[data-fl-on] .vc-a-fl-int__night { animation-name: vc-a-fl-iris; animation-duration: 460ms; animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
:root[data-m-go][data-fl-armed] .vc-a-fl-int[data-fl-on] .vc-a-fl-int__fan { animation-name: vc-a-fl-fan; animation-duration: 440ms; animation-timing-function: var(--fl-ease); animation-delay: 440ms; animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
:root[data-m-go][data-fl-armed] .vc-a-fl-int[data-fl-on] .vc-a-fl-int__outs { animation-name: vc-a-fl-up; animation-duration: 440ms; animation-timing-function: var(--fl-ease); animation-delay: 460ms; animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
@keyframes vc-a-fl-iris { from { clip-path: circle(0% at 50% 0%); } to { clip-path: circle(150% at 50% 0%); } }
@keyframes vc-a-fl-fan { from { transform: scaleX(0.04); opacity: 0.4; } }

/* ================= 7 · the ticket printer pin (forest with the hex field) ================= */
.vc-a-fl-tk { background: var(--fl-forest); color: var(--fl-paper); }
.vc-a-fl-tk__stage { position: sticky; top: 0; height: 100svh; overflow: clip; align-self: start; }
.vc-a-fl-tk__inner { position: absolute; inset: 0; background: radial-gradient(70% 60% at 50% 40%, #11564f 0, #0b3f3c 70%); }
.vc-a-fl-tk__hex { position: absolute; inset: 0; }
.vc-a-fl-tk__hex svg { width: 100%; height: 100%; }
.vc-a-fl-tk__cell { fill: #ffffff00; stroke: #8fd1ad; stroke-opacity: 0.12; stroke-width: 1.4; transition: fill 500ms, stroke-opacity 500ms; }
.vc-a-fl-tk__cell[data-lit] { fill: #e0a6450d; stroke-opacity: 0.22; }
.vc-a-fl-tk__cell[data-now] { fill: #e0a64521; stroke: #e0a645; stroke-opacity: 0.35; }
.vc-a-fl-tk__spinein { position: absolute; top: 0; height: 112px; left: calc(50% + var(--tw) / 2 - 39px); width: 4px; margin-left: -2px; background: var(--fl-amber); transition: opacity 400ms; }
.vc-a-fl-tk__printer { position: absolute; top: 96px; left: 50%; width: calc(var(--tw) + 60px); translate: -50% 0; display: grid; gap: 4px; z-index: 2; }
.vc-a-fl-tk__printer i { display: block; height: 16px; background: #041c1b; border: 1px solid #8fd1ad66; box-shadow: inset 0 -3px 0 var(--fl-amber); }
.vc-a-fl-tk__printer span { order: -1; font: 600 13px var(--gft-font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: #d6e6dc; text-align: right; }
/* The opaque paper stays above the station throughout travel in either direction. */
.vc-a-fl-tk__clip { position: absolute; z-index: 1; top: 112px; left: calc(50% - var(--tw) / 2); width: var(--tw); clip-path: inset(0 -40px -60px -40px); transition: transform 650ms var(--fl-swing), translate 420ms var(--fl-swing); }
.vc-a-fl-tk__stage:is([data-step='2'], [data-step='3']) .vc-a-fl-tk__clip { translate: 0 130px; transform: translateX(calc(-50vw + var(--tw) / 2 + 4vw)); }
.vc-a-fl-tk__ticket { position: relative; background: #f6f4ef; color: var(--fl-ink); padding: 16px 20px 12px; box-shadow: 0 18px 40px #041c1b80; border-top: 4px dashed #c98a2b; }
.vc-a-fl-tk__th { display: flex; align-items: center; gap: 12px; padding-bottom: 10px; border-bottom: 1px dashed #0e4d4a55; }
.vc-a-fl-tk__th svg { width: 56px; height: 56px; }
.vc-a-fl-tk__title { font: 800 19px var(--gft-font-mono); letter-spacing: 0.06em; text-transform: uppercase; }
.vc-a-fl-tk__sub { font: 600 13px var(--gft-font-mono); letter-spacing: 0.06em; color: #6a3f06; text-transform: uppercase; }
.vc-a-fl-tk__spine { position: absolute; right: 37px; top: 84px; bottom: 14px; width: 4px; background: var(--fl-ochre); }
.vc-a-fl-tk__bead { position: absolute; left: -5px; top: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--fl-forest); border: 2px solid var(--fl-amber); }
:root[data-m-go] [data-m-live~='fl-bead2'][data-m-on] { animation-name: vc-a-fl-bead2; animation-duration: 2.4s; animation-timing-function: var(--fl-ease); animation-iteration-count: infinite; animation-direction: normal; }
@keyframes vc-a-fl-bead2 { from { transform: translateY(0); opacity: .2; } 15% { opacity: 1; } 80% { transform: translateY(calc((var(--row, 0) + 0.5) * 76px)); opacity: 1; } to { transform: translateY(calc((var(--row, 0) + 0.5) * 76px)); opacity: .2; } }
.vc-a-fl-tk__rows { list-style: none; margin: 0; padding: 0; }
.vc-a-fl-tk__row button { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto 44px; align-items: center; gap: 12px; width: 100%; min-height: 76px; padding: 8px 0; border: 0; border-bottom: 1px dashed #0e4d4a40; background: none; color: inherit; text-align: left; cursor: pointer; overflow: hidden; }
.vc-a-fl-tk__row button:focus-visible { outline: 3px solid var(--fl-ochre); outline-offset: -3px; }
.vc-a-fl-tk__print { display: grid; gap: 2px; clip-path: inset(0 100% 0 0); transition: clip-path 600ms var(--fl-ease); }
.vc-a-fl-tk__row[data-shown] .vc-a-fl-tk__print { clip-path: inset(0 0 0 0); }
.vc-a-fl-tk__print b { font: 700 14px var(--gft-font-mono); letter-spacing: 0.06em; }
.vc-a-fl-tk__val { font: 600 18px var(--gft-font-mono); color: #6a3f06; }
.vc-a-fl-tk__st { display: grid; justify-items: end; font: normal 600 13px var(--gft-font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.vc-a-fl-tk__st span { grid-area: 1 / 1; }
.vc-a-fl-tk__st .is-open { color: #4a5f59; }
.vc-a-fl-tk__st .is-done { visibility: hidden; color: var(--fl-leafink); }
.vc-a-fl-tk__row[data-shown] .is-open { visibility: hidden; }
.vc-a-fl-tk__row[data-shown] .is-done { visibility: visible; }
.vc-a-fl-tk__seal { width: 34px; height: 34px; justify-self: center; opacity: 0; transform: scale(1.8); transition: opacity 120ms 480ms, transform 140ms cubic-bezier(0.3, 1.6, 0.5, 1) 480ms; }
.vc-a-fl-tk__row[data-shown] .vc-a-fl-tk__seal { opacity: 1; transform: scale(1); }
.vc-a-fl-tk__row[data-current] button { background: #e0a64526; }
.vc-a-fl-tk__scan { position: absolute; left: 0; top: 0; bottom: 0; width: 40px; background: linear-gradient(90deg, #e0a64500, #e0a64566, #e0a64500); transform: translateX(-60px); pointer-events: none; }
:root[data-m-go] .vc-a-fl-tk__row[data-current] [data-m-live~='fl-scanrow'][data-m-on] { animation-name: vc-a-fl-scanrow; animation-duration: 2.2s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: normal; }
@keyframes vc-a-fl-scanrow { from { transform: translateX(-60px); } to { transform: translateX(680px); } }
.vc-a-fl-tk__strip { position: absolute; top: calc(112px + 430px); left: 50%; translate: -50% 0; width: calc(var(--tw) + 120px); list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); transition: opacity 500ms; }
.vc-a-fl-tk__strip::before { content: ''; position: absolute; left: 12.5%; right: 12.5%; top: 21px; height: 2px; background: #8fd1ad66; }
.vc-a-fl-tk__strip li { position: relative; display: grid; justify-items: center; }
.vc-a-fl-tk__strip button { display: grid; justify-items: center; gap: 6px; min-height: 44px; background: none; border: 0; color: var(--fl-soft); font: 600 15px var(--gft-font-mono); letter-spacing: 0.04em; cursor: pointer; padding: 6px 4px; }
.vc-a-fl-tk__strip button i { width: 18px; height: 18px; border-radius: 50%; background: var(--fl-forest); border: 2px solid var(--fl-mint); }
.vc-a-fl-tk__strip li[data-lit] button i { background: var(--fl-amber); border-color: var(--fl-amber); }
.vc-a-fl-tk__strip li[data-now] button { color: var(--fl-paper); }
.vc-a-fl-tk__strip li[data-now] button i { box-shadow: 0 0 0 6px #e0a64544; }
.vc-a-fl-tk__inset { position: absolute; top: 72px; width: 80px; height: 50px; opacity: 0; transition: opacity 400ms; }
.vc-a-fl-tk__stage[data-step='1'] .vc-a-fl-tk__inset { opacity: 1; }
.vc-a-fl-tk__station { position: absolute; left: calc(var(--tw) + 8vw); right: 4vw; top: 104px; height: calc(100svh - 440px); clip-path: inset(0 100% 0 0); opacity: 0; transition: clip-path 900ms var(--fl-swing), opacity 400ms; }
.vc-a-fl-tk__station svg { width: 100%; height: 100%; }
.vc-a-fl-tk__needle { transform-box: view-box; transform-origin: 0 0; }
.vc-a-fl-tk__bridge { position: absolute; left: 2vw; right: 2vw; bottom: 18px; height: 24svh; clip-path: inset(0 0 0 0); opacity: 0.28; transition: clip-path 900ms var(--fl-swing), opacity 300ms; }
.vc-a-fl-tk__bridge svg { width: 100%; height: 100%; }
.vc-a-fl-tk__stage[data-step='2'] .vc-a-fl-tk__bridge { opacity: 0; clip-path: inset(0 100% 0 0); }
.vc-a-fl-tk__stage:is([data-step='2'], [data-step='3']) .vc-a-fl-tk__strip { opacity: 0; pointer-events: none; }
.vc-a-fl-tk__stage:is([data-step='2'], [data-step='3']) .vc-a-fl-tk__spinein { opacity: 0; }
.vc-a-fl-tk__stage[data-step='2'] .vc-a-fl-tk__station { clip-path: inset(0 0 0 0); opacity: 1; }
.vc-a-fl-tk__stage[data-step='3'] .vc-a-fl-tk__bridge { clip-path: inset(0 0 0 0); opacity: 1; }
.vc-a-fl-tk__track { display: grid; }
.vc-a-fl-tk__track .vc-a-fl-mark:last-child { height: calc(100svh - 36px); }
.vc-a-fl-tk__slot { position: sticky; top: 0; height: 100svh; align-self: start; pointer-events: none; padding: 44px 0 0 4vw; box-sizing: border-box; width: calc(50vw - var(--tw) / 2 - 28px); }
.vc-a-fl-tk__slot > * { pointer-events: auto; }
.vc-a-fl-tk__head h2 { font-size: clamp(1.45rem, 1.9vw, 2rem); }
.vc-a-fl-tk__cards { display: grid; margin-top: 20px; }
.vc-a-fl-tk .vc-a-fl-card { background: #041c1b; }
/* Clear the controls before the ticket travels; reveal them only after its return.
   The ticket still clears its final bounds at 650 ms; copy settles by 890 ms. */
@media (min-width: 901px) {
  .vc-a-fl-tk__strip { visibility: visible; transition: opacity 120ms ease 650ms, visibility 0s linear 650ms; }
  .vc-a-fl-tk__stage:is([data-step='2'], [data-step='3']) .vc-a-fl-tk__strip { visibility: hidden; transition: opacity 120ms ease, visibility 0s linear 120ms; }
  .vc-a-fl-tk__stage:is([data-step='2'], [data-step='3']) .vc-a-fl-tk__clip { transition: transform 510ms var(--fl-swing) 140ms, translate 420ms var(--fl-swing) 140ms; }
  .vc-a-fl-tk .vc-a-fl-card[data-active] { transition: opacity 220ms ease 670ms, transform 220ms var(--fl-ease) 670ms, visibility 0s linear 670ms; }
}
.vc-a-fl-tk .vc-a-fl-card[data-fl-card='2'] { translate: calc(var(--tw) + 4vw) calc(100svh - 300px - 250px); }
.vc-a-fl-tk .vc-a-fl-card[data-fl-card='3'] { translate: calc(var(--tw) + 4vw) 0; }
:root[data-m-go] .vc-a-fl-tk__stage[data-step='2'] .vc-a-fl-tk__needle { animation-name: vc-a-fl-needle; animation-duration: 2.8s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; }
@keyframes vc-a-fl-needle { from { transform: rotate(-12deg); } to { transform: rotate(14deg); } }
/* entrance: card (the ticket slides out of the printer slot, row 01 prints and the seal stamps) */
:root[data-m-go][data-fl-armed] .vc-a-fl-tk:not([data-fl-on]) .vc-a-fl-tk__ticket { transform: translateY(-104%); }
:root[data-m-go][data-fl-armed] .vc-a-fl-tk:not([data-fl-on]) .vc-a-fl-tk__row:first-child :is(.vc-a-fl-tk__print, .vc-a-fl-tk__seal) { opacity: 0; }
:root[data-m-go][data-fl-armed] .vc-a-fl-tk:not([data-fl-on]) :is(.vc-a-fl-tk__strip, .vc-a-fl-tk__hex) { opacity: 0.2; }
:root[data-m-go][data-fl-armed] .vc-a-fl-tk[data-fl-on] .vc-a-fl-tk__ticket { animation-name: vc-a-fl-issue; animation-duration: 450ms; animation-timing-function: cubic-bezier(0.3, 0.7, 0.3, 1); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
:root[data-m-go][data-fl-armed] .vc-a-fl-tk[data-fl-on] .vc-a-fl-tk__row:first-child .vc-a-fl-tk__print { animation-name: vc-a-fl-print; animation-duration: 300ms; animation-timing-function: linear; animation-delay: 450ms; animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
:root[data-m-go][data-fl-armed] .vc-a-fl-tk[data-fl-on] .vc-a-fl-tk__row:first-child .vc-a-fl-tk__seal { animation-name: vc-a-fl-stamp; animation-duration: 120ms; animation-timing-function: cubic-bezier(0.3, 1.6, 0.5, 1); animation-delay: 740ms; animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
:root[data-m-go][data-fl-armed] .vc-a-fl-tk[data-fl-on] :is(.vc-a-fl-tk__strip, .vc-a-fl-tk__hex) { animation-name: vc-a-fl-fade; animation-duration: 500ms; animation-delay: 300ms; animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
@keyframes vc-a-fl-issue { from { transform: translateY(-104%); } }
@keyframes vc-a-fl-print { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes vc-a-fl-stamp { from { transform: scale(1.9); opacity: 0; } }

/* ================= 8 · closing: the village weighbridge (night, ochre lamp) ================= */
.vc-a-fl-cl { background: radial-gradient(60% 55% at 32% 18%, #263a22 0, #072d2b 62%); color: var(--fl-paper); min-height: 718px; display: flex; flex-direction: column; }
@media (min-width: 901px) { .vc-a-fl-cl { height: 718px; min-height: 718px; } }
.vc-a-fl-cl__lamp { position: absolute; left: 14%; top: -12%; width: 46%; height: 70%; background: radial-gradient(closest-side, #e0a64533, #e0a64500); pointer-events: none; }
:root[data-m-go] [data-m-live~='fl-lamp'][data-m-on] { animation-name: vc-a-fl-lamp; animation-duration: 5s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; }
@keyframes vc-a-fl-lamp { 0% { opacity: 0.75; } 40% { opacity: 1; } 46% { opacity: 0.82; } 52% { opacity: 1; } 100% { opacity: 0.88; } }
.vc-a-fl-cl__in { position: relative; width: min(1440px, calc(100% - 96px)); margin-inline: auto; flex: 1; display: flex; flex-direction: column; padding-top: 20px; }
.vc-a-fl-cl__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); gap: 36px; align-items: start; }
.vc-a-fl-cl__top .vc-a-fl-kick { margin-bottom: 8px; }
.vc-a-fl-cl__top h2 { font-size: clamp(1.5rem, 2.05vw, 2.1rem); }
.vc-a-fl-cl__top .vc-a-fl-lede { font-size: 16px; line-height: 1.45; margin-top: 8px; }
.vc-a-fl-cl__ro { padding: 12px 18px; background: #041c1be6; border: 1px solid #8fd1ad55; border-top: 3px solid var(--fl-amber); }
.vc-a-fl-cl__panels { display: grid; }
.vc-a-fl-cl__panels > div { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity 300ms; }
.vc-a-fl-cl__panels > [data-on] { opacity: 1; visibility: visible; }
.vc-a-fl-cl__unit { font-size: 22px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; margin-top: 4px; }
.vc-a-fl-cl__txt { font-size: 15px; line-height: 1.45; color: #e2ede6; margin-top: 4px; }
.vc-a-fl-cl__qual { font: 12.5px/1.4 var(--gft-font-mono); color: #cfe3d7; margin-top: 6px; padding-top: 6px; border-top: 1px dashed #8fd1ad55; }
.vc-a-fl-cl__det summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font: 600 12.5px var(--gft-font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fl-amber2); }
.vc-a-fl-cl__detb { font-size: 15px; line-height: 1.5; color: #e2ede6; padding-bottom: 6px; }
.vc-a-fl-cl__scene { position: relative; height: 357px; min-height: 357px; margin-top: auto; padding-top: 96px; padding-bottom: 10px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-end; container-type: inline-size; --mx: 0; --arm: 40deg; --pb: 62px; }
.vc-a-fl-cl[data-stage='field'] .vc-a-fl-cl__scene { --mx: 0; --arm: 0deg; }
.vc-a-fl-cl[data-stage='gate'] .vc-a-fl-cl__scene { --mx: 15; --arm: 40deg; }
.vc-a-fl-cl[data-stage='gin'] .vc-a-fl-cl__scene { --mx: 35; --arm: 82deg; }
.vc-a-fl-cl__ticket { position: relative; width: min(410px, 30cqw); min-height: auto; padding: 10px 14px; box-sizing: border-box; background: var(--fl-paper); color: var(--fl-ink); border-top: 4px dashed var(--fl-ochre); box-shadow: 0 16px 36px #041c1b99; z-index: 2; }
.vc-a-fl-cl__tt { display: flex; align-items: center; gap: 8px; font: 800 12.5px var(--gft-font-mono); letter-spacing: 0.05em; text-transform: uppercase; }
.vc-a-fl-cl__tt svg { width: 22px; height: 22px; flex-shrink: 0; }
.vc-a-fl-cl__badge { margin-left: auto; padding: 2px 6px; font: 700 12px var(--gft-font-mono); font-style: normal; background: #0e4d4a18; color: var(--fl-forest); border: 1px solid #0e4d4a55; }
.vc-a-fl-cl[data-stage='gin'] .vc-a-fl-cl__badge { background: #c98a2b2e; color: #6a3f06; border-color: #a86d14; }
.vc-a-fl-cl__fields { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 12px; }
.vc-a-fl-cl__fields li { display: flex; justify-content: space-between; gap: 6px; font: 600 12.5px var(--gft-font-mono); padding: 2px 0; border-bottom: 1px dashed #0e4d4a40; white-space: nowrap; }
.vc-a-fl-cl__fields b { color: var(--fl-leafink); }
.vc-a-fl-cl__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.vc-a-fl-cl__links a { min-height: 44px; padding: 4px 10px; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 4px; font-weight: 700; font-size: 13px; line-height: 1.15; color: var(--fl-forest); background: #0e4d4a12; border: 1px solid #0e4d4a66; text-decoration: none; }
.vc-a-fl-cl__links a:hover { background: var(--fl-forest); color: var(--fl-paper); }
.vc-a-fl-cl__links a::after { content: '↗'; flex-shrink: 0; }
.vc-a-fl-cl__tear { font: italic 14.5px/1.28 var(--gft-font-serif); margin-top: 6px; padding-top: 6px; border-top: 2px dotted #0e4d4a70; color: var(--fl-ink); }
.vc-a-fl-cl__stub { font: 600 12px/1.3 var(--gft-font-mono); color: #6a3f06; margin-top: 4px; }
.vc-a-fl-cl[data-stage='gin'] .vc-a-fl-cl__tear { border-top-style: dashed; border-top-color: #a86d14; }
.vc-a-fl-cl[data-stage='gin'] .vc-a-fl-cl__stub { color: var(--fl-leafink); }
.vc-a-fl-cl__plat { position: absolute; left: 31cqw; right: 0; bottom: var(--pb); }
.vc-a-fl-cl__bridge { width: 100%; height: auto; }
.vc-a-fl-cl__marks { position: absolute; left: 0; right: 0; bottom: calc(100% * 0 + 2px); height: 0; }
.vc-a-fl-cl__marks span { position: absolute; bottom: 0; translate: -50% 0; font: 600 13px var(--gft-font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: #cfe3d7; white-space: nowrap; padding-top: 4px; }
.vc-a-fl-cl__marks span:nth-child(1) { left: 18%; }
.vc-a-fl-cl__marks span:nth-child(2) { left: 48%; }
.vc-a-fl-cl__marks span:nth-child(3) { left: 78%; }
.vc-a-fl-cl[data-stage='field'] .vc-a-fl-cl__marks span:nth-child(1), .vc-a-fl-cl[data-stage='gate'] .vc-a-fl-cl__marks span:nth-child(2), .vc-a-fl-cl[data-stage='gin'] .vc-a-fl-cl__marks span:nth-child(3) { color: var(--fl-amber2); }
.vc-a-fl-cl__mod { position: absolute; left: 33cqw; bottom: calc(var(--pb) + 6.1cqw); width: 14cqw; transform: translateX(calc(var(--mx) * 1cqw)); transition: transform 550ms var(--fl-swing); }
.vc-a-fl-cl__breath { transform-origin: 50% 100%; }
.vc-a-fl-cl__breath svg { width: 100%; height: auto; }
:root[data-m-go] [data-m-live~='fl-breath'][data-m-on] { animation-name: vc-a-fl-breath; animation-duration: 2.8s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; }
@keyframes vc-a-fl-breath { from { transform: scaleY(1); } to { transform: scaleY(1.025); } }
/* A fixed caption lane ends before the arm's leftmost sweep at 53cqw.
   Its clearance also includes the module's settling entrance. */
.vc-a-fl-cl__lbl { position: absolute; left: 33cqw; width: 18cqw; bottom: calc(var(--pb) + 14.72cqw + 86px); font: 600 13px/1.3 var(--gft-font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: #e2ede6; }
.vc-a-fl-cl__seal { position: absolute; left: calc(33cqw + 7cqw - 17px); bottom: calc(var(--pb) + 6.1cqw + 3.6cqw - 17px); width: 34px; height: 34px; z-index: 3; transform: translate(calc(var(--mx) * 1cqw), 0); transition: transform 550ms var(--fl-swing); }
.vc-a-fl-cl__seal svg { width: 34px; height: 34px; }
.vc-a-fl-cl[data-stage='gin'] .vc-a-fl-cl__seal { transform: translate(calc(98.5cqw - 33cqw - 7cqw), calc(var(--pb) + 6.1cqw + 3.6cqw)); transition: transform 650ms var(--fl-swing) 120ms; }
.vc-a-fl-cl__gate { position: absolute; left: 66cqw; bottom: calc(var(--pb) + 6.1cqw); width: 0; height: 0; }
.vc-a-fl-cl__post { position: absolute; left: -6px; bottom: 0; width: 12px; height: 11cqw; background: #8fd1ad; }
.vc-a-fl-cl__arm { position: absolute; right: 0; bottom: calc(11cqw - 14px); width: 13cqw; height: 10px; background: repeating-linear-gradient(90deg, #e0a645 0 18px, #f6f4ef 18px 36px); transform-origin: 100% 50%; transform: rotate(var(--arm)); transition: transform 520ms var(--fl-swing); }
.vc-a-fl-cl__gl { position: absolute; left: 12px; bottom: calc(11cqw + 4px); font: 600 13px var(--gft-font-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--fl-amber2); white-space: nowrap; }
.vc-a-fl-cl__gin { position: absolute; left: 91cqw; bottom: calc(var(--pb) + 6.1cqw + 4px); display: grid; justify-items: center; gap: 4px; translate: -50% 0; }
.vc-a-fl-cl__gin svg { width: 7cqw; height: 7cqw; min-width: 44px; min-height: 44px; }
.vc-a-fl-cl__gin span { order: -1; font: 600 13px var(--gft-font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--fl-mint); white-space: nowrap; }
.vc-a-fl-cl__rail { position: absolute; left: 66cqw; right: 1.5cqw; bottom: calc(var(--pb) + 6.1cqw - 2px); height: 3px; background: var(--fl-ochre); }
.vc-a-fl-cl__rail b { position: absolute; left: 0; top: -4px; width: 11px; height: 11px; border-radius: 50%; background: var(--fl-amber2); }
:root[data-m-go] [data-m-live~='fl-railbead'][data-m-on] { animation-name: vc-a-fl-railbead; animation-duration: 3.4s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: normal; }
@keyframes vc-a-fl-railbead { from { transform: translateX(0); } to { transform: translateX(32.5cqw); } }
.vc-a-fl-cl__drop { position: absolute; left: calc(98.5cqw - 1.5px); width: 3px; bottom: -1px; height: calc(var(--pb) + 6.1cqw); background: var(--fl-ochre); }
.vc-a-fl-cl__ctl { position: absolute; left: 32cqw; width: 62cqw; bottom: 0; height: 56px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 18px; }
.vc-a-fl-cl__cl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.vc-a-fl-cl__ctl input { width: 100%; accent-color: var(--fl-amber); }
.vc-a-fl-cl__stops { display: flex; }
.vc-a-fl-cl__stops button { min-height: 44px; padding: 6px 16px; border: 1px solid #8fd1ad99; margin-left: -1px; background: transparent; color: var(--fl-soft); font: 650 16px var(--gft-font-display); cursor: pointer; }
.vc-a-fl-cl__stops button[aria-pressed='true'] { background: var(--fl-paper); color: var(--fl-night); }
/* entrance: selvedge-draw (platform and gate draw in from both selvedges, the module settles, the barrier swings) */
:root[data-m-go][data-fl-armed] .vc-a-fl-cl:not([data-fl-on]) :is(.vc-a-fl-cl__plat, .vc-a-fl-cl__rail) { clip-path: inset(0 50% 0 50%); }
:root[data-m-go][data-fl-armed] .vc-a-fl-cl:not([data-fl-on]) :is(.vc-a-fl-cl__settle, .vc-a-fl-cl__ticket, .vc-a-fl-cl__ro, .vc-a-fl-cl__gin) { opacity: 0.2; }
:root[data-m-go][data-fl-armed] .vc-a-fl-cl:not([data-fl-on]) .vc-a-fl-cl__settle { transform: translateY(-var(--pb)); }
:root[data-m-go][data-fl-armed] .vc-a-fl-cl[data-fl-on] :is(.vc-a-fl-cl__plat, .vc-a-fl-cl__rail) { animation-name: vc-a-fl-selvedge; animation-duration: 450ms; animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
:root[data-m-go][data-fl-armed] .vc-a-fl-cl[data-fl-on] .vc-a-fl-cl__settle { animation-name: vc-a-fl-settle; animation-duration: 440ms; animation-delay: 440ms; animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
:root[data-m-go][data-fl-armed] .vc-a-fl-cl[data-fl-on] .vc-a-fl-cl__arm { animation-name: vc-a-fl-swingup; animation-duration: 420ms; animation-timing-function: var(--fl-ease); animation-delay: 470ms; animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
:root[data-m-go][data-fl-armed] .vc-a-fl-cl[data-fl-on] :is(.vc-a-fl-cl__ticket, .vc-a-fl-cl__ro, .vc-a-fl-cl__gin) { animation-name: vc-a-fl-up; animation-duration: 480ms; animation-timing-function: var(--fl-ease); animation-delay: 220ms; animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; }
@keyframes vc-a-fl-selvedge { from { clip-path: inset(0 50% 0 50%); } to { clip-path: inset(0 0 0 0); } }
@keyframes vc-a-fl-settle { 0% { transform: translateY(-70px); opacity: 0.3; animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.6); } 62% { transform: translateY(0); opacity: 1; animation-timing-function: ease-out; } 80% { transform: translateY(-9px); animation-timing-function: ease-in; } 100% { transform: translateY(0); } }
@keyframes vc-a-fl-swingup { from { rotate: calc(var(--arm) * -1); } to { rotate: 0deg; } }

/* ================= tablet ================= */
@media (max-width: 1100px) and (min-width: 901px) {
  .vc-a-fl-sit__in { grid-template-columns: minmax(0, 1fr) 180px minmax(0, 1fr); gap: 28px; }
  .vc-a-fl-net__lower { grid-template-columns: 1fr; }
}

/* ================= phone and small tablet: pins become a band with cards beneath ================= */
@media (max-width: 900px) {
  .vc-a-fl-head h2 { font-size: clamp(1.55rem, 6.4vw, 2rem); }
  .vc-a-fl-lede { font-size: 17px; }
  .vc-a-fl-con__grid, .vc-a-fl-net__in, .vc-a-fl-sit__in, .vc-a-fl-int__in, .vc-a-fl-cl__in, .vc-a-fl-net__turn { width: calc(100% - 32px); }
  /* console */
  .vc-a-fl-con__grid { grid-template-columns: 1fr; grid-template-areas: 'head' 'chart' 'ctl' 'ro' 'axis'; grid-template-rows: none; }
  .vc-a-fl-con__head { padding-top: 24px; order: -1; }
  .vc-a-fl-con__chart { margin-top: 12px; }
  .vc-a-fl-con__roots { display: none; }
  .vc-a-fl-con__hits { inset: 0; }
  .vc-a-fl-con__hit { width: 25%; left: calc(var(--x) - 12.5%); }
  .vc-a-fl-con__ctl .vc-a-fl-seg { width: 100%; display: grid; grid-template-columns: 1fr; }
  .vc-a-fl-con__ctl .vc-a-fl-seg__opt span { width: 100%; margin-left: 0; margin-top: -1px; }
  .vc-a-fl-scrub { min-width: 0; width: 100%; grid-template-columns: 1fr; }
  .vc-a-fl-scrub__l { grid-row: auto; }
  .vc-a-fl-ro { margin-top: 16px; display: grid; grid-template-columns: auto 1fr; column-gap: 16px; }
  .vc-a-fl-ro > * { grid-column: 1 / -1; }
  .vc-a-fl-ro__fig { font-size: 32px; }
  /* plant pin */
  .vc-a-fl-pin { display: block; }
  .vc-a-fl-pl { --L: 120px; --bx: 50%; --by: 22%; }
  .vc-a-fl-pl__stage, .vc-a-fl-tk__stage { position: sticky; top: 0; height: 52svh; z-index: 1; }
  .vc-a-fl-tk__stage { height: 56svh; }
  .vc-a-fl-pl__track, .vc-a-fl-tk__track { display: none; }
  .vc-a-fl-pl__slot, .vc-a-fl-tk__slot { position: relative; height: auto; width: auto; padding: 24px 16px 8svh; pointer-events: auto; }
  .vc-a-fl-pl__cards, .vc-a-fl-tk__cards { display: block; transform: none !important; }
  .vc-a-fl-card { opacity: 1; visibility: visible; transform: none; margin-bottom: 24svh; border-left-color: #8fd1ad66; }
  .vc-a-fl-card[data-active] { border-left-color: var(--fl-amber); }
  .vc-a-fl-card--spacer { display: none; }
  .vc-a-fl-card[data-fl-card='4'] { margin-bottom: 18svh; }
  .vc-a-fl-card__chips { display: block; }
  .vc-a-fl-pl__plant { left: 0; right: 0; top: 6px; bottom: 132px; }
  .vc-a-fl-pl__lens { left: 10px; top: 10px; bottom: auto; transform: none !important; }
  .vc-a-fl-pl__lcap { display: none; }
  .vc-a-fl-pl__fibre { clip-path: circle(0px at 70px 70px); }
  .vc-a-fl-pl__stage[data-step='3'] .vc-a-fl-pl__fibre { clip-path: circle(150% at 70px 70px); }
  .vc-a-fl-pl__stage[data-step='3'] .vc-a-fl-pl__lens { opacity: 1; }
  .vc-a-fl-pl__band { left: 10px; right: 10px; bottom: 6px; grid-template-columns: 1fr; gap: 4px; }
  .vc-a-fl-pl__soil { left: 16px; right: 16px; bottom: 132px; min-height: 24px; font-size: 12px; }
  .vc-a-fl-rail { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
  .vc-a-fl-rail button { justify-content: center; padding: 6px 2px; }
  .vc-a-fl-rail button span { display: none; }
  .vc-a-fl-gauges { grid-template-columns: 1fr; gap: 0; }
  .vc-a-fl-gauge { grid-template-columns: 150px 1fr; align-items: center; min-height: 24px; padding: 1px 0; }
  .vc-a-fl-gauges__out, .vc-a-fl-chips { display: none; }
  .vc-a-fl-pl, .vc-a-fl-net { --dp: 28px; --dbig: 196px 140px; }
  .vc-a-fl-pl[data-burst] .vc-a-fl-pl__slot { opacity: 1; visibility: visible; }
  .vc-a-fl-pl__irissvg { display: none; }
  .vc-a-fl-pl__iristag { top: auto; bottom: 16px; font-size: 12px; max-width: calc(100vw - 32px); }
  .vc-a-fl-net::before { height: 168px; }
  /* network */
  .vc-a-fl-net__top { grid-template-columns: 1fr; }
  .vc-a-fl-net__svg--wide { display: none !important; }
  .vc-a-fl-net__svg--tall { display: block !important; max-height: 70svh; margin-inline: auto; }
  .vc-a-fl-net__lower { grid-template-columns: 1fr; padding-right: 0; }
  .vc-a-fl-net__lower::after { display: none; }
  .vc-a-fl-netout__fig { font-size: 40px; }
  .vc-a-fl-seg--scroll { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; padding: 4px; }
  .vc-a-fl-seg--scroll .vc-a-fl-seg__opt span { white-space: nowrap; }
  .vc-a-fl-sel { min-width: 0; max-width: none; }
  .vc-a-fl-table, .vc-a-fl-table tbody, .vc-a-fl-table tr, .vc-a-fl-table th, .vc-a-fl-table td { display: block; }
  .vc-a-fl-table thead { display: none; }
  .vc-a-fl-table caption { display: block; }
  .vc-a-fl-table tbody tr { border: 1px solid #0e4d4a33; margin-bottom: 8px; padding: 8px 10px; background: #fff; }
  .vc-a-fl-table th, .vc-a-fl-table td { border: 0; padding: 2px 0; }
  .vc-a-fl-table__bar { width: auto; }
  .vc-a-fl-net__turn { height: 60px; }
  /* corridor turns horizontal */
  .vc-a-fl-sit::before, .vc-a-fl-sit::after { display: none; }
  .vc-a-fl-sit__in { grid-template-columns: 1fr; gap: 20px; min-height: 0; padding-bottom: 40px; }
  .vc-a-fl-sit__left { display: contents; }
  .vc-a-fl-sit__left header { order: 1; }
  .vc-a-fl-cor { order: 2; height: 150px; margin: 16px 8px 0; }
  .vc-a-fl-sit__ro { order: 3; margin: 0; }
  .vc-a-fl-pole--n { order: 4; }
  .vc-a-fl-pole--s { order: 5; margin-top: 0; }
  .vc-a-fl-cor__axis { left: 0; right: 0; top: 50%; bottom: auto; width: auto; height: 3px; }
  .vc-a-fl-cor__leg { left: 0; right: 0; top: calc(50% - 4px); bottom: auto; width: auto; height: 8px; }
  .vc-a-fl-cor__leg--in { transform-origin: 0 50%; scale: var(--fl-p) 1; }
  .vc-a-fl-cor__leg--out { transform-origin: 100% 50%; scale: calc(1 - var(--fl-p)) 1; }
  .vc-a-fl-cor__bead { left: 0; top: 50%; width: 100%; height: 0; }
  @keyframes vc-a-fl-bead-in { from { transform: translateX(0); } to { transform: translateX(calc(var(--fl-p) * 100%)); } }
  @keyframes vc-a-fl-bead-out { from { transform: translateX(calc(var(--fl-p) * 100%)); } to { transform: translateX(100%); } }
  .vc-a-fl-cor__pole { top: auto !important; bottom: 0; grid-template-columns: 1fr; justify-items: center; translate: -50% 0; }
  .vc-a-fl-cor__pole svg { width: 40px; height: 40px; grid-row: auto; }
  .vc-a-fl-cor__pole em { display: none; }
  .vc-a-fl-cor__pole b { font-size: 13px; }
  .vc-a-fl-cor__pole--n { left: 0; translate: 0 0; justify-items: start; }
  .vc-a-fl-cor__pole--s { left: auto; right: 0; translate: 0 0; justify-items: end; }
  .vc-a-fl-cor__mk { left: 0; top: 50%; width: 100%; height: 0; transform: translateX(calc(var(--fl-p) * 100%)); }
  .vc-a-fl-cor__dot { left: -26px; top: -26px; width: 52px; height: 52px; }
  .vc-a-fl-cor__dot svg { width: 52px; height: 52px; }
  .vc-a-fl-cor__pill { right: auto; left: -40px; top: -66px; font-size: 13px; }
  .vc-a-fl-cor__range { left: 0; top: calc(50% - 32px); width: 100%; height: 64px; translate: 0 0; writing-mode: horizontal-tb; }
  @keyframes vc-a-fl-slide { from { translate: calc(var(--fl-p) * -100cqw) 0; opacity: 0.4; } }
  /* interlude */
  .vc-a-fl-int__night { display: flex; flex-direction: column; min-height: 0; }
  .vc-a-fl-int__in { display: contents; }
  .vc-a-fl-int__head { order: 1; padding: 64px 16px 0; position: relative; z-index: 2; }
  .vc-a-fl-int__head h2 { font-size: 34px; }
  .vc-a-fl-int__lede { font-size: 17px; }
  .vc-a-fl-int__fan { order: 2; position: relative; inset: auto; height: 52svh; margin: 18px 16px 0; }
  .vc-a-fl-int__labs { display: none; }
  .vc-a-fl-int__svg--wide, .vc-a-fl-int__gate, .vc-a-fl-int__div, .vc-a-fl-int__rise { display: none; }
  .vc-a-fl-int__svg--tall { display: block; }
  .vc-a-fl-int[data-lean='pooled'] .vc-a-fl-int__svg--tall .vc-a-fl-int__ticketed, .vc-a-fl-int[data-lean='ticketed'] .vc-a-fl-int__svg--tall .vc-a-fl-int__pooled { opacity: 0.3; }
  .vc-a-fl-int__ctl { order: 3; margin: 16px 16px 0; position: relative; z-index: 2; }
  .vc-a-fl-int__ctl :is(label, input) { display: none; }
  .vc-a-fl-int__outs { order: 4; grid-template-columns: 1fr; margin: 16px 16px 48px; position: relative; z-index: 2; }
  .vc-a-fl-int__claim { font-size: 24px; }
  /* ticket pin */
  .vc-a-fl-tk { --tw: calc(100vw - 24px); }
  .vc-a-fl-tk__printer { top: 10px; }
  .vc-a-fl-tk__printer span, .vc-a-fl-tk__spinein, .vc-a-fl-tk__station, .vc-a-fl-tk__bridge, .vc-a-fl-tk__inset { display: none; }
  .vc-a-fl-tk__clip { top: 26px; transform: none !important; }
  .vc-a-fl-tk__ticket { padding: 8px 12px; }
  .vc-a-fl-tk__th svg { width: 32px; height: 32px; }
  .vc-a-fl-tk__title { font-size: 14px; }
  .vc-a-fl-tk__row button { min-height: 48px; grid-template-columns: minmax(0, 1fr) auto 30px; gap: 6px; }
  .vc-a-fl-tk__val { font-size: 13px; }
  .vc-a-fl-tk__seal { width: 26px; height: 26px; }
  .vc-a-fl-tk__spine { right: 23px; top: 50px; }
  .vc-a-fl-tk__strip { top: auto; bottom: 4px; width: calc(100% - 24px); opacity: 1 !important; pointer-events: auto !important; }
  .vc-a-fl-tk__strip button span { visibility: hidden; font-size: 13px; line-height: 1.2; text-align: center; max-width: 78px; }
  .vc-a-fl-tk__stage:is([data-step='2'], [data-step='3']) .vc-a-fl-tk__strip button span { visibility: visible; }
  .vc-a-fl-tk .vc-a-fl-card { translate: none !important; }
  .vc-a-fl-tk__clip { translate: none !important; }
  @keyframes vc-a-fl-bead2 { from { transform: translateY(0); opacity: .2; } 15% { opacity: 1; } 80% { transform: translateY(calc((var(--row, 0) + 0.5) * 48px)); opacity: 1; } to { transform: translateY(calc((var(--row, 0) + 0.5) * 48px)); opacity: .2; } }
  /* closing re-composed vertically */
  .vc-a-fl-cl__top { grid-template-columns: 1fr; gap: 18px; }
  .vc-a-fl-cl__scene { height: auto; min-height: 0; padding-top: 18px; padding-bottom: calc(196px + 30cqw); --pb: 112px; }
  .vc-a-fl-cl__ticket { position: relative; width: auto; }
  .vc-a-fl-cl__fields { grid-template-columns: 1fr; }
  .vc-a-fl-cl__plat { left: 0; }
  .vc-a-fl-cl__mod { left: 8cqw; width: 26cqw; }
  .vc-a-fl-cl[data-stage='gate'] .vc-a-fl-cl__scene { --mx: 22; }
  .vc-a-fl-cl[data-stage='gin'] .vc-a-fl-cl__scene { --mx: 52; }
  .vc-a-fl-cl__seal { left: calc(8cqw + 13cqw - 17px); bottom: calc(var(--pb) + 8.71cqw + 6.6cqw - 17px); }
  .vc-a-fl-cl[data-stage='gin'] .vc-a-fl-cl__seal { transform: translate(calc(97cqw - 8cqw - 13cqw), calc(var(--pb) + 8.71cqw + 6.6cqw)); }
  .vc-a-fl-cl__gate { left: 60cqw; }
  .vc-a-fl-cl__post { height: 22cqw; }
  .vc-a-fl-cl__arm { bottom: calc(22cqw - 14px); width: 22cqw; }
  .vc-a-fl-cl__gl { bottom: calc(22cqw + 4px); }
  .vc-a-fl-cl__gin span, .vc-a-fl-cl__marks, .vc-a-fl-cl__lbl { display: none; }
  .vc-a-fl-cl__rail { left: 60cqw; }
  .vc-a-fl-cl__ctl { left: 0; width: 100%; grid-template-columns: 1fr; height: auto; gap: 6px; }
  .vc-a-fl-cl__stops button { flex: 1; }
}

@media (max-width: 640px) {
  body[data-page='value-chain-field'] .gft-splash__structure { inset: auto 0 64px 0; height: 44svh; }
  body[data-page='value-chain-field'] .gft-splash__structure::after { background: linear-gradient(180deg, #072d2b 0%, #072d2b00 26%); }
  body[data-page='value-chain-field'] .gft-splash__content { padding-bottom: calc(44svh + 16px); }
  body[data-page='value-chain-field'] .gft-splash__lede { font-size: 17px; }
  .vc-a-fl-sp__plant { transform: translate(calc(var(--px) * 1px), calc(var(--py) * 1px)); }
  .vc-a-fl-sp__chip, .vc-a-fl-sp__lbl, .vc-a-fl-sp__sky, .vc-a-fl-sp__note { display: none; }
  .vc-a-fl-series { display: grid; grid-template-columns: 1fr 1fr; }
  .vc-a-fl-con__grid, .vc-a-fl-net__in, .vc-a-fl-sit__in, .vc-a-fl-cl__in, .vc-a-fl-net__turn { width: calc(100% - 32px); }
}
