/* Limited photo treatment. Original shared CSS, page structure, Device makers,
   navigation, background, landing film, loading, popups and ECG are unchanged. */
#system .pack-cards .card {
  display: grid;
  grid-template-columns: 118px minmax(0,1fr);
  gap: 0 18px;
  padding: 18px !important;
  background: rgba(255,255,255,.58) !important;
  border: 1px solid rgba(24,63,73,.07) !important;
  border-radius: 20px !important;
}
#system .pack-photo {
  display: block; grid-column: 1; grid-row: 1 / 3;
  width: 118px; height: 138px; object-fit: cover; border-radius: 13px;
  align-self: center;
}
#system .pack-cards h3 { grid-column: 2; font-size: 1.55rem; line-height: 1.15; margin: 0 0 8px; }
#system .pack-cards .card p { grid-column: 2; font-size: .95rem; line-height: 1.55; margin: 0; }
#system .pack-photo[src$="personal-health.jpg"] { object-position: 76% 45%; }
#system .pack-photo[src$="remote-consultation.jpg"] { object-position: 50% 35%; }
#system .pack-photo[src$="wearable-tracking.jpg"] { object-position: 44% 50%; }
#system .pack-photo[src$="family-support.jpg"] { object-position: 48% 42%; }
/* The introduction inherits the original centered typography. No picture or
   pseudo-element is attached to .about-head. */
.moment-photo {
  display: block; width: 100%; aspect-ratio: 16 / 9;
  height: auto; object-fit: cover; margin: 0 0 20px; border-radius: 16px;
}
.moment-photo[src$="clinical-workspace.jpg"] { object-position: center 35%; }
.moment-photo[src$="care-records.jpg"] { object-position: center 50%; }
.vision-points article { overflow: hidden; }
.vision-photo {
  display: block; width: calc(100% + 32px); max-width: none;
  height: 160px; object-fit: cover; margin: -16px -16px 16px;
}
.vision-photo[src$="monitoring-at-home.jpg"] { object-position: center 43%; }
.vision-photo[src$="before-the-visit.jpg"] { object-position: center 38%; }
@media (min-width: 761px) and (max-width: 1100px) {
  #system .pack-cards .card { grid-template-columns: 86px minmax(0,1fr); gap: 0 12px; padding: 14px !important; }
  #system .pack-photo { width: 86px; height: 120px; }
}
@media (max-width: 760px) {
  /* All package descriptions stay visible, with real photographic thumbnails. */
  #system { padding: 26px 0; }
  #system .pack-stage { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 8px; min-height: 0; }
  #system .pack-slide, #system .pack-slide.is-on { display: contents; }
  #system .pack-cards { grid-column: 1 / -1; order: 0; padding: 0; gap: 10px; }
  #system .pack-slide .who { display: none; }
  #system .pack-slide:first-child .who { display: block; order: 10; width: 100%; height: 150px; object-fit: contain; object-position: center bottom; }
  #system .pack-dots { display: none; }
  #system .pack-cards .card { grid-template-columns: 80px minmax(0,1fr); gap: 0 12px; padding: 12px !important; border-radius: 16px !important; }
  #system .pack-photo { width: 80px; height: 100px; border-radius: 10px; }
  #system .pack-cards h3 { font-size: 1.28rem; margin-bottom: 6px; }
  #system .pack-cards .card p { font-size: .89rem; line-height: 1.5; }
  .moment-photo { border-radius: 12px; margin-bottom: 16px; }
  /* Keep the native vertical story and original moving pulse positioning. */
  .vision-points article { display: grid; grid-template-columns: 88px minmax(0,1fr); gap: 0 12px; padding: 12px; border-radius: 16px; }
  .vision-photo { grid-column: 1; grid-row: 1 / 3; width: 88px; height: 112px; max-width: 100%; margin: 0; border-radius: 10px; align-self: center; }
  .vision-points h3 { grid-column: 2; font-size: 1.3rem; }
  .vision-points p { grid-column: 2; font-size: .88rem; line-height: 1.5; }
}