/* MARA motion layer (portal-motion1): client workspace. New collection, Review / Send, the invitation confirmation and
   Collect Now (Enterprise). Decorative only: every rule here styles this layer's own aria-hidden nodes ([data-mm]) or
   adds a non-layout effect to an existing control (no size, position, text or visibility change of an existing node).
   Motion: 150-400 ms ease-out / gentle spring; prefers-reduced-motion shows final states at once (end of file). */
@property --mm-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
:root {
  --mm-cyan: #22b6d2; --mm-cyan-hi: #5fe0ef; --mm-teal: #158297; --mm-navy: #0b2335; --mm-ink: #193044; --mm-muted: #5b7286;
  --mm-rail: #d3e3ec; --mm-glow: rgba(34, 182, 210, .42);
  --mm-ease: cubic-bezier(.2, .8, .2, 1); --mm-spring: cubic-bezier(.34, 1.56, .64, 1);
}
.mm-none, .mm-off { display: none !important; }
/* A decoration never takes a press: a click on it reaches the control beneath (the card's label, its radio, the button). */
[data-mm][aria-hidden="true"], [data-mm][aria-hidden="true"] * { pointer-events: none; }

/* ---------------------------------------------------------------------------------------------- custody thread */
.mm-spine { position: absolute; left: 0; top: 0; width: 0; height: 0; overflow: visible; pointer-events: none; z-index: 3; }
.mm-spine-svg { position: absolute; left: 0; top: 0; overflow: visible; }
.mm-spine-base { fill: none; stroke: var(--mm-rail); stroke-width: 2; stroke-linecap: round; }
.mm-spine-live { fill: none; stroke: var(--mm-cyan); stroke-width: 2.6; stroke-linecap: round; filter: drop-shadow(0 0 3px rgba(34, 182, 210, .55));
  transition: stroke-dashoffset .4s var(--mm-ease), stroke-dasharray .4s var(--mm-ease); }
