/* Quote Agent widget.
   Lives inside .mpv-2026 .quote (purple #6118ed band).
   Every token here is lifted from astra-child/assets/home-2026.css so the widget
   reads as native to the section rather than as an embedded chat product.
   It replaces form.quote-form and occupies the right column only. */

.qa {
  --qa-well: rgba(15, 17, 25, 0.32);
  --qa-well-focus: rgba(15, 17, 25, 0.42);
  --qa-line: rgba(255, 255, 255, 0.14);
  --qa-line-focus: #d9c6ff;
  --qa-accent: #e2d3ff;
  --qa-muted: rgba(255, 255, 255, 0.75);
  --qa-faint: rgba(255, 255, 255, 0.42);
  --qa-purple: #6118ed;
  --qa-r: 12px;
  --qa-ease: cubic-bezier(0.22, 1, 0.36, 1);

  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
  /* Inherit the host page font (see the HOST THEME ISOLATION block). The widget
     keeps its own sizes/weights/line-heights but follows the site's family. */
  font-family: inherit;
  min-height: 420px;
}

/* ── transcript ─────────────────────────────────────────── */

.qa-log {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: 460px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
  padding-right: 4px;
}
.qa-log::-webkit-scrollbar { width: 6px; }
.qa-log::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
}

.qa-msg {
  max-width: 90%;
  padding: 16px 19px;
  border-radius: 16px;
  font-size: 15.5px;
  line-height: 1.6;
  letter-spacing: -0.005em;
  animation: qa-rise 0.42s var(--qa-ease) both;
}

@keyframes qa-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.qa-msg--bot {
  align-self: flex-start;
  background: var(--qa-well);
  border: 1px solid var(--qa-line);
  color: #fff;
}

.qa-msg--user {
  align-self: flex-end;
  background: #fff;
  color: #1d0656;
  font-weight: 500;
  border: 1px solid transparent;
}

/* ── the research beat ──────────────────────────────────────
   The signature moment: the bot reading their site. This is not a spinner
   pretending to work, it names the actual domain it is fetching. It is the
   reason the next message can be specific, so it gets the craft budget. */

.qa-working {
  display: flex;
  align-items: center;
  gap: 12px;
  align-self: flex-start;
  padding: 14px 18px 14px 16px;
  border-radius: var(--qa-r);
  background: var(--qa-well);
  border: 1px solid var(--qa-line);
  animation: qa-rise 0.42s var(--qa-ease) both;
  position: relative;
  overflow: hidden;
}

/* A light sweeping across the well: work happening, not time passing. */
.qa-working::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 20%,
    rgba(226, 211, 255, 0.14) 50%,
    transparent 80%
  );
  transform: translateX(-100%);
  animation: qa-sweep 1.7s var(--qa-ease) infinite;
}

@keyframes qa-sweep {
  to { transform: translateX(100%); }
}

.qa-working-text {
  font-size: 14.5px;
  color: var(--qa-muted);
  letter-spacing: -0.005em;
  position: relative;
  z-index: 1;
}

.qa-working-dots {
  display: inline-flex;
  gap: 4px;
  position: relative;
  z-index: 1;
}
.qa-working-dots i {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--qa-accent);
  animation: qa-pulse 1.2s var(--qa-ease) infinite;
}
.qa-working-dots i:nth-child(2) { animation-delay: 0.15s; }
.qa-working-dots i:nth-child(3) { animation-delay: 0.3s; }

@keyframes qa-pulse {
  0%, 60%, 100% { opacity: 0.3; transform: scale(0.8); }
  30%           { opacity: 1;   transform: scale(1); }
}

/* typing indicator, reused shape, quieter */
.qa-typing {
  align-self: flex-start;
  padding: 16px;
  border-radius: var(--qa-r);
  background: var(--qa-well);
  border: 1px solid var(--qa-line);
  animation: qa-rise 0.3s var(--qa-ease) both;
}

/* ── reference cards ───────────────────────────────────────
   Selecting one silently sets style, complexity, and pricing tier. The prospect
   experiences taste, the system receives scope. Accent edge on hover only, so a
   row of three does not shout. */

.qa-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: qa-rise 0.42s var(--qa-ease) both;
}

.qa-card {
  --qa-card-accent: #6118ed;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  text-align: left;
  padding: 17px 18px 17px 21px;
  border-radius: 15px;
  background: var(--qa-well);
  border: 1px solid var(--qa-line);
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  overflow: hidden;
  transition: background 0.2s var(--qa-ease), border-color 0.2s var(--qa-ease),
              transform 0.2s var(--qa-ease);
  animation: qa-rise 0.42s var(--qa-ease) both;
}
.qa-card:nth-child(1) { animation-delay: 0.05s; }
.qa-card:nth-child(2) { animation-delay: 0.12s; }
.qa-card:nth-child(3) { animation-delay: 0.19s; }

.qa-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--qa-card-accent);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 0.24s var(--qa-ease);
}

.qa-card:hover, .qa-card:focus-visible {
  background: var(--qa-well-focus);
  border-color: var(--qa-line-focus);
  transform: translateX(2px);
  outline: none;
}
.qa-card:hover::before, .qa-card:focus-visible::before { transform: scaleY(1); }

.qa-card-title {
  font-size: 15.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.qa-card-note {
  font-size: 13.5px;
  color: var(--qa-muted);
  line-height: 1.4;
}
.qa-card-style {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--qa-accent);
  margin-top: 3px;
}

.qa-card--plain {
  padding: 12px 16px;
  font-size: 13.5px;
  color: var(--qa-muted);
  background: transparent;
  border-style: dashed;
}
.qa-card--plain:hover { color: #fff; }

/* ── composer ──────────────────────────────────────────────
   Deliberately identical to .quote-input-wrap so the swap from form to chat is
   invisible at the token level. */

.qa-composer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: qa-rise 0.42s var(--qa-ease) both;
}

/* A secondary composer shown beneath choices/cards: quieter, set off by a hair
   line so the buttons stay the obvious primary action and typing is the opt-in. */
.qa-composer--compact {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  gap: 8px;
}

.qa-composer-hint {
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: -0.005em;
}

.qa-field { display: flex; flex-direction: column; gap: 8px; }

.qa-label {
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  letter-spacing: -0.005em;
}

.qa-well {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  background: var(--qa-well);
  border: 1px solid var(--qa-line);
  border-radius: 15px;
  transition: border-color 0.2s var(--qa-ease), background 0.2s var(--qa-ease),
              box-shadow 0.2s var(--qa-ease);
}
/* The single focus indicator for text entry. A soft ring rather than an
   outline, so it follows the well's radius instead of boxing it. Strong enough
   to satisfy keyboard users on its own, which is why the field inside opts out
   of its own outline. */
.qa-well:focus-within {
  border-color: var(--qa-line-focus);
  background: var(--qa-well-focus);
  box-shadow: 0 0 0 3px rgba(217, 198, 255, 0.18);
}

