/* =====================================================================
   Vysto AI — conversational demo
   Rule: nothing on screen without a job.
   ===================================================================== */
:root {
  /* Theme tokens. Every value here is the Vysto default; a theme (assets/themes.js) overrides any of them.
     Triplets (--p, --pe, --gold, --hi, --bg) are "R G B" for rgb(var(--x) / alpha). */
  --primary: #f26430; --primary-light: #ff8a5c; --peach: #f2b680; --primary-dark: #d94e1f;
  --p: 242 100 48; --pe: 242 182 128; --gold: 255 211 107; --hi: 255 255 255; --bg: 5 7 10;
  --shade-c: 0, 0, 0; --c-shade: 15, 23, 42;
  --dark: #05070a; --ink: #f5efe9; --muted: #8f8881; --line: rgb(var(--hi) / .08);
  --text-2: #cfc6be; --text-3: #d8cfc7; --faint: #6f6963;
  --glass: rgba(14, 12, 11, .55); --glass-2: rgba(20, 17, 15, .82);
  --card-a: rgba(28, 23, 20, .82); --card-b: rgba(12, 10, 9, .78); --chip-bg: rgba(10, 8, 7, .5); --panel: rgba(16, 13, 12, .78);
  --toast-a: rgba(40, 22, 14, .92); --toast-b: rgba(14, 11, 9, .92);
  --surface: #0c0a09; --deep: #07090c; --iris: #030406; --cine: #000; --glint: #fff;
  --on-p: #111; --on-p2: #fff; --code-s: #b7e27b; --code-n: #7fc8ff;
  --c-bg: #faf8f6; --c-bg-rgb: 250 248 246; --c-card: #fff; --c-ink: #0f172a; --c-2: #334155; --c-3: #475569; --c-4: #64748b; --c-5: #94a3b8;
  --c-line: #e8e4df; --c-line-2: #cbd5e1; --c-soft: #f1ece6; --c-tint: #fff3ec; --c-tint-line: #f9d4c0;
  --c-foot-line: #1e293b; --c-foot-ink: #e2e8f0; --c-accent: #f26430; --c-on-accent: #fff; --c-ok: #0f766e; --c-ok-bg: #ccfbf1;
  --font: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: var(--font); --display-weight: 700;
  --mono: "JetBrains Mono", monospace; /* no ui-monospace or uninstalled names: Chrome on macOS stalls ~1.5s resolving them */
  --radius: 18px;
  --ease-x: cubic-bezier(.16, 1, .3, 1); --ease-io: cubic-bezier(.87, 0, .13, 1); --back: cubic-bezier(.34, 1.56, .64, 1);
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
  --dock-h: 132px; --top-h: 92px;
  --side: clamp(18px, 3vw, 48px); --rail: min(340px, 28vw);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--dark); color: var(--ink); font-family: var(--font); -webkit-font-smoothing: antialiased; overflow: hidden; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mono { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; }
::selection { background: var(--primary); color: var(--on-p); }
:focus-visible { outline: 2px solid var(--primary-light); outline-offset: 3px; }

.stage { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; display: block; z-index: 0; }
.grain { position: fixed; inset: -50%; z-index: 40; pointer-events: none; opacity: var(--grain, .05); mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain .9s steps(4) infinite; }
@keyframes grain { 0% { transform: translate(0, 0); } 33% { transform: translate(-3%, 2%); } 66% { transform: translate(2%, -2%); } 100% { transform: translate(1%, 3%); } }

/* ---------- top: the mark, two quiet icons ---------- */
.top { position: fixed; left: 0; right: 0; top: 0; z-index: 30; display: flex; justify-content: space-between; align-items: center; padding: calc(20px + var(--safe-t)) var(--side) 0; pointer-events: none; }
.top > * { pointer-events: auto; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); opacity: 0; transform: translateY(-6px); transition: opacity .8s .2s, transform .8s .2s var(--ease-x); }
.brand-mark { width: 26px; height: 26px; transition: transform .7s var(--back); }
.brand:hover .brand-mark { transform: rotate(-12deg) scale(1.08); }
.brand-word { font-weight: 700; letter-spacing: .32em; font-size: 12px; }
.brand-word em { font-style: normal; font-weight: 500; color: var(--primary-light); letter-spacing: .1em; margin-left: .3em; }
body:has(.app:not([data-state="intro"])) .brand { opacity: 1; transform: none; }
.tools { display: flex; gap: 6px; opacity: 0; transition: opacity .8s .4s; }
body:has(.app:not([data-state="intro"])) .tools { opacity: 1; }
.ico { position: relative; width: 38px; height: 38px; border-radius: 50%; border: 1px solid transparent; background: none; display: grid; place-items: center; color: var(--muted); transition: color .3s, border-color .3s, background .3s, opacity .5s, transform .6s var(--back); }
.ico:hover { color: var(--ink); border-color: var(--line); background: var(--glass); }
.ico svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ico .i-play { display: none; fill: currentColor; stroke: none; }
.ico[aria-pressed="true"] { color: var(--peach); }
.ico[aria-pressed="true"] .i-play { display: block; }
.ico[aria-pressed="true"] .i-pause { display: none; }
.hist.is-empty { opacity: 0; transform: scale(.4); pointer-events: none; }
.hist b { position: absolute; top: 3px; right: 2px; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 99px; background: var(--primary); color: var(--on-p); font: 700 9px/15px var(--font); }
.hist b.bump { animation: bump .6s var(--back); }
@keyframes bump { 40% { transform: scale(1.5); } }

/* ---------- history drawer ---------- */
.drawer { position: fixed; right: var(--side); top: calc(66px + var(--safe-t)); z-index: 35; width: min(320px, calc(100vw - 36px)); max-height: 60vh; overflow: auto; background: var(--glass-2); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--line); border-radius: 16px; padding: 12px; transform-origin: 100% 0; animation: drawerIn .45s var(--ease-x); }
@keyframes drawerIn { from { opacity: 0; transform: translateY(-8px) scale(.96); } }
.drawer-head { display: flex; justify-content: space-between; align-items: center; margin: 2px 4px 8px; }
.drawer-head .mono { margin: 0; color: var(--muted); }
.drawer-x { background: none; border: 0; font-size: 20px; line-height: 1; color: var(--muted); }
.drawer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.drawer-list button { width: 100%; text-align: left; background: none; border: 1px solid transparent; border-radius: 10px; padding: 9px 10px; display: grid; grid-template-columns: 22px 1fr; gap: 8px; font-size: 14px; }
.drawer-list button:hover, .drawer-list button.is-on { background: rgb(var(--p) / .09); border-color: rgb(var(--p) / .25); }
.drawer-list .n { font: 500 10px/1.9 var(--mono); color: var(--primary); }
.drawer-list small { display: block; color: var(--muted); font-size: 11px; }
.drawer-empty { color: var(--muted); margin: 6px 4px; }

/* ---------- presence: orb + voice ---------- */
.app { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
.app > * { pointer-events: auto; }
.presence { position: absolute; left: 50%; top: 0; bottom: calc(var(--dock-h) + var(--safe-b)); width: min(560px, 92vw); transform: translateX(-50%); display: flex; flex-direction: column-reverse; justify-content: center; align-items: center; gap: 22px; text-align: center; padding-bottom: 3vh; }
.app[data-state="answer"] .presence { left: var(--side); top: calc(var(--top-h) + var(--safe-t)); bottom: calc(18px + var(--safe-b)); width: var(--rail); transform: none; flex-direction: column; justify-content: flex-end; align-items: stretch; gap: 16px; text-align: left; padding: 0; }
.orb { flex: none; width: clamp(140px, 17vw, 200px); aspect-ratio: 1; transition: opacity .8s, transform 1s var(--ease-x); --amp: 0; }
.app[data-state="answer"] .orb { width: clamp(96px, 8vw, 124px); align-self: flex-start; margin-left: -12px; }
.app[data-state="intro"] .orb { opacity: 0; transform: scale(.6); }
.orb svg { width: 100%; height: 100%; overflow: visible; }
.orb-body { stroke: rgb(var(--p) / .3); stroke-width: 1; }
.orb-ring { fill: none; stroke: var(--primary); stroke-width: 2; filter: drop-shadow(0 0 10px rgb(var(--p) / .8)); transform-box: fill-box; transform-origin: center; transform: scale(calc(1 + var(--amp) * .06)); transition: stroke .4s; }
.orb-halo { fill: none; stroke: rgb(var(--p) / .2); stroke-width: calc(8px + var(--amp) * 26px); filter: blur(7px); }
.orb.is-thinking .orb-ring { stroke-dasharray: 60 22; animation: spin 1.1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.orb.is-listening .orb-ring { stroke: var(--peach); }
.orb-v { transform-box: fill-box; transform-origin: center; filter: drop-shadow(0 0 8px rgb(var(--p) / .55)); transition: transform .4s var(--back); }
.orb.is-speaking .orb-v { transform: scale(calc(1 + var(--amp) * .08)); }
.orb-wave line { stroke: var(--primary-light); stroke-width: 2.2; stroke-linecap: round; }
html.paused .orb * { animation-play-state: paused !important; }

.caption { min-height: 3em; width: 100%; }
.app[data-state="answer"] .caption { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; }
.log { display: none; list-style: none; margin: 0 0 18px; padding: 0; flex: 0 3 auto; min-height: 0; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent, #000 40%); mask-image: linear-gradient(180deg, transparent, #000 40%); }
.app[data-state="answer"] .log { display: grid; align-content: end; gap: 6px; }
.log button { border: 0; background: none; padding: 0; text-align: left; font-size: 12.5px; line-height: 1.35; color: var(--muted); opacity: .55; display: flex; gap: 8px; transition: opacity .3s, color .3s; }
.log li:last-child button { opacity: .85; }
.log button::before { content: ""; flex: none; width: 5px; height: 5px; margin-top: .45em; border-radius: 50%; border: 1px solid var(--primary-light); }
.log button:hover { opacity: 1; color: var(--ink); }
.hello { margin: 0; font-weight: 600; font-size: clamp(1.7rem, 3.4vw, 2.6rem); line-height: 1.12; letter-spacing: -.025em; }
.hello span { display: inline-block; opacity: 0; transform: translateY(14px); filter: blur(6px); transition: opacity .5s, transform .8s var(--ease-x), filter .6s; transition-delay: calc(var(--i) * 60ms); }
.hello.is-in span { opacity: 1; transform: none; filter: none; }
.hello .g { color: var(--primary-light); }
.hello .hello-sub { display: block; margin-top: 12px; font-size: clamp(.95rem, 1.3vw, 1.08rem); font-weight: 400; color: var(--muted); letter-spacing: 0; line-height: 1.5; }
.app[data-state="answer"] .hello { display: none; }
/* the arrival greeting: the assistant's first words (and the visitor's name), under the welcome, home only */
.greet { display: none; width: 100%; max-width: 34rem; margin: 18px auto 0; flex-direction: column; gap: 8px; text-align: left; }
.app[data-state="home"] .greet { display: flex; }
.greet p { margin: 0; max-width: 92%; padding: 10px 14px; font-size: clamp(.95rem, 1.15vw, 1.05rem); line-height: 1.5; color: var(--ink); text-wrap: pretty; overflow-wrap: break-word; }
.greet-a { align-self: flex-start; border-radius: 4px 16px 16px 16px; background: var(--panel); border: 1px solid rgb(var(--hi) / .1); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.greet-you { align-self: flex-end; border-radius: 16px 16px 4px 16px; background: rgb(var(--p) / .16); border: 1px solid rgb(var(--p) / .3); }
.greet .w { opacity: 0; filter: blur(5px); transition: opacity .35s, filter .45s; }
.greet .w.on { opacity: 1; filter: none; }
.chip.chip-greet { color: var(--muted); border-style: dashed; }
@media (prefers-reduced-motion: reduce) {
  .greet .w { opacity: 1; filter: none; transition: none; }
  .listen i, .mic.on { animation: none; }
  .listen i { height: 12px; }
}
@media (max-width: 900px) {
  .greet { margin-top: 12px; gap: 6px; }
  .greet p { font-size: .93rem; padding: 9px 12px; }
  .app.has-greet[data-state="home"] .orb { width: clamp(92px, 26vw, 128px); }
}
.you { margin: 0 0 10px; display: none; font-size: 13px; color: var(--peach); flex: none; }
.you::before { content: "You · "; color: var(--muted); }
.app[data-state="answer"] .you { display: block; }
.answer { margin: 0; font-size: clamp(1rem, 1.25vw, 1.14rem); line-height: 1.62; color: var(--ink); overflow: hidden; text-wrap: pretty; flex: 0 1 auto; min-height: 0; }
.answer .w { opacity: 0; filter: blur(5px); transition: opacity .35s, filter .45s; }
.answer .w.on { opacity: 1; filter: none; }
.answer .lang { display: inline-block; margin: 0 0 10px; font: 500 9.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--peach); border: 1px solid rgb(var(--pe) / .4); padding: 5px 8px; border-radius: 99px; }

/* ---------- content area ---------- */
.content { position: absolute; right: var(--side); top: calc(var(--top-h) + var(--safe-t)); bottom: calc(var(--dock-h) + var(--safe-b)); left: calc(var(--side) * 2 + var(--rail)); display: flex; flex-direction: column; opacity: 0; transform: translateX(40px); pointer-events: none; transition: opacity .7s .35s, transform 1s .3s var(--ease-x); }
.app[data-state="answer"] .content { opacity: 1; transform: none; pointer-events: auto; }
.content-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; min-height: 30px; }
.status { margin: 0; color: var(--muted); display: flex; align-items: center; gap: 9px; }
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 10px var(--primary); }
.status.run::before { animation: pulse .7s ease-in-out infinite; }
.status b { color: var(--peach); font-weight: 500; }
@keyframes pulse { 50% { opacity: .25; box-shadow: 0 0 0 4px rgb(var(--p) / .15); } }
.views { position: relative; display: flex; gap: 2px; }
.view { position: relative; z-index: 1; border: 0; background: none; padding: 7px 10px 9px; font-size: 13px; font-weight: 500; color: var(--muted); transition: color .3s; }
.view:hover { color: var(--ink); }
.view.is-on { color: var(--ink); }
.views-ink { position: absolute; z-index: 0; bottom: 0; height: 2px; left: 0; width: 0; border-radius: 2px; background: linear-gradient(90deg, var(--primary), var(--primary-light)); box-shadow: 0 0 12px rgb(var(--p) / .7); transition: left .5s var(--ease-x), width .5s var(--ease-x); }
.content-body { position: relative; flex: 1; min-height: 0; overflow: hidden; perspective: 1400px; padding: 2px; }
/* fitRender's last resort: an answer that only fits below reading size scrolls here instead of shrinking further */
.content-body.spill { overflow-y: auto; overscroll-behavior: contain; }
.render { transform-style: preserve-3d; }
.render.flip-out { animation: flipOut .35s var(--ease-io) both; }
.render.flip-in { animation: flipIn .55s var(--ease-x) both; }
@keyframes flipOut { to { opacity: 0; transform: rotateY(-18deg) translateZ(-60px); filter: blur(6px); } }
@keyframes flipIn { from { opacity: 0; transform: rotateY(18deg) translateZ(-60px); filter: blur(6px); } }

/* nugget grid */
.nugs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: start; transform-style: preserve-3d; }
.nugs[data-layout="feature"] { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
.nugs[data-layout="feature"] > .nug:first-child { grid-row: span var(--rows, 2); }
.nugs[data-layout="split"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nugs[data-layout="split"] > .nug:nth-child(n+3) { grid-column: 1 / -1; }
.nug.cut { display: none !important; }
.nugs[data-layout="hero"] { grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); }
.nugs[data-layout="hero"] > .nug:first-child { grid-column: 1 / -1; }
.nugs[data-layout="hero"] > .nug:first-child .img-art, .nugs[data-layout="hero"] > .nug:first-child .vid-screen { aspect-ratio: 2.05 / 1; }
.nug { position: relative; border-radius: var(--radius); padding: 20px 20px 18px; background: linear-gradient(180deg, var(--card-a), var(--card-b)); border: 1px solid rgb(var(--hi) / .08); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); overflow: hidden; box-shadow: 0 30px 70px -40px rgba(var(--shade-c), .9); }
.nug::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(420px circle at var(--mx, 30%) var(--my, 0%), rgb(var(--p) / .16), transparent 60%); opacity: .7; transition: opacity .3s; }
.nug::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 40%; pointer-events: none; background: linear-gradient(180deg, rgb(var(--p) / .22), transparent); transform: translateY(-110%); }
.nug.in::after { animation: nugScan 1s var(--ease-io) both; animation-delay: var(--d, 200ms); }
@keyframes nugScan { from { transform: translateY(-110%); } to { transform: translateY(260%); } }
.nug > * { position: relative; }
.nug .nug-k { margin: 0 0 8px; font: 500 10px/1.3 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--primary-light); }
.nug h3 { margin: 0 0 8px; font-size: 1.2rem; font-weight: 700; letter-spacing: -.015em; line-height: 1.25; }
.nug p { margin: 0; color: var(--text-2); line-height: 1.6; font-size: .95rem; }
.acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.act { border: 1px solid rgb(var(--p) / .45); background: rgb(var(--p) / .08); color: var(--peach); border-radius: 999px; padding: 8px 14px; font-size: 13px; font-weight: 500; transition: background .3s, color .3s, transform .4s var(--ease-x); }
.act:hover { background: var(--primary); color: var(--on-p); transform: translateY(-1px); }
.act.solid { background: linear-gradient(135deg, var(--primary), var(--primary-light)); color: var(--on-p); border-color: transparent; }

