/**
 * Cleaning Lead Assistant™ — styles (premium redesign)
 * All selectors prefixed "cla-" to avoid colliding with host site CSS.
 * Brand colors/radius come from CSS custom properties set at runtime from
 * config (see applyBrandVars in cleaning-lead-assistant.js). Everything else
 * — spacing, shadows, motion — is a fixed internal design system so every
 * client site gets the same premium finish regardless of their palette.
 */

.cla-root {
  /* brand tokens (overridden per-client at runtime) */
  --cla-primary: #2563eb;
  --cla-primary-dark: #1d4ed8;
  --cla-accent: #14b8a6;
  --cla-surface: #ffffff;
  --cla-text: #0f172a;
  --cla-muted: #64748b;
  --cla-radius: 18px;

  /* derived radius scale */
  --cla-r-xl: var(--cla-radius);
  --cla-r-lg: calc(var(--cla-radius) - 4px);
  --cla-r-md: calc(var(--cla-radius) - 8px);
  --cla-r-sm: calc(var(--cla-radius) - 11px);
  --cla-r-pill: 999px;

  /* fixed system tokens */
  --cla-border: #e7eaf2;
  --cla-border-soft: #eef1f7;
  --cla-bg-subtle: #f6f8fc;
  --cla-danger: #dc2626;
  --cla-green: #17a34a;
  --cla-green-dark: #128a3e;
  --cla-whatsapp: #22c35e;
  --cla-amber: #b45309;
  --cla-shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
  --cla-shadow-md: 0 10px 28px -8px rgba(15, 23, 42, 0.16);
  --cla-shadow-lg: 0 24px 56px -16px rgba(15, 23, 42, 0.28), 0 6px 16px rgba(15, 23, 42, 0.08);
  --cla-ease: cubic-bezier(.22, .9, .32, 1);
  --cla-dur-fast: 140ms;
  --cla-dur: 220ms;
  --cla-dur-slow: 340ms;

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}
.cla-root *, .cla-root *::before, .cla-root *::after { box-sizing: border-box; }

/* ===========================================================
   FLOATING LAUNCHER
=========================================================== */
.cla-floating-root {
  position: fixed;
  z-index: 999990;
  bottom: max(20px, env(safe-area-inset-bottom));
}
.cla-pos-br { right: max(20px, env(safe-area-inset-right)); }
.cla-pos-bl { left: max(20px, env(safe-area-inset-left)); }

/* Body scroll lock — mobile full-screen mode only (see lockBodyScroll() /
   unlockBodyScroll() in the JS, called from toggleFloating()). Combines
   overflow:hidden with position:fixed + a negative top offset because
   overflow:hidden alone does not reliably stop touch-driven scroll on
   iOS Safari. Never applied on desktop. */
html.cla-no-scroll, body.cla-no-scroll { overflow: hidden; }
body.cla-no-scroll { position: fixed; left: 0; right: 0; width: 100%; }

.cla-launcher {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: linear-gradient(135deg, var(--cla-primary), var(--cla-primary-dark));
  color: #fff;
  border: none;
  border-radius: var(--cla-r-pill);
  padding: 15px 20px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  box-shadow: var(--cla-shadow-lg);
  transition: transform var(--cla-dur) var(--cla-ease), box-shadow var(--cla-dur) var(--cla-ease), opacity var(--cla-dur) var(--cla-ease);
  animation: cla-launcher-in 480ms var(--cla-ease) both;
}
.cla-launcher:hover { transform: translateY(-2px); box-shadow: 0 28px 60px -14px rgba(15,23,42,0.34); }
.cla-launcher:active { transform: translateY(-1px) scale(0.98); }
.cla-launcher:focus-visible { outline: 3px solid var(--cla-accent); outline-offset: 3px; }
.cla-launcher { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.cla-launcher-icon { display: inline-flex; }
.cla-launcher-ring {
  position: absolute; inset: 0; border-radius: var(--cla-r-pill);
  box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.45);
  pointer-events: none;
}
.cla-launcher-pulse .cla-launcher-ring { animation: cla-ring-pulse 1.8s var(--cla-ease) 2; }
/* Hidden (not removed) while the panel is open, so it doesn't compete with
   it — restored with the same fade when the panel closes. */
.cla-launcher-hidden { opacity: 0; transform: translateY(6px) scale(0.9); pointer-events: none; }

@media (max-width: 420px) {
  .cla-launcher-text { display: none; }
  .cla-launcher { padding: 15px; }
}

/* ===========================================================
   ASSISTANT AVATAR (optional — falls back to icons when unset)
=========================================================== */
.cla-avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cla-avatar-dot {
  position: absolute; width: 9px; height: 9px; border-radius: 50%;
  background: var(--cla-green); border: 2px solid var(--cla-surface);
  bottom: -1px; right: -1px;
}
.cla-launcher-avatar {
  position: relative; width: 34px; height: 34px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.35);
  animation: cla-pop-in var(--cla-dur-slow) var(--cla-ease) both;
  transition: transform var(--cla-dur-fast) var(--cla-ease);
}
.cla-launcher:hover .cla-launcher-avatar { transform: scale(1.04); }
/* One soft halo pulse around the avatar shortly after load — reuses the
   launcher's existing one-time-pulse lifecycle (JS removes the
   .cla-launcher-pulse class ~4.2s after mount, see mountFloating()), so
   this never repeats and needs no separate timer. box-shadow is used
   rather than a clipped pseudo-element since .cla-launcher-avatar has
   overflow:hidden for the circular image crop. */
