.business-examples .umami-demo {
  background: #171310;
  color: #fff3e3;
  border: 1px solid #926241;
  border-radius: 16px;
  padding: 18px;
  margin: 20px 0;
  font-family: inherit;
  text-align: left;
  overflow-wrap: anywhere;
}
.umami-demo *, .umami-demo *::before, .umami-demo *::after { box-sizing: border-box; }
.business-examples .umami-demo p { font-size: 16px; line-height: 1.5; color: #ead6c1; }
.umami-demo button { cursor: pointer; font: inherit; font-size: 14px; min-height: 44px; border: 1px solid #896548; border-radius: 8px; padding: 10px 12px; background: #2a211b; color: #fff3e3; text-align: left; }
.umami-demo button:focus-visible { outline: 3px solid #ffb77d; outline-offset: 3px; }
.umami-demo button:disabled { cursor: default; opacity: .5; }
.umami-demo button:not(:disabled):hover { border-color: #ffac70; }
.umami-demo small { display: block; font-size: 14px; line-height: 1.5; margin-top: 10px; color: #d9bfa5; }
.umami-demo #startUmamiDemo, .umami-demo .umami-primary { display: block; width: 100%; background: #ff8b45; color: #241407; border-color: #ff8b45; font-weight: 700; text-align: center; margin-top: 16px; }
.umami-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.umami-top > strong { font-size: 22px; letter-spacing: .03em; }
.umami-top > strong span { display: block; font-size: 14px; color: #ffb77d; }
.umami-demo .umami-reset { background: transparent; font-size: 14px; }
.umami-nav { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0; }
.umami-nav button { flex: 1 1 auto; padding: 8px; text-align: center; }
.umami-nav [aria-current="step"] { background: #ffe0c5; color: #241407; border-color: #ffe0c5; font-weight: 700; }
.umami-screen { animation: umami-arrive .24s ease-out both; }
.business-examples .umami-demo h3 { font-size: 22px; line-height: 1.2; margin: 18px 0 12px; color: #fff3e3; }
.umami-products { display: grid; gap: 10px; }
.umami-products button { display: grid; gap: 7px; width: 100%; }
.umami-products strong, .umami-products b { font-size: 16px; }
.umami-products span { color: #e2c8ae; }
.umami-products [aria-pressed="true"] { border: 2px solid #ffb77d; background: #3b281b; }
.umami-ticket { background: #fff0dd; color: #2a1a10; border-radius: 10px; padding: 16px; margin: 16px 0; border-top: 4px solid #ff8b45; }
.umami-ticket > span { display: block; font-size: 14px; margin-bottom: 12px; }
.umami-ticket > strong { display: block; font-size: 18px; }
.umami-total { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; border-top: 1px dashed #98785d; padding-top: 12px; margin-top: 12px; font-size: 14px; }
.umami-total b { font-size: 18px; }
.umami-notification { border-left: 4px solid #ffb77d; padding: 14px; background: #34271d; }
.umami-notification span { display: block; margin-top: 8px; font-size: 16px; }
.umami-loyalty { padding: 20px 0; }
.umami-loyalty > span { font-size: 14px; }
.umami-loyalty > strong { display: block; font-size: 30px; color: #ffb77d; margin-top: 6px; }
.umami-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.umami-stats > div { background: #30241b; border-radius: 10px; padding: 12px; }
.umami-stats span { font-size: 14px; }
.umami-stats strong { display: block; font-size: 24px; color: #ffb77d; margin-top: 6px; }
.business-examples .umami-demo .umami-explain { font-size: 14px; color: #d9bfa5; }
.business-examples .umami-demo .umami-confirm { color: #ffce9f; }
@keyframes umami-arrive { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 380px) { .business-examples .umami-demo { padding: 12px; } .umami-stats { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .umami-screen { animation: none; } }