/* ==========================================================================
   Maple — device frames and coded UI mockups
   --------------------------------------------------------------------------
   Mockups are pictures, not interfaces: each sits in a
   <figure role="img" aria-label="..."> with nothing focusable inside.
   Everything inside .ui is sized in em; the screen is a size container, so a
   mockup scales with its frame (fixed 11px fallback without container units).
   Data is fictional. Final values are in the HTML; motion only animates in.
   ========================================================================== */

/* ---------- Frames ---------- */
.mock { position: relative; margin: 0; }
.browser {
  position: relative; border-radius: 14px; background: #fff; overflow: hidden;
  border: 1px solid rgb(44 31 110 / 0.08);
  box-shadow: 0 2px 6px rgb(44 31 110 / 0.06), 0 24px 60px rgb(44 31 110 / 0.18);
}
.browser__bar { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 12px; background: #f1edfa; border-bottom: 1px solid #e8e3f6; }
.browser__dots { display: flex; gap: 6px; flex: none; }
.browser__dots i { width: 10px; height: 10px; border-radius: 50%; background: #d6cfee; }
.browser__url {
  flex: 1; max-width: 300px; margin-inline: auto; height: 21px; border-radius: 6px; background: #fff;
  font: 500 11px/21px var(--sans); color: #5f5d80; text-align: center;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.browser__url::before { content: ""; display: inline-block; width: 7px; height: 8px; margin-right: 6px; vertical-align: -1px; border-radius: 1.5px; background: #a49fc4; box-shadow: inset 0 0 0 1px #a49fc4; }
.browser__screen, .phone__screen, .tablet__screen { container-type: inline-size; }
.on-dark .browser { border-color: rgb(255 255 255 / 0.1); box-shadow: 0 30px 80px rgb(0 0 0 / 0.35); }

.phone {
  position: relative; width: min(100%, 272px); padding: 9px; border-radius: 42px;
  background: #22204a; box-shadow: inset 0 0 0 2px #4a4580, 0 30px 70px rgb(44 31 110 / 0.28);
}
.phone__screen { position: relative; aspect-ratio: 9 / 19; border-radius: 34px; overflow: hidden; background: #f8f6fd; }
.phone__screen::before { /* camera island */
  content: ""; position: absolute; z-index: 5; top: 9px; left: 50%; width: 30%; height: 20px; transform: translateX(-50%);
  border-radius: 12px; background: #22204a;
}

/* ---------- UI base ---------- */
.ui {
  font-family: var(--sans); color: #2c2a52; line-height: 1.35; letter-spacing: -0.003em;
  font-size: 11px; font-size: clamp(7.5px, 1.72cqi, 13px);
  font-variant-numeric: tabular-nums; text-align: left; user-select: none;
}
.phone .ui { font-size: 12px; font-size: clamp(9px, 4.6cqi, 13px); }
.ui * { box-sizing: border-box; }
.ui svg { width: 1.25em; height: 1.25em; flex: none; }
.ui b, .ui strong { font-weight: 650; }

/* App shell: sidebar + main */
.ui-app { display: grid; grid-template-columns: 12.5em minmax(0, 1fr); min-height: 33em; background: #f8f6fd; }
.ui-side { background: #fff; border-right: 1px solid #ebe7f6; padding: 1.1em 0.7em; display: flex; flex-direction: column; gap: 0.15em; }
.ui-side__brand { display: flex; align-items: center; gap: 0.55em; padding: 0 0.5em 0.9em; font-weight: 700; font-size: 1.05em; color: #2c1f6e; letter-spacing: -0.01em; }
.ui-side__brand img { width: 1.55em; height: 1.55em; }
.ui-side__label { font-size: 0.68em; text-transform: uppercase; letter-spacing: 0.09em; color: #8e8cab; padding: 0.9em 0.65em 0.35em; font-weight: 650; }
.ui-nav { display: flex; align-items: center; gap: 0.6em; padding: 0.5em 0.6em; border-radius: 0.5em; color: #55537a; font-weight: 500; white-space: nowrap; overflow: hidden; }
.ui-nav.is-on { background: #f1edfd; color: #5338b4; font-weight: 650; }
.ui-main { padding: 1.2em 1.35em 1.4em; display: flex; flex-direction: column; gap: 0.95em; min-width: 0; }
.ui-top { display: flex; align-items: center; gap: 0.9em; }
.ui-title { font-weight: 700; font-size: 1.35em; color: #2c1f6e; letter-spacing: -0.015em; line-height: 1.15; }
.ui-sub { color: #6c6a8c; font-size: 0.82em; margin-top: 0.15em; }
.ui-top__end { margin-left: auto; display: flex; align-items: center; gap: 0.6em; }
.ui-search { display: flex; align-items: center; gap: 0.5em; padding: 0.45em 0.8em; min-width: 11em; border-radius: 0.55em; border: 1px solid #e8e3f6; background: #fff; color: #8e8cab; font-size: 0.85em; }
.ui-avatar { display: inline-grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: 50%; background: #6a45d6; color: #fff; font-weight: 700; font-size: 0.78em; flex: none; }
.ui-avatar--grey { background: #c5c7c6; color: #3e3c66; }
.ui-avatar--navy { background: #3d2c8c; }

/* Cards, KPIs */
.ui-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8em; }
.ui-kpis--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ui-kpi, .ui-card { background: #fff; border: 1px solid #ebe7f6; border-radius: 0.75em; }
.ui-kpi { padding: 0.8em 0.9em; min-width: 0; }
.ui-kpi__label { color: #6c6a8c; font-size: 0.78em; font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-kpi__value { font-weight: 700; font-size: 1.4em; color: #22204a; letter-spacing: -0.02em; margin-top: 0.2em; white-space: nowrap; }
.ui-kpi__value small { font-size: 0.6em; color: #6c6a8c; font-weight: 600; margin-right: 0.15em; }
.ui-delta { display: inline-block; margin-top: 0.3em; font-size: 0.74em; font-weight: 650; color: #157a52; }
.ui-delta--down { color: #b42318; }
.ui-card { padding: 0.9em 1em; min-width: 0; }
.ui-card__head { display: flex; justify-content: space-between; align-items: center; gap: 0.6em; margin-bottom: 0.7em; font-weight: 650; color: #22204a; }
.ui-card__head span { font-weight: 500; color: #6c6a8c; font-size: 0.85em; }
.ui-cols { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 0.8em; }

/* Table-like rows (divs, so nothing is announced inside role=img) */
.ui-rows { display: grid; }
.ui-row { display: grid; grid-template-columns: var(--cols, 1fr 1fr 1fr); gap: 0.7em; align-items: center; padding: 0.6em 0.2em; border-top: 1px solid #f1eef9; font-size: 0.9em; min-width: 0; }
.ui-row > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-row--head { border-top: 0; padding-top: 0; color: #6c6a8c; font-weight: 650; font-size: 0.72em; text-transform: uppercase; letter-spacing: 0.06em; }
.ui-row .r { text-align: right; }
.ui-row__main { font-weight: 600; color: #22204a; }
.ui-row__meta { display: block; font-size: 0.85em; color: #6c6a8c; font-weight: 450; }
.ui-person { display: flex; align-items: center; gap: 0.55em; }

/* Status chips */
.ui-chip { display: inline-flex; align-items: center; gap: 0.35em; padding: 0.22em 0.6em; border-radius: 999px; font-size: 0.78em; font-weight: 650; width: fit-content; white-space: nowrap; }
.ui-chip::before { content: ""; width: 0.45em; height: 0.45em; border-radius: 50%; background: currentColor; }
.ui-chip--ok { background: #e3f5ec; color: #157a52; }
.ui-chip--warn { background: #fff3df; color: #a35f00; }
.ui-chip--bad { background: #fdecea; color: #b42318; }
.ui-chip--info { background: #f1edfd; color: #5338b4; }
.ui-chip--muted { background: #f1eef9; color: #5f5d80; }

/* Charts */
.ui-bars { display: flex; align-items: flex-end; gap: 0.4em; height: 8.5em; }
.ui-bars span { flex: 1; height: var(--h); border-radius: 0.3em 0.3em 0.1em 0.1em; background: linear-gradient(180deg, #8b6cf0, #6a45d6); transform-origin: 50% 100%; }
.ui-bars span.is-dim { background: #e4dcfb; }
.ui-axis { display: flex; gap: 0.4em; margin-top: 0.4em; color: #8e8cab; font-size: 0.7em; }
.ui-axis span { flex: 1; text-align: center; }
.ui-donut { position: relative; width: 6.5em; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(#6a45d6 calc(var(--p) * 1%), #e4dcfb 0); flex: none; }
.ui-donut::after { content: ""; position: absolute; inset: 0.9em; border-radius: 50%; background: #fff; }
.ui-donut b { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; font-size: 1.15em; color: #22204a; }
.ui-progress { height: 0.5em; border-radius: 999px; background: #ebe7f6; overflow: hidden; }
.ui-progress span { display: block; height: 100%; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, #8b6cf0, #6a45d6); transform-origin: 0 50%; }
.ui-legend { display: flex; flex-wrap: wrap; gap: 0.4em 1em; font-size: 0.78em; color: #5f5d80; }
.ui-legend i { display: inline-block; width: 0.7em; height: 0.7em; border-radius: 0.2em; margin-right: 0.35em; vertical-align: -0.05em; background: #6a45d6; }
.ui-legend i.is-dim { background: #e4dcfb; }

/* Controls (pictures of controls) */
.ui-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4em; padding: 0.55em 1em; border-radius: 0.55em; background: #6a45d6; color: #fff; font-weight: 650; font-size: 0.88em; white-space: nowrap; }
.ui-btn--ghost { background: #fff; color: #5338b4; border: 1px solid #d6cfee; }
.ui-btn--navy { background: #2c1f6e; }
.ui-btn--block { display: flex; width: 100%; }
.ui-input { display: flex; align-items: center; gap: 0.5em; border: 1px solid #d6cfee; border-radius: 0.55em; padding: 0.55em 0.8em; color: #8e8cab; background: #fff; font-size: 0.9em; }
.ui-kbd { display: inline-block; padding: 0.1em 0.4em; border-radius: 0.3em; border: 1px solid #d6cfee; border-bottom-width: 2px; background: #fff; font-size: 0.75em; font-weight: 650; color: #3e3c66; }
.ui-tabs { display: flex; gap: 0.3em; border-bottom: 1px solid #ebe7f6; }
.ui-tabs span { padding: 0.5em 0.8em; color: #6c6a8c; font-weight: 550; font-size: 0.88em; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.ui-tabs span.is-on { color: #5338b4; border-bottom-color: #6a45d6; font-weight: 650; }
.ui-toast { display: flex; align-items: center; gap: 0.7em; padding: 0.7em 0.9em; border-radius: 0.7em; background: #2c1f6e; color: #fff; font-size: 0.88em; box-shadow: 0 10px 30px rgb(44 31 110 / 0.3); }
.ui-toast svg { color: #c9b8ff; }

/* ---------- POS till ---------- */
.ui-till { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); min-height: 33em; background: #f8f6fd; }
.ui-till__catalog { padding: 1em 1.1em; display: flex; flex-direction: column; gap: 0.8em; min-width: 0; }
.ui-cats { display: flex; gap: 0.4em; flex-wrap: wrap; }
.ui-cats span { padding: 0.35em 0.75em; border-radius: 999px; background: #fff; border: 1px solid #e8e3f6; font-size: 0.8em; font-weight: 600; color: #55537a; }
.ui-cats span.is-on { background: #2c1f6e; border-color: #2c1f6e; color: #fff; }
.ui-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6em; }
.ui-item { background: #fff; border: 1px solid #ebe7f6; border-radius: 0.65em; padding: 0.65em; min-width: 0; }
.ui-item__img { aspect-ratio: 16 / 9; border-radius: 0.45em; margin-bottom: 0.5em; background: var(--c, #f1edfd); display: grid; place-items: center; color: rgb(44 31 110 / 0.45); }
.ui-item__img svg { width: 2em; height: 2em; }
.ui-item__name { font-weight: 600; font-size: 0.85em; color: #22204a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-item__price { font-size: 0.8em; color: #6c6a8c; margin-top: 0.1em; }
.ui-item.is-hit { border-color: #6a45d6; box-shadow: 0 0 0 2px #e4dcfb; }
.ui-till__basket { background: #fff; border-left: 1px solid #ebe7f6; padding: 1em 1em 1.1em; display: flex; flex-direction: column; gap: 0.6em; min-width: 0; }
.ui-line { display: grid; grid-template-columns: 1.8em minmax(0, 1fr) auto; gap: 0.5em; align-items: baseline; font-size: 0.88em; padding-block: 0.35em; border-bottom: 1px dashed #ebe7f6; }
.ui-line__qty { color: #6c6a8c; font-weight: 600; }
.ui-line__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #22204a; font-weight: 550; }
.ui-totals { margin-top: auto; display: grid; gap: 0.3em; font-size: 0.86em; color: #55537a; }
.ui-totals div { display: flex; justify-content: space-between; }
.ui-totals .is-total { font-size: 1.3em; font-weight: 700; color: #22204a; padding-top: 0.35em; border-top: 1px solid #ebe7f6; margin-top: 0.2em; }
.ui-pay { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4em; }
.ui-pay span { text-align: center; padding: 0.55em 0.2em; border-radius: 0.5em; border: 1px solid #d6cfee; font-size: 0.8em; font-weight: 650; color: #3e3c66; background: #fff; }
.ui-pay span.is-on { border-color: #6a45d6; background: #f1edfd; color: #5338b4; }
.ui-keys { display: flex; flex-wrap: wrap; gap: 0.6em; color: #6c6a8c; font-size: 0.75em; margin-top: auto; }

/* ---------- Phone screens ---------- */
.ui-phone { position: absolute; inset: 0; display: flex; flex-direction: column; background: #f8f6fd; }
.ui-status { display: flex; justify-content: space-between; padding: 0.95em 1.6em 0.4em; font-size: 0.78em; font-weight: 650; color: #22204a; }
.ui-appbar { display: flex; align-items: center; gap: 0.6em; padding: 0.6em 1.1em 0.8em; }
.ui-appbar__title { font-weight: 700; font-size: 1.1em; color: #2c1f6e; }
.ui-phone__body { flex: 1; padding: 0 1.1em 1.1em; display: flex; flex-direction: column; gap: 0.7em; overflow: hidden; }
.ui-balance { padding: 1em 1.1em; border-radius: 1em; background: linear-gradient(135deg, #3d2c8c, #2c1f6e); color: #fff; }
.ui-balance span { display: block; font-size: 0.78em; color: #c9d6e8; }
.ui-balance b { display: block; font-size: 1.65em; letter-spacing: -0.02em; margin: 0.15em 0 0.5em; }
.ui-dim { position: absolute; inset: 0; background: rgb(34 32 74 / 0.55); z-index: 2; }
.ui-stk {
  position: absolute; z-index: 3; left: 7%; right: 7%; top: 30%;
  padding: 1.15em 1.15em 0.9em; border-radius: 1em; background: #fff; box-shadow: 0 20px 50px rgb(0 0 0 / 0.35);
}
.ui-stk__title { font-weight: 700; font-size: 0.95em; color: #22204a; margin-bottom: 0.5em; }
.ui-stk p { font-size: 0.85em; color: #3e3c66; line-height: 1.45; margin: 0 0 0.8em; }
.ui-stk__pin { display: flex; gap: 0.4em; margin-bottom: 0.9em; }
.ui-stk__pin i { width: 0.65em; height: 0.65em; border-radius: 50%; background: #22204a; }
.ui-stk__pin i.is-empty { background: #d6cfee; }
.ui-stk__actions { display: flex; justify-content: flex-end; gap: 1.4em; font-weight: 700; font-size: 0.82em; letter-spacing: 0.04em; color: #5338b4; }
.ui-sms { padding: 0.65em 0.85em; border-radius: 1em 1em 1em 0.3em; background: #fff; border: 1px solid #ebe7f6; font-size: 0.86em; line-height: 1.4; max-width: 88%; color: #2c2a52; }
.ui-sms--out { margin-left: auto; border-radius: 1em 1em 0.3em 1em; background: #6a45d6; border-color: #6a45d6; color: #fff; }
.ui-sms small { display: block; margin-top: 0.3em; font-size: 0.78em; opacity: 0.7; }
.ui-listitem { display: flex; align-items: center; gap: 0.7em; padding: 0.7em 0.8em; border-radius: 0.8em; background: #fff; border: 1px solid #ebe7f6; }
.ui-listitem__text { flex: 1; min-width: 0; font-size: 0.88em; }
.ui-listitem__text b { display: block; color: #22204a; }
.ui-listitem__text span { color: #6c6a8c; font-size: 0.9em; }
.ui-ic { display: inline-grid; place-items: center; width: 2.3em; height: 2.3em; border-radius: 0.6em; background: #f1edfd; color: #5338b4; flex: none; }
.ui-ic--ok { background: #e3f5ec; color: #157a52; }
.ui-ic--warn { background: #fff3df; color: #a35f00; }

/* ---------- Receipt / statement paper ---------- */
.paper {
  position: relative; background: #fff; padding: 1.4em 1.4em 1.8em; border-radius: 0.4em 0.4em 0 0;
  box-shadow: 0 18px 50px rgb(44 31 110 / 0.16);
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 1em 100%;
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 1em 100%;
}

/* ---------- Floating badges around a mockup ---------- */
.float-badge {
  position: absolute; z-index: 4; display: flex; align-items: center; gap: 0.7rem;
  padding: 0.65rem 0.95rem 0.65rem 0.65rem; border-radius: 14px; background: #fff;
  box-shadow: 0 4px 12px rgb(44 31 110 / 0.08), 0 18px 40px rgb(44 31 110 / 0.18);
  font-size: 0.8rem; line-height: 1.3; color: var(--ink-600); max-width: 250px;
  border: 1px solid rgb(44 31 110 / 0.06);
}
.float-badge .tile { width: 36px; height: 36px; border-radius: 10px; }
.float-badge .tile .icon { width: 19px; height: 19px; }
.float-badge strong { display: block; font-size: 0.86rem; font-weight: 650; color: var(--navy-900); }
.float-badge--ok .tile { background: #e3f5ec; color: #157a52; border-color: rgb(21 122 82 / 0.15); }
@media (max-width: 599px) { .float-badge.is-optional { display: none; } .float-badge { max-width: 210px; font-size: 0.74rem; } }

/* ---------- Hero stage compositions ---------- */
.stage { position: relative; }
.stage__board { width: 100%; height: auto; }
.stage--home .float-badge:nth-of-type(1) { left: -2%; top: 10%; --delay: 0.8s; }
.stage--home .float-badge:nth-of-type(2) { right: -1%; top: 44%; --delay: 1s; }
.stage--home .float-badge:nth-of-type(3) { left: 8%; bottom: 2%; --delay: 1.2s; }

.stage--device { padding: 0 0 8% 0; }
.stage--device .browser { width: 100%; }
.stage--device .phone { position: absolute; right: -2%; bottom: -4%; width: 34%; min-width: 150px; }
.stage--device .float-badge--a { left: -5%; bottom: 14%; }
.stage--device .float-badge--b { right: 4%; bottom: 0; }
@media (max-width: 599px) {
  .stage--device .phone { width: 38%; right: -1%; }
  .stage--device .float-badge--a { left: 0; top: auto; bottom: -4%; }
}

/* Motion: grow charts in once they are on screen (final values are in the HTML) */
.motion-ok [data-grow] .ui-bars span { transform: scaleY(0.02); transition: transform 0.9s var(--ease); }
.motion-ok [data-grow] .ui-progress span { transform: scaleX(0.02); transition: transform 1.1s var(--ease); }
.motion-ok [data-grow].is-in .ui-bars span, .motion-ok [data-grow].is-in .ui-progress span { transform: none; }
.motion-ok [data-grow] .ui-bars span:nth-child(2) { transition-delay: 0.05s; }
.motion-ok [data-grow] .ui-bars span:nth-child(3) { transition-delay: 0.1s; }
.motion-ok [data-grow] .ui-bars span:nth-child(4) { transition-delay: 0.15s; }
.motion-ok [data-grow] .ui-bars span:nth-child(5) { transition-delay: 0.2s; }
.motion-ok [data-grow] .ui-bars span:nth-child(6) { transition-delay: 0.25s; }
.motion-ok [data-grow] .ui-bars span:nth-child(7) { transition-delay: 0.3s; }
.motion-ok [data-grow] .ui-bars span:nth-child(n+8) { transition-delay: 0.35s; }

/* ---------- Panels: card-only mockups used in walkthroughs ---------- */
.walk__visual {
  position: relative; isolation: isolate; padding: clamp(1.25rem, 3.5vw, 2.75rem); border-radius: var(--r-xl);
  background: linear-gradient(140deg, #f1edfd 0%, #faf8ff 55%, #fbeef8 100%); overflow: hidden;
}
.walk__visual::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(to right, rgb(44 31 110 / 0.05) 1px, transparent 1px), linear-gradient(to bottom, rgb(44 31 110 / 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
}
.panel { container-type: inline-size; background: #fff; border-radius: 16px; border: 1px solid rgb(44 31 110 / 0.08); box-shadow: 0 2px 6px rgb(44 31 110 / 0.05), 0 18px 44px rgb(44 31 110 / 0.12); overflow: hidden; }
.panel .ui { font-size: 12px; font-size: clamp(10px, 2.9cqi, 15px); padding: 1.3em 1.4em; }
.panel--narrow { max-width: 460px; margin-inline: auto; }
.panel + .panel, .panel + .ui-toast { margin-top: 0.9rem; }
.panel-stack { display: grid; gap: 0.9rem; }
.ui-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 0.8em; margin-bottom: 0.9em; }
.ui-panel__title { font-weight: 700; font-size: 1.15em; color: #2c1f6e; letter-spacing: -0.01em; }
.ui-fields { display: grid; }
.ui-field { display: flex; justify-content: space-between; align-items: center; gap: 1em; padding: 0.6em 0; border-bottom: 1px solid #f1eef9; font-size: 0.92em; }
.ui-field:last-child { border-bottom: 0; }
.ui-field > span { color: #6c6a8c; }
.ui-field b { color: #22204a; text-align: right; }

/* Pipeline board */
.ui-kanban { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6em; }
.ui-col { background: #f1edfa; border-radius: 0.7em; padding: 0.6em; display: flex; flex-direction: column; gap: 0.5em; min-width: 0; }
.ui-col__head { display: flex; justify-content: space-between; font-size: 0.72em; font-weight: 700; color: #55537a; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.1em 0.2em; }
.ui-deal { background: #fff; border: 1px solid #ebe7f6; border-radius: 0.55em; padding: 0.6em 0.65em; font-size: 0.84em; min-width: 0; }
.ui-deal b { display: block; color: #22204a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-deal span { display: block; color: #6c6a8c; font-size: 0.9em; margin-top: 0.15em; }
.ui-deal.is-moving { border-color: #6a45d6; box-shadow: 0 6px 16px rgb(106 69 214 / 0.18); transform: rotate(-1.5deg); }

/* Receipt / statement on paper */
.paper { container-type: inline-size; max-width: 360px; margin-inline: auto; }
.paper .ui { font-size: 12px; font-size: clamp(9px, 3.6cqi, 13px); }
.ui-mono { font-family: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace; letter-spacing: 0; }
.ui-receipt { display: grid; gap: 0.2em; }
.ui-receipt__head { text-align: center; padding-bottom: 0.7em; margin-bottom: 0.5em; border-bottom: 1px dashed #a49fc4; }
.ui-receipt__head b { display: block; font-size: 1.1em; }
.ui-receipt div.l { display: flex; justify-content: space-between; gap: 1em; }
.ui-receipt .sep { border-top: 1px dashed #a49fc4; margin: 0.45em 0; }
.ui-receipt .tot { font-weight: 700; font-size: 1.08em; }

/* ---------- Phase 2 mockups ---------- */
/* Heatmap (analytics) */
.ui-heat { display: grid; grid-template-columns: 2.6em repeat(12, minmax(0, 1fr)); gap: 0.22em; font-size: 0.72em; color: #8e8cab; align-items: center; }
.ui-heat i { display: block; aspect-ratio: 1; border-radius: 0.22em; background: rgb(106 69 214 / var(--v, 0.1)); }
.ui-heat span { text-align: right; padding-right: 0.3em; }
/* Kitchen display tickets (restaurant) */
.ui-kds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6em; }
.ui-ticket { background: #fff; border: 1px solid #ebe7f6; border-radius: 0.6em; overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.ui-ticket__head { display: flex; justify-content: space-between; padding: 0.5em 0.65em; font-weight: 700; color: #fff; background: #6a45d6; font-size: 0.9em; }
.ui-ticket--late .ui-ticket__head { background: #b42318; }
.ui-ticket--ready .ui-ticket__head { background: #157a52; }
.ui-ticket ul { list-style: none; margin: 0; padding: 0.5em 0.65em; display: grid; gap: 0.3em; font-size: 0.82em; color: #2c2a52; flex: 1; }
.ui-ticket li b { color: #6a45d6; margin-right: 0.3em; }
.ui-ticket li.is-done { color: #a49fc4; text-decoration: line-through; }
.ui-ticket__foot { padding: 0 0.65em 0.6em; }
/* Room rack (reservations) */
.ui-rack { display: grid; grid-template-columns: 5.2em repeat(7, minmax(0, 1fr)); gap: 0.3em 0; font-size: 0.8em; align-items: center; }
.ui-rack__day { text-align: center; color: #6c6a8c; font-weight: 600; padding-bottom: 0.3em; border-bottom: 1px solid #ebe7f6; }
.ui-rack__room { font-weight: 650; color: #22204a; padding: 0.55em 0; border-top: 1px solid #f1eef9; }
.ui-rack__room small { display: block; font-weight: 500; color: #8e8cab; font-size: 0.85em; }
.ui-bk { height: 2.1em; margin: 0 0.15em; border-radius: 0.45em; padding: 0 0.6em; display: flex; align-items: center; color: #fff; font-weight: 600; font-size: 0.88em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-bk--res { background: #b29bec; }
.ui-bk--con { background: #6a45d6; }
.ui-bk--occ { background: #157a52; }
/* Plan comparison (insurance) */
.ui-plans { display: grid; grid-template-columns: 7.5em repeat(4, minmax(0, 1fr)); font-size: 0.82em; border: 1px solid #ebe7f6; border-radius: 0.7em; overflow: hidden; background: #fff; }
.ui-plans > div { padding: 0.55em 0.6em; border-top: 1px solid #f1eef9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-plans .h { border-top: 0; font-weight: 700; color: #22204a; background: #f8f6fd; }
.ui-plans .k { color: #6c6a8c; font-weight: 550; }
.ui-plans .best { background: #f1edfd; color: #3d2c8c; font-weight: 650; }
.ui-plans .h.best { background: #6a45d6; color: #fff; }
/* Bot flow map */
.ui-fmap { display: grid; gap: 0.55em; justify-items: start; }
.ui-fnode { position: relative; display: inline-flex; align-items: center; gap: 0.5em; padding: 0.55em 0.8em; border-radius: 0.6em; background: #fff; border: 1px solid #d6cfee; font-size: 0.85em; font-weight: 600; color: #2c2a52; }
.ui-fnode svg { color: #6a45d6; }
.ui-fnode--start { background: #6a45d6; color: #fff; border-color: #6a45d6; }
.ui-fnode--start svg { color: #fff; }
.ui-fnode--act { background: #f1edfd; }
.ui-fnode + .ui-fnode::before { content: ""; position: absolute; left: 1.4em; top: -0.6em; height: 0.6em; width: 2px; background: #b29bec; }
.ui-fbranch { display: flex; gap: 0.6em; padding-left: 1.6em; position: relative; }
.ui-fbranch::before { content: ""; position: absolute; left: 1.4em; top: -0.55em; height: 0.55em; width: 2px; background: #b29bec; }
/* Route map (logistics) */
.ui-map { position: relative; border-radius: 0.6em; overflow: hidden; background: #f4f2fb; aspect-ratio: 16 / 10; }
.ui-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Timeline (CRM) */
.ui-tl { display: grid; gap: 0.7em; }
.ui-tl__item { position: relative; display: grid; grid-template-columns: 1.6em 1fr; gap: 0.6em; font-size: 0.86em; }
.ui-tl__item::before { content: ""; position: absolute; left: 0.75em; top: 1.6em; bottom: -0.8em; width: 2px; background: #ebe7f6; }
.ui-tl__item:last-child::before { display: none; }
.ui-tl__dot { width: 1.6em; height: 1.6em; border-radius: 50%; display: grid; place-items: center; background: #f1edfd; color: #5338b4; }
.ui-tl__dot svg { width: 0.95em; height: 0.95em; }
.ui-tl__item b { display: block; color: #22204a; }
.ui-tl__item span { color: #6c6a8c; }
/* Profile header (CRM) */
.ui-profile { display: flex; align-items: center; gap: 0.8em; }
.ui-profile .ui-avatar { width: 3.2em; height: 3.2em; font-size: 0.95em; }
.ui-profile b { display: block; font-size: 1.15em; color: #22204a; }
.ui-profile span { color: #6c6a8c; font-size: 0.85em; }
/* Message composer */
.ui-compose { border: 1px solid #d6cfee; border-radius: 0.6em; padding: 0.8em; font-size: 0.9em; line-height: 1.5; color: #2c2a52; background: #fff; }
.ui-compose mark { background: #ece6fd; color: #5338b4; padding: 0 0.25em; border-radius: 0.25em; font-weight: 600; }
/* Storefront (e-commerce) */
.ui-store { background: #fff; }
.ui-store__bar { display: flex; align-items: center; justify-content: space-between; padding: 0.9em 1.3em; border-bottom: 1px solid #ebe7f6; }
.ui-store__brand { display: flex; align-items: center; gap: 0.5em; font-weight: 750; color: #22204a; font-size: 1.1em; }
.ui-store__brand i { width: 1.7em; height: 1.7em; border-radius: 0.45em; background: linear-gradient(135deg, #f0a7d9, #8668d9); }
.ui-store__hero { margin: 1em 1.3em; padding: 1.3em 1.4em; border-radius: 0.8em; background: linear-gradient(120deg, #f1edfd, #fbeef8); }
.ui-store__hero b { display: block; font-size: 1.35em; color: #22204a; letter-spacing: -0.01em; }
.ui-store__hero span { color: #6c6a8c; font-size: 0.88em; }
.ui-store__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.7em; padding: 0 1.3em 1.3em; }
.ui-cart { display: inline-flex; align-items: center; gap: 0.4em; padding: 0.4em 0.8em; border-radius: 999px; background: #22204a; color: #fff; font-weight: 650; font-size: 0.85em; }
/* Coupon code */
.ui-code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: 0.08em; font-weight: 700; color: #3d2c8c; }
/* "Preview" chip for coming-soon screens */
.mock__preview { position: absolute; top: 12px; right: 14px; z-index: 5; padding: 0.3em 0.75em; border-radius: 999px; font: 650 0.72rem/1.2 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; background: #22204a; color: #fff; }

/* ---------- Ask MapleCore: a conversation with your data ---------- */
.ui-chat { display: flex; flex-direction: column; gap: 0.8em; padding: 1.2em 1.4em; background: #f8f6fd; }
.ui-chat .ui-sms--out { max-width: 72%; }
.ui-answer { background: #fff; border: 1px solid #ebe7f6; border-radius: 1em 1em 1em 0.3em; padding: 0.9em 1em; max-width: 90%; font-size: 0.9em; color: #2c2a52; line-height: 1.45; }
.ui-answer__head { display: flex; align-items: center; gap: 0.45em; font-weight: 650; color: #5338b4; margin-bottom: 0.5em; font-size: 0.92em; }
.ui-answer .ui-rows { margin-top: 0.6em; }
.ui-suggest { display: flex; flex-wrap: wrap; gap: 0.4em; }
.ui-suggest span { padding: 0.35em 0.8em; border-radius: 999px; border: 1px solid #d6cfee; background: #fff; font-size: 0.8em; color: #5338b4; font-weight: 600; }
.ui-askbar { margin-top: auto; display: flex; align-items: center; gap: 0.6em; padding: 0.65em 0.85em; border-radius: 0.8em; background: #fff; border: 1px solid #d6cfee; color: #6e6c8f; font-size: 0.9em; }
.ui-askbar svg { color: #6a45d6; }
.phone > .mock__preview { top: -12px; right: -22px; }
.ui-phone .ui-askbar { font-size: 0.85em; }
/* Ask MapleCore hero: the first badge sits by the empty top-left of the chat, clear of the ask bar */
[data-page="ai"] .stage--device .float-badge--a { top: -3%; bottom: auto; left: -5%; }
@media (max-width: 599px) { [data-page="ai"] .stage--device .float-badge--a { display: none; } }