/* Schematic layout using the Halcyon site's charcoal, ivory and phase accents. */
#demo{background:#0a0f17;color:#e8e3d6;border-top:1px solid #52606c;border-bottom:1px solid #52606c;padding:80px var(--gutter);scroll-margin-top:70px}
#demo .container{max-width:1440px}
#demo .eyebrow{color:#d4a574;font-size:10px;letter-spacing:.17em}
#demo .demo-header{border-bottom:1px solid #33404e;padding-bottom:22px;margin-bottom:22px;align-items:flex-end}
#demo h2{font-family:'IBM Plex Sans',sans-serif;font-size:clamp(32px,4.5vw,58px);font-weight:400;letter-spacing:-.04em;color:#e8e3d6}
#demo .demo-meta,#demo .demo-meta strong{color:#a39c8c}
#demo .demo-intro{color:#b6afa1;max-width:750px;font-family:var(--sans);font-size:15px;line-height:1.8;margin-bottom:28px}
#demo .demo-frame{aspect-ratio:auto;height:865px;background:#0a0f17;border:0;border-radius:0;box-shadow:0 14px 40px #00000040}
#demo .demo-placeholder{background:#0f1620;color:#e8e3d6}#demo .placeholder-label{color:#a39c8c}#demo .placeholder-rings{border-color:#33404e}
#demo .demo-caption{color:#a39c8c;text-align:left;padding:13px 0;border-bottom:1px solid #33404e;font-size:10px;letter-spacing:.02em}
#demo .demo-audit-cta{margin-top:20px}#demo .demo-audit-note{color:#a39c8c}
#demo .demo-audit-btn{color:#e8e3d6;border:1px solid #52606c;border-radius:0}#demo .demo-audit-btn:hover{background:#1b2b3a}
@media(max-width:1000px){#demo .demo-frame{height:1180px}}
@media(max-width:600px){#demo{padding:48px 16px}#demo .demo-header{align-items:flex-start;gap:20px}#demo .demo-meta{text-align:left}#demo .demo-frame{height:1160px}#demo .demo-caption{line-height:1.8}}