/* Comparison pages ("Salesman AI vs X")
   Shared by fireflies-alternative and salesman-ai-vs-gong, whose
   references use the same components and values (Poppins, #5B57D6, pill
   buttons). Each reference's own header and footer are replaced by the
   shared <salesman-header>/<salesman-footer>, and its FAQ is rendered in
   the project's canonical FAQ UI. Page-only pieces (the Fireflies pricing
   table, the Gong hero cards) live here too, scoped by their own classes. */

:root {
  --cmp-ink: #0b0a1f;
  --cmp-body: #55566a;
  --cmp-body-soft: #5b5c70;
  --cmp-body-strong: #2c2d40;
  --cmp-muted: #8a8b9c;
  --cmp-muted-mid: #6e6f82;
  --cmp-indigo: #5b57d6;
  --cmp-indigo-hover: #4843c4;
  --cmp-indigo-deep: #1f2e96;
  --cmp-tint: #efedfb;
  --cmp-tint-soft: #f6f5fd;
  --cmp-line: #eae7f3;
  --cmp-line-soft: #f1eff7;
  --cmp-surface: #f8f7fc;
  --cmp-surface-soft: #fbfafd;
  --cmp-cream: #f8f7f5;
  --cmp-lilac: #f2f0fa;
}

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

/* Scrollbar hidden to match the sibling product pages. Scrolling is
   untouched — wheel, touch and keyboard all still work. */
html { scroll-behavior: smooth; }

