/* SevenTrain v3 figures. Owned by the Figures Engineer. Loaded by build.py after site.css, with figs.js.
   Self-contained: every rule is scoped to .fig and uses its own f- classes, with token fallbacks, so it works
   whatever site.css defines. No CSS transition on anything GSAP animates (transform, opacity, attr). */

.fig{position:relative;color:var(--neon,#E8C96A);
  --q1:#BFEDE4;--q2:#3FBAA6;--q3:#1D897B;--q4:#145F56;   /* R50: Mats's teal ramp (was violet) */
  --f-hair:rgba(255,255,255,.16);--f-hair2:rgba(255,255,255,.32);--f-t:#F2F2F3;--f-t2:#C4C5CA;--f-m:#8E9097;--f-ink:#000;
  --f-sans:var(--sans,'Inter',system-ui,-apple-system,sans-serif);--f-serif:var(--serif,'Instrument Serif',Georgia,serif);--f-mono:var(--mono,'JetBrains Mono',ui-monospace,Menlo,monospace);
  --sw:1.25;width:100%}
.fig .f-box{position:relative}
.fig svg{display:block;width:100%;height:auto;max-width:none;overflow:visible}
.fig svg text{font-family:var(--f-sans);font-size:14px;font-weight:400;letter-spacing:0;text-transform:none;fill:var(--f-t);stroke:none}
.fig svg [data-c=cyan]{--c:#3DD6F5}.fig svg [data-c=sapphire]{--c:#5B8CFF}.fig svg [data-c=quantum],.fig svg [data-c=violet]{--c:#3FBAA6}
.fig svg [data-c=orange]{--c:#FF7A45}.fig svg [data-c=gold]{--c:#E8C96A}.fig svg [data-c=emerald]{--c:#35D17E}.fig svg [data-c=lithium]{--c:#C5CEDB}
/* R44 Lithium material: silver lines (the section neon), flame only at the human sign-off node and the Act boundary */
[data-neon="lithium"] .fig,.fig[data-material="lithium"]{--human:#FF6B3D}
.fig svg .f-human{fill:var(--human,var(--neon));stroke:#000;stroke-width:2}
.fig svg .f-band.f-act{stroke:var(--human,var(--neon));fill:color-mix(in srgb,var(--human,var(--neon)) 7%,#000)}

/* strokes and fills */
.fig svg .f-hair{fill:none;stroke:var(--f-hair);stroke-width:1}
.fig svg .f-line{fill:none;stroke:var(--neon);stroke-width:var(--sw)}
.fig svg .f-line2{fill:none;stroke:var(--neon);stroke-width:var(--sw);stroke-opacity:.55}
.fig svg .f-fill{fill:var(--neon)}
.fig svg .f-ink{fill:var(--f-ink)}
.fig svg .f-ring{fill:none;stroke:var(--c,var(--neon));stroke-width:1.5}
.fig svg .f-ring.is-hot{stroke-width:3}
.fig svg .f-hit{fill:#000;fill-opacity:0;stroke:none;pointer-events:all;cursor:pointer}
.fig svg .f-dot{fill:var(--neon);stroke:#000;stroke-width:1}
.fig svg .f-dot.is-pilot{stroke-width:1.5}

/* text roles (sizes are viewBox units; phone viewBoxes are about 1:1 with pixels) */
.fig svg text.f-lab{font-weight:500;font-size:19px;fill:var(--f-t)}
.fig svg text.f-lab--s{font-size:14px}
.fig svg a.f-link{cursor:pointer}
.fig svg a.f-link text{font-weight:500;fill:var(--c,var(--f-t))}
.fig svg a.f-link:hover text,.fig svg a.f-link:focus-visible text{text-decoration:underline;text-underline-offset:4px}
.fig svg a.f-link:focus-visible{outline:2px solid var(--neon-live,var(--neon));outline-offset:4px}
.fig svg text.f-core,.fig svg a.f-corelink text{font-family:var(--f-serif);font-size:30px;font-weight:400;fill:#000;text-anchor:middle;text-decoration:none}
.fig svg text.f-serif{font-family:var(--f-serif);font-size:22px;fill:var(--f-t)}
.fig svg text.f-num{font-family:var(--f-serif);font-size:44px;fill:var(--f-t);text-anchor:middle}
.fig svg text.f-mono{font-family:var(--f-mono);font-size:12px;fill:var(--f-m)}
.fig svg text.f-mono--n{fill:var(--neon)}
.fig svg text.f-sub{font-size:15px;fill:var(--f-t2)}
.fig svg text.f-mid{text-anchor:middle}.fig svg text.f-end{text-anchor:end}
.fig svg text.f-ink-t{fill:#000}

/* bands and blocks (strata, stack) */
/* FIXES #8: the fill mixes the section's own neon (--neon-rgb was never defined, so the gold fallback leaked into emerald and cyan) */
.fig svg .f-band{fill:color-mix(in srgb,var(--neon) 10%,#000);stroke:var(--neon);stroke-width:1}
.fig svg .f-block{fill:color-mix(in srgb,var(--neon) 10%,#000);stroke:var(--neon);stroke-width:1}
.fig svg .f-box{fill:none;stroke:var(--neon);stroke-opacity:.55;stroke-width:1}
.fig svg .f-row{fill:none;stroke:var(--q3);stroke-width:1.25}
.fig svg .f-row-fill{fill:var(--q2);stroke:none}

/* quantum chart ramp (DESIGN-V3 section 1; teal since R50) */
.fig svg .f-q1{fill:var(--q1)}.fig svg .f-q2{fill:var(--q2)}.fig svg .f-q3{fill:var(--q3)}.fig svg .f-q4{fill:var(--q4)}
.fig svg .f-qh{fill:#000;stroke:var(--q3);stroke-width:1.5}
.fig svg .f-qs1{stroke:var(--q1)}.fig svg .f-qs2{stroke:var(--q2)}.fig svg .f-qs3{stroke:var(--q3)}
.fig svg .f-bar{stroke:none}
.fig svg .f-bar.f-qh{fill:#000;stroke:#8666DD;stroke-width:1.5}   /* FIXES #34: the 5% reserve is hollow, as in the legend */
/* the Carry's measuring rects (allocation): never painted; the filled copy of the reserve sat on top of the hollow bar */
.fig svg .f-carry{visibility:hidden;pointer-events:none}
.fig svg .f-bracket{fill:none;stroke:var(--q1);stroke-width:1.25}
.fig svg .f-tag{fill:#000;stroke:var(--q1);stroke-width:1.25}
.fig svg text.f-tag-t{font-family:var(--f-mono);font-size:13px;fill:var(--q1);text-anchor:middle}
.fig svg .f-lim{fill:rgba(29,137,123,.14);stroke:var(--q2);stroke-width:var(--sw);stroke-dasharray:4 6}
.fig svg .f-ringf{fill:none;stroke:rgba(255,255,255,.12);stroke-width:1}
.fig svg .f-blob{fill:rgba(29,137,123,.42);stroke:var(--q3);stroke-width:var(--sw)}
.fig svg .f-shaft{fill:none;stroke:var(--q1);stroke-width:var(--sw)}
.fig svg .f-head{fill:var(--q1);stroke:none}
.fig svg .f-node{fill:#000;stroke:var(--q2);stroke-width:1.5}
.fig svg .f-halo{fill:rgba(29,137,123,.28);stroke:none}
.fig svg .f-ico{fill:none;stroke:var(--q1);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.fig svg .f-mark{fill:#000;stroke:var(--q1);stroke-width:1.5}
.fig svg text.f-arrow{font-weight:500;font-size:17px;fill:var(--f-t2);text-anchor:middle}
.fig svg text.f-pcore{font-family:var(--f-serif);font-size:33px;fill:var(--f-t);text-anchor:middle}
.fig svg .f-badge{fill:#000;stroke:var(--q1);stroke-width:1.5}
.fig svg text.f-badge-t{font-family:var(--f-mono);font-size:30px;fill:var(--q1);text-anchor:middle}

/* look for: three circles, filled centre */
.fig svg .f-circ{fill:none;stroke:var(--q2);stroke-width:1.5}
.fig svg .f-common{fill:var(--q2);stroke:none}

/* stateful clicks on figure parts */
.fig svg .f-pick{cursor:pointer}

/* tips on the possibility figure: hover, focus and tap (WCAG 1.4.13) */
.fig .f-tip{position:absolute;width:0;height:0}
.fig .f-tip__b{position:absolute;left:0;top:0;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:transparent;border:0;padding:0;cursor:pointer;z-index:2}
.fig .f-tip__b:focus-visible{outline:2px solid var(--neon-live,var(--neon));outline-offset:0}
.fig .f-tip__c{position:absolute;left:0;z-index:3;transform:none;white-space:nowrap;translate:-50% 0;padding:8px 12px;background:#000;border:1px solid var(--q2);border-radius:2px;color:var(--f-t);font:500 14px/1.3 var(--f-sans)}
.fig .f-tip__c[hidden]{display:none}
.fig .f-tip--up .f-tip__c{bottom:30px}
.fig .f-tip--down .f-tip__c{top:30px}
.fig .f-tip__c span{display:block;font-weight:400;color:var(--f-t2)}
.fig .f-tip__c:not([hidden]){animation:f-rise .18s both}
@keyframes f-rise{from{opacity:0;translate:-50% 12px}to{opacity:1;translate:-50% 0}}
.fig .f-tip--down .f-tip__c:not([hidden]){animation-name:f-rise-d}
@keyframes f-rise-d{from{opacity:0;translate:-50% -12px}to{opacity:1;translate:-50% 0}}
@media (prefers-reduced-motion:reduce){.fig .f-tip__c:not([hidden]){animation:none}}

/* phone legend for the possibility figure */
.fig .f-legend{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px}
.fig .f-legend li{display:flex;gap:12px;align-items:baseline;font:500 15px/1.35 var(--f-sans);color:var(--f-t2)}
.fig .f-legend b{flex:none;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--q1);color:var(--q1);display:grid;place-items:center;font:400 12px var(--f-mono)}

/* rules: names are page markup and never move; the figure draws hairlines up from them */
.fig[data-fig=rules]{--rules-up:64px}
.fig .rules__names{list-style:none;margin:0;padding:var(--rules-up) 0 0;display:grid;grid-template-columns:repeat(6,1fr);gap:0 16px;position:relative}
.fig .rules__names li{font-family:var(--f-serif);font-size:clamp(1.5rem,1rem + 1.6vw,2.5rem);line-height:1.1;color:var(--f-t);text-align:center;padding:6px 0 0}
.fig .f-rules__svg{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;overflow:visible}
@media (max-width:640px){
  .fig[data-fig=rules]{--rules-up:26px}
  .fig .rules__names{grid-template-columns:repeat(2,1fr);row-gap:calc(var(--rules-up) + 14px)}
  .fig .rules__names li{text-align:center;font-size:1.5rem}
}

/* stage: a figure with its stepper laid over it, so the stepper's titles are the figure's labels.
   <div class="fig-stage"><div class="fig" data-fig="stack" id="stk"></div><ol class="stepper stepper--over" data-stepper data-fig-target="stk">...</ol></div>
   figs.js places each <li> over its band or under its node (position, size) and writes data-pillar on a filled one. */
.fig-stage{position:relative}
.stepper--over{position:absolute;inset:0;display:block;margin:0;padding:0;list-style:none;border:0;pointer-events:none}
.stepper--over>li{position:absolute;margin:0;padding:0}
.stepper--over button{pointer-events:auto;display:flex;align-items:center;width:100%;height:100%;padding:0 20px;background:transparent;border:0;border-radius:0;
  min-height:0;transition:none;color:var(--f-t,#F2F2F3);font:500 clamp(.9375rem,.85rem + .35vw,1.1875rem)/1.2 var(--sans,'Inter',system-ui,sans-serif);text-align:left;cursor:pointer;letter-spacing:0;text-transform:none}
.stepper--over button::before{content:none}
.stepper--over button:focus-visible{outline:2px solid var(--neon-live,var(--neon,#E8C96A));outline-offset:-2px}
.stepper--over>li[data-pillar] button{color:#000}
.stepper--over[data-align=center] button{justify-content:center;text-align:center;padding:0 6px;align-items:flex-start}
.stepper--over[data-align=rail] button{padding:0 0 0 12px}
.stepper--over>li[data-rail] button{writing-mode:vertical-rl;transform:rotate(180deg);justify-content:center;padding:0;font-family:var(--serif,'Instrument Serif',Georgia,serif);font-weight:400;font-size:1.25rem}
.stepper--over button[aria-current=step]{color:var(--neon,#E8C96A)}
.stepper--over>li[data-pillar] button[aria-current=step]{color:#000;text-decoration:underline;text-underline-offset:5px}

/* canvas figure (waves) */
.fig canvas{display:block;width:100%;height:100%}
.fig[data-fig=waves]{min-height:240px;height:100%}

/* never a CSS transition on what GSAP drives */
.fig svg *{transition:none}

/* reserve each figure's box before it is built (no layout shift): viewBox ratios of the two layouts */
.fig[data-fig=venn]{aspect-ratio:1000/560}
.fig[data-fig=strata]{aspect-ratio:1100/406}.fig[data-fig=strata][data-mode=hero]{aspect-ratio:800/400}
.fig[data-fig=exits]{aspect-ratio:640/398}.fig[data-fig=allocation]{aspect-ratio:1000/262}
.fig[data-fig=possibility]{aspect-ratio:1/1}.fig[data-fig=lookfor]{aspect-ratio:760/562}
.fig[data-fig=stack]{aspect-ratio:760/322}.fig[data-fig=rotation]{aspect-ratio:960/104}.fig[data-fig=match]{aspect-ratio:960/82}.fig[data-fig=runs]{aspect-ratio:560/78}
.fig[data-fig=diamond]{aspect-ratio:480/440}.fig[data-fig=kshape]{aspect-ratio:640/400}
.fig[data-fig=e2a],.fig[data-fig=e2b],.fig[data-fig=e2c]{aspect-ratio:160/100}
@media (max-width:640px){
  .fig[data-fig=venn]{aspect-ratio:360/470}
  .fig[data-fig=strata]{aspect-ratio:360/278}.fig[data-fig=strata][data-mode=hero]{aspect-ratio:360/266}
  .fig[data-fig=exits]{aspect-ratio:360/326}.fig[data-fig=allocation]{aspect-ratio:360/224}
  .fig[data-fig=lookfor]{aspect-ratio:360/336}.fig[data-fig=stack]{aspect-ratio:360/274}
  .fig[data-fig=rotation]{aspect-ratio:360/390}.fig[data-fig=match]{aspect-ratio:360/232}.fig[data-fig=runs]{aspect-ratio:360/82}
}

/* ================================================================== quantum-only figures (Quantum builder, R30, 2 Nov 21:40 deck)
   curve, entry, worldmap, timeline, criteria. Their text is page markup; these rules place it. Ramp only, flat, no glow. */
/* curve: the cover's dotted exponential and "We are here." under the dot */
.fig[data-fig=curve]{aspect-ratio:600/470;margin:0}
.fig svg .f-curve{fill:none;stroke:var(--q1);stroke-width:3;stroke-linecap:round;stroke-dasharray:0 11}
.fig svg .f-curve-case{fill:none;stroke:#000;stroke-width:9;stroke-linecap:round;stroke-dasharray:0 11}
.fig svg .f-here{fill:var(--q2);stroke:#000;stroke-width:3}
.fig[data-fig=curve] .f-here-t{position:absolute;left:6%;top:91.5%;margin:0;max-width:none;font:400 15px/1.3 var(--f-sans);color:var(--f-t)}
/* entry: exit value by year, the entry window and Today (bars sized by figs.js, true to scale) */
.fig[data-fig=entry]{--plot:300px;position:relative}
.fig[data-fig=entry] .ew__plot{position:relative}
.fig[data-fig=entry] .ew__bars{position:relative;z-index:1;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));margin:0;padding:0;list-style:none}
.fig[data-fig=entry] .ew__bars > li{display:flex;flex-direction:column;align-items:center;min-width:0}
.fig[data-fig=entry] .ew__col{position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;width:100%;height:var(--plot);border-bottom:1px solid var(--f-hair2)}
.fig[data-fig=entry] .ew__col > i{display:block;width:min(60%,56px);height:0;background:var(--q4);border-radius:1px 1px 0 0}
.fig[data-fig=entry] .is-now .ew__col > i{background:var(--q2)}
.fig[data-fig=entry] .ew__v{margin-bottom:8px;font:400 13px/1.2 var(--f-mono);color:var(--f-t2);white-space:nowrap}
.fig[data-fig=entry] .is-now .ew__v{font:400 clamp(1.75rem,1.2rem + 1.4vw,2.5rem)/1 var(--f-serif);color:#fff}
.fig[data-fig=entry] .ew__bars b{margin-top:10px;font:400 13px/1.2 var(--f-mono);color:var(--f-t)}
.fig[data-fig=entry] .is-later b{color:var(--f-m)}
.fig[data-fig=entry] .ew__bars small{margin-top:4px;font:400 12px/1.3 var(--f-mono);color:var(--f-t2);white-space:nowrap}
.fig[data-fig=entry] .ew__win{position:absolute;z-index:0;left:62.5%;right:0;top:0;height:var(--plot);margin:0;background:#071613;border-top:1px solid var(--q3)}
.fig[data-fig=entry] .ew__win p{position:absolute;left:33.4%;top:0;margin:0;padding:12px 14px;font:400 12px/1.5 var(--f-mono);color:var(--q1)}
.fig[data-fig=entry] .ew__win span{display:block}
.fig[data-fig=entry] .ew__today{position:absolute;left:calc(50% + min(30%,28px) + 6px);top:26%;bottom:0;display:flex;align-items:flex-end;padding:0 0 6px 8px;font:400 12px/1 var(--f-mono);color:var(--q1)}
.fig[data-fig=entry] .ew__today > i{position:absolute;left:0;top:0;bottom:0;border-left:1.5px dotted var(--q1)}
/* the two stats beside their labels (never a big number over a small label) */
.fig .ew__stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px clamp(24px,3vw,40px);margin:0 0 clamp(36px,4vw,56px);padding:0;list-style:none}
.fig .ew__stats li{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;align-items:baseline}
.fig .ew__stats b{font:400 clamp(1.75rem,1.3rem + 1vw,2.25rem)/1 var(--f-serif);color:#fff}
.fig .ew__stats span{font-size:.9375rem;line-height:1.5;color:var(--f-t2)}
/* worldmap: four tiers, q1 (most) to q4 (least); legend swatches use the same tokens */
.fig[data-fig=worldmap]{margin:0}
.fig[data-fig=worldmap] .wm{width:100%;height:auto}
.fig[data-fig=worldmap] .wm-land{fill:#1c1c21}
.fig[data-fig=worldmap] .wm-t path{stroke:#000;stroke-width:.6;stroke-linejoin:round}
.fig[data-fig=worldmap] .wm-t1 path{fill:var(--q1)}.fig[data-fig=worldmap] .wm-t2 path{fill:var(--q2)}
.fig[data-fig=worldmap] .wm-t3 path{fill:var(--q3)}.fig[data-fig=worldmap] .wm-t4 path{fill:var(--q4)}
.fig[data-fig=worldmap] .wm-head{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;align-items:baseline;margin:0 0 20px}
.fig[data-fig=worldmap] .wm-head b{font:400 clamp(1.75rem,1.3rem + 1vw,2.25rem)/1 var(--f-serif);color:#fff}
.fig[data-fig=worldmap] .wm-head span{font-size:.9375rem;line-height:1.45;color:var(--f-t2)}
.fig[data-fig=worldmap] .wm-key{display:flex;flex-wrap:wrap;gap:8px 20px;margin:16px 0 0;padding:0;list-style:none;font:400 12px/1.4 var(--f-mono);color:var(--f-t2)}
.fig[data-fig=worldmap] .wm-key li{display:inline-flex;align-items:center;gap:8px}
.fig[data-fig=worldmap] .wm-key i{display:block;width:12px;height:12px;border-radius:1px}
.fig[data-fig=worldmap] .wm-key .k1{background:var(--q1)}.fig[data-fig=worldmap] .wm-key .k2{background:var(--q2)}
.fig[data-fig=worldmap] .wm-key .k3{background:var(--q3)}.fig[data-fig=worldmap] .wm-key .k4{background:var(--q4)}
/* timeline: five events, one hairline through the nodes (row on desktop, column under 900 px) */
.fig[data-fig=timeline]{position:relative}
.fig .f-tl__svg{position:absolute;left:0;top:0;z-index:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.fig[data-fig=timeline] .tl__list{position:relative;z-index:1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px clamp(16px,2vw,28px);margin:0;padding:0;list-style:none}
.fig[data-fig=timeline] .tl__list > li{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}
.fig[data-fig=timeline] .tl__i{display:grid;place-items:center;width:44px;height:44px;margin-bottom:12px;border:1.5px solid var(--q2);border-radius:50%;background:#000;color:var(--q1)}
.fig[data-fig=timeline] .tl__i svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.fig[data-fig=timeline] .tl__d{font:400 12px/1.4 var(--f-mono);color:var(--f-t2)}
.fig[data-fig=timeline] .tl__f{font:400 clamp(1.625rem,1.3rem + .8vw,2.125rem)/1.05 var(--f-serif);color:#fff}
.fig[data-fig=timeline] .tl__c{font-size:.9375rem;line-height:1.45;color:var(--f-t2)}
/* criteria: three circles; the labels sit in the circles, in the figure's own 600 x 560 box */
.fig[data-fig=criteria]{aspect-ratio:600/540;container-type:inline-size}
.fig svg .f-circ{fill:none;stroke:var(--q2);stroke-width:1.5}
.fig[data-fig=criteria] .cr__l{position:absolute;z-index:1;margin:0;max-width:none;translate:-50% 0;text-align:center;white-space:nowrap;pointer-events:none}
.fig[data-fig=criteria] .cr__l b{display:block;font:400 clamp(1.125rem,4.6cqw,1.75rem)/1.1 var(--f-serif);color:#fff}
.fig[data-fig=criteria] .cr__l span{display:block;max-width:37cqw;margin:4px auto 0;white-space:normal;font:400 clamp(.75rem,2.5cqw,.9375rem)/1.3 var(--f-sans);color:var(--f-t2)}
.fig[data-fig=criteria] .cr__l--a{left:50%;top:11%}
.fig[data-fig=criteria] .cr__l--b{left:22.8%;top:70%}
.fig[data-fig=criteria] .cr__l--c{left:77.2%;top:70%}
@media (max-width:900px){
  .fig[data-fig=timeline] .tl__list{grid-template-columns:minmax(0,1fr);gap:22px}
  .fig[data-fig=timeline] .tl__list > li{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:16px;row-gap:2px;align-items:center}
  .fig[data-fig=timeline] .tl__i{grid-row:1 / span 3;align-self:start;margin:0}
}
@media (max-width:640px){
  .fig[data-fig=entry]{--plot:220px}
  .fig[data-fig=entry] .ew__v,.fig[data-fig=entry] .ew__bars b{font-size:11px}
  .fig[data-fig=entry] .ew__bars small{font-size:11px}
  .fig[data-fig=entry] .is-now .ew__v{font-size:1.5rem}
  .fig[data-fig=entry] .ew__win p{left:0;top:auto;bottom:100%;padding:0 0 6px;text-align:left}
  .fig .ew__stats{grid-template-columns:minmax(0,1fr);margin-bottom:72px}
}

/* ================================================================== dos-flow (R51): the /products Decision OS card, shared
   Lithium material: 1 px silver hairlines on #07090D, Geist labels, flame #FF6B3D only at the human sign-off node, the
   release and the Act boundary (R44). Same colours as products.css; class names df-* so the two never collide. */
@font-face{font-family:'Geist';font-style:normal;font-weight:100 900;font-display:swap;src:url('../fonts/geist-latin-wght-normal.woff2') format('woff2')}
.fig[data-fig=dos-flow]{--df-ink:#EEF1F5;--df-muted:#A7B0BD;max-width:760px;background:#07090D;border:1px solid #232529;border-radius:6px;color:#C5CEDB}
.fig[data-fig=dos-flow]:not([data-built]){aspect-ratio:664/514}
@media (max-width:520px){.fig[data-fig=dos-flow]:not([data-built]){aspect-ratio:352/432}}
.fig[data-fig=dos-flow] .f-box{position:relative}
.fig svg.df path{stroke-linecap:butt}
.fig svg .df-bound{fill:#181010;stroke:#FF6B3D;stroke-width:1}
.fig svg .df-line,.fig svg .df-route{fill:none;stroke:#31343A;stroke-width:1}
.fig svg .df-rail{fill:none;stroke:#5C626A;stroke-width:1}
.fig svg .df-block{fill:#07090D;stroke:#5F6165;stroke-width:1}
.fig svg .df-path{fill:none;stroke:none}
.fig svg .df-ov{fill:none;stroke:#C5CEDB;stroke-width:1;opacity:0}
.fig svg .df-ov.df-ov--flame{stroke:#FF6B3D;stroke-width:1.4}
.fig svg .df-ov.df-ov--dim{stroke:#A7B0BD}
.fig svg .df-ring{fill:#07090D;stroke:#8F3F27;stroke-width:1;vector-effect:non-scaling-stroke}
.fig svg .df-disc{fill:#FF6B3D}
.fig svg .df-glyph{fill:#1A0B05}
.fig svg .df-pulse{fill:none;stroke:#FF6B3D;stroke-width:1;vector-effect:non-scaling-stroke;opacity:0}
.fig svg .df-dot{fill:#C5CEDB;stroke:none}
.fig svg .df-dot--flame{fill:#FF6B3D}
.fig svg .df-dot--gov{fill:#A7B0BD}
.fig .df-labs{position:absolute;pointer-events:none}
.fig .df-lab{position:absolute;font-family:'Geist',var(--f-sans);font-size:inherit;font-weight:600;line-height:1.2;letter-spacing:-.005em;color:var(--df-ink);white-space:nowrap;transform:translateY(calc(-100% - 6px))}
.fig .df-lab--sys{font-weight:500;font-size:14px;color:var(--df-ink);transform:translate(-50%,-50%)}
.fig .df-lab--act{transform:translateY(-50%)}
.fig .df-lab--human{color:#FF8257;transform:none}
.fig .df-lab--govern{color:var(--df-muted);transform:translate(-50%,-50%) rotate(-90deg)}
/* the five strata as the stepper's buttons (contract: <ol class="stepper stepper--over" data-fig-target>), placed by figs.js */
.stepper--over[data-align=dos] button{align-items:flex-end;padding:0 0 4px;font:600 15px/1.2 'Geist',var(--sans,'Inter'),system-ui,sans-serif;letter-spacing:-.005em;color:#EEF1F5;white-space:nowrap}
.stepper--over[data-align=dos] button:focus-visible{outline:1px solid #C5CEDB;outline-offset:3px;border-radius:2px}
.stepper--over[data-align=dos] button[aria-current=step]{text-decoration:underline;text-decoration-color:#C5CEDB;text-decoration-thickness:1px;text-underline-offset:5px}
.stepper--over[data-align=dos]>li:nth-child(4) button{align-items:center;padding:0}   /* Act: centred in its band */
.stepper--over[data-align=dos]>li[data-rail] button{writing-mode:vertical-rl;transform:rotate(180deg);align-items:center;justify-content:center;padding:0;font:600 15px/1 'Geist',var(--sans,'Inter'),system-ui,sans-serif;color:#A7B0BD}
@media (max-width:520px){.stepper--over[data-align=dos] button{font-size:14px}}