.t-quote p:not(.nug-k) { font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.3; color: var(--ink); font-weight: 500; letter-spacing: -.015em; }
.t-quote p:not(.nug-k)::before { content: "“"; color: var(--primary); font-size: 1.6em; line-height: 0; vertical-align: -.35em; margin-right: .05em; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 14px; }
.stats div strong { display: block; font-size: clamp(1.9rem, 3vw, 2.6rem); font-weight: 800; letter-spacing: -.03em; background: linear-gradient(135deg, var(--peach), var(--primary)); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1.05; }
.stats div span { display: block; margin-top: 6px; color: var(--muted); font-size: .85rem; line-height: 1.4; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-top: 6px; }
.tile { text-align: left; border: 1px solid rgb(var(--hi) / .08); background: rgb(var(--hi) / .03); border-radius: 14px; padding: 14px; display: grid; gap: 4px; transition: border-color .3s, background .3s, transform .5s var(--ease-x); }
.tile:hover { border-color: rgb(var(--p) / .5); background: rgb(var(--p) / .07); transform: translateY(-3px); }
.tile svg { width: 26px; height: 26px; fill: none; stroke: var(--primary-light); stroke-width: 1.6; margin-bottom: 6px; }
.tile b { font-size: 15px; }
.tile span { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.steps { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; counter-reset: s; }
.steps li { border-left: 2px solid rgb(var(--p) / .5); padding: 2px 0 2px 14px; }
.steps .sn { font: 500 10px/1 var(--mono); color: var(--primary-light); letter-spacing: .14em; }
.steps b { display: block; margin: 6px 0 4px; font-size: 1.02rem; }
.steps p { font-size: .88rem; }
.mini-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.mini-chips span { font: 500 10.5px/1 var(--mono); border: 1px dashed rgb(var(--pe) / .4); color: var(--peach); padding: 6px 8px; border-radius: 6px; }
.mini-chips span:last-child { border-style: solid; background: rgb(var(--p) / .14); }
.plans { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 12px; margin-top: 4px; }
@media (max-width: 1100px) { .plans[style*="--n:4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.plan { position: relative; border: 1px solid rgb(var(--hi) / .08); border-radius: 16px; padding: 16px; background: rgb(var(--hi) / .025); display: flex; flex-direction: column; }
.plan.featured { border-color: rgb(var(--p) / .6); background: linear-gradient(180deg, rgb(var(--p) / .12), rgb(var(--p) / .02)); }
.plan .badge { position: absolute; top: -9px; right: 14px; font: 600 9.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; background: var(--primary); color: var(--on-p); padding: 5px 8px; border-radius: 999px; }
.plan h4 { margin: 0; font-size: .95rem; font-weight: 600; color: var(--peach); }
.plan .price { margin: 8px 0 2px; font-size: 2.2rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.plan .price small { font-size: .85rem; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.plan .pn { font-size: 11.5px; color: var(--muted); min-height: 1.4em; }
.plan ul { list-style: none; padding: 0; margin: 12px 0 14px; display: grid; gap: 7px; flex: 1; }
.plan li, .lst li { font-size: .85rem; color: var(--text-3); display: grid; grid-template-columns: 14px 1fr; gap: 8px; line-height: 1.45; }
.plan li::before, .lst li::before { content: ""; width: 7px; height: 7px; margin-top: 6px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 8px rgb(var(--p) / .7); }
.plan .act { align-self: flex-start; }
.lst { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 8px; }
.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin-top: 8px; }
.person { display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: center; padding: 10px; border-radius: 12px; background: rgb(var(--hi) / .03); border: 1px solid rgb(var(--hi) / .06); }
.person i { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: 13px; color: var(--on-p); background: linear-gradient(135deg, var(--peach), var(--primary)); }
.person b { display: block; font-size: 14px; }
.person span { font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.agents { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-top: 8px; }
.agent { padding: 12px 12px 12px 14px; border-radius: 12px; border: 1px solid rgb(var(--p) / .2); background: rgb(var(--p) / .04); }
.agent b { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.agent b::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--primary); box-shadow: 0 0 10px var(--primary); animation: blink 2.4s calc(var(--k) * .3s) ease-in-out infinite; }
@keyframes blink { 50% { opacity: .3; } }
.agent span { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); line-height: 1.45; }
.roadmap { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.roadmap li { font-size: 13px; padding: 7px 12px 7px 26px; border-radius: 999px; border: 1px solid rgb(var(--hi) / .1); position: relative; }
.roadmap li::before { content: ""; position: absolute; left: 10px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; border: 1.5px solid var(--peach); }
.nug .foot { margin-top: 12px; font-size: 12px; color: var(--muted); }
.cmp { display: grid; gap: 0; margin-top: 6px; border-top: 1px solid var(--line); }
.cmp-r { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.cmp-r span:first-child { color: var(--muted); text-decoration: line-through; text-decoration-color: rgb(var(--p) / .6); }
.cmp-r span:last-child { color: var(--ink); font-weight: 500; }
.cmp-h { font: 500 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.cmp-h span:last-child { color: var(--primary-light); }
.chat { display: grid; gap: 10px; margin-top: 8px; }
.bub { max-width: 88%; padding: 10px 14px; border-radius: 14px; font-size: .9rem; line-height: 1.5; }
.bub.you { justify-self: end; background: var(--primary); color: var(--on-p2); border-bottom-right-radius: 4px; }
.bub.ai { background: rgb(var(--hi) / .06); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.t-cta { background: linear-gradient(135deg, rgb(var(--p) / .24), var(--card-b)) !important; border-color: rgb(var(--p) / .45) !important; }
.t-cta h3 { font-size: 1.5rem; }
/* renders demo */
.rend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
.rend > div { border-radius: 12px; border: 1px solid var(--line); padding: 12px; background: rgba(var(--shade-c), .25); font-size: .82rem; line-height: 1.5; min-height: 150px; }
.rend .rl { display: block; font: 500 9.5px/1 var(--mono); letter-spacing: .14em; color: var(--primary-light); text-transform: uppercase; margin-bottom: 10px; }
.rend .b1 { background: rgb(var(--hi) / .06); border-radius: 10px; padding: 7px 9px; margin-bottom: 6px; }
.rend .b1.me { background: var(--primary); color: var(--on-p2); margin-left: 18%; }
.rend h5 { margin: 0 0 4px; font-size: .95rem; }
.rend pre { margin: 0; font: 400 10.5px/1.5 var(--mono); color: var(--text-2); white-space: pre-wrap; word-break: break-word; }

/* classic + machine views */
.classic { background: var(--c-bg); color: var(--c-ink); border-radius: 18px; padding: clamp(20px, 3vw, 40px); }
.classic .crumbs { font: 500 11px/1 var(--mono); letter-spacing: .1em; color: var(--c-4); text-transform: uppercase; margin-bottom: 14px; }
.classic h1 { margin: 0 0 12px; font-size: clamp(1.6rem, 3vw, 2.4rem); letter-spacing: -.02em; line-height: 1.1; }
.classic .lead { color: var(--c-2); font-size: 1.05rem; line-height: 1.65; margin: 0 0 22px; max-width: 70ch; }
.classic section { border-top: 1px solid var(--c-line); padding: 18px 0; }
.classic h2 { margin: 0 0 6px; font-size: 1.15rem; color: var(--c-ink); }
.classic h2 small { display: block; font: 500 10px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--c-accent); margin-bottom: 4px; }
.classic p, .classic li { color: var(--c-3); line-height: 1.6; font-size: .95rem; }
.classic ul { padding-left: 1.2rem; margin: 6px 0 0; }
.classic table { width: 100%; border-collapse: collapse; font-size: .9rem; margin-top: 8px; }
.classic th, .classic td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--c-line); vertical-align: top; }
.classic th { font: 600 11px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--c-4); }
.cbtn { cursor: pointer; display: inline-block; margin-top: 10px; background: var(--c-accent); color: var(--c-on-accent); border: 0; border-radius: 999px; padding: 9px 16px; font-weight: 600; font-size: 14px; }
.machine { border-radius: 18px; border: 1px solid var(--line); background: var(--deep); padding: 18px; font: 400 12.5px/1.65 var(--mono); color: var(--text-2); overflow: auto; white-space: pre; tab-size: 2; }
.machine .k { color: var(--peach); } .machine .s { color: var(--code-s); } .machine .n { color: var(--code-n); } .machine .p { color: var(--faint); }

/* ---------- media Nuggets ---------- */
.nug.media { padding: 0; display: flex; flex-direction: column; }
.nug.media::after { z-index: 2; }
.img, .vid { margin: 0; flex: 1; display: flex; flex-direction: column; min-height: 0; }
.img-art { position: relative; flex: 1 0 auto; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface); }
.img.wide-art .img-art { aspect-ratio: 2.3 / 1; }
.nugs .img-art, .nugs .vid-screen { max-height: var(--mh, none); }
/* A drawn visual capped by --mh sits centred on the surface when the grid row is taller (no blank band under it). */
.nugs .img.motion { justify-content: center; background: var(--surface); }
.img-art svg, .img-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; overflow: visible; }
.img figcaption { padding: 11px 16px 13px; font-size: 12.5px; color: var(--muted); line-height: 1.45; border-top: 1px solid var(--line); }
.vid-screen { position: relative; flex: 1 0 auto; aspect-ratio: 16 / 9; background: var(--surface); }
.vid-screen canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.vid-title { position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 7px; font: 500 9.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--peach); background: rgb(var(--bg) / .62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 6px 9px; border-radius: 99px; }
.vid-title::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 8px var(--primary); animation: pulse 1.6s ease-in-out infinite; }
.vid.is-paused .vid-title::before { animation: none; opacity: .4; }
.vid-track { position: relative; display: block; height: 3px; background: rgb(var(--hi) / .08); cursor: pointer; }
.vid-track::before { content: ""; position: absolute; inset: -6px 0; }
.vid-track i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--primary), var(--primary-light)); transform-origin: 0 50%; transform: scaleX(0); box-shadow: 0 0 10px rgb(var(--p) / .6); }
.vid-bar { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 10px; padding: 9px 14px 10px 10px; }
.vid-pp { width: 28px; height: 28px; border-radius: 50%; border: 0; background: rgb(var(--hi) / .07); display: grid; place-items: center; color: var(--ink); transition: background .3s; }
.vid-pp:hover { background: rgb(var(--p) / .25); }
.vid-pp svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.vid-pp .i-play { display: none; fill: currentColor; stroke: none; }
.vid.is-paused .vid-pp .i-play { display: block; } .vid.is-paused .vid-pp .i-pause { display: none; }
.vid-cap { margin: 0; font-size: 12.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vid-cap.on { animation: capIn .5s var(--ease-x); }
@keyframes capIn { from { opacity: 0; transform: translateY(6px); filter: blur(4px); } }
.vid-time { font: 500 10px/1 var(--mono); color: var(--muted); letter-spacing: .06em; }
.nug.t-strip { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px 14px 20px; }
.nug.t-strip p { margin: 0; font-size: .92rem; }
.nug.t-strip .act { flex: none; }
.tiles.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tiles.compact .tile { padding: 12px; }
.tiles.compact .tile svg { width: 22px; height: 22px; margin-bottom: 4px; }
/* classic page figures */
.classic.has-fig { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.c-fig { margin: 0; border-radius: 12px; overflow: hidden; background: var(--surface); box-shadow: 0 20px 40px -24px rgba(var(--c-shade), .5); }
.c-fig .img figcaption { color: var(--c-5); border-top-color: rgb(var(--hi) / .06); }
.classic blockquote { margin: 0; font-size: 1.15rem; line-height: 1.4; color: var(--c-ink); font-weight: 600; border-left: 3px solid var(--c-accent); padding-left: 14px; }
.classic .c-stats { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.classic .c-stats strong { color: var(--c-accent); }
.classic .clink { background: none; border: 0; color: var(--c-accent); font-weight: 600; padding: 0; }
.machine { white-space: pre-wrap; word-break: break-word; }

/* ---------- dock: three suggestions, one composer ---------- */
.dock { position: fixed; left: calc(50% - min(340px, 50vw - 14px)); bottom: calc(18px + var(--safe-b)); z-index: 20; width: min(680px, calc(100vw - 28px)); display: flex; flex-direction: column; align-items: center; gap: 12px; transition: left 1.1s var(--ease-io), width 1.1s var(--ease-io), transform .9s var(--ease-x), opacity .6s; }
.app[data-state="answer"] ~ .dock { left: calc(var(--side) * 2 + var(--rail)); width: calc(100vw - var(--side) * 3 - var(--rail)); }
.app[data-state="intro"] ~ .dock { transform: translateY(140%); opacity: 0; }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; min-height: 34px; }
.chip { border: 1px solid var(--line); background: var(--chip-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--text-2); border-radius: 999px; padding: 8px 15px; font-size: 13px; font-weight: 400; opacity: 0; transform: translateY(12px); animation: chipIn .6s var(--ease-x) forwards; animation-delay: calc(var(--i) * 80ms + 80ms); transition: background .3s, color .3s, border-color .3s; }
.chip:hover { color: var(--ink); border-color: rgb(var(--p) / .6); background: rgb(var(--p) / .1); }
@keyframes chipIn { to { opacity: 1; transform: none; } }
.chip.out { animation: chipOut .3s var(--ease-io) forwards; }
@keyframes chipOut { to { opacity: 0; transform: translateY(8px) scale(.96); } }
.composer { width: 100%; display: grid; grid-template-columns: 42px 1fr 42px; gap: 6px; align-items: center; padding: 6px; border-radius: 999px; background: var(--panel); border: 1px solid rgb(var(--hi) / .1); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 24px 60px -24px rgba(var(--shade-c), .9); transition: box-shadow .4s, border-color .4s; }
.composer:focus-within, .composer.is-listening { border-color: rgb(var(--p) / .6); box-shadow: 0 24px 60px -24px rgba(var(--shade-c), .9), 0 0 0 4px rgb(var(--p) / .1), 0 0 40px -10px rgb(var(--p) / .5); }
.mic, .send { width: 42px; height: 42px; border-radius: 50%; border: 0; display: grid; place-items: center; transition: background .3s, opacity .3s, transform .4s var(--back); }
.mic { background: none; color: var(--muted); }
.mic:hover { color: var(--ink); background: rgb(var(--hi) / .06); }
.mic.on { background: var(--primary); color: var(--on-p); animation: micPulse 1.1s ease-in-out infinite; }
@keyframes micPulse { 50% { box-shadow: 0 0 0 8px rgb(var(--p) / .18); } }
.send { background: linear-gradient(135deg, var(--primary), var(--primary-light)); }
.send:hover { transform: scale(1.06); }
.send:disabled { opacity: .25; cursor: default; transform: none; }
.mic svg, .send svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.send svg { stroke: var(--on-p); }
.field { position: relative; }
.field input { width: 100%; border: 0; background: none; outline: none; padding: 11px 4px; font-size: 16px; color: var(--ink); }
.field input::placeholder { color: var(--faint); }
.listen { position: absolute; inset: 0; display: none; align-items: center; gap: 4px; padding-left: 4px; pointer-events: none; }
.composer.is-listening .listen { display: flex; }
.composer.is-listening input, .composer.is-listening input::placeholder { color: transparent; }
.listen i { width: 3px; height: 6px; border-radius: 2px; background: var(--primary-light); animation: lv .7s ease-in-out infinite alternate; animation-delay: calc(var(--i) * 70ms); }
@keyframes lv { to { height: 22px; } }
.listen em { font-style: normal; margin-left: 10px; color: var(--peach); font-size: 14px; }

/* ---------- opening ---------- */
.intro { position: fixed; inset: 0; z-index: 25; pointer-events: none; }
.intro-k { position: absolute; left: 50%; bottom: calc(9vh + var(--safe-b)); translate: -50% 0; margin: 0; color: var(--peach); opacity: 0; letter-spacing: .4em; transition: opacity .8s, letter-spacing 2s var(--ease-x); white-space: nowrap; }
.intro.k .intro-k { opacity: .8; letter-spacing: .22em; }
.intro.done { display: none; }

/* ---------- phone ---------- */
@media (max-width: 900px) {
  :root { --dock-h: 124px; --top-h: 70px; }
  .top { padding-top: calc(14px + var(--safe-t)); }
  .app[data-state="answer"] .presence { left: 16px; top: calc(var(--top-h) + var(--safe-t)); bottom: auto; height: 20vh; width: calc(100vw - 32px); }
  .app[data-state="answer"] .orb { position: fixed; left: 10px; bottom: calc(18px + var(--safe-b)); width: 56px; margin: 0; z-index: 22; }
  .app[data-state="answer"] ~ .dock { left: 72px; width: calc(100vw - 86px); }
  .app[data-state="answer"] .log { display: none; }
  .you { margin-bottom: 6px; font-size: 12px; }
  .app[data-state="answer"] .answer { font-size: .92rem; line-height: 1.55; padding-bottom: 12px; -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 20px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 20px), transparent); }
  .content { left: 16px; right: 16px; top: calc(var(--top-h) + 20vh + 12px + var(--safe-t)); }
  .content-head { margin-bottom: 6px; }
  .status { display: none; }
  .views { margin-left: -10px; }
  .view { font-size: 12.5px; }
  .rend { grid-template-columns: 1fr; }
  .nugs[data-layout] { grid-template-columns: minmax(0, 1fr); }
  .nugs[data-layout] > .nug { grid-row: auto !important; grid-column: auto !important; }
  .classic.has-fig { grid-template-columns: 1fr; gap: 14px; }
  .classic.has-fig .c-side { order: -1; }
  .nug.t-strip { flex-wrap: wrap; }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .steps p { display: none; }
  .steps b { font-size: .92rem; }
  .plans { grid-template-columns: 1fr; gap: 8px; }
  .plan { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 12px; padding: 12px 14px; }
  .plan ul, .plan .pn { display: none; }
  .plan .price { grid-row: 1 / 3; grid-column: 2; margin: 0; font-size: 1.7rem; }
  .plan .act { grid-column: 1; justify-self: start; margin-top: 6px; padding: 6px 12px; }
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .people { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .person { grid-template-columns: 26px 1fr; gap: 8px; padding: 6px 8px; }
  .person i { width: 26px; height: 26px; font-size: 10px; }
  .person b { font-size: 12.5px; }
  .person span { display: none; }
  .lst { gap: 5px; }
  .tiles, .tiles.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .tile { padding: 10px 12px; grid-template-columns: 20px 1fr; align-items: center; gap: 8px; }
  .tile svg, .tiles.compact .tile svg { width: 20px; height: 20px; margin: 0; }
  .tile span { grid-column: 1 / -1; font-size: 12px; }
  .tile:not(:has(svg)) { grid-template-columns: minmax(0, 1fr); }
  .tile b { font-size: 13.5px; }
  .img figcaption { padding: 8px 12px 9px; font-size: 11.5px; }
  .cmp-r { grid-template-columns: 1fr; gap: 4px; }
  .chips { flex-wrap: nowrap; justify-content: flex-start; width: 100%; overflow-x: auto; scrollbar-width: none; padding: 2px 4px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 22px), transparent); }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex: none; white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .grain, .orb *, .chip, .nug.in, .nug.in::after { animation: none !important; }
  .chip { opacity: 1; transform: none; }
}
.qw { display: inline-block; }

