/*
 * Base only.
 *
 * The three demo businesses deliberately do NOT share a look. One shared stylesheet across
 * all of them is what made them read as three copies of the same template, which is the
 * generic aesthetic this project is supposed to argue against. Each page now carries its own
 * type, palette and layout; this file holds the handful of things that really are shared.
 */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body { margin: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

img, svg, video { max-width: 100%; display: block; }

h1, h2, h3, h4, h5 { margin: 0; }
p, ul, ol { margin: 0; }
ul, ol { padding: 0; }

button { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.wrap { width: 100%; margin: 0 auto; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* -------------------------------------------------------- demo disclosure */

/*
 * These pages carry invented prices, so they have to say what they are. A banner across the
 * top of the page was doing that by wrecking the very thing a visitor is meant to judge.
 * Small, bottom left, clear of the chat bubble, and honest to anyone who reads it.
 */
.demo-tag {
  position: fixed; bottom: 18px; left: 18px; z-index: 2147482000;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px 8px 11px; border-radius: 999px;
  background: rgba(12, 14, 18, 0.88); color: #fff; text-decoration: none;
  font: 500 13px/1.3 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  backdrop-filter: blur(6px);
  box-shadow: 0 8px 22px -8px rgba(0, 0, 0, 0.55);
}
.demo-tag:hover { background: rgba(12, 14, 18, 1); color: #fff; }
.demo-tag i { width: 7px; height: 7px; border-radius: 50%; background: #facc15; flex: none; }
.demo-tag u { text-decoration: none; opacity: 0.62; }

@media (max-width: 560px) {
  .demo-tag { bottom: 14px; left: 14px; font-size: 12px; padding: 7px 12px 7px 10px; }
  .demo-tag u { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}