/* EdTech industry page (/industry/edutech).
   The body carries `finances-page` and `nbfc-page` as well as `edu-page`,
   so finances.css and nbfc-field-force-management.css supply the whole NBFC
   design (layout, spacing, animations) and the NBFC colour theme. This
   file only adds the pieces the EdTech copy deck needs and the NBFC page
   does not have, all scoped to `.edu-page`, in the NBFC blues (accent
   #164bd6, brand blue #1e5bfa), the same blues as the copy deck. Built
   the same way as the Manufacturing page. */

/* Hero heading alignment, as on the NBFC hero: three centred lines
   stepping in, widest first ("EdTech Workforce Management" /
   "Software That Tracks Every" / the rotating word). On desktop the
   heading is a touch smaller than the NBFC clamp, so it sits between the
   floating icons instead of running into them. */
@media (min-width: 1000px) {
  .edu-page.nbfc-page .fin-hero-center .prod-hero-headline {
    font-size: clamp(34px, 3.75vw, 56px);
  }
}

/* Rotating word (set up by the page script): it fills the heading's last
   line on its own, at every screen size, and each word is centred in that
   full-width line. Whole words slide up and fade in turn; nothing else in
   the heading moves or resizes while they change.
   Each word is the NBFC accent blue (#164bd6), solid as on the NBFC
   headline. */
.edu-page.nbfc-page .crm-suite-hero.fin-hero-center .fin-hero-title-accent.edu-rotator.is-ready {
  position: relative;
  display: block;
  width: auto;
  color: #164bd6;
  text-align: center;
  white-space: nowrap;
  background: none;
  -webkit-text-fill-color: currentColor;
}

.edu-page .edu-rotator-sizer {
  visibility: hidden;
}

/* Each word's box is padded above and below (and shifted up by the same
   amount, so the word stays exactly in place), so no glyph is clipped by
   the heading's tight 1.1 line height. */
