/* Up and coming in each product's kit (22 Oct 2026, the Web Director's "Up and coming everywhere"). The markup is
	upnext_kit.py, the motion upnext-kit.js. Stroke's Next reel: an unexposed filmstrip (one ink strip with its
	sprocket holes, a blank frame per item holding its tile, the magenta recording dot on what is being built now).
	ShotScript's targets: an open crosshair on a planned card, locked with the orange dot on a card being built now.
	Mime's invisible boxes: a dashed outline round each item, faint while planned, marching while being built. Every
	section ends with the "Everything coming" pill. Only transform and opacity move. */
.doc .un { display: grid; gap: 10px; }
.doc .un ol, .doc .un ul { margin: 0; padding: 0; list-style: none; }
.doc .un-text { min-width: 0; font-weight: 500; font-size: 15px; line-height: 1.5; color: var(--ink); }
.doc .un-stage { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 13px; line-height: 1.2; letter-spacing: .01em; color: var(--ink); }
.doc .un > .un-stage:not(:first-child) { margin-top: 10px; }
.un-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--paper); color: var(--ink);
	font-weight: 800; font-size: 12px; font-variant-numeric: tabular-nums; }
.un-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

/* the pill */
.doc .un-more { justify-content: flex-start; }
.doc .un-more .pill { background: var(--paper); }
.doc .un-more .pill-ico { background: var(--card); }
.doc .un-more .pill-ico:has(> .sk-tile), .doc .un-more .pill-ico:has(> .mm-tile) { background: none; }
.un-more .un-xh-pill { width: 26px; height: 26px; color: #1c1b21; }

/* ---------- Stroke: the Next reel ---------- */
.un-reel { --strip: 92px; position: relative; gap: 0; padding: 6px 0; }
.un-reel::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--strip); border-radius: 7px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='92' height='15'%3E%3Crect x='6' y='3.5' width='7' height='8' rx='1.8' fill='%23fff'/%3E%3Crect x='79' y='3.5' width='7' height='8' rx='1.8' fill='%23fff'/%3E%3C/svg%3E") 0 2px / 92px 15px repeat-y, #1c1b21; }
.doc .un-reel .un-stage { position: relative; min-height: 40px; padding-left: calc(var(--strip) + 22px); }
.un-reel .un-stage-name::before { content: ""; display: inline-block; width: 3px; height: 13px; margin-right: 10px; border-radius: 2px; background: #d23a7e; rotate: 12.5deg; vertical-align: -1px; }
.un-reel .un-count { background: #1c1b21; color: #f4f4f6; }
.un-reel .un-stage::before { content: ""; position: absolute; left: calc(var(--strip) / 2 - 4px); top: calc(50% - 4px); width: 8px; height: 8px; border-radius: 50%;
	box-shadow: inset 0 0 0 1.5px rgb(244 244 246 / .55); }
.un-frames { position: relative; display: grid; }
.un-frame { position: relative; display: grid; grid-template-columns: var(--strip) minmax(0, 1fr); column-gap: 22px; align-items: center; min-height: 58px; }
.un-gate { position: relative; align-self: stretch; display: grid; place-items: center; }
.un-frame + .un-frame > .un-gate::before { content: ""; position: absolute; left: 17px; right: 17px; top: -1px; height: 2px; background: #0c0b0f; }
.un-blank { position: relative; display: grid; place-items: center; width: 58px; height: 42px; border-radius: 3px; background: linear-gradient(165deg, #3b3943, #29272f 70%); }
.un-frame.is-now .un-blank { background: linear-gradient(165deg, #4d3242, #2b2731 70%); }
.un-blank::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #fff; opacity: 0; transition: opacity .6s var(--ease); pointer-events: none; }
.un-blank .sk-bg { fill: transparent; }
.un-rec { position: absolute; right: 5px; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: #e0438a; box-shadow: 0 0 0 2.5px rgb(210 58 126 / .3), 0 0 8px rgb(224 67 138 / .65); }
.un-frame::after { content: ""; position: absolute; left: calc(var(--strip) + 8px); right: -8px; top: 4px; bottom: 4px; border-radius: 14px;
	background: rgb(210 58 126 / .07); opacity: 0; transition: opacity .6s var(--ease); pointer-events: none; }
.un-frame > .un-text { position: relative; z-index: 1; padding: 9px 0; }
@media (hover: hover) {
	.un-frame:hover::after { opacity: 1; transition-duration: .35s; }
	.un-frame:hover .un-blank::after { opacity: .08; transition-duration: .35s; }
}

/* ---------- ShotScript: targets ---------- */
.un-target { position: relative; display: grid; grid-template-columns: 50px minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 12px 18px 12px 12px;
	border-radius: 18px; background: var(--paper); --un-c: #0969da; --un-soft: #ddf4ff; }
.un-t-purple { --un-c: #8250df; --un-soft: #fbefff; }
.un-t-green { --un-c: #1a7f37; --un-soft: #dafbe1; }
.un-t-accent { --un-c: #1c1b21; --un-soft: #ffe4d6; }
.un-target.is-now { background: #fff6f0; }
.un-target::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1.5px rgb(255 107 26 / .5); opacity: 0;
	transition: opacity .6s var(--ease); pointer-events: none; }
.un-target.is-now::after { opacity: 1; }
@media (hover: hover) { .un-target:not(.is-now):hover::after { opacity: .6; transition-duration: .35s; } }
.un-aim { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 14px; background: var(--un-soft); color: var(--un-c); }
.un-xh { display: block; width: 36px; height: 36px; overflow: visible; }
.un-targets .un-stage-now .un-stage-name { color: #c2410c; }
.un-targets .un-stage-now .un-count { background: #ffe4d6; color: #b93d08; }

/* ---------- Mime: invisible boxes ---------- */
.un-box { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 15px 18px 15px 16px; border-radius: 16px; }
.un-box::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #000; opacity: 0; transition: opacity .6s var(--ease); pointer-events: none; }
@media (hover: hover) { .un-box:hover::before { opacity: .035; transition-duration: .35s; } }
.un-outline { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; color: #000; pointer-events: none; }
.un-box > .mm-tile, .un-box > .un-text { position: relative; }
.un-boxes .un-count { background: none; border: 1.5px dashed rgb(0 0 0 / .35); }
.un-boxes .un-stage-now .un-count { border-color: #000; }

@media (max-width: 760px) {
	.un-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
	.un-reel { --strip: 72px; }
	.un-reel::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='14'%3E%3Crect x='5' y='3.5' width='6' height='7' rx='1.6' fill='%23fff'/%3E%3Crect x='61' y='3.5' width='6' height='7' rx='1.6' fill='%23fff'/%3E%3C/svg%3E") 0 2px / 72px 14px repeat-y, #1c1b21; }
	.un-frame { column-gap: 14px; min-height: 54px; }
	.doc .un-reel .un-stage { padding-left: calc(var(--strip) + 14px); }
	.un-frame + .un-frame > .un-gate::before { left: 14px; right: 14px; }
	.un-blank { width: 44px; height: 36px; }
	.un-blank .sk-svg { width: 26px; height: 26px; }
	.un-rec { right: 4px; top: 4px; width: 7px; height: 7px; }
	.un-frame::after { left: calc(var(--strip) + 4px); right: -6px; }
	.doc .un-text { font-size: 14.5px; }
	.un-target { grid-template-columns: 44px minmax(0, 1fr); column-gap: 12px; padding: 10px 14px 10px 10px; }
	.un-aim { width: 44px; height: 44px; border-radius: 12px; }
	.un-aim .un-xh { width: 32px; height: 32px; }
	.un-box { grid-template-columns: 26px minmax(0, 1fr); column-gap: 12px; padding: 13px 14px 13px 13px; }
	.un-box .mm-svg { width: 26px; height: 26px; }
}