/* ============================================================
   AI CALLER — BASE + COMPONENTS
   ============================================================ */

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden}
/* Keep anchored sections clear of the fixed header when jumped to via #hash */
section,main,#demo-form{scroll-margin-top:calc(var(--hdr-h,80px) + 2rem)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important}
}
body{width:100%;max-width:100vw;margin:0;font-family:var(--font-body);font-size:var(--t-body);line-height:var(--lh-body);overflow-x:hidden;
  display:flex;flex-direction:column;min-height:100vh;
  color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
main{flex-grow:1}
img,svg,video{max-width:100%;display:block}
a{color:inherit}
ul,ol{padding:0;margin:0;list-style:none}
h1,h2,h3,h4,h5,p,figure,blockquote{margin:0}
button{font-family:inherit;cursor:pointer}
input,select,textarea,button{font-family:inherit;font-size:inherit;color:inherit}
table{border-collapse:collapse;width:100%}

h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:var(--lh-tight);
  letter-spacing:var(--ls-tight);color:var(--ink)}
h1{font-size:var(--t-hero);line-height:var(--lh-hero);letter-spacing:var(--ls-hero)}
h2{font-size:var(--t-d1)}
h3{font-size:var(--t-d2)}
h4{font-size:var(--t-h)}
p{color:var(--ink-70)}
strong{color:var(--ink);font-weight:600}

.mono{font-family:var(--font-mono)}
.lede{font-size:var(--t-lede);color:var(--ink-70);line-height:1.55}

.eyebrow{display:inline-flex;align-items:center;gap:.55em;font-family:var(--font-mono);
  font-size:var(--t-micro);letter-spacing:var(--ls-wider);text-transform:uppercase;color:var(--amber-deep);font-weight:500}
.eyebrow::before{content:'';width:16px;height:1.5px;background:currentColor;flex-shrink:0}

.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.wrap-narrow{max-width:var(--max-narrow);margin-inline:auto;padding-inline:var(--pad)}

.skip-link{position:absolute;top:-999px;left:var(--s-s);background:var(--ink);color:#fff;
  padding:.75em 1.25em;border-radius:var(--r-s);z-index:var(--z-toast);font-weight:600;text-decoration:none}
.skip-link:focus{top:var(--s-s)}
:focus-visible{outline:2.5px solid var(--amber);outline-offset:3px;border-radius:2px}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- BUTTONS ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-weight:650;font-size:var(--t-sm);letter-spacing:-.005em;
  padding:.92em 1.6em;border-radius:var(--r-pill);border:1.5px solid transparent;
  text-decoration:none;white-space:nowrap;position:relative;
  transition:transform var(--d-fast) var(--ease),box-shadow var(--d-fast) var(--ease),
    background var(--d-fast) var(--ease),border-color var(--d-fast) var(--ease),color var(--d-fast) var(--ease)}
.btn:hover{transform:translateY(-1.5px)}
.btn:active{transform:translateY(0)}

