/* ============================================================
   MODEL SHOWCASE — real photo (hired model, nursing student
   scanning her own notes), paired with descriptive copy.
   Sits between the hero and the Features section.
   ============================================================ */

.rt-model-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: center;
}

.rt-model-text { max-width: 460px; }

.rt-model-title {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 34px);
  margin-bottom: 16px;
  text-align: left;
}

.rt-model-copy {
  font-size: 15px;
  line-height: 1.65;
  color: rgba(251, 249, 255, 0.72);
  margin-bottom: 26px;
}

/* ── The photo, framed as a standing capsule/cylinder ────────
   Setting border-radius to exactly half the frame's width forces
   the top and bottom edges into full semicircles while the sides
   stay straight — a true capsule silhouette, not just a rounded
   rectangle. */
.rt-model-visual {
  position: relative;
  display: flex;
  justify-content: center;
}

.rt-model-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 380px;
  height: 480px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(148, 0, 211, 0.45) 0%, rgba(212, 162, 76, 0.12) 55%, transparent 75%);
  filter: blur(18px);
  z-index: 0;
}

.rt-model-frame {
  position: relative;
  z-index: 1;
  width: 300px;
  height: 420px;
  border-radius: 150px; /* = half of width — creates the capsule caps */
  overflow: hidden;
  border: 3px solid rgba(212, 162, 76, 0.55);
  box-shadow:
    0 30px 70px -20px rgba(148, 0, 211, 0.5),
    0 0 0 8px rgba(251, 249, 255, 0.04);
}

.rt-model-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

@media (max-width: 860px) {
  .rt-model-grid {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
  }
  .rt-model-text { max-width: 100%; margin: 0 auto; }
  .rt-model-title { text-align: center; }
  .rt-model-visual { order: -1; }
  .rt-model-frame { width: 240px; height: 340px; border-radius: 120px; }
  .rt-model-glow { width: 300px; height: 380px; }
}