/* ===================== Page hero ===================== */
.sc-hero{
  padding:64px 0 var(--section-pad-y-sm);
}
.sc-hero-grid{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:48px;
  align-items:center;
}
.sc-hero h1{
  font-size:clamp(2.1rem, 4.2vw, 3.1rem);
  line-height:1.1;
  font-weight:800;
  letter-spacing:-0.035em;
  margin:0 0 20px;
}
.sc-hero-lede{
  font-size:1.1rem;
  line-height:1.55;
  color:var(--text-secondary);
  margin-bottom:28px;
}
.sc-hero-lede strong{color:var(--text-primary);font-weight:600;}
.sc-hero-cta{
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
}
.sc-trust-points{
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  margin-top:22px;
}
.sc-trust-points li{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:0.86rem;
  font-weight:500;
  color:var(--text-secondary);
}
.sc-trust-points svg{width:15px;height:15px;color:var(--success-text);flex-shrink:0;}

/* =====================================================================
   Hero motion graphic: the chatbot handling buyer questions on its own.
   Same architecture as the Trust Center and questionnaire graphics: the
   shared scene loop toggles .is-active, CSS owns the in-scene timing.
   ===================================================================== */
.sc-motion{
  background:var(--background);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
}
/* The frame is the agent, not the chat window: Sekorti is visibly the thing
   answering, and the status line narrates what it is doing right now. */
.sc-motion-bar{
  display:flex;
  align-items:center;
  gap:9px;
  padding:12px 16px;
  background:var(--navy);
  border-bottom:1px solid var(--border);
}
.sc-motion-bar img{width:19px;height:19px;flex-shrink:0;}
.sc-motion-title{
  font-size:0.84rem;
  font-weight:700;
  color:#fff;
}
.sc-autopilot{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:2px 9px;
  border-radius:var(--radius-pill);
  background:rgba(122,217,255,.16);
  color:#9fe2ff;
  font-size:0.66rem;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  flex-shrink:0;
}
.sc-autopilot svg{width:10px;height:10px;}

.sc-motion-status{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 16px;
  background:var(--surface);
  border-bottom:1px solid var(--border);
  min-width:0;
}
.sc-pulse{
  width:7px;height:7px;
  border-radius:50%;
  background:var(--brand-primary);
  flex-shrink:0;
  animation:scPulse 1.4s ease-in-out infinite;
}
@keyframes scPulse{
  0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(47,62,158,.4);}
  50%{opacity:.6;box-shadow:0 0 0 5px rgba(47,62,158,0);}
}
.sc-action{
  font-size:0.76rem;
  font-weight:600;
  color:var(--text-secondary);
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
/* Chat / voice, shown as a switch the agent flips itself. Both options stay
   visible so it reads as two modes rather than one changing label. */
.sc-mode{
  display:inline-flex;
  align-items:center;
  gap:2px;
  margin-left:auto;
  padding:2px;
  border-radius:var(--radius-pill);
  background:var(--border);
  flex-shrink:0;
}
.sc-mode > span{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:3px 9px;
  border-radius:var(--radius-pill);
  font-size:0.66rem;
  font-weight:700;
  color:var(--text-tertiary);
  white-space:nowrap;
  transition:background-color .3s ease, color .3s ease;
}
.sc-mode > span svg{width:11px;height:11px;flex-shrink:0;}
.sc-mode > span.is-on{
  background:var(--background);
  color:var(--brand-primary);
  box-shadow:var(--shadow-sm);
}

.sc-motion-stage{
  position:relative;
  height:268px;
}
.sc-scene{
  position:absolute;
  inset:0;
  padding:20px;
  display:flex;
  flex-direction:column;
  opacity:0;
  visibility:hidden;
  transition:opacity .45s ease, visibility .45s;
}
.sc-scene.is-active{opacity:1;visibility:visible;}
.sc-scene-body{margin-block:auto;width:100%;min-width:0;}
.sc-scene-title{
  display:block;
  font-size:0.7rem;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--text-tertiary);
  margin-bottom:14px;
}
.sc-scene.is-active .sc-anim{
  animation:scRise .5s cubic-bezier(.22,.9,.32,1) both;
}
.sc-scene.is-active .sc-anim:nth-child(2){animation-delay:.10s;}
.sc-scene.is-active .sc-anim:nth-child(3){animation-delay:.55s;}
.sc-scene.is-active .sc-anim:nth-child(4){animation-delay:1.2s;}
@keyframes scRise{
  from{opacity:0;transform:translateY(10px);}
  to{opacity:1;transform:none;}
}