html,
body {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

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

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

/* Anchor targets clear the fixed shared header. */
.cmp-main [id] { scroll-margin-top: 84px; }

.cmp-section { padding: 96px 32px; }
.cmp-container { width: min(100%, 1240px); margin: 0 auto; }
.cmp-container-narrow { width: min(100%, 1100px); }
.cmp-center { display: flex; justify-content: center; }

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

/* Grid and flex children must be allowed to shrink below their content
   width, or long strings widen the page on small screens. */
.cmp-card > *,
.cmp-cell > *,
.cmp-versus-col > * { min-width: 0; }

.cmp-page h1,
.cmp-page h2,
.cmp-page h3,
.cmp-page p,
.cmp-page li,
.cmp-page th,
.cmp-page td,
.cmp-page summary { overflow-wrap: break-word; }

/* ---------- shared bits ----------
   reset.css applies `font-size: 100%` and `margin: 0` through a long
   element-list selector, so every rule whose size, margin or colour must
   hold is scoped with .cmp-page. */

.cmp-page .cmp-pill {
  display: inline-block;
  margin: 0;
  padding: 7px 18px;
  border-radius: 999px;
  background: var(--cmp-tint);
  color: var(--cmp-indigo);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  max-width: 100%;
}
.cmp-page .cmp-pill-bordered { border: 1px solid #dcd8f6; letter-spacing: .04em; }
.cmp-page .cmp-pill-light { background: #fff; border: 1px solid #e2dff0; }
.cmp-page .cmp-pill-outline {
  padding: 8px 20px;
  border: 1px solid #c7c2f2;
  background: rgba(255, 255, 255, .6);
  font-size: 14px;
  font-weight: 500;
}
.cmp-page .cmp-pill-onDark {
  border: 1px solid rgba(255, 255, 255, .34);
  background: transparent;
  color: #fff;
  font-size: 12.5px;
}
/* Casing and tracking differ per reference, so they are opt-in. */
.cmp-page .cmp-tracked { letter-spacing: .04em; }
.cmp-page .cmp-caps { letter-spacing: .04em; text-transform: uppercase; }
.cmp-page .cmp-pill-outline.cmp-caps { letter-spacing: .06em; }

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

.cmp-section-head { max-width: 820px; margin: 0 auto; text-align: center; }
.cmp-page .cmp-section-head h2 {
  margin: 20px 0 0;
  color: var(--cmp-ink);
  font-size: clamp(28px, 4.4vw, 44px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.14;
  text-wrap: balance;
}
.cmp-page .cmp-section-head p:not(.cmp-pill) {
  margin: 18px 0 0;
  color: var(--cmp-body);
  font-size: clamp(15.5px, 1.9vw, 17.5px);
  line-height: 1.66;
}

.cmp-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px clamp(22px, 3vw, 34px);
  border-radius: 999px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.cmp-button:hover { transform: translateY(-1px); }
.cmp-button-primary {
  background: var(--cmp-indigo);
  color: #fff;
  box-shadow: 0 10px 26px rgba(91, 87, 214, .32);
}
.cmp-button-primary:hover,
.cmp-button-primary:focus-visible { background: var(--cmp-indigo-hover); color: #fff; }
.cmp-button-ghost {
  background: #fff;
  border: 1.5px solid #d3cfe8;
  color: var(--cmp-ink);
}
.cmp-button-ghost:hover,
.cmp-button-ghost:focus-visible { border-color: #b3adea; color: var(--cmp-ink); }
.cmp-button-onDark {
  padding: 18px 40px;
  background: #fff;
  color: var(--cmp-indigo-deep);
  font-size: 17px;
  font-weight: 700;
  box-shadow: 0 14px 34px rgba(10, 14, 60, .24);
}
.cmp-button-onDark:hover,
.cmp-button-onDark:focus-visible { background: #f1effc; color: var(--cmp-indigo-deep); }
.cmp-button-outlineDark {
  padding: 18px 34px;
  border: 1.5px solid rgba(255, 255, 255, .45);
  color: #fff;
  font-size: 17px;
}
.cmp-button-outlineDark:hover,
.cmp-button-outlineDark:focus-visible { background: rgba(255, 255, 255, .1); border-color: #fff; color: #fff; }
.cmp-button:focus-visible { outline: 3px solid rgba(91, 87, 214, .35); outline-offset: 3px; }

.cmp-page .cmp-assurance {
  margin: 2px 0 0;
  color: #7b7c8e;
  font-size: 14px;
  line-height: 1.5;
}
.cmp-page .cmp-assurance-onDark { margin-top: 18px; color: rgba(255, 255, 255, .72); }

/* Cards used by the problem, fit and workflow grids. */
.cmp-card {
  background: var(--cmp-surface);
  border: 1px solid #edebf6;
  border-radius: 20px;
  padding: 28px;
}
.cmp-card-white { background: #fff; border-color: var(--cmp-line); }
.cmp-card-lift { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.cmp-card-lift:hover {
  transform: translateY(-3px);
  border-color: #dcd8f6;
  box-shadow: 0 18px 40px rgba(46, 42, 143, .08);
}
.cmp-page .cmp-card h3 {
  margin: 0;
  color: var(--cmp-ink);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.35;
}
.cmp-page .cmp-card p {
  margin: 10px 0 0;
  color: var(--cmp-body-soft);
  font-size: 15px;
  line-height: 1.62;
}

/* ---------- 1. hero ----------
   The shared header is fixed, so the hero's top padding clears it
   instead of copying the reference's sticky-header value.

   First-screen peek, matching ai-sales-assistant, ai-sales-roleplay,
   ai-meeting-preparation and conversation-intelligence-software: the
   hero stops --cmp-peek short of the viewport, so a thin white strip of
   the next section shows below it. The peek is kept smaller than the
   next section's top padding, so only white shows, never its content.
   Padding, gap and headline also scale with viewport height, so the
   strip holds on short laptop windows where the copy would otherwise
   outgrow the screen. */

.cmp-hero {
  --cmp-peek: 48px;
  position: relative;
  display: flex;
  align-items: center;
  min-height: calc(100svh - var(--cmp-peek));
  padding: clamp(100px, 14.5svh, 132px) 32px clamp(40px, 8svh, 80px);
  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(248, 247, 245, 0) 60%),
    var(--cmp-cream);
}
.cmp-hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(14px, 2.4svh, 22px);
}
.cmp-page .cmp-hero h1 {
  margin: 0;
  max-width: 980px;
  color: var(--cmp-ink);
  font-size: clamp(34px, min(6vw, 7.2svh), 66px);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.06;
  text-wrap: balance;
}
.cmp-page .cmp-lead {
  margin: 0;
  max-width: 760px;
  color: var(--cmp-body);
  font-size: clamp(16px, min(2vw, 2.4svh), 19px);
  line-height: 1.62;
}
.cmp-hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-top: clamp(2px, 1svh, 8px);
}

/* Hero entrance: a short staggered fade-up on load. Pure CSS with
   `both` fill, so the copy is never left hidden if the animation does
   not run; reduced motion turns it off below. */
.cmp-hero-inner > * { animation: cmp-hero-in .6s cubic-bezier(.2, .7, .2, 1) both; }
.cmp-hero-inner > :nth-child(2) { animation-delay: .06s; }
.cmp-hero-inner > :nth-child(3) { animation-delay: .12s; }
.cmp-hero-inner > :nth-child(4) { animation-delay: .18s; }
.cmp-hero-inner > :nth-child(5) { animation-delay: .24s; }
@keyframes cmp-hero-in {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to { opacity: 1; transform: none; }
}

/* ---------- 2. problem + short answer ---------- */

.cmp-difference { background: #fff; border-top: 1px solid #f0eef6; }

.cmp-problem-grid {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.cmp-icon {
  width: 38px;
  height: 38px;
  margin-bottom: 18px;
  border-radius: 12px;
  background: var(--cmp-tint);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cmp-answer {
  margin-top: 24px;
  border-radius: 28px;
  padding: clamp(32px, 5vw, 56px) clamp(26px, 5vw, 60px);
  background: linear-gradient(135deg, #1c2a8e 0%, #3a38b8 52%, #5b57d6 100%);
  box-shadow: 0 30px 70px rgba(28, 42, 142, .22);
}
.cmp-answer-inner { max-width: 900px; }
/* salesman-ai-vs-gong puts the answer panel first and the cards after. */
.cmp-answer-first { margin-top: 0; }
.cmp-answer + .cmp-problem-grid { margin-top: 24px; }
.cmp-page .cmp-answer h2 {
  margin: 22px 0 0;
  color: #fff;
  font-size: clamp(28px, 4.4vw, 44px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.14;
  text-wrap: balance;
}
.cmp-page .cmp-answer p:not(.cmp-pill) {
  margin: 22px 0 0;
  color: rgba(255, 255, 255, .84);
  font-size: clamp(15.5px, 1.8vw, 17px);
  line-height: 1.68;
}
.cmp-page .cmp-answer p:not(.cmp-pill) + p { margin-top: 16px; }

/* ---------- 3. side-by-side positioning ---------- */

.cmp-compare { background: linear-gradient(180deg, var(--cmp-cream), var(--cmp-lilac)); }

.cmp-versus {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.cmp-versus-col { border-radius: 24px; overflow: hidden; }
.cmp-versus-them { background: #fff; border: 1px solid var(--cmp-line); }
.cmp-versus-us {
  background: linear-gradient(150deg, #1f2e96 0%, #4a45c6 58%, #7c77e8 100%);
  box-shadow: 0 26px 60px rgba(31, 46, 150, .22);
}
.cmp-page .cmp-versus-head {
  margin: 0;
  padding: 22px 28px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
}
.cmp-page .cmp-versus-them .cmp-versus-head { color: var(--cmp-muted-mid); border-bottom: 1px solid var(--cmp-line-soft); }
.cmp-page .cmp-versus-us .cmp-versus-head {
  color: #fff;
  font-weight: 700;
  border-bottom: 1px solid rgba(255, 255, 255, .18);
}
.cmp-versus-head img { display: block; flex: none; width: 20px; height: 20px; }
.cmp-versus-list { margin: 0; padding: 8px 28px 22px; list-style: none; }
.cmp-page .cmp-versus-list li {
  padding: 17px 0;
  font-size: 16px;
  line-height: 1.55;
}
.cmp-page .cmp-versus-them li { color: var(--cmp-body); border-bottom: 1px solid #f5f3fa; }
.cmp-page .cmp-versus-us li {
  color: #fff;
  font-weight: 500;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.cmp-page .cmp-compare-note {
  margin: 36px 0 0;
  color: var(--cmp-ink);
  font-size: clamp(18px, 2.4vw, 22px);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.4;
  text-align: center;
}

/* ---------- 4. feature comparison ---------- */

.cmp-features { background: #fff; }

/* The filter bar is shipped hidden and revealed by the script, so with
   JS off the reader sees every row and no dead buttons. */
.cmp-filters {
  margin-top: 36px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.cmp-filters[hidden] { display: none; }
.cmp-filter {
  padding: 11px 22px;
  border: 1px solid #e2dff0;
  border-radius: 999px;
  background: #fff;
  color: var(--cmp-body);
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.cmp-filter:hover { border-color: #c7c2f2; color: var(--cmp-indigo); }
.cmp-filter:focus-visible { outline: 3px solid rgba(91, 87, 214, .35); outline-offset: 2px; }
.cmp-filter.is-active,
.cmp-filter.is-active:hover {
  border-color: var(--cmp-indigo);
  background: var(--cmp-indigo);
  color: #fff;
}

.cmp-rows {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cmp-row {
  border: 1px solid var(--cmp-line);
  border-radius: 22px;
  overflow: hidden;
  background: var(--cmp-surface-soft);
}
.cmp-row[hidden] { display: none; }
.cmp-row.is-entering { animation: cmp-row-in .28s ease both; }
@keyframes cmp-row-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
.cmp-row-head {
  padding: 20px 28px;
  border-bottom: 1px solid var(--cmp-line-soft);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
.cmp-page .cmp-row-head h3 {
  margin: 0;
  color: var(--cmp-ink);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.4;
}
.cmp-tag {
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--cmp-tint);
  color: var(--cmp-indigo);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1.4;
  text-transform: uppercase;
}
.cmp-row-cells { display: grid; grid-template-columns: repeat(2, 1fr); }
.cmp-cell { padding: 24px 28px; }
.cmp-cell + .cmp-cell { border-left: 1px solid var(--cmp-line-soft); }
.cmp-cell-us { background: #fff; }
.cmp-page .cmp-cell-label {
  margin: 0 0 10px;
  color: var(--cmp-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1.4;
  text-transform: uppercase;
}
.cmp-page .cmp-cell-us .cmp-cell-label { color: var(--cmp-indigo); }
.cmp-page .cmp-cell-copy {
  margin: 0;
  color: var(--cmp-body);
  font-size: 15.5px;
  line-height: 1.64;
}
.cmp-page .cmp-cell-us .cmp-cell-copy { color: var(--cmp-body-strong); font-weight: 500; }

/* ---------- 5. pricing ---------- */

.cmp-pricing { background: linear-gradient(180deg, #fff, var(--cmp-lilac)); }

.cmp-table-wrap {
  margin-top: 44px;
  background: #fff;
  border: 1px solid #e7e4f3;
  border-radius: 24px;
  overflow: hidden;
}
.cmp-page .cmp-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.cmp-page .cmp-table th,
.cmp-page .cmp-table td {
  vertical-align: top;
  padding: 18px 24px;
  border-bottom: 1px solid var(--cmp-line-soft);
  line-height: 1.5;
}
.cmp-page .cmp-table tbody tr:last-child > * { border-bottom: 0; }
.cmp-page .cmp-table thead tr { background: var(--cmp-surface-soft); }
.cmp-page .cmp-table thead th {
  padding: 20px 24px;
  border-bottom: 1px solid #e7e4f3;
  width: 38%;
}
.cmp-page .cmp-table thead th.cmp-col-label {
  width: 24%;
  color: var(--cmp-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.cmp-page .cmp-table .cmp-col-us { background: var(--cmp-tint-soft); }
.cmp-th-brand {
  color: var(--cmp-ink);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.02em;
}
.cmp-th-badge {
  display: inline-block;
  margin-left: 10px;
  padding: 4px 12px;
  border: 1px solid #dcd8f6;
  border-radius: 999px;
  background: var(--cmp-tint);
  color: var(--cmp-indigo);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .04em;
  vertical-align: 2px;
}
.cmp-page .cmp-table tbody th {
  color: var(--cmp-ink);
  font-size: 15px;
  font-weight: 600;
}
.cmp-page .cmp-table tbody td {
  color: var(--cmp-body);
  font-size: 15.5px;
}
.cmp-page .cmp-table tbody td.cmp-col-us { color: var(--cmp-body-strong); font-weight: 500; }

/* ---------- 6. when Fireflies.ai fits ---------- */

.cmp-fit { background: linear-gradient(180deg, var(--cmp-lilac), var(--cmp-cream)); }
.cmp-page .cmp-fit .cmp-section-head h2 { font-size: clamp(26px, 4vw, 42px); line-height: 1.15; }
.cmp-fit .cmp-section-head { max-width: 780px; }
.cmp-fit-grid {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.cmp-page .cmp-fit-grid .cmp-card h3 { font-size: 18px; }
.cmp-page .cmp-fit-note {
  margin: 28px auto 0;
  max-width: 720px;
  color: var(--cmp-body);
  font-size: 16px;
  line-height: 1.66;
  text-align: center;
}

/* ---------- 7. sales meeting workflow ---------- */

.cmp-switching { background: #fff; }
.cmp-switching .cmp-section-head { max-width: 780px; }
.cmp-steps {
  margin: 44px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.cmp-step { padding: 30px; }
.cmp-step-num {
  width: 38px;
  height: 38px;
  margin-bottom: 18px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #e7e4f3;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cmp-indigo);
  font-size: 15px;
  font-weight: 700;
}
.cmp-page .cmp-step h3 { font-size: 18px; }

/* ---------- 8. FAQ ----------
   Ported from the project's index.html FAQ pattern
   (assets/css/new-index.css .salesmanai-new-faq-*), matching
   sales-forecasting-software: same borders, typography, chevron icon and
   native multi-open <details> behaviour (no JS). */

.salesmanai-new-faq {
  background: linear-gradient(180deg, #f7f5fc 0%, #eef1fc 100%);
  border-top: 1px solid rgba(91, 87, 214, .10);
}
.salesmanai-new-faq .cmp-container { width: min(100%, 980px); }

.salesmanai-new-chip {
  margin: 0 auto 16px;
  width: fit-content;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid #dde3ff;
  background: #fff;
  color: var(--cmp-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;
}

.cmp-page .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); }

/* ---------- 9. final CTA ---------- */

.cmp-cta {
  padding: 0 32px 96px;
  background: linear-gradient(180deg, #eef1fc 0%, #eef1fc 40%, #fff 40%);
}
.cmp-cta-card {
  border-radius: 32px;
  padding: clamp(48px, 7vw, 80px) clamp(26px, 5vw, 60px);
  text-align: center;
  background: linear-gradient(135deg, #1c2a8e 0%, #3a38b8 50%, #7c77e8 100%);
  box-shadow: 0 34px 80px rgba(28, 42, 142, .26);
}
.cmp-page .cmp-cta-card .cmp-pill-onDark { padding: 8px 20px; font-size: 13.5px; font-weight: 500; }
.cmp-page .cmp-cta-card h2 {
  margin: 24px auto 0;
  max-width: 860px;
  color: #fff;
  font-size: clamp(30px, 5vw, 50px);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.1;
  text-wrap: balance;
}
.cmp-page .cmp-cta-copy {
  margin: 22px auto 0;
  max-width: 680px;
  color: rgba(255, 255, 255, .85);
  font-size: clamp(16px, 2vw, 18px);
  line-height: 1.66;
}
.cmp-cta-actions {
  margin-top: 34px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.cmp-page .cmp-disclaimer {
  margin: 32px auto 0;
  max-width: 980px;
  color: var(--cmp-muted);
  font-size: 12.5px;
  line-height: 1.7;
  text-align: center;
}

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

@media (max-width: 1024px) {
  .cmp-section { padding: 72px 24px; }
  .cmp-hero { --cmp-peek: 40px; padding: clamp(96px, 14svh, 116px) 24px clamp(36px, 7svh, 64px); }
  .cmp-problem-grid,
  .cmp-fit-grid { grid-template-columns: repeat(2, 1fr); }
  .cmp-problem-grid > :last-child,
  .cmp-fit-grid > :last-child { grid-column: 1 / -1; }
  .cmp-steps { grid-template-columns: repeat(2, 1fr); }
  .cmp-cta { padding: 0 24px 72px; }
}

@media (max-width: 767px) {
  .cmp-versus { grid-template-columns: 1fr; }
  .cmp-problem-grid,
  .cmp-fit-grid { grid-template-columns: 1fr; }
  .cmp-problem-grid > :last-child,
  .cmp-fit-grid > :last-child { grid-column: auto; }

  /* The feature row's two answers stack, each keeping its label. */
  .cmp-row-cells { grid-template-columns: 1fr; }
  .cmp-cell + .cmp-cell { border-left: 0; border-top: 1px solid var(--cmp-line-soft); }

  /* The pricing table becomes one labelled card per row, so the
     Fireflies.ai column is never pushed off-screen. */
  .cmp-table-wrap { margin-top: 32px; border: 0; border-radius: 0; background: none; overflow: visible; }
  .cmp-page .cmp-table { display: block; }
  .cmp-page .cmp-table thead { display: none; }
  .cmp-page .cmp-table tbody { display: grid; gap: 14px; }
  .cmp-page .cmp-table tbody tr {
    display: block;
    border: 1px solid #e7e4f3;
    border-radius: 18px;
    overflow: hidden;
    background: #fff;
  }
  .cmp-page .cmp-table tbody th,
  .cmp-page .cmp-table tbody td {
    display: block;
    padding: 14px 20px;
    border-bottom: 0;
  }
  .cmp-page .cmp-table tbody th { background: var(--cmp-surface-soft); border-bottom: 1px solid var(--cmp-line-soft); }
  .cmp-page .cmp-table tbody td + td { border-top: 1px solid var(--cmp-line-soft); }
  .cmp-page .cmp-table tbody td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    color: var(--cmp-muted);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  .cmp-page .cmp-table tbody td.cmp-col-us::before { color: var(--cmp-indigo); }
}

@media (max-width: 640px) {
  .cmp-section { padding: 56px 20px; }
  /* Phones keep the hero at its natural height: a full-screen hero
     leaves empty bands above and below the stacked copy here. */
  .cmp-hero { display: block; min-height: 0; padding: 104px 20px 56px; }
  .cmp-hero-actions { width: 100%; flex-direction: column; align-items: stretch; }
  .cmp-hero-actions .cmp-button { width: 100%; }
  .cmp-steps { grid-template-columns: 1fr; }
  .cmp-card,
  .cmp-step { padding: 24px; }
  .cmp-versus-head,
  .cmp-page .cmp-versus-head { padding: 18px 22px; }
  .cmp-versus-list { padding: 4px 22px 16px; }
  .cmp-page .cmp-versus-list li { padding: 14px 0; font-size: 15.5px; }
  .cmp-row-head { padding: 18px 20px; }
  .cmp-cell { padding: 18px 20px; }
  .cmp-answer { border-radius: 22px; }
  .cmp-cta { padding: 0 20px 56px; }
  .cmp-cta-card { border-radius: 24px; }
  .cmp-cta-actions { flex-direction: column; align-items: stretch; }
  .cmp-button-onDark,
  .cmp-button-outlineDark { padding: 16px 24px; font-size: 16px; }

  .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; }
  .cmp-page .salesmanai-new-faq-item p { margin-top: 14px; font-size: 16px; line-height: 26px; }
}

@media (max-width: 480px) {
  .cmp-button { padding: 15px 26px; font-size: 15px; }
  .cmp-filter { padding: 10px 16px; font-size: 14px; }
  .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; }
  .cmp-page .salesmanai-new-faq-item p { font-size: 15px; line-height: 24px; }
}

/* ---------- motion ----------
   Scroll reveals follow ai-sales-assistant: the script adds
   .cmp-motion-enabled only when IntersectionObserver exists and motion is
   allowed, so without JS nothing is ever hidden. */

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

/* FAQ answers fade in when opened, as on conversation-intelligence-software. */
.salesmanai-new-faq-item[open] > p { animation: cmp-faq-answer-in 160ms ease-out both; }
@keyframes cmp-faq-answer-in {
  from { opacity: 0; transform: translate3d(0, -4px, 0); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cmp-page * { transition: none !important; animation: none !important; }
  .cmp-motion-enabled .cmp-reveal { opacity: 1; transform: none; }
  .cmp-card-lift:hover,
  .cmp-button:hover { transform: none; }
}