.demo-shell{min-height:100vh;background:#f5f3ed;color:#102725;font-family:Manrope,Arial,sans-serif}
.demo-header{max-width:1080px;margin:auto;padding:24px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.demo-brand{font-weight:800;color:#102725;text-decoration:none}.demo-header-actions{display:flex;align-items:center;gap:16px}.demo-header-actions>a:first-child{color:#102725}
.demo-main{max-width:1080px;margin:0 auto;padding:32px 24px 80px}.demo-intro{max-width:760px;margin:12px 0 36px}.demo-eyebrow{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#bc5b45}
.demo-intro h1{font-size:clamp(32px,5vw,54px);line-height:1.1;margin:16px 0}.demo-intro p{font-size:17px;line-height:1.6}.demo-disclaimer{font-size:14px!important;font-weight:600}
.demo-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.demo-panel{background:#fffefa;border:1px solid #deddd6;border-radius:20px;padding:30px;min-height:330px;box-shadow:0 10px 30px #1027250a;display:flex;flex-direction:column}
.demo-panel-heading h2,.demo-preview h2{font-size:clamp(22px,3vw,30px);line-height:1.25;margin:14px 0}.demo-step-count{font-size:13px;font-weight:800;color:#bc5b45}.demo-stage-description{line-height:1.7;max-width:42ch}.demo-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:auto;padding-top:22px}
.demo-button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 18px;border-radius:9px;border:2px solid #102725;background:#102725;color:white;text-decoration:none;font:700 14px Manrope,Arial,sans-serif;cursor:pointer;text-align:center}
.demo-button:hover{background:#254d47}.demo-button:focus-visible{outline:3px solid #f07a63;outline-offset:3px}.demo-button:disabled{opacity:.45;cursor:not-allowed}.demo-button--outline{background:transparent;color:#102725}.demo-button--outline:hover{color:white}.demo-button--light{background:#fffefa;color:#102725}
.demo-progress{display:flex;justify-content:space-between;gap:10px;margin:24px 0 16px}.demo-progress span{color:#53635f}.demo-slots{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.demo-slot{aspect-ratio:1;display:grid;place-items:center;border:2px dashed #c6cbc5;border-radius:50%;font-weight:800;color:#66736d;background:#f7f8f4}.demo-slot--paid{background:#dcf2e3;border:2px solid #39a86b;color:#174c30}.demo-rule{font-size:14px;line-height:1.6;margin-top:22px}
.demo-after{margin-top:28px;padding:28px 30px;background:#e8eee9;border-radius:18px}.demo-after h2{margin:0 0 8px}.demo-after p{margin:0}.demo-after .demo-actions{margin-top:4px}
@media(max-width:720px){.demo-header{padding:18px}.demo-header-actions{gap:10px}.demo-header-actions a{font-size:13px}.demo-main{padding:20px 18px 50px}.demo-grid{grid-template-columns:1fr}.demo-panel{min-height:290px;padding:24px}.demo-after{padding:24px}.demo-slots{gap:5px}}
@media(max-width:380px){.demo-header-actions{gap:6px}.demo-header-actions .demo-button{padding:8px}.demo-panel{padding:18px}}
.demo-video{margin:0 0 28px;padding:22px;background:#fffefa;border:1px solid #deddd6;border-radius:20px}.demo-video h2{font-size:22px;margin:0 0 14px}.demo-video video{display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:12px;background:#102725}.demo-video p{margin:12px 0 0;font-size:13px;color:#53635f}
.demo-lang{display:flex;align-items:center;gap:10px;margin-top:18px;font-size:14px}.demo-lang a{color:#102725}.demo-lang a[aria-current="page"]{font-weight:800;text-decoration-thickness:2px}
.demo-motion{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:17px;min-height:340px;padding:30px;color:#f9fcf5;background:radial-gradient(circle at 80% 15%,#326f5d,#102725 72%);border-radius:16px}.demo-motion__brand{letter-spacing:.22em;font-size:13px;font-weight:800;color:#bfe4cf}.demo-motion__stage{max-width:730px;font-size:clamp(24px,4vw,42px);font-weight:800;line-height:1.25}.demo-motion__count{color:#a9e7bf}.demo-motion__slots{display:flex;gap:13px}.demo-motion__slots i{width:35px;height:35px;border-radius:50%;border:2px solid #8cbaa2;background:transparent;transition:background .35s}.demo-motion__slots i.filled{background:#69d998;border-color:#69d998}.demo-motion__caption{max-width:670px;min-height:3em;font-size:clamp(15px,2vw,20px);line-height:1.5}.demo-video #demo-motion-toggle{margin-top:12px}
html[dir="rtl"] .demo-shell{font-family:"DejaVu Sans",Tahoma,Arial,sans-serif}html[dir="rtl"] .demo-button{font-family:"DejaVu Sans",Tahoma,Arial,sans-serif}html[dir="rtl"] .demo-intro,html[dir="rtl"] .demo-panel,html[dir="rtl"] .demo-after{text-align:right}