.qa-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: none;
  resize: none;
  padding: 16px 6px 16px 18px;
  font-family: inherit;
  font-size: 15.5px;
  line-height: 1.55;
  color: #fff;
}
.qa-input::placeholder {
  color: var(--qa-faint);
  line-height: 1.55;
}

/* Textarea only. Two lines of room from the start: at one row the placeholder
   wrapped and got sliced through the middle of a word, which looks broken
   before the visitor has typed anything. The single-line name and email
   inputs must NOT inherit this. */
textarea.qa-input {
  min-height: 76px;
  max-height: 180px;
}

.qa-send {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  margin: 8px 8px 8px 0;
  border: 0;
  border-radius: 9px;
  background: #fff;
  color: var(--qa-purple);
  cursor: pointer;
  transition: background 0.2s var(--qa-ease), transform 0.2s var(--qa-ease);
}
.qa-send:hover:not(:disabled) {
  background: #f6ecff;
  color: #4a0eb6;
  transform: translateY(-1px);
}
.qa-send:disabled { opacity: 0.4; cursor: default; }
.qa-send svg { width: 17px; height: 17px; }

.qa-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 17px 24px;
  border: 0;
  border-radius: var(--qa-r);
  background: #fff;
  color: var(--qa-purple);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background 0.2s var(--qa-ease), gap 0.2s var(--qa-ease),
              transform 0.2s var(--qa-ease);
}
.qa-submit:hover:not(:disabled) {
  background: #f6ecff;
  color: #4a0eb6;
  gap: 14px;
  transform: translateY(-1px);
}
.qa-submit:disabled { opacity: 0.6; cursor: default; transform: none; }

/* ── quote result ───────────────────────────────────────── */

.qa-quote {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px;
  border-radius: 18px;
  background: rgba(15, 17, 25, 0.38);
  border: 1px solid var(--qa-line);
  animation: qa-rise 0.5s var(--qa-ease) both;
}

.qa-quote-eyebrow {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--qa-accent);
}

.qa-quote-title {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #fff;
  margin-top: -8px;
}

/* The ladder. Rungs stagger in, so the price reads as a considered range
   rather than a single number dropped on them. */
.qa-ladder { display: flex; flex-direction: column; gap: 1px; }

.qa-rung {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 15px;
  background: rgba(255, 255, 255, 0.04);
  animation: qa-rise 0.44s var(--qa-ease) both;
}
.qa-rung:first-child { border-radius: 10px 10px 0 0; }
.qa-rung:last-child  { border-radius: 0 0 10px 10px; }
.qa-rung:nth-child(1) { animation-delay: 0.10s; }
.qa-rung:nth-child(2) { animation-delay: 0.18s; }
.qa-rung:nth-child(3) { animation-delay: 0.26s; }
.qa-rung:nth-child(4) { animation-delay: 0.34s; }

.qa-rung-dur { font-size: 14.5px; color: rgba(255, 255, 255, 0.88); }
.qa-rung-price {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.qa-extra {
  font-size: 13px;
  color: var(--qa-muted);
  padding: 0 2px;
}

.qa-assumptions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px dashed var(--qa-line);
}
.qa-assumptions-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--qa-faint);
}
.qa-assumptions li {
  font-size: 13px;
  color: var(--qa-muted);
  line-height: 1.5;
  list-style: none;
  padding-left: 13px;
  position: relative;
}
.qa-assumptions li::before {
  content: '';
  position: absolute;
  left: 0; top: 8px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
}

/* blueprint */
.qa-bp { display: flex; flex-direction: column; gap: 14px; }
.qa-bp-section { display: flex; flex-direction: column; gap: 5px; }
.qa-bp-heading {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--qa-accent);
  letter-spacing: -0.005em;
}
.qa-bp-body {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
}

.qa-schedule { display: flex; flex-direction: column; gap: 0; }
.qa-week {
  display: flex;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 13.5px;
}
.qa-week:last-child { border-bottom: 0; }
.qa-week-when {
  flex-shrink: 0;
  width: 84px;
  color: var(--qa-faint);
  font-variant-numeric: tabular-nums;
}
.qa-week-what { color: rgba(255, 255, 255, 0.86); }

.qa-divider { height: 1px; background: rgba(255, 255, 255, 0.09); }

.qa-note {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--qa-faint);
}

.qa-warn {
  padding: 11px 14px;
  border-radius: 9px;
  background: rgba(255, 205, 0, 0.10);
  border: 1px solid rgba(255, 205, 0, 0.3);
  font-size: 12.5px;
  line-height: 1.5;
  color: #ffe9a3;
}

.qa-error {
  font-size: 13px;
  color: #ffc9c9;
  padding: 2px;
}

/* ── a11y ──────────────────────────────────────────────── */

.qa-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.qa :focus-visible {
  outline: 2px solid var(--qa-line-focus);
  outline-offset: 2px;
}

/* Inputs opt out: the well they sit in already lights up on :focus-within
   (border goes to --qa-line-focus, background deepens), so an outline on the
   field itself draws a second, squared-off box inside the rounded well. One
   clear focus indicator, not two competing ones. Accessibility is preserved
   because the well's state change is the indicator. */
.qa-input:focus,
.qa-input:focus-visible {
  outline: none;
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .qa *, .qa *::before, .qa *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}

@media (max-width: 921px) {
  .qa { min-height: 0; }
  .qa-log { max-height: none; }
}

/* ══════════════════════════════════════════════════════════
   FLOATING SHELL
   The launcher and panel. The chat inside is the same widget used
   inline in #quote, so both mounts stay in sync by construction.

   The panel carries the purple itself, because floating over a white
   homepage it has no band to sit in. Same #6118ed, so the two mounts
   are visually identical.
   ══════════════════════════════════════════════════════════ */

.qa-launcher-root {
  position: fixed;
  right: 24px;
  /* 76px (not 24px) clears the host's Astra back-to-top control (#ast-scroll-top,
     fixed bottom:30px, 31.5px tall -> top edge 61.5px from the viewport bottom),
     leaving ~14.5px of separation so the closed launcher no longer covers it.
     A host with nothing in that corner (VIH) can lower it via the plugin's
     launcher-offset setting, which sets --qa-launcher-bottom; the 76px fallback
     keeps the default rendering unchanged when the variable is not set.
     The open .qa-panel is a separate fixed sibling and is deliberately left at
     bottom:24px (its max-height assumes that offset). */
  bottom: var(--qa-launcher-bottom, 76px);
  z-index: 2147483000;
  /* Inherit the host page font (see the HOST THEME ISOLATION block). */
  font-family: inherit;
}

/* ── launcher ── */

