/* FMCG industry page (/industry/field-sales-automation-software-for-fmcg).
   The body carries `finances-page` and `nbfc-page` as well as `fmcg-page`,
   so finances.css and nbfc-field-force-management.css supply the whole NBFC
   design (layout, spacing, colours, animations). This file only adds the
   pieces the FMCG copy deck needs and the NBFC page does not have, all
   scoped to `.fmcg-page`. */

/* Looping words (hero headline and problem heading): the script deletes
   and retypes each word letter by letter behind a blinking caret, so only
   one word is ever on screen. The caret blinks while a word is held and
   stays solid while typing. */
.fmcg-page .fmcg-loop.is-typing {
  display: inline-block;
  text-align: left;
  white-space: nowrap;
}

.fmcg-page .fmcg-loop-caret {
  display: inline-block;
  width: 0.06em;
  height: 0.9em;
  margin-left: 0.06em;
  vertical-align: -0.08em;
  background: currentColor;
  border-radius: 2px;
}

.fmcg-page .fmcg-loop.is-holding .fmcg-loop-caret {
  animation: fmcg-loop-caret-blink 1s steps(1, end) infinite;
}

@keyframes fmcg-loop-caret-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* The looping line sits on its own line that never wraps and keeps one
   line's height even while the word is deleted down to the caret, so the
   text above and the content below hold still at every width (on phones
   finances.css otherwise flows the hero lines inline). */
.fmcg-page .fin-hero-center .crm-hero-title-line.fmcg-loop-line,
.fmcg-page .fmcg-proof .fmcg-loop-line {
  display: block;
  min-height: 1.15em;
  white-space: nowrap;
}

/* Phone-only line breaks in the hero heading (hidden on larger screens). */
.fmcg-page .fmcg-br-mobile {
  display: none;
}

/* Phones: the hero heading reads "FMCG Field Force / Management Software /
   for Every / [word]". The fixed breaks replace the narrow automatic
   wrapping, and the looping word sits centred on its own line, so the
   other lines never move while it types and nothing runs off the screen. */
@media (max-width: 760px) {
  .fmcg-page .fmcg-br-mobile {
    display: inline;
  }

  .fmcg-page .fin-hero-center .crm-hero-title-line.fmcg-loop-line {
    display: inline;
    min-height: 0;
    white-space: normal;
  }

  .fmcg-page .fin-hero-center .fmcg-loop,
  .fmcg-page .fin-hero-center .fmcg-loop.is-typing {
    display: block;
    min-height: 1.15em;
    text-align: center;
    white-space: nowrap;
  }
}

/* Hero heading on desktop: two wide lines that use the space from left to
   right like the NBFC hero, ending about level with the description below.
   The second line keeps room for the longest looping word
   ("Distributor"), so the size is a little below NBFC's 68px cap to keep
   both lines clear of the floating icons. */
@media (min-width: 761px) {
  .fmcg-page .fin-hero-center .prod-hero-copy {
    max-width: 1240px;
  }

  .fmcg-page .fin-hero-center .prod-hero-headline {
    font-size: clamp(32px, 4.1vw, 60px);
  }

  .fmcg-page .fin-hero-center .crm-hero-title-line {
    white-space: nowrap;
  }
}

/* Problem heading on phones and tablets: the lead wraps into balanced
   lines ("Your FMCG Sales Team / Is Short of") above the looping word,
   instead of leaving "of" alone on its own line. */
@media (max-width: 1024px) {
  .fmcg-page .fmcg-proof .fin-leaks-heading h2 {
    text-wrap: balance;
  }
}

/* How it works: the seven stage images have different shapes (stage 4 is
   nearly square, stage 3 wide and short), so each sat at a different size
   and height against its text. Every image now gets the same 4:3 frame,
   centred both ways and vertically centred against its copy, so all seven
   rows line up and match in size. */
.fmcg-page .crm-workflow-grid {
  align-items: center;
}

.fmcg-page .crm-workflow-media {
  align-self: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  max-width: 640px;
}

.fmcg-page .crm-workflow-media img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  object-position: center;
}

