/* Healthcare industry page (/industry/healthcare).
   The body carries `finances-page`, `nbfc-page` and `pharma-page` as well
   as `healthcare-page`, so finances.css, nbfc-field-force-management.css
   and the two pharma stylesheets supply the whole design (layout, spacing,
   animations). healthcare-field-force-management-theme.css (loaded in
   place of the Pharma theme) turns the teal into the page's light cyan.
   This file only adjusts the pieces the healthcare copy deck needs, all
   scoped to `.healthcare-page`. */

/* How it works heading: the healthcare heading is too long for the Pharma
   page's single-line heading, so it wraps on two lines at the normal
   section width ("How TrackOlap's Healthcare Field Operations" /
   "Management Software Works" in cyan). */
@media (min-width: 1100px) {
  .healthcare-page .crm-section-heading.crm-workflow-heading {
    width: auto;
    max-width: 1000px;
  }

  .healthcare-page .crm-section-heading.crm-workflow-heading h2 {
    white-space: normal;
    text-wrap: balance;
  }

  .healthcare-page .crm-section-heading.crm-workflow-heading h2 .fin-workflow-lead {
    display: block;
  }

  .healthcare-page .crm-section-heading.crm-workflow-heading > p.crm-workflow-summary {
    width: auto;
    min-width: 0;
    max-width: 760px;
    text-align: center;
  }
}

/* Hero description: the copy deck's sentence in two balanced, centred
   lines on desktop (split after "attendance,"), as on the NBFC page,
   instead of the Pharma page's justified block, which stretched the word
   spacing of the longer healthcare first line. Below 1200px it wraps
   naturally. */
@media (min-width: 1200px) {
  .healthcare-page .fin-hero-center .prod-hero-sub {
    text-align: center;
    text-align-last: center;
  }

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

/* Field reality: each card names the area, then the copy deck's line for
   it, so the line under the title is a little lighter. */
.healthcare-page .healthcare-proof .fin-leaks-text {
  line-height: 1.45;
}

.healthcare-page .healthcare-proof .fin-leaks-text strong {
  margin-bottom: 2px;
}

/* Centre the visit-proof phone beside the five remaining card pairs. */
.healthcare-page .healthcare-proof .fin-leaks-visual {
  align-self: center;
  justify-self: center;
}

/* Keep the visit badge visible when the definition image fills its column. */
.healthcare-page .nbfc-answer-media img {
  object-position: left 35%;
}

@media (max-width: 1100px) {
  .healthcare-page .nbfc-answer-media {
    aspect-ratio: 4344 / 3258;
  }
}

/* The four field operations items share the strip evenly. */
.healthcare-page.nbfc-page .nbfc-layer-list {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: none;
}

@media (min-width: 1101px) {
  .healthcare-page.nbfc-page .nbfc-layer-item:first-child,
  .healthcare-page.nbfc-page .nbfc-layer-item:last-child {
    justify-self: stretch;
    padding-inline: 8px;
  }
}

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

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

/* More than tracking: the module card design without links. The two
   detailed cards (with a small label) share the first row, the three
   shorter cards the second. */
.healthcare-page .healthcare-more-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.healthcare-page .healthcare-more-grid > .healthcare-static-card {
  grid-column: span 2;
}

.healthcare-page .healthcare-more-grid > .healthcare-static-card:nth-child(-n + 2) {
  grid-column: span 3;
}

.healthcare-page .healthcare-static-card > div {
  display: flex;
  height: 100%;
  padding: 30px 28px;
  flex-direction: column;
  background: linear-gradient(180deg, #ffffff 0%, #f8fdfe 100%);
  border: 1px solid rgba(25, 129, 143, 0.1);
  border-radius: 20px;
  box-shadow: 0 16px 36px rgba(11, 21, 48, 0.06);
}

.healthcare-page .healthcare-card-top {
  display: flex;
  margin-bottom: 18px;
  align-items: center;
  gap: 14px;
}

.healthcare-page .healthcare-card-top .nbfc-module-icon,
.healthcare-page .healthcare-card-top .pharma-blog-tag {
  margin-bottom: 0;
}

/* Keep the blog photos in their original colors. Use the healthcare theme
   on the reading section's frame and accents only. */
.healthcare-page #related-blogs .pharma-blog-media {
  background: #e9f9fb;
  border-bottom: 4px solid var(--crm-blue);
}

.healthcare-page #related-blogs .pharma-blog-tag {
  color: #156e78;
  background: #e9f9fb;
}

.healthcare-page #related-blogs .nbfc-module-card a {
  background: linear-gradient(180deg, #ffffff 0%, #f2fbfc 100%);
  border-color: rgba(25, 129, 143, 0.14);
}

.healthcare-page #related-blogs .nbfc-module-card a:hover,
.healthcare-page #related-blogs .nbfc-module-card a:focus-visible {
  border-color: rgba(25, 129, 143, 0.4);
  box-shadow: 0 22px 44px rgba(25, 129, 143, 0.14);
}

.healthcare-page .healthcare-static-card p {
  margin-bottom: 0;
}

@media (max-width: 1100px) {
  .healthcare-page .healthcare-more-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .healthcare-page .healthcare-more-grid > .healthcare-static-card,
  .healthcare-page .healthcare-more-grid > .healthcare-static-card:nth-child(-n + 2) {
    grid-column: auto;
  }

  .healthcare-page .healthcare-more-grid > .healthcare-static-card:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 900px) {
  .healthcare-page .healthcare-more-grid {
    grid-template-columns: 1fr;
  }

  .healthcare-page .healthcare-static-card > div {
    padding: 26px 22px;
  }
}

/* Comparison header: the "What it means for you" icon in the page's cyan
   instead of the shared partial's blue. */
.healthcare-page .ind-compare-head-icon circle[fill="#164bd6"] {
  fill: #19818f;
}

/* Cyan theme for the shared Pharma section rules that carry colour (the
   segment picture panel, the demo CTA band and its form button, the demo
   pop-up): the same rules re-hued to the page's cyan, one class more
   specific so they win over pharma-field-force-management.css. */
.healthcare-page.pharma-page .pharma-roles .crm-communication-visual {
  background: linear-gradient(145deg, #f1fafb, #e3f5f6);
}

body.healthcare-page.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, #146974 0%, #19818f 55%, #22a3b3 100%);
}

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

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

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

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

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

.healthcare-page.pharma-page .demo-modal .btn-close {
  color: #19818f;
}

.healthcare-page.pharma-page .demo-modal .left-section {
  background: linear-gradient(180deg, #eefafc 0%, #e3f5f6 100%);
  border: 1px solid #c9ebee;
}

/* "Governance and Data Protection": headline laid out like "Compare" -
   the accent part on its own line below the lead, same size as the
   other section headlines. */
.healthcare-page.products-page .prod-task-capabilities-head h2 .prod-task-capabilities-heading-primary {
  font-size: inherit !important;
  line-height: inherit !important;
  white-space: normal;
}

.healthcare-page .prod-task-capabilities-head h2 .prod-task-capabilities-heading-primary .prod-task-capabilities-heading-accent {
  display: block;
}