/* ---------- cinema: every answer is a directed shot ---------- */
.cine { position: fixed; inset: 0; z-index: 36; pointer-events: none; overflow: hidden; }
.cine .bar { position: absolute; left: 0; right: 0; height: 11vh; background: var(--cine); transform: translateY(-101%); }
.cine .bar.top { top: 0; }
.cine .bar.bot { bottom: 0; transform: translateY(101%); }
.cine-dim { position: absolute; inset: 0; background: radial-gradient(ellipse at 55% 50%, rgb(var(--bg) / .62), rgb(var(--bg) / .35) 70%); opacity: 0; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.title-card { position: absolute; inset: 0; display: grid; place-items: center; padding: 0 5vw; }
.tc { text-align: center; opacity: 0; will-change: transform, opacity, filter; }
.tc-k { margin: 0 0 18px; color: var(--peach); letter-spacing: .5em; font-size: 11px; }
.tc-t { margin: 0; font-size: clamp(3rem, 9.5vw, 9rem); font-weight: 800; letter-spacing: -.045em; line-height: .92;
  background: linear-gradient(100deg, var(--ink) 0%, var(--ink) 38%, var(--peach) 46%, var(--glint) 50%, var(--primary-light) 54%, var(--ink) 62%, var(--ink) 100%); background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: tcSweep 1.6s linear infinite; text-wrap: balance; }
@keyframes tcSweep { from { background-position: 100% 0; } to { background-position: 0% 0; } }
.tc-q { margin: 20px 0 0; color: var(--text-2); font-size: clamp(.95rem, 1.5vw, 1.25rem); font-style: italic; font-weight: 300; }
.tc-q::before { content: "“"; } .tc-q::after { content: "”"; }
.streak { position: absolute; top: 50%; left: 0; width: 70vw; height: 2px; margin-top: -1px; background: linear-gradient(90deg, transparent, var(--primary-light) 35%, var(--glint) 50%, var(--primary-light) 65%, transparent); box-shadow: 0 0 40px 8px rgb(var(--p) / .55); opacity: 0; }
.flash { position: absolute; inset: 0; background: radial-gradient(circle at 60% 50%, var(--glint) 0%, var(--peach) 25%, rgb(var(--p) / .5) 50%, rgb(var(--p) / 0) 85%); opacity: 0; }
.iris { position: absolute; left: 0; top: 0; width: 0; height: 0; border-radius: 50%; box-shadow: 0 0 0 250vmax var(--iris), inset 0 0 40px 10px rgb(var(--p) / .35); transform: translate(-50%, -50%); opacity: 0; }
@media (max-width: 900px) { .cine .bar { height: 8vh; } .tc-k { letter-spacing: .3em; } }

/* ---------- play: catch Nuggets, explore, unlock ---------- */
html.can-catch, html.can-catch * { cursor: crosshair !important; }
.xp { position: relative; display: inline-flex; align-items: center; gap: 2px; height: 38px; padding: 0 10px 0 4px; border-radius: 99px; color: var(--ink); font: 600 12px/1 var(--font); transition: opacity .5s, transform .6s var(--back); }
.xp.is-empty { opacity: 0; transform: scale(.5); }
.xp svg { width: 30px; height: 30px; transform: rotate(-90deg); margin-right: 4px; }
.xp circle { fill: none; stroke-width: 3; }
.xp .xp-bg { stroke: rgb(var(--hi) / .1); }
.xp .xp-fg { stroke: url(#xpg); stroke-linecap: round; stroke-dasharray: 94.25; stroke-dashoffset: 94.25; transition: stroke-dashoffset 1s var(--ease-x); filter: drop-shadow(0 0 4px rgb(var(--p) / .8)); }
.xp small { color: var(--muted); font-size: 11px; font-weight: 500; }
.xp b.bump { animation: bump .6s var(--back); display: inline-block; }
.toasts { position: fixed; top: calc(14px + var(--safe-t)); left: 50%; transform: translateX(-50%); z-index: 41; display: grid; gap: 8px; justify-items: center; pointer-events: none; }
.toast { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; min-width: 260px; padding: 10px 18px 10px 10px; border-radius: 16px; background: linear-gradient(135deg, var(--toast-a), var(--toast-b)); border: 1px solid rgb(var(--p) / .55); box-shadow: 0 0 0 1px rgb(var(--p) / .1), 0 18px 50px -12px rgb(var(--p) / .45); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.toast .badge { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: linear-gradient(135deg, var(--primary), var(--primary-light)); box-shadow: 0 0 20px rgb(var(--p) / .7); }
.toast .badge svg { width: 22px; height: 22px; fill: #1a0f0a; }
.toast p { margin: 0 0 3px; color: var(--peach); font-size: 9.5px; }
.toast b { display: block; font-size: 15px; }
.toast span { display: block; font-size: 12px; color: var(--text-2); margin-top: 2px; }
.hint { display: block; margin-top: 18px; font: 500 10.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--peach); opacity: 0; transition: opacity 1s 1.2s; }
.hello.is-in .hint { opacity: .75; }
.hint::before { content: "✦ "; color: var(--primary-light); }
@media (max-width: 900px) { .xp small { display: none; } .toast { min-width: 0; width: calc(100vw - 40px); } }

/* ---------- header extras ---------- */
.classic-btn { width: auto; padding: 0 12px 0 10px; gap: 7px; display: inline-flex; border-radius: 99px; font-size: 12.5px; font-weight: 500; }
.classic-btn span { line-height: 1; }
.nugs > .t-strip { grid-column: 1 / -1 !important; }

/* ---------- new cards ---------- */
.clues { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 7px; }
.clues li { font-size: .9rem; color: var(--text-3); padding-left: 22px; position: relative; line-height: 1.45; }
.clues li::before { content: "?"; position: absolute; left: 0; top: 0; width: 15px; height: 15px; border-radius: 50%; border: 1px solid rgb(var(--gold) / .5); color: rgb(var(--gold)); font: 700 9px/14px var(--mono); text-align: center; }
.clues li.got { color: rgb(var(--gold)); }
.clues li.got::before { content: "✓"; background: rgb(var(--gold)); color: #1a1206; }

/* ---------- secrets ---------- */
.toast.egg { border-color: rgb(var(--gold) / .7); background: linear-gradient(135deg, rgba(60, 44, 10, .94), rgba(14, 11, 9, .94)); box-shadow: 0 18px 50px -12px rgb(var(--gold) / .45); }
.toast.egg .badge { background: linear-gradient(135deg, #fff1b8, #e0a224); box-shadow: 0 0 22px rgb(var(--gold) / .8); }
.toast.egg .badge svg { fill: #5a3a06; }
.toast.egg p { color: rgb(var(--gold)); }
.tickle { position: fixed; z-index: 42; pointer-events: none; font: 600 14px/1 var(--font); color: rgb(var(--gold)); text-shadow: 0 0 12px rgb(var(--gold) / .6); white-space: nowrap; }
.machine .secret { cursor: pointer; display: inline-block; border-radius: 4px; outline: 1px dashed transparent; transition: outline-color .3s, background .3s; }
.machine .secret:hover, .machine .secret:focus-visible { outline-color: rgb(var(--gold) / .6); background: rgb(var(--gold) / .08); }
/* the Konami code: welcome back to 1995 */
.retro-bar { position: fixed; left: 0; right: 0; top: 0; z-index: 44; height: 26px; overflow: hidden; background: #000080; color: #ffff00; font: bold 14px/26px "Times New Roman", serif; white-space: nowrap; }
.retro-bar span { display: inline-block; padding-left: 100%; animation: marquee 14s linear infinite; }
@keyframes marquee { to { transform: translateX(-100%); } }
html.retro body { background: #000 radial-gradient(#fff 1px, transparent 1.5px) 0 0 / 40px 40px; }
html.retro .stage { opacity: .25; }
html.retro *:not(.retro-bar):not(.retro-bar *) { font-family: "Times New Roman", Times, serif !important; border-radius: 0 !important; letter-spacing: 0 !important; }
html.retro .nug, html.retro .composer, html.retro .chip, html.retro .toast { background: #c0c0c0 !important; color: #000 !important; border: 2px outset #fff !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html.retro .nug h3, html.retro .nug p, html.retro .nug b, html.retro .nug span, html.retro .nug li { color: #000 !important; -webkit-text-fill-color: #000 !important; background: none !important; }
html.retro .act, html.retro .chip { color: #0000ee !important; text-decoration: underline; background: #c0c0c0 !important; }
html.retro .answer, html.retro .hello { color: #ffff00 !important; }
html.retro .hello .g, html.retro .hello-sub { color: #00ff00 !important; }
html.retro .orb { filter: grayscale(1) contrast(1.4); }
html.retro-out body { animation: retroOut .7s steps(6); }
@keyframes retroOut { 50% { filter: invert(1) hue-rotate(90deg); } }
/* end credits */
.credits { position: fixed; inset: 0; z-index: 43; background: var(--cine); overflow: hidden; cursor: pointer; }
.credits .roll { position: absolute; left: 0; right: 0; top: 0; display: grid; gap: 64px; justify-items: center; text-align: center; padding: 0 8vw; }
.credits .cr small { display: block; font: 500 11px/1 var(--mono); letter-spacing: .3em; text-transform: uppercase; color: var(--peach); margin-bottom: 12px; }
.credits .cr b { display: block; font-size: clamp(1.4rem, 3vw, 2.4rem); font-weight: 600; color: var(--ink); max-width: 900px; line-height: 1.35; }
.credits .cr:first-child b { font-size: clamp(3rem, 9vw, 7rem); font-weight: 800; letter-spacing: .2em; background: linear-gradient(90deg, var(--peach), var(--c-accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cr-skip { position: absolute; bottom: 20px; right: 24px; color: var(--faint); margin: 0; }

/* ---------- classic site ---------- */
.csite { position: fixed; inset: 0; z-index: 33; overflow: auto; background: var(--c-bg); color: var(--c-ink); font-family: var(--font); }
.cs-nav { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 18px; padding: calc(12px + var(--safe-t)) clamp(16px, 4vw, 48px) 12px; background: rgb(var(--c-bg-rgb) / .92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--c-line); }
.cs-nav button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.cs-logo { display: flex; align-items: center; gap: 8px; font-weight: 800 !important; letter-spacing: .28em; font-size: 13px !important; }
.cs-logo svg { width: 24px; height: 24px; }
.cs-menu { list-style: none; margin: 0 auto 0 12px; padding: 0; display: flex; gap: 2px; }
.cs-menu > li { position: relative; }
.cs-menu > li > button { padding: 9px 12px; border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--c-2); transition: background .2s, color .2s; }
.cs-menu > li > button:hover, .cs-menu > li > button.on, .dd.open > .dd-t { background: var(--c-soft); color: var(--c-ink); }
.cs-menu button.on { color: var(--c-accent) !important; }
.dd-t i { font-style: normal; font-size: 10px; color: var(--c-5); }
.dd-menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 210px; list-style: none; margin: 0; padding: 6px; background: var(--c-card); border: 1px solid var(--c-line); border-radius: 12px; box-shadow: 0 20px 40px -18px rgba(var(--c-shade), .35); opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .2s, transform .25s; }
.dd:hover .dd-menu, .dd.open .dd-menu, .dd:focus-within .dd-menu { opacity: 1; transform: none; pointer-events: auto; }
.dd-menu button { width: 100%; text-align: left; padding: 9px 12px; border-radius: 8px; font-size: 14px; color: var(--c-2); }
.dd-menu button:hover { background: var(--c-soft); color: var(--c-accent); }
.cs-cta { padding: 9px 14px !important; border-radius: 99px; border: 1px solid var(--c-ink) !important; font-size: 14px; font-weight: 600; }
.cs-talk { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px 7px 7px !important; border-radius: 99px; background: linear-gradient(135deg, var(--c-accent), var(--primary-light)) !important; color: var(--c-on-accent) !important; font-weight: 600; font-size: 14px; box-shadow: 0 8px 24px -10px rgb(var(--p) / .8); transition: transform .3s var(--back); }
.cs-talk:hover { transform: translateY(-1px) scale(1.03); }
.mini-orb { width: 26px; height: 26px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; box-shadow: 0 0 0 2px rgb(var(--hi) / .5); }
.mini-orb svg { width: 14px; height: 14px; }
.cs-burger { display: none; width: 40px; height: 40px; flex-direction: column; justify-content: center; gap: 5px; align-items: center; }
.cs-burger span { width: 20px; height: 2px; background: var(--c-ink); border-radius: 2px; }
.cs-main { max-width: 1180px; margin: 0 auto; padding: 40px clamp(16px, 4vw, 48px) 60px; }
.cs-main .classic { background: none; padding: 0; border-radius: 0; }
.cs-main .classic h1 { font-size: clamp(2rem, 4.4vw, 3.4rem); }
.cs-main .c-fig .vid, .cs-main .c-fig .img { background: var(--surface); }
.cs-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 40px; align-items: center; padding: 20px 0 50px; }
.cs-kick { font: 500 11px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--c-accent); margin: 0 0 14px; }
.cs-hero h1 { margin: 0 0 16px; font-size: clamp(2.4rem, 5.4vw, 4.4rem); line-height: 1.02; letter-spacing: -.035em; }
.cs-hero .lead { color: var(--c-3); font-size: 1.08rem; line-height: 1.65; }
.cs-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.cbtn.ghost { background: none; color: var(--c-ink); border: 1px solid var(--c-line-2); }
.cs-grid h2 { font-size: 1.6rem; margin: 0 0 18px; letter-spacing: -.02em; }
.cs-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.cs-card { text-align: left; display: grid; gap: 8px; padding: 18px; border-radius: 14px; background: var(--c-card); border: 1px solid var(--c-line); cursor: pointer; font: inherit; color: inherit; transition: transform .3s var(--ease-x), box-shadow .3s, border-color .3s; }
.cs-card:hover { transform: translateY(-3px); border-color: var(--peach); box-shadow: 0 18px 36px -22px rgb(var(--p) / .6); }
.cs-card b { font-size: 1.05rem; }
.cs-card span { color: var(--c-4); font-size: .9rem; line-height: 1.5; }
.cs-card i { font-style: normal; color: var(--c-accent); font-size: .85rem; font-weight: 600; }
.cs-ask { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 34px; padding: 18px 20px; border-radius: 14px; background: var(--c-tint); border: 1px solid var(--c-tint-line); }
.cs-ask p { margin: 0 auto 0 0; color: var(--c-3); }
.cs-ask b { color: var(--c-ink); }
.cs-foot { background: var(--c-ink); color: var(--c-line-2); padding: 44px clamp(16px, 4vw, 48px) calc(28px + var(--safe-b)); }
.cs-cols { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 24px; }
.cs-cols h4 { margin: 0 0 10px; font: 500 11px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--c-5); }
.cs-cols button { display: block; background: none; border: 0; color: var(--c-foot-ink); font: inherit; font-size: 14px; padding: 4px 0; cursor: pointer; }
.cs-cols button:hover { color: var(--primary-light); }
.cs-note { max-width: 1180px; margin: 30px auto 0; padding-top: 18px; border-top: 1px solid var(--c-foot-line); font-size: 13px; color: var(--c-5); }
.cs-note button { background: none; border: 0; color: var(--primary-light); font: inherit; cursor: pointer; padding: 0; text-decoration: underline; }
.cs-main .machine { font-size: 12.5px; }
@media (max-width: 980px) {
  .cs-menu { display: none; position: absolute; left: 0; right: 0; top: 100%; margin: 0; flex-direction: column; background: var(--c-card); border-bottom: 1px solid var(--c-line); padding: 8px 16px 14px; box-shadow: 0 20px 30px -20px rgba(var(--c-shade), .3); }
  .cs-nav.open .cs-menu { display: flex; }
  .cs-nav { justify-content: space-between; }
  .dd-menu { position: static; opacity: 1; transform: none; pointer-events: auto; box-shadow: none; border: 0; padding: 0 0 0 12px; display: none; }
  .dd.open .dd-menu { display: block; }
  .cs-cta { display: none; }
  .cs-burger { display: flex; }
  .cs-hero { grid-template-columns: 1fr; }
  .classic-btn span { display: none; }
  .classic-btn { padding: 0; width: 38px; justify-content: center; }
}

.cs-talk { white-space: nowrap; }
@media (max-width: 980px) { .cs-talk { font-size: 13px; padding: 6px 12px 6px 6px !important; margin-left: auto; } }

/* ---------- the real Vysto brand ---------- */
.brand-mark { width: 30px; height: auto; display: block; }
.brand-word b { color: var(--primary); font-weight: inherit; }
.orb-v { filter: drop-shadow(0 0 10px rgb(var(--p) / .45)); }
.intro-logo { position: absolute; left: 50%; top: 42%; width: min(150px, 30vw); height: auto; translate: -50% -50%; opacity: 0; transform: scale(.9); filter: drop-shadow(0 0 40px rgb(var(--p) / .35)); transition: opacity .9s, transform 1.4s var(--ease-x), filter 1s; }
.intro.k .intro-logo { opacity: 1; transform: none; }
.intro:not(.k).on .intro-logo { filter: drop-shadow(0 0 40px rgb(var(--p) / .35)) blur(8px); }
.cs-logo img { width: 26px; height: auto; }
.mini-orb img { width: 16px; height: auto; }
/* team portraits */
.people.photos { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px; }
.person.ph { margin: 0; display: block; padding: 0; overflow: hidden; border-radius: 16px; background: var(--surface); border: 1px solid rgb(var(--hi) / .07); }
.person.ph img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: contain; transition: transform .8s var(--ease-x), filter .6s; filter: saturate(.92); }
.person.ph:hover img { filter: saturate(1.05); }
.person.ph figcaption { padding: 10px 12px 12px; }
.person.ph b { display: block; font-size: 14px; line-height: 1.25; }
.person.ph span { display: block; font-size: 11.5px; color: var(--muted); margin-top: 3px; line-height: 1.35; }
.c-team { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; margin-top: 10px; }
.c-team figure { margin: 0; }
.c-team img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 30%; border-radius: 12px; display: block; margin-bottom: 8px; }
.c-team figcaption { font-size: 13.5px; color: var(--c-3); line-height: 1.4; }
.c-team strong { display: block; color: var(--c-ink); font-size: 15px; }
/* credits */
.credits .cr-logo { width: min(180px, 34vw); height: auto; margin-bottom: 10px; }
.credits .cr img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; object-position: 50% 28%; display: block; margin: 0 auto 16px; box-shadow: 0 0 0 2px rgb(var(--p) / .5), 0 20px 50px -10px rgb(var(--p) / .35); }
@media (max-width: 900px) {
  .people.photos { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  .person.ph img { aspect-ratio: 3 / 4; }
  .person.ph figcaption { padding: 6px 6px 8px; }
  .person.ph b { font-size: 10.5px; }
  .person.ph span { display: none; }
}
@media (max-width: 520px) {
  .brand-word { display: none; }
  .person.ph figcaption { padding: 6px 4px 8px; }
  .person.ph b { font-size: 9.5px; letter-spacing: -.01em; overflow-wrap: anywhere; }
}

/* ---------- people ---------- */
.prof { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 22px; align-items: center; }
.prof-ph { border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 4.4; background: var(--surface); }
.prof-ph img { width: 100%; height: 100%; object-fit: contain; display: block; }
.nug .prof-n { font-size: clamp(1.7rem, 3vw, 2.4rem); letter-spacing: -.03em; margin: 2px 0 12px; }
.prof-b > p:not(.nug-k) { margin-bottom: 14px; }
.prof-b .mini-chips { margin: 0 0 14px; }
.tstrip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 6px; }
.ts { display: grid; grid-template-columns: 38px 1fr; grid-template-rows: auto auto; column-gap: 9px; align-items: center; text-align: left; padding: 7px; border-radius: 14px; border: 1px solid rgb(var(--hi) / .07); background: rgb(var(--hi) / .03); transition: border-color .3s, background .3s, transform .5s var(--ease-x); }
.ts img { grid-row: 1 / 3; width: 38px; height: 38px; border-radius: 50%; object-fit: contain; }
.ts b { font-size: 13px; line-height: 1.1; }
.ts span { font-size: 10.5px; color: var(--muted); line-height: 1.2; }
.ts:hover { border-color: rgb(var(--p) / .5); transform: translateY(-2px); }
.ts.on { border-color: var(--primary); background: rgb(var(--p) / .12); }
.person.ph[data-ask] { cursor: pointer; }
.person.ph[data-ask]:hover { border-color: rgb(var(--p) / .55); }

/* ---------- built pages (use cases) ---------- */
.built { display: grid; gap: 10px; }
.b-ask { justify-self: end; max-width: 88%; padding: 10px 14px; border-radius: 16px 16px 4px 16px; background: var(--primary); color: var(--on-p2); }
.b-ask.f { justify-self: end; background: rgb(var(--p) / .16); color: var(--ink); border: 1px dashed rgb(var(--p) / .55); }
.b-ask p { margin: 2px 0 0; color: inherit !important; font-size: .95rem; line-height: 1.4; }
.b-who { font: 500 9.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; opacity: .8; }
.b-page { border-radius: 16px; background: var(--c-bg); color: var(--c-ink); padding: 0 14px 14px; overflow: hidden; box-shadow: 0 20px 40px -24px rgba(var(--shade-c), .8); }
.b-bar { display: flex; align-items: center; gap: 5px; margin: 0 -14px 12px; padding: 8px 12px; background: var(--c-soft); }
.b-bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--text-2); }
.b-bar span { margin-left: 8px; font: 500 10px/1 var(--mono); color: var(--c-4); }
.b-bar em { margin-left: auto; font: 600 9px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--on-p2); background: var(--primary); padding: 4px 7px; border-radius: 99px; font-style: normal; }
.b-page h4 { margin: 0 0 10px; font-size: 1.15rem; letter-spacing: -.02em; }
.bk { border-radius: 10px; padding: 9px 11px; margin-top: 7px; font-size: 13px; }
.bk.card, .bk.listing { background: var(--c-card); border: 1px solid var(--c-line); }
.bk b { display: block; font-size: 13.5px; }
.bk ul { margin: 4px 0 0; padding-left: 16px; color: var(--c-3); }
.bk .bdg { float: right; font: 600 9px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--c-ok); background: var(--c-ok-bg); padding: 4px 6px; border-radius: 6px; font-style: normal; }
.bk.banner { background: rgb(var(--p) / .12); border-left: 3px solid var(--primary); font-weight: 700; display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.bk.banner em { font: 600 9px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--primary-dark); font-style: normal; white-space: nowrap; }
.bk.cta { background: var(--primary); color: var(--on-p2); text-align: center; font-weight: 700; border-radius: 99px; }
.bk.field label { display: block; font-size: 11.5px; color: var(--c-4); }
.bk.field i { display: block; height: 26px; border-radius: 8px; border: 1px solid var(--c-line-2); background: var(--c-card); margin-top: 4px; }
.bk.schedule { background: var(--c-card); border: 1px solid var(--c-line); display: grid; gap: 4px; }
.bk.schedule div { display: grid; grid-template-columns: 40px 1fr auto; gap: 8px; align-items: center; }
.bk.schedule b { font-size: 12px; } .bk.schedule span { color: var(--c-3); }
.bk.schedule em { font: 600 9px/1 var(--mono); text-transform: uppercase; color: var(--c-ok); background: var(--c-ok-bg); padding: 3px 6px; border-radius: 6px; font-style: normal; }
.chipsrow { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.chipsrow span { font-size: 11px; padding: 3px 8px; border-radius: 99px; background: var(--c-soft); color: var(--c-3); }

/* ---------- comparison matrix ---------- */
.mx { display: grid; border-top: 1px solid var(--line); margin-top: 6px; }
.mx-r { display: grid; grid-template-columns: minmax(110px, .9fr) repeat(var(--c), minmax(0, 1fr)); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: .84rem; align-items: start; }
.mx-r b { font-size: .86rem; }
.mx-r span { color: var(--muted); line-height: 1.4; }
.mx-r .v { color: var(--ink); font-weight: 600; position: relative; padding-left: 12px; }
.mx-r .v::before { content: ""; position: absolute; left: 0; top: .45em; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 8px var(--primary); }
.mx-h span { font: 500 10px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.mx-h .v { color: var(--primary-light); padding-left: 0; } .mx-h .v::before { display: none; }

/* ---------- use-case grid ---------- */
.cases { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin-top: 8px; }
.case { text-align: left; display: grid; gap: 5px; align-content: start; padding: 13px; border-radius: 14px; border: 1px solid rgb(var(--hi) / .08); background: rgb(var(--hi) / .03); transition: border-color .3s, background .3s, transform .5s var(--ease-x); }
.case:hover { border-color: rgb(var(--p) / .5); background: rgb(var(--p) / .07); transform: translateY(-3px); }
.case b { font-size: 14.5px; line-height: 1.25; }
.case > span:last-child { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.cbadge { justify-self: start; font: 500 9px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--peach); border: 1px solid rgb(var(--pe) / .35); padding: 4px 7px; border-radius: 99px; }
/* classic page versions */
.c-prof { display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: start; }
.c-prof img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 28%; border-radius: 14px; }
@media (max-width: 900px) {
  .prof { grid-template-columns: 110px 1fr; gap: 14px; align-items: start; }
  .prof-ph { aspect-ratio: 3 / 4; }
  .nug .prof-n { font-size: 1.4rem; }
  .prof-b .lst { display: none; }
  .tstrip { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
  .ts { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 6px 2px; }
  .ts img { grid-row: auto; width: 34px; height: 34px; }
  .ts span { display: none; }
  .ts b { font-size: 10px; margin-top: 4px; }
  .mx-r { grid-template-columns: minmax(84px, .8fr) minmax(0, 1fr) minmax(0, 1.1fr); }
  .mx-r > :nth-child(3), .mx-r > :nth-child(4) { display: none; }
  .cases { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .case { padding: 9px; } .case > span:last-child { display: none; }
  .c-prof { grid-template-columns: 1fr; }
}
.dd-menu { max-height: min(70vh, 520px); overflow: auto; }
.cs-menu > li > button, .cs-cta, .cs-talk { white-space: nowrap; }
@media (max-width: 1240px) { .cs-menu > li > button { padding: 8px 9px; font-size: 13.5px; } .cs-nav { gap: 12px; } .cs-menu { margin-left: 4px; } }

/* ---------- roster: everyone who runs Vysto ---------- */
.roster { display: grid; gap: 16px; }
.rs .nug-k { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.rs .nug-k b { font: 600 10px/1 var(--mono); color: var(--on-p); background: var(--primary); border-radius: 99px; padding: 3px 7px; letter-spacing: 0; }
.rs.t .nug-k b { background: rgb(var(--pe) / .2); color: var(--peach); }
.rs-grid { display: grid; gap: 8px; }
.rs.h .rs-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.rs.a .rs-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.rs.t .rs-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
.rc { display: grid; align-content: start; gap: 4px; text-align: left; padding: 0 0 8px; border-radius: 14px; overflow: hidden; border: 1px solid rgb(var(--hi) / .07); background: var(--surface); transition: border-color .3s, transform .5s var(--ease-x); }
.rc:hover { border-color: rgb(var(--p) / .6); transform: translateY(-3px); }
.rc-ph { position: relative; display: block; aspect-ratio: 1; overflow: hidden; }
.rc-ph img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform .8s var(--ease-x), filter .5s; }
.rc:hover .rc-ph img { filter: saturate(1.05); }
.rs.h .rc-ph { aspect-ratio: 4 / 5; }
.rc-ph em { position: absolute; top: 6px; right: 6px; font: 600 8.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; font-style: normal; color: var(--peach); background: rgb(var(--bg) / .75); border: 1px solid rgb(var(--pe) / .4); padding: 3px 5px; border-radius: 99px; }
.rs.t .rc-ph img { filter: grayscale(.55) brightness(.8); }
.rs.t .rc:hover .rc-ph img { filter: none; }
.rc b { padding: 0 9px; font-size: 13px; line-height: 1.2; margin-top: 4px; }
.rc-s { padding: 0 9px; font-size: 11px; color: var(--muted); line-height: 1.35; }
.rs.a .rc-s, .rs.t .rc-s { display: none; }
.rs.t .rc b { font-size: 11px; padding: 0 6px; }
@media (max-width: 900px) {
  .rs.h .rs-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
  .rs.a .rs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
  .rs.t .rs-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
  .rc { border-radius: 10px; padding-bottom: 6px; }
  .rc b, .rs.t .rc b { font-size: 9.5px; padding: 0 5px; }
  .rc-s { display: none; }
  .rc-ph em { font-size: 7px; padding: 2px 4px; top: 4px; right: 4px; }
}
.rs.a .rc b { font-size: 11.5px; letter-spacing: -.01em; }
.rs.t .rs-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.rs.t .rc { grid-template-columns: 64px 1fr; align-items: center; padding: 0; gap: 0 8px; }
.rs.t .rc-ph { aspect-ratio: 1; grid-row: 1 / 3; }
.rs.t .rc b { font-size: 12.5px; padding: 0; margin: 0; align-self: end; }
.rs.t .rc-s { display: block; padding: 0 8px 0 0; font-size: 10.5px; align-self: start; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rs.t .rc-ph em { top: auto; bottom: 4px; right: 50%; transform: translateX(50%); }
@media (max-width: 900px) {
  .rs.t .rs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
  .rs.t .rc { grid-template-columns: 44px 1fr; }
  .rs.t .rc b { font-size: 10.5px; }
  .rs.t .rc-s { display: none; }
  .rs.a .rc b { font-size: 9px; }
}

.rc b { hyphens: manual; -webkit-hyphens: manual; }
.rs.t .rc { grid-template-columns: 50px 1fr; }
.rs.t .rc b { font-size: 11.5px; }
@media (max-width: 900px) {
  .rs.a .rs-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
  .rs.t .rs-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
  .rs.t .rc { grid-template-columns: 1fr; padding: 0 0 5px; }
  .rs.t .rc-ph { grid-row: auto; aspect-ratio: 16 / 10; }
  .rs.t .rc b, .rs.a .rc b { font-size: 8.5px; padding: 0 4px; margin-top: 3px; }
  .rs.t .rc-ph em { display: none; }
  .rs .nug-k { margin-bottom: 5px; }
  .roster { gap: 10px; }
}

/* ---------- intent analysis: the engine thinking, shown in the shot ---------- */
.cine.has-ia .title-card { padding-bottom: 30vh; }
.ia { position: absolute; left: 50%; bottom: calc(11vh + 22px); width: min(640px, calc(100vw - 32px)); transform: translateX(-50%); opacity: 0; padding: 14px 18px 16px; border-radius: 18px; background: var(--panel); border: 1px solid rgb(var(--p) / .28); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 30px 70px -30px rgba(var(--shade-c), .9), 0 0 0 1px rgb(var(--hi) / .03) inset; font-family: var(--mono); color: var(--text-2); }
.ia-h { display: flex; align-items: center; gap: 10px; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 10px; }
.ia-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 10px var(--primary); animation: pulse .8s ease-in-out infinite; }
.ia-step { color: var(--peach); }
.ia-res { margin-left: auto; color: var(--ink); letter-spacing: .08em; }
.ia-q { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }
.ia-q span { font-size: 12px; padding: 4px 8px; border-radius: 6px; background: rgb(var(--hi) / .05); border: 1px solid rgb(var(--hi) / .07); transition: background .4s, border-color .4s, color .4s, box-shadow .4s; }
.ia-q span.on { background: rgb(var(--p) / .2); border-color: var(--primary); color: var(--ink); box-shadow: 0 0 14px rgb(var(--p) / .45); }
.ia-c { display: grid; gap: 6px; margin-bottom: 12px; }
.ia-row { display: grid; grid-template-columns: minmax(110px, 190px) 1fr 44px; gap: 12px; align-items: center; font-size: 11.5px; transition: opacity .5s; }
.ia-row > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-3); }
.ia-row i { position: relative; height: 6px; border-radius: 6px; background: rgb(var(--hi) / .07); overflow: hidden; }
.ia-row b { position: absolute; inset: 0; border-radius: 6px; background: rgb(var(--pe) / .55); transform-origin: 0 50%; transform: scaleX(0); }
.ia-row.w b { background: linear-gradient(90deg, var(--primary), var(--primary-light)); }
.ia-row em { font-style: normal; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.ia-row.lock > span, .ia-row.lock em { color: var(--primary-light); font-weight: 600; }
.ia-row.lock b { box-shadow: 0 0 14px rgb(var(--p) / .8); }
.ia-row.dim { opacity: .35; }
.ia-n { display: flex; flex-wrap: wrap; gap: 5px; min-height: 26px; }
.ia-n span { font-size: 10.5px; padding: 5px 9px; border-radius: 99px; border: 1px solid rgb(var(--hi) / .1); color: var(--muted); opacity: 0; transition: background .4s, border-color .4s, color .4s, opacity .5s, transform .5s var(--back); }
.ia-n span.on { opacity: 1; background: rgb(var(--p) / .18); border-color: var(--primary); color: var(--ink); transform: scale(1.06); box-shadow: 0 0 14px rgb(var(--p) / .4); }
.ia-n span.off { opacity: .28; }
.ia-n span:not(.on):not(.off) { opacity: 1; }
@media (max-width: 900px) {
  .cine.has-ia .title-card { padding-bottom: 34vh; }
  .ia { bottom: calc(8vh + 14px); padding: 12px 12px 13px; }
  .ia-row { grid-template-columns: minmax(80px, 120px) 1fr 38px; gap: 8px; font-size: 10.5px; }
  .ia-q span { font-size: 11px; padding: 3px 6px; }
  .ia-res { display: none; }
}
.tc-t.long { font-size: clamp(2.4rem, 7vw, 6.4rem); }
.tc-t.xlong { font-size: clamp(2rem, 5.4vw, 4.8rem); }

/* no letterbox bars — the shot plays full-frame */
.cine .bar { display: none !important; }
.ia { bottom: calc(36px + var(--safe-b)); }
@media (max-width: 900px) { .ia { bottom: calc(24px + var(--safe-b)); } }


/* =====================================================================
   THEMES — display face, theme switcher, brand word
   ===================================================================== */
.hello, .nug h3, .tc-t, .stats div strong, .plan .price, .t-quote p:not(.nug-k), .prof-n, .cs-hero h1, .classic h1, .classic h2, .credits .cr b { font-family: var(--display); }
.hello, .nug h3, .prof-n { font-weight: var(--display-weight); }
.brand-word.is-name { letter-spacing: .04em; font-size: 15px; font-weight: 600; font-family: var(--display); }
.brand-mark { object-fit: contain; }
/* a tenant's logo: app.js sizes it by shape (sizeLogo) and judges its contrast on the theme (toneLogo) */
.brand.is-tenant .brand-mark { box-sizing: content-box; max-width: none; transition: transform .7s var(--back), background-color .5s, padding .5s, border-radius .5s, box-shadow .5s, filter .5s; }
.brand.is-wide .brand-word { display: none; } /* a wordmark already says the name */
.brand.is-wide:hover .brand-mark { transform: translateY(-1px); }
/* too little contrast with the theme: the logo sits on a chip in a colour it reads on (picked from its pixels) */
.brand.logo-chip .brand-mark { padding: 4px; border-radius: 10px; background: var(--logo-chip); box-shadow: 0 1px 1px rgb(0 0 0 / .08), 0 8px 20px -10px rgb(0 0 0 / .45), inset 0 0 0 1px rgb(var(--hi) / .08); }
.brand.logo-chip.is-wide .brand-mark { padding: 5px 11px; border-radius: 999px; }
.brand[data-logo-tone="plate"] .brand-mark { border-radius: 6px; }
/* pixels unreadable (a cross-origin logo without CORS): a hairline halo in the theme's ink reads on either polarity */
.brand[data-logo-tone="unknown"] .brand-mark { filter: drop-shadow(0 0 .6px rgb(var(--hi) / .75)) drop-shadow(0 0 3px rgb(var(--hi) / .18)); }
.intro-logo[data-shape="wide"] { width: min(320px, 72vw); }
.intro-logo[data-tone="chip"] { box-sizing: content-box; padding: 18px 26px; border-radius: 24px; background: var(--logo-chip); }
.intro-logo[data-tone="plate"] { border-radius: 14px; }
.intro-logo[data-tone="unknown"] { filter: drop-shadow(0 0 .8px rgb(var(--hi) / .75)) drop-shadow(0 0 40px rgb(var(--p) / .35)); }
html.is-light .intro-logo[data-tone="unknown"] { filter: drop-shadow(0 0 .8px rgb(var(--hi) / .75)); }
@media (prefers-reduced-motion: reduce) { .brand.is-tenant .brand-mark { transition: none; } .brand:hover .brand-mark { transform: none; } }
html { transition: background-color .6s; }
html.theme-swap .nug, html.theme-swap .composer, html.theme-swap .chip, html.theme-swap .hello, html.theme-swap .answer, html.theme-swap .top { transition: background .6s, color .6s, border-color .6s, box-shadow .6s !important; }

.ico.theme-btn { width: auto; padding: 0 12px 0 10px; border-radius: 99px; gap: 7px; display: inline-flex; align-items: center; font-size: 12.5px; font-weight: 500; }
.theme-btn .sw { display: inline-flex; }
.theme-btn .sw i { width: 10px; height: 10px; border-radius: 50%; margin-left: -3px; box-shadow: 0 0 0 1.5px var(--dark); }
.theme-btn .sw i:first-child { margin-left: 0; }
.tpanel { position: fixed; right: var(--side); top: calc(66px + var(--safe-t)); z-index: 35; width: min(420px, calc(100vw - 36px)); max-height: calc(100vh - 100px - var(--safe-t)); overflow: auto; background: var(--glass-2); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--line); border-radius: 18px; padding: 14px; box-shadow: 0 30px 80px -30px rgba(var(--shade-c), .8); animation: drawerIn .35s var(--ease-x); }
.tpanel[hidden] { display: none; }
.tpanel .drawer-head { margin-bottom: 10px; }
.tgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tcard { position: relative; text-align: left; border: 1px solid var(--line); border-radius: 14px; padding: 0; overflow: hidden; background: none; display: grid; transition: transform .4s var(--ease-x), border-color .3s; }
.tcard:hover { transform: translateY(-2px); border-color: rgb(var(--p) / .5); }
.tcard.is-on { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.tcard .tprev { position: relative; height: 64px; overflow: hidden; }
.tcard .tprev i { position: absolute; border-radius: 50%; }
.tcard .tprev .o { width: 22px; height: 22px; left: 50%; top: 18px; transform: translateX(-50%); }
.tcard .tprev .c { height: 6px; border-radius: 9px; bottom: 12px; }
.tcard .tprev .b { left: 18%; right: 18%; height: 8px; border-radius: 9px; bottom: 3px; opacity: .9; }
.tcard .tmeta { padding: 8px 10px 9px; display: grid; gap: 1px; }
.tcard b { font-size: 13px; font-weight: 600; color: var(--ink); }
.tcard span { font-size: 11px; color: var(--muted); line-height: 1.35; }
.tcard em { position: absolute; top: 6px; right: 6px; font: 600 8.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; font-style: normal; padding: 3px 6px; border-radius: 99px; background: var(--primary); color: var(--on-p); }
.tcontent { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); display: grid; gap: 6px; }
.tcontent .mono { color: var(--muted); margin: 0 2px 2px; }
.tcontent .row { display: flex; gap: 6px; flex-wrap: wrap; }
.tcontent a { text-decoration: none; font-size: 12.5px; padding: 6px 11px; border-radius: 99px; border: 1px solid var(--line); color: var(--text-2); }
.tcontent a.is-on { border-color: var(--primary); color: var(--ink); background: rgb(var(--p) / .1); }
.tcontent a:hover { border-color: rgb(var(--p) / .5); }
.powered { position: fixed; z-index: 29; right: var(--side); bottom: calc(10px + var(--safe-b)); font: 500 9.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--faint); text-decoration: none; display: flex; align-items: center; gap: 6px; opacity: 0; transition: opacity .8s .6s; }
.powered img { width: 14px; height: 12px; }
body:has(.app:not([data-state="intro"])) .powered { opacity: .8; }
.powered:hover { color: var(--ink); }
@media (max-width: 900px) { .powered { display: none; } .ico.theme-btn span.lbl { display: none; } .ico.theme-btn { padding: 0 10px; } }
/* light themes: the grain multiplies instead of overlaying */
html.is-light .grain { mix-blend-mode: multiply; }

/* =====================================================================
   NUGGETS FOR EVERY BUSINESS — gallery, products, price builder
   ===================================================================== */
.gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; margin-top: 6px; }
.gal-i { position: relative; padding: 0; border: 1px solid rgb(var(--hi) / .08); border-radius: calc(var(--radius) * .6); overflow: hidden; background: var(--surface); aspect-ratio: 4 / 3.4; display: block; transition: transform .5s var(--ease-x), border-color .3s, box-shadow .4s; }
.gal-i img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform .8s var(--ease-x); }
.gal-i span { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 9px 7px; font-size: 12px; font-weight: 600; text-align: left; color: #fff; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .62)); }
.gal-i:hover { transform: translateY(-2px); border-color: rgb(var(--p) / .55); box-shadow: 0 16px 30px -18px rgb(var(--p) / .6); }
.gal-i:hover img { filter: saturate(1.06); }
.prods { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 6px; }
.prod { text-align: left; border: 1px solid rgb(var(--hi) / .08); background: rgb(var(--hi) / .03); border-radius: calc(var(--radius) * .7); padding: 0 0 10px; display: grid; align-content: start; gap: 2px; overflow: hidden; transition: border-color .3s, transform .5s var(--ease-x); }
.prod:is(button):hover { border-color: rgb(var(--p) / .5); transform: translateY(-2px); }
.prod-ph { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface); margin-bottom: 6px; }
.prod-ph img { width: 100%; height: 100%; object-fit: contain; display: block; }
.prod b { font-size: 13.5px; padding: 0 11px; line-height: 1.3; }
.prod .price { font-style: normal; font-weight: 700; font-size: 14px; color: var(--primary-light); padding: 0 11px; }
.prod-s { font-size: 11.5px; color: var(--muted); line-height: 1.4; padding: 0 11px; }
.prods:not(:has(.prod-ph)) .prod { padding-top: 10px; }
.est { display: grid; gap: 12px; margin-top: 4px; }
.est-step { display: flex; align-items: center; gap: 10px; }
.est-l { font: 500 10px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-right: auto; }
.est-b { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgb(var(--p) / .45); background: rgb(var(--p) / .08); color: var(--ink); font-size: 18px; line-height: 1; display: grid; place-items: center; transition: background .25s, color .25s, transform .3s var(--back); }
.est-b:hover { background: var(--primary); color: var(--on-p); }
.est-b:active { transform: scale(.9); }
.est-v { min-width: 2.2ch; text-align: center; font: var(--display-weight) 1.9rem/1 var(--display); color: var(--ink); }
.est-os { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.est-o { border: 1px solid rgb(var(--hi) / .08); border-radius: calc(var(--radius) * .7); padding: 12px; background: rgb(var(--hi) / .03); display: grid; gap: 4px; }
.est-o.featured { border-color: rgb(var(--p) / .6); background: rgb(var(--p) / .07); }
.est-o b { font-size: 13px; color: var(--text-2); font-weight: 600; }
.est-p { display: block; font: var(--display-weight) clamp(1.5rem, 2.4vw, 2rem)/1.05 var(--display); letter-spacing: -.02em; color: var(--ink); }
.est-o span { font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.est-f { font-size: 12px !important; color: var(--muted) !important; line-height: 1.5 !important; }
@media (max-width: 900px) { .gal { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* light themes: photos keep a soft frame, the composer reads as paper */
html.is-light .gal-i, html.is-light .prod-ph, html.is-light .person.ph, html.is-light .img-art { background: var(--surface); }
html.is-light .composer { box-shadow: 0 18px 40px -22px rgba(var(--shade-c), .45); }
html.is-light .chip { color: var(--text-2); }
html.is-light .intro-logo { filter: none; }
/* photos and illustrations alike: the whole picture, contained (see "stage images" below) */
.img-art img { object-fit: contain; }
.cs-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.cs-btns .cbtn { margin-top: 0; }
/* phones: products become compact rows (see the product rules after the shop styles) */
@media (max-width: 900px) {
  .gal { gap: 5px; } .gal-i span { font-size: 10.5px; padding: 12px 6px 5px; }
  .est-os { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; } .est-o { padding: 8px; } .est-o span { display: none; }
}

/* =====================================================================
   TWEAKS — live theme controls (the panel wears the theme it edits)
   ===================================================================== */
.ico.tweak-btn { width: auto; padding: 0 12px 0 10px; border-radius: 99px; gap: 6px; display: inline-flex; align-items: center; font-size: 12.5px; font-weight: 500; }
.ico.tweak-btn[aria-expanded="true"] { color: var(--ink); border-color: rgb(var(--p) / .5); background: rgb(var(--p) / .1); }
.kpanel { position: fixed; right: var(--side); top: calc(66px + var(--safe-t)); bottom: calc(18px + var(--safe-b)); z-index: 35; width: min(340px, calc(100vw - 36px)); overflow: auto; overscroll-behavior: contain; background: var(--glass-2); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); border: 1px solid var(--line); border-radius: 18px; padding: 14px 14px 16px; box-shadow: 0 30px 80px -30px rgba(var(--shade-c), .8); animation: drawerIn .35s var(--ease-x); scrollbar-width: thin; }
.kpanel[hidden] { display: none; }
.kpanel .drawer-head { position: sticky; top: -14px; margin: -14px -14px 6px; padding: 14px 14px 8px; background: inherit; z-index: 1; }
.khint { margin: 0 2px 12px; font-size: 12px; line-height: 1.5; color: var(--muted); }
.khint b { color: var(--ink); font-weight: 600; }
.kpanel section { border-top: 1px solid var(--line); padding: 12px 0 10px; display: grid; gap: 8px; }
.kpanel section > .mono { margin: 0 2px 2px; color: var(--primary-light); }
.ksub { margin: 4px 2px 0; font-size: 11.5px; color: var(--muted); }
.kname { display: grid; gap: 6px; margin-bottom: 10px; }
.kname .mono { color: var(--muted); margin-left: 2px; }
.kpanel input[type="text"], .kpanel select { width: 100%; font: inherit; font-size: 13px; color: var(--ink); background: rgb(var(--hi) / .05); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; outline: none; transition: border-color .2s; }
.kpanel input[type="text"]:focus, .kpanel select:focus { border-color: rgb(var(--p) / .6); }
.kpanel select option { color: #111; }
.kcols { display: grid; gap: 6px; }
.kc { display: grid; grid-template-columns: 30px 1fr 84px; align-items: center; gap: 10px; font-size: 13px; color: var(--text-2); }
.kc input[type="color"], .kdot input { -webkit-appearance: none; appearance: none; border: 0; padding: 0; background: none; cursor: pointer; }
.kc input[type="color"] { width: 30px; height: 30px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1px var(--line), 0 0 0 3px rgb(var(--hi) / .04); }
.kc input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; } .kc input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 50%; }
.kc input[type="color"]::-moz-color-swatch { border: 0; border-radius: 50%; }
.kc .khex { font-family: var(--mono) !important; font-size: 11.5px !important; padding: 6px 8px !important; text-transform: lowercase; }
.kpal { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.kdot { position: relative; width: 28px; height: 28px; border-radius: 50%; box-shadow: 0 0 0 1px var(--line); cursor: pointer; overflow: hidden; }
.kdot input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.kadd { width: 28px; height: 28px; border-radius: 50%; border: 1px dashed rgb(var(--hi) / .25); background: none; color: var(--muted); font-size: 16px; line-height: 1; }
.kadd:hover { color: var(--ink); border-color: var(--primary); }
.ks { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 10px; font-size: 13px; color: var(--text-2); }
.kr { display: grid; grid-template-columns: 96px 1fr 44px; align-items: center; gap: 10px; font-size: 13px; color: var(--text-2); }
.kr input[type="range"] { width: 100%; accent-color: var(--primary); }
.kr output { font: 500 11px/1 var(--mono); color: var(--muted); text-align: right; }
.kt { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--text-2); cursor: pointer; }
.kt input { accent-color: var(--primary); width: 16px; height: 16px; }
.kpills { display: flex; flex-wrap: wrap; gap: 6px; }
.kpills button { border: 1px solid var(--line); background: none; color: var(--muted); border-radius: 99px; padding: 5px 10px; font-size: 12px; transition: background .2s, color .2s, border-color .2s; }
.kpills button.on { background: rgb(var(--p) / .14); border-color: rgb(var(--p) / .55); color: var(--ink); }
.kacts { display: flex; flex-wrap: wrap; gap: 8px; border-top: 1px solid var(--line); padding-top: 12px; }
.kacts .act { margin: 0; }
.kout { width: 100%; min-height: 150px; margin-top: 10px; resize: vertical; font: 400 10.5px/1.5 var(--mono); color: var(--text-2); background: var(--deep); border: 1px solid var(--line); border-radius: 10px; padding: 10px; }
.kout[hidden] { display: none; }
@media (max-width: 900px) { .ico.tweak-btn span.lbl { display: none; } .ico.tweak-btn { padding: 0 10px; } .kpanel { left: 12px; right: 12px; width: auto; top: auto; max-height: 62vh; bottom: calc(12px + var(--safe-b)); } }

/* =====================================================================
   SIGNATURES — each theme's own shot plays in this layer (assets/sig/*.js)
   ===================================================================== */
.sigfx { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.sigfx > * { position: absolute; }
.orb-sig, .orb-sig-b { pointer-events: none; }
.orb-sig *, .orb-sig-b * { transform-box: fill-box; transform-origin: center; }
html.paused .orb-sig *, html.paused .orb-sig-b * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { .orb-sig *, .orb-sig-b * { animation: none !important; } }
.kmix .ks-sub span { padding-left: 10px; position: relative; }
.kmix .ks-sub span::before { content: ""; position: absolute; left: 0; top: 50%; width: 5px; height: 1px; background: var(--line); }
.kmix select { font-size: 12.5px; padding: 6px 8px; }

/* =====================================================================
   BRAND KIT — your identity on any theme
   ===================================================================== */
.bpanel .bon { margin: 0 2px 10px; font-weight: 600; color: var(--ink); }
.bc { display: grid; grid-template-columns: 1fr 30px 84px; grid-template-rows: auto auto; align-items: center; gap: 2px 10px; padding: 6px 0; }
.bc .kt { font-size: 13px; }
.bc small { grid-column: 1 / -1; font-size: 11px; color: var(--muted); padding-left: 25px; }
.bc input[type="color"] { -webkit-appearance: none; appearance: none; border: 0; padding: 0; background: none; width: 30px; height: 30px; border-radius: 50%; overflow: hidden; cursor: pointer; box-shadow: 0 0 0 1px var(--line); }
.bc input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; } .bc input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 50%; }
.bc input[type="color"]::-moz-color-swatch { border: 0; border-radius: 50%; }
.bc.off input[type="color"], .bc.off .khex { opacity: .45; }
.blogo { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; margin: 2px 0 10px; }
.blogo-ph { width: 64px; height: 64px; border-radius: 16px; background: rgb(var(--hi) / .05) center / contain no-repeat; border: 1px solid var(--line); }
.blogo-ph.empty { background-image: repeating-linear-gradient(45deg, rgb(var(--hi) / .05) 0 6px, transparent 6px 12px) !important; }
.blogo .act { margin: 0 6px 6px 0; display: inline-block; }
.bfile { position: relative; overflow: hidden; cursor: pointer; }
.bfile input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.bfrom { margin-top: 6px; } .bfrom .ksub b { color: var(--ink); }
.bsw { border: 0; cursor: pointer; }

/* =====================================================================
   LIVE — on a real tenant site (window.VYSTO_BOOT)
   ===================================================================== */
html.is-live #themeBtn, html.is-live #xp, html.is-live #tpanel, html.is-live #csite { display: none !important; }
#classicBtn[hidden] { display: none !important; }
.bgmedia { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.bgmedia img, .bgmedia video { width: 100%; height: 100%; object-fit: cover; display: block; }
.bgmedia.contain img, .bgmedia.contain video { object-fit: contain; }
/* A tenant photo/video behind the field: the quiet text (welcome sub-line, hint, the visitor's question, the
   reply) gets a soft halo in the theme's own background colour so it stays readable over busy images. */
html.has-bgmedia .hello, html.has-bgmedia .hello-sub, html.has-bgmedia .hint, html.has-bgmedia .you, html.has-bgmedia .answer { text-shadow: 0 0 2px rgb(var(--bg) / .9), 0 0 14px rgb(var(--bg) / .75), 0 0 28px rgb(var(--bg) / .55); }
html.has-bgmedia .hello .hello-sub { color: color-mix(in srgb, var(--ink) 78%, var(--muted)); }
html.has-bgmedia .hello.is-in .hint { opacity: .95; }
.faq { margin: 4px 0 0; display: grid; gap: 10px; }
.faq div { border-top: 1px solid rgb(var(--hi) / .08); padding-top: 10px; }
.faq div:first-child { border-top: 0; padding-top: 0; }
.faq dt { font-weight: 600; font-size: .95rem; color: var(--ink); line-height: 1.35; }
.faq dd { margin: 4px 0 0; color: var(--text-2); font-size: .9rem; line-height: 1.55; }
.lst.contact li b { color: var(--primary-light); font-weight: 600; margin-right: 6px; }
.nug-html { display: block; width: 100%; height: 340px; border: 0; border-radius: calc(var(--radius) * .6); background: #fff; }
.vy-form { display: grid; gap: 10px; margin-top: 6px; }
.vy-form .vf { display: grid; gap: 4px; }
.vy-form .vf-c { grid-template-columns: auto 1fr; align-items: center; gap: 8px; }
.vy-form label { font-size: 12.5px; color: var(--text-2); }
.vy-form input:not([type="checkbox"]), .vy-form textarea, .vy-form select { font: inherit; font-size: 14px; color: var(--ink); background: rgb(var(--hi) / .05); border: 1px solid var(--line); border-radius: calc(var(--radius) * .5); padding: 9px 11px; outline: none; transition: border-color .2s; }
.vy-form input:focus, .vy-form textarea:focus, .vy-form select:focus { border-color: rgb(var(--p) / .6); }
.vy-form input[type="checkbox"] { accent-color: var(--primary); width: 16px; height: 16px; }
.vy-form .vf-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.vy-form .acts { margin-top: 4px; }
.vy-form .vf-msg { margin: 0; font-size: 13px; color: var(--muted); min-height: 1.2em; }
.vy-form input:focus-visible, .vy-form textarea:focus-visible, .vy-form select:focus-visible { box-shadow: 0 0 0 3px rgb(var(--p) / .25); }
.vy-form .vf-c label { font-size: 13px; color: var(--ink); }
.vy-form .vf-c .vf-err { grid-column: 1 / -1; }
.vy-form .vf-req { color: var(--primary-light); }
.vy-form .vf-note { margin: 0; font-size: 11.5px; color: var(--muted); }
.vy-form .vf-err { margin: 0; font-size: 12px; color: var(--peach); }
.vy-form .vf.bad input:not([type="checkbox"]), .vy-form .vf.bad textarea, .vy-form .vf.bad select { border-color: var(--peach); }
.vy-form .vf.bad input[type="checkbox"] { outline: 2px solid var(--peach); outline-offset: 2px; }
.vy-form button[disabled] { opacity: .55; cursor: not-allowed; }
.vy-form[aria-busy="true"] button[type="submit"] { cursor: progress; }
.vy-form .vf-msg a { color: var(--primary-light); }
.vf-lead { margin: 0 0 4px; color: var(--text-2); font-size: .92rem; line-height: 1.5; }
.vf-done { display: flex; gap: 10px; align-items: center; margin-top: 8px; padding: 14px; border-radius: calc(var(--radius) * .6); background: rgb(var(--p) / .1); outline: none; }
.vf-done svg { flex: none; width: 26px; height: 26px; fill: none; stroke: var(--primary-light); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vf-done svg circle { fill: rgb(var(--p) / .14); stroke: none; }
.vf-done p { margin: 0; color: var(--ink); }
.nug.t-form { overflow-y: auto; overscroll-behavior: contain; }
/* Private access: the in-chat code card (and the same card under a form) */
.vy-access { display: grid; gap: 10px; margin-top: 6px; }
.vy-access .vf { display: grid; gap: 4px; }
.vy-access label { font-size: 12.5px; color: var(--text-2); }
.vy-access .vy-access-in { font: 500 18px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--ink); background: rgb(var(--hi) / .05); border: 1px solid var(--line); border-radius: calc(var(--radius) * .5); padding: 12px 14px; outline: none; max-width: 16ch; transition: border-color .2s; }
.vy-access .vy-access-in:focus { border-color: rgb(var(--p) / .6); }
.vy-access .vy-access-in:focus-visible { box-shadow: 0 0 0 3px rgb(var(--p) / .25); }
.vy-access .vf.bad .vy-access-in { border-color: var(--peach); }
.vy-access .vf-err { margin: 0; font-size: 12.5px; color: var(--peach); }
.vy-access button[disabled] { opacity: .55; cursor: progress; }
.vy-access-box { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.back-ov { text-decoration: none; }
/* phones: 16px fields so iOS doesn't zoom into the page while the visitor types */
@media (max-width: 640px) { .vy-form input:not([type="checkbox"]), .vy-form textarea, .vy-form select { font-size: 16px; } .vy-form .acts .act { flex: 1 1 auto; } }
.order-rows { margin: 6px 0 8px; display: grid; gap: 6px; }
.order-rows div { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid rgb(var(--hi) / .08); padding-top: 6px; }
.order-rows div:first-child { border-top: 0; padding-top: 0; }
.order-rows dt { color: var(--text-2); font-size: .9rem; }
.order-rows dd { margin: 0; font-weight: 600; color: var(--ink); text-align: right; }
#soundBtn[aria-pressed="true"] { color: var(--muted); }

/* ---------- commerce (live tenants with the ecommerce extension) ---------- */
.ico.cart-btn { width: auto; padding: 0 11px 0 9px; border-radius: 99px; gap: 6px; display: inline-flex; align-items: center; color: var(--ink); border-color: var(--line); }
.ico.cart-btn[hidden] { display: none; }
.ico.cart-btn b { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--primary); color: var(--on-p); font: 600 11px/18px var(--mono); text-align: center; }
.ico.cart-btn[aria-expanded="true"] { border-color: rgb(var(--p) / .5); background: rgb(var(--p) / .1); }
.ico.cart-btn.pulse { animation: cartPulse .9s ease-in-out 2; }
@keyframes cartPulse { 0%, 100% { box-shadow: 0 0 0 0 rgb(var(--p) / 0); transform: none; } 50% { box-shadow: 0 0 0 8px rgb(var(--p) / .22); transform: scale(1.06); } }
.cartpanel { width: min(360px, calc(100vw - 36px)); }
.cart-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-height: 46vh; overflow: auto; }
.cart-lines li { display: grid; grid-template-columns: 40px 1fr auto; gap: 4px 10px; align-items: center; font-size: 13px; }
.cart-ctl { grid-column: 2 / -1; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cart-qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 99px; }
.cart-qty button { width: 30px; height: 28px; border: 0; background: none; color: var(--ink); font: 600 15px/1 var(--font, inherit); cursor: pointer; border-radius: 99px; }
.cart-qty button:hover:not([disabled]) { background: rgb(var(--p) / .12); }
.cart-qty button[disabled] { opacity: .4; cursor: not-allowed; }
.cart-qty output { min-width: 24px; text-align: center; font: 600 12.5px/1 var(--mono); }
.cart-rm { border: 0; background: none; padding: 4px 2px; color: var(--muted); font: inherit; font-size: 12px; text-decoration: underline; cursor: pointer; }
.cart-rm:hover { color: var(--ink); }
.cart-empty { margin: 6px 0 2px; color: var(--muted); font-size: 13px; text-align: center; }
.cart-codes { margin: 0 0 10px; font-size: 12.5px; }
.cart-codes summary { cursor: pointer; color: var(--text-2); }
.cart-codes[hidden], .cart-total[hidden], .cart-go[hidden] { display: none; }
.cart-f { display: grid; gap: 4px; margin-top: 8px; }
.cart-f label { font-size: 12px; color: var(--text-2); }
.cart-f input, .cart-f select { font: inherit; font-size: 14px; color: var(--ink); background: rgb(var(--hi) / .05); border: 1px solid var(--line); border-radius: calc(var(--radius) * .5); padding: 8px 10px; }
.cart-co { margin: 0 0 10px; display: grid; gap: 8px; }
.cart-co[hidden] { display: none; }
.cart-co fieldset { margin: 0; padding: 0; border: 0; }
.cart-co legend { font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.cart-co .cart-f[hidden], .cart-co .co-deliv[hidden], .cart-co .co-loc[hidden], .cart-co fieldset[hidden], .cart-co .cart-hint[hidden] { display: none; }
.cart-co .cart-hint { margin: 6px 0 0; font-size: 12px; line-height: 1.45; color: var(--text-2); }
.cart-f [aria-invalid="true"] { border-color: var(--peach); box-shadow: 0 0 0 1px var(--peach); }
.cart-pay label { display: flex; gap: 8px; align-items: center; margin-top: 8px; font-size: 13px; }
.cart-pay input { accent-color: var(--primary); }
.cart-msg { margin: 0 0 10px; padding: 9px 11px; border-radius: calc(var(--radius) * .5); font-size: 12.5px; line-height: 1.45; background: rgb(var(--hi) / .06); border: 1px solid var(--peach); color: var(--ink); }
.cart-msg[hidden] { display: none; }
.cart-msg[data-kind="info"] { border-color: var(--line); }
.cart-msg a, .cart-note a { color: var(--primary-light); }
.cart-go[disabled] { opacity: .6; cursor: progress; }
@media (max-width: 640px) { .cart-f input, .cart-f select { font-size: 16px; } .cart-qty button { width: 36px; height: 34px; } }
.cart-lines img, .cart-lines i { width: 40px; height: 40px; border-radius: calc(var(--radius) * .5); object-fit: contain; background: var(--surface); display: block; }
.cart-lines span { display: grid; gap: 2px; min-width: 0; }
.cart-lines b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cart-lines small { color: var(--muted); font-size: 11.5px; }
.cart-lines em { font-style: normal; font-weight: 600; }
.cart-total { display: flex; justify-content: space-between; align-items: baseline; margin: 12px 0 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.cart-total b { color: var(--ink); font: 700 1.15rem/1 var(--display); }
.cart-go { width: 100%; padding: 11px 14px; font-size: 14px; }
.cart-note { margin: 8px 0 0; font-size: 11px; color: var(--muted); text-align: center; }
.prod.shop { padding: 0 0 10px; }
.prod-hit { display: grid; align-content: start; gap: 2px; text-align: left; background: none; border: 0; padding: 0; color: inherit; font: inherit; }
.prod-hit:hover b { color: var(--peach); }
.prods:not(:has(.prod-ph)) .prod.shop { padding-top: 10px; }
.prod-add { margin: 8px 11px 0; padding: 6px 10px; font-size: 12px; justify-self: start; }
.prod-add[disabled], .pdp .act[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.pdp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 18px; align-items: start; }
.pdp:not(:has(.pdp-ph)) { grid-template-columns: 1fr; }
.pdp-ph { display: block; aspect-ratio: 4 / 3; border-radius: calc(var(--radius) * .7); overflow: hidden; background: var(--surface); }
.pdp-ph img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pdp .price { margin: 4px 0; font: 700 1.5rem/1.1 var(--display); color: var(--primary-light); }
.pdp-stock { margin: 0 0 6px; font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--peach); }
.pdp-stock.out { color: var(--muted); }
@media (max-width: 640px) { .pdp { grid-template-columns: 1fr; gap: 10px; } .ico.cart-btn { padding: 0 9px 0 7px; } }
@media (prefers-reduced-motion: reduce) { .ico.cart-btn.pulse { animation: none; } }
/* phones and small tablets: every product card (plain, linked, shop; with or without a photo) becomes a compact row,
   the thumbnail beside a text column with the name, price and a two-line description. One or two products, or a
   wider stage, get full rows (a lone product spans the whole width); three or more on a phone share two columns,
   and in a card that narrow the description runs the card's full width under the name. This is the only phone
   rule set for products and it sits after every base product rule, so nothing later re-shows or re-places a piece. */
@media (max-width: 900px) {
  .prods { grid-template-columns: repeat(auto-fit, minmax(min(100%, 232px), 1fr)); gap: 6px; }
  .prod { container: prod / inline-size; padding: 7px !important; }
  .prod, .prod.shop .prod-hit { grid-template-columns: auto minmax(0, 1fr); align-items: center; align-content: center; gap: 1px 10px; }
  .prod-ph { grid-column: 1; grid-row: 1 / span 3; width: 44px; height: 44px; aspect-ratio: auto; margin: 0; border-radius: 8px; }
  .prod :is(b, .price, .prod-s) { grid-column: 2; padding: 0; }
  .prod.no-ph, .prod.no-ph .prod-hit { grid-template-columns: minmax(0, 1fr); }
  .prod.no-ph :is(b, .price, .prod-s) { grid-column: 1; }
  .prod b, .prod .price { font-size: 12.5px; }
  .prod-s { font-size: 11px; }
  /* shop cards: Add to cart sits beside the product row, and drops under it only when the card is too narrow */
  .prod.shop { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
  .prod.shop .prod-hit { flex: 1 1 170px; min-width: 0; }
  .prod.shop .prod-add { flex: 0 0 auto; margin: 0 0 0 auto; padding: 6px 12px; font-size: 11.5px; }
}
@media (max-width: 560px) { .prods:has(> :nth-child(3)) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 144px), 1fr)); } }
@container prod (max-width: 210px) {
  .prod-ph { grid-row: 1 / span 2; width: 36px; height: 36px; }
  .prod .prod-s { grid-column: 1 / -1; margin-top: 4px; }
  .prod.shop .prod-add { flex: 1 1 100%; margin: 0; }
}
}

/* ---------- live content: rich text from the pipeline (markdown-lite) ---------- */
.rich { display: grid; gap: 8px; }
.rich p { margin: 0; }
.rich strong { color: var(--ink); font-weight: 650; }
.rich em { font-style: italic; }
.rich a { color: var(--primary-light); text-decoration: underline; text-underline-offset: 3px; }
.rich .lst { margin: 0; padding-left: 1.1em; display: grid; gap: 4px; }
.rich ol.lst { list-style: decimal; }
.rich .rich-h { font: 600 1.02em/1.3 var(--display); color: var(--ink); }
.nug-sub { margin: -2px 0 10px; color: var(--muted); font-size: .95em; line-height: 1.5; max-width: 62ch; }
a.act { display: inline-flex; align-items: center; text-decoration: none; }

/* team photos: balanced rows (5 → 3 + 2), a short last row sits centred */
.people.photos { display: flex; flex-wrap: wrap; justify-content: center; }
.people.photos > .person.ph { flex: 0 1 calc((100% - (var(--pc, 4) - 1) * 10px) / var(--pc, 4)); min-width: 0; }
/* A portrait has a fixed largest size, never a share of the stage. A share grows with the width at every zoom, so on a
   wide screen fitRender could only shrink the text around it (5 people on 1900px: 0.3 zoom, 4px names). With a cap the
   whole card scales with zoom, and a wide stage fits the team on one row. */
.people.photos > .person.ph { max-width: 220px; }
@media (max-width: 900px) { .people.photos > .person.ph { flex-basis: calc((100% - (var(--pm, 4) - 1) * 6px) / var(--pm, 4)); } }

/* live intent race: lanes scan while the pipeline ranks */
.ia-row.pend > span { height: 9px; width: 70%; border-radius: 5px; background: rgb(var(--hi) / .08); }
.ia-row.pend b { transform: scaleX(.32); opacity: .5; animation: iaScan 1.25s cubic-bezier(.65,0,.35,1) infinite alternate; }
.ia-row.pend:nth-child(2) b { animation-delay: -.3s; } .ia-row.pend:nth-child(3) b { animation-delay: -.6s; } .ia-row.pend:nth-child(4) b { animation-delay: -.9s; }
@keyframes iaScan { from { transform: translateX(-34%) scaleX(.32); } to { transform: translateX(240%) scaleX(.32); } }
@media (prefers-reduced-motion: reduce) { .ia-row.pend b { animation: none; } }

/* "View as data" in the answer status line, and its drawer */
.status .kdata { pointer-events: auto; margin-left: 2px; background: none; border: 0; padding: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--primary-light); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgb(var(--p) / .45); cursor: pointer; }
.status .kdata:hover { color: var(--ink); }
.data-drawer { width: min(520px, calc(100vw - 36px)); max-height: 72vh; }
.data-drawer .data-lead { margin: 0 4px 10px; font-size: 12.5px; color: var(--muted); }
.data-drawer .machine { max-height: 56vh; }
html.is-live .app.leaving { transition: opacity .6s, filter .6s; opacity: .4; filter: blur(4px); }

/* Powered by Vysto (live sites): a quiet glass pill under the composer — present on every screen, never loud */
html.is-live .dock { bottom: calc(38px + var(--safe-b)); }
html.is-live .powered { bottom: calc(9px + var(--safe-b)); gap: 7px; padding: 4px 11px 4px 7px; border-radius: 99px; font: 500 10px/1 var(--mono); letter-spacing: .14em; color: var(--muted);
  background: rgb(var(--hi) / .045); border: 1px solid rgb(var(--hi) / .1); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: opacity .8s .6s, color .3s, border-color .3s, box-shadow .3s, transform .3s var(--ease-x); }
html.is-live .powered img { width: 15px; height: 13px; filter: drop-shadow(0 0 6px rgb(var(--p) / .55)); }
/* the word stays in the theme's ink so it reads on any brand colour (a near-black brand primary vanished on dark themes) */
html.is-live .powered b { font-weight: 700; letter-spacing: .12em; color: var(--ink); }
html.is-live body:has(.app:not([data-state="intro"])) .powered { opacity: 1; }
html.is-live .powered:hover, html.is-live .powered:focus-visible { color: var(--ink); border-color: rgb(var(--p) / .45); box-shadow: 0 0 22px rgb(var(--p) / .28); transform: translateY(-1px); }
@media (max-width: 900px) {
  html.is-live .dock { bottom: calc(34px + var(--safe-b)); }
  html.is-live .powered { display: flex; right: 50%; transform: translateX(50%); bottom: calc(7px + var(--safe-b)); font-size: 9px; padding: 3px 9px 3px 6px; }
  html.is-live .powered:hover { transform: translateX(50%) translateY(-1px); }
}
@media (prefers-reduced-motion: reduce) { html.is-live .powered { transition: none; } }

/* a client's video: the whole frame, contained like photos are (its box takes the video's shape once known) */
.img-art video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }

