/* Manufacturing industry page (/industry/manufacturing).
   The body carries `finances-page` and `nbfc-page` as well as `mfg-page`,
   so finances.css and nbfc-field-force-management.css supply the whole NBFC
   design (layout, spacing, animations) and the NBFC colour theme. This
   file only adds the pieces the manufacturing copy deck needs and the NBFC
   page does not have, all scoped to `.mfg-page`, in the NBFC colours
   (accent #164bd6, brand blue #1e5bfa). */

/* Hero heading alignment, as on the NBFC hero: three centred lines
   stepping in, widest first ("Manufacturing Field Operations" /
   "Management Software for Every" / the rotating word). The first line has
   more letters than NBFC's (and the Media page's), so on desktop the
   heading is a touch smaller than the NBFC clamp; it then sits between the
   floating icons instead of running into them. */
@media (min-width: 1000px) {
  .mfg-page.nbfc-page .fin-hero-center .prod-hero-headline {
    font-size: clamp(34px, 3.75vw, 56px);
  }
}

/* Rotating word (set up by the page script): it fills the heading's last
   line on its own, at every screen size, and each word is centred in that
   full-width line. Whole words slide up and fade in turn; nothing else in
   the heading moves or resizes while they change.
   Each word is the NBFC accent blue (#164bd6), solid as on the NBFC
   headline. */
.mfg-page.nbfc-page .crm-suite-hero.fin-hero-center .fin-hero-title-accent.mfg-rotator.is-ready {
  position: relative;
  display: block;
  width: auto;
  color: #164bd6;
  text-align: center;
  white-space: nowrap;
  background: none;
  -webkit-text-fill-color: currentColor;
}

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

/* Each word's box is padded above and below (and shifted up by the same
   amount, so the word stays exactly in place), so no glyph is clipped by
   the heading's tight 1.1 line height. */
.mfg-page.nbfc-page .crm-suite-hero.fin-hero-center .mfg-rotator-word {
  position: absolute;
  top: -0.12em;
  left: 50%;
  padding: 0.12em 0.06em 0.22em;
  white-space: nowrap;
  color: #164bd6;
  background: none;
  -webkit-text-fill-color: #164bd6;
  opacity: 0;
  transform: translate(-50%, 0.45em);
  transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

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

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

/* Hero description, set exactly like the NBFC hero: centred lines, each
   held on one line, under the centred heading. The copy deck's subhead is
   longer than NBFC's, so it runs in three lines (109 / 114 / 113
   characters) instead of two. The text scales with the heading (about
   0.3 x its clamp(34px, 3.75vw, 56px)), so the lines stay level with the
   heading's first line, "Manufacturing Field Operations", at every desktop
   width. Below 1200px it wraps naturally, as on the NBFC page. */
@media (min-width: 1200px) {
  .mfg-page.nbfc-page .fin-hero-center .prod-hero-sub {
    max-width: none;
    font-size: min(17px, 1.14vw);
    text-align: center;
  }

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

/* Quick answer section, kept compact. The heading ("What Is Manufacturing
   Field Operations 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) {
  .mfg-page.nbfc-page .nbfc-answer .fin-journey-heading h2 {
    font-size: clamp(28px, 2.6vw, 40px) !important;
    text-wrap: balance;
  }

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

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

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

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

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

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

/* Quick answer picture (engineer and sales rep at a plant with the
   "Field Visit Verified" card). It is much wider (2889 x 1707) than the
   NBFC photo the frame was made for, so instead of being cropped to fill
   the right half (which cut off the people or the card) it is shown whole,
   centred in that half; its soft edges still fade into the section through
   the NBFC mask. Stacked under the copy (1100px and below) the frame takes
   the picture's own proportions. Square corners only, as before. */
.mfg-page.nbfc-page .nbfc-answer-media,
.mfg-page.nbfc-page .nbfc-answer-media img {
  border-radius: 0 !important;
}

.mfg-page.nbfc-page .nbfc-answer-media img {
  object-fit: contain;
  object-position: 50% 50%;
}

@media (max-width: 1100px) {
  .mfg-page.nbfc-page .nbfc-answer-media {
    aspect-ratio: 2889 / 1707;
  }
}

/* "TrackOlap Field Operations Layer" label: no leading dash. The NBFC
   page draws a short rule before this label; the manufacturing page shows the
   label on its own, with no dash anywhere in the content. */
.mfg-page.nbfc-page .nbfc-layer-title::before {
  display: none;
}

/* The Visibility Gap: the NBFC section background, with the NBFC tile
   grid (14px cells, faint brand blue) behind the pill, heading and intro,
   reaching up through the section's top padding and fading out at the
   sides and just below the intro. */
.mfg-page.finances-page .mfg-proof .fin-leaks-heading {
  position: relative;
  isolation: isolate;
}

.mfg-page.finances-page .mfg-proof .fin-leaks-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-repeat: repeat;
  background-size: 14px 14px;
  content: "";
  pointer-events: none;
  transform: translateX(-50%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 100%),
    linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 100%),
    linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
  mask-composite: intersect;
}

