/* The public demo with businesses to pick from (demo.creekpos.com): the businesses the visitor picks from on
   the entry page, the brand's accent on the demo's own pieces, the print notice in Modern Standard Arabic. Linked after
   demo.css by _DemoBar only in such a build; the one-shop demo never loads it. The app's tokens (app.css, brand.css). */
.demo-enter{box-shadow:0 8px 22px color-mix(in srgb,var(--gold) 38%,transparent)}
.demo-kicker{border-color:color-mix(in srgb,var(--gold) 45%,transparent)}
.demo-ribbon{color:var(--on-gold,var(--navy-2))}

/* the two businesses */
.demo-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:0 0 28px}
.demo-choice{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;background:var(--card,#fff);border:1px solid var(--line);border-radius:18px;padding:22px 20px 20px;box-shadow:var(--shadow-sm);margin:0}
.demo-choice.mine{border-color:var(--gold);box-shadow:0 0 0 2px color-mix(in srgb,var(--gold) 35%,transparent)}
.demo-choice-img{width:150px;height:150px;object-fit:contain}
.demo-choice-type{font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--gold-ink,var(--gold-2))}
.demo-choice b{display:block;font-size:21px;line-height:1.3;color:var(--navy-2)}
.demo-choice .small{max-width:440px;line-height:1.55}
.demo-choice .btn{margin-top:auto}
@media (max-width:760px){
  .demo-choices{grid-template-columns:1fr}
  .demo-choice-img{width:110px;height:110px}
  .demo-choice .btn{width:100%}
}

@media print{
  html[lang=ar] body::after{content:"هذا عرض تجريبي — الطباعة تعمل في النسخة الحقيقية"}
}