/* The landing's test copy (/home-next): the AI agent first, personalisation on
   the shop's own site, and MCP. Built from the page's own parts (desk, feat,
   steps, mock) and tokens, so the new sections read as the same page. */

/* ---------------------------------------------------------------- shared */
.agentdesk .points, .mcpdesk .points { list-style: none; padding: 0; margin: 0 0 26px; display: grid;
  gap: 10px; font-size: 14.5px; color: var(--ink-mid); }
.agentdesk .points li, .mcpdesk .points li { display: flex; gap: 10px; align-items: baseline; }
.agentdesk .points li::before, .mcpdesk .points li::before { content: ""; flex: none; width: 7px; height: 7px;
  border-radius: 50%; background: var(--accent); transform: translateY(-1px); }
.agentdesk h2 em, .mcpdesk h2 em { font-style: italic; color: var(--accent); }

/* ---------------------------------------------------------------- the agent */
.agentdesk { grid-template-columns: 1fr 1.08fr; }
.agentmock { display: grid; gap: 12px; padding: 16px; }
.am-chat { display: grid; gap: 10px; font-size: 13px; line-height: 1.45; }
.am-chat p { margin: 0; }
.am-chat .you { justify-self: end; max-width: 86%; padding: 9px 13px; border-radius: 14px 14px 5px 14px;
  background: rgba(255, 255, 255, 0.08); color: var(--ink); }
