/* AI Sales Assistant page */

:root {
  --asa-ink: #0b0a1f;
  --asa-body: #55566a;
  --asa-muted: #8a8b9c;
  --asa-indigo: #5b57d6;
  --asa-indigo-hover: #4843c4;
  --asa-indigo-deep: #1f2e96;
  --asa-indigo-mid: #4a45c6;
  --asa-violet: #7c77e8;
  --asa-violet-soft: #9a95f5;
  --asa-line: #eae7f3;
  --asa-line-soft: #edebf6;
  --asa-surface: #f8f7fc;
  --asa-cream: #f8f7f5;
  --asa-lilac: #f2f0fa;
  --asa-green: #0e7a55;
  --asa-amber: #b4691a;
  --asa-red: #ef4444;
  --asa-ink-dark: #140b2e;
  --asa-deep-grad: linear-gradient(135deg, #1c2a8e 0%, #3a38b8 50%, #7c77e8 100%);
}

/* reset.css sets border-box on a fixed element list that omits span, so
   padded inline elements on this page would otherwise overflow their row. */
.asa-page,
.asa-page *,
.asa-page *::before,
.asa-page *::after { box-sizing: border-box; }

.asa-page {
  margin: 0;
  background: var(--asa-cream);
  color: var(--asa-ink);
  font-family: "Poppins", -apple-system, BlinkMacSystemFont, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.asa-page { overflow-x: hidden; }
.asa-main { overflow-x: clip; }

.asa-section { padding: 96px 32px; }
.asa-container { width: min(100%, 1240px); margin: 0 auto; }

/* Grid and flex children must be allowed to shrink below their content
   width, or long strings widen the page on small screens. */
.asa-panel > *,
.asa-qual-inner > *,
.asa-roles-card > *,
.asa-start-card > *,
.asa-person-text { min-width: 0; }

/* Long product terms must wrap instead of widening the page. */
.asa-page h1,
.asa-page h2,
.asa-page h3,
.asa-page p,
.asa-page li,
.asa-page dd,
.asa-page summary { overflow-wrap: break-word; }

/* ---------- shared bits ---------- */

.asa-pill {
  display: inline-block;
  margin: 0;
  padding: 7px 18px;
  border-radius: 999px;
  background: #efedfb;
  color: var(--asa-indigo);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  max-width: 100%;
}
.asa-pill-light { background: #fff; border: 1px solid #e2dff0; }
.asa-pill-grey { background: #f2f1f8; color: #6e6f82; }
.asa-pill-outline {
  padding: 8px 20px;
  border: 1px solid #c7c2f2;
  background: rgba(255, 255, 255, .6);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.asa-pill-onDark {
  padding: 7px 18px;
  border: 1px solid rgba(255, 255, 255, .34);
  background: transparent;
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .04em;
}

.asa-grad-text {
  background: linear-gradient(100deg, #2a3ab0, #6b66e4 55%, #9a95f5);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.asa-section-head { max-width: 800px; margin: 0 auto; text-align: center; }
.asa-section-head h2 {
  margin: 20px 0 0;
  color: var(--asa-ink);
  font-size: clamp(30px, 3.6vw, 44px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.14;
}
.asa-section-head p {
  margin: 18px auto 0;
  max-width: 780px;
  color: var(--asa-body);
  font-size: 17.5px;
  line-height: 1.66;
}

.asa-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--asa-muted);
}

.asa-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 34px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: background-color 180ms ease-out, border-color 180ms ease-out, color 180ms ease-out;
}
.asa-button-primary {
  background: var(--asa-indigo);
  color: #fff;
  box-shadow: 0 10px 26px rgba(91, 87, 214, .32);
}
.asa-button-primary:hover { background: var(--asa-indigo-hover); color: #fff; }
.asa-button-ghost {
  border: 1.5px solid #d3cfe8;
  background: #fff;
  color: var(--asa-ink);
}
.asa-button-ghost:hover { border-color: var(--asa-indigo); color: var(--asa-indigo); }
.asa-button-onDark {
  background: #fff;
  color: var(--asa-indigo-deep);
  box-shadow: 0 14px 34px rgba(10, 14, 60, .24);
}
.asa-button-onDark:hover { background: #f1effc; color: var(--asa-indigo-deep); }

.asa-assurance { margin: 6px 0 0; font-size: 14px; color: #7b7c8e; }
.asa-assurance-onDark { color: rgba(255, 255, 255, .72); }

.asa-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 8px; }
.asa-center-action { display: flex; justify-content: center; margin-top: 32px; }

.asa-inline-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 26px;
  font-size: 16px;
  font-weight: 600;
  color: var(--asa-indigo);
  text-decoration: none;
}
.asa-inline-link:hover { color: var(--asa-indigo-hover); }

.asa-grid { display: grid; gap: 20px; }
.asa-grid-3 { grid-template-columns: repeat(3, 1fr); }

.asa-card {
  background: #fff;
  border: 1px solid #eceaf4;
  border-radius: 20px;
  padding: 22px;
  box-shadow: 0 18px 44px rgba(16, 12, 52, .07);
}
.asa-card-dark { background: var(--asa-ink-dark); border-color: transparent; }
.asa-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }

.asa-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}
.asa-tag-green { background: #e3f7ee; color: var(--asa-green); }
.asa-tag-lilac { background: #efedfb; color: var(--asa-indigo); }
.asa-tag-glass {
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .28);
  color: #fff;
  padding: 6px 14px;
  font-size: 12px;
}
.asa-tag-danger { background: rgba(239, 68, 68, .12); color: #fca5a5; }

.asa-live-dot { width: 7px; height: 7px; border-radius: 99px; background: #4ade80; flex: none; }
.asa-live-dot-red { background: var(--asa-red); }

.asa-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  flex: none;
}
.asa-avatar-grad { background: linear-gradient(135deg, #4f4acb, #9a95f5); }
.asa-avatar-sm { width: 38px; height: 38px; border-radius: 12px; font-size: 13px; }

.asa-person { display: flex; align-items: center; gap: 13px; }
.asa-person-text { display: flex; flex-direction: column; gap: 3px; }
.asa-person-name { font-size: 16px; font-weight: 600; color: var(--asa-ink); }
.asa-person-role { font-size: 13.5px; color: #6e6f82; }

.asa-meter { height: 6px; border-radius: 99px; background: var(--asa-line-soft); overflow: hidden; }
.asa-meter > span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--asa-indigo), var(--asa-violet-soft)); transition: width 320ms ease-out; }
.asa-meter-green > span { background: linear-gradient(90deg, #0e9f6e, var(--asa-indigo)); }
.asa-meter-lg { height: 8px; }
.asa-meter-lg > span { background: linear-gradient(90deg, #2e2a8f, #8b86f0); }

.asa-visual-label {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--asa-muted);
}
.asa-label-green { color: #3e7a64; }
.asa-visual-note { margin: 7px 0 0; font-size: 13px; line-height: 1.55; color: #6e6f82; }
.asa-visual-title { font-size: 15px; font-weight: 600; color: var(--asa-ink); }
.asa-on-dark { color: #fff; }

/* ---------- hero ---------- */

/* The shared header is position:fixed (~106px tall), so the hero needs
   top padding to clear it - matching the sibling product pages. */
/* min-height + centering (matching conversation-intelligence-software.css
   .ci-hero) makes the gap below the CTA scale with the viewport instead
   of being a fixed padding value that reads as too much space on tall
   or wide screens. */
.asa-hero {
  display: flex;
  align-items: center;
  min-height: calc(100svh - 74px);
  padding: 132px 32px 64px;
  background:
    radial-gradient(1100px 520px at 82% 8%, #e7e4fa 0%, rgba(248, 247, 245, 0) 62%),
    radial-gradient(800px 460px at 12% 30%, #e4e9fb 0%, rgba(228, 233, 251, 0) 60%),
    var(--asa-cream);
}

/* Anchor targets clear the fixed header when jumped to (measured header
   height ~74px + comfortable clearance). Native fallback for when JS
   scrolling in setupAnchorScroll() doesn't run. */
.asa-main [id],
.asa-main { scroll-margin-top: 96px; }
.asa-hero-inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px; }
.asa-hero h1 {
  margin: 0;
  max-width: 940px;
  font-size: clamp(38px, 5.4vw, 66px);
  line-height: 1.06;
  font-weight: 700;
  letter-spacing: -.035em;
  color: var(--asa-ink);
  text-wrap: balance;
}
.asa-lead { margin: 0; max-width: 760px; font-size: 19px; line-height: 1.62; color: #55566a; }

.asa-chat-head { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; font-size: 14px; font-weight: 600; color: var(--asa-ink); }
.asa-chat-head-lined { padding-bottom: 16px; border-bottom: 1px solid #f1eff7; margin-bottom: 16px; align-items: flex-start; }
.asa-dot-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 9px;
  flex: none;
  background: linear-gradient(135deg, #2e2a8f, #8b86f0);
  color: #fff;
}
.asa-chat-head-lined .asa-dot-mark { width: 28px; height: 28px; }

.asa-bubble { margin: 0; max-width: 94%; padding: 11px 14px; font-size: 13.5px; line-height: 1.55; color: #3c3d50; }
.asa-bubble-user { align-self: flex-end; max-width: 88%; border-radius: 14px 14px 4px 14px; background: #efedfb; }
.asa-bubble-ai { align-self: flex-start; border-radius: 14px 14px 14px 4px; background: #f7f6fb; border: 1px solid var(--asa-line-soft); }

.asa-signal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.asa-signal { min-width: 0; padding: 13px; border-radius: 14px; overflow: hidden; }
.asa-signal strong { display: block; font-size: 22px; font-weight: 700; }
.asa-signal span { display: block; margin-top: 2px; font-size: 12px; overflow-wrap: break-word; }
.asa-signal-green { background: #e9f9f1; }
.asa-signal-green strong { color: var(--asa-green); }
.asa-signal-green span { color: #3e7a64; }
.asa-signal-amber { background: #fef3e7; }
.asa-signal-amber strong { color: var(--asa-amber); }
.asa-signal-amber span { color: #8c6534; }
.asa-signal-indigo { background: #ededfc; }
.asa-signal-indigo strong { color: var(--asa-indigo-mid); }
.asa-signal-indigo span { color: #5a5878; }

/* ---------- problem ---------- */

.asa-problem { background: #fff; border-top: 1px solid #f0eef6; }
.asa-problem-card {
  border-radius: 28px;
  padding: 56px 60px;
  background: var(--asa-deep-grad);
  box-shadow: 0 30px 70px rgba(28, 42, 142, .22);
}
.asa-problem-card h2 {
  margin: 22px 0 0;
  max-width: 900px;
  font-size: clamp(30px, 3.6vw, 44px);
  line-height: 1.14;
  font-weight: 700;
  letter-spacing: -.03em;
  color: #fff;
  text-wrap: balance;
}
.asa-problem-card p { margin: 16px 0 0; max-width: 900px; font-size: 17px; line-height: 1.68; color: rgba(255, 255, 255, .84); }
.asa-problem-card p:first-of-type { margin-top: 22px; }

.asa-problem-grid { margin-top: 24px; }
.asa-mini-card {
  background: var(--asa-surface);
  border: 1px solid var(--asa-line-soft);
  border-radius: 20px;
  padding: 28px;
  transition: border-color 180ms ease-out, background-color 180ms ease-out;
}
.asa-mini-card:hover { border-color: #c9c4ef; background: #fff; }
.asa-mini-card h3 { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -.02em; color: var(--asa-ink); }
.asa-mini-card p { margin: 10px 0 0; font-size: 15px; line-height: 1.62; color: #5b5c70; }
.asa-mini-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: #efedfb;
  color: var(--asa-indigo);
  margin-bottom: 18px;
}
.asa-mini-icon-boxed { width: 40px; height: 40px; border-radius: 13px; background: #fff; border: 1px solid #e7e4f3; margin-bottom: 20px; }

/* ---------- what it does (tabs) ---------- */

.asa-does { background: linear-gradient(180deg, #f8f7f5, #f2f0fa); }

.asa-tab-selector { margin: 0 auto; max-width: 760px; }

/* Mobile dropdown, matching the site's stage-selector pattern
   (index.html .salesmanai-new-stage-dropdown). Hidden on desktop where
   the tab row (below) takes over. */
.asa-tab-dropdown { display: none; position: relative; margin: 44px auto 0; z-index: 8; }
.asa-tab-dropdown-trigger {
  width: 100%;
  min-height: 56px;
  padding: 0 16px 0 20px;
  border: 1px solid #eae7f3;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(16, 12, 52, .06);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--asa-ink);
  font: inherit;
  font-size: 15.5px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: border-color 180ms ease-out, box-shadow 180ms ease-out;
}
.asa-tab-dropdown-trigger:focus-visible { outline: 3px solid rgba(91, 87, 214, .3); outline-offset: 2px; }
.asa-tab-dropdown.is-open .asa-tab-dropdown-trigger { border-color: #c9c4ef; }
.asa-tab-dropdown-trigger-label { min-width: 0; flex: 1 1 auto; }
.asa-tab-dropdown-trigger-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--asa-indigo);
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.asa-tab-dropdown-trigger-icon svg { width: 100%; height: 100%; display: block; }
.asa-tab-dropdown.is-open .asa-tab-dropdown-trigger-icon { transform: rotate(180deg); }

.asa-tab-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  padding: 8px;
  border: 1px solid #eae7f3;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 24px 48px rgba(16, 12, 52, .16);
  display: grid;
  gap: 4px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 180ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 220ms;
}
.asa-tab-dropdown.is-open .asa-tab-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition-delay: 0s;
}
.asa-tab-option {
  min-height: 46px;
  padding: 11px 14px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: #7b7c8e;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background-color 160ms ease-out, color 160ms ease-out;
}
.asa-tab-option:hover,
.asa-tab-option:focus-visible { outline: 0; color: var(--asa-ink); background: #f8f7fc; }
.asa-tab-option.is-active { color: var(--asa-ink); background: #efedfb; font-weight: 600; }

.asa-tabs {
  margin: 44px auto 0;
  max-width: 760px;
  background: #fff;
  border: 1px solid #eae7f3;
  border-radius: 999px;
  padding: 6px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  box-shadow: 0 12px 34px rgba(16, 12, 52, .06);
}
.asa-tab {
  padding: 15px 10px;
  border: none;
  border-radius: 999px;
  background: transparent;
  font: inherit;
  font-size: 15.5px;
  font-weight: 600;
  color: #7b7c8e;
  cursor: pointer;
  transition: background-color 160ms ease-out, color 160ms ease-out;
}
.asa-tab:hover { color: var(--asa-ink); }
.asa-tab.is-active { background: #efedfb; color: var(--asa-ink); }
.asa-tab:focus-visible { outline: 3px solid rgba(91, 87, 214, .3); outline-offset: 2px; }

.asa-panel {
  margin: 24px auto 0;
  background: #fff;
  border: 1px solid #eae7f3;
  border-radius: 28px;
  padding: 48px;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 52px;
  align-items: center;
  box-shadow: 0 20px 50px rgba(16, 12, 52, .07);
}
.asa-panel[hidden] { display: none; }
.asa-panel-copy h3 {
  margin: 14px 0 0;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.16;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--asa-ink);
}
.asa-panel-lead { margin: 18px 0 0; font-size: 16.5px; line-height: 1.66; color: #55566a; }
.asa-panel-copy .asa-visual-label { margin-top: 26px; }

.asa-check-list { margin: 26px 0 0; display: flex; flex-direction: column; gap: 12px; }
.asa-check-list li { position: relative; padding-left: 30px; font-size: 15.5px; line-height: 1.55; color: #3c3d50; }
.asa-check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 18px;
  height: 18px;
  border-radius: 99px;
  background: #e9f9f1 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M6 10.2l2.6 2.5L14 7.6' stroke='%230E7A55' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.asa-plain-list { margin: 12px 0 0; display: flex; flex-direction: column; gap: 10px; }
.asa-plain-list li { padding: 14px 16px; border-radius: 14px; background: var(--asa-surface); border: 1px solid var(--asa-line-soft); font-size: 15px; line-height: 1.55; color: #3c3d50; }

.asa-tag-cloud { margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 9px; }
.asa-tag-cloud span { padding: 10px 15px; border-radius: 999px; background: var(--asa-surface); border: 1px solid var(--asa-line-soft); font-size: 14px; color: #3c3d50; }

.asa-panel-visual { border-radius: 24px; padding: 26px; }
.asa-visual-deal { background: linear-gradient(140deg, #efebfa, #e6ebfb 55%, #eff6f3); }
.asa-visual-risks { background: linear-gradient(140deg, #e9e6f9, #e3eafa 60%, #eef4fa); }
.asa-visual-evidence { background: linear-gradient(140deg, #eaf5ef, #e9e6f9 65%, #e4eafa); }
.asa-visual-next { background: linear-gradient(140deg, #e6eafb, #efebfa 60%, #edf5f2); }
.asa-visual-inner { border-radius: 18px; padding: 22px; box-shadow: 0 14px 34px rgba(16, 12, 52, .09); }
.asa-visual-person { display: flex; align-items: center; gap: 12px; padding: 13px; border-radius: 14px; background: var(--asa-surface); border: 1px solid #eeecf7; margin-bottom: 18px; }

.asa-chip-row { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.asa-chip { padding: 7px 13px; border-radius: 999px; background: #f2f1f8; color: #4c4d62; font-size: 12.5px; font-weight: 500; }
.asa-chip.is-on { background: var(--asa-indigo); color: #fff; }

.asa-visual-split { margin-top: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.asa-visual-split .asa-visual-label { margin-bottom: 9px; }
.asa-num-row { display: flex; gap: 6px; }
.asa-num-row span { padding: 5px 10px; border-radius: 8px; background: #f2f1f8; color: var(--asa-muted); font-size: 12px; font-weight: 600; }
.asa-num-row span.is-on { background: var(--asa-indigo); color: #fff; }

.asa-visual-foot { margin-top: 20px; padding-top: 16px; border-top: 1px solid #f1eff7; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; color: #6e6f82; }
.asa-mini-btn { padding: 10px 20px; border-radius: 999px; background: var(--asa-ink-dark); color: #fff; font-size: 13.5px; font-weight: 600; }

.asa-tile-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.asa-tile { position: relative; height: 118px; border-radius: 14px; overflow: hidden; background: #221a4a; }
.asa-tile-alt { background: #1b2a52; }
.asa-tile img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; display: block; }
.asa-tile-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 11, 46, .02) 42%, rgba(20, 11, 46, .78) 100%); }
.asa-tile-label { position: absolute; left: 10px; bottom: 10px; font-size: 11.5px; font-weight: 500; color: #fff; }

.asa-risk-list { margin-top: 14px; display: flex; flex-direction: column; gap: 9px; }
.asa-risk { display: flex; gap: 10px; align-items: flex-start; padding: 12px 13px; border-radius: 13px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .13); }
.asa-risk span:last-child { font-size: 12.5px; line-height: 1.5; color: rgba(255, 255, 255, .78); }
.asa-risk.is-flag { background: rgba(155, 150, 245, .16); border-color: rgba(155, 150, 245, .32); }
.asa-risk.is-flag span:last-child { color: #edebff; }
.asa-risk-mark {
  width: 20px;
  height: 20px;
  border-radius: 7px;
  background: rgba(251, 191, 36, .16);
  color: #fcd34d;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.asa-risk.is-flag .asa-risk-mark { background: linear-gradient(135deg, #6b66e4, #9a95f5); color: #fff; }
.asa-risk-foot { margin: 14px 0 0; text-align: center; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }

.asa-evidence-box { margin-top: 14px; padding: 14px; border-radius: 14px; background: var(--asa-surface); border: 1px solid #efedf7; }
.asa-evidence-box .asa-meter { margin-top: 10px; }
.asa-evidence-box-green { background: #f4f8f6; border-color: #e3efe9; }

.asa-chat-thread { display: flex; flex-direction: column; gap: 11px; }
.asa-chat-input { margin-top: 18px; display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 999px; background: var(--asa-surface); border: 1px solid var(--asa-line-soft); color: var(--asa-indigo); }
.asa-chat-input span { font-size: 13.5px; color: #9a9bac; flex: 1; }

/* ---------- continuous context ---------- */

.asa-loop { background: #fff; }
.asa-steps {
  margin: 52px auto 0;
  max-width: 1000px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px 40px;
  list-style: none;
  padding: 0;
}
.asa-steps li { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 150px; position: relative; }
.asa-steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 30px;
  left: calc(100% + 6px);
  width: 34px;
  height: 2px;
  background: linear-gradient(90deg, #dcd8f2, #c9c4ef);
}
.asa-step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 20px;
  background: #efedfb;
  font-size: 19px;
  font-weight: 700;
  color: var(--asa-indigo);
}
.asa-step-num-on { background: linear-gradient(135deg, #2e2a8f, #6b66e4); color: #fff; }
.asa-step-num-dashed { border: 2px dashed #c9c4ef; background: #fbfafe; }
.asa-step-label { font-size: 15.5px; font-weight: 600; color: var(--asa-ink); text-align: center; }
.asa-loop-note {
  margin: 44px auto 0;
  max-width: 840px;
  padding: 22px 26px;
  border-radius: 20px;
  background: var(--asa-surface);
  border: 1px solid var(--asa-line-soft);
  font-size: 16px;
  line-height: 1.66;
  color: #55566a;
  text-align: center;
}

/* ---------- compare ---------- */

.asa-compare { background: linear-gradient(180deg, #f2f0fa, #f8f7f5); }
.asa-compare-grid { margin-top: 44px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.asa-compare-card { border-radius: 24px; overflow: hidden; }
.asa-compare-card h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 22px 28px;
  font-size: 15px;
  font-weight: 700;
}
.asa-compare-card ul { margin: 0; padding: 8px 28px 22px; list-style: none; }
.asa-compare-card li { padding: 17px 0; font-size: 16px; line-height: 1.55; }
.asa-compare-card-generic { background: #fff; border: 1px solid #eae7f3; }
.asa-compare-card-generic h3 { border-bottom: 1px solid #f1eff7; color: #6e6f82; font-weight: 600; }
.asa-compare-card-generic li { border-bottom: 1px solid #f5f3fa; color: #55566a; }
.asa-compare-card-generic li:last-child { border-bottom: none; }
.asa-compare-card-salesman {
  background: linear-gradient(150deg, #1f2e96 0%, #4a45c6 58%, #7c77e8 100%);
  box-shadow: 0 26px 60px rgba(31, 46, 150, .22);
}
.asa-compare-card-salesman h3 { border-bottom: 1px solid rgba(255, 255, 255, .18); color: #fff; }
.asa-compare-logo { width: 22px; height: 22px; border-radius: 6px; flex: none; object-fit: contain; }
.asa-compare-card-salesman li { border-bottom: 1px solid rgba(255, 255, 255, .14); color: #fff; font-weight: 500; }
.asa-compare-card-salesman li:last-child { border-bottom: none; }
.asa-compare-tagline { margin: 36px 0 0; text-align: center; font-size: 22px; font-weight: 600; letter-spacing: -.02em; color: var(--asa-ink); }

/* ---------- know ---------- */

.asa-know { background: #fff; }
.asa-know-grid { margin-top: 44px; }
.asa-know .asa-mini-card { padding: 30px; }
.asa-know .asa-mini-card h3 { font-size: 20px; }

/* ---------- qualification ---------- */

.asa-qual { background: linear-gradient(180deg, #f8f7f5, #f1eff9); }
.asa-qual-inner { display: grid; grid-template-columns: 1fr 1.1fr; gap: 60px; align-items: center; }
.asa-qual-copy h2 {
  margin: 20px 0 0;
  font-size: clamp(30px, 3.4vw, 42px);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--asa-ink);
}
.asa-qual-copy > p { margin: 18px 0 0; font-size: 17px; line-height: 1.66; color: #55566a; }
.asa-fw-tabs { margin: 24px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.asa-fw-tab {
  padding: 11px 20px;
  border-radius: 999px;
  border: 1px solid #e2dff0;
  background: #fff;
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  color: #4c4d62;
  cursor: pointer;
  transition: background-color 160ms ease-out, color 160ms ease-out;
}
.asa-fw-tab.is-active { background: var(--asa-indigo); color: #fff; }
.asa-fw-tab:focus-visible { outline: 3px solid rgba(91, 87, 214, .3); outline-offset: 2px; }

.asa-qual-panel { background: #fff; border: 1px solid #eae7f3; border-radius: 24px; padding: 30px; box-shadow: 0 22px 54px rgba(16, 12, 52, .08); }
.asa-qual-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.asa-qual-panel-title { display: block; font-size: 16px; font-weight: 600; color: var(--asa-ink); }
.asa-qual-pct { text-align: right; }
.asa-qual-pct strong { display: block; font-size: 26px; font-weight: 700; letter-spacing: -.02em; color: var(--asa-indigo); }
.asa-qual-pct span { font-size: 12px; color: var(--asa-muted); }
.asa-qual-panel .asa-meter { margin-top: 18px; }
.asa-crit-list { margin: 22px 0 0; display: flex; flex-direction: column; gap: 10px; list-style: none; padding: 0; }
.asa-crit { display: flex; align-items: center; gap: 12px; padding: 13px 15px; border-radius: 14px; background: var(--asa-surface); border: 1px solid #efedf7; }
.asa-crit-mark { width: 22px; height: 22px; border-radius: 99px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.asa-crit-name { flex: 1; font-size: 14.5px; font-weight: 500; color: #3c3d50; }
.asa-crit-note { font-size: 12.5px; color: var(--asa-muted); }
.asa-crit-done { background: #e3f7ee; color: var(--asa-green); }
.asa-crit-partial { background: #fef3e7; color: var(--asa-amber); }
.asa-crit-todo { background: #f2f1f8; color: var(--asa-muted); }

/* ---------- outcomes ---------- */

.asa-outcomes { background: #fff; }
.asa-outcomes-title {
  margin: 0;
  text-align: center;
  font-size: clamp(30px, 3.6vw, 44px);
  line-height: 1.14;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--asa-ink);
}
.asa-outcomes-grid { margin-top: 48px; }
.asa-outcome-card { border-radius: 24px; padding: 38px 32px; }
.asa-outcome-card p { margin: 20px 0 0; font-size: 16px; line-height: 1.62; color: #55566a; }
.asa-outcome-figure {
  font-size: clamp(38px, 4.4vw, 52px);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -.04em;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.asa-outcome-card-lilac { background: linear-gradient(160deg, #f1effc, #f7f6fc); border: 1px solid #e9e6f6; }
.asa-outcome-card-lilac .asa-outcome-figure { background-image: linear-gradient(100deg, #2a3ab0, #7c77e8); }
.asa-outcome-card-blue { background: linear-gradient(160deg, #ebf1fb, #f6f8fc); border: 1px solid #e3e9f6; }
.asa-outcome-card-blue .asa-outcome-figure { background-image: linear-gradient(100deg, #1f2e96, #5b57d6); }
.asa-outcome-card-green { background: linear-gradient(160deg, #eaf6f0, #f5faf7); border: 1px solid #dfede6; }
.asa-outcome-card-green .asa-outcome-figure { background-image: linear-gradient(100deg, #0e7a55, #4a45c6); }
.asa-outcomes-note { margin: 26px 0 0; padding-top: 20px; border-top: 1px solid #f1eff7; font-size: 12px; line-height: 1.6; color: #9a9bac; }

/* ---------- roles ---------- */

.asa-roles { background: var(--asa-cream); padding-top: 76px; padding-bottom: 76px; }
.asa-roles-card {
  width: min(100%, 1080px);
  background: #fff;
  border: 1px solid #eae7f3;
  border-radius: 24px;
  padding: 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items: center;
}
.asa-roles-copy h2 { margin: 16px 0 0; font-size: clamp(24px, 2.4vw, 29px); line-height: 1.22; font-weight: 700; letter-spacing: -.025em; color: var(--asa-ink); }
.asa-roles-copy > p { margin: 14px 0 0; font-size: 15.5px; line-height: 1.66; color: #55566a; }
.asa-roles-copy .asa-tag-cloud span { padding: 8px 14px; font-size: 13.5px; }
.asa-roles-panel { border-radius: 18px; padding: 20px; background: var(--asa-surface); border: 1px solid #efedf7; }
.asa-roles-tile { background: #fff; border-radius: 14px; padding: 17px; border: 1px solid #efedf7; }
.asa-roles-tile + .asa-roles-tile { margin-top: 12px; }
.asa-roles-tile p { margin: 7px 0 0; font-size: 13.5px; line-height: 1.55; color: #3c3d50; }
.asa-roles-tile .asa-meter { margin-top: 12px; }
.asa-roles-tile .asa-card-head { margin-bottom: 13px; }
.asa-roles-tile-title { font-size: 13.5px; font-weight: 600; color: var(--asa-ink); }
.asa-roles-tile-row { display: flex; align-items: center; gap: 10px; padding: 15px 17px; font-size: 13px; color: #3c3d50; }
.asa-avatar-stack { display: flex; align-items: center; flex: none; }
.asa-avatar-stack img {
  width: 26px;
  height: 26px;
  border-radius: 99px;
  border: 2px solid #fff;
  object-fit: cover;
  display: block;
}
.asa-avatar-stack img + img,
.asa-avatar-stack b { margin-left: -8px; }
.asa-avatar-stack b {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 99px;
  border: 2px solid #fff;
  background: #efedfb;
  font-size: 9.5px;
  font-weight: 700;
  color: var(--asa-indigo);
}

/* ---------- start ---------- */

.asa-start { background: var(--asa-cream); padding-top: 0; padding-bottom: 76px; }
.asa-start-card {
  width: min(100%, 1080px);
  border-radius: 28px;
  padding: 46px 52px;
  background: #fff;
  border: 1px solid #eae7f3;
  box-shadow: 0 22px 54px rgba(16, 12, 52, .07);
  display: grid;
  grid-template-columns: 1.2fr auto;
  gap: 48px;
  align-items: center;
}
.asa-start-copy h2 { margin: 18px 0 0; font-size: clamp(26px, 2.8vw, 36px); line-height: 1.16; font-weight: 700; letter-spacing: -.03em; color: var(--asa-ink); }
.asa-start-copy p { margin: 14px 0 0; font-size: 16.5px; line-height: 1.66; color: #55566a; }
.asa-start-actions { display: flex; flex-direction: column; align-items: stretch; gap: 12px; min-width: 260px; }
.asa-start-actions .asa-button { width: 100%; }
.asa-start-actions .asa-assurance { text-align: center; }

/* ---------- FAQ ----------
   Ported verbatim from the project's index.html FAQ pattern
   (assets/css/new-index.css .salesmanai-new-faq-*) so this page's FAQ
   matches the site's canonical FAQ UI: same borders, typography, chevron
   icon and native multi-open <details> behaviour (no JS). */

.salesmanai-new-faq { background: #fff; padding-top: 80px; }
.salesmanai-new-faq .asa-container { width: min(100%, 980px); }

/* "FAQ" chip - ported from new-index.css .salesmanai-new-chip(-feature) */
.salesmanai-new-chip {
  margin: 0 auto 16px;
  width: fit-content;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid #dde3ff;
  color: var(--asa-indigo);
  font-size: 14px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.salesmanai-new-chip-feature {
  padding: 6px 18px;
  border-width: 0.5px;
  border-radius: 14.5px;
  border-color: #8993d4;
  -webkit-backdrop-filter: blur(11.9px);
  backdrop-filter: blur(11.9px);
}
.salesmanai-new-chip-feature-text {
  display: inline-block;
  font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 16px;
  background-image: linear-gradient(98.5885deg, #4242c6 0%, #8282f6 39.896%, #0e24b3 87.159%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.salesmanai-new-faq-title {
  margin: 18px auto 0;
  max-width: 760px;
  color: #100f0f;
  font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(30px, 3.2vw, 36px);
  font-weight: 600;
  line-height: clamp(38px, 4.2vw, 48px);
  letter-spacing: 0;
  text-align: center;
}

.salesmanai-new-faq-list {
  width: min(100%, 980px);
  margin: 48px auto 0;
  display: grid;
  gap: 20px;
}

.salesmanai-new-faq-item {
  background: #ffffff;
  border: 1.261px solid #dde3ff;
  border-radius: 20px;
  padding: 31px;
  box-sizing: border-box;
}

.salesmanai-new-faq-item summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  color: #181c21;
  font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 34px;
  cursor: pointer;
}

.salesmanai-new-faq-item summary::-webkit-details-marker { display: none; }
.salesmanai-new-faq-item summary:focus-visible {
  outline: 3px solid rgba(25, 73, 216, .25);
  outline-offset: 6px;
  border-radius: 4px;
}

.salesmanai-new-faq-item p {
  margin: 20px 0 0;
  max-width: 890px;
  color: #575e75;
  font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 30px;
}

.salesmanai-new-faq-icon {
  flex: 0 0 auto;
  width: 15px;
  height: 9px;
  position: relative;
  transition: transform 0.2s ease;
}

.salesmanai-new-faq-icon::before,
.salesmanai-new-faq-icon::after {
  content: "";
  position: absolute;
  top: 4px;
  width: 9px;
  height: 2px;
  border-radius: 999px;
  background: #1949d8;
}

.salesmanai-new-faq-icon::before { left: 0; transform: rotate(45deg); }
.salesmanai-new-faq-icon::after { right: 0; transform: rotate(-45deg); }
.salesmanai-new-faq-item[open] .salesmanai-new-faq-icon { transform: rotate(180deg); }

/* ---------- final CTA ---------- */

.asa-cta { background: #fff; padding-top: 0; }
.asa-cta-card {
  border-radius: 32px;
  padding: 80px 60px;
  text-align: center;
  background: var(--asa-deep-grad);
  box-shadow: 0 34px 80px rgba(28, 42, 142, .26);
}
.asa-cta-card h2 {
  margin: 24px auto 0;
  max-width: 860px;
  font-size: clamp(32px, 4vw, 50px);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -.035em;
  color: #fff;
  text-wrap: balance;
}
.asa-cta-card > p { margin: 22px auto 0; max-width: 680px; font-size: 18px; line-height: 1.66; color: rgba(255, 255, 255, .85); }
.asa-cta-card .asa-button { margin-top: 34px; }
.asa-cta-card .asa-assurance { margin-top: 18px; }

/* ---------- motion ---------- */

.asa-motion-enabled .asa-reveal { opacity: 0; transform: translateY(16px); }
.asa-motion-enabled .asa-reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity 520ms ease-out, transform 520ms ease-out;
  transition-delay: var(--asa-reveal-delay, 0ms);
}

/* ---------- responsive ---------- */

/* Below 767px, swap the tab row for a dropdown - matches index.html's
   stage selector (.salesmanai-new-stage-dropdown / -tabs breakpoint). */
@media (max-width: 767px) {
  .asa-tab-dropdown { display: block; }
  .asa-tabs { display: none; }
}

/* Flex rows that use space-between hold two children whose combined
   intrinsic width can exceed a narrow card. Let the text child shrink. */
.asa-card-head > *,
.asa-visual-foot > *,
.asa-qual-panel-head > *,
.asa-visual-person > .asa-person-text,
.asa-roles-tile-row > * { min-width: 0; }
.asa-visual-title,
.asa-person-name,
.asa-person-role { overflow-wrap: break-word; }

@media (max-width: 1080px) {
  .asa-qual-inner { grid-template-columns: 1fr; gap: 36px; }
  .asa-roles-card { grid-template-columns: 1fr; }
  .asa-start-card { grid-template-columns: 1fr; }
  .asa-start-actions { min-width: 0; }
}

@media (max-width: 900px) {
  .asa-section { padding: 68px 24px; }
  .asa-hero { min-height: auto; padding: 116px 24px 56px; }
  .asa-problem-card { padding: 40px 32px; }
  .asa-grid-3 { grid-template-columns: 1fr 1fr; }
  .asa-panel { grid-template-columns: 1fr; gap: 32px; padding: 32px; }
  .asa-card-head { flex-wrap: wrap; gap: 8px; }
  .asa-compare-grid { grid-template-columns: 1fr; }
  .asa-steps { gap: 24px; }
  .asa-steps li:not(:last-child)::after { display: none; }
}

@media (max-width: 640px) {
  .asa-section { padding: 56px 20px; }
  .asa-hero { min-height: auto; padding: 104px 20px 48px; }
  .asa-hero h1 { font-size: clamp(30px, 8.5vw, 40px); letter-spacing: -.03em; }
  .asa-lead { font-size: 16px; }
  .asa-actions { flex-direction: column; align-items: stretch; }
  .asa-actions .asa-button { width: 100%; }
  .asa-section-head h2 { font-size: clamp(26px, 7.5vw, 34px); }
  .asa-grid-3 { grid-template-columns: 1fr; }
  .asa-signal-grid { gap: 6px; }
  .asa-signal { padding: 10px 8px; }
  .asa-signal strong { font-size: 20px; }
  .asa-signal span { font-size: 11px; }
  .asa-compare-tagline { font-size: 19px; }
  .asa-loop-note { padding: 18px 20px; font-size: 15px; }
  .asa-card-head { flex-wrap: wrap; gap: 8px; }
  .asa-tag { white-space: normal; }
  .asa-visual-foot { flex-wrap: wrap; }
  .asa-qual-panel-head { flex-wrap: wrap; gap: 12px; }
  .asa-panel { padding: 22px; border-radius: 20px; }
  .asa-panel-visual { padding: 18px; }
  .asa-visual-split { grid-template-columns: 1fr; }
  .asa-problem-card { padding: 28px 22px; }
  .asa-problem-card h2 { font-size: 27px; }
  .asa-compare-card li { font-size: 15px; }
  .asa-outcome-card { padding: 28px 24px; }
  .asa-roles-card,
  .asa-start-card { padding: 26px 22px; }
  .asa-cta-card { padding: 44px 24px; border-radius: 24px; }
  .asa-steps li { width: 130px; }
}

/* FAQ mobile values ported from index.html (.salesmanai-new-faq-* at 768px / 480px) */
@media (max-width: 768px) {
  .salesmanai-new-faq { padding-top: 56px; }
  .salesmanai-new-faq-list { margin-top: 32px; gap: 14px; }
  .salesmanai-new-faq-item { border-radius: 18px; padding: 22px; }
  .salesmanai-new-faq-item summary { gap: 18px; font-size: 18px; line-height: 28px; }
  .salesmanai-new-faq-item p { margin-top: 14px; font-size: 16px; line-height: 26px; }
}

@media (max-width: 480px) {
  .salesmanai-new-faq-title { font-size: clamp(28px, 8.6vw, 32px); line-height: 1.18; }
  .salesmanai-new-faq-item { border-radius: 16px; padding: 18px; }
  .salesmanai-new-faq-item summary { font-size: 17px; line-height: 26px; }
  .salesmanai-new-faq-item p { font-size: 15px; line-height: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .asa-meter > span { transition: none; }
  .salesmanai-new-faq-icon { transition: none; }
  .asa-motion-enabled .asa-reveal { opacity: 1; transform: none; }
}