.qa-launcher {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  height: 58px;
  width: 58px;
  border: 0;
  border-radius: 999px;
  background: #6118ed;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(97, 24, 237, 0.34), 0 4px 8px rgba(15, 17, 25, 0.12);
  transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.26s cubic-bezier(0.22, 1, 0.36, 1),
              width 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
  white-space: nowrap;
}
.qa-launcher:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(97, 24, 237, 0.42), 0 4px 8px rgba(15, 17, 25, 0.14);
}

.qa-launcher-icon {
  position: absolute;
  left: 0; top: 0;
  width: 58px; height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.qa-launcher-icon svg { width: 23px; height: 23px; }

/* Expands to a labelled pill. A bare bubble reads as "support chat" and
   gets ignored, so it says what it does. */
.qa-launcher--wide { width: 210px; }
.qa-launcher-label {
  margin-left: 58px;
  padding-right: 20px;
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  opacity: 0;
  transition: opacity 0.2s ease 0.06s;
}
.qa-launcher--wide .qa-launcher-label { opacity: 1; }

/* One attention pulse, then it stops. Repeating forever is a tax on
   every visitor who already said no. */
.qa-launcher::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 2px solid #6118ed;
  animation: qa-ping 2.4s cubic-bezier(0.22, 1, 0.36, 1) 3;
  pointer-events: none;
}
@keyframes qa-ping {
  0%       { transform: scale(1);   opacity: 0.65; }
  70%,100% { transform: scale(1.5); opacity: 0; }
}

.qa-launcher-root--open .qa-launcher { transform: scale(0.9); opacity: 0; pointer-events: none; }

/* ── teaser ── */

.qa-teaser {
  position: absolute;
  right: 0;
  bottom: 70px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 262px;
  padding: 14px 16px;
  border-radius: 14px 14px 4px 14px;
  background: #fff;
  color: #0f1119;
  box-shadow: 0 10px 30px rgba(15, 17, 25, 0.13), 0 2px 6px rgba(15, 17, 25, 0.07);
  font-size: 13.5px;
  line-height: 1.45;
  cursor: pointer;
  animation: qa-teaser-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
  text-align: left;
}
@keyframes qa-teaser-in {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}
.qa-teaser strong { font-weight: 600; display: block; margin-bottom: 2px; }
.qa-teaser span { color: #5a5e6e; }

.qa-teaser-x {
  position: absolute;
  top: -7px; right: -7px;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 0;
  background: #0f1119;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(15, 17, 25, 0.2);
}
.qa-teaser-x:hover { background: #2a2d3a; }

/* ── panel ── */

.qa-panel {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 480px;
  max-height: min(760px, calc(100vh - 48px));
  min-height: 520px;
  display: flex;
  flex-direction: column;
  border-radius: 24px;
  /* Depth rather than a flat fill. Echoes the hero's radial treatment so the
     panel reads as part of the brand, not a bolted-on chat product. */
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(255, 255, 255, 0.10), transparent 62%),
    radial-gradient(ellipse 70% 50% at 100% 100%, rgba(25, 135, 244, 0.16), transparent 60%),
    #6118ed;
  box-shadow: 0 30px 70px rgba(15, 17, 25, 0.3), 0 10px 20px rgba(15, 17, 25, 0.14);
  overflow: hidden;
  z-index: 2147483001;
  transform-origin: bottom right;
  animation: qa-panel-in 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes qa-panel-in {
  from { opacity: 0; transform: translateY(14px) scale(0.94); }
  to   { opacity: 1; transform: none; }
}
.qa-panel--closing { animation: qa-panel-out 0.2s ease both; }
@keyframes qa-panel-out {
  to { opacity: 0; transform: translateY(10px) scale(0.96); }
}

.qa-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 22px 20px 20px 26px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
}
.qa-panel-title {
  font-size: 19px;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.022em;
}
.qa-panel-sub {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.66);
  margin-top: 3px;
  letter-spacing: -0.005em;
}
.qa-panel-actions { display: flex; gap: 6px; flex-shrink: 0; }

.qa-panel-btn {
  width: 30px; height: 30px;
  border: 0;
  border-radius: 8px;
  background: rgba(15, 17, 25, 0.28);
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s ease, color 0.18s ease;
}
.qa-panel-btn:hover { background: rgba(15, 17, 25, 0.5); color: #fff; }
.qa-panel-btn svg { width: 15px; height: 15px; }

.qa-panel-body {
  padding: 26px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}
.qa-panel-body::-webkit-scrollbar { width: 6px; }
.qa-panel-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
}

/* The escape hatch. Present in the panel from first paint, same as the
   inline mount. Never hidden, never a dead end. */
.qa-panel-foot {
  flex-shrink: 0;
  padding: 14px 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(15, 17, 25, 0.34);
}
.qa-panel-human {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 14px 8px 11px;
  border-radius: 999px;
  border: 1px solid rgba(226, 211, 255, 0.32);
  background: rgba(226, 211, 255, 0.10);
  font-size: 13px;
  font-weight: 500;
  color: #e2d3ff;
  text-decoration: none;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.qa-panel-human:hover {
  background: #fff;
  border-color: #fff;
  color: #6118ed;
}
.qa-panel-human svg { width: 13px; height: 13px; }

/* Inside the panel the log has its own scroller, so let it grow. */
.qa-panel .qa { min-height: 0; }
.qa-panel .qa-log { max-height: none; overflow: visible; }

/* ── mobile: full sheet ── */

@media (max-width: 560px) {
  /* Same 76px clearance on mobile: Astra's #ast-scroll-top keeps bottom:30px
     (data-on-devices="both"), so the closed launcher must clear it here too. The
     right offset stays 16px; the full-sheet .qa-panel below is unchanged. */
  .qa-launcher-root { right: 16px; bottom: var(--qa-launcher-bottom, 76px); }
  .qa-panel {
    right: 0; bottom: 0; left: 0;
    width: 100%;
    max-height: 92vh;
    border-radius: 18px 18px 0 0;
  }
  .qa-teaser { width: 232px; }
}

@media (prefers-reduced-motion: reduce) {
  .qa-launcher::after { animation: none; }
}

/* ══════════════════════════════════════════════════════════
   RESEARCH CARD
   The proof. Research is the moment the prospect decides whether this thing
   understands them, and a single sentence proves nothing. Showing the findings
   as a readable artifact is what earns the rest of the conversation.
   ══════════════════════════════════════════════════════════ */

.qa-research {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  border-radius: 16px;
  background: rgba(15, 17, 25, 0.42);
  border: 1px solid rgba(226, 211, 255, 0.22);
  animation: qa-rise 0.5s var(--qa-ease) both;
}

.qa-research-head {
  display: flex;
  align-items: center;
  gap: 11px;
}

.qa-research-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(226, 211, 255, 0.16);
  color: var(--qa-accent);
  flex-shrink: 0;
}