/* the live composer is taller (Powered by Vysto pill under it): keep the stage clear of the chips */
html.is-live { --dock-h: 154px; }
@media (max-width: 900px) { html.is-live { --dock-h: 146px; } }

/* compact answers: long lists tighten before text would shrink below reading size; the full answer is in the text beside it */
.render.compact .plan ul > li:nth-child(n+4) { display: none; }
.render.compact .plan ul[data-more]::after { content: attr(data-more); display: block; margin-top: 6px; font-size: .78rem; color: var(--muted); }
.render.compact .plan { padding-top: 14px; padding-bottom: 14px; }
.render.compact .plan .pn:empty, .render.compact .plan .pn { display: none; }
/* card text is never clamped or hidden: long text arrives split at a sentence with a "More" toggle (app.js moreText) */
.more-b { display: inline-block; margin-left: .2em; font: inherit; font-size: .92em; font-weight: 600; color: var(--primary); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.more-b:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 3px; }
div.more-rest { margin-top: 8px; }
div.more-rest + .more-b { margin: 6px 0 0; }
@media (min-width: 901px) { .render.compact .plans { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); } }

/* =====================================================================
   STILL SURFACE + HELP ARTICLES (themes.js `surface`; the Knowledge Base theme,
   or the Knowledge Base add-on over any theme). The same layout: greeting,
   starter prompts, the transcript, the stage where the nuggets land, the chips,
   the header. Nothing moves: no field, grain, orb, opening or shot, no keyframe
   animation; transitions are colour changes of 120ms at most, and none under
   prefers-reduced-motion. Every colour is a theme token.
   ===================================================================== */
