/* Pharma industry page (/industry/pharma-field-force-management-software).
   The body carries `finances-page` and `nbfc-page` as well as
   `pharma-page`, so finances.css and nbfc-field-force-management.css
   supply the whole NBFC design (layout, spacing, animations), and
   pharma-field-force-management-theme.css turns its blue into the page's
   light teal theme. This file only adds the pieces the pharma copy deck
   needs and the NBFC page does not have, all scoped to `.pharma-page`. */

/* Hero: the looping last line types each phrase out behind a blinking
   caret (the script deletes and retypes it letter by letter), so only one
   phrase is ever on screen. The caret blinks while a phrase is held and
   stays solid while typing. */
.pharma-page .pharma-hero-loop.is-typing {
  white-space: nowrap;
}

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

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

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

/* Hero heading: "Pharma Field Force Software" is wider than NBFC's first
   line, so the copy column is a little wider on desktop and the looping
   line never wraps mid-phrase. */
@media (min-width: 1000px) {
  .pharma-page .fin-hero-center .prod-hero-copy {
    max-width: 1320px;
  }

  .pharma-page .fin-hero-center .pharma-hero-loop-line {
    white-space: nowrap;
  }
}

/* Hero looping line, every width: the typed phrase (Doctor Visit ->
   Travel Claim) sits on its own line that never wraps and always keeps
   one line's height, even while the phrase is deleted down to the caret.
   On phones (<=760px) finances.css flows the heading lines inline with
   text-wrap: balance, so every typed letter re-balanced the whole heading
   and every line jumped; as its own fixed line, the looping phrase can't
   move the "Pharma Field Force Software / That Proves Every" text above it,
   and the heading's height stays the same, so the content below holds
   still too. */
.pharma-page .fin-hero-center .crm-hero-title-line.pharma-hero-loop-line {
  display: block;
  min-height: 1.15em;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .pharma-page .fin-hero-center .crm-hero-title-line.pharma-hero-loop-line::before {
    content: none;
  }
}

/* Description aligned to the heading on desktop (as on the MFI page): the
   copy column shrinks to the heading's widest line ("Pharma Field Force
   Software"), the description adds no width of its own and fills exactly
   that width, and its lines are justified so both edges sit flush with the
   heading's first line (the last line is centred). Below 1200px it wraps
   and centres as before. */
@media (min-width: 1200px) {
  .pharma-page .fin-hero-center .prod-hero-copy {
    width: fit-content;
  }

  .pharma-page .fin-hero-center .prod-hero-sub {
    width: 0;
    min-width: 100%;
    max-width: none;
    text-align: justify;
    text-align-last: center;
    text-wrap: pretty;
    hyphens: none;
  }

  .pharma-page .fin-hero-center .prod-hero-sub .nbfc-hero-sub-line {
    display: inline;
    white-space: normal;
  }
}

/* Hero floating icons sit further out and lower, beside the shorter
   second line and the description, and only show where there is room. */
.pharma-page .nbfc-hero-float--coin {
  top: 46%;
  left: 3%;
}

.pharma-page .nbfc-hero-float--pin {
  top: 76%;
  left: 6%;
}

.pharma-page .nbfc-hero-float--shield {
  top: 44%;
  right: 3%;
}

.pharma-page .nbfc-hero-float--receipt {
  top: 74%;
  right: 6%;
}

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

/* Quick Answer: no icon strip on this page, so on desktop the copy is
   centred vertically beside the picture, with a slightly larger answer text. The
   section keeps a compact height (480px, NBFC's 56px padding); the
   picture fills it. */
@media (min-width: 1101px) {
  .pharma-page .pharma-answer {
    min-height: 480px;
    padding: 56px 0;
  }

  .pharma-page .pharma-answer .nbfc-answer-container {
    display: flex;
    min-height: calc(480px - 112px);
    align-items: center;
  }

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

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

  .pharma-page .pharma-answer .nbfc-answer-text p {
    font-size: 17px;
    line-height: 1.65;
  }

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

  .pharma-page .pharma-answer .nbfc-answer-media img {
    object-position: 45% 60%;
  }
}

/* Below 1100px the picture sits under the copy at its own proportions, so
   nothing is cropped. */
@media (max-width: 1100px) {
  .pharma-page .pharma-answer .nbfc-answer-media {
    aspect-ratio: 4344 / 3258;
  }
}

