/* Finance industry page (/industry/finances).
   Layout and components come from sales-crm-softwares.css; this file only
   restyles the hero: a soft blue-to-cream diagonal gradient, a static
   headline with a brand-blue accent line, one CTA, proof cards and a smaller
   visual. */
.finances-page {
  --fin-hero-bg: #e4f2fd;
  --fin-hero-gradient: linear-gradient(135deg, #e2f2fe 0%, #f1f5f2 50%, #fff7e7 100%);
  --fin-hero-ink: #0b1530;
  --fin-hero-muted: #4f5868;
}

.finances-page .crm-suite-hero {
  min-height: 720px;
  background: var(--fin-hero-gradient);
}

/* Background texture, all drawn in CSS / inline SVG (no image files):
   ::before is a fine dot grid over the gradient; ::after lays four sparse
   finance line icons on top of it, in the gaps around the copy and image. */
.finances-page .crm-suite-hero::before,
.finances-page .crm-suite-hero::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  display: block;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  content: "";
  pointer-events: none;
}

/* Texture kept faint so the headline, copy and image stay in focus. */
.finances-page .crm-suite-hero::before {
  opacity: 0.45;
  background-image: radial-gradient(circle, rgba(96, 110, 134, 0.2) 1.2px, transparent 1.6px);
  background-size: 14px 14px;
  -webkit-mask-image: radial-gradient(ellipse 80% 90% at 40% 45%, #000 35%, rgba(0, 0, 0, 0.45) 75%, transparent 100%);
  mask-image: radial-gradient(ellipse 80% 90% at 40% 45%, #000 35%, rgba(0, 0, 0, 0.45) 75%, transparent 100%);
}

.finances-page .crm-suite-hero::after {
  opacity: 0.5;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Cg stroke='%238492a8' stroke-opacity='0.55' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' fill='none'%3E%3Cpath d='M36 22h24l-6 10H42z'/%3E%3Cpath d='M40 16c3 2 5 2 8 0 3 2 5 2 8 0'/%3E%3Cpath d='M42 32C24 42 16 56 18 68c2 10 12 14 30 14s28-4 30-14c2-12-6-26-24-36'/%3E%3Cpath d='M40 50h16M40 56h16M46 50c6 0 6 6 0 6h-4l12 12'/%3E%3C/g%3E%3C/svg%3E") 47% 16% / 64px 64px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Cg stroke='%238492a8' stroke-opacity='0.55' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' fill='none'%3E%3Ccircle cx='42' cy='54' r='30'/%3E%3Ccircle cx='42' cy='54' r='20'/%3E%3Ccircle cx='42' cy='54' r='10'/%3E%3Cpath d='M42 54 76 20'/%3E%3Cpath d='M68 18l8 2 2 8M76 20l-4-10M76 20l10 4'/%3E%3C/g%3E%3C/svg%3E") 55% 92% / 72px 72px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Cg stroke='%238492a8' stroke-opacity='0.55' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' fill='none'%3E%3Cpath d='M12 36 48 14l36 22'/%3E%3Cpath d='M14 36h68'/%3E%3Cpath d='M20 42v30M34 42v30M48 42v30M62 42v30M76 42v30'/%3E%3Cpath d='M14 72h68M10 80h76'/%3E%3Ccircle cx='48' cy='27' r='3'/%3E%3C/g%3E%3C/svg%3E") 2% 84% / 68px 68px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Cg stroke='%238492a8' stroke-opacity='0.55' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' fill='none'%3E%3Ccircle cx='36' cy='40' r='22'/%3E%3Cpath d='M29 31h14M29 37h14M34 31c7 0 7 6 0 6h-4l12 12'/%3E%3Ccircle cx='62' cy='62' r='20'/%3E%3Cpath d='M55 58h14M55 64h14M60 58c7 0 7 6 0 6h-4l11 10'/%3E%3C/g%3E%3C/svg%3E") 98% 84% / 64px 64px no-repeat;
}

.finances-page .crm-suite-hero-inner {
  min-height: 720px;
  padding-top: 132px;
  padding-bottom: 150px;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: start;
}

/* The copy column is a size container so the headline can scale to the
   exact width of the proof-card row below it. */
.finances-page .crm-suite-hero .prod-hero-copy {
  width: 100%;
  max-width: 700px;
  container-type: inline-size;
}

.finances-page .crm-suite-hero .fin-hero-eyebrow {
  display: flex;
  margin: 0 0 22px;
  padding: 0;
  align-items: center;
  gap: 14px;
  color: #4a5a75;
  background: none;
  border: 0;
  border-radius: 0;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0;
}

.finances-page .crm-suite-hero .fin-hero-eyebrow::before {
  flex: 0 0 auto;
  width: 30px;
  height: 2px;
  background: var(--crm-blue);
  content: "";
}

.finances-page .crm-suite-hero .prod-hero-headline {
  max-width: none;
  color: var(--fin-hero-ink);
  font-size: clamp(32px, 2.95vw, 44px);
  /* Scales with the copy column (same width as the proof-card row). */
  font-size: clamp(30px, 7.25cqw, 56px);
  font-weight: 800;
  line-height: 1.12;
}

/* Headline accent words ("Management Software" and the flipping
   "More / Faster") use the solid brand blue, not a gradient. */
.finances-page .crm-suite-hero .fin-hero-title-accent,
.finances-page .crm-suite-hero .fin-hero-flip .crm-hero-rotating-text {
  width: fit-content;
  color: var(--crm-blue);
  background: none;
  -webkit-text-fill-color: var(--crm-blue);
}

/* "That Collects [More | Faster]": the last word flips in place. The slot
   is sized by the longer word (a hidden ::after, so it isn't page text) to
   keep the line from shifting as the words change. */
.finances-page .crm-suite-hero .fin-hero-flip {
  display: inline-grid;
  height: 1.12em; /* = headline line-height, so the word sits on the same baseline */
  overflow: hidden;
  vertical-align: bottom;
  justify-items: start;
  align-items: center;
}

.finances-page .crm-suite-hero .fin-hero-flip::after {
  grid-area: 1 / 1;
  visibility: hidden;
  content: "Faster";
}

.finances-page .crm-suite-hero .prod-hero-sub {
  max-width: none;
  margin: 22px 0 32px;
  color: var(--fin-hero-muted);
  font-size: 19px;
  line-height: 1.6;
  text-wrap: pretty;
}

.finances-page .crm-suite-hero .fin-hero-cta {
  display: inline-flex;
  min-width: 0;
  padding: 15px 30px;
  align-items: center;
  gap: 10px;
  color: #fff;
  background: linear-gradient(90deg, #2c67f2 0%, #1e5bfa 100%);
  border: 0;
  border-radius: 999px;
  box-shadow: 0 14px 30px rgba(30, 91, 250, 0.24);
  font-size: 17px;
}

.finances-page .crm-suite-hero .fin-hero-cta:hover {
  color: #fff;
  background: linear-gradient(90deg, #2459d6 0%, #164bd6 100%);
}

/* Proof cards: equal-height, icon on top, one-line title, short line of
   detail, so all three read the same way. */
.finances-page .fin-hero-proof {
  display: grid;
  max-width: 700px;
  margin: 40px 0 0;
  padding: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  list-style: none;
}

.finances-page .fin-hero-proof li {
  display: flex;
  min-width: 0;
  padding: 18px;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  color: var(--fin-hero-muted);
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(11, 21, 48, 0.06);
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(11, 21, 48, 0.05);
  font-size: 14px;
  line-height: 1.4;
}

.finances-page .fin-hero-proof strong {
  display: block;
  margin-bottom: 2px;
  color: var(--fin-hero-ink);
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}

.finances-page .fin-hero-proof-icon {
  display: grid;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  place-items: center;
}

.finances-page .fin-hero-proof-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.finances-page .fin-hero-proof-icon--green {
  color: #16a36a;
  background: #e3f7ee;
}

.finances-page .fin-hero-proof-icon--blue {
  color: var(--crm-blue);
  background: #e6eeff;
}

.finances-page .fin-hero-proof-icon--purple {
  color: #7c3aed;
  background: #f0e9ff;
}

/* Top of the image lines up with the eyebrow line of the copy. */
.finances-page .crm-suite-hero .prod-hero-visual {
  max-width: 640px;
  margin-top: 0;
  align-self: start;
  justify-self: end;
  transform: none;
}

/* The hero image has a transparent background, so it sits flush on the
   gradient with no card edge, radius or shadow. */
.finances-page .crm-suite-hero-dashboard img {
  max-height: none;
  border-radius: 0;
  filter: none;
}

/* Light hero: use the black logo and dark navigation before scroll too. */
.finances-page .ffm-nav-shell .logo-box {
  content: url("/assets/img/trackolaplogo.png");
  object-fit: contain;
  object-position: left center;
}

.finances-page .ffm-nav-shell .menu-text,
.finances-page .ffm-nav-shell .nav-link,
.finances-page .ffm-nav-shell .menu-text span,
.finances-page .ffm-nav-shell .nav-menu-item,
.finances-page .ffm-nav-shell #resourceBtn,
.finances-page .ffm-nav-shell #menu > .menu-item:hover > #productMenu,
.finances-page .ffm-nav-shell #menu > .menu-item:hover > #productMenu span {
  color: #000 !important;
}

.finances-page .ffm-nav-shell .black-arrow,
.finances-page .ffm-nav-shell .arrow-img {
  filter: brightness(0);
}

.finances-page .ffm-nav-shell .mobile-nav > .nav {
  color: #000;
}

@media (max-width: 1180px) {
  .finances-page .fin-hero-proof {
    grid-template-columns: 1fr;
    max-width: 420px;
  }

  /* Stacked full-width cards read better with the icon beside the text. */
  .finances-page .fin-hero-proof li {
    padding: 14px 16px;
    flex-direction: row;
    align-items: center;
  }
}

@media (max-width: 1029px) {
  .finances-page .ffm-nav-shell .header-container {
    background: var(--fin-hero-bg);
  }

  .finances-page .ffm-nav-shell .header-container.header-on-scroll {
    background: #fff;
  }

  .finances-page .ffm-nav-shell .mobile-nav > .nav {
    color: #000;
  }

  .finances-page .ffm-nav-shell .top-buttons > #startTrial2 {
    color: #fff !important;
    background: linear-gradient(90deg, var(--crm-blue-dark), var(--crm-blue));
    border-color: var(--crm-blue-dark);
    -webkit-text-fill-color: #fff;
  }
}

@media (max-width: 900px) {
  .finances-page .crm-suite-hero,
  .finances-page .crm-suite-hero-inner {
    min-height: 0;
  }

  .finances-page .crm-suite-hero-inner {
    padding-top: 106px;
    padding-bottom: 96px;
    grid-template-columns: 1fr;
  }

  .finances-page .crm-suite-hero::after {
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Cg stroke='%238492a8' stroke-opacity='0.55' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' fill='none'%3E%3Cpath d='M36 22h24l-6 10H42z'/%3E%3Cpath d='M40 16c3 2 5 2 8 0 3 2 5 2 8 0'/%3E%3Cpath d='M42 32C24 42 16 56 18 68c2 10 12 14 30 14s28-4 30-14c2-12-6-26-24-36'/%3E%3Cpath d='M40 50h16M40 56h16M46 50c6 0 6 6 0 6h-4l12 12'/%3E%3C/g%3E%3C/svg%3E") 94% 10% / 46px 46px no-repeat,
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Cg stroke='%238492a8' stroke-opacity='0.55' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' fill='none'%3E%3Cpath d='M12 36 48 14l36 22'/%3E%3Cpath d='M14 36h68'/%3E%3Cpath d='M20 42v30M34 42v30M48 42v30M62 42v30M76 42v30'/%3E%3Cpath d='M14 72h68M10 80h76'/%3E%3Ccircle cx='48' cy='27' r='3'/%3E%3C/g%3E%3C/svg%3E") 4% 93% / 46px 46px no-repeat;
  }

  .finances-page .crm-suite-hero .fin-hero-eyebrow {
    justify-content: center;
    font-size: 14px;
    text-align: center;
  }

  .finances-page .crm-suite-hero .fin-hero-eyebrow::before {
    display: none;
  }

  .finances-page .crm-suite-hero .fin-hero-title-accent {
    margin-inline: auto;
  }

  .finances-page .crm-suite-hero .prod-hero-sub {
    margin-inline: auto;
    font-size: 16px;
    text-align: center;
  }

  .finances-page .crm-suite-hero .crm-hero-actions {
    justify-content: center;
  }

  .finances-page .fin-hero-proof {
    width: 100%;
    margin-inline: auto;
  }

  .finances-page .crm-suite-hero .prod-hero-visual {
    width: min(100%, 520px);
    margin: 12px auto 0;
    justify-self: center;
  }
}

/* "Where field revenue leaks / How TrackOlap stops it": problem cards on the
   left, the app in the middle, the matching fix cards on the right. */
.finances-page .fin-leaks {
  --fin-leak: #f56d25;
  --fin-fix: var(--crm-blue);
  position: relative;
  padding: 96px 0 104px;
  overflow: hidden;
  background:
    radial-gradient(circle at 0% 55%, rgba(255, 170, 130, 0.16), transparent 38%),
    radial-gradient(circle at 100% 55%, rgba(80, 140, 255, 0.13), transparent 38%),
    #fff;
}

.finances-page .fin-leaks-heading {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
}

/* Section tag: the same pill label opens every content section, so each
   section has a clear start. Also restyles the template's own eyebrows
   (security and customer-story partials) to match. */
.finances-page .fin-section-tag,
.finances-page .prod-task-capabilities-head .prod-task-capabilities-eyebrow {
  display: inline-flex;
  width: fit-content;
  margin: 0 0 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 !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em;
  line-height: 1.2 !important;
  text-transform: uppercase;
}

.finances-page .prod-task-capabilities-head .prod-task-capabilities-eyebrow {
  margin: 0 auto 18px;
}

.finances-page .fin-section-tag::before,
.finances-page .prod-task-capabilities-head .prod-task-capabilities-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: "";
}