/* ---- Chat bubbles, shared by the first three scenes ---- */
.sc-m-thread{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:9px;
  min-width:0;
}
.sc-m-ask{
  align-self:flex-end;
  max-width:82%;
  padding:9px 12px;
  border-radius:14px 14px 4px 14px;
  background:var(--brand-primary);
  color:#fff;
  font-size:0.78rem;
  font-weight:500;
  line-height:1.45;
}
.sc-m-reply{
  align-self:flex-start;
  width:100%;
  padding:11px 13px;
  border-radius:14px 14px 14px 4px;
  background:var(--surface);
  border:1px solid var(--border);
  font-size:0.78rem;
  line-height:1.5;
  color:var(--text-secondary);
}
.sc-m-reply strong{color:var(--text-primary);}
.sc-m-cite{
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:9px;
  padding-top:9px;
  border-top:1px solid var(--border);
  font-size:0.7rem;
  font-weight:600;
  color:var(--text-tertiary);
  min-width:0;
}
.sc-m-cite svg{width:11px;height:11px;color:var(--success-text);flex-shrink:0;}
.sc-m-cite span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* ---- Scene 1: a question answered, with the typing beat before it ---- */
.sc-m-typing{
  align-self:flex-start;
  display:inline-flex;
  gap:4px;
  padding:11px 13px;
  border-radius:14px 14px 14px 4px;
  background:var(--surface);
  border:1px solid var(--border);
  overflow:hidden;
}
.sc-m-typing i{
  width:5px;height:5px;
  border-radius:50%;
  background:var(--text-tertiary);
  animation:scDot 1s ease-in-out infinite;
}
.sc-m-typing i:nth-child(2){animation-delay:.15s;}
.sc-m-typing i:nth-child(3){animation-delay:.30s;}
@keyframes scDot{
  0%,100%{opacity:.3;transform:translateY(0);}
  50%{opacity:1;transform:translateY(-3px);}
}
.sc-scene.is-ask.is-active .sc-m-ask{
  animation:scRise .45s cubic-bezier(.22,.9,.32,1) both;
}
/* The indicator has to give its space back, not just fade, or the reply
   lands with a gap where the dots used to be. */
.sc-scene.is-ask.is-active .sc-m-typing{
  animation:scTypingOut .3s ease 1.15s both;
}
@keyframes scTypingOut{
  to{opacity:0;height:0;padding-top:0;padding-bottom:0;border-width:0;margin-bottom:-9px;}
}
.sc-scene.is-ask.is-active .sc-m-reply{
  animation:scRise .45s cubic-bezier(.22,.9,.32,1) 1.25s both;
}