.am-chat .ai { display: flex; gap: 10px; color: var(--ink); }
.am-chat .orb { flex: none; width: 20px; height: 20px; border-radius: 50%; margin-top: 1px;
  background: radial-gradient(circle at 35% 30%, #fff6, transparent 45%),
              conic-gradient(from 200deg, #f0a35e, #e6577c, #8a6cff, #4fb3ff, #f0a35e); }
.am-chat .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.am-chat .chips b { font-weight: 500; font-size: 11.5px; padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--line-strong); color: var(--ink-mid); }
.am-plate { width: 100%; height: auto; display: block; border-radius: 14px;
  background: radial-gradient(70% 70% at 50% 40%, rgba(196, 220, 124, 0.06), transparent 70%), #0e0e10; }
.am-foot { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--ink-dim); }
.am-foot .fil { display: inline-flex; align-items: center; gap: 5px; }
.am-foot .fil i { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.25); }
.am-foot .ok { color: var(--accent); font-weight: 500; }
.am-foot .ok::before { content: "✓ "; }

/* ---------------------------------------------------------------- on your site */
#embed .feat { margin-bottom: 14px; }
.embedvis { padding: clamp(18px, 3vw, 40px); align-content: center; gap: 12px; }
.ev-browser { width: min(520px, 100%); border-radius: 16px; overflow: hidden; background: #f6f5f1;
  color: #161616; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5); }
.ev-bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; background: #e7e5df;
  border-bottom: 1px solid #d8d6cf; }
.ev-bar i { width: 9px; height: 9px; border-radius: 50%; background: #c9c6be; }
.ev-bar span { margin-left: 8px; flex: 1; font-size: 11.5px; color: #6b6a65; background: #f6f5f1;
  border-radius: 7px; padding: 4px 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-page { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 18px; }
.ev-prev { position: relative; display: grid; place-items: center; border-radius: 12px; min-height: 230px;
  background: radial-gradient(70% 60% at 50% 40%, #ffffff, #ebe9e3); }
.ev-prev svg { width: 78%; height: auto; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.18)); }
.ev-prev path, .ev-prev text { transition: fill .2s ease; }
.ev-ok { position: absolute; left: 10px; bottom: 10px; font-size: 10.5px; font-weight: 600; color: #2f7d3a;
  background: #e1f1dc; border-radius: 999px; padding: 3px 8px; }
.ev-ok::before { content: "✓ "; }
.ev-form { display: flex; flex-direction: column; gap: 9px; font-size: 13px; }
.ev-title { font-family: var(--serif); font-weight: 500; font-size: 21px; line-height: 1.1; }
.ev-price { color: #5d5d5a; }
.ev-tabs { display: flex; gap: 4px; padding: 3px; border-radius: 10px; background: #e7e5df; }
.ev-tabs button { flex: 1; border: 0; background: none; padding: 6px 0; border-radius: 8px; cursor: pointer;
  font: 500 12.5px var(--sans); color: #5d5d5a; }
.ev-tabs button.on { background: #fff; color: #161616; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
.ev-field { display: grid; gap: 5px; font-size: 11.5px; color: #6b6a65; }
.ev-field input { font: 500 14px var(--sans); color: #161616; padding: 8px 10px; border-radius: 9px;
  border: 1px solid #d3d1ca; background: #fff; outline: none; }
.ev-field input:focus { border-color: #161616; }
.ev-sw { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0; }
.ev-sw[hidden], .ev-field[hidden] { display: none; }
.ev-sw button { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; cursor: pointer;
  box-shadow: 0 0 0 1px #d3d1ca; padding: 0; }
.ev-sw button.on { box-shadow: 0 0 0 2px #161616; }
.ev-cart { margin-top: auto; text-align: center; padding: 10px; border-radius: 10px; background: #161616;
  color: #fff; font-weight: 600; }
.ev-by { text-align: center; font-size: 10.5px; color: #8a8984; }
.ev-cap { margin: 0; font-size: 12px; color: var(--ink-dim); text-align: center; }
.ev-say { padding: 12px 14px; border-radius: 14px 14px 5px 14px; background: rgba(255, 255, 255, 0.08);
  font-size: 13px; line-height: 1.5; color: var(--ink); }
.ev-locks { display: grid; gap: 8px; font-size: 12.5px; }
.ev-locks div { display: flex; justify-content: space-between; gap: 10px; padding-bottom: 8px;
  border-bottom: 1px solid var(--line); color: var(--ink-mid); }
.ev-locks div:last-child { border-bottom: 0; padding-bottom: 0; }
.ev-locks b { font-weight: 500; font-size: 11px; color: var(--ink-dim); }
.ev-locks b.op { color: var(--accent); }
.ev-code { margin: 0; font: 11.5px/1.6 ui-monospace, "Cascadia Code", Consolas, monospace; color: var(--ink);
  white-space: pre-wrap; word-break: break-all; padding: 12px; border-radius: 10px; background: #0c0c0d;
  border: 1px solid var(--line); }
.ev-code b { color: var(--accent); font-weight: 500; }

/* ---------------------------------------------------------------- MCP */
.mcpdesk { grid-template-columns: 1fr 1.05fr; }
.mcpmock pre { margin: 0; font: 12.5px/1.75 ui-monospace, "Cascadia Code", Consolas, monospace; color: var(--ink);
  white-space: pre; overflow-x: auto; }
.mcpmock .c { color: var(--ink-dim); }
.mcpmock .g { color: var(--accent); }
.mcpmock .p { color: var(--accent); }

@media (max-width: 900px) {
  .agentdesk, .mcpdesk { grid-template-columns: 1fr; }
  .ev-page { grid-template-columns: 1fr; }
  .ev-prev { min-height: 190px; }
}

/* ---------------------------------------------------------------- the agent at work
   (web/agent-demo.js) - the 3D plate fills the card; the conversation sits over
   it at the top, the AI line (orb, field, send) at the bottom, as in the studio. */
.agentmock#agentDemo { position: relative; padding: 0; min-height: 560px; overflow: hidden; display: block;
  background: radial-gradient(80% 70% at 50% 55%, rgba(196, 220, 124, 0.07), transparent 70%), #0c0c0d;
  transition: opacity .5s ease; }
.agentmock#agentDemo.fade { opacity: 0; }
.ad-stage { position: absolute; inset: 0; }
.ad-stage canvas { display: block; width: 100%; height: 100%; }
.ad-chat { position: absolute; inset: 16px 16px 16px; display: flex; flex-direction: column;
  justify-content: space-between; pointer-events: none; }
.ad-log { display: flex; flex-direction: column; gap: 10px; }
.ad-msg { font-size: 13px; line-height: 1.45; animation: ad-in .35s cubic-bezier(0.23, 1, 0.32, 1); }
.ad-msg.you { align-self: flex-end; max-width: 82%; padding: 9px 13px; border-radius: 16px 16px 5px 16px;
  background: rgba(255, 255, 255, 0.10); backdrop-filter: blur(10px); color: var(--ink); }
.ad-msg.ai { display: flex; gap: 10px; align-items: flex-start; max-width: 94%; padding: 10px 12px;
  border-radius: 16px; background: rgba(20, 20, 22, 0.82); backdrop-filter: blur(10px);
  border: 1px solid var(--line); color: var(--ink); }
.ad-msg.ai .ai-orb { flex: none; }
.ad-dots { color: var(--ink-mid); }
.ad-dots::after { content: "…"; display: inline-block; width: 1.2em; animation: ad-dots 1s steps(4) infinite;
  overflow: hidden; vertical-align: bottom; }
@keyframes ad-dots { from { width: 0; } to { width: 1.2em; } }
.ad-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ad-chips b { font-weight: 500; font-size: 11.5px; padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--line-strong); color: var(--ink-dim); opacity: .35; transition: opacity .3s, color .3s, border-color .3s; }
.ad-chips b.on { opacity: 1; color: var(--ink); border-color: rgba(196, 220, 124, 0.45); }
.ad-ask { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 12px; border-radius: 22px;
  background: rgba(26, 26, 28, 0.94); border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); backdrop-filter: blur(12px); }
.typing .ad-ask { border-color: rgba(196, 220, 124, 0.45); }
.ad-orb { display: inline-flex; flex: none; }
.ad-field { flex: 1; min-width: 0; font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; direction: ltr; display: flex; align-items: center; }
.ad-field #adTyped { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-ph { color: var(--ink-dim); }
.ad-caret { display: none; width: 1.5px; height: 15px; background: var(--accent); margin-left: 1px;
  animation: ad-blink 1s steps(2) infinite; flex: none; }
.typing .ad-caret { display: inline-block; }
@keyframes ad-blink { 50% { opacity: 0; } }
.ad-send { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; transition: transform .12s ease; }
.ad-send.press { transform: scale(0.88); }
.ad-send svg { width: 17px; height: 17px; fill: none; stroke: #111; stroke-width: 2; stroke-linecap: round;
  stroke-linejoin: round; }
.ad-badge { position: absolute; right: 16px; bottom: 76px; display: flex; gap: 12px; align-items: center;
  padding: 6px 12px; border-radius: 999px; background: rgba(20, 20, 22, 0.86); border: 1px solid var(--line);
  font-size: 12px; color: var(--ink-dim); opacity: 0; transform: translateY(6px);
  transition: opacity .4s ease, transform .4s cubic-bezier(0.23, 1, 0.32, 1); }
.ad-badge.on { opacity: 1; transform: none; }
.ad-badge .fil { display: inline-flex; align-items: center; gap: 4px; }
.ad-badge .fil i { width: 11px; height: 11px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.25); }
.ad-badge .ok { color: var(--accent); font-weight: 500; }
.ad-badge .ok::before { content: "✓ "; }
@keyframes ad-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) { .agentmock#agentDemo { min-height: 480px; } }
@media (prefers-reduced-motion: reduce) {
  .ad-msg, .ad-badge, .agentmock#agentDemo { animation: none; transition: none; }
}