/* Native Marketing Ops feature artwork (demos 02–06).
 * Shared stage scaling, font tokens, motion primitives and reduced-motion
 * handling live in the parent animation stylesheet.
 */

/* Next action */
.marketing-ops .mo-animation .viz-f01 .viz-stage {overflow: hidden; border-radius: 4px; background: #1e1e1e;}
.marketing-ops .mo-animation .viz-f01 .f01-bg {position: absolute; inset: 0; width: 612px; height: 400px; object-fit: cover; display: block;}
.marketing-ops .mo-animation .viz-f01 .f01-shade {position: absolute; inset: 0; background: rgba(0,0,0,.2);}
.marketing-ops .mo-animation .viz-f01 .f01-stats {position: absolute; left: 25px; top: 25px; width: 562px; display: flex; gap: 14.867px; align-items: flex-start;}
.marketing-ops .mo-animation .viz-f01 .f01-stat {flex: 1 0 0; min-width: 0; background: #1e1e1e; border-radius: 8px; padding: 16px; display: flex; flex-direction: column; gap: 4.248px;}
.marketing-ops .mo-animation .viz-f01 .f01-num {font-family: var(--font-sans); font-weight: var(--w-neutral); font-size: 33.982px; line-height: 42.477px; letter-spacing: 1.0619px; color: #f9f5ec; font-variant-numeric: tabular-nums;}
.marketing-ops .mo-animation .viz-f01 .f01-lbl {display: flex; gap: 4.248px; align-items: flex-start;}
.marketing-ops .mo-animation .viz-f01 .f01-dot {flex: none; width: 4.139px; height: 4.139px; border-radius: 50%; margin-top: 7.488px; margin-bottom: 20.23px;}
.marketing-ops .mo-animation .viz-f01 .f01-lbl p {font-family: var(--font-mono); font-weight: 400; font-size: 12.743px; line-height: 15.929px; color: #c2c3c5;}
.marketing-ops .mo-animation .viz-f01 .f01-line {position: absolute; left: 90.5px; top: 149px;}
.marketing-ops .mo-animation .viz-f01 .f01-node {position: absolute; width: 10px; height: 10px; background: #e4f2b3;}
.marketing-ops .mo-animation .viz-f01 .f01-card {position: absolute; left: 217px; top: 197px; width: 370px; height: 178px; background: #fff; border-radius: 8px; padding: 16px; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 16px;}
.marketing-ops .mo-animation .viz-f01 .f01-tag {background: #feece5; border-radius: 128px; padding: 4px 8px; font-family: var(--font-sans); font-weight: var(--w-neutral); font-size: 12px; line-height: 15px; color: #1e1e1e; white-space: nowrap;}
.marketing-ops .mo-animation .viz-f01 .f01-body {flex: 1 0 0; min-height: 0; width: 100%; display: flex; gap: 16px; align-items: flex-end;}
.marketing-ops .mo-animation .viz-f01 .f01-photo {flex: 1 0 0; min-width: 0; height: 100%; object-fit: cover; border-radius: 4px; display: block; background: #d9d9d9;}
.marketing-ops .mo-animation .viz-f01 .f01-side {height: 100%; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; flex: none;}
.marketing-ops .mo-animation .viz-f01 .f01-title {width: 98px; font-family: var(--font-sans); font-weight: var(--w-neutral); font-size: 16px; line-height: 20px; color: #1e1e1e;}
.marketing-ops .mo-animation .viz-f01 .f01-btn {background: #ff5d02; border-radius: 132.233px; padding: 4px 8px; display: flex; align-items: center; gap: 16.529px; font-family: var(--font-mono); font-size: 10px; line-height: 20.661px; color: #1e1e1e; white-space: nowrap;}
.marketing-ops .mo-animation .viz-f01 .f01-btn svg {display: block; flex: none;}

/* Projects */
.marketing-ops .mo-animation .viz-f02 .viz-stage {overflow: hidden; border-radius: 4px; background: #6b5a40;}
.marketing-ops .mo-animation .viz-f02 .f02-bg {position: absolute; inset: 0; width: 612px; height: 400px; object-fit: cover; display: block;}
.marketing-ops .mo-animation .viz-f02 .f02-shade {position: absolute; inset: 0; background: rgba(0,0,0,.2);}
.marketing-ops .mo-animation .viz-f02 .f02-brief {position: absolute; left: 25px; top: 50px; width: 279px; background: #fff; border-radius: 8px; padding: 24px; display: flex; flex-direction: column; gap: 64px;}
.marketing-ops .mo-animation .viz-f02 .f02-head {display: flex; flex-direction: column; gap: 12px;}
.marketing-ops .mo-animation .viz-f02 .f02-docicon {width: 32px; height: 32px; border-radius: 4px; background: #f8dcf9; display: flex; align-items: center; justify-content: center;}
.marketing-ops .mo-animation .viz-f02 .f02-docicon svg, .marketing-ops .mo-animation .viz-f02 .f02-chk svg, .marketing-ops .mo-animation .viz-f02 .f02-go svg, .marketing-ops .mo-animation .viz-f02 .f02-aihead svg {display: block; flex: none;}
.marketing-ops .mo-animation .viz-f02 .f02-htext {display: flex; flex-direction: column; gap: 8px; font-family: var(--font-sans); font-weight: var(--w-neutral);}
.marketing-ops .mo-animation .viz-f02 .f02-title {font-size: 16px; line-height: 20px; color: #000;}
.marketing-ops .mo-animation .viz-f02 .f02-sub {font-size: 12px; line-height: 15px; color: #4f4f50; white-space: nowrap;}
.marketing-ops .mo-animation .viz-f02 .f02-rows {display: flex; flex-direction: column; gap: 4px;}
.marketing-ops .mo-animation .viz-f02 .f02-row {display: flex; gap: 8px; align-items: flex-start; padding: 8px; border-radius: 8px;}
.marketing-ops .mo-animation .viz-f02 .f02-row--warn {background: #feece5;}
.marketing-ops .mo-animation .viz-f02 .f02-row--ok {background: #f7f7f8;}
.marketing-ops .mo-animation .viz-f02 .f02-row p {font-family: var(--font-sans); font-weight: var(--w-neutral); font-size: 14px; line-height: 15px; color: #000; white-space: nowrap;}
.marketing-ops .mo-animation .viz-f02 .f02-chk {flex: none; width: 14px; height: 14px; border-radius: 128px; display: flex; align-items: center; justify-content: center; overflow: hidden;}
.marketing-ops .mo-animation .viz-f02 .f02-chk--warn {background: #ff5d02;}
.marketing-ops .mo-animation .viz-f02 .f02-chk--ok {background: #e4f2b3;}
.marketing-ops .mo-animation .viz-f02 .f02-ai {position: absolute; left: 391px; top: 50px; width: 196.216px; background: #e4f2b3; border-radius: 8.265px; padding: 16px; display: flex; flex-direction: column; gap: 8px;}
.marketing-ops .mo-animation .viz-f02 .f02-aihead {display: flex; gap: 12px; align-items: flex-start;}
.marketing-ops .mo-animation .viz-f02 .f02-aihead p {width: 137px; font-family: var(--font-mono); font-weight: 400; font-size: 14px; line-height: 15px; color: #1e1e1e; white-space: nowrap;}
.marketing-ops .mo-animation .viz-f02 .f02-aisub {font-family: var(--font-sans); font-weight: var(--w-neutral); font-size: 12px; line-height: 15px; color: #4f4f50; white-space: nowrap;}
.marketing-ops .mo-animation .viz-f02 .f02-skel {display: flex; gap: 8px; align-items: flex-start;}
.marketing-ops .mo-animation .viz-f02 .f02-sdot {flex: none; width: 12px; height: 12px; border-radius: 50%; background: #b4c478;}
.marketing-ops .mo-animation .viz-f02 .f02-lines {flex: 1 0 0; display: flex; flex-direction: column; gap: 4px;}
.marketing-ops .mo-animation .viz-f02 .f02-lines span {display: block; width: 100%; height: 6px; border-radius: 128px; background: #cedd95;}
.marketing-ops .mo-animation .viz-f02 .f02-ready {position: absolute; left: 404px; top: 298px; width: 171px; background: #fff; border-radius: 8px; padding: 16px; display: flex; align-items: center; justify-content: space-between;}
.marketing-ops .mo-animation .viz-f02 .f02-rl {display: flex; gap: 8px; align-items: center;}
.marketing-ops .mo-animation .viz-f02 .f02-rl p {font-family: var(--font-sans); font-weight: var(--w-neutral); font-size: 16px; line-height: 20px; color: #000;}
.marketing-ops .mo-animation .viz-f02 .f02-go {width: 20px; height: 20px; border-radius: 128px; background: #1e1e1e; display: flex; align-items: center; justify-content: center;}
.marketing-ops .mo-animation .viz-f02 .f02-l1 {position: absolute; left: 319.196px; top: 110px;}
.marketing-ops .mo-animation .viz-f02 .f02-l2 {position: absolute; left: 483.5px; top: 185.5px;}
.marketing-ops .mo-animation .viz-f02 .f02-node {position: absolute; width: 10px; height: 10px; background: #e4f2b3;}

/* Insights */
.marketing-ops .mo-animation .viz-f03 .viz-stage {overflow: hidden; border-radius: 4px; background: #3a342e;}
.marketing-ops .mo-animation .viz-f03 .f03-bg {position: absolute; inset: 0; width: 612px; height: 400px; object-fit: cover; border-radius: 4px; display: block;}
.marketing-ops .mo-animation .viz-f03 .f03-shade {position: absolute; inset: 0; background: rgba(0,0,0,.2); border-radius: 4px;}
.marketing-ops .mo-animation .viz-f03 .f03-chart {position: absolute; left: 25px; top: 26px; width: 191px; height: 349px; padding: 16px; background: #fff; border-radius: 9.611px; display: flex; flex-direction: column; justify-content: space-between;}
.marketing-ops .mo-animation .viz-f03 .f03-head {display: flex; flex-direction: column; gap: 4.806px; color: #000;}
.marketing-ops .mo-animation .viz-f03 .f03-title {font-family: var(--font-sans); font-weight: var(--w-neutral); font-size: 16px; line-height: normal; white-space: nowrap;}
.marketing-ops .mo-animation .viz-f03 .f03-big {font-family: var(--font-sans); font-weight: var(--w-slim); font-size: 48px; line-height: 55px; font-variant-numeric: tabular-nums; white-space: nowrap;}
.marketing-ops .mo-animation .viz-f03 .f03-bars {display: flex; align-items: flex-end; justify-content: space-between; height: 175px; width: 100%;}
.marketing-ops .mo-animation .viz-f03 .f03-bar {display: block; flex: none; border-radius: 2.403px;}
.marketing-ops .mo-animation .viz-f03 .f03-tip {position: absolute; left: 155px; top: 131px; width: 26px; height: 22px;}
.marketing-ops .mo-animation .viz-f03 .f03-tip-label {position: absolute; left: 0; top: 0; background: #1e1e1e; color: #fff; border-radius: 2.403px; padding: 2.403px; font-family: var(--font-sans); font-weight: var(--w-neutral); font-size: 12.014px; line-height: normal; white-space: nowrap;}
.marketing-ops .mo-animation .viz-f03 .f03-tip-arrow {position: absolute; left: 8.4px; top: 13.22px; display: block;}
.marketing-ops .mo-animation .viz-f03 .f03-line1 {position: absolute; left: 227.8px; top: 68.5px;}
.marketing-ops .mo-animation .viz-f03 .f03-line2 {position: absolute; left: 424px; top: 126px;}
.marketing-ops .mo-animation .viz-f03 .f03-node {position: absolute; width: 10px; height: 10px; background: #e4f2b3; display: block;}
.marketing-ops .mo-animation .viz-f03 .f03-ai {position: absolute; left: 397px; top: 26px; width: 190px; padding: 16px; background: #e4f2b3; border-radius: 8.265px; display: flex; flex-direction: column; gap: 8px;}
.marketing-ops .mo-animation .viz-f03 .f03-ai-head {display: flex; gap: 12px; align-items: flex-start;}
.marketing-ops .mo-animation .viz-f03 .f03-ai-head svg {flex: none; display: block;}
.marketing-ops .mo-animation .viz-f03 .f03-ai-title {font-family: var(--font-mono); font-weight: 400; font-size: 14px; line-height: 15px; color: #1e1e1e;}
.marketing-ops .mo-animation .viz-f03 .f03-ai-body {width: 158px; font-family: var(--font-sans); font-weight: var(--w-neutral); font-size: 12px; line-height: 15px; color: #4f4f50;}
.marketing-ops .mo-animation .viz-f03 .f03-rec {position: absolute; left: 296px; top: 226px; padding: 16px; background: #fff; border-radius: 9px; display: flex; gap: 8px; align-items: flex-start;}
.marketing-ops .mo-animation .viz-f03 .f03-rec-icon {position: relative; flex: none; width: 24px; height: 24px; border-radius: 4px; background: #f8dcf9; overflow: hidden;}
.marketing-ops .mo-animation .viz-f03 .f03-rec-icon svg {position: absolute; left: 2px; top: 2px; display: block;}
.marketing-ops .mo-animation .viz-f03 .f03-rec-text {display: flex; flex-direction: column; gap: 8px; color: #000; line-height: 15px;}
.marketing-ops .mo-animation .viz-f03 .f03-rec-title {font-family: var(--font-sans); font-weight: var(--w-median); font-size: 16px; white-space: nowrap;}
.marketing-ops .mo-animation .viz-f03 .f03-rec-body {width: 187px; font-family: var(--font-sans); font-weight: var(--w-neutral); font-size: 12px;}

/* Brand */
.marketing-ops .mo-animation .viz-f04 .viz-stage {overflow: hidden; border-radius: 4px; background: #6d7a4a;}
.marketing-ops .mo-animation .viz-f04 .f04-bg {position: absolute; inset: 0; width: 612px; height: 400px; object-fit: cover; border-radius: 4px; display: block;}
.marketing-ops .mo-animation .viz-f04 .f04-shade {position: absolute; inset: 0; background: rgba(0,0,0,.2); border-radius: 4px;}
.marketing-ops .mo-animation .viz-f04 .f04-grid {position: absolute; left: 344px; top: 25px; width: 243px; height: 300px; background: #fff; border-radius: 8px;}
.marketing-ops .mo-animation .viz-f04 .f04-tile {position: absolute; border-radius: 4px; overflow: hidden;}
.marketing-ops .mo-animation .viz-f04 .f04-tile img {display: block; width: 100%; height: 100%; object-fit: cover;}
.marketing-ops .mo-animation .viz-f04 .f04-tab {position: absolute; width: 286px; padding: 24px; border-radius: 8px; display: flex; align-items: center;}
.marketing-ops .mo-animation .viz-f04 .f04-tab svg {flex: none; display: block;}
.marketing-ops .mo-animation .viz-f04 .f04-tab-label, .marketing-ops .mo-animation .viz-f04 .f04-aa {font-family: var(--font-sans); font-weight: var(--w-slim); font-size: 24px; line-height: 1; color: #000; white-space: nowrap; text-box: trim-both cap alphabetic;}
.marketing-ops .mo-animation .viz-f04 .f04-tab-vi {left: 199px; top: 225px; background: #f9f5ec; gap: 16px;}
.marketing-ops .mo-animation .viz-f04 .f04-tab-vt {left: 141px; top: 263px; background: #fff; gap: 32px;}
.marketing-ops .mo-animation .viz-f04 .f04-type {left: 51px; top: 303px; background: #f9f5ec; justify-content: space-between;}
.marketing-ops .mo-animation .viz-f04 .f04-aa {font-size: 37.241px;}
.marketing-ops .mo-animation .viz-f04 .f04-dots {position: relative; flex: none; width: 136px; height: 25.302px;}
.marketing-ops .mo-animation .viz-f04 .f04-dot {position: absolute; top: 0; width: 25.302px; height: 25.302px; border-radius: 50%; display: block;}
.marketing-ops .mo-animation .viz-f04 .f04-dot-ring {background: #f9f5ec; border: 0.316px solid #000;}
.marketing-ops .mo-animation .viz-f04 .f04-health {position: absolute; left: 25px; top: 25px; padding: 16px; background: #e4f2b3; border-radius: 8px; display: flex; flex-direction: column; gap: 12px;}
.marketing-ops .mo-animation .viz-f04 .f04-health-head {display: flex; flex-direction: column; gap: 12px;}
.marketing-ops .mo-animation .viz-f04 .f04-health-head svg {display: block;}
.marketing-ops .mo-animation .viz-f04 .f04-health-title {font-family: var(--font-sans); font-weight: var(--w-neutral); font-size: 14px; line-height: 15px; color: #1e1e1e; white-space: nowrap;}
.marketing-ops .mo-animation .viz-f04 .f04-score {display: flex; gap: 12px; align-items: flex-end; font-family: var(--font-sans); font-weight: var(--w-slim);}
.marketing-ops .mo-animation .viz-f04 .f04-score-num {width: 80px; height: 57px; font-size: 64px; line-height: 75px; color: #1e1e1e; font-variant-numeric: tabular-nums; white-space: nowrap;}
.marketing-ops .mo-animation .viz-f04 .f04-score-of {display: flex; gap: 8px; align-items: flex-end; font-size: 24px; line-height: 30px; letter-spacing: 1px; color: #6a6b6b;}
/* Keep the score's smaller numerals native-sized, not page-copy sized on mobile. */
.marketing-ops .mo-animation .viz-f04 .f04-score-of p {font-size: inherit; line-height: inherit;}
.marketing-ops .mo-animation .viz-f04 .f04-slash {width: 11px; height: 24px;}
.marketing-ops .mo-animation .viz-f04 .f04-hundred {width: 41px; height: 22px;}

/* Custom tools */
.marketing-ops .mo-animation .viz-f05 .viz-stage {font-family: var(--font-sans); font-weight: var(--w-neutral); color: #000;}
.marketing-ops .mo-animation .viz-f05 .f05-frame {position: absolute; inset: 0; border-radius: 4px; overflow: hidden;}
.marketing-ops .mo-animation .viz-f05 .f05-bg {position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover;}
.marketing-ops .mo-animation .viz-f05 .f05-shade {position: absolute; inset: 0; background: rgba(0,0,0,.2);}
.marketing-ops .mo-animation .viz-f05 .f05-ico {width: 24px; height: 24px; border-radius: 4.8px; background: #f8dcf9; position: relative; flex-shrink: 0; overflow: hidden;}
.marketing-ops .mo-animation .viz-f05 .f05-ico svg {position: absolute; left: 2.4px; top: 2.4px; display: block;}
.marketing-ops .mo-animation .viz-f05 .f05-ico--r svg {left: 1.8px; top: 1.8px;}
.marketing-ops .mo-animation .viz-f05 .f05-dash {position: absolute; left: 25px; top: 25px; width: 282px; height: 350px; background: #fff; border-radius: 8px;}
.marketing-ops .mo-animation .viz-f05 .f05-dash-head {position: absolute; left: 0; top: 0; width: 282px; height: 52.149px; padding: 16px; display: flex; align-items: center; gap: 11px;}
.marketing-ops .mo-animation .viz-f05 .f05-dash-head p {font-size: 14px; line-height: 15px; white-space: nowrap;}
.marketing-ops .mo-animation .viz-f05 .f05-area {position: absolute; left: 16px; top: 82.23px; display: block;}
.marketing-ops .mo-animation .viz-f05 .f05-line {position: absolute; left: 15.675px; top: 81.864px; display: block;}
.marketing-ops .mo-animation .viz-f05 .f05-stats {position: absolute; left: 16px; top: 278.8px; width: 250px; height: 71.203px; padding: 16px 0; display: flex; align-items: center; justify-content: space-between;}
.marketing-ops .mo-animation .viz-f05 .f05-stat {width: 69px; display: flex; flex-direction: column; align-items: flex-start; white-space: nowrap;}
.marketing-ops .mo-animation .viz-f05 .f05-stat--auto {width: auto;}
.marketing-ops .mo-animation .viz-f05 .f05-num {font-weight: var(--w-slim); font-size: 24px; line-height: normal; letter-spacing: 1px; font-variant-numeric: tabular-nums;}
.marketing-ops .mo-animation .viz-f05 .f05-lbl {font-size: 10px; line-height: 15px;}
.marketing-ops .mo-animation .viz-f05 .f05-div {align-self: stretch; width: 1px; margin: 0 -.5px; background: #dee1e6;}
.marketing-ops .mo-animation .viz-f05 .f05-dot {position: absolute; width: 6px; height: 6px;}
.marketing-ops .mo-animation .viz-f05 .f05-dot > span {display: block; width: 6px; height: 6px; border-radius: 50%; background: #ff5d02;}
.marketing-ops .mo-animation .viz-f05 .f05-comp {position: absolute; left: 331px; top: 25px; width: 256px; height: 197px; padding: 16px; background: #f9f5ec; border-radius: 8px; display: flex; flex-direction: column; justify-content: space-between;}
.marketing-ops .mo-animation .viz-f05 .f05-comp-top {display: flex; flex-direction: column; gap: 15px;}
.marketing-ops .mo-animation .viz-f05 .f05-comp-head {display: flex; align-items: center; gap: 8px;}
.marketing-ops .mo-animation .viz-f05 .f05-comp-head p, .marketing-ops .mo-animation .viz-f05 .f05-tool-t {font-size: 20px; line-height: 30px; white-space: nowrap;}
.marketing-ops .mo-animation .viz-f05 .f05-body {font-size: 14px; line-height: 15px; white-space: nowrap;}
.marketing-ops .mo-animation .viz-f05 .f05-rows {display: flex; flex-direction: column; gap: 8px;}
.marketing-ops .mo-animation .viz-f05 .f05-row {display: flex; align-items: center; gap: 10px; padding: 10px; background: #f8dcf9; border-radius: 8px;}
.marketing-ops .mo-animation .viz-f05 .f05-row p {font-size: 14px; line-height: 15px; white-space: nowrap;}
.marketing-ops .mo-animation .viz-f05 .f05-rdot {width: 6px; height: 6px; border-radius: 50%; background: #ff5d02; flex-shrink: 0;}
.marketing-ops .mo-animation .viz-f05 .f05-tool {position: absolute; left: 331px; top: 243px; width: 256px; padding: 16px; background: #fff; border-radius: 8px; display: flex; flex-direction: column; gap: 16px;}
.marketing-ops .mo-animation .viz-f05 .f05-tool-head {display: flex; gap: 9px; align-items: flex-start;}
.marketing-ops .mo-animation .viz-f05 .f05-ico--d {margin-top: 3px;}
.marketing-ops .mo-animation .viz-f05 .f05-tool-txt {width: 147px; display: flex; flex-direction: column; gap: 4px;}
.marketing-ops .mo-animation .viz-f05 .f05-tool-t {height: 23px;}
.marketing-ops .mo-animation .viz-f05 .f05-add {display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px; background: #f1f7e1; border: 1px dashed #98a759; border-radius: 8px; font-size: 14px; line-height: 15px; white-space: nowrap;}
.marketing-ops .mo-animation .viz-f05 .f05-add svg {display: block; flex-shrink: 0;}