/* One shared state keeps the gaze and the two learning options in sync. */
.comfort-scene {
  position: relative;
  width: min(100%, 900px);
  aspect-ratio: 900 / 480;
  margin: -25px auto 0;
  isolation: isolate;
  pointer-events: none;
}
.comfort-scene::before {
  content: "";
  position: absolute;
  inset: 10% 5% 0;
  z-index: -1;
  background: radial-gradient(ellipse at 50% 60%, #e4effb 0, #eef5f9 35%, transparent 70%);
}
.comfort-woman {
  position: absolute;
  width: 66%;
  aspect-ratio: 1;
  top: -8px;
  left: 17%;
  mask-image: linear-gradient(#000 0 66%, transparent 91%);
  -webkit-mask-image: linear-gradient(#000 0 66%, transparent 91%);
}
.comfort-woman img {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity .14s ease-in-out;
}
.comfort-woman-right { opacity: 0; }
.comfort-scene.is-coaching .comfort-woman-left { opacity: 0; }
.comfort-scene.is-coaching .comfort-woman-right { opacity: 1; }
.comfort-option {
  position: absolute;
  top: 16%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 14px 12px;
  border: 1px solid #ffffff;
  border-radius: 25px;
  background: linear-gradient(145deg, #ffffffed, #e8f2fcdd);
  box-shadow: 0 12px 35px #7c9ac526, inset 0 1px 0 #fff;
  color: #38658e;
  transform: translateX(-50%);
  transform-origin: center bottom;
  transition: opacity .6s ease, filter .6s ease, transform .6s ease, box-shadow .6s ease;
}
.comfort-video { left: 22%; width: 24%; }
.comfort-coaching { left: 78%; width: 26%; }
.comfort-option > span {
  font: 700 clamp(11px, 1.4vw, 15px)/1.4 var(--sans);
  white-space: nowrap;
}
.comfort-play { display: block; width: 94px; height: 84px; }
.comfort-coaching img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; }
.comfort-scene:not(.is-coaching) .comfort-coaching,
.comfort-scene.is-coaching .comfort-video {
  opacity: .35;
  filter: blur(1.2px) saturate(.7);
  transform: translateX(-50%) translateY(7px) scale(.94);
  box-shadow: 0 6px 20px #7c9ac510;
}
.learning-options .section-heading {
  position: relative;
  z-index: 1;
  margin-top: -88px;
}
.learning-options .section-heading h2 { position: relative; }
@media (max-width: 640px) {
  .comfort-scene { height: clamp(270px, 80vw, 420px); aspect-ratio: auto; margin-top: -15px; }
  .comfort-woman { width: 90%; left: 5%; top: 38px; }
  .comfort-option { top: 44px; gap: 5px; padding: 8px 7px; border-radius: 17px; }
  .comfort-video { left: 17%; width: 30%; }
  .comfort-coaching { left: 83%; width: 32%; }
  .comfort-play { width: 58px; height: 58px; max-width: 100%; }
  .comfort-option > span { font-size: clamp(10px, 2.7vw, 13px); }
  .learning-options .section-heading { margin-top: -50px; }
}
@media (prefers-reduced-motion: reduce) {
  .comfort-woman img, .comfort-option { transition: none; }
  .comfort-scene .comfort-option { opacity: 1 !important; filter: none !important; transform: translateX(-50%) !important; }
}