.clearspan-demos{color:#172632;background:#f8f9fb;min-height:100dvh;font-family:Manrope,Arial,sans-serif}.clearspan-demos *{box-sizing:border-box}.clearspan-demos a{color:inherit;text-decoration:none}.demo-site-header{border-bottom:1px solid #dde2e8;justify-content:space-between;align-items:center;max-width:1300px;height:82px;margin:auto;padding:0 40px;display:flex}.demo-brand{letter-spacing:-.7px;align-items:center;gap:10px;font-size:23px;font-weight:700;display:flex}.demo-brand img{width:30px;height:30px}.demo-site-header>a:last-child{align-items:center;gap:10px;font-size:13px;display:flex}.demo-introduction{max-width:1220px;margin:0 auto;padding:70px 0 50px}.demo-eyebrow{letter-spacing:1.8px;color:#566875;text-transform:uppercase;font-size:10px;font-weight:650}.demo-introduction h1{letter-spacing:-3px;margin:20px 0;font-size:clamp(42px,5.7vw,76px);font-weight:550;line-height:1.08}.demo-introduction p{color:#5c6b78;max-width:470px;font-size:17px;line-height:1.7}.demo-sample-note{color:#5c6b78;align-items:center;gap:8px;margin-top:23px;font-size:12px;display:flex}.demo-sample-note>span{background:#4673bd;border-radius:100%;width:6px;height:6px}.demo-examples{grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 30px;max-width:1220px;margin:auto;display:grid}.demo-example{min-width:0}.demo-example-cover{isolation:isolate;background:#253744;border-radius:16px;height:340px;display:block;position:relative;overflow:hidden}.demo-example-cover>img{object-fit:cover;opacity:.73;width:100%;height:100%;transition:transform .4s;position:absolute;inset:0}.demo-example-cover:hover>img{transform:scale(1.025)}.demo-example-cover:after{content:"";z-index:-1;background:linear-gradient(#0002,#0000 35%,#091a2b66);position:absolute;inset:0}.demo-example-tag{color:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#1726323b;border:1px solid #fff5;border-radius:30px;padding:8px 12px;font-size:11px;position:absolute;top:20px;left:20px}.demo-example-open{color:#223849;background:#fff;border-radius:8px;align-items:center;gap:10px;padding:12px 16px;font-size:12px;font-weight:600;display:flex;position:absolute;bottom:20px;right:20px}.demo-preview-ui{background:#f7fafaf2;border:1px solid #fff9;border-radius:12px;align-items:center;gap:12px;max-width:calc(100% - 48px);padding:16px;display:flex;position:absolute;bottom:76px;left:24px;box-shadow:0 12px 32px #071d3922}.demo-plan{background:#eceae2;border:2px solid #d1c8b8;grid-template-columns:repeat(2,1fr);gap:14px;width:128px;height:108px;padding:18px;display:grid}.demo-plan i{background:#f9f6ee;border:1px solid #c1b29b;border-radius:50%}.demo-plan-note,.demo-quantity{flex-direction:column;gap:10px;padding:8px;font-size:12px;display:flex}.demo-plan-note>span,.demo-quantity>span{color:#657785;font-size:10px}.demo-preview-player{color:#fff;background:linear-gradient(145deg,#1a293c,#3c5369);border-radius:7px;place-items:center;width:152px;height:92px;display:grid}.demo-mini-tracks{flex-direction:column;gap:7px;width:105px;display:flex}.demo-mini-tracks i{background:repeating-linear-gradient(90deg,#a9bbd6 0 25px,#e8edf5 25px 28px);border-radius:4px;height:18px}.demo-mini-tracks i:nth-child(2){background:#d1c5e2;width:75%}.demo-mini-tracks i:last-child{background:#a5bbb9;height:12px}.demo-guest-count{gap:9px;padding:8px;font-size:14px;display:grid}.demo-guest-count>span{color:#657785;font-size:10px}.demo-guest-faces{padding-right:8px;display:flex}.demo-guest-faces i{background:#c9d7df;border:3px solid #fff;border-radius:50%;place-items:center;width:40px;height:40px;margin-left:-6px;font-size:11px;font-style:normal;display:grid}.demo-guest-faces i:nth-child(2){background:#e7d3c0}.demo-guest-faces i:nth-child(3){background:#d8d3e2}.demo-drawing{background:repeating-linear-gradient(0deg,#edf2f7 0 14px,#d8e1ec 14px 15px);border:2px solid #647e9e;grid-template-columns:1fr 1fr;gap:5px;width:140px;height:105px;padding:15px;display:grid}.demo-drawing i{background:#f6f8fb;border:2px solid #6d859f}.demo-drawing i:last-child{grid-column:1/-1}.demo-quantity>span{justify-content:space-between;gap:20px;display:flex}.demo-example-body{padding:24px 3px 0}.demo-example-body h2{letter-spacing:-.8px;margin:10px 0;font-size:27px;font-weight:550}.demo-example-body p{color:#64717e;max-width:470px;margin:10px 0 18px;font-size:14px;line-height:1.7}.demo-example details{color:#415a70;border-top:1px solid #dce3e9;padding-top:14px;font-size:12px}.demo-example summary{cursor:pointer;width:fit-content}.demo-example ol{margin:14px 0 0;padding-left:18px;line-height:2}.demo-page-footer{border-top:1px solid #dce3e9;justify-content:space-between;align-items:center;gap:24px;max-width:1220px;margin:60px auto 0;padding:25px 0 40px;font-size:12px;display:flex}.demo-page-footer>a{white-space:nowrap;align-items:center;gap:8px;display:flex}.demo-page-footer>p{color:#6a7a87;max-width:310px;font-size:11px;line-height:1.6}:is(.clearspan-demos a:focus-visible,.clearspan-demos summary:focus-visible){outline-offset:5px;outline:3px solid #648ee1}@media (max-width:1320px){.demo-introduction,.demo-examples,.demo-page-footer{margin-left:40px;margin-right:40px}}@media (max-width:700px){.demo-site-header{height:68px;padding:0 20px}.demo-brand{font-size:21px}.demo-site-header>a:last-child{font-size:11px}.demo-introduction,.demo-examples,.demo-page-footer{margin-left:20px;margin-right:20px}.demo-introduction{padding:42px 0 32px}.demo-introduction h1{letter-spacing:-1.8px}.demo-introduction p{font-size:15px}.demo-examples{grid-template-columns:1fr;gap:36px}.demo-example-cover{height:290px}.demo-example-body h2{font-size:24px}.demo-preview-ui{max-width:calc(100% - 32px);padding:12px;left:16px}.demo-plan{width:100px;height:90px;padding:12px}.demo-preview-player{width:125px}.demo-page-footer{flex-wrap:wrap;gap:18px;padding-bottom:24px}.demo-page-footer>p{order:3;width:100%;max-width:none}}@media (prefers-reduced-motion:reduce){.demo-example-cover>img{transition:none}.demo-example-cover:hover>img{transform:none}}