/* ============================================================
   CANVAS — the first product visual under the hero.
   Staged the way framer.com stages their hero editor: an
   idealized, non-selectable editor window that shows ONLY
   what's needed — dark toolbar, simplified pages sidebar,
   dotted canvas with the founder's page selected in blue,
   and an agent chat on the right narrating what it did.
   No annotations, no URL bar, no reasoning panel.
   Chrome tokens come from the real app palette (miravi-web):
   card #fff · fg #16191D · muted-fg #64748B · ember #e0632e ·
   cool stage #e7e6e3/#c9c8c3 · toolbar #101114 · cool dark set
   #1b1e24/#111318/#2f3440. Selection blue is the console's own
   primary #2E90FA. The window is COOL app material against the
   warm site sheet — see the token block note below.
   Designed at a fixed 1200×680, stepped scale below (index2
   etches it rail-to-rail with an exact-fit scale — feature-lines.css).
   ============================================================ */

/* full-width band — the channel rails run alongside (feature-lines.css),
   so vertical spacing is padding, not margin, to keep the rails unbroken */
.mv-canvas{
  width:100%;margin:0;padding:96px 0 64px;
  position:relative;
  -webkit-user-select:none;user-select:none;
}
.mv-canvas, .mv-canvas *{box-sizing:border-box}
@media (max-width:1199.98px){.mv-canvas{padding-top:72px}}
@media (max-width:809.98px){.mv-canvas{padding:48px 20px 48px}}

/* ── fixed-design window, stepped scale (fits inside the rail channel) ── */
.mv-canvas{--cva-s:1}
@media (max-width:1511.98px){.mv-canvas{--cva-s:.94}}
@media (max-width:1375.98px){.mv-canvas{--cva-s:.86}}
@media (max-width:1279.98px){.mv-canvas{--cva-s:.78}}
@media (max-width:1199.98px){.mv-canvas{--cva-s:.72}}
@media (max-width:1049.98px){.mv-canvas{--cva-s:.62}}
@media (max-width:919.98px){.mv-canvas{--cva-s:.52}}
@media (max-width:809.98px){.mv-canvas{--cva-s:.55}}
@media (max-width:719.98px){.mv-canvas{--cva-s:.46}}
@media (max-width:599.98px){.mv-canvas{--cva-s:.37}}
@media (max-width:479.98px){.mv-canvas{--cva-s:.29}}
.cva-fit{
  width:calc(1200px * var(--cva-s));
  height:calc(680px * var(--cva-s));
  margin:0 auto;position:relative;
}
.cva-win{
  position:absolute;top:0;left:0;width:1200px;height:680px;
  transform:scale(var(--cva-s));transform-origin:top left;
  font-family:"Inter","Inter Variable",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  border-radius:12px;overflow:hidden;
  border:1px solid var(--cva-edge);
  background:var(--cva-card);
  box-shadow:var(--cva-shadow);
  display:flex;flex-direction:column;
}
.cva-win svg{display:block;flex:none}

/* app tokens — the window is COOL app material etched into the warm
   worksheet: the interior deliberately does NOT pick up the site's
   cream/umber (that was tried while it floated as a card; once etched
   flush it dissolved into the band). Warm site sheet vs cool app
   window is what makes the etched edges read. */
.mv-canvas{
  --cva-card:#ffffff;
  --cva-fg:#16191d;
  --cva-muted:#f4f5f7;
  --cva-muted-fg:#64748b;
  --cva-faint:#94a3b8;
  --cva-border:#e5e8ee;
  --cva-ember:#e0632e;
  --cva-blue:#2e90fa;
  --cva-stage:#e7e6e3;
  --cva-dot:#c9c8c3;
  --cva-edge:rgba(28,25,22,.45);
  --cva-shadow:0 1px 2px rgba(33,26,20,.05),0 24px 64px -32px rgba(33,26,20,.30);
}
html[data-theme="dark"] .mv-canvas{
  --cva-card:#1b1e24;
  --cva-fg:#e8eaef;
  --cva-muted:#262a33;
  --cva-muted-fg:#98a1b3;
  --cva-faint:#6c7689;
  --cva-border:#2f3440;
  --cva-stage:#111318;
  --cva-dot:#31363f;
  --cva-edge:rgba(226,231,240,.22);
  --cva-shadow:0 1px 2px rgba(0,0,0,.4),0 24px 64px -32px rgba(0,0,0,.6);
}

