/* Product moments (preview 8, Amendment 8; preview 10 content per Amendment 10): one or two small cards in the EchoOS app's own look
   (desktop/v1 design tokens: surface #18181b, border #ffffff14, ink #f4f4f5, muted #a1a1aa,
   primary #8655f6, Manrope body, Space Grotesk display, node radius 16px, lucide icons),
   floating alone on the section background. Each plays a short 2 to 4 state loop
   (assets/moments.js). Without JS, or with reduced motion, the markup shows the final state. */

.mo {
  --m-surface: #18181b; --m-raised: #232328; --m-border: #ffffff14; --m-ink: #f4f4f5;
  --m-muted: #a1a1aa; --m-primary: #8655f6; --m-primary-press: #7c3aed; --m-blue: #3b82f6;
  position: relative; font-family: Manrope, sans-serif; color: var(--m-ink);
  -webkit-font-smoothing: antialiased; text-align: left; line-height: 1.4;
}
.mo *, .mo *::before, .mo *::after { box-sizing: border-box; }
:where(.mo) p, :where(.mo) ol { margin: 0; padding: 0; list-style: none; }

/* State machine: an element with class .st shows only while the moment's data-s is one of
   the words in its data-on list. data-s="end" is the final state (static default). */
.mo .st { opacity: 0; transform: translateY(6px); transition: opacity .4s ease, transform .4s cubic-bezier(.16,1,.3,1); pointer-events: none; }
.mo[data-s="1"] .st[data-on~="1"], .mo[data-s="2"] .st[data-on~="2"], .mo[data-s="3"] .st[data-on~="3"],
.mo[data-s="4"] .st[data-on~="4"], .mo[data-s="end"] .st[data-on~="end"] { opacity: 1; transform: none; }
/* .coll parts also fold their height away when hidden, so the card resizes smoothly */
.mo .coll { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s cubic-bezier(.16,1,.3,1), opacity .35s ease, transform .4s ease; }
.mo .coll > * { min-height: 0; overflow: hidden; }
.mo[data-s="1"] .coll[data-on~="1"], .mo[data-s="2"] .coll[data-on~="2"], .mo[data-s="3"] .coll[data-on~="3"],
.mo[data-s="4"] .coll[data-on~="4"], .mo[data-s="end"] .coll[data-on~="end"] { grid-template-rows: 1fr; }
.mo .stack { display: grid; }
.mo .stack > * { grid-area: 1 / 1; }
.mo.is-out .mc, .mo.is-out .mc-pill { opacity: 0; transition: opacity .35s ease; }

