/* The Motion Copilot page (v4). Shared pieces are in product.css; these are its own vignettes, drawn in After Effects'
   own neutral greys so they read as a different app, with the film's blue. */

/* hero window: a timeline and the panel */
.mcwin { --ae-bg: #1D1D1F; --ae-line: #2B2D31; --ae-text: #C9CCD1; --ae-mute: #8B9097; }
.mcwin__body { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); background: var(--ae-bg); }
.mcwin__tl { position: relative; display: grid; grid-template-rows: 36px repeat(8, minmax(36px, 1fr)); border-right: 1px solid var(--ae-line); }
.mcwin__head, .mcwin__row { display: grid; grid-template-columns: 24px 104px minmax(0, 1fr); align-items: center; gap: 6px; padding: 0 12px; }
.mcwin__head { height: 36px; color: var(--ae-mute); font-size: 11px; border-bottom: 1px solid var(--ae-line); }
.mcwin__ruler { display: flex; justify-content: space-between; padding-right: 4%; }
.mcwin__ruler b { font-weight: 400; }
.mcwin__row { min-height: 36px; color: var(--ae-text); font-size: 13px; border-bottom: 1px solid #252629; }
.mcwin__row > span:first-child { color: var(--ae-mute); font-size: 12px; }
.mcwin__row.is-sel { background: rgba(87, 158, 250, .08); }
.mcwin__name { display: flex; align-items: center; gap: 8px; white-space: nowrap; overflow: hidden; }
.mcwin__name i { width: 12px; height: 12px; border-radius: 2px; background: var(--c); flex: none; }
.mcwin__track { position: relative; height: 20px; }
.mcwin__track b { position: absolute; left: var(--x); width: var(--w); top: 0; bottom: 0; border-radius: 3px; background: var(--c); opacity: .9; }
.mcwin__track s { position: absolute; left: var(--x); top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; background: #F2F4F7; transform: rotate(45deg); border-radius: 1px; }
.mcwin__cti { position: absolute; top: 0; bottom: 0; left: calc(12px + 24px + 104px + 12px + (100% - 164px) * .36); width: 2px; background: #579EFA; }
.mcwin__cti::before { content: ''; position: absolute; top: 8px; left: -6px; width: 14px; height: 14px; background: #579EFA; clip-path: polygon(0 0, 100% 0, 100% 55%, 50% 100%, 0 55%); }
.mcwin__panel { display: flex; flex-direction: column; gap: 12px; padding: 14px; background: #18191C; color: #DDE1E6; font-size: 13px; line-height: 19px; min-width: 0; }
.mcwin__you { align-self: flex-end; max-width: 95%; padding: 9px 12px; border-radius: 10px; background: #2B48D2; color: #fff; font-family: var(--mono); font-size: 12px; }
.mcwin__msg { padding: 11px 12px; border-radius: 10px; background: #222327; border: 1px solid #2E3035; color: #C9CCD1; }
.mcwin__role { color: #9DB4FF; font-size: 12px; margin-bottom: 6px; }
.mcwin__msg ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; counter-reset: s; }
.mcwin__msg li { counter-increment: s; padding: 5px 8px; border-radius: 5px; background: #2A2C31; color: #E0E3E6; font-size: 12px; }
.mcwin__msg li::before { content: counter(s) '  '; color: #8B9097; }
.mcwin__ok { display: flex; align-items: center; gap: 6px; margin-top: 8px; color: #2DD3BE; font-size: 12px; }
.mcwin__ok i, .mcheck figcaption i { width: 14px; height: 14px; border-radius: 50%; background: #2DD3BE; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.6 14.2L6.3 12l1.4-1.4 2.7 2.7 5.9-5.9 1.4 1.4z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.6 14.2L6.3 12l1.4-1.4 2.7 2.7 5.9-5.9 1.4 1.4z'/%3E%3C/svg%3E") center / contain no-repeat; }
.mcwin__frames { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: 8px; }
.mcwin__frames span { aspect-ratio: 16 / 9; border-radius: 4px; background: linear-gradient(160deg, #2B48D2, #1E36BE); position: relative; overflow: hidden; }
.mcwin__frames span::after { content: ''; position: absolute; left: 20%; right: 30%; top: 40%; height: 18%; border-radius: 3px; background: rgba(255, 255, 255, .88); }
.mcwin__frames span:nth-child(1)::after { right: 60%; } .mcwin__frames span:nth-child(3)::after { right: 20%; }
.mcwin__input { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 8px; background: #111214; border: 1px solid #34363B; color: #7E848C; font-size: 12px; white-space: nowrap; overflow: hidden; }
.mcwin__model { padding: 2px 8px; border-radius: 999px; border: 1px solid #34363B; color: #9AA0A8; font-size: 11px; }
@media (max-width: 559px) {
  .mcwin__body { grid-template-columns: minmax(0, 1fr); }
  .mcwin__tl { border-right: 0; border-bottom: 1px solid var(--ae-line); }
  .mcwin__head, .mcwin__row { grid-template-columns: 20px 86px minmax(0, 1fr); padding: 0 10px; }
  .mcwin__cti { left: calc(10px + 20px + 86px + 12px + (100% - 138px) * .36); }
}

/* bento vignettes */
.mart-layers { margin: 32px 32px 0; min-height: 0; flex: none; border-radius: 8px 8px 0 0; overflow: hidden; border: 1px solid var(--sep); border-bottom: 0; }
.mart-layers img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 30% 50%; }
.mart-roles { padding: 0 32px 32px; display: grid; align-content: center; gap: 16px; }
.mroles { display: grid; gap: 8px; }
.mroles li { padding: 10px 14px; border-radius: 8px; border: 1px solid var(--sep); background: var(--layer-1); color: var(--label); font-size: 14px; }
.mroles li.is-on { border-color: var(--acc-line); background: var(--acc-badge); color: var(--acc-ink); }
.mroles__wait { display: flex; align-items: center; gap: 8px; color: var(--body); font-size: 13px; }
.mroles__wait .ico { width: 16px; height: 16px; }
.mart-check { padding: 0 32px 32px; display: grid; align-content: center; }
.mcheck { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.mcheck figure { display: grid; gap: 10px; }
.mcheck__f { position: relative; aspect-ratio: 16 / 9; border-radius: 8px; background: linear-gradient(160deg, #2B48D2, #1E36BE 70%); overflow: hidden; border: 1px solid rgba(255, 255, 255, .08); }
.mcheck__f::before { content: 'Make it move'; position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); color: #fff; font: 600 clamp(11px, 1.6vw, 20px)/1 var(--font); letter-spacing: -.02em; white-space: nowrap; }
.mcheck__f::after { content: ''; position: absolute; left: 32%; right: 32%; top: 62%; height: 4px; border-radius: 4px; background: #9DC3FF; }
.mcheck__f--1::before { opacity: .25; transform: translate(-50%, -20%); }
.mcheck__f--1::after { right: 68%; }
.mcheck__f--2::before { opacity: .8; transform: translate(-50%, -42%); }
.mcheck__f--2::after { right: 44%; }
.mcheck figcaption { display: flex; align-items: center; gap: 8px; color: var(--label); font-size: 13px; font-variant-numeric: tabular-nums; }
@media (max-width: 899px) { .mart-layers { margin: 24px 24px 0; } .mart-roles, .mart-check { padding: 0 24px 24px; } }

.steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.msteps { margin-top: 24px; }
@media (max-width: 1099px) { .steps--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .steps--4 { grid-template-columns: minmax(0, 1fr); } }

/* feature rows */
.mfigma { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 14px; padding: 8%; }
.mfigma__frame { display: grid; gap: 6px; }
.mfigma__label { color: #8A8E96; font-size: 11px; }
.mfigma__card { position: relative; border-radius: 10px; background: #F4F6F9; outline: 1.5px solid #4F8BFF; outline-offset: 3px; padding: 16px; display: grid; align-content: start; gap: 10px; }
.mfigma__card b { height: 64px; border-radius: 6px; background: linear-gradient(160deg, #2B48D2, #1E36BE); }
.mfigma__card i { height: 8px; border-radius: 3px; background: #C9CDD4; }
.mfigma__card i + i { width: 70%; }
.mfigma__card span { margin-top: 10px; width: 55%; height: 22px; border-radius: 99px; background: #C8384A; }
.mfigma__arrow { padding: 6px 10px; border-radius: 999px; background: rgba(87, 158, 250, .14); border: 1px solid rgba(87, 158, 250, .3); color: #9DB4FF; font-size: 12px; }
.mfigma__layers { padding: 8px; display: grid; gap: 4px; }
.mfigma__layers p { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 6px; color: #E0E3E6; font-size: 12px; white-space: nowrap; }
.mfigma__layers p:nth-child(odd) { background: rgba(255, 255, 255, .03); }
.mfigma__layers span { width: 10px; height: 10px; border-radius: 2px; background: var(--c); flex: none; }
:root[data-theme="light"] .mfigma__label { color: #63676F; }

.mart-icons { display: grid; place-items: center; align-content: center; gap: 18px; }
.micons { display: grid; grid-template-columns: repeat(4, 64px); gap: 14px; }
.micons li { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 10px; border: 1px solid var(--sep); background: var(--layer-1); color: var(--label); }
.micons .ico { width: 28px; height: 28px; }
.micons li.is-sel { color: #579EFA; border-color: #579EFA; box-shadow: 0 0 0 3px rgba(87, 158, 250, .18); }
:root[data-theme="light"] .micons li.is-sel { color: #2B48D2; border-color: #2B48D2; }
.micons__note { color: var(--body); font-size: 13px; }
@media (max-width: 479px) { .micons { grid-template-columns: repeat(4, 52px); gap: 10px; } .micons li { width: 52px; height: 52px; } }

.mtaste { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 16px; padding: 8%; }
.mtaste__in { display: flex; gap: 10px; }
.mtaste__in span { width: 92px; aspect-ratio: 16 / 9; border-radius: 6px; background: linear-gradient(160deg, #2B48D2, #182EA8); border: 1px solid rgba(255, 255, 255, .08); }
.mtaste__in span:nth-child(2) { background: linear-gradient(160deg, #C8384A, #7E1F2C); }
.mtaste__in span:nth-child(3) { background: linear-gradient(160deg, #E7B7C8, #A4687E); }
.mtaste__cmd { padding: 6px 12px; border-radius: 999px; background: rgba(87, 158, 250, .14); border: 1px solid rgba(87, 158, 250, .3); color: #9DB4FF; font-family: var(--mono); font-size: 13px; }
:root[data-theme="light"] .mtaste__cmd, :root[data-theme="light"] .mfigma__arrow { color: #2B48D2; }
.mtaste__out { padding: 14px 16px; min-width: 220px; }
.mtaste__out p { color: #9AA0A8; font-size: 12px; margin-bottom: 8px; }
.mtaste__out ul { display: grid; gap: 6px; }
.mtaste__out li { display: flex; align-items: center; gap: 8px; color: #E0E3E6; font-size: 14px; }
.mtaste__out i { width: 10px; height: 10px; border-radius: 2px; background: var(--c); }
@media (max-width: 479px) { .mtaste__in span { width: 72px; } }

.price-wide--solo { margin-top: 0; max-width: none; }
.price-wide--solo .price-wide__side .small { margin-top: -12px; }