.btn--amber{background:var(--amber);color:#12100D;box-shadow:var(--sh-amber)}
.btn--amber:hover{background:var(--amber-hot);box-shadow:0 14px 40px rgba(232,130,26,.38)}
.btn--dark{background:var(--ink);color:#fff}
.btn--dark:hover{background:#000}
.dark .btn--dark{background:var(--on-night);color:var(--night)}
.dark .btn--dark:hover{background:#fff}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--ink-20)}
.btn--ghost:hover{border-color:var(--ink);background:var(--ink-06)}
.dark .btn--ghost,.hero .btn--ghost,.phero .btn--ghost,.cta .btn--ghost{color:var(--on-night);border-color:rgba(246,243,237,.28)}
.dark .btn--ghost:hover,.hero .btn--ghost:hover,.phero .btn--ghost:hover,.cta .btn--ghost:hover{border-color:rgba(246,243,237,.5);background:rgba(246,243,237,.08)}
.btn--white{background:#fff;color:var(--ink)}
.btn--white:hover{background:var(--paper-dim)}
.btn--sm{padding:.62em 1.15em;font-size:var(--t-label)}
.btn--lg{padding:1.08em 2em;font-size:var(--t-body)}
.btn--block{width:100%}
.btn-arrow{width:15px;height:15px;transition:transform var(--d-fast) var(--ease)}
.btn:hover .btn-arrow{transform:translateX(4px)}
.btn[aria-disabled="true"]{opacity:.55;pointer-events:none}

/* pulsing ring on the primary conversion CTA */
.btn--pulse::after{content:'';position:absolute;inset:-3px;border-radius:inherit;
  border:2px solid var(--amber);opacity:0;animation:btn-pulse 2.6s var(--ease) infinite}
@keyframes btn-pulse{0%{opacity:.65;transform:scale(1)}70%{opacity:0;transform:scale(1.14)}100%{opacity:0;transform:scale(1.14)}}
@media (prefers-reduced-motion:reduce){.btn--pulse::after{animation:none;opacity:0}}

/* ---------- BADGES / PILLS ---------- */
.pill{display:inline-flex;align-items:center;gap:.45em;font-family:var(--font-mono);
  font-size:var(--t-micro);letter-spacing:var(--ls-wide);text-transform:uppercase;font-weight:500;
  padding:.34em .75em;border-radius:var(--r-pill);white-space:nowrap}
.pill::before{content:'';width:6px;height:6px;border-radius:50%;flex-shrink:0}
.pill--sim{background:var(--st-sim-t);color:var(--st-sim)}.pill--sim::before{background:var(--st-sim)}
.pill--prep{background:var(--st-prep-t);color:var(--st-prep)}.pill--prep::before{background:var(--st-prep)}
.pill--wait{background:var(--st-wait-t);color:var(--st-wait)}.pill--wait::before{background:var(--st-wait);animation:blip 1.9s ease-in-out infinite}
.pill--exec{background:var(--st-exec-t);color:var(--st-exec)}.pill--exec::before{background:var(--st-exec)}
.pill--fail{background:var(--st-fail-t);color:var(--st-fail)}.pill--fail::before{background:var(--st-fail)}
.pill--esc{background:var(--st-esc-t);color:var(--st-esc)}.pill--esc::before{background:var(--st-esc)}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.28}}

.tag{display:inline-flex;align-items:center;gap:.4em;background:var(--amber-tint);color:var(--amber-ink);
  font-size:var(--t-micro);font-weight:600;letter-spacing:var(--ls-wide);text-transform:uppercase;
  padding:.4em .85em;border-radius:var(--r-pill)}
.dark .tag{background:rgba(232,130,26,.16);color:var(--amber-hot)}

/* ---------- FORMS ---------- */
.field{display:flex;flex-direction:column;gap:.4em;margin-bottom:var(--s-s)}
.field label{font-size:var(--t-sm);font-weight:600;color:var(--ink)}
.field .hint{font-size:var(--t-micro);color:var(--ink-55)}
.field input,.field select,.field textarea{
  padding:.88em 1em;border:1.5px solid var(--ink-20);border-radius:var(--r-s);
  background:var(--surface);color:var(--ink);transition:border-color var(--d-fast) var(--ease)}
.field input:hover,.field select:hover{border-color:var(--ink-40)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--amber);box-shadow:0 0 0 3px var(--amber-a24)}
.field textarea{resize:vertical;min-height:6em}
[aria-invalid="true"]{border-color:var(--st-fail)!important}
.err{font-size:var(--t-micro);color:var(--st-fail);display:none}
.err.show{display:block}
.check-row{display:flex;align-items:flex-start;gap:.6em;font-size:var(--t-sm);color:var(--ink-70)}
.check-row input{margin-top:.32em;accent-color:var(--amber)}

.form-status{display:none;padding:.85em 1.1em;border-radius:var(--r-s);font-size:var(--t-sm);margin-bottom:var(--s-s)}
.form-status.show{display:block}
.form-status--err{background:var(--st-fail-t);color:var(--st-fail)}
.form-status--ok{background:var(--st-exec-t);color:var(--st-exec)}
.form-status--load{background:var(--st-prep-t);color:var(--st-prep)}

/* ---------- SECTION SHELL ---------- */
.sec{padding-block:var(--s-3xl);position:relative}
.sec--tight{padding-block:var(--s-2xl)}
.sec--soft{background:var(--paper-soft)}
.sec-head{max-width:60ch;margin-bottom:var(--s-xl)}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head h2{margin-block:var(--s-s) var(--s-s)}
.sec-head .lede{max-width:56ch}
.sec-head.center .lede{margin-inline:auto}

/* ---------- REVEAL ---------- */
.rv{opacity:0;transform:translateY(22px);transition:opacity var(--d-slow) var(--ease),transform var(--d-slow) var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-1{transition-delay:80ms}.rv-2{transition-delay:160ms}.rv-3{transition-delay:240ms}
.rv-4{transition-delay:320ms}.rv-5{transition-delay:400ms}
@media (prefers-reduced-motion:reduce){.rv{opacity:1!important;transform:none!important}}

/* ============================================================
   CHAT WIDGET OVERRIDES (CSP Fallback)
   ============================================================ */
/* Force the wrapper to float in the corner */
#sc-widget-button {
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  z-index: 999999 !important;
}

/* Shape the inner div into a sleek circular button.
   Brand colors are locked inline so the widget never flashes its
   unstyled default look while the third-party CSS is in flight. */
#sc-widget-button > div {
  width: 60px !important;
  height: 60px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: var(--amber) !important;
  color: #FFFFFF !important;
  box-shadow: 0 8px 24px rgba(232, 130, 26, 0.35) !important;
  cursor: pointer !important;
  transition: transform 0.2s ease !important;
}

/* The script also injects a redundant launcher bubble; keep only
   our single floating action button */
#sc-launcher-bubble {
  display: none !important;
}