.qa-research-titles { display: flex; flex-direction: column; min-width: 0; }
.qa-research-title {
  font-size: 15.5px;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.015em;
}
.qa-research-domain {
  font-size: 12px;
  color: var(--qa-faint);
  font-variant-numeric: tabular-nums;
}

.qa-research-rows {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.qa-research-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 11px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  animation: qa-rise 0.44s var(--qa-ease) both;
}
.qa-research-row:first-child { border-top: 0; padding-top: 2px; }

.qa-research-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--qa-faint);
}
.qa-research-value {
  font-size: 14.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
}

/* ── choices ── */

.qa-choices {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  animation: qa-rise 0.42s var(--qa-ease) both;
}

.qa-choice {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1;
  min-width: 140px;
  padding: 15px 20px;
  border-radius: 12px;
  border: 1px solid var(--qa-line);
  background: var(--qa-well);
  color: #fff;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background 0.2s var(--qa-ease), border-color 0.2s var(--qa-ease),
              transform 0.2s var(--qa-ease), gap 0.2s var(--qa-ease);
}
.qa-choice:hover:not(:disabled) {
  background: var(--qa-well-focus);
  border-color: var(--qa-line-focus);
  transform: translateY(-1px);
}
.qa-choice:disabled { opacity: 0.45; cursor: default; transform: none; }

.qa-choice--primary {
  background: #fff;
  border-color: #fff;
  color: var(--qa-purple);
  font-weight: 600;
}

/* Duration selection: one runtime option per row (never a grid), duration on
   the left, its exact configured price on the right. */
.qa-durations {
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: qa-rise 0.42s var(--qa-ease) both;
}
.qa-duration {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 14px 18px;
  border-radius: 12px;
  border: 1px solid var(--qa-line);
  background: var(--qa-well);
  color: #fff;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s var(--qa-ease), border-color 0.2s var(--qa-ease),
              transform 0.2s var(--qa-ease);
}
.qa-duration:hover:not(:disabled) {
  background: var(--qa-well-focus);
  border-color: var(--qa-line-focus);
  transform: translateY(-1px);
}
.qa-duration:disabled { opacity: 0.45; cursor: default; transform: none; }
.qa-duration-dur { font-size: 14.5px; font-weight: 500; letter-spacing: -0.01em; }

/* the format being priced, named above the durations (no price shown) */
.qa-duration-format {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.qa-duration-format-label {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(226, 211, 255, 0.12);
  border: 1px solid rgba(226, 211, 255, 0.28);
}

/* go back to the reference cards to pick a different style */
.qa-change-style {
  align-self: flex-start;
  margin-top: 10px;
  padding: 6px 2px;
  background: none;
  border: none;
  color: var(--qa-accent);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.qa-change-style:hover { color: #fff; }

/* custom-length input on the duration step */
.qa-duration-custom {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  align-items: stretch;
}
.qa-duration-custom .qa-input {
  flex: 1;
  min-width: 0;
}
.qa-duration-custom-go {
  flex: 0 0 auto;
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid var(--qa-line);
  background: var(--qa-well);
  color: #fff;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s var(--qa-ease), border-color 0.2s var(--qa-ease);
}
.qa-duration-custom-go:hover:not(:disabled) {
  background: var(--qa-well-focus);
  border-color: var(--qa-line-focus);
}
.qa-duration-custom-go:disabled { opacity: 0.45; cursor: default; }
.qa-choice--primary:hover:not(:disabled) {
  background: #f6ecff;
  border-color: #f6ecff;
  color: #4a0eb6;
  gap: 12px;
}

/* ══════════════════════════════════════════════════════════
   VIDEO REFERENCE CARDS
   Picking a style is a visual judgement, so the card leads with the work, not
   a title. This step silently sets the pricing tier, which is why it earns the
   space: a better-informed pick is a more accurate quote.
   ══════════════════════════════════════════════════════════ */

.qa-vcard {
  --qa-card-accent: #6118ed;
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  background: var(--qa-well);
  border: 1px solid var(--qa-line);
  overflow: hidden;
  transition: border-color 0.2s var(--qa-ease), transform 0.2s var(--qa-ease);
  animation: qa-rise 0.44s var(--qa-ease) both;
}
.qa-vcard:nth-child(1) { animation-delay: 0.05s; }
.qa-vcard:nth-child(2) { animation-delay: 0.13s; }
.qa-vcard:nth-child(3) { animation-delay: 0.21s; }
.qa-vcard:hover { border-color: rgba(217, 198, 255, 0.5); }

.qa-vcard--locked { opacity: 0.45; pointer-events: none; }

/* ── media ── */

.qa-vcard-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: rgba(15, 17, 25, 0.5);
  overflow: hidden;
}

.qa-vcard-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s var(--qa-ease), filter 0.3s var(--qa-ease);
}
.qa-vcard:hover .qa-vcard-thumb {
  transform: scale(1.04);
  filter: brightness(1.06);
}

.qa-vcard-play {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 52px; height: 52px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: var(--qa-purple);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-left: 3px; /* optical centring of the triangle */
  box-shadow: 0 6px 20px rgba(15, 17, 25, 0.3);
  transition: transform 0.24s var(--qa-ease), background 0.2s var(--qa-ease);
}
.qa-vcard-play svg { fill: currentColor; stroke-width: 0; }
.qa-vcard-play:hover {
  transform: translate(-50%, -50%) scale(1.09);
  background: #fff;
}

.qa-vcard-dur {
  position: absolute;
  right: 9px; bottom: 9px;
  padding: 3px 7px;
  border-radius: 5px;
  background: rgba(15, 17, 25, 0.8);
  color: #fff;
  font-size: 11.5px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.qa-vcard-expand {
  position: absolute;
  right: 9px; top: 9px;
  width: 28px; height: 28px;
  border: 0;
  border-radius: 7px;
  background: rgba(15, 17, 25, 0.7);
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s var(--qa-ease), background 0.2s var(--qa-ease);
}
.qa-vcard:hover .qa-vcard-expand,
.qa-vcard-expand:focus-visible { opacity: 1; }
.qa-vcard-expand:hover { background: rgba(15, 17, 25, 0.92); }

.qa-vcard-media--playing { background: #000; }
.qa-vcard-frame {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ── body ── */

.qa-vcard-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 15px 17px 15px;
}

.qa-vcard-title {
  font-size: 15.5px;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.015em;
}
.qa-vcard-note {
  font-size: 13px;
  line-height: 1.45;
  color: var(--qa-muted);
}

.qa-vcard-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 9px;
}

.qa-vcard-style {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--qa-accent);
}

.qa-vcard-use {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 15px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 9px;
  background: transparent;
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s var(--qa-ease), border-color 0.2s var(--qa-ease),
              gap 0.2s var(--qa-ease), color 0.2s var(--qa-ease);
}
.qa-vcard-use:hover {
  background: #fff;
  border-color: #fff;
  color: var(--qa-purple);
  gap: 10px;
}

/* ── lightbox ── */

.qa-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2147483100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5vh 5vw;
  background: rgba(6, 4, 16, 0.86);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: qa-fade 0.24s var(--qa-ease) both;
}
@keyframes qa-fade { from { opacity: 0; } to { opacity: 1; } }

