.demo-section{min-height:80vh;padding-top:150px;padding-bottom:6rem}.demo-section .section-header{margin-bottom:4rem}.demo-section .demo-layout{grid-template-columns:1fr 1fr;align-items:center;gap:4rem;max-width:1000px;margin:0 auto;display:grid}.demo-section .demo-layout .demo-instructions{flex-direction:column;gap:1.5rem;display:flex}.demo-section .demo-layout .demo-instructions .step-box{border-radius:var(--radius-lg);background-color:var(--color-surface);flex-direction:row;align-items:flex-start;gap:1.5rem;padding:2rem;display:flex}.demo-section .demo-layout .demo-instructions .step-box .step-indicator{background-color:var(--color-bg);width:50px;height:50px;box-shadow:var(--shadow-soft-inset);color:var(--color-text-main);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:1.5rem;font-weight:700;display:flex}.demo-section .demo-layout .demo-instructions .step-box .step-indicator.text-accent{color:var(--color-accent)}.demo-section .demo-layout .demo-instructions .step-box .step-content{flex-direction:column;gap:.5rem;display:flex}.demo-section .demo-layout .demo-instructions .step-box .step-content h3{color:var(--color-text-main);margin:0;font-size:1.25rem;font-weight:600}.demo-section .demo-layout .demo-instructions .step-box .step-content p{color:var(--color-text-light);margin:0;font-size:1.1rem;line-height:1.6}.demo-section .demo-layout .demo-instructions .step-box .step-content p strong{color:var(--color-accent)}.demo-section .demo-layout .demo-instructions .demo-action{flex-direction:column;align-items:center;margin-top:1rem;display:flex}.demo-section .demo-layout .demo-instructions .demo-action .large{width:100%;padding:1.25rem 3.5rem;font-size:1.25rem}.demo-section .demo-layout .demo-instructions .demo-action .demo-browser-hint{color:var(--color-text-light);text-align:center;align-items:center;gap:.4rem;margin-top:.75rem;font-size:.8rem;line-height:1.5;display:flex}.demo-section .demo-layout .demo-instructions .demo-action .demo-action-mobile{width:100%}.demo-section .demo-layout .demo-action-desktop{flex-direction:column;justify-content:center;align-items:center;gap:1.5rem;width:100%;height:100%;display:flex}.demo-section .demo-layout .demo-action-desktop .qr-hint{color:var(--color-text-main);text-align:center;max-width:300px;font-size:1.25rem;font-weight:500}.demo-section .demo-layout .demo-action-desktop .qr-code{border-radius:var(--radius-lg);background:#fff;width:300px;height:300px;padding:1.5rem;box-shadow:12px 12px 30px #b8c2cc66,-12px -12px 30px #ffffffe6}.demo-section .demo-layout .demo-action-desktop .demo-browser-hint{color:var(--color-text-light);text-align:center;align-items:center;gap:.5rem;font-size:1rem;display:flex}@media (max-width:900px){.demo-section{padding-top:120px;padding-bottom:2rem}.demo-section .demo-layout{grid-template-columns:1fr;gap:3rem}.demo-section .demo-layout .demo-instructions{order:2}.demo-section .demo-layout .demo-instructions .demo-action{justify-content:center}}@media (min-width:900px){.mobile-only{display:none!important}}@media (max-width:899px){.desktop-only{display:none!important}}