.edu-page.nbfc-page .crm-suite-hero.fin-hero-center .edu-rotator-word {
  position: absolute;
  top: -0.12em;
  left: 50%;
  padding: 0.12em 0.06em 0.22em;
  white-space: nowrap;
  color: #164bd6;
  background: none;
  -webkit-text-fill-color: #164bd6;
  opacity: 0;
  transform: translate(-50%, 0.45em);
  transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.edu-page.nbfc-page .crm-suite-hero.fin-hero-center .edu-rotator-word.is-current {
  opacity: 1;
  transform: translate(-50%, 0);
}

.edu-page.nbfc-page .crm-suite-hero.fin-hero-center .edu-rotator-word.is-leaving {
  opacity: 0;
  transform: translate(-50%, -0.45em);
}

/* Hero description, set exactly like the NBFC hero: centred lines, each
   held on one line, under the centred heading. The copy deck's subhead is
   set in two lines (107 / 118 characters) so the longer line runs the
   full width of the heading's first line, "EdTech Workforce Management",
   and the block lines up with the heading on both sides. The text
   scales with the heading (about 0.3 x its clamp(34px, 3.75vw, 56px)),
   so the two stay level at every desktop width. Below 1200px it wraps naturally, as on the NBFC page. */
@media (min-width: 1200px) {
  .edu-page.nbfc-page .fin-hero-center .prod-hero-sub {
    max-width: none;
    font-size: min(17px, 1.14vw);
    text-align: center;
  }

  .edu-page.nbfc-page .fin-hero-center .prod-hero-sub .nbfc-hero-sub-line {
    display: block;
    white-space: nowrap;
  }
}

/* Quick answer section, kept compact. The heading ("What Is EdTech
   Workforce Management Software?") is longer than NBFC's, and the shared
   rules hold its first line on one line, which ran it into the picture.
   Here it is a little smaller and wraps naturally in balanced lines inside
   the copy column, which never passes the middle of the section where the
   picture starts. The paragraphs and field layer also sit
   closer together. */
@media (min-width: 1101px) {
  .edu-page.nbfc-page .nbfc-answer .fin-journey-heading h2 {
    font-size: clamp(28px, 2.6vw, 40px) !important;
    text-wrap: balance;
  }

  .edu-page.nbfc-page .nbfc-answer .fin-journey-heading h2 .fin-journey-lead {
    display: inline;
  }

  .edu-page.nbfc-page .nbfc-answer .fin-journey-heading h2 span {
    white-space: normal !important;
  }

  .edu-page.nbfc-page .nbfc-answer {
    padding: 28px 0;
  }

  .edu-page.nbfc-page .nbfc-answer .nbfc-answer-text {
    margin-top: 10px;
  }

  .edu-page.nbfc-page .nbfc-answer .nbfc-answer-text p {
    font-size: 16px;
    line-height: 1.55;
  }

  .edu-page.nbfc-page .nbfc-answer .nbfc-layer {
    margin-top: 16px;
  }
}

/* Quick answer picture (a counsellor showing a school staff member a
   tablet, with a "School Visit Verified" card), centred left to right
   so both people and the card stay in view, and aligned from the
   bottom (below). Square corners only, as on the Media page. */
.edu-page.nbfc-page .nbfc-answer-media,
.edu-page.nbfc-page .nbfc-answer-media img {
  border-radius: 0 !important;
}

.edu-page.nbfc-page .nbfc-answer-media img {
  object-position: 50% 50%;
}

/* Aligned from the bottom: the photo sits on the section's bottom edge
   instead of being cropped around its centre. Its lowest ~12% is only
   the soft white fade under the two people, which left a pale band
   above the section's edge, so on desktop the picture is drawn 12%
   taller than its column and anchored to the bottom: that fade runs
   off the edge and the people stand on the section's bottom line. */
@media (min-width: 1101px) {
  .edu-page.nbfc-page .nbfc-answer-media img {
    top: auto;
    bottom: -12%;
    height: 112%;
    object-position: 50% 100%;
  }
}

/* Stacked (tablets and phones): the whole photo at its own 3:2 shape
   under the copy, resting on the section's bottom edge, so nothing is
   cropped. */
@media (max-width: 1100px) {
  .edu-page.nbfc-page .nbfc-answer-media {
    aspect-ratio: 2778 / 1851;
  }

  .edu-page.nbfc-page .nbfc-answer-media img {
    object-position: 50% 100%;
  }
}

/* "TrackOlap for Every Education Team" label: no leading dash. The NBFC
   page draws a short rule before this label; this page shows the
   label on its own, with no dash anywhere in the content. */
.edu-page.nbfc-page .nbfc-layer-title::before {
  display: none;
}

/* The Visibility Gap: the NBFC section background, with the NBFC tile
   grid (14px cells, faint brand blue) behind the pill, heading and intro,
   reaching up through the section's top padding and fading out at the
   sides and just below the intro. */
.edu-page.finances-page .edu-proof .fin-leaks-heading {
  position: relative;
  isolation: isolate;
}

.edu-page.finances-page .edu-proof .fin-leaks-heading::before {
  position: absolute;
  z-index: -1;
  top: -96px;
  bottom: -24px;
  left: 50%;
  width: min(1000px, 100vw);
  background-image:
    linear-gradient(rgba(30, 91, 250, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 91, 250, 0.09) 1px, transparent 1px);
  background-position: center top;
  background-repeat: repeat;
  background-size: 14px 14px;
  content: "";
  pointer-events: none;
  transform: translateX(-50%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 100%),
    linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 100%),
    linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
  mask-composite: intersect;
}

@media (max-width: 1024px) {
  .edu-page.finances-page .edu-proof .fin-leaks-heading::before {
    top: -72px;
  }
}

@media (max-width: 900px) {
  .edu-page.finances-page .edu-proof .fin-leaks-heading::before {
    width: 100vw;
  }
}

/* How it works: the heading and Stage 1 read as one section (as on the
   Agriculture page). Stage 1 has no background of its own, so the section's single
   top glow runs on behind it instead of a second glow starting under the
   heading, and Stage 1 starts closer to the subheading. The heading block
   is also wide enough for its lines to sit centred. */
.edu-page.finances-page .crm-workflow-step:first-child {
  padding-top: 16px;
  background: transparent;
}

.edu-page.sales-crm-softwares-page .crm-section-heading.crm-workflow-heading {
  width: min(calc(100% - 48px), 1280px);
  padding-bottom: 24px;
}

