/* ===== Build your agent (#mix): a live agent the visitor configures and watches work =====
   Kept simple: on the left (above, on narrower screens) the business (one) and what the agent handles (any), as chips,
   and the CTA; on the right the agent's screen: its face (the 3D robot sprites), its name and a live status, then ONE
   event in focus (what came in, what the customer said) and 3 to 5 big plain steps that tick off as the agent does
   them, each with its tool and when. One quiet line of totals and the "Send a test …" button close it. Driven by
   assets/mix.js.

   Colour is the studio's service palette, used as a system: every task belongs to one service and carries that
   service's colour, the same --svc-* token it has everywhere on the site (the chip's tick, the step's tick and its
   spinner). Everything else is paper and ink.
     voice  = AI receptionist (tomato)        agents = AI agents (mint)          auto = business automation (sun)
     assist = bots & assistants (sky)         impl   = AI implementation (violet) web  = websites & growth (pink)
   Bricolage at the page's display weight for the name and the customer's words, Inter for the rest.
   States on [data-mix]: data-mix-state="live|paused|done|sleepy|empty", .is-paused (off screen, tab hidden, paused),
   .is-done (the run is over). Steps (.mxs): .is-todo / .is-work / .is-done. */

#mix [hidden] { display: none !important; }
/* The page takes its paper / ink tone from the section crossing the line 72% down the screen: the section always
   reaches past that line while the builder is the thing on screen. */
#mix { padding-bottom: max(var(--section), calc(72vh - 650px)); padding-bottom: max(var(--section), calc(72svh - 650px)); }
#mix .mx-nb { white-space: nowrap; } /* hyphenated words never break at the hyphen */
#mix .mx-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
#mix .head__note { max-width: 19rem; }

#mix .mixlab {
  --mx-card: var(--card, #FFFDF8);
  --mx-soft: #F4F1EA;
  --mx-ink: var(--ink, #0F0F10);
  --mx-text: #33312C;
  --mx-muted: #5C584F;                 /* 6.4:1 on the card */
  --mx-todo: #6F6B62;                  /* a step still to do: 5.1:1 on the card */
  --mx-line: rgba(15, 15, 16, .09);
  --mx-line-2: rgba(15, 15, 16, .2);
  --mx-pad: 2rem;
  --step-h: 52px;
  --stage-h: 424px;
  display: grid;
  grid-template-columns: minmax(260px, 330px) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  grid-template-areas: "controls app" "cta app";
  gap: var(--s-6, 2rem) clamp(2rem, 5vw, 4.5rem);
  align-items: start;
  touch-action: manipulation; /* every tap is a click at once: no double-tap-to-zoom wait */
}

/* the service colours (--sc) and the colour of a mark drawn on them (--so) */
#mix [data-svc] { --sc: var(--ink, #0F0F10); --so: #fff; }
#mix [data-svc="voice"] { --sc: var(--svc-voice, #FF5B37); --so: #fff; }
#mix [data-svc="agents"] { --sc: var(--svc-agents, #22D39A); --so: var(--ink, #0F0F10); }
#mix [data-svc="auto"] { --sc: var(--svc-auto, #FFC22E); --so: var(--ink, #0F0F10); }
#mix [data-svc="assist"] { --sc: var(--svc-assist, #3EC6FF); --so: var(--ink, #0F0F10); }
#mix [data-svc="impl"] { --sc: var(--svc-impl, #9B6BFF); --so: #fff; }
#mix [data-svc="web"] { --sc: var(--svc-web, #FF7AC6); --so: var(--ink, #0F0F10); }

/* ---------- the controls ---------- */
#mix .mixlab__controls { grid-area: controls; display: grid; gap: var(--s-6, 2rem); min-width: 0; padding-top: var(--s-1, .25rem); }
#mix .mixlab__group { display: grid; gap: var(--s-3, .75rem); min-width: 0; }
#mix .mixlab__label { margin: 0; color: var(--mx-muted); font: 500 var(--fs-xs, .8125rem)/1.2 var(--f-body); }
#mix .mixlab__chips { display: flex; flex-wrap: wrap; gap: var(--s-2, .5rem); }
#mix .mxchip {
  position: relative; display: inline-flex; flex: none; align-items: center; gap: .5rem; min-height: 40px; padding: 0 1rem;
  border: 1px solid var(--mx-line-2); border-radius: var(--r-pill, 999px); background: transparent; color: var(--mx-text);
  font: 500 .9rem/1.2 var(--f-body); white-space: nowrap; -webkit-tap-highlight-color: transparent; cursor: pointer;
  transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), scale .2s var(--ease);
}
#mix .mxchip:active { scale: .97; }
#mix .mxchip--biz[aria-pressed="true"] { border-color: var(--mx-ink); background: var(--mx-ink); color: var(--paper, #F3EFE6); }
/* a task: an empty ring while off, a tick in its service's colour while on */
#mix .mxchip--task { padding-left: .5rem; color: var(--mx-muted); }
#mix .mxchip--task[aria-pressed="true"] { border-color: rgba(15, 15, 16, .42); background: var(--mx-card); color: var(--mx-ink); }
#mix .mxchip__tick {
  position: relative; flex: none; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--mx-line-2);
  transition: background-color .35s var(--ease), box-shadow .35s var(--ease);
}
#mix .mxchip--task[aria-pressed="true"] .mxchip__tick { box-shadow: none; background: var(--sc); }
/* the check, drawn in --so (white on the darker colours, ink on the lighter ones) */
#mix .mxchip--task[aria-pressed="true"] .mxchip__tick::after, #mix .mxs.is-done .mxs__st::after {
  content: ""; position: absolute; inset: 0; background: var(--so);
  -webkit-mask: no-repeat center / 58% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.3 5 8.6l4.5-5' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask: no-repeat center / 58% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.3 5 8.6l4.5-5' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
