:root{--paper:#f5f5ee;--ink:#20261f;--muted:#74796c;--lime:#c2f366;--line:#dedfd4}
.demo-header{position:absolute;border-bottom:1px solid transparent}.brand-logo{display:block;width:319px;max-width:100%;height:auto;object-fit:contain}.demo-page{padding-top:108px}.demo-hero{padding:58px var(--page-full-gutter) 46px}.demo-hero-grid{display:grid;grid-template-columns:minmax(620px,1.3fr) minmax(390px,.7fr);align-items:end;gap:8vw;margin-top:25px}.demo-hero h1{font-size:clamp(62px,5.2vw,88px);line-height:1.02;font-weight:450}.demo-hero h1>span{color:#7ebc3e}.demo-hero-grid>div{padding-bottom:8px}.demo-hero p{font-size:17px;line-height:1.65;max-width:620px}.demo-hero small{display:block;margin-top:18px;color:var(--muted);font-size:12px}
.demo-interface{padding:0 0 105px}.demo-steps{list-style:none;margin:0;padding:17px 22px;display:flex;align-items:center;justify-content:center;gap:22px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:12px;color:#8a9083}.demo-steps li:not(.step-arrow){display:flex;align-items:center;gap:10px;transition:color .2s}.demo-steps li span{display:grid;place-items:center;width:24px;height:24px;border:1px solid #cfd3c7;border-radius:50%;font-size:10px}.demo-steps li.active{color:var(--ink)}.demo-steps li.active span{background:var(--lime);border-color:var(--lime)}.demo-steps li.done{color:#56624d}.demo-steps li.done span{background:#e3ead8;border-color:#cbd8bb}.step-arrow{font-size:16px;color:#b0b5aa}
.demo-controls{height:76px;display:flex;align-items:center;gap:14px;padding-inline:var(--page-full-gutter)}.demo-tabs{display:inline-flex;padding:4px;background:#FFFFFF;border-radius:10px}.demo-tabs button{min-width:145px;padding:10px 18px;border-radius:7px;background:transparent;font-size:13px}.demo-tabs button[aria-selected="true"]{background:var(--paper);box-shadow:0 1px 5px #25301d12}.demo-repeat{background:transparent;border:1px solid var(--line);border-radius:8px;padding:10px 14px;color:var(--muted);font-size:11px}.demo-repeat:hover{background:#eceee5;color:var(--ink)}.demo-controls>p{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:12px;margin-left:auto}.demo-controls>p i{width:7px;height:7px;border-radius:50%;background:#79a849}
.demo-workspace{position:relative;width:100%;max-width:none;height:min(830px,calc(100vh - 90px));min-height:750px;overflow:hidden;border:1px solid var(--line);border-radius:18px;background:#e7eadf}.demo-frame{display:block;width:100%;height:100%;border:0;background:#f5f5ee}.demo-frame[hidden]{display:none}
.demo-cta{padding:100px var(--page-full-gutter);display:flex;align-items:end;justify-content:space-between;gap:60px;border-top:1px solid var(--line)}.demo-cta h2{font-size:clamp(55px,5.3vw,84px);line-height:1.04;font-weight:450}.demo-cta>div{display:flex;gap:12px;padding-bottom:8px}.demo-cta .button{white-space:nowrap}footer{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:37px var(--page-full-gutter);border-top:1px solid var(--line);font-size:10px;color:#7a856d}footer .brand{flex:0 1 319px;min-width:0}footer p{margin-right:auto}footer>a:last-child{margin-left:35px}
.tour{position:fixed;inset:0;z-index:1000;pointer-events:none}.tour-shade{position:fixed;background:rgba(20,25,18,.64);pointer-events:none}.tour-focus{position:fixed;border:2px solid var(--lime);border-radius:12px;box-shadow:0 0 0 5px rgba(194,243,102,.18);pointer-events:none;transition:.22s}.tour-card{position:fixed;width:320px;padding:19px 20px;background:var(--paper);border:1px solid #d8ddcf;border-radius:14px;box-shadow:0 18px 55px rgba(21,30,17,.24);pointer-events:auto}.tour-close{position:absolute;right:11px;top:9px;width:28px;height:28px;border-radius:50%;background:transparent;color:var(--muted);font-size:21px}.tour-index{font-size:9px;letter-spacing:.12em;color:#708160}.tour-card h2{font-size:23px;line-height:1.12;margin:10px 26px 9px 0;letter-spacing:-.04em}.tour-card p{color:var(--muted);font-size:12px;line-height:1.55}.tour-card>div{display:flex;align-items:center;justify-content:space-between;margin-top:15px}.tour-skip{padding:6px 0;background:transparent;color:var(--muted);font-size:11px;text-decoration:underline;text-underline-offset:4px}.tour-next{padding:9px 14px;border-radius:8px;background:var(--lime);font-size:12px;font-weight:600}.tour-card.final .tour-skip{display:none}
.demo-hero{padding-left:50px;padding-right:50px}
.demo-hero-grid{align-items:start}
.demo-interface{padding-left:50px;padding-right:50px}
.demo-controls{padding-left:0;padding-right:0}
.demo-workspace.admin-active{width:calc(100% + 100px);height:auto;min-height:0;margin-inline:-50px;overflow:visible;border:0;border-top:1px solid var(--line);border-radius:0;background:transparent}
.demo-interface:has(.demo-workspace.admin-active){padding-bottom:0}
.demo-interface:has(.demo-workspace.admin-active) .demo-status-row{display:none}
.demo-admin-frame{display:block;width:100%;height:var(--demo-admin-height,750px);border:0;overflow:hidden;background:#f4f5ef}
.demo-admin-frame[hidden]{display:none}
.demo-hero-copy{position:relative}
.demo-hero-copy .demo-controls{position:absolute;top:100%;left:0;right:0;height:auto;margin-top:10px;gap:12px}
.demo-hero-copy .demo-tabs{flex-shrink:0}
.demo-hero-copy .demo-tabs button,.demo-repeat{display:inline-flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap}
.demo-hero-copy .demo-tabs button{width:170px;min-width:170px;height:48px;padding:10px 14px}
.demo-tabs button[aria-selected="true"],.demo-tabs button[aria-selected="true"]:hover{background:#C2F366;color:var(--ink);box-shadow:none;filter:none;opacity:1}
.demo-controls svg{width:15px;height:15px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.demo-status-row{height:76px;display:flex;align-items:center;justify-content:flex-end}
.demo-status-row p{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:12px}
.demo-status-row i{width:7px;height:7px;border-radius:50%;background:#79a849}

@media(max-width:800px){footer .brand{flex-basis:176px}footer .brand-logo{width:176px}}

/* Responsive host: embedded products retain their own mobile layouts. */
.demo-hero-grid>*{min-width:0}
.tour-card{max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);overflow:auto}
@media(max-width:1400px){
 .demo-hero-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:40px}
 .demo-hero-copy .demo-controls{position:static;flex-wrap:wrap;margin-top:24px}
 .demo-hero-copy .demo-tabs{display:flex;flex:1 1 100%;min-width:0}
 .demo-hero-copy .demo-tabs button{width:auto;min-width:0;flex:1}
 .demo-status-row{height:auto;min-height:48px}
 .demo-cta{gap:30px;flex-wrap:wrap}
}
@media(max-width:1024px){
 .demo-hero,.demo-interface{padding-inline:var(--page-full-gutter)}
 .demo-workspace,.demo-workspace.admin-active{width:100%;height:calc(100dvh - 32px);min-height:0;max-height:830px;margin-inline:0}
 .demo-workspace.admin-active{overflow:hidden}
 .demo-admin-frame{height:100%}
 .demo-interface{padding-bottom:60px}
}
@media(max-width:800px){
 .demo-page{padding-top:82px}
 .demo-hero{padding-block:36px 24px}
 .demo-hero-grid{grid-template-columns:minmax(0,1fr);gap:24px;margin-top:18px}
 .demo-hero h1{font-size:clamp(40px,8vw,62px);overflow-wrap:anywhere}
 .demo-hero p{font-size:15px}
 .demo-hero small{margin-top:12px}
 .demo-controls{width:100%}
 .demo-hero-copy .demo-controls{gap:10px}
 .demo-hero-copy .demo-tabs button{padding-inline:8px;min-height:44px}
 .demo-status-row{justify-content:flex-start;padding-block:12px}
 .demo-status-row p{align-items:flex-start;line-height:1.6}
 .demo-status-row i{flex:none;margin-top:6px}
 .demo-workspace{border-radius:12px}
 .demo-cta{padding-block:48px;align-items:flex-start;gap:24px}
 .demo-cta h2{font-size:clamp(38px,8vw,60px)}
 .demo-cta>div{flex-wrap:wrap;width:100%}
 .demo-cta .button{white-space:normal;max-width:100%}
 .demo-steps{justify-content:flex-start;overflow:auto;white-space:nowrap}
 .demo-steps li{flex-shrink:0}
}