/* Ported from the current homepage; tokens scoped to the widgets so they don't leak. */
.wire-chat .aichat, .wire-chat, #heroCall, #sxCall, .hero-call, .wire-magic{
  --grad:linear-gradient(135deg,#6366f1,#8b5cf6 50%,#a855f7);
  --grad-soft:linear-gradient(135deg,rgba(99,102,241,.08),rgba(168,85,247,.08));
  --primary:#6b5cf6; --green:#0f9b6e;
  --ink:#0e0e16; --ink2:#2c2c3a; --muted:#6c6c7e; --muted2:#9a9aab;
  --bg2:#f7f7fa; --surface:#fff; --border:#ececf0; --border2:#e3e3ea;
  --sans:'Outfit',system-ui,-apple-system,sans-serif; --hgang:120deg;
}

/* ==== chatbot CSS ==== */
/* ---------- live chat (mouse-reactive .aichat, lifted from v3) ---------- */
  .chat-sec{background:#fff; overflow:hidden;}
.aichat{border:2px solid transparent;background-image:linear-gradient(var(--surface),var(--surface)),var(--grad);background-origin:border-box;background-clip:padding-box,border-box;position:relative;overflow:hidden;padding:18px 17px;border-radius:24px;animation:aiGlow 4.5s ease-in-out infinite;display:flex;flex-direction:column;transform-style:preserve-3d;transition:transform .35s cubic-bezier(.22,.65,.3,1)}
.aichat.tilting{transition:transform .12s ease-out}
.aichat::before{content:"";position:absolute;top:-60px;right:-50px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(168,85,247,.16),transparent 65%);pointer-events:none}
.aichat::after{content:"";position:absolute;top:0;left:-80%;width:55%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);animation:aiSheen 7s ease-in-out infinite;pointer-events:none;z-index:3}
.aichat-head{display:flex;align-items:center;gap:11px;margin-bottom:11px;position:relative;z-index:2}
.aichat-name{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:15px;font-weight:800}
.aichat-head b{font-size:14.5px;display:block}
.aichat-head .sub{font-size:12px;color:var(--muted)}
.aichat-log{position:relative;z-index:2;max-height:300px;overflow-y:auto;margin:4px 0 10px;scroll-behavior:smooth;display:flex;flex-direction:column}
.aichat-log::-webkit-scrollbar{width:6px}
.aichat-log::-webkit-scrollbar-thumb{background:#dcdce4;border-radius:3px}
.cmsg{max-width:85%;font-size:13.5px;line-height:1.5;border-radius:14px;padding:9px 13px;margin-top:7px;animation:cardIn .3s both}
.cmsg.me{margin-left:auto;background:var(--grad);color:#fff;border-bottom-right-radius:5px}
.cmsg.ai{background:var(--bg2);color:var(--ink2);border-bottom-left-radius:5px}
.cmsg .act{margin-top:6px;font-size:11.5px;font-weight:700;color:var(--primary);display:inline-flex;align-items:center;gap:5px}
.cmsg .act svg{width:12px;height:12px}
.aichat-log .cmsg-signup{align-self:flex-start;margin-top:11px;display:inline-flex;align-items:center;gap:6px;background:var(--grad);color:#fff;font-size:13.5px;font-weight:800;letter-spacing:-.01em;padding:11px 20px;border-radius:99px;box-shadow:0 10px 22px rgba(107,92,246,.4);transition:transform .18s ease,box-shadow .18s ease;animation:cardIn .3s both}
.aichat-log .cmsg-signup:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(107,92,246,.55)}
.cmsg.think{display:inline-flex;align-items:center;gap:4px;padding:11px 14px;background:var(--bg2);border-bottom-left-radius:5px;align-self:flex-start;margin-top:7px;border-radius:14px}
.cmsg.think span{width:7px;height:7px;border-radius:50%;background:#c3c3cf;animation:blinkdot 1.4s infinite}
.cmsg.think span:nth-child(2){animation-delay:.2s}
.cmsg.think span:nth-child(3){animation-delay:.4s}
.aichat-sug{position:relative;z-index:2;display:flex;gap:7px;flex-wrap:wrap;margin-bottom:10px}
.ghostchip{font-size:11.5px;font-weight:600;font-family:inherit;color:var(--muted);background:transparent;border:1px dashed var(--border2);border-radius:99px;padding:6px 11px;cursor:pointer;transition:all .15s}
.ghostchip:hover{color:var(--primary);border-color:var(--primary);border-style:solid;background:var(--grad-soft)}
.aichat-bar{position:relative;z-index:2;display:flex;gap:8px;align-items:center;background:var(--bg2);border:1px solid var(--border2);border-radius:13px;padding:5px 5px 5px 11px;transition:border-color .15s,box-shadow .15s}
.aichat-bar:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px rgba(107,92,246,.12);background:var(--surface)}
.aichat-bar input{flex:1;border:0;outline:none;background:transparent;font-family:inherit;font-size:14px;color:var(--ink);min-width:0}
.aichat-bar .att,.aichat-bar .mic{background:transparent;border:0;color:var(--muted2);border-radius:10px;width:34px;height:36px;display:grid;place-items:center;cursor:pointer;transition:color .15s,transform .15s;flex:none}
.aichat-bar .att:hover,.aichat-bar .mic:hover{color:var(--primary);transform:scale(1.08)}
.aichat-bar .go{background:var(--grad);border:0;color:#fff;border-radius:10px;width:40px;height:38px;display:grid;place-items:center;cursor:pointer;transition:transform .15s,box-shadow .15s;flex:none}
.aichat-bar .go:hover{transform:translateY(-1px);box-shadow:0 6px 14px rgba(107,92,246,.4)}
.call-row{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:13px 2px 2px;margin-top:8px;border-top:1px dashed var(--border2)}
.call-row .lbl{font-size:12.5px;color:var(--muted);flex-shrink:0}
.call-row input{flex:1;min-width:0;border:1px solid var(--border2);border-radius:99px;padding:9px 14px;font-family:inherit;font-size:13.5px;outline:none}
.call-row input:focus{border-color:var(--primary)}
/* chat 'call us instead' (mobile only) */
  .call-row .call-us-btn{display:none;text-decoration:none;background:#fff;color:var(--green);border:1.5px solid var(--green);align-items:center;justify-content:center}
/* country calling-code selector (hero + chat) */
  .dial{flex:none;border:1.5px solid var(--border2);border-radius:99px;padding:12px 8px;font-family:var(--sans);font-size:14px;background:#fff;color:var(--ink);outline:none;cursor:pointer;max-width:104px}
.dial:focus{border-color:var(--primary)}
.call-row .dial{padding:9px 8px;font-size:13px;border-radius:99px;border-color:var(--border2)}
/* live-chat "Prefer voice?" row: wrap so the phone input and button each get a full line */
    .call-row{flex-wrap:wrap;}
.call-row .lbl{flex-basis:100%;}
.call-row .dial{flex:0 0 auto;}
.call-row input{flex:1 1 auto; min-width:0;}
.call-row .call-btn{flex:1 1 100%; width:100%; text-align:center;}
.call-row .call-us-btn{display:flex; flex:1 1 100%; width:100%;}
.aichat{transform:none !important;}
/* call-me consent disclosure (reveals when the call box is focused/clicked) */
  .call-row .call-consent{flex-basis:100%;order:9;margin:0;max-height:0;opacity:0;overflow:hidden;font-size:11px;line-height:1.5;color:var(--muted2);transition:max-height .3s ease,opacity .3s ease,margin .3s ease}
.call-row:focus-within .call-consent{max-height:64px;opacity:1;margin-top:8px}
.call-row .call-consent a{color:var(--primary);font-weight:600;text-decoration:underline}
.v5m-callfield .dial{height:46px;border:1px solid var(--border);border-radius:10px;padding:0 8px;font-size:15px;background:#fff}
.chat-sec{padding-top:44px;}

/* ==== inline call CSS ==== */
/* hero smart call: laptop expands to a 'Sendie calls you' field, mobile dials our number */
  .hero-call{position:relative;display:inline-flex;align-items:stretch}
.hero-call .hero-call-btn{position:relative;height:100%;overflow:visible}
.hero-call .hero-call-btn::before{content:"";position:absolute;inset:-2px;border-radius:99px;padding:2px;background:conic-gradient(from var(--hgang),#6366f1,#a855f7,#22d3ee,#8b5cf6,#6366f1);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:hgSpin 4s linear infinite;pointer-events:none}
.hero-call .hero-call-btn::after{content:"";position:absolute;inset:0;border-radius:99px;box-shadow:0 0 22px rgba(139,92,246,.0);animation:hgPulse 3.2s ease-in-out infinite;pointer-events:none}
.hero-call .hero-call-field{display:inline-flex;align-items:center;gap:8px;max-width:0;opacity:0;overflow:hidden;transition:max-width .42s cubic-bezier(.2,.8,.2,1),opacity .3s ease}
.hero-call.open .hero-call-btn{display:none}
.hero-call.open .hero-call-field{max-width:560px;opacity:1}
/* country calling-code selector (hero + chat) */
  .dial{flex:none;border:1.5px solid var(--border2);border-radius:99px;padding:12px 8px;font-family:var(--sans);font-size:14px;background:#fff;color:var(--ink);outline:none;cursor:pointer;max-width:104px}
.dial:focus{border-color:var(--primary)}
.call-row .dial{padding:9px 8px;font-size:13px;border-radius:99px;border-color:var(--border2)}
.hero-call .hero-call-field input{border:1.5px solid var(--border2);border-radius:99px;padding:12px 17px;font-family:var(--sans);font-size:14.5px;outline:none;min-width:180px;color:var(--ink)}
.hero-call .hero-call-field input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(107,92,246,.12)}
.hero-call .hero-call-go{padding:12px 20px;font-size:14px}
.hero-call .hero-call-msg{display:inline-flex;align-items:center;gap:7px;font-size:14.5px;font-weight:700;color:var(--green);white-space:nowrap}
/* consent: shows only while the number field is focused */
  .hero-call .hero-call-consent{position:absolute;top:calc(100% + 9px);left:0;width:min(420px,82vw);font-size:11px;line-height:1.45;color:var(--muted2);text-align:left;background:#fff;border:1px solid var(--border);border-radius:12px;padding:9px 12px;box-shadow:0 12px 30px rgba(16,16,30,.14);z-index:6;opacity:0;pointer-events:none;transform:translateY(-4px);transition:opacity .25s ease,transform .25s ease}
.hero-call .hero-call-field:focus-within ~ .hero-call-consent{opacity:1;pointer-events:auto;transform:none}
.hero-call .hero-call-consent a{color:var(--primary);font-weight:600;text-decoration:underline}
.hero-call .hero-call-btn::after{animation:none}
.call-row .dial{flex:0 0 auto;}

/* Reuse our real #heroCall call-me component, restyled narrow for the yellow hero */
.cc-copy .hero-call{display:block;margin-top:2px}
.cc-copy .hero-call-btn{display:inline-flex;align-items:center;gap:8px;width:auto;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid rgba(255,255,255,.3);background:linear-gradient(135deg,rgba(118,87,255,.96),rgba(185,76,255,.96));color:#fff;font-weight:900;font-size:13px;cursor:pointer;box-shadow:0 16px 40px rgba(118,87,255,.4)}
.cc-copy .hero-call-consent{color:#5f596b}
/* Live-call state on the Talk buttons: clear red so it never reads "Talk to Sendie" mid-call. */
.hero-call-btn.oncall,.v5m-talkbtn.oncall{background:#ef4444!important;border-color:#ef4444!important;color:#fff!important}
.hero-call-btn.oncall svg,.v5m-talkbtn.oncall svg{stroke:#fff}
.v5m-talkbtn.oncall .v5m-ph{background:rgba(255,255,255,.2)}
.v5m-talkbtn{position:relative;overflow:visible;display:flex;align-items:center;justify-content:center;gap:11px;height:54px;border:1.5px solid rgba(107,92,246,.35);border-radius:14px;background:#fff;color:var(--primary);font-weight:800;font-size:15.5px;box-shadow:0 6px 18px rgba(16,16,30,.06);cursor:pointer}
/* same flowing AI-magic border as the web Try-a-call button */
      .v5m-talkbtn::before{content:"";position:absolute;inset:-2px;border-radius:16px;padding:2px;background:conic-gradient(from var(--hgang),#6366f1,#a855f7,#22d3ee,#8b5cf6,#6366f1);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:hgSpin 4s linear infinite;pointer-events:none}
.v5m-callfield{display:none;flex-direction:column;gap:8px;background:#fff;border:1.5px solid var(--border);border-radius:14px;padding:12px;box-shadow:0 6px 18px rgba(16,16,30,.06)}
.v5m-talk.open .v5m-talkbtn{display:none}
.v5m-talk.open .v5m-callfield{display:flex}
.v5m-callfield .dial{height:46px;border:1px solid var(--border);border-radius:10px;padding:0 8px;font-size:15px;background:#fff}
.v5m-callfield input{height:48px;border:1.5px solid var(--border);border-radius:10px;padding:0 12px;font-size:16px;outline:none}
.v5m-callgo{height:50px;border:none;border-radius:11px;background:var(--grad);color:#fff;font-weight:800;font-size:15px;cursor:pointer}
.v5m-callmsg{font-weight:700;color:var(--ink);text-align:center;padding:8px}
.cch .hero-call{display:inline-flex;align-items:center}
.cch .hero-call-btn{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:14px;color:#0e0b1c;background:#fff;border:1.5px solid #e4e0f0;border-radius:999px;padding:12px 18px;cursor:pointer}
.cch .hero-call-btn:hover{border-color:#cfc8ea}
.cch-try .hero-call-btn{border-radius:999px;padding:13px 22px;font-size:15px}
.sx-call{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(14px);z-index:4000;display:none;align-items:center;gap:12px;
    background:#14121d;color:#fff;border-radius:99px;padding:11px 12px 11px 18px;box-shadow:0 20px 50px -14px rgba(20,10,60,.6);opacity:0;transition:opacity .2s ease,transform .2s ease;font-family:'Outfit',sans-serif}
.sx-call.open{display:flex;opacity:1;transform:translateX(-50%) translateY(0)}
.sx-call .sx-orb{width:12px;height:12px;border-radius:50%;background:#22d37a;box-shadow:0 0 0 0 rgba(34,211,122,.6);animation:sxPulse 1.4s infinite}
.sx-call .sx-txt{font-size:14px;font-weight:700;white-space:nowrap}
.sx-call .sx-end{border:0;background:#ef4444;color:#fff;font-weight:800;font-size:13px;border-radius:99px;padding:8px 16px;cursor:pointer;font-family:inherit}
.sx-call .sx-end:hover{background:#dc2626}

/* ==== keyframes ==== */
@keyframes aiSheen{0%,72%{left:-80%}88%,100%{left:160%}}
@keyframes blinkdot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
@keyframes cardIn{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
@keyframes hgPulse{0%,100%{box-shadow:0 0 16px rgba(139,92,246,0)}50%{box-shadow:0 0 26px rgba(139,92,246,.4)}}
@keyframes aiGlow{0%,100%{box-shadow:0 8px 30px rgba(107,92,246,.14)}50%{box-shadow:0 12px 44px rgba(124,92,246,.32),0 0 0 6px rgba(107,92,246,.05)}}
@keyframes hgSpin{to{--hgang:360deg}}
@keyframes sxPulse{0%{box-shadow:0 0 0 0 rgba(34,211,122,.55)}70%{box-shadow:0 0 0 9px rgba(34,211,122,0)}100%{box-shadow:0 0 0 0 rgba(34,211,122,0)}}

/* new-page adaptations (container reveal + on-call red on the new .call-magic button) */
#heroCall{display:none} #heroCall.open{display:block;margin-top:16px}
.call-magic.oncall{background:#e23b3b!important;border-color:#e23b3b!important;color:#fff!important}
.call-magic.oncall .call-orb{display:none}

#heroCall .call-btn,.wire-chat .call-btn{font-size:13px;font-weight:600;color:#fff;background:var(--green);border:none;padding:12px 18px;border-radius:99px;cursor:pointer;white-space:nowrap}


/* ==== exact scan animation from the current homepage (.hv-load) ==== */
/* Stepped 'Building your Sendie' loader, mirrors the in-app onboarding progress. */
  .hv-load{padding:4px 2px 2px}
.hv-load .bar{height:7px;border-radius:99px;background:var(--border2);overflow:hidden;margin:0 0 20px}
.hv-load .bar i{display:block;height:100%;width:10%;border-radius:99px;background:linear-gradient(90deg,#6366f1,#a855f7,#ec4899);transition:width .6s cubic-bezier(.3,.7,.3,1)}
.hv-load ul{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.hv-load li{display:flex;align-items:center;gap:12px;font-size:14.5px;font-weight:700;color:var(--muted2);transition:color .3s}
.hv-load li.on{color:var(--ink)}
.hv-load li b{font-weight:800}
.hv-load li .dot{width:24px;height:24px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--bg2);border:1px solid var(--border);transition:background .3s,border-color .3s}
.hv-load li .dot .ck{width:13px;height:13px;stroke:#fff;fill:none;stroke-width:3;opacity:0;transition:opacity .25s}
.hv-load li .dot .sp{display:none;width:12px;height:12px;border-radius:50%;border:2px solid var(--border2);border-top-color:var(--primary);animation:hvsp .7s linear infinite}
.hv-load li.cur .dot{border-color:var(--primary);background:var(--surface)}
.hv-load li.cur .dot .sp{display:block}
.hv-load li.done .dot{background:var(--grad);border-color:transparent}
.hv-load li.done .dot .ck{opacity:1}
.hv-load .hint{margin:18px 0 0;font-size:13px;color:var(--muted2)}
@keyframes hvsp{to{transform:rotate(360deg)}}
.buddy{width:44px;height:44px;flex:none;display:grid;place-items:center;filter:drop-shadow(0 6px 14px rgba(107,92,246,.4));animation:buddyBob 5s ease-in-out infinite}
.buddy svg{width:44px;height:44px}
@keyframes buddyBob{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-2px) rotate(-2deg)}65%{transform:translateY(0) rotate(2deg)}}
@keyframes buddyBlink{0%,91%,100%{transform:scaleY(1)}94%{transform:scaleY(.12)}97%{transform:scaleY(1)}}