@media (max-width: 900px) {
  .fmcg-page .crm-workflow-media {
    width: 100%;
    max-width: 560px;
    margin-right: auto;
    margin-left: auto;
  }
}

/* Impact cards on phones: the four stats have short labels, so they sit in
   a compact 2 x 2 grid of equal cards instead of four tall full-width
   cards (the shared layout drops to one column at 560px). */
@media (max-width: 560px) {
  .fmcg-page .nbfc-impact .fin-results-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .fmcg-page .nbfc-impact .fin-results-card {
    min-height: 0;
    padding: 22px 12px 20px;
    border-radius: 18px;
  }

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

  .fmcg-page .nbfc-impact .fin-results-value strong {
    font-size: 32px;
  }

  .fmcg-page .nbfc-impact .fin-results-label {
    font-size: 14px;
    line-height: 1.4;
    text-wrap: balance;
  }
}

/* Hero highlights under the email field: four short items split by dots. */
.fmcg-page .fmcg-hero-highlights {
  display: flex;
  margin: 22px auto 0;
  padding: 0;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 0;
  color: var(--fin-hero-ink, #0b1530);
  font-size: 15px;
  font-weight: 600;
  list-style: none;
}

.fmcg-page .fmcg-hero-highlights li {
  display: inline-flex;
  align-items: center;
}

.fmcg-page .fmcg-hero-highlights li + li::before {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin: 0 14px;
  background: #1e5bfa;
  border-radius: 50%;
  content: "";
}

@media (max-width: 575px) {
  .fmcg-page .fmcg-hero-highlights {
    font-size: 14px;
  }

  .fmcg-page .fmcg-hero-highlights li + li::before {
    margin: 0 10px;
  }
}

/* Field operations layer: each item names the area, then its short detail
   ("Plan & assign") on a lighter line below. */
.fmcg-page .fmcg-layer-detail {
  display: block;
  margin-top: 3px;
  color: #5b6478;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
}

/* Closing CTA: the bridge CTA's blue card, with one white demo button in
   place of the form panel. */
.fmcg-page .fmcg-final-cta {
  padding-top: 24px;
}

.fmcg-page .fmcg-final-cta .fin-cta-form-card {
  grid-template-columns: minmax(0, 1fr) auto;
}

/* Compact band: less vertical padding than the bridge CTA (88px), a
   smaller heading and a tighter description. */
.fmcg-page .fmcg-final-cta .fin-cta-form-card {
  padding-top: 44px;
  padding-bottom: 44px;
  gap: 40px;
}

.fmcg-page .fmcg-final-cta .fin-cta-form-copy h2 {
  font-size: clamp(26px, 2.4vw, 36px);
}

.fmcg-page .fmcg-final-cta .fin-cta-form-copy > p {
  max-width: 760px;
  margin-top: 10px;
  font-size: 16px;
  line-height: 1.55;
}

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

@media (max-width: 560px) {
  .fmcg-page .fmcg-final-cta .fin-cta-form-card {
    padding-top: 30px;
    padding-bottom: 30px;
  }
}

.fmcg-page .fmcg-final-cta-action {
  position: relative;
  z-index: 1;
}

.fmcg-page .fmcg-final-cta-button {
  display: inline-flex;
  min-height: 56px;
  padding: 0 30px;
  align-items: center;
  gap: 10px;
  color: #1e5bfa;
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 14px 30px rgba(8, 30, 120, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.fmcg-page .fmcg-final-cta-button:hover,
.fmcg-page .fmcg-final-cta-button:focus-visible {
  color: #164bd6;
  box-shadow: 0 18px 36px rgba(8, 30, 120, 0.32);
  transform: translateY(-2px);
}

@media (max-width: 900px) {
  .fmcg-page .fmcg-final-cta .fin-cta-form-card {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fmcg-page .fmcg-final-cta-button {
    transition: none;
  }

  .fmcg-page .fmcg-final-cta-button:hover,
  .fmcg-page .fmcg-final-cta-button:focus-visible {
    transform: none;
  }
}