/* Judgment Vault demo. One expert's pricing guide drawn as a ladder of questions;
   a request travels down it and lands on what Dana would do. */
.jv-ask {max-width:64rem}
.jv-req {min-height:2.1em;font:400 clamp(2.3rem,4.6vw,4.8rem)/1.02 'Fraunces','Fraunces Fallback',Georgia,serif;letter-spacing:-.025em;color:var(--ink)}
.jv-caret {display:inline-block;width:.06em;height:.82em;margin-left:.08em;vertical-align:-.06em;background:var(--oxide);animation:jv-blink 1s steps(1) infinite}
.jv[data-state="done"] .jv-caret,.jv[data-phase]:not([data-phase="asking"]) .jv-caret {opacity:0;animation:none}
@keyframes jv-blink {50%{opacity:0}}
.jv-from {margin-top:.9rem;font-size:.9375rem;line-height:1.5;color:var(--ink-2);transition:opacity .5s var(--ease),transform .6s var(--ease)}
.jv-from.is-off {opacity:0;transform:translateY(6px)}
.jv-pick {display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;margin-top:1.6rem}
.jv-pick button {padding:.3rem 0;font:inherit;font-size:.9375rem;color:var(--ink-2);background:none;border:0;cursor:pointer;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:.35em;transition:color .25s,text-decoration-color .25s}
.jv-pick button:hover {color:var(--ink);text-decoration-color:var(--rule)}
.jv-pick button[aria-pressed="true"] {color:var(--ink);text-decoration-color:var(--oxide)}
.jv-pick button:focus-visible,.jv .demo-replay:focus-visible {outline:1px solid var(--oxide);outline-offset:4px}

.jv-stage {position:relative;display:grid;grid-template-columns:minmax(0,46rem) minmax(0,1fr);gap:clamp(3rem,6vw,7rem);margin-top:clamp(3rem,5vw,4.5rem);padding-top:clamp(2.2rem,3.4vw,3rem);border-top:1px solid var(--rule)}

/* The guide: questions hang off a spine on the left, exits sit at the right of each question. */
.jv-path {list-style:none;margin:0;padding:0 0 0 1.75rem;position:relative;z-index:1}
.jv-step {position:relative;display:grid;grid-template-columns:minmax(0,27rem) minmax(3rem,1fr) 15rem;align-items:start;padding-bottom:3.4rem}
.jv-q {grid-column:1;grid-row:1;font:400 1.25rem/1.4 'Fraunces','Fraunces Fallback',Georgia,serif;letter-spacing:-.02em;color:var(--ink-2);transition:color .35s,opacity .5s}
.jv-fact {grid-column:1;grid-row:2;min-height:1.5em;margin-top:.45rem;font-size:.9375rem;line-height:1.5;color:var(--oxide);font-variant-numeric:tabular-nums;transition:opacity .5s var(--ease),transform .6s var(--ease)}
.jv-step:not(.is-now):not(.is-pass) .jv-fact {opacity:0;transform:translateY(5px)}
.jv-down {position:absolute;left:0;bottom:1.05rem;font-size:.8125rem;line-height:1;color:var(--ink-2);opacity:.7;transition:color .35s,opacity .4s}
.jv-down.is-taken {color:var(--oxide);opacity:1}
.jv-down.is-dim {opacity:.3}
.jv-exit {grid-column:3;grid-row:1/3;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:.6rem;padding-top:.175rem;transition:opacity .5s,color .35s}
.jv-exit strong {grid-column:2;font:500 1rem/1.4 'Hanken Grotesk','Hanken Fallback',Arial,sans-serif;color:var(--ink);transition:color .35s}
.jv-edge {grid-column:1;font-size:.8125rem;line-height:1.72;color:var(--ink-2);transition:color .35s}
.jv-who {grid-column:2;margin-top:.2rem;font-size:.8125rem;line-height:1.4;color:var(--ink-2)}
.jv-end {padding-bottom:0}
.jv-end .jv-exit {grid-column:1;grid-row:1;grid-template-columns:minmax(0,1fr);padding-top:0}
.jv-end .jv-exit strong {font:400 1.25rem/1.4 'Fraunces','Fraunces Fallback',Georgia,serif;letter-spacing:-.02em}
.jv-end .jv-exit strong,.jv-end .jv-who {grid-column:1}