/* Field reality board (desktop): as on the NBFC page, the phone stands in
   the middle as tall as the two card columns, centred between them. The
   supplied doctor-visit phone image is almost square with wide transparent
   margins around the phone and its mint circles, so it is drawn wider than
   its column (the margins spill under the gaps) to give the phone the
   NBFC phone's height; the cards keep their width. */
@media (min-width: 1025px) {
  .pharma-page .pharma-proof .fin-leaks-board {
    align-items: center;
  }

  .pharma-page .pharma-proof .fin-leaks-list {
    align-self: center;
  }

  .pharma-page .pharma-proof .fin-leaks-visual {
    align-self: center;
    width: 430px;
  }

  body.pharma-page.nbfc-page .pharma-proof .fin-leaks-visual .nbfc-proof-phone-image {
    width: 700px;
    max-width: none;
    margin-inline: -135px;
    filter: none;
  }
}

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

  body.pharma-page.nbfc-page .pharma-proof .fin-leaks-visual .nbfc-proof-phone-image {
    width: 560px;
    margin-inline: -110px;
  }
}

/* Tablet and mobile: the image is shown at the column's width (the phone
   comes out larger than the old artwork at the same width). */
@media (max-width: 1024px) {
  .pharma-page .pharma-proof .fin-leaks-visual {
    width: min(460px, 100%);
  }

  body.pharma-page.nbfc-page .pharma-proof .fin-leaks-visual .nbfc-proof-phone-image {
    filter: none;
  }
}

/* How it works: the heading and Stage 1 read as one section. 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 mid-section. */
.pharma-page.finances-page .crm-workflow-step:first-child {
  background: transparent;
}

/* How it works heading: "How TrackOlap Runs a Pharma Field Day" on a
   single line on desktop (no forced break between the two parts); it
   wraps naturally on tablets and phones. */
@media (min-width: 1100px) {
  .pharma-page .crm-section-heading.crm-workflow-heading h2 {
    white-space: nowrap;
    text-wrap: nowrap;
  }

  /* Subheading spans exactly the heading's width: the heading block
     shrinks to the one-line heading, the subheading adds no width of its
     own and fills it, justified so both edges sit flush with the heading
     (the last line is centred). */
  .pharma-page .crm-section-heading.crm-workflow-heading {
    width: fit-content;
    max-width: calc(100% - 48px);
  }

  .pharma-page .crm-section-heading.crm-workflow-heading > p.crm-workflow-summary {
    width: 0;
    min-width: 100%;
    max-width: none;
    text-align: justify;
    text-align-last: center;
    text-wrap: pretty;
    hyphens: none;
  }
}

/* How it works stages: the seven pharma stage images share one 6:5 frame
   (their own proportions are 6:5 to 5:4), so every stage's picture has the
   same size and sits centred beside its copy, and copy and picture share
   one vertical centre line. Stage 1's artwork ends in a thin teal rule at
   its bottom edge, which is faded out so it doesn't read as a stray line
   under the picture. */
@media (min-width: 901px) {
  .pharma-page .crm-workflow-grid {
    align-items: center;
  }

  .pharma-page .crm-workflow-copy {
    align-self: center;
  }

  .pharma-page .crm-workflow-media {
    align-self: center;
    justify-content: center;
  }

  .pharma-page .crm-workflow-media img {
    width: min(100%, 600px);
    height: auto;
    max-height: none;
    aspect-ratio: 6 / 5;
    object-fit: contain;
    object-position: center;
  }
}

.pharma-page .crm-workflow-media img[src$="stage-1.webp"] {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 95%, transparent 99%);
  mask-image: linear-gradient(180deg, #000 0%, #000 95%, transparent 99%);
}

/* Comparison table in the page's teal. The NBFC page's table rules
   (nbfc-field-force-management.css, `body.nbfc-page:not(.mfi-page)`) set
   its blue on every non-MFI page; these use the same selectors with
   `.pharma-page` in place of `:not(.mfi-page)`, so they have equal weight
   and win by loading later: the TrackOlap column outline, badge, tagline
   and header fill, the value-column icon, the category bands, the row
   dividers and hover tint, and the "Swipe right" pill. */
body.pharma-page.nbfc-page .ind-compare {
  --ic-accent: #198f82;
  --ic-ours-bg: #effaf9;
  --ic-ours-bg-alt: #dff5f2;
  --ic-value-bg: #e8f8f6;
}