/* ---- Scene 2: what this buyer is allowed to see ---- */
.sc-m-doc{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  padding:11px 12px;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  background:var(--background);
  min-width:0;
}
.sc-m-doc-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:30px;height:30px;
  flex-shrink:0;
  border-radius:9px;
  background:var(--brand-primary-soft);
  color:var(--brand-primary);
}
.sc-m-doc-icon svg{width:15px;height:15px;}
.sc-m-doc-name{
  font-size:0.78rem;
  font-weight:600;
  color:var(--text-primary);
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
/* Both pills share one grid cell so the swap cannot change the row width. */
.sc-m-swap{display:grid;margin-left:auto;flex-shrink:0;}
.sc-m-swap .sc-m-pill{grid-area:1 / 1;}
.sc-m-pill{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:3px 10px;
  border-radius:var(--radius-pill);
  font-size:0.68rem;
  font-weight:700;
  white-space:nowrap;
}
.sc-m-pill svg{width:10px;height:10px;flex-shrink:0;}
.sc-m-pill.is-before{background:var(--warning-bg);color:var(--warning-text);}
.sc-m-pill.is-after{background:var(--success-bg);color:var(--success-text);opacity:0;}
.sc-scene.is-gate.is-active .sc-m-pill.is-before{
  animation:scFadeOut .35s ease 1.9s both;
}
.sc-scene.is-gate.is-active .sc-m-pill.is-after{
  animation:scFadeIn .35s ease 1.9s both;
}
@keyframes scFadeOut{from{opacity:1;}to{opacity:0;}}
@keyframes scFadeIn{from{opacity:0;}to{opacity:1;}}

/* ---- Scene 3: the same agent, asked out loud ---- */
.sc-m-voice{
  display:flex;
  align-items:center;
  gap:11px;
  padding:10px 12px;
  border-radius:var(--radius-md);
  background:var(--surface);
  border:1px solid var(--border);
  margin-bottom:12px;
  min-width:0;
}
.sc-m-mic{
  display:flex;
  align-items:center;
  justify-content:center;
  width:30px;height:30px;
  flex-shrink:0;
  border-radius:50%;
  background:var(--brand-primary);
  color:#fff;
}
.sc-m-mic svg{width:14px;height:14px;}
.sc-m-wave{
  display:flex;
  align-items:center;
  /* Spread across the row rather than bunching beside the mic, so it reads
     as a live level meter for the whole call. */
  justify-content:space-between;
  gap:3px;
  flex:1;
  height:22px;
  min-width:0;
  overflow:hidden;
}
.sc-m-wave i{
  width:3px;
  height:26%;
  border-radius:2px;
  background:var(--brand-primary);
  opacity:.7;
  flex-shrink:0;
}
.sc-scene.is-voice.is-active .sc-m-wave i{
  animation:scWave .9s ease-in-out infinite;
}
/* Bars ripple in sequence. The delays repeat every 8 bars so the wave reads
   as a travelling pulse however many bars the row holds. */
.sc-m-wave i:nth-child(8n+2){animation-delay:.09s;}
.sc-m-wave i:nth-child(8n+3){animation-delay:.18s;}
.sc-m-wave i:nth-child(8n+4){animation-delay:.27s;}
.sc-m-wave i:nth-child(8n+5){animation-delay:.36s;}
.sc-m-wave i:nth-child(8n+6){animation-delay:.45s;}
.sc-m-wave i:nth-child(8n+7){animation-delay:.54s;}
.sc-m-wave i:nth-child(8n+8){animation-delay:.63s;}
@keyframes scWave{
  0%,100%{height:26%;}
  50%{height:100%;}
}
.sc-m-voice-label{
  font-size:0.68rem;
  font-weight:700;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--text-tertiary);
  flex-shrink:0;
}
.sc-m-transcript{
  padding-left:11px;
  border-left:3px solid var(--brand-primary-soft);
  margin-bottom:11px;
  font-size:0.82rem;
  font-weight:600;
  line-height:1.45;
  color:var(--text-primary);
}
.sc-m-spoken{
  /* Block-level flex so the spoken answer starts on the next line. */
  display:flex;
  align-items:center;
  gap:5px;
  margin-bottom:7px;
  font-size:0.64rem;
  font-weight:700;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--brand-primary);
}
.sc-m-spoken svg{width:11px;height:11px;flex-shrink:0;}

/* ---- Scene 4: the handoff, when it cannot verify something ---- */
.sc-m-escalate{
  display:flex;
  align-items:flex-start;
  gap:9px;
  width:100%;
  padding:11px 12px;
  border-radius:var(--radius-md);
  background:var(--warning-bg);
  border:1px solid var(--warning-border);
  font-size:0.74rem;
  line-height:1.45;
  color:var(--text-secondary);
  min-width:0;
}
.sc-m-escalate svg{width:14px;height:14px;color:var(--warning-text);flex-shrink:0;margin-top:1px;}
.sc-m-escalate strong{display:block;color:var(--text-primary);font-weight:700;}

