/* Media industry page (/industry/media).
   The body carries `finances-page` and `nbfc-page` as well as `media-page`,
   so finances.css and nbfc-field-force-management.css supply the whole NBFC
   design (layout, spacing, animations). This file only adds the pieces the
   media copy deck needs and the NBFC page does not have, all scoped to
   `.media-page`. Colours follow the media palette: hero gradient
   #f8f5ff -> #e6ddff, headings #30205b, accents #7652d9, glow
   #ddd0ff -> #bda4f4, CTA buttons #ff7a21, body text #505469.
   media-workforce-management-software-theme.css re-hues the shared rules,
   and the "Media colour theme" block below sets the hero, button, footer,
   chat and compare-table colours. */

/* Hero heading alignment, as on the NBFC hero: three centred lines
   stepping in, widest first ("Media Workforce Management" / "Software
   Built for Every" / the rotating word). The first line has more letters
   than NBFC'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) {
  .media-page.nbfc-page .fin-hero-center .prod-hero-headline {
    font-size: clamp(34px, 4.1vw, 60px);
  }
}

/* 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 carries the media purple gradient itself (the gradient on
   the box would not reach the positioned words). */
.media-page.nbfc-page .crm-suite-hero.fin-hero-center .fin-hero-title-accent.media-rotator.is-ready {
  position: relative;
  display: block;
  width: auto;
  color: #7652d9;
  text-align: center;
  white-space: nowrap;
  background: none;
  -webkit-text-fill-color: currentColor;
}

.media-page .media-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). The gradient fill only
   paints inside the box, and the heading's tight 1.1 line height made the
   box shorter than the glyphs, which clipped descenders ("g", "y" in
   "Agency") and the tops of tall letters. */
