/* Insurance industry page (/industry/insurance).
   The body carries `finances-page` and `nbfc-page` as well as
   `insurance-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 insurance copy deck needs and the NBFC page
   does not have, all scoped to `.insurance-page`. */

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

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

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

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

/* Hero floating icons: the insurance headline's first line ("Insurance
   Field Force Software") is wider than NBFC's, so the four icons sit
   further out and lower, beside the shorter second and third lines and the
   description, and only show where there is room beside the heading. */
.insurance-page .nbfc-hero-float--coin {
  top: 46%;
  left: 3%;
}

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

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

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

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

/* Small print under the hero email field. */
.insurance-page .ins-hero-note {
  margin: 14px 0 0;
  color: var(--fin-hero-muted, #4b5568);
  font-size: 15px;
  font-weight: 500;
  text-align: center;
}

/* Quick Answer: keep the larger insurance copy readable while letting the
   section follow its content height instead of holding it at 600px. */
@media (min-width: 1101px) {
  .insurance-page .ins-answer {
    padding: 48px 0;
  }

  .insurance-page .ins-answer .nbfc-answer-container {
    display: flex;
    align-items: center;
  }

  .insurance-page .ins-answer .fin-section-tag {
    margin-bottom: 20px !important;
  }

  .insurance-page .ins-answer .nbfc-answer-text {
    margin-top: 24px;
  }

  .insurance-page .ins-answer .nbfc-answer-text p {
    font-size: 18px;
    line-height: 1.75;
  }

  .insurance-page .ins-answer .nbfc-answer-text p + p {
    margin-top: 16px;
  }

  .insurance-page .ins-answer .nbfc-answer-media img {
    object-position: 70% 35%;
  }
}

/* Quick Answer photo (insurance inspection beside a car): below 1100px it
   sits under the copy at its own 3267:2445 proportions, so nothing is
   cropped. */
@media (max-width: 1100px) {
  .insurance-page .ins-answer .nbfc-answer-media {
    aspect-ratio: 3267 / 2445;
  }
}

/* Why it matters: centred heading, then the six outcomes as framed
   cards, three per row in two rows (two per row on tablet, one on
   mobile). Each card is a white frame with a soft shadow around an inner
   panel with a light gradient in the theme colours (blue cards lean blue
   with a warm orange corner, orange cards lean warm with a blue corner).
   Inside: the icon at the top, a bold dark title, the statement, and an
   uppercase "Learn more ›" link at the bottom. Text uses the page's own
   font. */
.insurance-page .ins-matters .fin-journey-heading p {
  max-width: 900px;
  margin-inline: auto;
}

.insurance-page .ins-matters-grid {
  display: grid;
  max-width: 1240px;
  margin: 48px auto 0;
  padding: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  list-style: none;
}

.insurance-page .ins-matters-card {
  padding: 10px;
  background: #fff;
  border: 1px solid rgba(11, 21, 48, 0.06);
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(11, 21, 48, 0.06);
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.insurance-page .ins-matters-panel {
  display: flex;
  height: 100%;
  min-height: 320px;
  padding: 34px 32px 30px;
  flex-direction: column;
  align-items: flex-start;
  background: linear-gradient(135deg, #e7efff 0%, #f1f5ff 55%, #fff3ea 100%);
  border-radius: 12px;
}

.insurance-page .ins-matters-card--orange .ins-matters-panel {
  background: linear-gradient(135deg, #fff0e6 0%, #fff6f0 50%, #eaf1ff 100%);
}

.insurance-page .ins-matters-icon {
  display: grid;
  width: 56px;
  height: 56px;
  margin-bottom: 26px;
  color: #1e5bfa;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 6px 16px rgba(30, 91, 250, 0.12);
  place-items: center;
}

.insurance-page .ins-matters-card--orange .ins-matters-icon {
  color: #f56d25;
  box-shadow: 0 6px 16px rgba(245, 109, 37, 0.16);
}

.insurance-page .ins-matters-icon svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Card title in the reference heading style ("Alexander Brooks,"): bold,
   dark, normal case, in the page's own font. */
.insurance-page .ins-matters-label {
  margin: 0 0 14px;
  color: var(--fin-hero-ink, #0b1530);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.insurance-page .ins-matters-text {
  margin: 0 0 32px;
  color: var(--fin-hero-ink, #0b1530);
  font-size: 21px;
  line-height: 1.5;
}

.insurance-page .ins-matters-link {
  display: inline-flex;
  margin-top: auto;
  align-items: center;
  gap: 6px;
  color: #164bd6;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
}

.insurance-page .ins-matters-link span[aria-hidden="true"] {
  font-size: 20px;
  line-height: 1;
  transition: transform 180ms ease;
}

.insurance-page .ins-matters-link:hover span[aria-hidden="true"],
.insurance-page .ins-matters-link:focus-visible span[aria-hidden="true"] {
  transform: translateX(3px);
}

.insurance-page .ins-matters-link:focus-visible {
  outline: 3px solid #1e5bfa;
  outline-offset: 4px;
  border-radius: 4px;
}

@media (hover: hover) {
  .insurance-page .ins-matters-card:hover {
    box-shadow: 0 18px 40px rgba(30, 91, 250, 0.12);
    transform: translateY(-3px);
  }
}

@media (max-width: 1024px) {
  .insurance-page .ins-matters-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .insurance-page .ins-matters-label {
    font-size: 22px;
  }

  .insurance-page .ins-matters-text {
    font-size: 19px;
  }
}

@media (max-width: 640px) {
  .insurance-page .ins-matters-grid {
    margin-top: 36px;
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .insurance-page .ins-matters-panel {
    min-height: 0;
    padding: 26px 22px 24px;
  }

  .insurance-page .ins-matters-icon {
    margin-bottom: 20px;
  }

  .insurance-page .ins-matters-label {
    font-size: 21px;
  }

  .insurance-page .ins-matters-text {
    margin-bottom: 24px;
    font-size: 18px;
  }
}

/* More capabilities (NBFC Governance stack): show each image whole at
   every width. The shared styles put the image in a fixed-height area
   (or Finance's 1431:1266 frame on tablet/mobile) and crop it to fill;
   here the image area takes the images' own 1980:1476 shape instead, so
   the card's height follows the image and nothing is cut off. */
.insurance-page #more-capabilities .prod-task-capability-panel {
  min-height: 0;
}

.insurance-page #more-capabilities .prod-task-capability-visual {
  width: 100%;
  height: auto;
  min-height: 0;
  padding: 0;
  align-self: center;
  aspect-ratio: 1980 / 1476;
}

.insurance-page #more-capabilities .prod-task-capability-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  object-position: center;
}

@media (max-width: 991.98px) {
  .insurance-page #more-capabilities .prod-task-capability-visual {
    align-self: auto;
    aspect-ratio: 1980 / 1476;
    background: transparent;
  }
}

/* Static cards (capabilities, roles, steps, testimonials): the NBFC module
   card look without the link behaviour. */
.insurance-page .ins-static-card > div,
.insurance-page .ins-static-card > figure {
  display: flex;
  height: 100%;
  margin: 0;
  padding: 30px 28px;
  flex-direction: column;
  background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
  border: 1px solid rgba(30, 91, 250, 0.1);
  border-radius: 20px;
  box-shadow: 0 16px 36px rgba(11, 21, 48, 0.06);
}

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

/* Who it's for: four cards in a row on desktop. */
.insurance-page .ins-roles-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

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

@media (max-width: 560px) {
  .insurance-page .ins-roles-grid {
    grid-template-columns: 1fr;
  }
}

/* Light/deep section rhythm: these two sections take the light gradient
   so they don't sit deep-on-deep next to the other card sections. */
.insurance-page .ins-roles,
.insurance-page .ins-steps {
  background:
    radial-gradient(ellipse 36% 58% at 50% 0%, rgba(110, 166, 255, 0.42) 0%, rgba(150, 192, 255, 0.18) 50%, rgba(150, 192, 255, 0) 100%),
    linear-gradient(180deg, #ebf3ff 0%, #f3f8ff 45%);
}

/* Who it's for, in the four-step card design: four tinted cards in a row
   (blue, orange, green, purple), each with a solid icon tile, a large faded
   step number, the role title and description, and a small white app
   panel at the bottom. Round white arrow buttons sit between the cards.
   A short two-tone rule sits under the heading. Two per row on tablet
   (no arrows), one on mobile. */
.insurance-page .ins-roles-rule {
  display: block;
  width: 110px;
  height: 5px;
  margin: 18px auto 0;
  background: linear-gradient(90deg, #1e5bfa 0 50%, #cfdcf7 50% 100%);
  border-radius: 999px;
}

.insurance-page .ins-roles-steps {
  display: grid;
  margin: 0;
  padding: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 44px;
  counter-reset: none;
  list-style: none;
}

.insurance-page .ins-role-card {
  --role-tone: #1e5bfa;
  --role-tint: #e5eeff;
  --role-number: rgba(30, 91, 250, 0.28);
  position: relative;
  display: flex;
  min-height: 470px;
  padding: 30px 28px 0;
  flex-direction: column;
  overflow: visible;
  background: linear-gradient(180deg, #ffffff 0%, var(--role-tint) 100%);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 26px;
  box-shadow: 0 18px 40px rgba(11, 21, 48, 0.08);
}

.insurance-page .ins-role-card--orange {
  --role-tone: #f56d25;
  --role-tint: #ffe9d8;
  --role-number: rgba(245, 109, 37, 0.32);
}

.insurance-page .ins-role-card--green {
  --role-tone: #16a34a;
  --role-tint: #dcf6e6;
  --role-number: rgba(22, 163, 74, 0.3);
}

.insurance-page .ins-role-card--purple {
  --role-tone: #7c3aed;
  --role-tint: #ece4ff;
  --role-number: rgba(124, 58, 237, 0.3);
}

.insurance-page .ins-role-head {
  display: flex;
  margin-bottom: 22px;
  align-items: flex-start;
  justify-content: space-between;
}

.insurance-page .ins-role-icon {
  display: grid;
  width: 60px;
  height: 60px;
  color: #fff;
  background: var(--role-tone);
  border-radius: 14px;
  box-shadow: 0 10px 22px rgba(11, 21, 48, 0.12);
  place-items: center;
}

.insurance-page .ins-role-icon svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.insurance-page .ins-role-number {
  color: var(--role-number);
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}

.insurance-page .ins-role-card h3 {
  margin: 0 0 10px;
  color: var(--fin-hero-ink, #0b1530);
  font-size: 23px;
  font-weight: 700;
  line-height: 1.25;
}

.insurance-page .ins-role-card > p {
  margin: 0 0 26px;
  color: var(--fin-hero-muted, #4b5568);
  font-size: 16px;
  line-height: 1.55;
}

/* Small illustrative app panel (decorative). */
.insurance-page .ins-role-mock {
  margin-top: auto;
  padding: 18px 18px 14px;
  background: #fff;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -6px 24px rgba(11, 21, 48, 0.06);
}

.insurance-page .ins-role-mock strong {
  display: block;
  margin-bottom: 10px;
  color: var(--fin-hero-ink, #0b1530);
  font-size: 15px;
  font-weight: 700;
}

.insurance-page .ins-role-mock ul {
  display: grid;
  margin: 0;
  padding: 0;
  gap: 8px;
  list-style: none;
}

.insurance-page .ins-role-mock li {
  display: flex;
  padding: 8px 10px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: #f6f8fc;
  border-radius: 10px;
}

.insurance-page .ins-role-mock-label {
  min-width: 0;
  color: var(--fin-hero-ink, #0b1530);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}

.insurance-page .ins-role-mock-label small {
  display: block;
  margin-top: 2px;
  color: #6b7486;
  font-size: 11px;
  font-weight: 500;
}

.insurance-page .ins-role-mock-status {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.insurance-page .ins-role-mock-status--done {
  background: #22c55e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6.5 12.5 3.5 3.5 7.5-8'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.insurance-page .ins-role-mock-status--pending {
  border: 2px solid var(--role-tone);
  background: #fff;
}

/* How it works: each step's illustration (cut from the supplied design)
   sits at the bottom of its card, centred. */
.insurance-page .ins-role-media {
  display: flex;
  margin-top: auto;
  justify-content: center;
}

.insurance-page .ins-role-media img {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  border-radius: 16px 16px 0 0;
}

/* Who it's for and How it works: card height as in the supplied "Four
   Steps" design. Cards are only as tall as their content (no fixed
   minimum), with a compact head, title and text. How it works: each
   illustration is
   centred at the bottom at the reference's share of the card width. The
   phone (step 2) runs to the card's bottom edge; the panels and the map
   keep a small gap below them. The card clips the phone at its edge. */
.insurance-page .ins-roles .ins-role-card {
  min-height: 0;
  padding: 24px 22px 0;
  overflow: visible;
}

.insurance-page .ins-roles .ins-role-head {
  margin-bottom: 16px;
}

.insurance-page .ins-roles .ins-role-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
}

.insurance-page .ins-roles .ins-role-icon svg {
  width: 26px;
  height: 26px;
}

.insurance-page .ins-roles .ins-role-number {
  font-size: 30px;
}

.insurance-page .ins-roles .ins-role-card h3 {
  margin-bottom: 8px;
  font-size: 21px;
}

.insurance-page .ins-roles .ins-role-card > p {
  margin-bottom: 18px;
  font-size: 15px;
  line-height: 1.5;
}

.insurance-page .ins-steps .ins-role-media {
  padding-bottom: 18px;
}

.insurance-page .ins-steps .ins-role-media img {
  width: 74%;
  max-width: none;
  border-radius: 14px;
}

.insurance-page .ins-steps .ins-role-card--orange .ins-role-media {
  padding-bottom: 0;
  overflow: hidden;
  border-radius: 0 0 26px 26px;
}

.insurance-page .ins-steps .ins-role-card--orange .ins-role-media img {
  width: 84%;
  border-radius: 0;
}

.insurance-page .ins-steps .ins-role-card--green .ins-role-media img {
  width: 76%;
}

.insurance-page .ins-steps .ins-role-card--purple .ins-role-media img {
  width: 78%;
}

@media (max-width: 1100px) {
  .insurance-page .ins-steps .ins-role-media img {
    width: 62%;
  }

  .insurance-page .ins-steps .ins-role-card--orange .ins-role-media img {
    width: 70%;
  }
}

@media (max-width: 560px) {
  .insurance-page .ins-steps .ins-role-media img,
  .insurance-page .ins-steps .ins-role-card--orange .ins-role-media img {
    width: 78%;
  }
}

/* Who it's for: the app panel floats inside the bottom of the card like
   the reference's Add Team / Live Activity panels (rounded on all sides,
   a little narrower than the card, small gap below), with tighter rows. */
.insurance-page .ins-roles .ins-role-mock {
  width: 86%;
  margin: auto auto 18px;
  padding: 14px 14px 12px;
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(11, 21, 48, 0.08);
}

.insurance-page .ins-roles .ins-role-mock strong {
  margin-bottom: 8px;
  font-size: 14px;
}

.insurance-page .ins-roles .ins-role-mock ul {
  gap: 6px;
}

.insurance-page .ins-roles .ins-role-mock li {
  padding: 6px 8px;
}

.insurance-page .ins-roles .ins-role-mock-label {
  font-size: 12px;
}

/* Arrow between cards, centred in the gap. */
.insurance-page .ins-role-arrow {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: -22px;
  display: grid;
  width: 44px;
  height: 44px;
  color: #1e5bfa;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 8px 20px rgba(11, 21, 48, 0.12);
  place-items: center;
  transform: translate(50%, -50%);
}

.insurance-page .ins-role-arrow svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 1240px) {
  .insurance-page .ins-roles-steps {
    gap: 36px;
  }

  .insurance-page .ins-role-card {
    padding: 26px 22px 0;
  }

  .insurance-page .ins-role-card h3 {
    font-size: 21px;
  }

  .insurance-page .ins-role-arrow {
    right: -18px;
    width: 38px;
    height: 38px;
  }
}

@media (max-width: 1100px) {
  .insurance-page .ins-roles-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }

  .insurance-page .ins-role-arrow {
    display: none;
  }
}

@media (max-width: 560px) {
  .insurance-page .ins-roles-steps {
    grid-template-columns: 1fr;
  }

  .insurance-page .ins-role-card {
    min-height: 0;
  }
}

/* How it works: icon with the step number beside it. */
.insurance-page .ins-step-head {
  display: flex;
  margin-bottom: 18px;
  align-items: center;
  justify-content: space-between;
}

.insurance-page .ins-step-head .nbfc-module-icon {
  margin-bottom: 0;
}

.insurance-page .ins-step-number {
  color: rgba(30, 91, 250, 0.22);
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}

/* Why insurance companies choose TrackOlap: the Finance page's
   "Microfinance Spotlight" expanding cards (finances.css styles apply via
   the shared finances-page class). Finance has four cards; this section
   has six, so on desktop the closed strips are narrower (112px) to leave
   the open card enough room, cards 5 and 6 get their own theme colours,
   and the stacked mobile cards continue the step offset. */
@media (min-width: 1025px) {
  .insurance-page .ins-why .attendance-workforce-solution {
    flex-basis: 112px;
    width: 112px;
  }

  .insurance-page .ins-why .attendance-workforce-solution.is-active {
    flex-basis: calc(100% - 620px);
    width: calc(100% - 620px);
  }

  .insurance-page .ins-why .attendance-workforce-solution-collapsed-title {
    font-size: 17px;
  }

  .insurance-page .ins-why .attendance-workforce-solution-visual {
    width: 112px;
  }

  .insurance-page .ins-why .attendance-workforce-solution.is-active .attendance-workforce-solution-visual {
    width: 50%;
  }
}

/* Why TrackOlap: larger pictures in the open card. The image area takes
   more of the card (the text column narrows a little to make room) with
   almost no padding, anchored bottom-right as before; tablet and phone get
   larger image areas too. */
@media (min-width: 1025px) {
  .insurance-page .ins-why .attendance-workforce-solution-copy {
    width: 42%;
  }

  .insurance-page .ins-why .attendance-workforce-solution.is-active .attendance-workforce-solution-visual {
    width: 58%;
    padding: 14px 10px 0 0;
  }
}

@media (min-width: 701px) and (max-width: 1024px) {
  .insurance-page .ins-why .attendance-workforce-solution-copy,
  .insurance-page .ins-why .attendance-workforce-solution.is-active .attendance-workforce-solution-copy {
    width: 48%;
  }

  .insurance-page .ins-why .attendance-workforce-solution-visual,
  .insurance-page .ins-why .attendance-workforce-solution.is-active .attendance-workforce-solution-visual {
    width: 54%;
    padding: 14px 10px 0 0;
  }
}

@media (max-width: 700px) {
  .insurance-page .ins-why .attendance-workforce-solution-copy,
  .insurance-page .ins-why .attendance-workforce-solution.is-active .attendance-workforce-solution-copy {
    padding-bottom: 330px;
  }

  .insurance-page .ins-why .attendance-workforce-solution-visual,
  .insurance-page .ins-why .attendance-workforce-solution.is-active .attendance-workforce-solution-visual {
    width: 100%;
    height: 320px;
    padding: 10px 8px 0;
  }
}

/* Why TrackOlap: no gap under the picture. The image sits flush on the
   card's bottom edge and runs a few pixels past it (the card clips it), so
   any transparent margin at the foot of the artwork and the shared drop
   shadow can't leave a strip of card colour below the image. */
.insurance-page .ins-why .attendance-workforce-solution-visual,
.insurance-page .ins-why .attendance-workforce-solution.is-active .attendance-workforce-solution-visual {
  bottom: -14px;
  padding-bottom: 0;
}

.insurance-page .ins-why .attendance-workforce-solution-visual img {
  object-position: right bottom;
  filter: none;
}

/* Why TrackOlap: the app-panel pictures (Odometer, Verified visit, Your
   forms, Reports - cards 2, 3, 5 and 6) sit centred in their image area
   with even space around them, instead of resting on the card's bottom
   edge and being clipped there. The people photos (cards 1 and 4) keep
   the bottom-right, edge-to-edge placement. */
.insurance-page .ins-why .attendance-workforce-solution:nth-child(2) .attendance-workforce-solution-visual,
.insurance-page .ins-why .attendance-workforce-solution:nth-child(3) .attendance-workforce-solution-visual,
.insurance-page .ins-why .attendance-workforce-solution:nth-child(5) .attendance-workforce-solution-visual,
.insurance-page .ins-why .attendance-workforce-solution:nth-child(6) .attendance-workforce-solution-visual {
  bottom: 0;
  padding: 24px 24px 24px 0;
}

.insurance-page .ins-why .attendance-workforce-solution:nth-child(2) .attendance-workforce-solution-visual img,
.insurance-page .ins-why .attendance-workforce-solution:nth-child(3) .attendance-workforce-solution-visual img,
.insurance-page .ins-why .attendance-workforce-solution:nth-child(5) .attendance-workforce-solution-visual img,
.insurance-page .ins-why .attendance-workforce-solution:nth-child(6) .attendance-workforce-solution-visual img {
  object-position: center;
}

@media (max-width: 700px) {
  .insurance-page .ins-why .attendance-workforce-solution:nth-child(2) .attendance-workforce-solution-visual,
  .insurance-page .ins-why .attendance-workforce-solution:nth-child(3) .attendance-workforce-solution-visual,
  .insurance-page .ins-why .attendance-workforce-solution:nth-child(5) .attendance-workforce-solution-visual,
  .insurance-page .ins-why .attendance-workforce-solution:nth-child(6) .attendance-workforce-solution-visual {
    padding: 16px 16px 20px;
  }
}

.insurance-page .ins-why .attendance-workforce-solution:nth-child(5) {
  background: linear-gradient(110deg, #c2410c 0%, #f56d25 60%, #ff8a4c 100%);
}

.insurance-page .ins-why .attendance-workforce-solution:nth-child(6) {
  background: linear-gradient(110deg, #0b2a8f 0%, #164bd6 100%);
}

@media (max-width: 1024px) {
  .insurance-page .ins-why .attendance-workforce-solution:nth-child(5) { --mfi-i: 4; }
  .insurance-page .ins-why .attendance-workforce-solution:nth-child(6) { --mfi-i: 5; }
}

/* CTA band: the secondary "Email Us" action under the intro. */
.insurance-page .fin-cta-form-copy > .ins-cta-email {
  margin-top: 22px;
}

.insurance-page .ins-cta-email a {
  display: inline-flex;
  flex-wrap: wrap;
  padding: 10px 20px;
  align-items: center;
  gap: 6px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 200ms ease, border-color 200ms ease;
}

.insurance-page .ins-cta-email a span {
  font-weight: 500;
  opacity: 0.9;
}

.insurance-page .ins-cta-email a:hover,
.insurance-page .ins-cta-email a:focus-visible {
  background: rgba(255, 255, 255, 0.14);
  border-color: #fff;
}

.insurance-page .ins-cta-email a:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

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

.insurance-page .ins-blogs .nbfc-module-card h3 {
  margin-bottom: 20px;
  font-size: 19px;
}

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

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

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

/* Related blogs intro: one line on desktop instead of wrapping to the
   heading width; wraps normally on smaller screens. */
@media (min-width: 761px) {
  .insurance-page .ins-blogs .nbfc-modules-heading p:not(.fin-section-tag) {
    width: auto;
    min-width: 0;
    max-width: none;
    white-space: nowrap;
  }
}

/* Hero heading: the NBFC heading size (clamp(34px, 4.6vw, 68px), from
   nbfc-field-force-management.css, applies unchanged) in the NBFC format:
   "Insurance Field Force Software" / "Verifies Every" + the looping word
   (Visit, KM, Attendance, Task, Claim Survey) on the second line. The copy column is a little wider than NBFC's
   so the first line stays on one line on desktop. */
@media (min-width: 1000px) {
  .insurance-page .fin-hero-center .prod-hero-copy {
    max-width: 1320px;
  }
}

@media (min-width: 1000px) {
  .insurance-page .fin-hero-center .ins-hero-loop-line {
    white-space: nowrap;
  }
}

/* Get started cards: the NBFC rule keeps titles on one line at >=1280px,
   which pushes "Talk to an Insurance Specialist" past the card edge. Let
   titles wrap inside the card on this page. */
.insurance-page .crm-get-started-card {
  min-width: 0;
}

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

/* How it works: no icon tile, so the step number sits alone at the top
   right with less space under it. */
.insurance-page .ins-steps .ins-role-head {
  margin-bottom: 8px;
  justify-content: flex-end;
}