/* ---- Scene 4: what buyers actually asked ---- */
.sc-m-insights{display:flex;flex-direction:column;gap:11px;}
.sc-m-insight{
  display:grid;
  grid-template-columns:1fr auto;
  gap:5px 10px;
  min-width:0;
}
.sc-m-insight-name{
  font-size:0.74rem;
  font-weight:600;
  color:var(--text-secondary);
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.sc-m-insight-n{
  font-size:0.74rem;
  font-weight:700;
  color:var(--text-primary);
}
.sc-m-meter{
  grid-column:1 / -1;
  height:5px;
  border-radius:3px;
  background:var(--border);
  overflow:hidden;
}
.sc-m-meter span{
  display:block;
  height:100%;
  width:var(--w, 100%);
  border-radius:3px;
  background:var(--brand-primary);
  transform-origin:left center;
}
.sc-scene.is-insight.is-active .sc-m-meter span{
  animation:scMeter .7s cubic-bezier(.3,.8,.35,1) both;
}
.sc-scene.is-insight.is-active .sc-m-insight:nth-child(2) .sc-m-meter span{animation-delay:.15s;}
.sc-scene.is-insight.is-active .sc-m-insight:nth-child(3) .sc-m-meter span{animation-delay:.30s;}
.sc-scene.is-insight.is-active .sc-m-insight:nth-child(4) .sc-m-meter span{animation-delay:.45s;}
.sc-scene.is-insight.is-active .sc-m-insight:nth-child(5) .sc-m-meter span{animation-delay:.60s;}
@keyframes scMeter{
  from{transform:scaleX(0);}
  to{transform:scaleX(1);}
}

/* ---- Counter + progress ---- */
.sc-motion-foot{
  display:flex;
  align-items:center;
  gap:14px;
  padding:13px 16px;
  border-top:1px solid var(--border);
  background:var(--surface);
}
/* The whole pitch in one line of numbers: almost every buyer question
   handled without a person, and the few exceptions handed back on purpose. */
.sc-counter{
  font-size:0.78rem;
  color:var(--text-tertiary);
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.sc-counter strong{font-weight:700;color:var(--text-primary);}
.sc-counter .sc-open{color:var(--warning-text);}
.sc-counter em{font-style:normal;margin:0 5px;color:var(--border-strong);}
.sc-motion-progress{display:flex;gap:5px;margin-left:auto;flex-shrink:0;}
.sc-motion-progress i{
  width:16px;height:3px;
  border-radius:2px;
  background:var(--border-strong);
  transition:background-color .3s ease;
}
.sc-motion-progress i.is-on{background:var(--brand-primary);}

@media (max-width: 980px){
  .sc-hero-grid{grid-template-columns:1fr;}
  .sc-motion{max-width:440px;}
}

/* On a phone the status row cannot hold the agent's current step and two
   labelled mode segments, so the switch falls back to its icons. */
@media (max-width: 520px){
  .sc-mode-label{display:none;}
  .sc-mode > span{padding:3px 7px;}
}
/* On the narrowest phones the longest step still will not fit on one line
   next to the switch, so let it wrap rather than truncate mid-sentence. */
@media (max-width: 400px){
  .sc-action{white-space:normal;line-height:1.3;}
}

@media (prefers-reduced-motion: reduce){
  .sc-scene,
  .sc-scene.is-active .sc-anim,
  .sc-m-typing i,
  .sc-pulse,
  .sc-scene.is-voice.is-active .sc-m-wave i,
  .sc-scene.is-ask.is-active .sc-m-ask,
  .sc-scene.is-ask.is-active .sc-m-typing,
  .sc-scene.is-ask.is-active .sc-m-reply,
  .sc-scene.is-gate.is-active .sc-m-pill.is-before,
  .sc-scene.is-gate.is-active .sc-m-pill.is-after,
  .sc-scene.is-insight.is-active .sc-m-meter span{
    animation:none;
    transition:none;
  }
  /* With the swap animation off, show the resolved state rather than the
     pending one, so the still frame reads as a finished exchange. */
  .sc-m-pill.is-before{display:none;}
  .sc-m-pill.is-after{opacity:1;}
  .sc-m-typing{display:none;}
}

/* ===================== Shared section head ===================== */
.sc-section-head{
  max-width:620px;
  margin-bottom:36px;
}
.sc-section-head p{
  margin-top:14px;
  font-size:1rem;
  color:var(--text-secondary);
}

/* ===================== See it working ===================== */
.sc-demo{
  background:var(--surface);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
/* The demo block is centred: a single panel this wide looks stranded when it
   is pinned to the left of a full-width container. */
.sc-demo .sc-section-head{
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}
.sc-demo .sc-modes{
  display:flex;
  width:fit-content;
  margin-left:auto;
  margin-right:auto;
}
.sc-chat{
  background:var(--background);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
  width:min(100%, 760px);
  margin-inline:auto;
  text-align:left;
}
.sc-chat-head{
  display:flex;
  align-items:center;
  gap:11px;
  padding:14px 20px;
  background:var(--navy);
}
.sc-chat-head img{width:22px;height:22px;flex-shrink:0;}
.sc-chat-head-name{
  font-size:0.95rem;
  font-weight:700;
  color:#fff;
}
.sc-chat-head-sub{
  font-size:0.78rem;
  color:var(--text-on-navy-dim);
}
.sc-chat-online{
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:0.74rem;
  font-weight:600;
  color:var(--text-on-navy-dim);
  flex-shrink:0;
}
.sc-chat-online i{
  width:7px;height:7px;
  border-radius:50%;
  background:#4ade80;
  flex-shrink:0;
}
.sc-chat-body{
  display:flex;
  flex-direction:column;
  gap:16px;
  padding:24px 20px;
}
.sc-turn{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.sc-ask{
  align-self:flex-end;
  max-width:min(82%, 460px);
  padding:11px 15px;
  border-radius:16px 16px 5px 16px;
  background:var(--brand-primary);
  color:#fff;
  font-size:0.92rem;
  font-weight:500;
  line-height:1.5;
}
.sc-reply{
  align-self:flex-start;
  max-width:min(92%, 620px);
  padding:15px 17px;
  border-radius:16px 16px 16px 5px;
  background:var(--surface);
  border:1px solid var(--border);
  font-size:0.92rem;
  line-height:1.6;
  color:var(--text-secondary);
}
.sc-reply strong{color:var(--text-primary);}
.sc-reply-cite{
  display:flex;
  align-items:center;
  gap:7px;
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--border);
  font-size:0.78rem;
  font-weight:600;
  color:var(--text-tertiary);
}
.sc-reply-cite svg{width:13px;height:13px;color:var(--success-text);flex-shrink:0;}
/* The gated turn and the escalated turn read differently on purpose: they
   are the two cases where the answer is not simply handed over. */
.sc-reply.is-gated{background:var(--brand-primary-soft);border-color:var(--brand-primary-soft);}
.sc-reply.is-gated .sc-reply-cite{border-top-color:rgba(47,62,158,.16);}
.sc-reply.is-gated .sc-reply-cite svg{color:var(--brand-primary);}
.sc-reply.is-escalated{background:var(--warning-bg);border-color:var(--warning-border);}
.sc-reply.is-escalated .sc-reply-cite{border-top-color:var(--warning-border);}
.sc-reply.is-escalated .sc-reply-cite svg{color:var(--warning-text);}
.sc-chat-note{
  display:flex;
  align-items:center;
  gap:9px;
  padding:13px 20px;
  border-top:1px solid var(--border);
  background:var(--surface);
  font-size:0.82rem;
  color:var(--text-tertiary);
}
.sc-chat-note svg{width:15px;height:15px;color:var(--text-tertiary);flex-shrink:0;}

/* ---- Chat / voice tabs over the demo ---- */
.sc-modes{
  display:inline-flex;
  gap:3px;
  padding:4px;
  margin-bottom:22px;
  border-radius:var(--radius-pill);
  background:var(--border);
}
.sc-mode-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 20px;
  border:0;
  border-radius:var(--radius-pill);
  background:transparent;
  color:var(--text-secondary);
  font-family:inherit;
  font-size:0.9rem;
  font-weight:600;
  cursor:pointer;
  transition:background-color .15s ease, color .15s ease;
}
.sc-mode-btn svg{width:16px;height:16px;flex-shrink:0;}
.sc-mode-btn.is-on{
  background:var(--background);
  color:var(--brand-primary);
  box-shadow:var(--shadow-sm);
}

/* ---- Voice: the same exchange as a call transcript ---- */
.sc-call-wave{
  display:flex;
  align-items:center;
  gap:3px;
  height:20px;
  margin-left:auto;
  flex-shrink:0;
}
.sc-call-wave i{
  width:3px;
  height:30%;
  border-radius:2px;
  background:#7ad9ff;
  opacity:.8;
  animation:scWave 1s ease-in-out infinite;
}
.sc-call-wave i:nth-child(2){animation-delay:.07s;}
.sc-call-wave i:nth-child(3){animation-delay:.14s;}
.sc-call-wave i:nth-child(4){animation-delay:.21s;}
.sc-call-wave i:nth-child(5){animation-delay:.28s;}
.sc-call-wave i:nth-child(6){animation-delay:.35s;}
.sc-call-wave i:nth-child(7){animation-delay:.42s;}
.sc-call-wave i:nth-child(8){animation-delay:.49s;}
.sc-call-wave i:nth-child(9){animation-delay:.56s;}
.sc-call-wave i:nth-child(10){animation-delay:.63s;}
.sc-call-wave i:nth-child(11){animation-delay:.70s;}
.sc-call-wave i:nth-child(12){animation-delay:.77s;}
.sc-call .sc-chat-online{margin-left:14px;}
.sc-call-body{
  display:flex;
  flex-direction:column;
  gap:18px;
  padding:24px 20px;
}
.sc-call-turn{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:14px;
  min-width:0;
}
.sc-call-time{
  font-size:0.8rem;
  font-weight:600;
  color:var(--text-tertiary);
  font-variant-numeric:tabular-nums;
  padding-top:2px;
}
.sc-call-who{
  display:block;
  font-size:0.78rem;
  font-weight:700;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--text-tertiary);
  margin-bottom:5px;
}
.sc-call-said{
  font-size:0.92rem;
  line-height:1.6;
  color:var(--text-secondary);
}
/* The agent's turns get a card so a glance separates them from the buyer's,
   and the two exceptions keep the same colours as the chat view. */
.sc-call-turn.is-agent > div{
  padding:14px 16px;
  border-radius:var(--radius-md);
  background:var(--surface);
  border:1px solid var(--border);
}
.sc-call-turn.is-agent .sc-call-who{color:var(--brand-primary);}
.sc-call-turn.is-gated > div{background:var(--brand-primary-soft);border-color:transparent;}
.sc-call-turn.is-gated .sc-reply-cite{border-top-color:rgba(47,62,158,.16);}
.sc-call-turn.is-gated .sc-reply-cite svg{color:var(--brand-primary);}
.sc-call-turn.is-escalated > div{background:var(--warning-bg);border-color:var(--warning-border);}
.sc-call-turn.is-escalated .sc-reply-cite{border-top-color:var(--warning-border);}
.sc-call-turn.is-escalated .sc-reply-cite svg{color:var(--warning-text);}

/* ===================== How it works ===================== */
.sc-steps{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:32px;
}
.sc-step{display:flex;flex-direction:column;}
.sc-step-num{
  font-size:0.78rem;
  font-weight:700;
  color:var(--brand-primary);
  letter-spacing:0.04em;
  margin-bottom:14px;
}
.sc-step-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:46px;height:46px;
  border-radius:14px;
  background:var(--brand-primary-soft);
  color:var(--brand-primary);
  margin-bottom:16px;
}
.sc-step-icon svg{width:22px;height:22px;}
.sc-step h3{font-size:1.05rem;font-weight:700;margin:0 0 8px;}
.sc-step p{font-size:0.92rem;line-height:1.55;color:var(--text-secondary);}

