/* ══ VERA — the AI revenue hire. Components shared by every page that
   presents her: her chat card, the two phases (Marketing, then Sales),
   job cards with the outcome each produces, a day with Vera, and the
   old-software comparison. Built on qr.css tokens, so light and dark
   follow the rest of the site. ══ */

.v-av{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#fff;font:800 1rem/1 var(--head);
  background:conic-gradient(from 200deg,var(--orange),var(--blue),var(--green),var(--orange));box-shadow:0 0 0 3px var(--card),0 0 0 4px var(--line)}
.v-av.sm{width:26px;height:26px;font-size:.72rem;box-shadow:0 0 0 2px var(--card),0 0 0 3px var(--line)}

/* her chat card */
.v-chat{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);overflow:hidden;text-align:left}
.v-chat-h{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--bg)}
.v-chat-h b{font:700 .95rem/1.2 var(--head);color:var(--ink)}
.v-chat-h small{display:block;color:var(--ink-3);font-size:.75rem}
.v-live{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:.72rem;color:var(--green-700);font-weight:600}
.v-live:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px var(--green-100)}
.v-chat-b{padding:14px 16px;display:grid;gap:10px}
.v-msg{display:flex;gap:9px;align-items:flex-start}
.v-msg p{margin:0;padding:9px 12px;border-radius:12px 12px 12px 4px;background:var(--bg);border:1px solid var(--line);font-size:.86rem;line-height:1.5;color:var(--ink-2)}
.v-msg.you{flex-direction:row-reverse}
.v-msg.you p{border-radius:12px 12px 4px 12px;background:var(--blue-100);border-color:transparent;color:var(--ink)}
.v-msg.you .v-me{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--ink-2);color:var(--card);font:700 .7rem/1 var(--head)}
.v-done{display:grid;gap:6px;margin:2px 0 0 35px}
.v-done span{display:flex;gap:8px;align-items:center;font-size:.82rem;color:var(--ink-2)}
.v-done span:before{content:"✓";flex:none;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:.66rem;font-weight:800;color:var(--green-700);background:var(--green-100)}
.v-done span.wait:before{content:"!";color:var(--orange-700);background:var(--orange-100)}
.v-acts{display:flex;gap:8px;flex-wrap:wrap;margin-left:35px}
.v-acts span{font-size:.76rem;font-weight:600;padding:6px 11px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--card);color:var(--ink-2)}
.v-acts span.go{background:var(--ink);color:var(--card);border-color:var(--ink)}

/* phases */
.v-phase-tag{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:var(--r-pill);font:700 .78rem/1 var(--head);letter-spacing:.02em}
.v-phase-tag i{font-style:normal;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:.7rem}
.v-phase-tag.mk{background:var(--orange-100);color:var(--orange-700)} .v-phase-tag.mk i{background:var(--orange)}
.v-phase-tag.sl{background:var(--blue-100);color:var(--blue-700)} .v-phase-tag.sl i{background:var(--blue)}
.v-phase-tag.ex{background:var(--green-100);color:var(--green-700)} .v-phase-tag.ex i{background:var(--green)}
.v-flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:12px;align-items:stretch;max-width:980px;margin:0 auto}
.v-flow-step{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.v-flow-step b{display:block;font:700 1rem/1.3 var(--head);color:var(--ink);margin:8px 0 4px}
.v-flow-step p{margin:0;font-size:.85rem;color:var(--ink-3)}
.v-flow-arrow{display:grid;place-items:center;color:var(--ink-4);font-size:1.3rem}

/* job cards */
.v-jobs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:1000px){.v-jobs{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.v-jobs{grid-template-columns:1fr}}
.v-job{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;display:flex;flex-direction:column;gap:8px}
.v-job h3{margin:0;font:700 1.05rem/1.3 var(--head);color:var(--ink)}
.v-job p{margin:0;font-size:.88rem;color:var(--ink-3);line-height:1.55}
.v-out{margin-top:auto;padding:10px 12px;border-radius:var(--r-sm);background:var(--bg);border:1px dashed var(--line-2);font-size:.82rem;color:var(--ink-2);line-height:1.45}
.v-out b{display:block;font:700 .68rem/1.4 var(--head);letter-spacing:.08em;text-transform:uppercase;color:var(--green-700);margin-bottom:2px}
.v-job .v-ok{font-size:.74rem;color:var(--ink-4)}

/* a day with Vera */
.v-day{list-style:none;margin:0 auto;padding:0;max-width:760px;display:grid;gap:0}
.v-day li{display:grid;grid-template-columns:76px 22px 1fr;gap:12px;align-items:start}
.v-day time{font:700 .82rem/1.5 var(--head);color:var(--ink-3);text-align:right;padding-top:12px}
.v-day .dot{position:relative;height:100%}
.v-day .dot:before{content:"";position:absolute;left:10px;top:0;bottom:0;width:2px;background:var(--line)}
.v-day .dot:after{content:"";position:absolute;left:5px;top:15px;width:12px;height:12px;border-radius:50%;background:var(--card);border:3px solid var(--blue)}
.v-day li.mk .dot:after{border-color:var(--orange)} .v-day li.you .dot:after{border-color:var(--green)}
.v-day li:first-child .dot:before{top:16px} .v-day li:last-child .dot:before{bottom:calc(100% - 16px)}
.v-day div.t{padding:9px 0 16px}
.v-day div.t b{display:block;font-size:.92rem;color:var(--ink)}
.v-day div.t span{font-size:.84rem;color:var(--ink-3)}

/* old software vs Vera */
.v-vs th:nth-child(2){color:var(--ink-3)}
.v-vs th:nth-child(3){color:var(--blue-700)}
.v-vs td:nth-child(2){color:var(--ink-3)}
.v-vs td:nth-child(3){color:var(--ink);font-weight:500}

/* never list */
.v-never{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.v-never div{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--r-sm);background:var(--card);border:1px solid var(--line);font-size:.86rem;color:var(--ink-2)}
.v-never div:before{content:"✕";flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:.68rem;font-weight:800;color:#B42318;background:var(--red-100)}

/* plan line: what Vera does on this plan */
.v-plan-line{display:flex;gap:8px;align-items:flex-start;margin:10px 0 4px;padding:9px 10px;border-radius:var(--r-sm);background:var(--bg);border:1px solid var(--line);font-size:.8rem;color:var(--ink-2);line-height:1.45;text-align:left}
.v-plan-line .v-av{margin-top:1px}

@media (max-width:820px){
  .v-flow{grid-template-columns:1fr}
  .v-flow-arrow{transform:rotate(90deg);height:18px}
  .v-day li{grid-template-columns:58px 22px 1fr}
  .v-acts,.v-done{margin-left:0}
}

/* "Meet Vera" in the top menu */
.nav-vera{display:inline-flex;align-items:center;gap:7px;font-weight:600;white-space:nowrap}
.nav-vera:before{content:"";width:9px;height:9px;border-radius:50%;background:conic-gradient(from 200deg,var(--orange),var(--blue),var(--green),var(--orange))}