/* MFI industry page (/industry/mfi-field-operations-software).
   The body carries `finances-page` and `nbfc-page` as well as `mfi-page`, so
   finances.css and nbfc-field-force-management.css supply the whole NBFC
   design (hero, sections, spacing, animations). This file only adds the
   MFI-only pieces (hero meta row, platforms strip, TrackOlap Collect,
   governance cards, impact note, related blogs) and adjusts headings whose
   copy is longer than the NBFC page's. Everything is scoped to `.mfi-page`. */

/* Hero: heading and description use the NBFC hero's sizes unchanged.
   The heading's first line ("MFI Field Operations Software") is a few
   characters longer than the NBFC one, so the copy column is a little wider
   (1240px, the Finance hero's column) to keep it on one line on desktop. */
@media (min-width: 901px) {
  .mfi-page .fin-hero-center .prod-hero-copy {
    max-width: 1240px;
  }
}

/* Description aligned to the heading on desktop: the copy column shrinks
   to the heading's widest line ("MFI Field Operation Software"), the
   description adds no width of its own and fills exactly that width, and
   its lines are justified so both edges sit flush with the heading's first
   line (the last line is centred). Below 1200px it wraps and centres as on
   the NBFC page. */
@media (min-width: 1200px) {
  .mfi-page .fin-hero-center .prod-hero-copy {
    width: fit-content;
  }

  .mfi-page .fin-hero-center .prod-hero-sub {
    width: 0;
    min-width: 100%;
    max-width: none;
    text-align: justify;
    text-align-last: center;
    text-wrap: pretty;
    hyphens: none;
  }

  .mfi-page .fin-hero-center .prod-hero-sub .nbfc-hero-sub-line {
    display: inline;
    white-space: normal;
  }
}

/* Hero colour theme (from the supplied MFI hero design): a soft mint
   backdrop with a pale green glow at the top centre and the NBFC grid
   texture behind the heading in green; the heading accent words in leaf
   green. Navy heading text and the white eyebrow pill stay as they are. */
.mfi-page {
  --fin-hero-bg: #e6f6ee;
}