/* ===================== Why it's different: dark band ===================== */
.sc-different{background:var(--navy);}
.sc-different .eyebrow{color:var(--text-on-navy-dim);}
.sc-different h2{color:#fff;}
.sc-contrasts{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
}
.sc-contrast{
  padding:24px;
  border:1px solid var(--border-on-navy);
  border-radius:var(--radius-lg);
  background:rgba(255,255,255,0.03);
}
.sc-contrast-not{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:0.72rem;
  font-weight:700;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--text-on-navy-dim);
  margin-bottom:12px;
}
.sc-contrast-not svg{width:12px;height:12px;color:var(--danger);}
.sc-contrast h3{font-size:1rem;font-weight:700;margin:0 0 8px;color:#fff;}
.sc-contrast p{font-size:0.88rem;line-height:1.55;color:var(--text-on-navy-dim);}

/* ===================== Capabilities ===================== */
.sc-capabilities{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
}
.sc-cap{
  padding:26px 24px;
  background:var(--background);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);
  transition:transform .15s ease, box-shadow .15s ease;
}
.sc-cap:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);}
.sc-cap-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;height:44px;
  border-radius:12px;
  background:var(--brand-primary-soft);
  color:var(--brand-primary);
  margin-bottom:16px;
}
.sc-cap-icon svg{width:21px;height:21px;}
.sc-cap h3{font-size:1rem;font-weight:700;margin:0 0 6px;}
.sc-cap p{font-size:0.88rem;line-height:1.5;color:var(--text-secondary);}