:root[data-still] { --kb-t: 120ms; --rail: min(440px, 34vw); }
@media (prefers-reduced-motion: reduce) { :root[data-still] { --kb-t: 0ms; } }
:root[data-still], :root[data-still] *, :root[data-still] *::before, :root[data-still] *::after {
  animation: none !important; transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke !important;
  transition-duration: var(--kb-t) !important; transition-delay: 0s !important; transition-timing-function: ease !important; }
:root[data-still] .stage, :root[data-still] .grain, :root[data-still] .orb, :root[data-still] .cine,
:root[data-still] .intro, :root[data-still] #pause, :root[data-still] #xp, :root[data-still] .hint:empty { display: none !important; }
:root[data-still] .nug::before, :root[data-still] .nug::after { display: none; }
:root[data-still] .chip, :root[data-still] .hello span, :root[data-still] .brand, :root[data-still] .tools { opacity: 1; transform: none; filter: none; }
:root[data-still] .answer .w { opacity: 1; filter: none; }
:root[data-still] .render, :root[data-still] .nugs { transform-style: flat; }
:root[data-still] .status.run::before { box-shadow: none; }
:root[data-still] .presence { justify-content: center; }
:root[data-still] .app[data-state="answer"] .presence { justify-content: flex-start; }
:root[data-still] .app[data-state="answer"] .caption { justify-content: flex-start; }