/* How it works heading, set like the NBFC hero headline: two centred
   lines, the second narrower than the first ("How TrackOlap's EdTech Field
   Force" / "Management Software Works"). */
.edu-page .crm-workflow-heading .edu-workflow-line {
  display: block;
}

.edu-page.finances-page .crm-workflow-heading .edu-workflow-title .fin-workflow-lead,
.edu-page.finances-page .crm-workflow-heading .edu-workflow-title .crm-workflow-title-gradient {
  display: inline;
  white-space: normal;
}

/* Subheading aligned to the heading, as under the NBFC hero headline: on
   desktop the heading block is exactly as wide as the heading's first
   (widest) line, and the subheading fills that width without widening it,
   in two balanced, centred lines. */
@media (min-width: 901px) {
  .edu-page.sales-crm-softwares-page .crm-section-heading.crm-workflow-heading {
    width: fit-content;
    max-width: min(1280px, calc(100% - 48px));
    margin-inline: auto;
  }

  .edu-page.finances-page .crm-section-heading.crm-workflow-heading > p.crm-workflow-summary {
    width: 0;
    min-width: 100%;
    max-width: none;
    margin-inline: auto;
    text-align: center;
    text-wrap: balance;
  }
}

/* How it works subheading on desktop: balanced into two lines it came
   out at about half the heading's width. Instead it runs on one centred
   line ("Seven connected workflows ... productivity report.") sized with
   the heading (about 0.38 x its clamp(28px, 3.4vw, 48px)), so it spans
   the width of the heading's first line, "How TrackOlap's EdTech Field
   Force". If it ever runs a little wider, the heading block widens with
   it and both stay centred. */
@media (min-width: 1101px) {
  .edu-page.finances-page .crm-section-heading.crm-workflow-heading > p.crm-workflow-summary {
    width: auto;
    min-width: 0;
    font-size: min(18.5px, 1.3vw);
    white-space: nowrap;
  }
}

/* "Built on Trust" heading: on desktop "Employee Monitoring Software for
   Education," holds one centred line (a touch smaller than the shared
   clamp so it fits the 1100px heading block), "Built on Trust" in blue
   below it, and the intro fills the first line's width in balanced,
   centred lines. Below 901px both wrap naturally. */
@media (min-width: 901px) {
  .edu-page.finances-page .prod-task-capabilities-head {
    width: fit-content;
    max-width: min(1100px, calc(100% - 48px));
    margin-right: auto;
    margin-left: auto;
  }

  .edu-page.finances-page.nbfc-page .prod-task-capabilities-head h2 {
    font-size: clamp(28px, 3vw, 44px) !important;
    white-space: nowrap;
  }

  .edu-page.finances-page .prod-task-capabilities-head .prod-task-capabilities-intro {
    width: 0;
    min-width: 100%;
    max-width: none;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
    text-align-last: center;
    text-wrap: balance;
  }
}

/* Comparison heading, set like the sections above: "Spreadsheets Record
   Claims." on the first line and "TrackOlap Records Proof." in blue below
   it, centred (balanced if it ever wraps). */
@media (min-width: 901px) {
  .edu-page.finances-page .fin-compare-heading {
    width: fit-content;
    max-width: min(1100px, calc(100% - 48px));
    margin-right: auto;
    margin-left: auto;
  }

  .edu-page.finances-page .fin-compare-heading h2 {
    text-align: center;
    text-wrap: balance;
  }

  .edu-page.nbfc-page .fin-compare-heading .ind-compare-intro {
    width: 0;
    min-width: 100%;
    max-width: none;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
    text-align-last: center;
    text-wrap: balance;
  }
}

/* Impact cards on phones: two compact cards per row (2 x 2) instead of
   four tall full-width cards stacked down the screen, with smaller
   figures and labels so each sentence fits in a few short lines. */
