/* Overview devices: the app on a phone standing in front of the monitor's stand, lower right, so the
   software's sidebar and import area stay visible; both share one baseline. The monitor's neck meets the
   bottom of its frame, and all stand sizes follow the monitor width (cqi) so the parts stay joined at
   every size. The stage is 1.5206 : 1 (the monitor sets its height), which the overview height rule uses. */
body.pf-system.pf-unified[data-portfolio='wecare'] .pf-overview-wecare .pf-overview-media { --pf-media-ratio: 1.5206; }
body.pf-system.pf-unified[data-portfolio='wecare'] .wc-stage { position: relative; }
body.pf-system.pf-unified[data-portfolio='wecare'] .wc-stage-software { width: 96%; margin-left: 0; }
body.pf-system.pf-unified[data-portfolio='wecare'] .wc-stage-app { position: absolute; right: 18%; bottom: 0; z-index: 2; width: 24%; }
body.pf-system.pf-unified[data-portfolio='wecare'] .wc-phone {
  position: relative; padding: 3.4%; line-height: 0; border-radius: 12.1% / 5.8%;
  background: linear-gradient(150deg, #3d3348, #1f1a26 60%, #2c2535);
  box-shadow: inset 0 0 0 1px #5d4f6e, inset 0 0 0 3px #16121b, 0 30px 44px -18px rgba(40,29,53,.5);
}
body.pf-system.pf-unified[data-portfolio='wecare'] .wc-phone img { display: block; width: 100%; height: auto; }
body.pf-system.pf-unified[data-portfolio='wecare'] .wc-monitor { position: relative; container-type: inline-size; padding-bottom: 11%; line-height: 0; }
body.pf-system.pf-unified[data-portfolio='wecare'] .wc-monitor-screen {
  position: relative; padding: 1.4cqi; border-radius: 2.2cqi;
  background: linear-gradient(180deg, #352c40, #211b29);
  box-shadow: inset 0 0 0 1px #5d4f6e, inset 0 1px 0 rgba(255,255,255,.16), 0 32px 60px -28px rgba(40,29,53,.5);
}
body.pf-system.pf-unified[data-portfolio='wecare'] .wc-monitor-screen img { display: block; width: 100%; height: auto; border-radius: .5cqi; }
/* Neck: joined to the frame's lower edge and widening slightly toward the base. */
body.pf-system.pf-unified[data-portfolio='wecare'] .wc-monitor-screen::after {
  content: ''; position: absolute; top: 100%; left: 50%; width: 12cqi; height: 9cqi; transform: translateX(-50%);
  clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%);
  background: linear-gradient(90deg, #3d3348, #6e5f85 50%, #3d3348);
}
/* Base: a flat foot directly under the neck. */
body.pf-system.pf-unified[data-portfolio='wecare'] .wc-monitor-screen::before {
  content: ''; position: absolute; top: calc(100% + 9cqi); left: 50%; width: 36cqi; height: 2cqi; transform: translateX(-50%);
  border-radius: 1cqi 1cqi .7cqi .7cqi; background: linear-gradient(180deg, #8a7aa6, #4a3d5c);
  box-shadow: 0 1.4cqi 2.4cqi -1cqi rgba(40,29,53,.4);
}
/* Goal-flow captions sit centered under their phones. */
body.pf-system.pf-unified[data-portfolio='wecare'] #interaction-design .goal-details .detail figcaption { text-align: center; max-width: 310px; margin-inline: auto; }
body.pf-system.pf-unified[data-portfolio='wecare'] #interaction-design .goal-details .detail figcaption > * { display: block; }