.mm-tick { stroke: var(--mm-rail); stroke-width: 2; stroke-linecap: round; transition: stroke .3s var(--mm-ease); }
.mm-tick.is-done, .mm-tick.is-optional-done { stroke: var(--mm-cyan); }
.mm-tick.is-current { stroke: #94dcea; }
.mm-node { fill: #fff; stroke: #bcd3df; stroke-width: 1.6; transform-box: fill-box; transform-origin: center;
  transition: fill .25s var(--mm-ease), stroke .25s var(--mm-ease); }
.mm-node.is-current { stroke: var(--mm-cyan); stroke-width: 2.2; animation: mm-node-breathe 2.4s ease-in-out infinite; }
.mm-node.is-done { fill: var(--mm-cyan); stroke: #fff; }
.mm-node.is-optional { stroke-dasharray: 2 2.4; }
.mm-node.is-optional-done { fill: #a6e6f0; stroke: var(--mm-cyan); }
.mm-node.mm-lit { animation: mm-node-pop .42s var(--mm-spring); }
.mm-node-end.is-ready { fill: var(--mm-teal); stroke: #fff; stroke-width: 2; animation: mm-beacon 2.6s ease-out infinite; }
.mm-spine-badges { position: absolute; left: 0; top: 0; }
.mm-badge { position: absolute; display: grid; place-items: center; border-radius: 50%; opacity: 0; transform: scale(.45);
  background: radial-gradient(circle at 34% 28%, #7eeaf5, #22b0cf 52%, #12809f); color: #fff;
  box-shadow: 0 0 0 3px rgba(34, 182, 210, .16), 0 4px 12px rgba(18, 128, 159, .35);
  transition: opacity .2s var(--mm-ease), transform .34s var(--mm-spring); }
.mm-badge svg { width: 56%; height: 56%; overflow: visible; }
.mm-badge svg path { stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .32s .1s var(--mm-ease); }
.mm-badge.is-done { opacity: 1; transform: none; }
.mm-badge.is-done svg path { stroke-dashoffset: 0; }
.mm-badge::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(34, 182, 210, .6); opacity: 0; }
.mm-badge.mm-pop::after { animation: mm-ripple .62s ease-out; }
.mm-spine.mm-intro .mm-spine-base { stroke-dasharray: calc(var(--mm-total) * 1px) calc(var(--mm-total) * 1px + 12px); animation: mm-draw .62s var(--mm-ease) both; }
.mm-spine.mm-intro .mm-spine-live { transition-delay: .3s; }
.mm-spine.mm-intro .mm-node, .mm-spine.mm-intro .mm-tick { animation: mm-fade-in .32s var(--mm-ease) both; }
.mm-spine.mm-intro .mm-node:nth-child(2), .mm-spine.mm-intro .mm-tick:nth-child(2) { animation-delay: .08s; }
.mm-spine.mm-intro .mm-node:nth-child(3), .mm-spine.mm-intro .mm-tick:nth-child(3) { animation-delay: .16s; }
.mm-spine.mm-intro .mm-node:nth-child(4), .mm-spine.mm-intro .mm-tick:nth-child(4) { animation-delay: .24s; }
.mm-spine.mm-intro .mm-node:nth-child(5), .mm-spine.mm-intro .mm-tick:nth-child(5) { animation-delay: .32s; }

/* ---------------------------------------------------------------------------------------------- choice cards */
label[data-mm-card], label[data-mm-lens] { transition: transform .35s var(--mm-ease); }
label[data-mm-card][data-mm-tilt], label[data-mm-lens][data-mm-tilt] { transform: perspective(900px) rotateX(var(--mm-rx, 0deg)) rotateY(var(--mm-ry, 0deg)); }
.mm-card-fx { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; overflow: hidden; z-index: 2; }
.mm-glare { position: absolute; inset: -1px; opacity: 0; mix-blend-mode: soft-light; transition: opacity .25s var(--mm-ease);
  background: radial-gradient(220px circle at var(--mm-gx, 50%) var(--mm-gy, 40%), rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 60%); }
label[data-mm-tilt] .mm-glare { opacity: 1; }
.mm-sweep { position: absolute; inset: 0; border-radius: inherit; padding: 1.8px; opacity: 0;
  background: conic-gradient(from var(--mm-angle), transparent 0 60%, rgba(95, 224, 239, 0) 64%, #5fe0ef 78%, #22b6d2 85%, transparent 93%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.mm-card-fx[data-mm-sweeping] .mm-sweep { animation: mm-sweep .9s var(--mm-ease) both; }
.mm-card-fx::after { content: ''; position: absolute; left: 14%; right: 14%; bottom: -44%; height: 60%; opacity: 0; transition: opacity .35s var(--mm-ease);
  background: radial-gradient(closest-side, rgba(34, 182, 210, .2), rgba(34, 182, 210, 0)); }
label:has(> input:checked) > .mm-card-fx::after { opacity: 1; }
[data-mm-on] label[data-mm-card] .remote-device-art img { transition: translate .42s var(--mm-spring), filter .42s var(--mm-ease); }
[data-mm-on] label[data-mm-card]:has(> input:checked) .remote-device-art img { translate: 0 -4px; filter: drop-shadow(0 10px 12px rgba(9, 60, 90, .26)); }
label[data-mm-lens] > svg.portal-icon { display: none; }
label[data-mm-lens] > .mm-lens { width: 44px; height: 44px; flex: 0 0 44px; overflow: visible; filter: drop-shadow(0 3px 6px rgba(11, 35, 53, .25)); transition: filter .3s var(--mm-ease), opacity .3s var(--mm-ease); }
label[data-mm-lens]:not(:has(> input:checked)) > .mm-lens { filter: saturate(.45) brightness(1.06); opacity: .82; }
.mm-lens-ring { stroke: rgba(127, 227, 241, .6); stroke-width: 1.2; }
.mm-lens-blades { stroke: rgba(214, 248, 252, .7); stroke-width: 1.05; stroke-linecap: round; }
.mm-lens-hole { opacity: .95; }
.mm-lens-glint { fill: rgba(255, 255, 255, .78); }
.mm-chip-icon .mm-lens { filter: none; }

/* ---------------------------------------------------------------------------------------------- review and send */
.mm-fx { position: absolute; left: 0; top: 0; width: 0; height: 0; overflow: visible; pointer-events: none; z-index: 4; }
.mm-fx > span { position: absolute; pointer-events: none; }
.mm-ready-glow { border-radius: 10px; opacity: 0; transition: opacity .3s var(--mm-ease), box-shadow .3s var(--mm-ease); }
.mm-ready-glow.is-on { opacity: 1; box-shadow: 0 0 0 3px rgba(34, 182, 210, .2), 0 8px 24px rgba(34, 182, 210, .32); }
.mm-ready-glow[data-mm-flash]::after { content: ''; position: absolute; inset: 0; border-radius: inherit; overflow: hidden;
  background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, .55) 50%, transparent 68%) no-repeat; background-size: 240% 100%;
  animation: mm-shine .9s var(--mm-ease) both; }
.mm-seal { box-sizing: border-box; border-radius: 50%; border: 2px solid rgba(34, 182, 210, 0); transition: border-color .25s var(--mm-ease), box-shadow .25s var(--mm-ease); }
.mm-seal.is-on { border-color: rgba(34, 182, 210, .8); box-shadow: 0 0 0 3px rgba(34, 182, 210, .12); }
.mm-seal[data-mm-stamp] { animation: mm-stamp .55s var(--mm-spring); }
.mm-armed-glow { border-radius: 10px; opacity: 0; transition: opacity .3s var(--mm-ease); }
.mm-armed-glow.is-on { opacity: 1; animation: mm-armed 2.8s ease-in-out infinite; box-shadow: 0 0 0 3px rgba(34, 182, 210, .22), 0 10px 28px rgba(21, 130, 151, .34); }
.request-review-panel[data-mm-review-in] > * { animation: mm-rise .42s var(--mm-ease) both; }
.request-review-panel[data-mm-review-in] > :nth-child(2) { animation-delay: .04s; }
.request-review-panel[data-mm-review-in] > :nth-child(3) { animation-delay: .08s; }
.request-review-panel[data-mm-review-in] > :nth-child(4) { animation-delay: .12s; }
.request-review-panel[data-mm-review-in] > :nth-child(5) { animation-delay: .16s; }
.request-review-panel[data-mm-review-in] > :nth-child(n+6) { animation-delay: .2s; }

/* ---------------------------------------------------------------------------------------------- invitation confirmation */
.mm-flight { position: relative; margin: 6px 0 20px; }
.mm-lane { position: relative; height: 62px; }
.mm-lane-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mm-lane-trail { fill: none; stroke: #b7dfea; stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1.5 5.5; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity .4s var(--mm-ease); }
.mm-flight[data-phase=flying] .mm-lane-trail { opacity: 1; }
.mm-env { position: absolute; left: 50%; top: 8px; width: 46px; height: 32px; margin-left: -23px; opacity: 0; scale: 1; transform-style: preserve-3d;
  transition: left .7s cubic-bezier(.3, .7, .2, 1), top .7s cubic-bezier(.6, 0, .4, 1), scale .45s var(--mm-spring), opacity .3s var(--mm-ease); }
.mm-env-back { position: absolute; inset: 0; border-radius: 5px; background: linear-gradient(160deg, #d9eff6, #c5e6ef); border: 1.5px solid #9fd4e3; }
.mm-env-card { position: absolute; left: 5px; right: 5px; top: 3px; height: 26px; display: grid; align-content: center; gap: 2px; padding: 0 4px;
  border: 1px solid #cfe5ee; border-radius: 3px; background: #fff; color: var(--mm-ink); box-shadow: 0 1px 3px rgba(16, 58, 82, .14); }
.mm-env-card i { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-style: normal; line-height: 1.1; }
.mm-env-name::before { content: attr(data-v); font-size: 7px; font-weight: 800; }
.mm-env-meta::before { content: attr(data-v); font-size: 5.5px; color: var(--mm-muted); }
.mm-env-front { position: absolute; inset: 0; border-radius: 5px; clip-path: polygon(0 30%, 50% 70%, 100% 30%, 100% 100%, 0 100%);
  background: linear-gradient(170deg, #ffffff, #e6f4f9); border: 1.5px solid #9fd4e3; box-shadow: 0 6px 14px rgba(16, 58, 82, .16); }
.mm-env-flap { position: absolute; left: 0; right: 0; top: 0; height: 60%; transform-origin: top center; clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: linear-gradient(#eaf7fb, #bfe5ef); transform: perspective(140px) rotateX(0deg); transition: transform .3s var(--mm-ease); backface-visibility: visible; }
.mm-flight[data-phase=fold] .mm-env { opacity: 1; scale: 1.8; }
.mm-flight[data-phase=fold] .mm-env-card { animation: mm-card-in .6s var(--mm-ease) both; }
.mm-flight[data-phase=fold] .mm-env-flap { animation: mm-flap-close .62s var(--mm-ease) both; }
.mm-flight[data-phase=flying] .mm-env { opacity: 1; left: 12.5%; top: 2px; }
.mm-flight[data-phase=flying] .mm-env-front, .mm-flight[data-phase=flying] .mm-env-back, .mm-flight[data-phase=flying] .mm-env-flap { animation: mm-bob 1.8s .75s ease-in-out infinite alternate; }
.mm-flight[data-phase=flying] .mm-env-card { opacity: 0; }
.mm-flight[data-phase=landed] .mm-env { left: 12.5%; top: 44px; scale: .3; opacity: 0; transition-duration: .42s; }
.mm-flight[data-phase=parked] .mm-env { opacity: .4; }
.mm-flight[data-phase=idle] .mm-env { transition: none; }
.mm-steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.mm-steps::before { content: ''; position: absolute; left: 12.5%; right: 12.5%; top: 8px; height: 2px; border-radius: 2px; background: var(--mm-rail); }
.mm-steps::after { content: ''; position: absolute; left: 12.5%; width: 0; top: 8px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--mm-cyan), rgba(34, 182, 210, 0));
  transition: width .6s .2s var(--mm-ease); }
.mm-flight[data-phase=landed] .mm-steps::after { width: 16%; }
.mm-steps li { position: relative; display: grid; justify-items: center; gap: 7px; min-width: 0; }
.mm-step-dot { position: relative; z-index: 1; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid #cfe0ea; box-sizing: border-box; }
.mm-steps i { font-style: normal; font-size: 12px; font-weight: 650; color: #6b8496; text-align: center; }
.mm-steps i::before { content: attr(data-v); }
.mm-flight[data-phase=flying] li[data-i="0"] .mm-step-dot { border-color: var(--mm-cyan); animation: mm-ring 1.8s ease-out infinite; }
.mm-flight[data-phase=landed] li[data-i="0"] .mm-step-dot { background: var(--mm-cyan); border-color: var(--mm-cyan); box-shadow: 0 0 0 4px rgba(34, 182, 210, .18); animation: mm-node-pop-box .45s var(--mm-spring) both; }
.mm-flight[data-phase=landed] li[data-i="0"] .mm-step-dot::after { content: ''; position: absolute; left: 4.5px; top: 2.5px; width: 4px; height: 7.5px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.mm-flight[data-phase=landed] li[data-i="0"] i { color: var(--mm-teal); }
.mm-flight[data-phase=landed] li[data-i="1"] .mm-step-dot { border-color: #94dcea; animation: mm-ring 2.4s .5s ease-out infinite; }
.mm-flight[data-state=attention] .mm-steps, .mm-flight[data-state=review] .mm-steps, .mm-flight[data-state=waiting] .mm-steps { opacity: .55; }

/* ---------------------------------------------------------------------------------------------- Collect Now bench */
.collect-now-setup-header:has(> .mm-bench) { min-height: 196px; }
.collect-now-setup-header:has(> .mm-bench) .collect-now-intro { max-width: calc(100% - 340px); }
.mm-bench { position: absolute; right: 28px; bottom: 10px; width: 310px; height: 167px; pointer-events: none; animation: mm-fade-in .4s var(--mm-ease) both; }
.mm-bench-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.mm-desk-line { stroke: rgba(127, 227, 241, .3); stroke-width: 1; }
.mm-laptop-shell { fill: #14405a; stroke: #5cc8de; stroke-width: 1.3; }
.mm-laptop-base { fill: #10344a; stroke: #4cb2cb; stroke-width: 1.3; }
.mm-laptop-lid { transform-box: fill-box; transform-origin: 50% 100%; animation: mm-lid-open .55s .08s var(--mm-ease) both; }
.mm-laptop-display { transition: filter .4s var(--mm-ease); }
.mm-mark-glyph { fill: none; stroke: #8beef7; stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; opacity: .5; transition: opacity .3s; }
.mm-mark-tri { fill: #3ccbe2; opacity: .55; transition: opacity .3s; }
.mm-mark-halo { fill: rgba(60, 203, 226, .18); opacity: 0; transform-box: fill-box; transform-origin: center; }
.mm-scan { stroke: rgba(139, 238, 247, .45); stroke-width: 1; opacity: 0; }
.mm-port { fill: #3d9ab5; transition: fill .3s; }
.mm-phones { animation: mm-drop-in .5s .16s var(--mm-spring) both; }
.mm-phone-glow { fill: rgba(60, 203, 226, .14); filter: blur(10px); opacity: .7; }
.mm-phone { transition: opacity .32s var(--mm-ease), translate .38s var(--mm-spring); }
.mm-phone-shell { fill: #11384f; stroke: #6fdcec; stroke-width: 1.4; }
.mm-phone-screen { fill: #0a2738; }
.mm-island { fill: #03121c; }
.mm-bench[data-phone=iphone] .mm-phone-android, .mm-bench[data-phone=android] .mm-phone-iphone { opacity: 0; translate: 0 -10px; }
.mm-screen-full, .mm-screen-targeted { opacity: 0; transition: opacity .3s var(--mm-ease); }
.mm-bench[data-scope=full] .mm-screen-full, .mm-bench[data-scope=categories] .mm-screen-targeted { opacity: 1; }
.mm-tile { fill: #36b4cf; opacity: .9; }
.mm-bench[data-mm-change-scope] .mm-tile, .mm-bench[data-mm-change-phone] .mm-tile { animation: mm-tile-on .55s var(--mm-ease) both; }
.mm-tile:nth-child(3n+2) { animation-delay: .04s; } .mm-tile:nth-child(3n) { animation-delay: .08s; }
.mm-tile:nth-child(n+4):nth-child(-n+6) { animation-delay: .12s; } .mm-tile:nth-child(n+7):nth-child(-n+9) { animation-delay: .18s; } .mm-tile:nth-child(n+10) { animation-delay: .24s; }
.mm-tgt path, .mm-tgt circle { fill: none; stroke: #8beef7; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mm-bench[data-mm-change-scope] .mm-tgt { animation: mm-rise-svg .4s var(--mm-ease) both; }
.mm-bench[data-mm-change-scope] .mm-tgt-2 { animation-delay: .06s; } .mm-bench[data-mm-change-scope] .mm-tgt-3 { animation-delay: .12s; }
.mm-dest path, .mm-dest rect, .mm-dest circle { fill: none; stroke: #8beef7; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mm-dest { opacity: 0; transition: opacity .3s var(--mm-ease), translate .35s var(--mm-spring); translate: 0 6px; }
.mm-bench[data-delivery=cloud] .mm-dest-cloud, .mm-bench[data-delivery=local] .mm-dest-local { opacity: 1; translate: 0 0; }
.mm-seal-shield { fill: rgba(60, 203, 226, .08); stroke: #3d9ab5; stroke-width: 1.4; stroke-linejoin: round; transition: fill .3s, stroke .3s; }
.mm-seal-check { fill: none; stroke: #8beef7; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 15; stroke-dashoffset: 15; transition: stroke-dashoffset .35s .05s var(--mm-ease); }
.mm-bench[data-authorized=true] .mm-seal-shield { fill: rgba(60, 203, 226, .3); stroke: #8beef7; }
.mm-bench[data-authorized=true] .mm-seal-check { stroke-dashoffset: 0; }
.mm-bench[data-mm-change-authorized][data-authorized=true] .mm-seal-badge { animation: mm-seal-pop .5s var(--mm-spring); transform-box: fill-box; transform-origin: center; }
.mm-cable { fill: none; stroke: url(#mm-cable-g); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 130; stroke-dashoffset: 130; transition: stroke-dashoffset .6s var(--mm-ease); }
.mm-sparks circle { fill: #9ff3fa; opacity: 0; }
.mm-bench[data-stage=connecting] .mm-cable, .mm-bench[data-stage=ready] .mm-cable { stroke-dashoffset: 0; }
.mm-bench[data-stage=connecting] .mm-sparks circle { animation: mm-spark 1.2s .5s ease-in-out infinite; }
.mm-bench[data-stage=connecting] .mm-sparks circle:nth-child(2) { animation-delay: .8s; }
.mm-bench[data-stage=connecting] .mm-sparks circle:nth-child(3) { animation-delay: 1.1s; }
.mm-bench[data-stage=connecting] .mm-port, .mm-bench[data-stage=ready] .mm-port { fill: #8beef7; }
.mm-bench[data-stage=connecting] .mm-mark-glyph, .mm-bench[data-stage=ready] .mm-mark-glyph,
.mm-bench[data-stage=connecting] .mm-mark-tri, .mm-bench[data-stage=ready] .mm-mark-tri { opacity: 1; }
.mm-bench[data-stage=connecting] .mm-laptop-display, .mm-bench[data-stage=ready] .mm-laptop-display { filter: brightness(1.35); }
.mm-bench[data-stage=connecting] .mm-mark-halo { animation: mm-halo 1.1s .45s ease-out infinite; }
.mm-bench[data-stage=connecting] .mm-scan { opacity: 1; animation: mm-scan 1.3s linear infinite; }
.mm-bench[data-stage=ready] .mm-mark-halo { opacity: 1; animation: mm-breathe 3.2s ease-in-out infinite; }
@media (max-width: 720px) {
  .collect-now-setup-header:has(> .mm-bench) { min-height: 0; }
  .collect-now-setup-header:has(> .mm-bench) .collect-now-intro { max-width: none; }
  .collect-now-setup-header > .mm-bench { position: relative; right: auto; bottom: auto; width: min(300px, 100%); height: auto; aspect-ratio: 320 / 172; margin: 14px auto -4px; }
}
.mm-ready { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 18px; align-items: center; margin: 4px 0 16px; }
.mm-ready .mm-bench { position: relative; right: auto; bottom: auto; width: 210px; height: auto; aspect-ratio: 320 / 172; padding: 4px 6px 0; border-radius: 14px;
  background: radial-gradient(ellipse at 80% 0%, #20566d, transparent 70%), #0b2335; box-shadow: 0 10px 26px rgba(11, 35, 53, .22); }
.mm-rail { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.mm-rail li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: #29485c; }
.mm-rail i { font-style: normal; font-weight: 700; }
.mm-rail i::before, .mm-rail b::before { content: attr(data-v); }
.mm-rail b { font-weight: 500; color: var(--mm-muted); }
.mm-rail-dot { position: relative; flex: 0 0 18px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #cfe0ea; box-sizing: border-box; }
.mm-rail li[data-s=done] .mm-rail-dot { background: var(--mm-cyan); border-color: var(--mm-cyan); animation: mm-node-pop-box .45s var(--mm-spring) both; }
.mm-rail li[data-s=done] .mm-rail-dot::after { content: ''; position: absolute; left: 4.5px; top: 2px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.mm-rail li[data-s=working] .mm-rail-dot { border-color: #b9dfe9; border-top-color: var(--mm-cyan); animation: mm-spin .9s linear infinite; }
.mm-rail li[data-s=waiting] .mm-rail-dot { border-color: var(--mm-cyan); animation: mm-ring 2.6s ease-out infinite; }
.mm-rail li[data-s=attention] .mm-rail-dot { border-color: #d8b26a; }
@media (max-width: 560px) {
  .mm-ready { grid-template-columns: minmax(0, 1fr); }
  .mm-ready .mm-bench { width: min(260px, 100%); margin: 0 auto; }
}

/* ---------------------------------------------------------------------------------------------- Collect Now: job created */
/* Owner-requested redesign: Open MARA on this computer first, install or update second, the Android app as a secondary
   alternative; the same controls, moved into steps (see workspace-motion.mjs restructureReady). */
.collect-now-dialog > .collect-now-actions[data-mm-moved]:empty { display: none; }
.mm-flow { display: grid; gap: 12px; margin: 16px 0 14px; }
.mm-step { display: grid; gap: 12px; margin: 0; padding: 16px 18px; border: 1px solid #d3e3ec; border-radius: 16px; background: linear-gradient(135deg, #fff, #f6fafc); }
.mm-step-open { border-color: #92d4e3; background: linear-gradient(135deg, #f2fbfd, #e5f5f9); box-shadow: 0 12px 28px rgba(21, 130, 151, .13); }
.mm-step-alt { border-style: dashed; background: #fbfdfe; }
.mm-step-head { display: flex; align-items: flex-start; gap: 13px; }
.mm-step-icon { display: grid; flex: 0 0 38px; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: var(--mm-teal); background: #e3f3f7; }
.mm-step-open .mm-step-icon { color: #fff; background: linear-gradient(135deg, #34c8de, #0f7f9e); box-shadow: 0 6px 16px rgba(21, 130, 151, .32); }
.mm-step-icon svg { width: 21px; height: 21px; }
.mm-step-words { min-width: 0; }
.mm-step-words h3 { margin: 1px 0 4px; color: var(--mm-ink); font-size: 16px; line-height: 1.3; }
.mm-step-words p { margin: 0; color: #4d677a; font-size: 13px; line-height: 1.45; }
.mm-step-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-left: 51px; }
.mm-step-actions > :is(a, button) { width: auto; margin: 0; }
.mm-step-open .mm-step-actions > a.primary { flex: 0 1 300px; display: inline-flex; justify-content: center; align-items: center; min-height: 46px; font-size: 15.5px; border-radius: 11px; }
.mm-step-install .mm-step-actions > button[data-mm-preferred=true] { min-height: 40px; padding-inline: 18px; border-radius: 10px; }
.mm-step-install .mm-step-actions > button[data-mm-preferred=false] { min-height: 40px; border-color: transparent; background: transparent; box-shadow: none; color: var(--mm-teal); text-decoration: underline; text-underline-offset: 3px; }
.mm-step-install > p.hint, .mm-step-install > p { margin: 0; padding-left: 51px; font-size: 12.5px; line-height: 1.45; }
.mm-step-alt .mm-step-actions > button.android-app-ready { min-height: 40px; padding-inline: 18px; border: 1.5px solid #9ad3e2; border-radius: 10px; background: #fff; box-shadow: none; color: var(--mm-teal); }
.mm-flow > p[data-mm-note=credit] { margin: 0 4px; color: #6b8496; font-size: 12px; line-height: 1.5; }
.mm-flow > * { animation: mm-rise .4s var(--mm-ease) both; }
.mm-flow > :nth-child(2) { animation-delay: .07s; } .mm-flow > :nth-child(3) { animation-delay: .14s; } .mm-flow > :nth-child(n+4) { animation-delay: .2s; }
.mm-open-glow { position: absolute; z-index: 4; border-radius: 11px; pointer-events: none; animation: mm-armed 2.8s ease-in-out infinite;
  box-shadow: 0 0 0 3px rgba(34, 182, 210, .22), 0 10px 28px rgba(21, 130, 151, .34); }
@media (max-width: 560px) {
  .mm-step { padding: 14px; }
  .mm-step-actions, .mm-step-install > p.hint, .mm-step-install > p { padding-left: 0; }
  .mm-step-actions > :is(a, button) { flex: 1 1 100%; }
}
/* ---------------------------------------------------------------------------------------------- product rules (not motion) */
/* The styles of the patched modules' own elements (motion1_patches.py); the rules themselves hold without these styles.
   Android Targeted hold: the Targeted card stays visible for Android, unavailable, with the reason under the cards (New
   collection; Collect Now already dims a disabled choice). Mac: Targeted needs the custodian on a Windows PC (the New
   collection note and the questionnaire summary's flag). [hidden] always wins. */
label.request-choice-card.is-unavailable { cursor: not-allowed; opacity: .55; filter: saturate(.25); box-shadow: none; }
label.request-choice-card.is-unavailable > input { cursor: not-allowed; }
p.hint:is(.request-android-hold, .request-mac-note, .collect-now-android-hold):not([hidden]) { display: flex; align-items: flex-start; gap: 10px;
  margin: 12px 0 0; padding: 11px 14px; border-radius: 12px; font-size: 13px; line-height: 1.45; }
p.hint:is(.request-android-hold, .request-mac-note, .collect-now-android-hold)::before { flex: 0 0 18px; display: grid; place-items: center; width: 18px; height: 18px;
  margin-top: 1px; border-radius: 50%; color: #fff; font: 800 11.5px/1 system-ui, sans-serif; }
p.hint:is(.request-android-hold, .collect-now-android-hold) { color: #5a430e; background: #fff8e6; border: 1px solid #efd7a0; }
fieldset.collect-now-scope > p.hint.collect-now-android-hold { grid-column: 1 / -1; }
p.hint:is(.request-android-hold, .collect-now-android-hold)::before { content: '!'; background: #c58a15; }
p.hint.request-mac-note { color: #173f60; background: #eef6fd; border: 1px solid #c7def2; }
p.hint.request-mac-note::before { content: 'i'; background: #2f7fc0; font-style: italic; font-family: Georgia, 'Times New Roman', serif; }
#collection-questionnaire p.questionnaire-mac-flag { margin: 12px 0 0; padding: 11px 14px; border-radius: 12px; color: #5a430e; background: #fff8e6;
  border: 1px solid #efd7a0; font-weight: 600; line-height: 1.45; }

/* ---------------------------------------------------------------------------------------------- keyframes */
@keyframes mm-draw { from { stroke-dashoffset: calc(var(--mm-total) * 1px); } to { stroke-dashoffset: 0; } }
@keyframes mm-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes mm-node-pop { 0% { transform: scale(.4); } 60% { transform: scale(1.4); } 100% { transform: scale(1); } }
@keyframes mm-node-pop-box { 0% { transform: scale(.5); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes mm-node-breathe { 0%, 100% { stroke-opacity: 1; } 50% { stroke-opacity: .4; } }
@keyframes mm-beacon { 0% { filter: drop-shadow(0 0 0 rgba(34, 182, 210, 0)); } 30% { filter: drop-shadow(0 0 6px rgba(34, 182, 210, .8)); } 100% { filter: drop-shadow(0 0 0 rgba(34, 182, 210, 0)); } }
@keyframes mm-ripple { from { opacity: .9; transform: scale(.7); } to { opacity: 0; transform: scale(1.65); } }
@keyframes mm-tag-in { from { opacity: 0; transform: translateY(-6px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes mm-chip-pop { 0% { transform: scale(.86); } 55% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes mm-caret { 50% { opacity: 0; } }
@keyframes mm-sweep { 0% { opacity: 0; --mm-angle: 0deg; } 14% { opacity: 1; } 82% { opacity: 1; } 100% { opacity: 0; --mm-angle: 340deg; } }
@keyframes mm-shine { from { background-position: 120% 0; } to { background-position: -40% 0; } }
@keyframes mm-stamp { 0% { transform: scale(1.7); opacity: 0; } 60% { transform: scale(.92); opacity: 1; } 100% { transform: scale(1); } }
@keyframes mm-armed { 0%, 100% { box-shadow: 0 0 0 3px rgba(34, 182, 210, .2), 0 10px 26px rgba(21, 130, 151, .3); } 50% { box-shadow: 0 0 0 5px rgba(34, 182, 210, .28), 0 12px 34px rgba(21, 130, 151, .45); } }
@keyframes mm-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes mm-rise-svg { from { opacity: 0; translate: 0 4px; } to { opacity: 1; translate: 0 0; } }
@keyframes mm-card-in { 0% { transform: translateY(-30px); } 55% { transform: translateY(-30px); } 100% { transform: translateY(0); } }
@keyframes mm-flap-close { 0%, 60% { transform: perspective(140px) rotateX(180deg); } 100% { transform: perspective(140px) rotateX(0deg); } }
@keyframes mm-spark { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
@keyframes mm-seal-pop { 0% { scale: 1; } 45% { scale: 1.22; } 100% { scale: 1; } }
@keyframes mm-bob { from { translate: 0 0; } to { translate: 0 -3px; } }
@keyframes mm-ring { 0% { box-shadow: 0 0 0 0 rgba(34, 182, 210, .45); } 70% { box-shadow: 0 0 0 9px rgba(34, 182, 210, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 182, 210, 0); } }
@keyframes mm-spin { to { transform: rotate(360deg); } }
@keyframes mm-tile-on { 0% { fill: #1f6f8b; } 45% { fill: #9cf0f8; } 100% { fill: #2a9cb8; } }
@keyframes mm-halo { 0% { opacity: .9; transform: scale(.55); } 100% { opacity: 0; transform: scale(1.35); } }
@keyframes mm-breathe { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes mm-scan { from { translate: 0 0; } to { translate: 0 56px; } }
@keyframes mm-lid-open { from { transform: perspective(300px) rotateX(-70deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes mm-drop-in { from { translate: 0 -14px; opacity: 0; } to { translate: 0 0; opacity: 1; } }

/* ---------------------------------------------------------------------------------------------- reduced motion: final states */
@media (prefers-reduced-motion: reduce) {
  [data-mm], [data-mm] *, [data-mm]::before, [data-mm]::after, [data-mm] *::before, [data-mm] *::after,
  label[data-mm-card], label[data-mm-lens], [data-mm-on] label[data-mm-card] .remote-device-art img,
  .request-review-panel[data-mm-review-in] > *, .mm-flow > * { animation: none !important; transition: none !important; }
  label[data-mm-card], label[data-mm-lens] { transform: none !important; }
  .mm-flight[data-phase=fold] .mm-env, .mm-flight[data-phase=flying] .mm-env { opacity: 1; left: 12.5%; top: 2px; scale: 1; }
  .mm-flight[data-phase=fold] .mm-env-flap { transform: none; }
  .mm-flight[data-phase=fold] .mm-env-card { opacity: 0; }
}
