/* StockRepublic story slides (solve, how): the cover's deep surface carried on, so the light research surface after them reads
   as "now the mechanics". Light Montserrat at one display size shared with the cover, hierarchy by tone, one yellow
   accent kept small, one easing curve (cubic-bezier(.22,1,.36,1)) for every move: slow entrances, short exits,
   every build settled within 2 s. Everything is scoped under .jo-story or the #stage sheets that hold it. */
.slide:has(> .jo-story){background:#1C062F;padding:0}
.jo-story{--deep:#1C062F;--acc:#B380F1;--on:246 247 249;--e:cubic-bezier(.22,1,.36,1);
 --jo-display:clamp(2.4rem,min(5.2vw,10.4vh),7.75rem);--jo-sub:clamp(1.05rem,.72rem + .74vw,1.7rem);
 /* every opening headline starts on one top line, so clicking through cover, solve and how only the words change */
 --jo-top:36vh;
 position:absolute;inset:0;overflow:hidden;background:var(--deep);color:rgb(var(--on)/.92);font-family:Montserrat,Inter,system-ui,sans-serif;
 transition:border-radius .7s var(--e)}
:where(.jo-story) :where(h1,p){margin:0}

/* ── hand-offs: the research story's stacked sheets ──
   leaving: this sheet stays put and recedes (scale + a dim) under whatever arrives;
   into a light slide: the light sheet rises over it from below, instead of the two washing through grey;
   back from a light slide: the light sheet drops away and this one is already underneath */
#stage>.slide:has(> .jo-story)::after{content:"";position:absolute;inset:0;z-index:4;border-radius:28px;background:#12041F;opacity:0;pointer-events:none;transition:opacity .7s cubic-bezier(.22,1,.36,1)}
#stage>.slide:has(> .jo-story):not(:last-child){opacity:1;transform:scale(.965);transition:transform .7s cubic-bezier(.22,1,.36,1)}
#stage>.slide:has(> .jo-story):not(:last-child)>.jo-story{border-radius:28px}
#stage>.slide:has(> .jo-story):not(:last-child)::after{opacity:.32}
#stage>.slide:has(> .jo-story)+.slide:not(:has(> .jo-story,> .jo-cover)){opacity:1;transform:translate3d(0,100%,0);border-radius:28px 28px 0 0;
 box-shadow:0 -30px 70px rgba(12,2,22,.28);transition:transform .8s cubic-bezier(.22,1,.36,1),border-radius .8s cubic-bezier(.22,1,.36,1),box-shadow .8s cubic-bezier(.22,1,.36,1)}
#stage>.slide:has(> .jo-story)+.slide.in:not(:has(> .jo-story,> .jo-cover)){transform:none;border-radius:0;box-shadow:none}
#stage>.slide:not(:has(> .jo-story,> .jo-cover)):has(+ .slide > .jo-story){z-index:2;opacity:1;transform:translate3d(0,100%,0);border-radius:28px 28px 0 0;transition:transform .45s cubic-bezier(.22,1,.36,1),border-radius .45s cubic-bezier(.22,1,.36,1)}
#stage>.slide:not(:has(> .jo-story,> .jo-cover))+.slide:has(> .jo-story){opacity:1;transform:none;transition:none}

