/* TrackOlap South Africa page (/en-za/field-force-management-software-south-africa).
   Built on the field force management product template
   (views/pages/field-force-management-software.ejs) with the industry-page
   hero. The header and hero sit inside a wrapper that carries the NBFC
   industry classes (`sales-crm-softwares-page finances-page nbfc-page`) plus
   `za-ffm-hero`, so finances.css and nbfc-field-force-management.css style
   them exactly as on the industry pages. The sections below the hero use
   field-force-management.css as on the product page; this file only adds
   what those sections need for the components this page switches on, all
   scoped to `.za-ffm-page` / `.za-ffm-hero`. */

/* ---- Hero ---------------------------------------------------------------- */

/* Heading and description use the NBFC hero's own sizes
   (nbfc-field-force-management.css: heading clamp(34px, 4.6vw, 68px),
   description min(17.25px, 1.168vw) on one line from 1200px up); the
   heading's three lines are balanced to NBFC's line lengths in the page
   content ("Field Force Management" / "Software for South" / "African
   Businesses"). */

/* Trust line under the email bar (same as the Construction industry hero). */
.za-ffm-hero .ffm-industry-hero-trust {
  display: flex;
  margin: 18px 0 0;
  padding: 0;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  color: var(--crm-muted, #4f5868);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  list-style: none;
}

.za-ffm-hero .ffm-industry-hero-trust li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.za-ffm-hero .ffm-industry-hero-trust svg {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: #34774f;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

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

/* Customer logos follow the light hero as on the industry pages: no 215px
   gap reserved for the product hero's overlapping image, and the hero's
   closing colour so the two merge. */
.za-ffm-page .ffm-logo-section {
  min-height: 0;
  padding-top: 24px;
  background: #f6fcf8;
}

.za-ffm-page .ffm-logo-section .company-logo-item {
  background: transparent;
}

.za-ffm-page .ffm-logo-section .company-logo-image {
  mix-blend-mode: multiply;
}

/* ---- Heading accents used by the components this page switches on ------- */

.za-ffm-page .ffm-how-title-accent,
.za-ffm-page .ffm-industries-heading-accent,
.za-ffm-page .employee-why-choose-heading-accent {
  color: var(--ffm-blue);
  background: linear-gradient(90deg, var(--ffm-blue), var(--ffm-cyan));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.za-ffm-page main .employee-why-choose-eyebrow {
  margin: 0 0 10px;
  color: var(--ffm-blue);
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  letter-spacing: 2px;
  text-align: center;
  text-transform: uppercase;
}

/* ---- Built for South Africa: "why choose" cards -------------------------- */

.za-ffm-page .employee-why-choose {
  position: relative;
  padding: 80px 0;
  overflow: hidden;
  background: #f6fcf8;
}

.za-ffm-page .employee-why-choose-container {
  width: min(90%, 1360px);
}

.za-ffm-page .employee-why-choose-heading {
  max-width: 900px;
  margin: 0 auto 48px;
  text-align: center;
}

/* Same heading scale as the template's other section headings. */
.za-ffm-page main .employee-why-choose-heading h2 {
  margin: 0;
  color: var(--ffm-ink);
  font-size: clamp(2rem, 2.604vw, 3.125rem) !important;
  font-weight: 700 !important;
  line-height: 1.16 !important;
  letter-spacing: -0.025em;
  text-align: center;
  text-wrap: balance;
}

@media (max-width: 640px) {
  .za-ffm-page main .employee-why-choose-heading h2 {
    font-size: 30px !important;
  }
}

.za-ffm-page .employee-why-choose-heading-prefix,
.za-ffm-page .employee-why-choose-heading-accent {
  display: inline;
}

.za-ffm-page .employee-why-choose-cards {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

.za-ffm-page .employee-why-choose-backdrop {
  display: none;
}

.za-ffm-page .employee-why-choose-card {
  display: flex;
  padding: 10px;
  background: #fff;
  border: 1px solid rgba(52, 119, 79, 0.12);
  border-radius: 24px;
  box-shadow: 0 8px 24px rgba(52, 119, 79, 0.08);
}

.za-ffm-page .employee-why-choose-card-inner {
  display: flex;
  width: 100%;
  padding: 24px 22px;
  background: linear-gradient(180deg, #f9fcfa 0%, #fff 100%);
  border-radius: 16px;
}

.za-ffm-page .employee-why-choose-card-content {
  width: 100%;
}

.za-ffm-page .employee-why-choose-icon {
  display: block;
  width: 56px;
  height: 56px;
  margin: 0 0 20px;
  object-fit: contain;
}

.za-ffm-page main .employee-why-choose-card h3 {
  margin: 0;
  color: #061a35;
  font-size: 21px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  text-align: left;
}

.za-ffm-page main .employee-why-choose-card p {
  margin: 12px 0 0;
  color: var(--ffm-copy);
  font-size: 16px !important;
  line-height: 1.5 !important;
  text-align: left;
}

@media (max-width: 1199px) {
  .za-ffm-page .employee-why-choose-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .za-ffm-page .employee-why-choose {
    padding: 56px 0;
  }

  .za-ffm-page .employee-why-choose-heading {
    margin-bottom: 32px;
  }

  .za-ffm-page .employee-why-choose-cards {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

/* ---- Employee tracking and data privacy (impact cards, text values) ----- */

.za-ffm-page main .ffm-impact--privacy .ffm-impact-intro {
  max-width: 900px;
  margin: 20px auto 0;
  color: var(--ffm-copy);
  font-size: 18px !important;
  line-height: 1.55 !important;
  text-align: center;
}

.za-ffm-page .ffm-impact--privacy .ffm-impact-grid {
  margin-top: 48px;
}

.za-ffm-page .ffm-impact--privacy .ffm-impact-grid--four .ffm-impact-card {
  min-height: 220px;
  padding: 32px 24px;
}

.za-ffm-page .ffm-impact--privacy .ffm-impact-card strong {
  color: var(--ffm-blue) !important;
  font-size: clamp(1.5rem, 1.9vw, 2rem);
  line-height: 1.15;
  text-wrap: balance;
}

.za-ffm-page main .ffm-impact--privacy .ffm-impact-grid--four .ffm-impact-card p {
  margin-top: 16px;
  font-size: 17px !important;
  line-height: 1.45 !important;
}

.za-ffm-page main .ffm-impact--privacy .ffm-impact-attribution {
  max-width: 820px;
  margin: 32px auto 0;
  font-size: 15px !important;
  text-align: center;
}

@media (max-width: 1100px) {
  .za-ffm-page .ffm-impact--privacy .ffm-impact-grid--four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .za-ffm-page .ffm-impact--privacy .ffm-impact-grid--four {
    grid-template-columns: 1fr;
  }

  .za-ffm-page .ffm-impact--privacy .ffm-impact-grid--four .ffm-impact-card {
    min-height: 0;
  }
}

/* ---- Plan, Track and Verify: "Smarter Employee Access" tab slider -------- */

/* Same tab-and-panel showcase as the Attendance & Leave Management page's
   "Smarter Employee Access" section (beat-planning-softwares.css), rendered
   by the template's shared selfServicePortal block and its slider script.
   Copied here scoped to this page, in this page's blue instead of that
   page's orange. */
.za-ffm-page .attendance-self-service {
  padding: 104px 0 112px;
  overflow: hidden;
  background: #fff;
}

.za-ffm-page .attendance-self-service-container {
  width: min(calc(100% - 48px), 1440px);
}

.za-ffm-page .attendance-self-service-heading {
  max-width: 1240px;
  margin: 0 auto;
  text-align: center;
}

.za-ffm-page main .attendance-self-service-eyebrow {
  margin: 0 0 12px;
  color: var(--ffm-cyan);
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.za-ffm-page main .attendance-self-service-heading h2 {
  margin: 0;
  color: #111;
  font-size: clamp(36px, 3.35vw, 50px) !important;
  font-weight: 700 !important;
  line-height: 1.12 !important;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.za-ffm-page main .attendance-self-service-title-accent {
  color: var(--ffm-cyan);
  background: linear-gradient(90deg, var(--ffm-blue), var(--ffm-cyan));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media (min-width: 992px) {
  .za-ffm-page main .attendance-self-service-heading h2 {
    white-space: nowrap;
  }
}

.za-ffm-page main .attendance-self-service-intro {
  max-width: 100%;
  margin: 18px auto 0;
  color: #50695a;
  font-size: 18px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  text-align: center;
  text-wrap: balance;
}

.za-ffm-page .attendance-self-service-tabs {
  position: relative;
  display: flex;
  width: max-content;
  max-width: min(100%, 1240px);
  margin: 38px auto 0;
  padding: 0 12px;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 0;
  overflow-x: auto;
  scroll-padding-inline: 12px;
  scroll-snap-type: x proximity;
  background: #f3faf6;
  border-radius: 12px;
  scrollbar-width: none;
}

.za-ffm-page .attendance-self-service-tabs::-webkit-scrollbar {
  display: none;
}

.za-ffm-page .attendance-self-service-tab {
  position: relative;
  flex: 0 0 auto;
  min-height: 58px;
  padding: 17px 20px 15px;
  overflow: hidden;
  color: #1c2f24;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  scroll-snap-align: center;
  cursor: pointer;
  transition: color 180ms ease;
}

.za-ffm-page .attendance-self-service-tab + .attendance-self-service-tab {
  border-left: 1px solid rgba(52, 119, 79, 0.14);
}

.za-ffm-page .attendance-self-service-tab::before {
  display: block;
  height: 0;
  overflow: hidden;
  font-weight: 700;
  content: attr(data-label);
  visibility: hidden;
}

.za-ffm-page .attendance-self-service-tab.is-active {
  color: #111;
  background: transparent;
  font-weight: 700;
}

.za-ffm-page .attendance-self-service-tab.is-active::after {
  position: absolute;
  right: 20px;
  bottom: 0;
  left: 20px;
  height: 3px;
  background: linear-gradient(90deg, var(--ffm-blue), var(--ffm-cyan));
  border-radius: 999px;
  content: "";
  transform: scaleX(1);
  transform-origin: left center;
}

.za-ffm-page .attendance-self-service-tab:focus-visible {
  outline: 3px solid rgba(52, 119, 79, 0.3);
  outline-offset: 3px;
}

@media (hover: hover) {
  .za-ffm-page .attendance-self-service-tab:not(.is-active):hover {
    color: #254e35;
    background: transparent;
  }
}

.za-ffm-page .attendance-self-service-panels {
  --attendance-slider-gap: 32px;
  display: grid;
  position: relative;
  margin-top: 44px;
  isolation: isolate;
}

.za-ffm-page .attendance-self-service-panel {
  display: grid;
  width: min(100%, 900px);
  min-height: 370px;
  align-self: start;
  grid-area: 1 / 1;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  justify-self: center;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  background: #f9fcfa;
  border: 1px solid rgba(52, 119, 79, 0.14);
  border-radius: 20px;
  box-shadow: 0 22px 55px rgba(37, 78, 53, 0.12);
  pointer-events: none;
  transform: translateX(calc(200% + (var(--attendance-slider-gap) * 2))) scale(0.9);
  transform-origin: center;
  transition: transform 560ms cubic-bezier(0.22, 1, 0.36, 1), opacity 280ms ease;
  will-change: transform, opacity;
}

.za-ffm-page .attendance-self-service-panel.is-before {
  transform: translateX(calc(-200% - (var(--attendance-slider-gap) * 2))) scale(0.9);
}

.za-ffm-page .attendance-self-service-panel.is-after {
  transform: translateX(calc(200% + (var(--attendance-slider-gap) * 2))) scale(0.9);
}

.za-ffm-page .attendance-self-service-panel.is-previous,
.za-ffm-page .attendance-self-service-panel.is-next {
  z-index: 1;
  visibility: visible;
  opacity: 0.82;
}

.za-ffm-page .attendance-self-service-panel.is-previous {
  transform: translateX(calc(-100% - var(--attendance-slider-gap))) scale(0.9);
}

.za-ffm-page .attendance-self-service-panel.is-next {
  transform: translateX(calc(100% + var(--attendance-slider-gap))) scale(0.9);
}

.za-ffm-page .attendance-self-service-panel.is-active {
  z-index: 2;
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .za-ffm-page .attendance-self-service-panel {
    transition: none;
  }
}

.za-ffm-page .attendance-self-service-copy {
  display: flex;
  padding: 44px 32px 44px 48px;
  justify-content: center;
  flex-direction: column;
}

.za-ffm-page main .attendance-self-service-copy h3 {
  margin: 0;
  color: #111;
  font-size: clamp(28px, 2.2vw, 34px) !important;
  font-weight: 700 !important;
  line-height: 1.16 !important;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.za-ffm-page main .attendance-self-service-copy p {
  margin: 20px 0 0;
  color: #50695a;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
}

.za-ffm-page .attendance-self-service-visual {
  display: flex;
  min-height: 370px;
  padding: 28px;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 76% 20%, rgba(52, 119, 79, 0.18), transparent 35%),
    linear-gradient(145deg, #ecf7f0 0%, #f5fbf7 52%, #fff 100%);
}

.za-ffm-page .attendance-self-service-visual img {
  display: block;
  width: min(100%, 480px);
  max-width: 100%;
  max-height: 300px;
  object-fit: contain;
  filter: drop-shadow(0 18px 26px rgba(37, 78, 53, 0.12));
}

@media (min-width: 992px) {
  .za-ffm-page main .attendance-self-service-intro {
    white-space: nowrap;
  }

  .za-ffm-page .attendance-self-service-visual {
    min-height: 0;
    padding: 0;
  }

  .za-ffm-page .attendance-self-service-visual img {
    width: 100%;
    height: auto;
    max-width: none;
    max-height: none;
    object-fit: contain;
  }
}

@media (min-width: 1280px) {
  .za-ffm-page .attendance-self-service-tabs {
    display: flex;
    width: 100%;
    max-width: 1240px;
    overflow-x: auto;
  }

  .za-ffm-page .attendance-self-service-tab {
    width: auto;
    flex: 1 0 auto;
    padding-right: 10px;
    padding-left: 10px;
    text-align: center;
  }

  .za-ffm-page .attendance-self-service-tab.is-active::after {
    right: 10px;
    left: 10px;
  }
}

@media (max-width: 991px) {
  .za-ffm-page .attendance-self-service {
    padding: 82px 0 88px;
  }

  .za-ffm-page .attendance-self-service-panel {
    width: 86%;
    min-height: 0;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(300px, auto) auto;
  }

  .za-ffm-page .attendance-self-service-panels {
    --attendance-slider-gap: 14px;
  }

  .za-ffm-page .attendance-self-service-panel.is-previous {
    transform: translateX(calc(-100% - var(--attendance-slider-gap))) scale(0.96);
  }

  .za-ffm-page .attendance-self-service-panel.is-next {
    transform: translateX(calc(100% + var(--attendance-slider-gap))) scale(0.96);
  }

  .za-ffm-page .attendance-self-service-copy {
    min-height: 300px;
    padding: 46px 42px 36px;
    text-align: center;
  }

  .za-ffm-page .attendance-self-service-visual {
    min-height: 0;
    padding: 0;
  }

  .za-ffm-page .attendance-self-service-visual img {
    width: 100%;
    max-height: none;
  }

}

@media (max-width: 640px) {
  .za-ffm-page .attendance-self-service {
    padding: 66px 0 72px;
  }

  .za-ffm-page .attendance-self-service-container {
    width: calc(100% - 32px);
  }

  .za-ffm-page main .attendance-self-service-heading h2 {
    font-size: 32px !important;
  }

  .za-ffm-page main .attendance-self-service-intro {
    margin-top: 14px;
    font-size: 16px !important;
  }

  .za-ffm-page .attendance-self-service-tabs {
    margin-top: 28px;
    justify-content: flex-start;
    padding: 0 8px;
  }

  .za-ffm-page .attendance-self-service-tab {
    min-height: 50px;
    padding: 14px 15px 12px;
    font-size: 13px;
  }

  .za-ffm-page .attendance-self-service-tab.is-active::after {
    right: 15px;
    left: 15px;
  }

  .za-ffm-page .attendance-self-service-panels {
    margin-top: 26px;
  }

  .za-ffm-page .attendance-self-service-panel {
    width: calc(100% - 40px);
    min-height: 0;
    border-radius: 20px;
    grid-template-rows: minmax(300px, auto) auto;
  }

  .za-ffm-page .attendance-self-service-panels {
    --attendance-slider-gap: 8px;
  }

  .za-ffm-page .attendance-self-service-panel.is-previous {
    transform: translateX(calc(-100% - var(--attendance-slider-gap))) scale(0.97);
  }

  .za-ffm-page .attendance-self-service-panel.is-next {
    transform: translateX(calc(100% + var(--attendance-slider-gap))) scale(0.97);
  }

  .za-ffm-page .attendance-self-service-copy {
    min-height: 300px;
    padding: 36px 24px 28px;
  }

  .za-ffm-page main .attendance-self-service-copy h3 {
    font-size: 28px !important;
  }

  .za-ffm-page main .attendance-self-service-copy p {
    margin-top: 16px;
    font-size: 16px !important;
  }

  .za-ffm-page .attendance-self-service-visual {
    min-height: 0;
    padding: 0;
  }

  .za-ffm-page .attendance-self-service-visual img {
    width: 100%;
    max-height: none;
  }

}


/* This page's intro is longer than the Attendance page's one-line intro, so
   it wraps in balanced lines under the heading instead of running wide. */
@media (min-width: 992px) {
  .za-ffm-page main .attendance-self-service-intro {
    max-width: 900px;
    white-space: normal;
  }
}

/* ==== NBFC industry theme, section by section =============================
   The sections below the hero take the NBFC industry page's colours
   (nbfc-field-force-management.css / finances.css): brand blue #34774f,
   accent blue #34774f for highlighted heading words (solid, no gradient),
   ink #0b1530, muted copy #4f5868, the NBFC orange #f56d25 as the second
   colour, and the NBFC section backgrounds in an alternating sequence:
   Logos (hero glow) > What Is TrackOlap (answer wash) > Plan, Track and
   Verify (white with corner glows) > How It Works (deep glow) > Built for
   South Africa (light glow) > demo band (NBFC blue form band) > Industries
   (light glow) > Data Privacy (deep glow) > Features (white with corner
   glows) > Get Started (NBFC get-started blue) > FAQ (white) > footer (NBFC
   deep blue). A hairline separates the light sections, as on NBFC. */

.za-ffm-page {
  --ffm-blue: #34774f;
  --ffm-cyan: #34774f;
  --ffm-orange: #f56d25;
  --ffm-navy: #1f4a31;
  --ffm-ink: #0b1530;
  --ffm-copy: #4f5868;
  --ffm-pale: #f6fcf8;
  --ffm-row: #f9fcfa;
  --ffm-row-alt: #f1f9f4;
  --ffm-border: #e4ede8;
  --za-accent: #34774f;
  --za-light-glow:
    radial-gradient(ellipse 48% 62% at 50% 0%, rgba(168, 212, 186, 0.38) 0%, rgba(214, 238, 223, 0.18) 50%, rgba(214, 238, 223, 0) 100%),
    linear-gradient(180deg, #f1f9f4 0%, #f6fcf8 45%);
  --za-deep-glow:
    radial-gradient(ellipse 66% 95% at 50% 0%, rgba(168, 212, 186, 0.36) 0%, rgba(214, 238, 223, 0.18) 50%, rgba(214, 238, 223, 0) 100%),
    linear-gradient(180deg, #eff9f3 0%, #f6fcf8 100%);
  --za-corner-glow:
    radial-gradient(circle at 0% 55%, rgba(255, 170, 130, 0.16), transparent 38%),
    radial-gradient(circle at 100% 55%, rgba(82, 139, 105, 0.13), transparent 38%),
    #fff;
}

/* Highlighted heading words: the NBFC accent blue, solid. */
.za-ffm-page main .ffm-heading-accent,
.za-ffm-page main .ffm-how-title-accent,
.za-ffm-page main .ffm-industries-heading-accent,
.za-ffm-page main .employee-why-choose-heading-accent,
.za-ffm-page main .attendance-self-service-title-accent,
.za-ffm-page main .ffm-how .ffm-section-heading p span {
  color: var(--za-accent) !important;
  background: none !important;
  -webkit-text-fill-color: var(--za-accent) !important;
}

.za-ffm-page main .ffm-how .ffm-section-heading p span::after {
  background: var(--za-accent);
}

.za-ffm-page main .attendance-self-service-eyebrow,
.za-ffm-page main .employee-why-choose-eyebrow {
  color: var(--ffm-blue);
}

/* Hairline between content sections (NBFC). */
.za-ffm-page main > section:not(.ffm-logo-section):not(.ffm-mid-cta) {
  border-top: 1px solid rgba(11, 21, 48, 0.07);
}

/* What Is TrackOlap: the NBFC Quick Answer wash. */
.za-ffm-page .ffm-challenge {
  background:
    radial-gradient(ellipse 55% 80% at 0% 50%, rgba(212, 237, 222, 0.55) 0%, rgba(212, 237, 222, 0) 100%),
    linear-gradient(180deg, #f3faf6 0%, #f9fdfb 100%);
}

.za-ffm-page .ffm-challenge-list li::marker,
.za-ffm-page .ffm-challenge-list li::before {
  color: var(--ffm-blue);
}

/* Plan, Track and Verify: white with the NBFC corner glows. */
.za-ffm-page .attendance-self-service {
  background: var(--za-corner-glow);
}

/* Built for South Africa: NBFC light glow. */
.za-ffm-page .employee-why-choose {
  background: var(--za-light-glow);
}

/* How It Works: one continuous section. The template paints each step row
   its own colour (#f8fbf9 / #eff6f2), which split the heading band from
   the steps; here the rows are transparent and the whole section carries
   the NBFC How It Works background (crm-workflow): the blue glow behind
   the heading, fading into one even pale blue under every step. */
.za-ffm-page .ffm-how {
  background:
    radial-gradient(ellipse 48% 620px at 50% 0%, rgba(168, 212, 186, 0.38) 0%, rgba(214, 238, 223, 0.18) 50%, rgba(214, 238, 223, 0) 100%) top center / 100% 1100px no-repeat,
    linear-gradient(180deg, #f1f9f4 0, #f6fcf8 500px) top center / 100% 1100px no-repeat,
    #f6fcf8;
}

.za-ffm-page .ffm-how-row,
.za-ffm-page .ffm-how-row:nth-child(odd),
.za-ffm-page .ffm-how-row:nth-child(even) {
  background: transparent;
}

.za-ffm-page main .ffm-how-copy > .ffm-how-eyebrow {
  color: var(--ffm-orange);
}

/* Demo band: the NBFC blue form band. */
.za-ffm-page .ffm-mid-cta {
  background:
    radial-gradient(circle at 12% 20%, rgba(255, 255, 255, 0.12), transparent 34%),
    linear-gradient(120deg, #2b6342 0%, #34774f 55%, #528b69 100%);
}

.za-ffm-page .ffm-mid-cta .ffm-button-light {
  color: #34774f !important;
  background: #fff !important;
  border-color: #fff !important;
}

.za-ffm-page .ffm-mid-cta .ffm-button-light:hover {
  color: #34774f !important;
  background: #f3faf6 !important;
}

/* Industries: NBFC light glow. */
.za-ffm-page .ffm-industries {
  background: var(--za-light-glow);
}

/* Data Privacy: NBFC deep glow, accent-blue values. */
.za-ffm-page .ffm-impact {
  background: var(--za-deep-glow);
}

.za-ffm-page .ffm-impact-card {
  border: 1px solid rgba(52, 119, 79, 0.12);
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(52, 119, 79, 0.08);
}

.za-ffm-page .ffm-impact--privacy .ffm-impact-card strong {
  color: var(--za-accent) !important;
}

/* Features: white with corner glows; cards in the NBFC blue. */
.za-ffm-page .ffm-features {
  background: var(--za-corner-glow);
}

.za-ffm-page .ffm-feature-card {
  background:
    radial-gradient(circle at 12% 20%, rgba(255, 255, 255, 0.12), transparent 34%),
    linear-gradient(140deg, #2b6342 0%, #34774f 60%, #528b69 100%);
  box-shadow: 0 16px 36px rgba(52, 119, 79, 0.2);
}

/* "View All Features": the page's NBFC button colour (solid brand blue,
   white label, deeper accent blue on hover), as the other buttons here,
   instead of the template's cyan-to-blue gradient. */
.za-ffm-page .ffm-view-all {
  color: #fff !important;
  background: #34774f;
  border: 1px solid #34774f;
  box-shadow: 0 8px 22px rgba(52, 119, 79, 0.24);
  font-weight: 700;
}

.za-ffm-page .ffm-view-all:hover,
.za-ffm-page .ffm-view-all:focus-visible {
  color: #fff !important;
  background: #34774f;
  border-color: #34774f;
  box-shadow: 0 12px 26px rgba(52, 119, 79, 0.3);
}

/* Get Started: NBFC get-started blue; card titles in the NBFC blues. */
.za-ffm-page .ffm-final-cta {
  background: linear-gradient(180deg, #d0ecdb 0%, #ddf1e5 55%, #e7f5ed 100%);
}

.za-ffm-page .ffm-final-card {
  border-radius: 16px;
  box-shadow: 0 14px 34px rgba(52, 119, 79, 0.12);
}

.za-ffm-page main .ffm-final-cta .ffm-final-card h3,
.za-ffm-page main .ffm-final-cta .ffm-final-card:nth-child(3) h3 {
  color: #34774f;
}

.za-ffm-page main .ffm-final-cta .ffm-final-card:nth-child(2) h3 {
  color: var(--ffm-orange);
}

.za-ffm-page main .ffm-final-cta .ffm-final-card p {
  color: var(--ffm-copy);
}

/* FAQ: white, open question in the NBFC accent blue. */
.za-ffm-page .ffm-faq {
  background: #fff;
}

.za-ffm-page .ffm-faq-accordion .accordion-button:not(.collapsed) {
  color: var(--za-accent);
}

/* Footer: the NBFC deep-blue footer with its 14px grid texture. */
body.za-ffm-page .website-footer {
  background:
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px) center top / 14px 14px repeat,
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px) center top / 14px 14px repeat,
    radial-gradient(ellipse 45% 70% at 0% 100%, rgba(82, 139, 105, 0.55) 0%, rgba(82, 139, 105, 0) 100%),
    radial-gradient(ellipse 45% 70% at 100% 100%, rgba(82, 139, 105, 0.55) 0%, rgba(82, 139, 105, 0) 100%),
    linear-gradient(180deg, #1a3f2a 0%, #1f4a31 100%);
}

body.za-ffm-page .website-footer .copyright-strip {
  background: rgba(24, 54, 36, 0.72);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

body.za-ffm-page .website-footer .copyright-strip .icons img,
body.za-ffm-page .website-footer .web-footer-menu-items > img {
  filter: brightness(0) invert(1);
}

@media (max-width: 770px) {
  body.za-ffm-page .website-footer .website-footer-layout .accordion-item,
  body.za-ffm-page .website-footer .website-footer-layout .accordion-button,
  body.za-ffm-page .website-footer .website-footer-layout .accordion-button.collapsed,
  body.za-ffm-page .website-footer .website-footer-layout .accordion-button:not(.collapsed),
  body.za-ffm-page .website-footer .website-footer-layout .accordion-body {
    background: transparent !important;
  }
}

/* ---- Industries: the Attendance & Leave Management page's industry section

   Same "reference" industry layout as the Attendance & Leave Management page
   (industriesLayout: "reference" in the template's shared industries
   partial and slider script): equal portrait image cards in a horizontal
   scroller that open on hover, focus or tap to show the title and
   description, with the round blue arrow buttons. Copied from
   beat-planning-softwares.css (the Beat Planning reference layout plus the
   Attendance page's adjustments), scoped to this page, with that page's
   orange accent in this page's NBFC blue. */
.za-ffm-page .ffm-industries {
  background: #f8fcfa;
}

/* Industries reference layout: equal portrait cards with a simple horizontal
   scroller. Only local TrackOlap assets are used. */
.za-ffm-page .ffm-industries--reference {
  position: relative;
  min-height: 0;
  padding: 120px 0;
  overflow: hidden;
  background: #f8fcfa;
}

.za-ffm-page .ffm-industries--reference > .ffm-container {
  position: relative;
  top: auto;
  width: 100%;
  max-width: none;
  padding: 0;
  overflow: visible;
}

.za-ffm-page .ffm-industries--reference .ffm-section-heading {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px 60px;
}

.za-ffm-page .ffm-industries--reference .ffm-section-heading p {
  max-width: 760px;
  margin-inline: auto;
  font-size: 20px !important;
  line-height: 1.7 !important;
}

.za-ffm-page main .ffm-industries--reference .ffm-section-heading h2 {
  font-size: 52px !important;
  line-height: 1.12 !important;
  white-space: nowrap;
}

.za-ffm-page main .ffm-industries--reference .ffm-industries-heading-accent {
  color: #34774f;
  background: linear-gradient(90deg, #34774f, #34774f);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.za-ffm-page .ffm-industry-shell--reference {
  position: relative;
  width: 100%;
  padding-inline: 62px;
}

.za-ffm-page .ffm-industry-track--reference {
  display: flex;
  width: 100%;
  padding: 0 0 18px;
  align-items: flex-start;
  grid-auto-flow: unset;
  gap: 30px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-behavior: smooth;
  scroll-snap-type: inline mandatory;
  scrollbar-width: none;
}

.za-ffm-page .ffm-industry-track--reference::-webkit-scrollbar {
  display: none;
}

.za-ffm-page .ffm-industry-track--reference .ffm-industry-card--reference {
  position: relative;
  display: block;
  width: 305px;
  min-width: 305px;
  height: 405px;
  min-height: 405px;
  flex: 0 0 305px;
  overflow: hidden;
  color: #000;
  background: transparent;
  border: 0;
  border-radius: 14px;
  box-shadow: none;
  scroll-snap-align: start;
  cursor: pointer;
}

.za-ffm-page .ffm-industry-shell--reference .ffm-slider-button {
  top: 50%;
  width: 46px;
  height: 46px;
  color: #fff;
  background: #34774f;
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow: 0 8px 22px rgba(11, 21, 48, 0.2);
}

.za-ffm-page .ffm-industry-shell--reference .ffm-slider-button span {
  margin-top: -3px;
  font-size: 40px;
}

.za-ffm-page .ffm-industry-shell--reference .ffm-slider-prev {
  left: 8px;
}

.za-ffm-page .ffm-industry-shell--reference .ffm-slider-next {
  right: 8px;
}

.za-ffm-page .ffm-industry-track--reference .ffm-industry-card--reference::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.88));
  border-radius: 14px;
  content: "";
  pointer-events: none;
}

.za-ffm-page .ffm-industry-track--reference .ffm-industry-card-image-frame {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 405px;
  margin: 0;
  background: #f8fbf9;
  border-radius: 14px;
}

.za-ffm-page .ffm-industry-track--reference .ffm-industry-card-image-frame > img {
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  padding: 0;
  object-fit: cover;
  border-radius: 14px;
}

.za-ffm-page .ffm-industry-track--reference .ffm-industry-collapsed-title {
  position: absolute;
  z-index: 2;
  inset: auto 0 0;
  display: block;
  width: 100%;
  min-height: 0;
  padding: 0 30px 35px;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
  text-shadow: none;
  writing-mode: horizontal-tb;
  transform: none;
  transition: opacity 100ms linear;
}

.za-ffm-page .ffm-industry-track--reference .ffm-industry-card-body {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 25px;
  align-items: stretch;
  justify-content: center;
  overflow: hidden;
  color: #000;
  background: #fff;
  border-radius: 14px;
  opacity: 1;
  transform: perspective(305px) translate(15%, 55%) scale(0.5) rotate(46deg);
  transform-origin: bottom right;
  pointer-events: none;
  transition: transform 300ms ease;
}

.za-ffm-page main .ffm-industry-track--reference .ffm-industry-card h3 {
  min-height: 0;
  margin: 0 0 20px;
  color: #000;
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-align: left;
}

.za-ffm-page main .ffm-industry-track--reference .ffm-industry-card p {
  display: block;
  min-height: 0;
  margin: 0;
  overflow: visible;
  color: #000;
  font-size: 20px !important;
  line-height: 1.7 !important;
  text-align: left;
}

.za-ffm-page .ffm-industry-track--reference .ffm-industry-capabilities {
  display: none;
}

.za-ffm-page .ffm-industry-track--reference .ffm-industry-card-body::after {
  display: inline-flex;
  margin-top: auto;
  align-items: center;
  align-self: flex-start;
  color: #528b69;
  content: "Learn More  \2192";
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 180ms ease 120ms, transform 180ms ease 120ms;
}

.za-ffm-page .ffm-industry-track--reference .ffm-industry-card--reference:hover .ffm-industry-collapsed-title,
.za-ffm-page .ffm-industry-track--reference .ffm-industry-card--reference:focus-visible .ffm-industry-collapsed-title,
.za-ffm-page .ffm-industry-track--reference .ffm-industry-card--reference.is-active .ffm-industry-collapsed-title {
  opacity: 0;
}

.za-ffm-page .ffm-industry-track--reference .ffm-industry-card--reference:hover .ffm-industry-card-body,
.za-ffm-page .ffm-industry-track--reference .ffm-industry-card--reference:focus-visible .ffm-industry-card-body,
.za-ffm-page .ffm-industry-track--reference .ffm-industry-card--reference.is-active .ffm-industry-card-body {
  transform: none;
}

.za-ffm-page .ffm-industry-track--reference .ffm-industry-card--reference:hover .ffm-industry-card-body::after,
.za-ffm-page .ffm-industry-track--reference .ffm-industry-card--reference:focus-visible .ffm-industry-card-body::after,
.za-ffm-page .ffm-industry-track--reference .ffm-industry-card--reference.is-active .ffm-industry-card-body::after {
  opacity: 1;
  transform: none;
}

.za-ffm-page .ffm-industry-track--reference .ffm-industry-card--reference:focus-visible {
  outline: 3px solid #34774f;
  outline-offset: -4px;
}

@media (max-width: 1180px) {
  .za-ffm-page .ffm-industries--reference {
    min-height: 0 !important;
    padding: 120px 0;
    overflow: hidden;
  }

  .za-ffm-page .ffm-industries--reference > .ffm-container {
    position: relative;
    top: auto;
    padding: 0;
    overflow: visible;
  }

  .za-ffm-page .ffm-industries--reference .ffm-section-heading {
    padding-bottom: 48px;
  }

  .za-ffm-page .ffm-industry-shell--reference {
    max-width: 90%;
    margin: 0 auto;
    padding-inline: 54px;
  }

  .za-ffm-page .ffm-industry-track--reference {
    width: 100%;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
  }
}

@media (max-width: 1280px) {
  .za-ffm-page main .ffm-industries--reference .ffm-section-heading h2 {
    font-size: 44px !important;
  }
}

@media (max-width: 992px) {
  .za-ffm-page .ffm-industries--reference {
    padding: 60px 0;
  }

  .za-ffm-page .ffm-industries--reference .ffm-section-heading {
    padding-bottom: 40px;
  }

  .za-ffm-page main .ffm-industries--reference .ffm-section-heading h2 {
    font-size: 36px !important;
  }

  .za-ffm-page .ffm-industries--reference .ffm-section-heading p {
    font-size: 18px !important;
  }

  .za-ffm-page main .ffm-industry-track--reference .ffm-industry-card h3 {
    font-size: 22px !important;
  }

  .za-ffm-page main .ffm-industry-track--reference .ffm-industry-card p {
    font-size: 18px !important;
  }

  .za-ffm-page .ffm-industry-track--reference .ffm-industry-collapsed-title {
    font-size: 22px;
  }
}

@media (max-width: 768px) {
  .za-ffm-page .ffm-mid-cta {
    padding: 48px 18px 44px;
  }

  .za-ffm-page .ffm-mid-cta .ffm-button-light {
    min-width: 190px;
    min-height: 44px;
    padding: 8px 16px;
    font-size: 15px !important;
  }

  .za-ffm-page main .ffm-industries--reference .ffm-section-heading h2 {
    font-size: 30px !important;
    white-space: normal;
  }

  .za-ffm-page .ffm-industry-shell--reference {
    max-width: calc(100% - 32px);
    padding: 0 0 58px;
  }

  .za-ffm-page .ffm-industry-track--reference {
    gap: 24px;
  }

  .za-ffm-page .ffm-industry-track--reference .ffm-industry-card--reference {
    width: min(305px, 100%);
    max-width: 100%;
    min-width: 0;
    flex-basis: min(305px, 100%);
  }

  .za-ffm-page .ffm-industry-shell--reference .ffm-slider-button {
    top: auto;
    bottom: 0;
  }

  .za-ffm-page .ffm-industry-shell--reference .ffm-slider-prev {
    left: calc(50% - 52px);
  }

  .za-ffm-page .ffm-industry-shell--reference .ffm-slider-next {
    right: calc(50% - 52px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .za-ffm-page .ffm-industries--reference {
    min-height: 0 !important;
    padding: 120px 0;
    overflow: hidden;
  }

  .za-ffm-page .ffm-industries--reference > .ffm-container {
    position: relative;
    top: auto;
    padding: 0;
    overflow: visible;
  }

  .za-ffm-page .ffm-industry-shell--reference {
    max-width: 90%;
    margin: 0 auto;
  }

  .za-ffm-page .ffm-industry-track--reference {
    width: 100%;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scroll-behavior: auto;
  }
}

@media (max-width: 992px) and (prefers-reduced-motion: reduce) {
  .za-ffm-page .ffm-industries--reference {
    padding: 60px 0;
  }
}

/* Keep a deliberate visual pause between Industries and Customer Stories. */
.za-ffm-page .ffm-industries--reference {
  padding-bottom: 64px;
}

@media (max-width: 768px) {
  .za-ffm-page .ffm-industries--reference {
    padding-bottom: 40px;
  }
}

/* Attendance preview reuses the complete Sales CRM industries presentation. */
.za-ffm-page .ffm-industries--reference .ffm-section-heading {
  width: min(calc(100% - 48px), 1720px);
  max-width: none;
  padding: 0 0 60px;
}

.za-ffm-page main .ffm-industries--reference .ffm-section-heading h2 {
  white-space: normal;
  text-wrap: balance;
}

.za-ffm-page .ffm-industries--reference .ffm-section-heading p {
  width: 100%;
  max-width: none;
  margin: 20px auto 0;
  text-align: center;
}

.za-ffm-page main .ffm-industries--reference .ffm-industries-heading-accent {
  color: #34774f;
  background: linear-gradient(90deg, #34774f, #34774f);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.za-ffm-page .ffm-industry-shell--reference .ffm-slider-button {
  background: #34774f;
  box-shadow: 0 8px 22px rgba(52, 119, 79, 0.24);
}

.za-ffm-page .ffm-industry-track--reference .ffm-industry-card--reference:focus-visible {
  outline-color: #34774f;
}

.za-ffm-page .ffm-industry-track--reference .ffm-industry-card-body {
  justify-content: flex-start;
}

.za-ffm-page .ffm-industry-track--reference .ffm-industry-card--static .ffm-industry-card-body::after {
  display: none;
}

@media (hover: hover) {
  .za-ffm-page .ffm-industry-shell--reference .ffm-slider-button:hover {
    background: #254e35;
    border-color: #254e35;
  }
}

@media (min-width: 1200px) {
  .za-ffm-page main .ffm-industries--reference .ffm-section-heading h2 {
    font-size: clamp(30px, 2.5vw, 44px) !important;
    white-space: nowrap;
  }

  .za-ffm-page .ffm-industries--reference .ffm-section-heading p {
    font-size: clamp(16px, 1.3vw, 20px) !important;
    white-space: nowrap;
  }
}

@media (max-width: 700px) {
  .za-ffm-page .ffm-industries--reference .ffm-section-heading {
    padding: 0 18px 40px;
  }

  .za-ffm-page main .ffm-industries--reference .ffm-section-heading h2 {
    font-size: 30px !important;
    white-space: normal;
  }

  .za-ffm-page .ffm-industries--reference .ffm-section-heading p {
    font-size: 18px !important;
  }
}

/* Keep the NBFC light glow behind this section and the heading accent in
   the NBFC accent blue, solid (the copied rules above set a flat fill and
   a gradient accent). */
.za-ffm-page .ffm-industries.ffm-industries--reference {
  background: var(--za-light-glow);
}

.za-ffm-page main .ffm-industries.ffm-industries--reference .ffm-industries-heading-accent {
  color: var(--za-accent) !important;
  background: none !important;
  -webkit-text-fill-color: var(--za-accent) !important;
}

/* ---- Heading texture on every section ------------------------------------

   The NBFC hero's 14px grid texture behind every section headline, as the
   Finance / NBFC pages draw it behind their section headings
   (finances.css "Same heading grid texture on ..." with the NBFC 14px
   tile): faint brand-blue lines from above the heading down past the
   intro, fading out at the sides and at the bottom, behind the text only.
   Centred headings get a centred 1000px panel; the left-aligned "What Is
   TrackOlap" heading gets a panel anchored to its left edge; the blue demo
   band gets the same grid in faint white. */
.za-ffm-page main :is(
  .attendance-self-service-heading,
  .ffm-how > .ffm-section-heading,
  .employee-why-choose-heading,
  .ffm-industries .ffm-section-heading,
  .ffm-features .ffm-section-heading,
  .ffm-impact h2,
  .ffm-final-cta > .ffm-container > h2,
  .ffm-faq h2,
  .ffm-challenge-copy h2,
  .ffm-mid-cta h2
) {
  position: relative;
  isolation: isolate;
}

.za-ffm-page main :is(
  .attendance-self-service-heading,
  .ffm-how > .ffm-section-heading,
  .employee-why-choose-heading,
  .ffm-industries .ffm-section-heading,
  .ffm-features .ffm-section-heading,
  .ffm-impact h2,
  .ffm-final-cta > .ffm-container > h2,
  .ffm-faq h2,
  .ffm-challenge-copy h2,
  .ffm-mid-cta h2
)::before {
  position: absolute;
  z-index: -1;
  top: -72px;
  bottom: -24px;
  left: 50%;
  width: min(1000px, 100vw);
  background-image:
    linear-gradient(rgba(52, 119, 79, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(52, 119, 79, 0.06) 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;
}

/* Headings that sit alone (no wrapper around heading + intro): the panel
   reaches down behind the intro line under them. */
.za-ffm-page main :is(.ffm-impact h2, .ffm-final-cta > .ffm-container > h2)::before {
  bottom: -88px;
}

/* Left-aligned heading: panel starts at the copy column's left edge and
   fades out towards the right only. */
.za-ffm-page main .ffm-challenge-copy h2::before {
  left: -40px;
  width: min(760px, 100%);
  transform: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 100%),
    linear-gradient(90deg, transparent 0%, #000 8%, #000 70%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 100%),
    linear-gradient(90deg, transparent 0%, #000 8%, #000 70%, transparent 100%);
}

/* Blue demo band: the same grid in faint white. */
.za-ffm-page main .ffm-mid-cta h2::before {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
}

@media (max-width: 900px) {
  .za-ffm-page main :is(
    .attendance-self-service-heading,
    .ffm-how > .ffm-section-heading,
    .employee-why-choose-heading,
    .ffm-industries .ffm-section-heading,
    .ffm-features .ffm-section-heading,
    .ffm-impact h2,
    .ffm-final-cta > .ffm-container > h2,
    .ffm-faq h2,
    .ffm-challenge-copy h2,
    .ffm-mid-cta h2
  )::before {
    top: -48px;
    width: 92vw;
  }
}

/* ---- Hero heading background on every section heading --------------------

   Every section heading now sits on the same background as the hero
   heading (finances.css "Hero backdrop" + nbfc-field-force-management.css
   "Hero texture ends with the heading"):
   1. the soft top-centre blue glow, drawn at the top of each section
      (over the section's own NBFC background), and
   2. the 14px brand-blue grid, drawn from the section's top edge down to
      the bottom of the heading block, min(760px, 52vw) wide, fading out at
      the sides and just below the heading, exactly like the hero.
   Sections clip vertically so the grid stops at their top edge. The
   left-aligned "What Is TrackOlap" heading gets the glow and grid over its
   own column; the blue demo band keeps its faint white grid. */
.za-ffm-page {
  --za-hero-glow: radial-gradient(ellipse 46% 560px at 50% 0%, rgba(168, 212, 186, 0.42) 0%, rgba(214, 238, 223, 0.2) 50%, rgba(214, 238, 223, 0) 100%);
}

.za-ffm-page main :is(
  .ffm-challenge,
  .attendance-self-service,
  .ffm-how,
  .employee-why-choose,
  .ffm-industries,
  .ffm-impact,
  .ffm-features,
  .ffm-final-cta,
  .ffm-faq
) {
  position: relative;
  overflow-y: clip;
}

/* 1. Top-centre glow over each section's NBFC background. */
.za-ffm-page main .ffm-challenge {
  background:
    radial-gradient(ellipse 42% 560px at 26% 0%, rgba(168, 212, 186, 0.4) 0%, rgba(214, 238, 223, 0.18) 50%, rgba(214, 238, 223, 0) 100%),
    radial-gradient(ellipse 55% 80% at 0% 50%, rgba(212, 237, 222, 0.55) 0%, rgba(212, 237, 222, 0) 100%),
    linear-gradient(180deg, #f3faf6 0%, #f9fdfb 100%);
}

.za-ffm-page main .attendance-self-service,
.za-ffm-page main .ffm-features {
  background: var(--za-hero-glow), var(--za-corner-glow);
}

.za-ffm-page main .employee-why-choose,
.za-ffm-page main .ffm-industries.ffm-industries--reference,
.za-ffm-page main .ffm-industries {
  background: var(--za-hero-glow), var(--za-light-glow);
}

.za-ffm-page main .ffm-impact {
  background: var(--za-hero-glow), var(--za-deep-glow);
}

.za-ffm-page main .ffm-final-cta {
  background:
    radial-gradient(ellipse 34% 560px at 50% 0%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.2) 45%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(180deg, #d0ecdb 0%, #ddf1e5 55%, #e7f5ed 100%);
}

.za-ffm-page main .ffm-faq {
  background: var(--za-hero-glow), linear-gradient(180deg, #f5faf7 0, #fff 520px);
}

/* 2. The hero grid behind each heading, from the section top down. */
.za-ffm-page main :is(
  .attendance-self-service-heading,
  .ffm-how > .ffm-section-heading,
  .employee-why-choose-heading,
  .ffm-industries .ffm-section-heading,
  .ffm-features .ffm-section-heading,
  .ffm-impact h2,
  .ffm-final-cta > .ffm-container > h2,
  .ffm-faq h2,
  .ffm-challenge-copy h2
)::before {
  top: -420px;
  bottom: 0;
  left: 50%;
  width: min(760px, 52vw);
  background-image:
    linear-gradient(rgba(52, 119, 79, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(52, 119, 79, 0.06) 1px, transparent 1px);
  background-position: center top;
  background-size: 14px 14px;
  transform: translateX(-50%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%),
    linear-gradient(90deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%),
    linear-gradient(90deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
  mask-composite: intersect;
}

/* Lone headings (no heading + intro wrapper): run on behind the intro. */
.za-ffm-page main :is(.ffm-impact h2, .ffm-final-cta > .ffm-container > h2)::before {
  bottom: -72px;
}

/* Left-aligned heading: grid over its own column, fading to the right. */
.za-ffm-page main .ffm-challenge-copy h2::before {
  left: -40px;
  width: min(760px, 100%);
  transform: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 94%, transparent 100%),
    linear-gradient(90deg, transparent 0%, #000 8%, #000 72%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 94%, transparent 100%),
    linear-gradient(90deg, transparent 0%, #000 8%, #000 72%, transparent 100%);
}

@media (max-width: 900px) {
  .za-ffm-page main :is(
    .attendance-self-service-heading,
    .ffm-how > .ffm-section-heading,
    .employee-why-choose-heading,
    .ffm-industries .ffm-section-heading,
    .ffm-features .ffm-section-heading,
    .ffm-impact h2,
    .ffm-final-cta > .ffm-container > h2,
    .ffm-faq h2
  )::before {
    top: -420px;
    width: 86vw;
  }

  .za-ffm-page main .ffm-challenge-copy h2::before {
    top: -420px;
    width: 100%;
  }
}

/* ---- Navigation: steady Products mega-menu ------------------------------

   This page's header uses the industry pages' taller header shell (92px,
   sales-crm-softwares.css) with the product template's mega-menu rules
   (field-force-management.css: open on hover with a 160ms fade). The
   taller shell leaves a gap between the menu label and the panel that the
   template's 20px hover bridge does not cover, so moving the pointer down
   to the panel dropped the hover for a moment and the menu faded out and
   back in (flicker). Here:
   - the label's hover bridge reaches the panel, and the open panel carries
     its own invisible bridge above its top edge, so the pointer never
     leaves a hover area on the way down;
   - closing waits briefly (hover intent) while opening stays instant, so a
     quick pass over a gap cannot restart the fade;
   - the panel animates opacity only (no sliding transform), so nothing in
     it shifts while it opens. */
body.za-ffm-page.ffm-page:not(.lm-page):not(.tm-page) .ffm-nav-shell .menu-item .sub-menu.triple {
  transform: none;
  transition: opacity 140ms ease 120ms, visibility 0s linear 260ms;
  will-change: opacity;
}

body.za-ffm-page.ffm-page:not(.lm-page):not(.tm-page) .ffm-nav-shell .menu-item:hover .sub-menu.triple,
body.za-ffm-page.ffm-page:not(.lm-page):not(.tm-page) .ffm-nav-shell .menu-item:focus-within .sub-menu.triple {
  transform: none;
  transition: opacity 140ms ease 0s, visibility 0s linear 0s;
}

body.za-ffm-page.ffm-page:not(.lm-page):not(.tm-page) .ffm-nav-shell .menu-item .sub-menu.triple::before {
  position: absolute;
  top: -48px;
  right: 0;
  left: 0;
  height: 48px;
  background: transparent;
  content: "";
}

body.za-ffm-page.ffm-page:not(.lm-page):not(.tm-page) .ffm-nav-shell #product-div::after {
  bottom: -40px;
  height: 44px;
}

/* ---- How TrackOlap Works: hero texture behind the heading ----------------

   Same texture as the hero heading (screenshot reference): the hero's soft
   top-centre blue glow (already this section's background) with the 14px
   brand-blue grid over it, drawn on the section itself like the hero's
   grid layer: a centred panel from the section's top edge down past the
   subheading, fading out at the sides and bottom (radial mask, as
   finances.css .fin-hero-grid). The heading sits above it. The heading's
   own pseudo-element grid is switched off here so the two never double. */
.za-ffm-page main .ffm-how {
  position: relative;
  isolation: isolate;
}

.za-ffm-page main .ffm-how::before {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 50%;
  width: min(1100px, 80%);
  height: 470px;
  background-image:
    linear-gradient(rgba(52, 119, 79, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(52, 119, 79, 0.1) 1px, transparent 1px);
  background-position: center top;
  background-size: 14px 14px;
  content: "";
  pointer-events: none;
  transform: translateX(-50%);
  -webkit-mask-image: radial-gradient(ellipse 60% 78% at 50% 28%, #000 38%, transparent 100%);
  mask-image: radial-gradient(ellipse 60% 78% at 50% 28%, #000 38%, transparent 100%);
}

.za-ffm-page main .ffm-how > .ffm-section-heading,
.za-ffm-page main .ffm-how > .ffm-how-list {
  position: relative;
  z-index: 1;
}

.za-ffm-page main .ffm-how > .ffm-section-heading::before {
  display: none;
}

@media (max-width: 900px) {
  .za-ffm-page main .ffm-how::before {
    width: 100%;
    height: 400px;
  }
}

/* ---- Heading texture: only behind the heading and subheading -------------

   The grid stops just below each section's subheading instead of running
   on into the content (How TrackOlap Works carried a fixed-height panel
   that reached into the first step). For How TrackOlap Works the grid goes
   back to the heading block itself, which spans from the section's top
   edge (its 150px top padding) to the subheading; each heading block that
   has bottom padding has the grid end at the subheading, not at the
   padding. The grid's last few pixels fade out as on the hero. */
.za-ffm-page main .ffm-how::before {
  display: none;
}

.za-ffm-page main .ffm-how > .ffm-section-heading::before {
  display: block;
  top: 0;
  bottom: 30px;
}

.za-ffm-page main .ffm-industries .ffm-section-heading::before {
  bottom: 48px;
}

@media (max-width: 991px) {
  .za-ffm-page main .ffm-industries .ffm-section-heading::before {
    bottom: 36px;
  }
}

@media (max-width: 700px) {
  .za-ffm-page main .ffm-industries .ffm-section-heading::before {
    bottom: 28px;
  }
}

.za-ffm-page main :is(
  .attendance-self-service-heading,
  .ffm-how > .ffm-section-heading,
  .employee-why-choose-heading,
  .ffm-industries .ffm-section-heading,
  .ffm-features .ffm-section-heading,
  .ffm-impact h2,
  .ffm-final-cta > .ffm-container > h2,
  .ffm-faq h2
)::before {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 88%, transparent 100%),
    linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 88%, transparent 100%),
    linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}

/* ---- What Is TrackOlap: no heading texture ---------------------------------

   This section keeps its plain NBFC Quick Answer wash: no grid behind the
   heading and no top glow. */
.za-ffm-page main .ffm-challenge-copy h2::before {
  display: none;
}

.za-ffm-page main .ffm-challenge {
  background:
    radial-gradient(ellipse 55% 80% at 0% 50%, rgba(212, 237, 222, 0.55) 0%, rgba(212, 237, 222, 0) 100%),
    linear-gradient(180deg, #f3faf6 0%, #f9fdfb 100%);
}

/* Primary buttons from the template (cyan-to-blue gradient there) take the
   same NBFC button colour as "View All Features" and the hero button. */
.za-ffm-page main .ffm-button-primary {
  color: #fff;
  background: #34774f;
  border-color: #34774f;
}

.za-ffm-page main .ffm-button-primary:hover,
.za-ffm-page main .ffm-button-primary:focus-visible {
  color: #fff;
  background: #34774f;
  border-color: #34774f;
}

/* ---- Get Started: subheading under "Give Your Field Team ..." ------------

   The template only styles .ffm-final-cta-description on some product
   pages, so here it rendered as small, left-aligned text tight under the
   heading. Set like those pages (Beat Planning): centred under the
   heading, 18px muted copy, a balanced line, with room above the cards;
   the heading is held centred over the full width. */
.za-ffm-page main .ffm-final-cta > .ffm-container > h2 {
  display: block;
  width: 100%;
  margin-inline: auto;
  text-align: center;
  text-wrap: balance;
}

.za-ffm-page main .ffm-final-cta .ffm-final-cta-description {
  position: relative;
  max-width: 760px;
  margin: 18px auto 0;
  color: var(--ffm-copy);
  font-size: 18px !important;
  line-height: 1.55 !important;
  text-align: center;
  text-wrap: balance;
}

.za-ffm-page main .ffm-final-cta .ffm-final-cta-description + .ffm-final-cta-grid {
  margin-top: 48px;
}

@media (max-width: 640px) {
  .za-ffm-page main .ffm-final-cta .ffm-final-cta-description {
    font-size: 16px !important;
  }
}

/* ---- Hero secondary button: Chat with us on WhatsApp ----------------------

   Under the email + "Book Free Demo" bar: a white pill in the same
   rounded style as the email bar, with the WhatsApp logo and a dark label,
   turning WhatsApp green on hover. Secondary to the blue primary button. */
.za-ffm-hero .ffm-industry-hero-secondary {
  display: flex;
  margin-top: 16px;
  justify-content: center;
}

.za-ffm-hero .ffm-industry-hero-secondary-btn {
  display: inline-flex;
  min-height: 50px;
  padding: 10px 24px 10px 18px;
  align-items: center;
  gap: 10px;
  color: #0b1530;
  background: #fff;
  border: 1px solid rgba(11, 21, 48, 0.1);
  border-radius: 999px;
  box-shadow: 0 10px 28px rgba(52, 119, 79, 0.1);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition: color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.za-ffm-hero .ffm-industry-hero-whatsapp-icon {
  width: 26px;
  height: 26px;
  flex: none;
}

.za-ffm-hero .ffm-industry-hero-secondary-btn--whatsapp:hover,
.za-ffm-hero .ffm-industry-hero-secondary-btn--whatsapp:focus-visible {
  color: #128c4b;
  border-color: rgba(37, 211, 102, 0.55);
  box-shadow: 0 12px 30px rgba(37, 211, 102, 0.2);
  transform: translateY(-1px);
}

.za-ffm-hero .ffm-industry-hero-secondary-btn:focus-visible {
  outline: 3px solid rgba(37, 211, 102, 0.35);
  outline-offset: 3px;
}

@media (max-width: 560px) {
  .za-ffm-hero .ffm-industry-hero-secondary-btn {
    width: 100%;
    max-width: 360px;
    justify-content: center;
    font-size: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .za-ffm-hero .ffm-industry-hero-secondary-btn {
    transition: none;
  }
}

/* WhatsApp button in WhatsApp's light green: a pale green fill (#e7fbe9,
   from WhatsApp's light chat green) with a soft green border and the
   WhatsApp dark teal label (#075e54); a shade deeper on hover. */
.za-ffm-hero .ffm-industry-hero-secondary-btn--whatsapp {
  color: #075e54;
  background: #e7fbe9;
  border-color: rgba(37, 211, 102, 0.35);
  box-shadow: 0 10px 26px rgba(37, 211, 102, 0.16);
}

.za-ffm-hero .ffm-industry-hero-secondary-btn--whatsapp:hover,
.za-ffm-hero .ffm-industry-hero-secondary-btn--whatsapp:focus-visible {
  color: #075e54;
  background: #d6f7dc;
  border-color: rgba(37, 211, 102, 0.6);
  box-shadow: 0 12px 30px rgba(37, 211, 102, 0.24);
}

/* ---- Live chat and back-to-top in the NBFC theme blue ---------------------

   Same treatment as the NBFC page (nbfc-field-force-management.css), which
   only reaches pages whose <body> carries nbfc-page; here the NBFC classes
   sit on the hero wrapper, so the rules are repeated for this page's body.
   The Antrika widget writes its colours as inline custom properties on
   <html> from one brand colour; these recompute them from the NBFC blue
   (#34774f) and win because they are !important. The round chat launcher
   and the greeting card's coloured bar are inline-styled by the widget, so
   they are overridden by the stable start of the widget's class names. */
html:has(> body.za-ffm-page) {
  --widget-body-primary: rgb(52, 119, 79) !important;
  --widget-body-primary-10: rgb(39, 48, 42) !important;
  --widget-body-primary-dark: rgb(33.9, 38.4, 50.2) !important;
}

body.za-ffm-page [class*="antrika_chat_button-label"] {
  background-color: #34774f !important;
}

body.za-ffm-page [class*="antrika_chat_button-label"]:hover {
  background-color: #2b6342 !important;
}

body.za-ffm-page [class*="antrika_chat_chat-initial-div"] > div:first-child {
  border-color: #34774f !important;
}

body.za-ffm-page {
  --back-to-top-bg: #34774f;
  --back-to-top-bg-hover: #2b6342;
}

/* ---- Demo band: contour texture -------------------------------------------

   The mid-page blue demo band carries the reference texture: faint white
   contour lines down both sides, each with a dashed route between two small
   pins, over the NBFC blue gradient, with the centre left clean for the
   copy (two local SVGs, anchored left and right at the band's full
   height). The heading grid is switched off here so the centre stays
   plain, as in the reference. */
.za-ffm-page main .ffm-mid-cta {
  position: relative;
  background:
    url("/assets/img/field-force-management/south-africa/cta-contour-left.svg") left center / auto 100% no-repeat,
    url("/assets/img/field-force-management/south-africa/cta-contour-right.svg") right center / auto 100% no-repeat,
    radial-gradient(ellipse 45% 70% at 62% 30%, rgba(82, 139, 105, 0.45) 0%, rgba(82, 139, 105, 0) 100%),
    linear-gradient(110deg, #2b6342 0%, #34774f 52%, #528b69 100%);
}

.za-ffm-page main .ffm-mid-cta h2::before {
  display: none;
}

@media (max-width: 767px) {
  .za-ffm-page main .ffm-mid-cta {
    background:
      url("/assets/img/field-force-management/south-africa/cta-contour-left.svg") left bottom / auto 70% no-repeat,
      url("/assets/img/field-force-management/south-africa/cta-contour-right.svg") right top / auto 70% no-repeat,
      linear-gradient(110deg, #2b6342 0%, #34774f 52%, #528b69 100%);
  }
}

/* ---- Navigation: steady labels (no flicker) --------------------------------

   The NBFC header styles this page borrows (finances.css "Navigation text:
   16px at the top of the page ... easing down to 14px once the header
   sticks") animate every top-level label's font size when the header
   switches to its sticky state on scroll. That resizes and shifts the
   whole menu row, so the pointer can slip off "Products" while the panel
   is opening and the mega-menu snaps closed and open (flicker). Here the
   labels keep one size in both header states with no font-size
   animation, as on the product pages (the reference): the row never moves
   under the pointer. */
body.za-ffm-page .ffm-nav-shell #menu > .menu-item > .menu-text,
body.za-ffm-page .ffm-nav-shell #menu > .menu-item > .menu-text span,
body.za-ffm-page .ffm-nav-shell #menu > .menu-item > .menu-text .nav-menu-item,
body.za-ffm-page .ffm-nav-shell #menu > .nav-item > .menu-text,
body.za-ffm-page .ffm-nav-shell #menu > .nav-item > .menu-text span,
body.za-ffm-page .ffm-nav-shell #resourceBtn,
body.za-ffm-page .ffm-nav-shell .header-container.header-on-scroll #menu > .menu-item > .menu-text,
body.za-ffm-page .ffm-nav-shell .header-container.header-on-scroll #menu > .menu-item > .menu-text span,
body.za-ffm-page .ffm-nav-shell .header-container.header-on-scroll #menu > .menu-item > .menu-text .nav-menu-item,
body.za-ffm-page .ffm-nav-shell .header-container.header-on-scroll #menu > .nav-item > .menu-text,
body.za-ffm-page .ffm-nav-shell .header-container.header-on-scroll #menu > .nav-item > .menu-text span,
body.za-ffm-page .ffm-nav-shell .header-container.header-on-scroll #resourceBtn {
  font-size: 15px !important;
  font-weight: 500 !important;
  transition: none !important;
}

/* ---- Navigation: Products mega-menu fits its content ----------------------

   The shared header gives the Products panel a fixed 540px height
   (index.css .menu-item .sub-menu.triple). Here the header sits inside the
   industry wrapper, whose sales-crm-softwares-page class sets
   line-height: 1.6 on everything in it, so each menu row is a little
   taller than on the product pages and the "Other Products" box ran out
   past the bottom of the white panel. The header takes the product
   pages' line height (1.5) again, and the panel grows with its content
   (never shorter than before), so the Other Products box always sits
   inside it with the panel's normal bottom padding. */
body.za-ffm-page .ffm-nav-shell.main-container {
  line-height: 1.5;
}

body.za-ffm-page.ffm-page:not(.lm-page):not(.tm-page) .ffm-nav-shell .menu-item .sub-menu.triple {
  height: auto;
  min-height: 540px;
  align-content: flex-start;
}

/* ---- Integrations: the Attendance & Leave Management page's section -------

   Same Integrations section as the Attendance & Leave Management page
   (showCrmIntegrations + integrationCategories, rendered by the shared
   field-force-crm-integrations partial): copy and "View All Integrations"
   on the left, the TrackOlap logo with the integration logos circling it
   on two dashed rings on the right. Copied from beat-planning-softwares.css
   ("Sales CRM integrations presentation, recolored for Attendance and
   Leave"), scoped to this page, with that page's warm red and orange in
   the NBFC theme: a deep NBFC blue band (as the footer) with brand-blue
   and light-blue accents. */
.za-ffm-page .attendance-crm-integrations {
  position: relative;
  min-height: 560px;
  margin-top: 0;
  padding: 72px 0;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 72% 50%, rgba(82, 139, 105, 0.16), transparent 30%),
    linear-gradient(115deg, #1b3b28, #1a3f2a 62%, #1f4a31);
}

.za-ffm-page .attendance-crm-integrations .crm-integrations-layout {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(calc(100% - 48px), 1180px);
  min-height: 416px;
  margin-inline: auto;
  grid-template-columns: minmax(0, 0.8fr) minmax(520px, 1.2fr);
  align-items: center;
  gap: clamp(40px, 6vw, 90px);
}

.za-ffm-page .attendance-crm-integrations .crm-integrations-copy {
  max-width: 510px;
}

.za-ffm-page main .attendance-crm-integrations .crm-integrations-eyebrow {
  display: inline-block;
  margin: 0 0 14px;
  padding: 2px 5px;
  color: #fff;
  background: #34774f;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
}

.za-ffm-page main .attendance-crm-integrations .crm-integrations-copy h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(42px, 4vw, 58px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.04em;
  line-height: 1.06 !important;
  text-align: left;
  text-wrap: balance;
}

.za-ffm-page main .attendance-crm-integrations .crm-integrations-copy h2 span {
  color: #7fa98f;
  background: linear-gradient(90deg, #c2e6d0, #7fa98f);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.za-ffm-page main .attendance-crm-integrations .crm-integrations-copy > p:not(.crm-integrations-eyebrow) {
  max-width: 470px;
  margin: 24px 0 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 16px !important;
  line-height: 1.7 !important;
  text-align: left;
}

.za-ffm-page .attendance-crm-integrations .crm-integrations-action {
  display: inline-flex;
  min-height: 48px;
  margin-top: 27px;
  padding: 10px 18px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #fff;
  background: linear-gradient(100deg, rgba(52, 119, 79, 0.25), rgba(82, 139, 105, 0.4));
  border: 1px solid #7fa98f;
  border-radius: 999px;
  box-shadow: 0 14px 34px rgba(52, 119, 79, 0.28);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition: background 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.za-ffm-page .attendance-crm-integrations .crm-integrations-action:focus-visible {
  outline: 3px solid #c2e6d0;
  outline-offset: 4px;
}

.za-ffm-page .attendance-crm-integrations .crm-integrations-orbit {
  --orbit-inner-radius: 132px;
  --orbit-outer-radius: 218px;

  position: relative;
  width: min(100%, 590px);
  height: 470px;
  justify-self: end;
}

.za-ffm-page .attendance-crm-integrations .crm-integration-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px dashed rgba(82, 139, 105, 0.42);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.za-ffm-page .attendance-crm-integrations .crm-integration-ring--outer {
  width: calc(var(--orbit-outer-radius) * 2);
  height: calc(var(--orbit-outer-radius) * 2);
}

.za-ffm-page .attendance-crm-integrations .crm-integration-ring--inner {
  width: calc(var(--orbit-inner-radius) * 2);
  height: calc(var(--orbit-inner-radius) * 2);
}

.za-ffm-page .attendance-crm-integrations .crm-integration-center,
.za-ffm-page .attendance-crm-integrations .crm-integration-node {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  display: grid;
  border: 1px solid rgba(82, 139, 105, 0.5);
  border-radius: 50%;
  place-items: center;
}

.za-ffm-page .attendance-crm-integrations .crm-integration-center {
  width: 82px;
  height: 82px;
  background: radial-gradient(circle, #34774f, #2a5b3e 72%);
  box-shadow: 0 0 45px rgba(82, 139, 105, 0.42);
  transform: translate(-50%, -50%);
}

.za-ffm-page .attendance-crm-integrations .crm-integration-center img {
  width: 58px;
  height: 58px;
  object-fit: contain;
}

.za-ffm-page .attendance-crm-integrations .crm-integration-orbit-tools {
  margin: 0;
  padding: 0;
  list-style: none;
}

.za-ffm-page .attendance-crm-integrations .crm-integration-node {
  width: 58px;
  height: 58px;
  padding: 9px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.34), 0 0 18px rgba(82, 139, 105, 0.16);
  will-change: transform;
  animation: za-crm-integration-orbit 38s linear infinite;
  transform:
    translate(-50%, -50%)
    rotate(var(--orbit-angle))
    translateX(var(--orbit-radius))
    rotate(var(--orbit-angle-reverse));
}

.za-ffm-page .attendance-crm-integrations .crm-integration-node--outer {
  --orbit-radius: var(--orbit-outer-radius);
}

.za-ffm-page .attendance-crm-integrations .crm-integration-node--inner {
  --orbit-radius: var(--orbit-inner-radius);

  animation-duration: 30s;
  animation-direction: reverse;
}

.za-ffm-page .attendance-crm-integrations .crm-integration-node-link {
  display: grid;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  place-items: center;
  text-decoration: none;
}

.za-ffm-page .attendance-crm-integrations .crm-integration-node-link:focus-visible {
  outline: 3px solid #c2e6d0;
  outline-offset: 5px;
}

.za-ffm-page .attendance-crm-integrations .crm-integration-node img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@keyframes za-crm-integration-orbit {
  from {
    transform:
      translate(-50%, -50%)
      rotate(var(--orbit-angle))
      translateX(var(--orbit-radius))
      rotate(var(--orbit-angle-reverse));
  }

  to {
    transform:
      translate(-50%, -50%)
      rotate(var(--orbit-angle-end))
      translateX(var(--orbit-radius))
      rotate(var(--orbit-angle-reverse-end));
  }
}

@media (hover: hover) {
  .za-ffm-page .attendance-crm-integrations .crm-integrations-action:hover {
    color: #fff;
    background: #34774f;
    box-shadow: 0 16px 38px rgba(52, 119, 79, 0.38);
    text-decoration: none;
    transform: translateY(-2px);
  }
}

@media (max-width: 1180px) and (min-width: 1030px) {
  .za-ffm-page .attendance-crm-integrations .crm-integrations-layout {
    grid-template-columns: minmax(0, 0.9fr) minmax(470px, 1.1fr);
    gap: 36px;
  }

  .za-ffm-page .attendance-crm-integrations .crm-integrations-orbit {
    --orbit-inner-radius: 116px;
    --orbit-outer-radius: 190px;

    height: 430px;
  }
}

@media (max-width: 1029px) {
  .za-ffm-page .attendance-crm-integrations {
    min-height: 0;
    padding: 70px 0;
  }

  .za-ffm-page .attendance-crm-integrations .crm-integrations-layout {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .za-ffm-page .attendance-crm-integrations .crm-integrations-copy {
    max-width: 680px;
    margin-inline: auto;
    text-align: center;
  }

  .za-ffm-page main .attendance-crm-integrations .crm-integrations-copy h2,
  .za-ffm-page main .attendance-crm-integrations .crm-integrations-copy > p:not(.crm-integrations-eyebrow) {
    margin-right: auto;
    margin-left: auto;
    text-align: center;
  }

  .za-ffm-page .attendance-crm-integrations .crm-integrations-orbit {
    width: min(100%, 590px);
    margin-inline: auto;
    justify-self: center;
  }
}

@media (max-width: 700px) {
  .za-ffm-page .attendance-crm-integrations {
    padding: 56px 0 48px;
  }

  .za-ffm-page .attendance-crm-integrations .crm-integrations-layout {
    width: min(calc(100% - 32px), 1180px);
  }

  .za-ffm-page main .attendance-crm-integrations .crm-integrations-copy h2 {
    font-size: clamp(32px, 9vw, 42px) !important;
  }

  .za-ffm-page main .attendance-crm-integrations .crm-integrations-copy > p:not(.crm-integrations-eyebrow) {
    font-size: 15px !important;
  }

  .za-ffm-page .attendance-crm-integrations .crm-integrations-action {
    width: min(100%, 235px);
  }

  .za-ffm-page .attendance-crm-integrations .crm-integrations-orbit {
    --orbit-inner-radius: min(23vw, 116px);
    --orbit-outer-radius: min(38vw, 190px);

    height: 380px;
  }

  .za-ffm-page .attendance-crm-integrations .crm-integration-node {
    width: 50px;
    height: 50px;
    padding: 8px;
  }

  .za-ffm-page .attendance-crm-integrations .crm-integration-center {
    width: 72px;
    height: 72px;
  }

  .za-ffm-page .attendance-crm-integrations .crm-integration-center img {
    width: 50px;
    height: 50px;
  }
}

@media (max-width: 420px) {
  .za-ffm-page .attendance-crm-integrations .crm-integrations-orbit {
    --orbit-inner-radius: 22vw;
    --orbit-outer-radius: 36vw;

    height: 360px;
  }

  .za-ffm-page .attendance-crm-integrations .crm-integration-node {
    width: 46px;
    height: 46px;
    padding: 7px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .za-ffm-page .attendance-crm-integrations .crm-integration-node {
    animation: none;
  }
}


/* Products mega-menu: the "Other Products" box sits closer to the panel's
   edges. The panel keeps its 40px padding for the product columns, but the
   box reaches out to 16px from the left and right edges, and the panel's
   bottom padding drops to 16px, so the box ends 16px above the bottom. */
body.za-ffm-page.ffm-page:not(.lm-page):not(.tm-page) .ffm-nav-shell .menu-item .sub-menu.triple {
  padding-bottom: 16px;
}

body.za-ffm-page .ffm-nav-shell .sub-menu.triple .dropdown-footer {
  width: calc(100% + 48px);
  margin-right: -24px;
  margin-left: -24px;
}

/* Demo form "Book Free Demo": a lighter label (medium 500 instead of the
   template's bold 700); the button keeps its size and colour. */
.za-ffm-page .ffm-demo-widget .trackwick_public_form_submit-btn,
.za-ffm-page .ffm-demo-widget .trackwick_public_form_submit-btn .ant-btn,
.za-ffm-page .ffm-demo-widget .trackwick_public_form_submit-btn .ant-btn span,
.za-ffm-page .ffm-demo-widget .btn-box button,
.za-ffm-page .ffm-demo-widget button[type="submit"],
.za-ffm-page .ffm-demo-widget button[type="submit"] span,
.za-ffm-page .ffm-demo-widget input[type="submit"] {
  font-weight: 500 !important;
}

/* Demo form "Book Free Demo": a smaller button, about 42px tall (was 48px)
   with a 16px label (was 18px). It stays full width, so the form fields
   still end level with it. */
.za-ffm-page .ffm-demo-widget .trackwick_public_form_submit-btn {
  min-height: 42px !important;
}

.za-ffm-page .ffm-demo-widget .trackwick_public_form_submit-btn .ant-btn,
.za-ffm-page .ffm-demo-widget .btn-box button,
.za-ffm-page .ffm-demo-widget button[type="submit"],
.za-ffm-page .ffm-demo-widget input[type="submit"] {
  min-height: 42px !important;
  height: auto !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  font-size: 16px !important;
}

/* Demo form "Book Free Demo": ends level with the form fields. The remote
   form's field columns stop about 20px short of the full width (their
   gutter), while the submit button spans it, so the button runs past the
   fields on the right. The button is narrowed by that gutter and stays
   aligned to the left edge, so both edges line up with the fields; with the
   rule above it is also shorter (about 42px) with a 16px label. */
.za-ffm-page .ffm-demo-widget .trackwick_public_form_submit-btn,
.za-ffm-page .ffm-demo-widget .btn-box,
.za-ffm-page .ffm-demo-widget button[type="submit"]:not(.trackwick_public_form_submit-btn button):not(.btn-box button),
.za-ffm-page .ffm-demo-widget input[type="submit"]:not(.trackwick_public_form_submit-btn input):not(.btn-box input) {
  width: calc(100% - 20px) !important;
  max-width: calc(100% - 20px) !important;
  margin-right: 20px !important;
  margin-left: 0 !important;
}

/* The button inside the narrowed wrapper fills it. */
.za-ffm-page .ffm-demo-widget .trackwick_public_form_submit-btn :is(.ant-btn, button, input[type="submit"]),
.za-ffm-page .ffm-demo-widget .btn-box :is(button, input[type="submit"]) {
  width: 100% !important;
  max-width: 100% !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
}

/* Data Privacy note under the four cards ("TrackOlap provides controls ...
   legal advice for your situation."): one centred line on desktop; it
   wraps again on narrower screens, where one line would not fit. */
@media (min-width: 992px) {
  .za-ffm-page main .ffm-impact--privacy .ffm-impact-attribution {
    max-width: none;
    white-space: nowrap;
  }
}

/* ---- Hero: South African professionals background -----------------------

   Matches the supplied hero design: a pre-washed photo (a professional on a
   phone at the left, two colleagues with a tablet at the right, city street
   behind) fills the hero edge to edge with no extra overlay, since the
   photo's own light blue wash keeps the dark heading readable. Accent words
   stay in the NBFC blue, the eyebrow is a white pill, and there is no grid
   texture. Decorative (a CSS background, so no alt text); the heading text
   stays the first paint. */
.za-ffm-hero.finances-page .crm-suite-hero.fin-hero-center {
  background:
    linear-gradient(180deg, rgba(246, 252, 248, 0) 78%, rgba(246, 252, 248, 0.9) 100%),
    url("/assets/img/field-force-management/south-africa/hero-south-african-professionals-bg.webp") center top / cover no-repeat,
    #f2f9f5;
}

.za-ffm-hero.nbfc-page .fin-hero-center .prod-hero-headline::before,
.za-ffm-hero .fin-hero-grid {
  display: none;
}

.za-ffm-hero.finances-page .fin-hero-center .fin-hero-eyebrow {
  background: #fff;
  border-color: rgba(52, 119, 79, 0.1);
  box-shadow: 0 8px 24px rgba(52, 119, 79, 0.1);
}

/* Phones: the copy covers the middle of the photo, so a light wash keeps
   it readable over the people at the edges. */
@media (max-width: 767px) {
  .za-ffm-hero.finances-page .crm-suite-hero.fin-hero-center {
    background:
      linear-gradient(180deg, rgba(245, 250, 247, 0.55) 0%, rgba(248, 252, 250, 0.6) 70%, rgba(246, 252, 248, 0.92) 100%),
      url("/assets/img/field-force-management/south-africa/hero-south-african-professionals-bg.webp") center top / cover no-repeat,
      #f2f9f5;
  }
}

/* Hero heading accent words ("Management", "Software", "Businesses") in
   the theme dark green (#34774f). */
.za-ffm-hero.nbfc-page .crm-suite-hero.fin-hero-center .fin-hero-title-accent {
  color: #34774f;
  -webkit-text-fill-color: #34774f;
}

/* Demo buttons in the theme dark green: the hero "Book Free Demo" (and its arrow)
   and the header "Request a Demo" (desktop, scrolled and mobile). */
.za-ffm-hero.finances-page .fin-hero-email button {
  background: #34774f;
}

.za-ffm-hero.finances-page .fin-hero-email button:hover {
  background: #2b6342;
}

.za-ffm-hero.finances-page .fin-hero-email-arrow {
  color: #34774f;
}

.za-ffm-hero.finances-page .ffm-nav-shell.main-container .header-container .header-container-box .top-buttons .start-trial-btn,
.za-ffm-hero.finances-page .ffm-nav-shell.main-container .header-container.header-on-scroll .header-container-box .top-buttons .start-trial-btn,
.za-ffm-hero.finances-page .ffm-nav-shell .top-buttons > #startTrial2,
.za-ffm-hero.finances-page .ffm-nav-shell .header-container.header-on-scroll .top-buttons > #startTrial2 {
  background: #34774f !important;
  border-color: #34774f !important;
  box-shadow: 0 6px 16px rgba(52, 119, 79, 0.22) !important;
}

.za-ffm-hero.finances-page .ffm-nav-shell.main-container .header-container .header-container-box .top-buttons .start-trial-btn:hover,
.za-ffm-hero.finances-page .ffm-nav-shell .top-buttons > #startTrial2:hover {
  background: #2b6342 !important;
  border-color: #2b6342 !important;
}

/* ---- Green theme ------------------------------------------------------------

   The page theme is green instead of the NBFC blue: dark #34774F for
   buttons, accent words, icons and links (hover #2B6342), light #528B69 for
   secondary accents and glows, and pale green tints for the section washes.
   The colours above are already green; these overrides re-point the shared
   stylesheets' variables (field-force-management.css, sales-crm-softwares.css,
   finances.css, nbfc-field-force-management.css) and the few blues they
   hard-code. */
.za-ffm-page,
.za-ffm-hero.sales-crm-softwares-page.finances-page {
  --crm-blue: #34774f;
  --crm-blue-dark: #1f4a31;
  --crm-pale: #f3faf6;
  --fin-hero-bg: #eef7f1;
  --ic-accent: #34774f;
  --ic-ours-bg: #f2f9f5;
  --ic-ours-bg-alt: #e4f2e9;
  --ic-value-bg: #ebf6ef;
  --za-green-dark: #34774f;
  --za-green-light: #528b69;
}

.za-ffm-hero.finances-page .fin-hero-center .fin-hero-eyebrow {
  border-color: rgba(52, 119, 79, 0.14);
  box-shadow: 0 8px 24px rgba(52, 119, 79, 0.1);
}

.za-ffm-hero.finances-page .fin-hero-email {
  box-shadow: 0 16px 40px rgba(52, 119, 79, 0.14);
}

.za-ffm-page main .ffm-how-copy .ffm-how-capabilities li {
  background: rgba(82, 139, 105, 0.06);
  border-color: rgba(82, 139, 105, 0.24);
}

.za-ffm-page .ffm-integration-node,
.za-ffm-page .ffm-integration-hub {
  border-color: rgba(82, 139, 105, 0.16);
}

.za-ffm-page .ffm-integration-hub-ring {
  border-color: rgba(82, 139, 105, 0.26);
}

.za-ffm-page .ffm-integration-node:hover,
.za-ffm-page .ffm-integration-hub:hover {
  border-color: rgba(82, 139, 105, 0.36);
}

.za-ffm-page .ffm-faq-accordion .accordion-button:focus {
  box-shadow: inset 0 0 0 3px rgba(52, 119, 79, 0.3);
}

.za-ffm-page .ffm-industry-capabilities li {
  color: #34774f;
  background: #ebf6ef;
}