/* HUMANATE, ONE SYSTEM (2026-10-11). Shared by Venture Studio (venture/) and the Commercial Exchange (exchange/).
   Built from the user's briefs: one decision per screen, premium silence, motion as meaning, state-driven components,
   no template shapes. A page is a sequence of screens; each screen is one question and one system you act on.
   Typefaces are the house pair: StackSans Notch for titles, Helvetica Neue for everything else. */
@font-face{font-family:"Stack";src:url("../journey/fonts/StackSansNotch-Extralight.woff2") format("woff2");font-weight:100 250;font-display:swap}
@font-face{font-family:"Stack";src:url("../journey/fonts/StackSansNotch-Light.woff2") format("woff2");font-weight:251 400;font-display:swap}
@font-face{font-family:"HN";src:url("../journey/fonts/HelveticaNeue-Light.otf") format("opentype");font-weight:300;font-display:swap}
@font-face{font-family:"HN";src:url("../journey/fonts/HelveticaNeue-Roman.otf") format("opentype");font-weight:400;font-display:swap}
@font-face{font-family:"HN";src:url("../journey/fonts/HelveticaNeue-Medium.otf") format("opentype");font-weight:500;font-display:swap}

:root{
  --ink:#03040a; --paper:#eef0f6; --mute:rgba(238,240,246,.62); --faint:rgba(238,240,246,.36); --hair:rgba(255,255,255,.13);
  --title:"Stack","HN","Helvetica Neue",Helvetica,Arial,sans-serif; --sub:"HN","Helvetica Neue",Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  /* motion tokens: named for what the motion means */
  --motion-illumination:.4s var(--ease);   /* something becomes available or attended to */
  --motion-selection:.45s var(--ease);     /* a choice is made and holds */
  --motion-progress:.7s var(--ease);       /* the route advances */
  --gut:clamp(20px,6vw,96px); --top:112px; --foot:104px; --lead:var(--gut);
}
@media (max-width:760px){ :root{--motion-illumination:.2s var(--ease);--motion-selection:.22s var(--ease);--motion-progress:.35s var(--ease);--top:100px;--foot:150px} }
html[data-path="venture"]{--a:72,128,255;--b:169,201,255;--c:#A9C9FF;--hi:#DCE8FF;--deep:12,28,110;--ground:3,4,10}
html[data-path="exchange"]{--a:230,205,156;--b:246,236,214;--c:#EAD6AE;--hi:#F6ECD6;--deep:84,66,30;--ground:8,7,5}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;overscroll-behavior:none;-webkit-tap-highlight-color:transparent}
body{background:rgb(var(--ground));color:var(--paper);font-family:var(--sub);font-weight:300;font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
:focus-visible{outline:1px solid var(--hi);outline-offset:3px}

/* the room: black through the middle, the pathway colour entering from two corners; the live system drawn over it */
.room{position:fixed;inset:0;z-index:0;background:
  linear-gradient(118deg,rgba(var(--deep),.62) 0%,rgba(var(--deep),.26) 16%,transparent 40%,transparent 74%,rgba(var(--deep),.34) 100%),
  radial-gradient(70vmax 46vmax at 8% 108%,rgba(var(--deep),.5),transparent 70%),rgb(var(--ground))}
/* the room light: one soft light placed behind each screen's system (one.js moves it). No object, no rays. */
.room .light{position:absolute;left:0;top:0;width:100vmax;height:100vmax;margin:-50vmax 0 0 -50vmax;pointer-events:none;will-change:transform;transition:transform 1.4s var(--ease),opacity 1.4s var(--ease)}
.room .light i{position:absolute;inset:0;border-radius:50%;background:radial-gradient(closest-side,rgba(var(--a),.2),rgba(var(--deep),.34) 36%,rgba(var(--deep),.1) 62%,transparent 72%)}
html.gs .room .light{transition:none}
/* a fine measuring field under the system side of the screen (Venture Studio only) */
.room .grid{display:none;position:absolute;inset:0;background-image:radial-gradient(circle,rgba(var(--b),.3) .6px,transparent 1.3px);background-size:30px 30px;
  -webkit-mask-image:radial-gradient(60% 62% at 72% 50%,#000,transparent 78%);mask-image:radial-gradient(60% 62% at 72% 50%,#000,transparent 78%);opacity:.42}
/* (user, 2026-10-11: "remove the dots". The field stays off; step photographs take its place on the path screens.) */
/* the advance: a hairline of light crosses the top of the room when the route moves on (motion.js) */
.room .sweep{position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(var(--b),.9) 50%,transparent);opacity:0}
.room .photo{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.2s var(--ease);filter:grayscale(1) contrast(1.05) brightness(.5)}
.room .photo.on{opacity:.2}
.room .photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgb(var(--ground)) 0%,rgba(var(--ground),.72) 46%,rgba(var(--ground),.3) 100%),linear-gradient(0deg,rgb(var(--ground)),transparent 46%)}

/* the route line: where you are, what is done, what is next */
.route{position:fixed;left:var(--gut);top:74px;z-index:5;display:flex;align-items:center;gap:12px;font-size:12px;letter-spacing:.02em;color:var(--mute)}
.route ol{display:flex;align-items:center;list-style:none}
.route li{display:flex;align-items:center}
.route li button{width:26px;height:26px;display:grid;place-items:center}
.route li i{display:block;width:7px;height:7px;rotate:45deg;box-shadow:inset 0 0 0 1px rgba(var(--b),.5);transition:background var(--motion-selection),box-shadow var(--motion-selection),scale var(--motion-selection)}
.route li+li::before{content:"";width:clamp(10px,2.2vw,34px);height:1px;background:rgba(var(--b),.2);transition:background var(--motion-progress)}
.route li.done i{background:var(--hi);box-shadow:none}
.route li.done+li::before{background:var(--hi)}
.route li.cur i{background:rgb(var(--a));box-shadow:0 0 0 1.5px #fff,0 0 0 6px rgba(var(--a),.2);scale:1.2}
.route li.lock button{cursor:default}
.route li button span{display:none}
.route .lab{display:flex;align-items:baseline;gap:10px}
.route .lab em{font-style:normal;font-size:10.5px;font-weight:500;letter-spacing:.16em;color:var(--c)}
.route b{font-weight:400;color:var(--paper)}
@media (max-width:760px){ .route{top:62px} .route .lab{display:none} }

/* the rail (wide screens): every step of your route, named, down the left edge. The same wayfinder as Creative Studio:
   a dot per section, a lit bar on the one you are in. It appears once a pathway is chosen, and the screen makes room for it. */
@media (min-width:1100px){
  html.railed:not(.at0){--lead:clamp(228px,17.5vw,270px)}
  .route.rail{left:clamp(16px,2vw,30px);top:50%;translate:0 -50%;display:block;transition:opacity var(--motion-progress),visibility 0s,translate var(--motion-progress)}
  html.at0 .route.rail{opacity:0;visibility:hidden;translate:-12px -50%;transition:opacity var(--motion-illumination),visibility 0s linear .4s,translate var(--motion-illumination)}
  .route.rail .lab{display:none}
  .route.rail ol{flex-direction:column;align-items:flex-start;gap:2px}
  .route.rail li+li::before{display:none}
  .route.rail li button{width:auto;height:30px;display:flex;align-items:center;gap:12px;padding:0 12px 0 4px;font-size:12.5px;letter-spacing:.01em}
  .route.rail li button span{display:block;white-space:nowrap;color:var(--mute);transition:color var(--motion-illumination),opacity var(--motion-illumination),translate var(--motion-selection)}
  .route.rail li i{flex:none;width:6px;height:6px;rotate:none;scale:1;border-radius:50%;background:rgba(255,255,255,.34);box-shadow:none;transition:width var(--motion-selection),background var(--motion-illumination),box-shadow var(--motion-illumination)}
  .route.rail li.done i{background:var(--hi)}
  .route.rail li.cur i{width:22px;scale:1;border-radius:3px;background:linear-gradient(90deg,rgb(var(--a)),var(--hi));box-shadow:0 0 14px rgba(var(--a),.75)}
  .route.rail li.cur button span{color:#fff}
  .route.rail li.lock button span{opacity:.42}
  .route.rail li:not(.lock):not(.cur) button:hover span,.route.rail li button:focus-visible span{color:var(--paper);translate:3px 0}
  .route.rail li:not(.lock):not(.cur) button:hover i{background:#fff}
}

/* a screen: one question, one system */
.stage{position:fixed;inset:var(--top) 0 var(--foot);z-index:2}
.screen{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,72px);align-items:center;padding:0 var(--gut) 0 var(--lead);
  opacity:0;visibility:hidden;translate:0 14px;transition:opacity var(--motion-progress),translate var(--motion-progress),visibility 0s linear .7s}
.screen.on{opacity:1;visibility:visible;translate:0 0;transition:opacity var(--motion-progress) .12s,translate var(--motion-progress) .12s,visibility 0s}
.screen.wide{grid-template-columns:minmax(0,1fr);align-content:center}
.q{max-width:30rem}
.q .k{display:block;margin-bottom:18px;font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--c)}
.q h1,.q h2{font-family:var(--title);font-weight:200;letter-spacing:-.02em;line-height:1.05;font-size:clamp(28px,min(3.2vw,5.6svh),48px);text-wrap:balance}
.q h1{font-size:clamp(34px,min(4.15vw,7.4svh),62px);line-height:1.03}
.q h1 em,.q h2 em{font-style:normal;background:linear-gradient(90deg,var(--c),var(--hi) 45%,#fff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.q p{margin-top:16px;max-width:38ch;font-size:16px;color:var(--mute)}
.q .say{min-height:3em;margin-top:22px;font-size:15px;color:var(--paper);transition:opacity var(--motion-illumination)}
.q .say b{font-weight:500;color:var(--c)}
.sys{position:relative;min-height:0;height:100%;display:grid;place-items:center}
@media (max-width:900px){
  .screen{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);align-items:start;gap:18px;overflow-y:auto;overscroll-behavior:contain;padding-bottom:12px}
  .q h1{font-size:clamp(30px,8.4vw,40px)} .q h2{font-size:clamp(26px,7.2vw,34px)} .q p{font-size:15px}
  .sys{height:auto;min-height:220px;place-items:start stretch}
}

/* the frame: the one surface in the system. Square, a hairline, four corner marks. It lights from its edge, never from a fill. */
.fr{--vf:rgba(var(--b),.9);position:relative;border-radius:2px;background-color:rgba(var(--ground),.78);box-shadow:inset 0 0 0 .5px rgba(var(--b),.18);
  background-image:linear-gradient(var(--vf),var(--vf)),linear-gradient(var(--vf),var(--vf)),linear-gradient(var(--vf),var(--vf)),linear-gradient(var(--vf),var(--vf)),linear-gradient(var(--vf),var(--vf)),linear-gradient(var(--vf),var(--vf)),linear-gradient(var(--vf),var(--vf)),linear-gradient(var(--vf),var(--vf));
  background-repeat:no-repeat;background-size:10px 1px,1px 10px,10px 1px,1px 10px,10px 1px,1px 10px,10px 1px,1px 10px;
  background-position:0 0,0 0,100% 0,100% 0,0 100%,0 100%,100% 100%,100% 100%;
  transition:background-color var(--motion-illumination),box-shadow var(--motion-illumination),opacity var(--motion-illumination),scale var(--motion-selection)}
button.fr:hover,button.fr:focus-visible{background-color:rgba(var(--a),.09);box-shadow:inset 0 0 0 .5px rgba(var(--b),.6),0 0 40px -16px rgba(var(--a),.7)}
button.fr:active{scale:.985}
.fr.sel,button.fr[aria-pressed="true"]{background-color:rgba(var(--a),.15);box-shadow:inset 0 0 0 .5px rgba(var(--b),.85),0 0 40px -16px rgba(var(--a),.8)}
.fr.lock{opacity:.4}

/* the action bar: one primary action, one way back */
.bar{position:fixed;left:var(--lead);right:var(--gut);bottom:calc(26px + env(safe-area-inset-bottom,0px));z-index:6;display:flex;align-items:center;justify-content:space-between;gap:12px;pointer-events:none}
.bar>*{pointer-events:auto}
.go{display:inline-flex;align-items:center;gap:12px;min-height:50px;padding:0 22px;border-radius:2px;font-size:15px;font-weight:400;color:#06070c;background:linear-gradient(180deg,#fff,var(--hi));
  box-shadow:0 14px 40px -16px rgba(var(--a),.9);transition:opacity var(--motion-illumination),scale var(--motion-selection),box-shadow var(--motion-illumination)}
.go svg,.back svg{width:16px;height:16px;transition:translate var(--motion-illumination)}
.go:hover svg{translate:4px 0} .go:active{scale:.985}
.go[disabled]{opacity:.28;cursor:default;box-shadow:none}
.go.pulse{animation:goPulse 2.4s var(--ease) 2}   /* it says "ready" twice, then rests */
@keyframes goPulse{50%{box-shadow:0 14px 40px -16px rgba(var(--a),.9),0 0 0 8px rgba(var(--a),.14)}}
.back{display:inline-flex;align-items:center;gap:10px;min-height:50px;padding:0 6px;font-size:14px;color:var(--mute);transition:color var(--motion-illumination),opacity var(--motion-illumination)}
.back:hover{color:var(--paper)} .back:hover svg{translate:-4px 0}
.back[hidden]{display:inline-flex;visibility:hidden}
@media (max-width:760px){ .bar{bottom:calc(14px + env(safe-area-inset-bottom,0px))} .go{flex:1;justify-content:center;min-height:54px} .back span{display:none} .back{min-width:44px;justify-content:center} }

/* the brief: what you have told us so far, carried forward (the reward for each answer) */
.brief{position:fixed;left:var(--lead);bottom:calc(92px + env(safe-area-inset-bottom,0px));z-index:5;display:flex;flex-wrap:wrap;gap:6px;max-width:min(560px,60vw);pointer-events:none}
.brief span{padding:5px 10px;border-radius:2px;font-size:12px;color:var(--hi);box-shadow:inset 0 0 0 .5px rgba(var(--b),.3);background:rgba(var(--ground),.6);animation:briefIn var(--motion-selection) both}
@keyframes briefIn{from{opacity:0;translate:0 8px}}
@media (max-width:760px){ .brief{bottom:calc(78px + env(safe-area-inset-bottom,0px));max-width:calc(100vw - 2*var(--gut) - 60px)} .brief span{font-size:11px;padding:4px 8px} }

/* Ask Humo: the floating node. One orb, one line, answers drawn from the page's own facts. */
.humo{position:fixed;right:var(--gut);bottom:calc(26px + env(safe-area-inset-bottom,0px));z-index:7;display:none}
.humo-b{display:flex;align-items:center;gap:12px;height:50px;padding:0 6px 0 18px;border-radius:999px;font-size:14.5px;background:linear-gradient(150deg,rgba(255,255,255,.14),rgba(255,255,255,.04) 50%,rgba(255,255,255,.08));box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 0 0 1px rgba(255,255,255,.13)}
.humo-b i{width:38px;height:38px;border-radius:50%;background:linear-gradient(90deg,rgb(var(--a)),rgb(var(--b)) 60%,#fff);box-shadow:0 0 0 1px rgba(255,255,255,.2),0 6px 18px -6px rgba(var(--a),.75)}
.humo-p{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));z-index:8;width:min(680px,100% - 32px);translate:-50% 0;padding:14px 16px 16px;border-radius:20px;
  background:linear-gradient(150deg,rgba(30,32,38,.9),rgba(14,14,18,.95));-webkit-backdrop-filter:blur(34px) saturate(1.8);backdrop-filter:blur(34px) saturate(1.8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(255,255,255,.1),0 40px 90px -30px #000;
  clip-path:inset(100% 40% 0 40% round 20px);opacity:0;visibility:hidden;transition:clip-path .75s var(--ease),opacity .3s,visibility 0s linear .75s}
.humo-p.on{clip-path:inset(0 0 0 0 round 20px);opacity:1;visibility:visible;transition:clip-path .75s var(--ease),opacity .3s,visibility 0s}
.humo-p header{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--mute)} .humo-p header b{font-weight:500;color:var(--paper)} .humo-p header button{margin-left:auto;width:32px;height:32px;display:grid;place-items:center}
.humo-p .a{margin:10px 2px 14px;font-size:15px;min-height:3em}
.humo-p .a a{color:var(--c)}
.humo-p .c{display:flex;flex-wrap:wrap;gap:6px}
.humo-p .c button{padding:7px 13px;border-radius:2px;font-size:12.5px;box-shadow:inset 0 0 0 .5px rgba(255,255,255,.22);transition:background var(--motion-illumination),box-shadow var(--motion-illumination)}
.humo-p .c button:hover{background:rgba(var(--a),.14);box-shadow:inset 0 0 0 .5px rgba(var(--b),.9)}
@media (min-width:761px){ .humo{display:block} }
@media (max-width:760px){ .humo{display:block;right:16px;bottom:calc(84px + env(safe-area-inset-bottom,0px))} .humo-b{padding:0;width:48px;height:48px;justify-content:center} .humo-b span{display:none} .humo-b i{width:40px;height:40px} }

/* GSAP is choreographing (shared/motion.js): the CSS screen transition stands down */
html.gs .screen{transition:none;translate:none}
html.gs .screen.on{transition:none}
html.gs .entering *,html.gs .entering{transition:none!important}
.q h1 .ln,.q h2 .ln{padding-bottom:.12em;margin-bottom:-.12em}

/* the cursor (mouse only, motion.js): a circle that travels with the pointer. Over anything you can act on, it opens and says what to do. */
.ptr{position:fixed;left:0;top:0;z-index:170;display:none;align-items:center;justify-content:center;height:26px;min-width:26px;margin:-13px 0 0 -13px;padding:0;border-radius:999px;pointer-events:none;
  color:#0b0a12;font:500 11.5px/1 var(--sub);letter-spacing:.02em;white-space:nowrap;box-shadow:inset 0 0 0 1px rgba(var(--b),.7);background:rgba(255,255,255,0);opacity:0;
  transition:margin .35s var(--ease),padding .35s var(--ease),background .25s,box-shadow .25s,opacity .3s,scale .2s}
html.gs .ptr{display:flex}
.ptr.live{opacity:1}
.ptr span{max-width:0;overflow:hidden;opacity:0;transition:max-width .35s var(--ease),opacity .25s}
.ptr.say{margin:16px 0 0 16px;padding:0 11px;background:#f4f2f7;box-shadow:none}
.ptr.say span{max-width:180px;opacity:1}
.ptr.down{scale:.9}
@media (hover:none),(pointer:coarse){ .ptr{display:none!important} }

/* small print */
.fine{position:fixed;left:var(--gut);right:var(--gut);bottom:6px;z-index:4;font-size:10.5px;color:var(--faint);text-align:center;pointer-events:none}
@media (max-width:760px){ .fine{display:none} }
@media (prefers-reduced-motion:reduce){ *{transition-duration:.01s!important;animation:none!important} }
@media (max-width:900px){ .q .say:empty{display:none} }

/* (user, 2026-10-11) the glow behind the components is gone on every screen; this was the third time it was asked to go */
.room .light{display:none}

/* (user, 2026-10-11) the step marker sits in the top right corner, level with the header, so the screens below can use the
   full width and centre their components. The left-hand rail is off unless a page asks for it (rail:true). */
@media (min-width:761px){
  .route{left:auto;right:var(--gut);top:14px;height:48px;flex-direction:row-reverse;gap:14px}
  .route .lab span{display:none}
}
@media (min-width:761px){ .route li+li::before{width:14px} .route li button{width:22px} }
/* narrower screens: the header bar is in the middle, so the marker drops its words and keeps the diamonds */
@media (min-width:761px) and (max-width:1320px){ .route .lab em{display:none} }
@media (min-width:761px) and (max-width:1180px){ .route .lab{display:none} }

/* VENTURE STUDIO ROOM (user, 2026-10-11): the same sky as the Exchange, in blue: stars and the Earth low in the room (sky.js),
   and less blue in the room itself, so it reads as space, not a blue wash. */
html[data-path="venture"] .room{background:
  linear-gradient(118deg,rgba(var(--deep),.3) 0%,rgba(var(--deep),.1) 16%,transparent 38%,transparent 78%,rgba(var(--deep),.16) 100%),#020308}
html[data-path="venture"] .room .stars{position:absolute;top:0;left:-140px;width:calc(100% + 280px);height:100%;transform:translateX(calc(60px - var(--at,0) * 22px));transition:transform 1.8s var(--ease)}
html[data-path="venture"] .room .globe{--ew:max(100vw,177.78vh);position:absolute;left:50%;top:50%;width:var(--ew);height:calc(var(--ew) * .5625);margin:calc(var(--ew) * -.28125) 0 0 calc(var(--ew) * -.5);
  background:url("../exchange/media/earth-hd.jpg") calc(var(--ew) * .1785) calc(var(--ew) * .23775)/calc(var(--ew) * .627) auto no-repeat;opacity:.22;
  filter:grayscale(1) sepia(1) hue-rotate(178deg) saturate(.75) brightness(1.05);
  -webkit-mask-image:radial-gradient(circle calc(var(--ew) * .3135) at 49.2% 98%,#000 98.6%,transparent 100%);mask-image:radial-gradient(circle calc(var(--ew) * .3135) at 49.2% 98%,#000 98.6%,transparent 100%);
  transform-origin:50% calc((100% - 100vh) / 2);
  transform:translateY(var(--ety,20vh)) scale(var(--es,1.15)) translate(-.8%,calc(48% + 50vh)) rotate(calc((var(--at,0) - 2) * 7deg + var(--spin,0deg))) translate(.8%,calc(-48% - 50vh));
  transition:opacity 1.4s var(--ease),transform 1.8s var(--ease),filter 1.4s var(--ease)}
html[data-path="venture"].at0 .room .globe{opacity:.4;--ety:30vh;--es:1.5}
@media (prefers-reduced-motion:reduce){ html[data-path="venture"] .room .globe,html[data-path="venture"] .room .stars{transition:none} }
/* the opening text is centred above the pathway cards, as on the Exchange */
html[data-path="venture"].at0 .screen.wide .q{max-width:none;margin:0 auto;text-align:center}
html[data-path="venture"].at0 .screen.wide .q h1{max-width:24ch;margin:0 auto;font-size:clamp(28px,min(3.5vw,6.2svh),52px)}
html[data-path="venture"].at0 .screen.wide .q p{max-width:none;margin-left:auto;margin-right:auto}
@media (min-width:901px){ html[data-path="venture"].at0 .screen.wide .q{margin-top:clamp(12px,4svh,40px)} }
/* the cards are a little see-through at their foot so the planet reads behind them */
html[data-path="venture"] .p-cards.n4 .p-card{background-color:rgba(2,3,8,.86)!important}

/* levels: each step carries a short name on wide screens, so the scale explains itself */
html[data-path="venture"].at0 .screen.wide .q h1{max-width:none}
/* the Earth sits lower on the Venture screens after the opening one */
html[data-path="venture"] .room .globe{--ety:36vh}
html[data-path="venture"].at0 .room .globe{--ety:30vh}

/* the pathway switcher, beside Ask Humo */
.swap{position:fixed;left:calc(50% + 84px);bottom:calc(26px + env(safe-area-inset-bottom,0px));z-index:7;opacity:0;visibility:hidden;translate:-8px 0;transition:opacity var(--motion-illumination),translate var(--motion-selection),visibility 0s linear .4s}
.swap.on{opacity:1;visibility:visible;translate:0 0;transition:opacity var(--motion-illumination),translate var(--motion-selection),visibility 0s}
.swap-b{display:flex;align-items:center;gap:10px;height:50px;padding:0 16px 0 20px;border-radius:999px;font-size:14.5px;white-space:nowrap;background:linear-gradient(150deg,rgba(255,255,255,.14),rgba(255,255,255,.04) 50%,rgba(255,255,255,.08));box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 0 0 1px rgba(255,255,255,.13);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transition:box-shadow var(--motion-illumination)}
.swap-b:hover,.swap.open .swap-b{box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 0 0 1px rgba(var(--b),.7)}
.swap-b svg{width:16px;height:16px;color:var(--c);transition:rotate var(--motion-selection)} .swap.open .swap-b svg{rotate:180deg}
.swap-m{position:absolute;left:0;bottom:calc(100% + 10px);min-width:100%;padding:6px;border-radius:16px;background:linear-gradient(150deg,rgba(30,32,38,.92),rgba(14,14,18,.96));-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 30px 60px -24px #000;
  opacity:0;visibility:hidden;translate:0 8px;transition:opacity var(--motion-illumination),translate var(--motion-selection),visibility 0s linear .4s}
.swap.open .swap-m{opacity:1;visibility:visible;translate:0 0;transition:opacity var(--motion-illumination),translate var(--motion-selection),visibility 0s}
.swap-m button{display:block;width:100%;padding:11px 14px;border-radius:10px;text-align:left;font-size:14.5px;white-space:nowrap;color:var(--mute);transition:background var(--motion-illumination),color var(--motion-illumination)}
.swap-m button:hover,.swap-m button:focus-visible{background:rgba(var(--a),.16);color:var(--paper)} .swap-m button.sel{color:var(--c)}
@media (max-width:760px){ .swap{left:16px;right:auto;bottom:calc(84px + env(safe-area-inset-bottom,0px))} .swap-b{height:44px;padding:0 12px 0 16px;font-size:13.5px} }
@media (max-width:760px){ html[data-path="venture"] .brief{bottom:calc(136px + env(safe-area-inset-bottom,0px))} }
/* Venture opening (user, 2026-10-11): the headline sits lower, the four cards are a little smaller */
@media (min-width:901px){
  html[data-path="venture"].at0 .screen.wide .q{margin-top:clamp(28px,10svh,96px)}
  html[data-path="venture"] .p-cards.n4{max-width:1120px;margin-left:auto;margin-right:auto;gap:clamp(12px,1.6vw,24px)}
  html[data-path="venture"] .p-cards.n4 .p-card{height:clamp(200px,32svh,280px)}
}

/* Venture opening: each pathway card is linked to the Earth by a stem and a node on its curve (lengths from sky.js as --stem) */
html[data-path="venture"].at0 .room .globe{opacity:.55}
@media (min-width:901px){
  html[data-path="venture"] .p-cards.n4 .p-card{overflow:visible}
  html[data-path="venture"] .p-cards.n4 .p-card::before{content:"";position:absolute;left:50%;top:100%;width:1px;height:var(--stem,30px);background:linear-gradient(180deg,rgba(var(--b),.9),rgba(var(--b),.3));transition:background var(--motion-illumination)}
  html[data-path="venture"] .p-cards.n4 .p-card .tx{position:static}
  html[data-path="venture"] .p-cards.n4 .p-card .tx > *{position:relative;z-index:3}
  html[data-path="venture"] .p-cards.n4 .p-card .tx::after{content:"";position:absolute;left:50%;top:calc(100% + var(--stem,30px));width:11px;height:11px;margin-left:-5.5px;rotate:45deg;background:rgb(var(--ground));box-shadow:inset 0 0 0 1.5px var(--hi),0 0 0 6px rgba(var(--a),.22);transition:background var(--motion-selection),scale var(--motion-selection)}
  html[data-path="venture"] .p-cards.n4 .p-card:hover .tx::after,html[data-path="venture"] .p-cards.n4 .p-card.sel .tx::after{background:var(--hi);scale:1.2}
  html[data-path="venture"] .p-cards.n4 .p-card:hover::before,html[data-path="venture"] .p-cards.n4 .p-card.sel::before{background:var(--hi)}
}
@media (min-width:901px){
  /* slightly wider cards so every card title sits on one line (user, 2026-10-11) */
  html[data-path="venture"] .p-cards.n4{max-width:1260px}
  html[data-path="venture"] .p-cards.n4 .p-card .tx{padding-left:22px;padding-right:18px}
  html[data-path="venture"] .p-cards.n4 .p-card b{white-space:nowrap;font-size:clamp(17px,1.5vw,22px);text-wrap:nowrap}
  html[data-path="venture"] .p-cards.n4 .p-card .l{font-size:13px}
}
/* three pathways (user, 2026-10-12: go-to-market is part of Commercialisation): same cards, three columns, same card width as before */
@media (min-width:901px){
  html[data-path="venture"] .p-cards.n4.c3{grid-template-columns:repeat(3,minmax(0,1fr));max-width:980px}
}
/* (user, 2026-10-11: "remove this too") the row of answer tags is not shown on Venture Studio either */
html[data-path="venture"] .brief{display:none}
@media (min-width:901px){
  /* smaller cards, and the text in all four sits on the same lines (user, 2026-10-11): every description keeps two lines of room */
  html[data-path="venture"] .p-cards.n4{max-width:1120px}
  html[data-path="venture"] .p-cards.n4 .p-card{height:clamp(186px,29svh,250px)}
  html[data-path="venture"] .p-cards.n4 .p-card b{font-size:clamp(16px,1.32vw,19.5px)}
  html[data-path="venture"] .p-cards.n4 .p-card .l{min-height:2.9em;margin-top:8px}
  html[data-path="venture"] .p-cards.n4 .p-card .st{margin-top:10px}
}
@media (min-width:901px){
  /* more air (user, 2026-10-11): the same cards, spread across the width with wide gaps between them */
  html[data-path="venture"] .p-cards.n4{max-width:1290px;gap:clamp(28px,4.2vw,64px);margin-top:clamp(28px,6svh,60px)}
  html[data-path="venture"] .p-cards.n4 .p-card{background-color:rgba(2,3,8,.6)!important}
  html[data-path="venture"] .p-cards.n4 .p-card::after{box-shadow:inset 0 0 0 .5px rgba(var(--b),.1)}
}

/* Ask Humo and the pathway switcher, joined as one widget (user, 2026-10-11): one glass capsule, two halves, a hairline between */
@media (min-width:761px){
  .humo.duo{display:flex;align-items:center;border-radius:999px;transition:background var(--motion-illumination),box-shadow var(--motion-illumination)}
  .humo .swap{position:relative;left:auto;bottom:auto;translate:none;display:none;opacity:1;visibility:visible}
  .humo .swap.on{display:block}
  .humo.duo:has(.swap.on){background:linear-gradient(150deg,rgba(255,255,255,.14),rgba(255,255,255,.04) 50%,rgba(255,255,255,.08));box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 0 0 1px rgba(255,255,255,.13);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
  .humo.duo:has(.swap.on) .humo-b,.humo.duo:has(.swap.on) .swap-b{background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  .humo.duo:has(.swap.on) .humo-b{border-radius:999px 0 0 999px;padding-right:12px}
  .humo.duo:has(.swap.on) .swap-b{border-radius:0 999px 999px 0;padding-left:18px;box-shadow:inset 1px 0 0 rgba(255,255,255,.18)}
  .humo.duo:has(.swap.on) .humo-b:hover,.humo.duo:has(.swap.on) .swap-b:hover,.humo.duo .swap.open .swap-b{background:rgba(255,255,255,.07)}
  .humo .swap-m{left:auto;right:0}
}
@media (max-width:760px){ .humo.duo{translate:none} }

/* switching pathway: the Earth turns to a new face and the name of the pathway crosses the screen before its first screen arrives */
.swap-x{position:fixed;inset:0;z-index:9;display:grid;place-items:center;pointer-events:none;opacity:0;transition:opacity .45s var(--ease)}
.swap-x.on{opacity:1}
.swap-x b{font-family:var(--title);font-weight:200;font-size:clamp(34px,5.4vw,84px);letter-spacing:-.02em;line-height:1.05;text-align:center;padding:0 var(--gut);
  background:linear-gradient(90deg,var(--c),var(--hi) 45%,#fff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  scale:.94;filter:blur(8px);transition:scale 1.1s var(--ease),filter .6s var(--ease)}
.swap-x.on b{scale:1;filter:blur(0)}
html.swapping .stage,html.swapping .bar{opacity:0;transition:opacity .35s var(--ease)}
.stage,.bar{transition:opacity .5s var(--ease)}
html.swapping .room .globe{transition:opacity 1.4s var(--ease),transform 1.5s cubic-bezier(.65,0,.35,1),filter 1.4s var(--ease)}
/* the joined widget, second pass (user, 2026-10-11): pathway first, Ask Humo second, and no dividing line. It is a toggle-style
   capsule: the pathway is a raised inner pill, Ask Humo sits beside it with its orb at the end. */
@media (min-width:761px){
  .humo.duo:has(.swap.on){padding:5px;gap:4px}
  .humo.duo .swap{order:0} .humo.duo .humo-b{order:1}
  .humo.duo:has(.swap.on) .swap-b{height:40px;padding:0 14px 0 18px;border-radius:999px;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.16)}
  .humo.duo:has(.swap.on) .swap-b:hover,.humo.duo .swap.open .swap-b{background:rgba(255,255,255,.17)}
  .humo.duo:has(.swap.on) .humo-b{height:40px;padding:0 3px 0 14px;gap:10px;border-radius:999px}
  .humo.duo:has(.swap.on) .humo-b:hover{background:rgba(255,255,255,.07)}
  .humo.duo:has(.swap.on) .humo-b i{width:34px;height:34px}
  .humo .swap-m{left:-5px;right:auto;bottom:calc(100% + 14px)}
}
/* the pathway menu opens in the same square frame as the cards: hairline, four corner marks, no rounding (user, 2026-10-11) */
.swap-m{--vf:rgba(var(--b),.9);padding:8px;border-radius:2px;background-color:rgba(var(--ground),.86);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  box-shadow:inset 0 0 0 .5px rgba(var(--b),.22),0 30px 60px -24px #000;
  background-image:linear-gradient(var(--vf),var(--vf)),linear-gradient(var(--vf),var(--vf)),linear-gradient(var(--vf),var(--vf)),linear-gradient(var(--vf),var(--vf)),linear-gradient(var(--vf),var(--vf)),linear-gradient(var(--vf),var(--vf)),linear-gradient(var(--vf),var(--vf)),linear-gradient(var(--vf),var(--vf));
  background-repeat:no-repeat;background-size:10px 1px,1px 10px,10px 1px,1px 10px,10px 1px,1px 10px,10px 1px,1px 10px;background-position:0 0,0 0,100% 0,100% 0,0 100%,0 100%,100% 100%,100% 100%}
.swap-m button{border-radius:0;padding:12px 16px}
.swap-m button.sel{box-shadow:inset 2px 0 0 var(--hi)}

/* THE CURSOR, second pass (user, 2026-10-11): one circle. At rest it is a small ring with a point at its centre. Over anything you
   can act on it opens into a glass circle around the pointer and the instruction is written inside it. */
.ptr{width:28px;height:28px;min-width:0;margin:-14px 0 0 -14px;padding:0;border-radius:50%;color:var(--paper);font:400 11px/1.15 var(--sub);letter-spacing:.04em;text-align:center;white-space:normal;
  background:rgba(255,255,255,0);box-shadow:inset 0 0 0 1px rgba(var(--b),.75);
  transition:width .4s var(--ease),height .4s var(--ease),margin .4s var(--ease),background .3s,box-shadow .3s,opacity .3s,scale .2s,-webkit-backdrop-filter .3s,backdrop-filter .3s}
.ptr::before{content:"";position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px;border-radius:50%;background:var(--hi);transition:opacity .2s,scale .3s var(--ease)}
.ptr span{max-width:none;width:62px;overflow:visible;opacity:0;scale:.8;text-wrap:balance;transition:opacity .2s,scale .35s var(--ease)}
.ptr.say{width:84px;height:84px;margin:-42px 0 0 -42px;padding:0;background:rgba(var(--ground),.5);-webkit-backdrop-filter:blur(8px) saturate(1.4);backdrop-filter:blur(8px) saturate(1.4);
  box-shadow:inset 0 0 0 1px var(--hi),0 0 34px -10px rgba(var(--a),.9)}
.ptr.say::before{opacity:0;scale:0}
.ptr.say span{max-width:none;opacity:1;scale:1;transition:opacity .25s .1s,scale .4s var(--ease) .05s}
.ptr.down{scale:.86}
/* the circle is the cursor: the arrow is hidden wherever the page is drawn by GSAP and the pointer is a mouse */
@media (hover:hover) and (pointer:fine){ html.gs,html.gs body,html.gs button,html.gs a,html.gs label,html.gs [role=button]{cursor:none} html.gs input[type=text],html.gs input[type=email],html.gs textarea{cursor:text} }
@media (min-width:901px){
  html[data-path="venture"] .p-cards.n4 .p-card::before{width:1px;background:rgba(var(--b),.22)}
  html[data-path="venture"] .p-cards.n4 .p-card .tx::after{width:9px;height:9px;margin-left:-4.5px;background:rgb(var(--ground));box-shadow:inset 0 0 0 1px rgba(var(--b),.22)}
  html[data-path="venture"] .p-cards.n4 .p-card:hover::before,html[data-path="venture"] .p-cards.n4 .p-card.sel::before{background:rgba(var(--b),.7)}
  html[data-path="venture"] .p-cards.n4 .p-card:hover .tx::after,html[data-path="venture"] .p-cards.n4 .p-card.sel .tx::after{background:rgb(var(--ground));box-shadow:inset 0 0 0 1px rgba(var(--b),.7);scale:1}
  html[data-path="venture"] .p-cards.n4 .p-card::after{box-shadow:inset 0 0 0 .5px rgba(var(--b),.22)}
}
@media (min-width:901px){ html[data-path="venture"] .p-cards.n4 .p-card .tx::after{rotate:0deg;width:8px;height:8px;margin-left:-4px;box-shadow:inset 0 0 0 1px rgba(var(--b),.45)} }
/* long routes (8 steps or more): the marker keeps its diamonds and drops its words, so it never runs under the header */
@media (min-width:761px) and (max-width:1700px){ .route:has(li:nth-child(8)) .lab{display:none} .route:has(li:nth-child(8)) li+li::before{width:10px} }

/* (user, 2026-10-11: "I don't think this needs to be here") no step marker on the opening screen; it appears once a pathway is chosen */
html.at0 .route{opacity:0;visibility:hidden;pointer-events:none}

/* The step marker ("02 / 07 Overview" and its diamonds) is removed on every screen of both sites (user, 2026-10-11: "i said remove this").
   Back and the main button still move you through the route. */
html .route{display:none!important}

/* HEADER AND MENU in the pathway's own language (user, 2026-10-11): the square frame with corner marks, the pathway hairline,
   ground-coloured glass. Overrides the shared menu script's rounded black bar on Venture Studio and the Exchange only. */
html[data-path]{--fm:linear-gradient(var(--vf),var(--vf)),linear-gradient(var(--vf),var(--vf)),linear-gradient(var(--vf),var(--vf)),linear-gradient(var(--vf),var(--vf)),linear-gradient(var(--vf),var(--vf)),linear-gradient(var(--vf),var(--vf)),linear-gradient(var(--vf),var(--vf)),linear-gradient(var(--vf),var(--vf))}
html[data-path] .hxm-p{--vf:rgba(var(--b),.9);border-radius:2px;background-color:rgba(var(--ground),.66)!important;background-image:var(--fm)!important;background-repeat:no-repeat!important;
  background-size:10px 1px,1px 10px,10px 1px,1px 10px,10px 1px,1px 10px,10px 1px,1px 10px!important;background-position:0 0,0 0,100% 0,100% 0,0 100%,0 100%,100% 100%,100% 100%!important;
  box-shadow:inset 0 0 0 .5px rgba(var(--b),.22),0 18px 44px -22px #000}







/* the menu, opened */
html[data-path] .hxm-veil{background:rgba(var(--ground),.7)}
html[data-path] .hxm-p{background-color:rgba(var(--ground),.94)!important;clip-path:inset(0 25% calc(100% - 46px) 25% round 2px)}
html[data-path] .hxm.on .hxm-p{clip-path:inset(0 0 0 0 round 2px)}
html[data-path] .hxm-hd{color:var(--c)!important;font-weight:400;letter-spacing:.16em}
html[data-path] .hxm-x{border-radius:2px!important;box-shadow:inset 0 0 0 .5px rgba(var(--b),.4);transition:background .3s,color .3s}
html[data-path] .hxm-x:hover{background:var(--hi)!important;color:#06070c}
html[data-path] .hxm-i{border-top-color:rgba(var(--b),.16)}
html[data-path] .hxm-i em::before{border-radius:0;rotate:45deg}
html[data-path] .hxm-i.hxm-here{background:none!important;box-shadow:inset 2px 0 0 var(--hi)!important;padding-left:16px!important}
html[data-path] .hxm-ft{border-top-color:rgba(var(--b),.16)}
html[data-path] .hxm-hint kbd{border-radius:2px;box-shadow:inset 0 0 0 .5px rgba(var(--b),.4)}
@media (max-width:760px){   html[data-path] .hxm-p{background-image:none!important} }

/* THE HEADER, final form (user, 2026-10-11): two islands, and no border around them. The Humanate mark alone (the way home),
   then the pathway name with Menu. Soft frosted glass with rounded ends, like the chips on the Creative Studio hero;
   the square frame stays on the cards and panels, not here. */





/* HEADER LAYOUT (user, 2026-10-11): squared, the Menu in the top right corner of the screen, the pathway name in white.
   Centre: the Humanate mark and the pathway name, two square glass islands. Right: Menu. Left: the step marker. */




@media (min-width:761px){
   
  /* the step marker moves to the top left, so the right corner belongs to Menu */
  
  /* the menu opens from its button, in the top right */
  html.split .hxm-p{left:auto;right:var(--gut);transform:none;clip-path:inset(0 0 calc(100% - 46px) calc(100% - 110px) round 2px)}
  html.split .hxm.on .hxm-p{clip-path:inset(0 0 0 0 round 2px)}
}

/* header type (user, 2026-10-11): all caps, thin, a softer white, spaced to sit with the HUMANATE lettering */





/* HEADER, as the user described it (2026-10-11): HUMANATE alone in the centre; the pathway name together with Menu in the top
   right. Square corners, plain frosted glass (one flat tint, no gradient, no border). */

 






/* (user, 2026-10-11) the header glass is black frosted glass, not a light tint */




/* (user, 2026-10-11) the pathway + Menu island sits right in the top right corner, on the same line as the Humanate mark */
@media (min-width:761px){
  
  html.split .hxm-p{right:clamp(14px,1.4vw,22px)}
}
/* (user, 2026-10-11) the pathway name in the header is extra light: the title face at its lightest weight */


/* HEADER AS RIBBONS (user, 2026-10-11): both islands hang from the top edge of the screen, flush with it, in clean black frosted
   glass. No gap above, no border; square, with the content sitting low in the ribbon. */




@media (min-width:761px){   html.split .hxm-p{top:0}  }


/* RIBBONS, animated (user, 2026-10-11): they drop from the top edge on arrival, a thin line of light breathes along the foot of
   each, and they lengthen a little when touched. */
@keyframes ribDrop{0%{transform:translateY(-110%)}70%{transform:translateY(5px)}100%{transform:none}}
@keyframes ribGlow{0%,100%{opacity:.35;transform:scaleX(.5)}50%{opacity:1;transform:scaleX(1)}}



 


 
 


/* VENTURE STUDIO, NAVY GLASS WITH A SUBTLE NEON EDGE (user, 2026-10-11): the boxes are navy frosted glass, the blue in the
   pictures is a deeper navy, and edges carry a faint electric line that brightens when touched. Nothing glows at rest. */
html[data-path="venture"]{--navy:10,20,62;--neon:96,152,255}
html[data-path="venture"] .art,html[data-path="venture"] .p-zoom,html[data-path="venture"] .room .scene{--a:26,52,150}
html[data-path="venture"] .fr,html[data-path="venture"] .p-pan{background-color:rgba(var(--navy),.34);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);
  box-shadow:inset 0 0 0 .5px rgba(var(--neon),.26),0 0 28px -18px rgba(var(--neon),.9)}
html[data-path="venture"] button.fr:hover,html[data-path="venture"] button.fr:focus-visible,html[data-path="venture"] .p-step:hover,html[data-path="venture"] .fr.sel{background-color:rgba(var(--navy),.5);
  box-shadow:inset 0 0 0 .5px rgba(var(--neon),.85),0 0 34px -12px rgba(var(--neon),.95)}
html[data-path="venture"] .p-cards.n4 .p-card{background-color:rgba(var(--navy),.42)!important;-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4)}
html[data-path="venture"] .p-cards.n4 .p-card::after{box-shadow:inset 0 0 0 .5px rgba(var(--neon),.26);transition:box-shadow .5s var(--ease)}
html[data-path="venture"] .p-cards.n4 .p-card:hover::after,html[data-path="venture"] .p-cards.n4 .p-card.sel::after{box-shadow:inset 0 0 0 .5px rgba(var(--neon),.9),inset 0 0 30px -16px rgba(var(--neon),.9),0 0 30px -12px rgba(var(--neon),.9)}
html[data-path="venture"] .p-jour .gate.cur{background-color:rgba(var(--navy),.55);box-shadow:inset 0 0 0 .5px rgba(var(--neon),.9),0 0 36px -14px rgba(var(--neon),.95)}
html[data-path="venture"] .p-lv.in{background:linear-gradient(180deg,rgba(var(--neon),.3),rgba(var(--navy),.3));box-shadow:inset 0 0 0 .5px rgba(var(--neon),.4)}

html[data-path="venture"] .swap-m{background-color:rgba(var(--navy),.6)}
/* (user, 2026-10-11) no line on the header ribbons */


/* HEADER (user, 2026-10-11): reverted to the original single bar from the shared menu script (mark, pathway name, Menu), on both sites. The themed menu panel stays. */

/* (user, 2026-10-11: "gradient here must be black, I don't like this blue") wherever a picture fades out behind text on Venture,
   it fades to black, not navy. The neon edge stays; the fill behind the words is black. */
html[data-path="venture"] .p-jour .gate,html[data-path="venture"] .p-jour .gate.cur,html[data-path="venture"] .p-jour .gate.done{background-color:rgba(2,3,8,.82)}
html[data-path="venture"] .p-jour .gate::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(180deg,transparent 30%,rgba(2,3,8,.7) 58%,#020308 84%);background-image:linear-gradient(180deg,transparent 30%,rgba(2,3,8,.7) 58%,#020308 84%)}
html[data-path="venture"] .p-cards.n4 .p-card{background-color:rgba(2,3,8,.86)!important}
html[data-path="venture"] .p-step:has(.art){background-color:rgba(2,3,8,.7)}
html[data-path="venture"] .p-step:hover:has(.art){background-color:rgba(2,3,8,.82)}
html[data-path="venture"] .p-jour .gate::after{inset:1px}

/* (user, 2026-10-11) the fill behind text is a deep navy that sits with the room (not black, not bright blue),
   and the neon is a thin edge with almost no spread */
html[data-path="venture"]{--fill:5,10,30}
html[data-path="venture"] .p-jour .gate,html[data-path="venture"] .p-jour .gate.cur,html[data-path="venture"] .p-jour .gate.done{background-color:rgba(var(--fill),.86)}
html[data-path="venture"] .p-jour .gate::after{background:linear-gradient(180deg,transparent 30%,rgba(var(--fill),.72) 58%,rgb(var(--fill)) 84%)}
html[data-path="venture"] .p-cards.n4 .p-card{background-color:rgba(var(--fill),.88)!important}
html[data-path="venture"] .p-step:has(.art){background-color:rgba(var(--fill),.74)} html[data-path="venture"] .p-step:hover:has(.art){background-color:rgba(var(--fill),.86)}
html[data-path="venture"] .p-card .art::after{--ground:5,10,30}
html[data-path="venture"] .fr,html[data-path="venture"] .p-pan{box-shadow:inset 0 0 0 .5px rgba(var(--neon),.24)}
html[data-path="venture"] button.fr:hover,html[data-path="venture"] button.fr:focus-visible,html[data-path="venture"] .p-step:hover,html[data-path="venture"] .fr.sel,html[data-path="venture"] .p-jour .gate.cur{box-shadow:inset 0 0 0 .5px rgba(var(--neon),.8),0 0 10px -4px rgba(var(--neon),.55)}
html[data-path="venture"] .p-cards.n4 .p-card:hover::after,html[data-path="venture"] .p-cards.n4 .p-card.sel::after{box-shadow:inset 0 0 0 .5px rgba(var(--neon),.8),0 0 10px -4px rgba(var(--neon),.55)}
html[data-path="venture"] .p-team .tb{box-shadow:inset 0 0 0 .5px rgba(96,152,255,.34)}
html[data-path="venture"] .p-team .tb:hover{box-shadow:inset 0 0 0 .5px rgba(96,152,255,.85),0 0 10px -4px rgba(96,152,255,.55)}
html[data-path="venture"] .p-team .tb.core{box-shadow:0 0 10px -5px rgba(96,152,255,.6)}