@keyframes kvxpan{0%,100%{transform:translate(-6%,-3%) rotate(-2deg) scale(1.03)}50%{transform:translate(6%,3%) rotate(2deg) scale(1.07)}}
@keyframes kvxpulse{0%,100%{box-shadow:0 0 0 0 rgba(20,16,12,.14)}50%{box-shadow:0 0 0 14px rgba(20,16,12,0)}}
body.kvw-page{background:#F4F2ED}
.kvx{font-family:var(--sans);background:#EEEDE9}
.kvx *{box-sizing:border-box}
.kvx .kvx-panel{position:relative;max-width:1180px;margin:0 auto;background:transparent;padding:clamp(10px,1.6vw,20px) clamp(16px,2.4vw,32px) clamp(16px,2vw,24px)}
.kvx .kvx-tabs{position:relative;display:flex;gap:6px;justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:4px;border-radius:999px;background:rgba(20,16,12,.045);width:fit-content;margin:0 auto;max-width:100%;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.kvx .kvx-tabs::-webkit-scrollbar{display:none}
.kvx .kvx-tab{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;font-family:var(--sans);font-weight:600;font-size:14px;color:#69625A;background:transparent;padding:10px 20px;border-radius:999px;white-space:nowrap;transition:color .2s,background .25s,box-shadow .25s}
.kvx .kvx-tab .dot{width:10px;height:10px;border-radius:50%;background-size:cover;background-position:center;flex:0 0 auto}
.kvx .kvx-tab .lbl-short{display:none}
.kvx .kvx-tab:hover{color:#3A322A}
.kvx .kvx-tab[data-on="1"]{background:transparent;color:var(--ink)}
.kvx .kvx-stage{display:flex;flex-direction:column;align-items:center;padding:clamp(20px,2.6vw,38px) 12px clamp(14px,2vw,24px)}
.kvx .kvx-orbrow{display:flex;align-items:center;justify-content:center;gap:clamp(8px,1.4vw,16px);width:100%;max-width:100%}
.kvx .kvx-sideorb{flex:0 0 auto;width:clamp(78px,11vw,124px);aspect-ratio:1;border-radius:50%;background-size:cover;background-position:center;border:none;cursor:pointer;opacity:.4;filter:saturate(.9) blur(.4px);box-shadow:0 24px 52px -34px rgba(20,16,12,.5);transition:opacity .45s cubic-bezier(.2,.8,.3,1),transform .55s cubic-bezier(.2,.8,.3,1);position:relative;z-index:0;animation:kvsideglow 5.5s ease-in-out infinite,kvsidebob 6.5s ease-in-out infinite}
.kvx .kvx-sideorb-r{animation:kvsideglow 6.2s ease-in-out infinite .4s,kvsidebob 7.4s ease-in-out infinite .5s}
@media(prefers-reduced-motion:reduce){.kvx .kvx-sideorb,.kvx .kvx-sideorb-r,.kvx .kvx-orbimg,.kvx .kvx-orbimg::before{animation:none}}
.kvx .kvx-sideorb:hover{opacity:.72;transform:scale(1.05)}
.kvx .kvx-orbrow .kvx-orb{z-index:1;transition:transform .5s cubic-bezier(.2,.8,.3,1)}
@keyframes kvinR{from{opacity:.3;transform:translateX(42%) scale(.9)}to{opacity:1;transform:translateX(0) scale(1)}}
@keyframes kvinL{from{opacity:.3;transform:translateX(-42%) scale(.9)}to{opacity:1;transform:translateX(0) scale(1)}}
@keyframes kvbreath{0%,100%{transform:scale(1) translateY(0) rotate(0deg)}50%{transform:scale(1.032) translateY(-1.8%) rotate(.8deg)}}
@keyframes kvsideglow{0%,100%{filter:saturate(.9) blur(.4px) brightness(.95)}50%{filter:saturate(1.05) blur(.4px) brightness(1.08)}}
@keyframes kvsidebob{0%,100%{margin-top:0}50%{margin-top:-7px}}
.kvx .kvx-orbrow.kvnext .kvx-orb{animation:kvinR .55s cubic-bezier(.16,.84,.3,1)}
.kvx .kvx-orbrow.kvprev .kvx-orb{animation:kvinL .55s cubic-bezier(.16,.84,.3,1)}
.kvx .kvx-orbrow.kvnext .kvx-sideorb{animation:kvsN .55s cubic-bezier(.16,.84,.3,1)}
.kvx .kvx-orbrow.kvprev .kvx-sideorb{animation:kvsP .55s cubic-bezier(.16,.84,.3,1)}
@keyframes kvsN{from{transform:translateX(28px)}to{transform:translateX(0)}}
@keyframes kvsP{from{transform:translateX(-28px)}to{transform:translateX(0)}}
@media(max-width:560px){.kvx .kvx-orbrow{gap:4px}.kvx .kvx-sideorb{width:clamp(38px,10vw,54px)}}
.kvx .kvx-orb{position:relative;width:clamp(168px,20vw,244px);aspect-ratio:1;border-radius:50%;background-size:0 0;box-shadow:0 30px 60px -38px rgba(20,16,12,.42);transition:transform .6s cubic-bezier(.2,.8,.3,1)}
.kvx .kvx-orb::before,.kvx .kvx-orb::after{content:"";position:absolute;left:50%;top:50%;width:100%;height:100%;border-radius:50%;transform:translate(-50%,-50%) scale(.9);border:1.5px solid rgba(62,210,126,.5);opacity:0;z-index:0;pointer-events:none}
.kvx .kvx-orb[data-live="1"]::before{animation:kvripple 2.9s ease-out infinite}
.kvx .kvx-orb[data-live="1"]::after{animation:kvripple 2.9s ease-out infinite 1.45s}
@keyframes kvripple{0%{opacity:.5;transform:translate(-50%,-50%) scale(.88)}70%{opacity:.1}100%{opacity:0;transform:translate(-50%,-50%) scale(1.55)}}
.kvx .kvx-orbimg{position:absolute;inset:0;border-radius:50%;overflow:hidden;background:inherit;pointer-events:none;z-index:1;animation:kvbreath 6s ease-in-out infinite}
.kvx .kvx-orbimg::before{content:"";position:absolute;inset:-9%;background:inherit;background-size:cover;background-position:50% 50%;background-repeat:no-repeat;animation:kvxpan 8s ease-in-out infinite}
.kvx .kvx-call{z-index:2}
.kvx .kvx-call{position:absolute;left:50%;bottom:-16px;transform:translateX(-50%);width:50px;height:50px;border-radius:50%;overflow:hidden;background:none;color:#fff;display:grid;place-items:center;text-decoration:none;border:none;animation:kvglow 3.2s ease-in-out infinite;transition:transform .2s,box-shadow .3s}
.kvx .kvx-call::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,#B79DE8,#D9605A,#E2683E,#EFA12E,#B79DE8);animation:kvspinb 4s linear infinite}
.kvx .kvx-call .rg,.kvx .kvx-call .rr{position:absolute;inset:0;border-radius:50%;opacity:0;transition:opacity .55s cubic-bezier(.22,.9,.28,1);animation:kvspinb 2.4s linear infinite;pointer-events:none}
.kvx .kvx-call .rg{background:conic-gradient(from 0deg,#3ED27E,#2BB86A,#7FE3AC,#3ED27E)}
.kvx .kvx-call .rr{background:conic-gradient(from 0deg,#E5483C,#C43A30,#F07A6E,#E5483C)}
.kvx .kvx-call::after{content:"";position:absolute;inset:3px;border-radius:50%;background:#141210;transition:background .5s ease;z-index:1}
.kvx .kvx-call svg{position:relative;z-index:2}
.kvx .kvx-call{transition:transform .55s cubic-bezier(.22,.9,.28,1),box-shadow .55s cubic-bezier(.22,.9,.28,1)}
.kvx .kvx-call:hover{transform:translateX(-50%) scale(1.07);box-shadow:0 0 24px 3px rgba(62,210,126,.45),0 10px 30px -10px rgba(62,210,126,.55)}
.kvx .kvx-call:hover .rg{opacity:1}
@keyframes kvspinb{to{transform:rotate(1turn)}}
@keyframes kvglow{0%,100%{box-shadow:0 10px 24px -8px rgba(20,16,12,.35)}50%{box-shadow:0 12px 30px -8px rgba(20,16,12,.45),0 0 18px 0 rgba(226,104,62,.25)}}
/* live call: slow green breathing = mic on */
@keyframes kvlive{0%,100%{box-shadow:0 0 10px 0 rgba(62,210,126,.25)}50%{box-shadow:0 0 28px 5px rgba(62,210,126,.6)}}
.kvx .kvx-orb[data-live="1"] .kvx-call{animation:kvlive 2.6s ease-in-out infinite}
.kvx .kvx-orb[data-live="1"] .kvx-call .rg{opacity:1;animation-duration:6s}
/* hover during live call: red = hang up */
.kvx .kvx-orb[data-live="1"] .kvx-call:hover{box-shadow:0 0 24px 4px rgba(229,72,60,.5)}
.kvx .kvx-orb[data-live="1"] .kvx-call:hover .rg{opacity:0}
.kvx .kvx-orb[data-live="1"] .kvx-call:hover .rr{opacity:1}
.kvx .kvx-orb[data-live="1"] .kvx-call:hover::after{background:#7A1F18}
/* connecting: amber pulse + faster ring + amber ripples (real "connecting" affordance) */
@keyframes kvconn{0%,100%{box-shadow:0 0 10px 0 rgba(239,161,46,.3)}50%{box-shadow:0 0 26px 5px rgba(239,161,46,.62)}}
.kvx .kvx-orb[data-connecting="1"]::before{border-color:rgba(239,161,46,.62);animation:kvripple 1.7s ease-out infinite}
.kvx .kvx-orb[data-connecting="1"]::after{border-color:rgba(239,161,46,.62);animation:kvripple 1.7s ease-out infinite .85s}
.kvx .kvx-orb[data-connecting="1"] .kvx-call{animation:kvconn 1.15s ease-in-out infinite}
.kvx .kvx-orb[data-connecting="1"] .kvx-call::before{animation-duration:1s}
/* headless widget: keep the call button in normal flow */
.kvx kira-voice-agent{display:block}
.kvx .kvx-name{margin-top:26px;font-weight:600;font-size:clamp(16px,1.5vw,20px);line-height:1.2;color:var(--ink);letter-spacing:-.02em;text-align:center;text-wrap:balance;max-width:26ch;margin-left:auto;margin-right:auto}
.kvx .kvx-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:18px}
.kvx .kvx-chip{font-family:var(--sans);font-weight:500;font-size:13px;color:#6B6258;background:rgba(20,16,12,.05);border:none;padding:8px 15px;border-radius:999px;cursor:pointer;white-space:nowrap;transition:all .2s;min-height:38px}
.kvx .kvx-chip:hover{color:var(--ink);background:rgba(20,16,12,.09)}
.kvx .kvx-chip[data-on="1"]{background:rgba(20,16,12,.08);color:#1A1510;box-shadow:inset 0 0 0 1px rgba(20,16,12,.16)}
.kvx .kvx-recs{display:flex;gap:clamp(18px,3vw,44px);justify-content:center;align-items:flex-start;padding:clamp(20px,2.6vw,38px) 12px clamp(14px,2vw,24px);flex-wrap:wrap}
.kvx .kvx-rec{position:relative;border:0;background:transparent;cursor:pointer;width:clamp(150px,17vw,220px);font-family:var(--sans);padding:0}
.kvx .kvx-rec .orb::before{content:"";position:absolute;inset:-9%;background:inherit;background-size:cover;background-position:50% 50%;background-repeat:no-repeat;animation:kvxpan 10s ease-in-out infinite}
.kvx .kvx-rec .orb>*{position:relative;z-index:1}
.kvx .kvx-rec .orb{position:relative;display:block;width:100%;aspect-ratio:1;border-radius:50%;overflow:hidden;box-shadow:0 26px 55px -34px rgba(20,16,12,.45);transition:transform .35s cubic-bezier(.2,.8,.3,1)}
.kvx .kvx-rec:hover .orb{transform:scale(1.04);box-shadow:0 30px 62px -32px rgba(20,16,12,.55)}
.kvx .kvx-rec .pb{transition:transform .3s cubic-bezier(.2,.8,.3,1),background .3s,color .3s,box-shadow .3s}
.kvx .kvx-rec:hover .pb{transform:translate(-50%,-50%) scale(1.12);box-shadow:0 0 20px 2px rgba(62,210,126,.45)}
.kvx .kvx-rec .pb{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;background:#fff;display:grid;place-items:center;color:#141210;box-shadow:0 6px 18px rgba(20,16,12,.3)}
.kvx .eqbars{display:flex;align-items:center;gap:2.5px;height:18px}
.kvx .eqbars i{display:block;width:3px;height:100%;border-radius:9px;background:currentColor;transform-origin:center;transform:scaleY(.3);animation:kvxeq 1s ease-in-out infinite}
.kvx .eqbars i:nth-child(2){animation-delay:.22s}.kvx .eqbars i:nth-child(3){animation-delay:.44s}.kvx .eqbars i:nth-child(4){animation-delay:.66s}
@keyframes kvxeq{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
.kvx .kvx-rec[data-playing="1"] .pb{box-shadow:0 0 20px 2px rgba(62,210,126,.45)}
.kvx .kvx-rec[data-playing="1"] .orb::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 3px rgba(255,255,255,.55);animation:kvxlivering 2.2s ease-in-out infinite}
@keyframes kvxlivering{0%,100%{opacity:.35}50%{opacity:.9}}
.kvx .kvx-rec .t{margin-top:16px;font-weight:600;font-size:15px;color:var(--ink);letter-spacing:-.01em}
.kvx .kvx-rec .d{margin-top:6px;font-size:12.5px;line-height:1.45;color:#69625A}
.kvx .kvx-foot{display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap;margin-top:10px;padding:14px 6px 2px}
.kvx .kvx-foot .who{display:flex;align-items:center;gap:10px;min-width:0}
.kvx .kvx-foot .who .morb{width:30px;height:30px;border-radius:50%;background-size:cover;background-position:center;flex:0 0 auto}
.kvx .kvx-foot .who span{font-weight:600;font-size:14px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kvx .kvx-mode button[data-dis="1"]{opacity:.35;pointer-events:none;cursor:default}
  .kvx .kvx-mode{position:relative;display:inline-flex;gap:2px;padding:4px;border-radius:999px;background:rgba(20,16,12,.045)}
.kvx .kvx-mode button{position:relative;z-index:1;border:0;cursor:pointer;font-family:var(--sans);font-weight:600;font-size:13.5px;color:#69625A;background:transparent;padding:9px 18px;border-radius:999px;white-space:nowrap;transition:all .25s;min-height:38px}
.kvx .kvx-mode button[data-on="1"]{background:transparent;color:var(--ink)}
.kvx .kvx-mode button[data-dis="1"]{opacity:.38;cursor:not-allowed}
.kvx .pillslide{position:absolute;top:4px;height:0;left:0;width:0;border-radius:999px;background:#fff;box-shadow:0 4px 14px -6px rgba(20,16,12,.25);transition:left .35s cubic-bezier(.2,.8,.3,1),width .35s cubic-bezier(.2,.8,.3,1),top .35s cubic-bezier(.2,.8,.3,1),height .35s cubic-bezier(.2,.8,.3,1),opacity .2s;z-index:0;opacity:0}
.kvx .kvx-cta{display:inline-flex;align-items:center;height:48px;padding:0 22px;border-radius:999px;background:#141210;color:#fff;font-family:var(--sans);font-weight:600;font-size:14px;text-decoration:none;white-space:nowrap;transition:transform .2s}
.kvx .kvx-cta{transition:transform .5s cubic-bezier(.22,.9,.28,1),box-shadow .5s cubic-bezier(.22,.9,.28,1),background .4s ease}
.kvx .kvx-cta:hover{transform:scale(1.035);box-shadow:0 10px 26px -12px rgba(20,16,12,.4)}
.kvx a.kvx-cta[href*="Customers"]:hover{background:rgba(20,16,12,.12)}
@media(max-width:640px){
  .kvx .kvx-tabs{max-width:100%}
  .kvx .kvx-tab{flex:0 0 auto;scroll-snap-align:center}
}
@media(max-width:900px){
  .kvx .kvx-orb{width:min(34vw,176px)}
  .kvx .kvx-rec{width:clamp(140px,26vw,190px)}
}
@media(max-width:560px){
  .kvx .kvx-panel{border-radius:26px}
  /* Mobile: the JS-positioned white pill overflowed once rows wrapped, so paint the
     active state DIRECTLY on the button (real element, wrap-safe, never bleeds out)
     and hide the sliding indicator. Tabs become a balanced 2x2 grid (no orphaned "Sports"). */
  .kvx .pillslide{display:none !important}
  .kvx .kvx-mode{display:grid;grid-template-columns:1fr 1fr;width:100%;max-width:440px;margin:0 auto;gap:4px;overflow:visible}
  .kvx .kvx-mode button{width:100%;justify-content:center;text-align:center;padding:11px 8px;min-height:44px}
  .kvx .kvx-mode button[data-on="1"]{background:#fff;box-shadow:0 4px 14px -6px rgba(20,16,12,.25)}
  .kvx .kvx-tabs{max-width:100%;margin:0 auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;padding:6px;overflow:visible;flex-wrap:unset}
  .kvx .kvx-tab{width:100%;min-width:0;justify-content:center;padding:11px 6px;font-size:11.5px;min-height:44px;gap:7px;flex-direction:row}
  .kvx .kvx-tab .dot{display:block;width:13px;height:13px;flex:0 0 auto}
  .kvx .kvx-tab .lbl-full{display:none}
  .kvx .kvx-tab .lbl-short{display:inline}
  .kvx .kvx-tab[data-on="1"]{background:#fff;box-shadow:0 4px 14px -6px rgba(20,16,12,.25)}
  .kvx .kvx-foot{gap:14px;margin-top:12px}
  .kvx .kvx-orb{width:min(44vw,150px)}
  .kvx .kvx-recs{gap:18px}
  .kvx .kvx-rec{width:calc(50% - 10px)}
}
@media(max-width:374px){
  .kvx .kvx-tab{padding:10px 3px;font-size:11px}
  .kvx .kvx-mode button{font-size:12.5px}
}
/* Tablet (561-900): the JS sliding pill mis-sizes and pokes out of the track.
   Use the same reliable direct-paint active state and hide the JS pill. */
@media(min-width:561px) and (max-width:900px){
  .kvx .pillslide{display:none !important}
  .kvx .kvx-mode button[data-on="1"]{background:#fff;box-shadow:0 4px 14px -6px rgba(20,16,12,.25)}
  .kvx .kvx-tab[data-on="1"]{background:#fff;box-shadow:0 4px 14px -6px rgba(20,16,12,.25)}
}
/* Tabs: one equal 4-up grid at ALL widths <=900 so all four always fit, evenly, never overflow. */
@media(max-width:900px){
  .kvx .kvx-tabs{max-width:100%;margin:0 auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:4px;overflow:visible;flex-wrap:unset}
  .kvx .kvx-tab{width:100%;min-width:0;justify-content:center;padding:10px 5px;font-size:11px;min-height:44px;gap:6px;flex-direction:row}
  .kvx .kvx-tab .dot{display:block;width:12px;height:12px;flex:0 0 auto}
  .kvx .kvx-tab .lbl-full{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
}
/* --- call button clarity (mobile feedback) --- */
/* Unmistakable GREEN centre when a live call is on (not just a thin ring). */
.kvx .kvx-orb[data-live="1"] .kvx-call::after{background:radial-gradient(circle at 50% 36%,#25C873,#11934E)}
.kvx .kvx-orb[data-live="1"] .kvx-call .rg{opacity:1}
/* Touch devices have no real hover, but a tap leaves a STICKY :hover, which was
   painting the red "hang up" ring/centre over a live (green) call, making it look
   red/off while the demo was actually on. On touch, ignore hover entirely: idle
   shows no green, and a live call stays solid green. Desktop hover is unchanged. */
@media(hover:none){
  .kvx .kvx-call:hover{box-shadow:0 10px 24px -8px rgba(20,16,12,.35)}
  .kvx .kvx-call:hover .rg{opacity:0}
  .kvx .kvx-orb[data-live="1"] .kvx-call:hover .rr{opacity:0}
  .kvx .kvx-orb[data-live="1"] .kvx-call:hover .rg{opacity:1}
  .kvx .kvx-orb[data-live="1"] .kvx-call:hover::after{background:radial-gradient(circle at 50% 36%,#25C873,#11934E)}
}
/* ── Buttery transitions: mode switch (live↔recorded) + industry switch ── */
@keyframes kvcontentin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.kvx .kvx-stage,.kvx .kvx-recs{animation:kvcontentin .52s cubic-bezier(.16,.84,.44,1) both}
@keyframes kvimgin{from{opacity:0}to{opacity:1}}
.kvx .kvx-orbrow.kvnext .kvx-orbimg,.kvx .kvx-orbrow.kvprev .kvx-orbimg{animation:kvbreath 6s ease-in-out infinite,kvimgin .5s ease both}
@keyframes kvtextin{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.kvx .kvx-orbrow.kvnext ~ .kvx-name,.kvx .kvx-orbrow.kvprev ~ .kvx-name,.kvx .kvx-orbrow.kvnext ~ .kvx-chips,.kvx .kvx-orbrow.kvprev ~ .kvx-chips{animation:kvtextin .5s cubic-bezier(.16,.84,.44,1) both}
.kvx .kvx-name{transition:color .3s ease}
@media(prefers-reduced-motion:reduce){.kvx .kvx-stage,.kvx .kvx-recs,.kvx .kvx-orbrow.kvnext .kvx-orbimg,.kvx .kvx-orbrow.kvprev .kvx-orbimg,.kvx .kvx-orbrow.kvnext ~ .kvx-name,.kvx .kvx-orbrow.kvprev ~ .kvx-name,.kvx .kvx-orbrow.kvnext ~ .kvx-chips,.kvx .kvx-orbrow.kvprev ~ .kvx-chips{animation:none}}