/* Sales Reporting Software page */

:root {
  --srs-ink: #0b0a1f;
  --srs-body: #55566a;
  --srs-body-soft: #5b5c70;
  --srs-muted: #8a8b9c;
  --srs-muted-soft: #9a9bac;
  --srs-indigo: #5b57d6;
  --srs-indigo-hover: #4843c4;
  --srs-indigo-deep: #1f2e96;
  --srs-violet: #7c77e8;
  --srs-line: #eae7f3;
  --srs-line-soft: #edebf6;
  --srs-surface: #f8f7fc;
  --srs-cream: #f8f7f5;
  --srs-lilac: #f2f0fa;
  --srs-green: #0e7a55;
  --srs-amber: #b4691a;
  --srs-ink-dark: #140b2e;
  --srs-deep-grad: linear-gradient(135deg, #1c2a8e 0%, #3a38b8 52%, #5b57d6 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. */
.srs-page,
.srs-page *,
.srs-page *::before,
.srs-page *::after { box-sizing: border-box; }

/* Scrollbar hidden to match the sibling product pages
   (assets/css/ai-meeting-recording-software.css). Scrolling itself is
   untouched — keyboard, wheel and touch 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;
}

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

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

.srs-section { padding: 96px 32px; }
.srs-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. */
.srs-card > *,
.srs-focus-card > *,
.srs-stat-card > *,
.srs-step-card > * { min-width: 0; }

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

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

.srs-page .srs-pill {
  display: inline-block;
  margin: 0;
  padding: 7px 18px;
  border-radius: 999px;
  background: #efedfb;
  color: var(--srs-indigo);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  max-width: 100%;
}
.srs-page .srs-pill-light { background: #fff; border: 1px solid #e2dff0; }
.srs-page .srs-pill-outline {
  padding: 8px 20px;
  border: 1px solid #c7c2f2;
  background: rgba(255, 255, 255, .6);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.srs-page .srs-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;
}

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

.srs-section-head { max-width: 800px; margin: 0 auto; text-align: center; }
.srs-section-head h2 {
  margin: 20px 0 0;
  color: var(--srs-ink);
  font-size: clamp(30px, 3.6vw, 44px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.14;
  text-wrap: balance;
}
/* :not(.srs-pill) so this does not repaint the eyebrow pill, which is
   also a <p> here: at two selectors this rule outranked .srs-pill and
   turned every eyebrow body-grey instead of the reference's indigo. */
.srs-section-head p:not(.srs-pill) {
  margin: 18px auto 0;
  max-width: 800px;
  color: var(--srs-body);
  font-size: 17.5px;
  line-height: 1.66;
}

.srs-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;
  text-align: center;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.srs-button-primary {
  background: var(--srs-indigo);
  color: #fff;
  box-shadow: 0 10px 26px rgba(91, 87, 214, .32);
}
.srs-button-primary:hover,
.srs-button-primary:focus-visible { background: var(--srs-indigo-hover); color: #fff; }
.srs-button-onDark {
  padding: 18px 40px;
  background: #fff;
  color: var(--srs-indigo-deep);
  font-size: 17px;
  font-weight: 700;
  box-shadow: 0 14px 34px rgba(10, 14, 60, .24);
}
.srs-button-onDark:hover,
.srs-button-onDark:focus-visible { background: #f1effc; color: var(--srs-indigo-deep); }

/* Every image frame keeps its reference aspect ratio so the card height
   does not jump while the image loads. */
.srs-shot {
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
}
.srs-shot img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

/* Wide screenshots are shown whole rather than cropped to a letterbox
   ratio: the marketer's fixed-crop reference drops the fixed ratio and
   lets the image set its own height, with a light backing behind it.
   No object-position nudge is needed once nothing is cropped. */
.srs-shot-full {
  height: auto;
  min-height: 0;
  background: var(--srs-surface);
}
.srs-shot-full img {
  height: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: center;
}

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

/* The shared header is position:fixed and so does not push page content
   down. The hero's top padding clears it, using the same offsets the
   other product pages use (see assets/css/ai-sales-assistant.css
   .asa-hero): 132px desktop, 116px tablet, 104px mobile. */
.srs-hero {
  position: relative;
  padding: 132px 32px 96px;
  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(--srs-cream);
}
.srs-hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 22px;
}
.srs-hero h1 {
  margin: 0;
  max-width: 940px;
  color: var(--srs-ink);
  font-size: clamp(38px, 5.2vw, 66px);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.06;
  text-wrap: balance;
}
.srs-lead {
  margin: 0;
  max-width: 760px;
  color: var(--srs-body);
  font-size: 19px;
  line-height: 1.62;
}
.srs-hero-actions { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.srs-assurance {
  margin: 0;
  color: #7b7c8e;
  font-size: 14px;
  line-height: 1.5;
}
.srs-hero-inner .srs-assurance:first-of-type { margin-top: 2px; }

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

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

.srs-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.srs-problem-grid { margin-top: 24px; }

.srs-card {
  background: var(--srs-surface);
  border: 1px solid var(--srs-line-soft);
  border-radius: 20px;
  padding: 28px;
  transition: border-color .18s ease, background-color .18s ease;
}
.srs-card:hover { border-color: #c9c4ef; background: #fff; }
.srs-card h3 {
  margin: 0;
  color: var(--srs-ink);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.3;
}
.srs-card p {
  margin: 10px 0 0;
  color: var(--srs-body-soft);
  font-size: 15px;
  line-height: 1.62;
}

.srs-card-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: #efedfb;
  color: var(--srs-indigo);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}


/* ---------- FOCUS intro stepper ---------- */

.srs-focus-intro { background: linear-gradient(180deg, var(--srs-cream), var(--srs-lilac)); }

.srs-flow {
  margin: 48px auto 0;
  max-width: 760px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.srs-flow-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 180px;
  flex: none;
}
.srs-page .srs-flow-icon {
  width: 62px;
  height: 62px;
  flex: none;
  border-radius: 20px;
  background: #efedfb;
  color: var(--srs-indigo);
  display: flex;
  align-items: center;
  justify-content: center;
}
.srs-page .srs-flow-icon-active {
  background: linear-gradient(135deg, #2e2a8f, #6b66e4);
  color: #fff;
}
/* The inline SVGs inherit the tile colour; state it on the shapes so a
   stray inherited colour cannot darken the icon. */
.srs-page .srs-flow-icon svg [fill]:not([fill="none"]) { fill: currentColor; }
.srs-page .srs-flow-icon svg [stroke]:not([stroke="none"]) { stroke: currentColor; }
.srs-flow-step span {
  color: var(--srs-ink);
  font-size: 15.5px;
  font-weight: 600;
}
.srs-flow-arrow {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 24px;
  margin-bottom: 30px;
  color: #c9c4ef;
}
.srs-flow-arrow-line {
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, #dcd8f2, #c9c4ef);
}
.srs-flow-arrow svg { margin-left: -2px; flex: none; }

/* ---------- how it works ---------- */

.srs-how { background: #fff; }
.srs-step-grid { margin-top: 48px; align-items: stretch; }
.srs-step-card {
  background: #fff;
  border: 1px solid var(--srs-line);
  border-radius: 24px;
  padding: 26px;
  box-shadow: 0 18px 44px rgba(16, 12, 52, .06);
  display: flex;
  flex-direction: column;
}
.srs-page .srs-step-num {
  margin: 0;
  color: var(--srs-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.srs-step-card h3 {
  margin: 10px 0 0;
  color: var(--srs-ink);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.2;
}
.srs-step-card p {
  margin: 10px 0 18px;
  color: var(--srs-body);
  font-size: 15px;
  line-height: 1.6;
}
.srs-step-card .srs-shot {
  margin-top: auto;
  aspect-ratio: 360 / 260;
}

/* ---------- inside the FOCUS report ---------- */

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

.srs-focus-grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
}
.srs-focus-card {
  background: #fff;
  border: 1px solid var(--srs-line);
  border-radius: 24px;
  padding: 28px;
}
.srs-span-8 { grid-column: span 8; }
.srs-span-4 { grid-column: span 4; }
.srs-span-12 { grid-column: span 12; }

.srs-focus-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.srs-focus-card h3 {
  margin: 0;
  color: var(--srs-ink);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.3;
}
.srs-focus-card p {
  margin: 12px 0 0;
  color: var(--srs-body);
  font-size: 15px;
  line-height: 1.6;
}
.srs-focus-card .srs-shot { margin-top: 18px; border-radius: 14px; }

.srs-tag {
  flex: none;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}
.srs-tag-green { background: #e3f7ee; color: var(--srs-green); }
.srs-tag-amber { background: #fef3e7; color: var(--srs-amber); }

.srs-shot-320-220 { aspect-ratio: 320 / 220; }
.srs-shot-320-240 { aspect-ratio: 320 / 240; }
.srs-shot-320-160 { aspect-ratio: 320 / 160; }

.srs-shot-usecase img { object-position: center 45%; }
.srs-shot-closing img { object-position: center 40%; }

/* ---------- what changes (stats) ---------- */

.srs-outcomes { background: #fff; }
.srs-outcomes .srs-section-head { max-width: 780px; }
.srs-stat-grid { margin-top: 48px; }
.srs-stat-card {
  border-radius: 24px;
  padding: 38px 32px;
  border: 1px solid var(--srs-line);
}
/* reset.css sets `font-size: 100%` on a long element list including p,
   which outranks a bare class selector. Typography that must hold is
   therefore scoped with .srs-page to win the cascade. */
.srs-page .srs-stat-figure {
  margin: 0;
  font-size: clamp(42px, 4.6vw, 52px);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.srs-stat-card h3 {
  margin: 18px 0 0;
  color: var(--srs-ink);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.25;
}
/* :not() so the card's body rule does not also repaint the figure or
   the source label, both of which are <p> here and were losing to it. */
.srs-stat-card p:not(.srs-stat-figure):not(.srs-stat-source) {
  margin: 10px 0 0;
  color: var(--srs-body);
  font-size: 15px;
  line-height: 1.6;
}
.srs-page .srs-stat-source {
  margin-top: 16px;
  color: var(--srs-muted-soft);
  font-size: 12px;
  line-height: 1.5;
}

.srs-stat-a {
  background: linear-gradient(160deg, #f1effc, #f7f6fc);
  border-color: #e9e6f6;
}
.srs-page .srs-stat-a .srs-stat-figure { background-image: linear-gradient(100deg, #2a3ab0, #7c77e8); }
.srs-stat-b {
  background: linear-gradient(160deg, #ebf1fb, #f6f8fc);
  border-color: #e3e9f6;
}
.srs-page .srs-stat-b .srs-stat-figure { background-image: linear-gradient(100deg, #1f2e96, #5b57d6); }
.srs-stat-c {
  background: linear-gradient(160deg, #eaf6f0, #f5faf7);
  border-color: #dfede6;
}
.srs-page .srs-stat-c .srs-stat-figure { background-image: linear-gradient(100deg, #0e7a55, #4a45c6); }

.srs-also {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid #f1eff7;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.srs-page .srs-also-label {
  margin: 0;
  color: #a9aab9;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.srs-page .srs-also p {
  margin: 0;
  color: var(--srs-muted-soft);
  font-size: 12px;
  line-height: 1.6;
}

/* ---------- use cases ---------- */

.srs-usecases { background: linear-gradient(180deg, var(--srs-cream), #f1eff9); }
.srs-usecases .srs-section-head { max-width: 780px; }
.srs-usecase-grid { margin-top: 44px; }
.srs-usecase-card p { margin: 10px 0 16px; }

/* ---------- comparison table ---------- */

.srs-compare { background: #fff; }
.srs-compare .srs-section-head { max-width: 820px; }

.srs-table-wrap {
  margin-top: 44px;
  border: 1px solid var(--srs-line);
  border-radius: 24px;
  overflow: hidden;
}
/* The table keeps a readable minimum width and scrolls inside its own
   container, so the page itself never scrolls sideways. */
.srs-table-scroll { overflow-x: auto; }
.srs-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  text-align: left;
}
.srs-table thead th {
  padding: 18px 20px;
  background: var(--srs-surface);
  border-bottom: 1px solid var(--srs-line);
  color: #6e6f82;
  font-size: 15px;
  font-weight: 600;
  vertical-align: middle;
}
.srs-table thead th:first-child {
  padding: 18px 24px;
  color: var(--srs-muted);
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.srs-table thead th.srs-col-focus {
  background: #ede7ff;
  color: var(--srs-indigo);
}
.srs-table tbody td {
  padding: 16px 20px;
  border-bottom: 1px solid #f5f3fa;
  color: var(--srs-body);
  font-size: 15px;
  line-height: 1.5;
}
.srs-table tbody th {
  padding: 16px 24px;
  border-bottom: 1px solid #f5f3fa;
  color: var(--srs-ink);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
}
.srs-table tbody td.srs-col-focus {
  background: #f6f3ff;
  color: #3c3d50;
  font-weight: 500;
}
.srs-table tbody tr:last-child th,
.srs-table tbody tr:last-child td { border-bottom: 0; }

.srs-table-note {
  margin: 30px auto 0;
  max-width: 760px;
  color: var(--srs-body);
  font-size: 17px;
  line-height: 1.6;
  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 .srs-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(--srs-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 ---------- */

.srs-cta { background: #fff; padding-top: 0; }
.srs-cta-card {
  border-radius: 32px;
  padding: 80px 60px;
  text-align: center;
  background: linear-gradient(135deg, #1c2a8e 0%, #3a38b8 50%, #7c77e8 100%);
  box-shadow: 0 34px 80px rgba(28, 42, 142, .26);
}
.srs-cta-card .srs-pill-onDark {
  padding: 8px 20px;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0;
}
.srs-cta-card h2 {
  margin: 24px auto 0;
  max-width: 860px;
  color: #fff;
  font-size: clamp(30px, 4.2vw, 50px);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.1;
  text-wrap: balance;
}
/* Excludes the pill and the assurance line, which are also direct <p>
   children and were inheriting this lead paragraph's 18px size. */
.srs-cta-card > p:not(.srs-pill):not(.srs-assurance) {
  margin: 22px auto 0;
  max-width: 680px;
  color: rgba(255, 255, 255, .85);
  font-size: 18px;
  line-height: 1.66;
}
.srs-cta-actions { margin-top: 34px; display: flex; justify-content: center; }
.srs-page .srs-assurance-onDark { margin-top: 18px; color: rgba(255, 255, 255, .72); }

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

@media (max-width: 1080px) {
  .srs-focus-grid > .srs-span-8,
  .srs-focus-grid > .srs-span-4 { grid-column: span 6; }
  .srs-problem-card { padding: 48px 40px; }
  .srs-cta-card { padding: 64px 40px; }
}

@media (max-width: 900px) {
  .srs-section { padding: 72px 24px; }
  .srs-hero { padding: 116px 24px 72px; }
  .srs-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .srs-focus-grid > .srs-span-8,
  .srs-focus-grid > .srs-span-4,
  .srs-focus-grid > .srs-span-12 { grid-column: span 12; }
  /* These cards span the full row here, but stretching their
     near-square screenshots into a wide letterbox cropped away about
     half of each one. Keep each image's own ratio and let the card be
     taller — the marketer's fixed-crop brief is that nothing should be
     cut off. */
  .srs-focus-grid .srs-shot-320-220 { aspect-ratio: 1100 / 757; }
  .srs-focus-grid .srs-shot-320-240 { aspect-ratio: 1100 / 825; }
  .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: 640px) {
  .srs-section { padding: 56px 20px; }
  .srs-hero { padding: 104px 20px 56px; }
  .srs-lead { font-size: 17px; }
  .srs-hero-actions { width: 100%; flex-direction: column; align-items: stretch; }
  .srs-hero-actions .srs-button { width: 100%; }
  .srs-grid-3 { grid-template-columns: 1fr; }
  /* On narrow screens the problem card reads better centred, so the
     badge, heading and copy are centre-aligned together. */
  .srs-problem-card {
    padding: 36px 24px;
    border-radius: 22px;
    text-align: center;
  }
  .srs-problem-card > div { max-width: 100%; }
  .srs-problem-card h2 { margin-top: 18px; }
  .srs-problem-card p { margin-top: 16px; font-size: 16px; }
  .srs-card,
  .srs-focus-card { padding: 22px; border-radius: 18px; }
  .srs-step-card { padding: 22px; border-radius: 20px; }
  .srs-stat-card { padding: 30px 24px; border-radius: 20px; }
  .srs-section-head p:not(.srs-pill) { font-size: 16px; }
  /* The three steps read as one sequence, so they stay on a single row
     and shrink to fit rather than scrolling (which clipped "Act") or
     stacking into three unrelated tiles. */
  .srs-flow { margin-top: 36px; }
  .srs-flow-step { width: auto; flex: 1 1 0; min-width: 0; gap: 10px; }
  .srs-page .srs-flow-icon { width: 48px; height: 48px; border-radius: 15px; }
  .srs-page .srs-flow-icon svg { width: 20px; height: 20px; }
  .srs-flow-step span { font-size: 13.5px; text-align: center; }
  /* Keep a visible connecting line: the arrow track must retain some
     width of its own, or the gradient line collapses and only the
     arrowhead is left. */
  .srs-flow-arrow { flex: 0 1 34px; min-width: 22px; margin-bottom: 26px; }
  /* A 720px-wide table could only scroll sideways here, which hid the
     FOCUS column entirely. Each row becomes its own card instead, with
     the capability as the card heading and the two values labelled
     beneath it, so the comparison survives without scrolling. */
  .srs-table-wrap {
    margin-top: 32px;
    border: 0;
    border-radius: 0;
    background: none;
  }
  .srs-table-scroll { overflow-x: visible; }
  .srs-page .srs-table { min-width: 0; display: block; }
  .srs-page .srs-table thead { display: none; }
  .srs-page .srs-table tbody { display: grid; gap: 14px; }
  .srs-page .srs-table tbody tr {
    display: block;
    border: 1px solid var(--srs-line);
    border-radius: 18px;
    background: #fff;
    overflow: hidden;
  }
  .srs-page .srs-table tbody th {
    display: block;
    padding: 16px 18px 12px;
    border-bottom: 1px solid var(--srs-line);
    color: var(--srs-ink);
    font-size: 16px;
    font-weight: 600;
  }
  .srs-page .srs-table tbody td {
    display: block;
    padding: 12px 18px;
    border-bottom: 0;
    font-size: 15px;
  }
  /* The column name moves into the cell, so the value keeps its meaning
     once the header row is hidden. */
  .srs-page .srs-table tbody td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 3px;
    color: var(--srs-muted);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
  }
  .srs-page .srs-table tbody td.srs-col-focus {
    background: #f6f3ff;
    border-top: 1px solid #ece6ff;
  }
  .srs-page .srs-table tbody td.srs-col-focus::before { color: var(--srs-indigo); }
  .srs-table-note { margin-top: 24px; font-size: 16px; }
  .srs-cta { padding-bottom: 56px; }
  .srs-cta-card { padding: 48px 24px; border-radius: 24px; }
  .srs-cta-card > p:not(.srs-pill):not(.srs-assurance) { margin-top: 18px; font-size: 16px; }
  .srs-cta-actions { margin-top: 28px; }
  .srs-cta-actions .srs-button { width: 100%; }
}

@media (max-width: 480px) {
  .srs-button { padding: 15px 26px; font-size: 15px; }
  .srs-button-onDark { padding: 16px 28px; font-size: 16px; }
  .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) {
  .srs-page * { transition: none !important; animation: none !important; }
  .salesmanai-new-faq-icon { transition: none; }
}