.qa-lightbox-inner {
  position: relative;
  width: min(1100px, 100%);
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55);
  animation: qa-pop 0.3s var(--qa-ease) both;
}
@keyframes qa-pop {
  from { opacity: 0; transform: scale(0.96) translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.qa-lightbox-frame { width: 100%; height: 100%; border: 0; display: block; }

.qa-lightbox-x {
  position: absolute;
  top: -44px; right: 0;
  width: 34px; height: 34px;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s var(--qa-ease);
}
.qa-lightbox-x:hover { background: rgba(255, 255, 255, 0.28); }

@media (max-width: 560px) {
  .qa-lightbox { padding: 0 12px; }
  .qa-lightbox-x { top: -42px; }
}

/* ══════════════════════════════════════════════════════════
   NEW COMPONENTS (purple theme) — added for chips, AI disclosure,
   one-field capture, curated inspiration, the deliverable link, and the
   tier-aware timeline. Styled in the dark/purple token vocabulary so they read
   as native to the #6118ed band.
   ══════════════════════════════════════════════════════════ */

/* progress indicator: four steps, hidden until the flow starts */
.qa-progress {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 2px 2px 4px;
}
.qa-progress.qa-progress--on { display: flex; }
.qa-progress-step {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.qa-progress-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--qa-line);
  flex-shrink: 0;
  transition: background 0.25s var(--qa-ease), box-shadow 0.25s var(--qa-ease);
}
.qa-progress-label {
  font-size: 10.5px;
  color: var(--qa-faint);
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.25s var(--qa-ease);
}
.qa-progress-step--done .qa-progress-dot { background: var(--qa-accent); }
.qa-progress-step--active .qa-progress-dot {
  background: var(--qa-accent);
  box-shadow: 0 0 0 3px rgba(226, 211, 255, 0.22);
}
.qa-progress-step--active .qa-progress-label { color: #fff; font-weight: 600; }
@media (max-width: 560px) {
  .qa-progress-label { display: none; }
  .qa-progress-step { flex: 0 0 auto; }
}

/* AI disclosure + reassurance microcopy */
/* AI disclosure: quiet supporting meta copy, NOT a chat bubble. No fill, border,
   pill, or dot; left-aligned with the conversation, smaller than a 15.5px chat
   message, and subordinate to the first question. Both lines are 12.5px; the
   opacity step (main 0.9, proof 0.8) carries the hierarchy BETWEEN them. On the
   #6118ed band both clear WCAG AA for small text (>= 4.5:1): main is 6.16:1, proof
   is 5.12:1. The missing bubble and the 12.5px size subordinate the block as a
   whole; opacity alone separates the two lines. */
.qa-disclosure {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-self: flex-start;
  padding: 0 2px;
  letter-spacing: -0.003em;
}
.qa-disclosure-main {
  font-size: 12.5px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.9);
}
.qa-disclosure-proof {
  font-size: 12.5px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.8);
}
.qa-reassure {
  font-size: 12px;
  color: var(--qa-faint);
  letter-spacing: -0.003em;
  padding: 0 2px;
}
.qa-privacy {
  font-size: 12px;
  color: var(--qa-faint);
  letter-spacing: -0.003em;
  padding: 0 2px;
  margin-top: 2px;
}
.qa-privacy-link {
  color: inherit;
  text-decoration: underline;
}
.qa-privacy-link:hover {
  color: #fff;
}

/* starter chips: buttons AND free text */
.qa-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  animation: qa-rise 0.42s var(--qa-ease) both;
}
.qa-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--qa-line);
  background: var(--qa-well);
  color: #fff;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.006em;
  cursor: pointer;
  transition: background 0.18s var(--qa-ease), border-color 0.18s var(--qa-ease),
              transform 0.18s var(--qa-ease);
}
.qa-chip:hover:not(:disabled) {
  background: var(--qa-well-focus);
  border-color: var(--qa-line-focus);
  transform: translateY(-1px);
}
.qa-chip:disabled { opacity: 0.5; cursor: default; }
.qa-chip svg { width: 13px; height: 13px; color: var(--qa-accent); }

/* "See other styles" toggle */
.qa-cards-toggle {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 6px;
  padding: 9px 15px;
  border-radius: 999px;
  border: 1px solid var(--qa-line);
  background: var(--qa-well);
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s var(--qa-ease), border-color 0.18s var(--qa-ease);
}
.qa-cards-toggle:hover { background: var(--qa-well-focus); border-color: var(--qa-line-focus); }
.qa-cards-toggle svg { color: var(--qa-accent); }
.qa-cards-more { display: flex; flex-direction: column; gap: 10px; }

/* quote: how-much and how-long together */
.qa-quote-timeline {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin-top: -6px;
}
.qa-quote-timeline-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--qa-faint);
}
.qa-quote-timeline-value { font-size: 14px; font-weight: 600; color: #fff; }

/* real-but-unconfirmed pricing note (informative, not alarming) */
.qa-note-soft {
  padding: 11px 14px;
  border-radius: 9px;
  background: rgba(226, 211, 255, 0.10);
  border: 1px solid rgba(226, 211, 255, 0.28);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--qa-accent);
}