/* ---------- help-centre tokens ---------- */
:root[data-cards="article"], :root[data-answers="article"] {
  --art-line: color-mix(in srgb, var(--ink) 12%, transparent); --art-line-2: color-mix(in srgb, var(--ink) 22%, transparent);
  --art-card: color-mix(in srgb, var(--card-a) 92%, var(--dark)); --art-soft: color-mix(in srgb, var(--ink) 5%, transparent);
  --art-tint: color-mix(in srgb, var(--primary) 9%, transparent); --art-tint-2: color-mix(in srgb, var(--primary) 16%, transparent);
  --art-link: var(--primary-light); --art-r: min(var(--radius), 14px); --art-warn: #f5b454; --art-warn-bg: color-mix(in srgb, #f59e0b 14%, transparent);
}
:root.is-light[data-cards="article"], :root.is-light[data-answers="article"] { --art-link: var(--c-accent, var(--primary)); --art-card: color-mix(in srgb, #fff 88%, var(--dark)); --art-warn: #9a5b00; }
:root[data-cards="article"] .kb-sr, :root[data-answers="article"] .kb-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- home: the greeting, then browsable topics (the add-on) ---------- */
.topics { display: none; width: 100%; margin-top: 4px; }
.app[data-state="home"] .topics { display: block; }
.topics-h { margin: 0 0 10px; font: 600 11.5px/1.2 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.topics-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.topic { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 12px; border: 1px solid var(--art-line); border-radius: var(--art-r); background: var(--art-card); color: var(--text-2); font-size: 14px; font-weight: 500; }
.topic svg { width: 16px; height: 16px; fill: none; stroke: var(--art-link); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.topic em { font-style: normal; font-size: 12px; color: var(--muted); padding-left: 2px; }
.topic:hover { border-color: var(--art-link); color: var(--ink); background: var(--art-tint); }
:root[data-still] .presence { gap: 26px; }
/* a help centre's greeting reads as a heading, not a poster */
:root[data-cards="article"] .hello { font-size: clamp(1.45rem, 2.5vw, 2.1rem); line-height: 1.2; max-width: 30ch; margin-inline: auto; }
:root[data-cards="article"] .hello .hello-sub { font-size: clamp(.95rem, 1.2vw, 1.05rem); }

/* ---------- the chip area: popular questions, then related articles ---------- */
:root[data-cards="article"] .chips { align-items: center; gap: 6px 8px; }
.chips-h { flex-basis: 100%; margin: 0; text-align: center; font: 600 11px/1.2 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.app[data-state="answer"] ~ .dock .chips-h { text-align: left; }
:root[data-cards="article"] .app[data-state="answer"] ~ .dock .chips { justify-content: flex-start; }
.chip.chip-art { display: inline-flex; align-items: center; gap: 7px; border-radius: var(--art-r); padding: 7px 12px; font-size: 13.5px; background: var(--art-card); border-color: var(--art-line); color: var(--ink); backdrop-filter: none; -webkit-backdrop-filter: none; text-align: left; }
.chip.chip-art svg { width: 15px; height: 15px; flex: none; fill: none; stroke: var(--art-link); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.chip.chip-art:hover { border-color: var(--art-link); background: var(--art-tint); color: var(--ink); }
.chip.chip-art span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 34ch; }

/* ---------- the transcript: the question, then the answer as an article ---------- */
:root[data-answers="article"] .app[data-state="answer"] .you { display: block; align-self: flex-end; max-width: 92%; margin: 0 0 12px; padding: 9px 14px; border-radius: 14px 14px 4px 14px; background: var(--art-tint-2); color: var(--ink); font-size: 14.5px; line-height: 1.45; }
:root[data-answers="article"] .you::before { content: none; }
:root[data-still] .greet .w { opacity: 1; filter: none; }
.greet + .topics { margin-top: 18px; }
:root[data-answers="article"] .greet-a { background: var(--art-card); border-color: var(--art-line); backdrop-filter: none; -webkit-backdrop-filter: none; font-size: 15px; }
:root[data-answers="article"] .greet-you { background: var(--art-tint-2); border-color: transparent; font-size: 14.5px; }
:root[data-answers="article"] .log button { font-size: 13px; }
.answer.kb-prose { flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 16px; border: 1px solid var(--art-line); border-radius: 4px 14px 14px 14px; background: var(--art-card); font-size: 15.5px; line-height: 1.62; scrollbar-width: thin; }
.app[data-state="home"] .answer.kb-prose, .answer.kb-prose:empty { display: none; }

/* prose: the answer and the full articles */
.kb-prose { color: var(--ink); overflow-wrap: break-word; text-wrap: pretty; }
.kb-prose > :first-child { margin-top: 0; }
.kb-prose > :last-child { margin-bottom: 0; }
.kb-prose p { margin: 0 0 .8em; color: var(--ink); font-size: inherit; line-height: inherit; }
.kb-prose strong { font-weight: 650; }
.kb-prose a { color: var(--art-link); text-underline-offset: .18em; }
.kb-h, .kb-sub { font-family: var(--display); font-weight: 650; letter-spacing: -.01em; line-height: 1.3; margin: 1.2em 0 .45em; color: var(--ink); }
h3.kb-h { font-size: 1.14em; } h4.kb-h, .kb-sub { font-size: 1.03em; } h5.kb-h { font-size: 1em; }
.kb-list { margin: 0 0 .9em; padding-left: 1.25em; }
.kb-list > li { margin: .3em 0; padding-left: .15em; }
.kb-list > li::marker { color: var(--muted); }
.kb-steps { list-style: none; counter-reset: kb-step; margin: .3em 0 1em; padding: 0; }
.kb-steps > li { counter-increment: kb-step; position: relative; margin: 0; padding: .5em 0 .5em 2.4em; line-height: 1.55; }
.kb-steps > li + li { border-top: 1px solid var(--art-line); }
.kb-steps > li::before { content: counter(kb-step); position: absolute; left: 0; top: .48em; display: grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 50%; background: var(--art-tint-2); color: var(--art-link); font-size: .84em; font-weight: 700; font-variant-numeric: tabular-nums; }
.kb-steps .kb-list, .kb-steps .kb-steps { margin: .35em 0 0; }
.kb-steps .kb-steps > li::before { background: none; border: 1.5px solid var(--art-line-2); color: var(--muted); }
.kb-prose code { font-family: var(--mono); font-size: .86em; padding: .1em .36em; border-radius: 5px; background: var(--art-soft); border: 1px solid var(--art-line); overflow-wrap: anywhere; }
.kb-code { margin: 0 0 1em; padding: 12px 14px; border-radius: 8px; background: color-mix(in srgb, var(--ink) 90%, var(--dark)); color: var(--dark); font-family: var(--mono); font-size: 13px; line-height: 1.55; overflow-x: auto; max-width: 100%; }
.kb-code code { padding: 0; border: 0; background: none; color: inherit; font-size: inherit; overflow-wrap: normal; white-space: pre; }
.kb-prose blockquote { margin: 0 0 1em; padding: .2em 0 .2em 1em; border-left: 3px solid var(--art-line-2); color: var(--text-2); }
.kb-prose hr { border: 0; border-top: 1px solid var(--art-line); margin: 1.2em 0; }
.kb-table { max-width: 100%; overflow-x: auto; margin: 0 0 1em; border: 1px solid var(--art-line); border-radius: 8px; }
.kb-table table { border-collapse: collapse; width: 100%; font-size: .94em; }
.kb-table th, .kb-table td { padding: 7px 11px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--art-line); }
.kb-table th { background: var(--art-soft); font-weight: 650; }
.kb-table tr:last-child td { border-bottom: 0; }
/* menu paths: Admin › Features › Time & Billing */
.kb-path { display: inline; }
.kb-path kbd { font-family: var(--font); font-size: .84em; font-weight: 600; line-height: 1; padding: .22em .5em .18em; border: 1px solid var(--art-line-2); box-shadow: inset 0 -1px 0 var(--art-line-2); border-radius: 5px; background: var(--art-card); color: var(--ink); white-space: nowrap; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.kb-sep { color: var(--muted); margin: 0 .22em; font-weight: 600; }
/* "See *Edit or delete a time entry*": asks for that article */
.kb-xref { display: inline; padding: 0; margin: 0; border: 0; background: none; font: inherit; font-style: italic; color: var(--art-link); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; text-align: left; cursor: pointer; }
.kb-xref:hover { text-decoration-thickness: 2px; }
/* callouts: who can do this, notes, warnings */
.kb-callout { display: flex; gap: 9px; align-items: flex-start; margin: 0 0 1em; padding: 9px 12px; border-radius: 8px; background: var(--art-soft); border: 1px solid var(--art-line); font-size: .95em; line-height: 1.55; }
.kb-callout > svg, .art svg, .art-row svg { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kb-callout > svg { margin-top: .14em; color: var(--muted); }
.kb-callout-who { background: var(--art-tint); border-color: color-mix(in srgb, var(--primary) 24%, transparent); }
.kb-callout-who > svg { color: var(--art-link); }
.kb-callout-warn { background: var(--art-warn-bg); border-color: color-mix(in srgb, #f59e0b 35%, transparent); }
.kb-callout-warn > svg { color: var(--art-warn); }

/* ---------- article cards: the nuggets, in their usual place on the stage ---------- */
:root[data-cards="article"] .nugs[data-layout="articles"] { grid-template-columns: minmax(0, 1fr); gap: 12px; max-width: 860px; }
:root[data-cards="article"] .nug { background: var(--art-card); border: 1px solid var(--art-line); border-radius: var(--art-r); box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 7%, transparent); backdrop-filter: none; -webkit-backdrop-filter: none; }
.nug.t-article, .nug.t-article-list { padding: 20px 22px 16px; }
.art { display: block; }
.art-k { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin: 0 0 8px; color: var(--art-link); font: 650 11.5px/1.3 var(--font); letter-spacing: .07em; text-transform: uppercase; }
.art-k svg { width: 16px; height: 16px; }
.art-k em { font-style: normal; font-weight: 500; letter-spacing: 0; text-transform: none; font-size: 13px; color: var(--muted); }
.art-k em::before { content: "·"; margin-right: 8px; color: var(--muted); }
.nug h3.art-t { margin: 0 0 8px; font-family: var(--display); font-weight: 650; font-size: 1.22rem; line-height: 1.3; letter-spacing: -.012em; color: var(--ink); overflow-wrap: break-word; }
.art-who { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 8px !important; padding: 8px 11px; border-radius: 8px; background: var(--art-tint); color: var(--text-2) !important; font-size: 14px !important; line-height: 1.5 !important; }
.art-who svg { width: 16px; height: 16px; margin-top: .14em; color: var(--art-link); }
.art-who b { font-weight: 600; color: var(--ink); }
.nug p.art-sum { margin: 0 0 10px; color: var(--text-2); font-size: 15px; line-height: 1.6; }
.art-steps { margin: 4px 0 6px; font-size: 14.5px; color: var(--ink); }
.art-more-steps { margin: 0 0 4px !important; color: var(--muted) !important; font-size: 13.5px !important; }
.art-body { margin-top: 2px; font-size: 15.5px; line-height: 1.65; }
.art-body[hidden] { display: none; }
.art-media { display: block; width: 100%; max-height: 380px; object-fit: contain; border-radius: 8px; border: 1px solid var(--art-line); background: var(--art-soft); margin: 0 0 1em; }
.art-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin: 0 0 1em; }
.art-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; border-radius: 6px; border: 1px solid var(--art-line); }
.art-contact { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 7px; }
.art-contact li { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 15px; color: var(--ink); }
.art-contact li svg { color: var(--art-link); }
.art-contact-k { color: var(--muted); min-width: 52px; }
.art-contact a { color: var(--art-link); overflow-wrap: anywhere; }
.art-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--art-line); }
.art-more { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 14px; border: 1px solid color-mix(in srgb, var(--primary) 45%, transparent); border-radius: 8px; background: var(--art-tint); color: var(--art-link); font-weight: 600; font-size: 14px; }
.art-more svg { width: 16px; height: 16px; }
.art-more:hover { background: var(--art-tint-2); border-color: var(--primary); }
.art-btn { display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px; border: 1px solid var(--art-line-2); border-radius: 8px; background: none; color: var(--ink); font-weight: 500; font-size: 14px; text-decoration: none; }
.art-btn:hover { background: var(--art-soft); border-color: var(--muted); }
/* a topic's article list */
.art-rows { list-style: none; margin: 4px 0 0; padding: 0; border: 1px solid var(--art-line); border-radius: 10px; overflow: hidden; }
.art-rows > li + li { border-top: 1px solid var(--art-line); }
.art-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 50px; padding: 10px 14px; border: 0; background: none; text-align: left; color: var(--ink); font-size: 15px; font-weight: 500; }
.art-row span { flex: 1; min-width: 0; }
.art-row svg:first-child { color: var(--art-link); }
.art-row svg:last-child { color: var(--muted); }
.art-row:hover { background: var(--art-soft); }
/* stage cards that aren't articles (a form, shop products) keep their own look, calmer */
:root[data-cards="article"] .nug .act { border-radius: 8px; }

/* ---------- phones: one calm column that scrolls (question, answer, articles), the composer below ---------- */
@media (max-width: 900px) {
  :root[data-still] .app[data-state="answer"] { overflow-y: auto; overscroll-behavior: contain; pointer-events: auto; bottom: var(--dock-real, 0px); padding: calc(var(--top-h) + var(--safe-t)) 16px calc(var(--dock-h) + 190px + var(--safe-b)); }
  /* the dock measured: the column ends above it, so no line of the answer or a card ever sits under the chips */
  :root[data-still][style*="--dock-real"] .app[data-state="answer"] { padding-bottom: 22px; }
  :root[data-still] .app[data-state="answer"] .presence { position: static; height: auto; width: auto; transform: none; padding: 0; }
  :root[data-still] .app[data-state="answer"] .caption { display: block; }
  :root[data-still] .app[data-state="answer"] .answer { font-size: 15px; -webkit-mask-image: none; mask-image: none; overflow: visible; max-height: none; padding-bottom: 14px; }
  :root[data-still] .app[data-state="answer"] .content { position: static; margin-top: 14px; opacity: 1; transform: none; }
  :root[data-still] .app[data-state="answer"] .content-body { overflow: visible; }
  :root[data-still] .app[data-state="answer"] .status { display: flex; }
  :root[data-still] .top { background: var(--dark); padding-bottom: 10px; border-bottom: 1px solid var(--art-line, transparent); }
  :root[data-still] .app[data-state="answer"] ~ .dock, :root[data-still] .app[data-state="home"] ~ .dock { left: 0; width: 100vw; padding-left: 14px; padding-right: 14px; }
  /* the chip area: its label above, the popular questions as a short list, related articles as wrapping links */
  :root[data-cards="article"] .chips { flex-wrap: wrap; overflow: visible; -webkit-mask-image: none; mask-image: none; padding: 0; }
  :root[data-cards="article"] .app[data-state="home"] ~ .dock .chips { flex-direction: column; align-items: stretch; }
  :root[data-cards="article"] .app[data-state="home"] ~ .dock .chips-h { text-align: left; }
  .chip.chip-art { white-space: normal; }
  .chip.chip-art span { max-width: none; white-space: normal; overflow: visible; }
  :root[data-cards="article"] .app[data-state="answer"] ~ .dock .chip.chip-art span { max-width: 30ch; white-space: nowrap; overflow: hidden; }
  :root[data-cards="article"] .app[data-state="answer"] ~ .dock .chip-art:nth-of-type(n+3) { display: none; }
  /* the composer sits on the page colour, so nothing reads through under it */
  html.is-live[data-still] .dock { bottom: 0; padding: 12px 0 calc(40px + var(--safe-b)); background: var(--dark); border-top: 1px solid var(--art-line, transparent); }
  :root[data-still] .app[data-state="home"] .presence { bottom: calc(var(--dock-h) + 200px + var(--safe-b)); }
  .nug.t-article, .nug.t-article-list { padding: 16px 16px 14px; }
  .topics-row { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .topics-row::-webkit-scrollbar { display: none; }
  .topic { flex: none; }
  :root[data-still] .presence { width: calc(100vw - 32px); }
}
@media print {
  :root[data-cards="article"] .art-body[hidden] { display: block !important; }
}

/* =====================================================================
   STILL SURFACE: the stage stops where the dock begins (app.js measures it: --dock-real),
   so the chips (a heading, related articles on two rows) never sit over a card.
   ===================================================================== */
:root[data-still] .content { bottom: var(--dock-real, calc(var(--dock-h) + var(--safe-b))); }
/* an article answer longer than its bubble scrolls inside it, with a visible scrollbar and a cue below it (never a fade) */
.answer.kb-prose { scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: var(--art-line-2) transparent; -webkit-mask-image: none; mask-image: none; }
.answer.kb-prose::-webkit-scrollbar { width: 8px; }
.answer.kb-prose::-webkit-scrollbar-thumb { background: var(--art-line-2); border-radius: 8px; }
.answer.kb-prose:focus-visible { outline: 2px solid var(--art-link); outline-offset: 2px; }
.answer-more { flex: none; align-self: center; display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; min-height: 32px; padding: 0 13px; border: 1px solid var(--art-line-2); border-radius: 999px; background: var(--art-card); color: var(--art-link); font: 600 13px/1 var(--font); cursor: pointer; }
.answer-more svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.answer-more:hover { background: var(--art-tint); border-color: var(--art-link); }
.answer-more[hidden], .app:not([data-state="answer"]) .answer-more { display: none; }
@media (max-width: 900px) { .answer-more { display: none !important; } }

/* =====================================================================
   THE FLOATING COMPOSITION (surface motion 'cards': the Knowledge Base)
   The bubble keeps its column; the answer's cards are placed around it by
   float.js (never overlapping: absolute slots it measures), float in, settle,
   and the smaller ones drift a few pixels. No canvas, SVG, field or orb.
   Phones: one calm column, in the page flow.
   ===================================================================== */
:root[data-motion="cards"] { --rail: min(410px, 31vw); }
:root[data-still] .nugs[data-layout][data-float] { display: block; position: relative; max-width: none; transform-style: flat; }
.nugs[data-float] > .fl { position: absolute; left: 0; top: 0; box-sizing: border-box; }
.nugs[data-float] > .fl[hidden] { display: none; }
.nugs[data-float="stack"] > .fl { position: static; width: auto; }
.nugs[data-float="stack"] > .fl + .fl { margin-top: 12px; }
.fl > .nug { margin: 0; }
:root[data-cards="article"] .fl[data-role="primary"] > .nug { box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 6%, transparent), 0 22px 48px -30px color-mix(in srgb, var(--ink) 34%, transparent); }
:root[data-cards="article"] .fl:not([data-role="primary"]) > .nug { box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 6%, transparent), 0 14px 32px -22px color-mix(in srgb, var(--ink) 30%, transparent); }
/* another article of the answer, beside the current topic */
.nug.t-article.fl-mini { padding: 14px 16px 12px; }
.fl-mini .art-k { margin-bottom: 6px; font-size: 10.5px; }
.nug.fl-mini h3.art-t { font-size: 1.02rem; margin-bottom: 6px; }
.nug.fl-mini p.art-sum { font-size: 13.5px; line-height: 1.5; margin-bottom: 4px; }
.fl-mini .art-foot { margin-top: 8px; padding-top: 8px; }
.fl-mini .art-more { min-height: 32px; padding: 0 11px; font-size: 13px; }
/* a related article, floating beside the card (instead of a chip below, when there's room) */
.nug.fl-rel { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; width: 100%; padding: 13px 15px 12px; text-align: left; font: inherit; color: var(--ink); cursor: pointer; }
.fl-rel .art-k { margin: 0; font-size: 10.5px; }
.fl-rel svg, .fl-mini svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fl-rel b { font-weight: 600; font-size: 14.5px; line-height: 1.35; color: var(--ink); overflow-wrap: break-word; }
.fl-go { display: inline-flex; align-items: center; gap: 3px; font-size: 13px; font-weight: 600; color: var(--art-link); }
.fl-go svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
:root[data-cards="article"] .nug.fl-rel:hover { border-color: var(--art-link); background: color-mix(in srgb, var(--art-card) 90%, var(--primary)); }
.nug.fl-rel:focus-visible, .fl-mini .art-more:focus-visible { outline: 2px solid var(--art-link); outline-offset: 2px; }
/* the related articles are on the stage: the chip row under it has nothing left to say */
:root[data-related="stage"] .app[data-state="answer"] ~ .dock .chips { display: none; }

/* =====================================================================
   STAGE IMAGES: the whole picture, every theme, desktop and phone.
   app.js frames each picture once it loads: the frame gets the picture's
   own aspect ratio (--ar, capped in height) and the picture is contained in
   it. Where a frame keeps one shape (a tile in a row, the height cap), the
   gap is a soft blurred copy of the same picture (--img), never a blank
   band. `cover` only when the frame already matches within 5% (data-fit).
   Image cards are as tall as their picture and caption: never stretched.
   ===================================================================== */
.nug img, .nug video { object-fit: contain; }
.nug img[data-fit="cover"], .nug video[data-fit="cover"] { object-fit: cover; }
.framed { position: relative; isolation: isolate; overflow: hidden; }
.framed::before { content: ""; position: absolute; inset: -16px; z-index: 0; background: var(--img, none) center / cover no-repeat; filter: blur(18px) saturate(1.08); opacity: .5; pointer-events: none; }
.framed > img, .framed > video { z-index: 1; }
.pdp-ph.framed > img, .prod-ph.framed > img, .prof-ph.framed > img, .gal-i.framed > img, .rc-ph.framed > img { position: relative; }
.gal-i.framed > span, .rc-ph.framed > em { z-index: 2; }
/* frames that follow the picture */
.nugs[data-layout] .nug .img-art.framed, .img-art.framed { aspect-ratio: var(--ar); flex: none; }
.nugs .img-art.framed { max-height: var(--mh, min(64vh, 620px)); }
.img-art.framed { max-height: min(64vh, 620px); }
.pdp-ph.framed, .prof-ph.framed { aspect-ratio: var(--ar); max-height: min(60vh, 560px); }
/* tiles that keep one shape in their row: the picture contained, on the theme surface */
.pdp-ph img, .prod-ph img, .prof-ph img, .gal-i img, .rc-ph img, .person.ph img, .ts img, .cart-lines img, .art-gallery img { object-fit: contain; object-position: 50% 50%; }
.person.ph img, .ts img { background: var(--surface); }
.art-gallery img { background: var(--art-soft, var(--surface)); }
/* image cards: their own height (picture + caption), top-aligned, never a neighbour's */
.nugs > .nug.media:has(.img-art > img, .img-art > video) { align-self: start; }
.nug.media:has(.img-art > img, .img-art > video) > .img { flex: none; }
.nug.media:has(.img-art > img, .img-art > video) .img-art { flex: none; }
/* a portrait beside its text: the picture's column narrows to its shape, the text gets the room */
@media (min-width: 901px) { .nugs[data-layout="feature"]:has(> .nug.media:first-child .img-art.framed[data-shape="portrait"]) { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); } }
/* a help article's own picture: its natural shape, never letterboxed or cropped */
.art-media { width: auto; max-width: 100%; height: auto; max-height: 380px; margin-inline: auto; object-fit: contain; }

