/* NBFC industry page (/industry/nbfc-field-force-management-software).
   The page body also carries `finances-page`, so finances.css supplies the
   whole Finance design (hero, sections, spacing, animations). This file only
   adds the NBFC-only pieces and adjusts headings whose copy is longer than
   the Finance page's. Everything is scoped to `.nbfc-page`. */

/* Hero heading: keep the NBFC page's original layout. finances.css later
   gave the Finance hero a smaller, unbroken three-line heading (1240px
   column, 4.3vw, nowrap lines); that rule also reaches this page through the
   shared `finances-page` class, so restore the earlier values here. */
.nbfc-page .fin-hero-center .prod-hero-copy {
  max-width: 1120px;
}

.nbfc-page .fin-hero-center .prod-hero-headline {
  font-size: clamp(34px, 4.6vw, 68px);
}

.nbfc-page .fin-hero-center .crm-hero-title-line {
  white-space: normal;
}

/* Hero heading accent words ("Management Software", "On Record") use the
   deeper blue of the "Book Free Demo" button's hover state (#164bd6). */
.nbfc-page .crm-suite-hero.fin-hero-center .fin-hero-title-accent {
  color: #164bd6;
  background: none;
  -webkit-text-fill-color: #164bd6;
}

/* Hero description in two balanced, centred lines on desktop (131 and
   129 characters, split after "...loan recovery)"). Below 1200px it wraps
   naturally. */
@media (min-width: 1200px) {
  /* The description scales with the heading (0.254 x its
     clamp(34px, 4.6vw, 68px)), so both lines end level with the heading's
     first line, "NBFC Management Software", at every desktop width. */
  .nbfc-page .fin-hero-center .prod-hero-sub {
    max-width: none;
    font-size: min(17.25px, 1.168vw);
  }

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

/* Texture: the small tile grid (about 14px cells, from the supplied
   texture) replaces the Finance page's larger 48px / 82px grid everywhere
   that grid is drawn (hero heading, and behind the Capabilities, Lending Models,
   Governance, Compare, Impact and One Platform headings). Only the pattern changes: the
   lines keep the previous faint brand-blue colour, and each layer keeps its
   Finance position, size and fade-out mask. */
.nbfc-page .fin-hero-center .prod-hero-headline::before,
.nbfc-page .crm-section-heading.crm-workflow-heading::before,
.nbfc-page .crm-section-heading.crm-communication-heading::before,
.nbfc-page :is(.fin-results-heading, .prod-task-capabilities-head, .fin-compare-heading, .nbfc-modules-heading)::before {
  background-image:
    linear-gradient(rgba(30, 91, 250, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 91, 250, 0.09) 1px, transparent 1px);
  background-position: center top;
  background-repeat: repeat;
  background-size: 14px 14px;
}

/* Hero texture ends with the heading: instead of the section-wide grid
   block (which ran on behind the description), the grid is drawn from the
   headline, reaching up to the top of the hero (clipped there by the hero's
   overflow) and stopping at the bottom of the last heading line, whatever
   the heading's height. Same width and side fade as before. */
.nbfc-page .fin-hero-grid {
  display: none;
}

.nbfc-page .fin-hero-center .prod-hero-eyebrow {
  position: relative;
  z-index: 1;
}

.nbfc-page .fin-hero-center .prod-hero-headline {
  position: relative;
  z-index: 0;
}

.nbfc-page .fin-hero-center .prod-hero-headline::before {
  position: absolute;
  z-index: -1;
  top: -420px;
  bottom: 0;
  left: 50%;
  width: min(760px, 52vw);
  content: "";
  pointer-events: none;
  transform: translateX(-50%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 94%, 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 94%, transparent 100%),
    linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
  mask-composite: intersect;
}

@media (max-width: 900px) {
  .nbfc-page .fin-hero-center .prod-hero-headline::before {
    width: 86vw;
  }
}

/* Hero floating icons: four 3D-style NBFC icons (rupee coin, geo pin,
   compliance shield, digital receipt) around the heading, two on each side,
   each drifting on its own loop like the reference hero. Decorative; they
   sit behind the hero copy, are hidden below 1200px (no room beside the
   heading there) and stay still for reduced-motion users. */
.nbfc-page .nbfc-hero-floats {
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
}

.nbfc-page .fin-hero-center .crm-suite-hero-inner {
  position: relative;
  z-index: 1;
}

.nbfc-page .nbfc-hero-float {
  position: absolute;
  display: block;
  filter: drop-shadow(0 14px 18px rgba(11, 21, 48, 0.16));
}

.nbfc-page .nbfc-hero-float svg {
  display: block;
  width: 100%;
  height: auto;
}

.nbfc-page .nbfc-hero-float--coin {
  top: 34%;
  left: 10%;
  width: 74px;
  animation: nbfc-float-loop 5s linear infinite;
}

.nbfc-page .nbfc-hero-float--pin {
  top: 66%;
  left: 6%;
  width: 60px;
  animation: nbfc-float-sway 5s linear infinite;
}

.nbfc-page .nbfc-hero-float--shield {
  top: 28%;
  right: 10%;
  width: 66px;
  animation: nbfc-float-drift 5s linear infinite;
}

.nbfc-page .nbfc-hero-float--receipt {
  top: 60%;
  right: 6%;
  width: 64px;
  animation: nbfc-float-pulse 2s ease-in-out infinite alternate;
}

@keyframes nbfc-float-loop {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(25px, -25px); }
  50% { transform: translate(0, -35px); }
  75% { transform: translate(-25px, -25px); }
}

@keyframes nbfc-float-sway {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(-10px, 10px) rotate(10deg); }
  50% { transform: translate(5px, -5px) rotate(25deg); }
  75% { transform: translate(15px, -5px) rotate(15deg); }
}

@keyframes nbfc-float-drift {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(10px, 20px); }
  50% { transform: translate(30px, 30px); }
  75% { transform: translate(20px, 10px); }
}

@keyframes nbfc-float-pulse {
  from { transform: scale(0.85); }
  to { transform: scale(1.15); }
}

