/* Demo slots (T-186): the base every demo starts from. Colours and faces come from the brand tokens (--b-*).
   The resets sit inside :where() so any class in a demo beats them. */

.demo-root {
  container: demo / inline-size;
  position: relative;
  overflow: hidden;
  background: var(--b-paper, #FFFFFF);
  color: var(--b-ink, #061A33);
  font: 400 14px/1.45 var(--b-font-body, "Instrument Sans", system-ui, sans-serif);
  text-align: left;
  -webkit-font-smoothing: antialiased;
}
:where(.demo-root) *, :where(.demo-root) *::before, :where(.demo-root) *::after { box-sizing: border-box; }
:where(.demo-root) :where(h1, h2, h3, h4, h5) { margin: 0; font-family: var(--b-font-display, "Outfit", system-ui, sans-serif); font-weight: var(--b-display-weight, 700); letter-spacing: -0.01em; line-height: 1.12; text-wrap: balance; }
:where(.demo-root) :where(p, ul, ol, figure, dl, dd) { margin: 0; padding: 0; list-style: none; }
:where(.demo-root) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
:where(.demo-root) :where(img, svg) { display: block; max-width: 100%; }
:where(.demo-root) table { border-collapse: collapse; width: 100%; }
:where(.demo-root) :focus-visible { outline: 2px solid var(--b-primary, #061A33); outline-offset: 2px; }
:where(.demo-root) ::selection { background: var(--b-accent, #C3CCD9); color: var(--b-ink, #061A33); }

/* kit */
.x-num { font-variant-numeric: tabular-nums; }
.x-word { font-family: var(--b-font-display); font-weight: var(--b-display-weight, 700); color: var(--b-primary); letter-spacing: -0.01em; white-space: nowrap; }
.x-logo { height: var(--b-logo-h, 28px); width: auto; flex: none; }

/* a phone drawn by a demo (board windows that show one or more phones) */
.x-phone { position: relative; width: var(--pw, 300px); height: var(--ph, 640px); padding: 9px; border-radius: 42px; background: #020D1C; flex: none; }
.x-phone > .x-scr { position: relative; height: 100%; overflow: hidden; border-radius: 33px; background: var(--b-paper); }
.x-phone::after { content: ""; position: absolute; z-index: 3; left: 50%; top: 18px; width: 30%; height: 22px; transform: translateX(-50%); border-radius: 11px; background: #020D1C; }