@media (max-width: 560px) {
  .edu-page.finances-page .nbfc-impact .fin-results-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .edu-page.finances-page .nbfc-impact .fin-results-card {
    min-height: 0;
    padding: 20px 12px;
    justify-content: flex-start;
    border-radius: 16px;
  }

  .edu-page.finances-page .nbfc-impact .fin-results-value {
    margin: 0 0 8px;
  }

  .edu-page.finances-page .nbfc-impact .fin-results-value strong {
    font-size: 30px;
  }

  .edu-page.finances-page .nbfc-impact .fin-results-label {
    font-size: 14px;
    line-height: 1.4;
  }
}

/* Mid-page demo CTA: the NBFC layout (pitch on the left, demo form on
   the right), centred on one line. The heading is a little smaller and
   splits into its two halves, and the decorative arrow, which otherwise
   wrapped onto a line of its own, is dropped. The band is a little
   shorter than the shared one, with a tighter form, but keeps enough
   room (56px) above and below the form card that it never crowds the
   band's edges. */
.edu-page .edu-cta .fin-cta-form-card {
  align-items: center;
  padding-top: 56px;
  padding-bottom: 56px;
  gap: 48px;
}

.edu-page .edu-cta .fin-cta-form-copy h2 {
  font-size: clamp(28px, 2.6vw, 40px);
}

.edu-page .edu-cta .fin-cta-form-copy h2 span:not(.fin-cta-form-arrow) {
  display: block;
}

.edu-page .edu-cta .fin-cta-form-arrow {
  display: none;
}

.edu-page .edu-cta .fin-cta-form-copy > p {
  max-width: 520px;
  margin-top: 14px;
  font-size: 17px;
  line-height: 1.6;
}

.edu-page .edu-cta .fin-cta-form-panel {
  padding: 18px 22px 16px;
}

.edu-page .edu-cta .fin-cta-form-panel h3 {
  margin-bottom: 8px;
  font-size: 20px;
}

.edu-page .edu-cta .fin-cta-form-panel .crm-proof-demo-widget .ant-form-item {
  margin-bottom: 6px !important;
}

.edu-page .edu-cta .fin-cta-form-panel .crm-proof-demo-widget .ant-input,
.edu-page .edu-cta .fin-cta-form-panel .crm-proof-demo-widget .react-tel-input .form-control {
  min-height: 36px !important;
}

.edu-page .edu-cta .fin-cta-form-panel .crm-proof-demo-widget textarea {
  min-height: 52px !important;
  max-height: 64px;
}

@media (max-width: 1024px) {
  .edu-page .edu-cta .fin-cta-form-card {
    padding-top: 44px;
    padding-bottom: 44px;
    gap: 28px;
  }
}

/* Use cases heading: the shared Finance rule justifies the intro
   across the width of a much longer heading, which stretches the word
   spacing of a short intro. Here the heading and intro are centred as one
   block, the intro set in balanced, normally spaced lines under it (as on
   the Agriculture page). */
