/* ============================================================
   Infographic / illustrated feature sections
   Brand: #802a8f (purple) · #4d1257 (dark violet) · Poppins
   rem is viewport-based (html: 5.31vw mobile / 2.76vw desktop)
   ============================================================ */

.info-section {
  width: 100%;
  padding: 1.8rem 1.09rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.info-section__inner {
  width: 100%;
  max-width: 34rem;
  margin: 0 auto;
}

.info-section__eyebrow {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0f9b8e;
  margin: 0 0 0.4rem 0;
}

.info-section__title {
  font-size: 1.36rem;
  font-weight: 700;
  line-height: 120%;
  color: var(--dark-violet, #4d1257);
  margin: 0 0 0.5rem 0;
}

.info-section__title span {
  color: var(--brandColor, #802a8f);
}

.info-section__lead {
  font-size: 0.72rem;
  line-height: 160%;
  color: #5c575e;
  max-width: 30rem;
  margin: 0 auto 1.1rem auto;
}

.info-figure {
  width: 100%;
  border-radius: 0.7rem;
  overflow: hidden;
  box-shadow: 0 0.35rem 1.2rem rgba(77, 18, 87, 0.12);
  background: #f7f2fa;
}

.info-figure img {
  width: 100%;
  height: auto;
  display: block;
}

.info-figure--portrait {
  max-width: 18rem;
  margin: 0 auto;
}

.info-section__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin: 1.15rem auto 0 auto;
  padding: 0.62rem 1.4rem;
  background: var(--brandColor, #802a8f);
  color: #fff;
  border-radius: 2rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 100%;
  text-decoration: none;
  transition: background 0.25s ease, transform 0.2s ease;
}

.info-section__cta:hover {
  background: var(--dark-violet, #4d1257);
  transform: translateY(-2px);
}

/* ---- Second Opinion : split media + panel ---- */
.second-opinion {
  width: 100%;
  padding: 1.8rem 1.09rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.second-opinion__inner {
  width: 100%;
  max-width: 34rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.second-opinion__photo {
  width: 100%;
  border-radius: 0.7rem;
  overflow: hidden;
  box-shadow: 0 0.35rem 1.2rem rgba(77, 18, 87, 0.14);
}

.second-opinion__photo img {
  width: 100%;
  height: auto;
  display: block;
}

.second-opinion__body {
  text-align: center;
}

.second-opinion__body h2 {
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 122%;
  color: var(--dark-violet, #4d1257);
  margin: 0 0 0.5rem 0;
}

.second-opinion__body h2 span {
  color: var(--brandColor, #802a8f);
}

.second-opinion__body p {
  font-size: 0.72rem;
  line-height: 160%;
  color: #5c575e;
  margin: 0 auto 0.9rem auto;
  max-width: 30rem;
}

.second-opinion__points {
  list-style: none;
  margin: 0 auto 1rem auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-align: left;
  max-width: 22rem;
}

.second-opinion__points li {
  position: relative;
  padding-left: 1.35rem;
  font-size: 0.7rem;
  line-height: 150%;
  color: #2d2d2d;
}

.second-opinion__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15rem;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  background: #0f9b8e url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center / 0.55rem no-repeat;
}

.second-opinion__figure {
  width: 100%;
  border-radius: 0.7rem;
  overflow: hidden;
  box-shadow: 0 0.35rem 1.2rem rgba(77, 18, 87, 0.12);
}

.second-opinion__figure img {
  width: 100%;
  height: auto;
  display: block;
}

/* ---- inline visuals inside existing sections ---- */
.network-map-figure {
  width: 100%;
  max-width: 34rem;
  margin: 0 auto 1.4rem auto;
  border-radius: 0.7rem;
  overflow: hidden;
  box-shadow: 0 0.35rem 1.2rem rgba(77, 18, 87, 0.12);
}

.network-map-figure img {
  width: 100%;
  height: auto;
  display: block;
}

.cancer-body-figure {
  width: 100%;
  max-width: 15rem;
  margin: 0.4rem auto 1.4rem auto;
}

.cancer-body-figure img {
  width: 100%;
  height: auto;
  display: block;
}

/* ============================================================
   Desktop
   ============================================================ */
@media screen and (min-width: 768px) {
  .info-section {
    padding: 1.6rem 1.88rem;
  }

  .info-section__title {
    font-size: 0.95rem;
  }

  .info-section__eyebrow {
    font-size: 0.34rem;
  }

  .info-section__lead {
    font-size: 0.4rem;
    max-width: 24rem;
  }

  .info-section__cta {
    font-size: 0.42rem;
    padding: 0.42rem 1rem;
    margin-top: 0.9rem;
  }

  .info-figure--portrait {
    max-width: 13rem;
  }

  /* Second opinion becomes a two-column band on desktop */
  .second-opinion__inner {
    max-width: 34rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "photo body"
      "figure figure";
    gap: 0.9rem 1.1rem;
    align-items: center;
  }

  .second-opinion__photo { grid-area: photo; }
  .second-opinion__body  { grid-area: body; text-align: left; }
  .second-opinion__figure { grid-area: figure; }

  .second-opinion__body h2 { font-size: 0.85rem; }
  .second-opinion__body p { font-size: 0.4rem; margin-left: 0; }
  .second-opinion__points { margin-left: 0; font-size: 0.36rem; }
  .second-opinion__points li { font-size: 0.36rem; }

  .cancer-body-figure { max-width: 11rem; }
}