.mfi-page.finances-page .crm-suite-hero.fin-hero-center {
  background:
    radial-gradient(ellipse 36% 58% at 50% 0%, rgba(150, 220, 170, 0.45) 0%, rgba(180, 232, 196, 0.2) 50%, rgba(180, 232, 196, 0) 100%),
    linear-gradient(180deg, #e3f5ec 0%, #eef9f3 55%, #f7fcf9 100%);
}

/* Customer logos follow the hero in one continuous colour (as on the NBFC
   page): the logo section uses the exact mint the hero ends on (#f7fcf9),
   so there is no visible band where the two meet. */
.mfi-page.nbfc-page .ffm-logo-section {
  background: #f7fcf9;
}

/* Section highlighter between the customer logos and the "What Is MFI
   Field Operations Management Software?" section: a 2px theme-green rule
   (fading out towards both sides) on the seam between the two sections,
   with a small glowing diamond marker at its centre. It takes no space of
   its own, so neither section's spacing changes. */
.mfi-page .mfi-section-divider {
  position: relative;
  z-index: 3;
  height: 0;
  pointer-events: none;
}

.mfi-page .mfi-section-divider::before {
  position: absolute;
  top: -1px;
  left: 50%;
  width: min(1100px, 86vw);
  height: 2px;
  content: "";
  background: linear-gradient(90deg, rgba(74, 154, 26, 0) 0%, rgba(74, 154, 26, 0.55) 30%, #4a9a1a 50%, rgba(74, 154, 26, 0.55) 70%, rgba(74, 154, 26, 0) 100%);
  border-radius: 2px;
  transform: translateX(-50%);
}

.mfi-page .mfi-section-divider-mark {
  position: absolute;
  top: -7px;
  left: 50%;
  width: 14px;
  height: 14px;
  background: linear-gradient(135deg, #6cc02e 0%, #3a7815 100%);
  border: 3px solid #fff;
  border-radius: 3px;
  box-shadow: 0 0 0 4px rgba(74, 154, 26, 0.16), 0 4px 12px rgba(58, 120, 21, 0.35);
  transform: translateX(-50%) rotate(45deg);
}

/* "What Is MFI Field Operations Management Software?": more breathing
   room between the two-line heading and the definition text below it. */
.mfi-page.nbfc-page .nbfc-answer .fin-journey-heading h2 {
  margin-bottom: 0;
}

.mfi-page.nbfc-page .nbfc-answer .nbfc-answer-text {
  margin-top: 28px;
}

/* Hero texture: the NBFC hero's small tile grid (14px cells) behind the
   heading, in the same place, size and fade-out mask, drawn in the page's
   green instead of blue. */
.mfi-page .fin-hero-center .prod-hero-headline::before {
  background-image:
    linear-gradient(rgba(46, 140, 80, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46, 140, 80, 0.09) 1px, transparent 1px);
  background-position: center top;
  background-repeat: repeat;
  background-size: 14px 14px;
}

/* Accent words in the hero heading: the leaf-green gradient. When the
   accent wraps onto two lines (phones), each line repaints the full
   gradient (box-decoration-break: clone) instead of one gradient being
   stretched over both lines, so the green matches desktop on every screen. */
.mfi-page.nbfc-page .crm-suite-hero.fin-hero-center .fin-hero-title-accent {
  color: #4f9d1e;
  background: linear-gradient(180deg, #6cc02e 0%, #4a9a1a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Demo buttons use the page's green theme: the top-right "Request a Demo"
   (matching the Finance rule it overrides) and the hero "Book Free Demo"
   button and its arrow, each a deeper green on hover. */
.mfi-page.finances-page .ffm-nav-shell.main-container .header-container .header-container-box .top-buttons .start-trial-btn,
.mfi-page.finances-page .ffm-nav-shell.main-container .header-container.header-on-scroll .header-container-box .top-buttons .start-trial-btn,
.mfi-page.finances-page .ffm-nav-shell .top-buttons > #startTrial2,
.mfi-page.finances-page .ffm-nav-shell .header-container.header-on-scroll .top-buttons > #startTrial2 {
  background: #448f19 !important;
  border-color: #448f19 !important;
  box-shadow: 0 6px 16px rgba(68, 143, 25, 0.24) !important;
}

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

.mfi-page .fin-hero-center .fin-hero-email button {
  background: #448f19;
}

.mfi-page .fin-hero-center .fin-hero-email button:hover {
  background: #3a7815;
}

.mfi-page .fin-hero-center .fin-hero-email-arrow {
  color: #448f19;
}

.mfi-page .fin-hero-center .fin-hero-email {
  box-shadow: 0 16px 40px rgba(68, 143, 25, 0.14);
}

/* Hero floating icons (MFI set: center meeting group, village visit pin,
   UPI QR phone, repayment passbook). The NBFC positions put the top pair
   into the wider MFI heading, so they sit further out to the sides and a
   little below the eyebrow, beside the first heading line but clear of it
   (including their float animation). */
.mfi-page .nbfc-hero-float--coin {
  top: 24%;
  left: 4%;
}

.mfi-page .nbfc-hero-float--shield {
  top: 22%;
  right: 4%;
}

/* Each MFI icon has its own layered motion (the icon moves while its
   artwork and a soft ring do something different), replacing the NBFC
   loops:
   - Center-meeting group: travels a slow circular orbit while green
     "meeting" rings ripple out from it.
   - Village visit pin: drops in and bounces, with a landing ripple on the
     ground, then lifts away and repeats.
   - UPI QR phone: rocks gently and does a full 3D turn every cycle, with a
     scan line sweeping over the QR code.
   - Repayment passbook: swings from its top edge like a hanging card and
     its tick badge pops ("payment recorded").
   Motion-sensitive users still get static icons with no rings. */
.mfi-page .mfi-hero-float--group::after,
.mfi-page .mfi-hero-float--visit::after,
.mfi-page .mfi-hero-float--upi::after {
  position: absolute;
  content: "";
  pointer-events: none;
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .mfi-page .mfi-hero-float--group {
    animation: mfi-float-orbit 9s linear infinite;
  }

  .mfi-page .mfi-hero-float--group svg {
    animation: mfi-float-breathe 3s ease-in-out infinite;
  }

  .mfi-page .mfi-hero-float--group::after {
    top: 6%;
    left: 6%;
    width: 88%;
    height: 72%;
    border: 2px solid rgba(74, 154, 26, 0.55);
    border-radius: 50%;
    animation: mfi-float-ripple 3s ease-out infinite;
  }

  .mfi-page .mfi-hero-float--visit {
    transform-origin: 50% 100%;
    animation: mfi-float-drop 3.6s cubic-bezier(0.3, 0, 0.3, 1) infinite;
  }

  .mfi-page .mfi-hero-float--visit::after {
    bottom: -4px;
    left: 50%;
    width: 46px;
    height: 12px;
    margin-left: -23px;
    border: 2px solid rgba(245, 109, 37, 0.55);
    border-radius: 50%;
    animation: mfi-float-land 3.6s ease-out infinite;
  }

  .mfi-page .mfi-hero-float--upi {
    perspective: 400px;
    animation: mfi-float-rock 3.2s ease-in-out infinite;
  }

  .mfi-page .mfi-hero-float--upi svg {
    animation: mfi-float-spin 6.4s cubic-bezier(0.6, 0, 0.4, 1) infinite;
  }

  .mfi-page .mfi-hero-float--upi::after {
    top: 22%;
    left: 22%;
    width: 52%;
    height: 3px;
    background: linear-gradient(90deg, rgba(108, 192, 46, 0), #6cc02e, rgba(108, 192, 46, 0));
    border-radius: 3px;
    box-shadow: 0 0 8px rgba(108, 192, 46, 0.8);
    animation: mfi-float-scan 2.2s ease-in-out infinite;
  }

  .mfi-page .mfi-hero-float--passbook {
    transform-origin: 50% 0;
    animation: mfi-float-swing 4s ease-in-out infinite;
  }

  .mfi-page .mfi-hero-float--passbook svg {
    animation: mfi-float-stamp 4s ease-in-out infinite;
  }
}

@keyframes mfi-float-orbit {
  from { transform: rotate(0deg) translateX(14px) rotate(0deg); }
  to { transform: rotate(360deg) translateX(14px) rotate(-360deg); }
}

@keyframes mfi-float-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

@keyframes mfi-float-ripple {
  0% { transform: scale(0.8); opacity: 0.8; }
  100% { transform: scale(1.7); opacity: 0; }
}

@keyframes mfi-float-drop {
  0% { transform: translateY(-36px); opacity: 0; }
  15% { opacity: 1; }
  30% { transform: translateY(0) scale(1.06, 0.86); }
  38% { transform: translateY(-10px) scale(0.97, 1.04); }
  46%, 80% { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(-36px); opacity: 0; }
}

@keyframes mfi-float-land {
  0%, 28% { transform: scale(0.4); opacity: 0; }
  32% { transform: scale(0.6); opacity: 0.9; }
  60%, 100% { transform: scale(1.8); opacity: 0; }
}

@keyframes mfi-float-rock {
  0%, 100% { transform: rotate(-7deg) translateY(0); }
  50% { transform: rotate(7deg) translateY(-8px); }
}

@keyframes mfi-float-spin {
  0%, 60% { transform: rotateY(0deg); }
  85%, 100% { transform: rotateY(360deg); }
}

@keyframes mfi-float-scan {
  0%, 100% { transform: translateY(0); opacity: 0; }
  10%, 90% { opacity: 1; }
  50% { transform: translateY(30px); }
}

@keyframes mfi-float-swing {
  0%, 100% { transform: rotate(8deg); }
  50% { transform: rotate(-8deg) translateY(-6px); }
}

@keyframes mfi-float-stamp {
  0%, 55%, 100% { transform: scale(1); }
  62% { transform: scale(1.14); }
  70% { transform: scale(0.96); }
  78% { transform: scale(1); }
}

.mfi-page .mfi-hero-meta {
  display: flex;
  margin: 22px auto 0;
  justify-content: center;
}

.mfi-page .mfi-hero-rating {
  display: inline-flex;
  margin: 0;
  align-items: center;
  gap: 10px;
  color: var(--fin-hero-muted, #4b5568);
  font-size: 15px;
  font-weight: 600;
}

.mfi-page .mfi-hero-rating-stars {
  color: #f5a623;
  font-size: 18px;
  letter-spacing: 2px;
}

/* How it works: the heading and Stage 1 read as one section. 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 mid-section. */
.mfi-page.finances-page .crm-workflow-step:first-child {
  background: transparent;
}

/* How it works heading: the first line is only held on one line on wide
   screens; below 1200px it may wrap instead of running past the edges. */
@media (max-width: 1199px) {
  .mfi-page.finances-page .crm-workflow-heading h2 .fin-workflow-lead {
    white-space: normal;
  }
}

/* How it works subheading aligned exactly to the heading's second line
   ("Management Software Verifiable") on desktop. The second line sets the
   width of the heading block; the first line adds no width of its own and
   stays centred on one line, extending evenly past both ends; the
   subheading fills exactly the second line's width. Its first line runs
   edge to edge (justified, so the gaps only grow by a pixel or two) and the
   last line is centred. Not "balanced": balancing split the text into two
   short half-width lines, which is what made it look narrower than the
   heading. Applies from 901px (tablet landscape and up). */
@media (min-width: 901px) {
  .mfi-page.finances-page .crm-section-heading.crm-workflow-heading {
    width: fit-content;
    max-width: min(1200px, 100%);
    margin-inline: auto;
  }

  .mfi-page.finances-page .crm-workflow-heading h2 br {
    display: none;
  }

  .mfi-page.finances-page .crm-workflow-heading h2 .fin-workflow-lead {
    display: flex;
    width: 0;
    min-width: 100%;
    justify-content: center;
    white-space: nowrap;
  }

  .mfi-page.finances-page .crm-workflow-heading h2 .crm-workflow-title-gradient {
    display: block;
  }

  .mfi-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: justify;
    text-align-last: center;
    text-wrap: wrap;
    hyphens: none;
  }
}

/* Features and TrackOlap Collect headings formatted like "How It Works":
   two lines at the same size, the first in dark ink and the second in the
   theme green, and the intro aligned to the heading. On tablet landscape
   and up the heading block is exactly as wide as the heading's widest
   line, and the intro fills that width without widening it: justified so
   both edges sit flush with the heading, last line centred. */
.mfi-page.finances-page .prod-task-capabilities-head h2 .prod-task-capabilities-heading-secondary {
  display: block;
  margin-top: 0;
  color: #3a7815 !important;
  font-size: inherit !important;
  line-height: inherit !important;
  -webkit-text-fill-color: #3a7815 !important;
}

@media (min-width: 901px) {
  .mfi-page.finances-page .prod-task-capabilities-head {
    width: fit-content;
    max-width: min(1100px, 100%);
    margin-inline: auto;
  }

  .mfi-page.finances-page .prod-task-capabilities-head .prod-task-capabilities-heading-primary {
    white-space: nowrap;
  }

  .mfi-page.finances-page .prod-task-capabilities-head .prod-task-capabilities-intro,
  .mfi-page .mfi-collect .nbfc-modules-heading p:not(.fin-section-tag) {
    width: 0;
    min-width: 100%;
    max-width: none;
    margin-inline: auto;
    text-align: justify;
    text-align-last: center;
    text-wrap: wrap;
    hyphens: none;
  }
}

/* Features intro inset under the heading: it starts below the "r" of
   "Everything" and ends below the second "e" of "Needs", i.e. 84% of the
   heading's first line, centred (about 8% in from each end). */
@media (min-width: 901px) {
  .mfi-page.finances-page .prod-task-capabilities-head .prod-task-capabilities-intro {
    min-width: 84%;
  }
}

/* Compare heading: three set lines ("Registers and WhatsApp" / "vs. Generic
   GPS Apps" / "vs. TrackOlap"). On tablet landscape and up the heading
   block is exactly as wide as its widest line, and the intro fills that
   width without widening it, justified so both edges sit flush with the
   heading (last line centred). */
@media (min-width: 901px) {
  .mfi-page.finances-page .fin-compare-heading {
    width: fit-content;
    max-width: min(1100px, 100%);
    margin-inline: auto;
  }

  .mfi-page.finances-page .fin-compare-heading h2 {
    text-wrap: nowrap;
    white-space: nowrap;
  }

  .mfi-page.nbfc-page .fin-compare-heading .nbfc-compare-intro {
    width: 0;
    min-width: 100%;
    max-width: none;
    margin-inline: auto;
    text-align: justify;
    text-align-last: center;
    text-wrap: wrap;
    hyphens: none;
  }
}

/* Footer copyright strip: the NBFC page's darker navy band becomes a
   deeper shade of the footer's green (same transparency, so the footer's
   grid texture still shows through), with the same faint top hairline. */
.mfi-page.nbfc-page .website-footer .copyright-strip {
  background: rgba(20, 52, 9, 0.72);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* Pain points board: each solution card lines up with its problem card.
   Both lists stretch to the board's full height and split it into equal
   rows, so card N on the right has exactly the same top, bottom and height
   as card N on the left whatever the text length; the visual's top lines
   up with the first cards. */
.mfi-page .nbfc-proof .fin-leaks-board {
  align-items: stretch;
}

.mfi-page .nbfc-proof .fin-leaks-list {
  grid-auto-rows: 1fr;
  align-content: stretch;
}

.mfi-page .nbfc-proof .fin-leaks-visual {
  align-self: start;
}

/* Pain points: the platforms line under the board. */
.mfi-page .mfi-platforms {
  display: flex;
  margin: 40px 0 0;
  padding: 0;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  list-style: none;
}

.mfi-page .mfi-platforms li {
  padding: 8px 18px;
  color: var(--crm-blue, #448f19);
  background: #f5fcf1;
  border: 1px solid rgba(68, 143, 25, 0.14);
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
}

/* Governance's heading is short on one line, so its intro would otherwise
   be squeezed to that width; it keeps a wider block instead. */
@media (min-width: 761px) {
  .mfi-page .mfi-governance .nbfc-modules-heading {
    width: auto;
    max-width: 960px;
  }
}

.mfi-page .nbfc-modules-heading p a {
  color: var(--crm-blue, #448f19);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* TrackOlap Collect: capability list on the left, phone mock on the right. */
.mfi-page .mfi-collect {
  background: linear-gradient(180deg, #fafef8 0%, #ffffff 100%);
}

.mfi-page .mfi-collect-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  align-items: center;
  gap: 48px;
}

.mfi-page .mfi-collect-list {
  display: grid;
  margin: 0;
  padding: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  list-style: none;
}

.mfi-page .mfi-collect-item {
  display: flex;
  padding: 22px;
  align-items: flex-start;
  gap: 16px;
  background: #fff;
  border: 1px solid rgba(68, 143, 25, 0.1);
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(11, 21, 48, 0.05);
}

.mfi-page .mfi-collect-item .nbfc-module-icon {
  margin: 0;
  flex: 0 0 auto;
}

.mfi-page .mfi-collect-copy h3 {
  margin: 0 0 6px;
  color: var(--fin-hero-ink, #0b1530);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}

.mfi-page .mfi-collect-copy p {
  margin: 0;
  color: var(--fin-hero-muted, #4b5568);
  font-size: 15px;
  line-height: 1.55;
}

.mfi-page .mfi-collect-phone {
  margin: 0;
  justify-self: center;
}

/* Realistic handset: a graphite metal frame with a thin highlight, side
   buttons, a black bezel around a rounded screen, the Dynamic Island,
   status bar (time, signal, Wi-Fi, battery), an app bar, the content and
   the home indicator, with a soft floor shadow. */
.mfi-page .mfi-phone {
  position: relative;
  width: min(320px, 100%);
  padding: 4px;
  background: linear-gradient(145deg, #4a4f58 0%, #1c1f25 35%, #2b2f36 65%, #0f1115 100%);
  border-radius: 52px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    0 2px 0 rgba(255, 255, 255, 0.08),
    0 40px 70px -20px rgba(11, 21, 48, 0.45),
    0 18px 36px rgba(11, 21, 48, 0.18);
}

.mfi-page .mfi-phone-btn {
  position: absolute;
  width: 4px;
  background: linear-gradient(90deg, #15181d, #3a3f47);
  border-radius: 2px;
}

.mfi-page .mfi-phone-btn--action { top: 96px; left: -3px; height: 26px; }
.mfi-page .mfi-phone-btn--vol-up { top: 140px; left: -3px; height: 46px; }
.mfi-page .mfi-phone-btn--vol-down { top: 196px; left: -3px; height: 46px; }
.mfi-page .mfi-phone-btn--power { top: 162px; right: -3px; height: 72px; }

.mfi-page .mfi-phone-screen {
  position: relative;
  overflow: hidden;
  background: #f6f8f4;
  border: 9px solid #050608;
  border-radius: 48px;
}

.mfi-page .mfi-phone-island {
  position: absolute;
  z-index: 2;
  top: 9px;
  left: 50%;
  width: 92px;
  height: 26px;
  background: #050608;
  border-radius: 999px;
  transform: translateX(-50%);
}

.mfi-page .mfi-phone-status-bar {
  display: flex;
  height: 44px;
  padding: 0 22px 0 26px;
  align-items: center;
  justify-content: space-between;
  color: #0b1530;
  background: #fff;
}

.mfi-page .mfi-phone-time {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.mfi-page .mfi-phone-sys {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.mfi-page .mfi-phone-sys svg {
  width: 15px;
  height: 11px;
  fill: #0b1530;
}

.mfi-page .mfi-phone-battery {
  position: relative;
  display: inline-block;
  width: 23px;
  height: 11px;
  padding: 1.5px;
  border: 1.3px solid rgba(11, 21, 48, 0.45);
  border-radius: 3.5px;
}

.mfi-page .mfi-phone-battery::after {
  position: absolute;
  top: 3px;
  right: -3.5px;
  width: 1.8px;
  height: 4px;
  content: "";
  background: rgba(11, 21, 48, 0.45);
  border-radius: 0 1px 1px 0;
}

.mfi-page .mfi-phone-battery span {
  display: block;
  width: 78%;
  height: 100%;
  background: #0b1530;
  border-radius: 1.5px;
}

.mfi-page .mfi-phone-appbar {
  display: flex;
  padding: 6px 14px 12px;
  align-items: center;
  gap: 8px;
  background: #fff;
  border-bottom: 1px solid #e8eee4;
}

.mfi-page .mfi-phone-appbar svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.mfi-page .mfi-phone-back {
  fill: none;
  stroke: #0b1530;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mfi-page .mfi-phone-more {
  fill: #4b5568;
}

.mfi-page .mfi-phone-appname {
  flex: 1 1 auto;
  color: #0b1530;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

.mfi-page .mfi-phone-body {
  padding: 12px 12px 10px;
}

.mfi-page .mfi-phone-head {
  display: flex;
  margin-bottom: 10px;
  padding: 13px 15px;
  flex-direction: column;
  color: #fff;
  background: linear-gradient(135deg, #448f19 0%, #3a7815 100%);
  border-radius: 16px;
  box-shadow: 0 8px 18px rgba(58, 120, 21, 0.25);
}

.mfi-page .mfi-phone-head strong {
  font-size: 16px;
}

.mfi-page .mfi-phone-head span {
  font-size: 12px;
  opacity: 0.85;
}

.mfi-page .mfi-phone-list {
  display: grid;
  margin: 0;
  padding: 0;
  gap: 7px;
  list-style: none;
}

.mfi-page .mfi-phone-list li {
  display: flex;
  padding: 9px 11px;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid #edf2ea;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(11, 21, 48, 0.04);
}

.mfi-page .mfi-phone-avatar {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  color: #3a7815;
  background: #eaf6e1;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  place-items: center;
}

.mfi-page .mfi-phone-name {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  color: var(--fin-hero-ink, #0b1530);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.3;
}

.mfi-page .mfi-phone-name small {
  color: var(--fin-hero-muted, #4b5568);
  font-size: 12px;
  font-weight: 600;
}

.mfi-page .mfi-phone-status {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
}

.mfi-page .mfi-phone-status--paid {
  color: #15803d;
  background: #dcfce7;
}

.mfi-page .mfi-phone-status--partial {
  color: #b45309;
  background: #fef3c7;
}

.mfi-page .mfi-phone-status--ptp {
  color: #c2410c;
  background: #ffedd5;
}

.mfi-page .mfi-phone-total {
  display: flex;
  margin-top: 10px;
  padding: 13px 15px;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  background: #0b1530;
  border-radius: 14px;
  font-size: 13px;
}

.mfi-page .mfi-phone-total strong {
  font-size: 19px;
}

.mfi-page .mfi-phone-home {
  width: 112px;
  height: 4px;
  margin: 4px auto 8px;
  background: #0b1530;
  border-radius: 999px;
}

.mfi-page .mfi-collect-cta {
  display: flex;
  width: fit-content;
  cursor: pointer;
}

/* Governance: four static cards on the module-card styling. */
.mfi-page .mfi-governance-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.mfi-page .mfi-static-card > div {
  display: flex;
  height: 100%;
  padding: 30px 28px;
  flex-direction: column;
  background: linear-gradient(180deg, #ffffff 0%, #fafef8 100%);
  border: 1px solid rgba(68, 143, 25, 0.1);
  border-radius: 20px;
  box-shadow: 0 16px 36px rgba(11, 21, 48, 0.06);
}

.mfi-page .mfi-static-card p {
  margin-bottom: 0;
}

/* Impact: three stat cards, and the data note beneath them. */
.mfi-page .mfi-impact .fin-results-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mfi-page .mfi-impact-note {
  max-width: 760px;
  margin: 28px auto 0;
  color: var(--fin-hero-muted, #4b5568);
  font-size: 14px;
  font-style: italic;
  line-height: 1.6;
  text-align: center;
}

/* Related blogs: the module cards with a tag in place of the icon. */
.mfi-page .mfi-blog-tag {
  display: inline-block;
  margin-bottom: 16px;
  padding: 5px 12px;
  align-self: flex-start;
  color: #c2410c;
  background: #fff1e8;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.mfi-page .mfi-blogs .nbfc-module-card h3 {
  margin-bottom: 20px;
  font-size: 19px;
}

.mfi-page .mfi-page-updated {
  margin: 40px 0 0;
  color: var(--fin-hero-muted, #4b5568);
  font-size: 14px;
  font-style: italic;
  text-align: center;
}

@media (max-width: 1100px) {
  .mfi-page .mfi-collect-grid {
    grid-template-columns: 1fr;
  }

  .mfi-page .mfi-governance-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .mfi-page .mfi-impact .fin-results-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .mfi-page .mfi-collect-list,
  .mfi-page .mfi-governance-grid {
    grid-template-columns: 1fr;
  }
}

/* Live chat (Antrika) in the page's theme colour (MFI green, #448f19). The
   widget writes its colours as inline custom properties on <html> at
   runtime, derived from one brand colour; these declarations recompute the
   same three values from #448f19 and win over the inline ones because they
   are !important. Scoped with :has() to this page's body only. */
html:has(> body.mfi-page) {
  --widget-body-primary: rgb(61.4, 121.4, 27) !important;
  --widget-body-primary-10: rgb(38.3, 45.8, 34) !important;
  --widget-body-primary-dark: rgb(37.8, 44.2, 34.1) !important;
}

/* Chat launcher and greeting card in the same MFI green: the round chat
   button and the coloured bar on the "Hi there! How can I help you today?"
   card take the colour set in the widget's dashboard as inline styles, so
   they are overridden here with !important. Matched on the stable start of
   the widget's class names (the suffix is a build hash). */
body.mfi-page [class*="antrika_chat_button-label"] {
  background-color: #448f19 !important;
}

body.mfi-page [class*="antrika_chat_button-label"]:hover {
  background-color: #3a7815 !important;
}

body.mfi-page [class*="antrika_chat_chat-initial-div"] > div:first-child {
  border-color: #448f19 !important;
}

/* "Back to top" button in the page's theme colour (MFI green). */
body.mfi-page {
  --back-to-top-bg: #448f19;
  --back-to-top-bg-hover: #3a7815;
}

/* Comparison table (shared industry-compare.css) in the page's MFI green. */
body.mfi-page .ind-compare {
  --ic-accent: #448f19;
  --ic-ours-bg: #f3faef;
  --ic-ours-bg-alt: #e8f5df;
  --ic-value-bg: #eef8e8;
}

/* "Swipe right" pill above the table on phones/tablets (shown by
   finances.css), in the page's green. */
body.mfi-page .ind-compare .ind-compare-swipe {
  background: linear-gradient(90deg, #3a7815 0%, #448f19 100%);
  box-shadow: 0 8px 22px rgba(58, 120, 21, 0.32);
  animation-name: mfi-compare-swipe-glow;
}

@keyframes mfi-compare-swipe-glow {
  0%, 100% { box-shadow: 0 8px 22px rgba(58, 120, 21, 0.32), 0 0 0 0 rgba(68, 143, 25, 0.35); }
  50% { box-shadow: 0 8px 22px rgba(58, 120, 21, 0.32), 0 0 0 8px rgba(68, 143, 25, 0); }
}

@media (prefers-reduced-motion: reduce) {
  body.mfi-page .ind-compare .ind-compare-swipe {
    animation: none;
  }
}

/* Features ("Everything Your MFI Field Team Needs, Built Into One App"):
   taller cards that show each image complete. The image area takes the
   images' own shape (2031 x 1797) at every width instead of the shared
   fixed 430px band, so the card grows with it, and the image is fitted
   whole (contain) rather than cropped to fill, on a white image area. */
.mfi-page.finances-page .prod-task-capability-panel {
  min-height: 0;
}

.mfi-page.finances-page .prod-task-capability-visual {
  width: 100%;
  height: auto;
  min-height: 0;
  padding: 0;
  align-self: center;
  aspect-ratio: 2031 / 1797;
  background: #fff;
}

.mfi-page.finances-page .prod-task-capability-visual::before {
  display: none;
}

.mfi-page.finances-page .prod-task-capability-image {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  object-fit: contain;
}

/* Impact data note on one line on desktop (it fits within the card row);
   it wraps normally on smaller screens. */
@media (min-width: 1100px) {
  .mfi-page .mfi-impact-note {
    max-width: none;
    white-space: nowrap;
  }
}

/* TrackOlap Collect phone, compact: tighter status bar, app bar, meeting
   card, member rows and total so the handset is about as tall as the two
   columns of capability cards beside it (~480px instead of ~590px) and
   lines up with their top and bottom on desktop. Same content. */
.mfi-page .mfi-phone-status-bar {
  height: 36px;
}

.mfi-page .mfi-phone-island {
  top: 7px;
  width: 84px;
  height: 22px;
}

.mfi-page .mfi-phone-appbar {
  padding: 2px 14px 9px;
}

.mfi-page .mfi-phone-body {
  padding: 9px 11px 7px;
}

.mfi-page .mfi-phone-head {
  margin-bottom: 7px;
  padding: 9px 14px;
}

.mfi-page .mfi-phone-head strong {
  font-size: 15px;
}

.mfi-page .mfi-phone-head span {
  font-size: 11.5px;
}

.mfi-page .mfi-phone-list {
  gap: 5px;
}

.mfi-page .mfi-phone-list li {
  padding: 6px 10px;
}

.mfi-page .mfi-phone-avatar {
  width: 27px;
  height: 27px;
}

.mfi-page .mfi-phone-name {
  font-size: 13px;
  line-height: 1.25;
}

.mfi-page .mfi-phone-name small {
  font-size: 11.5px;
}

.mfi-page .mfi-phone-total {
  margin-top: 7px;
  padding: 10px 14px;
}

.mfi-page .mfi-phone-total strong {
  font-size: 18px;
}

.mfi-page .mfi-phone-home {
  margin: 2px auto 6px;
}

.mfi-page .mfi-phone-btn--action { top: 82px; }
.mfi-page .mfi-phone-btn--vol-up { top: 120px; height: 40px; }
.mfi-page .mfi-phone-btn--vol-down { top: 168px; height: 40px; }
.mfi-page .mfi-phone-btn--power { top: 136px; height: 64px; }

/* How It Works stage images slightly larger than the shared template on
   desktop (about 5%): a little wider image column and size cap. */
@media (min-width: 992px) {
  .mfi-page.sales-crm-softwares-page .crm-workflow-media {
    width: 89%;
  }

  .mfi-page.sales-crm-softwares-page .crm-workflow-media img {
    width: min(100%, 715px);
    max-height: 495px;
  }
}

/* "Plan the Beat" image: its file has much wider empty margins around the
   card than the other stage images, so at the shared size its card read
   smaller. On desktop the image is drawn wider (its empty edges spill into
   the column gap) so the card comes out the same size as the other stages'
   cards (e.g. "Track the Field Live", about 475px wide), and the empty top
   and bottom are pulled in so the row keeps the same height. */
@media (min-width: 992px) {
  .mfi-page.sales-crm-softwares-page .crm-workflow-media img[src*="plan-the-beat"] {
    width: min(136%, 815px);
    max-width: none;
    max-height: none;
    height: auto;
    margin-block: -24px;
    flex: 0 0 auto;
  }
}

/* "What Is MFI Field Operations Management Software?": the courtyard
   meeting photo (two women with a passbook and a loan officer). Cropped
   from the centre so all three people stay in frame on desktop, and shown
   at its own 3:2 shape when it stacks under the text. */
.mfi-page .nbfc-answer-media img {
  object-position: 55% 30%;
}

@media (max-width: 1100px) {
  /* Stacked under the text: the whole photo as a rounded card with space
     below it, without the desktop's faded left and top edges. */
  .mfi-page .nbfc-answer {
    padding-bottom: 48px;
  }

  .mfi-page .nbfc-answer-media {
    aspect-ratio: 1536 / 1024;
    border-radius: 20px;
    box-shadow: 0 14px 34px rgba(20, 52, 9, 0.12);
  }

  .mfi-page .nbfc-answer-media img {
    object-position: center;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

@media (max-width: 560px) {
  .mfi-page .nbfc-answer {
    padding-bottom: 36px;
  }

  .mfi-page .nbfc-answer-media {
    width: calc(100% - 32px);
    margin-top: 28px;
    border-radius: 16px;
  }
}