.sec-head{border-bottom:3px solid var(--ink)}
.sec-head h2{font-family:'Chau Philomene One',sans-serif;font-weight:400;font-size:clamp(26px,3.9vw,40px);line-height:1.06}
.dark .sec-head{border-bottom-color:var(--cream-10)}

.hero-inner{grid-template-columns:.92fr 1.08fr}
.hero .lede{font-size:17px;color:var(--ink-72);max-width:440px;margin-bottom:14px}
@media(max-width:900px){
.hero-inner{grid-template-columns:1fr;gap:40px;padding-bottom:44px}
.hero .lede,.hero p{max-width:none}
.hero h1{margin:16px 0 18px}
}
@media(max-width:760px){
.hero{padding:40px 22px 0}
.sep{padding:40px 22px 32px}
}

.demo{position:relative}
.demo-win{background:#fff;border-radius:16px;border:1.5px solid var(--ink-15);box-shadow:0 24px 60px rgba(43,37,64,.14);overflow:hidden}
.demo-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:var(--grey-40);border-bottom:1px solid var(--ink-15)}
.demo-bar i.d{width:8px;height:8px;border-radius:50%;background:var(--ink-15);flex:0 0 auto}
.demo-tab{position:relative;margin-left:8px;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-72);background:var(--cream);border:1px solid var(--ink-15);border-radius:6px;padding:5px 10px}
.demo-url{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--ink-45)}
.demo-page{padding:22px 24px 24px}
.demo-page .dh{position:relative;font-family:'Chau Philomene One',sans-serif;font-size:21px;line-height:1.2;display:inline-block;margin-bottom:9px}
.demo-page .dp{position:relative;font-size:13.5px;color:var(--ink-72);max-width:40ch;display:inline-block;margin-bottom:15px}
.demo-btn{position:relative;display:inline-block;font-family:'JetBrains Mono',monospace;font-size:11.5px;border:1.5px solid var(--ink-15);border-radius:999px;padding:9px 18px;color:var(--ink-72)}
.hit{background-image:linear-gradient(var(--terra-20),var(--terra-20));background-repeat:no-repeat;background-size:0% 100%;background-position:0 0;transition:background-size .5s var(--ease)}
.hit.is-live,.hit.is-done{background-size:100% 100%}
.hit.is-done{background-image:linear-gradient(var(--lavender-18),var(--lavender-18))}
.pin{position:absolute;top:-11px;right:-13px;width:21px;height:21px;border-radius:50%;background:var(--terra);color:var(--cream);font-family:'JetBrains Mono',monospace;font-size:11px;font-style:normal;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.4);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.demo-tab .pin{top:-10px;right:-10px;width:19px;height:19px;font-size:10px}
.is-live .pin{opacity:1;transform:scale(1)}
.is-done .pin{opacity:.4;transform:scale(.82)}
.annot{margin-top:18px}
.an-item{display:grid;grid-template-columns:20px 1fr;gap:11px;padding:7px 0;border-bottom:1px solid var(--ink-15);opacity:0;transform:translateY(7px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.an-item.in{opacity:1;transform:none}
.an-item .n{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--terra);padding-top:3px}
.an-item .t{font-size:13px;line-height:1.5;color:var(--ink)}
.verdict{margin-top:16px;opacity:0;transform:translateY(8px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.verdict.in{opacity:1;transform:none}
.verdict p{font-family:'Chau Philomene One',sans-serif;font-size:18px;line-height:1.3;border-left:3px solid var(--terra);padding-left:16px}
@media(max-width:900px){.demo-page{padding:24px 20px 26px}}

.pc{position:relative;overflow:hidden}
.pc .pn{position:absolute;right:16px;top:0;font-family:'Chau Philomene One',sans-serif;font-weight:400;font-size:86px;line-height:1;letter-spacing:0;color:var(--cream);opacity:.07;pointer-events:none;user-select:none;margin-bottom:0}
.pc h3,.pc p{position:relative}