/* =====================================================================
   THE KNOWLEDGE BASE AS VYSTO'S CONVERSATION (data-kbh: article cards on a still surface)
   The home is Vysto's: a bubble at the centre (the tenant's mark, CSS only, no SVG
   or canvas), a short headline, the welcome as the sub line, the greeting under it,
   the topics floating around it as small cards (float.js orbit; a row on phones),
   the starter prompts as the usual chip row over the composer. The answer is
   Vysto's too: "You · question", the answer in the column, the bubble docked small
   under it, the source article on the stage. Motion: transform and opacity only,
   150–450ms; the only thing that keeps going is the bubble's idle breathing (and
   the topics' idle drift), paused in a hidden tab; nothing under reduced motion.
   ===================================================================== */
/* ---------- the bubble ---------- */
.kb-orb { display: none; position: relative; flex: none; width: clamp(104px, 10.5vw, 146px); aspect-ratio: 1; align-self: center; }
:root[data-kbh] .app[data-state="home"] .kb-orb, :root[data-kbh] .app[data-state="answer"] .kb-orb { display: block; }
.kb-orb > span { position: absolute; border-radius: 50%; pointer-events: none; }
.kb-orb-face { inset: 0; z-index: 2; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 50% 34%, color-mix(in srgb, var(--art-card) 80%, #fff), var(--art-card) 58%, color-mix(in srgb, var(--primary) 9%, var(--art-card)));
  border: 1px solid color-mix(in srgb, var(--primary) 24%, transparent);
  box-shadow: 0 1px 0 rgb(255 255 255 / .55) inset, 0 20px 46px -22px color-mix(in srgb, var(--primary) 60%, transparent), 0 2px 8px -4px color-mix(in srgb, var(--ink) 18%, transparent); }
.kb-orb-face img { width: 50%; height: 50%; object-fit: contain; display: block; }
.kb-orb-face img:not([src]) { display: none; }
.kb-orb-glow { inset: -18%; z-index: 0; background: radial-gradient(circle, color-mix(in srgb, var(--primary) 24%, transparent) 0%, color-mix(in srgb, var(--primary) 8%, transparent) 45%, transparent 70%); opacity: .6; }
.kb-orb-ring { inset: -7%; z-index: 1; border: 2px solid color-mix(in srgb, var(--primary) 50%, transparent); opacity: 0; transform: scale(calc(1 + var(--lvl, 0) * .18)); }
.kb-orb-dots { inset: -12%; z-index: 3; opacity: 0; }
.kb-orb-dots i { position: absolute; width: 7px; height: 7px; margin: -3.5px; border-radius: 50%; background: var(--primary); }
.kb-orb-dots i:nth-child(1) { left: 50%; top: 0; }
.kb-orb-dots i:nth-child(2) { left: 100%; top: 50%; opacity: .7; transform: scale(.8); }
.kb-orb-dots i:nth-child(3) { left: 50%; top: 100%; opacity: .5; transform: scale(.65); }
.kb-orb-dots i:nth-child(4) { left: 0; top: 50%; opacity: .32; transform: scale(.5); }
.kb-orb.is-listening .kb-orb-ring { opacity: 1; }
.kb-orb.is-thinking .kb-orb-dots { opacity: 1; }
.kb-orb.is-speaking .kb-orb-glow { opacity: .95; }
@keyframes kbBreath { 0%, 100% { opacity: .45; transform: scale(.96); } 50% { opacity: .78; transform: scale(1.04); } }
@keyframes kbSpeak { 0%, 100% { opacity: .7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.1); } }
@keyframes kbRing { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.22); } }
@keyframes kbOrbit { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: no-preference) {
  :root[data-kbh] .kb-orb-glow { animation: kbBreath 5.6s ease-in-out infinite !important; }
  :root[data-kbh] .kb-orb.is-speaking .kb-orb-glow { animation: kbSpeak 1.1s ease-in-out infinite !important; }
  :root[data-kbh] .kb-orb.is-thinking .kb-orb-dots { animation: kbOrbit 1.6s linear infinite !important; }
  :root[data-kbh] .kb-orb.is-listening .kb-orb-ring::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--primary) 40%, transparent); animation: kbRing 1.4s ease-out infinite !important; }
  :root[data-kbh] .kb-orb-ring, :root[data-kbh] .kb-orb > span { transition-property: transform, opacity !important; transition-duration: 160ms !important; }
  :root.tab-hidden[data-kbh] .kb-orb *, :root.tab-hidden[data-kbh] .kb-orb *::after { animation-play-state: paused !important; }
}

