/* Agriculture industry page (/industry/agriculture-employees-tracking-app).
   The body carries `finances-page` and `nbfc-page` as well as `agri-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 agriculture copy deck needs and the NBFC page does not have,
   all scoped to `.agri-page`. Colours follow the MFI page's green theme:
   agriculture-employees-tracking-apps-theme.css re-hues the shared blue
   rules, and the "MFI colour theme" block below ports the MFI page's
   hand-written hero, button, footer, chat and compare-table colours. */

/* Hero heading: like the NBFC headline, the first line is the widest and
   runs across the hero ("Agriculture Field Force Management"), the next
   two step in. That first line has more letters than NBFC's, so on
   desktop the heading is a touch smaller than the NBFC clamp; the first
   line then spans about the same width as NBFC's, between the floating
   icons. */
@media (min-width: 1000px) {
  .agri-page .fin-hero-center .prod-hero-headline {
    font-size: clamp(34px, 3.7vw, 56px);
  }
}

/* Rotating word (hero headline's last word, set up by the page script):
   whole words slide up and fade in turn inside a box fixed at the widest
   word's width, each word starting at the box's left edge. Only the word
   moves; "Every" and the rest of the heading stay still.
   Each word carries the MFI leaf-green gradient itself (the gradient on
   the box would not reach the positioned words). */
.agri-page.nbfc-page .crm-suite-hero.fin-hero-center .fin-hero-title-accent.agri-rotator.is-ready {
  position: relative;
  display: inline-block;
  color: #4f9d1e;
  text-align: left;
  white-space: nowrap;
  vertical-align: baseline;
  background: none;
  -webkit-text-fill-color: currentColor;
}

.agri-page .agri-rotator-sizer {
  visibility: hidden;
}