@media (hover: hover) and (pointer: fine) {
  #mix .mxchip:hover { border-color: var(--mx-ink); color: var(--mx-ink); }
  #mix .mxchip--biz[aria-pressed="true"]:hover { color: var(--paper, #F3EFE6); }
  #mix .mixapp__test:hover, #mix .mixapp__play:hover { border-color: var(--mx-ink); }
  #mix .mixlab.is-done .mixapp__test:not([aria-disabled="true"]):hover { border-color: var(--mx-ink); background: var(--mx-ink); }
}

/* ---------- the CTA, under the controls ---------- */
#mix .mixlab__cta { grid-area: cta; align-self: end; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3, .75rem) var(--s-4, 1rem); min-width: 0; }
#mix .mixapp__note { margin: 0; color: var(--mx-muted); font-size: .8125rem; }
/* pressed: the calendar is on its way (mix.js clears it once the popup is up) */
#mix .mixapp__book.is-opening { cursor: progress; }
#mix .mixapp__book.is-opening .btn__arrow { background: var(--cobalt, #2F4BFF); color: #fff; }

/* ---------- the agent's screen ---------- */
#mix .mixapp {
  grid-area: app; position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; container: mixapp / inline-size;
  border: 1px solid var(--mx-line); border-radius: var(--r-md, 14px); background: var(--mx-card); color: var(--mx-ink);
  box-shadow: 0 1px 2px rgba(15, 15, 16, .04), 0 36px 72px -48px rgba(15, 15, 16, .36);
}
#mix .mixapp__bar { display: flex; align-items: center; gap: var(--s-4, 1rem); padding: .85rem var(--mx-pad) .85rem calc(var(--mx-pad) - .5rem); border-bottom: 1px solid var(--mx-line); }
/* the face: two stacked sprites that cross-fade (mix.js swaps the hidden one's pose in, decoded, then fades) */
#mix .mixapp__face { position: relative; flex: none; width: 60px; height: 60px; margin: -6px -4px -8px 0; }
#mix .mixapp__face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .45s var(--ease); }
#mix .mixapp__face img.is-on { opacity: 1; }
#mix .mixapp__who { flex: 1; min-width: 0; }
#mix .mixapp__name { margin: 0; overflow: hidden; font: var(--fw-display, 560) 1.375rem/1.15 var(--f-display); letter-spacing: -.012em; text-overflow: ellipsis; white-space: nowrap; font-synthesis: none; }
#mix .mixapp__status { display: flex; align-items: center; gap: .5rem; margin: .25rem 0 0; color: var(--mx-muted); font-size: .875rem; line-height: 1.3; }
#mix .mixapp__status span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the live dot: the agent is on (paused / asleep / off: grey) */
#mix .mixapp__status i { position: relative; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--mint, #22D39A); transition: background-color .4s; }
#mix .mixapp__status i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; opacity: 0; }
#mix [data-mix-state="live"] .mixapp__status i::after { animation: mx-ping 2.4s var(--ease) infinite; }
#mix :is([data-mix-state="paused"], [data-mix-state="sleepy"], [data-mix-state="empty"]) .mixapp__status i { background: rgba(15, 15, 16, .3); }
#mix .mixapp__play {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--mx-line-2);
  border-radius: 50%; background: transparent; color: var(--mx-ink); -webkit-tap-highlight-color: transparent; cursor: pointer; transition: border-color .25s, scale .2s var(--ease);
}
#mix .mixapp__play:active { scale: .94; }
#mix .mixapp__play .icon { width: 16px; height: 16px; }

