/* Illustrative preparation examples: no live status, connected access or people. */
.mosaeli-families .families-moments { background: #fbfcff; padding-block: 56px; }
.families-moments .section-intro { margin-bottom: 24px; }
.families-moments .section-intro .eyebrow { margin-bottom: 10px; }
.moments-illustrative-label { display: block; margin-top: 8px; font-size: 12px; color: #6a7990; }
.mosaeli-families .moments-grid .feature {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  align-items: center;
  gap: 80px;
  margin: 0;
  padding: 28px 0;
  border: 0;
  border-top: 1px solid #e0e6ef;
  border-radius: 0;
  background: transparent;
}
.mosaeli-families .moments-grid .feature h3 { font-size: 1.65rem; margin-bottom: 18px; }
.mosaeli-families .moments-grid .feature h3::before { display: none; }
.mosaeli-families .moments-grid .feature h3 span { display: block; font-size: .85rem; color: #3865c5; margin-bottom: 10px; }
.mosaeli-families .moments-grid .feature:nth-child(2) h3 span { color: #8552b9; }
.mosaeli-families .moments-grid .feature:nth-child(3) h3 span { color: #258365; }
.mosaeli-families .moments-grid .feature:nth-child(4) h3 span { color: #98700b; }
.mosaeli-families .moment-copy > p { max-width: 43ch; font-size: 1rem; line-height: 1.8; }
.moment-visual {
  position: relative;
  min-width: 0;
  height: 280px;
  border-radius: 24px;
  background: #edf3ff;
  overflow: hidden;
  isolation: isolate;
}
.moment-note { position: absolute; width: 71%; padding: 19px 21px; border: 1px solid #e4e9f4; border-radius: 15px; background: #fff; box-shadow: 0 17px 32px -20px #1c39665e; }
.observation-note { top: 24px; left: 24px; }
.question-note { top: 130px; right: 23px; }
.moment-note-label { display: flex; gap: 7px; align-items: center; font-size: 11px; font-weight: 700; color: #436196; margin-bottom: 9px; }
.moment-note-label i { height: 7px; width: 7px; background: #477aeb; border-radius: 50%; }
.question-note .moment-note-label { color: #7a4aa7; }
.question-note .moment-note-label i { background: #9164ca; }
.mosaeli-families .moment-visual .moment-note p { font-size: 12px; line-height: 1.65; margin: 0; color: #4b5c76; max-width: none; }
.moment-caption { position: absolute; left: 24px; bottom: 15px; font-size: 10px; color: #587196; }
.moment-after { background: #f2effa; display: grid; place-items: center; }
.conversation-record { background: #fff; width: 82%; padding: 19px 20px; border: 1px solid #e6dff1; border-radius: 17px; box-shadow: 0 20px 36px -24px #52327b5e; }
.record-heading { display: flex; align-items: center; gap: 9px; padding-bottom: 15px; border-bottom: 1px solid #eeebf4; margin-bottom: 7px; font-size: 12px; color: #514368; }
.record-icon { width: 17px; height: 19px; border: 1.5px solid #9b83ba; border-radius: 4px; }
.record-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; font-size: 12px; color: #5e5770; }
.record-row i { flex: 0 0 8px; height: 8px; border: 1px solid #ac9bbf; border-radius: 50%; position: relative; }
.record-row:not(:last-child) i::after { content: ""; position: absolute; top: 9px; left: 3px; height: 24px; border-left: 1px solid #e0d7ec; }
.chosen-step { color: #714da0; font-weight: 700; }
.chosen-step i { background: #9265c1; border-color: #9265c1; }
.moment-between { background: #eaf6f1; }
.context-label { position: absolute; top: 22px; font-size: 11px; font-weight: 700; color: #3d745f; padding: 8px 15px; border: 1px solid #cde4d8; border-radius: 8px; background: #f8fcfa; }
.context-home { left: 26px; }
.context-school { right: 26px; }
.context-label::after { content: ""; position: absolute; top: 34px; width: 1px; height: 33px; background: #bbdaca; }
.context-home::after { left: 50%; }
.context-school::after { right: 50%; }
.conversation-bridge { position: absolute; left: 14%; right: 14%; top: 81px; padding: 18px 21px; border: 1px solid #d5e6dd; border-radius: 15px; background: #fff; box-shadow: 0 20px 30px -23px #24533e61; }
.bridge-label { display: block; font-size: 11px; font-weight: 700; color: #366d56; margin-bottom: 10px; }
.conversation-bridge > div { display: flex; gap: 9px; align-items: center; padding: 9px 0; font-size: 12px; color: #526b60; }
.conversation-bridge i { width: 5px; height: 5px; border-radius: 50%; background: #8cb7a2; }
.moment-caregiver { background: #f8f3e9; display: grid; place-items: center; }
.handoff-preview { width: 82%; background: #fff; padding: 19px 20px; border: 1px solid #ebe1ce; border-radius: 16px; box-shadow: 0 20px 30px -25px #65512766; }
.handoff-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; font-size: 12px; color: #786342; }
.handoff-heading > span { color: #bb994c; font-size: 18px; }
.handoff-detail { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid #efe9dc; border-radius: 7px; margin-bottom: 7px; color: #736a58; font-size: 12px; }
.handoff-detail i { width: 11px; height: 13px; border: 1px solid #b7a98d; border-radius: 2px; }
.mosaeli-families .moment-visual .handoff-preview p { font-size: 10px; line-height: 1.6; color: #817354; padding-top: 6px; margin: 0; }
@media (max-width: 1100px) {
  .mosaeli-families .moments-grid .feature { gap: 40px; }
  .moment-note { width: 78%; padding: 16px; }
  .observation-note { left: 18px; }
  .question-note { right: 18px; top: 136px; }
  .moment-caption { font-size: 9px; left: 18px; }
}
@media (max-width: 760px) {
  .mosaeli-families .families-moments { padding-block: 40px; }
  .families-moments .section-intro { margin-bottom: 20px; }
  .mosaeli-families .moments-grid .feature { grid-template-columns: 1fr; gap: 20px; padding: 24px 0; }
  .mosaeli-families .moments-grid .feature h3 { font-size: 1.5rem; margin-bottom: 15px; }
  .mosaeli-families .moment-copy > p { font-size: 1rem; max-width: none; }
  .moment-visual { width: 100%; max-width: 500px; justify-self: center; height: 292px; border-radius: 20px; }
  .moment-note { width: 84%; padding: 16px; }
  .observation-note { top: 22px; left: 13px; }
  .question-note { top: 139px; right: 13px; }
  .moment-caption { left: 14px; bottom: 13px; }
  .conversation-record, .handoff-preview { width: 89%; padding: 19px; }
  .conversation-bridge { left: 8%; right: 8%; top: 87px; }
  .context-home { left: 22px; }
  .context-school { right: 22px; }
}