/* Cards */
.mc {
  background: var(--m-surface); border: 1px solid var(--m-border); border-radius: 16px;
  box-shadow: 0 1px 2px 0 #0009, 0 24px 60px -12px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.02);
  transition: opacity .45s ease, transform .45s cubic-bezier(.16,1,.3,1);
}
.mc-node { border-left-width: 2px; }
.mc-node.is-source { border-left-color: var(--m-blue); }
.mc-node.is-neutral { border-left-color: var(--m-muted); }
.mc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--m-border); }
.mc-title { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 600; font-size: 15px; white-space: nowrap; }
.mc-title > .stack { min-width: 0; }
.mc-title .stack > span { overflow: hidden; text-overflow: ellipsis; }
.mc-body { padding: 14px 16px 16px; }
.ic { width: 17px; height: 17px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ic-blue { color: var(--m-blue); }
.ic-muted { color: var(--m-muted); }

/* StatusBadge.tsx */
.badge { display: inline-flex; align-items: center; justify-self: end; min-height: 24px; padding: 2px 9px; border-radius: 999px; font-size: 12.5px; white-space: nowrap; }
.b-load { background: rgba(168,85,247,.10); color: #d8b4fe; }
.b-ready { background: rgba(34,197,94,.10); color: #4ade80; }

/* LocalVideoSource.tsx progress: stage label + pulsing bar */
.mc-status { font-size: 14px; color: var(--m-muted); }
.bar { margin-top: 10px; height: 6px; border-radius: 4px; background: var(--m-raised); overflow: hidden; }
.bar > i { display: block; height: 100%; width: 33%; background: var(--m-primary); animation: mo-pulse 1.6s ease-in-out infinite; }
@keyframes mo-pulse { 50% { opacity: .45; } }

/* Link pill (a pasted link) */
.mc-pill {
  display: inline-flex; align-items: center; gap: 10px; padding: 11px 16px; border-radius: 12px;
  background: rgba(24,24,27,.85); border: 1px solid rgba(134,85,246,.45); box-shadow: 0 0 0 4px rgba(134,85,246,.10), 0 16px 40px -12px rgba(0,0,0,.7);
  font-size: 15px; font-weight: 500; white-space: nowrap; transition: opacity .45s ease, transform .45s ease;
}
.mc-pill .ic { color: var(--m-blue); }
.caret { display: inline-block; width: 2px; height: 18px; margin-left: 1px; background: var(--m-primary); vertical-align: -3px; opacity: 0; }
.mo.is-typing .caret { opacity: 1; animation: mo-blink .9s steps(1) infinite; }
@keyframes mo-blink { 50% { opacity: 0; } }

/* Drafts page pieces (DraftsPage.tsx) */
.mc-draft { background: rgba(24,24,27,.92); padding: 18px 20px 20px; border-radius: 16px; }
.d-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.d-plat { font-size: 13px; font-weight: 500; color: var(--m-muted); }
.d-status { font-size: 13px; font-weight: 600; justify-self: end; }
.amber { color: rgba(252,211,77,.9); }
.green { color: #4ade80; }
.d-text { font-size: 15.5px; line-height: 1.5; }
.d-text.old { color: var(--m-muted); }
/* spacing lives inside .coll parts, so a folded part takes no height */
.d-form .d-label { border-top: 1px solid var(--m-border); margin-top: 16px; padding-top: 14px; }
.d-label { font-size: 14px; font-weight: 500; margin-bottom: 8px; }
.d-field { min-height: 42px; padding: 9px 12px; border-radius: 8px; border: 1px solid var(--m-border); background: rgba(0,0,0,.3); font-size: 15px; }
.mo .d-field.is-focus { border-color: var(--m-primary); }
.d-row { display: flex; justify-content: flex-end; margin-top: 10px; }
.d-actions > div { display: flex; align-items: center; gap: 8px; }
.d-actions .btn { margin-top: 18px; }

/* Buttons: the moment's one action wears the app's primary purple */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 15px; border-radius: 8px; font-size: 14.5px; font-weight: 600; white-space: nowrap; transition: transform .12s ease, background-color .2s ease, box-shadow .2s ease; }
.btn-primary { background: var(--m-primary); color: #fff; box-shadow: 0 0 0 4px rgba(134,85,246,.12), 0 8px 24px -6px rgba(134,85,246,.55); }
.btn-quiet { color: var(--m-muted); font-weight: 400; padding: 8px 10px; }
.btn-line { border: 1px solid var(--m-border); color: var(--m-ink); font-weight: 400; border-radius: 6px; padding: 6px 12px; }
.btn-line.is-accent { border-color: rgba(134,85,246,.7); box-shadow: 0 0 0 4px rgba(134,85,246,.12); }
.mo .is-press { transform: scale(.94); }
.mo .btn-primary.is-press { background: var(--m-primary-press); }

/* ClipNode.tsx pieces */
.c-check { display: flex; align-items: center; gap: 9px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--m-border); font-size: 14.5px; }
.c-check .muted { color: var(--m-muted); }
.box { position: relative; width: 17px; height: 17px; flex-shrink: 0; border-radius: 4px; border: 1.5px solid #71717a; background: transparent; transition: background-color .2s ease, border-color .2s ease; }
.box .ic { position: absolute; inset: 1px; width: 12px; height: 12px; color: #fff; stroke-width: 3.2; opacity: 0; transition: opacity .2s ease; }
.mo .box.on { background: var(--m-primary); border-color: var(--m-primary); }
.mo .box.on .ic { opacity: 1; }
.c-saved { font-size: 13px; color: var(--m-muted); }

/* Cursor (site illustration, like a pointer demo) */
.mo-cursor { position: absolute; left: 0; top: 0; width: 22px; height: 22px; z-index: 5; opacity: 0; pointer-events: none;
  transition: transform .75s cubic-bezier(.45,.05,.25,1), opacity .3s ease; filter: drop-shadow(0 2px 4px rgba(0,0,0,.6)); }
.mo.is-cursor .mo-cursor { opacity: 1; }
.mo-cursor svg { display: block; width: 22px; height: 22px; transition: transform .12s ease; }
.mo-cursor.is-press svg { transform: scale(.82); }

/* Shared: the sample video's thumbnail (MediaNodeContent shows it on a video Source) and the
   [transcript] placeholder (grey lines under the app's "Transcript" label; no sample sentences). */
.mo picture { display: block; }
.mo picture img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cf > picture, .sf > picture, .split-full > picture { width: 100%; height: 100%; }
.orb-core img { transform: scale(1.4); transform-origin: 50% 28%; } /* the face, not the thumbnail's caption */
.thumb { aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #000; box-shadow: 0 0 0 1px rgba(255,255,255,.06); }
.tx { display: flex; flex-direction: column; gap: 8px; }
.tx-label { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--m-muted); }
.tx-label .ic { width: 14px; height: 14px; }
.tx-bars { display: flex; flex-direction: column; gap: 6px; }
.tx-bars i { display: block; height: 6px; border-radius: 3px; background: rgba(255,255,255,.13); }
.mo .tx .tx-bars i { transform-origin: left; transition: transform .5s cubic-bezier(.16,1,.3,1); }
.mo:not([data-s="end"]):not([data-s="3"]) .tx:not(.is-on) .tx-bars i { transform: scaleX(.2); }
.mo[data-s="2"] .tx .tx-bars i, .mo[data-s="end"] .tx .tx-bars i { transform: none; }
.mo .tx-bars i:nth-child(2) { transition-delay: .08s; } .mo .tx-bars i:nth-child(3) { transition-delay: .16s; }

/* ---------- Hero moment (Amendment 10) ---------- */
/* Video in -> the input orbits LinkedIn / Instagram / X / YouTube marks -> vertical clips fan out.
   The marks are a representation of repurposing: no draft text, nothing "posted". */
.mo-hero { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 0 4px; }
.mo-hero .h-src { width: 372px; flex-shrink: 0; }
.mo-hero .h-src.st { transform: translateY(-16px); }
.mo-hero[data-s] .h-src.st[data-on~="1"] { transition: opacity .45s ease, transform .6s cubic-bezier(.16,1,.3,1); }
.mo-hero[data-s="1"] .h-src, .mo-hero[data-s="2"] .h-src, .mo-hero[data-s="3"] .h-src, .mo-hero[data-s="end"] .h-src { transform: none; }
.mo-hero .mc-title > span:not(.stack) { overflow: hidden; text-overflow: ellipsis; }
/* compact Source: thumbnail beside the transcript, so the whole moment fits the first desktop screen */
.h-body { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px 14px 14px; }
.h-tx { min-height: 46px; }
.h-wait { align-self: center; }

/* connector: a dashed board edge; a dot carries the input along it */
.h-link { position: relative; flex: 0 0 34px; height: 0; border-top: 1.5px dashed rgba(134,85,246,.55); }
.h-dot { position: absolute; left: 0; top: -4.75px; width: 8px; height: 8px; border-radius: 50%; background: #b794ff; box-shadow: 0 0 10px #8655f6; opacity: 0; }
.mo[data-s="3"] .h-link-a .h-dot { animation: h-travel .8s .1s ease-in both; }
.mo.is-live[data-s="end"] .h-link-b .h-dot { animation: h-travel .7s ease-in both; }
@keyframes h-travel { 0% { left: 0; opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { left: calc(100% - 8px); opacity: 0; } }

/* orbit: the input sits in the middle; four marks circle it slowly while the moment plays */
.orbit { --r: 74px; --core: 68px; --mark: 38px; --glyph: 17px; position: relative; width: 186px; height: 186px; flex-shrink: 0; }
.orbit::before { content: ""; position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(closest-side, rgba(134,85,246,.22), transparent); pointer-events: none; }
.orb-path, .orb-wave { position: absolute; left: 50%; top: 50%; width: calc(var(--r) * 2); height: calc(var(--r) * 2); margin: calc(var(--r) * -1) 0 0 calc(var(--r) * -1); border-radius: 50%; }
.orb-path { border: 1.5px dashed rgba(134,85,246,.35); }
/* phone: the card sits above the orbit, so a short vertical edge carries the input down into it */
.orb-in { display: none; }
.orb-wave { border: 2px solid rgba(183,148,255,.7); opacity: 0; pointer-events: none; }
.mo[data-s="3"] .orb-wave { animation: orb-wave 1.1s .75s ease-out both; }
@keyframes orb-wave { 0% { transform: scale(.45); opacity: .8; } 100% { transform: scale(1.12); opacity: 0; } }
.orb-core { position: absolute; left: 50%; top: 50%; width: var(--core); height: var(--core); margin: calc(var(--core) / -2) 0 0 calc(var(--core) / -2); }
.orb-core picture { width: 100%; height: 100%; border-radius: 16px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 0 0 5px rgba(134,85,246,.14), 0 12px 30px -8px rgba(0,0,0,.8); }
.orb-tx { position: absolute; right: -7px; bottom: -7px; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--m-surface); border: 1px solid var(--m-border); color: var(--m-muted); }
.orb-tx .ic { width: 13px; height: 13px; }
.orb-ring { position: absolute; inset: 0; animation: orb-spin 30s linear infinite paused; }
.orb-ic { position: absolute; left: 50%; top: 50%; width: var(--mark); height: var(--mark); margin: calc(var(--mark) / -2) 0 0 calc(var(--mark) / -2); transform: rotate(var(--a)) translateX(var(--r)) rotate(calc(-1 * var(--a))); }
.orb-g { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 50%; background: var(--m-surface); border: 1px solid var(--m-border);
  animation: orb-spin 30s linear infinite reverse paused; transition: border-color .35s ease, box-shadow .35s ease; }
.mo.is-live .orb-ring, .mo.is-live .orb-g { animation-play-state: running; }
@keyframes orb-spin { to { transform: rotate(360deg); } }
.bi { width: var(--glyph, 18px); height: var(--glyph, 18px); flex-shrink: 0; fill: currentColor; }
.orb-g .bi { color: #52525b; transition: color .35s ease; }
.orb-ic.lit .orb-g { border-color: rgba(134,85,246,.5); box-shadow: 0 0 0 3px rgba(134,85,246,.10), 0 0 16px rgba(134,85,246,.3); }
.orb-ic.lit .bi-linkedin { color: #0a66c2; }
.orb-ic.lit .bi-instagram { color: #e4405f; }
.orb-ic.lit .bi-x { color: #f4f4f5; }
.orb-ic.lit .bi-youtube { color: #ff0000; }

/* clips: vertical frames cut from the same video fan out */
.h-clips { --cw: 72px; --ch: 128px; --fan: 54px; position: relative; width: 190px; height: 150px; flex-shrink: 0; }
.cf { position: absolute; left: 50%; top: 50%; width: var(--cw); height: var(--ch); margin: calc(var(--ch) / -2) 0 0 calc(var(--cw) / -2);
  border-radius: 9px; overflow: hidden; background: #000; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 14px 30px -10px rgba(0,0,0,.85);
  transition: transform .7s cubic-bezier(.16,1,.3,1) .1s; }
.cf::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-35%, -50%); border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent rgba(255,255,255,.85); filter: drop-shadow(0 1px 3px rgba(0,0,0,.7)); }
.cf-2 { z-index: 2; }
.mo[data-s="end"] .cf-1 { transform: translate(calc(var(--fan) * -1), 6px) rotate(-8deg); }
.mo[data-s="end"] .cf-3 { transform: translate(var(--fan), 6px) rotate(8deg); }

@media (min-width: 768px) and (max-width: 979px) {
  .mo-hero { gap: 8px; }
  .mo-hero .h-src { width: 300px; }
  .h-body { grid-template-columns: 128px minmax(0, 1fr); gap: 12px; }
  .h-link { flex-basis: 22px; }
  .orbit { --r: 62px; --core: 56px; --mark: 34px; --glyph: 15px; width: 160px; height: 160px; }
  .h-clips { --cw: 60px; --ch: 107px; --fan: 42px; width: 150px; height: 130px; }
}
@media (max-width: 767px) {
  .mo-hero { display: grid; grid-template-columns: auto auto; justify-content: center; align-items: center; column-gap: 6px; row-gap: 8px; max-width: 360px; margin: 0 auto; padding: 0; }
  .mo-hero .h-src { grid-column: 1 / -1; width: 100%; }
  .h-link { display: none; }
  .h-body { grid-template-columns: 132px minmax(0, 1fr); gap: 12px; padding: 12px; }
  .orbit { --r: 58px; --core: 54px; --mark: 34px; --glyph: 15px; width: 150px; height: 150px; }
  .orb-core picture { border-radius: 12px; }
  .h-clips { --cw: 60px; --ch: 107px; --fan: 44px; width: 156px; height: 132px; }
  .orb-in { display: block; position: absolute; left: 50%; top: -9px; height: calc(50% - var(--core) / 2 + 9px); margin-left: -.75px; border-left: 1.5px dashed rgba(134,85,246,.55); }
  .orb-in::after { content: ""; position: absolute; left: -4.75px; top: 0; width: 8px; height: 8px; border-radius: 50%; background: #b794ff; box-shadow: 0 0 10px #8655f6; opacity: 0; }
  .mo[data-s="3"] .orb-in::after { animation: h-drop .8s .1s ease-in both; }
}
@keyframes h-drop { 0% { top: 0; opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { top: calc(100% - 8px); opacity: 0; } }
@media (max-width: 359px) {
  .orbit { --r: 52px; --core: 48px; --mark: 30px; --glyph: 14px; width: 136px; height: 136px; }
  .h-clips { --cw: 54px; --ch: 96px; --fan: 38px; width: 140px; height: 120px; }
}

/* ---------- Feature moments ---------- */
/* Fixed stage heights: the tallest state fits, and a fold/unfold mid-transition overflows the stage instead of moving the page. */
.moment-stage { position: relative; display: flex; align-items: center; justify-content: center; height: 380px; padding: 28px 8px; }
.moment-stage::before { content: ""; position: absolute; inset: 10% 15%; background: radial-gradient(closest-side, rgba(134,85,246,.16), transparent); filter: blur(10px); pointer-events: none; }
.mo-m2 { width: 336px; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.mo-m2 .mc { width: 100%; }
.m2-tx { margin-top: 12px; min-height: 46px; }
.m2-tx > .st:first-child { align-self: center; }
#shot-m2 .moment-stage { height: 440px; }
.mo-m3 { width: 340px; }
.mo-m4 { width: 330px; }
#shot-m4 .moment-stage { height: 410px; }
/* the 16:9 frame splits into three vertical 9:16 frames (slices of the same picture) */
.split { --h: 150px; position: relative; height: var(--h); }
.split-full, .sf { position: absolute; left: 50%; top: 0; height: var(--h); overflow: hidden; }
.split-full { width: calc(var(--h) * 16 / 9); margin-left: calc(var(--h) * -8 / 9); border-radius: 8px; opacity: 0; transition: opacity .35s ease .1s; }
.mo[data-s="1"] .split-full, .mo[data-s="2"] .split-full { opacity: 1; }
.sf { width: calc(var(--h) * 9 / 16); margin-left: calc(var(--h) * -9 / 32); border-radius: 0; opacity: 0; background: #000;
  transition: opacity .15s ease, transform .7s cubic-bezier(.16,1,.3,1) .25s, border-radius .4s ease .25s, box-shadow .4s ease .25s; }
.sf-1 { transform: translateX(calc(var(--h) * -.61)); }
.sf-3 { transform: translateX(calc(var(--h) * .61)); }
.mo[data-s="end"] .sf { opacity: 1; border-radius: 8px; box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 12px 26px -10px rgba(0,0,0,.85); }
.mo[data-s="end"] .sf-1 { transform: translateX(calc(var(--h) * -.72)) rotate(-4deg); }
.mo[data-s="end"] .sf-3 { transform: translateX(calc(var(--h) * .72)) rotate(4deg); }
.sf-2 { z-index: 2; }
.mo-m4 .c-foot { margin-top: 14px; }
.c-save { display: flex; align-items: center; gap: 12px; }
.mo .c-saved { opacity: 0; transition: opacity .3s ease; }
.mo .c-saved.on { opacity: 1; }
@media (max-width: 639px) {
  .moment-stage { height: auto; padding: 12px 0; }
  #shot-m2 .moment-stage { height: 410px; }
  #shot-m4 .moment-stage { height: 370px; }
  .mo-m2, .mo-m3, .mo-m4 { width: 100%; max-width: 340px; }
}
@media (max-width: 359px) { .split { --h: 130px; } }

/* ---------- Three steps (Format Finder style step cards) ---------- */
.steps { display: grid; gap: 20px; grid-template-columns: 1fr; counter-reset: step; list-style: none; margin: 0; padding: 0; }
.steps { max-width: 440px; }
@media (min-width: 1024px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 64rem; } }
.step { counter-increment: step; display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; border: 1px solid rgba(255,255,255,.08); background: rgba(24,24,27,.55); }
.step-top { display: flex; align-items: center; justify-content: center; height: 188px; padding: 16px; background: rgba(255,255,255,.035); border-bottom: 1px solid rgba(255,255,255,.06); }
.step-bot { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 22px 22px 26px; }
.step-bot::before { content: counter(step); display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-bottom: 14px; border-radius: 999px;
  background: #8655F6; color: #fff; font: 700 17px 'Space Grotesk', sans-serif; box-shadow: 0 0 18px rgba(134,85,246,.5); }
.mo-step { width: 290px; max-width: 100%; }
.mo-step .mc { padding: 12px 14px; border-radius: 14px; }
.mo-step .s-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mo-step .s-name { font: 600 15px 'Space Grotesk', sans-serif; }
.mo-step .s-state { font-size: 13px; color: var(--m-muted); }
.mo-step .btn { width: 100%; font-size: 13.5px; padding: 7px 10px; }
.mo-step .coll .btn { margin-top: 10px; }
.mo-step .s-text { margin-top: 6px; font-size: 14px; }
.mo-step .mc-pill { padding: 9px 13px; font-size: 14px; margin-bottom: 10px; }
.mo-step .mc-head { padding: 0; border: 0; }
.mo-step .mc-title { font-size: 14.5px; }

/* Step 1 (SetupFlow.tsx "Use your ChatGPT or Claude plan"; subscription.tsx state "Signed in") */
.mo-step .s-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.s-choice { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--m-border); font-size: 14px; font-weight: 600;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease, transform .12s ease; }
.s-choice .bi { --glyph: 15px; color: var(--m-muted); }
.mo .s-choice.is-picked { border-color: rgba(134,85,246,.75); background: rgba(134,85,246,.10); box-shadow: 0 0 0 3px rgba(134,85,246,.12); }
.mo-step .s-status { margin-top: 9px; min-height: 20px; }
.mo-step .s-status .s-state { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
.s-status .ic { width: 14px; height: 14px; stroke-width: 2.6; }
/* Step 2: the Source shows the video's thumbnail */
.s-src { display: flex; align-items: center; gap: 12px; }
.s-thumb { width: 72px; flex-shrink: 0; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: #000; }
.s-src-r { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.s-src-r .badge { justify-self: start; }

@media (prefers-reduced-motion: reduce) {
  .mo .st, .mc, .mc-pill, .mo-cursor, .btn, .cf, .sf, .split-full, .orb-g, .s-choice, .mo .tx .tx-bars i { transition: none !important; }
  .bar > i, .orb-ring, .orb-g, .h-dot, .orb-wave, .orb-in::after { animation: none !important; }
}

/* Preview 9: quiet credit for the sample video under the hero moment. */
.moment-credit { margin: 4px auto 0; max-width: 46rem; padding: 0 12px; font-size: 12px; line-height: 1.5; color: #a1a1aa; text-align: center; }
.moment-credit a { color: inherit; text-decoration: underline; text-decoration-color: rgba(161,161,170,.45); text-underline-offset: 2px; }
.moment-credit a:hover { color: #f4f4f5; }

/* Preview 10: the loop's fade-out covers every part (beats the per-state visibility rules). */
.mo.is-out[data-s] .mc, .mo.is-out[data-s] .mc-pill, .mo.is-out[data-s] .orbit, .mo.is-out[data-s] .h-link, .mo.is-out[data-s] .h-clips { opacity: 0; transition: opacity .35s ease; }

/* Block 2 (Amendments 11, 12): raw notes fold into the full LinkedIn post (a template with two lists
   and two closing lines). The stage holds the tallest state (notes + ask, 440 / 430 px). */
#shot-m3 .d-text { font-size: 14px; line-height: 1.45; text-wrap: pretty; }
#shot-m3 .d-text p + p { margin-top: 8px; }
#shot-m3 .moment-stage { height: 440px; }
@media (max-width: 639px) {
  #shot-m3 .d-text { font-size: 13px; }
  #shot-m3 .mc-draft { padding: 16px 16px 18px; }
  #shot-m3 .moment-stage { height: 430px; }
}
/* Amendment 12: the raw notes read as a jotted note (grey, behind a thin rule), not as the post.
   One line per note at 13 px (no wrap at 390 and up); at 320 a long note wraps under a hanging indent, so it still reads as one line. */
#shot-m3 .d-note { color: var(--m-muted); border-left: 2px solid var(--m-border); padding-left: 12px; font-size: 13px; }
#shot-m3 .d-note p { padding-left: 1em; text-indent: -1em; }
#shot-m3 .d-note p + p { margin-top: 0; }
/* Step 3 shows the 3-line post (4 lines once it wraps), so every step card's top grows to hold it with Approve */
.mo-step .s-text { font-size: 13px; line-height: 1.45; text-wrap: pretty; }
.step-top { height: 208px; }

/* The primary button's glow: folding parts clip with overflow:hidden, so give the glow room
   inside the clip (padding) and take the same space back (negative margin). The room below
   applies only while a part is open, so a folding part never shows past its own box. */
.d-form > div, .d-actions > div, .mo-step .coll > div { padding: 0 20px; margin: 0 -20px; }
.mo[data-s="1"] .coll[data-on~="1"] > div, .mo[data-s="2"] .coll[data-on~="2"] > div, .mo[data-s="3"] .coll[data-on~="3"] > div,
.mo[data-s="4"] .coll[data-on~="4"] > div, .mo[data-s="end"] .coll[data-on~="end"] > div { padding-bottom: 28px; margin-bottom: -28px; }