/* the event in focus: a fixed height, so nothing on the page moves as events change */
#mix .mixapp__stage { position: relative; display: flex; flex-direction: column; gap: 1.5rem; height: var(--stage-h); padding: 1.75rem var(--mx-pad) 1.25rem; overflow: hidden; }
#mix .mxev { min-width: 0; }
#mix .mxev__src { display: flex; align-items: center; gap: .45rem; min-width: 0; min-height: 1.3em; margin: 0; color: var(--mx-muted); font-size: .875rem; line-height: 1.3; white-space: nowrap; }
#mix .mxev__src .icon { flex: none; width: 16px; height: 16px; margin-right: .1rem; color: var(--mx-ink); }
#mix .mxev__l { flex: none; color: var(--mx-ink); font-weight: 600; }
#mix .mxev__who { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#mix .mxev__dot { flex: none; opacity: .6; }
#mix .mxev__when { display: contents; }
#mix .mxev__src time { flex: none; font-variant-numeric: tabular-nums; }
#mix .mxev__tag { flex: none; margin-left: .25rem; padding: .1rem .45rem; border-radius: 5px; box-shadow: inset 0 0 0 1px var(--mx-line-2); color: var(--mx-ink); font: 600 .6875rem/1.4 var(--f-body); font-style: normal; }
/* what the customer said, big (or, for an event that isn't words, a plain note) */
#mix .mxev__ask { min-height: 1.25em; margin: .6rem 0 0; color: var(--mx-ink); font: var(--fw-display, 560) 1.5rem/1.25 var(--f-display); letter-spacing: -.014em; text-wrap: balance; font-synthesis: none; }
#mix .mxev__ask:not(.is-words) { color: var(--mx-text); }

/* the steps: a ring while to do, a spinner in the service's colour while doing, its tick once done */
#mix .mxsteps { display: grid; align-content: start; gap: .2rem; min-height: 0; margin: 0; padding: 0; list-style: none; }
#mix .mxs { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; column-gap: .95rem; min-height: var(--step-h); }
#mix .mxs__st { position: relative; width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--mx-line-2); transition: background-color .3s var(--ease), box-shadow .3s var(--ease); }
#mix .mxs.is-work .mxs__st { box-shadow: inset 0 0 0 2px var(--mx-soft); }
#mix .mxs.is-work .mxs__st::after { content: ""; position: absolute; inset: 0; border: 2.5px solid transparent; border-top-color: var(--sc); border-right-color: var(--sc); border-radius: 50%; animation: mx-spin 1s linear infinite; }
#mix .mxs.is-done .mxs__st { box-shadow: none; background: var(--sc); }
#mix .mxs__txt { min-width: 0; color: var(--mx-todo); font-size: 1.0625rem; font-weight: 400; line-height: 1.35; text-wrap: pretty; transition: color .4s var(--ease); }
#mix .mxs.is-work .mxs__txt, #mix .mxs.is-done .mxs__txt { color: var(--mx-ink); font-weight: 500; }
#mix .mxs__meta { color: var(--mx-muted); font-size: .8125rem; line-height: 1.3; text-align: right; white-space: nowrap; }
#mix .mxs__t { font-variant-numeric: tabular-nums; }
/* a narrow screen (phones; the two columns just above 960px): each step's tool and time go under its line, and the
   customer's words have room for two lines */