.jv-step.is-now .jv-q {color:var(--oxide)}
.jv-step.is-pass .jv-q {color:var(--ink)}
.jv-step.is-dim .jv-q,.jv-step.is-dim .jv-down {opacity:.3}
.jv-exit.is-dim {opacity:.28}
.jv-exit.is-land strong,.jv-exit.is-land .jv-edge {color:var(--oxide)}
.jv-exit.is-land .jv-who {color:var(--ink)}

.jv-lines {position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.jv-lines path {fill:none;stroke-width:1;vector-effect:non-scaling-stroke}
.jv-lines .jv-base {stroke:var(--rule);transition:opacity .5s}
.jv-lines .jv-base.is-dim {opacity:.45}
.jv-lines .jv-lit {stroke:var(--oxide)}
.jv-lines circle {fill:var(--rule);transition:fill .35s}
.jv-lines circle.is-lit {fill:var(--oxide)}

.jv-marker {position:absolute;left:0;top:0;z-index:2;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:var(--oxide);opacity:0;pointer-events:none;transition:opacity .25s}
.jv-marker.is-on {opacity:1}
.jv-marker::after {content:'';position:absolute;inset:-1px;border:1px solid var(--oxide);border-radius:50%;opacity:0}
.jv-marker.is-land::after {animation:jv-ring 1.4s var(--ease) both}
@keyframes jv-ring {from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(5)}}

/* What Dana would say. */
.jv-verdict {position:relative;z-index:1;min-height:25rem;max-width:34rem}
.jv-act {font:300 clamp(2.6rem,4.3vw,4.4rem)/.98 'Fraunces','Fraunces Fallback',Georgia,serif;letter-spacing:-.01em;color:var(--ink)}
.jv-route {margin-top:1rem;font-size:.875rem;line-height:1.5;color:var(--ink-2)}
.jv-say {margin:clamp(1.8rem,3vw,2.4rem) 0 0}
.jv-say p {font:400 clamp(1.3rem,1.9vw,1.75rem)/1.42 'Fraunces','Fraunces Fallback',Georgia,serif;letter-spacing:-.01em;color:var(--ink)}
.jv-by {margin-top:.9rem;font-size:.875rem;color:var(--ink-2)}
.jv-case {margin-top:clamp(1.8rem,3vw,2.4rem);padding-top:1rem;border-top:1px solid var(--rule);font-size:.9375rem;line-height:1.6;color:var(--ink-2)}
.jv-case strong {font-weight:500;color:var(--ink)}
.jv-w {display:inline-block;animation:jv-word .7s var(--ease) both}
@keyframes jv-word {from{opacity:0;filter:blur(6px);transform:translateY(.2em)}to{opacity:1;filter:none;transform:none}}
.jv-route,.jv-by,.jv-case {transition:opacity .6s var(--ease),transform .6s var(--ease)}
.jv-verdict .is-off {opacity:0;transform:translateY(6px)}

/* Before the script runs the markup already shows the first request, landed. */
.jv:not([data-state]) .jv-caret {display:none}
.jv:not([data-state]) .jv-path {border-left:1px solid var(--rule);padding-left:1.4rem}

@media(max-width:1180px){
 .jv-stage {grid-template-columns:minmax(0,1fr)}
 .jv-verdict {min-height:0;max-width:40rem}
}
@media(max-width:760px){
 .jv-lines,.jv-marker {display:none}
 .jv-path,.jv:not([data-state]) .jv-path {border-left:1px solid var(--rule);padding-left:1.1rem}
 .jv-step {grid-template-columns:minmax(0,1fr);padding-bottom:2.6rem}
 .jv-q {font-size:1.125rem}
 .jv-exit {grid-column:1;grid-row:3;margin-top:.9rem}
 .jv-down {bottom:.9rem}
 .jv-end .jv-exit {margin-top:0}
 .jv-end .jv-exit strong {font-size:1.125rem}
}