/* PageTap demo bar — deliberately neutral so it never reads as part of the fictional business. */
html body aside.zdemo {
  position: sticky; top: 0; z-index: 50;
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
  padding: .55rem 1rem;
  background: #111; color: #eee;
  font: 500 13px/1.3 ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
}
html body aside.zdemo a { color: inherit; text-decoration: none; }
html body aside.zdemo .zdemo-brand { font-weight: 700; letter-spacing: .02em; }
html body aside.zdemo .zdemo-brand span { font-weight: 400; color: #999; }
html body aside.zdemo .zdemo-flag { margin: 0; padding: .15rem .5rem; border: 1px solid #555; border-radius: 3px; color: #ffd27a; }
html body aside.zdemo .zdemo-biz { display: flex; align-items: center; gap: .4rem; }
html body aside.zdemo .zdemo-biz span { color: #999; }
html body aside.zdemo .zdemo-biz select { font: inherit; color: #111; background: #eee; border: 0; border-radius: 3px; padding: .25rem .4rem; max-width: 15rem; }
html body aside.zdemo .zdemo-tabs { display: flex; gap: 2px; background: #2a2a2a; border-radius: 4px; padding: 2px; }
html body aside.zdemo .zdemo-tabs a {
  display: flex; flex-direction: column; justify-content: center;
  padding: .3rem .65rem; border-radius: 3px; color: #ccc; line-height: 1.25;
}
html body aside.zdemo .zdemo-tabs a:hover { color: #fff; background: #3a3a3a; }
html body aside.zdemo .zdemo-tabs a[aria-current="page"] { background: #eee; color: #111; }
html body aside.zdemo .zdemo-tabs a[aria-current="page"] .zdemo-tab-best { color: #444; }
html body aside.zdemo .zdemo-tab-title { display: inline-flex; align-items: baseline; font-weight: 600; }
html body aside.zdemo .zdemo-tab-best {
  display: block; font-size: 11px; font-weight: 400; color: #aaa;
  margin-top: .15rem; max-width: 22ch; white-space: normal;
}
html body aside.zdemo .zdemo-tabs small { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; opacity: .75; margin-left: .25rem; }
html body aside.zdemo .zdemo-preview {
  padding: .3rem .65rem; border: 1px solid #444; border-radius: 3px; color: #ccc;
  font-size: 12px; white-space: nowrap;
}
html body aside.zdemo .zdemo-preview:hover { color: #fff; border-color: #888; background: #222; }
html body aside.zdemo .zdemo-cta { margin-left: auto; padding: .3rem .7rem; background: #ffd27a; color: #111 !important; border-radius: 3px; font-weight: 600; }
html body aside.zdemo a:focus-visible, html body aside.zdemo select:focus-visible { outline: 2px solid #ffd27a; outline-offset: 2px; }
@media (max-width: 720px) {
  html body aside.zdemo { position: static; }
  html body aside.zdemo .zdemo-cta { margin-left: 0; }
  html body aside.zdemo .zdemo-tabs { width: 100%; overflow-x: auto; }
  html body aside.zdemo .zdemo-tab-best { display: none; }
}
.skip-link { position: absolute; left: -999px; top: 0; z-index: 60; padding: .5rem 1rem; background: #ffd27a; color: #111; }
.skip-link:focus { left: 0; }
/* Placeholder until the owner supplies a generated photo for this slot. */
.img { margin: 0; overflow: hidden; }
.img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.img-pending {
  display: flex; align-items: flex-end;
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, var(--paper)) 0 14px, color-mix(in srgb, var(--accent) 8%, var(--paper)) 14px 28px);
  border: 1px dashed color-mix(in srgb, var(--ink) 30%, transparent);
}
.img-pending figcaption { margin: .6rem; padding: .25rem .5rem; background: var(--paper); color: var(--ink); font: 12px/1.3 ui-sans-serif, -apple-system, sans-serif; opacity: .85; }
.demo-result { padding: .75rem 1rem; border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--paper)); }
.optional { font-weight: 400; opacity: .7; }
[aria-invalid="true"] { outline: 2px solid #c0392b; outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }
