/* Native connected-system and calendar artwork from demos 01 and 07.
 * The parent supplies font tokens, stage scaling, motion primitives and fallback.
 * Phone compositions retain the current page's 358px-wide artwork at 700px.
 */

/* Connected system */
.marketing-ops .mo-animation .viz-system .viz-stage {color: #1e1e1e; font-family: var(--font-sans); font-weight: var(--w-neutral);}
.marketing-ops .mo-animation .viz-system .viz-stage > * {position: absolute;}
.marketing-ops .mo-animation .viz-system p {white-space: nowrap;}
.marketing-ops .mo-animation .viz-system .sy-kicker {font-family: var(--font-mono); font-weight: 400; font-size: 11.66px; line-height: 14.575px;}
.marketing-ops .mo-animation .viz-system .sy-title {font-size: 23.32px; line-height: 29.149px; letter-spacing: .9716px; text-transform: uppercase;}
.marketing-ops .mo-animation .viz-system .sy-sq {display: block; width: 9.716px; height: 9.716px; background: #e4f2b3;}
.marketing-ops .mo-animation .viz-system .sy-number {font-variant-numeric: tabular-nums;}
.marketing-ops .mo-animation .viz-system .sy-tag {left: 22px; top: 64.07px; width: 216.09px; height: 84.866px; padding: 15.546px; display: flex; flex-direction: column; gap: 7.773px; background: #e4f2b3; border-radius: 3.887px;}
.marketing-ops .mo-animation .viz-system .sy-portal {left: 37.55px; top: 128.53px; width: 454.32px; height: 296.33px; background: #f9f5ec; border-radius: 3.887px;}
.marketing-ops .mo-animation .viz-system .sy-portal > * {position: absolute;}
.marketing-ops .mo-animation .viz-system .sy-photo {left: 9.716px; top: 9.716px; width: 157.41px; height: 276.9px; border-radius: 3.887px; overflow: hidden; background: #1e1e1e;}
.marketing-ops .mo-animation .viz-system .sy-photo img {display: block; width: 100%; height: 100%; object-fit: cover;}
.marketing-ops .mo-animation .viz-system .sy-photo-txt {left: 38.45px; top: 127px; width: 90.36px; white-space: normal; color: #fff; font-size: 13.603px; line-height: 14.575px;}
.marketing-ops .mo-animation .viz-system .sy-hello {left: 190.44px; top: 9.716px; width: 240.56px; display: flex; flex-direction: column; gap: 3.887px;}
.marketing-ops .mo-animation .viz-system .sy-alex {font-family: var(--font-mono); font-size: 11.66px; line-height: 14.575px;}
.marketing-ops .mo-animation .viz-system .sy-sub {font-size: 5.83px; line-height: 9.716px;}
.marketing-ops .mo-animation .viz-system .sy-stats {left: 190.44px; top: 69.70px; display: flex; gap: 23.32px; align-items: center;}
.marketing-ops .mo-animation .viz-system .sy-stat {display: flex; flex-direction: column; gap: 3.887px;}
.marketing-ops .mo-animation .viz-system .sy-s-lbl {font-size: 7.773px; line-height: 14.575px;}
.marketing-ops .mo-animation .viz-system .sy-s-num {font-size: 23.32px; line-height: 19.433px;}
.marketing-ops .mo-animation .viz-system .sy-s-foot {display: flex; align-items: center; gap: 3.887px; font-size: 7.773px; line-height: 14.575px;}
.marketing-ops .mo-animation .viz-system .sy-s-foot svg {display: block; flex: none;}
.marketing-ops .mo-animation .viz-system .sy-dot {display: block; width: 3.887px; height: 3.887px; border-radius: 50%; flex: none;}
.marketing-ops .mo-animation .viz-system .sy-recent {left: 190.44px; top: 158.56px; width: 240.56px; display: flex; flex-direction: column; gap: 7.773px;}
.marketing-ops .mo-animation .viz-system .sy-r-title {font-size: 7.773px; line-height: 9.716px;}
.marketing-ops .mo-animation .viz-system .sy-row {display: flex; align-items: center; justify-content: space-between; width: 100%; padding-bottom: 7.773px; border-bottom: .486px solid #cedd95;}
.marketing-ops .mo-animation .viz-system .sy-row-l {display: flex; align-items: center; gap: 7.773px; font-size: 7.773px; line-height: 14.575px;}
.marketing-ops .mo-animation .viz-system .sy-row-l img {display: block; width: 23.32px; height: 23.32px; border-radius: 1.943px; background: #1e1e1e; object-fit: cover;}
.marketing-ops .mo-animation .viz-system .sy-ago {font-size: 7.773px; line-height: 9.716px; color: #6a6b6b;}
.marketing-ops .mo-animation .viz-system .sy-pill {display: flex; align-items: center; justify-content: center; padding: 3.887px 7.773px; border-radius: 124px; font-size: 7.773px; line-height: 9.716px; white-space: nowrap;}
.marketing-ops .mo-animation .viz-system .sy-wave {left: 499.64px; top: 220px;}
.marketing-ops .mo-animation .viz-system .sy-br1 {left: 867.87px; top: 91.33px;}
.marketing-ops .mo-animation .viz-system .sy-br2 {left: 869px; top: 192.52px;}
.marketing-ops .mo-animation .viz-system .sy-live {left: 523px; top: 193px; font-family: var(--font-mono); font-size: 15.546px; line-height: 19.433px; color: #e4f2b3;}
.marketing-ops .mo-animation .viz-system .sy-ops-head {left: 750.87px; top: 63px; width: 184.61px; display: flex; flex-direction: column; gap: 7.773px; color: #f9f5ec;}
.marketing-ops .mo-animation .viz-system .sy-menu {left: 750.87px; top: 128.98px; width: 102.09px; padding: 15.546px; display: flex; flex-direction: column; gap: 15.546px; background: #f8dcf9; border-radius: 3.887px; font-family: var(--font-mono); font-size: 13.603px; line-height: 14.575px;}
.marketing-ops .mo-animation .viz-system .sy-status {left: 992.87px; top: 22px; width: 240px; padding: 15.546px; display: flex; flex-direction: column; gap: 7.773px; background: #f9f5ec; border-radius: 7.773px;}
.marketing-ops .mo-animation .viz-system .sy-metrics {left: 985.87px; top: 264px; width: 304.13px; padding: 15.546px; display: flex; flex-direction: column; gap: 7.773px; background: #dee1e6; border-radius: 7.773px;}
.marketing-ops .mo-animation .viz-system .sy-mcard {display: flex; align-items: center; justify-content: space-between; width: 100%; height: 82.036px; padding: 7.773px 15.546px; background: #f7f7f8; border: .972px solid #dee1e6; border-radius: 7.773px;}
.marketing-ops .mo-animation .viz-system .sy-m-txt {display: flex; flex-direction: column; gap: 7.773px;}
.marketing-ops .mo-animation .viz-system .sy-m-lbl {font-family: var(--font-mono); font-size: 7.773px; line-height: 9.716px; letter-spacing: .9716px;}
.marketing-ops .mo-animation .viz-system .sy-m-num {font-family: var(--font-mono); font-size: 23.32px; line-height: 23.32px; letter-spacing: .9716px;}
.marketing-ops .mo-animation .viz-system .sy-bars {display: flex; align-items: flex-end; gap: 1.943px; height: 58.299px;}
.marketing-ops .mo-animation .viz-system .sy-bars i {display: block; border-radius: 124px;}
.marketing-ops .mo-animation .viz-system .sy-area {position: relative; width: 53.062px; height: 41.432px;}
.marketing-ops .mo-animation .viz-system .sy-area svg {position: absolute; left: -.42px; top: -.35px; display: block;}

/* Content calendar */
.marketing-ops .mo-animation .viz-calendar .viz-stage {font-family: var(--font-sans); font-weight: var(--w-neutral); color: #1e1e1e;}
.marketing-ops .mo-animation .viz-calendar svg {display: block; flex-shrink: 0;}
.marketing-ops .mo-animation .viz-calendar .cal-h14 {font-family: var(--font-mono); font-weight: 400; font-size: 14px; line-height: 15.496px;}
.marketing-ops .mo-animation .viz-calendar .cal-b12 {font-size: 12px; line-height: 15.496px;}
.marketing-ops .mo-animation .viz-calendar .cal-b12 b {font-weight: var(--w-median);}
.marketing-ops .mo-animation .viz-calendar .cal-grid {position: absolute; left: 410px; top: 0; width: 897px; border-radius: 8.265px; overflow: hidden; font-family: var(--font-mono); font-size: 12.397px; line-height: 15.496px;}
.marketing-ops .mo-animation .viz-calendar .cal-head {display: flex; height: 48.554px;}
.marketing-ops .mo-animation .viz-calendar .cal-hc {flex: 1 0 0; min-width: 1px; background: #f7f7f8; border-right: 1.033px solid #f0f1f2; display: flex; align-items: center; justify-content: center;}
.marketing-ops .mo-animation .viz-calendar .cal-hc--first {flex: none; width: 156.338px;}
.marketing-ops .mo-animation .viz-calendar .cal-hc--last {border-right: 0;}
.marketing-ops .mo-animation .viz-calendar .cal-body {display: flex;}
.marketing-ops .mo-animation .viz-calendar .cal-labels {width: 156.335px;}
.marketing-ops .mo-animation .viz-calendar .cal-lab {background: #fff; border-right: 1.033px solid #f0f1f2; display: flex; align-items: center; justify-content: center;}
.marketing-ops .mo-animation .viz-calendar .cal-lab--social {height: 142px; border-bottom: 1.033px solid #f0f1f2;}
.marketing-ops .mo-animation .viz-calendar .cal-lab--email {height: 141px;}
.marketing-ops .mo-animation .viz-calendar .cal-lab-in {display: flex; align-items: center; gap: 8.265px; white-space: nowrap;}
.marketing-ops .mo-animation .viz-calendar .cal-rows {flex: 1 0 0; min-width: 1px;}
.marketing-ops .mo-animation .viz-calendar .cal-row {display: flex;}
.marketing-ops .mo-animation .viz-calendar .cal-row--1 {height: 142px;}
.marketing-ops .mo-animation .viz-calendar .cal-row--2 {height: 141px;}
.marketing-ops .mo-animation .viz-calendar .cal-c {background: #fff; border-right: 1.033px solid #f0f1f2; border-bottom: 1.033px solid #f0f1f2; padding: 16.529px; display: flex; align-items: center; justify-content: center;}
.marketing-ops .mo-animation .viz-calendar .cal-row--2 .cal-c {border-bottom: 0;}
.marketing-ops .mo-animation .viz-calendar .cal-c--wide {width: 296.68px; flex: none; align-items: flex-end; justify-content: flex-start;}
.marketing-ops .mo-animation .viz-calendar .cal-c--mid {flex: 1 0 0; min-width: 1px;}
.marketing-ops .mo-animation .viz-calendar .cal-c--n {flex: none; width: 148.34px;}
.marketing-ops .mo-animation .viz-calendar .cal-c--end {border-right: 0;}
.marketing-ops .mo-animation .viz-calendar .cal-c--br {border-bottom-right-radius: 8px;}
.marketing-ops .mo-animation .viz-calendar .cal-post {display: flex;}
.marketing-ops .mo-animation .viz-calendar .cal-post--reel {height: 100%; gap: 16.529px; align-items: flex-start;}
.marketing-ops .mo-animation .viz-calendar .cal-post--reel .cal-thumb {width: 86.778px; height: 100%;}
.marketing-ops .mo-animation .viz-calendar .cal-post--col {flex-direction: column; gap: 16.529px; height: 107.439px; align-items: flex-start;}
.marketing-ops .mo-animation .viz-calendar .cal-post--col .cal-thumb {width: 41.323px; flex: 1 0 0; min-height: 1px;}
.marketing-ops .mo-animation .viz-calendar .cal-thumb {display: block; object-fit: cover; border-radius: 4.132px;}
.marketing-ops .mo-animation .viz-calendar .cal-post-meta {display: flex; flex-direction: column; gap: 8.265px; align-items: flex-start;}
.marketing-ops .mo-animation .viz-calendar .cal-pill {background: #f0f1f2; border: 1.033px solid #c2c3c5; border-radius: 248.97px; padding: 4.132px 8.265px; white-space: nowrap;}
.marketing-ops .mo-animation .viz-calendar .cal-time {color: #868788;}
.marketing-ops .mo-animation .viz-calendar .cal-sugg {height: 100%; background: #e4f2b3; border: 1.033px dashed #8d9e47; border-radius: 8.265px; padding: 16.529px; display: flex; flex-direction: column; gap: 17.562px; align-items: flex-start; white-space: nowrap;}
.marketing-ops .mo-animation .viz-calendar .cal-ai {position: absolute; left: 0; top: 0; width: 345px; padding: 16px; background: #e4f2b3; border-radius: 8.265px; display: flex; flex-direction: column; gap: 24px;}
.marketing-ops .mo-animation .viz-calendar .cal-ai-top {display: flex; gap: 24.794px; align-items: flex-start; font-family: var(--font-mono); font-size: 12.397px; line-height: 15.496px;}
.marketing-ops .mo-animation .viz-calendar .cal-ai-main {display: flex; flex-direction: column; gap: 16px;}
.marketing-ops .mo-animation .viz-calendar .cal-gap {display: flex; flex-direction: column; gap: 8px; padding-bottom: 4px; border-bottom: 1px solid #c2c3c5;}
.marketing-ops .mo-animation .viz-calendar .cal-rec {display: flex; flex-direction: column; gap: 12px;}
.marketing-ops .mo-animation .viz-calendar .cal-rec-row {display: flex; gap: 12px; align-items: center;}
.marketing-ops .mo-animation .viz-calendar .cal-rec-img {width: 40px; height: 40px; border-radius: 4px; display: block; background: #d9d9d9;}
.marketing-ops .mo-animation .viz-calendar .cal-rec-row p {width: 155px; font-size: 10px; line-height: 15.496px; color: #000;}
.marketing-ops .mo-animation .viz-calendar .cal-tags {display: flex; flex-wrap: wrap; gap: 8px; align-items: center;}
.marketing-ops .mo-animation .viz-calendar .cal-tag {background: #b4c478; border-radius: 128px; padding: 4px 8px; font-size: 8px; line-height: 15.496px; color: #000; white-space: nowrap;}
.marketing-ops .mo-animation .viz-calendar .cal-cta {background: #1e1e1e; color: #fff; border-radius: 132.233px; padding: 8.265px 16.529px; display: flex; align-items: center; justify-content: space-between; font-family: var(--font-mono); font-size: 16.53px; line-height: 20.661px;}
.marketing-ops .mo-animation .viz-calendar .cal-brief {position: absolute; left: 485.09px; top: 370px; background: #fff; border-radius: 8px; padding: 16px; display: flex; flex-direction: column; gap: 16px; color: #000;}
.marketing-ops .mo-animation .viz-calendar .cal-brief-top {display: flex; gap: 16px; align-items: flex-start;}
.marketing-ops .mo-animation .viz-calendar .cal-docs {width: 32px; height: 32px; border-radius: 4px; background: #f8dcf9; display: flex; align-items: center; justify-content: center; flex-shrink: 0;}
.marketing-ops .mo-animation .viz-calendar .cal-brief-txt {display: flex; flex-direction: column; gap: 10px;}
.marketing-ops .mo-animation .viz-calendar .cal-brief-bot {width: 383px; display: flex; flex-direction: column; gap: 16px; align-items: flex-start;}
.marketing-ops .mo-animation .viz-calendar .cal-cols {display: flex; gap: 4px; align-items: stretch;}
.marketing-ops .mo-animation .viz-calendar .cal-col {font-size: 10px; line-height: 15.496px; white-space: nowrap;}
.marketing-ops .mo-animation .viz-calendar .cal-col-l {color: #4f4f50;}
.marketing-ops .mo-animation .viz-calendar .cal-col-v {color: #1e1e1e;}
.marketing-ops .mo-animation .viz-calendar .cal-sep {width: .5px; background: #a3a4a5;}
.marketing-ops .mo-animation .viz-calendar .cal-btn {display: flex; align-items: center; justify-content: center; padding: 4px 8px; border-radius: 132.233px; font-family: var(--font-mono); font-size: 10px; line-height: 20.661px; white-space: nowrap;}
.marketing-ops .mo-animation .viz-calendar .cal-btn--dark {background: #1e1e1e; color: #fff;}
.marketing-ops .mo-animation .viz-calendar .cal-btn--lime {background: #e4f2b3;}
.marketing-ops .mo-animation .viz-calendar .cal-btn--white {background: #fff;}
.marketing-ops .mo-animation .viz-calendar .cal-status {position: absolute; left: 838.5px; top: 416px; width: 415px; display: flex; flex-direction: column; gap: 15px;}
.marketing-ops .mo-animation .viz-calendar .cal-st {background: #f9f5ec; border-radius: 8px; padding: 16px; display: flex; align-items: flex-end; justify-content: space-between; color: #000;}
.marketing-ops .mo-animation .viz-calendar .cal-st-txt {display: flex; flex-direction: column; gap: 10px; white-space: nowrap;}
.marketing-ops .mo-animation .viz-calendar .cal-link {position: absolute;}
.marketing-ops .mo-animation .viz-calendar .cal-link--1 {left: 363.5px; top: 119.004px;}
.marketing-ops .mo-animation .viz-calendar .cal-link--2 {left: 156.74px; top: 384.346px;}
.marketing-ops .mo-animation .viz-calendar .cal-sq {position: absolute; width: 10px; height: 10px;}
.marketing-ops .mo-animation .viz-calendar .cal-sq > span {display: block; width: 10px; height: 10px; background: #ff5d02;}

/* The desktop portal scale is retained inside separate, non-animated wrappers.
 * Applying this scale to viz-pop itself would collide with its entrance transform.
 */
.marketing-ops .mo-animation .viz-system-phone .sy-phone-portal {left: 11.75px; top: 49px; transform: scale(.76155); transform-origin: 0 0;}
.marketing-ops .mo-animation .viz-system-phone .sy-phone-tag {left: 0; top: 0; transform: scale(.76155); transform-origin: 0 0;}
.marketing-ops .mo-animation .viz-system-phone .sy-portal,
.marketing-ops .mo-animation .viz-system-phone .sy-tag {position: relative; left: 0; top: 0;}
.marketing-ops .mo-animation .viz-system-phone .sy-ops-head {left: 0; top: 412px; width: 184.61px;}
.marketing-ops .mo-animation .viz-system-phone .sy-ops-head .sy-kicker {font-size: 14px; line-height: 17.5px;}
.marketing-ops .mo-animation .viz-system-phone .sy-ops-head .sy-title {font-size: 24px; line-height: 30px; letter-spacing: 1px;}
.marketing-ops .mo-animation .viz-system-phone .sy-menu {left: 189.5px; top: 361.5px;}
.marketing-ops .mo-animation .viz-system-phone .sy-status {left: 0; top: 597.5px;}
.marketing-ops .mo-animation .viz-system-phone .sy-metrics {left: 53.87px; top: 797px;}
.marketing-ops .mo-animation .viz-system-phone .sy-phone-lines {left: 0; top: 0;}
.marketing-ops .mo-animation .viz-system-phone .sy-sq {width: 10px; height: 10px;}

/* The current mobile calendar has channel columns and all five weekday rows. */
.marketing-ops .mo-animation .viz-calendar-phone .cal-week {position: absolute; left: 0; top: 0; width: 358px; border-radius: 8.265px; overflow: hidden; font-family: var(--font-mono); font-size: 12.397px; line-height: 15.496px;}
.marketing-ops .mo-animation .viz-calendar-phone .cal-week-head,
.marketing-ops .mo-animation .viz-calendar-phone .cal-day-row {display: grid; grid-template-columns: 46px 156px 156px;}
.marketing-ops .mo-animation .viz-calendar-phone .cal-week-head {height: 48.554px;}
.marketing-ops .mo-animation .viz-calendar-phone .cal-week-hc {display: flex; align-items: center; justify-content: center; background: #fff; border-right: 1.033px solid #f0f1f2; border-bottom: 1.033px solid #f0f1f2;}
.marketing-ops .mo-animation .viz-calendar-phone .cal-week-hc--first {background: #f7f7f8;}
.marketing-ops .mo-animation .viz-calendar-phone .cal-day-row {height: 56.6px;}
.marketing-ops .mo-animation .viz-calendar-phone .cal-day-label {display: flex; align-items: center; justify-content: center; background: #f7f7f8; border-right: 1.033px solid #f0f1f2; border-bottom: 1.033px solid #f0f1f2;}
.marketing-ops .mo-animation .viz-calendar-phone .cal-day-slot {position: relative; display: flex; align-items: center; padding: 8px; min-width: 0; background: #fff; border-right: 1.033px solid #f0f1f2; border-bottom: 1.033px solid #f0f1f2;}
.marketing-ops .mo-animation .viz-calendar-phone .cal-week-hc:last-child,
.marketing-ops .mo-animation .viz-calendar-phone .cal-day-slot:last-child {border-right: 0;}
.marketing-ops .mo-animation .viz-calendar-phone .cal-day-row:last-child .cal-day-label,
.marketing-ops .mo-animation .viz-calendar-phone .cal-day-row:last-child .cal-day-slot {border-bottom: 0;}
.marketing-ops .mo-animation .viz-calendar-phone .cal-week .cal-post--reel {position: absolute; left: 8px; top: 8px; width: 139px; height: 96.4px; gap: 4.5px; z-index: 1;}
.marketing-ops .mo-animation .viz-calendar-phone .cal-week .cal-post--reel .cal-thumb {width: 67px; flex: none;}
.marketing-ops .mo-animation .viz-calendar-phone .cal-week .cal-post--reel .cal-post-meta {height: 100%; justify-content: space-between; gap: 0;}
.marketing-ops .mo-animation .viz-calendar-phone .cal-week .cal-post--reel .cal-pill {width: 68px; white-space: normal; padding-inline: 4px;}
.marketing-ops .mo-animation .viz-calendar-phone .cal-week .cal-post--col {flex-direction: row; gap: 4px; height: 40px; align-items: center;}
.marketing-ops .mo-animation .viz-calendar-phone .cal-week .cal-post--col .cal-thumb {width: 40px; height: 40px; flex: none;}
.marketing-ops .mo-animation .viz-calendar-phone .cal-week .cal-post--col .cal-post-meta {gap: 0;}
.marketing-ops .mo-animation .viz-calendar-phone .cal-week .cal-post--col .cal-pill {padding-inline: 4px;}
.marketing-ops .mo-animation .viz-calendar-phone .cal-week .cal-sugg {width: 100%; height: 40px; flex-direction: row; align-items: center; gap: 12px; padding: 8px; font-size: 10px; line-height: 15.496px;}
.marketing-ops .mo-animation .viz-calendar-phone .cal-ai {left: 0; top: 396px; width: 358px;}
.marketing-ops .mo-animation .viz-calendar-phone .cal-brief {left: 0; top: 828px; width: 295px;}
.marketing-ops .mo-animation .viz-calendar-phone .cal-brief-txt .cal-b12 {width: 215px;}
.marketing-ops .mo-animation .viz-calendar-phone .cal-brief-bot {width: 263px;}
.marketing-ops .mo-animation .viz-calendar-phone .cal-status {left: 148px; top: 983.5px; width: 210px; gap: 14px;}
.marketing-ops .mo-animation .viz-calendar-phone .cal-st {flex-direction: column; align-items: stretch; gap: 10px;}
.marketing-ops .mo-animation .viz-calendar-phone .cal-st-txt {white-space: normal;}
.marketing-ops .mo-animation .viz-calendar-phone .cal-st .cal-btn {align-self: flex-end;}
.marketing-ops .mo-animation .viz-calendar-phone .cal-phone-lines {position: absolute; left: 0; top: 0;}
.marketing-ops .mo-animation .viz-calendar .cal-rec-img {object-fit: cover;}

/* Responsive scene selection is local to these two illustrations. */
.marketing-ops .mo-animation .viz-system.viz-phone,
.marketing-ops .mo-animation .viz-calendar.viz-phone {display: none;}
@media (max-width: 700px) {
    .marketing-ops .mo-animation .viz-system.viz-desk,
    .marketing-ops .mo-animation .viz-calendar.viz-desk {display: none;}
    .marketing-ops .mo-animation .viz-system.viz-phone,
    .marketing-ops .mo-animation .viz-calendar.viz-phone {display: block;}
}