/* Motion Cheat Code · /ui-motion/ and the UI Motion block on the home page. Tokens come from site.css.
   The animations themselves are styled by uim.css (built from motioncheatcode-src/ui-motion). */
.uim-series { padding-bottom: 18px; }
.uim-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 26px; }
@media (min-width: 640px) { .uim-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .uim-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.uim-card { display: flex; flex-direction: column; min-width: 0; border-radius: 16px; overflow: hidden; background: var(--ink-3); border: 1px solid var(--line); scroll-margin-top: 16px; }
.uim-card-stage { padding: 10px; background: #EEEEEA; }
.uim-card-stage .uim { max-width: none; border-radius: 12px; overflow: hidden; background: #FFFFFF; }
.uim-card-body { display: grid; gap: 8px; padding: 14px 16px 18px; }
.uim-card-no { display: flex; align-items: center; gap: 8px; font: 400 11px/1 var(--f-pixel); text-transform: uppercase; color: var(--grey-2); }
.uim-card-no b { color: var(--volt); font-weight: 400; }
.uim-card-no .uim-chip { margin-left: auto; }
.uim-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 6px; font: 400 10px/1 var(--f-pixel); text-transform: uppercase; }
.uim-chip svg { width: 8px; height: 10px; fill: currentColor; }
.uim-chip-free { background: var(--volt); color: var(--ink); }
.uim-chip-pack { color: var(--grey-2); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.uim-card-title { font: 400 30px/.95 var(--f-display); text-transform: uppercase; }
.uim-card-use { font-size: 14.5px; line-height: 1.4; color: var(--white); }
.uim-card-use span { margin-right: 6px; font: 400 10px/1 var(--f-pixel); text-transform: uppercase; color: var(--grey); }
.uim-card-prompt { display: flex; gap: 8px; align-items: baseline; padding: 9px 12px; border-radius: 10px; background: var(--ink); font: 500 12.5px/1.35 var(--f-mono); color: var(--grey-2); }
.uim-card-prompt i { font-style: normal; color: var(--volt); font-weight: 700; }

/* home page block */
.uimo { background: var(--ink); border-top: 1px solid var(--line); }
.uimo-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 8px; }
@media (min-width: 760px) { .uimo-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.uimo-cta { display: grid; gap: 12px; margin-top: 28px; }
.uimo-cta .btn { width: 100%; }
@media (min-width: 600px) { .uimo-cta { grid-template-columns: auto auto; justify-content: start; } .uimo-cta .btn { width: auto; } }

@media (prefers-reduced-motion: reduce) { .uim-card { scroll-behavior: auto; } }

/* keep the animation's space before uim.css has loaded (home page) */
.uim { position: relative; width: 100%; }
.uim-fit { position: relative; width: 100%; aspect-ratio: 984 / 800; }