@media (max-width: 1199px) {
  .nbfc-page .nbfc-hero-floats {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nbfc-page .nbfc-hero-float {
    animation: none;
  }
}

/* Customer logos: the Employee Live Tracking page's section. That page
   reserves 215px of top padding for its overlapping hero image; here it
   simply follows the hero, so the spacing is reduced. Logos use that
   page's larger size. */
.nbfc-page .ffm-logo-section {
  padding-top: 24px;
  /* Same colour the hero ends on (#f3f8ff), so the logo section merges
     into the hero instead of starting a white band. */
  background: #f3f8ff;
}

/* No hairline between the hero and the logo section (the Finance page
   skips it for its own logo strip too). Matching specificity to override. */
.nbfc-page main > section.ffm-logo-section:not(.crm-suite-hero):not(.crm-trust) {
  border-top: 0;
}

/* Logo tiles take the section colour too; images with a white background
   (JPG/PNG logos) are multiplied so their white box blends away. */
.nbfc-page .ffm-logo-section .company-logo-item {
  background: transparent;
}

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

/* The hero's bottom padding was sized for the Finance logo strip, which
   overlapped the hero by 68px; the new section does not overlap, so the
   hero ends a little sooner after the email / demo bar. */
.nbfc-page .fin-hero-center .crm-suite-hero-inner {
  padding-bottom: 96px;
}

@media (max-width: 900px) {
  .nbfc-page .fin-hero-center .crm-suite-hero-inner {
    padding-bottom: 64px;
  }
}

.nbfc-page .ffm-logo-section .company-logo-image {
  width: calc(100% - 24px);
  max-width: 164px;
  height: 64px;
}

/* Section backgrounds follow the Finance page's alternating sequence, using
   its two exact gradients ("light" = hero glow, "deep" = The Platform glow).
   NBFC order: Hero (light), Quick Answer (deep), Field Reality, Stages
   (light), demo CTA, Governance (deep), Lending Models (light), Compare
   (deep), Built for Field Scale (light), One Platform (deep), Get Started,
   FAQ. Without this, two deep and two light sections sat back to back and
   One Platform was plain white. */
.nbfc-page .crm-section.crm-communication,
.nbfc-page .fin-results {
  background:
    radial-gradient(ellipse 36% 58% at 50% 0%, rgba(110, 166, 255, 0.42) 0%, rgba(150, 192, 255, 0.18) 50%, rgba(150, 192, 255, 0) 100%),
    linear-gradient(180deg, #ebf3ff 0%, #f3f8ff 45%);
}

.nbfc-page .fin-compare,
.nbfc-page .nbfc-modules {
  background:
    radial-gradient(ellipse 60% 95% at 50% 0%, rgba(110, 168, 255, 0.4) 0%, rgba(140, 186, 255, 0.18) 50%, rgba(140, 186, 255, 0) 90%),
    linear-gradient(180deg, #e9f2ff 0%, #f3f8ff 100%);
}

/* Longer NBFC headlines: let them wrap instead of forcing one line. */
.nbfc-page .fin-leaks-heading h2 .fin-leaks-lead,
.nbfc-page .crm-communication-heading h2 .fin-segments-lead {
  white-space: normal !important;
}

/* Quick Answer, rebuilt from the supplied reference: copy on the left
   (eyebrow, two-line headline, the two answer paragraphs and the "Field
   Operations Layer" icon strip), and on the right the field visit photo
   from the supplied banner, bleeding to the viewport edge. The section
   keeps its previous height (about 580px on desktop). The light blue wash
   fades into white behind the copy, like the reference. */
.nbfc-page .nbfc-answer {
  padding: 56px 0;
  background:
    radial-gradient(ellipse 55% 80% at 0% 50%, rgba(194, 218, 255, 0.55) 0%, rgba(194, 218, 255, 0) 100%),
    linear-gradient(180deg, #eef5ff 0%, #f7faff 100%);
}

/* No vertical line texture in this section (the Finance page draws it
   with ::before). */
.nbfc-page .nbfc-answer::before {
  display: none;
}

.nbfc-page .nbfc-answer-container {
  position: relative;
  z-index: 2;
}

/* Desktop is a 50/50 split: the copy fills the left half of the
   container (less a 40px gutter), the photo fills the right half of the
   section. */
.nbfc-page .nbfc-answer-copy {
  width: calc(50% - 40px);
}

.nbfc-page .nbfc-answer .fin-journey-heading {
  max-width: none;
  margin: 0;
  text-align: left;
}

.nbfc-page .nbfc-answer .fin-journey-heading h2 {
  font-size: clamp(30px, 3.3vw, 48px);
  line-height: 1.12;
}

.nbfc-page .nbfc-answer .fin-journey-heading h2 .fin-journey-lead {
  display: block;
  color: var(--fin-hero-ink);
}

.nbfc-page .nbfc-answer .fin-journey-heading h2 span:not(.fin-journey-lead) {
  color: #164bd6;
  white-space: nowrap;
}

/* "NBFC" closes the first line in the same blue as the second line
   (outranks the Finance page's !important accent colour). */
.nbfc-page .nbfc-answer .fin-journey-heading h2 .fin-journey-lead .fin-journey-accent.fin-journey-accent.fin-journey-accent {
  color: #164bd6 !important;
  -webkit-text-fill-color: #164bd6 !important;
}

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

.nbfc-page .nbfc-answer .nbfc-answer-text p {
  margin: 0;
  color: #3a4456;
  font-size: 16px;
  line-height: 1.65;
}

.nbfc-page .nbfc-answer .nbfc-answer-text p + p {
  margin-top: 12px;
}

/* Desktop: the copy column is exactly as wide as the headline's longer
   line ("Management Software?"). The paragraphs and the icon strip take
   that width without widening it (width 0, min-width 100%), so the text,
   the headline and "Agents" all end on the same right edge, and
   "Onboarding" starts on the left edge. The strip's dividers are drawn on
   the list at the column boundaries, so pinning the first and last items
   to the edges does not move them. */
@media (min-width: 1101px) {
  .nbfc-page .nbfc-answer-copy {
    width: fit-content;
    max-width: calc(50% - 40px);
  }

  .nbfc-page .nbfc-answer .nbfc-answer-text,
  .nbfc-page .nbfc-answer .nbfc-layer {
    width: 0;
    min-width: 100%;
  }

  .nbfc-page .nbfc-layer-list {
    background:
      linear-gradient(rgba(30, 91, 250, 0.16), rgba(30, 91, 250, 0.16)) 16.667% 0 / 1px 100% no-repeat,
      linear-gradient(rgba(30, 91, 250, 0.16), rgba(30, 91, 250, 0.16)) 33.333% 0 / 1px 100% no-repeat,
      linear-gradient(rgba(30, 91, 250, 0.16), rgba(30, 91, 250, 0.16)) 50% 0 / 1px 100% no-repeat,
      linear-gradient(rgba(30, 91, 250, 0.16), rgba(30, 91, 250, 0.16)) 66.667% 0 / 1px 100% no-repeat,
      linear-gradient(rgba(30, 91, 250, 0.16), rgba(30, 91, 250, 0.16)) 83.333% 0 / 1px 100% no-repeat;
  }

  .nbfc-page .nbfc-layer-item + .nbfc-layer-item {
    border-left: 0;
  }

  .nbfc-page .nbfc-layer-item:first-child {
    padding-left: 0;
    justify-self: start;
  }

  .nbfc-page .nbfc-layer-item:last-child {
    padding-right: 0;
    justify-self: end;
  }
}

/* Compact desktop height: tighter padding and spacing throughout (the
   headline keeps its size, since it sets the column width and so the
   paragraph line count). The photo fills the section height, so it
   shrinks with it; its focus moves up slightly to keep both faces in. */
@media (min-width: 1101px) {
  .nbfc-page .nbfc-answer {
    padding: 36px 0;
  }

  .nbfc-page .nbfc-answer .fin-section-tag {
    margin-bottom: 12px !important;
  }

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

  .nbfc-page .nbfc-answer .nbfc-answer-text p {
    line-height: 1.58;
  }

  .nbfc-page .nbfc-answer .nbfc-answer-text p + p {
    margin-top: 8px;
  }

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

  .nbfc-page .nbfc-answer .nbfc-layer-title {
    margin-bottom: 12px;
    font-size: 17px;
  }

  .nbfc-page .nbfc-answer .nbfc-layer-item {
    gap: 6px;
  }

  .nbfc-page .nbfc-answer .nbfc-layer-item svg {
    width: 28px;
    height: 28px;
  }

  .nbfc-page .nbfc-answer-media img {
    object-position: right 28%;
  }
}

/* Right column: the field operations photo (agent with tablet, customer,
   map circle with GPS pins, house behind) fills the right half of the
   section, anchored to its right edge and cropped from the left/bottom as
   the half changes shape. Its pale left and top edges fade into the
   section background so there is no visible seam. */
.nbfc-page .nbfc-answer-media {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 50%;
  overflow: hidden;
  pointer-events: none;
}

.nbfc-page .nbfc-answer-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right 35%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%), linear-gradient(180deg, transparent 0%, #000 8%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, #000 14%), linear-gradient(180deg, transparent 0%, #000 8%);
  mask-composite: intersect;
}

/* "TrackOlap Field Operations Layer": a short rule leading into the label,
   then six icon items split by thin dividers. */
.nbfc-page .nbfc-layer {
  margin-top: 28px;
}

.nbfc-page .nbfc-layer-title {
  display: flex;
  margin: 0 0 22px;
  align-items: center;
  gap: 14px;
  color: var(--fin-hero-ink);
  font-size: 18px;
  font-weight: 700;
}

.nbfc-page .nbfc-layer-title::before {
  width: 64px;
  height: 2px;
  flex: 0 0 auto;
  background: #1e5bfa;
  content: "";
}

.nbfc-page .nbfc-layer-title strong {
  margin-right: -6px;
  color: #164bd6;
  font-weight: 800;
}

.nbfc-page .nbfc-layer-list {
  display: grid;
  margin: 0;
  padding: 0;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  list-style: none;
}

.nbfc-page .nbfc-layer-item {
  display: flex;
  padding: 0 8px;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--fin-hero-ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}

.nbfc-page .nbfc-layer-item + .nbfc-layer-item {
  border-left: 1px solid rgba(30, 91, 250, 0.16);
}

.nbfc-page .nbfc-layer-item svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.nbfc-page .nbfc-layer-item--orange svg {
  color: #f28c28;
}

.nbfc-page .nbfc-layer-item--blue svg {
  color: #1e5bfa;
}

/* Customer Stories (shared partial, styled by products.css as on the Field
   Force Management page), with the page's own background, heading style
   and logo panel colour. */
/* Section background: the same blue glow and heading grid texture as
   Governance & Compliance (the Finance page's "deep" gradient, with the
   14px grid behind the pill and headline, fading out at the sides and
   below). overflow: clip keeps the texture inside this section. */
.nbfc-page .nbfc-stories .prod-stories {
  position: relative;
  overflow: clip;
  background:
    radial-gradient(ellipse 60% 95% at 50% 0%, rgba(110, 168, 255, 0.4) 0%, rgba(140, 186, 255, 0.18) 50%, rgba(140, 186, 255, 0) 90%),
    linear-gradient(180deg, #e9f2ff 0%, #f3f8ff 100%);
}

.nbfc-page .nbfc-stories .prod-stories-head {
  position: relative;
  isolation: isolate;
}

.nbfc-page .nbfc-stories .prod-stories-head::before {
  position: absolute;
  z-index: -1;
  top: -96px;
  bottom: -24px;
  left: 50%;
  width: min(1000px, 100vw);
  background-image:
    linear-gradient(rgba(30, 91, 250, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 91, 250, 0.09) 1px, transparent 1px);
  background-position: center top;
  background-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;
}

/* Heading in the page's section style (as "Built for Field Scale"): the
   bookmark pill and the 800-weight headline in ink with a solid blue
   accent, replacing the shared partial's plain eyebrow and gradient text. */
.nbfc-page .nbfc-stories .prod-stories-eyebrow {
  display: inline-flex;
  width: fit-content;
  margin: 0 auto 18px;
  padding: 8px 18px;
  align-items: center;
  gap: 8px;
  color: var(--crm-blue);
  background: #eef4ff;
  border: 1px solid rgba(30, 91, 250, 0.14);
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(30, 91, 250, 0.1);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.nbfc-page .nbfc-stories .prod-stories-eyebrow::before {
  width: 12px;
  height: 15px;
  flex: 0 0 auto;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 15'%3E%3Cpath d='M0 1.5A1.5 1.5 0 0 1 1.5 0h9A1.5 1.5 0 0 1 12 1.5V15l-6-3.6L0 15z' fill='%231e5bfa'/%3E%3C/svg%3E") center / contain no-repeat;
  content: "";
}

.nbfc-page .nbfc-stories .prod-stories-head {
  max-width: 1000px;
}

.nbfc-page .nbfc-stories .prod-stories-head h2 {
  color: var(--fin-hero-ink);
  font-size: clamp(28px, 3.4vw, 48px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.12;
}

.nbfc-page .nbfc-stories .prod-stories-head h2 span {
  color: var(--crm-blue);
  background: none;
  -webkit-text-fill-color: var(--crm-blue);
}

/* Logo panel: one solid colour, the hero headline's blue accent
   ("Record", #164bd6), with no gradient or glow. */
.nbfc-page .nbfc-stories .prod-story-company {
  background: #164bd6;
}

.nbfc-page .nbfc-stories .prod-story-company-glow {
  display: none;
}

/* Highlighted heading words in every light section use the hero
   headline's accent blue (#164bd6) instead of the lighter template blue
   (#1e5bfa) or the Capabilities gradient. The dark-ink lead spans are
   excluded, and so is the demo form card (white heading on blue). The
   :not() list also lifts this above the Finance page's !important accent
   rules. */
.nbfc-page :is(.nbfc-answer, .nbfc-proof, .crm-workflow, .prod-task-capabilities, .nbfc-lending, .fin-compare, .fin-results, .nbfc-stories, .nbfc-modules, .crm-get-started, .crm-faq) h2 span:not(.fin-journey-lead):not(.fin-leaks-lead):not(.fin-workflow-lead):not(.fin-segments-lead):not(.nbfc-modules-line):not(.prod-task-capabilities-heading-primary) {
  color: #164bd6 !important;
  background: none !important;
  -webkit-text-fill-color: #164bd6 !important;
}

/* Footer (NBFC page only): the shared footer's teal-navy becomes a deep
   shade of the page's blue (#164bd6), with brighter blue light rising
   from the bottom corners, as in the supplied reference, and the page's
   14px heading grid texture across the whole footer (faint white lines on
   the dark blue). The copyright strip is a shade darker and lets the
   texture show through. Text stays white. */
.nbfc-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(47, 107, 255, 0.55) 0%, rgba(47, 107, 255, 0) 100%),
    radial-gradient(ellipse 45% 70% at 100% 100%, rgba(47, 107, 255, 0.55) 0%, rgba(47, 107, 255, 0) 100%),
    linear-gradient(180deg, #0a2470 0%, #0e2f8f 100%);
}

.nbfc-page .website-footer .copyright-strip {
  background: rgba(6, 22, 72, 0.72);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* Footer icons: the shared cyan tint becomes plain white on the blue
   footer, for the social media icons in the bottom strip and the address,
   email and phone icons. Social icons dim slightly on hover. */
.nbfc-page .website-footer .copyright-strip .icons img,
.nbfc-page .website-footer .web-footer-menu-items > img {
  filter: brightness(0) invert(1);
}

.nbfc-page .website-footer .copyright-strip .icons a {
  transition: opacity 0.2s ease;
}

.nbfc-page .website-footer .copyright-strip .icons a:hover {
  opacity: 0.75;
}

/* Mobile: the footer menus are accordions that the shared styles paint
   teal-navy; let the blue footer show through them instead. */
@media (max-width: 770px) {
  .nbfc-page .website-footer .website-footer-layout .accordion-item,
  .nbfc-page .website-footer .website-footer-layout .accordion-button,
  .nbfc-page .website-footer .website-footer-layout .accordion-button.collapsed,
  .nbfc-page .website-footer .website-footer-layout .accordion-button:not(.collapsed),
  .nbfc-page .website-footer .website-footer-layout .accordion-body {
    background: transparent !important;
  }
}

/* Demo form section on scroll: instead of fading up, the text slides in
   from the left and the form from the right, meeting in place. Uses the
   page's scroll-reveal classes (fin-reveal / is-revealed); the card's
   overflow: hidden keeps the slide inside it, so no sideways scroll. */
.nbfc-page .fin-cta-form-copy.fin-reveal {
  transform: translate3d(-80px, 0, 0);
}

.nbfc-page .fin-cta-form-panel.fin-reveal {
  transform: translate3d(80px, 0, 0);
}

.nbfc-page :is(.fin-cta-form-copy, .fin-cta-form-panel).fin-reveal {
  transition:
    opacity 900ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

.nbfc-page :is(.fin-cta-form-copy, .fin-cta-form-panel).fin-reveal.is-revealed {
  transform: none;
}

/* Stage 1 image is the only stage artwork without a transparent
   background, so its pale backdrop showed as a square. Its edges fade out
   (about 8-10%, clear of the person, phone and KYC card) so it blends into
   the section like the other six. */
.nbfc-page .crm-workflow-media img[src$="stage-1-customer-onboarding-kyc.webp"] {
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-composite: intersect;
}

/* Governance & Compliance images (4:3, 2199 x 1650) were cropped: the
   shared layout gives the image column only ~0.8fr and fills it with
   object-fit: cover, so the near-square frame cut ~25% off the sides.
   Card copy and image now split the card evenly, which brings the frame
   close to 4:3 (only a sliver of edge decoration is trimmed, evenly from
   both sides). Stacked on mobile, the frame takes the image's own ratio,
   so nothing is cut. */
.nbfc-page .prod-task-capability-panel {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.nbfc-page .prod-task-capability-image {
  object-position: center;
}

@media (max-width: 768px) {
  .nbfc-page .prod-task-capability-panel {
    grid-template-columns: 1fr;
  }

  .nbfc-page .prod-task-capability-visual {
    min-height: 0;
    height: auto;
    aspect-ratio: 2199 / 1650;
  }
}

/* Below 1100px the photo moves under the copy as a rounded card, and the
   route and halo are dropped. */
@media (max-width: 1100px) {
  .nbfc-page .nbfc-answer {
    display: flex;
    padding: 64px 0 0;
    flex-direction: column;
  }

  .nbfc-page .nbfc-answer-container {
    display: block;
  }

  .nbfc-page .nbfc-answer-copy {
    width: 100%;
    max-width: 720px;
    margin-inline: auto;
  }

  /* Stacked: the whole photo under the copy, at its own proportions. */
  .nbfc-page .nbfc-answer-media {
    position: relative;
    inset: auto;
    left: auto;
    order: 2;
    width: min(calc(100% - 48px), 720px);
    margin: 40px auto 0;
    aspect-ratio: 1429 / 1100;
    border-radius: 24px 24px 0 0;
  }
}

@media (max-width: 560px) {
  .nbfc-page .nbfc-answer .fin-journey-heading h2 span:not(.fin-journey-lead) {
    white-space: normal;
  }

  .nbfc-page .nbfc-layer-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 22px;
  }

  .nbfc-page .nbfc-layer-item:nth-child(4) {
    border-left: 0;
  }
}

/* Centre visual: the presenter holding the TrackOlap dashboard (2:3,
   transparent background). He stands as tall as the card columns (about
   640px on desktop) and overlaps the round ring texture: the rings are a
   little smaller than his height, so his head and shoes extend past them.
   The board gap and the dashed connectors are shortened slightly so the
   cards keep their width next to the larger figure. */
.nbfc-page .nbfc-proof .fin-leaks-board {
  gap: 48px;
}

.nbfc-page .nbfc-proof .fin-leaks-visual {
  width: 430px;
  padding: 0;
}

.nbfc-page .nbfc-proof .fin-leaks-visual::before {
  top: 52%;
  width: 500px;
  height: 500px;
}

.nbfc-page .nbfc-proof .fin-leaks-visual img {
  filter: drop-shadow(0 18px 28px rgba(11, 21, 48, 0.14));
}

/* The pointing presenter (holding the laptop in one hand, pointing at it
   with the other) is sized by height to stand as tall as before (645px
   desktop, 510px below 1240px), centred in the same column.
   The supplied high-resolution artwork has its own rings on a white
   background (no transparency), so it is blended with multiply: the white
   drops out against the section's white centre and only the figure and
   its rings remain. Its outer edges fade so no image box can show, the
   page's own ring decoration is hidden so the rings are not doubled, and
   the drop shadow is removed (it would outline the rectangle). */
.nbfc-page .nbfc-proof .fin-leaks-visual img {
  width: auto;
  max-width: 100%;
  height: 645px;
  margin-inline: auto;
  filter: none;
  mix-blend-mode: multiply;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, #000 3%, #000 97%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 1.5%, #000 98.5%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0%, #000 3%, #000 97%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 1.5%, #000 98.5%, transparent 100%);
  mask-composite: intersect;
}

.nbfc-page .nbfc-proof .fin-leaks-visual::before {
  display: none;
}

@media (max-width: 1240px) {
  .nbfc-page .nbfc-proof .fin-leaks-visual img {
    height: 510px;
  }
}

@media (max-width: 560px) {
  .nbfc-page .nbfc-proof .fin-leaks-visual img {
    height: 440px;
  }
}

.nbfc-page .nbfc-proof .fin-leaks-card::after {
  width: 30px;
}

.nbfc-page .nbfc-proof .fin-leaks-list--problem .fin-leaks-card::before {
  left: calc(100% + 30px);
}

.nbfc-page .nbfc-proof .fin-leaks-list--fix .fin-leaks-card::before {
  right: calc(100% + 30px);
}

@media (max-width: 1240px) {
  .nbfc-page .nbfc-proof .fin-leaks-board {
    gap: 36px;
  }

  .nbfc-page .nbfc-proof .fin-leaks-visual {
    width: 340px;
  }

  .nbfc-page .nbfc-proof .fin-leaks-visual::before {
    width: 400px;
    height: 400px;
  }

  .nbfc-page .nbfc-proof .fin-leaks-card::after {
    width: 20px;
  }

  .nbfc-page .nbfc-proof .fin-leaks-list--problem .fin-leaks-card::before {
    left: calc(100% + 20px);
  }

  .nbfc-page .nbfc-proof .fin-leaks-list--fix .fin-leaks-card::before {
    right: calc(100% + 20px);
  }
}

@media (max-width: 1024px) {
  .nbfc-page .nbfc-proof .fin-leaks-visual {
    width: min(340px, 80%);
  }

  .nbfc-page .nbfc-proof .fin-leaks-visual::before {
    width: 380px;
    height: 380px;
  }
}

.nbfc-page .nbfc-proof .fin-leaks-heading p {
  max-width: 900px;
  margin-inline: auto;
}

/* NBFC Field Reality centre visual: the supplied phone artwork (with its
   own soft rings, transparent background) in place of the presenter
   photo; the problem and fix cards around it stay as text. NBFC only (the
   MFI page shares this section's classes and keeps its presenter). The
   column keeps the presenter's width, the page's own rings are hidden so
   they are not doubled, and the presenter's sizing, blend, edge fade and
   shadow are reset so the artwork shows at its natural proportions. */
body.nbfc-page:not(.mfi-page) .nbfc-proof .fin-leaks-visual::before {
  display: none;
}

body.nbfc-page:not(.mfi-page) .nbfc-proof .fin-leaks-visual .nbfc-proof-phone-image {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 22px 34px rgba(11, 21, 48, 0.12));
  mix-blend-mode: normal;
  -webkit-mask-image: none;
  mask-image: none;
}

@media (max-width: 1240px) {
  body.nbfc-page:not(.mfi-page) .nbfc-proof .fin-leaks-visual .nbfc-proof-phone-image {
    height: auto;
  }
}

@media (max-width: 560px) {
  body.nbfc-page:not(.mfi-page) .nbfc-proof .fin-leaks-visual .nbfc-proof-phone-image {
    height: auto;
  }
}

/* Every Lending Model: the supplied tab images are 3:2 with their own
   rounded backgrounds, so the frame takes the same 3:2 shape and the image
   fills it exactly (no side bars, nothing cropped). NBFC only. */
body.nbfc-page:not(.mfi-page) .nbfc-lending .crm-communication-visual {
  aspect-ratio: 3 / 2;
  padding: 0;
  background: none;
  border: 0;
}

body.nbfc-page:not(.mfi-page) .nbfc-lending .crm-communication-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Governance & Compliance images on smaller screens: nothing in the
   artwork may be cut.
   - Up to 768px (image above the text): the shared 42px lift of the text
     block (Sales CRM base style and the scroll animation) would slide it
     over the bottom of the image, where
     several images carry text ("Outside hours flagged", "DPDP Act, 2023").
     The text block keeps its fade-in but is not lifted.
   - 769px to 991px (image beside the text, in a frame taller than wide):
     the image is shown whole (contain) instead of filling and cropping
     the frame, centred on the card's white. */
@media (max-width: 768px) {
  body.nbfc-page:not(.mfi-page) .prod-task-capability-panel .prod-task-capability-copy,
  body.nbfc-page:not(.mfi-page) .prod-task-capability-copy.fin-reveal,
  body.nbfc-page:not(.mfi-page) .prod-task-capability-copy.fin-reveal.is-revealed {
    transform: none;
  }
}

@media (min-width: 769px) and (max-width: 991.98px) {
  body.nbfc-page:not(.mfi-page) .prod-task-capability-visual {
    background: #fff;
  }

  body.nbfc-page:not(.mfi-page) .prod-task-capability-image {
    object-fit: contain;
  }
}

/* Governance & Compliance on tablet and mobile: the same stacking cards
   as desktop. Each card pins just below the fixed 65px header and the
   next one slides up over it as you scroll (the shared styles only turn
   this on from 992px). Later cards sit above earlier ones, and a soft
   upward shadow marks each card's top edge as it covers the one below. */
@media (max-width: 991.98px) {
  body.nbfc-page:not(.mfi-page) .prod-task-capability-panel {
    position: sticky;
    z-index: calc(10 + var(--capability-index));
    top: 76px;
    box-shadow:
      0 -10px 30px rgba(6, 26, 53, 0.08),
      0 18px 40px rgba(6, 26, 53, 0.12);
  }

  body.nbfc-page:not(.mfi-page) .prod-task-capability-panel:not(:last-child) {
    margin-bottom: 22px;
  }
}

/* Compare: "Swipe right to see the complete table" hint. Hidden while
   the whole table fits (it needs ~980px); shown on narrower screens, where
   the table scrolls sideways, as a small pill with a nudging arrow. It
   fades out once the visitor starts scrolling the table. */
.ind-compare-swipe {
  display: none;
}

@media (max-width: 1060px) {
  body.nbfc-page:not(.mfi-page) .ind-compare .ind-compare-swipe {
    display: flex;
    width: fit-content;
    margin: 0 auto 14px;
    padding: 8px 16px;
    align-items: center;
    gap: 8px;
    color: #fff;
    background: linear-gradient(90deg, #164bd6 0%, #1e5bfa 100%);
    border: 0;
    border-radius: 999px;
    box-shadow: 0 8px 22px rgba(22, 75, 214, 0.32);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    transition: opacity 300ms ease;
    animation: ind-compare-swipe-glow 2.2s ease-in-out infinite;
  }

  body.nbfc-page:not(.mfi-page) .ind-compare .ind-compare-swipe.is-hidden {
    opacity: 0;
  }

  body.nbfc-page:not(.mfi-page) .ind-compare-swipe svg {
    display: block;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  body.nbfc-page:not(.mfi-page) .ind-compare-swipe-arrow {
    animation: ind-compare-swipe-nudge 1.4s ease-in-out infinite;
  }
}

/* Highlighted hint: solid theme-blue pill with white text and a soft,
   slowly pulsing blue glow so it stands out above the table. */
@keyframes ind-compare-swipe-glow {
  0%, 100% { box-shadow: 0 8px 22px rgba(22, 75, 214, 0.32), 0 0 0 0 rgba(30, 91, 250, 0.35); }
  50% { box-shadow: 0 8px 22px rgba(22, 75, 214, 0.32), 0 0 0 8px rgba(30, 91, 250, 0); }
}

@keyframes ind-compare-swipe-nudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(6px); }
}

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

/* "Key capabilities" label above each stage's capability pills. */
.nbfc-page .nbfc-capability-label {
  margin: 24px 0 0;
  color: var(--fin-hero-ink);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.nbfc-page .nbfc-capability-label + .crm-capability-list {
  margin-top: 12px;
}

/* Lending models: capability pills under each model's description. */
.nbfc-page .nbfc-lending .crm-communication-copy .crm-capability-list {
  margin-top: 4px;
}

/* Comparison table alignment: fixed column widths, and every column
   (including the highlighted TrackOlap one, centred on the Finance page)
   left-aligned, so each column's marks sit in one straight line and the
   text starts at the same point in every row. The capability icon and its
   label sit side by side, with long labels wrapping beside the icon. */
.nbfc-page .fin-compare-table {
  table-layout: fixed;
}

.nbfc-page .fin-compare-table th:nth-child(1) { width: 28%; }
.nbfc-page .fin-compare-table th:nth-child(2) { width: 26%; }
.nbfc-page .fin-compare-table th:nth-child(3),
.nbfc-page .fin-compare-table th:nth-child(4) { width: 23%; }

.nbfc-page .fin-compare-table thead .fin-compare-ours {
  text-align: left;
}

.nbfc-page .fin-compare-table td.fin-compare-ours .fin-compare-value {
  justify-content: flex-start;
}

.nbfc-page .fin-compare-value {
  align-items: center;
  line-height: 1.45;
}

.nbfc-page .nbfc-compare-cap {
  display: flex;
  align-items: center;
  gap: 16px;
  line-height: 1.45;
}

.nbfc-page .fin-compare-table tbody th .fin-compare-cap-icon {
  margin-right: 0;
}

/* Get Started cards: every card uses the same structure (icon, one-line
   title, description, link), so titles, descriptions and links start at the
   same height in all three cards. Wider cards and a slightly smaller title
   keep each title on one line on desktop instead of breaking off a single
   word; descriptions wrap in balanced lines; links sit on a shared bottom
   line. */
.nbfc-page .crm-get-started-grid {
  max-width: 1240px;
  gap: 28px;
}

.nbfc-page .crm-get-started-card {
  padding: 34px 32px 32px;
}

.nbfc-page .crm-get-started-card h3 {
  font-size: clamp(20px, 1.8vw, 24px);
  line-height: 1.25;
  text-wrap: balance;
}

.nbfc-page .crm-get-started-card p {
  font-size: 17px;
  line-height: 1.55;
  text-wrap: pretty;
}

.nbfc-page .crm-get-started-card a {
  margin-top: auto;
  font-size: 19px;
}

@media (min-width: 1280px) {
  .nbfc-page .crm-get-started-card h3 {
    white-space: nowrap;
  }
}

/* Comparison subheading. */
.nbfc-page .nbfc-compare-intro {
  margin: 18px auto 0;
  color: var(--fin-hero-muted);
  font-size: 18px;
  line-height: 1.65;
}

/* Impact: each stat carries one descriptive sentence. */
.nbfc-page .nbfc-impact .fin-results-card {
  min-height: 240px;
}

.nbfc-page .nbfc-impact .fin-results-label {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
}

/* Related modules: six linked cards on the Finance page's card styling. */
.nbfc-page .nbfc-modules {
  padding: 96px 0;
}

.nbfc-page .nbfc-modules-heading {
  max-width: 960px;
  margin: 0 auto 48px;
  text-align: center;
}

.nbfc-page .nbfc-modules-heading .fin-section-tag {
  margin-inline: auto;
}

.nbfc-page .nbfc-modules-heading h2 {
  margin: 0;
  color: var(--fin-hero-ink);
  font-size: clamp(28px, 3.4vw, 48px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.12;
  text-wrap: balance;
}

.nbfc-page .nbfc-modules-heading h2 span {
  color: var(--crm-blue);
}

.nbfc-page .nbfc-modules-heading h2 .nbfc-modules-line {
  color: var(--fin-hero-ink);
}

/* First heading line stays unbroken on tablet and desktop, so only
   "Operations" moves to the second line. */
@media (min-width: 761px) {
  /* The heading block is exactly as wide as the heading's first line, and
     the subheading fills that width (it adds no width of its own), so both
     edges of the paragraph line up with the heading, in balanced lines. */
  .nbfc-page .nbfc-modules-heading {
    display: grid;
    width: fit-content;
    max-width: min(1100px, 100%);
    justify-items: center;
  }

  .nbfc-page .nbfc-modules-heading h2 .nbfc-modules-line {
    white-space: nowrap;
  }

  .nbfc-page .nbfc-modules-heading p:not(.fin-section-tag) {
    width: 0;
    min-width: 100%;
    text-wrap: balance;
  }
}

.nbfc-page .nbfc-modules-heading p:not(.fin-section-tag) {
  margin: 18px auto 0;
  color: var(--fin-hero-muted);
  font-size: 18px;
  line-height: 1.65;
}

.nbfc-page .nbfc-modules-grid {
  display: grid;
  margin: 0;
  padding: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  list-style: none;
}

.nbfc-page .nbfc-module-card a {
  display: flex;
  height: 100%;
  padding: 30px 28px;
  flex-direction: column;
  color: inherit;
  background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
  border: 1px solid rgba(30, 91, 250, 0.1);
  border-radius: 20px;
  box-shadow: 0 16px 36px rgba(11, 21, 48, 0.06);
  text-decoration: none;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

.nbfc-page .nbfc-module-card a:hover,
.nbfc-page .nbfc-module-card a:focus-visible {
  border-color: rgba(30, 91, 250, 0.35);
  box-shadow: 0 22px 44px rgba(30, 91, 250, 0.14);
  transform: translateY(-3px);
}

.nbfc-page .nbfc-module-card a:focus-visible {
  outline: 3px solid var(--crm-blue);
  outline-offset: 4px;
}

.nbfc-page .nbfc-module-icon {
  display: grid;
  width: 48px;
  height: 48px;
  margin-bottom: 18px;
  color: var(--crm-blue);
  background: #e8efff;
  border-radius: 14px;
  place-items: center;
}

.nbfc-page .nbfc-module-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nbfc-page .nbfc-module-card h3 {
  margin: 0 0 10px;
  color: var(--fin-hero-ink);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.3;
}

.nbfc-page .nbfc-module-card p {
  margin: 0 0 20px;
  color: var(--fin-hero-muted);
  font-size: 16px;
  line-height: 1.6;
}

.nbfc-page .nbfc-module-link {
  margin-top: auto;
  color: var(--crm-blue);
  font-size: 15px;
  font-weight: 700;
}

/* One Platform heading: the same grid texture layer as the Compare,
   Governance and Impact headings, from the top of the section (96px
   padding) down to just below the subheading, fading out at the sides and
   bottom. */
.nbfc-page .nbfc-modules-heading {
  position: relative;
  isolation: isolate;
}

.nbfc-page .nbfc-modules-heading::before {
  position: absolute;
  z-index: -1;
  top: -96px;
  bottom: -24px;
  left: 50%;
  width: min(1000px, 100vw);
  content: "";
  pointer-events: none;
  transform: translateX(-50%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 100%),
    linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 100%),
    linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
  mask-composite: intersect;
}

@media (max-width: 900px) {
  .nbfc-page .nbfc-modules-heading::before {
    top: -72px;
  }
}

/* "Explore All Products" under the module cards: the Sales CRM page's
   button, centred below the grid. */
.nbfc-page .nbfc-modules-view-all {
  gap: 8px;
  margin: 40px auto 0;
}

@media (max-width: 1024px) {
  .nbfc-page .nbfc-modules-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .nbfc-page .nbfc-modules {
    padding: 72px 0;
  }
}

@media (max-width: 560px) {
  .nbfc-page .nbfc-modules-grid {
    grid-template-columns: 1fr;
  }

  .nbfc-page .nbfc-modules-heading p:not(.fin-section-tag),
  .nbfc-page .nbfc-compare-intro {
    font-size: 16px;
  }

  .nbfc-page .nbfc-impact .fin-results-card {
    min-height: 0;
  }
}

/* Live chat (Antrika) in the page's theme colour (NBFC blue, #164bd6). 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 #164bd6 and win over the inline ones because they
   are !important. Scoped with :has() to this page's body only. */
html:has(> body.nbfc-page:not(.mfi-page)) {
  --widget-body-primary: rgb(24.6, 67, 178.2) !important;
  --widget-body-primary-10: rgb(33.7, 39, 52.9) !important;
  --widget-body-primary-dark: rgb(33.9, 38.4, 50.2) !important;
}

/* Chat launcher and greeting card in the same NBFC blue: 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.nbfc-page:not(.mfi-page) [class*="antrika_chat_button-label"] {
  background-color: #164bd6 !important;
}

body.nbfc-page:not(.mfi-page) [class*="antrika_chat_button-label"]:hover {
  background-color: #123fb4 !important;
}

body.nbfc-page:not(.mfi-page) [class*="antrika_chat_chat-initial-div"] > div:first-child {
  border-color: #164bd6 !important;
}

/* "Back to top" button in the page's theme colour (NBFC blue). */
body.nbfc-page:not(.mfi-page) {
  --back-to-top-bg: #164bd6;
  --back-to-top-bg-hover: #123fb4;
}

/* Comparison table (shared industry-compare.css) in the page's NBFC blue. */
body.nbfc-page:not(.mfi-page) .ind-compare {
  --ic-accent: #164bd6;
  --ic-ours-bg: #f2f6ff;
  --ic-ours-bg-alt: #e7eeff;
  --ic-value-bg: #ecf2ff;
}

/* Table refinements (NBFC page only; Finance and MFI keep the shared
   look):
   - one even tint per column instead of the TrackOlap column alternating
     on every other row, with a soft whole-row highlight on hover;
   - every cell centred vertically so each row's text lines up;
   - category rows read as one continuous band across all four columns;
   - slightly tighter, even padding and clearer type in each column. */
body.nbfc-page:not(.mfi-page) .ind-compare-table th,
body.nbfc-page:not(.mfi-page) .ind-compare-table td {
  padding: 18px 24px;
  vertical-align: middle;
  border-bottom: 1px solid #d5deeb;
}

/* Row dividers stay clearly visible on every column tint; inside the
   TrackOlap column they take the outline's blue at low strength. */
body.nbfc-page:not(.mfi-page) .ind-compare-table tbody .ind-compare-ours {
  border-bottom-color: rgba(22, 75, 214, 0.2);
}

body.nbfc-page:not(.mfi-page) .ind-compare-table thead th {
  border-bottom: 1px solid #c9d5e8;
}

body.nbfc-page:not(.mfi-page) .ind-compare-table tbody:last-of-type tr:last-child > * {
  border-bottom: 0;
}

body.nbfc-page:not(.mfi-page) .ind-compare-table tbody:last-of-type tr:last-child .ind-compare-ours {
  border-bottom: 2px solid var(--ic-accent);
}

body.nbfc-page:not(.mfi-page) .ind-compare-table tbody td.ind-compare-ours {
  vertical-align: middle;
}

body.nbfc-page:not(.mfi-page) .ind-compare-table tbody tr:nth-child(odd):not(.ind-compare-group) .ind-compare-ours {
  background: var(--ic-ours-bg);
}

body.nbfc-page:not(.mfi-page) .ind-compare-table tbody tr:not(.ind-compare-group) > * {
  transition: box-shadow 160ms ease;
}

body.nbfc-page:not(.mfi-page) .ind-compare-table tbody tr:not(.ind-compare-group):hover > * {
  box-shadow: inset 0 0 0 9999px rgba(22, 75, 214, 0.035);
}

body.nbfc-page:not(.mfi-page) .ind-compare-table tbody tr:not(.ind-compare-group) .ind-compare-cap {
  background: #fff;
  font-size: 15px;
  font-weight: 600;
}

body.nbfc-page:not(.mfi-page) .ind-compare-table td.ind-compare-alt,
body.nbfc-page:not(.mfi-page) .ind-compare-table td.ind-compare-value {
  font-size: 15px;
  line-height: 1.55;
}

body.nbfc-page:not(.mfi-page) .ind-compare-table td.ind-compare-value {
  font-weight: 500;
}

body.nbfc-page:not(.mfi-page) .ind-compare-ours-copy strong {
  margin-bottom: 4px;
  font-size: 15.5px;
}

body.nbfc-page:not(.mfi-page) .ind-compare-ours-copy span {
  font-size: 14px;
  line-height: 1.55;
}

/* Category rows: one band, the same tint in every column. */
body.nbfc-page:not(.mfi-page) .ind-compare-table .ind-compare-group > * {
  padding-top: 11px;
  padding-bottom: 11px;
  background: #f1f5fd;
}

body.nbfc-page:not(.mfi-page) .ind-compare-table .ind-compare-group th {
  color: #164bd6;
  font-size: 11.5px;
}

/* Header: every label centred vertically on the same line. */
body.nbfc-page:not(.mfi-page) .ind-compare-table thead th {
  padding-top: 22px;
  padding-bottom: 22px;
  vertical-align: middle;
}

body.nbfc-page:not(.mfi-page) .ind-compare-table thead .ind-compare-ours img {
  width: 132px;
}

/* Richer header, as in the supplied reference (same column order): a soft
   white header row; each comparison column shows a round icon, a bold
   label and a muted subtitle; the TrackOlap column has a blue pill badge
   above the logo and a blue tagline under it, on a light blue fill. */
body.nbfc-page:not(.mfi-page) .ind-compare-head--rich > th {
  padding-top: 20px;
  padding-bottom: 20px;
  background: #f8faff;
}

body.nbfc-page:not(.mfi-page) .ind-compare-head--rich .ind-compare-cap {
  color: #0b1a3d;
  font-size: 18px;
  font-weight: 800;
}

body.nbfc-page:not(.mfi-page) .ind-compare-head--rich .ind-compare-alt,
body.nbfc-page:not(.mfi-page) .ind-compare-head--rich .ind-compare-value {
  background: #f8faff;
  border-left: 1px solid #e3e9f3;
}

body.nbfc-page:not(.mfi-page) .ind-compare-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

body.nbfc-page:not(.mfi-page) .ind-compare-head-icon {
  display: grid;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  place-items: center;
  background: #eaf0fa;
  border-radius: 50%;
}

body.nbfc-page:not(.mfi-page) .ind-compare-head-icon svg {
  width: 24px;
  height: 24px;
}

body.nbfc-page:not(.mfi-page) .ind-compare-head-text {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

body.nbfc-page:not(.mfi-page) .ind-compare-head-label {
  color: #0b1a3d;
  font-size: 15.5px;
  font-weight: 800;
  line-height: 1.3;
}

body.nbfc-page:not(.mfi-page) .ind-compare-head-sub {
  color: #5b6577;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
}

body.nbfc-page:not(.mfi-page) .ind-compare-head--rich .ind-compare-ours {
  padding-top: 14px;
  padding-bottom: 16px;
  background: #eef4ff;
  text-align: center;
}

body.nbfc-page:not(.mfi-page) .ind-compare-head--rich .ind-compare-ours img {
  display: block;
  width: 132px;
  margin: 8px auto 4px;
}

body.nbfc-page:not(.mfi-page) .ind-compare-head-badge {
  display: inline-block;
  padding: 4px 12px;
  color: #fff;
  background: #164bd6;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}

body.nbfc-page:not(.mfi-page) .ind-compare-head-tagline {
  display: block;
  color: #164bd6;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
}