/* One entry on the landing, one dedicated guided demo. */
.demo-entry{padding:90px 0 100px;scroll-margin-top:65px;background:linear-gradient(180deg,#fff,#f9f8fc 60%,#fff)}
.demo-entry-layout{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:65px;align-items:center}
.demo-entry-copy h2{font-size:clamp(34px,4vw,49px);line-height:1.12;letter-spacing:-.035em;margin:20px 0}
.demo-entry-copy p{color:#72839b;font-size:17px;line-height:1.6;max-width:36ch;margin:0 0 27px}
.demo-entry-copy small{display:block;font-size:11px;color:#8390a3;margin-top:15px}
.demo-entry-preview{position:relative;display:block;border-radius:12px;overflow:hidden;border:1px solid #e0e4ef;box-shadow:0 20px 55px #26467512;transition:transform .25s}
.demo-entry-preview:hover{transform:translateY(-4px)}
.demo-entry-preview img{display:block;width:100%;height:auto}
.demo-entry-preview>span{display:flex;align-items:center;justify-content:space-between;padding:13px 18px;background:#fff;color:#536b8c;font-size:12px}
.demo-entry-preview b{font-size:18px;font-weight:400;color:#8d67be}
.demo-page{background:#fff;color:#294f79;min-height:100dvh}
.demo-page [hidden]{display:none!important}
.demo-spectrum{height:4px;background:linear-gradient(90deg,#ff8a00,#ffc400,#40c8c1,#008bc3,#9756cd)}
.demo-page-header{display:flex;justify-content:space-between;align-items:center;gap:25px;max-width:1320px;margin:auto;padding:22px 35px;border-bottom:1px solid #e6e9f1}
.demo-page-header .logo{display:flex;align-items:center;gap:20px;font-size:13px;color:#526680;text-decoration:none}
.demo-page-header .logo span{padding-left:20px;border-left:1px solid #dfe4ee}
.demo-return{font-size:13px;text-decoration:none;color:#785aa3}
.demo-page-main{max-width:1250px;margin:0 auto;padding:38px 35px 25px}
.demo-case-intro{display:flex;justify-content:space-between;gap:25px;align-items:center;margin-bottom:27px}
.demo-case-intro h1{font-size:clamp(25px,3vw,37px);line-height:1.15;letter-spacing:-.03em;margin:13px 0 12px;color:#203e63}
.demo-case-intro p{font-size:14px;line-height:1.6;color:#7b899c;margin:0}
.demo-case-source{font-size:12px;line-height:1.8;color:#536d8f;text-align:right;flex-shrink:0}
.demo-case-source small{font-size:10px;color:#8791a2}
.demo-step-nav{display:flex;justify-content:space-between;gap:10px;border-top:1px solid #e5e8f1;border-bottom:1px solid #e5e8f1;padding:12px 0;overflow-x:auto;scrollbar-width:thin}
.demo-step-nav button{font:inherit;display:flex;align-items:center;gap:10px;white-space:nowrap;padding:11px 14px;border:0;border-radius:25px;background:transparent;color:#687e98;cursor:pointer;font-size:12px;min-height:42px}
.demo-step-nav button>span{font-size:10px;color:#9c83b8}
.demo-step-nav button[aria-pressed=true]{background:#eee9f7;color:#7959ab}
.demo-stage{padding:28px 0 0}
.demo-stage-heading{margin-bottom:20px}
.demo-stage-heading>.kicker{font-size:9px}
.demo-stage-heading h2{font-size:clamp(25px,2.7vw,33px);line-height:1.15;letter-spacing:-.03em;margin:10px 0;color:#294f79}
.demo-stage-heading p{font-size:14px;color:#78889d;line-height:1.5;margin:0}
.demo-page .real-product-demo{grid-template-columns:minmax(0,3.5fr) minmax(210px,1fr);align-items:center;gap:30px}
.demo-page .capture-open{max-height:none;background:#f6f7fc}
.demo-page .capture-open img{height:auto;max-height:none;object-fit:contain}
.demo-page .capture-context h3{font-size:23px}
.demo-page .capture-context p{font-size:14px}
.demo-page-controls{display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid #e5e8f1;margin-top:25px;padding-top:20px}
.demo-page-controls>span{font-size:11px;color:#8793a4}
.demo-page-controls .btn{min-height:44px;font-size:12px}
.demo-page-controls button:disabled{opacity:.4;cursor:default}
.demo-end-note{font-size:11px;color:#8593a6;text-align:center;margin:25px 0 5px}
.demo-page :focus-visible,.demo-entry :focus-visible{outline:3px solid #9975cb;outline-offset:5px}
@media(max-width:760px){
 .demo-entry{padding:55px 0 65px}.demo-entry-layout{grid-template-columns:1fr;gap:30px}.demo-entry-copy p{max-width:none;font-size:16px}.demo-entry-copy h2{font-size:36px}
 .demo-page-header{padding:18px 20px;gap:15px}.demo-page-header .logo{gap:10px}.demo-page-header .logo img{width:95px;height:auto}.demo-page-header .logo span{display:none}.demo-return{font-size:11px}
 .demo-page-main{padding:25px 20px}.demo-case-intro{display:block;margin-bottom:22px}.demo-case-intro h1{font-size:28px}.demo-case-intro p{font-size:13px}.demo-case-source{display:block;text-align:left;font-size:10px;margin-top:13px}.demo-case-source br{display:none}.demo-case-source small{margin-left:10px}
 .demo-step-nav{gap:4px;justify-content:flex-start}.demo-step-nav button{padding:10px 12px;font-size:11px;gap:8px}
 .demo-stage{padding-top:22px}.demo-stage-heading h2{font-size:25px}.demo-stage-heading p{font-size:13px}
 .demo-page .real-product-demo{grid-template-columns:1fr;gap:20px}.demo-page .capture-open img{height:auto;max-height:none}.demo-page .capture-context h3{font-size:20px}.demo-page .capture-context p{font-size:13px}.demo-page .capture-related{font-size:12px;margin-top:8px}
 .demo-page-controls{flex-wrap:wrap;gap:12px}.demo-page-controls>span{order:3;width:100%;text-align:center}.demo-page-controls .btn{padding:12px 15px;font-size:11px}.demo-page-controls #demo-finish{max-width:65%;text-align:center}
}
@media(prefers-reduced-motion:reduce){.demo-entry-preview{transition:none}}
.demo-case-intro .kicker,.demo-stage-heading .kicker{margin-bottom:0}.demo-page-main{padding-top:25px}.demo-case-intro h1{font-size:clamp(25px,2.7vw,33px)}.demo-page-controls{position:sticky;bottom:0;z-index:5;background:#fff;padding-bottom:15px;box-shadow:0 -12px 20px #ffffffdd}.demo-step-nav{position:sticky;top:0;z-index:6;background:#fff}.demo-entry{padding-top:60px}.demo-entry-preview{text-decoration:none}@media(max-width:760px){.demo-case-intro h1 span{display:block}.demo-page-controls{position:static;box-shadow:none}}