@container mixapp (max-width: 620px) {
  #mix .mixapp__stage { --step-h: 52px; --stage-h: 412px; gap: .8rem; padding: 1.2rem var(--mx-pad) 1rem; }
  #mix .mxev__src { font-size: .78rem; }
  #mix .mxev__src .icon { width: 14px; height: 14px; }
  #mix .mxev__src.is-test .mxev__when { display: none; } /* a test event: "Test" in place of the time */
  #mix .mxev__ask { min-height: 2.56em; margin-top: .5rem; font-size: 1.25rem; line-height: 1.28; }
  #mix .mxs { grid-template-columns: 22px minmax(0, 1fr); column-gap: .8rem; align-content: center; }
  #mix .mxs__st { grid-row: 1 / span 2; width: 22px; height: 22px; align-self: center; }
  #mix .mxs__txt { font-size: .9375rem; line-height: 1.3; }
  #mix .mxs__meta { grid-column: 2; margin-top: .15rem; font-size: .75rem; text-align: left; }
  /* an event with two or three steps: the list sits in the middle of the room under the event (never a half-empty card);
     four or five fill it from the top, as always */
  #mix .mxsteps { flex: 1 1 auto; align-content: center; }
  #mix .mxsteps:has(> :nth-child(4)) { flex: 0 1 auto; align-content: start; }
}
#mix .mixapp__empty { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: var(--s-6, 2rem); color: var(--mx-muted); font-size: 1rem; text-align: center; }

/* the foot: one quiet line of totals, the demo label, and a test event */
#mix .mixapp__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4, 1rem); padding: .9rem var(--mx-pad) 1rem; border-top: 1px solid var(--mx-line); }
#mix .mixapp__log { display: grid; gap: .2rem; min-width: 0; }
#mix .mixapp__totals { min-height: 1.35em; margin: 0; overflow: hidden; color: var(--mx-text); font-size: .875rem; line-height: 1.35; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
#mix .mixapp__demo { margin: 0; color: var(--mx-muted); font-size: .75rem; line-height: 1.3; white-space: nowrap; }
#mix .mixapp__test {
  display: inline-flex; flex: none; align-items: center; gap: .5rem; min-height: 42px; padding: 0 1.05rem 0 .9rem;
  border: 1px solid var(--mx-line-2); border-radius: var(--r-pill, 999px); background: var(--mx-card); color: var(--mx-ink);
  font: 500 .9rem/1 var(--f-body); white-space: nowrap; -webkit-tap-highlight-color: transparent; cursor: pointer;
  transition: border-color .25s, background-color .25s, color .25s, scale .2s var(--ease);
}
#mix .mixapp__test:active { scale: .97; }
#mix .mixapp__test .icon { width: 15px; height: 15px; }
#mix .mixapp__test[aria-disabled="true"] { color: var(--mx-muted); }
#mix .mixapp__test.is-nudge { animation: mx-nudge .45s var(--ease); }
/* all caught up: the way to keep it going is the one thing in colour */
#mix .mixlab.is-done .mixapp__test:not([aria-disabled="true"]) { border-color: var(--cobalt, #2F4BFF); background: var(--cobalt, #2F4BFF); color: #fff; }

/* paused (off screen, tab hidden, or the visitor's pause): nothing moves */
#mix .mixlab.is-paused .mixapp *, #mix .mixlab.is-paused .mixapp *::before, #mix .mixlab.is-paused .mixapp *::after { animation-play-state: paused !important; }

@keyframes mx-spin { to { rotate: 1turn; } }
@keyframes mx-ping { 0% { opacity: .55; scale: 1; } 80%, 100% { opacity: 0; scale: 2.8; } }
@keyframes mx-nudge { 25% { translate: -4px 0; } 60% { translate: 3px 0; } }
@keyframes mx-bob { from { translate: 0 0; } to { translate: 0 -3px; } }
@keyframes mx-wait { 50% { translate: 5px 0; opacity: .45; } }
@media (prefers-reduced-motion: no-preference) {
  html:not(.is-still) #mix .mixapp__face { animation: mx-bob 2.8s ease-in-out infinite alternate; }
  #mix .mixapp__book.is-opening .btn__arrow .icon { animation: mx-wait .8s ease-in-out infinite; }
}

/* ---------- narrower: one column, the controls, then the screen, then the CTA ---------- */
@media (max-width: 960px) {
  #mix .mixlab { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "controls" "app" "cta"; gap: var(--s-5, 1.5rem); }
  #mix .mixlab__controls { gap: var(--s-4, 1rem); padding-top: 0; }
  #mix .mixlab__group { gap: var(--s-2, .5rem); }
  #mix .mixlab__cta { align-self: start; }
}