.cla-launcher-pulse .cla-launcher-avatar {
  animation: cla-pop-in var(--cla-dur-slow) var(--cla-ease) both, cla-avatar-halo 1.8s var(--cla-ease) 2;
}
/* .cla-bubble-icon.cla-bubble-avatar and .cla-hero-icon.cla-hero-avatar overrides
   live right after .cla-bubble-icon / .cla-hero-icon further down this file —
   those elements carry both classes, so the override needs to win the cascade. */

.cla-bubble {
  position: absolute;
  bottom: 74px;
  right: 0;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  width: max-content;
  max-width: min(300px, calc(100vw - 64px));
  background: var(--cla-surface);
  color: var(--cla-text);
  border: 1px solid var(--cla-border-soft);
  border-radius: 18px;
  padding: 14px 38px 14px 15px;
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 600;
  box-shadow: var(--cla-shadow-lg);
  cursor: pointer;
  animation: cla-bubble-in 320ms var(--cla-ease) both;
}
.cla-bubble-closing { animation: cla-bubble-out 180ms var(--cla-ease) both; pointer-events: none; }
.cla-bubble::after {
  content: "";
  position: absolute;
  bottom: -7px; right: 26px;
  width: 14px; height: 14px;
  background: var(--cla-surface);
  border-right: 1px solid var(--cla-border-soft);
  border-bottom: 1px solid var(--cla-border-soft);
  transform: rotate(45deg);
}
.cla-pos-bl .cla-bubble { right: auto; left: 0; }
.cla-pos-bl .cla-bubble::after { right: auto; left: 26px; }
/* .cla-bubble sets its own `display: flex` above, which — per the CSS
   cascade — beats the browser's built-in `[hidden] { display: none }` rule
   regardless of source order (an author "normal" declaration always wins
   over a user-agent "normal" declaration). Without this, toggling the
   `hidden` property in JS does not actually remove the element from
   layout/hit-testing. Same fix applied to .cla-panel below. */
.cla-bubble[hidden] { display: none; }
.cla-bubble-icon {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg, var(--cla-primary), var(--cla-accent));
  color: #fff; display: inline-flex; align-items: center; justify-content: center;
}
.cla-bubble-icon.cla-bubble-avatar { position: relative; overflow: hidden; padding: 0; background: var(--cla-bg-subtle); animation: cla-pop-in var(--cla-dur-slow) var(--cla-ease) both; }
.cla-bubble-text { flex: 1; padding-top: 3px; display: flex; flex-direction: column; gap: 2px; }
.cla-bubble-line { display: block; }
.cla-bubble-line-title { font-weight: 800; }
.cla-bubble-close {
  position: absolute; top: 8px; right: 8px;
  background: var(--cla-bg-subtle); border: none; border-radius: 50%; width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--cla-muted); cursor: pointer; padding: 0;
}
.cla-bubble-close:hover { background: var(--cla-border-soft); color: var(--cla-text); }

/* Brief "assistant is composing" state shown for a few hundred ms before
   the real greeting swaps in — purely cosmetic, no chat logic involved. */
.cla-typing-dots { display: inline-flex; align-items: center; gap: 4px; padding: 6px 2px; }
.cla-typing-dots span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--cla-muted);
  opacity: 0.4; animation: cla-typing-bounce 1.1s ease-in-out infinite;
}
.cla-typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.cla-typing-dots span:nth-child(3) { animation-delay: 0.3s; }

/* ===========================================================
   PANEL (floating)
=========================================================== */
.cla-panel {
  position: absolute;
  bottom: 74px;
  right: 0;
  width: 396px;
  max-width: calc(100vw - 32px);
  max-height: min(650px, 82vh);
  display: flex;
  flex-direction: column;
  animation: cla-panel-in 280ms var(--cla-ease) both;
  transform-origin: bottom right;
}
.cla-pos-bl .cla-panel { right: auto; left: 0; transform-origin: bottom left; }
.cla-panel.cla-panel-closing { animation: cla-panel-out var(--cla-dur) var(--cla-ease) both; }
/* See the matching .cla-bubble[hidden] comment above — same cascade-origin
   issue, same fix. This was previously masked because the empty, unopened
   panel collapsed to near-zero size at its bottom-right anchor; the mobile
   full-screen rule (inset: 0) below would otherwise turn it into a
   permanent invisible full-viewport layer blocking every tap, including
   taps on the launcher itself. */
.cla-panel[hidden] { display: none; }

