/* Shared voice / Guide builder widgets, extracted from home.css for every public entry page. */
.vg-overlay{
  --ground:#FAF9F4;--panel:#FFFFFF;--panel-2:#F3F1E9;--ink-well:#161615;--ink-well-2:#212120;
  --border:#E6E3D8;--border-strong:#D4D0C2;--line:var(--border);--fg:#161615;--muted:#5F5B51;--faint:#8B8678;
  --brand:#2E9E53;--green-deep:#15803D;--cta:#22C55E;--cta-hover:#1DB255;--cta-ink:#08130B;
  --slate:100,116,139;--blue:59,130,246;--indigo:99,102,241;--violet:139,92,246;--green:22,163,74;--green-bright:52,211,153;
  --serif:"Newsreader","Iowan Old Style",Georgia,serif;
  --sans:-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
  --ease:cubic-bezier(0.23,1,0.32,1);
  color:var(--fg);font-family:var(--sans);font-size:16px;line-height:1.6;
}
.vg-overlay .btn {
  display: inline-flex; align-items: center; gap: 8px;
  border-radius: 10px; padding: 10px 18px;
  font-size: 13.5px; font-weight: 600; text-decoration: none;
  border: 1px solid transparent; white-space: nowrap; cursor: pointer;
  font-family: var(--sans); letter-spacing: -.005em;
  transition: background .15s, border-color .15s, box-shadow .15s, color .15s, transform .12s;
}
/* primary: the earned green, deep — white text, quiet shadow, no glow */
.vg-overlay .btn-green { background: var(--ink-well); color: #fff; border-color: rgba(0,0,0,.35); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 1px 2px rgba(22,22,21,.18); }
.vg-overlay .btn-green:hover { background: #000; transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 2px 6px rgba(22,22,21,.16); }
.vg-overlay .btn-ghost { border-color: var(--border-strong); color: var(--fg); background: transparent; }
.vg-overlay .btn-ghost:hover { border-color: var(--faint); background: var(--panel); }
.vg-overlay .btn .tel { font-family: var(--mono); font-weight: 500; font-size: 12.5px; color: inherit; opacity: .8; }
.btn-voice { border-color: var(--border-strong); color: var(--fg); background: var(--panel); display: inline-flex; align-items: center; gap: 9px; }
.btn-voice:hover { border-color: var(--faint); }
.btn-voice .gdw { position: relative; width: 16px; height: 14px; flex: none; }
.btn-voice .gd { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 32% 30%, #7ADFA4, var(--cta) 58%, var(--green-deep)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); transition: transform .3s var(--ease), opacity .25s; }
.btn-voice .gw { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 2px; opacity: 0; transition: opacity .25s; }
.btn-voice .gw i { width: 3px; height: 100%; border-radius: 2px; background: linear-gradient(180deg, #7ADFA4, var(--green-deep)); transform: scaleY(.35); }
.btn-voice:hover .gd { transform: translate(-50%,-50%) scale(.3); opacity: 0; }
.btn-voice:hover .gw { opacity: 1; }
.btn-voice:hover .gw i { animation: vg-eq .85s ease-in-out infinite; }
.btn-voice:hover .gw i:nth-child(2) { animation-delay: .14s; }
.btn-voice:hover .gw i:nth-child(3) { animation-delay: .28s; }
.btn-voice:hover .gw i:nth-child(4) { animation-delay: .42s; }
@keyframes vg-eq { 0%,100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .btn-voice:hover .gw i { animation: none; transform: scaleY(.7); } }

.vg-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(22,22,21,.42); display: none; align-items: center; justify-content: center; padding: 24px; }
.vg-overlay.open { display: flex; }
.vg-modal { position: relative; width: min(620px, 100%); max-height: 90vh; overflow: auto; background: var(--ground); border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 24px 80px rgba(22,22,21,.25); }
.vg-close { position: absolute; top: 10px; right: 12px; z-index: 2; appearance: none; border: 0; background: none; font-size: 26px; line-height: 1; color: var(--faint); cursor: pointer; padding: 6px; }
.vg-close:hover { color: var(--fg); }
.vg-session { padding: 44px 36px 36px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; justify-content: center; }
.vg-orb { width: 84px; height: 84px; border-radius: 50%; background: radial-gradient(circle at 32% 30%, #7ADFA4, var(--cta) 58%, var(--green-deep)); box-shadow: 0 2px 10px rgba(20,60,35,.3), inset 0 0 0 1px rgba(255,255,255,.35); transition: transform .3s; }
.vg-orb.speaking { animation: vg-speak 1s ease-in-out infinite; }
.vg-orb.listening { animation: vg-listen 2.4s ease-in-out infinite; }
@keyframes vg-speak { 0%,100% { transform: scale(1); } 50% { transform: scale(1.09); } }
@keyframes vg-listen { 0%,100% { transform: scale(1); } 50% { transform: scale(1.03); } }
@media (prefers-reduced-motion: reduce) { .vg-orb.speaking, .vg-orb.listening { animation: none; } }
.vg-status { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--muted); min-height: 16px; }
.vg-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.vg-alt { font-size: 12.5px; color: var(--muted); }
.vg-alt a { color: var(--green-deep); font-family: var(--mono); font-size: 12px; }
.vg-kb { border-top: 1px solid var(--border); background: var(--panel); padding: 14px 28px 18px; border-radius: 0 0 18px 18px; }
.vg-kb-head { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; color: var(--faint); margin-bottom: 9px; }
.vg-kb-chips { display: flex; flex-wrap: nowrap; gap: 4px; align-items: center; overflow-x: auto; scrollbar-width: none; }
.vg-kb-chips::-webkit-scrollbar { display: none; }
.vg-kb-chips + .vg-kb-chips { margin-top: 7px; }
.vg-kb-cat { font-family: var(--mono); font-size: 8.5px; letter-spacing: .1em; color: var(--faint); flex: none; width: 128px; }
.vg-kb-item { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 2.5px 8px; border: 1px solid var(--border); border-radius: 999px; font-family: var(--mono); font-size: 9.5px; color: var(--muted); text-decoration: none; transition: background .25s, border-color .25s, color .25s; }
.vg-kb-item:hover { border-color: var(--border-strong); color: var(--fg); }
.vg-kb-item i { width: 5px; height: 5px; border-radius: 50%; background: var(--border-strong); flex: none; transition: background .3s; }
.vg-kb-item.reading { background: rgba(var(--green),.07); border-color: rgba(var(--green),.4); color: var(--green-deep); }
.vg-kb-item.reading i { background: rgb(var(--green)); }



/* ── build your own activation agent ─────────────────────────────────────── */
.ab-card { max-width: 640px; }
.ab-row { display: flex; gap: 10px; margin-top: 20px; }
.ab-url { flex: 1; min-width: 0; padding: 11px 14px; border: 1px solid var(--border-strong); border-radius: 10px; font-family: var(--mono); font-size: 13px; color: var(--fg); background: var(--panel); }
.ab-url:focus { outline: none; border-color: var(--green-deep); }
.ab-url::placeholder { color: var(--faint); }
.ab-status { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-top: 14px; min-height: 16px; }
.ab-found { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.ab-chip { opacity: 0; transform: translateY(4px); transition: opacity .35s var(--ease), transform .35s var(--ease); }
.ab-chip.on { opacity: 1; transform: none; }
.ab-test { margin-top: 18px; }
@media (max-width: 560px) { .ab-row { flex-direction: column; } }


/* suggested questions in the custom-agent modal */
.vg-ask { width: 100%; max-width: 400px; text-align: left; margin-top: 4px; }
.vg-ask-h { font-family: var(--mono); font-size: 8.5px; letter-spacing: .1em; color: var(--faint); margin-bottom: 6px; }
.vg-ask-q { font-family: var(--serif); font-size: 14px; line-height: 1.45; color: var(--muted); padding: 3px 0; }


/* ── builder wizard ──────────────────────────────────────────────────────── */
.bw-modal { width: min(840px, 100%); padding: 40px 36px 32px; }
.bw-grid { display: grid; grid-template-columns: 1fr 264px; gap: 32px; align-items: start; }
.bw-left { min-width: 0; }
/* the agent, assembling on the right — persists from build through the call */
.bw-agent { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 22px 18px 18px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.bw-orb { width: 62px; height: 62px; border-radius: 50%; opacity: .38; filter: saturate(.25); transition: opacity .8s var(--ease), filter .8s var(--ease); }
.bw-agent.live .bw-orb { opacity: 1; filter: none; }
.bw-a-name { margin-top: 14px; font-size: 14px; font-weight: 600; letter-spacing: -.01em; color: var(--ink-well); }
.bw-a-dom { font-family: var(--mono); font-size: 9.5px; letter-spacing: .04em; color: var(--faint); margin-top: 3px; }
.bw-a-sec { width: 100%; margin-top: 16px; text-align: left; animation: readout-in .5s var(--ease); }
.bw-a-h { font-family: var(--mono); font-size: 8.5px; letter-spacing: .1em; color: var(--faint); margin-bottom: 7px; }
.bw-a-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.bw-a-chips .vg-kb-item { flex: none; }
.bw-a-fine { font-family: var(--mono); font-size: 8.5px; letter-spacing: .05em; color: var(--faint); margin-top: 7px; }
/* step 4 — after the call */
.bw-s4-status { font-family: var(--mono); font-size: 11px; letter-spacing: .02em; color: var(--green-deep); }
.bw-live { border: 1px solid var(--line); border-radius: 12px; padding: 18px 18px 14px; margin-top: 16px; background: var(--panel); }
.bw-live-lede { font-size: 13.5px; line-height: 1.55; color: var(--muted); margin-bottom: 14px; }
.bw-live-note { margin-top: 10px; }
.bw-step { display: none; }
.bw-step.on { display: block; }
.bw-eyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: var(--green-deep); margin: 0 0 12px; }
.bw-h { font-family: var(--serif); font-weight: 500; font-size: 26px; letter-spacing: -.01em; margin: 0 0 8px; }
.bw-sub { font-size: 14px; color: var(--muted); line-height: 1.55; margin: 0 0 18px; max-width: 40ch; }
.bw-row { display: flex; gap: 8px; margin-bottom: 10px; }
.bw-row input { flex: 1; min-width: 0; padding: 11px 14px; border: 1px solid var(--border-strong); border-radius: 10px; font-family: var(--mono); font-size: 13px; color: var(--fg); background: var(--panel); }
.bw-row input:focus { outline: none; border-color: var(--green-deep); }
.bw-row input.err { border-color: #C2410C; }
.bw-note { font-family: var(--mono); font-size: 10px; color: var(--faint); margin-top: 8px; }
.bw-build { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
.bw-p { display: flex; align-items: center; gap: 9px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); padding: 9px 12px; font-size: 12.5px; font-weight: 500; color: var(--fg); opacity: 0; transform: translateY(4px); transition: opacity .35s var(--ease), transform .35s var(--ease), border-color .35s, background .35s; }
.bw-p.on { opacity: 1; transform: none; }
.bw-p i { width: 7px; height: 7px; border-radius: 50%; background: var(--border-strong); flex: none; }
.bw-p.on:not(.done) i { background: rgb(var(--blue)); animation: fx-soft 1.4s ease-in-out infinite; }
.bw-p.done { border-color: rgba(var(--green),.4); background: rgba(var(--green),.05); }
.bw-p.done i { background: rgb(var(--green)); animation: none; }
.bw-p em { margin-left: auto; font-style: normal; font-family: var(--mono); font-size: 9.5px; color: var(--green-deep); white-space: nowrap; }
.bw-est { font-family: var(--mono); font-size: 10px; letter-spacing: .04em; color: var(--muted); margin-bottom: 12px; animation: readout-in .5s var(--ease); }
.bw-est span { color: var(--faint); font-size: 8.5px; letter-spacing: .1em; margin-left: 6px; }
.bw-err { font-family: var(--mono); font-size: 10.5px; color: #C2410C; margin-top: 8px; }
/* country code embedded in the phone field, inline caret */
.bw-phonewrap { flex: 1; min-width: 0; display: flex; align-items: center; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--panel); }
.bw-phonewrap:focus-within { border-color: var(--green-deep); }
.bw-phonewrap:has(.err) { border-color: #C2410C; }
.bw-cc { flex: none; width: 62px; padding: 11px 20px 11px 12px; border: 0; border-right: 1px solid var(--border); border-radius: 10px 0 0 10px; font-family: var(--mono); font-size: 13px; color: var(--fg); background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6' viewBox='0 0 9 6'%3E%3Cpath d='M1 1l3.5 3.5L8 1' fill='none' stroke='%238B8678' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 7px center; appearance: none; cursor: pointer; }
.bw-cc:focus { outline: none; }
.bw-phonewrap .bw-phone { border: 0 !important; background: transparent; flex: 1; min-width: 0; padding: 11px 12px; font-family: var(--mono); font-size: 13px; color: var(--fg); }
.bw-phonewrap .bw-phone:focus { outline: none; }
.bw-found { margin-top: 14px; }
.bw-skip { appearance: none; border: 0; background: none; font-family: var(--mono); font-size: 10.5px; color: var(--faint); cursor: pointer; padding: 4px 0; text-decoration: underline; text-underline-offset: 3px; }
.bw-skip:hover { color: var(--fg); }
@media (max-width: 760px) { .bw-grid { grid-template-columns: 1fr; } .bw-agent { flex-direction: row; flex-wrap: wrap; text-align: left; gap: 0 14px; padding: 16px; } .bw-orb { width: 44px; height: 44px; } .bw-a-name { margin-top: 0; } .bw-a-sec { margin-top: 12px; } }
@media (max-width: 560px) { .bw-row { flex-direction: column; } .bw-modal { padding: 32px 22px 26px; } }
.vg-overlay{
  --ground:#0A0A0A;--panel:#141414;--panel-2:#1A1A19;--ink-well:#101010;--ink-well-2:#1C1C1B;
  --border:rgba(252,252,251,.22);--border-strong:rgba(252,252,251,.4);--line:rgba(252,252,251,.22);
  --fg:#FCFCFB;--muted:rgba(252,252,251,.62);--faint:rgba(252,252,251,.45);
  --green-deep:#45D07E;--cta:#0F7B3B;--cta-hover:#128a44;--cta-ink:#FCFCFB;
  --serif:"Newsreader","Iowan Old Style",Georgia,serif;
  --sans:"Public Sans",-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --mono:"Public Sans",-apple-system,"Segoe UI",Arial,sans-serif;
  background:rgba(5,5,5,.6);
}
.vg-overlay .vg-modal{
  border-radius:4px;
  box-shadow:0 0 24px rgba(252,252,251,.10),0 0 72px rgba(252,252,251,.05);
}
.vg-overlay .btn-green{background:#FCFCFB;color:#141414;border-color:transparent;box-shadow:none;}
.vg-overlay .btn-green:hover{background:#FFFFFF;transform:none;box-shadow:none;}
.vg-overlay .btn-ghost{border-color:rgba(252,252,251,.4);color:#FCFCFB;background:transparent;}
.vg-overlay .btn-ghost:hover{border-color:rgba(252,252,251,.7);background:rgba(252,252,251,.06);}
.vg-overlay input,.vg-overlay textarea{background:#141414;color:#FCFCFB;border:1px solid rgba(252,252,251,.3);border-radius:4px;}
.vg-overlay input::placeholder{color:rgba(252,252,251,.4);}
.vg-overlay input,.vg-overlay select,.vg-overlay textarea{font-size:16px;} /* iOS: no focus zoom */
.vg-overlay .vg-close{top:2px;right:2px;padding:10px 14px;min-width:44px;min-height:44px;font-size:24px;}
.vg-overlay .vg-modal{overscroll-behavior:contain;}
.vg-overlay a{color:#45D07E;}
.vg-overlay .bw-a-name{color:#FCFCFB;}
.vg-overlay .btn{border-radius:4px;}
/* Refined chrome and explicit contrast, independent of the page template. */
.thread-refined .vg-overlay{z-index:1200;--muted:#B8BBC0;--faint:#A0A5AA}
.thread-refined .vg-overlay .vg-modal{border-radius:20px;max-height:90vh;max-height:90dvh;box-shadow:0 18px 60px #0003;overscroll-behavior:contain}
.thread-refined .vg-overlay .btn-green{background:#FCFCFB;color:#141414;border-color:#FCFCFB;box-shadow:none}
.thread-refined .vg-overlay .btn-green:hover{background:#FFF;color:#141414}
.thread-refined .vg-overlay .btn-ghost{background:transparent;color:#FCFCFB;border-color:#8D9498}
.thread-refined .vg-overlay .vg-close{color:#FCFCFB;min-width:44px;min-height:44px}
.thread-refined .vg-overlay .btn{width:auto;min-height:44px;justify-content:center;border-radius:6px;white-space:normal}
.thread-refined .vg-overlay .vg-kb-item,.thread-refined .vg-overlay .vg-kb-cat{font-size:11px}
.thread-refined .vg-overlay :is(button,a,input):focus-visible{outline:2px solid #A5C7F0;outline-offset:3px}
@media(max-width:560px){.thread-refined .vg-overlay{padding:14px}.thread-refined .vg-overlay .bw-row{align-items:stretch}.thread-refined .vg-overlay .bw-row .btn{width:100%}}
@media(prefers-reduced-motion:reduce){.thread-refined .vg-overlay *{animation:none!important;transition:none!important}}