#jz-flow-study {--f-paper:var(--bg);--f-ink:var(--ink);--f-muted:var(--muted);--f-rule:var(--line);--f-red:var(--accent);--f-wire:var(--wire);--f-soft:var(--wire-soft);--f-graphic-bg:var(--surface);background:var(--bg);color:var(--ink);font:400 15px/1.7 var(--sans);overflow:hidden;display:block;margin:0}
#jz-flow-study * {box-sizing:border-box}
#jz-flow-study h1,#jz-flow-study p,#jz-flow-study figure {margin:0}
#jz-flow-study a {color:inherit;text-decoration:none}
#jz-flow-study a:hover {color:var(--f-red)}
#jz-flow-study .flow-main {position:relative;min-height:600px;padding:72px var(--gutter) 52px;isolation:isolate}
#jz-flow-study .flow-copy {position:relative;z-index:2;max-width:540px;pointer-events:none}
#jz-flow-study .flow-copy a {pointer-events:auto}
#jz-flow-study .flow-eyebrow {font:400 10px/1.6 var(--mono);letter-spacing:.5px;color:var(--f-muted)}
#jz-flow-study .flow-eyebrow:before {content:'';display:inline-block;width:5px;height:5px;background:var(--f-red);margin-right:10px;border-radius:50%;vertical-align:2px}
#jz-flow-study .flow-copy h1 {font:600 clamp(58px,7.4vw,82px)/1.04 var(--sans);letter-spacing:-4.5px;margin:36px 0 28px}
#jz-flow-study .flow-copy h1 em {font:italic 400 1.34em/1 'Instrument Serif',Georgia,serif;letter-spacing:-2px;color:var(--f-red)}
#jz-flow-study .flow-copy > p:not(.flow-eyebrow) {max-width:315px;color:var(--f-muted);font-size:14px;line-height:1.9}
#jz-flow-study .flow-actions {display:flex;align-items:center;gap:26px;margin-top:30px}
#jz-flow-study .flow-primary {display:inline-flex;min-height:44px;align-items:center;gap:28px;padding:13px 18px;background:var(--f-ink);color:var(--f-paper)!important;border-radius:2px;font-size:12px}
#jz-flow-study .flow-secondary {display:inline-flex;align-items:center;min-height:44px;border-bottom:1px solid var(--f-rule);padding:9px 0;font-size:12px}
#jz-flow-study .flow-figure {position:absolute;inset:0 -55px 0 38%;z-index:1;min-width:0}
#jz-flow-study .flow-figure:before {content:'';position:absolute;width:68%;height:68%;right:3%;top:10%;background:radial-gradient(ellipse,var(--f-graphic-bg),transparent 68%);opacity:.65;pointer-events:none}
#jz-flow-study .flow-canvas {position:relative;display:block;width:100%;height:546px;touch-action:pan-y;cursor:crosshair}
#jz-flow-study .flow-figure figcaption {position:absolute;bottom:26px;left:18%;right:100px;display:flex;justify-content:space-between;align-items:center;gap:20px;color:var(--f-muted);font:400 10px/1.7 var(--mono)}
#jz-flow-study .flow-figure figcaption button {padding:10px 0;min-height:44px;white-space:nowrap;color:var(--f-ink);border:0;border-bottom:1px solid var(--f-rule);background:none;font:inherit}
#jz-flow-study .flow-figure figcaption button:hover {color:var(--f-red)}
#jz-flow-study .flow-caption-detail {display:block;letter-spacing:.7px;color:var(--f-muted)}
#jz-flow-study .flow-bottom {position:relative;z-index:2;margin:0 var(--gutter);padding:22px 0;display:flex;align-items:center;justify-content:space-between;gap:24px;border-top:1px solid var(--f-rule);font:400 10px/1.7 var(--mono);color:var(--f-muted)}
#jz-flow-study .flow-bottom b {font-weight:400;color:var(--f-red);margin-right:10px}
#jz-flow-study .flow-probe {position:absolute;visibility:hidden;pointer-events:none;color:var(--f-wire);width:0;height:0;overflow:hidden}
#jz-flow-study .flow-probe-soft {color:var(--f-soft)}
#jz-flow-study .flow-probe-red {color:var(--f-red)}
@media(max-width:900px){
 #jz-flow-study .flow-main {padding:64px 32px 44px;min-height:580px}
 #jz-flow-study .flow-copy {max-width:390px}
 #jz-flow-study .flow-copy h1 {font-size:56px;letter-spacing:-3px}
 #jz-flow-study .flow-copy > p:not(.flow-eyebrow) {max-width:285px;font-size:13px}
 #jz-flow-study .flow-figure {left:34%;right:-50px}
 #jz-flow-study .flow-canvas {height:530px;mask-image:linear-gradient(90deg,transparent,black 32%)}
 #jz-flow-study .flow-figure figcaption {right:82px;left:30%;bottom:22px}
 #jz-flow-study .flow-caption-detail {display:none}
}
@media(max-width:640px){
 #jz-flow-study .flow-main {display:flex;flex-direction:column;padding:40px 24px 0;min-height:0}
 #jz-flow-study .flow-copy {max-width:none}
 #jz-flow-study .flow-copy h1 {font-size:clamp(48px,12vw,72px);letter-spacing:-2.6px;margin:28px 0 24px}
 #jz-flow-study .flow-copy > p:not(.flow-eyebrow) {max-width:340px;font-size:14px}
 #jz-flow-study .flow-eyebrow {font-size:9px;letter-spacing:.1px}
 #jz-flow-study .flow-figure {position:relative;inset:auto;margin:0 -24px;min-height:420px}
 #jz-flow-study .flow-canvas {height:400px;mask-image:none}
 #jz-flow-study .flow-figure figcaption {bottom:8px;left:24px;right:24px;font-size:9px}
 #jz-flow-study .flow-caption-detail {display:block}
 #jz-flow-study .flow-bottom {margin:22px 24px 0;align-items:start;font-size:9px;gap:20px}
 #jz-flow-study .flow-bottom > span:first-child {max-width:200px}
 #jz-flow-study .flow-bottom > span:last-child {text-align:right}
}
@media(max-width:360px){
 #jz-flow-study .flow-main {padding:34px 20px 0}
 #jz-flow-study .flow-copy h1 {font-size:38px;letter-spacing:-1.8px}
 #jz-flow-study .flow-copy > p:not(.flow-eyebrow) {font-size:13px}
 #jz-flow-study .flow-actions {gap:18px}
 #jz-flow-study .flow-primary {padding:12px 14px;gap:18px;font-size:11px}
 #jz-flow-study .flow-secondary {font-size:11px}
 #jz-flow-study .flow-figure {margin-inline:-20px;min-height:380px}
 #jz-flow-study .flow-canvas {height:360px}
 #jz-flow-study .flow-figure figcaption {left:20px;right:20px}
}

#jz-flow-study .flow-copy h1 {white-space:nowrap;text-wrap:initial}
#jz-flow-study .flow-primary {transition:background .2s,transform .2s}
#jz-flow-study .flow-primary:hover {background:var(--accent);color:var(--bg);transform:translateY(-2px)}
#jz-flow-study .flow-canvas:focus-visible {outline-offset:-8px}
@media(prefers-reduced-motion:reduce){#jz-flow-study .flow-primary{transition:none}}