@media (max-width: 480px) {
  /* Per-position mobile clearance, not a single blanket value: a
     bottom-RIGHT launcher shares its corner with a lot of host sites'
     fixed bottom Call/Text bars, so it keeps a deliberately large 120px
     clearance (typical bars run ~56-72px tall). A bottom-LEFT launcher
     (Fresh Space's current setting — its Call/Text controls live on the
     right) doesn't share that space, so it only needs comfortable edge
     breathing room. Both add the safe-area inset on top of the base value
     (not max()) so clearance holds even when the inset itself is small or
     zero. The welcome bubble is positioned relative to this same wrapper
     (bottom: 74px, above) so it always moves up together with the
     launcher and stays visually attached to it. */
  .cla-pos-br {
    bottom: calc(120px + env(safe-area-inset-bottom));
  }
  .cla-pos-bl {
    bottom: calc(24px + env(safe-area-inset-bottom));
    left: max(16px, env(safe-area-inset-left));
  }

  /* Full-screen native mobile panel: edge-to-edge, dynamic-viewport-aware
     (100dvh with a 100vh fallback for older browsers), safe areas applied
     per-section rather than as one uniform pad — top on the header, sides
     on header+body, bottom on the footer — so the header stays flush under
     the status bar/notch and the footer clears the home-indicator area. */
  .cla-panel {
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    transform-origin: center;
  }
  .cla-panel .cla-card {
    height: 100%;
    border-radius: 0;
  }
  .cla-panel .cla-header {
    padding-top: max(16px, env(safe-area-inset-top));
    padding-left: max(18px, env(safe-area-inset-left));
    padding-right: max(18px, env(safe-area-inset-right));
  }
  .cla-panel .cla-body {
    padding-left: max(18px, env(safe-area-inset-left));
    padding-right: max(18px, env(safe-area-inset-right));
  }
  .cla-panel .cla-powered-by {
    padding-bottom: max(13px, env(safe-area-inset-bottom));
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }

  /* Close button enlarged to Apple's ~44x44px minimum touch target (was
     32x32 site-wide) — undersized targets are a direct cause of taps that
     land just outside the hit area and appear "unresponsive". Desktop
     keeps the original 32px button untouched (see base .cla-close-btn rule).
     Selector is deliberately ".cla-panel .cla-close-btn" (not the bare
     class) so its specificity beats the later base rule regardless of
     source order in the file. */
  .cla-panel .cla-close-btn {
    width: 44px;
    height: 44px;
  }
}

.cla-card {
  position: relative;
  background: var(--cla-surface);
  border-radius: var(--cla-r-xl);
  box-shadow: var(--cla-shadow-lg);
  display: flex;
  flex-direction: column;
  max-height: 100%;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--cla-border-soft);
}
.cla-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--cla-primary), var(--cla-accent));
}
.cla-embedded-root .cla-card {
  max-height: none;
  box-shadow: 0 16px 40px -18px rgba(15,23,42,0.2), 0 2px 8px rgba(15,23,42,0.04);
  border: 1px solid var(--cla-border);
}
.cla-embedded-root { max-width: 480px; margin: 0 auto; }

.cla-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 18px 15px;
  border-bottom: 1px solid var(--cla-border-soft);
  flex-shrink: 0;
}
.cla-header-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cla-logo-wrap {
  width: 34px; height: 34px; border-radius: 11px; flex-shrink: 0; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--cla-shadow-sm);
}
.cla-logo-fallback {
  background: linear-gradient(135deg, var(--cla-primary), var(--cla-primary-dark));
  color: #fff; font-weight: 800; font-size: 15px;
}
.cla-logo { width: 100%; height: 100%; object-fit: cover; }
/* Real client logo images are rarely square (icon + wordmark lockups):
   render at a fixed height with auto width and object-fit: contain so
   nothing gets stretched or cropped, instead of forcing the 34x34 box. */
