/* Value Nexus · Ask, styling. Uses the site's own tokens only. */
.ask-launch{position:fixed;right:18px;bottom:18px;z-index:97;display:inline-flex;align-items:center;
gap:9px;padding:11px 17px 11px 14px;border-radius:999px;cursor:pointer;
font-family:var(--sans);font-size:var(--fs-200);font-weight:600;letter-spacing:.02em;
color:#04122B;background:linear-gradient(135deg,#FFB25E,#FF7A45);border:0;
box-shadow:0 8px 30px rgba(255,122,69,.34),0 2px 8px rgba(0,0,0,.4);
transition:transform .25s cubic-bezier(.22,.61,.36,1),box-shadow .25s}
.ask-launch svg{width:19px;height:19px}
.ask-launch:hover{transform:translateY(-2px);box-shadow:0 12px 38px rgba(255,122,69,.44),0 2px 8px rgba(0,0,0,.4)}
.ask-launch:focus-visible{outline:2px solid #fff;outline-offset:3px}
body.askopen .ask-launch{transform:translateY(6px) scale(.94);opacity:.6}

/* 7 September: taller. Joel: "the chat questions are impacted we can make the
   window a bit taller". The categorised questions are what get a visitor
   talking, and at 640px the open category was clipped mid list.
   THE CLAMP IS NOT ARBITRARY. The panel is anchored to the bottom, so its top
   edge is (viewport - bottom offset - height). The first attempt at this used
   100vh - 96px, which on a laptop put the top edge at 16px and slid the whole
   TRACEY header underneath the fixed nav bar. The subtrahend has to leave the
   bottom offset PLUS enough clearance for the nav, or making the panel taller
   simply hides the top of it. 168 = 80 bottom + 88 of nav and breathing room.
   Change it and check the header is still visible at 800px tall. */
.ask-panel{position:fixed;right:18px;bottom:80px;z-index:98;width:min(430px,calc(100vw - 36px));
max-height:min(760px,calc(100vh - 156px));display:flex;flex-direction:column;
background:linear-gradient(180deg,var(--navy-2),var(--navy-1));
border:1px solid var(--line);border-radius:18px;overflow:hidden;
box-shadow:0 30px 80px rgba(0,0,0,.62),0 0 0 1px rgba(46,155,255,.08)}
.ask-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
padding:16px 16px 13px;border-bottom:1px solid var(--line-soft)}
.ask-k{display:block;font-family:var(--sans);font-size:var(--fs-150);font-weight:700;
letter-spacing:.26em;text-transform:uppercase;color:var(--blue)}
.ask-d{display:block;margin-top:5px;font-size:var(--fs-150);color:var(--silver);opacity:.66;line-height:1.45}
.ask-x{background:0;border:0;color:var(--silver);font-size:21px;line-height:1;cursor:pointer;
padding:2px 5px;border-radius:6px;opacity:.6}
.ask-x:hover{opacity:1;color:#fff}
.ask-log{flex:1;overflow-y:auto;padding:15px 16px;display:flex;flex-direction:column;gap:13px}
.ask-row p{margin:0 0 9px;font-size:var(--fs-200);line-height:1.62}
.ask-row p:last-child{margin-bottom:0}
.ask-me{align-self:flex-end;max-width:86%;background:rgba(46,155,255,.14);
border:1px solid rgba(46,155,255,.24);border-radius:14px 14px 4px 14px;padding:10px 13px;color:var(--silver-hi)}
.ask-bot{align-self:flex-start;max-width:96%;background:rgba(200,206,216,.045);
border:1px solid var(--line-soft);border-radius:14px 14px 14px 4px;padding:12px 14px;color:#CBD2DE}
.ask-bridge{color:var(--silver-hi,#cfd6e2)}
.ask-q{margin-top:10px !important;font-weight:600}
.ask-see{margin-top:10px !important;font-size:var(--fs-150)}
.ask-see a{color:var(--silver-hi);text-decoration:underline;text-underline-offset:3px;
text-decoration-color:rgba(46,155,255,.55)}
.ask-cta{margin-top:12px !important}
.btn-sm{font-size:var(--fs-150);padding:8px 14px;border-radius:8px}
.ask-also{margin-top:12px;display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.ask-also>span{width:100%;font-size:var(--fs-150);letter-spacing:.16em;text-transform:uppercase;
color:var(--silver);opacity:.45;margin-bottom:2px}
.ask-chip{font-family:var(--sans);font-size:var(--fs-150);line-height:1.35;text-align:left;
color:var(--silver-hi);background:rgba(200,206,216,.06);border:1px solid var(--line-soft);
border-radius:999px;padding:7px 12px;cursor:pointer;transition:border-color .2s,background .2s}
.ask-chip:hover{border-color:rgba(46,155,255,.4);background:rgba(46,155,255,.1)}
.ask-wait{display:flex;gap:5px;align-items:center;height:16px}
.ask-wait i{width:6px;height:6px;border-radius:50%;background:var(--blue);opacity:.5;
animation:askdot 1.1s infinite ease-in-out}
.ask-wait i:nth-child(2){animation-delay:.16s}
.ask-wait i:nth-child(3){animation-delay:.32s}
@keyframes askdot{0%,80%,100%{transform:scale(.7);opacity:.35}40%{transform:scale(1);opacity:.9}}
.ask-form{display:flex;gap:8px;padding:12px 16px 0}
.ask-form input{flex:1 1 auto;min-width:0;font-family:var(--sans);font-size:var(--fs-200);color:var(--silver-hi);
background:rgba(9,14,36,.7);border:1px solid var(--line);border-radius:10px;padding:11px 13px}
.ask-form input::placeholder{color:var(--silver);opacity:.42}
.ask-form input:focus{outline:0;border-color:rgba(46,155,255,.55)}
.ask-form button{width:42px;border:0;border-radius:10px;cursor:pointer;font-size:17px;
color:#04122B;background:linear-gradient(135deg,#FFB25E,#FF7A45)}
.ask-note{padding:9px 16px 14px;margin:0;font-size:var(--fs-150);line-height:1.5;
color:var(--silver);opacity:.5}

/* the /ask page */
.askpage-box{display:flex;gap:10px;margin:26px 0 0;max-width:640px}
.askpage-box input{flex:1 1 auto;min-width:0;max-width:100%;font-family:var(--sans);font-size:var(--fs-250);color:var(--silver-hi);
background:rgba(9,14,36,.6);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.askpage-box input:focus{outline:0;border-color:rgba(46,155,255,.55)}
.ask-res{margin:22px 0 0;max-width:760px;background:linear-gradient(180deg,var(--navy-2),var(--navy-1));
border:1px solid var(--line-soft);border-radius:16px;padding:22px 24px}
.ask-res-q{font-family:var(--serif);font-size:var(--fs-c1);color:var(--silver-hi);margin-bottom:12px}
.ask-res-a p{font-size:var(--fs-250);line-height:1.66;margin:0 0 10px;color:#CBD2DE}
.askq{border-bottom:1px solid var(--line-soft);padding:22px 0}
.askq:last-child{border-bottom:0}
.askq h3{font-family:var(--serif);font-size:var(--fs-450);color:var(--silver-hi);margin:0 0 9px;font-weight:500}
.askq p{font-size:var(--fs-250);line-height:1.66;color:var(--silver);opacity:.9;margin:0}
.askq .askq-see{margin-top:9px;font-size:var(--fs-150)}
.ask-grouphead{margin:46px 0 4px;font-family:var(--sans);font-size:var(--fs-150);font-weight:600;
letter-spacing:.26em;text-transform:uppercase;color:var(--blue);opacity:.92}

@media (max-width:560px){
  .ask-panel{right:9px;left:9px;bottom:74px;width:auto;max-height:calc(100vh - 146px)}
  .ask-launch{right:12px;bottom:12px}
  .askpage-box{flex-direction:column;align-items:stretch}
  .askpage-box .btn{width:100%}
  .ask-res{padding:18px 16px}
  .askq h3{font-size:var(--fs-400)}
}
@media (prefers-reduced-motion: reduce){
  .ask-launch,.ask-chip,.ask-panel{transition:none}
  .ask-wait i{animation:none;opacity:.6}
}

/* ---------- the handoff, shown only when the agent offers it --------------
   Deliberately plainer than the rest of the panel. A form that asks for a
   name should look like a form, not like a persuasion device. */
.ask-handoff{margin-top:14px;padding:16px 16px 14px;border-radius:12px;
  background:rgba(200,206,216,.05);border:1px solid var(--line-soft)}
.ask-ho-lead{margin:0 0 8px;font-size:var(--fs-250);color:var(--silver-hi)}
.ask-ho-note{margin:0 0 14px;font-size:var(--fs-150);line-height:1.6;opacity:.72}
.ask-ho-form label{display:block;margin-bottom:10px}
.ask-ho-form label span{display:block;font-size:var(--fs-100);letter-spacing:.1em;
  text-transform:uppercase;opacity:.6;margin-bottom:5px}
.ask-ho-form input{width:100%;box-sizing:border-box;min-width:0;padding:9px 12px;
  border-radius:9px;border:1px solid var(--line);background:rgba(9,14,36,.5);
  color:var(--silver-hi);font:inherit;font-size:var(--fs-250)}
.ask-ho-form input:focus{outline:1px solid var(--blue);outline-offset:1px}
.ask-ho-form input[name="_h"]{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.ask-ho-form button{width:100%;margin-top:4px}
.ask-ho-msg{margin:10px 0 0;font-size:var(--fs-150);opacity:.8;min-height:1em}
.ask-ho-done{margin:0;font-size:var(--fs-250);color:var(--silver-hi)}
/* When Turnstile escalates to an interactive check it MUST be visible and it
   MUST have room: hidden off screen, a visitor could not click it and the
   next question went out with no token and silently fell back to the bank
   (measured 6 September 2026). So it gets real space when it is asking for
   something, and none at all once it is done. */
.ask-ts{margin:10px 16px 0;min-height:0;position:relative;z-index:2}
.ask-ts:empty{display:none}
.ask-ts iframe{display:block;max-width:100%}

/* ---------- Tracey's voice -------------------------------------------------
   The mic sits inside the input row, left of the send arrow, because it is
   another way to ask the same question rather than a separate feature. Once
   a call is running the button becomes the countdown: one control, one
   number, and the four minutes visible from the first second rather than
   sprung on the caller at the end. */
.ask-voice{display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:0 0 auto;
  padding:0 10px;min-width:38px;height:38px;border-radius:9px;cursor:pointer;
  border:1px solid var(--line);background:rgba(9,14,36,.5);
  color:var(--silver-hi);font:inherit;font-size:var(--fs-150);
  font-variant-numeric:tabular-nums;transition:border-color .18s,background .18s}
.ask-voice svg{width:16px;height:16px;flex:0 0 auto}
/* the label is empty when idle, so it takes no room at all */
.ask-voice .vv-t:empty{display:none}
/* the input must give way, not the controls: without this the row overflowed
   the panel and the voice button was clipped at the edge */
.ask-form{flex-wrap:nowrap}
.ask-form input{flex:1 1 auto;min-width:0}
.ask-voice:hover{border-color:var(--blue)}
.ask-voice:focus-visible{outline:1px solid var(--blue);outline-offset:1px}
.ask-voice[data-state="starting"]{opacity:.65;pointer-events:none}
.ask-voice[data-state="live"]{border-color:var(--blue);background:rgba(60,120,255,.14)}
.ask-voice[data-state="live"] svg{color:var(--blue)}
/* a slow pulse, so it is obvious the microphone is open without being a
   flashing red dot. Removed entirely under reduced-motion. */
.ask-voice[data-state="live"]::before{content:"";width:7px;height:7px;border-radius:50%;
  background:var(--blue);animation:askmic 1.8s ease-in-out infinite}
@keyframes askmic{0%,100%{opacity:.35}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .ask-voice[data-state="live"]::before{animation:none;opacity:.9}
}
/* what the panel says about a call, as distinct from what Tracey says */
.ask-vnote{margin:0;font-size:var(--fs-150);line-height:1.6;opacity:.75}

/* the /ask page entry point */
.ask-speak-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:18px}

/* Turnstile has done its job: collapse it rather than leave a green success
   badge and someone else's logo sitting inside our panel. It comes back the
   moment the widget needs the visitor again. */
.ask-ts.ts-done{height:0;min-height:0;margin:0;overflow:hidden;opacity:0;pointer-events:none}

/* ---------- the call ------------------------------------------------------
   Three states in one container, sitting above the input row because
   speaking to Tracey is a different way to have the conversation rather than
   a button on the text box. v1 put a 38px microphone inside the input; Joel
   could not find it, which was the whole answer. */
.ask-call{margin:0;padding:12px 16px 12px;border-top:1px solid var(--line-soft);
  background:linear-gradient(180deg,rgba(9,14,36,0),rgba(9,14,36,.55) 14px)}

/* 1. the offer */
.vv-start{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
  padding:12px 16px;border-radius:11px;cursor:pointer;font:inherit;
  font-size:var(--fs-250);font-weight:600;letter-spacing:.01em;
  color:var(--silver-hi);border:1px solid var(--line);
  background:rgba(236,240,246,.05);transition:border-color .18s,background .18s}
.vv-start svg{width:17px;height:17px;flex:0 0 auto;opacity:.9}
.vv-start:hover{border-color:var(--blue);background:rgba(60,120,255,.1)}
.vv-start:focus-visible{outline:1px solid var(--blue);outline-offset:2px}

/* 2. the disclosure, above the button. It used to be a consent card behind a
   second "Start the call"; the card is gone and the words are not. Deliberately
   quiet but not hidden: opacity stays high enough to read at a glance, because
   this is now the only place a caller is told she is automated before the
   microphone opens. Do not drop it below .7 and do not put it behind a toggle. */
.vv-fine{margin:0 0 9px;font-size:var(--fs-150);line-height:1.55;opacity:.78;
  color:var(--silver)}
.vv-fine b{color:var(--silver-hi);font-weight:600}

/* 3. the call itself */
.vv-live{display:flex;align-items:center;gap:12px;padding:11px 12px 11px 14px;
  border-radius:12px;border:1px solid var(--blue);background:rgba(60,120,255,.11)}
.vv-who{display:flex;align-items:center;gap:8px;min-width:0;flex:1 1 auto}
.vv-name{font-size:var(--fs-200);font-weight:600;color:var(--silver-hi)}
.vv-state{font-size:var(--fs-150);opacity:.72;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vv-dot{width:8px;height:8px;border-radius:50%;background:var(--blue);flex:0 0 auto;
  animation:vvpulse 1.7s ease-in-out infinite}
@keyframes vvpulse{0%,100%{opacity:.3;transform:scale(.85)}50%{opacity:1;transform:scale(1)}}
/* the countdown has been on screen since the first second, so the end of the
   call is never a surprise. It is the upfront contract, kept. */
.vv-time{font-variant-numeric:tabular-nums;font-size:var(--fs-250);font-weight:600;
  color:var(--silver-hi);flex:0 0 auto;letter-spacing:.02em}
.ask-call.vv-lowtime .vv-time{color:#FFB25E}
.ask-call.vv-lowtime .vv-dot{background:#FFB25E}
.vv-end{display:flex;align-items:center;gap:6px;flex:0 0 auto;padding:8px 12px;
  border-radius:9px;cursor:pointer;font:inherit;font-size:var(--fs-150);font-weight:600;
  color:#fff;border:1px solid rgba(255,122,69,.5);background:rgba(255,122,69,.18);
  transition:background .18s}
.vv-end svg{width:13px;height:13px}
.vv-end:hover{background:rgba(255,122,69,.32)}
.vv-end:focus-visible{outline:1px solid #FFB25E;outline-offset:2px}

@media (prefers-reduced-motion:reduce){ .vv-dot{animation:none;opacity:.95} }
@media (max-width:420px){
  .vv-live{gap:9px;padding:10px}
  .vv-end span{display:none}
  .vv-state{display:none}
}

/* ---------- the opening question menu -------------------------------------
   47 published questions is more than anyone reads as a flat list, and the
   flat list was being cut off by the panel edge. Grouped, collapsed, with the
   first group open so the panel is never a blank prompt. Native <details>, so
   it works with no JavaScript and the keyboard gets it for free. */
.ask-menu{display:flex;flex-direction:column;gap:6px;margin-top:2px}
.ask-menu-h{font-size:var(--fs-150);letter-spacing:.16em;text-transform:uppercase;
  color:var(--silver);opacity:.45;margin-bottom:4px}
.ask-cat{border:1px solid var(--line-soft);border-radius:10px;
  background:rgba(200,206,216,.035);overflow:hidden}
.ask-cat>summary{display:flex;align-items:center;gap:9px;cursor:pointer;list-style:none;
  padding:10px 12px;font-size:var(--fs-200);color:var(--silver-hi);
  transition:background .18s}
.ask-cat>summary::-webkit-details-marker{display:none}
.ask-cat>summary:hover{background:rgba(46,155,255,.07)}
.ask-cat>summary:focus-visible{outline:1px solid var(--blue);outline-offset:-1px}
.ask-cat>summary>span{flex:1 1 auto;min-width:0}
.ask-cat-n{flex:0 0 auto;font-style:normal;font-size:var(--fs-150);
  font-variant-numeric:tabular-nums;color:var(--silver);opacity:.55}
/* the chevron: drawn in CSS so it costs nothing and turns when open */
.ask-cat>summary::after{content:"";flex:0 0 auto;width:7px;height:7px;margin-right:2px;
  border-right:1.5px solid var(--silver);border-bottom:1.5px solid var(--silver);
  opacity:.55;transform:rotate(45deg) translate(-2px,-2px);transition:transform .18s}
.ask-cat[open]>summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.ask-cat[open]>summary{background:rgba(46,155,255,.06)}
.ask-cat-q{display:flex;flex-direction:column;gap:6px;padding:2px 12px 12px}
/* inside the menu the chips are rows, not pills: they hold whole questions and
   a pill that wraps to three lines reads worse than a plain row. */
.ask-cat-q .ask-chip{border-radius:9px;padding:9px 11px;font-size:var(--fs-200);
  line-height:1.45;white-space:normal;word-break:break-word}
@media (prefers-reduced-motion:reduce){
  .ask-cat>summary,.ask-cat>summary::after{transition:none}
}