.order-demo { padding-block: 32px; max-width: 1100px; }
.order-demo [data-demo-controls] { border: 1px solid currentColor; border-radius: 16px; padding: clamp(16px, 4vw, 32px); }
.order-demo h2, .order-demo h3 { margin-block: 16px; }
.order-demo p, .order-demo li { margin-block: 12px; line-height: 1.65; }
.order-demo ol, .order-demo ul { padding-left: 24px; }
.demo-menu { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 20px; margin-block: 24px; }
.demo-item { border: 1px solid currentColor; border-radius: 12px; padding: 16px; }
.order-demo label { display: block; margin-block: 16px; }
.order-demo select, .order-demo input[type=number] { display: block; width: 100%; max-width: 300px; margin-top: 8px; padding: 10px; font: inherit; color: #14171c; background: #fff; border: 1px solid #797979; border-radius: 6px; }
.order-demo input[type=checkbox] { width: 20px; height: 20px; vertical-align: middle; }
.order-demo button { font: inherit; padding: 12px 16px; margin: 6px 8px 6px 0; min-height: 44px; border: 1px solid #8a5a12; border-radius: 8px; background: #d8a657; color: #08090c; cursor: pointer; }
.order-demo button:disabled { opacity: .55; cursor: default; }
.order-demo :focus-visible { outline: 3px solid #a66b19; outline-offset: 4px; }
.order-demo [data-demo-status] { min-height: 3em; }
/* No animation or timed progression: motion preferences need no special override. */