.edu-page .crm-section-heading.crm-communication-heading {
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.edu-page .crm-communication-heading h2 {
  text-align: center;
  text-wrap: balance;
}

/* On desktop the heading reads on one line: "Built for Every Kind of"
   with "Education Business" in blue (a touch smaller than the shared
   clamp so it fits). Below 901px it wraps naturally. */
@media (min-width: 901px) {
  .edu-page.finances-page .crm-section-heading.crm-communication-heading {
    max-width: min(1200px, calc(100% - 48px));
  }

  .edu-page.finances-page.nbfc-page .crm-communication-heading h2 {
    font-size: clamp(28px, 3vw, 44px) !important;
  }

  .edu-page.finances-page.nbfc-page .crm-communication-heading h2 .fin-segments-lead {
    white-space: nowrap !important;
  }

  /* Subheading aligned to the heading: the heading block is exactly as
     wide as its first (widest) line, and the subheading fills that width
     without widening it, its full line running edge to edge under the
     heading and the last line centred. */
  .edu-page.finances-page .crm-section-heading.crm-communication-heading {
    width: fit-content;
  }

  .edu-page.finances-page.nbfc-page .crm-section-heading.crm-communication-heading > p:last-child {
    width: 0;
    min-width: 100%;
    max-width: none;
    font-size: 18px;
    text-align: justify;
    text-align-last: center;
    text-wrap: pretty;
  }
}

.edu-page .crm-section-heading.crm-communication-heading > p:last-child {
  max-width: 760px;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
  text-align-last: center;
  text-wrap: balance;
}

/* Hero trust line under the email bar (the copy deck's four points:
   "GPS-verified visits" to "Android, iOS & Web"), each with an NBFC blue
   tick. Wraps and stays centred on small
   screens. */
.edu-page .edu-hero-trust {
  display: flex;
  margin: 18px 0 0;
  padding: 0;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  color: var(--crm-muted);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  list-style: none;
}

.edu-page .edu-hero-trust li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.edu-page .edu-hero-trust svg {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: #164bd6;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 560px) {
  .edu-page .edu-hero-trust {
    gap: 6px 14px;
    font-size: 13px;
  }
}

/* Demo form's submit button ("Submit your Query"): narrower and centred
   in the form instead of spanning its full width. The form widget may put
   the submit class on a wrapper or on the button itself, so a wrapper
   just centres its button (no fill of its own), and the button is sized
   to its label with comfortable side padding. */
body.edu-page.finances-page:not(.mfi-page) .edu-cta .crm-proof-demo-widget .trackwick_public_form_submit-btn:not(button):not(input),
body.edu-page.finances-page:not(.mfi-page) .edu-cta .crm-proof-demo-widget .btn-box {
  display: flex !important;
  width: 100% !important;
  justify-content: center !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.edu-page.finances-page:not(.mfi-page) .edu-cta .crm-proof-demo-widget button.trackwick_public_form_submit-btn,
body.edu-page.finances-page:not(.mfi-page) .edu-cta .crm-proof-demo-widget .trackwick_public_form_submit-btn .ant-btn,
body.edu-page.finances-page:not(.mfi-page) .edu-cta .crm-proof-demo-widget .btn-box button,
body.edu-page.finances-page:not(.mfi-page) .edu-cta .crm-proof-demo-widget button[type="submit"],
body.edu-page.finances-page:not(.mfi-page) .edu-cta .crm-proof-demo-widget input[type="submit"] {
  display: block !important;
  width: auto !important;
  min-width: 200px;
  min-height: 42px !important;
  margin: 6px auto 0 !important;
  padding: 8px 32px !important;
  font-size: 16px !important;
}

/* Hover and focus: the shared hover rules (finances.css and the NBFC
   stylesheet) also match the full-width wrapper, which painted the whole
   row so the button looked as if it grew to the form's width. The wrapper
   stays clear in every state, and the button keeps its size; only its
   colour changes. */
body.edu-page.finances-page:not(.mfi-page) .edu-cta .crm-proof-demo-widget .trackwick_public_form_submit-btn:not(button):not(input):is(:hover, :focus-within, :active),
body.edu-page.finances-page:not(.mfi-page) .edu-cta .crm-proof-demo-widget .btn-box:is(:hover, :focus-within, :active) {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.edu-page.finances-page:not(.mfi-page) .edu-cta .crm-proof-demo-widget button.trackwick_public_form_submit-btn:is(:hover, :focus, :active),
body.edu-page.finances-page:not(.mfi-page) .edu-cta .crm-proof-demo-widget .trackwick_public_form_submit-btn .ant-btn:is(:hover, :focus, :active),
body.edu-page.finances-page:not(.mfi-page) .edu-cta .crm-proof-demo-widget .btn-box button:is(:hover, :focus, :active),
body.edu-page.finances-page:not(.mfi-page) .edu-cta .crm-proof-demo-widget button[type="submit"]:is(:hover, :focus, :active),
body.edu-page.finances-page:not(.mfi-page) .edu-cta .crm-proof-demo-widget input[type="submit"]:is(:hover, :focus, :active) {
  width: auto !important;
  min-height: 42px !important;
  margin: 6px auto 0 !important;
  padding: 8px 32px !important;
  transform: none !important;
}

body.edu-page.finances-page:not(.mfi-page) .edu-cta .crm-proof-demo-fallback {
  display: table;
  width: auto;
  margin-right: auto;
  margin-left: auto;
  padding-right: 32px;
  padding-left: 32px;
}

/* Get Started cards: the NBFC rule holds each title on one line from
   1280px up, but "Talk to an Education Specialist" is longer than the
   NBFC titles, so it could run out of its card into the next one, where
   it would flicker while the cards fade in. Here the
   titles wrap in balanced lines inside their cards at every width, and
   the cards stay inside their own column. */
.edu-page.nbfc-page .crm-get-started-card {
  min-width: 0;
  overflow: hidden;
}

.edu-page.nbfc-page .crm-get-started-card h3 {
  white-space: normal;
  overflow-wrap: break-word;
  text-wrap: balance;
}

/* Scroll reveal: once an element has faded in, drop the animation's
   `will-change` hint so the revealed cards no longer sit on their own
   compositing layers, which can make text shimmer while scrolling. */
.edu-page.finances-page .fin-reveal.is-revealed {
  will-change: auto;
}

/* ---- How it works on phones ----
   The heading keeps its two lines, each wrapping in balanced lines
   instead of leaving a single word alone; it and the intro stay centred,
   like every section heading on the page. Each step's copy reads from
   the left: the step label, title, description, "Key capabilities"
   label and the capability pills all start on the same left edge as the
   picture below them. */
@media (max-width: 760px) {
  .edu-page.finances-page .crm-workflow-heading .edu-workflow-title .edu-workflow-line {
    text-wrap: balance;
  }

  .edu-page.sales-crm-softwares-page .crm-workflow-copy {
    text-align: left;
  }

  .edu-page.sales-crm-softwares-page .crm-workflow-copy .crm-step-number {
    margin-right: 0;
    margin-left: 0;
    letter-spacing: 0.06em;
    line-height: 1.4;
  }

  .edu-page.sales-crm-softwares-page .crm-workflow-copy h3,
  .edu-page.sales-crm-softwares-page .crm-workflow-copy .crm-step-description {
    margin-right: 0;
    margin-left: 0;
    text-align: left;
    text-wrap: pretty;
  }

  .edu-page.nbfc-page .crm-workflow-copy .nbfc-capability-label {
    text-align: left;
  }

  .edu-page.sales-crm-softwares-page .crm-workflow-copy .crm-capability-list {
    justify-content: flex-start;
  }
}

/* ---- Hero on phones ----
   The headline flows as balanced lines (finances.css), with the rotating
   word centred on its own last line as on desktop.
   The hero also ends closer to the logo strip (the shared 108px bottom
   padding left a large empty gap under the email bar). */
@media (max-width: 760px) {
  .edu-page.finances-page .fin-hero-center .crm-suite-hero-inner {
    padding-bottom: 44px;
  }
}

/* ---- Closing CTA ----
   The Sales CRM page's blue CTA band (sales-crm-softwares.css) closing
   the page after the FAQs. Here the heading is set at the size of the
   other section headings on this page, so the band reads as one more
   section rather than a second hero. */
.edu-page.sales-crm-softwares-page .edu-final-cta h2 {
  font-size: clamp(30px, 3.2vw, 48px);
}

/* ---- Use cases on phones and tablets ----
   The tabs sit in one row that scrolls sideways. The row scrolls with
   touch (momentum, snapping to each tab), and the page script scrolls it
   so the selected tab is always fully in view. A soft fade on the right
   edge shows there are more tabs to swipe to. Same breakpoint as the
   shared rule that turns the tab list into a row (900px). */
@media (max-width: 900px) {
  .edu-page.sales-crm-softwares-page .crm-communication-tabs {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 24px;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 88%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 0%, #000 88%, transparent 100%);
  }

  .edu-page.sales-crm-softwares-page .crm-communication-tab {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  .edu-page.sales-crm-softwares-page .crm-communication-tab:last-child {
    margin-right: 48px;
  }
}

/* ---- How it works pictures on phones ----
   The seven step pictures are one set: the same white background and
   3:2 shape. On a phone each one runs the full width of the column,
   centred under its copy, so every step lines up the same way. */
@media (max-width: 760px) {
  .edu-page.sales-crm-softwares-page .crm-workflow-media {
    display: flex;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    align-items: center;
    justify-content: center;
    background: none;
  }

  .edu-page.sales-crm-softwares-page .crm-workflow-media img {
    width: 100%;
    height: auto;
    max-width: none;
    max-height: none;
    object-fit: contain;
  }
}