/* The live demo page (src/pages/demo/live.mjs): a focused, full-screen page of its own. A slim top bar, one stage and a
   quiet legal row; nothing else. The app scenes inside the stage are in presenter-scenes.css.

   The stage has three layouts, set by data-mode on #stage:
     conversation  the opening card and the discovery questions: one large panel over a soft skeleton of the app, the
                   guide on the left, the words and the controls on the right
     showcase      a step: the guide, the step's words, Back and Next step and the call controls in a left column of
                   about a third, the app scene in its frame on the right
     close         the closing card: the same large panel, the guide on the left, the recap and the card on the right
   On a phone the columns stack: the guide and the step's words in a compact block that stays under the top bar, then
   the scene, with the call controls fixed to the bottom edge during a call.

   Attributes on .ai-demo that change the layout: data-live-link (a personal link: the call controls exist),
   data-live-connected (a call is running), data-live-line (waiting in line or offered a turn).
   Motion: the guide glides between layouts, the ring glides between regions, chips fade in. The page's reduced-motion
   rule makes those instant; the Sixto mark keeps its own motion under both preferences (AGENTS.md). */
body.is-bare:has(.ai-demo){overflow:auto}
.ai-demo{--accent-h:var(--accent-hover);--s2:var(--surface-2);--s3:var(--surface-3);--s4:var(--surface-4);--border-2:var(--border-strong);--hair:var(--hairline);--hair2:var(--hairline-2);--sh1:var(--sh-1);--font:var(--font-sans);--mono:var(--font-mono);--ease:cubic-bezier(0.23,1,0.32,1);--bar-h:56px;
display:flex;flex-direction:column;height:100dvh;min-height:620px;background:var(--s3);color:var(--ink);
*{box-sizing:border-box;margin:0}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
svg.i{width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:-.2em}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mono{font-family:var(--mono)}
button:disabled{opacity:.5;cursor:not-allowed}

/* ---------- the top bar: brand, progress menu, time left, language, sign up ---------- */
/* The step menu is centred while the bar has room; when the right side is crowded (the place in line, the time
   left, the links) the sides keep their full width and the step label shortens, so nothing is ever covered. */
.pv-bar{flex:none;position:relative;z-index:30;display:grid;grid-template-columns:minmax(max-content,1fr) minmax(0,auto) minmax(max-content,1fr);align-items:center;gap:12px;height:var(--bar-h);padding:0 20px;background:#fff;border-bottom:1px solid var(--hair)}
.pv-brand{justify-self:start;display:inline-flex;align-items:center;gap:8px;font-size:20px;font-weight:600;letter-spacing:-.03em;color:var(--ink);text-decoration:none}
.pv-prog{position:relative;justify-self:stretch;justify-content:center;min-width:0}
.pv-prog-btn{display:inline-flex;align-items:center;gap:12px;max-width:100%;height:36px;padding:0 12px 0 14px;border:1px solid var(--hair);border-radius:99px;background:var(--s4);transition:border-color .2s,background .2s}
.pv-prog-btn:hover,.pv-prog-btn[aria-expanded=true]{border-color:var(--border-2);background:#fff}
.pv-dots{display:inline-flex;align-items:center;gap:5px;flex:none}
.pv-dots i{display:block;width:6px;height:6px;border-radius:3px;background:var(--border-2);transition:width .35s var(--ease),background-color .2s}
.pv-dots i.done{background:var(--accent)}
.pv-dots i.cur{width:20px;background:var(--accent)}
.pv-step{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.pv-caret{width:14px;height:14px;color:var(--muted);transition:transform .2s}
.pv-prog-btn[aria-expanded=true] .pv-caret{transform:rotate(180deg)}
.pv-menu{position:absolute;z-index:40;top:calc(100% + 8px);left:50%;translate:-50% 0;display:flex;flex-direction:column;gap:1px;width:max-content;min-width:260px;max-width:calc(100vw - 24px);padding:6px;background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:var(--sh-menu)}
.pv-menu button{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:40px;padding:8px 12px;border-radius:9px;font-size:14.5px;text-align:left;color:var(--ink)}
.pv-menu button:hover{background:var(--s2)}
.pv-menu button.cur{background:var(--green-bg);color:var(--green-fg);font-weight:500}
.pv-menu b{font-family:var(--mono);font-size:11.5px;font-weight:500;color:var(--muted)}
.pv-menu button.cur b{color:var(--green-fg)}
/* The guide's map control, beside the step menu (index.js). The map itself loads when asked for (more/more.css). */
.pv-prog{display:flex;align-items:center;gap:8px}.pv-prog-btn{min-width:0}
.pv-map-btn{flex:none;display:inline-grid;place-items:center;width:36px;height:36px;border:1px solid var(--hair);border-radius:50%;background:var(--s4);color:var(--ink-2);transition:border-color .2s,background .2s,color .2s}
.pv-map-btn:hover,.pv-map-btn[aria-expanded=true]{border-color:var(--border-2);background:#fff;color:var(--accent)}
.pv-map-btn svg{width:17px;height:17px}
.pv-right{justify-self:end;display:flex;align-items:center;gap:10px;min-width:0}
/* The language: the site header's menu (header.css), drawn as one of the bar's pills. */
.pv-lang{flex:none;border:0;border-radius:99px;background:none}
.pv-lang summary{height:36px;min-height:0;gap:5px;padding:0 8px 0 10px;border:1px solid var(--hair);border-radius:99px;background:var(--s4);font-size:12.5px;color:var(--ink-2)}
.pv-lang summary:hover,.pv-lang[open] summary{border-color:var(--border-2);background:#fff}
.pv-times{display:inline-flex}
.pv-time{display:inline-flex;align-items:center;height:30px;padding:0 11px;border:1px solid var(--hair);border-radius:99px;background:var(--s4);font-family:var(--mono);font-size:11.5px;font-variant-numeric:tabular-nums;color:var(--ink-2);white-space:nowrap}
.pv-signup{display:inline-flex;align-items:center;height:36px;padding:0 16px;border-radius:9px;background:var(--accent);color:#fff;font-size:14.5px;font-weight:500;text-decoration:none;white-space:nowrap;transition:background-color .15s}
.pv-signup:hover{background:var(--accent-h);color:#fff}
/* The place in line stays in sight in the bar while the visitor uses the tour. */
.live-line-badge{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px;border:1px solid var(--accent);border-radius:99px;background:#fff;color:var(--ink);font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.live-line-badge::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--accent)}
&[data-live-line=offered] .live-line-badge{background:var(--accent);color:#fff}
&[data-live-line=offered] .live-line-badge::before{background:#fff}

/* ---------- the stage ---------- */
#demoView{flex:1;min-height:0;display:flex;padding:12px 16px 0}
.stage{position:relative;flex:1;min-width:0;min-height:0;display:grid;--pw:clamp(180px,min(30vw,calc(100dvh - 330px)),390px)}
.showcase{display:none;position:relative;min-width:0;min-height:0}
.vp{position:relative;flex:1;min-width:0;min-height:0;overflow:hidden}

/* the opening card, the discovery and the closing card: one large panel over a soft skeleton of the app */
.stage[data-mode=conversation],.stage[data-mode=close]{place-items:center;border:1px solid var(--hair);border-radius:24px;background:linear-gradient(180deg,#F9FCF8,#F2F7F1);overflow:hidden}
/* Behind the opening, the questions and the close: the real app, faint and slightly out of focus, cleared in the middle
   where the guide and the words sit. It is a picture, not an interface: inert, still, with every part of the scene shown. */
.pv-skel{position:absolute;inset:0;padding:22px;opacity:.42;filter:blur(1.2px);pointer-events:none;overflow:hidden;-webkit-mask-image:radial-gradient(ellipse 46% 42% at 50% 50%,transparent 30%,#000 100%);mask-image:radial-gradient(ellipse 46% 42% at 50% 50%,transparent 30%,#000 100%)}
.pv-skel .app{position:relative;width:100%;height:100%}
.pv-skel *{animation:none!important;transition:none!important}
.pv-skel .rv{opacity:1;visibility:visible;transform:none}
.pv-skel .ap-toasts{display:none}
.stage[data-mode=showcase] .pv-skel{display:none}
.pv-side{position:relative;z-index:1;display:grid;grid-template-columns:auto minmax(0,540px);grid-template-areas:"guide ." "guide body" "guide transcript" "guide dock" "guide .";grid-template-rows:1fr auto auto auto 1fr;align-content:safe center;align-items:start;column-gap:clamp(28px,5vw,72px);width:100%;max-width:1120px;max-height:100%;padding:28px clamp(20px,4vw,48px);overflow-y:auto}
.guide-presenter{grid-area:guide;align-self:center;position:relative;flex:none;width:var(--pw);aspect-ratio:1;transform-origin:top left}
.pv-body{grid-area:body;min-width:0;display:flex;flex-direction:column}
.live-dock{grid-area:dock}

/* the guide */
.pres-in{position:relative;width:100%;height:100%}
.ring{position:absolute;inset:-7px;border-radius:50%;border:1px solid rgba(47,107,79,.22);transition:border-color .4s}
.guide-presenter.speaking .ring{animation:halo 2.2s ease-out infinite}
.guide-presenter.joining .ring{animation:halo 1.3s ease-out infinite}
.guide-presenter.joining .presenter-poster{opacity:.65}
.guide-presenter.listening .ring{border-color:rgba(43,90,145,.5)}
.presenter-media{position:absolute;inset:0;display:grid;place-items:center;border-radius:50%;overflow:hidden;background:var(--accent-soft);border:4px solid #fff;box-shadow:0 14px 40px rgba(20,40,25,.16)}
.presenter-media img,.presenter-media video{width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block;transform:scale(1.04)}
.pname{position:absolute;left:50%;bottom:-13px;translate:-50% 0;display:flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--hair);border-radius:99px;padding:4px 12px 4px 9px;font-weight:500;font-size:12.5px;white-space:nowrap;box-shadow:var(--sh1)}
.pname::before{content:"";width:6px;height:6px;border-radius:50%;background:#3aa56f}
.pname small{color:var(--muted);font-size:12.5px}

/* the words: the step label, the heading, the paragraph */
.pv-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:24px;margin-bottom:8px}
.pv-meta:not(:has(.pv-label:not([hidden]),.live-link:not([hidden]))){display:none}
.pv-label{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-h)}
.pv-links{margin-left:auto}
.live-toggles{display:inline-flex;gap:14px}
.live-link{display:inline-flex;align-items:center;min-height:24px;font-size:12.5px;color:var(--muted);text-decoration:underline dotted;text-underline-offset:3px;white-space:nowrap}
.live-link:hover,.live-link[aria-expanded=true]{color:var(--ink)}
.caption h2{font-size:clamp(28px,3.3vw,44px);font-weight:600;letter-spacing:-.025em;line-height:1.1;text-wrap:balance;outline:0}
.caption p{margin-top:14px;max-width:34em;font-size:17px;line-height:1.5;color:var(--ink-2)}
.stage[data-mode=close] .caption h2{font-size:clamp(22px,2.3vw,30px);line-height:1.18}

/* quick replies and buttons */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.chips:empty{display:none}
.chip-br{flex-basis:100%;height:0}
.chip{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:9px 20px;border-radius:99px;background:#fff;border:1px solid var(--border-2);font-weight:500;font-size:15.5px;color:var(--ink);text-decoration:none;white-space:nowrap;transition:border-color .2s,background-color .2s,transform .2s;animation:chipin .45s var(--ease) backwards}
.chip:hover{border-color:var(--accent);background:var(--s2)}
.chip:active{transform:scale(.98)}
.chip.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.chip.primary:hover{background:var(--accent-h)}
.chip.ghost{border-color:transparent;background:transparent;color:var(--muted);font-weight:400}
.chip.ghost:hover{color:var(--ink);background:rgba(20,40,25,.04)}
.chip.on{background:var(--green-bg);border-color:var(--accent);color:var(--green-fg)}
.chip[disabled]{opacity:.45;pointer-events:none}
.chip.sm{min-height:38px;padding:6px 14px;font-size:14px}
.pv-nav{display:flex;gap:10px;margin-top:18px}
.pv-nav #navNext{flex:1}
.pv-nav #navBack{min-height:44px;padding:0 16px 0 12px}

/* your setup: one segment per area, and what was noted */
.setup{position:relative;align-self:flex-start;margin-top:14px}
.setup>button{display:inline-flex;align-items:center;gap:8px;min-height:30px;padding:4px 10px 4px 12px;border:1px solid var(--hair);border-radius:99px;background:rgba(255,255,255,.8);font-size:12.5px;color:var(--muted)}
.setup>button:hover{color:var(--ink);border-color:var(--border-2)}
.setup .seg{display:inline-flex;gap:3px}
.setup .seg i{display:block;width:14px;height:5px;border-radius:3px;background:var(--border-2)}
.setup .seg i.on{background:var(--accent)}
.setup .seg i.skip{background:transparent;box-shadow:inset 0 0 0 1px var(--border-2)}
.setup>button b{display:grid;place-items:center;min-width:18px;height:18px;border-radius:9px;background:var(--accent-soft);color:var(--green-fg);font-size:11px;font-weight:600;padding:0 5px}
.setup .pop{position:absolute;z-index:12;left:0;bottom:calc(100% + 6px);width:290px;max-width:calc(100vw - 48px);background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:var(--sh-menu);padding:12px 14px;text-align:left}
.setup .pop h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:500;margin-bottom:8px}
.setup .pop dl{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;align-items:center;font-size:13px}
.setup .pop dt{color:var(--muted)}
.setup .pop dd{display:flex;align-items:center;justify-content:flex-end;gap:4px;min-width:0;font-weight:500;text-align:right}
.setup .pop dd span{min-width:0;overflow-wrap:anywhere}
.setup-x{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;color:var(--muted)}
.setup-x:hover{background:rgba(20,40,25,.06);color:var(--ink)}
.setup-hint{margin-top:8px;font-size:12px;color:var(--muted)}

/* ---------- a step: the guide's column and the scene ---------- */
.stage[data-mode=showcase]{grid-template-columns:minmax(330px,34%) minmax(0,1fr);gap:14px;--pw:clamp(112px,calc(100dvh - 548px),250px)}
.stage[data-mode=showcase] .pv-side{display:flex;flex-direction:column;max-width:none;height:100%;padding:20px 22px 0;background:#fff;border:1px solid var(--hair);border-radius:22px}
.stage[data-mode=showcase] .guide-presenter{align-self:flex-start;margin:4px 0 30px 6px}
.stage[data-mode=showcase] .pv-body{flex:none}
.stage[data-mode=showcase] .caption h2{font-size:clamp(22px,2vw,28px);line-height:1.16}
.stage[data-mode=showcase] .caption p{margin-top:10px;font-size:16px;min-height:3em}
.stage[data-mode=showcase] .showcase{display:flex}
.stage[data-mode=showcase] .setup{margin-top:12px}
/* the dock is the foot of the column: it stays in sight while the words above it scroll */
.stage[data-mode=showcase] .live-dock{position:sticky;bottom:0;margin-top:auto;padding:12px 0 16px;background:linear-gradient(rgba(255,255,255,0),#fff 14px)}

/* ---------- the closing card ---------- */
.stage[data-mode=close]{--pw:clamp(140px,min(22vw,calc(100dvh - 420px)),300px)}
.stage[data-mode=close] .pv-side{grid-template-columns:auto minmax(0,520px)}
.stage[data-mode=close] .chips{display:block;margin-top:14px}
.stage[data-mode=close] .setup,.stage[data-mode=close] .live-cap:has(p:empty){display:none}
.sb-recap{list-style:none;padding:0;margin:0 0 14px;display:flex;flex-direction:column;gap:6px;font-size:14.5px;line-height:1.4;color:var(--ink-2)}
.sb-recap li{display:flex;gap:9px;align-items:flex-start}
.sb-recap svg{color:var(--accent);margin-top:2px;stroke-width:2.2}
.soft{background:#fff;border:1px solid var(--border);border-radius:18px;box-shadow:var(--sh-card);padding:18px 20px 16px;text-align:left;animation:chipin .6s var(--ease) backwards}
.soft h3{font-size:19px;font-weight:600;letter-spacing:-.015em}
.soft .sub{font-size:13.5px;color:var(--muted);margin:2px 0 12px}
.soft .row{display:grid;grid-template-columns:1fr 1.4fr;gap:10px}
.soft input[type=text]{width:100%;height:44px;border-radius:10px;border:1px solid var(--border-2);background:var(--s4);padding:0 12px;font-size:16px;outline:0;transition:border-color .2s,box-shadow .2s}
.soft input[type=text]:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(47,107,79,.12);background:#fff}
.soft label.consent{display:flex;gap:10px;align-items:flex-start;margin-top:12px;font-size:12.5px;color:var(--muted);line-height:1.4;cursor:pointer}
.soft label.consent input{width:18px;height:18px;accent-color:var(--accent);margin-top:1px;flex:none}
.soft label.consent.nudge{animation:nudge .5s}
.soft .acts{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;margin-top:14px}
.soft .acts .chip.ghost{padding:6px 10px;color:var(--accent-h);text-decoration:underline;text-underline-offset:3px}
.soft a{color:var(--accent-h);text-decoration:underline;text-underline-offset:2px}
.close-more{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 20px;margin-top:10px}
.soft-skip{min-height:32px;font-size:13px;color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.soft-skip:hover{color:var(--ink)}

/* ---------- the call dock ---------- */
.live-dock{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:20px;font-size:13px;line-height:1.45;color:var(--muted)}
.live-status{max-width:36em;font-size:14.5px;color:var(--ink-2);text-wrap:pretty}
.live-status:empty{display:none}
.live-dock[data-tone=e] .live-status{color:var(--ink);font-weight:600}
/* "Ready" needs no line of its own on the opening card: the buttons say it. Screen readers still hear it. */
.live-dock[data-status=idle] .live-status{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.live-countdown{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:600;color:var(--accent)}
.live-idle{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;font-size:13.5px;color:var(--ink-2)}
.live-assure{order:-1;display:flex;flex-wrap:wrap;gap:8px}
.live-assure span{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border:1px solid var(--hair);border-radius:99px;background:rgba(255,255,255,.8);font-size:12px;color:var(--muted)}
.live-assure span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--mint)}
.live-actions{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.live-provider{display:grid;gap:6px;width:100%;max-width:360px;font-size:13px;color:var(--ink-2)}
.live-provider select{width:100%;min-height:44px;padding:8px 12px;border:1px solid var(--border);border-radius:12px;background:#fff;color:var(--ink);font:inherit}
.live-provider p{margin:0;color:var(--muted);font-size:12px}
.live-actions:not(:has(>:not([hidden]))){display:none}
/* After a call the next step comes first; talking again and the tour follow. */
.live-actions [data-live-start]:not(.primary){order:1}
.live-actions [data-live-start]:not(.primary)~[data-live-guided]{order:2}
.live-agree label{display:inline-flex;align-items:center;gap:9px;min-height:44px;cursor:pointer;color:var(--ink-2);font-size:14px}
.live-agree input{flex:none;width:18px;height:18px;accent-color:var(--accent)}
.live-agree a{color:var(--accent-h);text-decoration:underline;text-underline-offset:2px}
.live-challenge:empty,.live-call:not(:has(>:not([hidden]))){display:none}
.live-call{display:flex;gap:8px}
.live-call .chip{min-height:44px}
[data-live-open]{display:none}
/* With a personal link the opening card's own buttons are the dock's: "Talk with Sixto" and "Show me the tour". */
&[data-live-link] .stage[data-mode=conversation] .chips:has(>[data-chip=go]:only-child){display:none}
/* Beside a tour step, and under the closing card: one quiet way back to the opening card, where a call starts. */
&:not([data-live-connected]) .stage:not([data-mode=conversation]) .live-dock:not([data-busy])>:not(.live-actions,[data-live-status]){display:none}
&:not([data-live-connected]) .stage:not([data-mode=conversation]) .live-dock:not([data-busy]) .live-actions>:not([data-live-open]){display:none}
&:not([data-live-connected]) .stage:not([data-mode=conversation]) .live-dock:not([data-busy]) .live-status{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
&:not([data-live-connected]) .stage:not([data-mode=conversation]) [data-live-open]:not([hidden]){display:inline-flex}
&:not([data-live-connected]) .stage[data-mode=close] .live-dock{align-items:center;margin-top:12px}
/* A call that is still connecting keeps its status, the bot check and End call wherever the visitor has gone. */
&:not([data-live-connected]) .stage:not([data-mode=conversation]) .live-dock[data-busy]>:not([data-live-status],.live-challenge,.live-call){display:none}
/* In a call: the status line with End call beside it, then speak or type. Always in sight. */
&[data-live-connected] .live-dock{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 12px;width:100%}
&[data-live-connected] .live-dock>:not(.live-status,.live-call,.live-idle,.inputbar,audio){display:none}
&[data-live-connected] .live-status{display:flex;align-items:baseline;gap:8px;font-size:13.5px}
&[data-live-connected] .live-status::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:#3aa56f;translate:0 -1px}
&[data-live-connected] .live-dock[data-state=muted] .live-status::before{background:var(--border-2)}
&[data-live-connected] .live-status{grid-area:1 / 1}
&[data-live-connected] .live-call{grid-area:1 / 2}
&[data-live-connected] .live-idle,&[data-live-connected] .inputbar{grid-column:1 / -1}
&[data-live-connected] .stage[data-mode=close] .live-dock{margin-top:14px}
.inputbar{display:flex;gap:6px;align-items:center;width:100%;background:#fff;border:1px solid var(--border);border-radius:99px;padding:4px 4px 4px 16px}
.inputbar input{flex:1;min-width:0;min-height:44px;border:0;background:transparent;padding:0 4px;font-size:16px;outline:0}
.inputbar input::placeholder{color:var(--muted)}
.inputbar:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(47,107,79,.1)}
.ib{display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:none;height:44px;border-radius:99px;color:var(--muted)}
.ib.mic{padding:0 12px;border:1px solid var(--hair);font-size:12.5px;white-space:nowrap}
.ib.mic[aria-pressed=true]{background:#DEE7F3;border-color:transparent;color:#2B5A91}
/* The page hears the visitor: the microphone control says so and carries a soft ring while they speak. */
.ib.mic[data-hearing]{background:var(--green-bg);color:var(--green-fg);box-shadow:0 0 0 3px rgba(47,107,79,.22)}
/* The one gentle re-prompt of a question, or a microphone that is off: the quick replies and Skip are softly
   highlighted, and with the microphone off so is its control. A static highlight, the same under every motion setting. */
&:is([data-live-nudge],[data-live-mic])[data-sb=you] .chips .chip:not(.on){border-color:var(--accent);box-shadow:0 0 0 3px rgba(47,107,79,.14)}
&:is([data-live-nudge],[data-live-mic])[data-sb=you] .chips .chip.ghost{color:var(--ink);background:rgba(47,107,79,.06)}
&[data-live-mic] .ib.mic{border-color:var(--accent);color:var(--ink);box-shadow:0 0 0 3px rgba(47,107,79,.14)}
.ib.send{width:44px;background:var(--accent);color:#fff}
/* The typed box and the microphone exist only during a live call: the visitor speaks or types. */
&:not([data-live-connected]) .inputbar{display:none}
/* What the guide is saying, when asked for: two lines at reading size, the newest words in view. */
.live-cap{flex:none;height:45px;margin-top:12px;padding-left:10px;border-left:2px solid var(--mint);overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;font-size:15px;line-height:22.5px;color:var(--ink-2)}
.live-cap p{margin:0;overflow-wrap:anywhere}
/* The transcript panel: a drawer on the right edge of the stage, over the scene and never moving it or the guide. It
   is not a dialog: the call and every control behind it stay usable. On a phone it is a sheet from the bottom, above
   the call controls. Only the slide is motion, and the page's reduced-motion rule makes it instant. */
.live-transcript{position:absolute;z-index:24;top:12px;right:12px;bottom:12px;width:min(360px,calc(100% - 24px));display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);border-radius:18px;box-shadow:var(--sh-menu);font-size:14px;text-align:left;overflow:hidden;animation:ltin .28s var(--ease)}
.live-transcript[hidden]{display:none}
/* Beside a step the drawer lies over the app scene and nothing moves. On the opening questions and the closing card
   there is no scene to lie over: the guide and the words keep to the left of it, so every answer stays in reach. */
@media (min-width:901px){.stage:not([data-mode=showcase]):has(.live-transcript:not([hidden])) .pv-side{justify-self:start;max-width:calc(100% - 372px);column-gap:28px;transition:max-width .28s var(--ease)}}
@media (min-width:901px) and (max-width:1180px){.live-transcript{width:300px}.stage:not([data-mode=showcase]):has(.live-transcript:not([hidden])) .pv-side{max-width:calc(100% - 312px);column-gap:20px}}
@keyframes ltin{from{opacity:0;transform:translateX(24px)}}
@keyframes ltup{from{opacity:0;transform:translateY(24px)}}
.lt-head{flex:none;display:flex;align-items:center;gap:12px;padding:10px 10px 10px 16px;border-bottom:1px solid var(--hair)}
.live-transcript-title{flex:1;min-width:0;font-size:13px;font-weight:600;color:var(--ink)}
.live-transcript .live-link:disabled{opacity:.5;cursor:default}
.live-transcript .live-link[data-copied=true]{color:var(--accent-h);text-decoration:none}
.lt-close{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:10px;color:var(--muted)}
.lt-close:hover{background:var(--s3);color:var(--ink)}
.lt-close .i{width:16px;height:16px}
[data-live-transcript]{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:14px 14px 18px;display:flex;flex-direction:column;gap:14px}
[data-live-transcript]:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.lt-empty{padding:0 16px 18px;color:var(--muted);font-size:13px}
.lt-group{display:flex;gap:8px;max-width:92%}
.lt-group[data-who=you]{align-self:flex-end;justify-content:flex-end}
.lt-pic{flex:none;width:28px;height:28px;border-radius:50%;object-fit:cover;margin-top:18px}
.lt-lines{display:flex;flex-direction:column;gap:4px;min-width:0}
.lt-group[data-who=you] .lt-lines{align-items:flex-end}
.lt-name{font-size:11.5px;font-weight:600;color:var(--muted)}
.lt-line{padding:8px 11px;border-radius:4px 14px 14px 14px;background:var(--s3);color:var(--ink);line-height:1.42;overflow-wrap:anywhere}
.lt-group[data-who=you] .lt-line{border-radius:14px 4px 14px 14px;background:var(--accent-soft)}
.lt-line[data-live]{box-shadow:inset 0 0 0 1px var(--accent)}
.lt-text{display:block}
.lt-meta{display:flex;gap:8px;margin-top:3px;font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.lt-how,.lt-now{font-family:var(--font);font-size:11px}
.lt-now{color:var(--accent-h)}
.lt-now[hidden]{display:none}
.lt-new{position:absolute;left:50%;bottom:12px;translate:-50% 0;box-shadow:var(--sh-menu)}
.lt-new[hidden]{display:none}

/* ---------- the legal row: fictional data, how the call works, privacy ---------- */
.pv-legal{flex:none;position:relative;z-index:25;display:flex;align-items:center;justify-content:space-between;gap:8px 16px;min-height:40px;padding:4px 20px;font-size:12px;color:var(--muted)}
.pv-legal-links{display:flex;align-items:center;gap:18px;margin-left:auto}
.pv-legal a,.pv-legal summary{display:inline-flex;align-items:center;min-height:32px;color:var(--muted);text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px;cursor:pointer;list-style:none;border-radius:8px}
.pv-legal a:hover,.pv-legal summary:hover{color:var(--ink)}
.pv-legal summary::-webkit-details-marker{display:none}
.live-info{position:relative}
.live-info p{position:absolute;right:0;bottom:calc(100% + 6px);width:min(360px,calc(100vw - 32px));background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:var(--sh-menu);padding:12px 14px;font-size:13px;line-height:1.5;color:var(--ink-2);text-align:left}

.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,24px);background:var(--ink);color:#fff;border-radius:12px;padding:10px 16px;font-size:14px;z-index:90;opacity:0;pointer-events:none;transition:opacity .4s var(--ease),transform .4s var(--ease);max-width:min(520px,92vw);box-shadow:var(--sh-menu)}
.toast.on{opacity:1;transform:translate(-50%,0)}

@keyframes halo{0%{box-shadow:0 0 0 0 rgba(47,107,79,.28)}100%{box-shadow:0 0 0 16px rgba(47,107,79,0)}}
@keyframes chipin{from{opacity:0;transform:translateY(8px)}}
@keyframes nudge{20%,60%{transform:translateX(-4px)}40%,80%{transform:translateX(4px)}}
@media (prefers-reduced-motion:reduce){
  /* The Sixto mark keeps its motion under both preferences (AGENTS.md, Sixto mark and motion). */
  *:not(.mascot,.mascot *),*:not(.mascot,.mascot *)::before,*:not(.mascot,.mascot *)::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important;transition-delay:0s!important}
}

/* ---------- a wide screen that is not tall: everything a little tighter, nothing cut off ---------- */
@media (min-width:901px) and (max-height:780px){
  #demoView{padding-top:10px}
  .pv-legal{min-height:34px}
  .pv-side{padding-top:18px;padding-bottom:18px}
  .caption p{margin-top:10px;font-size:16px}
  .chips{margin-top:14px}
  .live-dock{margin-top:14px;gap:10px}
  .stage[data-mode=showcase] .pv-side{padding-top:14px}
  .stage[data-mode=showcase] .guide-presenter{margin-bottom:24px}
  .stage[data-mode=showcase] .caption p{font-size:15px;min-height:0}
  .pv-nav{margin-top:12px}
  .stage[data-mode=close] .caption h2{font-size:22px}
  .sb-recap{gap:4px;margin-bottom:10px;font-size:13.5px}
  .soft{padding:14px 18px 12px}.soft .sub{margin-bottom:10px}.soft .acts{margin-top:10px}.soft label.consent{margin-top:9px}
  .close-more{margin-top:6px}
}
/* ---------- a tablet: the same two columns, a narrower guide's column ---------- */
@media (min-width:901px) and (max-width:1180px){
  .pv-signup{padding:0 12px}
  .stage[data-mode=showcase]{grid-template-columns:minmax(300px,36%) minmax(0,1fr);--pw:clamp(104px,calc(100dvh - 580px),200px)}
  .stage[data-mode=showcase] .pv-side{padding:16px 18px 0}
}

/* ---------- a phone: the columns stack ---------- */
@media (max-width:900px){
  &{height:auto;min-height:100dvh;--bar-h:52px}
  .pv-bar{position:sticky;top:0;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;padding:0 12px}
  .pv-brand span:not(.mascot){display:none}
  .pv-signup,.pv-step{display:none}
  .pv-prog{justify-self:center}.pv-prog-btn{padding:0 10px 0 12px;gap:8px}
  .pv-map-btn{width:40px;height:40px}
  .pv-menu{left:0;translate:none}
  /* The link's time is in the call note; the time left in a call stays. */
  [data-live-access]{display:none}
  #demoView{display:block;padding:10px 10px 0}
  .stage{display:block;--pw:clamp(132px,40vw,170px)}
  .stage[data-mode=conversation],.stage[data-mode=close]{border-radius:20px;overflow:visible}
  .pv-skel{padding:14px;border-radius:20px;opacity:.2}
  .pv-side,.stage[data-mode=close] .pv-side{grid-template-columns:minmax(0,1fr);grid-template-areas:"guide" "body" "transcript" "dock";grid-template-rows:none;row-gap:0;max-height:none;overflow:visible;padding:26px 18px 22px}
  .guide-presenter{justify-self:center;margin-bottom:28px}
  .stage[data-mode=conversation] .pv-body{text-align:center;align-items:center}
  .stage[data-mode=conversation] .caption p{margin-left:auto;margin-right:auto}
  .stage[data-mode=conversation] .chips{justify-content:center}
  .stage[data-mode=conversation] .setup{align-self:center}
  .stage[data-mode=conversation] .setup .pop{left:50%;translate:-50% 0}
  .caption h2{font-size:clamp(26px,7.4vw,32px)}
  .caption p{font-size:16px;margin-top:10px}
  .live-dock{align-items:center;text-align:center}
  .live-assure,.live-actions{justify-content:center}
  .live-actions .chip{flex:1 1 auto}
  .chip{min-height:48px;font-size:16px}
  .chip.sm{min-height:44px;font-size:15px}
  /* a step: the guide and the words in a compact block that stays under the bar, then the scene */
  .stage[data-mode=showcase]{--pw:52px}
  .stage[data-mode=showcase] .pv-side{position:sticky;top:calc(var(--bar-h) + 6px);z-index:20;display:grid;grid-template-columns:var(--pw) minmax(0,1fr);grid-template-areas:"guide body" "transcript transcript" "dock dock";column-gap:12px;height:auto;padding:12px 14px;border-radius:18px;box-shadow:0 8px 24px rgba(20,40,25,.08)}
  .stage[data-mode=showcase] .guide-presenter{align-self:start;margin:2px 0 0}
  .stage[data-mode=showcase] .pname{display:none}
  .stage[data-mode=showcase] .pv-meta{margin-bottom:4px}
  .stage[data-mode=showcase] .caption h2{font-size:18px;line-height:1.2}
  .stage[data-mode=showcase] .caption p{margin-top:4px;font-size:14.5px;line-height:1.4;min-height:0}
  .stage[data-mode=showcase] .pv-nav{margin-top:10px}
  .stage[data-mode=showcase] .pv-nav .chip{min-height:40px;font-size:14.5px}
  .stage[data-mode=showcase] .setup{display:none}
  .stage[data-mode=showcase] .showcase{display:block;margin-top:10px}
  .stage[data-mode=showcase] .live-dock{position:static;margin-top:10px;padding:0;background:none}
  .vp{overflow:visible}
  .stage[data-mode=close] .guide-presenter{width:96px;margin-bottom:18px}
  .stage[data-mode=close] .pname{display:none}
  .soft .row{grid-template-columns:1fr}
  /* in a call the controls stay at the bottom edge, whatever is on stage */
  &[data-live-connected]{padding-bottom:calc(150px + env(safe-area-inset-bottom))}
  &[data-live-connected] .live-dock,&[data-live-connected] .stage[data-mode=showcase] .live-dock{position:fixed;z-index:28;left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom));width:auto;margin:0;padding:10px 12px;background:#fff;border:1px solid var(--border);border-radius:20px;box-shadow:var(--sh-menu);text-align:left}
  /* the transcript: a sheet from the bottom, above the call controls while a call runs */
  .live-transcript{position:fixed;z-index:29;top:auto;left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom));width:auto;height:min(46dvh,380px);border-radius:20px;animation-name:ltup}
  &[data-live-connected] .live-transcript{bottom:calc(var(--dock-h,150px) + 16px + env(safe-area-inset-bottom))}
  /* The page under the sheet scrolls far enough for everything on it to be reached above the sheet. */
  &[data-live-connected]:has(.live-transcript:not([hidden])){padding-bottom:calc(270px + min(46dvh,380px) + env(safe-area-inset-bottom))}
  .lt-close{width:44px;height:44px}
  .pv-legal{flex-wrap:wrap;justify-content:center;padding:10px 14px 16px;text-align:center}
  /* The call controls sit over the legal row when it scrolls under them, not the other way round (taller text, as in
     Japanese, ends the page right where the controls are). Its note (.live-info p) is fixed above both. */
  &[data-live-connected] .pv-legal{z-index:auto}
  .pv-legal-links{margin:0;flex-wrap:wrap;justify-content:center;gap:4px 16px}
  .pv-legal a,.pv-legal summary{min-height:40px}
  .live-info p{position:fixed;left:16px;right:16px;bottom:16px;width:auto;z-index:60}
  /* waiting in line: the place sits in a pill at the bottom edge, clear of the page's own controls */
  .live-line-badge{position:fixed;z-index:27;left:50%;translate:-50% 0;bottom:calc(14px + env(safe-area-inset-bottom));height:44px;padding:0 18px;font-size:14px;box-shadow:var(--sh-menu)}
  &[data-live-line]{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  &[data-live-line] .toast{bottom:calc(72px + env(safe-area-inset-bottom))}
}
}