.agri-page.nbfc-page .crm-suite-hero.fin-hero-center .agri-rotator-word {
  position: absolute;
  top: 0;
  left: 0;
  white-space: nowrap;
  background: linear-gradient(180deg, #6cc02e 0%, #4a9a1a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0;
  transform: translateY(0.45em);
  transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.agri-page.nbfc-page .crm-suite-hero.fin-hero-center .agri-rotator-word.is-current {
  opacity: 1;
  transform: none;
}

.agri-page.nbfc-page .crm-suite-hero.fin-hero-center .agri-rotator-word.is-leaving {
  opacity: 0;
  transform: translateY(-0.45em);
}

/* Quick answer section, kept compact. The heading ("What Is Agriculture
   Field Force Management Software?") is longer than NBFC's, and the shared
   rules hold its first line on one line, which ran it into the picture.
   Here it is a little smaller and wraps naturally in balanced lines inside
   the copy column, which never passes the middle of the section where the
   picture starts. The paragraphs and field layer also sit
   closer together. */
@media (min-width: 1101px) {
  .agri-page.nbfc-page .nbfc-answer .fin-journey-heading h2 {
    font-size: clamp(28px, 2.6vw, 40px) !important;
    text-wrap: balance;
  }

  .agri-page.nbfc-page .nbfc-answer .fin-journey-heading h2 .fin-journey-lead {
    display: inline;
  }

  .agri-page.nbfc-page .nbfc-answer .fin-journey-heading h2 span {
    white-space: normal !important;
  }

  .agri-page.nbfc-page .nbfc-answer {
    padding: 28px 0;
  }

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

  .agri-page.nbfc-page .nbfc-answer .nbfc-answer-text p {
    font-size: 16px;
    line-height: 1.55;
  }

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

/* Quick answer picture (agri sales rep showing the app to a fertilizer
   shop owner at the counter): both people sit in the middle of the photo,
   so it is cropped around its centre rather than from the right edge. */
.agri-page.nbfc-page .nbfc-answer-media img {
  object-position: 45% 30%;
}

/* Field operations layer: four items in one row (the NBFC strip holds
   six), divided by the same thin rules. */
.agri-page .nbfc-answer .nbfc-layer-list {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  row-gap: 22px;
  background: none;
}

.agri-page .nbfc-answer .nbfc-layer-item,
.agri-page .nbfc-answer .nbfc-layer-item:first-child,
.agri-page .nbfc-answer .nbfc-layer-item:last-child {
  padding: 0 8px;
  justify-self: stretch;
  border-left: 1px solid rgba(68, 143, 25, 0.16);
}

.agri-page .nbfc-answer .nbfc-layer-item:nth-child(4n + 1) {
  border-left: 0;
}

@media (max-width: 560px) {
  .agri-page .nbfc-answer .nbfc-layer-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .agri-page .nbfc-answer .nbfc-layer-item:nth-child(4n + 1) {
    border-left: 1px solid rgba(68, 143, 25, 0.16);
  }

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

/* How it works: the heading and Stage 1 read as one section (as on the
   MFI page). Stage 1 has no background of its own, so the section's single
   top glow runs on behind it instead of a second glow starting under the
   heading, and Stage 1 starts closer to the subheading. The heading block
   is also wide enough for its lines to sit centred. */
.agri-page.finances-page .crm-workflow-step:first-child {
  padding-top: 16px;
  background: transparent;
}

.agri-page.sales-crm-softwares-page .crm-section-heading.crm-workflow-heading {
  width: min(calc(100% - 48px), 1280px);
  padding-bottom: 24px;
}

/* How it works heading, set like the NBFC hero headline: three centred
   lines, each narrower than the one above ("How TrackOlap Runs Your Agri"
   / "Field Operations, Season" / "After Season"). */
.agri-page .crm-workflow-heading .agri-workflow-line {
  display: block;
}

.agri-page.finances-page .crm-workflow-heading .agri-workflow-title .fin-workflow-lead,
.agri-page.finances-page .crm-workflow-heading .agri-workflow-title .crm-workflow-title-gradient {
  display: inline;
  white-space: normal;
}

/* Subheading aligned to the heading, as under the NBFC hero headline: on
   desktop the heading block is exactly as wide as the heading's first
   (widest) line, and the subheading fills that width without widening it,
   in two balanced, centred lines. */
@media (min-width: 901px) {
  .agri-page.sales-crm-softwares-page .crm-section-heading.crm-workflow-heading {
    width: fit-content;
    max-width: min(1280px, calc(100% - 48px));
    margin-inline: auto;
  }

  .agri-page.finances-page .crm-section-heading.crm-workflow-heading > p.crm-workflow-summary {
    width: 0;
    min-width: 100%;
    max-width: none;
    margin-inline: auto;
    text-align: center;
    text-wrap: balance;
  }
}

/* Built for Rural Field Work heading, set like the How It Works heading
   and the NBFC hero headline: three centred lines, each narrower than the
   one above ("Rural Field Staff Tracking" / "Software, Built Around" /
   "How Agri Teams Work"), and on desktop the intro fills exactly the
   first line's width in two balanced, centred lines. */
@media (min-width: 901px) {
  .agri-page.finances-page .prod-task-capabilities-head {
    width: fit-content;
    max-width: min(1100px, calc(100% - 48px));
    margin-right: auto;
    margin-left: auto;
  }

  .agri-page.finances-page .prod-task-capabilities-head .prod-task-capabilities-intro {
    width: 0;
    min-width: 100%;
    max-width: none;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
    text-align-last: center;
    text-wrap: balance;
  }
}

/* Comparison heading, set like the sections above: "Diaries and WhatsApp
   Record Effort." on one (widest) line, "TrackOlap Records Proof." in
   green on a narrower line below, and on desktop the intro fills exactly
   the first line's width in two balanced, centred lines. */
@media (min-width: 901px) {
  .agri-page.finances-page .fin-compare-heading {
    width: fit-content;
    max-width: min(1100px, calc(100% - 48px));
    margin-right: auto;
    margin-left: auto;
  }

  .agri-page.finances-page .fin-compare-heading h2 {
    white-space: nowrap;
  }

  .agri-page.nbfc-page .fin-compare-heading .ind-compare-intro {
    width: 0;
    min-width: 100%;
    max-width: none;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
    text-align-last: center;
    text-wrap: balance;
  }
}

/* Impact cards on phones: two compact cards per row (2 x 2) instead of
   four tall full-width cards stacked down the screen, with smaller
   figures and labels so each sentence fits in a few short lines. */
@media (max-width: 560px) {
  .agri-page.finances-page .nbfc-impact .fin-results-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .agri-page.finances-page .nbfc-impact .fin-results-card {
    min-height: 0;
    padding: 20px 12px;
    justify-content: flex-start;
    border-radius: 16px;
  }

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

  .agri-page.finances-page .nbfc-impact .fin-results-value strong {
    font-size: 30px;
  }

  .agri-page.finances-page .nbfc-impact .fin-results-label {
    font-size: 14px;
    line-height: 1.4;
  }
}

/* Field Reality centre picture: the agri phone mock (dealer visit at an
   agri centre) comes on a white backdrop with its own soft green rings,
   so it is blended with multiply: the white drops out against the
   section's background and only the phone and its rings remain. The
   artwork has wide margins around the phone (it fills only about 38% of
   the width and 76% of the height), so it is enlarged around the phone
   to stand as tall as the NBFC page's phone beside the cards. The
   layout box keeps its size, so the cards around it do not move. */
body.agri-page.nbfc-page:not(.mfi-page) .agri-proof.nbfc-proof .fin-leaks-visual .nbfc-proof-phone-image {
  filter: none;
  mix-blend-mode: multiply;
  transform: scale(1.3);
  transform-origin: 49% 51%;
}

body.agri-page.nbfc-page .agri-proof.nbfc-proof .fin-leaks-visual {
  overflow: visible;
}

/* Mid-page demo CTA: the NBFC layout (pitch on the left, demo form on
   the right), centred on one line. The heading is a little smaller and
   splits into its two halves, and the decorative arrow, which otherwise
   wrapped onto a line of its own, is dropped. The band is also shorter
   than the shared one: less padding and a tighter form. */
.agri-page .agri-cta .fin-cta-form-card {
  align-items: center;
  padding-top: 36px;
  padding-bottom: 36px;
  gap: 48px;
}

.agri-page .agri-cta .fin-cta-form-copy h2 {
  font-size: clamp(28px, 2.6vw, 40px);
}

.agri-page .agri-cta .fin-cta-form-copy h2 span:not(.fin-cta-form-arrow) {
  display: block;
}

.agri-page .agri-cta .fin-cta-form-arrow {
  display: none;
}

.agri-page .agri-cta .fin-cta-form-copy > p {
  max-width: 520px;
  margin-top: 14px;
  font-size: 17px;
  line-height: 1.6;
}

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

.agri-page .agri-cta .fin-cta-form-panel h3 {
  margin-bottom: 8px;
  font-size: 20px;
}

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

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

.agri-page .agri-cta .fin-cta-form-panel .crm-proof-demo-widget textarea {
  min-height: 52px !important;
  max-height: 64px;
}

@media (max-width: 1024px) {
  .agri-page .agri-cta .fin-cta-form-card {
    padding-top: 32px;
    padding-bottom: 32px;
    gap: 28px;
  }
}

/* Agri Segments heading: the shared Finance rule justifies the intro
   across the width of a much longer heading, which stretches the word
   spacing of a short intro. Here the heading and intro are centred as one
   block, the intro set in balanced, normally spaced lines under it (as on
   the HVAC page). */
.agri-page .crm-section-heading.crm-communication-heading {
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.agri-page .crm-communication-heading h2 {
  text-align: center;
  text-wrap: balance;
}

.agri-page .crm-section-heading.crm-communication-heading > p:last-child {
  max-width: 760px;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
  text-align-last: center;
  text-wrap: balance;
}

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

.agri-page .agri-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. */
.agri-page .agri-final-cta .fin-cta-form-card {
  padding-top: 44px;
  padding-bottom: 44px;
  gap: 40px;
}

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

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

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

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

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

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

.agri-page .agri-final-cta-button:hover,
.agri-page .agri-final-cta-button:focus-visible {
  color: #3a7815;
  box-shadow: 0 18px 36px rgba(20, 52, 9, 0.32);
  transform: translateY(-2px);
}

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

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

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

/* ---- MFI colour theme ----
   The MFI page's hand-written colour rules (from mfi-field-operations.css),
   with `.agri-page` swapped for `.agri-page`. Layout rules from that file
   are not copied. */

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

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

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


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

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

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

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

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

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

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

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


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


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

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

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

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

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

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

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

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

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

/* ---- Hero on phones ----
   The headline flows as balanced lines (finances.css), and the rotating
   word sits centred on its own last line: its desktop box keeps the
   widest word's width, which on a phone pushed "That Tracks Every Rep"
   off-centre. Each word is centred in the full-width line instead, so
   only the word changes while everything else stays still and centred.
   The hero also ends closer to the logo strip (the shared 108px bottom
   padding left a large empty gap under the email bar). */
@media (max-width: 760px) {
  .agri-page.nbfc-page .crm-suite-hero.fin-hero-center .fin-hero-title-accent.agri-rotator.is-ready {
    display: block;
    width: auto !important;
    text-align: center;
  }

  .agri-page.nbfc-page .crm-suite-hero.fin-hero-center .agri-rotator-word {
    left: 50%;
    transform: translate(-50%, 0.45em);
  }

  .agri-page.nbfc-page .crm-suite-hero.fin-hero-center .agri-rotator-word.is-current {
    transform: translate(-50%, 0);
  }

  .agri-page.nbfc-page .crm-suite-hero.fin-hero-center .agri-rotator-word.is-leaving {
    transform: translate(-50%, -0.45em);
  }

  .agri-page.finances-page .fin-hero-center .crm-suite-hero-inner {
    padding-bottom: 44px;
  }
}