.demo-page .demo-wrap{max-width:900px;margin:0 auto;padding:2.25rem 1.25rem 4rem}.demo-page h1{font-family:var(--font-display);text-wrap:balance;margin:0}.demo-page p{margin:0}.demo-page button{font-family:inherit}.demo-backhome{display:inline-block;margin-bottom:1.5rem;font-size:.85rem;color:var(--muted)}.demo-backhome:hover{color:var(--gold-deep)}.demo-pagehead{display:flex;align-items:center;gap:.9rem;margin-bottom:.4rem}.demo-mark{width:40px;height:40px;border:1.5px solid var(--brand-gold);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-style:italic;font-size:1.15rem;color:var(--brand-gold);flex-shrink:0}.demo-pagehead h1{font-style:italic;font-weight:600;font-size:1.5rem}.demo-sub{font-size:.85rem;color:var(--muted);margin-top:.15rem}.demo-roles{margin-top:2rem;display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}.demo-role-btn{border:1px solid var(--rule);background:var(--surface);border-radius:6px;padding:.85rem .9rem;text-align:left;cursor:pointer;transition:border-color .15s ease}.demo-role-btn:hover{border-color:var(--gold)}.demo-role-btn[aria-pressed=true]{border-color:var(--gold);border-width:1.5px;background:var(--good-bg, var(--surface))}.demo-name{font-family:var(--font-display);font-style:italic;font-weight:600;font-size:1.05rem}.demo-desc{font-size:.78rem;color:var(--muted);margin-top:.25rem}.demo-panel{display:none;margin-top:1.75rem}.demo-panel.active{display:block}.demo-stepline{display:flex;gap:.5rem;align-items:center;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:.9rem}.demo-dot{width:6px;height:6px;border-radius:50%;background:var(--rule)}.demo-dot.on{background:var(--gold)}.demo-browser{border:1px solid var(--rule);border-radius:10px;overflow:hidden;box-shadow:0 16px 40px #1c17121f;background:var(--brand-surface)}.demo-browser-bar{background:var(--brand-ink);padding:.6rem .8rem;display:flex;align-items:center;gap:.5rem}.demo-browser-dot{width:8px;height:8px;border-radius:50%}.demo-browser-dot.r{background:#b3402a}.demo-browser-dot.y{background:#b8862b}.demo-browser-dot.g{background:#3f7d45}.demo-browser-url{margin-left:.6rem;font-family:var(--font-mono);font-size:.7rem;color:var(--brand-muted);background:#f5efe30f;border:1px solid rgba(245,239,227,.12);padding:.2rem .7rem;border-radius:4px;flex:1}.demo-browser-body{padding:1.5rem 1.6rem;min-height:380px}.demo-page .m-field{display:flex;flex-direction:column;gap:.3rem;margin-bottom:.9rem}.demo-page .m-label{font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;color:var(--brand-muted);font-weight:600}.demo-page .m-input,.demo-page .m-select{border:none;border-bottom:1.5px solid var(--brand-rule);padding:.4rem .1rem;font-size:.92rem;font-family:inherit;background:none;color:var(--brand-ink);width:100%}.demo-page .m-input:focus,.demo-page .m-select:focus{outline:none;border-bottom-color:var(--brand-gold)}.demo-page .m-row-2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.demo-page .m-btn{border:none;border-radius:4px;padding:.7rem 1.1rem;font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;cursor:pointer;background:var(--brand-gold);color:var(--brand-ink)}.demo-page .m-btn:hover{background:var(--brand-gold-deep)}.demo-page .m-link-btn{border:1px solid var(--brand-rule);background:none;color:var(--brand-muted);border-radius:4px;padding:.45rem .8rem;font-size:.75rem;cursor:pointer}.demo-page .m-card{background:var(--brand-surface);border:1px solid var(--brand-rule);border-top:3px solid var(--brand-gold);padding:1.1rem 1.2rem;border-radius:2px}.demo-page .m-title{font-family:var(--font-display);font-style:italic;font-weight:600;font-size:1.15rem;color:var(--brand-ink)}.demo-page .m-sub{font-size:.82rem;color:var(--brand-muted);margin-top:.3rem}.demo-page .m-list-row{display:flex;justify-content:space-between;align-items:center;padding:.75rem 0;border-top:1px solid var(--brand-rule);cursor:pointer;background:none;border-left:none;border-right:none;border-bottom:none;width:100%;text-align:left}.demo-page .m-list-row:hover{background:#b8862b0f}.demo-page .m-list-row .n{font-weight:600;font-size:.92rem;color:var(--brand-ink)}.demo-page .m-list-row .p{font-size:.72rem;color:var(--brand-muted);margin-top:.1rem}.demo-page .m-badge{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em}.demo-page .m-badge.paid{color:var(--brand-good)}.demo-page .m-badge.due{color:var(--brand-gold-deep)}.demo-page .m-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin:1rem 0}.demo-page .m-stat{background:var(--brand-surface);border:1px solid var(--brand-rule);border-radius:4px;padding:.75rem .85rem}.demo-page .m-stat .l{font-size:.6rem;text-transform:uppercase;letter-spacing:.05em;color:var(--brand-muted)}.demo-page .m-stat .v{font-family:var(--font-mono);font-weight:600;font-size:.95rem;margin-top:.2rem;color:var(--brand-ink)}.demo-page .m-toast{margin-top:.9rem;font-family:var(--font-display);font-style:italic;font-size:.85rem;color:var(--brand-good)}.demo-page .m-backlink{font-size:.78rem;color:var(--brand-muted);cursor:pointer;display:inline-block;margin-bottom:1rem}.demo-page .m-backlink:hover{color:var(--brand-gold-deep)}.demo-phonewrap{display:flex;justify-content:center}.demo-phone{background:var(--brand-ink);border-radius:30px;padding:10px;box-shadow:0 20px 50px #1c17124d;width:300px}.demo-phone-screen{background:var(--brand-paper);border-radius:22px;overflow:hidden;min-height:460px}.demo-phone-hero{background:var(--brand-ink);padding:1rem 1rem 1.3rem}.demo-phone-mark{width:24px;height:24px;border:1.1px solid var(--brand-gold);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-style:italic;font-size:.8rem;color:var(--brand-gold)}.demo-phone-wordmark{margin-top:.55rem;font-family:var(--font-display);font-style:italic;font-weight:600;font-size:1.05rem;color:var(--brand-paper)}.demo-phone-tagline{font-size:.62rem;color:var(--brand-gold);margin-top:.15rem}.demo-phone-body{padding:.85rem .8rem 1rem}.demo-credit{margin-top:3rem;text-align:center;font-size:.8rem;color:var(--muted)}@media(max-width:640px){.demo-roles,.demo-page .m-row-2{grid-template-columns:1fr}.demo-page .m-stats{grid-template-columns:1fr 1fr}}