.cla-logo-wrap-img {
  width: auto; height: 38px; border-radius: 0; box-shadow: none; background: none;
}
.cla-logo-wrap-img .cla-logo { width: auto; height: 100%; object-fit: contain; }
.cla-brand-block { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.cla-brand-name { font-weight: 800; font-size: 14.5px; color: var(--cla-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cla-brand-tag { font-size: 11px; font-weight: 600; color: var(--cla-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cla-header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.cla-lang-switch { display: flex; background: var(--cla-bg-subtle); border-radius: var(--cla-r-pill); padding: 3px; }
.cla-lang-btn {
  border: none; background: none; font-size: 11px; font-weight: 800; letter-spacing: 0.02em;
  color: var(--cla-muted); padding: 6px 10px; border-radius: var(--cla-r-pill); cursor: pointer;
  transition: background var(--cla-dur-fast) var(--cla-ease), color var(--cla-dur-fast) var(--cla-ease);
}
.cla-lang-btn.cla-active { background: var(--cla-surface); color: var(--cla-primary); box-shadow: var(--cla-shadow-sm); }
.cla-lang-btn:hover:not(.cla-active) { color: var(--cla-text); }

.cla-close-btn {
  border: none; background: var(--cla-bg-subtle); color: var(--cla-muted); width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
  transition: background var(--cla-dur-fast) var(--cla-ease), color var(--cla-dur-fast) var(--cla-ease), transform var(--cla-dur-fast) var(--cla-ease);
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  position: relative; z-index: 1;
}
.cla-close-btn:hover { background: var(--cla-border-soft); color: var(--cla-text); }
.cla-close-btn:active { transform: scale(0.92); }

.cla-body {
  padding: 22px 18px 18px;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
  /* This is the assistant's ONE intentional scroll region — header and
     footer stay fixed via flex-shrink:0 in .cla-card. overscroll-behavior
     stops a scroll that reaches the top/bottom of this list from chaining
     into (scrolling) the host page behind it, as a CSS-level backstop to
     the JS body-scroll-lock used in mobile full-screen mode. */
  overscroll-behavior-y: contain;
}

.cla-powered-by {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  text-align: center;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--cla-muted);
  padding: 10px 12px 13px;
  border-top: 1px solid var(--cla-border-soft);
  flex-shrink: 0;
}
.cla-powered-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--cla-accent); }

/* ===========================================================
   HOME SCREEN
=========================================================== */
/* Home content enters as a very short stagger (icon/avatar, then title,
   subtitle, trust pills, CTA stack, secondary link) rather than one single
   block-fade — each element reuses the existing cla-fade-up keyframe with
   a small incremental delay, so the whole sequence still finishes quickly. */
.cla-hero-icon {
  width: 44px; height: 44px; border-radius: 13px; margin-bottom: 10px;
  background: linear-gradient(135deg, var(--cla-primary), var(--cla-accent));
  color: #fff; display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--cla-shadow-md);
  animation: cla-fade-up var(--cla-dur) var(--cla-ease) both;
}
.cla-hero-icon.cla-hero-avatar {
  position: relative; overflow: hidden; background: var(--cla-bg-subtle);
  width: 54px; height: 54px; border-radius: 50%;
  box-shadow: 0 0 0 3px var(--cla-surface), var(--cla-shadow-md);
  animation: cla-pop-in var(--cla-dur-slow) var(--cla-ease) both;
}
.cla-hero-title { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; color: var(--cla-text); line-height: 1.28; margin: 0 0 6px; animation: cla-fade-up var(--cla-dur) var(--cla-ease) both; animation-delay: 40ms; }
.cla-hero-subtitle { font-size: 14px; color: var(--cla-muted); line-height: 1.55; margin: 0 0 12px; animation: cla-fade-up var(--cla-dur) var(--cla-ease) both; animation-delay: 75ms; }

.cla-trust-row { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; animation: cla-fade-up var(--cla-dur) var(--cla-ease) both; animation-delay: 110ms; }
.cla-trust-pill {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--cla-bg-subtle); color: var(--cla-text);
  border-radius: var(--cla-r-pill); padding: 6px 11px 6px 8px;
  font-size: 12px; font-weight: 700;
}
.cla-trust-pill svg { color: var(--cla-accent); flex-shrink: 0; }

.cla-btn-stack { display: flex; flex-direction: column; gap: 10px; animation: cla-fade-up var(--cla-dur) var(--cla-ease) both; animation-delay: 145ms; }
.cla-hero > .cla-link-btn { animation: cla-fade-up var(--cla-dur) var(--cla-ease) both; animation-delay: 175ms; }

/* Primary home CTA gets one brief attention shimmer once it's settled in —
   never repeats, never a persistent shine. */
.cla-cta-shimmer { position: relative; overflow: hidden; }
.cla-cta-shimmer::after {
  content: ""; position: absolute; top: 0; left: 0; width: 55%; height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: translateX(-220%) skewX(-15deg);
  animation: cla-cta-shine 1.1s ease-out 750ms 1;
  pointer-events: none;
}

.cla-btn {
  appearance: none; border: none; border-radius: var(--cla-r-md); padding: 14px 16px; font-size: 14.5px; font-weight: 700;
  cursor: pointer; text-align: left; display: flex; align-items: center; gap: 10px;
  transition: transform var(--cla-dur-fast) var(--cla-ease), box-shadow var(--cla-dur) var(--cla-ease), background var(--cla-dur-fast) var(--cla-ease), border-color var(--cla-dur-fast) var(--cla-ease);
  min-height: 50px; width: 100%;
}
.cla-btn:active { transform: scale(0.98); }
.cla-btn:focus-visible { outline: 3px solid var(--cla-accent); outline-offset: 2px; }
.cla-btn-icon {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.18);
}
.cla-btn-label { flex: 1; min-width: 0; }
.cla-btn > svg:last-child { flex-shrink: 0; opacity: 0.85; transition: transform var(--cla-dur) var(--cla-ease); }
.cla-btn:hover > svg:last-child { transform: translateX(2px); }

.cla-btn-primary {
  background: linear-gradient(135deg, var(--cla-primary), var(--cla-primary-dark));
  color: #fff;
  box-shadow: 0 12px 26px -10px rgba(37,99,235,0.55);
}
.cla-btn-primary:hover { box-shadow: 0 18px 34px -10px rgba(37,99,235,0.6); transform: translateY(-1px); }
.cla-btn-lg { padding: 16px 18px; font-size: 15px; }
.cla-btn-secondary {
  background: var(--cla-bg-subtle); color: var(--cla-text);
}
.cla-btn-secondary .cla-btn-icon { background: rgba(37,99,235,0.1); color: var(--cla-primary); }
.cla-btn-secondary:hover { background: var(--cla-border-soft); transform: translateY(-1px); box-shadow: var(--cla-shadow-sm); }
.cla-btn-ghost { background: transparent; color: var(--cla-text); border: 1.5px solid var(--cla-border); }
.cla-btn-ghost .cla-btn-icon { background: var(--cla-bg-subtle); color: var(--cla-muted); }
.cla-btn-ghost:hover { background: var(--cla-bg-subtle); border-color: var(--cla-border-soft); transform: translateY(-1px); box-shadow: var(--cla-shadow-sm); }
.cla-btn-full { width: 100%; }
.cla-btn-small { padding: 10px 14px; font-size: 13px; min-height: 40px; margin-top: 10px; justify-content: center; }