@media (max-width: 1024px) {
  .mfg-page.finances-page .mfg-proof .fin-leaks-heading::before {
    top: -72px;
  }
}

@media (max-width: 900px) {
  .mfg-page.finances-page .mfg-proof .fin-leaks-heading::before {
    width: 100vw;
  }
}

/* How it works: the heading and Stage 1 read as one section (as on the
   Agriculture 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. */
.mfg-page.finances-page .crm-workflow-step:first-child {
  padding-top: 16px;
  background: transparent;
}

.mfg-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: two centred
   lines, the second narrower than the first ("From Punch-In to Purchase Order," /
   "Every Step on Record"). */
.mfg-page .crm-workflow-heading .mfg-workflow-line {
  display: block;
}

.mfg-page.finances-page .crm-workflow-heading .mfg-workflow-title .fin-workflow-lead,
.mfg-page.finances-page .crm-workflow-heading .mfg-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) {
  .mfg-page.sales-crm-softwares-page .crm-section-heading.crm-workflow-heading {
    width: fit-content;
    max-width: min(1280px, calc(100% - 48px));
    margin-inline: auto;
  }

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

/* Proof, Control and Clean Data heading: on desktop "Built for Proof,
   Control and Clean Data" sits on a single centred line (a touch smaller
   than the shared clamp so it fits the 1100px heading block), and the
   intro fills that line's width, so it runs on one line under it too.
   Below 901px both wrap naturally. */
@media (min-width: 901px) {
  .mfg-page.finances-page .prod-task-capabilities-head {
    width: fit-content;
    max-width: min(1100px, calc(100% - 48px));
    margin-right: auto;
    margin-left: auto;
  }

  .mfg-page.finances-page.nbfc-page .prod-task-capabilities-head h2 {
    font-size: clamp(28px, 3vw, 44px) !important;
    white-space: nowrap;
  }

  .mfg-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: "Excel Logs Claims"
   on the first line and "TrackOlap Shows Proof" in blue below it, centred
   (balanced if it ever wraps), and on desktop the intro fills exactly the
   heading's width in balanced, centred lines. */
@media (min-width: 901px) {
  .mfg-page.finances-page .fin-compare-heading {
    width: fit-content;
    max-width: min(1100px, calc(100% - 48px));
    margin-right: auto;
    margin-left: auto;
  }

  .mfg-page.finances-page .fin-compare-heading h2 {
    text-align: center;
    text-wrap: balance;
  }

  .mfg-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) {
  .mfg-page.finances-page .nbfc-impact .fin-results-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

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

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

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

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

/* 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 a little
   shorter than the shared one, with a tighter form, but keeps enough
   room (56px) above and below the form card that it never crowds the
   band's edges. */
.mfg-page .mfg-cta .fin-cta-form-card {
  align-items: center;
  padding-top: 56px;
  padding-bottom: 56px;
  gap: 48px;
}

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

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

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

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

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

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

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

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

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

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

/* Product Lines 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 Agriculture page). */
.mfg-page .crm-section-heading.crm-communication-heading {
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

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

/* On desktop the heading reads in two lines: "Manufacturing Field
   Workforce Management" held on one line (a touch smaller than the shared
   clamp so it fits), "for Every Product Line" in blue below it.
   Below 901px it wraps naturally. */
@media (min-width: 901px) {
  .mfg-page.finances-page .crm-section-heading.crm-communication-heading {
    max-width: min(1200px, calc(100% - 48px));
  }

  .mfg-page.finances-page.nbfc-page .crm-communication-heading h2 {
    font-size: clamp(28px, 3vw, 44px) !important;
  }

  .mfg-page.finances-page.nbfc-page .crm-communication-heading h2 .fin-segments-lead {
    white-space: nowrap !important;
  }

  /* Subheading aligned to the heading: the heading block is exactly as
     wide as its first (widest) line, and the subheading fills that width
     without widening it, its full line running edge to edge under the
     heading and the last line centred. */
  .mfg-page.finances-page .crm-section-heading.crm-communication-heading {
    width: fit-content;
  }

  .mfg-page.finances-page.nbfc-page .crm-section-heading.crm-communication-heading > p:last-child {
    width: 0;
    min-width: 100%;
    max-width: none;
    font-size: 18px;
    text-align: justify;
    text-align-last: center;
    text-wrap: pretty;
  }
}

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

/* Related reading (above the FAQs), as on the Pharma page: the module
   cards with a topic tag in place of the icon and each post's cover image
   across the top of the card, edge to edge (the card's 30px / 28px
   padding is pulled back). */
.mfg-page .mfg-blog-tag {
  display: inline-block;
  margin-bottom: 16px;
  padding: 5px 12px;
  align-self: flex-start;
  color: #c2410c;
  background: #fff1e8;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.mfg-page .mfg-blogs .nbfc-module-card h3 {
  font-size: 19px;
}

.mfg-page .mfg-blogs .nbfc-module-card a {
  overflow: hidden;
}

.mfg-page .mfg-blog-media {
  display: block;
  margin: -30px -28px 22px;
  aspect-ratio: 3 / 2;
  background: #f3f7ff;
}

.mfg-page .mfg-blog-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Hero trust line under the email bar ("No credit card", "Android &
   iOS"), each with an NBFC blue tick. Wraps and stays centred on small
   screens. */
.mfg-page .mfg-hero-trust {
  display: flex;
  margin: 18px 0 0;
  padding: 0;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  color: var(--crm-muted);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  list-style: none;
}

.mfg-page .mfg-hero-trust li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.mfg-page .mfg-hero-trust svg {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: #164bd6;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 560px) {
  .mfg-page .mfg-hero-trust {
    gap: 6px 14px;
    font-size: 13px;
  }
}

/* Demo form's submit button ("Submit your Query"): narrower and centred
   in the form instead of spanning its full width. The form widget may put
   the submit class on a wrapper or on the button itself, so a wrapper
   just centres its button (no fill of its own), and the button is sized
   to its label with comfortable side padding. */
body.mfg-page.finances-page:not(.mfi-page) .mfg-cta .crm-proof-demo-widget .trackwick_public_form_submit-btn:not(button):not(input),
body.mfg-page.finances-page:not(.mfi-page) .mfg-cta .crm-proof-demo-widget .btn-box {
  display: flex !important;
  width: 100% !important;
  justify-content: center !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.mfg-page.finances-page:not(.mfi-page) .mfg-cta .crm-proof-demo-widget button.trackwick_public_form_submit-btn,
body.mfg-page.finances-page:not(.mfi-page) .mfg-cta .crm-proof-demo-widget .trackwick_public_form_submit-btn .ant-btn,
body.mfg-page.finances-page:not(.mfi-page) .mfg-cta .crm-proof-demo-widget .btn-box button,
body.mfg-page.finances-page:not(.mfi-page) .mfg-cta .crm-proof-demo-widget button[type="submit"],
body.mfg-page.finances-page:not(.mfi-page) .mfg-cta .crm-proof-demo-widget input[type="submit"] {
  display: block !important;
  width: auto !important;
  min-width: 200px;
  min-height: 42px !important;
  margin: 6px auto 0 !important;
  padding: 8px 32px !important;
  font-size: 16px !important;
}

/* Hover and focus: the shared hover rules (finances.css and the NBFC
   stylesheet) also match the full-width wrapper, which painted the whole
   row so the button looked as if it grew to the form's width. The wrapper
   stays clear in every state, and the button keeps its size; only its
   colour changes. */
body.mfg-page.finances-page:not(.mfi-page) .mfg-cta .crm-proof-demo-widget .trackwick_public_form_submit-btn:not(button):not(input):is(:hover, :focus-within, :active),
body.mfg-page.finances-page:not(.mfi-page) .mfg-cta .crm-proof-demo-widget .btn-box:is(:hover, :focus-within, :active) {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.mfg-page.finances-page:not(.mfi-page) .mfg-cta .crm-proof-demo-widget button.trackwick_public_form_submit-btn:is(:hover, :focus, :active),
body.mfg-page.finances-page:not(.mfi-page) .mfg-cta .crm-proof-demo-widget .trackwick_public_form_submit-btn .ant-btn:is(:hover, :focus, :active),
body.mfg-page.finances-page:not(.mfi-page) .mfg-cta .crm-proof-demo-widget .btn-box button:is(:hover, :focus, :active),
body.mfg-page.finances-page:not(.mfi-page) .mfg-cta .crm-proof-demo-widget button[type="submit"]:is(:hover, :focus, :active),
body.mfg-page.finances-page:not(.mfi-page) .mfg-cta .crm-proof-demo-widget input[type="submit"]:is(:hover, :focus, :active) {
  width: auto !important;
  min-height: 42px !important;
  margin: 6px auto 0 !important;
  padding: 8px 32px !important;
  transform: none !important;
}

body.mfg-page.finances-page:not(.mfi-page) .mfg-cta .crm-proof-demo-fallback {
  display: table;
  width: auto;
  margin-right: auto;
  margin-left: auto;
  padding-right: 32px;
  padding-left: 32px;
}

/* Get Started cards: the NBFC rule holds each title on one line from
   1280px up, but "Talk to a Manufacturing Specialist" is longer than the
   NBFC titles, so it ran out of its card into the next one, where it was
   covered and uncovered while the cards faded in (the flicker). Here the
   titles wrap in balanced lines inside their cards at every width, and
   the cards stay inside their own column. */
.mfg-page.nbfc-page .crm-get-started-card {
  min-width: 0;
  overflow: hidden;
}

.mfg-page.nbfc-page .crm-get-started-card h3 {
  white-space: normal;
  overflow-wrap: break-word;
  text-wrap: balance;
}

/* Scroll reveal: once an element has faded in, drop the animation's
   `will-change` hint so the revealed cards no longer sit on their own
   compositing layers, which can make text shimmer while scrolling. */
.mfg-page.finances-page .fin-reveal.is-revealed {
  will-change: auto;
}

/* ---- How it works on phones ----
   The heading keeps its two lines, each wrapping in balanced lines
   ("From Punch-In to / Purchase Order," / "Every Step on Record") instead
   of leaving "Order," alone. The step copy is centred under the centred
   heading and intro: the step label (tighter tracking, balanced so it
   breaks evenly), title, description, "Key capabilities" label and the
   capability pills. */
@media (max-width: 760px) {
  .mfg-page.finances-page .crm-workflow-heading .mfg-workflow-title .mfg-workflow-line {
    text-wrap: balance;
  }

  .mfg-page.sales-crm-softwares-page .crm-workflow-copy {
    text-align: center;
  }

  .mfg-page.sales-crm-softwares-page .crm-workflow-copy .crm-step-number {
    margin-right: auto;
    margin-left: auto;
    letter-spacing: 0.06em;
    line-height: 1.4;
    text-wrap: balance;
  }

  .mfg-page.sales-crm-softwares-page .crm-workflow-copy h3,
  .mfg-page.sales-crm-softwares-page .crm-workflow-copy .crm-step-description {
    margin-right: auto;
    margin-left: auto;
    text-wrap: balance;
  }

  .mfg-page.nbfc-page .crm-workflow-copy .nbfc-capability-label {
    text-align: center;
  }

  .mfg-page.sales-crm-softwares-page .crm-workflow-copy .crm-capability-list {
    justify-content: center;
  }
}

/* ---- Hero on phones ----
   The headline flows as balanced lines (finances.css), with the rotating
   word centred on its own last line as on desktop.
   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) {
  .mfg-page.finances-page .fin-hero-center .crm-suite-hero-inner {
    padding-bottom: 44px;
  }
}