/* ── toolbar (cool black, same in both themes — the console's own bar,
   part of the window's cool app material, not the site's warm ink) ── */
.cva-top{
  height:44px;flex:none;background:#101114;
  display:flex;align-items:center;gap:10px;padding:0 14px;
  color:#e8eaef;position:relative;
}
.cva-logo{font-size:14px;font-weight:800;letter-spacing:-.3px;color:#fff}
.cva-mode{
  display:inline-flex;align-items:center;gap:6px;
  background:#21242b;border:1px solid #32363f;border-radius:8px;
  padding:5px 10px;font-size:11.5px;font-weight:600;color:#e8eaef;
}
.cva-mode svg{color:#858d9c}
.cva-top-mid{
  position:absolute;left:50%;transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:6px;
  font-size:11.5px;color:#858d9c;
}
.cva-top-mid b{font-weight:600;color:#ced3dc}
.cva-top-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.cva-avatars{display:flex;margin-right:2px}
.cva-avatars i{
  width:20px;height:20px;border-radius:50%;border:2px solid #101114;
  display:inline-flex;align-items:center;justify-content:center;
  font-style:normal;font-size:8px;font-weight:700;color:#fff;
}
.cva-avatars i:first-child{background:#7c6f96}
.cva-avatars i:last-child{background:#5e8a70;margin-left:-6px}
.cva-invite{
  font-size:11.5px;font-weight:500;color:#ced3dc;
  border:1px solid #32363f;border-radius:8px;padding:5px 11px;
}
.cva-publish{
  font-size:11.5px;font-weight:600;color:#fff;background:var(--cva-ember);
  border-radius:8px;padding:5px 13px;
}

/* ── body ── */
.cva-body{flex:1;min-height:0;display:flex}

/* sidebar — simplified pages panel */
.cva-side{
  width:232px;flex:none;border-right:1px solid var(--cva-border);background:var(--cva-card);
  padding:12px 10px;display:flex;flex-direction:column;gap:4px;
}
.cva-search{
  display:flex;align-items:center;gap:7px;
  border:1px solid var(--cva-border);border-radius:8px;background:var(--cva-muted);
  padding:6px 10px;margin-bottom:10px;
  font-size:11.5px;color:var(--cva-faint);
}
.cva-side-label{
  margin:6px 6px 4px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--cva-faint);display:flex;align-items:center;
}
.cva-side-label .cva-side-plus{margin-left:auto;font-size:12px;letter-spacing:0}
.cva-row{
  display:flex;align-items:center;gap:8px;
  border-radius:8px;padding:7px 8px;
  font-size:12px;font-weight:500;color:var(--cva-fg);
}
.cva-row svg{color:var(--cva-muted-fg)}
.cva-row.is-active{background:var(--cva-muted)}
.cva-row .cva-new{
  margin-left:auto;font-size:9px;font-weight:600;letter-spacing:.04em;
  color:var(--cva-ember);border:1px solid rgba(224,99,46,.35);
  border-radius:4px;padding:2px 5px;
}

/* ── canvas stage ── */
.cva-stage{
  flex:1;min-width:0;position:relative;overflow:hidden;
  background-color:var(--cva-stage);
  background-image:radial-gradient(circle,var(--cva-dot) 1px,transparent 1px);
  background-size:20px 20px;
}
/* frame label — selected, so it reads blue (Framer selected-frame state) */
.cva-frame-label{
  position:absolute;display:flex;align-items:center;gap:6px;
  font-size:11px;font-weight:500;color:var(--cva-blue);
}
.cva-frame-label svg{color:var(--cva-blue)}
.cva-frame-label span{color:var(--cva-faint);font-weight:400}

/* the founder's page — selected frame: blue outline + corner handles */
.cva-page{
  position:absolute;width:470px;
  background:#fff;border-radius:2px;color:#16191d;
  outline:1.5px solid var(--cva-blue);
  box-shadow:0 1px 3px rgba(22,25,29,.14),0 16px 40px -20px rgba(22,25,29,.3);
}
html[data-theme="dark"] .mv-canvas .cva-page{box-shadow:0 1px 3px rgba(0,0,0,.5),0 16px 40px -20px rgba(0,0,0,.6)}
.cva-hdl{
  position:absolute;width:7px;height:7px;background:#fff;
  border:1.5px solid var(--cva-blue);border-radius:1.5px;z-index:3;
}
.cva-hdl--tl{top:-4px;left:-4px}
.cva-hdl--tr{top:-4px;right:-4px}
.cva-hdl--bl{bottom:-4px;left:-4px}
.cva-hdl--br{bottom:-4px;right:-4px}

/* mini landing page — real text, small scale */
.cva-pg{padding:16px 24px 18px;background:#fff}
.cva-pg-nav{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.cva-pg-logo{font-size:13px;font-weight:700;letter-spacing:-.2px}
.cva-pg-links{display:flex;gap:10px;margin-left:auto;font-size:10px;color:#64748b}
.cva-pg-cta{font-size:10px;font-weight:600;color:#fff;background:#16191d;border-radius:999px;padding:4px 10px}
.cva-pg-h1{
  margin:0 0 8px;font-size:22px;line-height:1.18;letter-spacing:-.5px;font-weight:700;
  max-width:360px;
}
.cva-pg-sub{margin:0 0 12px;font-size:11px;line-height:1.5;color:#64748b;max-width:330px}
.cva-pg-ctas{display:flex;gap:8px;margin-bottom:20px}
.cva-pg-btn{font-size:10.5px;font-weight:600;border-radius:7px;padding:5px 12px}
.cva-pg-btn--p{background:#16191d;color:#fff}
.cva-pg-btn--s{border:1px solid #e4e8ef;color:#16191d}
.cva-pg-feats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}
.cva-pg-feat{border:1px solid #eceef2;border-radius:8px;padding:9px}
.cva-pg-feat b{display:block;font-size:10px;font-weight:600;margin-bottom:2px}
.cva-pg-feat span{font-size:8.5px;line-height:1.4;color:#64748b}

/* the drafted section — staged by the agent, washed blue while selected */
.cva-pg-vs{
  position:relative;border-radius:8px;padding:11px 12px;margin-bottom:16px;
  background:rgba(46,144,250,.055);
  box-shadow:inset 0 0 0 1.5px var(--cva-blue);
}
.cva-pg-vs-tag{
  position:absolute;top:-9px;left:10px;
  font-size:8.5px;font-weight:600;letter-spacing:.03em;color:#fff;
  background:var(--cva-blue);border-radius:4px;padding:2.5px 7px;
}
.cva-pg-vs-t{margin:0 0 8px;font-size:12px;font-weight:700}
.cva-pg-tbl{width:100%;border-collapse:collapse;font-size:9.5px}
.cva-pg-tbl th{
  text-align:left;font-weight:600;color:#64748b;
  padding:3px 6px;border-bottom:1px solid #eceef2;
}
.cva-pg-tbl th:not(:first-child),.cva-pg-tbl td:not(:first-child){text-align:center}
.cva-pg-tbl td{padding:4px 6px;border-bottom:1px solid #f4f5f7;color:#16191d}
.cva-pg-tbl tr:last-child td{border-bottom:0}
.cva-pg-tbl .ok{color:#059669;font-weight:700}
.cva-pg-tbl .no{color:#94a3b8}

.cva-pg-price-t{margin:0 0 8px;font-size:12px;font-weight:700}
.cva-pg-price{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.cva-pg-plan{border:1px solid #eceef2;border-radius:8px;padding:8px;text-align:center}
.cva-pg-plan.is-pro{border-color:#16191d}
.cva-pg-plan b{display:block;font-size:13px;font-weight:700}
.cva-pg-plan i{display:block;font-style:normal;font-size:8.5px;color:#64748b;margin-top:1px}
.cva-pg-foot{margin:0;font-size:8.5px;color:#94a3b8;text-align:center}

/* ── agent panel (right) — the chat narrates what happened ── */
.cva-agent{
  width:300px;flex:none;border-left:1px solid var(--cva-border);background:var(--cva-card);
  display:flex;flex-direction:column;min-height:0;padding:12px;gap:10px;
}
.cva-agent-head{
  flex:none;display:flex;align-items:center;gap:6px;margin-bottom:2px;
}
.cva-agent-tab{
  font-size:11.5px;font-weight:600;color:var(--cva-fg);
  background:var(--cva-muted);border-radius:7px;padding:5px 11px;
}
.cva-agent-tab.is-ghost{background:transparent;color:var(--cva-muted-fg);font-weight:500}
.cva-agent-plus{margin-left:auto;color:var(--cva-muted-fg)}
.cva-prompt{
  background:var(--cva-muted);border:1px solid var(--cva-border);border-radius:10px;
  padding:11px 12px;position:relative;
  font-size:12.5px;line-height:1.45;font-weight:500;color:var(--cva-fg);
}
.cva-prompt svg{position:absolute;right:9px;bottom:9px;color:var(--cva-faint)}
.cva-meta{
  display:flex;align-items:center;gap:6px;
  font-size:11px;color:var(--cva-faint);padding:0 2px;
}
.cva-meta b{font-weight:500;color:var(--cva-muted-fg)}
.cva-meta span{margin-left:auto}
.cva-say{
  margin:2px 2px 0;font-size:12px;line-height:1.5;color:var(--cva-muted-fg);
}
.cva-say b{font-weight:600;color:var(--cva-fg)}
.cva-act{
  display:flex;align-items:center;gap:8px;
  border:1px solid var(--cva-border);border-radius:999px;
  padding:7px 12px;font-size:11.5px;font-weight:500;color:var(--cva-fg);
}
.cva-act svg{color:var(--cva-ember)}
.cva-act span:last-child{margin-left:auto;font-size:10px;color:var(--cva-faint)}
.cva-agent-input{
  margin-top:auto;border:1px solid var(--cva-border);border-radius:10px;
  padding:10px 11px 9px;display:flex;flex-direction:column;gap:12px;
}
.cva-agent-input > span{font-size:12px;color:var(--cva-faint)}
.cva-agent-input-row{display:flex;align-items:center;gap:8px}
.cva-auto{
  font-family:ui-monospace,Consolas,monospace;
  font-size:10px;letter-spacing:.06em;color:var(--cva-muted-fg);
  display:inline-flex;align-items:center;gap:3px;
}
.cva-send{
  margin-left:auto;width:24px;height:24px;border-radius:6px;
  background:var(--cva-ember);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;font-size:13px;
}

/* ── caption below, Framer-style — left edge tracks the window ── */
.mvc-caption{width:calc(1200px * var(--cva-s));max-width:calc(100% - 8px);margin:22px auto 0}
.mvc-cap-t{
  font-family:var(--font-med),sans-serif;font-weight:var(--fw-med);
  font-size:16px;line-height:1.35;letter-spacing:-0.2px;color:var(--ink,#211a14);
  margin:0 0 6px;
}
.mvc-cap-d{
  font-family:var(--font-med),sans-serif;font-weight:var(--fw-med);
  font-size:14px;line-height:1.55;letter-spacing:-0.1px;color:#6a5d4d;
  margin:0;
}
html[data-theme="dark"] .mv-canvas .mvc-cap-t{color:#f2ecdf}
html[data-theme="dark"] .mv-canvas .mvc-cap-d{color:#b3a58f}