/* Invitation, choice, then a guided example. Content is never tied to viewport height. */
.demo-invitation{margin-bottom:44px}
.demo-heading{display:grid;grid-template-columns:1fr;gap:65px;align-items:end}
.demo-heading h2{font-size:clamp(38px,4.3vw,66px);line-height:1.08;letter-spacing:-.045em}
.demo-heading>p{font-size:17px;line-height:1.8;color:#c0c0c0;max-width:380px;padding-bottom:3px}
.demo-heading>p>span{display:block;color:#858585;font-size:13px;margin-top:12px}
.demo-route{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));list-style:none;padding:0;margin:36px 0 0;position:relative;--demo-progress:0%;isolation:isolate}
.demo-route:before,.demo-route:after{content:'';height:1px;position:absolute;left:8.333%;right:8.333%;top:24px;background:#ffffff27;z-index:-1}
.demo-route:after{right:auto;width:calc(var(--demo-progress)*.83333);background:#f04426;box-shadow:0 0 12px #f01f0150;transition:width .65s ease}
.demo-stop{text-align:center;font-size:11px;color:#777;position:relative}
.demo-node{display:flex;align-items:center;justify-content:center;width:49px;height:49px;margin:0 auto 14px;background:#0e0e0e;border-radius:50%;border:1px solid #ffffff25;transition:color .3s,border-color .3s,box-shadow .3s;color:#858585}
.demo-node svg{width:24px;height:26px;stroke-width:1.7}
.demo-stop.is-done{color:#bbb}
.demo-stop.is-done .demo-node{border-color:#793124;color:#ffa78d}
.demo-stop.is-current{color:#fff}
.demo-stop.is-current .demo-node{color:#fff1e6;border-color:#f04c2e;box-shadow:0 0 0 6px #f01f0112,0 0 28px #f01f0126}
.demo-stop:last-child.is-current .demo-node{background:#f01f01;color:white;box-shadow:0 0 0 7px #f01f0120,0 0 32px #f01f0140}
.demo-picker{margin:0;padding:32px;border:1px solid #ffffff20;border-radius:10px;background:#121212}
.demo-picker-heading{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:24px}
.demo-picker-heading h3{font-size:27px;font-weight:600;letter-spacing:-.025em;line-height:1.2}
.demo-picker-heading>span{font-size:12px;color:#858585}
.demo-choices{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.demo-choices button{text-align:left;position:relative;padding:20px 18px;background:#171717;border:1px solid #ffffff20;border-radius:6px;min-width:0;transition:background .2s,border-color .2s}
.demo-choice-number{display:block;color:#747474;font-size:10px;letter-spacing:.08em;margin-bottom:17px}
.demo-choices strong{display:block;font-size:16px;line-height:1.3;font-weight:550;letter-spacing:-.02em;color:#e8e8e8;margin-bottom:9px}
.demo-choice-context{display:block;font-size:12px;color:#939393;line-height:1.6;max-width:200px}
.demo-choice-check{position:absolute;right:15px;top:15px;display:flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;font-size:10px;border:1px solid #ffffff25;color:transparent}
.demo-choices button[aria-pressed=true]{border-color:#d7422a;background:#201613}
.demo-choices button[aria-pressed=true] .demo-choice-check{border-color:#f01f01;background:#f01f01;color:white}
.demo-choices button:hover{border-color:#d7422a}
.demo-launch{margin-top:25px;font-size:11px;line-height:1.7;color:#858585}
.demo-session{display:flex;align-items:center;justify-content:space-between;gap:25px;border-top:1px solid #ffffff20;padding-top:26px;margin-bottom:26px}
.demo-session .mono{display:block;font-size:9px;color:#888;margin-bottom:7px}
.demo-session strong{display:block;font-size:20px;font-weight:550;letter-spacing:-.02em}
.demo-session button{font-size:12px;flex-shrink:0}
.path[data-demo-mode=guided] .story-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:7%;align-items:start;scroll-margin-top:12px}
.path[data-demo-mode=guided] .story-copy{display:block}
.path[data-demo-mode=guided] .story-step{display:none;min-height:0;padding:34px 0;opacity:1}
.path[data-demo-mode=guided] .story-step.is-active{display:block}
.path[data-demo-mode=guided] .story-visual{position:relative;top:auto;margin:0;max-width:none}
.path[data-demo-mode=guided] .story-step h3{font-size:clamp(26px,3vw,41px);line-height:1.15}
.path[data-demo-mode=guided] .story-step p{font-size:14px}
.path[data-demo-mode=guided] .story-board{scroll-margin-top:12px}
.path[data-demo-mode=guided] .story-controls{display:flex}
.demo-picker,.demo-session{scroll-margin-top:12px}
.path[data-demo-running=true] .demo-route{margin:24px 0 32px}
@media(max-width:1100px){.demo-heading{gap:35px}.demo-heading>p{font-size:15px}.demo-choices{grid-template-columns:repeat(2,minmax(0,1fr))}.demo-choice-context{max-width:100%}.demo-choices strong{font-size:18px}.demo-choices button{padding:19px 22px}.demo-choice-number{margin-bottom:12px}}
@media(max-width:900px){.demo-heading{grid-template-columns:1fr;gap:22px}.demo-heading h2{font-size:clamp(36px,6vw,56px)}.demo-heading>p{max-width:600px;font-size:16px}.demo-heading>p br{display:none}.demo-invitation{margin-bottom:32px}.demo-route{margin:32px 0 0}.demo-stop{font-size:10px}.demo-node{width:43px;height:43px}.demo-route:before,.demo-route:after{top:21px}.path[data-demo-mode=guided] .story-layout{grid-template-columns:1fr}.path[data-demo-mode=guided] .story-copy{display:none}.path[data-demo-mode=guided] .story-visual{width:100%;max-width:620px;margin:0 auto}}
@media(max-width:640px){.demo-heading h2{font-size:clamp(32px,8.7vw,44px)}.demo-heading>p{font-size:14px;line-height:1.75}.demo-heading>p>span{font-size:12px;margin-top:9px}.demo-invitation{margin-bottom:28px}.demo-route{margin:28px 0 0;grid-template-columns:repeat(3,minmax(0,1fr));row-gap:26px}.demo-route:before,.demo-route:after{display:none}.demo-stop:before{content:'';height:1px;background:#ffffff22;position:absolute;left:calc(50% + 22px);width:calc(100% - 44px);top:21px;z-index:-1}.demo-stop:nth-child(3n):before{display:none}.demo-stop.is-done:before{background:#803321}.demo-stop{font-size:10px}.demo-node{margin-bottom:9px}.demo-picker{padding:24px 18px;border-radius:8px}.demo-picker-heading{display:block;margin-bottom:19px}.demo-picker-heading h3{font-size:24px}.demo-picker-heading>span{display:block;margin-top:7px;font-size:11px}.demo-choices{gap:10px}.demo-choices button{padding:16px 12px}.demo-choices strong{font-size:14px;min-height:36px;line-height:1.3}.demo-choice-context{font-size:11px;min-height:53px}.demo-choice-number{font-size:9px;margin-bottom:15px}.demo-choice-check{right:10px;top:12px;width:16px;height:16px}.demo-launch{display:block;margin-top:21px;font-size:10px}.demo-launch br{display:none}.demo-session{display:block;margin-bottom:20px}.demo-session strong{font-size:20px}.demo-session button{font-size:12px;margin-top:12px}.path[data-demo-mode=guided] .story-controls{gap:6px}.path[data-demo-mode=guided] .story-controls button{font-size:10px;padding:12px 8px}}
@media(prefers-reduced-motion:reduce){.demo-route:after,.demo-node,.demo-choices button{transition:none}}
html[data-motion=off] .demo-route:after,html[data-motion=off] .demo-node{transition:none}

.demo-stage-status{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.demo-complete-note{font-size:13px;color:#d5d5d5;line-height:1.7;margin:22px 0}
#complete-demo{margin:22px 0 8px}
#story-board[data-accepted=true] .result-symbol{color:#fff;background:#f01f01;border-color:#f01f01;box-shadow:0 0 0 8px #f01f0115}

/* A complete six-stage example opens below the chooser. */
#demo-experience{margin-top:46px}
#demo-experience[hidden],#demo-route[hidden]{display:none!important}
.demo-dialogue{display:grid;gap:16px;margin:25px 0 4px}
.demo-message{padding:18px 20px;border:1px solid #ffffff18;border-radius:12px 12px 12px 2px;background:#1b1b1b;margin-right:30px}
.demo-message small{display:block;font-size:9px;letter-spacing:.08em;color:#999;margin-bottom:9px}
.demo-message p{font-size:14px;line-height:1.7;color:#ddd}
.demo-reply{margin-right:0;margin-left:30px;border-radius:12px 12px 2px 12px;background:#232323}
.demo-panel-intro{font-size:13px;line-height:1.7;color:#aaa;margin-top:24px}
.demo-panel-note{font-size:13px;line-height:1.8;color:#aaa;margin-top:24px}
.demo-approval-summary{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:28px;border-top:1px solid #ffffff1a;padding-top:22px}
.demo-approval-summary>div{display:flex;flex-direction:column;gap:8px}
.demo-approval-summary span,.demo-approval-summary small{font-size:12px;color:#999}
.demo-approval-summary strong{font-size:26px;letter-spacing:-.04em;line-height:1.2}
.demo-step-controls{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:20px;font-size:11px;color:#999}
.demo-step-controls .text-link{font-size:12px;padding:12px 0;gap:12px}
.demo-step-controls button:disabled{opacity:.3;cursor:default}
.path[data-demo-mode=guided] .story-panel{padding-top:8px;min-height:380px}
#story-approval h4,#story-review h4{margin-top:24px}
#story-result>.text-link{display:flex;width:fit-content}
#story-board[data-accepted=true] .result-symbol{color:#fff;background:#f01f01;border-color:#f01f01;box-shadow:0 0 0 8px #f01f0115}
@media(max-width:640px){
 #demo-experience{margin-top:32px}
 .demo-dialogue{gap:12px;margin-top:22px}
 .demo-message{padding:15px 16px;margin-right:15px}
 .demo-reply{margin-left:15px;margin-right:0}
 .demo-message p{font-size:12px}
 .demo-message small{font-size:9px}
 .demo-panel-intro,.demo-panel-note{font-size:12px}
 .demo-approval-summary{gap:14px}
 .demo-approval-summary strong{font-size:23px}
 .demo-approval-summary span,.demo-approval-summary small{font-size:10px}
 .path[data-demo-mode=guided] .story-panel{min-height:0}
 .path[data-demo-mode=guided] .board-action{font-size:11px;padding:15px 12px;gap:12px}
 .demo-step-controls{font-size:10px;gap:12px}
}

/* Each stage opens its own part of the demonstration. */
.demo-stage-button{display:block;width:100%;padding:0;border:0;border-radius:5px;background:transparent;color:inherit;font:inherit;line-height:1.4;text-align:center;cursor:pointer}
.demo-stage-button:focus-visible{outline:2px solid #ff8065;outline-offset:7px}
.demo-stage-button:focus-visible .demo-node{border-color:#ff8065;color:#fff}
@media(hover:hover){.demo-stage-button:hover{color:#fff}.demo-stage-button:hover .demo-node{border-color:#f04c2e;color:#fff1e6;box-shadow:0 0 0 5px #f01f0112}}

/* Compare the agreed estimate with the actual bill in each example. */
.demo-case-outcome{display:block;margin-top:14px;font-size:11px;line-height:1.5;color:#ccc}
.demo-cost-comparison{margin-top:28px;border-top:1px solid #ffffff20}
.demo-cost-comparison>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 20px;padding:18px 0;border-bottom:1px solid #ffffff16}
.demo-cost-comparison>div[hidden],#demo-reestimate[hidden]{display:none}
.demo-cost-comparison span{font-size:12px;color:#999;grid-column:1/-1}
.demo-cost-comparison strong,.demo-cost-comparison b{font-size:20px;line-height:1.4}
.demo-cost-actual{color:#fff}
.demo-cost-outcome{margin:24px 0;padding-left:16px;border-left:2px solid #ff2e0c}
.demo-cost-outcome>strong{display:block;font-size:17px;line-height:1.5}
.demo-cost-outcome p{margin-top:10px;font-size:13px;line-height:1.8;color:#aaa}
@media(max-width:640px){.demo-cost-comparison strong,.demo-cost-comparison b{font-size:18px}.demo-cost-outcome>strong{font-size:15px}.demo-cost-outcome p{font-size:12px}.demo-case-outcome{font-size:10px}}