/* ---------- the home: the bubble, a short headline, the welcome under it ---------- */
:root[data-kbh] .app[data-state="home"] .presence { top: calc(var(--top-h) + var(--safe-t)); bottom: var(--dock-real, calc(var(--dock-h) + var(--safe-b))); width: min(600px, 92vw); justify-content: center; gap: 22px; padding: 0 0 2vh; }
:root[data-kbh] .hello { max-width: 36rem; font-size: inherit; line-height: 1; }
:root[data-kbh] .hello .hello-h { display: block; font: 700 clamp(2rem, 3.3vw, 2.85rem)/1.08 var(--display); letter-spacing: -.022em; color: var(--ink); text-wrap: balance; opacity: 1; }
:root[data-kbh] .hello .hello-sub { display: block; margin: 12px auto 0; max-width: 34rem; font-size: clamp(1.02rem, 1.25vw, 1.15rem); line-height: 1.5; color: var(--text-2); text-wrap: balance; opacity: 1; }
:root[data-kbh] .greet { margin-top: 16px; }
:root[data-kbh] .app[data-state="home"] ~ .dock .chips { justify-content: center; }
.app:not([data-state="home"]) .kb-orbit:not(.searching) { display: none; }

/* ---------- the topics, floating around the bubble ---------- */
.kb-orbit { display: none; }
.app > .kb-orbit { pointer-events: none; }
:root[data-kbh] .app[data-state="home"] > .kb-orbit[data-place="orbit"], :root[data-kbh] .app > .kb-orbit.searching[data-place="orbit"] { display: block; position: absolute; z-index: 2;
  left: var(--side); right: var(--side); top: calc(var(--top-h) + var(--safe-t)); bottom: var(--dock-real, calc(var(--dock-h) + var(--safe-b))); }
:root[data-kbh] .kb-orbit[data-place="orbit"] > .render, :root[data-kbh] .kb-orbit[data-place="orbit"] .nugs[data-layout][data-float] { position: absolute; inset: 0; height: auto !important; max-width: none; }
.kb-orbit .fl { pointer-events: auto; }
.nug.kb-topic { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; padding: 12px 14px 13px; text-align: left; font: inherit; color: var(--ink); cursor: pointer; }
.kb-topic .art-k { margin: 0; font-size: 10.5px; }
.kb-topic .art-k em::before { content: none; }
.kb-topic .art-k em { margin-left: 2px; font-size: 12px; }
.kb-topic svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; width: 15px; height: 15px; }
.kb-topic b { font-size: 15px; font-weight: 650; line-height: 1.3; color: var(--ink); }
.kb-topic-ex { display: flex; flex-direction: column; gap: 2px; margin-top: 1px; font-size: 12.5px; line-height: 1.38; color: var(--muted); }
:root[data-cards="article"] .nug.kb-topic:hover, .nug.kb-topic:focus-visible { border-color: var(--art-link); }
.nug.kb-topic:focus-visible { outline: 2px solid var(--art-link); outline-offset: 2px; }
.kb-orbit .fl.kb-away, .kb-orbit.kb-done .fl { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) { :root[data-kbh] .kb-orbit .fl { transition-property: opacity, transform !important; transition-duration: 220ms !important; } }
/* no room around the bubble (phones, a narrow window): the topics in a row under the greeting, scrolling sideways */
:root[data-kbh] .app[data-state="home"] .kb-orbit[data-place="row"] { display: block; width: 100%; margin-top: 14px; text-align: left; }
:root[data-kbh] .kb-orbit[data-place="row"] .nugs[data-layout][data-float] { display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 2px 2px 8px; height: auto !important; }
.kb-orbit[data-place="row"] .nugs[data-float]::-webkit-scrollbar { display: none; }
.kb-orbit[data-place="row"] .nugs[data-float] > .fl { position: static; flex: 0 0 min(68vw, 236px); scroll-snap-align: start; }
.kb-orbit[data-place="row"] .nugs[data-float] > .fl + .fl { margin-top: 0; }
/* a smaller window: a narrower hero column, so the topics still fit around it */
@media (min-width: 901px) and (max-width: 1180px) {
  :root[data-kbh] .app[data-state="home"] .presence { width: min(480px, 92vw); }
  :root[data-kbh] .hello, :root[data-kbh] .hello .hello-sub { max-width: 30rem; }
  :root[data-kbh] .greet { max-width: 30rem; }
}
/* the highlight that sweeps across a card while the knowledge base searches */
.fl-scan { position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; opacity: 0; background: linear-gradient(100deg, transparent 10%, color-mix(in srgb, var(--primary) 18%, transparent) 50%, transparent 90%); }

/* ---------- the answer: Vysto's composition, a help article's content ---------- */
:root[data-kbh] .app[data-state="answer"] .you { align-self: flex-start; max-width: 100%; margin: 0 0 10px; padding: 0; border-radius: 0; background: none; font-size: 13.5px; line-height: 1.45; color: var(--art-link); }
:root[data-kbh] .app[data-state="answer"] .you::before { content: "You · "; color: var(--muted); }
:root[data-kbh] .answer.kb-prose { padding: 0 8px 10px 0; border: 0; border-radius: 0; background: none; font-size: clamp(1rem, 1.15vw, 1.06rem); line-height: 1.62; }
:root[data-kbh] .answer.kb-prose .kb-steps > li { padding: .34em .4em .34em 2.2em; border-radius: 8px; }
:root[data-kbh] .answer.kb-prose .kb-steps > li::before { top: .36em; }
:root[data-kbh] .app[data-state="answer"] .kb-orb { width: 54px; align-self: flex-start; margin-top: auto; }
:root[data-kbh] .app[data-state="answer"] .kb-orb-face { box-shadow: 0 12px 26px -14px color-mix(in srgb, var(--primary) 60%, transparent); }
:root[data-kbh] .app[data-state="answer"] .kb-orb-dots i { width: 5px; height: 5px; margin: -2.5px; }
:root[data-kbh] .nug { border-radius: min(var(--radius), 16px); }
:root[data-kbh] .fl[data-role="primary"] > .nug { box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 6%, transparent), 0 28px 60px -36px color-mix(in srgb, var(--ink) 38%, transparent); }
/* the source article's steps by name: the answer beside it walks through them in full */
.art-outline { list-style: none; margin: 6px 0 6px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px 8px; }
.art-outline > li { display: flex; align-items: center; gap: 9px; min-height: 38px; padding: 6px 11px 6px 7px; border: 1px solid var(--art-line); border-radius: 10px; background: var(--art-soft); font-size: 13.5px; line-height: 1.35; color: var(--ink); }
.art-outline > li b { flex: none; display: grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 50%; background: var(--art-tint-2); color: var(--art-link); font-size: .8em; font-weight: 700; font-variant-numeric: tabular-nums; }
/* the answer cites its source: the matching steps light up on both sides */
.art-outline > li.cite-on, .art-outline > li.cited, .art-steps > li.cite-on, .art-steps > li.cited { border-color: color-mix(in srgb, var(--art-link) 60%, transparent); background: var(--art-tint); }
.answer .kb-steps > li.cite-on { background: var(--art-tint); }
.answer .kb-steps > li[data-cite]:not([data-cite=""]) { cursor: default; }
/* micro-interactions: a press gives a little */
@media (prefers-reduced-motion: no-preference) {
  :root[data-kbh] :is(.chip, .fl-rel, .kb-topic, .art-more, .art-btn, .kdata, .answer-more, .art-row) { transition-property: transform, color, background-color, border-color !important; transition-duration: 150ms !important; }
  :root[data-kbh] :is(.chip, .fl-rel, .kb-topic, .art-more, .art-btn, .kdata, .answer-more, .art-row):active { transform: scale(.97); }
}

/* ---------- phones: one column; the topics in a row under the greeting ---------- */
@media (max-width: 900px) {
  :root[data-kbh] .app[data-state="home"] .presence { left: 16px; width: calc(100vw - 32px); transform: none; overflow-y: auto; overscroll-behavior: contain; justify-content: safe center; gap: 16px; padding: 8px 0 12px; }
  :root[data-kbh] .app[data-state="home"] .kb-orb { width: clamp(78px, 22vw, 96px); }
  :root[data-kbh] .hello .hello-h { font-size: clamp(1.65rem, 7.4vw, 2.1rem); }
  :root[data-kbh] .hello .hello-sub { font-size: 1rem; margin-top: 8px; }
  :root[data-kbh] .app[data-state="home"] ~ .dock .chips { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; }
  :root[data-kbh] .app[data-state="home"] ~ .dock .chip.chip-art { flex: none; }
  :root[data-kbh] .app[data-state="home"] ~ .dock .chip.chip-art span { white-space: nowrap; }
  :root[data-kbh] .app[data-state="answer"] .kb-orb { order: -1; width: 38px; margin: 0 0 8px; }
  :root[data-kbh] .answer.kb-prose { padding-right: 0; }
}