/* Page-specific styles for solution-healthcare-hospital-patient */
/* Add overrides here — never edit compat.css for page-specific changes */

/* ---------- "Who Can Benefit From Our Bot?" ----------
   Two separate compat.css rules were fighting this block's markup, which is
   just: icon + (title above description).

   1. compat.css turns .feature-content into an auto-fit grid
      (repeat(auto-fit, minmax(250px, 1fr))). That's right where
      .feature-content wraps a set of cards, but here it holds exactly two
      children - the title and its description - so the grid dealt them into
      two side-by-side columns: every title sat in a narrow left column with
      its own paragraph stranded in a column to the right.
   2. compat.css gives .feature-item flex-direction:row + gap, but never
      display:flex, so those had nothing to act on and the star icon stacked
      on its own line above the title instead of sitting beside it. */
.feature-item .feature-content {
  display: block;
}

.feature-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 1.5rem;
}

/* compat.css centres the icon against its row. These descriptions run several
   lines, so centring dropped the icon to the middle of the paragraph - it
   belongs on the title's line. */
.feature-item > img {
  align-self: flex-start;
  margin-top: .15rem;
}

.feature-item .feature-desc {
  margin-top: .35rem;
}

/* compat.css shifts `star` art by +94deg to pull green source icons into the
   brand teal. This page's star is blue (46,141,255 - hue ~213), so the same
   +94deg landed it on magenta - the pink sparkles. -31deg takes this one to
   teal instead. Scoped to these icons so nothing else on the page moves. */
.feature-item img[src*="star"] {
  filter: hue-rotate(-31deg) saturate(1.05);
}

/* The girl-with-phone photo rendered at 201x300 inside a 612px column, which
   is what left this section looking lopsided. Same accidental substring match
   as elsewhere in this codebase: compat.css caps images inside anything named
   "*-item*" to max-height:300px, and this row carries Bootstrap's
   align-items-center - which contains the literal text "-item". That cap
   (specificity 0,2,2) also outranks .image-feature img's own max-height:380px
   (0,1,1), so it won. !important clears both; the photo keeps its 482x719
   aspect and is centred in its column. */
.image-feature img {
  width: auto !important;
  height: auto !important;
  max-width: 100%;
  max-height: 560px !important;
  object-fit: contain;
  margin-inline: auto;
}

/* "What Customer say" is a centred heading, but .small-hr is margin:.9rem 0 -
   flush left - so its teal rule sat off at the far left of the section
   instead of under the title. Only this section's heading is centred; the
   left-aligned ones elsewhere on the page keep their flush-left rule. */
.testimonials .small-hr {
  margin-inline: auto;
}

/* ---------- FAQ ----------
   .faq-item / .faq-question / .faq-answer have no rules at all in
   compat.css, so questions and answers rendered as one undifferentiated
   run of body text with no separation between entries. (The dropdown arrow
   bitmap is deliberately hidden by compat.css, so the question carries no
   affordance either - these are static Q&A, not a working accordion.)
   Give the list real structure: a rule between entries, the question as the
   heading it is, the answer as secondary text under it. */
.faq-item {
  border-top: 1px solid var(--line) !important;
  padding-block: 1.1rem;
}

.faq-item:last-of-type {
  border-bottom: 1px solid var(--line);
}

.faq-question {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--navy);
  line-height: 1.4;
}

.faq-answer {
  margin-top: .45rem;
  color: var(--slate);
  max-width: 80ch;
}