body.pharma-page.nbfc-page .ind-compare-table tbody .ind-compare-ours {
  border-bottom-color: rgba(25, 143, 130, 0.22);
}

body.pharma-page.nbfc-page .ind-compare-table tbody tr:not(.ind-compare-group):hover > * {
  box-shadow: inset 0 0 0 9999px rgba(25, 143, 130, 0.04);
}

body.pharma-page.nbfc-page .ind-compare-table .ind-compare-group > * {
  background: #eefaf8;
}

body.pharma-page.nbfc-page .ind-compare-table .ind-compare-group th {
  color: #198f82;
}

body.pharma-page.nbfc-page .ind-compare-head--rich > th,
body.pharma-page.nbfc-page .ind-compare-head--rich .ind-compare-value {
  background: #f7fcfb;
}

body.pharma-page.nbfc-page .ind-compare-head--rich .ind-compare-value {
  border-left-color: #dcefec;
}

body.pharma-page.nbfc-page .ind-compare-head--rich .ind-compare-ours,
body.pharma-page.finances-page .ind-compare-table thead .ind-compare-ours {
  background: #e8f8f6;
}

body.pharma-page.nbfc-page .ind-compare-head-icon {
  background: #e3f6f3;
}

body.pharma-page .ind-compare-head-icon svg circle {
  fill: #198f82;
}

body.pharma-page.finances-page .ind-compare-head-badge {
  background: #198f82;
}

body.pharma-page.finances-page .ind-compare-head-tagline {
  color: #198f82;
}

body.pharma-page.nbfc-page .ind-compare .ind-compare-swipe {
  background: linear-gradient(90deg, #15786c 0%, #198f82 100%);
  box-shadow: 0 8px 22px rgba(21, 120, 108, 0.32);
  animation-name: pharma-compare-swipe-glow;
}

/* Related reading: the module cards with a topic tag in place of the
   icon. */
.pharma-page .pharma-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;
}

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

/* Related reading: each post's cover image across the top of the card,
   edge to edge (the card's 30px / 28px padding is pulled back), as on the
   Insurance page. */
.pharma-page .pharma-blogs .nbfc-module-card a {
  overflow: hidden;
}

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

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

/* Get started cards: let titles wrap inside the card. */
.pharma-page .crm-get-started-card {
  min-width: 0;
}

.pharma-page .crm-get-started-card h3 {
  white-space: normal;
  overflow-wrap: break-word;
}

/* Demo CTA band in the page's teal. finances.css restores the blue band on
   every non-MFI page with `body.finances-page:not(.mfi-page)` rules; these
   match that specificity and load later, so the teal band, its light teal
   accent words and the teal form button win on this page only. */
body.pharma-page.finances-page .fin-cta-form .fin-cta-form-card {
  background:
    radial-gradient(circle at 12% 20%, rgba(255, 255, 255, 0.14), transparent 34%),
    linear-gradient(120deg, #147469 0%, #198f82 55%, #22b3a2 100%);
}

body.pharma-page.finances-page .fin-cta-form .fin-cta-form-card::before {
  background-image: linear-gradient(45deg, rgba(12, 65, 59, 0.28) 25%, transparent 25%, transparent 75%, rgba(12, 65, 59, 0.28) 75%),
    linear-gradient(45deg, rgba(12, 65, 59, 0.28) 25%, transparent 25%, transparent 75%, rgba(12, 65, 59, 0.28) 75%);
}

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

body.pharma-page.finances-page .fin-cta-form .fin-cta-form-panel {
  box-shadow: 0 18px 44px rgba(9, 50, 45, 0.3);
}

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

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

/* Demo pop-up: the "Close" link in the page's teal (the pharma picture
   and teal tick icons are passed to the shared modal partial by this
   page). The left panel is a light teal card with the copy at the top and
   the pharma picture (a medical representative's day plan with doctor and
   chemist visits) shown whole at the bottom, like the Finance pop-up's
   layout. */
.pharma-page .demo-modal .btn-close {
  color: #198f82;
}

.pharma-page .demo-modal .left-section {
  position: relative;
  display: flex;
  overflow: hidden;
  flex-direction: column;
  background: linear-gradient(180deg, #eefcfb 0%, #e3f6f3 100%);
  border: 1px solid #c9eee9;
  border-radius: 12px;
}

.pharma-page .demo-modal .left-section .left-content {
  position: relative;
  z-index: 1;
}

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

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

  .pharma-page .demo-modal .right-section {
    width: 100%;
  }
}