/* ---------- phones (and short landscape screens): an app screen in one clean column ---------- */
@media (max-width: 720px), (max-width: 960px) and (max-height: 500px) {
  #mix .mixlab { gap: var(--s-3, .75rem); }
  #mix .mixlab__controls { gap: var(--s-3, .75rem); }
  #mix .mixlab__group { gap: .4rem; }
  /* the business: a three-by-two grid; the tasks: a two-column list, always four rows tall (eight tasks at most), so
     picking a business never moves the screen under it */
  #mix .mixlab__chips--biz { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  #mix .mixlab__chips--task { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, 44px); gap: 6px; }
  #mix .mxchip { min-height: 44px; min-width: 0; padding: 0 .5rem; font-size: .8438rem; }
  #mix .mxchip--biz { justify-content: center; }
  #mix .mxchip--task { padding: 0 .6rem 0 .5rem; }
  #mix .mxchip__l { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  #mix .mixapp__play, #mix .mixapp__test { min-height: 44px; }
  #mix .mixapp__play { width: 44px; height: 44px; }
}
/* short landscape screens: wide rows, so the controls and the screen's top fit together */
@media (min-width: 721px) and (max-width: 960px) and (max-height: 500px) {
  #mix .mixlab__chips--biz { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  #mix .mixlab__chips--task { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, 44px); }
}
/* the narrowest phones (320-340px): a label may take two lines in a taller chip (every row the same height, so picking a
   business still never moves the screen), and the screen grows a little so five steps still fit */
@media (max-width: 340px) {
  #mix .mixlab__chips--task { grid-template-rows: repeat(4, 52px); }
  #mix .mxchip { white-space: normal; line-height: 1.15; }
  #mix .mxchip--biz { text-align: center; }
  #mix .mxchip__l { overflow: visible; text-overflow: clip; }
  #mix .mixapp__stage { --stage-h: 436px; }
  #mix .mxs__txt { font-size: .875rem; }
}
@media (max-width: 720px) {
  #mix .mixlab { --mx-pad: 1.1rem; }
  /* the heading's note ("on sample data") is above the fold here: the screen says it is a demo itself */
  #mix .mixapp__name::after { content: "Demo"; display: inline-block; margin-left: .5rem; padding: .1rem .45rem; border-radius: 5px; box-shadow: inset 0 0 0 1px var(--mx-line-2); color: var(--mx-muted); font: 600 .6875rem/1.4 var(--f-body); letter-spacing: 0; vertical-align: .25em; }
  #mix .mixapp__bar { gap: var(--s-3, .75rem); padding: .6rem var(--mx-pad) .6rem calc(var(--mx-pad) - .4rem); }
  #mix .mixapp__face { width: 52px; height: 52px; margin: -6px -2px -8px 0; }
  #mix .mixapp__name { font-size: 1.1875rem; }
  #mix .mixapp__status { margin-top: .15rem; font-size: .8125rem; }
  #mix .mixapp__foot { flex-direction: column; align-items: stretch; gap: .8rem; padding: .85rem var(--mx-pad) var(--mx-pad); }
  #mix .mixapp__test { justify-content: center; }
  #mix .mixlab__cta { flex-direction: column; align-items: stretch; gap: .5rem; }
  #mix .mixapp__book { justify-content: space-between; }
  #mix .mixapp__note { text-align: center; }
}

/* Touch screens keep :hover on the last thing tapped. The page's button hover (the lift, the turned arrow) is a mouse
   effect: on touch the press is shown by :active instead, and a tapped button keeps its own look. */
@media not all and (hover: hover) and (pointer: fine) {
  #mix .btn:hover:not(:focus-visible) { translate: none; box-shadow: none; }
  #mix .btn:hover:not(:focus-visible) .btn__arrow { rotate: none; background: var(--b-fg); color: var(--b-bg); }
}

/* ---------- the page around the builder ---------- */
/* An old floating dock (if any) steps away while the builder is on screen (mix.js sets html.mix-on). */
html.mix-on .dock, html.mix-on .dock.is-on { visibility: hidden; opacity: 0; translate: 0 150%; pointer-events: none; transition: translate .5s var(--ease), opacity .3s, visibility 0s .5s; }
html.mix-on .dock__agent { pointer-events: none; }
/* The mobile menu fades out for a moment after a link in it is tapped, still visible to hit-testing: the first tap on
   the builder it just jumped to would land on the fading menu. A closed menu never takes a tap. */
.mnav:not(.is-open) { pointer-events: none; }

/* Reduced motion / "Pause animations": no animation at all inside the builder (it still works the same) */
@media (prefers-reduced-motion: reduce) {
  #mix .mixlab *, #mix .mixlab *::before, #mix .mixlab *::after { transition: none !important; animation: none !important; }
}
html.is-still #mix .mixlab *, html.is-still #mix .mixlab *::before, html.is-still #mix .mixlab *::after { transition: none !important; animation: none !important; }