/* Technical showcase: preserve the existing visual identity. */
.frame-center .showcase-value { font-size:clamp(1rem,2vw,1.6rem); line-height:1.6; }
.frame-center .showcase-value small { display:block; font-size:.65em; font-weight:400; margin-top:.65rem; color:#b9ced7; }
a.frame-card { text-decoration:none; transition:border-color .2s,background .2s; }
a.frame-card:hover { border-color:#7bfff4; background:#10282b; }
@media(min-width:901px) { .frame-card-right,.frame-card-left { top:auto; bottom:100px; transform:none; z-index:5; } }
@media(max-width:900px) { .frame-card-right { display:block; bottom:auto; margin:16px auto 100px; } }
.demo-section { padding:90px max(24px,5vw); max-width:1440px; margin:auto; scroll-margin-top:90px; }
.demo-heading { display:flex; gap:2rem; justify-content:space-between; align-items:end; margin-bottom:2rem; }
.demo-heading h2 { font-size:clamp(1.8rem,3.4vw,3rem); line-height:1.35; margin:1rem 0; }
.demo-heading p { color:#b9ced7; max-width:42rem; line-height:1.8; }
.demo-badge { color:#8cffe0; border:1px solid #315b55; padding:.6rem 1rem; white-space:nowrap; font-size:.75rem; letter-spacing:.12em; }
.workflow-demo { padding:clamp(20px,3vw,40px); border:1px solid #315b55; border-radius:16px; background:radial-gradient(ellipse at top right,#123035 0,transparent 60%),#090f18; box-shadow:0 0 70px #23e8d00a; }
.demo-toolbar { display:flex; align-items:end; flex-wrap:wrap; gap:12px; }
.demo-field { flex:1; min-width:180px; }
.demo-field label { display:block; font-size:.85rem; margin-bottom:10px; color:#dcebec; }
.demo-field select { width:100%; border:1px solid #405964; border-radius:7px; background:#0a1620; color:#fff; font:inherit; padding:14px; }
.demo-button { padding:14px 20px; border:1px solid #7df9dd; background:#7df9dd; color:#061916; border-radius:7px; font:inherit; font-weight:700; cursor:pointer; white-space:nowrap; }
.demo-button.secondary { background:transparent; border-color:#405964; color:#dcebec; }
.demo-button:disabled { opacity:.6; cursor:wait; }
.demo-steps { list-style:none; padding:0; margin:32px 0; display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.demo-steps li { border:1px solid #30424c; border-radius:8px; padding:18px 14px; color:#c0cbd1; transition:background .2s,border-color .2s; }
.demo-steps span { display:block; font-size:.7rem; letter-spacing:.14em; color:#84bfb8; margin-bottom:8px; }
.demo-steps li[data-state=active] { border-color:#80ffe3; background:#12362f; }
.demo-steps li[data-state=done] { border-color:#448375; color:#b1ffe9; }
.demo-steps li[data-state=done] strong::after { content:' ✓'; }
.demo-steps li[data-state=duplicate] { border-color:#e6bd78; color:#f4d8a9; }
.demo-output { display:grid; grid-template-columns:1.25fr 1fr; gap:20px; }
.demo-output article { padding:22px; background:#060d15; border:1px solid #273b46; border-radius:10px; min-width:0; }
.demo-output h3 { font-size:1rem; margin:0 0 20px; display:flex; justify-content:space-between; }
.demo-count { color:#7df9dd; font-variant-numeric:tabular-nums; }
.demo-ledger-row { display:grid; grid-template-columns:85px 1fr; gap:8px; padding:14px 0; border-top:1px solid #243844; font-size:.8rem; }
.demo-ledger-row span:last-child { grid-column:2; color:#7df9dd; }
.demo-empty,.demo-notification { color:#a9bbc6; font-size:.9rem; line-height:1.9; }
.demo-status { color:#b3ffe8; font-size:.9rem; min-height:3em; margin:24px 0 8px; line-height:1.6; }
.demo-note { color:#b6c4cf; font-size:.8rem; line-height:1.8; margin:0; }
.demo-follow { display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-top:24px; }
.engineering-note { margin-top:16px; border-top:1px solid #30424c; padding-top:12px; }
.engineering-note summary { cursor:pointer; color:#9bffe2; font-size:.85rem; padding:8px 0; }
.engineering-note p { font-size:.9rem; line-height:1.8; color:#bccbd4; }
.technical-details { margin-top:30px; }
.technical-details>summary { cursor:pointer; padding:18px; border:1px solid #30424c; border-radius:8px; color:#b9ffe8; }
.technical-details .tech-stack-grid { margin-top:25px; }
.price-annual { display:block; font-size:.9rem; line-height:1.8; color:#c8d7df; margin:12px 0; }
:where(a,button,select,input,textarea,summary):focus-visible { outline:3px solid #90ffe7; outline-offset:4px; }
@media(max-width:640px) {
 .demo-section { padding:60px 20px; }
 .demo-heading { display:block; }
 .demo-badge { display:inline-block; margin-top:10px; }
 .demo-output { grid-template-columns:1fr; }
 .demo-steps { grid-template-columns:repeat(2,1fr); gap:8px; }
 .demo-steps li { padding:14px 10px; }
 .demo-button { flex:1; font-size:.8rem; padding:14px 10px; }
 .demo-field { flex-basis:100%; }
 .frame-center .showcase-value { font-size:1rem; }
 .frame-center .showcase-value small { font-size:.8rem; }
}
@media(prefers-reduced-motion:reduce) { .demo-steps li,a.frame-card { transition:none; } }