.demo-grid { display: grid; gap: 26px; margin-top: 28px; }
.demo-tile { display: grid; grid-template-columns: minmax(280px, .8fr) 1fr; align-items: center; gap: 34px; padding: 26px; border: 1px solid var(--line); border-radius: 30px; background: rgba(255,255,255,.78); box-shadow: 0 22px 65px rgba(58,64,104,.08); }
.demo-preview { max-width: 390px; }
.demo-copy h2 { margin: 14px 0 8px; font: 800 clamp(1.8rem, 4vw, 3rem)/1 'Manrope'; letter-spacing: -.055em; }
.demo-copy p, .share-panel p, .share-panel small, .checkout-layout p, .payment-notice, .success-card p { color: var(--muted); line-height: 1.65; }
.demo-public-shell { display: grid; grid-template-columns: minmax(300px, 500px) minmax(280px, 380px); justify-content: center; align-items: center; gap: 30px; width: 100%; }
.share-panel, .order-card, .success-card, .empty-state { padding: 28px; border: 1px solid var(--line); border-radius: 28px; background: rgba(255,255,255,.84); box-shadow: 0 22px 65px rgba(58,64,104,.09); }
.share-panel h2 { margin: 12px 0 8px; font: 800 2rem/1.05 'Manrope'; letter-spacing: -.045em; }
.qr-image { display: block; width: 220px; height: 220px; margin: 20px auto 12px; padding: 10px; background: #fff; border-radius: 22px; border: 1px solid var(--line); }
.checkout-layout { display: grid; grid-template-columns: 1.2fr minmax(280px, .7fr); align-items: start; gap: 28px; }
.checkout-layout h1, .success-card h1, .empty-state h1 { font: 800 clamp(2.2rem, 5vw, 4.5rem)/.98 'Manrope'; letter-spacing: -.065em; margin: 12px 0 16px; }
.checkout-form { display: grid; gap: 18px; margin-top: 26px; }
.consent-row { display: flex; align-items: flex-start; gap: 10px; color: var(--muted); line-height: 1.5; }
.order-card { position: sticky; top: 90px; display: grid; gap: 10px; }
.order-card > strong { margin-top: 12px; font: 800 3rem/1 'Manrope'; letter-spacing: -.06em; }
.order-card > small { color: var(--muted); }
.order-card ul { padding-left: 20px; color: var(--muted); line-height: 1.8; }
.payment-notice { padding: 12px 14px; border-radius: 16px; background: #fff7e8; border: 1px solid #f3d9a8; font-size: 13px; }
.success-card, .empty-state { max-width: 760px; margin: 0 auto; text-align: center; }
.success-mark { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 18px; border-radius: 50%; background: #e7f8ee; color: #22854c; font-size: 28px; font-weight: 900; }
.success-card dl { display: grid; gap: 1px; margin: 24px 0; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: var(--line); text-align: left; }
.success-card dl div { display: grid; grid-template-columns: 1fr 1.5fr; gap: 15px; padding: 14px 16px; background: #fff; }
.success-card dt { color: var(--muted); }
.success-card dd { margin: 0; font-weight: 800; overflow-wrap: anywhere; }
@media (max-width: 820px) { .demo-tile, .demo-public-shell, .checkout-layout { grid-template-columns: 1fr; } .demo-preview { max-width: none; } .order-card { position: static; } }