/* Marketing presentation around the isolated, interactive workspace. */
.hero-actions { display:flex; align-items:center; gap:12px; margin:30px 0 38px; }
.demo-button { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 25px; border:1px solid transparent; border-radius:999px; font:500 14px/1.2 var(--body); letter-spacing:-.015em; white-space:nowrap; -webkit-tap-highlight-color:transparent; transition:background-color .18s,border-color .18s,box-shadow .18s,transform .18s; }
.demo-button.primary { background:#e1e8d9; color:#17211b; box-shadow:inset 0 1px 0 #ffffff40,0 2px 8px #0000000d; }
.demo-button.primary:hover { background:#edf2e7; }
.demo-button.ghost { background:#ffffff04; color:#f0f2ed; border-color:#dce5dc52; }
.demo-button.ghost:hover { background:#ffffff0d; border-color:#dce5dc8c; }
.demo-button:active { transform:scale(.98); }
.demo-button:focus-visible { outline:3px solid #c5d9b0; outline-offset:4px; }
.hero-bottom { margin-top:30px; }
.hero h1 { margin-top:42px; }
.hero-content { padding-top:170px; }
.demo-section { padding:96px 0 70px; background:radial-gradient(ellipse at 5% 5%,#35423842,transparent 48%),radial-gradient(ellipse at 95% 95%,#3e49312e,transparent 42%),#0b100e; color:#b1b9b2; scroll-margin-top:0; }
.demo-section>.page-width,.demo-story { width:min(1440px,calc(100% - 112px)); margin-inline:auto; }
.demo-overline { display:flex; justify-content:center; font:9px var(--mono); letter-spacing:.13em; color:#93a58e; }
.demo-overline i { display:inline-block; width:5px; height:5px; margin-right:8px; border-radius:50%; background:#c5d9b0; }
.demo-heading { margin:22px auto 52px; text-align:center; }
.demo-heading h2 { font:500 clamp(37px,4.4vw,64px)/1.1 var(--display); letter-spacing:-.055em; margin:0; color:#edf0e8; }
.demo-heading>p { font:400 clamp(14px,1.5vw,18px)/1.55 var(--body); color:#a4afa5; margin:20px auto 0; max-width:640px; }
.demo-story { position:relative; }
.demo-shell { position:relative; width:100%; background:#111914; border:1px solid #2c362f; border-radius:14px; overflow:hidden; box-shadow:0 30px 90px -35px #0009; }
.demo-viewport { --workspace-scale:.8; aspect-ratio:16/9; position:relative; background:#111914; }
#product-workspace { position:absolute; top:0; left:0; display:block; width:calc(100% / var(--workspace-scale)); height:calc(100% / var(--workspace-scale)); transform:scale(var(--workspace-scale)); transform-origin:top left; border:0; background:#111914; pointer-events:none; }
.demo-loading { position:absolute; inset:0; background:#111914; display:grid; place-items:center; color:#99ac9a; font:12px var(--mono); }
.demo-loading[hidden] { display:none; }
.demo-navigation { margin-top:18px; }
.demo-chapters { position:relative; display:flex; align-items:center; justify-content:flex-start; gap:0; overflow-x:auto; scrollbar-width:none; }
.demo-chapters::-webkit-scrollbar { display:none; }
.demo-chapter { position:relative; display:flex; align-items:center; gap:9px; flex-shrink:0; border:0; background:none; padding:7px 0; white-space:nowrap; cursor:pointer; color:#737f76; transition:color .2s; }
.demo-chapter:not(:last-child)::after { content:''; display:block; width:26px; height:1px; background:#303b33; margin:0 17px; }
.demo-chapter>span { font:10px var(--mono); color:inherit; }
.demo-chapter strong { font:400 12px var(--mono); }
.demo-chapter:hover,.demo-chapter.active { color:#e0e9d6; }
.demo-chapter.active>span { color:#c5d9b0; }
.demo-scene { display:flex; gap:13px; align-items:flex-start; min-height:96px; padding:14px 0 18px; }
.demo-scene-mark { color:#c5d9b0; font:22px/1 var(--body); padding-top:2px; }
.demo-scene h3 { color:#e0e6dc; font:400 17px/1.5 var(--body); margin:0 0 5px; letter-spacing:-.02em; }
.demo-scene p { color:#8d9c90; font:12px/1.75 var(--body); margin:0; max-width:1000px; }
.demo-footnote { display:flex; justify-content:space-between; align-items:center; gap:32px; margin-top:12px; padding:20px 4.8% 0; border-top:1px solid #243028; }
.demo-footnote>span { color:#7b8b7e; font-size:11px; line-height:1.7; max-width:70%; }
.demo-footnote a { display:flex; gap:22px; color:#c7d6bf; font-size:12px; padding-bottom:7px; border-bottom:1px solid #687c61; white-space:nowrap; }
.demo-section :is(button,a):focus-visible { outline:2px solid #c5d9b0; outline-offset:4px; }
.workflow-questions { padding:105px 0; background:#f7f7f2; border-top:1px solid #e1e4dc; }
.questions-layout { display:grid; grid-template-columns:.9fr 1.3fr; gap:100px; }
.questions-layout h2 { font:500 clamp(43px,4.4vw,68px)/1.08 var(--display); letter-spacing:-.06em; margin:30px 0 25px; }
.questions-layout h2 em { font-family:Georgia,serif; font-weight:400; color:#283344; }
.questions-layout>div>p { font-size:14px; line-height:1.85; color:#637187; }
.questions-contact { display:inline-block; margin-top:25px; border-bottom:1px solid #b9c6ac; padding-bottom:10px; font-size:12px; color:#4d6845; }
.questions-list { border-top:1px solid #d9e2d0; }
.questions-list details { border-bottom:1px solid #dce5d4; padding:25px 0; }
.questions-list summary { display:flex; justify-content:space-between; align-items:center; gap:25px; cursor:pointer; list-style:none; font-size:15px; line-height:1.65; letter-spacing:-.02em; color:#3f4b39; }
.questions-list summary::-webkit-details-marker { display:none; }
.questions-list summary>span { font-size:22px; color:#9aa893; transition:transform .2s; flex-shrink:0; }
.questions-list details[open] summary>span { transform:rotate(45deg); }
.questions-list p { color:#66715f; font-size:13px; line-height:1.95; margin:17px 20px 0 0; }
@media(max-width:1100px) {
 .demo-section>.page-width,.demo-story { width:calc(100% - 72px); }
 .questions-layout { gap:55px; }
}
@media(max-width:800px) {
 .demo-section { padding:65px 0 45px; }
 .demo-section>.page-width,.demo-story { width:calc(100% - 40px); }
 .demo-heading { margin:20px auto 32px; }
 .demo-heading h2 { font-size:clamp(35px,7vw,51px); }
 .demo-heading>p { font-size:14px; max-width:430px; }
 .demo-viewport { --workspace-scale:.9; aspect-ratio:auto; height:clamp(460px,120vw,620px); }
 .demo-shell { border-radius:10px; }
 .demo-navigation { margin-top:13px; }
 .demo-chapter>span,.demo-chapter strong { font-size:10px; }
 .demo-chapter:not(:last-child)::after { width:15px; margin:0 11px; }
 .demo-scene { min-height:120px; gap:10px; padding-top:12px; }
 .demo-scene h3 { font-size:15px; }
 .demo-scene p { font-size:11px; }
 .demo-footnote { align-items:flex-start; gap:18px; padding:18px 0 0; }
 .demo-footnote>span { font-size:9px; max-width:63%; }
 .demo-footnote a { font-size:10px; gap:8px; }
 .hero-actions { gap:10px; flex-wrap:wrap; margin-top:25px; }
 .demo-button { min-height:46px; padding-inline:21px; }
 .hero-content { padding-top:160px; }
 .workflow-questions { padding:65px 0; }
 .questions-layout { display:block; }
 .questions-layout h2 { font-size:48px; }
 .questions-list { margin-top:40px; }
 .questions-list summary { font-size:14px; }
 .questions-list p { font-size:12px; }
}
@media(prefers-reduced-motion:reduce) { .demo-button,.demo-chapter,.questions-list summary>span { transition:none; } }