/* ===================== FAQ ===================== */
.sc-faq{
  background:var(--surface);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.sc-faq-list{
  max-width:720px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
}
.sc-faq-item{border-bottom:1px solid var(--border);}
.sc-faq-item summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:20px 4px;
  font-size:0.98rem;
  font-weight:600;
  color:var(--text-primary);
  cursor:pointer;
  list-style:none;
}
.sc-faq-item summary::-webkit-details-marker{display:none;}
.sc-faq-item summary svg{
  width:18px;height:18px;
  flex-shrink:0;
  color:var(--text-tertiary);
  transition:transform .15s ease;
}
.sc-faq-item[open] summary svg{transform:rotate(45deg);}
.sc-faq-item p{
  padding:0 4px 20px;
  max-width:620px;
  font-size:0.92rem;
  line-height:1.6;
  color:var(--text-secondary);
}

/* ===================== Try it ===================== */
.sc-cta{text-align:center;}
.sc-cta-inner{max-width:560px;margin:0 auto;}
.sc-cta h2{
  font-size:clamp(1.7rem, 3vw, 2.2rem);
  font-weight:800;
  letter-spacing:-0.03em;
  margin:0 0 14px;
}
.sc-cta p{font-size:1rem;color:var(--text-secondary);margin-bottom:28px;}
.sc-cta .domain-scanner{max-width:520px;margin:0 auto;}
.sc-cta .field-row{padding:8px;}
.sc-cta .field-row input{font-size:1.02rem;}
.sc-cta-secondary{margin-top:16px;font-size:0.9rem;color:var(--text-tertiary);}
.sc-cta-secondary a{font-weight:600;color:var(--brand-primary);}