/* Get Started has no centred wrapper, so centre its tag as a block. */
.finances-page .crm-get-started .fin-section-tag {
  display: flex;
  margin: 0 auto 18px;
}

/* On the dark sections (integrations, customer stories). */
.finances-page .fin-section-tag--dark,
.finances-page .crm-customer-stories .prod-stories-eyebrow {
  color: #dff8ff;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: none;
}

.finances-page .fin-section-tag--dark::before {
  background-image: 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='%2362cff4'/%3E%3C/svg%3E");
}

/* Clear end/start between sections: a hairline at the top of every content
   section (not the hero, the logo strip that overlaps it, or the dark CTA
   bands, which already stand apart). */
.finances-page main > section:not(.crm-suite-hero):not(.crm-trust):not(.crm-final-cta),
.finances-page main > .crm-customer-stories {
  border-top: 1px solid rgba(11, 21, 48, 0.07);
}

.finances-page .fin-leaks-heading h2 {
  margin: 0;
  color: var(--fin-hero-ink);
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.finances-page .fin-leaks-heading h2 span {
  color: var(--fin-fix);
}

.finances-page .fin-leaks-heading p {
  margin: 14px 0 0;
  color: var(--fin-hero-muted);
  font-size: 19px;
  line-height: 1.6;
}

.finances-page .fin-leaks-board {
  display: grid;
  margin-top: 52px;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 64px;
}

.finances-page .fin-leaks-list {
  display: grid;
  margin: 0;
  padding: 0;
  gap: 14px;
  list-style: none;
}

.finances-page .fin-leaks-card {
  position: relative;
  display: flex;
  min-height: 78px;
  padding: 14px 18px;
  align-items: center;
  gap: 16px;
  background: #fff;
  border: 1px solid rgba(11, 21, 48, 0.07);
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(11, 21, 48, 0.06);
}

.finances-page .fin-leaks-list--problem .fin-leaks-card {
  background: linear-gradient(90deg, #fff3ec 0%, #fff 70%);
  border-color: rgba(245, 109, 37, 0.14);
}

.finances-page .fin-leaks-icon {
  position: relative;
  display: grid;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  place-items: center;
}

.finances-page .fin-leaks-list--problem .fin-leaks-icon {
  color: var(--fin-leak);
  background: #ffe6da;
}

.finances-page .fin-leaks-list--fix .fin-leaks-icon {
  color: var(--fin-fix);
  background: #e8efff;
}

.finances-page .fin-leaks-icon > svg,
.finances-page .fin-leaks-badge svg,
.finances-page .fin-leaks-check svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.finances-page .fin-leaks-icon > svg {
  width: 23px;
  height: 23px;
  stroke-width: 2;
}

.finances-page .fin-leaks-badge {
  position: absolute;
  right: -3px;
  bottom: -3px;
  display: grid;
  width: 19px;
  height: 19px;
  color: #fff;
  background: #ef4444;
  border: 2px solid #fff;
  border-radius: 50%;
  place-items: center;
}

.finances-page .fin-leaks-badge svg {
  width: 11px;
  height: 11px;
  stroke-width: 3.4;
}

.finances-page .fin-leaks-text {
  min-width: 0;
  color: var(--fin-hero-muted);
  font-size: 14.5px;
  line-height: 1.45;
}

.finances-page .fin-leaks-text strong {
  display: block;
  color: var(--fin-hero-ink);
  font-size: 17px;
  font-weight: 700;
}

.finances-page .fin-leaks-check {
  display: grid;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  margin-left: auto;
  color: #fff;
  background: #22c55e;
  border-radius: 50%;
  place-items: center;
}

.finances-page .fin-leaks-check svg {
  width: 17px;
  height: 17px;
  stroke-width: 3;
}

/* Dashed connectors from each card towards the app, ending in a dot. */
.finances-page .fin-leaks-card::before,
.finances-page .fin-leaks-card::after {
  position: absolute;
  top: 50%;
  content: "";
  pointer-events: none;
}

.finances-page .fin-leaks-card::after {
  width: 44px;
  border-top: 2px dashed currentColor;
}

.finances-page .fin-leaks-card::before {
  width: 9px;
  height: 9px;
  margin-top: -3.5px;
  background: currentColor;
  border-radius: 50%;
}

.finances-page .fin-leaks-list--problem .fin-leaks-card {
  color: rgba(245, 109, 37, 0.6);
}

.finances-page .fin-leaks-list--problem .fin-leaks-card::after {
  left: 100%;
}

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

.finances-page .fin-leaks-list--fix .fin-leaks-card {
  color: rgba(30, 91, 250, 0.55);
}

.finances-page .fin-leaks-list--fix .fin-leaks-card::after {
  right: 100%;
}

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

/* The app sits on soft concentric blue rings. */
.finances-page .fin-leaks-visual {
  position: relative;
  width: 300px;
  padding: 24px 0;
}

.finances-page .fin-leaks-visual::before {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  width: 560px;
  height: 560px;
  background:
    radial-gradient(circle, rgba(30, 91, 250, 0.16) 0 34%, transparent 34.5%),
    radial-gradient(circle, rgba(30, 91, 250, 0.08) 0 50%, transparent 50.5%),
    radial-gradient(circle, rgba(30, 91, 250, 0.05) 0 70%, transparent 70.5%);
  border-radius: 50%;
  content: "";
  transform: translate(-50%, -50%);
}

.finances-page .fin-leaks-visual img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 26px 40px rgba(11, 21, 48, 0.22));
}