/* ===========================================================
   FLOW TOPBAR / PROGRESS
=========================================================== */
.cla-flow-topbar { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.cla-flow-topbar-simple { margin-bottom: 16px; }
.cla-title-flush { margin: 0; }

.cla-back-circle {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%;
  border: 1.5px solid var(--cla-border); background: var(--cla-surface); color: var(--cla-text);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background var(--cla-dur-fast) var(--cla-ease), border-color var(--cla-dur-fast) var(--cla-ease), transform var(--cla-dur-fast) var(--cla-ease);
}
.cla-back-circle:hover { background: var(--cla-bg-subtle); border-color: var(--cla-border-soft); }
.cla-back-circle:active { transform: scale(0.92); }

.cla-progress-wrap { flex: 1; min-width: 0; }
.cla-progress-toprow { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
.cla-progress-label { font-size: 11px; font-weight: 800; color: var(--cla-muted); text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; }
.cla-progress-msg { font-size: 11.5px; color: var(--cla-accent); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cla-progress-track { position: relative; height: 6px; border-radius: var(--cla-r-pill); background: var(--cla-border-soft); overflow: visible; }
.cla-progress-fill {
  position: relative; height: 100%;
  background: linear-gradient(90deg, var(--cla-primary), var(--cla-accent));
  border-radius: var(--cla-r-pill);
  transition: width var(--cla-dur-slow) var(--cla-ease);
}
.cla-progress-fill::after {
  content: ""; position: absolute; right: -1px; top: 50%; width: 8px; height: 8px;
  background: var(--cla-surface); border: 2px solid var(--cla-accent); border-radius: 50%;
  transform: translateY(-50%);
}

/* ===========================================================
   QUESTIONS / OPTIONS
=========================================================== */
.cla-step-enter { animation: cla-fade-up var(--cla-dur) var(--cla-ease) both; }
.cla-question-title { font-size: 17.5px; font-weight: 800; letter-spacing: -0.01em; color: var(--cla-text); line-height: 1.35; margin: 0 0 16px; }
.cla-options-grid { display: flex; flex-direction: column; gap: 8px; }

.cla-option-card {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  border: 1.5px solid var(--cla-border); background: var(--cla-surface); border-radius: var(--cla-r-md);
  padding: 13px 14px; cursor: pointer; text-align: left;
  transition: border-color var(--cla-dur-fast) var(--cla-ease), background var(--cla-dur-fast) var(--cla-ease), transform var(--cla-dur-fast) var(--cla-ease), box-shadow var(--cla-dur-fast) var(--cla-ease);
  min-height: 50px;
}
.cla-option-card:hover { border-color: var(--cla-primary); background: var(--cla-bg-subtle); transform: translateY(-1px); box-shadow: var(--cla-shadow-sm); }
.cla-option-card:active { transform: scale(0.99); }
.cla-option-card:focus-visible { outline: 3px solid var(--cla-accent); outline-offset: 1px; }
.cla-option-card.cla-selected {
  border-color: var(--cla-primary); background: var(--cla-bg-subtle);
  box-shadow: inset 3px 0 0 var(--cla-primary);
}
.cla-option-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cla-option-label { font-size: 14px; font-weight: 700; color: var(--cla-text); }
.cla-option-desc { font-size: 12px; color: var(--cla-muted); }
.cla-option-check {
  width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--cla-border); flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; color: #fff;
  transition: background var(--cla-dur-fast) var(--cla-ease), border-color var(--cla-dur-fast) var(--cla-ease);
}
.cla-selected .cla-option-check { background: var(--cla-primary); border-color: var(--cla-primary); }
.cla-selected .cla-option-check svg { animation: cla-pop-in var(--cla-dur) var(--cla-ease) both; }

.cla-combo-group + .cla-combo-group { margin-top: 18px; }
.cla-combo-label { font-size: 11.5px; font-weight: 800; color: var(--cla-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 9px; }
.cla-options-grid-compact { display: flex; flex-wrap: wrap; gap: 8px; }
.cla-option-chip {
  border: 1.5px solid var(--cla-border); background: var(--cla-surface); color: var(--cla-text);
  border-radius: var(--cla-r-pill); padding: 10px 16px; font-size: 13.5px; font-weight: 700; cursor: pointer;
  min-width: 46px; text-align: center;
  transition: border-color var(--cla-dur-fast) var(--cla-ease), background var(--cla-dur-fast) var(--cla-ease), color var(--cla-dur-fast) var(--cla-ease), transform var(--cla-dur-fast) var(--cla-ease);
}
.cla-option-chip:hover { border-color: var(--cla-primary); background: var(--cla-bg-subtle); }
.cla-option-chip:active { transform: scale(0.96); }
.cla-option-chip:focus-visible { outline: 3px solid var(--cla-accent); outline-offset: 1px; }
.cla-option-chip.cla-selected { border-color: var(--cla-primary); background: var(--cla-primary); color: #fff; }

.cla-input-wrap { position: relative; margin-bottom: 12px; }
.cla-input-wrap > svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--cla-muted); pointer-events: none; }
.cla-text-input {
  width: 100%; border: 1.5px solid var(--cla-border); border-radius: var(--cla-r-md); padding: 14px 14px 14px 40px; font-size: 15px;
  color: var(--cla-text); background: var(--cla-surface);
  transition: border-color var(--cla-dur-fast) var(--cla-ease), box-shadow var(--cla-dur-fast) var(--cla-ease);
}
.cla-text-input:focus { outline: none; border-color: var(--cla-primary); box-shadow: 0 0 0 4px rgba(37,99,235,0.12); }
.cla-field-error { color: var(--cla-danger); font-size: 12.5px; font-weight: 600; margin: -6px 0 10px; }

/* ===========================================================
   CONTACT STEP (lead capture)
=========================================================== */
.cla-contact-subtitle { font-size: 13px; color: var(--cla-muted); line-height: 1.5; margin: -8px 0 18px; }
.cla-field-group { margin-bottom: 16px; }
.cla-field-group:last-of-type { margin-bottom: 0; }
.cla-field-group .cla-input-wrap { margin-bottom: 0; }
.cla-field-group .cla-field-error { margin: 6px 2px 0; }
.cla-field-label { display: block; font-size: 12.5px; font-weight: 700; color: var(--cla-text); margin-bottom: 6px; }
.cla-text-input.cla-input-invalid { border-color: var(--cla-danger); }
.cla-text-input.cla-input-invalid:focus { box-shadow: 0 0 0 4px rgba(220,38,38,0.12); }
.cla-contact-reassurance {
  display: flex; align-items: flex-start; gap: 6px;
  font-size: 11.5px; color: var(--cla-muted); line-height: 1.5;
  margin: 16px 0 16px; padding: 0 2px;
}
.cla-contact-reassurance svg { flex-shrink: 0; margin-top: 2px; opacity: 0.7; }
.cla-contact-submit-error {
  font-size: 12.5px; font-weight: 600; color: var(--cla-danger);
  background: #fef2f2; border-radius: var(--cla-r-sm); padding: 10px 12px; margin: 12px 0 0; text-align: center;
}
.cla-btn-loading { opacity: 0.7; cursor: default; pointer-events: none; }

.cla-flow-nav { margin-top: 18px; }
.cla-link-btn {
  background: none; border: none; color: var(--cla-primary); font-weight: 700; font-size: 13.5px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px; padding: 6px 2px;
}
.cla-link-muted { color: var(--cla-muted); }
.cla-center { display: flex; width: 100%; justify-content: center; margin-top: 12px; }

/* ===========================================================
   RESULT / RECOMMENDATION
=========================================================== */
.cla-result-reveal { animation: cla-fade-up var(--cla-dur-slow) var(--cla-ease) both; }
.cla-result-badge {
  width: 54px; height: 54px; border-radius: 16px; background: linear-gradient(135deg, var(--cla-primary), var(--cla-primary-dark));
  color: #fff; display: flex; align-items: center; justify-content: center; margin-bottom: 10px;
  box-shadow: 0 12px 24px -8px rgba(37,99,235,0.45);
  animation: cla-pop-in var(--cla-dur-slow) var(--cla-ease) both;
}
.cla-badge-accent { background: linear-gradient(135deg, var(--cla-accent), var(--cla-primary)); }
.cla-eyebrow {
  display: inline-flex; align-items: center; gap: 5px; margin-bottom: 8px;
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--cla-primary-dark);
}
.cla-result-title, .cla-result-header { font-size: 18.5px; font-weight: 800; letter-spacing: -0.01em; color: var(--cla-text); margin: 0 0 4px; line-height: 1.32; }
.cla-result-status-note { font-size: 13px; color: var(--cla-muted); line-height: 1.5; margin: 0 0 14px; }
.cla-result-body { font-size: 13.5px; color: var(--cla-muted); line-height: 1.55; margin: 0 0 10px; }
.cla-disclaimer { font-size: 12px; color: var(--cla-muted); background: var(--cla-bg-subtle); border-radius: var(--cla-r-sm); padding: 10px 12px; margin: 0 0 16px; }

.cla-recommend-box {
  background: linear-gradient(160deg, var(--cla-bg-subtle), var(--cla-surface));
  border: 1px solid var(--cla-border-soft); border-radius: var(--cla-r-lg); padding: 14px; margin-bottom: 12px;
  box-shadow: var(--cla-shadow-sm);
}
.cla-recommend-top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.cla-recommend-icon {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px;
  background: linear-gradient(135deg, var(--cla-primary), var(--cla-accent)); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.cla-recommend-label { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--cla-primary-dark); }
.cla-recommend-service { font-size: 18.5px; font-weight: 800; letter-spacing: -0.01em; color: var(--cla-text); margin-top: 1px; }
.cla-recommend-support { font-size: 13px; color: var(--cla-muted); line-height: 1.55; margin: 0; }

.cla-summary-card { border: 1px solid var(--cla-border); border-radius: var(--cla-r-lg); padding: 2px 14px; margin-bottom: 12px; background: var(--cla-surface); }
.cla-summary-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--cla-border-soft); }
.cla-summary-row:last-child { border-bottom: none; }
.cla-summary-icon {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px; background: var(--cla-bg-subtle); color: var(--cla-primary);
  display: inline-flex; align-items: center; justify-content: center;
}
.cla-summary-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cla-summary-label { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--cla-muted); }
.cla-summary-value { font-size: 13.5px; font-weight: 700; color: var(--cla-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cla-row-edit {
  flex-shrink: 0; background: var(--cla-bg-subtle); border: none; color: var(--cla-primary); font-size: 12px; font-weight: 800;
  cursor: pointer; padding: 6px 11px; border-radius: var(--cla-r-pill); transition: background var(--cla-dur-fast) var(--cla-ease);
}
.cla-row-edit:hover { background: var(--cla-border-soft); }

.cla-need-level { border: 1px solid var(--cla-border); border-radius: var(--cla-r-lg); padding: 12px 14px; margin-bottom: 12px; background: var(--cla-surface); }
.cla-need-toprow { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cla-need-title { font-size: 13px; font-weight: 800; color: var(--cla-text); }
.cla-need-value { font-size: 12px; font-weight: 800; padding: 4px 11px; border-radius: var(--cla-r-pill); }
.cla-need-value.cla-need-light { background: #ecfdf5; color: var(--cla-green-dark); }
.cla-need-value.cla-need-moderate { background: #fffbeb; color: var(--cla-amber); }
.cla-need-value.cla-need-high { background: #fef2f2; color: #b91c1c; }
.cla-need-gauge { display: flex; gap: 5px; margin-bottom: 9px; }
.cla-need-seg { flex: 1; height: 7px; border-radius: var(--cla-r-pill); background: var(--cla-border-soft); transition: background var(--cla-dur-slow) var(--cla-ease); }
.cla-need-seg-fill.cla-need-seg-light { background: var(--cla-green); }
.cla-need-seg-fill.cla-need-seg-moderate { background: #f59e0b; }
.cla-need-seg-fill.cla-need-seg-high { background: #ef4444; }
.cla-need-note { font-size: 11.5px; color: var(--cla-muted); margin: 0; }

.cla-cta-block { background: var(--cla-bg-subtle); border-radius: var(--cla-r-lg); padding: 14px; margin-bottom: 6px; }
.cla-cta-title { font-size: 15.5px; font-weight: 800; color: var(--cla-text); margin: 0 0 3px; }
.cla-cta-subtitle { font-size: 12.5px; color: var(--cla-muted); margin: 0 0 10px; }

.cla-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 10px; }
.cla-contact-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  border: 1.5px solid var(--cla-border); background: var(--cla-surface); border-radius: var(--cla-r-md); padding: 14px 8px;
  font-size: 12.5px; font-weight: 700; color: var(--cla-text); cursor: pointer; min-height: 78px;
  transition: border-color var(--cla-dur-fast) var(--cla-ease), transform var(--cla-dur-fast) var(--cla-ease), box-shadow var(--cla-dur-fast) var(--cla-ease);
}
.cla-contact-btn:hover { border-color: var(--cla-primary); box-shadow: var(--cla-shadow-sm); transform: translateY(-1px); }
.cla-contact-btn:active { transform: translateY(0) scale(0.98); }
.cla-contact-icon {
  width: 36px; height: 36px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--cla-bg-subtle); color: var(--cla-primary);
}
.cla-contact-primary .cla-contact-icon { background: rgba(37,99,235,0.1); color: var(--cla-primary); }
.cla-contact-blue .cla-contact-icon { background: rgba(37,99,235,0.1); color: var(--cla-primary); }
.cla-contact-green .cla-contact-icon,
.cla-contact-neutral .cla-contact-icon { background: var(--cla-bg-subtle); color: var(--cla-muted); }
.cla-contact-green .cla-contact-icon { background: rgba(34,195,94,0.12); color: var(--cla-whatsapp); }

.cla-privacy-note { font-size: 11px; color: var(--cla-muted); line-height: 1.5; margin: 0; }

.cla-cta-block .cla-btn-ghost { margin-top: 10px; background: var(--cla-surface); }
.cla-callback-note {
  display: flex; align-items: flex-start; gap: 7px;
  font-size: 12.5px; color: var(--cla-text); line-height: 1.5; font-weight: 600;
  background: var(--cla-surface); border: 1px solid var(--cla-border-soft); border-radius: var(--cla-r-sm);
  padding: 10px 12px; margin: 10px 0 0;
  animation: cla-fade-up var(--cla-dur) var(--cla-ease) both;
}
.cla-callback-note svg { flex-shrink: 0; margin-top: 2px; color: var(--cla-green); }

/* ===========================================================
   EXPLORE BLOCK (result screen — post-submission site navigation)
   Deliberately plain/muted — thin border, no gradient, no shadow — so it
   never reads as another conversion CTA. The lead is already captured by
   the time this renders; this is just "keep browsing the site".
=========================================================== */
.cla-explore-block { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--cla-border-soft); }
.cla-explore-title {
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--cla-muted); margin: 0 0 10px;
}
.cla-explore-links { display: flex; flex-direction: column; gap: 7px; }
.cla-explore-link {
  display: flex; align-items: center; gap: 10px; width: 100%;
  border: 1.5px solid var(--cla-border); background: var(--cla-surface); border-radius: var(--cla-r-md);
  padding: 11px 12px; cursor: pointer; text-align: left;
  font-size: 13.5px; font-weight: 700; color: var(--cla-text);
  transition: border-color var(--cla-dur-fast) var(--cla-ease), background var(--cla-dur-fast) var(--cla-ease), transform var(--cla-dur-fast) var(--cla-ease);
}
.cla-explore-link:hover { border-color: var(--cla-primary); background: var(--cla-bg-subtle); transform: translateY(-1px); }
.cla-explore-link:active { transform: translateY(0) scale(0.99); }
.cla-explore-link:focus-visible { outline: 3px solid var(--cla-accent); outline-offset: 1px; }
.cla-explore-icon {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--cla-bg-subtle); color: var(--cla-primary);
}
.cla-explore-label { flex: 1; min-width: 0; }
.cla-explore-link > svg:last-child { flex-shrink: 0; color: var(--cla-muted); }
.cla-explore-block .cla-link-btn { margin-top: 8px; }

/* ===========================================================
   FAQ
=========================================================== */
.cla-faq-cats { display: flex; flex-direction: column; gap: 8px; }
.cla-faq-cat-btn {
  display: flex; align-items: center; gap: 12px; width: 100%; border: 1.5px solid var(--cla-border);
  background: var(--cla-surface); border-radius: var(--cla-r-md); padding: 13px 14px; cursor: pointer;
  transition: border-color var(--cla-dur-fast) var(--cla-ease), background var(--cla-dur-fast) var(--cla-ease), transform var(--cla-dur-fast) var(--cla-ease), box-shadow var(--cla-dur-fast) var(--cla-ease);
}
.cla-faq-cat-btn:hover { border-color: var(--cla-primary); background: var(--cla-bg-subtle); transform: translateY(-1px); box-shadow: var(--cla-shadow-sm); }
.cla-faq-cat-btn:active { transform: scale(0.99); }
.cla-faq-cat-icon {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px; background: var(--cla-bg-subtle); color: var(--cla-primary);
  display: inline-flex; align-items: center; justify-content: center;
}
.cla-faq-cat-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; text-align: left; }
.cla-faq-cat-name { font-size: 14px; font-weight: 700; color: var(--cla-text); }
.cla-faq-cat-count { font-size: 11.5px; color: var(--cla-muted); font-weight: 600; }
.cla-faq-cat-btn > svg:last-child { flex-shrink: 0; color: var(--cla-muted); }

.cla-faq-list { display: flex; flex-direction: column; gap: 8px; }
.cla-faq-item { border: 1.5px solid var(--cla-border); border-radius: var(--cla-r-md); overflow: hidden; background: var(--cla-surface); }
.cla-faq-question {
  all: unset; box-sizing: border-box;
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  padding: 13px 14px; font-size: 13.5px; font-weight: 700; color: var(--cla-text); cursor: pointer;
}
.cla-faq-question:focus-visible { outline: 3px solid var(--cla-accent); outline-offset: -2px; }
.cla-faq-question .cla-chevron { flex-shrink: 0; color: var(--cla-muted); transition: transform var(--cla-dur) var(--cla-ease); }
.cla-faq-item.cla-open .cla-faq-question .cla-chevron { transform: rotate(90deg); color: var(--cla-primary); }
.cla-faq-item.cla-open { border-color: var(--cla-border-soft); }

.cla-faq-answer-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--cla-dur-slow) var(--cla-ease); }
.cla-faq-item.cla-open .cla-faq-answer-wrap { grid-template-rows: 1fr; }
.cla-faq-answer-inner { overflow: hidden; min-height: 0; }
.cla-faq-answer { margin: 0; padding: 0 14px 14px; font-size: 13px; color: var(--cla-muted); line-height: 1.6; }