/* ===================== Responsive ===================== */
@media (max-width: 900px){
  .sc-capabilities{grid-template-columns:repeat(2, 1fr);}
}
@media (max-width: 860px){
  .sc-steps{grid-template-columns:1fr;gap:28px;}
  .sc-contrasts{grid-template-columns:1fr;}
  .sc-capabilities{grid-template-columns:1fr;}
}
@media (max-width: 620px){
  /* The waveform is decoration; the call timer is not, so it goes first. */
  .sc-call-wave{display:none;}
  .sc-call .sc-chat-online{margin-left:auto;}
}
@media (max-width: 560px){
  .sc-chat-head{flex-wrap:wrap;}
  .sc-chat-online{margin-left:0;}
  .sc-call .sc-chat-online{margin-left:0;}
  .sc-ask,
  .sc-reply{max-width:100%;}
  .sc-demo .sc-modes{width:100%;}
  .sc-mode-btn{flex:1;justify-content:center;padding:9px 12px;}
  .sc-call-turn{grid-template-columns:1fr;gap:6px;}
  .sc-call-time{padding-top:0;}
}

@media (prefers-reduced-motion: reduce){
  .sc-cap{transition:none;}
  .sc-cap:hover{transform:none;}
  .sc-mode-btn{transition:none;}
  .sc-call-wave i{animation:none;height:55%;}
}