.media-page.nbfc-page .crm-suite-hero.fin-hero-center .media-rotator-word {
  position: absolute;
  top: -0.12em;
  left: 50%;
  padding: 0.12em 0.06em 0.22em;
  white-space: nowrap;
  background: linear-gradient(180deg, #9a7bea 0%, #6a47cb 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  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;
}

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

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

/* Hero description, aligned to the heading as under the NBFC headline:
   on desktop the copy column is exactly as wide as the heading's first
   (widest) line, "Media Workforce Management", and the description fills
   that width without widening it. It runs as one text in two balanced
   lines (the copy has no even word break, so the fixed 114 / 121
   character lines were uneven), each stretched to the full width, so both
   lines start and end level with the heading's first line. */
@media (min-width: 1200px) {
  .media-page.nbfc-page .fin-hero-center .prod-hero-copy {
    width: fit-content;
    max-width: min(1120px, 100%);
    margin-right: auto;
    margin-left: auto;
  }

  .media-page.nbfc-page .fin-hero-center .prod-hero-sub {
    width: 0;
    min-width: 100%;
    max-width: none;
    font-size: min(17px, 1.13vw);
    text-align: justify;
    text-align-last: justify;
    text-wrap: balance;
  }

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

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

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

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

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

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

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

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

/* Quick answer picture (two media colleagues checking crew locations on
   a tablet, camera behind them): the people sit right of centre, so the
   photo is cropped around them rather than from the right edge. Square
   corners only: the frame has no rounding at any size. */
.media-page.nbfc-page .nbfc-answer-media,
.media-page.nbfc-page .nbfc-answer-media img {
  border-radius: 0 !important;
}

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

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

/* The Visibility Gap: the NBFC "How it works" heading texture, in light
   media purples only (no dark colour). A faint lavender glow rises from
   the top centre of the section over a very light lavender that settles
   to white (the side tints behind the problem and fix cards stay), and the
   fine 14px tile grid, in a pale purple, sits 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. */
.media-page.finances-page .nbfc-proof.media-proof {
  background:
    radial-gradient(ellipse 36% 620px at 50% 0%, rgba(221, 208, 255, 0.55) 0%, rgba(230, 221, 255, 0.22) 50%, rgba(230, 221, 255, 0) 100%) top center / 100% 900px no-repeat,
    linear-gradient(180deg, #faf8ff 0, #fcfbff 380px, #fff 760px) top center / 100% 900px no-repeat,
    radial-gradient(circle at 0% 55%, rgba(255, 170, 130, 0.16), transparent 38%),
    radial-gradient(circle at 100% 55%, rgba(129, 95, 220, 0.13), transparent 38%),
    #fff;
}

.media-page.finances-page .media-proof .fin-leaks-heading {
  position: relative;
  isolation: isolate;
}

.media-page.finances-page .media-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(189, 164, 244, 0.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(189, 164, 244, 0.22) 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) {
  .media-page.finances-page .media-proof .fin-leaks-heading::before {
    top: -72px;
  }
}

@media (max-width: 900px) {
  .media-page.finances-page .media-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. */
.media-page.finances-page .crm-workflow-step:first-child {
  padding-top: 16px;
  background: transparent;
}

.media-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 ("How TrackOlap Manages Your
   Media" / "Workforce, End to End"). */
.media-page .crm-workflow-heading .media-workflow-line {
  display: block;
}

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

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

/* Fair, Transparent and Secure heading, set like the How It Works
   heading and the NBFC hero headline: two centred lines ("Built for Fair,
   Transparent" / "and Secure Media Operations"), and on desktop the intro
   fills exactly the first line's width in balanced, centred lines. */
@media (min-width: 901px) {
  .media-page.finances-page .prod-task-capabilities-head {
    width: fit-content;
    max-width: min(1100px, calc(100% - 48px));
    margin-right: auto;
    margin-left: auto;
  }

  .media-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: "Spreadsheets Record
   Hours." on one (widest) line, "TrackOlap Records Proof." in purple on
   the line below, and on desktop the intro fills exactly the first line's
   width in balanced, centred lines. */
@media (min-width: 901px) {
  .media-page.finances-page .fin-compare-heading {
    width: fit-content;
    max-width: min(1100px, calc(100% - 48px));
    margin-right: auto;
    margin-left: auto;
  }

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

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

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

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

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

  .media-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. */
.media-page .media-cta .fin-cta-form-card {
  align-items: center;
  padding-top: 56px;
  padding-bottom: 56px;
  gap: 48px;
}

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

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

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

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

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

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

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

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

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

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

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

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

.media-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). */
.media-page .media-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;
}

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

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

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

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

/* ---- Media colour theme ----
   The hand-written colour rules the Agriculture page ports from the MFI
   page, set here in the media palette. Layout rules are not repeated. */

/* Hero, set like the NBFC hero but in the media palette: the section is
   a light lavender (#f8f5ff easing to #fbfaff), and the deeper colour is
   kept to the texture only, a soft purple glow (#ddd0ff -> #bda4f4) at the
   top centre behind the heading's tile grid, drawn in the dark heading
   purple. No NBFC blue is used anywhere in the hero. The eyebrow pill
   stays white; heading text takes the page's heading colour (#30205b). */
.media-page {
  --fin-hero-bg: #f8f5ff;
  --fin-hero-ink: #30205b;
  --ffm-blue: #7652d9;
}

.media-page.finances-page .crm-suite-hero.fin-hero-center {
  background:
    radial-gradient(ellipse 36% 58% at 50% 0%, rgba(189, 164, 244, 0.5) 0%, rgba(221, 208, 255, 0.32) 50%, rgba(221, 208, 255, 0) 100%),
    linear-gradient(180deg, #f8f5ff 0%, #faf8ff 55%, #fbfaff 100%);
}

.media-page.finances-page .fin-hero-center .fin-hero-eyebrow {
  color: #30205b;
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(118, 82, 217, 0.18);
  box-shadow: 0 8px 24px rgba(118, 82, 217, 0.08);
}

.media-page.finances-page .crm-suite-hero.fin-hero-center .prod-hero-headline {
  color: #30205b;
}

.media-page.finances-page .crm-suite-hero.fin-hero-center .prod-hero-sub {
  color: #505469;
}

/* Customer logos follow the hero in the exact lavender the hero ends on
   (#fbfaff, as on the NBFC page), so there is no band where the two meet. */
.media-page.nbfc-page .ffm-logo-section {
  background: #fbfaff;
}

/* 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 dark
   heading purple (#30205b), the only dark colour in the hero. The same
   grid sits behind the section headings further down the page. */
.media-page.nbfc-page .fin-hero-center .prod-hero-headline::before,
.media-page.nbfc-page .crm-section-heading.crm-workflow-heading::before,
.media-page.nbfc-page .crm-section-heading.crm-communication-heading::before,
.media-page.nbfc-page :is(.fin-results-heading, .prod-task-capabilities-head, .fin-compare-heading, .nbfc-modules-heading)::before {
  background-image:
    linear-gradient(rgba(48, 32, 91, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(48, 32, 91, 0.1) 1px, transparent 1px);
  background-position: center top;
  background-repeat: repeat;
  background-size: 14px 14px;
}

/* Accent words in the hero heading: the purple 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. */
.media-page.nbfc-page .crm-suite-hero.fin-hero-center .fin-hero-title-accent {
  color: #7652d9;
  background: linear-gradient(180deg, #9a7bea 0%, #6a47cb 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 media CTA orange (#ff7a21): the top-right "Request
   a Demo" (matching the Finance rule it overrides) and the hero "Book Free
   Demo" button, each a deeper orange on hover. The arrow chip inside the
   hero button stays white with an orange arrow. */
.media-page.finances-page .ffm-nav-shell.main-container .header-container .header-container-box .top-buttons .start-trial-btn,
.media-page.finances-page .ffm-nav-shell.main-container .header-container.header-on-scroll .header-container-box .top-buttons .start-trial-btn,
.media-page.finances-page .ffm-nav-shell .top-buttons > #startTrial2,
.media-page.finances-page .ffm-nav-shell .header-container.header-on-scroll .top-buttons > #startTrial2 {
  background: #ff7a21 !important;
  border-color: #ff7a21 !important;
  box-shadow: 0 6px 16px rgba(255, 122, 33, 0.26) !important;
}

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

.media-page .fin-hero-center .fin-hero-email button {
  background: #ff7a21;
}

.media-page .fin-hero-center .fin-hero-email button:hover {
  background: #e8650f;
}

.media-page .fin-hero-center .fin-hero-email-arrow {
  color: #ff7a21;
}

.media-page .fin-hero-center .fin-hero-email {
  box-shadow: 0 16px 40px rgba(118, 82, 217, 0.16);
}

/* Hero trust line under the email bar ("Web, Android & iOS", "ISO
   27001:2022", "Data hosted in India"), each with a purple tick. Wraps
   and stays centred on small screens. */
.media-page .media-hero-trust {
  display: flex;
  margin: 18px 0 0;
  padding: 0;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  color: #505469;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  list-style: none;
}

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

.media-page .media-hero-trust svg {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: #7652d9;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

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

/* Footer copyright strip: the NBFC page's darker navy band becomes a deep
   shade of the heading purple (same transparency, so the footer's grid
   texture still shows through), with the same faint top hairline. */
.media-page.nbfc-page .website-footer .copyright-strip {
  background: rgba(48, 32, 91, 0.78);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* ---- No NBFC blue ----
   The NBFC stylesheets colour the chat widget, back-to-top button,
   comparison table and demo CTA band with rules scoped to
   `body.nbfc-page:not(.mfi-page)`, which also match this page and outrank
   plain `.media-page` rules. Each one is restated here one class more
   specific (`body.media-page.nbfc-page:not(.mfi-page)`) in the media
   purple, so no NBFC blue reaches the page. */

/* Live chat (Antrika) in the page's accent colour (#7652d9). 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 #7652d9 and win over the inline ones because they are
   !important. */
html:has(> body.media-page.nbfc-page:not(.mfi-page)) {
  --widget-body-primary: rgb(101.2, 72.4, 180.4) !important;
  --widget-body-primary-10: rgb(42.8, 39, 53.2) !important;
  --widget-body-primary-dark: rgb(41.6, 38.3, 50.5) !important;
}

/* Chat launcher and greeting card in the same purple (the widget sets
   these as inline styles, so they are overridden with !important). */
body.media-page.nbfc-page:not(.mfi-page) [class*="antrika_chat_button-label"] {
  background-color: #7652d9 !important;
}

body.media-page.nbfc-page:not(.mfi-page) [class*="antrika_chat_button-label"]:hover {
  background-color: #5a3bb8 !important;
}

body.media-page.nbfc-page:not(.mfi-page) [class*="antrika_chat_chat-initial-div"] > div:first-child {
  border-color: #7652d9 !important;
}

/* "Back to top" button in the page's accent purple. */
body.media-page.nbfc-page:not(.mfi-page) {
  --back-to-top-bg: #7652d9;
  --back-to-top-bg-hover: #5a3bb8;
}

/* Comparison table (shared industry-compare.css plus the NBFC table
   refinements) in the page's purple. */
body.media-page.nbfc-page:not(.mfi-page) .ind-compare {
  --ic-accent: #7652d9;
  --ic-ours-bg: #f8f5ff;
  --ic-ours-bg-alt: #efe9ff;
  --ic-value-bg: #f3effd;
}

body.media-page.nbfc-page:not(.mfi-page) .ind-compare-table th,
body.media-page.nbfc-page:not(.mfi-page) .ind-compare-table td {
  border-bottom-color: #e3dcf3;
}

body.media-page.nbfc-page:not(.mfi-page) .ind-compare-table thead th {
  border-bottom-color: #d6cbf0;
}

body.media-page.nbfc-page:not(.mfi-page) .ind-compare-table tbody:last-of-type tr:last-child > * {
  border-bottom: 0;
}

body.media-page.nbfc-page:not(.mfi-page) .ind-compare-table tbody:last-of-type tr:last-child .ind-compare-ours {
  border-bottom: 2px solid var(--ic-accent);
}

body.media-page.nbfc-page:not(.mfi-page) .ind-compare-table tbody .ind-compare-ours {
  border-bottom-color: rgba(118, 82, 217, 0.2);
}

body.media-page.nbfc-page:not(.mfi-page) .ind-compare-table tbody tr:not(.ind-compare-group):hover > * {
  box-shadow: inset 0 0 0 9999px rgba(118, 82, 217, 0.04);
}

body.media-page.nbfc-page:not(.mfi-page) .ind-compare-table .ind-compare-group > * {
  background: #f5f2fd;
}

body.media-page.nbfc-page:not(.mfi-page) .ind-compare-table .ind-compare-group th {
  color: #7652d9;
}

body.media-page.nbfc-page:not(.mfi-page) .ind-compare-head-badge {
  background: #7652d9;
}

body.media-page.nbfc-page:not(.mfi-page) .ind-compare-head-tagline {
  color: #7652d9;
}

/* "Swipe right" pill above the table on phones/tablets, in purple. */
@media (max-width: 1060px) {
  body.media-page.nbfc-page:not(.mfi-page) .ind-compare .ind-compare-swipe {
    background: linear-gradient(90deg, #5a3bb8 0%, #7652d9 100%);
    box-shadow: 0 8px 22px rgba(90, 59, 184, 0.32);
    animation-name: media-compare-swipe-glow;
  }
}

@keyframes media-compare-swipe-glow {
  0%, 100% { box-shadow: 0 8px 22px rgba(90, 59, 184, 0.32), 0 0 0 0 rgba(118, 82, 217, 0.35); }
  50% { box-shadow: 0 8px 22px rgba(90, 59, 184, 0.32), 0 0 0 8px rgba(118, 82, 217, 0); }
}

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

/* Demo CTA band ("In Media, a Missed Hour..."): the NBFC blue band
   becomes a purple one with its texture in the dark heading purple, the
   accent half of the heading in pale lavender and the form button in the
   media CTA orange. */
body.media-page.finances-page:not(.mfi-page) .fin-cta-form .fin-cta-form-card {
  background:
    radial-gradient(circle at 12% 20%, rgba(255, 255, 255, 0.12), transparent 34%),
    linear-gradient(120deg, #5a3bb8 0%, #7652d9 55%, #9a7bea 100%);
}

body.media-page.finances-page:not(.mfi-page) .fin-cta-form .fin-cta-form-card::before {
  background-image: linear-gradient(45deg, rgba(48, 32, 91, 0.28) 25%, transparent 25%, transparent 75%, rgba(48, 32, 91, 0.28) 75%),
    linear-gradient(45deg, rgba(48, 32, 91, 0.28) 25%, transparent 25%, transparent 75%, rgba(48, 32, 91, 0.28) 75%);
}

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

body.media-page.finances-page:not(.mfi-page) .fin-cta-form .fin-cta-form-panel {
  box-shadow: 0 18px 44px rgba(48, 32, 91, 0.3);
}

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

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

/* Demo form's product dropdown: purple focus ring instead of blue. */
.media-page.finances-page [data-fin-product="toggle"]:focus-visible,
.media-page.finances-page [data-fin-product="field"][data-fin-open="true"] [data-fin-product="toggle"] {
  box-shadow: 0 0 0 3px rgba(118, 82, 217, 0.18);
}

/* Mobile header "Request a Demo" (finances.css paints it with a blue
   gradient below 1030px): the media CTA orange. */
@media (max-width: 1029px) {
  .media-page.finances-page .ffm-nav-shell .top-buttons > #startTrial2 {
    background: #ff7a21 !important;
    border-color: #ff7a21 !important;
  }
}

/* ---- 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) {
  .media-page.finances-page .fin-hero-center .crm-suite-hero-inner {
    padding-bottom: 44px;
  }
}