/* ===========================================================
   ANIMATIONS
=========================================================== */
@keyframes cla-panel-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes cla-panel-out { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(10px) scale(0.98); } }
@keyframes cla-fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes cla-pop-in { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: scale(1); } }
@keyframes cla-ring-pulse {
  0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.45); }
  70% { box-shadow: 0 0 0 14px rgba(37, 99, 235, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
}
@keyframes cla-avatar-halo {
  0% { box-shadow: 0 0 0 0 rgba(255,255,255,0.55); }
  70% { box-shadow: 0 0 0 10px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}
@keyframes cla-launcher-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes cla-bubble-in { from { opacity: 0; transform: translateY(10px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes cla-bubble-out { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(6px) scale(0.95); } }
@keyframes cla-typing-bounce {
  0%, 60%, 100% { opacity: 0.4; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}
@keyframes cla-cta-shine {
  from { transform: translateX(-220%) skewX(-15deg); }
  to { transform: translateX(220%) skewX(-15deg); }
}

@media (prefers-reduced-motion: reduce) {
  /* animation-delay is included so staggered entrances (home content,
     result cards) don't sit invisible waiting out their delay before an
     instant no-op animation — everything just appears immediately. */
  .cla-root, .cla-root * { animation-duration: 0.001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* ===========================================================
   EMBEDDED MODE TWEAKS
=========================================================== */
.cla-embedded-root .cla-header { padding: 20px 22px 18px; }
.cla-embedded-root .cla-body { padding: 24px 22px 22px; }
.cla-embedded-root .cla-hero-title { font-size: 23px; }
.cla-embedded-root .cla-contact-btn { min-height: 86px; }

/* ===========================================================
   SMALL-SCREEN REFINEMENTS
=========================================================== */
@media (max-width: 380px) {
  .cla-body { padding: 18px 15px 15px; }
  .cla-header { padding: 14px 15px; }
  .cla-hero-title { font-size: 19px; }
  .cla-contact-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .cla-contact-btn { min-height: 72px; padding: 12px 6px; }
}

/* ===========================================================
   HEADER BRAND NAME — always visible next to the logo
   (client logo is a tall/square lockup; cap its width so the
    business name never gets pushed out of the header)
=========================================================== */
.cla-header-brand { flex: 1 1 auto; min-width: 0; }
.cla-header-brand .cla-logo-wrap,
.cla-header-brand .cla-logo-wrap-img { flex: 0 0 auto; max-width: 46px; }
.cla-brand-block { flex: 1 1 auto; min-width: 0; }
.cla-brand-name {
  display: block;
  color: #123A63;
  -webkit-text-fill-color: #123A63;
  font-weight: 800;
  font-size: 14.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}