/* the surface: slow ambient light (gradients, never a blur filter) and a quiet grain, as on the cover; paused with the deck */
.jo-st-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.jo-st-amb{position:absolute;inset:0;overflow:hidden;contain:strict}
.jo-st-amb::before,.jo-st-amb::after{content:"";position:absolute;inset:-25%;will-change:transform}
.jo-st-amb::before{background:radial-gradient(34% 30% at var(--gx,34%) var(--gy,58%),rgba(179,128,241,.07),transparent 70%),radial-gradient(36% 40% at var(--hx,80%) var(--hy,30%),rgba(102,51,153,.16),transparent 72%);animation:jo-st-drift-a 61s ease-in-out infinite alternate}
.jo-st-amb::after{background:radial-gradient(55% 30% at 50% 108%,rgba(246,247,249,.07),transparent 70%);animation:jo-st-drift-b 83s ease-in-out infinite alternate}
.jo-st-grain{position:absolute;inset:-30%;opacity:.085;background-size:300px 300px;animation:jo-st-grain .9s steps(2) infinite;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes jo-st-drift-a{from{transform:translate3d(-3%,-2%,0) rotate(-4deg)}to{transform:translate3d(3%,2%,0) rotate(5deg) scale(1.06)}}
@keyframes jo-st-drift-b{from{transform:translate3d(2%,0,0)}to{transform:translate3d(-2%,-3%,0) scale(1.1)}}
@keyframes jo-st-grain{0%{transform:translate3d(0,0,0)}50%{transform:translate3d(1.5%,-1%,0)}100%{transform:translate3d(-1%,1.5%,0)}}
@keyframes jo-st-rise{0%{opacity:0;filter:blur(6px);transform:translate3d(0,16px,0)}55%{filter:blur(0)}}
body.paused .jo-st-amb::before,body.paused .jo-st-amb::after,body.paused .jo-st-grain{animation-play-state:paused}

/* headline words rise out of a mask, 70 ms a line */
.jo-story .jo-w{display:inline-block;overflow:clip;padding-block:.08em .16em;margin-block:-.08em -.16em;vertical-align:top}
.jo-story .jo-w>span{display:inline-block;transform:translate3d(0,calc(100% + .25em),0)}

/* ── solve: one statement given the whole screen ── */
.jo-solve .jo-st-amb{--gx:30%;--gy:64%;--hx:84%;--hy:22%}
.jo-solve-main{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;justify-content:flex-start;padding:var(--jo-top) var(--pad-x) var(--pad-bot)}
.jo-solve-h{font-family:inherit;font-size:var(--jo-display);font-weight:300;letter-spacing:-.04em;line-height:1.02;max-width:none;color:rgb(var(--on)/.94)}
.jo-solve-h .jo-ln{display:block;text-wrap:balance}
.jo-solve.go .jo-w>span{transform:none;transition:transform .9s var(--e) calc(100ms + var(--l,0) * 70ms)}
/* the accent: its line lands white, then warms to the yellow */
.jo-solve .jo-wa>span{color:rgb(var(--on)/.94)}
.jo-solve.go .jo-wa>span{color:var(--acc);transition:transform .9s var(--e) calc(100ms + var(--l,0) * 70ms),color .7s var(--e) calc(480ms + var(--l,0) * 70ms)}
.jo-solve-sub{font-size:var(--jo-sub);line-height:1.55;letter-spacing:-.005em;color:rgb(var(--on)/.64);max-width:38em;margin-top:clamp(20px,3.4vh,40px);text-wrap:balance;opacity:0}
.jo-solve.go .jo-solve-sub{opacity:1;animation:jo-st-rise .8s var(--e) .45s backwards}

/* ── how: "How?" alone; then it settles into a quiet lead-in and the answer rises under it ── */
.jo-how{--qfs:clamp(5.5rem,min(3rem + 9vw,26vh),13rem);--qk:.19;--km:clamp(14px,2.6vh,30px)}
.jo-how .jo-st-amb{--gx:74%;--gy:86%;--hx:18%;--hy:20%}
.jo-how-main{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;justify-content:flex-start;padding:calc(var(--jo-top) - var(--qfs) * var(--qk) - var(--km)) var(--pad-x) var(--pad-bot)}
.jo-how-text{min-width:0}
.jo-how-k{position:relative;height:calc(var(--qfs) * var(--qk));margin-bottom:var(--km)}
.jo-how-q{position:absolute;left:0;top:0;font-size:var(--qfs);font-weight:300;letter-spacing:-.05em;line-height:1;white-space:nowrap;transform-origin:0 0;
 transform:translate3d(0,var(--qdy),0);color:rgb(var(--on)/.94);transition:transform .85s var(--e),color .85s var(--e);
 /* stage 0: "How?" stands alone on the shared top line (cap tops matched to the headline's); stage 1: it settles into the lead-in */
 --qdy:calc(var(--qfs) * var(--qk) + var(--km) - var(--qfs) * .16 + var(--jo-display) * .17)}
.jo-how-q>span{display:inline-block}
.jo-how-q i{font-style:normal;color:var(--acc)}
.jo-how.go .jo-how-q>span{animation:jo-st-rise .8s var(--e) .1s backwards}
.jo-how[data-st="1"] .jo-how-q{transform:scale(var(--qk));color:rgb(var(--on)/.5)}
.jo-how.jo-now .jo-how-q{transition:none}
.jo-how-a{opacity:0;transition:opacity .2s var(--e)}
.jo-how[data-st="1"] .jo-how-a{opacity:1;transition:opacity .3s var(--e)}
.jo-how-h{font-family:inherit;font-size:var(--jo-display);font-weight:300;letter-spacing:-.04em;line-height:1.02;max-width:15em;color:rgb(var(--on)/.94);text-wrap:balance}
.jo-how .jo-w>span{transition:transform .2s var(--e)}
.jo-how.go[data-st="1"] .jo-w>span{transform:none;transition:transform .9s var(--e) calc(160ms + var(--l,0) * 70ms)}
.jo-how-sub{font-size:var(--jo-sub);line-height:1.58;letter-spacing:-.005em;color:rgb(var(--on)/.64);max-width:34em;margin-top:clamp(18px,3vh,34px);text-wrap:balance;
 opacity:0;transform:translate3d(0,16px,0);filter:blur(6px);transition:opacity .2s var(--e),transform .2s var(--e),filter .2s var(--e)}
.jo-how[data-st="1"] .jo-how-sub{opacity:1;transform:none;filter:blur(0);transition:opacity .8s var(--e) .38s,transform .8s var(--e) .38s,filter .45s var(--e) .38s}
/* the line: plain words joined by hairlines, drawn left to right; the last point carries the yellow dot */
.jo-how-fig{display:flex;align-items:center;flex-wrap:wrap;gap:12px 16px;margin-top:clamp(28px,6vh,64px);font-size:clamp(14px,.62rem + .5vw,19px);font-weight:400;letter-spacing:-.005em;line-height:1.3}
.jo-pt{display:inline-flex;align-items:center;gap:11px;color:rgb(var(--on)/.74);white-space:nowrap;opacity:0;transform:translate3d(0,8px,0);transition:opacity .2s var(--e),transform .2s var(--e)}
.jo-pt>i{width:7px;height:7px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1.25px rgb(var(--on)/.6)}
.jo-pt-end{color:rgb(var(--on)/.94)}
.jo-pt-end>i{background:var(--acc);box-shadow:none}
.jo-sg{position:relative;display:block;flex:0 1 clamp(40px,7vw,128px);height:1px;background:rgb(var(--on)/.14);opacity:0;transition:opacity .2s var(--e)}
.jo-sg>i{position:absolute;inset:0;display:block;background:rgb(var(--on)/.55);clip-path:inset(0 100% 0 0);transition:clip-path .2s var(--e)}
.jo-how[data-st="1"] .jo-pt{opacity:1;transform:none;transition:opacity .6s var(--e) calc(.6s + var(--i,0) * .4s),transform .6s var(--e) calc(.6s + var(--i,0) * .4s)}
.jo-how[data-st="1"] .jo-sg{opacity:1;transition:opacity .4s var(--e) .55s}
.jo-how[data-st="1"] .jo-sg>i{clip-path:inset(0 0 0 0);transition:clip-path .35s var(--e) calc(.3s + var(--i,1) * .4s)}

/* narrow screens: the same slides, stacked; the line runs down instead of across */
@media (max-width:760px){
 .jo-story{--jo-display:clamp(2.1rem,9vw,3.2rem)}
 .jo-solve-h,.jo-how-h{line-height:1.05}
 .jo-solve-main,.jo-how-main{justify-content:center;padding-top:var(--pad-top)}
 .jo-how{--qfs:clamp(4.5rem,30vw,8rem);--qk:.27}
 .jo-how-sub{font-size:1rem;line-height:1.55}
 .jo-how-fig{flex-direction:column;align-items:flex-start;gap:0;font-size:15px}
 .jo-sg{flex:none;width:1px;height:18px;margin:5px 0 5px 3px}
 .jo-sg>i{clip-path:inset(0 0 100% 0)}
}
@media (max-height:560px) and (min-width:761px){.jo-how-sub{font-size:1rem}.jo-how-fig{margin-top:20px}}
@media (prefers-reduced-motion:reduce){
 .jo-st-amb::before,.jo-st-amb::after,.jo-st-grain{animation:none}
 .jo-solve .jo-w>span,.jo-how[data-st="1"] .jo-w>span{transform:none}
 .jo-solve .jo-wa>span{color:var(--acc)}
 .jo-solve-sub{opacity:1}
}

/* ── issue: problem, options, what if, hand-off. One thing per click; the panes share the opening's top line ── */
.jo-issue .jo-st-amb{--gx:30%;--gy:64%;--hx:84%;--hy:22%}
.jo-iss-pane{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;justify-content:flex-start;padding:var(--jo-top) var(--pad-x) var(--pad-bot);opacity:0;visibility:hidden;transition:opacity .4s var(--e),visibility 0s linear .4s}
.jo-iss-a{--up:14vh;padding-top:calc(var(--jo-top) - var(--up))}
.jo-issue[data-st="0"] .jo-iss-a,.jo-issue[data-st="1"] .jo-iss-a,.jo-issue[data-st="2"] .jo-iss-a,.jo-issue[data-st="3"] .jo-iss-a,.jo-issue[data-st="4"] .jo-iss-b,.jo-issue[data-st="5"] .jo-iss-c{opacity:1;visibility:visible;transition:opacity .6s var(--e) .1s,visibility 0s}
.jo-iss-h,.jo-iss-big{font-family:inherit;font-size:calc(var(--jo-display) * .86);font-weight:300;letter-spacing:-.04em;line-height:1.06;color:rgb(var(--on)/.94);text-wrap:balance}
.jo-iss-c .jo-iss-big{font-size:var(--jo-display)}
.jo-iss-h{transform:translate3d(0,var(--up),0);transition:transform .7s var(--e)}
.jo-issue:not([data-st="0"]) .jo-iss-h{transform:none}
.jo-iss-h .jo-ln{display:block}
.jo-issue.go .jo-iss-h .jo-ln{animation:jo-st-rise .8s var(--e) backwards}
.jo-issue.go .jo-iss-h .jo-ln+.jo-ln{animation-delay:.12s}
.jo-iss-acc{color:var(--acc)}
.jo-iss-opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,20px);margin-top:clamp(26px,5.2vh,58px)}
.jo-iss-o{padding:clamp(18px,3.2vh,36px) clamp(20px,1.9vw,32px);border-radius:18px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 .75px rgba(255,255,255,.14);opacity:0;transform:translate3d(0,14px,0);transition:opacity .2s var(--e),transform .2s var(--e)}
.jo-iss-o.on{opacity:1;transform:none;transition:opacity .6s var(--e) .1s,transform .6s var(--e) .1s}
.jo-iss-k{font-size:clamp(1.05rem,.8rem + .62vw,1.55rem);font-weight:600;letter-spacing:-.01em;line-height:1.25;color:rgb(var(--on)/.96)}
.jo-iss-t{margin-top:clamp(8px,1.4vh,14px);font-size:clamp(1rem,.74rem + .56vw,1.4rem);line-height:1.42;color:rgb(var(--on)/.68)}
.jo-issue.jo-now *{transition:none!important}
/* the logos and advisors under "what we do": a light band on the deep surface, the same one as on the pricing page */
.jo-solve:has(.jo-sv-trust){--jo-top:clamp(92px,20vh,300px)}
.jo-solve:has(.jo-sv-trust) .jo-solve-main{padding-bottom:calc(84px + clamp(6px,1.2vh,18px))}
.jo-sv-trust.jo-offer{flex:none;min-height:0;height:auto;overflow:visible;position:relative;margin-top:auto;--jo-tile:clamp(40px,6.4vh,58px);--jo-ls:.85;color:var(--ink)}
.jo-sv-trust .jo-trust{background:#fff;box-shadow:0 18px 50px rgba(12,2,22,.28)}
@media (max-width:760px){
 .jo-iss-pane{padding-top:calc(var(--pad-top) + 8px)}
 .jo-iss-b,.jo-iss-c{justify-content:center;padding-top:var(--pad-top)}
 .jo-iss-a{--up:10vh;padding-top:calc(var(--pad-top) + 8px)}
 .jo-iss-opts{grid-template-columns:1fr;gap:10px;margin-top:18px}
 .jo-solve:has(.jo-sv-trust) .jo-solve-main{justify-content:flex-start;padding-top:calc(var(--pad-top) + 8px)}
}
@media (prefers-reduced-motion:reduce){
 .jo-iss-pane,.jo-iss-h,.jo-iss-o{transition:none!important}
 .jo-issue.go .jo-iss-h .jo-ln{animation:none}
}