/* deliverable link: opens the proposal that gets emailed */
.qa-deliverable {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 18px;
  border-radius: 14px;
  background: var(--qa-well);
  border: 1px solid var(--qa-line);
  text-decoration: none;
  color: #fff;
  transition: border-color 0.2s var(--qa-ease), background 0.2s var(--qa-ease),
              transform 0.2s var(--qa-ease);
  animation: qa-rise 0.44s var(--qa-ease) both;
}
.qa-deliverable:hover {
  border-color: var(--qa-line-focus);
  background: var(--qa-well-focus);
  transform: translateY(-1px);
}
.qa-deliverable-text { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.qa-deliverable-text strong { font-size: 14.5px; font-weight: 600; color: #fff; letter-spacing: -0.01em; }
.qa-deliverable-text small { font-size: 12.5px; color: var(--qa-muted); }
.qa-deliverable svg { color: var(--qa-accent); flex-shrink: 0; }

/* curated inspiration strip */
.qa-inspo {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 4px;
  animation: qa-rise 0.44s var(--qa-ease) both;
}
.qa-inspo-head { display: flex; flex-direction: column; gap: 3px; }
.qa-inspo-title { font-size: 14px; font-weight: 700; color: #fff; letter-spacing: -0.01em; }
.qa-inspo-sub { font-size: 12px; line-height: 1.45; color: var(--qa-faint); }
.qa-inspo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 560px) { .qa-inspo-grid { grid-template-columns: 1fr 1fr; } }
.qa-inspo-card {
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  overflow: hidden;
  background: var(--qa-well);
  border: 1px solid var(--qa-line);
  transition: border-color 0.2s var(--qa-ease);
}
.qa-inspo-card:hover { border-color: var(--qa-line-focus); }
.qa-inspo-card .qa-vcard-media { border-radius: 0; }
.qa-inspo-card .qa-vcard-play { width: 40px; height: 40px; }
.qa-inspo-body { display: flex; flex-direction: column; gap: 2px; padding: 9px 10px 11px; }
.qa-inspo-name {
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  line-height: 1.35;
  letter-spacing: -0.01em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.qa-inspo-style {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--qa-accent);
}

/* ══════════════════════════════════════════════════════════
   HOST THEME ISOLATION  (Elementor + Astra, or any WordPress theme)

   The widget is injected into the normal page DOM, so host selectors that carry
   more specificity than a single widget class win over the plugin's rules no
   matter where the stylesheet is enqueued. Elementor's ".elementor-kit-<id> a"
   is 0,1,1 and Astra's "input[type=text]:focus" is 0,2,1; the plugin's
   ".qa-panel-human" and ".qa-input" are only 0,1,0, so the host wins on
   specificity ALONE. Source order and enqueue priority cannot recover a
   specificity loss, so every rule below is scoped root + component (two
   classes, 0,2,0, or higher with a state pseudo-class) to beat the host cleanly.
   No !important is used. Two widget roots are covered:
     .qa         the conversation (inline shortcode mount, and inside the panel)
     .qa-panel   the floating dialog chrome, a body-level fixed sibling that does
                 NOT inherit from .qa, so it needs its own root scope.
   These rules only re-assert the widget's existing intended values; they change
   no copy, colour intent, or layout of the widget itself.

   FONT FAMILY IS INHERITED, NOT HARDCODED. The three widget roots (.qa,
   .qa-panel, .qa-launcher-root) take font-family: inherit, so the widget uses
   the host page's font and follows it automatically if the site changes it.
   There is no @font-face, Google Fonts request, or bundled font here. On a host
   that sets no font at all the widget falls through to the browser default
   (typically Times New Roman); WordPress themes effectively always set a body
   font, and staging1 (Astra) declares Outfit on body/button/input/select/
   textarea, so the widget shows Outfit there purely by inheritance. Only the
   family is inherited: every component keeps its own size, weight, and
   line-height below.
   ══════════════════════════════════════════════════════════ */

/* 1. Geometry baseline + host-font inheritance. box-sizing plus a neutral
   line-height/letter-spacing stop host geometry leaking in; font-family:inherit
   makes each root follow the site font. */
.qa, .qa *, .qa-panel, .qa-panel *,
.qa-launcher-root, .qa-launcher-root *,
.qa-lightbox, .qa-lightbox * { box-sizing: border-box; }
/* .qa-lightbox is a THIRD widget root: like .qa-panel it is appended straight to
   document.body (not nested under .qa/.qa-launcher-root), so it needs its own
   scope to inherit the host font and to isolate its close button. */
.qa, .qa-panel, .qa-launcher-root, .qa-lightbox {
  font-family: inherit;
  line-height: 1.5;
  letter-spacing: normal;
}

/* 1b. Form controls, buttons, links, and the launcher label do NOT inherit
   font-family by default (browsers give controls their own), and Astra pins it
   with "body,button,input,select,textarea{font-family:...}" (0,0,1) while
   Elementor can set it on "a". Re-assert inheritance on each, scoped to a widget
   root (0,2,0 or 0,1,1 under a root) so the host cannot pin a different family
   onto a widget control. Every selector stays inside a widget root: no bare
   input/button/textarea/a/svg escapes to the host page. */
.qa .qa-input,        .qa-panel .qa-input,
.qa textarea,         .qa-panel textarea,
.qa .qa-send,         .qa-panel .qa-send,
.qa button,           .qa-panel button,
.qa a,                .qa-panel a,
.qa-panel .qa-panel-btn,
.qa-panel .qa-panel-human,   .qa .qa-panel-human,
.qa-panel .qa-panel-title,
.qa-panel .qa-panel-sub,
.qa-launcher-root .qa-launcher,
.qa-launcher-root .qa-launcher-label,
.qa-lightbox button,  .qa-lightbox a {
  font-family: inherit;
}

/* 2. Conversation + panel-chrome typography (0,2,0 beats host inheritance). */
.qa .qa-msg { font-size: 15.5px; line-height: 1.6; }
.qa-panel .qa-panel-title { font-size: 19px; font-weight: 600; line-height: 1.25; }

/* 3. Text input. Astra's "input[type=text]" (0,1,1) and ":focus" (0,2,1) paint a
   white rectangle with dark text and theme padding. ".qa .qa-input" (0,2,0) and
   ".qa .qa-input:focus" (0,3,0) win and keep the inner field transparent, the
   text white, and the widget's own padding. The single visible focus indicator
   stays the .qa-well ring, so keyboard focus is preserved. */
.qa .qa-input,
.qa-panel .qa-input {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: #fff;
  font-family: inherit;
  font-size: 15.5px;
  line-height: 1.55;
  padding: 16px 6px 16px 18px;
  -webkit-appearance: none;
  appearance: none;
}
.qa .qa-input:hover,        .qa-panel .qa-input:hover,
.qa .qa-input:focus,        .qa-panel .qa-input:focus,
.qa .qa-input:focus-visible, .qa-panel .qa-input:focus-visible,
.qa .qa-input:active,       .qa-panel .qa-input:active {
  background: transparent;
  border: 0;
  box-shadow: none;
  outline: none;
  color: #fff;
}
.qa .qa-input::placeholder,
.qa-panel .qa-input::placeholder { color: var(--qa-faint); }
/* The textarea keeps its two-line starting height through the reset above. */
.qa textarea.qa-input,
.qa-panel textarea.qa-input { min-height: 76px; max-height: 180px; }

/* 4. Permanent human CTA. Elementor's ".elementor-kit-<id> a" (0,1,1) makes it
   20px/700 and forces an ugly wrap, AND sets colour:#6118ed which, on the dark
   panel foot, left the resting CTA nearly invisible until hover. Astra also sets a
   bare "a" colour. ".qa-panel .qa-panel-human" (0,2,0) restores the compact
   13px/500 subordinate link AND re-asserts the intended idle pill colours (pale
   lilac text/icon on a translucent-lilac fill), so the CTA is visible at rest, not
   only on hover. The 0,3,0 hover/focus/active rules below still win their states.
   Text, destination and dimensions are unchanged. */
.qa-panel .qa-panel-human,
.qa .qa-panel-human {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: normal;
  text-decoration: none;
  color: #e2d3ff;
  background: rgba(226, 211, 255, 0.10);
  border-color: rgba(226, 211, 255, 0.32);
}
/* Visited state: browsers restrict :visited to colour/background/border-colour,
   exactly what a host "a:visited" would repaint, so re-assert the same idle pill
   colours at 0,3,0. Placed before the hover/focus/active rules so those still win
   when a visited link is hovered or focused. */
.qa-panel .qa-panel-human:visited,
.qa .qa-panel-human:visited {
  color: #e2d3ff;
  background: rgba(226, 211, 255, 0.10);
  border-color: rgba(226, 211, 255, 0.32);
  text-decoration: none;
}

/* 5. Host button chrome that widget buttons do not set for themselves: Astra's
   "button" (0,0,1) forces a 44px min tap-target and native appearance onto every
   widget button. Strip only those fall-through properties; each button keeps the
   width/height/padding/background it sets itself. No widget button declares its
   own min-height, so resetting it to 0 restores the intended sizing. */
.qa button, .qa-panel button, .qa-launcher-root button, .qa-lightbox button {
  min-height: 0;
  min-width: 0;
  -webkit-appearance: none;
  appearance: none;
}

/* 6. Icon-only buttons carry no padding of their own, so Astra's "button"
   padding (10px 24px) collapses their centred SVG to zero width inside a fixed
   box. Zero the padding on the two icon buttons in the chrome and input row
   (the video-card play button keeps its own optical padding and is left alone).
   0,2,0 also clears any "input[type=submit]"-style host rule. */
.qa-panel .qa-panel-btn,
.qa .qa-send { padding: 0; }

/* Minimize control: exact 30x30, restored background and colour (the minus SVG
   is stroke:currentColor, so restoring colour is what makes it visible again),
   and a rigid 15x15 glyph that cannot be flex-squeezed. */
.qa-panel .qa-panel-btn {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 8px;
  background: rgba(15, 17, 25, 0.28);
  color: rgba(255, 255, 255, 0.75);
  line-height: 1;
}
.qa-panel .qa-panel-btn:hover { background: rgba(15, 17, 25, 0.5); color: #fff; }
.qa-panel .qa-panel-btn svg,
.qa .qa-send svg { flex-shrink: 0; display: block; }
.qa-panel .qa-panel-btn svg { width: 15px; height: 15px; }

/* 7. In-conversation primary CTA (.qa-submit, the "Book a 15-minute call"
   button/anchor). As an anchor it is hit by Elementor's ".elementor-kit-<id> a"
   (0,1,1), which forces ~20px/700 and can underline it; as a button it is hit by
   Astra's "button" chrome. ".qa .qa-submit" (0,2,0) beats both and re-asserts the
   canonical values (font-size 15px, weight 600, letter-spacing -0.01em, padding
   17px 24px, no border, the widget radius). Colours, wording, URL, and click
   behaviour are untouched. */
.qa .qa-submit {
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: -0.01em;
  text-decoration: none;
  padding: 17px 24px;
  border: 0;
  border-radius: var(--qa-r);
  width: auto;
  min-width: 0;
  min-height: 0;
}

/* 8. Video-card icon controls. The card's top-right button is the EXPAND-to-
   lightbox control (.qa-vcard-expand), not the panel minimize button; the centre
   button is the play control (.qa-vcard-play); the lightbox close is
   .qa-lightbox-x inside the body-level .qa-lightbox. All three are fixed-size
   icon buttons with no padding of their own, so Astra's "button" padding
   flex-squeezes their SVGs to zero width. Zero the padding (0,2,0 beats the host)
   and keep the glyphs rigid; each button's own width/height/background/colour/
   border/radius/opacity/hover/focus rules (0,1,0) already survive the host. */
.qa .qa-vcard-expand,
.qa-lightbox .qa-lightbox-x { padding: 0; }
/* The play button keeps its 3px optical-left padding that centres the triangle;
   restore it at 0,2,0 so the host padding reset above cannot flatten it. */
.qa .qa-vcard-play { padding: 0 0 0 3px; }
.qa .qa-vcard-expand svg,
.qa .qa-vcard-play svg,
.qa-lightbox .qa-lightbox-x svg { flex-shrink: 0; display: block; }

/* 9. INTERACTION-STATE COLOUR ISOLATION (Astra #f9720e orange leak).
   Astra applies "button:hover, button:focus { color/background/border-color:
   #f9720e }" and "a:hover, a:focus { color: #f9720e }" (specificity 0,1,1).
   Several widget hover rules only declare transform/shadow/opacity, so the host
   supplies the colour on hover/focus/active and the control turns orange. Each
   rule below re-asserts the control's OWN intended colours, scoped root+class+
   state (0,3,0) so it beats every Astra interaction selector cleanly. Values are
   copied from the component's existing normal/hover rules; hover keeps its
   brighten, the other states hold the normal colours. No !important; the intended
   transforms, shadows, gap, opacity, and focus rings are untouched. */

/* Launcher: always purple, white glyph (hover only transforms). */
.qa-launcher-root .qa-launcher:hover,
.qa-launcher-root .qa-launcher:focus,
.qa-launcher-root .qa-launcher:focus-visible,
.qa-launcher-root .qa-launcher:active { color: #fff; background: #6118ed; }

/* Teaser close: dark chip, white x; hover darkens. */
.qa-launcher-root .qa-teaser-x:focus,
.qa-launcher-root .qa-teaser-x:focus-visible,
.qa-launcher-root .qa-teaser-x:active { color: #fff; background: #0f1119; }
.qa-launcher-root .qa-teaser-x:hover { color: #fff; background: #2a2d3a; }

/* Panel minimize icon button. */
.qa-panel .qa-panel-btn:focus,
.qa-panel .qa-panel-btn:focus-visible,
.qa-panel .qa-panel-btn:active { color: rgba(255, 255, 255, 0.75); background: rgba(15, 17, 25, 0.28); }
.qa-panel .qa-panel-btn:hover { color: #fff; background: rgba(15, 17, 25, 0.5); }

/* White CTAs with purple text: send + submit. */
.qa .qa-send:focus,        .qa .qa-send:focus-visible,        .qa .qa-send:active,
.qa .qa-submit:focus,      .qa .qa-submit:focus-visible,      .qa .qa-submit:active {
  color: var(--qa-purple); background: #fff;
}
.qa .qa-send:hover:not(:disabled),
.qa .qa-submit:hover:not(:disabled) { color: #4a0eb6; background: #f6ecff; }

/* Dark-well choices/chips/durations/fallback card: white text, brighten on hover. */
.qa .qa-choice:focus,   .qa .qa-choice:focus-visible,   .qa .qa-choice:active,
.qa .qa-duration:focus, .qa .qa-duration:focus-visible, .qa .qa-duration:active,
.qa .qa-chip:focus,     .qa .qa-chip:focus-visible,     .qa .qa-chip:active {
  color: #fff; background: var(--qa-well); border-color: var(--qa-line);
}
.qa .qa-choice:hover:not(:disabled),
.qa .qa-duration:hover:not(:disabled),
.qa .qa-chip:hover:not(:disabled) {
  color: #fff; background: var(--qa-well-focus); border-color: var(--qa-line-focus);
}

/* Primary white choice CTA (e.g. "Get my price and plan"). */
.qa .qa-choice--primary:focus,
.qa .qa-choice--primary:focus-visible,
.qa .qa-choice--primary:active { color: var(--qa-purple); background: #fff; border-color: #fff; }
.qa .qa-choice--primary:hover:not(:disabled) { color: #4a0eb6; background: #f6ecff; border-color: #f6ecff; }

/* Fallback "not sure" card: muted transparent, white on hover/focus-visible. */
.qa .qa-card--plain:focus,
.qa .qa-card--plain:active { color: var(--qa-muted); background: transparent; border-color: var(--qa-line); }
.qa .qa-card--plain:hover,
.qa .qa-card--plain:focus-visible { color: #fff; background: var(--qa-well-focus); border-color: var(--qa-line-focus); }

/* Ghost text button "change style": accent text, white on hover, never a fill. */
.qa .qa-change-style:focus,
.qa .qa-change-style:focus-visible,
.qa .qa-change-style:active { color: var(--qa-accent); background: none; }
.qa .qa-change-style:hover { color: #fff; background: none; }

/* Video-card play (light disc, purple triangle). */
.qa .qa-vcard-play:focus,
.qa .qa-vcard-play:focus-visible,
.qa .qa-vcard-play:active { color: var(--qa-purple); background: rgba(255, 255, 255, 0.94); }
.qa .qa-vcard-play:hover { color: var(--qa-purple); background: #fff; }

/* Video-card expand (dark disc, light glyph). */
.qa .qa-vcard-expand:focus,
.qa .qa-vcard-expand:focus-visible,
.qa .qa-vcard-expand:active { color: rgba(255, 255, 255, 0.9); background: rgba(15, 17, 25, 0.7); }
.qa .qa-vcard-expand:hover { color: rgba(255, 255, 255, 0.9); background: rgba(15, 17, 25, 0.92); }

/* Video-card "use this style" outline button; fills white on hover. */
.qa .qa-vcard-use:focus,
.qa .qa-vcard-use:focus-visible,
.qa .qa-vcard-use:active { color: #fff; background: transparent; border-color: rgba(255, 255, 255, 0.22); }
.qa .qa-vcard-use:hover { color: var(--qa-purple); background: #fff; border-color: #fff; }

/* Lightbox close (translucent white disc). */
.qa-lightbox .qa-lightbox-x:focus,
.qa-lightbox .qa-lightbox-x:focus-visible,
.qa-lightbox .qa-lightbox-x:active { color: #fff; background: rgba(255, 255, 255, 0.14); }
.qa-lightbox .qa-lightbox-x:hover { color: #fff; background: rgba(255, 255, 255, 0.28); }

/* Permanent human CTA (anchor): pale lilac pill, inverts to purple-on-white on
   hover. Astra's "a:hover, a:focus { color:#f9720e }" is beaten here. */
.qa-panel .qa-panel-human:focus,
.qa-panel .qa-panel-human:focus-visible,
.qa-panel .qa-panel-human:active {
  color: #e2d3ff; background: rgba(226, 211, 255, 0.10); border-color: rgba(226, 211, 255, 0.32);
}
.qa-panel .qa-panel-human:hover { color: #6118ed; background: #fff; border-color: #fff; }

/* 10. Teaser close button geometry: Astra button padding (~10px 24px) widens the
   22x22 control into an ellipse under border-radius:50%. Pin it square with zero
   padding under its .qa-launcher-root root; background/glyph/position/shadow/hover
   and the dismiss behaviour are unchanged. */
.qa-launcher-root .qa-teaser-x {
  width: 22px;
  height: 22px;
  padding: 0;
  min-width: 0;
  min-height: 0;
  border: 0;
  border-radius: 50%;
  line-height: 1;
  -webkit-appearance: none;
  appearance: none;
}

/* 11. DISABLED-STATE COLOUR ISOLATION.
   When JavaScript locks a control (el.disabled = true) while the pointer is still
   over it, the widget's own hover rules stop matching (they carry :not(:disabled))
   but Astra's "button:hover { color/background/border-color: #f9720e }" still
   matches, so the disabled control fades AND turns orange. Each rule re-asserts
   the control's BASE colours for :disabled (and :disabled:hover), scoped
   root+class+:disabled (>= 0,3,0) so it beats Astra's button:hover (0,1,1) and
   input[type=..]:disabled (0,2,1). Only colour/background/border-color are set;
   the existing :disabled opacity, cursor, and transform are untouched, as are the
   :not(:disabled) guards on the enabled hover rules. */

/* White CTAs, purple text (submit keeps 0.6, send keeps 0.4 opacity). */
.qa .qa-submit:disabled,   .qa .qa-submit:disabled:hover,
.qa .qa-send:disabled,     .qa .qa-send:disabled:hover {
  color: var(--qa-purple); background: #fff;
}

/* Dark-well controls, white text. */
.qa .qa-choice:disabled,            .qa .qa-choice:disabled:hover,
.qa .qa-duration:disabled,          .qa .qa-duration:disabled:hover,
.qa .qa-duration-custom-go:disabled,.qa .qa-duration-custom-go:disabled:hover,
.qa .qa-chip:disabled,              .qa .qa-chip:disabled:hover {
  color: #fff; background: var(--qa-well); border-color: var(--qa-line);
}

/* Primary white choice CTA ("Get my price and plan"). */
.qa .qa-choice--primary:disabled,
.qa .qa-choice--primary:disabled:hover { color: var(--qa-purple); background: #fff; border-color: #fff; }

/* Fallback "not sure" card: muted, transparent. */
.qa .qa-card--plain:disabled,
.qa .qa-card--plain:disabled:hover { color: var(--qa-muted); background: transparent; border-color: var(--qa-line); }

/* Video-card controls keep their component palette while a card locks. */
.qa .qa-vcard-play:disabled,
.qa .qa-vcard-play:disabled:hover { color: var(--qa-purple); background: rgba(255, 255, 255, 0.94); }
.qa .qa-vcard-expand:disabled,
.qa .qa-vcard-expand:disabled:hover { color: rgba(255, 255, 255, 0.9); background: rgba(15, 17, 25, 0.7); }
.qa .qa-vcard-use:disabled,
.qa .qa-vcard-use:disabled:hover { color: #fff; background: transparent; border-color: rgba(255, 255, 255, 0.22); }

/* Custom-duration text input, disabled while its request runs: stay transparent
   with white text (0,3,0 beats Astra's input[type=text]:disabled at 0,2,1). */
.qa .qa-input:disabled,
.qa .qa-input:disabled:hover { background: transparent; color: #fff; }