/* Add a hover effect */
#sc-widget-button > div:hover {
  transform: scale(1.08) !important;
}

/* 1. Banish the injected 3rd-party SVG completely */
#sc-widget-button svg {
  display: none !important;
}

/* 2. Draw our custom animated Voice Wave SVG */
#sc-widget-button > div::after {
  content: '';
  display: block;
  width: 32px;
  height: 32px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='16' cy='16' r='14' opacity='0.8'/%3E%3Ccircle cx='16' cy='16' r='2.5' fill='%23FFFFFF'%3E%3Canimate attributeName='r' values='2.5; 4.5; 2.5' dur='2s' repeatCount='indefinite'/%3E%3C/circle%3E%3Cpath d='M10 10v12'%3E%3Canimate attributeName='d' values='M10 10v12; M10 7v18; M10 10v12' dur='1.2s' repeatCount='indefinite'/%3E%3C/path%3E%3Cpath d='M22 10v12'%3E%3Canimate attributeName='d' values='M22 10v12; M22 7v18; M22 10v12' dur='1.2s' repeatCount='indefinite'/%3E%3C/path%3E%3Cpath d='M13 12v8'%3E%3Canimate attributeName='d' values='M13 12v8; M13 9v14; M13 12v8' dur='1.2s' repeatCount='indefinite' begin='0.2s'/%3E%3C/path%3E%3Cpath d='M19 12v8'%3E%3Canimate attributeName='d' values='M19 12v8; M19 9v14; M19 12v8' dur='1.2s' repeatCount='indefinite' begin='0.2s'/%3E%3C/path%3E%3Cpath d='M2 16h4'/%3E%3Cpath d='M26 16h4'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0;
  animation: sc-icon-reveal 0.3s ease forwards 0.6s;
}

@keyframes sc-icon-reveal {
  to {
    opacity: 1;
  }
}

/* RTL Support: Move everything to the left corner for Arabic */
html[dir="rtl"] #sc-widget-button {
  right: auto !important;
  left: 24px !important;
}

html[dir="rtl"] #sc-agent-iframe,
html[dir="rtl"] #sc-launcher-bubble {
  right: auto !important;
  left: 20px !important;
}