@media (max-width: 1240px) {
  .finances-page .fin-leaks-board {
    gap: 40px;
  }

  .finances-page .fin-leaks-visual {
    width: 250px;
  }

  .finances-page .fin-leaks-card::after {
    width: 22px;
  }

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

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

/* Tablet and mobile: problems, then the app, then the fixes, one column. */
@media (max-width: 1024px) {
  .finances-page .fin-leaks {
    padding: 72px 0 80px;
  }

  .finances-page .fin-leaks-board {
    max-width: 560px;
    margin-inline: auto;
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .finances-page .fin-leaks-visual {
    width: min(260px, 70%);
    justify-self: center;
  }

  .finances-page .fin-leaks-visual::before {
    width: 440px;
    height: 440px;
  }

  .finances-page .fin-leaks-card::before,
  .finances-page .fin-leaks-card::after {
    display: none;
  }
}

@media (max-width: 480px) {
  .finances-page .fin-leaks-heading p {
    font-size: 16px;
  }

  .finances-page .fin-leaks-card {
    min-height: 0;
    padding: 12px 14px;
    gap: 12px;
  }

  .finances-page .fin-leaks-icon {
    width: 40px;
    height: 40px;
  }

  .finances-page .fin-leaks-text strong {
    font-size: 16px;
  }
}

/* "One App. Every Field Visit. Zero Guesswork.": heading and intro. */
.finances-page .fin-journey {
  position: relative;
  padding: 88px 0 96px;
  overflow: hidden;
  background:
    repeating-linear-gradient(0deg, rgba(30, 91, 250, 0.045) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(90deg, rgba(30, 91, 250, 0.045) 0 1px, transparent 1px 48px),
    #f4f8ff;
}

.finances-page .fin-journey-container {
  width: min(calc(100% - 48px), 1340px);
  margin-inline: auto;
}

.finances-page .fin-journey-heading {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}

.finances-page .fin-journey-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;
}

.finances-page .fin-journey-heading h2 span {
  color: var(--crm-blue);
}

.finances-page .fin-journey-heading p {
  margin: 18px 0 0;
  color: var(--fin-hero-muted);
  font-size: 18px;
  line-height: 1.65;
}

@media (max-width: 1024px) {
  .finances-page .fin-journey {
    padding: 72px 0 80px;
  }

  .finances-page .fin-journey-heading p {
    font-size: 16px;
  }
}

@media (max-width: 560px) {
  .finances-page .fin-journey-container {
    width: min(calc(100% - 32px), 1340px);
  }
}

/* Capabilities heading: accent in solid brand blue (as in the hero), and
   the summary wraps inside a centred, balanced measure instead of running
   on one line wider than the heading. */
.finances-page .crm-workflow-heading .crm-workflow-title-gradient {
  color: var(--crm-blue);
  background: none;
  -webkit-text-fill-color: var(--crm-blue);
}

.finances-page .crm-section-heading.crm-workflow-heading > p.crm-workflow-summary {
  max-width: 780px;
  margin: 20px auto 0;
  white-space: normal;
  text-align: center;
  text-wrap: balance;
}

/* More breathing room between the Capabilities feature rows. */
.finances-page .crm-workflow-step {
  padding: 96px 0;
}

.finances-page .crm-workflow-step:first-child {
  padding-top: 56px;
}

@media (max-width: 900px) {
  .finances-page .crm-workflow-step {
    padding: 64px 0;
  }

  .finances-page .crm-workflow-step:first-child {
    padding-top: 40px;
  }
}

@media (max-width: 700px) {
  .finances-page .crm-workflow-step {
    padding: 44px 0;
  }

  .finances-page .crm-workflow-step:first-child {
    padding-top: 28px;
  }
}

/* "Why Lenders Choose TrackOlap Over Generic CRMs": comparison table with
   the TrackOlap column raised and highlighted. */
/* Background as in the mockup: large, soft, partly cropped circles, pale
   blue at the top right and left, warm peach at the bottom right, on an
   almost-white base. Pure CSS, no image. */
.finances-page .fin-compare {
  position: relative;
  padding: 96px 0 104px;
  overflow: hidden;
  background:
    radial-gradient(circle at 96% 4%, rgba(208, 226, 255, 0.85) 0 150px, rgba(208, 226, 255, 0) 152px),
    radial-gradient(circle at 99% 0%, rgba(226, 237, 255, 0.9) 0 260px, rgba(226, 237, 255, 0) 262px),
    radial-gradient(ellipse 420px 300px at -4% 38%, rgba(219, 232, 255, 0.75), rgba(219, 232, 255, 0) 70%),
    radial-gradient(circle at 104% 104%, rgba(255, 224, 205, 0.8) 0 220px, rgba(255, 224, 205, 0) 222px),
    radial-gradient(ellipse 380px 260px at 2% 104%, rgba(255, 232, 218, 0.6), rgba(255, 232, 218, 0) 70%),
    linear-gradient(180deg, #fbfcff 0%, #f7f9fd 100%);
}

.finances-page .fin-compare-heading {
  max-width: 860px;
  margin: 0 auto 48px;
  text-align: center;
}

.finances-page .fin-compare-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;
}

.finances-page .fin-compare-heading h2 span {
  display: block;
  color: var(--crm-blue);
}

.finances-page .fin-compare-scroll {
  padding: 14px 4px 18px;
  overflow-x: auto;
}

.finances-page .fin-compare-table {
  width: 100%;
  min-width: 820px;
  border-collapse: separate;
  border-spacing: 0;
  /* Soft cool-to-warm wash across the whole table, as in the reference. */
  background: linear-gradient(125deg, #f3f6ff 0%, #f9faff 42%, #fffaf5 72%, #fff3e9 100%);
  border: 1px solid rgba(11, 21, 48, 0.07);
  border-radius: 18px;
  box-shadow: 0 16px 40px rgba(11, 21, 48, 0.07);
}

.finances-page .fin-compare-table th,
.finances-page .fin-compare-table td {
  padding: 18px 24px;
  border-bottom: 1px solid #edf1f7;
  color: var(--fin-hero-ink);
  font-size: 16px;
  text-align: left;
  vertical-align: middle;
}

.finances-page .fin-compare-table tbody tr:last-child > * {
  border-bottom: 0;
}

.finances-page .fin-compare-table thead th {
  padding-top: 22px;
  padding-bottom: 22px;
  background: linear-gradient(180deg, rgba(232, 238, 255, 0.9), rgba(240, 244, 255, 0.6));
  font-size: 18px;
  font-weight: 700;
}

.finances-page .fin-compare-table thead th:first-child {
  border-top-left-radius: 18px;
}

.finances-page .fin-compare-table thead th:last-child {
  border-top-right-radius: 18px;
}

.finances-page .fin-compare-table tbody th {
  font-weight: 500;
}

.finances-page .fin-compare-value {
  display: flex;
  align-items: center;
  gap: 14px;
}

.finances-page .fin-compare-table tbody th .fin-compare-cap-icon {
  margin-right: 16px;
  vertical-align: middle;
}

/* Our column: tinted, bordered and lifted like a highlighted plan. */
.finances-page .fin-compare-table .fin-compare-ours {
  position: relative;
  width: 21%;
  background: #f3f7ff;
  border-right: 2px solid rgba(30, 91, 250, 0.22);
  border-left: 2px solid rgba(30, 91, 250, 0.22);
  font-weight: 700;
}

.finances-page .fin-compare-table thead .fin-compare-ours {
  background: #eaf1ff;
  border-top: 2px solid rgba(30, 91, 250, 0.22);
  text-align: center;
}

.finances-page .fin-compare-table tbody tr:last-child .fin-compare-ours {
  border-bottom: 2px solid rgba(30, 91, 250, 0.22);
}

.finances-page .fin-compare-table thead .fin-compare-ours img {
  display: inline-block;
  width: 140px;
  height: auto;
  vertical-align: middle;
}

.finances-page .fin-compare-table td.fin-compare-ours .fin-compare-value {
  justify-content: center;
}

/* Icons */
.finances-page .fin-compare-cap-icon,
.finances-page .fin-compare-mark {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
}

.finances-page .fin-compare-cap-icon svg,
.finances-page .fin-compare-mark svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.finances-page .fin-compare-cap-icon svg {
  width: 26px;
  height: 26px;
  stroke-width: 2;
}

.finances-page .fin-compare-tone--orange { color: #f5821f; }
.finances-page .fin-compare-tone--blue { color: var(--crm-blue); }
.finances-page .fin-compare-tone--purple { color: #7c3aed; }
.finances-page .fin-compare-tone--green { color: #16a34a; }

.finances-page .fin-compare-mark svg {
  width: 26px;
  height: 26px;
  stroke-width: 2.2;
}

/* Solid discs with white glyphs for yes / no / add-on / sometimes. */
.finances-page .fin-compare-mark--yes { color: #16a34a; }
.finances-page .fin-compare-mark--no { color: #ef4444; }
.finances-page .fin-compare-mark--addon,
.finances-page .fin-compare-mark--sometimes { color: #f59e0b; }

.finances-page .fin-compare-mark--yes svg circle,
.finances-page .fin-compare-mark--no svg circle,
.finances-page .fin-compare-mark--addon svg circle,
.finances-page .fin-compare-mark--sometimes svg circle {
  fill: currentColor;
  stroke: none;
}

.finances-page .fin-compare-mark--yes svg path,
.finances-page .fin-compare-mark--no svg path,
.finances-page .fin-compare-mark--addon svg path,
.finances-page .fin-compare-mark--sometimes svg path {
  stroke: #fff;
  stroke-width: 2.6;
}

.finances-page .fin-compare-mark--partial { color: #f59e0b; }

.finances-page .fin-compare-mark--partial svg path {
  fill: currentColor;
  stroke: none;
}

.finances-page .fin-compare-mark--time { color: #7c3aed; }
.finances-page .fin-compare-mark--days { color: var(--crm-blue); }

@media (max-width: 900px) {
  .finances-page .fin-compare {
    padding: 72px 0 80px;
  }

  .finances-page .fin-compare-heading {
    margin-bottom: 32px;
  }

  .finances-page .fin-compare-table th,
  .finances-page .fin-compare-table td {
    padding: 14px 16px;
    font-size: 15px;
  }
}

/* Comparison columns: faint white row lines and column dividers over the
   gradient, with the standalone-app column carrying a light peach tint. */
.finances-page .fin-compare-table tbody th,
.finances-page .fin-compare-table tbody td:not(.fin-compare-ours) {
  background: transparent;
  border-bottom-color: rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 -1px 0 rgba(11, 21, 48, 0.035);
}

.finances-page .fin-compare-table th:nth-child(4),
.finances-page .fin-compare-table td:nth-child(4) {
  border-left: 1px solid rgba(11, 21, 48, 0.06);
}

.finances-page .fin-compare-table tbody td:nth-child(4) {
  background: rgba(255, 238, 224, 0.35);
}

.finances-page .fin-compare-table thead th:nth-child(4) {
  background: linear-gradient(180deg, rgba(240, 236, 255, 0.9), rgba(252, 242, 236, 0.7));
}

.finances-page .fin-compare-table tbody tr:last-child > * {
  box-shadow: none;
}

.finances-page .fin-compare-table tbody tr:last-child td:last-child {
  border-bottom-right-radius: 18px;
}

.finances-page .fin-compare-table tbody tr:last-child th:first-child {
  border-bottom-left-radius: 18px;
}

/* Conversion CTA with the demo form open inline: a rounded brand-blue card,
   pitch on the left and the TrackOlap demo form in a white panel on the
   right (the form widget itself is styled by sales-crm-softwares.css). */
.finances-page .fin-cta-form {
  padding: 88px 0;
  background: #fff;
}

.finances-page .fin-cta-form-card {
  position: relative;
  display: grid;
  padding: 56px;
  overflow: hidden;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 480px);
  align-items: center;
  gap: 56px;
  color: #fff;
  background:
    radial-gradient(circle at 12% 20%, rgba(255, 255, 255, 0.12), transparent 34%),
    linear-gradient(120deg, #0b3fd8 0%, var(--crm-blue) 55%, #2f6bff 100%);
  border-radius: 28px;
  box-shadow: 0 24px 60px rgba(30, 91, 250, 0.28);
}

/* Faint diamond texture on the left, as in the reference. */
.finances-page .fin-cta-form-card::before {
  position: absolute;
  z-index: 0;
  inset: 0 45% 0 0;
  background-image: linear-gradient(45deg, rgba(8, 30, 120, 0.28) 25%, transparent 25%, transparent 75%, rgba(8, 30, 120, 0.28) 75%),
    linear-gradient(45deg, rgba(8, 30, 120, 0.28) 25%, transparent 25%, transparent 75%, rgba(8, 30, 120, 0.28) 75%);
  background-position: 0 0, 14px 14px;
  background-size: 28px 28px;
  content: "";
  opacity: 0.35;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 40% 55%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 80% at 40% 55%, #000 20%, transparent 75%);
}

.finances-page .fin-cta-form-copy,
.finances-page .fin-cta-form-panel {
  position: relative;
  z-index: 1;
}

.finances-page .fin-cta-form-copy h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(30px, 3.2vw, 46px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.12;
  text-align: left;
}

.finances-page .fin-cta-form-copy h2 span {
  display: inline;
  color: #cfe0ff;
}

.finances-page .fin-cta-form-copy h2 .fin-cta-form-arrow {
  color: #fff;
  font-weight: 400;
}

.finances-page .fin-cta-form-copy > p {
  max-width: 520px;
  margin: 20px 0 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: 18px;
  line-height: 1.65;
  text-align: left;
}

.finances-page .fin-cta-form-points {
  display: grid;
  margin: 26px 0 28px;
  padding: 0;
  gap: 12px;
  list-style: none;
}

.finances-page .fin-cta-form-points li {
  position: relative;
  padding-left: 32px;
  color: #fff;
  font-size: 16px;
  line-height: 1.5;
}

.finances-page .fin-cta-form-points li::before {
  position: absolute;
  top: 1px;
  left: 0;
  display: grid;
  width: 22px;
  height: 22px;
  color: var(--crm-blue);
  background: #fff;
  border-radius: 50%;
  content: "✓";
  font-size: 12px;
  font-weight: 800;
  place-items: center;
}

.finances-page .fin-cta-form-copy .crm-final-cta-review {
  justify-content: flex-start;
  margin: 0;
}

.finances-page .fin-cta-form-panel {
  padding: 28px 28px 22px;
  color: var(--fin-hero-ink);
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 18px 44px rgba(4, 22, 80, 0.3);
}

/* Demo CTA band colours per page: the warm orange band and its
   orange-brown form button (end of this file) are for the MFI page only.
   Finance and NBFC keep their previous blue band with white text and the
   theme-blue form button, so these rules restore them there;
   `:not(.mfi-page)` makes them more specific than the orange rules,
   wherever those sit. */
body.finances-page:not(.mfi-page) .fin-cta-form .fin-cta-form-card {
  color: #fff;
  background:
    radial-gradient(circle at 12% 20%, rgba(255, 255, 255, 0.12), transparent 34%),
    linear-gradient(120deg, #0b3fd8 0%, var(--crm-blue) 55%, #2f6bff 100%);
}

body.finances-page:not(.mfi-page) .fin-cta-form .fin-cta-form-card::before {
  background-image: linear-gradient(45deg, rgba(8, 30, 120, 0.28) 25%, transparent 25%, transparent 75%, rgba(8, 30, 120, 0.28) 75%),
    linear-gradient(45deg, rgba(8, 30, 120, 0.28) 25%, transparent 25%, transparent 75%, rgba(8, 30, 120, 0.28) 75%);
}

body.finances-page:not(.mfi-page) .fin-cta-form .fin-cta-form-copy h2,
body.finances-page:not(.mfi-page) .fin-cta-form .fin-cta-form-copy h2 .fin-cta-form-arrow {
  color: #fff;
  -webkit-text-fill-color: #fff;
}

body.finances-page:not(.mfi-page) .fin-cta-form .fin-cta-form-copy h2 span:not(.fin-cta-form-arrow) {
  color: #cfe0ff !important;
  -webkit-text-fill-color: #cfe0ff !important;
}

body.finances-page:not(.mfi-page) .fin-cta-form .fin-cta-form-copy > p {
  color: rgba(255, 255, 255, 0.88);
}

body.finances-page:not(.mfi-page) .fin-cta-form .fin-cta-form-points li {
  color: #fff;
}

body.finances-page:not(.mfi-page) .fin-cta-form .fin-cta-form-points li::before {
  color: var(--crm-blue);
  background: #fff;
}

body.finances-page:not(.mfi-page) .fin-cta-form .fin-cta-form-copy .crm-final-cta-review,
body.finances-page:not(.mfi-page) .fin-cta-form .fin-cta-form-copy .crm-final-cta-review *:not(.crm-final-cta-review-stars),
body.finances-page:not(.mfi-page) .fin-cta-form .crm-final-cta-review-stars {
  color: #d4a017;
}

body.finances-page:not(.mfi-page) .fin-cta-form .fin-cta-form-panel {
  box-shadow: 0 18px 44px rgba(4, 22, 80, 0.3);
}

body.finances-page:not(.mfi-page) .fin-cta-form .crm-proof-demo-widget .trackwick_public_form_submit-btn,
body.finances-page:not(.mfi-page) .fin-cta-form .crm-proof-demo-widget .trackwick_public_form_submit-btn .ant-btn,
body.finances-page:not(.mfi-page) .fin-cta-form .crm-proof-demo-widget .btn-box button,
body.finances-page:not(.mfi-page) .fin-cta-form .crm-proof-demo-widget button[type="submit"],
body.finances-page:not(.mfi-page) .fin-cta-form .crm-proof-demo-widget input[type="submit"],
body.finances-page:not(.mfi-page) .fin-cta-form .crm-proof-demo-fallback {
  color: #fff !important;
  background: var(--crm-blue) !important;
  border-color: var(--crm-blue) !important;
}

body.finances-page:not(.mfi-page) .fin-cta-form .crm-proof-demo-widget .trackwick_public_form_submit-btn:hover,
body.finances-page:not(.mfi-page) .fin-cta-form .crm-proof-demo-widget .trackwick_public_form_submit-btn .ant-btn:hover,
body.finances-page:not(.mfi-page) .fin-cta-form .crm-proof-demo-widget .btn-box button:hover,
body.finances-page:not(.mfi-page) .fin-cta-form .crm-proof-demo-widget button[type="submit"]:hover,
body.finances-page:not(.mfi-page) .fin-cta-form .crm-proof-demo-widget input[type="submit"]:hover {
  background: var(--crm-blue) !important;
  border-color: var(--crm-blue) !important;
}

body.finances-page:not(.mfi-page) .fin-cta-form .crm-proof-demo-fallback:hover {
  background: #133fb3 !important;
  border-color: #133fb3 !important;
}

.finances-page .fin-cta-form-panel h3 {
  margin: 0 0 16px;
  color: var(--fin-hero-ink);
  font-size: 22px;
  font-weight: 800;
}

.finances-page .fin-cta-form-panel .crm-proof-demo-success {
  min-height: 340px;
  color: var(--fin-hero-ink);
}

@media (max-width: 1024px) {
  .finances-page .fin-cta-form-card {
    padding: 40px 32px;
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .finances-page .fin-cta-form-card::before {
    inset: 0;
  }
}

@media (max-width: 560px) {
  .finances-page .fin-cta-form {
    padding: 56px 0;
  }

  .finances-page .fin-cta-form-card {
    padding: 32px 20px;
    border-radius: 22px;
  }

  .finances-page .fin-cta-form-copy > p {
    font-size: 16px;
  }

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

/* Hero rebuilt as a centred layout (reference: pill eyebrow, large centred
   headline, centred subhead, email + demo button) on the supplied blue grid
   background. Only the hero changes; the nav and the logo strip below are
   untouched. */
.finances-page .crm-suite-hero.fin-hero-center {
  min-height: 0;
  background: #f1f6fe;
}

.finances-page .crm-suite-hero.fin-hero-center::before,
.finances-page .crm-suite-hero.fin-hero-center::after {
  display: none;
}

.finances-page .fin-hero-center .crm-suite-hero-inner {
  display: block;
  min-height: 0;
  padding-top: 150px;
  padding-bottom: 150px;
}

.finances-page .fin-hero-center .prod-hero-copy {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  container-type: normal;
  text-align: center;
}

.finances-page .fin-hero-center .fin-hero-eyebrow {
  display: inline-flex;
  margin: 0 0 26px;
  padding: 10px 22px;
  color: var(--fin-hero-ink);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(30, 91, 250, 0.16);
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(30, 91, 250, 0.08);
  font-size: 16px;
  font-weight: 500;
}

.finances-page .fin-hero-center .fin-hero-eyebrow::before {
  display: none;
}

.finances-page .fin-hero-center .prod-hero-headline {
  margin: 0 auto;
  font-size: clamp(34px, 4.6vw, 68px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.1;
  text-align: center;
  text-wrap: balance;
}

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

.finances-page .fin-hero-center .fin-hero-title-accent {
  display: inline;
}

.finances-page .fin-hero-center .prod-hero-sub {
  max-width: 760px;
  margin: 24px auto 36px;
  font-size: 19px;
  text-align: center;
  text-wrap: balance;
}

/* Email field + demo button in one rounded bar, as in the reference. */
.finances-page .fin-hero-email {
  display: flex;
  max-width: 620px;
  margin: 0 auto;
  padding: 6px;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid rgba(11, 21, 48, 0.08);
  border-radius: 999px;
  box-shadow: 0 16px 40px rgba(30, 91, 250, 0.12);
}

.finances-page .fin-hero-email input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 12px 20px;
  color: var(--fin-hero-ink);
  background: transparent;
  border: 0;
  outline: none;
  font-size: 16px;
}

.finances-page .fin-hero-email input::placeholder {
  color: #7b8494;
}

.finances-page .fin-hero-email button {
  display: inline-flex;
  flex: 0 0 auto;
  padding: 8px 8px 8px 22px;
  align-items: center;
  gap: 12px;
  color: #fff;
  background: var(--crm-blue);
  border: 0;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease;
}

.finances-page .fin-hero-email button:hover {
  background: #164bd6;
}

.finances-page .fin-hero-email-arrow {
  display: grid;
  width: 36px;
  height: 36px;
  color: var(--crm-blue);
  background: #fff;
  border-radius: 50%;
  font-size: 18px;
  place-items: center;
}

.finances-page .fin-hero-center .fin-hero-proof {
  max-width: 820px;
  margin: 48px auto 0;
  text-align: left;
}

@media (max-width: 1180px) {
  .finances-page .fin-hero-center .fin-hero-proof {
    max-width: 820px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .finances-page .fin-hero-center .crm-suite-hero-inner {
    padding-top: 110px;
    padding-bottom: 96px;
  }

  .finances-page .fin-hero-center .fin-hero-proof {
    max-width: 440px;
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .finances-page .fin-hero-center .fin-hero-eyebrow {
    padding: 8px 14px;
    font-size: 13px;
  }

  .finances-page .fin-hero-center .prod-hero-sub {
    font-size: 16px;
  }

  .finances-page .fin-hero-email {
    flex-direction: column;
    padding: 8px;
    border-radius: 20px;
  }

  .finances-page .fin-hero-email input {
    width: 100%;
    text-align: center;
  }

  .finances-page .fin-hero-email button {
    width: 100%;
    justify-content: center;
  }
}

/* Hero ends shortly after the "Book a Free Demo" bar; the bottom padding
   leaves room for the logo strip's 68px overlap. */
.finances-page .fin-hero-center .crm-suite-hero-inner {
  padding-bottom: 150px;
}

/* Subhead set as two balanced, centred lines like the reference. */
.finances-page .fin-hero-center .prod-hero-sub {
  max-width: 900px;
  margin: 26px auto 38px;
  color: #5b6474;
  font-size: 19px;
  line-height: 1.65;
  text-align: center;
  text-wrap: balance;
}

/* Larger top-level navigation text (dropdown items unchanged). */
.finances-page .ffm-nav-shell #menu > .menu-item > .menu-text,
.finances-page .ffm-nav-shell #menu > .menu-item > .menu-text span,
.finances-page .ffm-nav-shell #menu > .nav-item > .menu-text,
.finances-page .ffm-nav-shell #menu > .nav-item > .menu-text span,
.finances-page .ffm-nav-shell #resourceBtn {
  font-size: 16px !important;
  font-weight: 500 !important;
}

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

  .finances-page .fin-hero-center .prod-hero-sub {
    font-size: 16px;
  }
}

/* Corner animation: blue dots travel slowly along the arcs drawn in the
   hero background (top left and top right), our own CSS, no external
   assets. Ring centres/radii are measured in the background image's own
   pixels (1813 x 868); the image is width-scaled and top-anchored, so one
   image pixel = 100cqw / 1813 of the hero. */
.finances-page .crm-suite-hero.fin-hero-center {
  container-type: inline-size;
}

.finances-page .fin-hero-orbits {
  --u: calc(100cqw / 1813);
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

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

.finances-page .fin-hero-orbit {
  --dot: radial-gradient(circle, #5b9bf5 0 3.5px, rgba(91, 155, 245, 0.25) 4px 5px, transparent 5.5px);
  position: absolute;
  top: calc((var(--cy) - var(--r)) * var(--u) - 6px);
  left: calc((var(--cx) - var(--r)) * var(--u) - 6px);
  width: calc(var(--r) * 2 * var(--u) + 12px);
  height: calc(var(--r) * 2 * var(--u) + 12px);
  background:
    var(--dot) 50% 0 / 12px 12px no-repeat,
    var(--dot) 100% 50% / 12px 12px no-repeat,
    var(--dot) 50% 100% / 12px 12px no-repeat,
    var(--dot) 0 50% / 12px 12px no-repeat;
  border-radius: 50%;
  animation: fin-hero-orbit var(--speed, 48s) linear infinite;
  animation-direction: var(--dir, normal);
}

/* Rings are centred just off-screen in the top corners, so the visible part
   is the lower quarter of each circle. Clockwise therefore moves the left
   dots top -> bottom and the right dots bottom -> top. */
.finances-page .fin-hero-orbit--l1 { --cx: -127; --cy: 37; --r: 337; --a0: 20deg; --speed: 18s; }
.finances-page .fin-hero-orbit--l2 { --cx: -127; --cy: 37; --r: 456; --a0: 65deg; --speed: 24s; }
.finances-page .fin-hero-orbit--r1 { --cx: 1920; --cy: 50; --r: 328; --a0: -20deg; --speed: 19s; --dir: normal; }
.finances-page .fin-hero-orbit--r2 { --cx: 1920; --cy: 50; --r: 450; --a0: -60deg; --speed: 23s; --dir: normal; }

@keyframes fin-hero-orbit {
  from { transform: rotate(var(--a0, 0deg)); }
  to { transform: rotate(calc(var(--a0, 0deg) + 360deg)); }
}

@media (prefers-reduced-motion: reduce) {
  .finances-page .fin-hero-orbit {
    animation: none;
    transform: rotate(var(--a0, 0deg));
  }
}

/* Below this width the background scales by height, so the arcs no longer
   line up with the rings; the static background alone is shown. */
@media (max-width: 900px) {
  .finances-page .fin-hero-orbits {
    display: none;
  }
}

/* Hero backdrop redrawn in CSS to match the reference exactly: a soft
   top-centre blue glow, a faint centre grid, and thin corner arcs with small
   dark dots travelling along them. (Replaces the background image, whose
   baked-in static arcs and dots could not line up with moving ones.) */
.finances-page .crm-suite-hero.fin-hero-center {
  background:
    radial-gradient(ellipse 34% 60% at 50% 0%, rgba(96, 160, 255, 0.55) 0%, rgba(140, 186, 255, 0.28) 45%, rgba(140, 186, 255, 0) 100%),
    linear-gradient(180deg, #f1f6fe 0%, #f5f9ff 70%, #f8fbff 100%);
}

.finances-page .fin-hero-grid {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 50%;
  width: min(820px, 56%);
  height: 88%;
  background-image:
    linear-gradient(rgba(30, 91, 250, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 91, 250, 0.07) 1px, transparent 1px);
  background-position: center top;
  background-size: 82px 82px;
  pointer-events: none;
  transform: translateX(-50%);
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 30%, #000 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 60% 70% at 50% 30%, #000 30%, transparent 100%);
}

/* Corner arcs: the ring draws the thin line (::before) and carries eight
   small dots (::after box-shadows, 45° apart) that turn with it. */
.finances-page .fin-hero-orbit {
  --R: calc(var(--r) * var(--u));
  background: none;
}

.finances-page .fin-hero-orbit::before {
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(11, 21, 48, 0.1);
  border-radius: 50%;
  content: "";
}

.finances-page .fin-hero-orbit::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  content: "";
  box-shadow:
    var(--R) 0 0 0 #111827,
    calc(var(--R) * 0.7071) calc(var(--R) * 0.7071) 0 0 #111827,
    0 var(--R) 0 0 #111827,
    calc(var(--R) * -0.7071) calc(var(--R) * 0.7071) 0 0 #111827,
    calc(var(--R) * -1) 0 0 0 #111827,
    calc(var(--R) * -0.7071) calc(var(--R) * -0.7071) 0 0 #111827,
    0 calc(var(--R) * -1) 0 0 #111827,
    calc(var(--R) * 0.7071) calc(var(--R) * -0.7071) 0 0 #111827;
}

/* The arcs now scale with the hero on every screen size. */
@media (max-width: 900px) {
  .finances-page .fin-hero-orbits {
    display: block;
  }

  .finances-page .fin-hero-grid {
    width: 86%;
  }
}

/* Subhead: one sentence per line, like the reference's two short lines. */
.finances-page .fin-hero-center .prod-hero-sub {
  max-width: none;
  color: #6b7280;
  font-size: 18px;
  line-height: 1.7;
  text-wrap: wrap;
}

@media (max-width: 1100px) {
  .finances-page .fin-hero-sub-break {
    display: none;
  }

  .finances-page .fin-hero-center .prod-hero-sub {
    max-width: 720px;
    text-wrap: balance;
  }
}

/* Lighter theme: pale blue base with a soft top glow, and the small 48px
   grid texture from the reference. */
.finances-page .crm-suite-hero.fin-hero-center {
  background:
    radial-gradient(ellipse 34% 55% at 50% 0%, rgba(130, 180, 255, 0.28) 0%, rgba(160, 198, 255, 0.12) 50%, rgba(160, 198, 255, 0) 100%),
    #f3f8ff;
}

.finances-page .fin-hero-grid {
  background-image:
    linear-gradient(rgba(30, 91, 250, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 91, 250, 0.055) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* Grid texture only in a central block behind the heading (as in the
   reference), not across the whole hero; it fades out towards its bottom
   and sides. */
.finances-page .fin-hero-grid {
  left: 50%;
  width: min(760px, 52%);
  height: 86%;
  background-position: center top;
  transform: translateX(-50%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, 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 55%, transparent 100%),
    linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
  mask-composite: intersect;
}

@media (max-width: 900px) {
  .finances-page .fin-hero-grid {
    width: 86%;
  }
}

/* Spacing and CTA weight per reference: more room between the navigation
   and the eyebrow pill, and between the email/demo bar and the logo strip
   (which overlaps the hero by 68px, 50px on mobile); medium-weight button
   text like the reference's "Request a Demo". */
.finances-page .fin-hero-center .crm-suite-hero-inner {
  padding-top: 190px;
  padding-bottom: 220px;
}

.finances-page .fin-hero-email button {
  font-weight: 500;
}

.finances-page .fin-hero-email input {
  font-weight: 400;
}

@media (max-width: 900px) {
  .finances-page .fin-hero-center .crm-suite-hero-inner {
    padding-top: 140px;
    padding-bottom: 130px;
  }
}

/* Hero demo button: solid brand blue with bold text (the earlier look);
   the arrow circle picks up the same blue. */
.finances-page .fin-hero-email button {
  background: var(--crm-blue);
  font-weight: 700;
}

.finances-page .fin-hero-email button:hover {
  background: #164bd6;
}

/* Headline: more line height, and a fixed-width slot for the flipping word
   (sized by the longer "Faster", word centred inside) so "That Collects"
   never shifts or flickers while the word changes. The slot height matches
   the headline line height so the word sits exactly on the line. */
.finances-page .fin-hero-center .prod-hero-headline {
  line-height: 1.1;
}

.finances-page .fin-hero-center .fin-hero-flip {
  height: 1.1em;
  justify-items: start; /* word sits right after "Collects": no extra gap */
}

.finances-page .fin-hero-center .fin-hero-flip::after {
  display: block;
}

/* More space BETWEEN the hero blocks (eyebrow, heading, subheading, CTA);
   line spacing inside each block stays as before. */
.finances-page .fin-hero-center .fin-hero-eyebrow {
  margin-bottom: 32px;
}

.finances-page .fin-hero-center .prod-hero-sub {
  margin-top: 36px;
  margin-bottom: 48px;
  line-height: 1.7;
}

@media (max-width: 900px) {
  .finances-page .fin-hero-center .fin-hero-eyebrow {
    margin-bottom: 24px;
  }

  .finances-page .fin-hero-center .prod-hero-sub {
    margin-top: 24px;
    margin-bottom: 36px;
  }
}

/* Top-right "Request a Demo" uses the same solid brand blue as the hero's
   "Book a Free Demo" button (desktop, scrolled header and mobile). */
.finances-page .ffm-nav-shell.main-container .header-container .header-container-box .top-buttons .start-trial-btn,
.finances-page .ffm-nav-shell.main-container .header-container.header-on-scroll .header-container-box .top-buttons .start-trial-btn,
.finances-page .ffm-nav-shell .top-buttons > #startTrial2,
.finances-page .ffm-nav-shell .header-container.header-on-scroll .top-buttons > #startTrial2 {
  color: #fff !important;
  background: var(--crm-blue) !important;
  border-color: var(--crm-blue) !important;
  box-shadow: 0 6px 16px rgba(30, 91, 250, 0.22) !important;
  -webkit-text-fill-color: #fff;
}

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

/* Hero entrance on page load, in the reference's order: eyebrow and
   heading first, then the subheading, then the email/demo bar. Each part
   fades in and rises slightly; plays once. */
@keyframes fin-hero-rise {
  from {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.finances-page .fin-hero-center .fin-hero-eyebrow,
.finances-page .fin-hero-center .prod-hero-headline,
.finances-page .fin-hero-center .prod-hero-sub,
.finances-page .fin-hero-center .fin-hero-email {
  animation: fin-hero-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.finances-page .fin-hero-center .fin-hero-eyebrow { animation-delay: 0.1s; }
.finances-page .fin-hero-center .prod-hero-headline { animation-delay: 0.2s; }
.finances-page .fin-hero-center .prod-hero-sub { animation-delay: 0.55s; }
.finances-page .fin-hero-center .fin-hero-email { animation-delay: 0.85s; }

@media (prefers-reduced-motion: reduce) {
  .finances-page .fin-hero-center .fin-hero-eyebrow,
  .finances-page .fin-hero-center .prod-hero-headline,
  .finances-page .fin-hero-center .prod-hero-sub,
  .finances-page .fin-hero-center .fin-hero-email {
    animation: none;
  }
}

/* "One App. Every Field Visit. Zero Guesswork." now carries only its
   heading and intro, on the reference's texture: evenly spaced vertical
   lines over a soft top-centre glow, in the hero's blue. */
.finances-page .fin-journey {
  position: relative;
  padding: 104px 0 112px;
  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%);
}

/* Vertical lines only across the width of the text block (the paragraph
   under the heading, 928px = 16 x 58px), in their own layer above the glow
   so every line is the same darker blue. Edge lines close the band. */
.finances-page .fin-journey::before {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 50%;
  width: min(929px, calc(100% - 48px));
  /* Only the top area, from the section top down to the heading; the lines
     fade out behind the heading so the paragraph sits on a clean background. */
  /* Full strength down to the gap between the heading and the paragraph
     (section padding 104px + pill + two-line heading ≈ 284px), then a short
     fade so the lines end right where the paragraph starts. */
  height: 290px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 92%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 92%, transparent 100%);
  background: repeating-linear-gradient(90deg, rgba(30, 91, 250, 0.07) 0 1px, transparent 1px 58px);
  border-right: 1px solid rgba(30, 91, 250, 0.07);
  content: "";
  pointer-events: none;
  transform: translateX(-50%);
}

.finances-page .fin-journey-container {
  position: relative;
  z-index: 1;
}



.finances-page .fin-journey-heading p#finance-app-answer {
  max-width: 900px;
  margin-inline: auto;
}

@media (max-width: 900px) {
  .finances-page .fin-journey {
    padding: 72px 0 80px;
  }
}

@media (max-width: 900px) {
  .finances-page .fin-journey::before {
    height: 230px; /* smaller padding and heading on tablet/mobile */
  }
}

/* Capabilities ("Everything Finance Field Teams Need, Connected in One
   Place."): the hero's pale-blue theme, rows alternating lighter / darker. */
.finances-page .crm-workflow {
  background: #f3f8ff;
}

.finances-page .crm-workflow-step {
  background: #f3f8ff;
}

.finances-page .crm-workflow-step:nth-child(even) {
  background: #e4eeff;
}

/* One headline style for every content section, matching "The Problem" and
   "The Platform": 800 weight, clamp(28px, 3.4vw, 48px), tight tracking,
   dark ink with the accent part in solid brand blue (no gradients), pill
   18px above. Dark sections (Integrations, Customer Stories) keep white
   text with a light-blue accent for contrast. */
.finances-page :is(
  .fin-journey-heading h2,
  .fin-leaks-heading h2,
  .crm-workflow-heading h2,
  .crm-communication-heading h2,
  .prod-task-capabilities-head h2,
  .crm-integrations-copy h2,
  .fin-compare-heading h2,
  .crm-customer-stories .prod-stories-head h2,
  .crm-get-started h2,
  .crm-faq-heading h2
) {
  margin-top: 0 !important;
  color: var(--fin-hero-ink) !important;
  font-size: clamp(28px, 3.4vw, 48px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.12 !important;
  text-wrap: balance;
}

.finances-page :is(
  .fin-journey-heading h2,
  .fin-leaks-heading h2,
  .crm-workflow-heading h2,
  .crm-communication-heading h2,
  .prod-task-capabilities-head h2,
  .fin-compare-heading h2,
  .crm-get-started h2,
  .crm-faq-heading h2
) :is(span, .prod-task-capabilities-heading-accent) {
  color: var(--crm-blue) !important;
  background: none !important;
  -webkit-text-fill-color: var(--crm-blue) !important;
}

.finances-page .prod-task-capabilities-head .prod-task-capabilities-heading-primary {
  color: var(--fin-hero-ink);
  -webkit-text-fill-color: var(--fin-hero-ink);
}

/* Dark sections */
.finances-page :is(.crm-integrations-copy h2, .crm-customer-stories .prod-stories-head h2) {
  color: #fff !important;
  -webkit-text-fill-color: #fff;
}

.finances-page :is(.crm-integrations-copy h2, .crm-customer-stories .prod-stories-head h2) span {
  color: #7fb0ff !important;
  background: none !important;
  -webkit-text-fill-color: #7fb0ff !important;
}

/* Same gap between the pill and every headline. */
.finances-page .fin-section-tag,
.finances-page .prod-stories-head .prod-stories-eyebrow,
.finances-page .prod-task-capabilities-head .prod-task-capabilities-eyebrow {
  margin-bottom: 18px !important;
}

/* "One App. Every Field Visit. Zero Guesswork." wraps as before (natural
   wrapping, not balanced), so it reads "...Zero / Guesswork." */
.finances-page .fin-journey-heading h2 {
  text-wrap: wrap;
}

/* "Where Field Revenue Leaks, TrackOlap" stays on one line on desktop,
   with "Closes the Gaps." on the line below. */
.finances-page .fin-leaks-heading {
  max-width: 1100px;
}

.finances-page .fin-leaks-heading h2 .fin-leaks-lead.fin-leaks-lead.fin-leaks-lead {
  color: var(--fin-hero-ink) !important;
  -webkit-text-fill-color: var(--fin-hero-ink) !important;
}

@media (min-width: 901px) {
  .finances-page .fin-leaks-heading h2 .fin-leaks-lead {
    white-space: nowrap;
  }
}

/* "One App. Every Field Visit." on one line, "Zero Guesswork." (blue)
   on the next. */
.finances-page .fin-journey-heading h2 .fin-journey-lead.fin-journey-lead.fin-journey-lead {
  color: var(--fin-hero-ink) !important;
  -webkit-text-fill-color: var(--fin-hero-ink) !important;
}

@media (min-width: 701px) {
  .finances-page .fin-journey-heading h2 .fin-journey-lead {
    white-space: nowrap;
  }
}

/* "Everything Finance Field Teams Need," on one line, "Connected in One
   Place." (blue) on the next. */
.finances-page .crm-workflow-heading h2 .fin-workflow-lead.fin-workflow-lead.fin-workflow-lead {
  color: var(--fin-hero-ink) !important;
  -webkit-text-fill-color: var(--fin-hero-ink) !important;
}

@media (min-width: 761px) {
  .finances-page .crm-workflow-heading h2 .fin-workflow-lead {
    white-space: nowrap;
  }
}

/* "Zero" stays blue at the end of the first line. */
.finances-page .fin-journey-heading h2 .fin-journey-lead .fin-journey-accent.fin-journey-accent.fin-journey-accent {
  color: var(--crm-blue) !important;
  -webkit-text-fill-color: var(--crm-blue) !important;
}

/* Capabilities subheading spans the same width as the heading's first
   line, so the text lines up with the heading edges (two lines on desktop). */
.finances-page .crm-section-heading.crm-workflow-heading > p.crm-workflow-summary {
  max-width: 960px;
  text-wrap: balance;
}

/* Capabilities step descriptions use the same size as the section
   subheading (20px desktop, 18px on tablet/mobile). */
.finances-page .crm-step-description {
  font-size: 20px;
  line-height: 1.7;
}

@media (max-width: 900px) {
  .finances-page .crm-step-description {
    font-size: 18px;
  }
}

/* Lending Segments heading in two lines: "Finance Field Force Management
   Software" / "Built for Every Segment of Finance", with the paragraph
   below spanning the same width in two balanced lines. */
.finances-page .crm-communication-heading.crm-section-heading {
  max-width: 1100px;
}

.finances-page .crm-communication-heading h2 .fin-segments-lead.fin-segments-lead.fin-segments-lead {
  color: var(--fin-hero-ink) !important;
  -webkit-text-fill-color: var(--fin-hero-ink) !important;
}

@media (min-width: 900px) {
  .finances-page .crm-communication-heading h2 .fin-segments-lead {
    white-space: nowrap;
  }
}

/* Paragraph spans the width of the heading's second line ("Built for Every
   Segment of Finance", ~880px), so its lines line up with that line. */
.finances-page .crm-section-heading.crm-communication-heading > p:last-child {
  /* Width of "Built for Every Segment of Finance" ≈ 18.1 × the heading's
     font size, so it tracks the heading at every screen width; justified
     so each full line starts and ends exactly under that heading line. */
  width: 100%;
  max-width: calc(clamp(28px, 3.4vw, 48px) * 18.1);
  margin-inline: auto;
  text-align: justify;
  text-align-last: center;
  text-wrap: wrap;
  hyphens: none;
}

@media (max-width: 700px) {
  .finances-page .crm-section-heading.crm-communication-heading > p:last-child {
    text-align: center;
  }
}

/* "Zero Blind Spots. Zero Audit Surprises.": only the two "Zero"s in blue,
   the rest in the dark headline colour. */
.finances-page .prod-task-capabilities-head h2 .prod-task-capabilities-heading-primary.prod-task-capabilities-heading-primary.prod-task-capabilities-heading-primary {
  color: var(--fin-hero-ink) !important;
  background: none !important;
  -webkit-text-fill-color: var(--fin-hero-ink) !important;
}

.finances-page .prod-task-capabilities-head h2 .prod-task-capabilities-heading-primary .prod-task-capabilities-heading-accent.prod-task-capabilities-heading-accent {
  color: var(--crm-blue) !important;
  -webkit-text-fill-color: var(--crm-blue) !important;
}

/* Demo CTA runs full width: the blue band spans the whole page edge to
   edge (no white margin or rounded corners); its content stays aligned to
   the site's 1180px content width. */
.finances-page .fin-cta-form {
  padding: 0;
}

.finances-page .fin-cta-form > .crm-container {
  width: 100%;
  max-width: none;
}

.finances-page .fin-cta-form-card {
  padding: 88px max(24px, calc((100% - 1180px) / 2));
  border-radius: 0;
  box-shadow: none;
}

.finances-page .fin-cta-form-card::before {
  border-radius: 0;
}

@media (max-width: 1024px) {
  .finances-page .fin-cta-form-card {
    padding: 56px 24px;
  }
}

@media (max-width: 560px) {
  .finances-page .fin-cta-form-card {
    padding: 44px 16px;
  }
}

/* Demo CTA content sits a little further left: wider content area (1340px
   instead of 1180px), so the pitch starts closer to the left edge. */
.finances-page .fin-cta-form-card {
  padding-right: max(24px, calc((100% - 1340px) / 2));
  padding-left: max(24px, calc((100% - 1340px) / 2));
}

@media (max-width: 1024px) {
  .finances-page .fin-cta-form-card {
    padding-right: 24px;
    padding-left: 24px;
  }
}

@media (max-width: 560px) {
  .finances-page .fin-cta-form-card {
    padding-right: 16px;
    padding-left: 16px;
  }
}

/* Results: "What Finance Teams Achieve With TrackOlap" — four stat cards. */
.finances-page .fin-results {
  padding: 96px 0 72px;
  background:
    radial-gradient(ellipse 60% 70% at 50% 0%, rgba(140, 186, 255, 0.22), rgba(140, 186, 255, 0) 70%),
    #f6f9ff;
}

.finances-page .fin-results-heading {
  max-width: 900px;
  margin: 0 auto 48px;
  text-align: center;
}

.finances-page .fin-results-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;
}

.finances-page .fin-results-heading h2 span {
  color: var(--crm-blue);
}

.finances-page .fin-results-heading > p:last-child {
  margin: 18px auto 0;
  color: var(--fin-hero-muted);
  font-size: 18px;
  line-height: 1.65;
}

.finances-page .fin-results-grid {
  display: grid;
  margin: 0;
  padding: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  list-style: none;
}

.finances-page .fin-results-card {
  display: flex;
  min-height: 280px;
  padding: 40px 28px 32px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
  border: 1px solid rgba(30, 91, 250, 0.08);
  border-radius: 22px;
  box-shadow: 0 18px 40px rgba(11, 21, 48, 0.06);
}

.finances-page .fin-results-prefix {
  color: var(--fin-hero-muted);
  font-size: 17px;
}

.finances-page .fin-results-value {
  display: inline-flex;
  margin: 6px 0 10px;
  align-items: center;
  gap: 12px;
}

.finances-page .fin-results-value strong {
  color: var(--crm-blue);
  font-size: clamp(40px, 4vw, 56px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}

.finances-page .fin-results-trend {
  display: grid;
  width: 34px;
  height: 34px;
  color: #16a34a;
  background: #dcfce7;
  border-radius: 50%;
  place-items: center;
}

.finances-page .fin-results-trend svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.finances-page .fin-results-label {
  color: var(--fin-hero-ink);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.35;
}

.finances-page .fin-results-note {
  margin-top: 10px;
  color: var(--fin-hero-muted);
  font-size: 14px;
  line-height: 1.5;
}

.finances-page .fin-results-note a {
  color: var(--crm-blue);
  font-weight: 600;
}

.finances-page .fin-results-footnote {
  max-width: 900px;
  margin: 32px auto 0;
  color: #7b8494;
  font-size: 13px;
  text-align: center;
}

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

@media (max-width: 560px) {
  .finances-page .fin-results {
    padding: 64px 0 56px;
  }

  .finances-page .fin-results-grid {
    grid-template-columns: 1fr;
  }

  .finances-page .fin-results-card {
    min-height: 0;
    padding: 28px 20px;
  }
}

/* Hero: grid texture a little more visible, and a slightly deeper blue at
   the top centre. */
.finances-page .crm-suite-hero.fin-hero-center {
  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%);
}

.finances-page .fin-hero-grid {
  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);
}

/* Capabilities rows alternate light / dark using the same colours as the
   hero (light) and "The Platform" section (darker top-centre glow), with
   no texture. The heading area uses the light version. */
.finances-page .crm-workflow {
  background:
    radial-gradient(ellipse 36% 58% at 50% 0%, rgba(110, 166, 255, 0.3) 0%, rgba(150, 192, 255, 0.12) 50%, rgba(150, 192, 255, 0) 100%),
    linear-gradient(180deg, #ebf3ff 0%, #f3f8ff 45%);
}

.finances-page .crm-workflow-step {
  background:
    radial-gradient(ellipse 50% 70% at 50% 0%, rgba(150, 192, 255, 0.14) 0%, rgba(150, 192, 255, 0) 100%),
    #f3f8ff;
}

.finances-page .crm-workflow-step:nth-child(even) {
  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, #e2edff 0%, #eef5ff 100%);
}

/* Capabilities: exact same gradients as the hero (heading area and odd
   rows) and "The Platform" section (even rows); colour only, no texture. */
.finances-page .crm-workflow,
.finances-page .crm-workflow-step {
  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%);
}

.finances-page .crm-workflow-step:nth-child(even) {
  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%);
}

/* Lending Segments section: same gradient as the even Capabilities rows /
   "The Platform" section (wide blue glow from the top centre). */
.finances-page .crm-section.crm-communication {
  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%);
}

/* Results section: same gradient as the hero. */
.finances-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%);
}

/* "Select Product You Interested On*" shown as a dropdown (see the
   enhanceProductField script): the form's own options become a floating
   panel under a toggle, so the field takes one input's height. */
.finances-page [data-fin-product="field"] {
  position: relative;
}

.finances-page [data-fin-product="toggle"] {
  display: block;
  width: 100%;
  min-height: 38px;
  padding: 8px 36px 8px 12px;
  overflow: hidden;
  color: #8a94a6;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%234f5868' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 12px center / 12px 8px no-repeat;
  border: 1px solid #c8d1dc;
  border-radius: 4px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.4;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.finances-page [data-fin-product="toggle"].has-value {
  color: var(--fin-hero-ink);
}

.finances-page [data-fin-product="toggle"]:focus-visible,
.finances-page [data-fin-product="field"][data-fin-open="true"] [data-fin-product="toggle"] {
  border-color: var(--crm-blue);
  outline: none;
  box-shadow: 0 0 0 3px rgba(30, 91, 250, 0.15);
}

.finances-page [data-fin-product="field"][data-fin-open="false"] [data-fin-product="menu"] {
  display: none !important;
}

.finances-page [data-fin-product="field"][data-fin-open="true"] [data-fin-product="menu"] {
  position: absolute !important;
  z-index: 30;
  right: 0;
  left: 0;
  display: grid !important;
  max-height: 230px;
  margin-top: 4px;
  padding: 10px 14px;
  overflow-y: auto;
  gap: 8px;
  background: #fff;
  border: 1px solid #dbe3ee;
  border-radius: 10px;
  box-shadow: 0 16px 36px rgba(11, 21, 48, 0.18);
}

.finances-page [data-fin-product="menu"] label,
.finances-page [data-fin-product="menu"] .ant-checkbox-wrapper,
.finances-page [data-fin-product="menu"] .ant-radio-wrapper {
  display: flex !important;
  margin: 0 !important;
  align-items: center;
  gap: 8px;
  color: var(--fin-hero-ink) !important;
  font-size: 14px !important;
}

/* Shorter demo CTA: less vertical padding in the blue band, tighter form
   spacing and a shorter message box. */
.finances-page .fin-cta-form-card {
  padding-top: 56px;
  padding-bottom: 56px;
}

.finances-page .fin-cta-form-panel {
  padding: 24px 26px 20px;
}

.finances-page .fin-cta-form-panel h3 {
  margin-bottom: 12px;
}

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

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

.finances-page .fin-cta-form-panel .crm-proof-demo-widget textarea {
  min-height: 72px !important;
  max-height: 96px;
}

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

/* "Zero Blind Spots. Zero Audit Surprises." (security section): same
   background gradient as "The Platform" section (colour only). */
.finances-page .prod-task-capabilities {
  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%);
}

/* "Why Lenders Choose TrackOlap Over Generic CRMs": same gradient as the
   hero (replaces the soft corner circles). */
.finances-page .fin-compare {
  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%);
}

/* Microfinance spotlight: expanding-card layout from the Attendance and
   Leave page ("Built Around How Your Teams Work"), scoped to this page. */
.finances-page .attendance-workforce-solutions {
  padding: 96px 24px 104px;
  background: #fff;
}

.finances-page .attendance-workforce-solutions > .ffm-container {
  width: min(100%, 1160px);
}

.finances-page .attendance-workforce-solutions-heading {
  max-width: 1180px;
  margin: 0 auto;
  text-align: center;
}

.finances-page main .attendance-workforce-solutions-heading h2 {
  margin: 0;
  color: #111;
  font-size: clamp(42px, 4vw, 58px) !important;
  font-weight: 400 !important;
  line-height: 1.12 !important;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

@media (min-width: 992px) {
.finances-page main .attendance-workforce-solutions-heading h2 {
    white-space: nowrap;
  }

}

.finances-page main .attendance-workforce-solutions-heading p {
  margin: 18px auto 0;
  color: var(--fin-hero-muted);
  font-size: 20px !important;
  line-height: 1.5 !important;
  text-align: center;
}

.finances-page main .attendance-workforce-solutions-heading-accent {
  color: var(--beat-warm);
  background: linear-gradient(90deg, var(--beat-warm), var(--beat-orange));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.finances-page .attendance-workforce-solutions-list {
  display: flex;
  width: 100%;
  margin: 0;
  padding: 48px 0 0;
  justify-content: flex-start;
  gap: 12px;
  list-style: none;
}

.finances-page .attendance-workforce-solution {
  position: relative;
  flex: 0 0 135px;
  width: 135px;
  height: 388px;
  min-width: 0;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(110deg, #a9271f 0%, #c83721 52%, #ff681b 100%);
  border-radius: 12px;
  cursor: pointer;
  transition:
    width 700ms cubic-bezier(0.11, 0.16, 0.43, 0.86),
    flex-basis 700ms cubic-bezier(0.11, 0.16, 0.43, 0.86);
}

.finances-page .attendance-workforce-solution:nth-child(2) {
  color: #111;
  background: #ffdb58;
}

.finances-page .attendance-workforce-solution:nth-child(2) .attendance-workforce-solution-collapsed-title,
.finances-page main .attendance-workforce-solution:nth-child(2) .attendance-workforce-solution-copy h3,
.finances-page main .attendance-workforce-solution:nth-child(2) .attendance-workforce-solution-copy > p {
  color: #111;
}

.finances-page .attendance-workforce-solution:nth-child(2) .attendance-workforce-solution-control:focus-visible {
  outline-color: #111;
}

.finances-page .attendance-workforce-solution:nth-child(3) {
  background: #43786f;
}

.finances-page .attendance-workforce-solution.is-active {
  flex-basis: calc(100% - 294px);
  width: calc(100% - 294px);
}

.finances-page .attendance-workforce-solution-card {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
}

.finances-page .attendance-workforce-solution-control {
  position: absolute;
  z-index: 5;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: inherit;
  cursor: pointer;
}

.finances-page .attendance-workforce-solution-control:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -7px;
}

.finances-page .attendance-workforce-solution-collapsed-title {
  position: absolute;
  z-index: 2;
  top: calc(50% - 32px);
  left: 50%;
  width: max-content;
  color: #fff;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.25;
  text-align: center;
  white-space: nowrap;
  transform: translate(-50%, -50%) rotate(-90deg);
  transition: opacity 180ms ease;
}

.finances-page .attendance-workforce-solution-collapsed-title > span {
  display: block;
}

.finances-page .attendance-workforce-solution.is-active .attendance-workforce-solution-collapsed-title {
  opacity: 0;
  visibility: hidden;
}

.finances-page .attendance-workforce-solution-copy {
  position: relative;
  z-index: 2;
  display: flex;
  width: 58%;
  max-width: 430px;
  padding: 38px 0 34px 42px;
  align-items: flex-start;
  flex-direction: column;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 220ms ease 180ms, transform 220ms ease 180ms, visibility 0s linear 180ms;
}

.finances-page .attendance-workforce-solution.is-active .attendance-workforce-solution-copy {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.finances-page main .attendance-workforce-solution-copy h3 {
  width: 100%;
  max-width: 100%;
  margin: 0;
  color: #fff;
  font-size: clamp(28px, 2.2vw, 34px) !important;
  font-weight: 700 !important;
  line-height: 1.18 !important;
  letter-spacing: -0.025em;
  text-align: left;
  overflow-wrap: normal;
  text-wrap: wrap;
}

.finances-page main .attendance-workforce-solution-copy > p {
  width: 100%;
  max-width: 100%;
  margin: 22px 0 0;
  color: #fff;
  font-size: 18px !important;
  line-height: 1.55 !important;
  text-align: left;
}

.finances-page .attendance-workforce-solution-visual {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 135px;
  height: 165px;
  padding: 14px 10px 0 14px;
  overflow: hidden;
  opacity: 0.72;
  pointer-events: none;
  transition: width 500ms ease, height 500ms ease, opacity 250ms ease;
}

.finances-page .attendance-workforce-solution.is-active .attendance-workforce-solution-visual {
  width: 48%;
  height: 100%;
  padding: 24px 14px 0 8px;
  opacity: 1;
}

.finances-page .attendance-workforce-solution-visual::before {
  position: absolute;
  inset: 24px -18px -24px 12px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 999px 0 0;
  content: "";
}

.finances-page .attendance-workforce-solution-visual img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right bottom;
  filter: drop-shadow(0 12px 18px rgba(20, 23, 24, 0.18));
}

@media (max-width: 1024px) {
.finances-page .attendance-workforce-solutions {
    padding: 80px 24px 88px;
  }

.finances-page .attendance-workforce-solutions-list {
    flex-direction: column;
    gap: 20px;
  }

.finances-page .attendance-workforce-solution,
.finances-page .attendance-workforce-solution.is-active {
    flex: none;
    width: 100%;
    height: 350px;
    transition: none;
  }

.finances-page .attendance-workforce-solution-control,
.finances-page .attendance-workforce-solution-collapsed-title {
    display: none;
  }

.finances-page .attendance-workforce-solution-copy,
.finances-page .attendance-workforce-solution.is-active .attendance-workforce-solution-copy {
    width: 62%;
    max-width: 580px;
    padding: 40px 0 36px 42px;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

.finances-page .attendance-workforce-solution-visual,
.finances-page .attendance-workforce-solution.is-active .attendance-workforce-solution-visual {
    width: 42%;
    height: 100%;
    padding: 24px 18px 0 8px;
    opacity: 1;
  }

}

@media (max-width: 700px) {
.finances-page .attendance-workforce-solutions {
    padding: 64px 18px 70px;
  }

.finances-page main .attendance-workforce-solutions-heading h2 {
    font-size: 32px !important;
  }

.finances-page .attendance-workforce-solutions-list {
    padding-top: 34px;
  }

.finances-page .attendance-workforce-solution,
.finances-page .attendance-workforce-solution.is-active {
    height: auto;
    min-height: 560px;
  }

.finances-page .attendance-workforce-solution-copy,
.finances-page .attendance-workforce-solution.is-active .attendance-workforce-solution-copy {
    width: 100%;
    max-width: none;
    padding: 30px 26px 290px;
  }

.finances-page main .attendance-workforce-solution-copy h3 {
    font-size: 28px !important;
  }

.finances-page main .attendance-workforce-solution-copy > p {
    font-size: 17px !important;
  }

.finances-page .attendance-workforce-solution-visual,
.finances-page .attendance-workforce-solution.is-active .attendance-workforce-solution-visual {
    width: 92%;
    height: 270px;
    padding: 14px 14px 0 0;
  }

}

/* Finance colours, headline style and background for the spotlight. */
.finances-page .attendance-workforce-solutions {
  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%);
}

.finances-page .attendance-workforce-solutions-heading {
  max-width: 1000px;
}

.finances-page main .attendance-workforce-solutions-heading h2 {
  color: var(--fin-hero-ink);
  font-size: clamp(28px, 3.4vw, 48px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em;
  white-space: normal !important;
}

.finances-page main .attendance-workforce-solutions-heading-accent {
  color: var(--crm-blue);
  background: none;
  -webkit-text-fill-color: var(--crm-blue);
}

.finances-page main .attendance-workforce-solutions-heading p {
  max-width: 900px;
  color: var(--fin-hero-muted);
  font-size: 18px !important;
  line-height: 1.65 !important;
}

.finances-page .attendance-workforce-solution {
  background: linear-gradient(110deg, #0b3fd8 0%, #1e5bfa 55%, #4d86ff 100%);
}

.finances-page .attendance-workforce-solution:nth-child(2) {
  color: #fff;
  background: linear-gradient(110deg, #0b3a68 0%, #165e9e 100%);
}

.finances-page .attendance-workforce-solution:nth-child(2) .attendance-workforce-solution-collapsed-title,
.finances-page main .attendance-workforce-solution:nth-child(2) .attendance-workforce-solution-copy h3,
.finances-page main .attendance-workforce-solution:nth-child(2) .attendance-workforce-solution-copy > p {
  color: #fff;
}

.finances-page .attendance-workforce-solution:nth-child(2) .attendance-workforce-solution-control:focus-visible {
  outline-color: #fff;
}

.finances-page .attendance-workforce-solution:nth-child(3) {
  background: linear-gradient(110deg, #06718f 0%, #1591c2 100%);
}

.finances-page .attendance-workforce-solutions-eyebrow {
  display: inline-flex;
  margin: 0 0 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;
}

.finances-page .attendance-workforce-solutions-eyebrow::before {
  width: 12px;
  height: 15px;
  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: "";
}

/* Capabilities: the heading and Step 01 share ONE hero gradient (the
   section's own background), so the glow no longer appears twice; later
   odd steps repeat the hero gradient, even steps use "The Platform" one. */
.finances-page .crm-workflow-step:first-child {
  background: transparent;
}

/* Microfinance spotlight with four cards: the open card leaves room for
   three 135px strips (plus gaps), and the fourth card gets its own colour. */
@media (min-width: 1025px) {
  .finances-page .attendance-workforce-solution.is-active {
    flex-basis: calc(100% - 441px);
    width: calc(100% - 441px);
  }
}

.finances-page .attendance-workforce-solution:nth-child(4) {
  background: linear-gradient(110deg, #3b3fb8 0%, #5b61e0 100%);
}

/* Microfinance spotlight: use more of the page width, keep the text and
   the image side by side (no overlap), and switch cards without the image
   resizing/fading or the text sliding, so nothing flickers. */
.finances-page .attendance-workforce-solutions > .ffm-container {
  width: min(100%, 1400px);
}

@media (min-width: 1025px) {
  .finances-page .attendance-workforce-solution {
    height: 420px;
  }

  .finances-page .attendance-workforce-solution-copy {
    width: 46%;
    max-width: 520px;
    padding: 40px 0 36px 44px;
    transform: none;
    transition: opacity 200ms ease 250ms, visibility 0s linear 250ms;
  }

  .finances-page .attendance-workforce-solution.is-active .attendance-workforce-solution-copy {
    transition: opacity 200ms ease 450ms, visibility 0s linear 0s;
  }

  .finances-page .attendance-workforce-solution-visual,
  .finances-page .attendance-workforce-solution.is-active .attendance-workforce-solution-visual {
    transition: none;
  }

  .finances-page .attendance-workforce-solution.is-active .attendance-workforce-solution-visual {
    width: 50%;
    padding: 28px 24px 0 0;
  }

  .finances-page .attendance-workforce-solution-visual img {
    object-position: right bottom;
    transform: translateZ(0);
    backface-visibility: hidden;
  }
}

/* Step 01 gets its own hero gradient, exactly like Step 03. The heading
   area above is plain pale blue so the glow still appears only once. */
.finances-page .crm-workflow {
  background: #f3f8ff;
}

.finances-page .crm-workflow-step:first-child {
  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%);
}

/* The Step 01 gradient now starts where the Capabilities section starts:
   one glow from the top of the section, running down behind the heading
   and Step 01 (Step 01 itself is transparent, so it appears only once).
   Sized in px so it covers roughly the heading + first step. */
.finances-page .crm-workflow {
  background:
    radial-gradient(ellipse 36% 620px at 50% 0%, rgba(110, 166, 255, 0.42) 0%, rgba(150, 192, 255, 0.18) 50%, rgba(150, 192, 255, 0) 100%) top center / 100% 1100px no-repeat,
    linear-gradient(180deg, #ebf3ff 0, #f3f8ff 500px) top center / 100% 1100px no-repeat,
    #f3f8ff;
}

.finances-page .crm-workflow-step:first-child {
  background: transparent;
}

/* Capabilities heading: the hero's grid texture (48px boxes, same line
   colour) behind the pill, heading and subheading only, fading out at the
   sides and just below the subheading. */
.finances-page .crm-section-heading.crm-workflow-heading {
  position: relative;
  isolation: isolate;
}

.finances-page .crm-section-heading.crm-workflow-heading::before {
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;
  width: min(900px, 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: 48px 48px;
  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;
}

/* Lending Segments heading: same grid texture as the hero / Capabilities
   heading, from the top of the section down to just below the paragraph
   (the pseudo-element reaches up through the section's 104px top padding). */
.finances-page .crm-section-heading.crm-communication-heading {
  position: relative;
  isolation: isolate;
}

.finances-page .crm-section-heading.crm-communication-heading::before {
  position: absolute;
  z-index: -1;
  top: -104px;
  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: 48px 48px;
  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) {
  .finances-page .crm-section-heading.crm-communication-heading::before {
    top: -72px;
  }
}

/* Lending Segments tab list: larger segment names and numbers. */
.finances-page .crm-communication-tab-name {
  font-size: 19px;
  line-height: 1.35;
}

.finances-page .crm-communication-tab-number {
  font-size: 14px;
}

@media (max-width: 700px) {
  .finances-page .crm-communication-tab-name {
    font-size: 17px;
  }
}

/* Same heading grid texture on Results, Zero Blind Spots (security),
   Why TrackOlap (comparison) and the Microfinance spotlight: behind the
   pill, headline and intro only, from the top of each section, fading out
   at the sides and just below the intro. */
.finances-page :is(
  .fin-results-heading,
  .prod-task-capabilities-head,
  .fin-compare-heading,
  .attendance-workforce-solutions-heading
) {
  position: relative;
  isolation: isolate;
}

.finances-page :is(
  .fin-results-heading,
  .prod-task-capabilities-head,
  .fin-compare-heading,
  .attendance-workforce-solutions-heading
)::before {
  position: absolute;
  z-index: -1;
  top: -96px;
  bottom: -24px;
  left: 50%;
  width: min(1000px, 100vw);
  background-image:
    linear-gradient(rgba(30, 91, 250, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 91, 250, 0.09) 1px, transparent 1px);
  background-position: center top;
  background-size: 48px 48px;
  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) {
  .finances-page :is(
    .fin-results-heading,
    .prod-task-capabilities-head,
    .fin-compare-heading,
    .attendance-workforce-solutions-heading
  )::before {
    top: -64px;
  }
}

/* "Get Started with TrackOlap": background in the sampled blue (#bdd7ff),
   a little deeper at the top, fading lighter towards the bottom. Only this
   section changes. */
.finances-page .crm-get-started {
  background: linear-gradient(180deg, #bdd7ff 0%, #cfe1ff 55%, #dde9ff 100%);
}

/* Keep each heading grid inside its own section: the texture reaches up
   into the top padding, and where that padding is smaller than the reach it
   poked into the section above. overflow: clip trims it at the section's
   edge without breaking sticky elements inside (unlike overflow: hidden). */
.finances-page :is(
  .crm-communication,
  .fin-results,
  .prod-task-capabilities,
  .fin-compare,
  .attendance-workforce-solutions,
  .crm-workflow
) {
  position: relative;
  overflow: clip;
}

/* Navigation text: 16px at the top of the page (Pricing included, whose
   label is a button), easing down to 14px once the header sticks on
   scroll. Dropdown items are unchanged. */
.finances-page .ffm-nav-shell #menu > .menu-item > .menu-text,
.finances-page .ffm-nav-shell #menu > .menu-item > .menu-text span,
.finances-page .ffm-nav-shell #menu > .menu-item > .menu-text .nav-menu-item,
.finances-page .ffm-nav-shell #menu > .nav-item > .menu-text,
.finances-page .ffm-nav-shell #menu > .nav-item > .menu-text span,
.finances-page .ffm-nav-shell #resourceBtn {
  font-size: 16px !important;
  font-weight: 500 !important;
  transition: font-size 200ms ease;
}

.finances-page .ffm-nav-shell .header-container.header-on-scroll #menu > .menu-item > .menu-text,
.finances-page .ffm-nav-shell .header-container.header-on-scroll #menu > .menu-item > .menu-text span,
.finances-page .ffm-nav-shell .header-container.header-on-scroll #menu > .menu-item > .menu-text .nav-menu-item,
.finances-page .ffm-nav-shell .header-container.header-on-scroll #menu > .nav-item > .menu-text,
.finances-page .ffm-nav-shell .header-container.header-on-scroll #menu > .nav-item > .menu-text span,
.finances-page .ffm-nav-shell .header-container.header-on-scroll #resourceBtn {
  font-size: 14px !important;
}

/* Scroll reveal (see the script in finances.ejs): fade up 32px, staggered
   within each group. Only applied once the script has tagged an element. */
.finances-page .fin-reveal {
  opacity: 0;
  transform: translate3d(0, 32px, 0);
  transition:
    opacity 700ms cubic-bezier(0.22, 1, 0.36, 1) var(--fin-reveal-delay, 0ms),
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1) var(--fin-reveal-delay, 0ms),
    border-color 180ms ease,
    box-shadow 180ms ease;
  will-change: opacity, transform;
}

.finances-page .fin-reveal.is-revealed {
  opacity: 1;
  transform: none;
}

/* Security cards' copy block keeps its own upward offset when revealed. */
.finances-page .prod-task-capability-copy.fin-reveal {
  transform: translate3d(0, -10px, 0);
}

.finances-page .prod-task-capability-copy.fin-reveal.is-revealed {
  transform: translateY(-42px);
}

/* Hero heading in three lines like the NBFC page:
   "Finance [Field Force Management]" / "Software That Collects" / "[More]".
   Each line stays unbroken on desktop; the flipping word is centred on its
   own line. */
.finances-page .fin-hero-center .prod-hero-copy {
  max-width: 1240px;
}

.finances-page .fin-hero-center .prod-hero-headline {
  font-size: clamp(34px, 4.3vw, 64px);
}

@media (min-width: 1000px) {
  .finances-page .fin-hero-center .crm-hero-title-line {
    white-space: nowrap;
  }
}

.finances-page .fin-hero-center .fin-hero-title-last .fin-hero-flip {
  justify-items: center;
}

/* Live chat (Antrika) in the page's theme colour (Finance blue, #1e5bfa). 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 #1e5bfa and win over the inline ones because they
   are !important. Scoped with :has() to this page's body only. */
html:has(> body.finances-page:not(.nbfc-page)) {
  --widget-body-primary: rgb(31, 79.8, 207) !important;
  --widget-body-primary-10: rgb(34.5, 40.6, 56.5) !important;
  --widget-body-primary-dark: rgb(34.6, 39.8, 53.3) !important;
}

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

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

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

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

/* Demo CTA band on the Finance, NBFC and MFI pages (all carry
   finances-page): the supplied metallic gold ("Golden Egg"), a soft
   brushed-gold gradient with light and dark bands and fine vertical
   streaks, in place of each page's theme-blue / green band. White text
   would be hard to read on this gold, so the pitch switches to dark ink, the
   highlighted heading words to a deep orange-brown, and the tick bullets
   to white circles with orange ticks. The white form panel is unchanged.
   `body.` plus the section class lifts this above the MFI theme file's
   green band rule. */
body.finances-page .fin-cta-form .fin-cta-form-card {
  color: #0b1530;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 2px, rgba(120, 95, 40, 0.04) 2px 5px),
    linear-gradient(100deg, #c9b27a 0%, #e0cd9c 22%, #d3bd85 45%, #e6d5a8 62%, #cdb67d 80%, #b9a06a 100%);
}

/* No checkered texture behind the text on the gold band (MFI only; the
   Finance and NBFC blue bands keep their texture). */
body.finances-page.mfi-page .fin-cta-form .fin-cta-form-card::before {
  display: none;
}

body.finances-page .fin-cta-form .fin-cta-form-copy h2,
body.finances-page .fin-cta-form .fin-cta-form-copy h2 .fin-cta-form-arrow {
  color: #0b1530;
  -webkit-text-fill-color: #0b1530;
}

body.finances-page .fin-cta-form .fin-cta-form-copy h2 span:not(.fin-cta-form-arrow) {
  color: #7a2e00 !important;
  -webkit-text-fill-color: #7a2e00 !important;
}

body.finances-page .fin-cta-form .fin-cta-form-copy > p,
body.finances-page .fin-cta-form .fin-cta-form-points li,
body.finances-page .fin-cta-form .fin-cta-form-copy .crm-final-cta-review,
body.finances-page .fin-cta-form .fin-cta-form-copy .crm-final-cta-review *:not(.crm-final-cta-review-stars) {
  color: #1f2a3d;
}

body.finances-page .fin-cta-form .fin-cta-form-points li::before {
  color: #c2410c;
  background: #fff;
}

body.finances-page .fin-cta-form .fin-cta-form-panel {
  box-shadow: 0 18px 44px rgba(110, 85, 30, 0.28);
}

body.finances-page .fin-cta-form .crm-final-cta-review-stars {
  color: #7a2e00;
}

/* Demo CTA form button ("Submit your Query", or the "Book a Free Demo"
   fallback link) in the same deep orange-brown as the highlighted heading
   words on the orange band, a shade darker on hover, instead of each page's
   theme blue / green. */
body.finances-page .fin-cta-form .crm-proof-demo-widget .trackwick_public_form_submit-btn,
body.finances-page .fin-cta-form .crm-proof-demo-widget .trackwick_public_form_submit-btn .ant-btn,
body.finances-page .fin-cta-form .crm-proof-demo-widget .btn-box button,
body.finances-page .fin-cta-form .crm-proof-demo-widget button[type="submit"],
body.finances-page .fin-cta-form .crm-proof-demo-widget input[type="submit"],
body.finances-page .fin-cta-form .crm-proof-demo-fallback {
  color: #fff !important;
  background: #7a2e00 !important;
  border-color: #7a2e00 !important;
}

body.finances-page .fin-cta-form .crm-proof-demo-widget .trackwick_public_form_submit-btn:hover,
body.finances-page .fin-cta-form .crm-proof-demo-widget .trackwick_public_form_submit-btn .ant-btn:hover,
body.finances-page .fin-cta-form .crm-proof-demo-widget .btn-box button:hover,
body.finances-page .fin-cta-form .crm-proof-demo-widget button[type="submit"]:hover,
body.finances-page .fin-cta-form .crm-proof-demo-widget input[type="submit"]:hover,
body.finances-page .fin-cta-form .crm-proof-demo-fallback:hover {
  background: #5c2200 !important;
  border-color: #5c2200 !important;
}

/* Comparison table: TrackOlap column heading like the NBFC page — blue pill
   badge above the logo, blue tagline below, on a light blue fill. The
   other column headings stay plain. */
.finances-page .ind-compare-table thead .ind-compare-ours {
  padding-top: 14px;
  padding-bottom: 16px;
  background: #eef4ff;
  text-align: center;
}

.finances-page .ind-compare-table thead .ind-compare-ours img {
  display: block;
  width: 132px;
  height: auto;
  margin: 8px auto 4px;
}

.finances-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;
}

.finances-page .ind-compare-head-tagline {
  display: block;
  color: #164bd6;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
}

/* Drop the animation layer once an item has revealed, so large blocks are
   not kept on their own compositing layer (avoids repaint flicker). */
.finances-page .fin-reveal.is-revealed {
  will-change: auto;
}

/* "Book a Free Demo" pop-up, finance variant only (demoModalVariant:
   'finance'): brand-blue left panel with a finance image, and the form
   styled like the inline demo form (taller rounded fields, product
   dropdown, full-width blue submit) under a centred title. */
.finances-page .demo-modal--finance .modal-body {
  gap: 48px;
}

.finances-page .demo-modal--finance .left-section {
  position: relative;
  display: flex;
  overflow: hidden;
  flex-direction: column;
  color: #fff;
  background:
    radial-gradient(circle at 15% 15%, rgba(255, 255, 255, 0.14), transparent 40%),
    linear-gradient(140deg, #0b3fd8 0%, #1e5bfa 55%, #4d86ff 100%);
  border-radius: 12px;
}

.finances-page .demo-modal--finance .left-section .left-content {
  position: relative;
  z-index: 1;
  padding: 32px 32px 0;
}

.finances-page .demo-modal--finance .left-section .left-content .left-heading {
  color: #fff;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.finances-page .demo-modal--finance .left-section .left-content .left-description {
  padding: 12px 0 6px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 15px;
  line-height: 1.6;
}

.finances-page .demo-modal--finance .left-section .left-content .trackolap-features {
  display: flex;
  padding: 10px 0 0;
  align-items: center;
  gap: 12px;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
}

.finances-page .demo-modal--finance .fin-modal-tick {
  display: grid;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  color: var(--crm-blue);
  background: #fff;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 800;
  place-items: center;
}

.finances-page .demo-modal--finance .modal-body .demo-pic {
  position: relative;
  top: auto;
  width: 100%;
  height: auto;
  max-height: 58%;
  margin-top: auto;
  padding: 0 20px 20px;
  object-fit: contain;
  object-position: center bottom;
}

.finances-page .demo-modal--finance .btn-close {
  color: var(--crm-blue);
}

@media (max-width: 991px) {
  .finances-page .demo-modal--finance .left-section {
    display: none;
  }

  .finances-page .demo-modal--finance .right-section {
    width: 100%;
    padding: 36px 4px 16px;
  }
}

/* Hero on phones: compact pill, a balanced flowing headline (no forced
   desktop line breaks, so "Field Force Management" isn't split oddly),
   smaller subtext, and tighter spacing above the logo strip. */
@media (max-width: 760px) {
  .finances-page .fin-hero-center .crm-suite-hero-inner {
    padding-top: 118px;
    padding-bottom: 108px;
  }

  .finances-page .fin-hero-center .fin-hero-eyebrow {
    max-width: 100%;
    margin-bottom: 20px;
    padding: 7px 14px;
    border-radius: 18px;
    font-size: 12.5px;
    line-height: 1.45;
    text-wrap: balance;
  }

  .finances-page .fin-hero-center .prod-hero-headline {
    font-size: clamp(28px, 8.2vw, 36px);
    line-height: 1.15;
    text-wrap: balance;
  }

  .finances-page .fin-hero-center .crm-hero-title-fixed {
    display: inline;
  }

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

  .finances-page .fin-hero-center .crm-hero-title-line + .crm-hero-title-line::before {
    content: " ";
  }

  .finances-page .fin-hero-center .fin-hero-title-last {
    display: block;
  }

  .finances-page .fin-hero-center .prod-hero-sub {
    margin: 18px auto 28px;
    font-size: 16px;
    line-height: 1.6;
  }

  .finances-page .fin-hero-email {
    max-width: 420px;
  }

  .finances-page .fin-hero-email input {
    padding: 12px 16px;
    font-size: 15px;
  }

  .finances-page .fin-hero-email button {
    min-height: 48px;
    font-size: 16px;
  }
}

/* Eyebrow pill: each item keeps its separator, so a wrap never starts a
   line with "·"; on phones the pill hugs its text instead of spanning the
   full width. */
.finances-page .fin-hero-center .fin-hero-eyebrow > span {
  white-space: nowrap;
}

@media (max-width: 760px) {
  .finances-page .fin-hero-center .fin-hero-eyebrow {
    display: inline-block;
    width: auto;
    max-width: min(100%, 330px);
    padding: 8px 16px;
    text-align: center;
  }

  /* Corner arcs and dots on phones: a fixed scale so the arcs stay large
     enough to read, with the right-hand rings anchored to the right edge
     (their image-pixel centres assume a 1813px-wide hero). */
  .finances-page .fin-hero-orbits {
    --u: 0.42px;
  }

  .finances-page .fin-hero-orbit--r1,
  .finances-page .fin-hero-orbit--r2 {
    left: calc(100% - (1813 - var(--cx) + var(--r)) * var(--u) - 6px);
  }

  .finances-page .fin-hero-orbit::after {
    width: 5px;
    height: 5px;
    margin: -2.5px 0 0 -2.5px;
  }
}

/* Phones: section headings flow as one block (desktop line breaks off, no
   narrow "balanced" wrapping) so their lines run as wide as the paragraph
   below, and the paragraph matches that width. */
@media (max-width: 760px) {
  .finances-page :is(
    .fin-journey-heading,
    .fin-leaks-heading,
    .crm-workflow-heading,
    .crm-communication-heading,
    .fin-results-heading,
    .prod-task-capabilities-head,
    .fin-compare-heading,
    .attendance-workforce-solutions-heading
  ) h2 {
    font-size: 27px !important;
    line-height: 1.18 !important;
    text-wrap: wrap !important;
  }

  .finances-page :is(
    .fin-journey-heading,
    .fin-leaks-heading,
    .crm-workflow-heading,
    .crm-communication-heading
  ) h2 br {
    display: none;
  }

  .finances-page :is(
    .fin-journey-lead,
    .fin-leaks-lead,
    .fin-workflow-lead,
    .fin-segments-lead
  ) {
    white-space: normal !important;
  }

  .finances-page :is(
    .fin-journey-heading,
    .fin-leaks-heading,
    .crm-workflow-heading,
    .crm-communication-heading,
    .fin-results-heading,
    .prod-task-capabilities-head,
    .fin-compare-heading,
    .attendance-workforce-solutions-heading
  ) > p:not(.fin-section-tag):not(.prod-task-capabilities-eyebrow):not(.attendance-workforce-solutions-eyebrow) {
    max-width: 100%;
    text-wrap: pretty;
  }
}

/* "Security, Compliance and Audit Readiness" on phones/tablets: the same
   stacking as desktop — each card sticks below the header and the next
   one slides up over it (a small step per card keeps the edges visible). */
@media (max-width: 991px) {
  .finances-page .prod-task-capability-panel {
    position: sticky;
    z-index: calc(10 + var(--capability-index));
    top: calc(84px + var(--capability-index) * 10px);
    box-shadow: 0 -10px 30px rgba(6, 26, 53, 0.1), 0 18px 40px rgba(6, 26, 53, 0.1);
  }

  .finances-page .prod-task-capability-panel:not(:last-child) {
    margin-bottom: 20px;
  }

  /* Images fill the card's top area at their own proportions (they are
     absolutely positioned, so the area needs an explicit size). */
  .finances-page .prod-task-capability-visual {
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 0;
    aspect-ratio: 1431 / 1266;
  }

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

  .finances-page .prod-task-capability-panel .prod-task-capability-copy {
    padding: 22px 22px 26px;
    transform: none;
  }
}

@media (max-width: 991px) {
  .finances-page .prod-task-capability-panel .prod-task-capability-copy.fin-reveal.is-revealed {
    transform: none;
  }
}

/* "Why TrackOlap" table on phones/tablets: the table keeps its full
   980px width and scrolls sideways inside its own box (nothing clipped),
   with a "Swipe right to see the complete table" pill above it (same as
   the NBFC page) that fades once the visitor scrolls the table. */
.finances-page .ind-compare-swipe {
  display: none;
}

@media (max-width: 1060px) {
  .finances-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-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: fin-compare-swipe-glow 2.2s ease-in-out infinite;
  }

  .finances-page .ind-compare .ind-compare-swipe.is-hidden {
    opacity: 0;
  }

  .finances-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;
  }

  .finances-page .ind-compare-swipe-arrow {
    animation: fin-compare-swipe-nudge 1.4s ease-in-out infinite;
  }

  .finances-page .ind-compare .ind-compare-scroll {
    max-width: 100%;
    padding: 8px 2px 18px;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x pan-y;
  }

  .finances-page .ind-compare .ind-compare-table {
    width: 980px;
    min-width: 980px;
  }
}

@keyframes fin-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 fin-compare-swipe-nudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(6px); }
}

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

/* "Microfinance Spotlight" on phones/tablets (where the cards stack): the
   same stacking as the security cards — each card sticks below the header
   and the next slides up over it, with a small step so edges stay visible. */
@media (max-width: 1024px) {
  .finances-page .attendance-workforce-solutions-list {
    overflow: visible;
  }

  .finances-page .attendance-workforce-solution {
    position: sticky;
    top: calc(84px + var(--mfi-i, 0) * 10px);
    z-index: calc(10 + var(--mfi-i, 0));
    box-shadow: 0 -10px 30px rgba(6, 26, 53, 0.12), 0 18px 40px rgba(6, 26, 53, 0.12);
  }

  .finances-page .attendance-workforce-solution:nth-child(2) { --mfi-i: 1; }
  .finances-page .attendance-workforce-solution:nth-child(3) { --mfi-i: 2; }
  .finances-page .attendance-workforce-solution:nth-child(4) { --mfi-i: 3; }
}

/* The Problem: new centre image (phone on its own soft blue rings), so the
   CSS-drawn rings and the drop shadow are turned off; a little wider to
   suit the image's proportions. */
.finances-page .fin-leaks-visual {
  width: 360px;
  padding: 0;
}

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

.finances-page .fin-leaks-visual img {
  filter: none;
}

@media (max-width: 1240px) {
  .finances-page .fin-leaks-visual {
    width: 300px;
  }
}

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

/* The Problem (desktop): the centre image is larger and shown whole (the
   phone on its full round rings, nothing trimmed), top aligned with the
   first card rather than stretched to the bottom. */
@media (min-width: 1025px) {
  .finances-page .fin-leaks-board {
    align-items: start;
    gap: 40px;
  }

  .finances-page .fin-leaks-visual {
    align-self: start;
    width: 420px;
    padding: 0;
  }

  .finances-page .fin-leaks-visual img {
    position: static;
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  .finances-page .fin-leaks-list {
    align-self: start;
  }
}

@media (min-width: 1025px) and (max-width: 1240px) {
  .finances-page .fin-leaks-visual {
    width: 340px;
  }
}

/* Connectors fit the tighter 40px gap. */
@media (min-width: 1025px) {
  .finances-page .fin-leaks-card::after { width: 26px; }
  .finances-page .fin-leaks-list--problem .fin-leaks-card::before { left: calc(100% + 26px); }
  .finances-page .fin-leaks-list--fix .fin-leaks-card::before { right: calc(100% + 26px); }
}

/* The Problem (desktop): every problem and solution card is the same
   height, so each problem lines up with its fix on the other side. */
@media (min-width: 1025px) {
  .finances-page .fin-leaks-list {
    grid-auto-rows: 104px;
  }

  .finances-page .fin-leaks-card {
    height: 104px;
    min-height: 0;
  }

  .finances-page .fin-leaks-text {
    font-size: 14px;
    line-height: 1.4;
  }

  .finances-page .fin-leaks-text strong {
    font-size: 16.5px;
    line-height: 1.3;
  }
}

/* The Problem (desktop): image height matches the first five cards, so its
   bottom lines up with the bottom of "Live dashboards" (5 × 104px cards +
   4 × 14px gaps = 576px; at the image's proportions that is 476px wide).
   The section is a little wider so the card columns keep their width. */
@media (min-width: 1025px) {
  .finances-page .fin-leaks > .crm-container {
    width: min(calc(100% - 48px), 1280px);
  }

  .finances-page .fin-leaks-visual {
    width: 476px;
  }
}

@media (min-width: 1025px) and (max-width: 1240px) {
  .finances-page .fin-leaks-visual {
    width: 380px;
  }
}