/* GENERATED by scripts/rg-grid-theme-sync.mjs from rg-website — do not edit. */
/*
 * ILLUSTRATIONS (D-0107) — drawn at Figma's exact values.
 *
 * An illustration is a picture, not interface: it is laid out on a fixed board (600 units wide) and
 * scaled whole, so its measures are the artwork's own — half-pixel hairlines, 11–18px type, the
 * shadows and blurs as drawn in the Landing Pages Figma (541:59399, 541:59562, 541:59763). They
 * are written here, once, and nowhere else: markup carries only `data-i` names. Palette colours
 * are the primitives' variables; the few colours the artwork takes from the product's own UI
 * (olive text, mail chrome) are written as the artwork has them.
 */

/* The ground an illustration stands on: white, or the section's own (D-0111). Everything that
   fades into the ground fades into this. */
[data-stage] {
	--ground: white;
	background: var(--ground);
}
/* Unlocking data runs from slate-100 to slate-50 (D-0136, D-0139); its stages are clear and fade into the
   middle of the two, which is within a hundredth of either. */
[data-steps] [data-stage] {
	--ground: color-mix(in oklab, var(--color-slate-100), var(--color-slate-50));
	background: none;
}
/* D-0197: on a flat subtle ground (the Motion page) the stages fade into exactly that. */
[data-steps][data-surface='subtle'] [data-stage] {
	--ground: var(--color-slate-50);
}
/* D-0251: on the canvas (the Kora AI page) the stages fade into the canvas itself. */
[data-steps][data-surface='canvas'] [data-stage] {
	--ground: var(--rg-color-bg-canvas);
}
[data-board] {
	/* D-0108: every card is glass — the ground shows through, blurred. */
	/* D-0123: how dark a card's shadow is — half of the artwork's 12%. */
	--shade: 0.06;
	--glass: rgb(255 255 255 / 0.55);
	/* D-0146: the glass clears to this at a card's foot, and wears a light rim. */
	--glass-foot: rgb(255 255 255 / 0.25);
	--rim: rgb(255 255 255 / 0.75);
	--rim-edge: rgb(2 6 24 / 0.08);
	/* D-0138, D-0156: how far a card blurs what is behind it — the system's glass blur. */
	--glass-blur: var(--blur-2xl);
	--glass-band: rgb(249 250 251 / 0.5);
	font-family: Inter, sans-serif;
	font-size: 12px;
	line-height: 16px;
	letter-spacing: 0;
	font-weight: 400;
	color: rgb(28 32 36);
	text-align: left;
	white-space: nowrap;
}
[data-board] img {
	display: block;
	max-width: none;
	flex: none;
}
[data-board] p {
	margin: 0;
}

/* ── Ground: the halftone, washed out toward the side it rises from; the fade over the cards' feet. */
[data-i~='halftone'] {
	position: absolute;
	left: 50%;
	translate: -50% 0;
	background-size: 100% 100%;
}
[data-i~='halftone']::after {
	content: '';
	position: absolute;
	inset: 0;
}
[data-i~='halftone'][data-i~='rise'] {
	background-image: url('../../images/rg-grid-theme/media/illustration/halftone-rise.png');
}
[data-i~='halftone'][data-i~='rise']::after {
	background: linear-gradient(to bottom, var(--ground) 9.669%, transparent 26.98%);
}
[data-i~='halftone'][data-i~='corner'] {
	background-image: url('../../images/rg-grid-theme/media/illustration/halftone-corner.png');
}
[data-i~='fade'] {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 600px;
	background: linear-gradient(to bottom, transparent, var(--ground));
	pointer-events: none;
}
/* D-0241: a scene fades into its ground on every side it runs off, not only the foot — a drawn fade
   to the right, the left or the top, 160 deep, so no card or shadow is cut by the stage's edge. */
[data-i~='fade-r'],
[data-i~='fade-l'],
[data-i~='fade-t'] {
	position: absolute;
	pointer-events: none;
}
[data-i~='fade-r'],
[data-i~='fade-l'] {
	top: 0;
	bottom: 0;
	width: 160px;
}
[data-i~='fade-r'] {
	right: 0;
	background: linear-gradient(to right, transparent, var(--ground));
}
[data-i~='fade-l'] {
	left: 0;
	background: linear-gradient(to left, transparent, var(--ground));
}
[data-i~='fade-t'] {
	top: 0;
	left: 0;
	right: 0;
	height: 160px;
	background: linear-gradient(to top, transparent, var(--ground));
}

/* ── The card: glass. */
[data-i~='card'] {
	position: absolute;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	overflow: clip;
	/* D-0146: a frosted frame — a light rim, a faint edge outside it, 4px corners — as the
	   reference the owner brought, at our radius. */
	border: 1px solid var(--rim);
	outline: 0.5px solid var(--rim-edge);
	border-radius: 4px 4px 0 0;
	background: linear-gradient(to bottom, var(--glass), var(--glass-foot));
	-webkit-backdrop-filter: blur(var(--glass-blur));
	backdrop-filter: blur(var(--glass-blur));
}
[data-i~='card'] > * {
	flex: none;
	width: 100%;
}
[data-i~='centred'] {
	left: 50%;
	translate: -50% 0;
}
[data-i~='head'] {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 20px 20px 20.5px;
	background: var(--glass-band);
	border-bottom: 0.5px solid var(--color-slate-200);
}
[data-i~='head-title'] {
	flex: 1 0 0rem;
	min-width: 1px;
	font-weight: 600;
	font-size: 14px;
	line-height: 20px;
}
[data-i~='avatar'] {
	position: relative;
	flex: none;
	overflow: clip;
	border-radius: 999px;
	background: white;
}
[data-i~='avatar'] img {
	position: absolute;
}
[data-i~='avatar'][data-i~='cover'] img {
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
[data-i~='names'] {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 4px;
}
[data-i~='row'] {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 20px;
	border-bottom: 1px solid var(--color-slate-100);
}
[data-i~='grow'] {
	flex: 1 0 0rem;
	min-width: 1px;
}
[data-i~='dim-30'] {
	opacity: 0.3;
}
[data-i~='dim-50'] {
	opacity: 0.5;
}
/* D-0371: the Feed's lower rows, all but whole. */
[data-i~='dim-90'] {
	opacity: 0.9;
}
[data-i~='flip'] {
	scale: 1 -1;
}
[data-i~='quarter'] {
	rotate: 90deg;
}

/* ── Mail, as the mail client sets it: Roboto, olive. */
[data-i~='mail'] {
	font-family: Roboto, sans-serif;
	color: black;
}
[data-i~='mail-to'] {
	opacity: 0.6;
}
[data-i~='mail-to'] span {
	color: rgb(0 0 0 / 0.5);
}
[data-i~='mail-body'] {
	font-family: Roboto, sans-serif;
	color: rgb(96 101 95);
	white-space: pre-wrap;
	overflow-wrap: break-word;
}

/* ── Stack (541:59399): an email, a connector, the record. */
[data-i~='stack-halftone'] {
	top: 192px;
	left: calc(50% - 0.33px);
	width: 965.333px;
	height: 543px;
}
[data-i~='stack-line'] {
	position: absolute;
	top: 240px;
	left: calc(50% + 0.5px);
	translate: -50% 0;
	width: 1px;
	height: 103px;
	background: linear-gradient(-89.034deg, var(--color-emerald-600) 15.726%, var(--color-sky-500) 63.463%);
}
[data-i~='stack-email'] {
	bottom: 452.26px;
	width: 408px;
	padding: 21.935px;
	gap: 26.323px;
	border-radius: 4px;
	background: linear-gradient(to bottom, var(--glass), var(--glass-foot));
	-webkit-backdrop-filter: blur(var(--glass-blur));
	backdrop-filter: blur(var(--glass-blur));
	/* D-0411: the owner's frame — the kit's drawn shadow at twice --shade. */
	box-shadow: 0 16px 56px 0 rgb(0 0 0 / 0.12);
}
[data-i~='stack-email-top'] {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
[data-i~='stack-email-from'] {
	display: flex;
	align-items: center;
	gap: 10.968px;
}
[data-i~='stack-email-from'] [data-i~='avatar'] {
	width: 35.097px;
	height: 35.097px;
}
[data-i~='stack-email-from'] [data-i~='names'] {
	gap: 4.387px;
}
[data-i~='stack-email-name'] {
	font-size: 15.355px;
	line-height: normal;
}
[data-i~='stack-email-to'] {
	font-size: 10.968px;
	line-height: normal;
}
[data-i~='stack-email-mark'] {
	position: relative;
	flex: none;
	width: 35.097px;
	height: 35.097px;
	border-radius: 96.516px;
	background: white;
}
[data-i~='stack-email-mark'] img {
	position: absolute;
	top: calc(50% - 0.19px);
	left: calc(50% + 0.52px);
	translate: -50% -50%;
	/* D-0414: a box any source's mark fits whole in, as the source turns with the case. */
	width: 20.473px;
	height: 20.473px;
	object-fit: contain;
}
[data-i~='stack-email-body'] {
	font-size: 13.161px;
	line-height: 17.548px;
}
[data-i~='stack-record'] {
	bottom: 27px;
	width: 408px;
	height: 353px;
	background: linear-gradient(to bottom, var(--glass), var(--glass-foot));
	-webkit-backdrop-filter: blur(var(--glass-blur));
	backdrop-filter: blur(var(--glass-blur));
	box-shadow: 0 -16px 56px 0 rgb(0 0 0 / var(--shade));
}
[data-i~='stack-record'] [data-i~='head'] {
	gap: 20px;
}
[data-i~='stack-subject'] {
	position: relative;
	flex: none;
	width: 48px;
	height: 48px;
}
[data-i~='stack-subject'] [data-i~='avatar'] {
	width: 48px;
	height: 48px;
}
[data-i~='stack-subject'] > img {
	position: absolute;
	top: 26.43px;
	left: 36.45px;
	width: 21.6px;
	height: 21.6px;
}
[data-i~='stack-subject-names'] {
	gap: 8px;
	text-transform: capitalize;
}
[data-i~='stack-subject-name'] {
	font-weight: 500;
	font-size: 18px;
	line-height: 20px;
}
[data-i~='stack-subject-role'] {
	font-size: 11.68px;
	line-height: 16.077px;
	color: rgb(146 146 146);
}
[data-i~='tile'] {
	position: relative;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	overflow: clip;
	border: 0.902px solid var(--color-slate-200);
	background: white;
}
[data-i~='tile-gmail'] {
	translate: 0.37px -0.2px;
	width: 20.999px;
	height: 16px;
}
[data-i~='tile-calendar'] {
	width: 20px;
	height: 20px;
}
[data-i~='tile-outlook'] {
	width: 21.775px;
	height: 21.775px;
	object-fit: cover;
}
[data-i~='entry'] {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
}
[data-i~='entry-title'] {
	width: 100%;
	font-weight: 500;
	font-size: 14px;
	line-height: normal;
	color: rgb(22 25 36);
}
[data-i~='entry-meta'] {
	width: 100%;
	font-size: 11px;
	line-height: 16.077px;
	color: var(--color-slate-500);
	text-transform: capitalize;
}
[data-i~='lower'] {
	text-transform: lowercase;
}
[data-i~='stack-fade'] {
	height: 231px;
}

/* ── Pair (541:59562): the email, and beside it everything known about its reader. */
[data-i~='pair-halftone-a'] {
	top: -194px;
	left: calc(50% + 196.72px);
	width: 1108.555px;
	height: 623.562px;
}
[data-i~='pair-halftone-a']::after {
	background:
		linear-gradient(180.122deg, var(--ground) 31.358%, transparent 68.822%),
		linear-gradient(269.126deg, var(--ground) 40.987%, transparent 76.19%);
}
[data-i~='pair-halftone-b'] {
	top: 0;
	left: calc(50% - 27.28px);
	width: 1108.555px;
	height: 623.562px;
}
[data-i~='pair-halftone-b']::after {
	background: linear-gradient(to right, var(--ground) 25.849%, transparent 42.718%);
}
[data-i~='pair-email'] {
	left: 40px;
	bottom: -28px;
	width: 296px;
	height: 461px;
	box-shadow: 12px -12px 56px 0 rgb(0 0 0 / var(--shade));
}
[data-i~='pair-gmail'] {
	position: relative;
	flex: none;
	width: 23.75px;
	height: 20px;
	overflow: clip;
}
[data-i~='pair-gmail'] img {
	position: absolute;
	top: calc(50% - 0.2px);
	left: calc(50% + 0.53px);
	translate: -50% -50%;
	/* D-0417: a box any mail source's mark fits whole in, as it turns with the case. */
	width: 20.999px;
	height: 20px;
	object-fit: contain;
}
[data-i~='pair-email-body'] {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	height: 372px;
	padding: 20px;
}
[data-i~='pair-email-text'] {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	width: 100%;
}
[data-i~='pair-email-from'] {
	display: flex;
	align-items: center;
	gap: 10px;
}
[data-i~='pair-email-from'] [data-i~='avatar'] {
	width: 40px;
	height: 40px;
}
[data-i~='pair-email-name'] {
	font-size: 13px;
	line-height: normal;
}
[data-i~='pair-email-to'] {
	font-size: 10px;
	line-height: normal;
}
[data-i~='pair-email-copy'] {
	width: 100%;
	font-size: 12px;
	line-height: 16px;
}
[data-i~='attachment'] {
	display: flex;
	align-items: center;
	gap: 7.161px;
	width: 140.525px;
	padding: 5.37px 3.58px 5.37px 7.161px;
	border: 0.895px solid rgb(232 232 236);
	background: white;
}
[data-i~='attachment'] > img:first-child {
	width: 19.759px;
	height: 24.303px;
}
[data-i~='attachment'] > img:last-child {
	width: 14.321px;
	height: 14.321px;
}
[data-i~='attachment-names'] {
	flex: 1 0 0rem;
	min-width: 1px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 3.58px;
	font-family: Roboto, sans-serif;
	font-size: 8.951px;
	line-height: normal;
	color: rgb(96 100 108);
}
[data-i~='actions'] {
	position: relative;
	flex: none;
	width: 241.667px;
	height: 28.642px;
}
[data-i~='action'] {
	position: absolute;
	top: calc(50% + 0.36px);
	translate: 0 -50%;
	height: 25.778px;
	overflow: clip;
	border: 0.895px solid rgb(224 224 224);
	border-radius: 3.58px;
	background: white;
	font-family: Roboto, sans-serif;
	font-size: 11.099px;
	line-height: 16.111px;
	color: black;
	text-align: center;
}
[data-i~='action'] img {
	position: absolute;
	top: 3.94px;
	left: 9.58px;
	width: 16.111px;
	height: 16.111px;
	scale: 1 -1;
}
[data-i~='action'] span {
	position: absolute;
	top: calc(50% - 0.2px);
	left: calc(50% + 10.56px);
	translate: -50% -50%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 14.903px;
}
[data-i~='action-reply'] {
	left: 0;
	width: 69.036px;
}
[data-i~='action-reply'] span {
	width: 27.326px;
}
[data-i~='action-reply-all'] {
	left: calc(50% - 6.55px);
	translate: -50% -50%;
	width: 83.33px;
}
[data-i~='action-reply-all'] span {
	width: 41.62px;
}
[data-i~='action-forward'] {
	right: -0.55px;
	width: 82.686px;
}
[data-i~='action-forward'] span {
	width: 40.976px;
}
[data-i~='pair-sidebar'] {
	right: 32px;
	bottom: -15.57px;
	width: 362px;
	background: linear-gradient(to bottom, var(--glass), var(--glass-foot));
	box-shadow: -12px -12px 56px 0 rgb(0 0 0 / var(--shade));
}
[data-i~='icon-16'] {
	width: 16px;
	height: 16px;
}
[data-i~='inset'] {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 8px 8px 0;
}
[data-i~='saved'] {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 12px;
	background: rgb(248 250 248);
	font-family: 'DM Sans', sans-serif;
	font-variation-settings: 'opsz' 14;
	font-weight: 600;
	font-size: 12px;
	line-height: 16px;
	color: rgb(0 91 66);
}
[data-i~='saved'] img {
	width: 12px;
	height: 12px;
}
[data-i~='contact'] {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}
[data-i~='contact-name'] {
	display: flex;
	align-items: center;
	gap: 7.668px;
	font-weight: 500;
	font-size: 13px;
	line-height: 18.344px;
}
[data-i~='contact-name'] img {
	width: 20px;
	height: 20px;
}
[data-i~='contact-links'] {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	line-height: 13.802px;
	color: var(--color-blue-700);
}
[data-i~='contact-links'] img {
	width: 7.668px;
	height: 7.668px;
}
[data-i~='chevron'] {
	width: 19.17px;
	height: 19.17px;
}
[data-i~='fields'] {
	flex-direction: column;
	gap: 20px;
}
[data-i~='fields-row'] {
	display: flex;
	align-items: center;
	gap: 16px;
	width: 100%;
	height: 41px;
}
[data-i~='field'] {
	flex: 1 0 0rem;
	min-width: 1px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 4px;
	font-size: 12px;
	line-height: 16px;
}
[data-i~='field-label'] {
	color: var(--color-slate-400);
	text-transform: uppercase;
}
[data-i~='more'] {
	width: 100%;
	font-weight: 500;
	font-size: 12px;
	line-height: 16px;
	color: var(--color-blue-600);
}
[data-i~='tabs'] {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 32px;
	overflow: clip;
	border: 1.218px solid rgb(239 241 239);
	border-radius: 4.459px;
}
[data-i~='tab'] {
	flex: 1 0 0rem;
	min-width: 1px;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 32px;
	padding: 0 12px;
	background: rgb(249 249 251);
	font-size: 12px;
	line-height: 16px;
	color: rgb(96 101 95);
}
[data-i~='tab'][data-i~='chosen'] {
	background: white;
	font-weight: 500;
	color: rgb(28 32 36);
}
[data-i~='related'] {
	flex-direction: column;
	gap: 12px;
	padding: 12px 20px;
}
[data-i~='related-item'] {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 10px 12px;
	border: 0.888px solid rgb(239 241 239);
	border-radius: 2.831px;
	background: rgb(248 250 248);
	font-size: 12px;
	line-height: 16.986px;
	color: var(--color-slate-800);
}
[data-i~='related-item'] b {
	font-weight: 700;
}
[data-i~='related-item'] > img:first-child {
	width: 15.754px;
	height: 15.754px;
}
[data-i~='related-item'] > img:last-child {
	width: 21.301px;
	height: 21.301px;
}
[data-i~='pair-fade'] {
	height: 430px;
}

/* ── Flow (541:59763): who acts, the steps, the outcome, what it adds up to. */
[data-i~='flow-halftone'] {
	top: 312.88px;
	width: 1074px;
	height: 604.125px;
}
[data-i~='flow-line'] {
	position: absolute;
	top: 104px;
	left: calc(50% + 0.5px);
	translate: -50% 0;
	width: 1px;
	height: 334px;
	background: linear-gradient(to bottom, var(--color-sky-500), var(--color-emerald-600));
}
[data-i~='steps'] {
	position: absolute;
	top: 125px;
	left: calc(50% + 0.5px);
	translate: -50% 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	width: 153px;
}
[data-i~='step'] {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 2px 0;
	border-radius: 99px;
	background: var(--ground);
	font-size: 11px;
	line-height: 16px;
	color: var(--color-slate-600);
}
[data-i~='step'][data-i~='full'] {
	width: 100%;
}
[data-i~='step'] img {
	width: 12px;
	height: 12px;
}
[data-i~='step-mark'] {
	position: relative;
	flex: none;
	width: 12px;
	height: 12px;
	overflow: clip;
}
[data-i~='step'] [data-i~='step-mark'] img {
	position: absolute;
	top: 50%;
	left: calc(50% + 0.15px);
	translate: -50% -50%;
	width: 10.286px;
	height: 10.286px;
}
[data-i~='node'] {
	flex-direction: row;
	align-items: center;
	gap: 10px;
	padding: 12px;
	overflow: visible;
	border-radius: 4px;
	-webkit-backdrop-filter: blur(var(--glass-blur));
	backdrop-filter: blur(var(--glass-blur));
	box-shadow: 0 16px 56px 0 rgb(0 0 0 / var(--shade));
}
[data-i~='node'] > * {
	width: auto;
}
[data-i~='node'] [data-i~='avatar'],
[data-i~='flow-data'] [data-i~='avatar'] {
	width: 40px;
	height: 40px;
}
[data-i~='node-ldr'] {
	bottom: 596px;
	background: linear-gradient(to bottom, rgb(239 246 255 / 0.4), rgb(239 246 255 / 0) 264.84%);
}
[data-i~='node-ldr'] [data-i~='avatar'] img {
	left: calc(50% + 0.07px);
	bottom: -4.14px;
	translate: -50% 0;
	width: 42.138px;
	height: 42.138px;
	object-fit: cover;
}
[data-i~='node-ae'] {
	bottom: 398px;
	background: linear-gradient(to bottom, rgb(236 253 245 / 0.4), rgb(236 253 245 / 0) 264.84%);
}
[data-i~='node-ae'] [data-i~='avatar'] img {
	top: 1.07px;
	left: 0;
	width: 40px;
	height: 60px;
	object-fit: cover;
}
[data-i~='role'] {
	font-weight: 500;
	font-size: 13px;
	line-height: 16px;
	color: black;
}
[data-i~='duty'] {
	font-size: 12px;
	line-height: normal;
	color: var(--color-slate-500);
}
[data-i~='outcome-ground'],
[data-i~='outcome-ring'],
[data-i~='outcome'] {
	position: absolute;
	left: calc(50% + 0.5px);
	translate: -50% 0;
	border-radius: 99px;
}
/* D-0465: the ground behind the outcome is a ring's own shape, so its edge never reads as another ring. D-0468: one
   ring only, the inner — the ground is its shape. */
[data-i~='outcome-ground'] {
	top: 352px;
	width: 185px;
	height: 36px;
	background: var(--ground);
}
[data-i~='outcome-ring'][data-i~='inner'] {
	top: 352px;
	width: 185px;
	height: 36px;
	border: 0.5px solid var(--color-emerald-200);
}
[data-i~='outcome-ring'][data-i~='outer'] {
	top: 348px;
	width: 193px;
	height: 44px;
	border: 0.5px solid var(--color-emerald-100);
}
[data-i~='outcome'] {
	top: 356px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 6px 10px;
	background: linear-gradient(to bottom, var(--color-emerald-900), var(--color-emerald-700));
	filter: drop-shadow(0 16px 28px rgb(0 0 0 / var(--shade)));
	font-weight: 500;
	font-size: 11px;
	line-height: 16px;
	color: white;
}
[data-i~='outcome'] img {
	width: 12px;
	height: 12px;
}
[data-i~='flow-data'] {
	bottom: -45px;
	width: 464px;
	height: 307px;
	background: linear-gradient(to bottom, var(--glass), var(--glass-foot));
	-webkit-backdrop-filter: blur(var(--glass-blur));
	backdrop-filter: blur(var(--glass-blur));
	box-shadow: 0 -16px 56px 0 rgb(0 0 0 / var(--shade));
}
[data-i~='flow-data'] [data-i~='head'] {
	gap: 16px;
}
[data-i~='flow-data'] [data-i~='avatar'] img {
	top: 1.03px;
	left: 50%;
	translate: -50% 0;
	width: 39.993px;
	height: 59.989px;
	object-fit: cover;
}
[data-i~='measure'] {
	display: flex;
	align-items: center;
	justify-content: space-between;
	overflow: clip;
	padding: 20px;
	border-bottom: 0.5px solid var(--color-slate-200);
}
[data-i~='measure-name'] {
	flex: none;
	display: flex;
	align-items: center;
	gap: 6px;
	font-weight: 500;
	font-size: 12px;
	line-height: 16px;
	color: var(--color-slate-600);
	text-transform: uppercase;
}
[data-i~='measure-name'][data-i~='fixed'] {
	width: 55px;
}
[data-i~='measure-name'] img {
	width: 10px;
	height: 10px;
}
[data-i~='measure-value'] {
	flex: none;
	width: 80px;
	font-weight: 500;
	font-size: 14px;
	line-height: 16px;
}
[data-i~='measure-share'] {
	flex: none;
	width: 100px;
	font-size: 12px;
	line-height: normal;
	color: var(--color-emerald-900);
	text-align: right;
}
[data-i~='badge'] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 4px 6.667px;
	overflow: clip;
	border-radius: 3.333px;
	background: rgb(0 196 111 / 0.12);
	font-weight: 500;
	font-size: 12px;
	line-height: 13.333px;
	letter-spacing: -0.1667px;
	color: rgb(0 91 60 / 0.84);
}
[data-i~='flow-fade'] {
	height: 181px;
}
/* D-0462: Smart Sequences arrives as the sequence running — the LDR card; the line drawn down from it at one
   pace, each step and then the AE card appearing as the line reaches it; the line stops at the outcome, which
   pops in, its inner ring and then its outer ring growing out of it, still, as if it came into focus; then the
   line runs on into the numbers' card, which arrives whole, last. The fade stands.
   D-0463: a little slower (the line at about 210px a second), a longer stop at the outcome (1.2s). D-0473: the
   ring fades in; the pill is lit by a shimmer round its border instead of the rings' glow. */
:is([data-stage]:not([data-scenes]) [data-board], [data-scenes] [data-scene]) :is([data-i~='flow-line'], [data-i~='flow-line'] ~ [data-i~='steps'], [data-i~='flow-line'] ~ [data-i~='fade'])[data-part],
:is([data-stage]:not([data-scenes]) [data-board], [data-scenes] [data-scene]) [data-i~='flow-line'] ~ :is([data-i~='node'], [data-i~='flow-data']) [data-part] {
	transition: none;
	opacity: 1;
	transform: none;
}
:is([data-stage]:not([data-scenes])[data-on] [data-board], [data-scenes] [data-scene][data-on]) [data-i~='flow-line'] ~ [data-i~='node-ldr'][data-part] {
	transition-delay: calc(var(--rg-motion-hover-duration) + var(--rg-motion-reveal-stagger) * 1.25);
}
:is([data-stage]:not([data-scenes])[data-on] [data-board], [data-scenes] [data-scene][data-on]) [data-i~='flow-line'] ~ [data-i~='steps'] > [data-part]:nth-child(1) {
	transition-delay: calc(var(--rg-motion-hover-duration) + var(--rg-motion-reveal-stagger) * 15.65);
}
:is([data-stage]:not([data-scenes])[data-on] [data-board], [data-scenes] [data-scene][data-on]) [data-i~='flow-line'] ~ [data-i~='steps'] > [data-part]:nth-child(2) {
	transition-delay: calc(var(--rg-motion-hover-duration) + var(--rg-motion-reveal-stagger) * 23.68);
}
:is([data-stage]:not([data-scenes])[data-on] [data-board], [data-scenes] [data-scene][data-on]) [data-i~='flow-line'] ~ [data-i~='steps'] > [data-part]:nth-child(3) {
	transition-delay: calc(var(--rg-motion-hover-duration) + var(--rg-motion-reveal-stagger) * 31.7);
}
:is([data-stage]:not([data-scenes])[data-on] [data-board], [data-scenes] [data-scene][data-on]) [data-i~='flow-line'] ~ [data-i~='node-ae'][data-part] {
	transition-delay: calc(var(--rg-motion-hover-duration) + var(--rg-motion-reveal-stagger) * 38.3);
}
:is([data-stage]:not([data-scenes])[data-on] [data-board], [data-scenes] [data-scene][data-on]) [data-i~='flow-line'] ~ :is([data-i~='outcome-ground'], [data-i~='outcome'])[data-part] {
	transition-duration: var(--rg-motion-reveal-duration);
	transition-timing-function: var(--rg-motion-pop-easing);
	transition-delay: calc(var(--rg-motion-hover-duration) + var(--rg-motion-reveal-stagger) * 56.23);
}
:is([data-stage]:not([data-scenes]):not([data-on]) [data-board], [data-scenes] [data-scene]:not([data-on])) [data-i~='flow-line'] ~ :is([data-i~='outcome-ground'], [data-i~='outcome'])[data-part] {
	transform: scale(0.8);
}
:is([data-stage]:not([data-scenes])[data-on] [data-board], [data-scenes] [data-scene][data-on]) [data-i~='flow-line'] ~ [data-i~='outcome-ring'][data-part] {
	transition-duration: var(--rg-motion-highlight-duration);
	transition-timing-function: var(--rg-motion-highlight-easing);
	transition-delay: calc(var(--rg-motion-hover-duration) + var(--rg-motion-reveal-stagger) * 61.25);
}
:is([data-stage]:not([data-scenes])[data-on] [data-board], [data-scenes] [data-scene][data-on]) [data-i~='flow-line'] ~ [data-i~='outcome-ring'][data-i~='outer'][data-part] {
	transition-delay: calc(var(--rg-motion-hover-duration) + var(--rg-motion-reveal-stagger) * 66.25);
}
:is([data-stage]:not([data-scenes])[data-on] [data-board], [data-scenes] [data-scene][data-on]) [data-i~='flow-line'] ~ [data-i~='flow-data'][data-part] {
	transition-delay: calc(var(--rg-motion-hover-duration) + var(--rg-motion-reveal-stagger) * 95.98);
}
:is([data-stage]:not([data-scenes]):not([data-on]) [data-board], [data-scenes] [data-scene]:not([data-on])) [data-i~='flow-line'] {
	clip-path: inset(0 0 100% 0);
}
/* D-0466: down at about 210px a second, stopping 0.15s at each step and at the AE card as they appear, then on to
   the outcome, held 1.2s while it comes into focus (D-0463), then on into the card. */
@keyframes flow-draw {
	0% {
		clip-path: inset(0 0 100% 0);
	}
	5.19% {
		clip-path: inset(0 0 88.92% 0);
	}
	9.62% {
		clip-path: inset(0 0 88.92% 0);
	}
	14.67% {
		clip-path: inset(0 0 78.14% 0);
	}
	19.09% {
		clip-path: inset(0 0 78.14% 0);
	}
	24.14% {
		clip-path: inset(0 0 67.37% 0);
	}
	28.56% {
		clip-path: inset(0 0 67.37% 0);
	}
	31.93% {
		clip-path: inset(0 0 60.18% 0);
	}
	36.35% {
		clip-path: inset(0 0 60.18% 0);
	}
	53.08% {
		clip-path: inset(0 0 24.55% 0);
	}
	88.49% {
		clip-path: inset(0 0 24.55% 0);
	}
	100% {
		clip-path: inset(0);
	}
}
/* D-0473: the outcome comes into focus as Kora's word does (D-0147) — a shimmer runs twice round its border and
   fades — in the sequence's own sky and emerald, not Kora's colours. */
@property --flow-turn {
	syntax: '<angle>';
	inherits: false;
	initial-value: 0deg;
}
[data-i~='outcome']::before {
	content: '';
	position: absolute;
	inset: -2px;
	z-index: 1;
	padding: 2px;
	border-radius: inherit;
	background: conic-gradient(from var(--flow-turn), transparent 0 35%, var(--color-sky-400) 62%, var(--color-emerald-400) 78%, var(--color-emerald-600) 92%, transparent 100%);
	-webkit-mask: linear-gradient(black 0 0) content-box, linear-gradient(black 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(black 0 0) content-box, linear-gradient(black 0 0);
	mask-composite: exclude;
	pointer-events: none;
	opacity: 0;
}
@keyframes flow-shine {
	0% {
		--flow-turn: 0deg;
		opacity: 0;
	}
	15% {
		opacity: 1;
	}
	85% {
		opacity: 1;
	}
	100% {
		--flow-turn: 720deg;
		opacity: 0;
	}
}
@media (prefers-reduced-motion: no-preference) {
	:is([data-stage]:not([data-scenes])[data-on] [data-board], [data-scenes] [data-scene][data-on]) [data-i~='flow-line'] {
		animation: flow-draw calc(var(--rg-motion-reveal-stagger) * 84.73) linear calc(var(--rg-motion-hover-duration) + var(--rg-motion-reveal-stagger) * 11.25) backwards;
	}
	:is([data-stage]:not([data-scenes])[data-on] [data-board], [data-scenes] [data-scene][data-on]) [data-i~='flow-line'] ~ [data-i~='outcome']::before {
		animation: flow-shine calc(var(--rg-motion-draw-duration) * 3) linear calc(var(--rg-motion-hover-duration) + var(--rg-motion-reveal-stagger) * 61.25) 1;
	}
}

/* ── Pick (541:59683): one wide card running off the right, and the one thing chosen lifted out. */
[data-i~='pick-halftone'] {
	position: absolute;
	top: calc(50% - 0.44px);
	left: -264px;
	translate: 0 -50%;
	width: 1210.889px;
	height: 681.125px;
	background: url('../../images/rg-grid-theme/media/illustration/halftone-centre.png') 0 0 / 100% 100%;
}
[data-i~='pick-card'] {
	top: 50%;
	left: calc(50% + 45px);
	translate: -50% -50%;
	width: 546px;
	border-radius: 4px 0 0 4px;
	background: linear-gradient(to right, var(--glass), var(--glass-foot));
	-webkit-backdrop-filter: blur(var(--glass-blur));
	backdrop-filter: blur(var(--glass-blur));
	box-shadow: 0 -16px 56px 0 rgb(0 0 0 / var(--shade));
}
[data-i~='pick-card'] [data-i~='avatar'] {
	width: 40px;
	height: 40px;
}
[data-i~='pick-card'] [data-i~='names'] {
	white-space: normal;
}
[data-i~='pick-fields'] {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 20px;
	padding: 20px 20px 20.5px;
	background: var(--glass-band);
	border-bottom: 0.5px solid var(--color-slate-200);
}
[data-i~='chip'] {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 18px;
	font-size: 11px;
	line-height: 16px;
}
[data-i~='chip'][data-i~='round'] {
	padding: 0 9px;
	border-radius: 18.742px;
	background: var(--color-slate-100);
}
[data-i~='chip'][data-i~='soft'] {
	padding: 0 6px;
	border-radius: 6px;
	background: rgb(255 255 255 / 0.5);
}
[data-i~='pick-days'] {
	padding: 12px;
}
[data-i~='pick-days'] [data-i~='tabs'] {
	background: rgb(249 249 250);
}
[data-i~='pick-days'] [data-i~='tab'] {
	padding: 0 19.48px;
	font-size: 14px;
	line-height: 17.835px;
}
[data-i~='slots'] {
	display: flex;
	align-items: stretch;
	padding-bottom: 0.5px;
	border-bottom: 0.5px solid var(--color-slate-200);
}
[data-i~='slots'][data-i~='first'] {
	padding-top: 0.5px;
	border-top: 0.5px solid var(--color-slate-200);
}
[data-i~='slot'] {
	flex: 1 0 0rem;
	min-width: 1px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: clip;
	padding: 20px 0;
	font-family: 'Inter Tight', sans-serif;
	font-weight: 500;
	font-size: 12px;
	line-height: normal;
	color: var(--color-slate-500);
}
[data-i~='slot']:first-child {
	flex: none;
	width: 186px;
}
[data-i~='slot'] + [data-i~='slot'] {
	border-left: 0.5px solid var(--color-slate-200);
}
[data-i~='pick-fade'] {
	position: absolute;
	top: 0;
	right: 0;
	width: 227px;
	height: 700px;
	background: linear-gradient(to right, transparent, var(--ground));
	pointer-events: none;
}
/* D-0460: the bar's holder covers the board, so the bar keeps its place on it; the bar moves a row (55.4) and a
   column (186) at a time, over a reveal, when the case turns. */
[data-i~='chosen-move'] {
	position: absolute;
	inset: 0;
	pointer-events: none;
}
[data-i~='chosen-slot'] {
	translate: calc(var(--col, 0) * 186px) calc(var(--row, 0) * 55.4px);
	/* D-0461: a smooth glide — slower (0.8s), easing in and out. */
	transition: translate var(--rg-motion-highlight-duration) var(--rg-motion-highlight-easing);
}
[data-i~='chosen-slot'] {
	position: absolute;
	top: 404px;
	left: 61px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 200px;
	height: 60px;
	overflow: clip;
	border: 1.5px solid white;
	border-radius: 4px;
	background: rgb(0 87 59 / 0.95);
	-webkit-backdrop-filter: blur(2.5px);
	backdrop-filter: blur(2.5px);
	box-shadow: 0 0 24px 2px rgb(0 0 0 / 0.15);
	font-family: 'Inter Tight', sans-serif;
	font-weight: 600;
	font-size: 12.655px;
	line-height: normal;
	color: white;
}

/* ── The sticky stage (D-0110): one board, every scene on it, one ground under them all. The scene
   in view is `data-on`; its parts rise in as the last one's sink away. The ground is a live
   pattern (D-0112), reshaped in code. */
[data-scenes] [data-scene] {
	position: absolute;
	inset: 0;
}
[data-scenes] [data-scene] > [data-i~='halftone'] {
	display: none;
}
/* Appearing (D-0119, D-0122): every element of a scene is a part — the cards, and inside them each
   head, row and field — numbered in the order it is drawn by the section's script (`--n`). The
   parts of the scene coming in arrive one by one, two reveal staggers apart, once the last
   scene's have begun to go; those go together. */
[data-scenes] [data-part] {
	transition-property: opacity, transform;
	transition-duration: var(--rg-motion-reveal-duration);
	transition-timing-function: var(--rg-motion-reveal-easing);
}
[data-scenes] [data-scene]:not([data-on]) [data-part] {
	opacity: 0;
	transform: translateY(var(--rg-motion-reveal-distance));
}
[data-scenes] [data-scene][data-on] [data-part] {
	transition-delay: calc(var(--rg-motion-hover-duration) + var(--n, 0) * var(--rg-motion-reveal-stagger) * 2);
}
/* D-0281: a stage of one scene arrives the same way, the first time it is seen. Only a stage with a
   board: the revenue curve's meetings carry `data-stage` too, and have parts of their own (D-0283). */
/* The transition lives on the stage that is on (D-0298): the waiting state is taken at once, and
   only the arrival moves — else the wait itself would animate and the arrival reverse it. */
[data-stage]:not([data-scenes])[data-on] [data-board] [data-part] {
	transition-property: opacity, transform;
	transition-duration: var(--rg-motion-reveal-duration);
	transition-timing-function: var(--rg-motion-reveal-easing);
	transition-delay: calc(var(--rg-motion-hover-duration) + var(--n, 0) * var(--rg-motion-reveal-stagger) * 2);
}
[data-stage]:not([data-scenes]):not([data-on]) [data-board] [data-part] {
	opacity: 0;
	transform: translateY(var(--rg-motion-reveal-distance));
}
/* D-0295: what a card holds comes a reveal after the card itself — the container first, then its
   content; the cases then take turns in it as before. */
[data-stage]:not([data-scenes]) [data-board] [data-i~='card'] [data-part] {
	transition-delay: calc(var(--rg-motion-hover-duration) + var(--rg-motion-reveal-duration) + var(--n, 0) * var(--rg-motion-reveal-stagger) * 2);
}
/* D-0296, D-0297: the Meeting hero's call stands as it is; only its three notes appear — each 8 from
   its side, fading up over the draw role's time, one a reveal after the other once the hero itself
   has come in (a reveal and a hover after the stage is on): Talking Points, then Next Steps, then
   Notes; what each holds a reveal after it. Then the cases take turns in them. */
[data-stage]:not([data-scenes]) [data-board] [data-i~='mt-call'][data-part],
[data-stage]:not([data-scenes]) [data-board] [data-i~='mt-call'] [data-part] {
	transition: none;
	opacity: 1;
	transform: none;
}
[data-stage]:not([data-scenes]) [data-board] [data-i~='mt-note'][data-part] {
	transition-duration: var(--rg-motion-draw-duration);
	transition-timing-function: var(--rg-motion-enter-easing);
}
[data-stage]:not([data-scenes]) [data-board] [data-i~='mt-points'][data-part] {
	--at: 0;
}
[data-stage]:not([data-scenes]) [data-board] [data-i~='mt-steps'][data-part] {
	--at: 1;
}
[data-stage]:not([data-scenes]) [data-board] [data-i~='mt-notes'][data-part] {
	--at: 2;
}
[data-stage]:not([data-scenes]) [data-board] [data-i~='mt-note'][data-part] {
	transition-delay: calc(var(--rg-motion-reveal-duration) + var(--rg-motion-hover-duration) + var(--at) * var(--rg-motion-reveal-duration));
}
[data-stage]:not([data-scenes]) [data-board] [data-i~='mt-note'] [data-part] {
	transition-delay: calc(var(--rg-motion-reveal-duration) * 2 + var(--rg-motion-hover-duration) + var(--at) * var(--rg-motion-reveal-duration) + var(--n, 0) * var(--rg-motion-reveal-stagger));
}
[data-stage]:not([data-scenes]):not([data-on]) [data-board] [data-i~='mt-points'][data-part],
[data-stage]:not([data-scenes]):not([data-on]) [data-board] [data-i~='mt-notes'][data-part] {
	transform: translateX(calc(var(--spacing) * 2));
}
[data-stage]:not([data-scenes]):not([data-on]) [data-board] [data-i~='mt-steps'][data-part] {
	transform: translateX(calc(var(--spacing) * -2));
}
/* D-0298: and until the stage is on, nothing transitions at all — the duration and delay rules above
   would otherwise animate the parts INTO their waiting state (the shorthand's default is `all`). */
[data-stage]:not([data-scenes]):not([data-on]) [data-board] [data-part] {
	transition: none;
}

/* D-0413: CRM Sync's Records picture arrives in order, on the sticky stage and its own stage alike — the
   email with all it holds, then the line drawn down from it (the draw role), then the record with all it
   holds once the line has reached it. What a card holds arrives with it (its rows keep their dims). */
:is([data-stage]:not([data-scenes])[data-on] [data-board], [data-scenes] [data-scene][data-on]) [data-i~='stack-email'][data-part],
:is([data-stage]:not([data-scenes])[data-on] [data-board], [data-scenes] [data-scene][data-on]) [data-i~='stack-email'] [data-part] {
	transition-delay: var(--rg-motion-hover-duration);
}
:is([data-stage]:not([data-scenes]) [data-board], [data-scenes] [data-scene]) [data-i~='stack-line'][data-part] {
	opacity: 1;
	transform-origin: top;
}
:is([data-stage]:not([data-scenes]):not([data-on]) [data-board], [data-scenes] [data-scene]:not([data-on])) [data-i~='stack-line'][data-part] {
	transform: scaleY(0);
}
:is([data-stage]:not([data-scenes])[data-on] [data-board], [data-scenes] [data-scene][data-on]) [data-i~='stack-line'][data-part] {
	transition-property: transform;
	transition-duration: var(--rg-motion-draw-duration);
	transition-timing-function: var(--rg-motion-draw-easing);
	transition-delay: calc(var(--rg-motion-hover-duration) + var(--rg-motion-reveal-duration));
}
:is([data-stage]:not([data-scenes])[data-on] [data-board], [data-scenes] [data-scene][data-on]) [data-i~='stack-record'][data-part],
:is([data-stage]:not([data-scenes])[data-on] [data-board], [data-scenes] [data-scene][data-on]) [data-i~='stack-record'] [data-part] {
	transition-delay: calc(var(--rg-motion-hover-duration) + var(--rg-motion-reveal-duration) + var(--rg-motion-draw-duration));
}
:is([data-stage]:not([data-scenes]) [data-board], [data-scenes] [data-scene]) [data-i~='stack-fade'][data-part] {
	transition: none;
	opacity: 1;
	transform: none;
}

/* D-0422: a time a typed run starts (Stage's typeOn) — registered so it computes. */
@property --type-at {
	syntax: '<time>';
	inherits: false;
	initial-value: 0s;
}
/* D-0428: Revenue IQ's Next step picture arrives as the call being written up — the call's card with its head,
   Kora's mark, her summary typed quickly (headline, then body), Next steps, then each step one after another;
   on the sticky stage and its own stage alike. The cases then turn, the summary typed afresh. */
:is([data-stage]:not([data-scenes]) [data-board], [data-scenes] [data-scene]) [data-i~='kick-card'] > :is([data-i~='kick-head'], [data-i~='kick-summary'], [data-i~='kick-steps'])[data-part],
:is([data-stage]:not([data-scenes]) [data-board], [data-scenes] [data-scene]) [data-i~='kick-fade'][data-part] {
	transition: none;
	opacity: 1;
	transform: none;
}
[data-i~='kick-mark'],
[data-i~='kick-steps'] > * {
	transition-property: opacity, transform;
	transition-duration: var(--rg-motion-reveal-duration);
	transition-timing-function: var(--rg-motion-reveal-easing);
}
:is([data-stage]:not([data-scenes]):not([data-on]) [data-board], [data-scenes] [data-scene]:not([data-on])) :is([data-i~='kick-mark'], [data-i~='kick-steps'] > *) {
	opacity: 0;
	transform: translateY(var(--rg-motion-reveal-distance));
}
:is([data-stage]:not([data-scenes])[data-on] [data-board], [data-scenes] [data-scene][data-on]) [data-i~='kick-mark'] {
	transition-delay: calc(var(--rg-motion-hover-duration) + var(--rg-motion-reveal-duration));
}
/* D-0445: the summary is no longer typed — it comes into focus whole, as a turning case does (D-0133), so
   Next steps follow it sooner. */
[data-i~='kick-say'] {
	transition-property: opacity, filter;
	transition-duration: var(--rg-motion-reveal-duration);
	transition-timing-function: var(--rg-motion-state-easing);
}
:is([data-stage]:not([data-scenes]):not([data-on]) [data-board], [data-scenes] [data-scene]:not([data-on])) [data-i~='kick-say'] {
	opacity: 0;
	filter: blur(var(--blur-sm));
}
:is([data-stage]:not([data-scenes])[data-on] [data-board], [data-scenes] [data-scene][data-on]) [data-i~='kick-say'] {
	transition-delay: calc(var(--rg-motion-hover-duration) + var(--rg-motion-reveal-duration) + var(--rg-motion-reveal-stagger) * 5);
}
:is([data-stage]:not([data-scenes])[data-on] [data-board], [data-scenes] [data-scene][data-on]) [data-i~='kick-steps'] > :first-child {
	transition-delay: calc(var(--rg-motion-hover-duration) + var(--rg-motion-reveal-duration) + var(--rg-motion-reveal-stagger) * 5 + var(--rg-motion-reveal-duration));
}
:is([data-stage]:not([data-scenes])[data-on] [data-board], [data-scenes] [data-scene][data-on]) [data-i~='kick-steps'] > :nth-child(2) {
	transition-delay: calc(var(--rg-motion-hover-duration) + var(--rg-motion-reveal-duration) + var(--rg-motion-reveal-stagger) * 5 + var(--rg-motion-reveal-duration) + var(--rg-motion-reveal-stagger) * 4 + var(--rg-motion-reveal-stagger) * 6 * 0);
}
:is([data-stage]:not([data-scenes])[data-on] [data-board], [data-scenes] [data-scene][data-on]) [data-i~='kick-steps'] > :nth-child(3) {
	transition-delay: calc(var(--rg-motion-hover-duration) + var(--rg-motion-reveal-duration) + var(--rg-motion-reveal-stagger) * 5 + var(--rg-motion-reveal-duration) + var(--rg-motion-reveal-stagger) * 4 + var(--rg-motion-reveal-stagger) * 6 * 1);
}
:is([data-stage]:not([data-scenes])[data-on] [data-board], [data-scenes] [data-scene][data-on]) [data-i~='kick-steps'] > :nth-child(4) {
	transition-delay: calc(var(--rg-motion-hover-duration) + var(--rg-motion-reveal-duration) + var(--rg-motion-reveal-stagger) * 5 + var(--rg-motion-reveal-duration) + var(--rg-motion-reveal-stagger) * 4 + var(--rg-motion-reveal-stagger) * 6 * 2);
}
:is([data-stage]:not([data-scenes])[data-on] [data-board], [data-scenes] [data-scene][data-on]) [data-i~='kick-steps'] > :nth-child(5) {
	transition-delay: calc(var(--rg-motion-hover-duration) + var(--rg-motion-reveal-duration) + var(--rg-motion-reveal-stagger) * 5 + var(--rg-motion-reveal-duration) + var(--rg-motion-reveal-stagger) * 4 + var(--rg-motion-reveal-stagger) * 6 * 3);
}

/* D-0422: Revenue IQ's Suggest picture — the table arrives, its rows stepping down in strength the further
   it goes; Atlas Inc.'s Kora mark lights, then darkens as if pressed; Kora's suggestion rises from it, above
   both fades, and fills in — her head, Today, Suggested — her reasons typed quickly, then Accept and Dismiss.
   On the sticky stage and its own stage alike. D-0425: quick throughout — in place by about 3.6s. */
:is([data-stage]:not([data-scenes])[data-on] [data-board], [data-scenes] [data-scene][data-on]) [data-i~='sug-card'] > [data-i~='sug-row']:nth-child(3)[data-part] {
	opacity: 1;
}
:is([data-stage]:not([data-scenes])[data-on] [data-board], [data-scenes] [data-scene][data-on]) [data-i~='sug-card'] > [data-i~='sug-row']:nth-child(4)[data-part] {
	opacity: 1;
}
:is([data-stage]:not([data-scenes])[data-on] [data-board], [data-scenes] [data-scene][data-on]) [data-i~='sug-card'] > [data-i~='sug-row']:nth-child(5)[data-part] {
	opacity: 0.85;
}
:is([data-stage]:not([data-scenes])[data-on] [data-board], [data-scenes] [data-scene][data-on]) [data-i~='sug-card'] > [data-i~='sug-row']:nth-child(6)[data-part] {
	opacity: 0.7;
}
:is([data-stage]:not([data-scenes])[data-on] [data-board], [data-scenes] [data-scene][data-on]) [data-i~='sug-card'] > [data-i~='sug-row']:nth-child(7)[data-part] {
	opacity: 0.55;
}
:is([data-stage]:not([data-scenes])[data-on] [data-board], [data-scenes] [data-scene][data-on]) [data-i~='sug-card'] > [data-i~='sug-row']:nth-child(8)[data-part] {
	opacity: 0.4;
}
:is([data-stage]:not([data-scenes])[data-on] [data-board], [data-scenes] [data-scene][data-on]) [data-i~='sug-card'] > [data-i~='sug-row']:nth-child(9)[data-part] {
	opacity: 0.25;
}
:is([data-stage]:not([data-scenes])[data-on] [data-board], [data-scenes] [data-scene][data-on]) [data-i~='sug-card'] > [data-i~='sug-row']:nth-child(10)[data-part] {
	opacity: 0.15;
}
:is([data-stage]:not([data-scenes])[data-on] [data-board], [data-scenes] [data-scene][data-on]) [data-i~='sug-card'] > [data-i~='sug-row']:nth-child(11)[data-part] {
	opacity: 0.08;
}
:is([data-stage]:not([data-scenes]):not([data-on]) [data-board], [data-scenes] [data-scene]:not([data-on])) [data-i~='sug-kora'][data-i~='lit'] {
	box-shadow: none;
}
:is([data-stage]:not([data-scenes])[data-on] [data-board], [data-scenes] [data-scene][data-on]) [data-i~='sug-kora'][data-i~='lit'] {
	transition: box-shadow var(--rg-motion-reveal-duration) var(--rg-motion-reveal-easing) calc(var(--rg-motion-hover-duration) + var(--rg-motion-reveal-duration));
	/* D-0426: pressed — darker and in by the press scale — for a click's moment only (D-0428): down in a press,
	   held a press, back up over two; the glow stays. */
	animation: sug-press calc(var(--rg-motion-press-duration) * 4) linear calc(var(--rg-motion-hover-duration) + var(--rg-motion-reveal-duration) + var(--rg-motion-reveal-stagger) * 8) both;
}
@keyframes sug-press {
	0% {
		background-color: white;
		scale: 1;
	}
	25%,
	50% {
		background-color: var(--color-neutral-100);
		scale: var(--rg-motion-press-scale);
	}
	100% {
		background-color: white;
		scale: 1;
	}
}
[data-i~='card'][data-i~='sug-pop'] {
	z-index: 2;
}
:is([data-stage]:not([data-scenes])[data-on] [data-board], [data-scenes] [data-scene][data-on]) [data-i~='sug-pop'][data-part] {
	transition-delay: calc(var(--rg-motion-hover-duration) + var(--rg-motion-reveal-duration) + var(--rg-motion-reveal-stagger) * 8 + var(--rg-motion-state-duration));
}
:is([data-stage]:not([data-scenes])[data-on] [data-board], [data-scenes] [data-scene][data-on]) [data-i~='sug-pop'] > [data-i~='sug-pop-head'][data-part] {
	transition-delay: calc(var(--rg-motion-hover-duration) + var(--rg-motion-reveal-duration) + var(--rg-motion-reveal-stagger) * 8 + var(--rg-motion-state-duration) + var(--rg-motion-reveal-stagger) * 8);
}
:is([data-stage]:not([data-scenes]) [data-board], [data-scenes] [data-scene]) [data-i~='sug-pop'] > [data-i~='sug-pop-block'][data-part],
:is([data-stage]:not([data-scenes]) [data-board], [data-scenes] [data-scene]) :is([data-i~='sug-edge'], [data-i~='sug-fade'])[data-part] {
	transition: none;
	opacity: 1;
	transform: none;
}
[data-i~='sug-field'],
[data-i~='sug-act'] {
	transition-property: opacity, transform;
	transition-duration: var(--rg-motion-reveal-duration);
	transition-timing-function: var(--rg-motion-reveal-easing);
}
:is([data-stage]:not([data-scenes]):not([data-on]) [data-board], [data-scenes] [data-scene]:not([data-on])) :is([data-i~='sug-field'], [data-i~='sug-act']) {
	opacity: 0;
	transform: translateY(var(--rg-motion-reveal-distance));
}
:is([data-stage]:not([data-scenes])[data-on] [data-board], [data-scenes] [data-scene][data-on]) [data-i~='sug-field']:nth-child(1) {
	transition-delay: calc(var(--rg-motion-hover-duration) + var(--rg-motion-reveal-duration) + var(--rg-motion-reveal-stagger) * 8 + var(--rg-motion-state-duration) + var(--rg-motion-reveal-stagger) * 12);
}
:is([data-stage]:not([data-scenes])[data-on] [data-board], [data-scenes] [data-scene][data-on]) [data-i~='sug-field']:nth-child(2) {
	transition-delay: calc(var(--rg-motion-hover-duration) + var(--rg-motion-reveal-duration) + var(--rg-motion-reveal-stagger) * 8 + var(--rg-motion-state-duration) + var(--rg-motion-reveal-stagger) * 16);
}
:is([data-stage]:not([data-scenes])[data-on] [data-board], [data-scenes] [data-scene][data-on]) [data-i~='sug-why'] > :first-child {
	--type-at: calc(var(--rg-motion-hover-duration) + var(--rg-motion-reveal-duration) + var(--rg-motion-reveal-stagger) * 8 + var(--rg-motion-state-duration) + var(--rg-motion-reveal-stagger) * 24);
}
:is([data-stage]:not([data-scenes])[data-on] [data-board], [data-scenes] [data-scene][data-on]) [data-i~='sug-act']:nth-child(1) {
	transition-delay: calc(var(--rg-motion-hover-duration) + var(--rg-motion-reveal-duration) + var(--rg-motion-reveal-stagger) * 8 + var(--rg-motion-state-duration) + var(--rg-motion-reveal-stagger) * 24 + var(--typed, 0ms) + var(--rg-motion-reveal-stagger) * 4);
}
:is([data-stage]:not([data-scenes])[data-on] [data-board], [data-scenes] [data-scene][data-on]) [data-i~='sug-act']:nth-child(2) {
	transition-delay: calc(var(--rg-motion-hover-duration) + var(--rg-motion-reveal-duration) + var(--rg-motion-reveal-stagger) * 8 + var(--rg-motion-state-duration) + var(--rg-motion-reveal-stagger) * 24 + var(--typed, 0ms) + var(--rg-motion-reveal-stagger) * 8);
}

/* D-0420: the Revenue IQ hero arrives a section at a time — its icon, its label, its total, its bars
   growing from the left one at a time, each once the last has landed (D-0421), its legend all at once, then its rail drawn
   down to the next — True pipeline, then Open pipeline the same way. One beat is five reveal staggers (D-0424). */
[data-stage]:not([data-scenes]) [data-board] :is([data-i~='pipe-rail'], [data-i~='pipe-bar'])[data-part] {
	opacity: 1;
}
[data-stage]:not([data-scenes]):not([data-on]) [data-board] [data-i~='pipe-rail'][data-part] {
	transform: scaleY(0);
}
[data-stage]:not([data-scenes]):not([data-on]) [data-board] [data-i~='pipe-bar'][data-part] {
	transform: none;
	clip-path: inset(0 100% 0 0);
}
[data-stage]:not([data-scenes])[data-on] [data-board] [data-i~='pipe-bar'][data-part] {
	clip-path: inset(0);
	transition-property: clip-path;
	/* D-0423: every bar at one even pace — 600 board px a draw role (D-0424), no easing — each starting as the one
	   before lands, so a row grows as one line. */
	transition-duration: calc(var(--rg-motion-draw-duration) * var(--bar) / 600);
	transition-timing-function: linear;
}
[data-stage]:not([data-scenes])[data-on] [data-board] [data-i~='pipe-rail'][data-part] {
	transition-property: transform;
	transition-duration: var(--rg-motion-reveal-duration);
	transition-timing-function: var(--rg-motion-draw-easing);
}
[data-stage]:not([data-scenes])[data-on] [data-board] [data-i~='pipe-mark'][data-i~='a'][data-part] {
	transition-delay: var(--rg-motion-hover-duration);
}
[data-stage]:not([data-scenes])[data-on] [data-board] [data-i~='pipe-label'][data-i~='a'][data-part] {
	transition-delay: calc(var(--rg-motion-hover-duration) + var(--rg-motion-reveal-stagger) * 5);
}
[data-stage]:not([data-scenes])[data-on] [data-board] [data-i~='pipe-total'][data-i~='a'][data-part] {
	transition-delay: calc(var(--rg-motion-hover-duration) + var(--rg-motion-reveal-stagger) * 5 * 2);
}
[data-stage]:not([data-scenes])[data-on] [data-board] [data-i~='pipe-bar'][data-i~='a1'][data-part] {
	transition-delay: calc(var(--rg-motion-hover-duration) + var(--rg-motion-reveal-stagger) * 5 * 3);
}
[data-stage]:not([data-scenes])[data-on] [data-board] [data-i~='pipe-bar'][data-i~='a2'][data-part] {
	transition-delay: calc(var(--rg-motion-hover-duration) + var(--rg-motion-reveal-stagger) * 5 * 3 + var(--rg-motion-draw-duration) * 335 / 600);
}
[data-stage]:not([data-scenes])[data-on] [data-board] [data-i~='pipe-part'][data-i~='a1'][data-part],
[data-stage]:not([data-scenes])[data-on] [data-board] [data-i~='pipe-part'][data-i~='a2'][data-part] {
	transition-delay: calc(var(--rg-motion-hover-duration) + var(--rg-motion-reveal-stagger) * 5 * 3 + var(--rg-motion-draw-duration) * 495 / 600);
}
[data-stage]:not([data-scenes])[data-on] [data-board] [data-i~='pipe-rail'][data-i~='a'][data-part] {
	transition-delay: calc(var(--rg-motion-hover-duration) + var(--rg-motion-reveal-stagger) * 5 * 3 + var(--rg-motion-draw-duration) * 495 / 600 + var(--rg-motion-reveal-stagger) * 5);
}
[data-stage]:not([data-scenes])[data-on] [data-board] [data-i~='pipe-mark'][data-i~='b'][data-part] {
	transition-delay: calc(var(--rg-motion-hover-duration) + var(--rg-motion-reveal-stagger) * 5 * 3 + var(--rg-motion-draw-duration) * 495 / 600 + var(--rg-motion-reveal-stagger) * 5 + var(--rg-motion-reveal-duration));
}
[data-stage]:not([data-scenes])[data-on] [data-board] [data-i~='pipe-label'][data-i~='b'][data-part] {
	transition-delay: calc(var(--rg-motion-hover-duration) + var(--rg-motion-reveal-stagger) * 5 * 3 + var(--rg-motion-draw-duration) * 495 / 600 + var(--rg-motion-reveal-stagger) * 5 + var(--rg-motion-reveal-duration) + var(--rg-motion-reveal-stagger) * 5);
}
[data-stage]:not([data-scenes])[data-on] [data-board] [data-i~='pipe-total'][data-i~='b'][data-part] {
	transition-delay: calc(var(--rg-motion-hover-duration) + var(--rg-motion-reveal-stagger) * 5 * 3 + var(--rg-motion-draw-duration) * 495 / 600 + var(--rg-motion-reveal-stagger) * 5 + var(--rg-motion-reveal-duration) + var(--rg-motion-reveal-stagger) * 5 * 2);
}
[data-stage]:not([data-scenes])[data-on] [data-board] [data-i~='pipe-bar'][data-i~='b1'][data-part] {
	transition-delay: calc(var(--rg-motion-hover-duration) + var(--rg-motion-reveal-stagger) * 5 * 3 + var(--rg-motion-draw-duration) * 495 / 600 + var(--rg-motion-reveal-stagger) * 5 + var(--rg-motion-reveal-duration) + var(--rg-motion-reveal-stagger) * 5 * 3);
}
[data-stage]:not([data-scenes])[data-on] [data-board] [data-i~='pipe-bar'][data-i~='b2'][data-part] {
	transition-delay: calc(var(--rg-motion-hover-duration) + var(--rg-motion-reveal-stagger) * 5 * 3 + var(--rg-motion-draw-duration) * 495 / 600 + var(--rg-motion-reveal-stagger) * 5 + var(--rg-motion-reveal-duration) + var(--rg-motion-reveal-stagger) * 5 * 3 + var(--rg-motion-draw-duration) * 232 / 600);
}
[data-stage]:not([data-scenes])[data-on] [data-board] [data-i~='pipe-bar'][data-i~='b3'][data-part] {
	transition-delay: calc(var(--rg-motion-hover-duration) + var(--rg-motion-reveal-stagger) * 5 * 3 + var(--rg-motion-draw-duration) * 495 / 600 + var(--rg-motion-reveal-stagger) * 5 + var(--rg-motion-reveal-duration) + var(--rg-motion-reveal-stagger) * 5 * 3 + var(--rg-motion-draw-duration) * 401 / 600);
}
[data-stage]:not([data-scenes])[data-on] [data-board] [data-i~='pipe-part'][data-i~='b1'][data-part],
[data-stage]:not([data-scenes])[data-on] [data-board] [data-i~='pipe-part'][data-i~='b2'][data-part],
[data-stage]:not([data-scenes])[data-on] [data-board] [data-i~='pipe-part'][data-i~='b3'][data-part] {
	transition-delay: calc(var(--rg-motion-hover-duration) + var(--rg-motion-reveal-stagger) * 5 * 3 + var(--rg-motion-draw-duration) * 495 / 600 + var(--rg-motion-reveal-stagger) * 5 + var(--rg-motion-reveal-duration) + var(--rg-motion-reveal-stagger) * 5 * 3 + var(--rg-motion-draw-duration) * 496 / 600);
}
[data-stage]:not([data-scenes])[data-on] [data-board] [data-i~='pipe-rail'][data-i~='b'][data-part] {
	transition-delay: calc(var(--rg-motion-hover-duration) + var(--rg-motion-reveal-stagger) * 5 * 3 + var(--rg-motion-draw-duration) * 495 / 600 + var(--rg-motion-reveal-stagger) * 5 + var(--rg-motion-reveal-duration) + var(--rg-motion-reveal-stagger) * 5 * 4 + var(--rg-motion-draw-duration) * 496 / 600);
}
[data-stage]:not([data-scenes]) [data-board] :is([data-i~='pipe-edge'], [data-i~='pipe-fade'])[data-part] {
	transition: none;
	opacity: 1;
	transform: none;
}

/* D-0410: the CRM Sync hero's line is drawn, as the sticky stage's wires are (D-0130) — down from the
   head card once that card has landed, over the draw role's time; its shimmer then runs as ever. It stays
   behind the rows. */
[data-stage]:not([data-scenes]) [data-board] [data-i~='feed-line'][data-part] {
	opacity: 1;
}
[data-stage]:not([data-scenes]):not([data-on]) [data-board] [data-i~='feed-line'][data-part] {
	transform: scaleY(0);
}
[data-stage]:not([data-scenes])[data-on] [data-board] [data-i~='feed-line'][data-part] {
	transition-property: transform;
	transition-duration: var(--rg-motion-draw-duration);
	transition-timing-function: var(--rg-motion-draw-easing);
	transition-delay: calc(var(--rg-motion-hover-duration) + var(--rg-motion-reveal-duration));
}

/* D-0408: the MCP Connectors scene arrives as a click — the panel with all it holds (its Connectors chip
   plain), then the chip takes its grey as if pressed, then the menu opens out of it (the enter role); on
   the sticky stage and its own stage alike. The edge fades stand as they are. */
:is([data-stage]:not([data-scenes]) [data-board], [data-scenes] [data-scene]) [data-i~='conn-panel'] [data-i~='conn-box'][data-part],
:is([data-stage]:not([data-scenes]) [data-board], [data-scenes] [data-scene]) [data-i~='conn-panel'] ~ :is([data-i~='fade-t'], [data-i~='fade-r'], [data-i~='conn-fade'])[data-part] {
	transition: none;
	opacity: 1;
	transform: none;
}
:is([data-stage]:not([data-scenes])[data-on] [data-board], [data-scenes] [data-scene][data-on]) [data-i~='conn-panel'][data-part] {
	transition-delay: var(--rg-motion-hover-duration);
}
[data-i~='conn-chip'] {
	transition-property: background-color;
	transition-duration: var(--rg-motion-reveal-duration);
	transition-timing-function: var(--rg-motion-state-easing);
}
:is([data-stage]:not([data-scenes]):not([data-on]) [data-board], [data-scenes] [data-scene]:not([data-on])) [data-i~='conn-chip'] {
	background-color: transparent;
}
:is([data-stage]:not([data-scenes])[data-on] [data-board], [data-scenes] [data-scene][data-on]) [data-i~='conn-chip'] {
	transition-delay: calc(var(--rg-motion-hover-duration) + var(--rg-motion-reveal-duration) + var(--rg-motion-reveal-stagger) * 4);
}
/* D-0409: the menu opens unhurried — the reveal role's time and curve over half its distance, a beat
   after the chip has gone grey — where the enter role's 200ms read as a jolt. */
:is([data-stage]:not([data-scenes]):not([data-on]) [data-board], [data-scenes] [data-scene]:not([data-on])) [data-i~='conn-menu'][data-part] {
	opacity: 0;
	transform: translateY(calc(var(--rg-motion-reveal-distance) / 2));
}
:is([data-stage]:not([data-scenes])[data-on] [data-board], [data-scenes] [data-scene][data-on]) [data-i~='conn-menu'][data-part] {
	transition-property: opacity, transform;
	transition-duration: var(--rg-motion-reveal-duration);
	transition-timing-function: var(--rg-motion-reveal-easing);
	transition-delay: calc(var(--rg-motion-hover-duration) + var(--rg-motion-reveal-duration) * 2 + var(--rg-motion-reveal-stagger) * 8);
}

/* D-0407: the MCP Risk scene arrives as a story, on the sticky stage and on its own stage alike — the
   ask (its words in it), then the answer with its Deals Found chip in it, then the answer's words, then
   the bars one by one, each fill growing from the left. Parts that should not move on their own stand
   with their card. */
:is([data-stage]:not([data-scenes]) [data-board], [data-scenes] [data-scene]) [data-i~='risk-ask'] [data-i~='risk-return'][data-part],
:is([data-stage]:not([data-scenes]) [data-board], [data-scenes] [data-scene]) [data-i~='risk-card'] [data-i~='risk-block'][data-part],
:is([data-stage]:not([data-scenes]) [data-board], [data-scenes] [data-scene]) [data-i~='risk-card'] [data-i~='risk-bars'][data-part] {
	transition: none;
	opacity: 1;
	transform: none;
}
:is([data-stage]:not([data-scenes]) [data-board], [data-scenes] [data-scene]) [data-i~='risk-ask'] [data-i~='risk-ask-text'][data-part] {
	opacity: 1;
	transform: none;
	transition-property: opacity, filter;
	transition-duration: var(--rg-motion-reveal-duration);
	transition-timing-function: var(--rg-motion-state-easing);
	transition-delay: 0s;
}
:is([data-stage]:not([data-scenes]) [data-board], [data-scenes] [data-scene]) [data-i~='risk-ask'] [data-i~='risk-ask-text'][data-part][data-out] {
	opacity: 0;
}
:is([data-stage]:not([data-scenes])[data-on] [data-board], [data-scenes] [data-scene][data-on]) [data-i~='risk-ask'][data-part] {
	transition-delay: var(--rg-motion-hover-duration);
}
:is([data-stage]:not([data-scenes])[data-on] [data-board], [data-scenes] [data-scene][data-on]) [data-i~='risk-card'][data-part] {
	transition-delay: calc(var(--rg-motion-hover-duration) + var(--rg-motion-reveal-duration) * 2);
}
[data-i~='risk-say'],
[data-i~='risk-bar'] {
	transition-property: opacity, transform;
	transition-duration: var(--rg-motion-reveal-duration);
	transition-timing-function: var(--rg-motion-reveal-easing);
}
[data-i~='risk-fill'] {
	clip-path: inset(0);
	transition-property: clip-path;
	transition-duration: var(--rg-motion-draw-duration);
	transition-timing-function: var(--rg-motion-reveal-easing);
}
:is([data-stage]:not([data-scenes]):not([data-on]) [data-board], [data-scenes] [data-scene]:not([data-on])) :is([data-i~='risk-say'], [data-i~='risk-bar']) {
	opacity: 0;
	transform: translateY(var(--rg-motion-reveal-distance));
}
:is([data-stage]:not([data-scenes]):not([data-on]) [data-board], [data-scenes] [data-scene]:not([data-on])) [data-i~='risk-fill'] {
	clip-path: inset(0 100% 0 0);
}
[data-i~='risk-bar']:nth-child(1) {
	--k: 0;
}
[data-i~='risk-bar']:nth-child(2) {
	--k: 1;
}
[data-i~='risk-bar']:nth-child(3) {
	--k: 2;
}
[data-i~='risk-bar']:nth-child(4) {
	--k: 3;
}
[data-i~='risk-bar']:nth-child(5) {
	--k: 4;
}
:is([data-stage]:not([data-scenes])[data-on] [data-board], [data-scenes] [data-scene][data-on]) [data-i~='risk-say'] {
	transition-delay: calc(var(--rg-motion-hover-duration) + var(--rg-motion-reveal-duration) * 3);
}
:is([data-stage]:not([data-scenes])[data-on] [data-board], [data-scenes] [data-scene][data-on]) [data-i~='risk-bar'],
:is([data-stage]:not([data-scenes])[data-on] [data-board], [data-scenes] [data-scene][data-on]) [data-i~='risk-fill'] {
	transition-delay: calc(var(--rg-motion-hover-duration) + var(--rg-motion-reveal-duration) * 4 + var(--k, 0) * var(--rg-motion-reveal-stagger) * 4);
}

/* D-0405: the MCP hero's Ask arrives as a story — the composer first (its words a reveal after it), then
   the Works with bar slides up from behind it, then its label, then the four tools one by one; the asks
   start turning only once all of it has landed (Stage, D-0405). The group and the edge fades stand as
   they are. */
[data-stage]:not([data-scenes]) [data-board] [data-i~='ask-group'][data-part],
[data-stage]:not([data-scenes]) [data-board] [data-i~='ask-logos'][data-part],
[data-stage]:not([data-scenes]) [data-board] [data-i~='ask-edge'][data-part],
[data-stage]:not([data-scenes]) [data-board] [data-i~='ask-fade'][data-part] {
	transition: none;
	opacity: 1;
	transform: none;
}
[data-stage]:not([data-scenes])[data-on] [data-board] [data-i~='ask-box'][data-part] {
	transition-delay: var(--rg-motion-hover-duration);
}
/* D-0406: the composer comes with its Revenue Grid pill already in it; the question is typed in once it
   has landed (Stage, typeIn), and all that follows waits for it (`--typed`, set by the stage). */
[data-stage]:not([data-scenes]) [data-board] [data-i~='ask-box'] [data-i~='ask-row'][data-part] {
	transition: none;
	opacity: 1;
	transform: none;
}
[data-stage]:not([data-scenes]) [data-board] [data-i~='ask-box'] [data-i~='ask-prompt'][data-part] {
	opacity: 1;
	transform: none;
	transition-property: opacity, filter;
	transition-duration: var(--rg-motion-reveal-duration);
	transition-timing-function: var(--rg-motion-state-easing);
	transition-delay: 0s;
}
[data-stage]:not([data-scenes]) [data-board] [data-i~='ask-box'] [data-i~='ask-prompt'][data-part][data-out] {
	opacity: 0;
}
[data-i~='ask-prompt'][data-typing]::after {
	content: '';
	display: inline-block;
	width: 1.5px;
	height: 1em;
	margin-left: 2px;
	vertical-align: -0.12em;
	background: currentColor;
	animation: ask-caret calc(var(--rg-motion-reveal-duration) * 2) steps(2, jump-none) infinite;
}
@keyframes ask-caret {
	to {
		opacity: 0;
	}
}
[data-stage]:not([data-scenes]):not([data-on]) [data-board] [data-i~='ask-bar'][data-part] {
	transform: translateY(48px);
}
[data-stage]:not([data-scenes])[data-on] [data-board] [data-i~='ask-bar'][data-part] {
	transition-delay: calc(var(--rg-motion-hover-duration) + var(--rg-motion-reveal-duration) + var(--typed, 0ms) + var(--rg-motion-reveal-stagger) * 4);
}
[data-stage]:not([data-scenes])[data-on] [data-board] [data-i~='ask-bar'] [data-i~='ask-label'][data-part] {
	transition-delay: calc(var(--rg-motion-hover-duration) + var(--rg-motion-reveal-duration) * 2 + var(--typed, 0ms) + var(--rg-motion-reveal-stagger) * 4);
}
[data-i~='ask-logo'][data-i~='a'] {
	--k: 0;
}
[data-i~='ask-logo'][data-i~='b'] {
	--k: 1;
}
[data-i~='ask-logo'][data-i~='c'] {
	--k: 2;
}
[data-i~='ask-logo'][data-i~='d'] {
	--k: 3;
}
[data-stage]:not([data-scenes]):not([data-on]) [data-board] [data-i~='ask-logo'] {
	opacity: 0;
	transform: translateY(var(--rg-motion-reveal-distance));
}
[data-stage]:not([data-scenes])[data-on] [data-board] [data-i~='ask-logo'] {
	transition-property: opacity, transform;
	transition-duration: var(--rg-motion-reveal-duration);
	transition-timing-function: var(--rg-motion-reveal-easing);
	transition-delay: calc(var(--rg-motion-hover-duration) + var(--rg-motion-reveal-duration) * 2 + var(--typed, 0ms) + var(--rg-motion-reveal-stagger) * 4 + (var(--k) + 2) * var(--rg-motion-reveal-stagger) * 4);
}

/* ── New scenes (D-0125), drawn in the same hand as the Figma four: Touchpoints, Deliver, Priority.
   Shared parts first. */
[data-i~='size-40'] {
	width: 40px;
	height: 40px;
}
[data-i~='tile-logo'] {
	width: 20px;
	height: 20px;
	object-fit: contain;
}
/* A wire (D-0130, D-0131): a hairline joining cards. On the sticky stage it is drawn, not faded in —
   down from its head, or outward from its middle when it runs across. */
[data-i~='wire'] {
	position: absolute;
	/* D-0131: the line is a tint of the brand gradient; over it, a band of the gradient itself
	   passes along the line, again and again — the shimmer. */
	background:
		linear-gradient(to bottom, transparent, var(--color-emerald-600), var(--color-sky-500), transparent) 0 -100% / 100% 50% no-repeat,
		linear-gradient(to bottom, var(--color-sky-300), var(--color-emerald-300));
	transform-origin: top;
	animation: wire-down var(--rg-motion-highlight-loop) linear infinite;
	animation-delay: calc(var(--n, 0) * var(--rg-motion-reveal-stagger) * 4);
}
[data-i~='wire'][data-i~='across'] {
	background:
		linear-gradient(to right, transparent, var(--color-emerald-600), var(--color-sky-500), transparent) -100% 0 / 50% 100% no-repeat,
		linear-gradient(to right, var(--color-emerald-300), var(--color-sky-300));
	transform-origin: center;
	animation-name: wire-across;
}
@keyframes wire-down {
	from {
		background-position:
			0 -100%,
			0 0;
	}
	to {
		background-position:
			0 200%,
			0 0;
	}
}
@keyframes wire-across {
	from {
		background-position:
			-100% 0,
			0 0;
	}
	to {
		background-position:
			200% 0,
			0 0;
	}
}
@media (prefers-reduced-motion: reduce) {
	[data-i~='wire'] {
		animation: none;
	}
}
[data-scenes] [data-i~='wire'][data-part] {
	transition-duration: var(--rg-motion-draw-duration);
	transition-timing-function: var(--rg-motion-draw-easing);
}
[data-scenes] [data-scene]:not([data-on]) [data-i~='wire'][data-part] {
	transform: scaleY(0);
}
[data-scenes] [data-scene]:not([data-on]) [data-i~='wire'][data-i~='across'][data-part] {
	transform: scaleX(0);
}
[data-i~='status'] {
	position: absolute;
	left: calc(50% + 0.5px);
	translate: -50% 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 6px 10px;
	border-radius: 99px;
	background: linear-gradient(to bottom, var(--color-emerald-900), var(--color-emerald-700));
	box-shadow:
		0 0 0 3.5px var(--ground),
		0 0 0 4px var(--color-emerald-200),
		0 0 0 7.5px var(--ground),
		0 0 0 8px var(--color-emerald-100),
		0 0 0 12px var(--ground),
		0 16px 28px 0 rgb(0 0 0 / var(--shade));
	font-weight: 500;
	font-size: 11px;
	line-height: 16px;
	color: white;
}
[data-i~='status'] img {
	width: 12px;
	height: 12px;
}
[data-i~='source'] {
	position: relative;
	flex: 1 0 0rem;
	min-width: 1px;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px;
	/* D-0146: the same frosted frame as a card. */
	border: 1px solid var(--rim);
	outline: 0.5px solid var(--rim-edge);
	border-radius: 4px;
	background: linear-gradient(to bottom, var(--glass), var(--glass-foot));
	-webkit-backdrop-filter: blur(var(--glass-blur));
	backdrop-filter: blur(var(--glass-blur));
	box-shadow: 0 16px 56px 0 rgb(0 0 0 / var(--shade));
}
[data-i~='card-body'] {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	padding: 20px;
}
[data-i~='fact'] {
	white-space: normal;
}

/* Touchpoints — every touchpoint, captured without a hand. */
[data-i~='touch-sources'] {
	position: absolute;
	top: 56px;
	left: 40px;
	display: flex;
	gap: 20px;
	width: 520px;
}
[data-i~='touch-drop'] {
	top: 121px;
	width: 1px;
	height: 56px;
}
[data-i~='touch-drop'][data-i~='a'] {
	left: 126px;
}
[data-i~='touch-drop'][data-i~='b'] {
	left: 300px;
	height: 224px;
}
[data-i~='touch-drop'][data-i~='c'] {
	left: 473px;
}
[data-i~='touch-join'] {
	top: 176px;
	left: 126px;
	width: 348px;
	height: 1px;
}
[data-i~='touch-status'] {
	top: 236px;
}
[data-i~='touch-record'] {
	bottom: -45px;
	width: 464px;
	height: 400px;
	background: linear-gradient(to bottom, var(--glass), var(--glass-foot));
	box-shadow: 0 -16px 56px 0 rgb(0 0 0 / var(--shade));
}
[data-i~='touch-record'] [data-i~='head'] {
	gap: 20px;
}
[data-i~='touch-fade'] {
	height: 231px;
}

/* Loop (D-0319) — the workflow round one client: four source cards at the corners, 200 wide, joined by
   wires in one loop through their middles (x 140 / 460, y 129 / 571); the shimmer runs clockwise, so
   the foot and the left run it back (`back`). From the loop's head a line drops through the pill to the
   record, 340 wide, in the middle. */
[data-i~='loop-step'] {
	position: absolute;
	flex: none;
	width: 200px;
}
[data-i~='loop-step'][data-i~='tl'] {
	top: 96px;
	left: 40px;
}
[data-i~='loop-step'][data-i~='tr'] {
	top: 96px;
	right: 40px;
}
[data-i~='loop-step'][data-i~='br'] {
	top: 538px;
	right: 40px;
}
[data-i~='loop-step'][data-i~='bl'] {
	top: 538px;
	left: 40px;
}
[data-i~='loop-wire'][data-i~='top'] {
	top: 129px;
	left: 240px;
	width: 120px;
	height: 1px;
}
[data-i~='loop-wire'][data-i~='foot'] {
	top: 571px;
	left: 240px;
	width: 120px;
	height: 1px;
}
[data-i~='loop-wire'][data-i~='right'] {
	top: 162px;
	left: 459.5px;
	width: 1px;
	height: 376px;
}
[data-i~='loop-wire'][data-i~='left'] {
	top: 162px;
	left: 139.5px;
	width: 1px;
	height: 376px;
}
[data-i~='loop-wire'][data-i~='back'] {
	animation-direction: reverse;
}
[data-i~='loop-drop'] {
	top: 130px;
	left: 299.5px;
	width: 1px;
	height: 180px;
}
[data-i~='loop-status'] {
	top: 206px;
}
[data-i~='loop-record'] {
	top: 300px;
	width: 340px;
	border-radius: 4px;
	box-shadow: 0 16px 56px 0 rgb(0 0 0 / var(--shade));
}
[data-i~='loop-record'] [data-i~='head'],
[data-i~='loop-record'] [data-i~='row'] {
	width: 100%;
}
[data-i~='loop-record'] [data-i~='row'] {
	justify-content: flex-start;
	border-bottom: 0;
}

/* Deliver — one capture, delivered where it is needed: the CRM, and facts for AI. */
[data-i~='deliver-source'] {
	top: 48px;
	width: 408px;
	border-radius: 4px;
	background: linear-gradient(to bottom, var(--glass), var(--glass-foot));
	box-shadow: 0 16px 56px 0 rgb(0 0 0 / var(--shade));
}
[data-i~='deliver-source'] [data-i~='row'] {
	border-bottom: 0;
}
[data-i~='deliver-stem'] {
	top: 191px;
	left: 300px;
	width: 1px;
	height: 45px;
}
[data-i~='deliver-join'] {
	top: 236px;
	left: 160px;
	width: 281px;
	height: 1px;
}
[data-i~='deliver-drop'] {
	top: 236px;
	width: 1px;
	height: 54px;
}
[data-i~='deliver-drop'][data-i~='a'] {
	left: 160px;
}
[data-i~='deliver-drop'][data-i~='b'] {
	left: 440px;
}
[data-i~='deliver-crm'],
[data-i~='deliver-facts'] {
	bottom: -40px;
	width: 256px;
	height: 450px;
	background: linear-gradient(to bottom, var(--glass), var(--glass-foot));
}
[data-i~='deliver-crm'] {
	left: 32px;
	box-shadow: 12px -12px 56px 0 rgb(0 0 0 / var(--shade));
}
[data-i~='deliver-facts'] {
	right: 32px;
	box-shadow: -12px -12px 56px 0 rgb(0 0 0 / var(--shade));
}
[data-i~='deliver-mark'] {
	width: 24px;
	height: 24px;
	object-fit: contain;
}
[data-i~='deliver-fade'] {
	height: 300px;
}

/* Priority — who to reach first, and the message, at its moment. */
[data-i~='priority-list'] {
	top: 40px;
	width: 408px;
	border-radius: 4px;
	background: linear-gradient(to bottom, var(--glass), var(--glass-foot));
	box-shadow: 0 16px 56px 0 rgb(0 0 0 / var(--shade));
}
[data-i~='priority-stem'] {
	top: 344px;
	left: 300px;
	width: 1px;
	height: 141px;
}
[data-i~='priority-status'] {
	top: 400px;
}
[data-i~='priority-message'] {
	bottom: -45px;
	width: 464px;
	height: 260px;
	background: linear-gradient(to bottom, var(--glass), var(--glass-foot));
	box-shadow: 0 -16px 56px 0 rgb(0 0 0 / var(--shade));
}
[data-i~='priority-message'] [data-i~='head'] {
	gap: 16px;
}
[data-i~='priority-copy'] {
	width: 100%;
	font-size: 13px;
	line-height: 18px;
}
[data-i~='priority-fade'] {
	height: 181px;
}
[data-i~='plain'] {
	text-transform: none;
}
/* D-0128: in the new scenes a line of status or a fact stands on the card's glass — no fill, no edge. */
[data-i~='deliver-crm'] [data-i~='saved'],
[data-i~='deliver-facts'] [data-i~='related-item'] {
	border: 0;
	background: none;
}
[data-i~='deliver-crm'] [data-i~='inset'] {
	padding: 8px 8px 0;
}
[data-i~='deliver-facts'] [data-i~='related'] {
	gap: 4px;
	padding: 12px 8px;
}
/* D-0132: a tick is the plain check of the icon font, in the saved line's green. */
[data-i~='tick'] {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	font-size: 16px;
	line-height: 1;
	color: rgb(0 91 66);
}
/* D-0133, D-0135: a thing that changes with the case goes out of focus as it goes, and comes back
   into focus as the next case's — slowly, at the reveal's pace. */
[data-cycle] {
	transition-property: opacity, filter;
	transition-duration: var(--rg-motion-reveal-duration);
	transition-timing-function: var(--rg-motion-state-easing);
}
[data-cycle][data-out] {
	opacity: 0;
	filter: blur(var(--blur-sm));
}
/* D-0635: in a vignette, a card whose words change with the case moves instead — it fades out sinking
   the reveal distance (at once, on its turn), its words change unseen, and it rises back into its place
   as it arrived, on its own arrival delay, so the cards come back one after another down the list. */
[data-vignette] [data-turn][data-out] {
	opacity: 0;
	transform: translateY(var(--rg-motion-reveal-distance));
	transition-delay: 0s;
}
/* D-0137: a picture on its own (below lg) fades out at its foot by a mask, so it meets whatever
   ground it stands on; the fade drawn in the ground's colour is for the sticky stage. The mask is on
   the stage, not the board (D-0165): a masked board is its cards' backdrop root, and their glass would
   blur only the board — never the ground behind it. */
[data-stage]:not([data-scenes]) {
	-webkit-mask-image: linear-gradient(to bottom, black 72%, transparent 100%);
	mask-image: linear-gradient(to bottom, black 72%, transparent 100%);
}
[data-stage]:not([data-scenes]) [data-i~='fade'] {
	display: none;
}

/* ── Kora's word (D-0147): a status that is her insight wears her mark and her colours, and each
   time the data comes in, a shimmer of her gradient runs round its border. */
@property --kora-turn {
	syntax: '<angle>';
	inherits: false;
	initial-value: 0deg;
}
[data-i~='status'][data-i~='kora'] {
	position: absolute;
	background: white;
	color: rgb(28 32 36);
	box-shadow:
		0 0 0 3.5px var(--ground),
		0 0 0 4px var(--rg-kora-mark-base),
		0 0 0 7.5px var(--ground),
		0 0 0 8px var(--rg-kora-mark-spark),
		0 0 0 12px var(--ground),
		0 16px 28px 0 rgb(0 0 0 / var(--shade));
}
[data-i~='status'][data-i~='kora']::before {
	/* The shimmer is a ring, not a fill: the gradient masked to the 2px band outside the pill's edge. */
	content: '';
	position: absolute;
	inset: -2px;
	z-index: 1;
	padding: 2px;
	border-radius: inherit;
	background: conic-gradient(from var(--kora-turn), transparent 0 35%, var(--rg-kora-mark-spark) 62%, var(--rg-kora-mark-glow) 78%, var(--rg-kora-mark-base) 92%, transparent 100%);
	-webkit-mask: linear-gradient(black 0 0) content-box, linear-gradient(black 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(black 0 0) content-box, linear-gradient(black 0 0);
	mask-composite: exclude;
	pointer-events: none;
	opacity: 0;
}
/* Shown only while it runs: it fades in, makes two even turns, and fades away,
   until the next data comes in. */
[data-i~='status'][data-i~='kora'][data-shine]::before {
	/* Linear, so the turn is even; the fades at either end hide its start and stop. */
	animation: kora-shine calc(var(--rg-motion-draw-duration) * 3) linear 1;
}
[data-i~='status'][data-i~='kora'] > :first-child {
	flex: none;
}
[data-i~='status'][data-i~='kora'] [data-i~='kora-word'] {
	background-image: var(--rg-kora-gradient);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
}
@keyframes kora-shine {
	0% {
		--kora-turn: 0deg;
		opacity: 0;
	}
	15% {
		opacity: 1;
	}
	85% {
		opacity: 1;
	}
	100% {
		--kora-turn: 720deg;
		opacity: 0;
	}
}
@media (prefers-reduced-motion: reduce) {
	[data-i~='status'][data-i~='kora'][data-shine]::before {
		animation: none;
		opacity: 0;
	}
}

/* ── Motion (D-0194): the hero's History and the CRM Sync band's Sync, ported from Landing Pages
   Figma 868:6305 and 868:6746 in the hand of the Touchpoints scene. On the sticky stage the Pick
   scene's own halftone gives way to the live ground, as every scene's halftone does. */
[data-scenes] [data-scene] > [data-i~='pick-halftone'] {
	display: none;
}
/* The Motion hero and the showcase band stand on the subtle ground (bg-subtle, slate-50); their
   stages are clear. So does Product Core's picture (D-0221). */
[data-hero] [data-stage],
[data-showcase] [data-stage],
[data-product-core] [data-stage] {
	--ground: var(--color-slate-50);
	background: none;
}
/* Their ground is one known colour, so the foot fades by the scene's drawn `fade` (into --ground), as
   on the sticky stage — and so do Unlocking data's stages of one scene below lg (D-0197) — not by a
   mask on the stage: a masked stage keeps the cards' glass blur
   (--glass-blur) from reaching the illustration ground, and the cells show sharp through the words. */
[data-hero] [data-stage],
[data-showcase] [data-stage],
[data-product-core] [data-stage],
[data-steps] [data-stage] {
	-webkit-mask-image: none;
	mask-image: none;
}
[data-hero] [data-stage] [data-i~='fade'],
[data-showcase] [data-stage] [data-i~='fade'],
[data-product-core] [data-stage] [data-i~='fade'],
[data-steps] [data-stage] [data-i~='fade'] {
	display: block;
}

/* History — one client's record of contact, newest first (868:6317). */
[data-i~='hist-card'] {
	top: 64px;
	right: 0;
	width: 536px;
	height: 680px;
	box-shadow: 0 -12px 32px 0 rgb(0 0 0 / var(--shade));
}
[data-i~='hist-head'] {
	justify-content: space-between;
	gap: 20px;
	border-bottom: 0;
}
[data-i~='hist-who'] {
	display: flex;
	align-items: center;
	gap: 20px;
}
[data-i~='hist-names'] {
	gap: 8px;
}
[data-i~='hist-line'] {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 12px;
	line-height: 16.077px;
	color: var(--color-gray-500);
}
[data-i~='hist-line'] > :first-child {
	font-size: 11.68px;
}
[data-i~='hist-line'] img {
	width: 12px;
	height: 12px;
}
[data-i~='hist-socials'] {
	display: flex;
	align-items: center;
	gap: 16px;
}
[data-i~='hist-socials'] img {
	width: 18px;
	height: 18px;
}
[data-i~='hist-socials'] img:last-child {
	width: 19.92px;
}
[data-i~='hist-stats'] {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 14px 20px;
	background: var(--glass-band);
	border-bottom: 0.5px solid var(--color-gray-200);
}
[data-i~='hist-stat'] {
	flex: 1 0 0rem;
	min-width: 1px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	border-right: 0.5px solid var(--color-gray-200);
}
[data-i~='hist-stat']:last-child {
	border-right: 0;
}
[data-i~='hist-stat-name'] {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--color-gray-500);
	text-transform: uppercase;
}
[data-i~='hist-stat-name'] img {
	width: 10px;
	height: 10px;
}
[data-i~='hist-stat-value'] {
	font-weight: 600;
	font-size: 14px;
	line-height: 16px;
}
[data-i~='hist-card'] > [data-i~='hist-event'] {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	width: 968px;
	padding: 0 20px;
}
[data-i~='hist-card'] > [data-i~='hist-event'][data-i~='first'] {
	padding-top: 20px;
}
[data-i~='hist-rail'] {
	display: flex;
	flex-direction: column;
	align-items: center;
	align-self: stretch;
	gap: 4px;
}
[data-i~='hist-mark'] {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 4px;
	background: var(--color-gray-100);
}
[data-i~='hist-mark'] img {
	width: 16px;
	height: 16px;
}
/* The product's own tints: a goal reached in emerald, a step of the sequence in its blue. */
[data-i~='hist-mark'][data-i~='goal'] {
	background: var(--color-emerald-50);
}
[data-i~='hist-mark'][data-i~='step'] {
	background: rgb(230 244 254);
}
/* D-0472: the record's line is green, as the kit's other lines end. D-0474: it is the kit's wire (D-0131) — a light
   tint of the brand gradient, with a band of the gradient itself flowing down it again and again. */
[data-i~='hist-rule'] {
	flex: 1 0 0rem;
	min-height: 1px;
	width: 1px;
	border-radius: 999px;
	/* D-0476: a step lighter than the kit's wire — the tint at 200, the band at 400. */
	background:
		linear-gradient(to bottom, transparent, var(--color-emerald-400), var(--color-sky-400), transparent) 0 -100% / 100% 50% no-repeat,
		linear-gradient(to bottom, var(--color-sky-200), var(--color-emerald-200));
}
[data-i~='hist-what'] {
	flex: 1 0 0rem;
	min-width: 1px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	padding-bottom: 32px;
	font-size: 14px;
}
[data-i~='hist-what'][data-i~='quoted'] {
	gap: 12px;
}
[data-i~='hist-event']:last-child [data-i~='hist-what'] {
	padding-bottom: 24px;
}
[data-i~='hist-title'] {
	font-weight: 500;
	line-height: 24px;
	letter-spacing: 0.04px;
	color: var(--color-gray-950);
}
[data-i~='hist-meta'] {
	line-height: 25px;
	color: var(--color-gray-500);
}
[data-i~='hist-quote'] {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	width: 1300px;
	padding: 8px;
	border: 1px solid rgb(240 240 240);
	border-radius: 4px;
	background: white;
}
[data-i~='hist-quote']::before {
	content: '';
	align-self: stretch;
	width: 3px;
	border-radius: 999px;
	background: rgb(13 116 206);
}
[data-i~='hist-quote-line'] {
	font-weight: 500;
	font-size: 12px;
	line-height: 25px;
	color: rgb(32 32 32);
}
[data-i~='hist-route'] {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 500;
	font-size: 12px;
	line-height: 19px;
	letter-spacing: 0.04px;
	color: rgb(0 0 0 / 0.49);
}
[data-i~='hist-route'] img {
	width: 16px;
	height: 16px;
}
/* The record runs out of sight to the right, into the ground, as the frame's edge fade has it. */
[data-i~='hist-edge'] {
	position: absolute;
	top: 0;
	right: 0;
	width: 296px;
	height: 700px;
	background: linear-gradient(to right, transparent, var(--ground));
	pointer-events: none;
}
[data-i~='hist-fade'] {
	height: 244px;
}
/* D-0470: the Motion hero's timeline is built as Smart Sequences' line is (D-0462, D-0466): the head and figures
   arrive as before; then each event in turn — its icon, its title 0.12s after, its body 0.12s after that — and
   0.45s after the icon its line draws down at about 210px a second to the next icon, which starts the next event
   as it is reached; the last line runs on off the card. The cases turn only after (the kit's pace from arrival).
   D-0472: about 40% slower — 0.17s between icon, title and body, a 0.63s stop, the line at about 150px a second. */
:is([data-stage]:not([data-scenes]) [data-board], [data-scenes] [data-scene]) [data-i~='hist-card'] > [data-i~='hist-event'][data-part] {
	transition: none;
	opacity: 1;
	transform: none;
}
[data-i~='hist-card'] > [data-i~='hist-event']:nth-child(3) { --at: 21.25; --len: 10.17; }
[data-i~='hist-card'] > [data-i~='hist-event']:nth-child(4) { --at: 47.17; --len: 16.83; }
[data-i~='hist-card'] > [data-i~='hist-event']:nth-child(5) { --at: 79.75; --len: 10.17; }
[data-i~='hist-card'] > [data-i~='hist-event']:nth-child(6) { --at: 105.67; --len: 15.5; }
[data-i~='hist-rule'] {
	transform-origin: top;
}
:is([data-stage]:not([data-scenes]):not([data-on]) [data-board], [data-scenes] [data-scene]:not([data-on])) [data-i~='hist-card'] > [data-i~='hist-event'] :is([data-i~='hist-mark'], [data-i~='hist-title'], [data-i~='hist-what'] > :not([data-i~='hist-title'])) {
	opacity: 0;
}
:is([data-stage]:not([data-scenes]):not([data-on]) [data-board], [data-scenes] [data-scene]:not([data-on])) [data-i~='hist-card'] > [data-i~='hist-event'] [data-i~='hist-rule'] {
	transform: scaleY(0);
}
@keyframes hist-pop {
	from {
		opacity: 0;
		transform: scale(0.6);
	}
}
@keyframes hist-in {
	from {
		opacity: 0;
		transform: translateY(var(--rg-motion-reveal-distance));
	}
}
@keyframes hist-draw {
	from {
		transform: scaleY(0);
	}
}
@media (prefers-reduced-motion: no-preference) {
	:is([data-stage]:not([data-scenes])[data-on] [data-board], [data-scenes] [data-scene][data-on]) [data-i~='hist-card'] > [data-i~='hist-event'] [data-i~='hist-mark'] {
		animation: hist-pop var(--rg-motion-reveal-duration) var(--rg-motion-pop-easing) calc(var(--rg-motion-hover-duration) + var(--rg-motion-reveal-stagger) * var(--at)) backwards;
	}
	:is([data-stage]:not([data-scenes])[data-on] [data-board], [data-scenes] [data-scene][data-on]) [data-i~='hist-card'] > [data-i~='hist-event'] [data-i~='hist-title'] {
		animation: hist-in var(--rg-motion-reveal-duration) var(--rg-motion-reveal-easing) calc(var(--rg-motion-hover-duration) + var(--rg-motion-reveal-stagger) * (var(--at) + 4.2)) backwards;
	}
	:is([data-stage]:not([data-scenes])[data-on] [data-board], [data-scenes] [data-scene][data-on]) [data-i~='hist-card'] > [data-i~='hist-event'] [data-i~='hist-what'] > :not([data-i~='hist-title']) {
		animation: hist-in var(--rg-motion-reveal-duration) var(--rg-motion-reveal-easing) calc(var(--rg-motion-hover-duration) + var(--rg-motion-reveal-stagger) * (var(--at) + 8.4)) backwards;
	}
	:is([data-stage]:not([data-scenes])[data-on] [data-board], [data-scenes] [data-scene][data-on]) [data-i~='hist-card'] > [data-i~='hist-event'] [data-i~='hist-rule'] {
		/* D-0474: drawn light, then the colour flows once it is in. */
		animation:
			hist-draw calc(var(--rg-motion-reveal-stagger) * var(--len)) linear calc(var(--rg-motion-hover-duration) + var(--rg-motion-reveal-stagger) * (var(--at) + 15.75)) backwards,
			wire-down var(--rg-motion-highlight-loop) linear calc(var(--rg-motion-hover-duration) + var(--rg-motion-reveal-stagger) * (var(--at) + 15.75 + var(--len))) infinite;
	}
}

/* Sync — five sources of record, wired into one client's history (868:6750). The frame's 1200 is
   gathered onto the board: the tiles 128 apart instead of 149, every other measure its own. */
[data-i~='sync-tile'] {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	/* D-0126, D-0146: a head card — the frosted frame and its shadow. */
	border: 1px solid var(--rim);
	outline: 0.5px solid var(--rim-edge);
	border-radius: 4px;
	background: linear-gradient(to bottom, var(--glass), var(--glass-foot));
	-webkit-backdrop-filter: blur(var(--glass-blur));
	backdrop-filter: blur(var(--glass-blur));
	box-shadow: 0 0 40px 0 rgb(0 0 0 / var(--shade));
}
[data-i~='sync-tile'][data-i~='a'] {
	top: 56px;
	left: 12px;
}
[data-i~='sync-tile'][data-i~='b'] {
	top: 96px;
	left: 140px;
}
[data-i~='sync-tile'][data-i~='c'] {
	top: 136px;
	left: 268px;
}
[data-i~='sync-tile'][data-i~='d'] {
	top: 96px;
	left: 396px;
}
[data-i~='sync-tile'][data-i~='e'] {
	top: 56px;
	left: 524px;
}
[data-i~='sync-gmail'] {
	width: 33.599px;
	height: 25.6px;
}
[data-i~='sync-teams'] {
	width: 35.475px;
	height: 33px;
}
[data-i~='sync-salesforce'] {
	width: 40px;
	height: 27.985px;
}
[data-i~='sync-calendar'] {
	width: 36px;
	height: 36px;
}
[data-i~='sync-outlook'] {
	width: 38px;
	height: 38px;
	object-fit: cover;
}
[data-i~='sync-drop'] {
	width: 1px;
}
[data-i~='sync-drop'][data-i~='a'] {
	top: 120px;
	left: 44px;
	height: 135px;
}
[data-i~='sync-drop'][data-i~='b'] {
	top: 160px;
	left: 172px;
	height: 95px;
}
[data-i~='sync-drop'][data-i~='c'] {
	top: 200px;
	left: 300px;
	height: 95px;
}
[data-i~='sync-drop'][data-i~='d'] {
	top: 160px;
	left: 428px;
	height: 95px;
}
[data-i~='sync-drop'][data-i~='e'] {
	top: 120px;
	left: 556px;
	height: 135px;
}
[data-i~='sync-join'] {
	top: 255px;
	left: 44px;
	width: 513px;
	height: 1px;
}
/* D-0325: hung from the Touchpoints scene's three source cards (`from="touch"`), the middle wire runs
   from the cards straight into the record (its top at 295) — no pill on the way. D-0327: the cards sit
   64 lower than Touchpoints' (top 120), so the join (240) lies halfway — 55 up to the cards, 55 down
   to the record. */
[data-i~='touch-sources'][data-i~='sync-low'] {
	top: 120px;
}
[data-i~='touch-drop'][data-i~='sync-low'] {
	top: 185px;
}
[data-i~='touch-join'][data-i~='sync-low'] {
	top: 240px;
}
[data-i~='sync-trunk'] {
	top: 185px;
	left: 300px;
	height: 110px;
}
[data-i~='sync-record'] {
	bottom: -45px;
	width: 408px;
	height: 450px;
	box-shadow: 0 -16px 56px 0 rgb(0 0 0 / var(--shade));
}
[data-i~='sync-record'] [data-i~='head'] {
	gap: 20px;
}
[data-i~='sync-record'] [data-i~='stack-subject-name'] {
	font-size: 20px;
}
[data-i~='entry-meta'][data-i~='plain'] {
	text-transform: none;
}
[data-i~='sync-fade'] {
	height: 231px;
}

/* ── CRM Sync (D-0202): the hero's Feed, the feature section's Settings and Save, ported from Landing
   Pages Figma 881:8699, 881:9590 and 881:9545 in the hand of the kit. */

/* Feed — one client's activity, synced as it happens (881:8699). The frame's 600 tall picture sits
   10 down the 700 board (D-0376: raised 40 from 50),
   and 20 further right than the frame (D-0379). */
[data-i~='feed-line'] {
	top: 171px;
	left: 134px;
	width: 1px;
	/* D-0372: it ends at the last row's foot (509 + 69), not the board's. */
	height: 407px;
}
[data-i~='feed-head'] {
	top: 117px;
	left: 100px;
	flex-direction: row;
	align-items: center;
	gap: 18px;
	width: 568px;
	padding: 14px;
	border-radius: 99px 0 0 99px;
	/* D-0369: over three times the kit's shade, as the owner asked. */
	box-shadow: 0 16px 56px 0 rgb(0 0 0 / 0.2);
}
[data-i~='card'][data-i~='feed-head'] > * {
	width: auto;
}
[data-i~='feed-who'] {
	position: relative;
	flex: none;
	width: 40px;
	height: 40px;
}
[data-i~='feed-who'] [data-i~='avatar'] {
	width: 40px;
	height: 40px;
}
[data-i~='feed-who'] > img {
	position: absolute;
	top: 22.02px;
	left: 30.38px;
	width: 18px;
	height: 18px;
}
[data-i~='feed-names'] {
	gap: 2px;
}
[data-i~='feed-name'] {
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
}
[data-i~='feed-mail'] {
	font-size: 12px;
	line-height: 16.077px;
	color: rgb(146 146 146);
}
/* The badge over the head: the product's own Salesforce tint. */
[data-i~='feed-badge'] {
	position: absolute;
	/* D-0415: 16 above the head card (was 12). */
	top: 73.5px;
	left: 129.5px;
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 6px 8px;
	/* D-0370: the blue alone, no white under it — the ground shows through. */
	border: 0.5px solid rgb(0 111 255 / 0.08);
	border-radius: 99px;
	background: rgb(0 153 255 / 0.05);
	font-weight: 500;
	font-size: 12px;
	line-height: 14.4px;
	letter-spacing: -0.5px;
	color: rgb(0 64 104 / 0.95);
}
[data-i~='feed-badge'] img {
	width: 20.01px;
	height: 14px;
}
[data-i~='feed-row'] {
	left: 100px;
	flex-direction: row;
	align-items: center;
	gap: 18px;
	width: 550px;
	padding: 14px;
	border-radius: 2px;
	box-shadow: 0 12px 40px 0 rgb(0 0 0 / var(--shade));
	font-weight: 500;
	font-size: 13px;
	line-height: normal;
	color: rgb(22 25 36);
}
[data-i~='card'][data-i~='feed-row'] > * {
	width: auto;
}
/* D-0374: the Feed's icon tiles keep the kit's 40 square — the row's `width: auto` above squeezed them. */
[data-i~='feed-row'] [data-i~='tile'] {
	width: 40px;
	height: 40px;
}
[data-i~='feed-row'][data-i~='a'] {
	top: 233px;
}
[data-i~='feed-row'][data-i~='b'] {
	top: 325px;
}
[data-i~='feed-row'][data-i~='c'] {
	top: 417px;
}
[data-i~='feed-row'][data-i~='d'] {
	top: 509px;
}
[data-i~='feed-edge'] {
	position: absolute;
	top: 0;
	right: 0;
	width: 190px;
	height: 700px;
	background: linear-gradient(to right, transparent, var(--ground));
	pointer-events: none;
}
[data-i~='feed-fade'] {
	/* D-0373: deeper, from just under the head card (260 of the 700 board). */
	height: 440px;
}
/* D-0449: the fade does not arrive — it stands over the board from the start, and the feed arrives behind it.
   D-0454: so does the right edge's wash (`feed-edge`): the rows run off behind it from their first moment. */
:is([data-stage]:not([data-scenes]) [data-board], [data-scenes] [data-scene]) [data-i~='feed-fade'][data-part],
:is([data-stage]:not([data-scenes]) [data-board], [data-scenes] [data-scene]) [data-i~='feed-edge'][data-part] {
	transition: none;
	opacity: 1;
	transform: none;
}

/* Settings — what syncs, and what saves itself (881:9590). */
[data-i~='set-card'] {
	top: 80px;
	width: 440px;
	height: 630px;
	box-shadow: 0 -16px 40px 0 rgb(0 0 0 / var(--shade));
}
/* D-0384: on CRM Sync's "Flexible by design" step only (its sticky stage and its stacked copy), the
   card's glass runs whole white at the head to 10% at the foot. Knowledge Lake keeps the kit's. */
[data-scene='flexible-by-design'] [data-i~='set-card'],
#flexible-by-design [data-i~='set-card'] {
	--glass: white;
	--glass-foot: rgb(255 255 255 / 0.1);
}
[data-i~='set-card'] [data-i~='head-title'] {
	color: rgb(32 32 32);
}
[data-i~='set-tabs'] {
	padding: 20px 20px 20.5px;
	background: var(--glass-band);
	border-bottom: 0.5px solid var(--color-gray-200);
}
[data-i~='set-tabs'] [data-i~='tabs'] {
	background: rgb(249 249 250);
}
[data-i~='set-tabs'] [data-i~='tab'] {
	padding: 0 19.48px;
	font-size: 14px;
	line-height: 17.835px;
}
[data-i~='set-row'] {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 20px;
	border-bottom: 1px solid var(--color-gray-100);
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: 0.04px;
	color: var(--color-gray-950);
}
[data-i~='set-row'][data-i~='lead'] {
	gap: 13px;
	align-items: center;
}
[data-i~='toggle'] {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	width: 36.667px;
	height: 20px;
	padding: 1.667px 1.667px 1.667px 18.333px;
	border-radius: 3.333px;
	background: var(--color-emerald-800);
}
[data-i~='toggle']::after {
	content: '';
	width: 16.667px;
	height: 100%;
	border-radius: 1.667px;
	background: white;
}
[data-i~='set-pair'] {
	display: flex;
	align-items: center;
	gap: 5px;
	margin-left: auto;
	padding: 4px 8px;
	overflow: clip;
	border: 1px solid var(--color-gray-100);
	border-radius: 99px;
	background: white;
	opacity: 0.9;
}
[data-i~='set-pair'] img {
	width: 16px;
	height: 16px;
}
[data-i~='set-pair'] img:nth-child(2) {
	width: 10px;
	height: 10px;
	rotate: 180deg;
}
[data-i~='set-pair'] img:last-child {
	height: 11.194px;
	object-fit: contain;
}
[data-i~='set-rule'] {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 20px;
	font-size: 14px;
}
[data-i~='set-rule'] > :first-child {
	font-weight: 500;
	line-height: 20px;
	letter-spacing: 0.04px;
	color: var(--color-gray-950);
}
[data-i~='set-rule'] > :last-child {
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 25px;
	color: var(--color-gray-700);
}
[data-i~='set-fade'] {
	height: 490px;
}

/* Save — a confidential email, and how it is kept (881:9545). */
[data-i~='save-card'] {
	/* D-0382: its glass runs whole white at the head to clear at the foot. */
	--glass: white;
	--glass-foot: rgb(255 255 255 / 0);
	bottom: -20px;
	width: 424px;
	height: 644px;
	box-shadow: -12px -12px 56px 0 rgb(0 0 0 / var(--shade));
}
[data-i~='save-card'] [data-i~='head-title'] {
	text-align: center;
}
[data-i~='save-notice'] {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px;
	background: rgb(254 203 0 / 0.08);
	font-family: 'DM Sans', sans-serif;
	white-space: normal;
}
[data-i~='save-lock'] {
	position: relative;
	flex: none;
	width: 24px;
	height: 24px;
	border-radius: 99px;
	background: white;
}
[data-i~='save-lock'] img {
	position: absolute;
	top: calc(50% - 0.8px);
	left: 50%;
	translate: -50% -50%;
	width: 16px;
	height: 16px;
}
[data-i~='save-notice-title'] {
	font-weight: 600;
	font-size: 14px;
	line-height: 20px;
	color: rgb(171 100 0);
	text-transform: capitalize;
}
[data-i~='save-notice-words'] {
	font-weight: 500;
	font-size: 12px;
	line-height: normal;
	color: rgb(79 52 34);
}
[data-i~='save-choose'] {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 36px;
	padding: 20px;
}
[data-i~='save-label'] {
	font-weight: 600;
	font-size: 13px;
	line-height: 20px;
	color: var(--color-gray-600);
	text-transform: uppercase;
}
[data-i~='save-option'] {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	width: 100%;
	padding: 16px;
	border: 1px solid var(--color-gray-200);
	background: rgb(255 255 255 / 0.05);
	font-family: 'DM Sans', sans-serif;
	white-space: normal;
}
[data-i~='save-option'][data-i~='first'] {
	padding: 16px 12px;
}
[data-i~='save-box'] {
	flex: none;
	width: 16px;
	height: 16px;
	margin-top: 2px;
	border: 1px solid var(--color-gray-300);
	background: rgb(255 255 255 / 0.9);
}
[data-i~='save-box'][data-i~='round'] {
	border-radius: 99px;
}
[data-i~='save-option-title'] {
	font-weight: 600;
	font-size: 14px;
	line-height: 20px;
	color: var(--color-gray-900);
	text-transform: capitalize;
}
[data-i~='save-option-words'] {
	margin-top: 6px;
	font-weight: 500;
	font-size: 12px;
	line-height: normal;
	color: var(--color-gray-600);
}
/* The choice lifted out of the card, as the Pick scene's chosen slot is. */
[data-i~='save-chosen'] {
	position: absolute;
	top: 289.59px;
	left: 50%;
	translate: -50% 0;
	display: flex;
	align-items: flex-start;
	gap: 16px;
	width: 512px;
	padding: 24px;
	border: 4px solid white;
	background: rgb(0 228 120 / 0.02);
	-webkit-backdrop-filter: blur(var(--glass-blur));
	backdrop-filter: blur(var(--glass-blur));
	box-shadow:
		0 0 56px 0 rgb(0 0 0 / var(--shade)),
		0 1.475px 23.599px 0 rgb(0 0 0 / 0.15);
	white-space: normal;
}
[data-i~='save-chosen'] > img {
	width: 17.947px;
	height: 17.947px;
	margin-top: 3.8px;
}
[data-i~='save-chosen-title'] {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 600;
	font-size: 16px;
	line-height: 24px;
	color: var(--color-gray-900);
	text-transform: capitalize;
}
[data-i~='save-chosen-words'] {
	margin-top: 10.255px;
	font-family: 'DM Sans', sans-serif;
	font-size: 15.383px;
	line-height: normal;
	color: var(--color-gray-600);
}
[data-i~='save-fade'] {
	height: 430px;
}
[data-i~='save-card'] [data-i~='inset'] {
	padding: 8px;
}
[data-i~='save-notice'] > div:last-child,
[data-i~='save-option'] > div,
[data-i~='save-chosen'] > div {
	flex: 1 0 0rem;
	min-width: 1px;
}
[data-i~='save-notice-words'] {
	margin-top: 4px;
}
/* D-0202: wherever a stage draws its own ground (the sticky stage, Unlocking data's stages below lg,
   the split hero, the showcase), a scene's raster halftone gives way to it. */
[data-steps] [data-i~='halftone'],
[data-hero] [data-i~='halftone'],
[data-showcase] [data-i~='halftone'],
[data-product-core] [data-i~='halftone'],
[data-steps] [data-i~='pick-halftone'] {
	display: none;
}


/* ── Meetings (D-0207): the hero's Meeting, and the feature section's Recap, Actions, Coach and Brief,
   ported from Landing Pages Figma 907:4710, 907:5606, 907:5787 and 907:5826 (Coach drawn here, in
   the same hand). Shared first: DM Sans as the frames set it, their badges. */
[data-i~='dm'] {
	font-family: 'DM Sans', sans-serif;
}
[data-i~='pill'] {
	display: inline-flex;
	align-items: center;
	gap: 6.688px;
	padding: 6.688px 17.835px;
	border-radius: 999px;
	font-family: 'DM Sans', sans-serif;
	font-size: 13.376px;
	line-height: 13.376px;
	white-space: nowrap;
}
[data-i~='pill'][data-i~='green'] {
	background: rgb(225 248 238);
	color: rgb(0 91 66);
}
[data-i~='pill'][data-i~='line'] {
	border: 0.557px solid rgb(223 226 223);
	color: rgb(28 32 36);
}
[data-i~='pill'] img {
	width: 19.119px;
	height: 13.377px;
	object-fit: contain;
}
[data-i~='kora-text'] {
	background-image: var(--rg-kora-gradient);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
}

/* Meeting — the call, and what Revenue Grid holds beside it (907:4710). The frame's 600 tall picture
   sits 50 down the board. */
[data-i~='mt-call'] {
	top: 150.25px;
	left: 134.2px;
	width: 339.241px;
	border-radius: 2.56px;
	box-shadow: 0 -10.241px 25.603px 0 rgb(0 0 0 / var(--shade));
}
[data-i~='mt-tile'] {
	position: relative;
	height: 190.743px;
	overflow: clip;
}
[data-i~='mt-tile'] > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
[data-i~='mt-chip'] {
	position: absolute;
	bottom: 10.24px;
	left: 10.24px;
	display: flex;
	align-items: center;
	gap: 3.193px;
	padding: 2.244px 4.468px;
	border-radius: 4.468px;
	background: rgb(0 14 37 / 0.79);
	font-family: 'DM Sans', sans-serif;
	font-weight: 600;
	font-size: 8.514px;
	line-height: 10.643px;
	color: white;
}
[data-i~='mt-chip'] img {
	width: 2.129px;
	height: 2.129px;
}
[data-i~='mt-end'] {
	position: absolute;
	top: 149.1px;
	left: 50%;
	translate: -50% 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 31.395px;
	height: 31.395px;
	border-radius: 99px;
	background: rgb(255 0 62);
	box-shadow: 0 2.48px 12.401px 2.48px rgb(0 0 0 / 0.3);
	font-size: 16px;
	color: white;
}
[data-i~='mt-note'] {
	/* D-0281: over the call's video the kit's glass read dark; these notes are whiter and blur more. */
	--glass: rgb(255 255 255 / 0.85);
	--glass-foot: rgb(255 255 255 / 0.75);
	--glass-blur: var(--blur-3xl);
	width: 210.241px;
	border-radius: 3.173px;
}
[data-i~='mt-note'] [data-i~='head'] {
	gap: 6.347px;
	padding: 15.867px 15.867px 16.264px;
	border-bottom-width: 0.397px;
}
[data-i~='mt-note'] [data-i~='head'] img {
	width: 12.694px;
	height: 12.694px;
}
[data-i~='mt-note'] [data-i~='head-title'] {
	flex: none;
	font-size: 11.107px;
	line-height: normal;
	color: rgb(32 32 32);
}
[data-i~='mt-note-body'] {
	display: flex;
	flex-direction: column;
	gap: 9.52px;
	padding: 12.694px;
	border: 0.793px solid var(--color-gray-200);
	background: rgb(255 255 255 / 0.5);
	font-family: 'DM Sans', sans-serif;
	font-weight: 500;
	font-size: 10px;
	line-height: normal;
	color: var(--color-gray-600);
	white-space: normal;
}
[data-i~='mt-line'] {
	display: flex;
	align-items: center;
	gap: 6px;
}
[data-i~='mt-line'] img {
	flex: none;
	width: 12.694px;
	height: 12.694px;
}
[data-i~='mt-line'] img[data-i~='dot'] {
	width: 6.347px;
	height: 6.347px;
}
[data-i~='mt-done'] {
	text-decoration: line-through;
}
[data-i~='mt-steps'] {
	top: 340.69px;
	left: 24px;
	box-shadow: 30px 16px 56px 0 rgb(0 0 0 / var(--shade));
}
[data-i~='mt-points'] {
	top: 111.5px;
	left: 368.84px;
	box-shadow: -10px 12.69px 31.735px 0 rgb(0 0 0 / var(--shade));
}
[data-i~='mt-notes'] {
	top: 441.34px;
	left: 377.93px;
	width: 215px;
	box-shadow: -10px -12.694px 31.735px 0 rgb(0 0 0 / var(--shade));
}
[data-i~='mt-tags'] {
	display: flex;
	align-items: center;
	gap: 12.694px;
}
[data-i~='mt-badge'] {
	padding: 3.173px 6.347px;
	border-radius: 999px;
	background: rgb(0 151 247 / 0.13);
	font-family: Inter, sans-serif;
	font-size: 9.52px;
	line-height: 11.424px;
	letter-spacing: -0.5px;
	color: rgb(0 125 207 / 0.95);
	white-space: nowrap;
}
[data-i~='mt-sf'] {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 19.041px;
	height: 19.041px;
	border: 0.429px solid var(--color-gray-200);
	background: white;
}
[data-i~='mt-sf'] img {
	width: 15.867px;
	height: 11.101px;
	object-fit: contain;
}
[data-i~='mt-edge'] {
	position: absolute;
	top: 0;
	right: 0;
	width: 190px;
	height: 700px;
	background: linear-gradient(to right, transparent, var(--ground));
	pointer-events: none;
}
[data-i~='mt-fade'] {
	height: 285px;
}

/* Recap — a call, recapped: who, the summary, what it changed (907:5606). */
[data-i~='rc-faces'] {
	position: absolute;
	top: 87.5px;
	left: 111.61px;
	display: flex;
}
[data-i~='rc-faces'] img {
	width: 47.801px;
	height: 47.801px;
	margin-right: -5.3px;
	border: 2.39px solid rgb(254 255 254);
	border-radius: 99px;
	object-fit: cover;
}
[data-i~='rc-card'] {
	top: 118.6px;
	width: 407.983px;
	height: 766.919px;
	border-radius: 4.594px 4.594px 0 0;
	box-shadow: 0 27.06px 86.13px 0 rgb(0 0 0 / var(--shade));
}
[data-i~='rc-head'] {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: 88px;
	padding: 32px 24px 16.766px;
	background: rgb(243 244 246 / 0.5);
	border-bottom: 0.766px solid var(--color-gray-200);
	font-family: 'DM Sans', sans-serif;
}
[data-i~='rc-title'] {
	font-weight: 600;
	font-size: 15.606px;
	line-height: 22.294px;
	text-transform: uppercase;
}
[data-i~='rc-who'] {
	display: flex;
	align-items: center;
	gap: 13.376px;
	font-size: 13.376px;
	line-height: 17.835px;
	color: rgb(96 100 108);
}
[data-i~='rc-who'] > span {
	display: flex;
	align-items: center;
	gap: 6.688px;
}
[data-i~='rc-who'] > i {
	width: 2.973px;
	height: 2.973px;
	border-radius: 99px;
	background: rgb(96 100 108);
}
[data-i~='rc-role'] {
	padding: 2.229px 6.148px;
	border-radius: 999px;
	font-weight: 500;
	font-size: 8.918px;
	line-height: 10.032px;
	letter-spacing: -0.154px;
}
[data-i~='rc-role'][data-i~='green'] {
	background: rgb(0 196 111 / 0.12);
	color: rgb(0 91 60 / 0.84);
}
[data-i~='rc-role'][data-i~='olive'] {
	background: rgb(239 241 239);
	color: rgb(96 101 95);
}
[data-i~='rc-tabs'] {
	padding: 15.606px 13.376px;
	background: rgb(255 255 255 / 0.2);
}
[data-i~='rc-tabs'] [data-i~='tabs'] {
	height: 31.212px;
	background: rgb(249 249 250);
}
[data-i~='rc-tabs'] [data-i~='tab'] {
	height: 100%;
	padding: 0 19.48px;
	font-family: 'DM Sans', sans-serif;
	font-size: 13.376px;
	line-height: 17.835px;
}
[data-i~='rc-label'] {
	display: flex;
	align-items: center;
	gap: 8.918px;
	padding: 13.376px 13.376px 11.147px;
	background: rgb(255 255 255 / 0.2);
	font-family: 'Zalando Sans', sans-serif;
	font-size: 13px;
	line-height: 11.216px;
	color: rgb(113 113 123);
}
[data-i~='rc-summary'] {
	padding: 11.147px 13.376px 15.606px;
	background: rgb(255 255 255 / 0.2);
	font-family: 'DM Sans', sans-serif;
	font-size: 14.491px;
	line-height: 24.524px;
	white-space: normal;
}
[data-i~='rc-summary'] b {
	font-weight: 500;
}
[data-i~='rc-updates'] {
	display: flex;
	flex-direction: column;
	gap: 11.147px;
	padding: 8.918px 13.376px 13.376px;
	background: rgb(255 255 255 / 0.2);
}
[data-i~='rc-update'] {
	display: flex;
	flex-direction: column;
	gap: 17.835px;
	padding: 15.606px;
	border: 1.115px solid rgb(239 241 239);
	border-radius: 2.229px;
	background: white;
	font-family: 'DM Sans', sans-serif;
}
[data-i~='rc-update'] > div:first-child {
	display: flex;
	flex-direction: column;
	gap: 8.918px;
}
[data-i~='rc-update-title'] {
	font-weight: 500;
	font-size: 14.491px;
	line-height: normal;
}
[data-i~='rc-update-why'] {
	font-style: italic;
	font-size: 13.376px;
	line-height: normal;
	color: rgb(96 100 108);
}
[data-i~='rc-update'] > div:last-child {
	display: flex;
	align-items: center;
	gap: 8.918px;
}
[data-i~='rc-edge'] {
	position: absolute;
	top: 0;
	right: 0;
	width: 83px;
	height: 700px;
	background: linear-gradient(to right, transparent, var(--ground));
	pointer-events: none;
}
[data-i~='rc-fade'] {
	height: 144px;
}

/* Actions — the call, Kora's read of it, and what to do next (907:5787). */
[data-i~='ac-card'] {
	top: 80px;
	left: 80px;
	width: 530px;
	height: 630px;
	box-shadow: 0 -16px 40px 0 rgb(0 0 0 / var(--shade));
}
[data-i~='ac-card'] [data-i~='head'] {
	align-items: flex-start;
	gap: 16px;
}
[data-i~='ac-zoom'] {
	position: relative;
	flex: none;
	width: 32px;
	height: 32px;
	border-radius: 999px;
	background: rgb(64 135 252);
}
[data-i~='ac-zoom'] img {
	position: absolute;
	top: 50%;
	left: 50%;
	translate: -50% -50%;
	width: 28px;
	height: 28px;
}
[data-i~='ac-call'] {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
[data-i~='ac-call'] > :first-child {
	font-weight: 500;
	font-size: 13px;
	line-height: 16px;
	color: black;
}
[data-i~='ac-call'] > :last-child {
	font-size: 12px;
	line-height: normal;
	color: var(--color-gray-500);
}
[data-i~='ac-kora'] {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 15px;
	padding: 20px;
	border-bottom: 0.5px solid var(--color-gray-200);
	font-size: 14px;
}
[data-i~='ac-kora'] > div {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
}
[data-i~='ac-intent'] {
	font-weight: 500;
	line-height: 24px;
}
[data-i~='ac-why'] {
	font-style: italic;
	line-height: 20px;
	color: var(--color-gray-950);
	white-space: normal;
}
[data-i~='ac-list'] {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 20px;
}
[data-i~='ac-item'] {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	border: 1px solid rgb(240 240 240);
	border-radius: 4px;
	background: white;
	font-size: 13px;
	line-height: 16px;
	color: black;
}
[data-i~='ac-item']::before {
	content: '';
	flex: none;
	width: 16px;
	height: 16px;
	border: 1px solid rgb(0 22 60 / 0.18);
	border-radius: 3px;
	background: rgb(255 255 255 / 0.9);
}
[data-i~='ac-edge'] {
	position: absolute;
	top: 0;
	right: 0;
	width: 184px;
	height: 700px;
	background: linear-gradient(to right, transparent, var(--ground));
	pointer-events: none;
}
[data-i~='ac-fade'] {
	height: 314px;
}

/* Coach — a meeting held to the methodology, and what to do better next time (drawn here, D-0207). */
[data-i~='co-card'] {
	top: 72px;
	width: 456px;
	height: 660px;
	box-shadow: 0 -16px 40px 0 rgb(0 0 0 / var(--shade));
}
[data-i~='co-card'] [data-i~='head'] {
	gap: 16px;
}
[data-i~='co-score'] {
	display: flex;
	align-items: baseline;
	gap: 2px;
	font-weight: 600;
	font-size: 20px;
	line-height: 24px;
	color: var(--color-gray-950);
}
[data-i~='co-score'] small {
	font-weight: 400;
	font-size: 12px;
	color: var(--color-gray-500);
}
[data-i~='co-rows'] {
	display: flex;
	flex-direction: column;
}
[data-i~='co-row'] {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 20px;
	border-bottom: 1px solid var(--color-gray-100);
	font-size: 13px;
	line-height: 16px;
}
[data-i~='co-row'] > :first-child {
	flex: 1 0 0rem;
	min-width: 1px;
	color: rgb(28 32 36);
}
[data-i~='co-meter'] {
	position: relative;
	flex: none;
	width: 96px;
	height: 4px;
	border-radius: 99px;
	background: var(--color-gray-100);
	overflow: clip;
}
[data-i~='co-meter'] > i {
	position: absolute;
	inset: 0 auto 0 0;
	border-radius: 99px;
	background: rgb(27 106 80);
}
[data-i~='co-state'] {
	flex: none;
	width: 68px;
	padding: 3px 0;
	border-radius: 999px;
	text-align: center;
	font-size: 11px;
	line-height: 14px;
}
[data-i~='co-state'][data-i~='met'] {
	background: rgb(225 248 238);
	color: rgb(0 91 66);
}
[data-i~='co-state'][data-i~='partial'] {
	background: rgb(254 203 0 / 0.12);
	color: rgb(171 100 0);
}
[data-i~='co-state'][data-i~='missed'] {
	background: rgb(255 0 62 / 0.08);
	color: rgb(190 18 60);
}
[data-i~='co-tip'] {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px;
	font-size: 14px;
}
[data-i~='co-tip'] > :first-child {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 500;
	line-height: 24px;
}
[data-i~='co-tip'] > :last-child {
	font-style: italic;
	line-height: 20px;
	color: var(--color-gray-950);
	white-space: normal;
}
[data-i~='co-fade'] {
	height: 300px;
}

/* Brief — Kora, asked to prepare for the next meeting (907:5826). */
[data-i~='br-card'] {
	bottom: -8px;
	width: 472px;
	height: 644px;
	border-radius: 4px 4px 0 0;
	box-shadow: 0 -12px 32px 0 rgb(0 0 0 / var(--shade));
}
[data-i~='br-card'] [data-i~='head'] {
	padding: 16px 20px 16.5px;
	border-bottom-color: var(--color-gray-100);
	font-weight: 500;
	font-size: 14px;
	line-height: 24px;
	color: black;
}
[data-i~='br-body'] {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 20px;
	font-size: 13px;
	line-height: 20px;
	letter-spacing: -0.347px;
	color: rgb(11 11 11);
}
[data-i~='br-steps'] {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 2px 0;
	opacity: 0.6;
	font-weight: 500;
	font-size: 10px;
	line-height: 16px;
	letter-spacing: 0;
}
[data-i~='br-steps'] .icon {
	font-size: 13px;
	color: var(--color-gray-600);
}
[data-i~='br-say'] {
	white-space: pre-line;
}
[data-i~='br-meet'] {
	display: flex;
	gap: 8px;
	padding: 6px 12px 6px 8px;
	border: 1px solid var(--color-gray-100);
	border-radius: 4px;
	background: white;
}
[data-i~='br-meet']::before {
	content: '';
	flex: none;
	width: 4px;
	border-radius: 99px;
	background: var(--color-emerald-800);
}
[data-i~='br-meet'] > div {
	flex: 1 0 0rem;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 4px 0;
}
[data-i~='br-meet'] > div > div {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
[data-i~='br-faces'] {
	display: flex;
}
[data-i~='br-faces'] img {
	width: 16px;
	height: 16px;
	margin-right: -6px;
	border: 0.8px solid rgb(254 255 254);
	border-radius: 99px;
	object-fit: cover;
}
[data-i~='br-when'] {
	font-size: 11px;
	opacity: 0.7;
	text-transform: uppercase;
}
[data-i~='br-block'] {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 12px;
	border: 1px solid var(--color-gray-100);
	border-radius: 4px;
	background: rgb(255 255 255 / 0.8);
	-webkit-backdrop-filter: blur(var(--blur-xl));
	backdrop-filter: blur(var(--blur-xl));
}
[data-i~='br-block'] > p:first-child {
	font-weight: 600;
	font-size: 10px;
	line-height: 16px;
	letter-spacing: 0;
	opacity: 0.8;
}
[data-i~='br-row'] {
	display: flex;
	align-items: center;
	gap: 6px;
}
[data-i~='br-row'] > :first-child {
	flex: none;
	width: 120px;
	font-size: 11px;
	opacity: 0.7;
	text-transform: uppercase;
}
[data-i~='br-row'] > :last-child {
	flex: 1 0 0rem;
	text-align: right;
}
[data-i~='br-row'] b {
	font-weight: 600;
}
[data-i~='br-stage'] {
	flex: none !important;
	padding: 4px 8px;
	border-radius: 4px;
	background: rgb(0 151 247 / 0.13);
	font-size: 12px;
	line-height: 14.4px;
	letter-spacing: -0.5px;
	color: rgb(0 64 104 / 0.95);
}
[data-i~='br-open'] {
	display: flex;
	align-items: center;
	gap: 6px;
}
[data-i~='br-open'] img {
	width: 16px;
	height: 16px;
}
[data-i~='br-edge'] {
	position: absolute;
	top: 0;
	width: 65px;
	height: 700px;
	pointer-events: none;
}
[data-i~='br-edge'][data-i~='left'] {
	left: 0;
	width: 54px;
	background: linear-gradient(to left, transparent, var(--ground));
}
[data-i~='br-edge'][data-i~='right'] {
	right: 0;
	background: linear-gradient(to right, transparent, var(--ground));
}
[data-i~='br-fade'] {
	height: 399px;
}

/* ─── Revenue curve (D-0208) ──────────────────────────────────────────────────
 * The graph in RevenueCurve.astro (Landing Pages Figma 907:4956): the curve on the brand's ramp,
 * sky to emerald, over a field of fine bars; stems from each meeting to the foot; and the meetings,
 * glass cards with an edge of the ramp on their right (--tone 0..3). Timings are the motion roles. */
[data-c='stop-in'] {
	stop-color: var(--color-sky-300);
	stop-opacity: 0.2;
}
[data-c='stop-sky'] {
	stop-color: var(--color-sky-500);
}
[data-c='stop-emerald'] {
	stop-color: var(--color-emerald-600);
}
[data-c='stop-out'] {
	stop-color: var(--color-sky-300);
	stop-opacity: 0.5;
}
[data-c='bar-sky'] {
	stop-color: var(--color-sky-200);
}
[data-c='bar-emerald'] {
	stop-color: var(--color-emerald-200);
}
[data-c='bars'] line {
	stroke: url(#curve-bar);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
	opacity: 0.8;
}
/* D-0288: one curve, whole — no line grows along it. */
[data-c='base'] {
	stroke: url(#curve-line);
	stroke-width: 2;
	vector-effect: non-scaling-stroke;
	opacity: 0.7;
}
/* A stem carries its card's right edge down to the foot. At rest it is one of the field's lines
   (D-0289); as its card comes, and whenever its meeting is chosen, it shines once — the card's tone,
   full, in the reveal role's time — and settles back among the others. */
[data-c='stem'] {
	stroke: url(#curve-bar);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
	opacity: 0.8;
}
/* Once its card has appeared the stem stays in the card's tone (D-0290); the shine lands on it. */
[data-c='stem'][data-lit] {
	stroke: color-mix(in oklab, var(--color-sky-500), var(--color-emerald-600) calc(var(--tone) * 33%));
	opacity: 1;
}
[data-c='stem'][data-shine] {
	animation: curve-shine calc(var(--rg-motion-reveal-duration) * 2) var(--rg-motion-reveal-easing);
}
@keyframes curve-shine {
	0% {
		stroke: url(#curve-bar);
		stroke-width: 1;
		opacity: 0.8;
	}
	30% {
		stroke: color-mix(in oklab, var(--color-sky-500), var(--color-emerald-600) calc(var(--tone) * 33%));
		stroke-width: 2;
		opacity: 1;
	}
	100% {
		stroke: color-mix(in oklab, var(--color-sky-500), var(--color-emerald-600) calc(var(--tone) * 33%));
		stroke-width: 1;
		opacity: 1;
	}
}
@media (prefers-reduced-motion: reduce) {
	[data-c='stem'][data-shine] {
		animation: none;
	}
}
/* A meeting's card, as Landing Pages Figma 1293:7759 draws it (D-0283): 200 wide, 4 round, the left
   corners at 4, an edge of the ramp on its right, glass from the sky's 5% to white at 9% over the lg
   blur, a soft shadow; at its head the two faces at 24 and the meeting at the display face; at its
   foot Kora's insight in her gradient on white at a half. Its parts appear one by one once the curve
   has reached it (`data-shown`): the faces, then the meeting, then the insight, two reveal staggers
   apart. */
[data-c='card'] {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 4px;
	border-right: 1px solid color-mix(in oklab, var(--color-sky-500), var(--color-emerald-600) calc(var(--tone) * 33%));
	border-radius: 4px 0 0 4px;
	/* D-0284: a popout — whole, white, standing off the field on a deep soft shadow — not the frame's
	   near-clear glass, which faded into the band's foot. */
	background: linear-gradient(to left, color-mix(in oklab, var(--color-sky-500) 8%, white), rgb(255 255 255 / 0.92));
	box-shadow: 0 16px 40px 0 rgb(0 0 0 / 0.14), 0 2px 6px 0 rgb(0 0 0 / 0.06);
	-webkit-backdrop-filter: blur(var(--blur-lg));
	backdrop-filter: blur(var(--blur-lg));
	text-align: left;
	cursor: pointer;
	font-family: var(--font-display);
}
[data-c='card']:hover,
[data-c='card'][aria-pressed='true'] {
	box-shadow: 0 24px 56px 0 rgb(0 0 0 / 0.18), 0 2px 6px 0 rgb(0 0 0 / 0.06);
}
[data-c='card-head'] {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
	padding: 6px;
}
[data-c='faces'] {
	display: flex;
	gap: 4px;
}
[data-c='faces'] img {
	width: 24px;
	height: 24px;
	border-radius: 2px;
	object-fit: cover;
	object-position: 50% 20%;
	background: var(--color-neutral-100);
}
/* D-0287: the meeting and the insight each hold their lines in a `grow` that opens from nothing, so
   the card stands at the faces' height first, grows to show the meeting, then grows again for the
   insight. */
[data-c='meeting'],
[data-c='insight'] {
	display: grid;
	grid-template-rows: 1fr;
	width: 100%;
}
[data-c='grow'] {
	display: flex;
	flex-direction: column;
	min-height: 0;
	overflow: hidden;
}
[data-c='meeting'] > [data-c='grow'] {
	gap: 2px;
}
[data-c='meeting-name'] {
	font-size: 12px;
	line-height: 14px;
	color: var(--color-gray-800);
}
[data-c='meeting-company'] {
	font-size: 10px;
	line-height: 14px;
	color: var(--color-gray-500);
}
/* D-0293: Kora's note, with the frame's line breaks; the ghost holds the lines' room while the
   typed copy is written over it. */
[data-c='note'] {
	position: relative;
	white-space: pre-line;
}
[data-c='note-ghost'] {
	visibility: hidden;
}
[data-c='note-typed'] {
	position: absolute;
	inset: 0;
}
[data-c='insight'] > [data-c='grow'] {
	align-items: flex-start;
	gap: 8px;
	padding: 6px;
	border: 0.5px solid var(--color-neutral-200);
	border-radius: 2px;
	background: rgb(255 255 255 / 0.5);
	font-size: 10px;
	line-height: 12px;
}
@media (prefers-reduced-motion: no-preference) {
	/* D-0288, D-0294: each part eases over a reveal on the standard curve; the card comes with its faces
	already on it, and the meeting and the note open after, each on the script's cue. */
	[data-c='card'] [data-part] {
		transition-property: opacity, transform, grid-template-rows;
		transition-duration: var(--rg-motion-reveal-duration);
		transition-timing-function: var(--rg-motion-state-easing);
	}
	/* D-0292: the faces land first; four staggers on, the card grows upward from them — the meeting
	   and the insight opening on the even standard curve, so the growth is seen, not snapped. */

	[data-c='card'] {
		transition-property: opacity, box-shadow;
		transition-duration: var(--rg-motion-reveal-duration);
		transition-timing-function: var(--rg-motion-enter-easing);
	}
	[data-c='card']:not([data-shown]) {
		opacity: 0;
		pointer-events: none;
	}
	/* D-0293: the meeting opens on `data-open~=meeting`, the insight on `data-open~=insight`. */
	[data-c='card']:not([data-open~='meeting']) [data-c='meeting'],
	[data-c='card']:not([data-open~='insight']) [data-c='insight'] {
		opacity: 0;
		grid-template-rows: 0fr;
	}
	/* The head's gap and the insight's padding close too, so the card stands at the faces' height alone. */
	[data-c='card'] [data-c='card-head'],
	[data-c='card'] [data-c='insight'] > [data-c='grow'] {
		transition-property: gap, padding;
		transition-duration: var(--rg-motion-reveal-duration);
		transition-timing-function: var(--rg-motion-state-easing);
	}
	[data-c='card']:not([data-open~='meeting']) [data-c='card-head'] {
		gap: 0;
	}
	[data-c='card']:not([data-open~='insight']) [data-c='insight'] > [data-c='grow'] {
		padding-block: 0;
	}
}
[data-c='dot'] {
	position: absolute;
	right: 0;
	bottom: 0;
	width: calc(var(--spacing) * 2.5);
	height: calc(var(--spacing) * 2.5);
	border: 2px solid var(--rg-color-bg-surface);
	border-radius: var(--radius-full);
	background: var(--color-sky-500);
	transform: translate(50%, 50%) scale(0.6);
	opacity: 0.6;
	pointer-events: none;
	transition-property: opacity, transform, background-color;
	transition-duration: var(--rg-motion-reveal-duration);
	transition-timing-function: var(--rg-motion-enter-easing);
}
/* D-0289: the dot appears as its card starts to grow. */
@media (prefers-reduced-motion: no-preference) {
	li:has([data-c='card']:not([data-shown])) > [data-c='dot'] {
		opacity: 0;
		transform: translate(50%, 50%) scale(0);
	}
}
li:has([aria-pressed='true']) > [data-c='dot'] {
	background: var(--color-emerald-600);
	transform: translate(50%, 50%) scale(1);
	opacity: 1;
}

/* ─── Revenue bars (D-0353–D-0356) ───────────────────────────────────────────
 * The graph in RevenueBars.astro, in the curve's width (1400 × 492) and laid out as the curve is:
 * eighteen slim bars rising toward the right, unevenly, each in the brand's gradient (D-0358), three or
 * four showing past the words and the rest faded to nothing (--fade, a tight bell about the
 * highlighted bar),
 * glowing softly in its own tone, growing from the foot on arrival; one highlighted in full contrast,
 * its card popping across it, the others dropping their intensity. No axes, lines or months; nothing
 * answers the pointer. Timings are the motion roles. */
[data-c='chart'] {
	position: relative;
	font-family: Inter, sans-serif;
	letter-spacing: 0;
	white-space: nowrap;
}
[data-c='bars-row'] {
	position: absolute;
	/* D-0360: the row is 72 wider than the plane — four on each of the eighteen bars, the gaps as they
	   were — and runs past the right edge, where the last bar, already gone, is clipped. */
	inset: 0 -72px 0 0;
	/* D-0359: the whole row stands 28 to the right of the plane, so the visible bars sit in toward the
	   words and the space on the right reads balanced. */
	translate: 28px 0;
	display: flex;
	align-items: flex-end;
	/* The gap as it was: 1.9% of the plane, which is 1.81% of the wider row. */
	gap: 1.81%;
	margin: 0;
	padding: 0;
	list-style: none;
}
/* D-0434: the graph the bars stand on — five lines across the plane, no values; they show only about the lit
   bar and are gone well before the words and the right edge (D-0435), and fade into the ground at the foot. */
[data-c='grid'] {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(to right, transparent 56%, black 66%, black 80%, transparent 90%), linear-gradient(to top, transparent, black 140px);
	mask-image: linear-gradient(to right, transparent 56%, black 66%, black 80%, transparent 90%), linear-gradient(to top, transparent, black 140px);
	-webkit-mask-composite: source-in;
	mask-composite: intersect;
}
/* D-0435: short soft dashes — 10 long, 2 high, 6 apart — faint (gray-300 at 30%) so the faint bars still read
   in front of them. */
[data-c='grid'] > span {
	display: block;
	height: 2px;
	background: linear-gradient(to right, color-mix(in oklab, var(--color-gray-300) 30%, transparent) 10px, transparent 10px) 0 0 / 16px 2px repeat-x;
}
[data-c='slot'] {
	position: relative;
	display: flex;
	flex: 1 1 0rem;
	align-items: flex-end;
	height: 100%;
	/* D-0358: every bar wears the brand's gradient, emerald at the foot to sky at the head — the eyebrow's
	   square stood tall — never a flat green; the card's rows take the two colours' middle. */
	--bar: color-mix(in oklab, var(--color-sky-500), var(--color-emerald-600));
}
/* A bar: the brand's gradient, emerald at the foot to sky at the head, washed toward white, a glow of
   the two colours' middle about it; faded by its place. */
[data-c='bar'] {
	display: block;
	width: 100%;
	height: calc(var(--h) * 100%);
	border-radius: 4px 4px 0 0;
	background: linear-gradient(to top, color-mix(in oklab, var(--color-emerald-600) 55%, white), color-mix(in oklab, var(--color-sky-500) 55%, white));
	box-shadow: 0 0 48px 0 color-mix(in oklab, var(--bar) 30%, transparent);
	opacity: var(--fade);
	/* D-0356: each bar fades out over its lowest 140 — into the ground, not stopped on the section's foot. */
	-webkit-mask-image: linear-gradient(to top, transparent, black 140px);
	mask-image: linear-gradient(to top, transparent, black 140px);
	transform-origin: bottom;
	transition-property: opacity, box-shadow;
	transition-duration: var(--rg-motion-state-duration);
	transition-timing-function: var(--rg-motion-state-easing);
}
/* One highlighted: whole, its glow stronger; the others drop their intensity by a tenth (D-0360; a
   fifth before). */
[data-c='chart'][data-chosen] [data-c='slot']:not([data-lit]) [data-c='bar'] {
	opacity: calc(var(--fade) * 0.9);
}
/* D-0357, D-0358: the lit bar deeper and brighter than its neighbours — the brand's gradient whole,
   emerald-600 at the foot to sky-500 at the head, a wider and stronger glow. */
[data-c='slot'][data-lit] [data-c='bar'] {
	opacity: 1;
	background: linear-gradient(to top, var(--color-emerald-600), var(--color-sky-500));
	box-shadow: 0 0 80px 4px color-mix(in oklab, var(--bar) 70%, transparent);
}
@media (prefers-reduced-motion: no-preference) {
	/* On arrival each bar grows from the foot, a stagger after the one before, in the draw role's time. */
	[data-c='bar']:not([data-shown]) {
		transform: scaleY(0);
	}
	/* D-0433: the bars that show one after another at one even pace (the script sets `--at` and `--grow`). */
	[data-c='bar'] {
		transition-property: opacity, box-shadow, transform;
		transition-duration: var(--rg-motion-reveal-duration), var(--rg-motion-reveal-duration), var(--grow, var(--rg-motion-draw-duration));
		transition-timing-function: var(--rg-motion-state-easing), var(--rg-motion-state-easing), linear;
		transition-delay: 0s, 0s, var(--at, calc(var(--n, 0) * var(--rg-motion-reveal-stagger)));
	}
}
/* The card across the highlighted bar (D-0355, D-0356, D-0361), drawn as the kit's cards are
   (Stream's, D-0332): white, a gray-100 hairline, 4 corners, the popout's shadow (D-0284), 12 × 14 of
   padding, 220 wide, standing across the bar's right half at its middle height and out to the right,
   clear of the words. In it the month's pipeline against the year before: the measure's name with its
   growth in the kit's tag; then each period a row under a rule, as Stream's facts — a square mark in
   the brand's middle (the earlier at 40%), the period, and the figure. It pops in (the pop role) once
   its bar is lit; no cursor is drawn. */
/* D-0432: the lit bar's card, as Landing Pages Figma 1485:10009 draws it — frosted white clearing toward
   its foot, a neutral-300 hairline, the kit's corners, a shadow up and to the left; a white head with Kora's
   mark in a white seat, the title and a success tag on gray-50 over a hairline; under it each period a row with
   an accent bar (this year emerald-600, last year at half), a dashed rule between them. It pops on the bar as
   before. */
[data-c='tip'] {
	position: absolute;
	/* D-0434: 40 lower on its bar, and narrower */
	bottom: calc(var(--h) * 50% - 40px);
	left: 50%;
	z-index: 1;
	display: flex;
	flex-direction: column;
	width: 280px;
	overflow: clip;
	border: 0.5px solid var(--color-neutral-300);
	border-radius: 4px;
	background: linear-gradient(to bottom, rgb(255 255 255 / 0.9), rgb(255 255 255 / 0) 114%);
	-webkit-backdrop-filter: blur(var(--blur-2xl));
	backdrop-filter: blur(var(--blur-2xl));
	box-shadow: -20px -16px 56px 0 rgb(0 0 0 / 0.12);
	transform-origin: bottom left;
	opacity: 0;
	scale: 0.92;
	pointer-events: none;
	transition-property: opacity, scale;
	transition-duration: var(--rg-motion-state-duration), var(--rg-motion-pop-duration);
	transition-timing-function: var(--rg-motion-state-easing), var(--rg-motion-pop-easing);
}
[data-c='chart'][data-tip] [data-c='slot'][data-lit] > [data-c='tip'] {
	opacity: 1;
	scale: 1;
}
/* D-0433: the card's parts one after another once it has opened — Kora's mark and the title, the growth tag
   (which then pulses once, a ring of success), each period, the rule between them. */
:is([data-c='tip-mark'], [data-c='tip-title'], [data-c='tip-tag'], [data-c='tip-row'], [data-c='tip-rule']) {
	opacity: 0;
	translate: 0 var(--rg-motion-enter-distance);
	transition-property: opacity, translate;
	transition-duration: var(--rg-motion-reveal-duration);
	transition-timing-function: var(--rg-motion-reveal-easing);
}
[data-c='chart'][data-tip] :is([data-c='tip-mark'], [data-c='tip-title'], [data-c='tip-tag'], [data-c='tip-row'], [data-c='tip-rule']) {
	opacity: 1;
	translate: none;
}
[data-c='chart'][data-tip] [data-c='tip-mark'] {
	transition-delay: calc(var(--rg-motion-pop-duration));
}
[data-c='chart'][data-tip] [data-c='tip-title'] {
	transition-delay: calc(var(--rg-motion-pop-duration) + var(--rg-motion-reveal-stagger) * 6);
}
[data-c='chart'][data-tip] [data-c='tip-tag'] {
	transition-delay: calc(var(--rg-motion-pop-duration) + var(--rg-motion-reveal-stagger) * 12);
	animation: tip-tag-pulse calc(var(--rg-motion-reveal-duration) * 3) var(--rg-motion-state-easing) calc(var(--rg-motion-pop-duration) + var(--rg-motion-reveal-stagger) * 12 + var(--rg-motion-reveal-duration) * 2) 1;
}
[data-c='chart'][data-tip] [data-c='tip-row']:first-child {
	transition-delay: calc(var(--rg-motion-pop-duration) + var(--rg-motion-reveal-stagger) * 18);
}
[data-c='chart'][data-tip] [data-c='tip-rule'] {
	transition-delay: calc(var(--rg-motion-pop-duration) + var(--rg-motion-reveal-stagger) * 24);
}
[data-c='chart'][data-tip] [data-c='tip-row']:last-child {
	transition-delay: calc(var(--rg-motion-pop-duration) + var(--rg-motion-reveal-stagger) * 30);
}
@keyframes tip-tag-pulse {
	0% {
		box-shadow: 0 0 0 0 color-mix(in oklab, var(--color-green-500) 45%, transparent);
	}
	100% {
		box-shadow: 0 0 0 8px color-mix(in oklab, var(--color-green-500) 0%, transparent);
	}
}
[data-c='tip-head'] {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	border-bottom: 0.5px solid var(--color-gray-200);
	background: var(--color-gray-50);
}
/* Kora's mark in a white seat, lifted a little. */
[data-c='tip-mark'] {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 99px;
	background: white;
	box-shadow: var(--shadow-xs);
}
[data-c='tip-title'] {
	flex: 1 0 0rem;
	min-width: 0;
	font-weight: 600;
	font-size: 14px;
	line-height: 20px;
	color: var(--color-gray-950);
}
[data-c='tip-tag'] {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 6px;
	padding: 6px 8px;
	background: var(--color-green-100);
	font-weight: 500;
	font-size: 14px;
	line-height: 16px;
	letter-spacing: -0.55px;
	color: var(--color-green-700);
}
[data-c='tip-tag'] .icon {
	font-size: 14px;
}
/* The kit's tag (Stream's sm-tag), with its arrow. */
[data-c='sm-tag'] {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 2px;
	padding: 3px 6px;
	border-radius: 3.333px;
	background: rgb(0 196 111 / 0.12);
	font-weight: 500;
	font-size: 11px;
	line-height: 14px;
	color: rgb(0 91 60 / 0.84);
}
[data-c='sm-tag'] .icon {
	font-size: 12px;
}
[data-c='tip-rows'] {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 12px;
	border-bottom: 1px solid var(--color-gray-100);
	background: white;
}
[data-c='tip-row'] {
	display: flex;
	align-items: stretch;
	gap: 8px;
	width: 100%;
	padding: 6px 12px 6px 8px;
	background: white;
}
/* A dotted rule between the periods, inset from the rows' ends. */
[data-c='tip-rule'] {
	width: calc(100% - 6px);
	border-top: 1px dashed var(--color-gray-200);
}
[data-c~='tip-dot'] {
	flex: none;
	width: 3px;
	border-radius: 99px;
	background: var(--color-emerald-600);
}
[data-c~='tip-dot'][data-c~='then'] {
	background: color-mix(in oklab, var(--color-emerald-600) 50%, transparent);
}
[data-c='tip-when'] {
	flex: 1 0 0rem;
	min-width: 0;
	padding: 4px 0;
	font-size: 13px;
	line-height: 20px;
	letter-spacing: -0.35px;
	color: var(--color-gray-950);
}
[data-c='tip-value'] {
	flex: none;
	padding: 4px 0;
	font-weight: 600;
	font-size: 13px;
	line-height: 20px;
	letter-spacing: -0.35px;
	text-transform: uppercase;
	font-variant-numeric: tabular-nums;
	color: var(--color-gray-950);
	opacity: 0.7;
}
@media (min-width: 80rem) and (max-width: 89.9rem) {
	/* D-0432: between xl and 1440 the graph stands behind the words and the lit bar sits near the edge —
	   the card narrows to stay inside the section, clear of the words. */
	[data-c='tip'] {
		width: 280px;
	}
}
@media (max-width: 79.9rem) {
	/* D-0432: below xl the graph stands under the words, so the card opens to the left of its bar and
	   stays inside the section. */
	[data-c='tip'] {
		right: 50%;
		left: auto;
		transform-origin: bottom right;
	}
}
@media (max-width: 63.9rem) {
	/* Below lg the bars stand without the card. */
	[data-c='tip'] {
		display: none;
	}
}

/* ── Scatter (D-0187): a field of the brand's cells at the head of the board streams down strands
   into six columns of context at the foot as `--t` runs 0 → 1 — the page's scroll sets it; a still
   picture fixes it. The drawing is the scene's canvas; here are its labels. */
[data-i~='scatter'] {
	--t: 0;
	position: absolute;
	inset: 0;
}
[data-i~='scatter-canvas'] {
	position: absolute;
	inset: 0;
	width: 600px;
	height: 700px;
}
/* A tool's tile on the globe (the hero's, D-0097: a white tile with the hairline, its logo at 24
   inside), centred on its cell. It pops (--p, 0 or 1, set by the script): in from the cell's size
   in the state role's time, out as quickly. */
[data-i~='scatter-tile'] {
	--p: 0;
	position: absolute;
	top: -22px;
	left: -22px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 2px;
	background: white;
	box-shadow:
		0 0 0 1px var(--color-slate-200),
		0 8px 20px 0 rgb(0 0 0 / var(--shade));
	scale: calc(0.22 + 0.78 * var(--p));
	opacity: var(--p);
	transition:
		scale var(--rg-motion-state-duration) var(--rg-motion-state-easing),
		opacity var(--rg-motion-state-duration) var(--rg-motion-state-easing);
}
[data-i~='scatter-tile'] img {
	width: 24px;
	height: 24px;
	object-fit: contain;
}
[data-i~='scatter-tile'] img.flipped {
	scale: 1 -1;
}
/* The record over the strands: in — rising a little — over the second half of the journey. */
[data-i~='scatter-record'] {
	top: 60px;
	width: 440px;
	/* The kit's glass (D-0108), and a scrim rising from the foot (the owner): the ground's white,
	   solid at the foot and clear by the head, under the glass, so the strands fade beneath the rows. */
	/* Thinner than the kit's glass, so what is behind shows through the blur. */
	background:
		linear-gradient(to bottom, rgb(255 255 255 / 0.35), rgb(255 255 255 / 0.15)),
		linear-gradient(to top, var(--ground) 20%, transparent 85%);
	opacity: clamp(0, var(--t) * 2 - 1, 1);
	translate: -50% calc(16px * (1 - clamp(0, var(--t) * 2 - 1, 1)));
}
/* Behind the record, for its glass to refract (the owner: the glass must show): a soft glow of the
   brand's two colours, in with the card. */
[data-i~='scatter-glow'] {
	position: absolute;
	top: 40px;
	left: 50%;
	width: 520px;
	height: 460px;
	translate: -50% 0;
	background:
		radial-gradient(closest-side at 28% 30%, var(--color-emerald-300), transparent),
		radial-gradient(closest-side at 72% 70%, var(--color-sky-300), transparent);
	opacity: calc(0.55 * clamp(0, var(--t) * 2 - 1, 1));
	filter: blur(24px);
}
/* A column's name under it, arriving with the cells. The columns are 92 apart from 70. */
[data-i~='scatter-label'] {
	position: absolute;
	top: 640px;
	left: calc((70 + var(--k) * 92) * 1px);
	translate: -50% 0;
	font-size: 10px;
	line-height: 12px;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--color-slate-700);
	opacity: clamp(0, var(--t) * 2 - 1, 1);
}

/* ── MCP (D-0212): the hero's Ask, and the feature section's Connectors, Risk and Fanout, ported from
   Landing Pages Figma 920:6254, 920:6659, 920:6605 and 920:6714. The frames draw their grounds and
   their accents in Kora's warm gradient; here they are the brand's green-to-blue (the owner), so the
   page reads as Revenue Grid's. Every measure below is the frame's. */

/* Ask — the composer that every AI tool talks to (920:6254). The frame's 969-wide card stands at 85
   on the 600 board and runs off the right, into the ground, as the frame has it. */
[data-i~='ask-group'] {
	position: absolute;
	top: 211px;
	left: 85px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 969px;
}
/* D-0243: the frame's two drop shadows (-4 -4 20 and 50 25 20, both 7%) are drawn on each card below,
   beside its own, rather than as a filter on the group — a filtered ancestor is its cards' backdrop
   root, and the composer's glass blurred nothing behind it. */
[data-i~='card'][data-i~='ask-bar'] {
	/* D-0387: its glass runs 40% white at the head to clear at the foot. */
	--glass: rgb(255 255 255 / 0.4);
	--glass-foot: rgb(255 255 255 / 0);
	position: relative;
	flex-direction: row;
	align-items: center;
	gap: 12px;
	width: 969px;
	padding: 16.377px 21.837px 43.673px;
	margin-bottom: -32.755px;
	border-radius: 16.377px 16.377px 0 0;
	box-shadow:
		0 16.377px 43.673px 0 rgb(0 0 0 / 0.03),
		-4px -4px 20px rgb(0 0 0 / 0.07),
		50.191px 24.584px 20.486px rgb(0 0 0 / 0.07);
}
[data-i~='card'][data-i~='ask-bar'] > * {
	width: auto;
}
[data-i~='ask-label'] {
	font-size: 14px;
	line-height: 24px;
	letter-spacing: 1.5px;
	color: var(--color-gray-500);
}
[data-i~='ask-logos'] {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 27.296px;
}
[data-i~='ask-logo'] {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 27.296px;
	height: 27.296px;
}
[data-i~='ask-logo'] img {
	width: 19.107px;
	height: 19.107px;
}
[data-i~='ask-logo'][data-i~='b'] img {
	width: 20.472px;
	height: 20.472px;
}
[data-i~='ask-logo'][data-i~='c'] img {
	width: 27.296px;
	height: 27.296px;
}
[data-i~='ask-logo'][data-i~='d'] img {
	width: 21.837px;
	height: 21.837px;
}
[data-i~='card'][data-i~='ask-box'] {
	/* D-0386: its glass runs whole white at the head to 20% at the foot. */
	--glass: white;
	--glass-foot: rgb(255 255 255 / 0.2);
	position: relative;
	width: 969px;
	padding: 5.459px;
	border-radius: 30.025px;
	box-shadow:
		0 -10.92px 16.377px 0 rgb(25 25 25 / 0.04),
		0 2.73px 8.189px 0 rgb(25 25 25 / 0.03),
		-4px -4px 20px rgb(0 0 0 / 0.07),
		50.191px 24.584px 20.486px rgb(0 0 0 / 0.07);
}
[data-i~='ask-prompt'] {
	padding: 16.377px 16.377px 0;
	height: 144.479px;
	font-size: 21.837px;
	line-height: 32.755px;
	letter-spacing: -0.4265px;
	color: rgb(21 14 0);
}
[data-i~='ask-row'] {
	display: flex;
	align-items: center;
	gap: 5.459px;
	padding: 5.459px 16.377px 16.377px;
}
[data-i~='ask-chip'] {
	display: flex;
	flex: none;
	align-items: center;
	gap: 10.918px;
	padding: 6.824px 13.648px;
	border: 0.682px solid var(--color-neutral-200);
	border-radius: 11.92px;
	background: white;
	filter: drop-shadow(0 0 4px rgb(0 0 0 / 0.03));
}
[data-i~='ask-chip'] img {
	width: 19.104px;
	height: 19.106px;
}
[data-i~='ask-chip-name'] {
	font-weight: 500;
	font-size: 19.107px;
	line-height: 27.296px;
	letter-spacing: -0.1433px;
	color: var(--color-gray-700);
}
[data-i~='ask-chip'] [data-i~='ask-x'] {
	font-size: 10.918px;
	line-height: 10.918px;
	color: var(--color-gray-400);
}
[data-i~='ask-auto'] {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	margin-left: auto;
	height: 38.214px;
	padding: 0 16.377px;
	border-radius: 68.239px;
	font-weight: 500;
	font-size: 19.107px;
	line-height: 27.296px;
	letter-spacing: -0.2053px;
	color: rgb(125 122 117);
}
[data-i~='ask-send'] {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 38.214px;
	height: 38.214px;
	border-radius: 40.944px;
	background: rgb(42 28 0 / 0.07);
	opacity: 0.4;
	font-size: 21.837px;
	color: rgb(21 14 0);
}
/* The card runs out of sight to the right, into the ground, as the frame's edge fade has it. */
[data-i~='ask-edge'] {
	position: absolute;
	top: 0;
	right: 0;
	width: 232px;
	height: 700px;
	background: linear-gradient(to right, transparent, var(--ground));
	pointer-events: none;
}
[data-i~='ask-fade'] {
	height: 200px;
}

/* Connectors — the connector turned on in the tool's own menu (920:6659). The frame's panel is 887
   tall at 104: it runs off the head of the board, and only its foot — the composer — is read. */
[data-i~='card'][data-i~='conn-panel'] {
	top: -363px;
	left: 104px;
	width: 796px;
	height: 887.035px;
	justify-content: flex-end;
	padding: 13.76px;
	border-radius: 29.31px;
	background: linear-gradient(to bottom, transparent, var(--glass) 92%);
	box-shadow: 13.322px 13.322px 62.17px 0 rgb(0 0 0 / 0.12);
}
[data-i~='conn-box'] {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 768.48px;
	padding: 4.441px;
	border: 1.11px solid rgb(223 223 223);
	border-radius: 15.543px;
	background: white;
	box-shadow: 0 8.881px 13.322px 0 rgb(25 25 25 / 0.03);
}
[data-i~='conn-box'] > * {
	width: 100%;
}
[data-i~='conn-prompt'] {
	height: 79.611px;
	padding: 13.322px 13.322px 0;
	font-size: 17.763px;
	line-height: 26.644px;
	letter-spacing: -0.3469px;
	color: rgb(137 135 129);
}
[data-i~='conn-row'] {
	display: flex;
	align-items: center;
	gap: 11.102px;
	padding: 4.441px 13.322px 13.322px;
}
[data-i~='conn-plus'] {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 33.305px;
	height: 33.305px;
	border-radius: 5.551px;
	font-size: 16.653px;
	color: rgb(11 11 11);
}
[data-i~='conn-chip'] {
	display: flex;
	flex: none;
	align-items: center;
	gap: 6.661px;
	padding: 5.551px 12.43px 5.551px 10.21px;
	border-radius: 8.881px;
	background: rgb(237 236 232 / 0.69);
	font-size: 14.432px;
	line-height: 22.204px;
	letter-spacing: -0.1166px;
	color: rgb(11 11 11 / 0.66);
}
[data-i~='conn-chip'] [data-i~='conn-grid'] {
	font-size: 17.763px;
	color: rgb(11 11 11 / 0.66);
}
[data-i~='conn-auto'] {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	margin-left: auto;
	width: 61.06px;
	height: 31.085px;
	border-radius: 55.509px;
	font-weight: 500;
	font-size: 15.543px;
	line-height: 22.204px;
	letter-spacing: -0.167px;
	color: rgb(125 122 117);
}
[data-i~='conn-send'] {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 31.085px;
	height: 31.085px;
	border-radius: 33.305px;
	background: rgb(42 28 0 / 0.07);
	opacity: 0.4;
	font-size: 17.763px;
	color: rgb(21 14 0);
}
/* The menu, over the composer: the connector, and what else can be done with it. */
[data-i~='conn-menu'] {
	position: absolute;
	top: 350px;
	left: 312.375px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 236.49px;
	overflow: clip;
	border-radius: 9.558px;
	background: white;
	box-shadow:
		0 0 31.466px 0 rgb(0 0 0 / 0.03),
		0 9.653px 28.958px 0 rgb(0 0 0 / 0.12),
		0 2.413px 7.24px 0 rgb(0 0 0 / 0.08);
}
[data-i~='conn-item'] {
	display: flex;
	align-items: center;
	gap: 9.653px;
	width: 100%;
	padding: 10.521px 15.284px;
	font-size: 16.892px;
	line-height: 24.132px;
	letter-spacing: -0.1815px;
	color: rgb(11 11 11);
}
[data-i~='conn-item'][data-i~='on'] {
	padding: 13.1px 15.284px;
	border-bottom: 0.983px solid rgb(223 223 223 / 0.5);
}
[data-i~='conn-ico'] {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 24.132px;
	height: 24.132px;
	font-size: 13.766px;
	color: rgb(11 11 11);
}
[data-i~='conn-ico'] img {
	width: 18.103px;
	height: 18.098px;
}
/* The toggle, on: the brand's blue, not the frame's (the owner — the page is Revenue Grid's). */
[data-i~='conn-toggle'] {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: flex-end;
	margin-left: 19.305px;
	width: 38.611px;
	height: 21.719px;
	padding: 2.413px;
	border-radius: 99px;
	background: var(--color-sky-600);
}
[data-i~='conn-knob'] {
	width: 16.892px;
	height: 16.892px;
	border-radius: 99px;
	background: white;
}
[data-i~='conn-fade'] {
	height: 267px;
}

/* Risk — the deals that need a hand this week, ranked (920:6605). */
[data-i~='card'][data-i~='risk-ask'] {
	/* D-0390: its glass runs 40% white at the head to 4% at the foot. */
	--glass: rgb(255 255 255 / 0.4);
	--glass-foot: rgb(255 255 255 / 0.04);
	top: 88px;
	left: 56px;
	flex-direction: row;
	align-items: center;
	width: 488px;
	padding: 8px 6px;
	border-radius: 16px;
	box-shadow: 0 8px 24px 0 rgb(0 0 0 / 0.05);
}
[data-i~='card'][data-i~='risk-ask'] > * {
	width: auto;
}
[data-i~='risk-ask-text'] {
	padding: 7px 12px;
	font-size: 15px;
	line-height: 24px;
	letter-spacing: -0.3125px;
	color: rgb(21 14 0);
}
[data-i~='risk-return'] {
	margin-left: auto;
	padding-right: 10px;
	font-size: 18px;
	color: var(--color-gray-400);
}
[data-i~='card'][data-i~='risk-card'] {
	/* D-0389: its glass runs whole white at the head to clear at the foot. */
	--glass: white;
	--glass-foot: rgb(255 255 255 / 0);
	top: 163px;
	left: 56px;
	gap: 24px;
	width: 488px;
	padding: 18px 18px 22px;
	border-radius: 16px;
	box-shadow: 0 12px 40px 0 rgb(0 0 0 / 0.08);
}
[data-i~='risk-block'] {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	/* D-0403: 16 between the found chip and the lead — a gap, since the board's p reset beat the lead's margin. */
	gap: 16px;
}
[data-i~='risk-found'] {
	display: flex;
	align-items: center;
	gap: 5px;
	width: auto;
	padding: 4px 9px;
	border-radius: 99px;
	background: rgb(246 246 244);
	font-size: 10px;
	line-height: 16px;
	color: rgb(11 11 11 / 0.6);
}
[data-i~='risk-mark'] {
	display: flex;
	padding: 3.2px;
	border-radius: 2.7px;
	background: white;
	box-shadow: 0 0 0 0.9px rgb(249 249 249);
}
[data-i~='risk-mark'] img {
	width: 9.6px;
	height: 9.597px;
}
[data-i~='risk-found'] [data-i~='risk-more'] {
	font-size: 10px;
	color: rgb(100 100 100);
}
[data-i~='risk-lead'] {
	width: 452px;
	font-size: 15px;
	line-height: 24px;
	letter-spacing: -0.3469px;
	color: rgb(11 11 11);
	white-space: normal;
}
[data-i~='risk-bars'] {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
[data-i~='risk-bar'] {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
[data-i~='risk-bar-head'] {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 12px;
	line-height: 18.6px;
	color: rgb(32 32 32);
}
[data-i~='risk-bar-head'] [data-i~='risk-score'] {
	font-weight: 500;
}
[data-i~='risk-track'] {
	height: 8px;
	overflow: clip;
	border-radius: 4px;
	background: var(--color-neutral-100);
}
[data-i~='risk-fill'] {
	height: 8px;
	width: calc(var(--w) * 1px);
	border-radius: 4px;
	background: var(--color-emerald-600);
}
[data-i~='risk-fade'] {
	height: 108px;
}

/* Respond (D-0534) — the Gateway's Product Core: an AI tool asked about the business, answering from
   Revenue Grid's context, in the Risk scene's hand (920:6605) — the ask's card and the answer card with
   the found chip at the same places and measures — and six answers of different kinds that take turns
   (the scene's own timeline): the card closes to its chip and grows to each answer's height. */
[data-i~='card'][data-i~='rp-ask'] {
	--glass: rgb(255 255 255 / 0.4);
	--glass-foot: rgb(255 255 255 / 0.04);
	top: 88px;
	left: 56px;
	flex-direction: row;
	align-items: center;
	width: 488px;
	min-height: 56px;
	padding: 8px 6px;
	border-radius: 16px;
	box-shadow: 0 8px 24px 0 rgb(0 0 0 / 0.05);
}
[data-i~='card'][data-i~='rp-ask'] > * {
	width: auto;
}
[data-i~='rp-ask-text'] {
	padding: 7px 12px;
	font-size: 15px;
	line-height: 24px;
	letter-spacing: -0.3125px;
	color: rgb(21 14 0);
}
[data-i~='rp-return'] {
	margin-left: auto;
	padding-right: 10px;
	font-size: 18px;
	color: var(--color-gray-400);
}
/* The ask pops as each question comes: held a little small, then let go on the pop role. */
:is([data-stage]:not([data-scenes])[data-on] [data-board], [data-scenes] [data-scene][data-on]) [data-i~='rp-ask'][data-part] {
	transition-property: opacity, transform, scale;
	transition-duration: var(--rg-motion-reveal-duration), var(--rg-motion-reveal-duration), var(--rg-motion-pop-duration);
	transition-timing-function: var(--rg-motion-reveal-easing), var(--rg-motion-reveal-easing), var(--rg-motion-pop-easing);
	transition-delay: var(--rg-motion-hover-duration), var(--rg-motion-hover-duration), 0s;
}
:is([data-stage]:not([data-scenes]) [data-board], [data-scenes] [data-scene]) [data-i~='rp-ask'][data-part][data-pop] {
	scale: 0.96;
	transition-duration: 0s;
}
:is([data-stage]:not([data-scenes]) [data-board], [data-scenes] [data-scene]) [data-i~='rp-ask'] [data-i~='rp-ask-text'][data-part] {
	opacity: 1;
	transform: none;
	transition-property: opacity, filter;
	transition-duration: var(--rg-motion-reveal-duration);
	transition-timing-function: var(--rg-motion-state-easing);
	transition-delay: 0s;
}
:is([data-stage]:not([data-scenes]) [data-board], [data-scenes] [data-scene]) [data-i~='rp-ask'] [data-i~='rp-ask-text'][data-part][data-out] {
	opacity: 0;
	filter: blur(var(--blur-sm));
}
[data-i~='card'][data-i~='rp-card'] {
	--glass: white;
	--glass-foot: rgb(255 255 255 / 0.35);
	top: 163px;
	left: 56px;
	width: 488px;
	padding: 18px 18px 22px;
	border-radius: 16px;
	box-shadow: 0 12px 40px 0 rgb(0 0 0 / 0.08);
}
:is([data-stage]:not([data-scenes])[data-on] [data-board], [data-scenes] [data-scene][data-on]) [data-i~='rp-card'][data-part] {
	transition-delay: calc(var(--rg-motion-hover-duration) + var(--rg-motion-reveal-duration) * 2);
}
/* D-0535: the answer card is away while a question is typed. It leaves sinking 8 as it fades, on the exit
   role (`data-gone="out"`); it waits small and unseen (`data-gone="in"`, taken at once) and pops in from
   its top on the pop role once there is an answer, before it expands. */
[data-i~='card'][data-i~='rp-card'] {
	transform-origin: 50% 0;
}
:is([data-stage]:not([data-scenes])[data-on] [data-board], [data-scenes] [data-scene][data-on]) [data-i~='rp-card'][data-part][data-run] {
	transition-property: opacity, transform, scale, translate;
	transition-duration: var(--rg-motion-reveal-duration), var(--rg-motion-reveal-duration), var(--rg-motion-pop-duration), var(--rg-motion-pop-duration);
	transition-timing-function: var(--rg-motion-state-easing), var(--rg-motion-reveal-easing), var(--rg-motion-pop-easing), var(--rg-motion-pop-easing);
	transition-delay: 0s;
}
:is([data-stage]:not([data-scenes]) [data-board], [data-scenes] [data-scene]) [data-i~='rp-card'][data-part][data-gone],
:is([data-stage]:not([data-scenes])[data-on] [data-board], [data-scenes] [data-scene][data-on]) [data-i~='rp-card'][data-part][data-run][data-gone] {
	opacity: 0;
}
:is([data-stage]:not([data-scenes])[data-on] [data-board], [data-scenes] [data-scene][data-on]) [data-i~='rp-card'][data-part][data-run][data-gone='out'] {
	translate: 0 8px;
	transition-duration: var(--rg-motion-exit-duration);
	transition-timing-function: var(--rg-motion-exit-easing);
}
:is([data-stage]:not([data-scenes]) [data-board], [data-scenes] [data-scene]) [data-i~='rp-card'][data-part][data-gone='in'],
:is([data-stage]:not([data-scenes])[data-on] [data-board], [data-scenes] [data-scene][data-on]) [data-i~='rp-card'][data-part][data-run][data-gone='in'] {
	scale: 0.94;
	transition-duration: 0s;
}
[data-i~='rp-found'] {
	display: flex;
	align-items: center;
	gap: 5px;
	width: auto;
	padding: 4px 9px;
	border-radius: 99px;
	background: rgb(246 246 244);
	font-size: 10px;
	line-height: 16px;
	color: rgb(11 11 11 / 0.6);
}
[data-i~='card'] > [data-i~='rp-found'] {
	width: auto;
}
[data-i~='rp-mark'] {
	display: flex;
	padding: 3.2px;
	border-radius: 2.7px;
	background: white;
	box-shadow: 0 0 0 0.9px rgb(249 249 249);
}
[data-i~='rp-mark'] img {
	width: 9.6px;
	height: 9.597px;
}
[data-i~='rp-more'] {
	font-size: 10px;
	color: rgb(100 100 100);
}
/* The answer's room: as tall as the answer standing in it — nothing while the card pops in, then
   expanding to the answer over the draw role. */
[data-i~='rp-body'] {
	overflow: clip;
}
:is([data-stage]:not([data-scenes])[data-on] [data-board], [data-scenes] [data-scene][data-on]) [data-i~='rp-card'] [data-i~='rp-body'][data-part] {
	transition-property: opacity, transform, height;
	transition-duration: var(--rg-motion-reveal-duration), var(--rg-motion-reveal-duration), var(--rg-motion-draw-duration);
	transition-timing-function: var(--rg-motion-reveal-easing), var(--rg-motion-reveal-easing), var(--rg-motion-draw-easing);
	transition-delay: calc(var(--rg-motion-hover-duration) + var(--rg-motion-reveal-duration) + var(--n, 0) * var(--rg-motion-reveal-stagger) * 2), calc(var(--rg-motion-hover-duration) + var(--rg-motion-reveal-duration) + var(--n, 0) * var(--rg-motion-reveal-stagger) * 2), 0s;
}
/* An answer: only the one standing shows. Its parts (`data-k`, in order) arrive one by one, two reveal
   staggers apart, rising a reveal's distance; going, they blur out together. */
/* The 16 under the chip is the answer's own, so a closed card hugs its chip. */
[data-i~='rp-case'] {
	display: none;
	flex-direction: column;
	gap: 20px;
	width: 100%;
	padding-top: 16px;
}
[data-i~='rp-case'][data-s] {
	display: flex;
}
[data-i~='rp-case'] [data-k] {
	opacity: 0;
	translate: 0 var(--rg-motion-reveal-distance);
	transition-property: opacity, translate, filter;
	transition-duration: var(--rg-motion-reveal-duration);
	transition-timing-function: var(--rg-motion-reveal-easing);
}
[data-i~='rp-case'][data-s='on'] [data-k] {
	opacity: 1;
	translate: 0 0;
}
[data-i~='rp-case'][data-s='on'] [data-k='1'] { transition-delay: calc(var(--rg-motion-reveal-stagger) * 2); }
[data-i~='rp-case'][data-s='on'] [data-k='2'] { transition-delay: calc(var(--rg-motion-reveal-stagger) * 4); }
[data-i~='rp-case'][data-s='on'] [data-k='3'] { transition-delay: calc(var(--rg-motion-reveal-stagger) * 6); }
[data-i~='rp-case'][data-s='on'] [data-k='4'] { transition-delay: calc(var(--rg-motion-reveal-stagger) * 8); }
[data-i~='rp-case'][data-s='on'] [data-k='5'] { transition-delay: calc(var(--rg-motion-reveal-stagger) * 10); }
[data-i~='rp-case'][data-s='on'] [data-k='6'] { transition-delay: calc(var(--rg-motion-reveal-stagger) * 12); }
[data-i~='rp-case'][data-s='out'] [data-k] {
	opacity: 0;
	translate: 0 0;
	filter: blur(var(--blur-xs));
	transition-delay: 0s;
}
[data-i~='rp-lead'] {
	font-size: 15px;
	line-height: 24px;
	letter-spacing: -0.3469px;
	color: rgb(11 11 11);
	white-space: normal;
}
/* Ranked bars (Risk's): each fill grows over the draw role once its row has come. */
[data-i~='rp-bars'] {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
[data-i~='rp-bar'] {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
[data-i~='rp-bar-head'] {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 12px;
	line-height: 18.6px;
	color: rgb(32 32 32);
}
[data-i~='rp-score'] {
	font-weight: 500;
}
[data-i~='rp-track'] {
	height: 8px;
	overflow: clip;
	border-radius: 4px;
	background: var(--color-slate-100);
}
[data-i~='rp-fill'] {
	width: 0;
	height: 8px;
	border-radius: 4px;
	background: var(--color-emerald-600);
	transition: width var(--rg-motion-draw-duration) var(--rg-motion-draw-easing);
}
[data-i~='rp-case'][data-s='on'] [data-i~='rp-fill'] {
	width: calc(var(--w) * 1%);
	transition-delay: calc(var(--k) * var(--rg-motion-reveal-stagger) * 2 + var(--rg-motion-reveal-duration) * 0.5);
}
/* To-dos: a box, the task, when — hairlines between; a done box fills emerald and its tick pops. */
[data-i~='rp-todos'] {
	display: flex;
	flex-direction: column;
}
[data-i~='rp-todo'] {
	display: grid;
	grid-template-columns: 16px 1fr auto;
	align-items: center;
	gap: 12px;
	padding: 12px 0;
	border-top: 0.5px solid var(--color-slate-200);
	font-size: 13px;
	line-height: 20px;
	color: var(--color-gray-900);
}
[data-i~='rp-box'] {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	border: 1px solid var(--color-slate-300);
	border-radius: 4px;
	background: white;
	font-size: 12px;
	color: white;
}
[data-i~='rp-done'] [data-i~='rp-box'] {
	border-color: var(--color-emerald-600);
	background: var(--color-emerald-600);
	scale: 0.4;
	transition: scale var(--rg-motion-pop-duration) var(--rg-motion-pop-easing);
}
[data-i~='rp-case'][data-s='on'] [data-i~='rp-done'] [data-i~='rp-box'] {
	scale: 1;
	transition-delay: calc(var(--rg-motion-reveal-stagger) * 2 + var(--rg-motion-reveal-duration));
}
[data-i~='rp-done'] [data-i~='rp-task'] {
	color: var(--color-gray-400);
	text-decoration: line-through;
}
[data-i~='rp-when'] {
	padding: 2px 8px;
	border-radius: 99px;
	background: var(--color-slate-100);
	font-size: 11px;
	line-height: 16px;
	color: var(--color-gray-500);
}
[data-i~='rp-when'][data-i~='rp-today'] {
	background: var(--color-emerald-50);
	color: var(--color-emerald-700);
}
/* A trend: the figure and its change, the caption, and the line drawn over the draw role on its plot,
   the area under it coming up as it does. */
[data-i~='rp-trend'] {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
[data-i~='rp-figure'] {
	display: flex;
	align-items: center;
	gap: 10px;
}
[data-i~='rp-value'] {
	font-size: 28px;
	line-height: 32px;
	font-weight: 600;
	letter-spacing: -0.8px;
	color: var(--color-gray-950);
}
[data-i~='rp-delta'] {
	display: flex;
	align-items: center;
	gap: 3px;
	width: max-content;
	padding: 2px 8px 2px 6px;
	border-radius: 99px;
	font-size: 11px;
	line-height: 16px;
	font-weight: 500;
}
[data-i~='rp-delta'] .icon {
	font-size: 14px;
}
[data-i~='rp-delta'][data-i~='rp-up'] {
	background: var(--color-emerald-50);
	color: var(--color-emerald-700);
}
[data-i~='rp-delta'][data-i~='rp-down'] {
	background: var(--color-rose-50);
	color: var(--color-rose-600);
}
[data-i~='rp-caption'] {
	margin-bottom: 12px;
	font-size: 12px;
	line-height: 18px;
	color: var(--color-gray-500);
}
[data-i~='rp-plot'] {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}
[data-i~='rp-grid'] {
	stroke: var(--color-slate-200);
	stroke-width: 0.5;
}
[data-i~='rp-area'] {
	fill: color-mix(in oklab, var(--color-emerald-500) 10%, transparent);
	opacity: 0;
	transition: opacity var(--rg-motion-draw-duration) var(--rg-motion-draw-easing);
}
[data-i~='rp-line'] {
	fill: none;
	stroke: var(--color-emerald-600);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	transition: stroke-dashoffset var(--rg-motion-draw-duration) var(--rg-motion-draw-easing);
}
[data-i~='rp-dot'] {
	fill: white;
	stroke: var(--color-emerald-600);
	stroke-width: 2;
	opacity: 0;
	transition: opacity var(--rg-motion-state-duration) var(--rg-motion-state-easing);
}
[data-i~='rp-case'][data-s='on'] :is([data-i~='rp-area'], [data-i~='rp-line'], [data-i~='rp-dot']) {
	transition-delay: calc(var(--rg-motion-reveal-stagger) * 2 + var(--rg-motion-reveal-duration));
}
[data-i~='rp-case'][data-s='on'] [data-i~='rp-area'] {
	opacity: 1;
}
[data-i~='rp-case'][data-s='on'] [data-i~='rp-line'] {
	stroke-dashoffset: 0;
}
[data-i~='rp-case'][data-s='on'] [data-i~='rp-dot'] {
	opacity: 1;
	transition-delay: calc(var(--rg-motion-reveal-stagger) * 2 + var(--rg-motion-reveal-duration) + var(--rg-motion-draw-duration));
}
[data-i~='rp-weeks'] {
	display: flex;
	justify-content: space-between;
	padding-top: 6px;
	font-size: 10px;
	line-height: 14px;
	color: var(--color-gray-400);
}
/* A quarter's figures: four tiles, two across. */
[data-i~='rp-tiles'] {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}
[data-i~='rp-tile'] {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 12px 14px 14px;
	border: 0.5px solid var(--color-slate-200);
	border-radius: 8px;
	background: rgb(255 255 255 / 0.6);
}
[data-i~='rp-tile-label'] {
	font-size: 11px;
	line-height: 16px;
	color: var(--color-gray-500);
}
[data-i~='rp-tile-value'] {
	font-size: 22px;
	line-height: 28px;
	font-weight: 600;
	letter-spacing: -0.6px;
	color: var(--color-gray-950);
}
/* The pipeline by stage: one bar, each stage's share growing in turn, and the legend under it. */
[data-i~='rp-stack'] {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
[data-i~='rp-stack-bar'] {
	display: flex;
	gap: 2px;
	height: 12px;
}
[data-i~='rp-seg'] {
	flex: none;
	width: 0;
	height: 12px;
	border-radius: 3px;
	transition: width var(--rg-motion-draw-duration) var(--rg-motion-draw-easing);
}
[data-i~='rp-case'][data-s='on'] [data-i~='rp-seg'] {
	width: calc((100% - 8px) * var(--w) / 100);
	transition-delay: calc(var(--rg-motion-reveal-stagger) * 2 + var(--rg-motion-reveal-duration) + var(--j) * var(--rg-motion-reveal-stagger) * 2);
}
[data-i~='rp-s1'] { background: var(--color-emerald-700); }
[data-i~='rp-s2'] { background: var(--color-emerald-500); }
[data-i~='rp-s3'] { background: var(--color-sky-500); }
[data-i~='rp-s4'] { background: var(--color-sky-300); }
[data-i~='rp-s5'] { background: var(--color-slate-300); }
[data-i~='rp-legend'] {
	display: flex;
	flex-direction: column;
}
[data-i~='rp-legend-row'] {
	display: grid;
	grid-template-columns: 8px 1fr auto 64px;
	align-items: center;
	gap: 10px;
	padding: 7px 0;
	border-top: 0.5px solid var(--color-slate-200);
	font-size: 12px;
	line-height: 18px;
}
[data-i~='rp-swatch'] {
	width: 8px;
	height: 8px;
	border-radius: 2px;
}
[data-i~='rp-stage'] {
	color: var(--color-gray-700);
}
[data-i~='rp-deals'] {
	color: var(--color-gray-400);
}
[data-i~='rp-sum'] {
	text-align: right;
	font-weight: 500;
	color: var(--color-gray-950);
}
/* A drafted email: who it goes to, the subject, the words, and the button that sends it. */
[data-i~='rp-mail'] {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 14px 16px 16px;
	border: 0.5px solid var(--color-slate-200);
	border-radius: 10px;
	background: rgb(255 255 255 / 0.7);
}
[data-i~='rp-mail-to'] {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	line-height: 18px;
}
[data-i~='rp-mail-cap'] {
	color: var(--color-gray-400);
}
[data-i~='rp-person'] {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 2px 8px 2px 2px;
	border-radius: 99px;
	background: var(--color-slate-100);
	color: var(--color-gray-900);
}
[data-i~='rp-person'] img {
	width: 18px;
	height: 18px;
	border-radius: 99px;
	object-fit: cover;
	object-position: 50% 20%;
}
[data-i~='rp-mail-subject'] {
	padding-top: 10px;
	border-top: 0.5px solid var(--color-slate-200);
	font-size: 13px;
	line-height: 20px;
	font-weight: 600;
	color: var(--color-gray-950);
}
[data-i~='rp-mail-body'] {
	font-size: 12.5px;
	line-height: 20px;
	color: var(--color-gray-700);
	white-space: normal;
}
[data-i~='rp-mail-foot'] {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-top: 4px;
	font-size: 11px;
	line-height: 16px;
}
[data-i~='rp-send'] {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 5px 10px 5px 12px;
	border-radius: 99px;
	background: var(--color-slate-900);
	font-weight: 500;
	color: white;
}
[data-i~='rp-send'] .icon {
	font-size: 13px;
}
[data-i~='rp-edit'] {
	color: var(--color-gray-500);
}
[data-i~='rp-fade'] {
	height: 108px;
}

/* Fanout — every AI tool, wired to one client's record (920:6714). The frame rings the tiles in
   Kora's orange and purple; here they take the brand's two, emerald outside and sky in. */
[data-i~='fan-tile'] {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	overflow: clip;
	border: 0.5px solid var(--color-emerald-500);
	border-radius: 4px;
	background: linear-gradient(to bottom, rgb(255 255 255 / 0.98), white);
	box-shadow: 0 0 30px 0 rgb(0 0 0 / 0.12);
}
[data-i~='fan-tile'][data-i~='in'] {
	border-color: var(--color-sky-500);
}
[data-i~='fan-tile'] img {
	width: 22.4px;
	height: 22.4px;
}
[data-i~='fan-tile'][data-i~='b'] img {
	width: 24px;
	height: 24px;
}
[data-i~='fan-tile'][data-i~='c'] img {
	width: 32px;
	height: 32px;
}
[data-i~='fan-tile'][data-i~='d'] img {
	width: 25.6px;
	height: 25.6px;
}
[data-i~='fan-tile'][data-i~='a'] {
	top: 60px;
	left: 48px;
}
[data-i~='fan-tile'][data-i~='b'] {
	top: 60px;
	left: 480px;
}
[data-i~='fan-tile'][data-i~='c'] {
	top: 124px;
	left: 176px;
}
[data-i~='fan-tile'][data-i~='d'] {
	top: 124px;
	left: 352px;
}
/* The wires: each tile's stem drops, the four bundle into one, and the one runs into the record —
   the frame's path, in the kit's wire colours, with the kit's shimmer passing along it. */
[data-i~='fan-wires'] {
	position: absolute;
	top: 0;
	left: 0;
	width: 600px;
	height: 700px;
}
[data-i~='fan-wires'] svg {
	display: block;
	width: 600px;
	height: 700px;
	overflow: visible;
	fill: none;
	stroke-width: 1.2;
	stroke-linecap: round;
}
[data-i~='fan-wires'] [data-i~='fan-line'] {
	stroke: var(--color-emerald-400);
}
[data-i~='fan-wires'] [data-i~='fan-shine'] {
	stroke: var(--color-sky-500);
	stroke-dasharray: 90 700;
	animation: fan-shine var(--rg-motion-highlight-loop) linear infinite;
}
@keyframes fan-shine {
	from {
		stroke-dashoffset: 790;
	}
	to {
		stroke-dashoffset: 0;
	}
}
@media (prefers-reduced-motion: reduce) {
	[data-i~='fan-wires'] [data-i~='fan-shine'] {
		animation: none;
		opacity: 0;
	}
}
/* The record the wires run into: the frame's 408 column, centred, running off the foot. */
[data-i~='card'][data-i~='fan-card'] {
	top: 320px;
	left: 50%;
	translate: -50% 0;
	width: 408px;
	height: 401px;
	box-shadow: 0 -12px 40px 0 rgb(0 0 0 / 0.1);
}
[data-i~='fan-head'] {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 20px 20px 20.5px;
	background: var(--glass-band);
	border-bottom: 0.5px solid var(--color-neutral-200);
}
[data-i~='fan-who'] {
	position: relative;
	flex: none;
	width: 48px;
	height: 48px;
}
[data-i~='fan-who'] [data-i~='avatar'] {
	width: 48px;
	height: 48px;
}
[data-i~='fan-who'] > img {
	position: absolute;
	top: 26.43px;
	left: 36.45px;
	width: 21.6px;
	height: 21.6px;
}
[data-i~='fan-names'] {
	gap: 8px;
}
[data-i~='fan-name'] {
	font-weight: 500;
	font-size: 18px;
	line-height: 20px;
	color: rgb(28 32 36);
}
[data-i~='fan-role'] {
	font-size: 11.68px;
	line-height: 16.077px;
	color: rgb(146 146 146);
}
[data-i~='fan-row'] {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 20px;
	border-bottom: 1px solid var(--color-neutral-100);
}
[data-i~='fan-box'] {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	overflow: clip;
	border: 0.902px solid var(--color-neutral-200);
	background: white;
}
[data-i~='fan-box'] img {
	width: 21px;
	height: 16px;
}
[data-i~='fan-box'] [data-i~='fan-cal'] {
	width: 20px;
	height: 20px;
}
[data-i~='fan-box'] [data-i~='fan-out'] {
	width: 21.775px;
	height: 21.775px;
}
[data-i~='fan-words'] {
	display: flex;
	flex: 1 0 0rem;
	min-width: 1px;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
}
[data-i~='fan-title'] {
	font-weight: 500;
	font-size: 14px;
	line-height: normal;
	color: rgb(22 25 36);
}
[data-i~='fan-meta'] {
	font-size: 11px;
	line-height: 16.077px;
	color: var(--color-neutral-500);
}
[data-i~='fan-fade'] {
	height: 173px;
}

/* ─── The glyph tile (D-0216) ──────────────────────────────────────────────────
 * <GlyphTile>: the artwork is a silhouette, worn as a mask over the brand gradient, so the tile's
 * colour comes from the tokens and never from the file. */
[data-c='glyph'] {
	mask-image: var(--glyph);
	mask-size: contain;
	mask-position: center;
	mask-repeat: no-repeat;
}

/* ─── See it in action (D-0215) ────────────────────────────────────────────────
 * The answer card in SignalBand.astro (Landing Pages Figma 920:6375): the tools that can ask, one
 * answer from the MCP server, and the engagement index behind it — a control, not a picture. The
 * frame's measures; the colours are the brand's ramp, where the frame uses Kora's. */
[data-c='sig-tools'] {
	position: relative;
	z-index: 1;
	/* D-0393: it stands 16 clear above the card, no longer straddling its top edge. */
	margin-bottom: var(--spacing-4);
	padding: 4px 10px;
	border: 0.5px solid var(--rg-color-border-subtle);
	border-radius: var(--radius-full);
	background: color-mix(in oklab, var(--rg-color-bg-surface) 80%, transparent);
	box-shadow: var(--shadow-xs);
	-webkit-backdrop-filter: blur(var(--blur-md));
	backdrop-filter: blur(var(--blur-md));
}
[data-c='sig-tools'] img {
	display: block;
}
[data-c='sig-card'] {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 36px;
	overflow: clip;
	padding: 28px;
	border: 2px solid var(--color-neutral-100);
	border-radius: 4px 4px 0 0;
	background: linear-gradient(to bottom, var(--rg-color-bg-surface), color-mix(in oklab, var(--rg-color-bg-surface) 30%, transparent));
	box-shadow: 0 12px 32px 0 rgb(0 0 0 / 0.08);
	-webkit-backdrop-filter: blur(var(--blur-2xl));
	backdrop-filter: blur(var(--blur-2xl));
	font-family: Inter, sans-serif;
	color: var(--color-neutral-950);
}
[data-c='sig-ask'] {
	padding: 6px 12px;
	border-radius: 8.881px;
	/* D-0394: gray-100 (#F3F4F6), whole. */
	background: var(--color-gray-100);
	font-size: 13px;
	line-height: 20px;
	letter-spacing: -0.3469px;
}
[data-c='sig-answer'] {
	display: flex;
	width: 100%;
	flex-direction: column;
	align-items: flex-start;
	gap: 28px;
}
[data-c='sig-found'] {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 4px 9px;
	border-radius: var(--radius-full);
	/* D-0395: #F6F6F4 asked → gray-100, the nearest step (ΔE 0.8). */
	background: var(--color-gray-100);
	font-size: 10px;
	line-height: 16px;
	color: color-mix(in oklab, var(--color-neutral-950) 60%, transparent);
}
[data-c='sig-mark'] {
	display: flex;
	padding: 3.2px;
	border-radius: 2.7px;
	background: var(--rg-color-bg-surface);
	box-shadow: 0 0 0 0.9px var(--color-neutral-50);
}
[data-c='sig-lead'] {
	font-size: 13px;
	line-height: 20px;
	letter-spacing: -0.3469px;
}
[data-c='sig-signals'] {
	display: flex;
	width: 100%;
	flex-direction: column;
	gap: 2px;
}
[data-c='sig-title'] {
	font-weight: 500;
	font-size: 13px;
	line-height: 22px;
	letter-spacing: -0.3469px;
}
[data-c='sig-list'] {
	margin: 0;
	padding: 0 0 0 20px;
	list-style: disc;
}
[data-c='sig-list'] li::marker {
	color: color-mix(in oklab, var(--color-neutral-950) 45%, transparent);
}
[data-c='sig-list'] button {
	/* Inline, not a flex row: the marker trails the last word of the signal even when it wraps. */
	display: inline;
	text-align: left;
	font-size: 13px;
	line-height: 22px;
	letter-spacing: -0.3469px;
	color: color-mix(in oklab, var(--color-neutral-950) 72%, transparent);
	cursor: pointer;
	transition:
		color var(--rg-motion-hover-duration) var(--rg-motion-hover-easing),
		opacity var(--rg-motion-hover-duration) var(--rg-motion-hover-easing);
}
[data-c='sig-list'] button:hover,
[data-c='sig-list'] button[aria-pressed='true'] {
	color: var(--color-neutral-950);
}
[data-c='sig-n'] {
	display: inline-block;
	margin-left: 6px;
	padding: 0 5px;
	border-radius: var(--radius-xs);
	background: var(--color-neutral-100);
	font-size: 9px;
	line-height: 16px;
	transition: background var(--rg-motion-hover-duration) var(--rg-motion-hover-easing);
}
[aria-pressed='true'] > [data-c='sig-n'] {
	background: var(--color-emerald-100);
	color: var(--color-emerald-800);
}
[data-c='sig-chart'] {
	display: flex;
	width: 100%;
	flex-direction: column;
	gap: 16px;
}
[data-c='sig-index'] {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	font-weight: 500;
	font-size: 13px;
	line-height: 20px;
	letter-spacing: -0.3469px;
}
[data-c='sig-change'] {
	font-weight: 400;
}
[data-c='sig-plane'] {
	position: relative;
	width: 100%;
	aspect-ratio: 522 / 148;
}
[data-c='sig-plane'] svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}
[data-c='sig-rules'] line {
	stroke: var(--color-neutral-200);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}
[data-c='sig-base'],
[data-c='sig-lit'] {
	stroke: var(--color-emerald-600);
	vector-effect: non-scaling-stroke;
	stroke-linecap: round;
	stroke-linejoin: round;
}
[data-c='sig-base'] {
	stroke-width: 1.5;
	opacity: 0.3;
}
[data-c='sig-lit'] {
	stroke-width: 2;
}
[data-c='sig-dot'] {
	fill: var(--rg-color-bg-surface);
	stroke: var(--color-emerald-600);
	stroke-width: 1.5;
	vector-effect: non-scaling-stroke;
	opacity: 0.5;
	transition:
		opacity var(--rg-motion-state-duration) var(--rg-motion-state-easing),
		r var(--rg-motion-state-duration) var(--rg-motion-state-easing),
		fill var(--rg-motion-state-duration) var(--rg-motion-state-easing);
}
[data-c='sig-dot'][data-on] {
	fill: var(--color-emerald-600);
	opacity: 1;
	r: 4.5;
}
[data-c='sig-axis'],
[data-c='sig-weeks'] {
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 9.862px;
	line-height: 12px;
	color: var(--color-neutral-500);
}
[data-c='sig-axis'] li {
	position: absolute;
	left: 0;
	width: 22px;
	translate: 0 -50%;
	text-align: right;
}
[data-c='sig-weeks'] li {
	position: absolute;
	bottom: -4px;
	translate: -50% 0;
}
[data-c='sig-read'] {
	flex: none;
	font-weight: 500;
	font-size: 11px;
	line-height: 16px;
	color: var(--color-emerald-700);
}
/* The card melts into the section at its foot, as the frame's 162 fade has it. */
[data-c='sig-foot'] {
	position: absolute;
	right: 0;
	/* D-0404: it runs 48 past the card's foot and is whole from 70%, so the card's shadow (12 down, 32 blur)
	   melts with it instead of drawing an edge below the fade. */
	bottom: -48px;
	left: 0;
	height: 168px;
	background: linear-gradient(to bottom, transparent, var(--rg-color-bg-subtle) 70%);
	pointer-events: none;
}

/* ── Context Capture (D-0219): the feature section's Timeline and Rules, ported from Landing Pages
   Figma 987:10867 and 987:10941. Every measure below is the frame's. */

/* Timeline — the client's activity, captured as it happens (987:10867). The frame's 530 card stands
   at 80, its rows 968 wide and their cards 1300: it runs off the right, into the ground. */
[data-i~='card'][data-i~='line-card'] {
	top: 80px;
	left: 80px;
	width: 530px;
	height: 630px;
	box-shadow: 0 -16px 40px 0 rgb(0 0 0 / var(--shade));
}
[data-i~='line-card'] [data-i~='head-title'] {
	flex: none;
	color: rgb(32 32 32);
}
[data-i~='line-row'] {
	display: flex;
	align-items: stretch;
	gap: 12px;
	width: 968px;
	padding: 0 20px;
	overflow: clip;
}
[data-i~='line-card'] > [data-i~='line-row'] {
	width: 968px;
}
[data-i~='line-row'][data-i~='first'] {
	padding-top: 20px;
}
[data-i~='line-rail'] {
	display: flex;
	flex: none;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}
[data-i~='line-rail']::after {
	content: '';
	flex: 1 0 0rem;
	width: 1px;
	min-height: 1px;
	border-radius: 99px;
	background: var(--color-gray-100);
}
[data-i~='line-mark'] {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 4px;
	font-size: 16px;
}
[data-i~='line-mark'][data-i~='sky'] {
	background: var(--color-sky-100);
	color: var(--color-sky-600);
}
[data-i~='line-mark'][data-i~='emerald'] {
	background: var(--color-emerald-50);
	color: var(--color-emerald-900);
}
[data-i~='line-mark'][data-i~='gray'] {
	background: var(--color-gray-100);
	color: var(--color-gray-800);
}
[data-i~='line-mark'][data-i~='orange'] {
	background: var(--color-orange-50);
	color: var(--color-orange-800);
}
[data-i~='line-body'] {
	display: flex;
	flex: 1 0 0rem;
	min-width: 1px;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 12px;
	padding-bottom: 36px;
}
[data-i~='line-body'][data-i~='tight'] {
	gap: 8px;
}
[data-i~='line-title'] {
	font-weight: 500;
	font-size: 14px;
	line-height: 24px;
	letter-spacing: 0.04px;
	color: var(--color-gray-950);
}
[data-i~='line-note'] {
	font-size: 14px;
	line-height: 25px;
	color: var(--color-gray-700);
}
[data-i~='line-item'] {
	display: flex;
	align-items: stretch;
	gap: 8px;
	width: 1300px;
	padding: 8px;
	overflow: clip;
	border: 1px solid var(--color-gray-100);
	border-radius: 4px;
	background: white;
}
[data-i~='line-item']::before {
	content: '';
	flex: none;
	width: 3px;
	border-radius: 99px;
	background: var(--color-sky-600);
}
[data-i~='line-item'][data-i~='meet']::before {
	background: var(--color-emerald-700);
}
[data-i~='line-head'] {
	display: flex;
	flex: 1 0 0rem;
	min-width: 1px;
	flex-direction: column;
	align-items: flex-start;
}
[data-i~='line-subject'] {
	font-weight: 500;
	font-size: 12px;
	line-height: 25px;
	color: rgb(32 32 32);
}
[data-i~='line-pill'] {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 500;
	font-size: 12px;
	line-height: 19px;
	letter-spacing: 0.04px;
	color: rgb(0 0 0 / 0.49);
}
[data-i~='line-pill'] [data-i~='line-to'] {
	font-size: 16px;
	line-height: 16px;
}
[data-i~='line-pill'] [data-i~='line-more'] {
	margin-left: -4px;
}
/* The card runs out of sight to the right, into the ground, as the frame's 184 edge has it. */
[data-i~='line-edge'] {
	position: absolute;
	top: 0;
	right: 0;
	width: 184px;
	height: 700px;
	background: linear-gradient(to right, transparent, var(--ground));
	pointer-events: none;
}
[data-i~='line-fade'] {
	height: 257px;
}

/* ── Stream (D-0332): one client's interactions on a timeline that keeps moving up as each new one
   lands at its foot — the Timeline's structure (a rail of marks, a title, a card), the source's logo as
   the mark, and a card of its own for every kind of interaction. */
[data-i~='sm-feed'] {
	position: absolute;
	inset: 0;
}
/* The track stands on its foot (140 up, clear of the fade's thickest part): an entry opening at the
   bottom lifts everything above it, and the oldest run up under the top fade and off the board. */
[data-i~='sm-track'] {
	position: absolute;
	left: 52px;
	right: 44px;
	bottom: 140px;
	display: flex;
	flex-direction: column;
}
/* An entry opens from nothing: its row grows from 0 to its own height. */
[data-i~='sm-entry'] {
	display: grid;
	grid-template-rows: 1fr;
}
[data-i~='sm-inner'] {
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr);
	column-gap: 14px;
	min-height: 0;
	padding-bottom: 28px;
	overflow: clip;
	overflow-clip-margin: 24px;
}
[data-i~='sm-rail'] {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}
/* The rail runs on down from each mark to the next, as the Timeline's does. */
[data-i~='sm-rail']::after {
	content: '';
	flex: 1 0 0rem;
	width: 1px;
	margin-bottom: -28px;
	background: var(--color-slate-200);
	transform-origin: top;
}
[data-i~='sm-mark'] {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border: 0.5px solid var(--color-slate-200);
	border-radius: 4px;
	background: white;
	box-shadow: 0 2px 8px 0 rgb(0 0 0 / var(--shade));
}
[data-i~='sm-mark'] img {
	width: 16px;
	height: 16px;
	object-fit: contain;
}
[data-i~='sm-mark'] img[data-i~='sm-wide'] {
	width: 20px;
}
[data-i~='sm-body'] {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}
[data-i~='sm-head'] {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 28px;
}
[data-i~='sm-title'] {
	flex: 1 0 0rem;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	color: var(--color-gray-950);
}
[data-i~='sm-when'] {
	flex: none;
	font-size: 12px;
	line-height: 16px;
	color: var(--color-slate-400);
	transition-property: opacity, filter;
	transition-duration: var(--rg-motion-reveal-duration);
	transition-timing-function: var(--rg-motion-state-easing);
}
[data-i~='sm-when'][data-out] {
	opacity: 0;
	filter: blur(var(--blur-sm));
}

/* The cards: white, a hairline, the kit's corners and a soft shadow; what each holds is its own. */
[data-i~='sm-card'] {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 8px;
	padding: 12px 14px;
	border: 1px solid var(--color-gray-100);
	border-radius: 4px;
	background: white;
	box-shadow: 0 12px 24px -12px rgb(0 0 0 / calc(var(--shade) * 2));
}
[data-i~='sm-line'] {
	display: flex;
	align-items: center;
	gap: 10px;
}
[data-i~='sm-rule'] {
	padding-top: 10px;
	border-top: 1px solid var(--color-gray-100);
}
[data-i~='sm-subject'] {
	font-weight: 500;
	font-size: 13px;
	line-height: 18px;
	color: rgb(32 32 32);
}
[data-i~='sm-meta'] {
	font-size: 12px;
	line-height: 16px;
	color: var(--color-slate-500);
}
[data-i~='sm-arrow'] {
	font-size: 16px;
	line-height: 16px;
	color: var(--color-slate-400);
}
[data-i~='sm-tag'] {
	flex: none;
	margin-left: auto;
	padding: 3px 6px;
	border-radius: 3.333px;
	background: rgb(0 196 111 / 0.12);
	font-weight: 500;
	font-size: 11px;
	line-height: 14px;
	color: rgb(0 91 60 / 0.84);
}
[data-i~='sm-tag'][data-i~='sky'] {
	background: var(--color-sky-100);
	color: var(--color-sky-800);
}
[data-i~='sm-tag'][data-i~='gray'] {
	background: var(--color-gray-100);
	color: var(--color-gray-700);
}
[data-i~='sm-who'] {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
[data-i~='sm-who'] > :first-child {
	font-weight: 500;
	font-size: 13px;
	line-height: 18px;
	color: var(--color-gray-950);
}
[data-i~='sm-who'] > :last-child {
	font-size: 12px;
	line-height: 16px;
	color: var(--color-slate-500);
}

/* The email: the Timeline's sky bar down its side, the route, and the line that mattered. */
[data-i~='sm-mail'] {
	padding-left: 22px;
}
[data-i~='sm-mail']::before {
	content: '';
	position: absolute;
	top: 12px;
	bottom: 12px;
	left: 10px;
	width: 3px;
	border-radius: 99px;
	background: var(--color-sky-600);
}
[data-i~='sm-route'] {
	display: flex;
	align-items: center;
	gap: 6px;
	font-weight: 500;
	font-size: 12px;
	line-height: 16px;
	color: rgb(0 0 0 / 0.49);
}
[data-i~='sm-more'] {
	margin-left: -2px;
}
[data-i~='sm-quote'] {
	font-size: 12px;
	line-height: 18px;
	color: var(--color-gray-700);
	white-space: normal;
}

/* The meeting: attended, who was there, and the meetings before it stacked under it. */
[data-i~='sm-meet']::before,
[data-i~='sm-meet']::after {
	content: '';
	position: absolute;
	top: 100%;
	border: 1px solid var(--color-gray-100);
	border-top: 0;
	border-radius: 0 0 4px 4px;
	background: white;
}
[data-i~='sm-meet']::after {
	left: 8px;
	right: 8px;
	height: 5px;
}
[data-i~='sm-meet']::before {
	left: 16px;
	right: 16px;
	height: 9px;
}
[data-i~='sm-attended'] {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 8px 3px 5px;
	border-radius: 99px;
	background: var(--color-emerald-50);
	font-weight: 500;
	font-size: 12px;
	line-height: 16px;
	color: var(--color-emerald-700);
}
[data-i~='sm-attended'] > :first-child {
	font-size: 14px;
	line-height: 14px;
}
[data-i~='sm-faces'] {
	display: flex;
	align-items: center;
	margin-left: auto;
}
[data-i~='sm-faces'] > * {
	width: 24px;
	height: 24px;
	margin-left: -6px;
	border: 2px solid white;
	border-radius: 99px;
	object-fit: cover;
	object-position: 50% 20%;
}
[data-i~='sm-plus'] {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-slate-100);
	font-weight: 500;
	font-size: 10px;
	color: var(--color-slate-600);
}

/* The call: its voice, played to where it mattered, and who joined. */
[data-i~='sm-play'] {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 99px;
	background: var(--color-sky-600);
	font-size: 16px;
	color: white;
}
/* D-0335: hairline bars, a pixel and a half wide, spread across the wave. */
[data-i~='sm-wave'] {
	display: flex;
	flex: 1 0 0rem;
	align-items: center;
	justify-content: space-between;
	min-width: 0;
	height: 22px;
	overflow: hidden;
}
[data-i~='sm-wave'] > span {
	flex: none;
	width: 1.5px;
	height: calc(var(--h) * 100%);
	border-radius: 99px;
	background: var(--color-slate-300);
}
[data-i~='sm-wave'] > span:nth-child(-n + 40) {
	background: linear-gradient(to bottom, var(--color-sky-500), var(--color-emerald-500));
}
[data-i~='sm-initials'] {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 99px;
	background: var(--color-orange-50);
	font-weight: 600;
	font-size: 11px;
	color: var(--color-orange-800);
}

/* The attachment: the file, and what changed in it. */
[data-i~='sm-doc'] {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 4px;
	background: var(--color-rose-50);
}
[data-i~='sm-doc'] img {
	width: 14px;
	height: 17px;
}
[data-i~='sm-chips'] {
	display: flex;
	gap: 6px;
	padding-left: 42px;
}
[data-i~='sm-chips'] > span {
	padding: 3px 8px;
	border: 1px solid var(--color-gray-200);
	border-radius: 99px;
	font-size: 11px;
	line-height: 14px;
	color: var(--color-gray-700);
}

/* The customer's words: the quote first, on a breath of the brand, and who said it. */
[data-i~='sm-said'] {
	gap: 10px;
	background: linear-gradient(to bottom right, var(--color-emerald-50), white 55%);
}
[data-i~='sm-words'] {
	font-size: 14px;
	line-height: 20px;
	color: var(--color-gray-900);
	white-space: normal;
}
[data-i~='sm-face'] {
	width: 22px;
	height: 22px;
	overflow: clip;
	border-radius: 99px;
}
[data-i~='sm-face'] img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 20%;
}

/* The CRM (D-0335): the record — its object and name — then the two fields that changed, side by side:
   the old value struck through, the new on a tint of success. */
[data-i~='sm-object'] {
	flex: none;
	padding: 2px 6px;
	border-radius: 3px;
	background: var(--color-sky-100);
	font-weight: 500;
	font-size: 11px;
	line-height: 14px;
	color: var(--color-sky-800);
}
[data-i~='sm-record'] {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	font-weight: 500;
	font-size: 13px;
	line-height: 18px;
	color: var(--color-gray-950);
}
[data-i~='sm-diff'] {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-top: 1px solid var(--color-gray-100);
}
[data-i~='sm-cell'] {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-top: 10px;
}
[data-i~='sm-cell'] + [data-i~='sm-cell'] {
	padding-left: 14px;
	border-left: 1px solid var(--color-gray-100);
}
[data-i~='sm-label'] {
	font-size: 11px;
	line-height: 14px;
	color: var(--color-slate-500);
}
[data-i~='sm-value'] {
	font-weight: 500;
	font-size: 12px;
	line-height: 18px;
	color: var(--color-gray-950);
}
[data-i~='sm-change'] {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	line-height: 18px;
}
[data-i~='sm-was'] {
	color: var(--color-slate-400);
	text-decoration: line-through;
}
[data-i~='sm-now'] {
	padding: 0 6px;
	border-radius: 3px;
	background: var(--color-emerald-50);
	font-weight: 500;
	color: var(--color-emerald-800);
}

/* The facts (D-0335): linked to the record, each marked by one of the brand's own square cells in its
   kind's colour, its kind quiet and its fact plain. */
[data-i~='sm-facts'] {
	gap: 0;
}
[data-i~='sm-facts'] > [data-i~='sm-line'] {
	gap: 6px;
	padding-bottom: 8px;
}
[data-i~='sm-link'] {
	font-size: 14px;
	line-height: 14px;
	color: var(--color-slate-400);
}
[data-i~='sm-fact'] {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 0;
	border-top: 1px solid var(--color-gray-100);
}
[data-i~='sm-fact'] [data-i~='sm-label'] {
	flex: none;
	width: 48px;
}
[data-i~='sm-dot'] {
	flex: none;
	width: 6px;
	height: 6px;
	border-radius: 1px;
}
[data-i~='sm-dot'][data-i~='rose'] {
	background: var(--color-rose-500);
}
[data-i~='sm-dot'][data-i~='sky'] {
	background: var(--color-sky-500);
}
[data-i~='sm-dot'][data-i~='emerald'] {
	background: var(--color-emerald-500);
}

/* The arrival, in the roles (D-0332). The waiting state holds no transition (D-0298), so it is taken
   at once; then the row opens over the highlight's arrival on the reveal curve and the timeline
   glides up; halfway, the logo pops; the title rises in; the card comes a double stagger later, and
   what it holds a reveal after it, one by one; the rail draws on down as the card lands. */
[data-i~='sm-entry'][data-s='wait'] {
	grid-template-rows: 0fr;
}
[data-i~='sm-entry'][data-s='wait'] * {
	transition: none;
}
[data-i~='sm-entry'][data-s='wait'] [data-i~='sm-mark'] {
	opacity: 0;
	scale: 0;
}
[data-i~='sm-entry'][data-s='wait'] [data-i~='sm-head'],
[data-i~='sm-entry'][data-s='wait'] [data-i~='sm-card'],
[data-i~='sm-entry'][data-s='wait'] [data-i~='sm-card'] > * {
	opacity: 0;
	transform: translateY(var(--rg-motion-reveal-distance));
}
[data-i~='sm-entry'][data-s='wait'] [data-i~='sm-rail']::after {
	transform: scaleY(0);
}
[data-i~='sm-entry'][data-s='on'] {
	--sm-at: calc(var(--rg-motion-highlight-arrive) / 2);
	--sm-card: calc(var(--sm-at) + var(--rg-motion-pop-duration) + var(--rg-motion-reveal-stagger) * 4);
	transition: grid-template-rows var(--rg-motion-highlight-arrive) var(--rg-motion-reveal-easing);
}
[data-i~='sm-entry'][data-s='on'] [data-i~='sm-mark'] {
	transition:
		scale var(--rg-motion-pop-duration) var(--rg-motion-pop-easing) var(--sm-at),
		opacity var(--rg-motion-state-duration) var(--rg-motion-state-easing) var(--sm-at);
}
[data-i~='sm-entry'][data-s='on'] [data-i~='sm-head'] {
	transition-property: opacity, transform;
	transition-duration: var(--rg-motion-reveal-duration);
	transition-timing-function: var(--rg-motion-reveal-easing);
	transition-delay: calc(var(--sm-at) + var(--rg-motion-pop-duration) / 2);
}
[data-i~='sm-entry'][data-s='on'] [data-i~='sm-card'] {
	transition-property: opacity, transform;
	transition-duration: var(--rg-motion-reveal-duration);
	transition-timing-function: var(--rg-motion-reveal-easing);
	transition-delay: var(--sm-card);
}
[data-i~='sm-entry'][data-s='on'] [data-i~='sm-card'] > * {
	transition-property: opacity, transform;
	transition-duration: var(--rg-motion-reveal-duration);
	transition-timing-function: var(--rg-motion-reveal-easing);
	transition-delay: calc(var(--sm-card) + var(--rg-motion-reveal-duration) / 2 + var(--k, 0) * var(--rg-motion-reveal-stagger) * 2);
}
[data-i~='sm-entry'][data-s='on'] [data-i~='sm-rail']::after {
	transition: transform var(--rg-motion-draw-duration) var(--rg-motion-draw-easing) var(--sm-card);
}
[data-i~='sm-top'] {
	height: 200px;
}
[data-i~='sm-fade'] {
	height: 220px;
}

/* ── The detection card's piece of Stream (D-0347): one entry of the timeline — the mark, the title and
   its age, the card of its kind — in RelationshipOS's stacked card on the Motion page, at the
   artwork's own measures, not on a board. The piece gives the entry the board's text and shade; its
   inner grid has no foot and the rail no line on, there being no next mark. */
[data-i~='dc-piece'] {
	--shade: 0.06;
	display: grid;
	font-family: Inter, sans-serif;
	font-size: 12px;
	line-height: 16px;
	letter-spacing: 0;
	font-weight: 400;
	color: rgb(28 32 36);
	text-align: left;
	white-space: nowrap;
}
[data-i~='dc-piece'] img {
	display: block;
	max-width: none;
	flex: none;
}
[data-i~='dc-piece'] p {
	margin: 0;
}
[data-i~='dc-piece'] > [data-i~='sm-entry'] {
	grid-area: 1 / 1;
}
[data-i~='dc-piece'] > [data-i~='sm-entry'][hidden] {
	display: none;
}
[data-i~='dc-inner'] {
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr);
	column-gap: 14px;
	min-height: 0;
	padding-bottom: 12px;
	overflow: clip;
	overflow-clip-margin: 24px;
}
[data-i~='dc-piece'] [data-i~='sm-rail']::after {
	content: none;
}
/* Narrower than Stream's track, a name that will not fit ends in an ellipsis rather than running under its tag. */
[data-i~='dc-piece'] [data-i~='sm-who'] > * {
	overflow: hidden;
	text-overflow: ellipsis;
}
/* D-0348: no card inside the card — the entry's contents sit in the stacked card itself: no box, no
   hairline, no shadow, no ground of its own, and no meetings stacked under the meeting. The email's
   sky bar stands at the entry's left edge; the rest keeps its own layout. */
[data-i~='dc-piece'] [data-i~='sm-card'] {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}
[data-i~='dc-piece'] [data-i~='sm-mail'] {
	padding-left: 13px;
}
[data-i~='dc-piece'] [data-i~='sm-mail']::before {
	top: 0;
	bottom: 0;
	left: 0;
}
[data-i~='dc-piece'] [data-i~='sm-meet']::before,
[data-i~='dc-piece'] [data-i~='sm-meet']::after {
	content: none;
}

/* D-0493: the stack's run-off is a layer over it, from 70% of its width clear to the section's subtle ground at 98%. */
[data-dc-fade] {
	background: linear-gradient(to right, transparent 70%, var(--rg-color-bg-subtle) 98%);
}

/* D-0492: on the detection card her pill ends at its outer (orange) ring — without the kit's last ring of the ground
   beyond it (12 out, D-0147), which over the card's halftone read as one band too many. */
[data-detection] [data-i~='status'][data-i~='kora'] {
	box-shadow:
		0 0 0 3.5px var(--ground),
		0 0 0 4px var(--rg-kora-mark-base),
		0 0 0 7.5px var(--ground),
		0 0 0 8px var(--rg-kora-mark-spark),
		0 16px 28px 0 rgb(0 0 0 / var(--shade));
}

/* D-0479: Kora's pill on the detection card comes in whole — at its full width, her mark and name in it — fading in,
   rather than popping as a disc and growing; only her words are written after. The words' box keeps the room
   for the longer of her two lines (`data-full`, unseen), so the pill never changes width as she writes. */
[data-detection] [data-i~='dc-status'][data-s='wait'] {
	scale: 1;
}
[data-detection] [data-i~='dc-status'][data-s='wait'] [data-i~='dc-words'] {
	grid-template-columns: 1fr;
}
[data-detection] [data-i~='dc-status'][data-s='wait'] [data-i~='dc-text'] {
	opacity: 1;
	scale: 1;
}
[data-detection] [data-i~='dc-status'][data-s='on'] {
	transition: opacity var(--rg-motion-reveal-duration) var(--rg-motion-reveal-easing);
}
[data-detection] [data-i~='dc-say'] {
	display: inline-grid;
}
[data-detection] [data-i~='dc-say'] > *,
[data-detection] [data-i~='dc-say']::after {
	grid-area: 1 / 1;
}
[data-detection] [data-i~='dc-say']::after {
	content: attr(data-full);
	visibility: hidden;
}

/* D-0485: the detection card's spacing says what is read together — a little more room than before, and not one even
   gap. The title and its age stand 14 above the activity's card; in the card, what belongs together sits 4 apart (a
   subject and who it went to or when it is, one fact and the next), each thing of its own 12 apart, and Kora's line
   on what she did with it 16 below the rest. (The `[data-detection]` lead outranks the piece's p reset.) */
[data-detection] [data-i~='dc-piece'] [data-i~='sm-body'] {
	gap: 14px;
}
[data-detection] [data-i~='dc-piece'] [data-i~='sm-card'] {
	gap: 4px;
}
[data-detection] [data-i~='dc-piece'] [data-i~='sm-card'] > * + * {
	margin-top: 8px;
}
[data-detection] [data-i~='dc-piece'] [data-i~='sm-card'] > [data-i~='sm-subject'] + :is([data-i~='sm-route'], [data-i~='sm-meta']),
[data-detection] [data-i~='dc-piece'] [data-i~='sm-card'] > [data-i~='sm-fact'] + [data-i~='sm-fact'] {
	margin-top: 0;
}
[data-detection] [data-i~='dc-piece'] [data-i~='sm-card'] > [data-i~='dc-copy'] {
	margin-top: 12px;
}

/* D-0480, D-0482: the card is the size of the activity shown; the others are not laid out. */
[data-i~='dc-piece'] > [data-i~='sm-entry']:not([data-shown]) {
	display: none;
}
/* D-0498: on the detection card her pill's shine goes round once, at the kit's speed (half its two turns' time). */
@keyframes dc-shine {
	0% {
		--kora-turn: 0deg;
		opacity: 0;
	}
	15% {
		opacity: 1;
	}
	85% {
		opacity: 1;
	}
	100% {
		--kora-turn: 360deg;
		opacity: 0;
	}
}
[data-detection] [data-i~='status'][data-i~='kora'][data-shine]::before {
	animation: dc-shine calc(var(--rg-motion-draw-duration) * 1.5) linear 1;
}
@media (prefers-reduced-motion: reduce) {
	[data-detection] [data-i~='status'][data-i~='kora'][data-shine]::before {
		animation: none;
	}
}

/* D-0497: Kora's reading sweeps down the card once. D-0499: as a scan — a thin line in her gradient, drawn across the
   card, with a light wash of her colour trailing above it; slower, over two and a half draws (2s), at an even pace. */
[data-dc-scan]::after {
	content: '';
	position: absolute;
	inset-inline: 0;
	top: -35%;
	height: 35%;
	background:
		linear-gradient(to right, var(--rg-kora-mark-spark), var(--rg-kora-mark-glow), var(--rg-kora-mark-base)) bottom / 100% 1.5px no-repeat,
		linear-gradient(to bottom, transparent, color-mix(in oklab, var(--rg-kora-mark-base) 14%, transparent));
	opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
	[data-dc-scan][data-on]::after {
		animation: dc-scan calc(var(--rg-motion-draw-duration) * 2.5) linear 1;
	}
}
@keyframes dc-scan {
	0% {
		top: -35%;
		opacity: 0;
	}
	6%,
	90% {
		opacity: 1;
	}
	100% {
		top: 65%;
		opacity: 0;
	}
}

/* D-0477: the detection card, a little bigger from sm up. D-0484: wider, not zoomed — the words keep the kit's sizes
   (a title at 14 at most, the rest at 12) and its spacing; only the card's width grows, 26rem to 31rem. Below sm
   it already fills the width. */
@media (min-width: 40rem) {
	[data-dc-frame] {
		width: min(100%, 31rem);
	}
}


/* D-0349–D-0352: Kora's word stands outside the card, above it, on the card's left edge — the kit's
   one status pill, Kora's (D-0147), 16 over the stack on the section's ground, with no wire. It
   opens once the activity has landed: it pops in as a disc round her mark (the pop role), grows to
   its words (reveal), and the words pop in; waiting, it holds no transition (D-0298) and is nothing. */
[data-i~='dc-foot'] {
	--shade: 0.06;
	--ground: var(--rg-color-bg-subtle);
	position: relative;
	/* The pill's 28 and 16 under it to the card; its shadow falls under the card. Its rings reach 12 up,
	   into the wrapper's padding — the stack's fade is a mask, and a mask cuts at the box's edge.
	   D-0491: 24 under it, so 16 clear between its outer ring (8 out) and the card. */
	height: 52px;
	font-family: Inter, sans-serif;
	letter-spacing: 0;
	white-space: nowrap;
}
[data-i~='dc-status'] {
	top: 0;
	left: 0;
	translate: 0 0;
	gap: 0;
}
/* The line of copy each entry ends on: Stream's quote, wrapped, a breath under what it follows. */
[data-i~='dc-copy'] {
	margin-top: 2px;
	color: var(--color-slate-500);
}
[data-i~='dc-words'] {
	display: grid;
	grid-template-columns: 1fr;
	min-width: 0;
	overflow: hidden;
}
[data-i~='dc-text'] {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	padding-left: 6px;
}
/* Her word changes in the pill — "Listening to a call" to "Captured the call" — blurring into the next,
   as the kit's cases do (D-0133). */
[data-i~='dc-say'] {
	transition-property: opacity, filter;
	transition-duration: var(--rg-motion-reveal-duration);
	transition-timing-function: var(--rg-motion-state-easing);
}
[data-i~='dc-say'][data-out] {
	opacity: 0;
	filter: blur(var(--blur-sm));
}
/* Waiting, the pill is nothing; opening, the whole of it pops in as a disc round her mark, then grows. */
[data-i~='dc-status'][data-s='wait'],
[data-i~='dc-status'][data-s='wait'] * {
	transition: none;
}
[data-i~='dc-status'][data-s='wait'] {
	opacity: 0;
	scale: 0;
}
[data-i~='dc-status'][data-s='wait'] [data-i~='dc-words'] {
	grid-template-columns: 0fr;
}
[data-i~='dc-status'][data-s='wait'] [data-i~='dc-text'] {
	opacity: 0;
	scale: 0.8;
}
[data-i~='dc-status'][data-s='on'] {
	transition:
		scale var(--rg-motion-pop-duration) var(--rg-motion-pop-easing),
		opacity var(--rg-motion-state-duration) var(--rg-motion-state-easing);
}
[data-i~='dc-status'][data-s='on'] [data-i~='dc-words'] {
	transition: grid-template-columns var(--rg-motion-reveal-duration) var(--rg-motion-reveal-easing) var(--rg-motion-pop-duration);
}
[data-i~='dc-status'][data-s='on'] [data-i~='dc-text'] {
	transition:
		scale var(--rg-motion-pop-duration) var(--rg-motion-pop-easing) calc(var(--rg-motion-pop-duration) + var(--rg-motion-reveal-duration) / 2),
		opacity var(--rg-motion-state-duration) var(--rg-motion-state-easing) calc(var(--rg-motion-pop-duration) + var(--rg-motion-reveal-duration) / 2);
}

/* Rules — what is captured, and what never leaves the mailbox (987:10941). The Settings card's
   frame (D-0202): 440 at 80, the segmented tabs and the toggles; each rule a title over its words. */
[data-i~='rules-row'] {
	gap: 18px;
}
[data-i~='rules-words'] {
	display: flex;
	flex: 1 0 0rem;
	min-width: 1px;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}
[data-i~='rules-words'] > :last-child {
	overflow: hidden;
	text-overflow: ellipsis;
	font-weight: 400;
	line-height: 25px;
	letter-spacing: 0;
	color: var(--color-gray-700);
}
[data-i~='rules-fade'] {
	height: 420px;
}

/* ─── The hero’s network (D-0222) ──────────────────────────────────────────────
 * HomeHero's `sources` (Landing Pages Figma 987:10234): the tools a capture listens to, as glass
 * tiles hung on light wires that gather into one line running down to the heading — on the frame's
 * 804 × 306 plane, scaled whole. */
/* D-0322, D-0329: the wires are negative space, frosted — the hero's ground at 70% over a 12px blur of
 * the moving pattern, 8 wide — from the hero's top edge (the stems run 120 up past the plane and the
 * hero clips them), fading as they fall: whole at the plane's top, half by the bus (152 of 306), gone
 * at its foot. Each strip carries its own share of the fade as a mask; a mask on a wrapper would make
 * it the blur's backdrop root and the blur would see nothing. The strips meet without overlapping, so
 * no crossing doubles its tint. */
[data-i~='net-wire'] {
	position: absolute;
	width: 8px;
	margin-left: -4px;
	background: color-mix(in oklab, var(--rg-color-bg-subtle) 70%, transparent);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}
[data-i~='net-wire'][data-i~='stem'] {
	top: -120px;
	height: calc(49.635% + 120px - 4px);
	mask-image: linear-gradient(to bottom, black 120px, rgb(0 0 0 / 0.5) 100%);
}
[data-i~='net-wire'][data-i~='bus'] {
	top: calc(49.635% - 4px);
	left: 0.2488%;
	width: calc(99.502% + 8px);
	height: 8px;
	mask-image: linear-gradient(rgb(0 0 0 / 0.5), rgb(0 0 0 / 0.5));
}
[data-i~='net-wire'][data-i~='trunk'] {
	top: calc(49.635% + 4px);
	left: 50%;
	height: calc(50.365% - 4px);
	mask-image: linear-gradient(to bottom, rgb(0 0 0 / 0.5), transparent);
}
/* The frame's stems, at x 2 · 109 · 249 · 402 · 555 · 695 · 802 of 804. */
[data-i~='net-wire'][data-i~='a'] {
	left: 0.2488%;
}
[data-i~='net-wire'][data-i~='b'] {
	left: 13.557%;
}
[data-i~='net-wire'][data-i~='c'] {
	left: 30.97%;
}
[data-i~='net-wire'][data-i~='d'] {
	left: 50%;
}
[data-i~='net-wire'][data-i~='e'] {
	left: 69.03%;
}
[data-i~='net-wire'][data-i~='f'] {
	left: 86.443%;
}
[data-i~='net-wire'][data-i~='g'] {
	left: 99.751%;
}
[data-i~='net-tile'] {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	translate: -50% 0;
	overflow: clip;
	background: rgb(255 255 255 / 0.9);
	-webkit-backdrop-filter: blur(17.778px);
	backdrop-filter: blur(17.778px);
	box-shadow: 0 0 8.889px 2.222px rgb(0 0 0 / 0.12);
}
[data-i~='net-tile'] img {
	display: block;
	width: 24px;
	height: 24px;
	object-fit: contain;
}
/* The frame's places: on the seven stems, at their own heights. */
[data-i~='net-tile'][data-i~='a'] {
	left: 0.25%;
	top: 19.9%;
}
[data-i~='net-tile'][data-i~='b'] {
	left: 13.56%;
	top: 43.1%;
}
[data-i~='net-tile'][data-i~='c'] {
	left: 30.97%;
	top: 12.7%;
}
[data-i~='net-tile'][data-i~='c'] img {
	scale: 1 -1;
}
[data-i~='net-tile'][data-i~='d'] {
	left: 50%;
	top: 58.5%;
}
[data-i~='net-tile'][data-i~='d'] img {
	width: 29px;
	height: 20.289px;
}
[data-i~='net-tile'][data-i~='e'] {
	left: 69.03%;
	top: 28.8%;
}
[data-i~='net-tile'][data-i~='f'] {
	left: 86.44%;
	top: 7.8%;
}
[data-i~='net-tile'][data-i~='g'] {
	left: 99.75%;
	top: 43.1%;
}
/* D-0703: on phones (below 40rem) the network folds into a row of its tiles over the heading — the tiles'
   own glass, touching, a hairline between them, the tiles' shadow round the whole row. */
[data-i~='net-row'] {
	display: inline-flex;
	background: rgb(255 255 255 / 0.9);
	-webkit-backdrop-filter: blur(17.778px);
	backdrop-filter: blur(17.778px);
	box-shadow: 0 0 8.889px 2.222px rgb(0 0 0 / 0.12);
}
[data-i~='net-row'] > li {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
}
[data-i~='net-row'] > li + li {
	border-left: 0.5px solid var(--color-slate-200);
	/* D-0704: each tile after the first casts a soft shadow to its left, over the one before, so the row reads
	   as a stack — a short, faint fall-off, no hard edge. */
	box-shadow: -3px 0 6px -2px rgb(0 0 0 / 0.1);
}
[data-i~='net-row'] img {
	display: block;
	width: 24px;
	height: 24px;
	object-fit: contain;
}
/* The Outlook export is drawn upside down, as on its stem (tile c). */
[data-i~='net-row'] img[src*='logo-outlook'] {
	scale: 1 -1;
}
@media (max-width: 40rem) {
	[data-i~='net-tile'] {
		width: 30px;
		height: 30px;
	}
	[data-i~='net-tile'] img,
	[data-i~='net-tile'][data-i~='d'] img {
		width: 18px;
		height: 18px;
	}
}

/* ── Revenue IQ (D-0226): the hero's Pipeline, and the feature section's Suggest, Kickoff, Teams and
   Forecast, ported from Landing Pages Figma 1017:7832, 1017:8479, 1017:8798, 1017:8637 and 1017:8750.
   Every measure below is the frame's. */

/* Pipeline — the true pipeline against the open one (1017:7832). The frame's 600 tall picture sits
   50 down the 700 board; its bars run off the right, into the ground. */
[data-i~='pipe-mark'] {
	position: absolute;
	left: 54px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	overflow: clip;
	border-radius: 5.333px;
	font-size: 21.333px;
}
/* D-0419: the frame's tiles (Landing Pages Figma 1479:9793) — a tint at 60% with a 20% hairline in its own
   hue, no shadow: True pipeline green, Open pipeline grey. */
[data-i~='pipe-mark'][data-i~='a'] {
	top: 98px;
	border: 0.6px solid color-mix(in oklab, var(--color-emerald-600) 20%, transparent);
	background: color-mix(in oklab, var(--color-emerald-100) 60%, transparent);
	color: var(--color-green-700);
}
[data-i~='pipe-mark'][data-i~='b'] {
	top: 380px;
	border: 0.6px solid color-mix(in oklab, var(--color-gray-500) 20%, transparent);
	background: color-mix(in oklab, var(--color-gray-200) 60%, transparent);
	color: var(--color-gray-500);
}
/* D-0419: the rails are the frame's grey (gray-300; the last fading out), and carry the wires' shimmer
   (D-0131) — a band of the brand gradient passing down them, again and again. */
[data-i~='pipe-rail'] {
	position: absolute;
	left: 69.5px;
	width: 1px;
	background:
		linear-gradient(to bottom, transparent, var(--color-emerald-600), var(--color-sky-500), transparent) 0 -100% / 100% 50% no-repeat,
		linear-gradient(to bottom, var(--color-gray-300), var(--color-gray-300));
	transform-origin: top;
	animation: wire-down var(--rg-motion-highlight-loop) linear infinite;
}
[data-i~='pipe-rail'][data-i~='a'] {
	top: 134px;
	height: 242px;
}
[data-i~='pipe-rail'][data-i~='b'] {
	top: 416px;
	height: 234px;
	background:
		linear-gradient(to bottom, transparent, var(--color-emerald-600), var(--color-sky-500), transparent) 0 -100% / 100% 50% no-repeat,
		linear-gradient(to bottom, var(--color-gray-300), transparent);
	animation-delay: calc(var(--rg-motion-highlight-loop) / 2);
}
@media (prefers-reduced-motion: reduce) {
	[data-i~='pipe-rail'] {
		animation: none;
	}
}
[data-i~='pipe-label'] {
	position: absolute;
	left: 104px;
	font-weight: 500;
	font-size: 12px;
	line-height: 32px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--color-gray-700);
}
[data-i~='pipe-total'] {
	position: absolute;
	left: 104px;
	font-weight: 600;
	font-size: 36px;
	line-height: 48px;
	letter-spacing: 1px;
	color: var(--color-gray-950);
}
[data-i~='pipe-label'][data-i~='a'] {
	top: 98px;
}
[data-i~='pipe-total'][data-i~='a'] {
	top: 130px;
}
[data-i~='pipe-label'][data-i~='b'] {
	top: 380px;
}
[data-i~='pipe-total'][data-i~='b'] {
	top: 412px;
}
[data-i~='pipe-bar'] {
	position: absolute;
	height: 48px;
	border-radius: 8px;
	box-shadow: 0 16px 56px 0 rgb(0 0 0 / var(--shade));
}
[data-i~='pipe-bar'][data-i~='a1'] {
	--bar: 331;
	top: 192px;
	left: 105px;
	width: 331px;
	background: var(--color-emerald-700);
}
[data-i~='pipe-bar'][data-i~='a2'] {
	--bar: 160;
	top: 192px;
	left: 440px;
	width: 160px;
	background: var(--color-emerald-500);
}
[data-i~='pipe-bar'][data-i~='b1'] {
	--bar: 228;
	top: 474px;
	left: 104px;
	width: 228px;
	background: var(--color-emerald-700);
}
[data-i~='pipe-bar'][data-i~='b2'] {
	--bar: 165;
	top: 474px;
	/* D-0436: 4 after On track, as every gap (was 8) */
	left: 336px;
	width: 165px;
	background: var(--color-amber-400);
}
[data-i~='pipe-bar'][data-i~='b3'] {
	--bar: 95;
	top: 474px;
	left: 505px;
	width: 95px;
	background: var(--color-rose-400);
}
[data-i~='pipe-part'] {
	position: absolute;
	display: flex;
	width: 119px;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
}
[data-i~='pipe-part'] > p:first-child {
	font-weight: 500;
	font-size: 20px;
	line-height: 28px;
	letter-spacing: 1px;
	color: var(--color-gray-800);
}
[data-i~='pipe-key'] {
	display: flex;
	align-items: center;
	/* D-0424: 6 from its square, no tracking. */
	gap: 6px;
	font-weight: 500;
	font-size: 12px;
	line-height: 32px;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--color-gray-700);
}
[data-i~='pipe-key']::before {
	content: '';
	width: 10px;
	height: 10px;
	background: var(--key);
}
[data-i~='pipe-part'][data-i~='a1'] {
	top: 260px;
	left: 104px;
	--key: var(--color-emerald-800);
}
[data-i~='pipe-part'][data-i~='a2'] {
	top: 260px;
	left: 255px;
	--key: var(--color-emerald-500);
}
[data-i~='pipe-part'][data-i~='b1'] {
	top: 542px;
	left: 104px;
	--key: var(--color-emerald-800);
}
[data-i~='pipe-part'][data-i~='b2'] {
	top: 542px;
	left: 255px;
	--key: var(--color-amber-400);
}
[data-i~='pipe-part'][data-i~='b3'] {
	top: 542px;
	left: 406px;
	--key: var(--color-rose-400);
}
[data-i~='pipe-edge'] {
	position: absolute;
	top: 0;
	right: 0;
	width: 95px;
	height: 700px;
	background: linear-gradient(to right, transparent, var(--ground));
	pointer-events: none;
}
[data-i~='pipe-fade'] {
	height: 97px;
}

/* Suggest — the pipeline table, and Kora's suggestion over the stage she doubts (1017:8479). */
[data-i~='card'][data-i~='sug-card'] {
	/* D-0440: the table's glass runs 80% white at the head to 25% at the foot. */
	--glass: rgb(255 255 255 / 0.8);
	--glass-foot: rgb(255 255 255 / 0.25);
	top: 64px;
	left: 64px;
	width: 536px;
	height: 636px;
	box-shadow: 0 -16px 40px 0 rgb(0 0 0 / var(--shade));
}
[data-i~='sug-card'] [data-i~='head-title'] {
	color: rgb(32 32 32);
}
[data-i~='sug-row'] {
	display: flex;
	align-items: center;
	gap: 32px;
	padding: 20px 20px 20.5px;
	border-bottom: 0.5px solid var(--color-neutral-100);
	font-size: 13px;
	line-height: 20px;
	color: var(--color-neutral-950);
}
[data-i~='sug-row'][data-i~='cols'] {
	padding: 14px 20px 14.5px;
	background: var(--glass-band);
	border-bottom-color: var(--color-neutral-200);
	font-size: 12px;
	letter-spacing: 0.24px;
	text-transform: uppercase;
	color: var(--color-neutral-500);
}
[data-i~='sug-row'] > :nth-child(1) {
	flex: none;
	width: 124px;
}
[data-i~='sug-row'] > :nth-child(2) {
	display: flex;
	flex: none;
	align-items: center;
	gap: 8px;
	width: 160px;
}
[data-i~='sug-row'] > :nth-child(3) {
	display: flex;
	flex: 1 0 0rem;
	min-width: 1px;
}
[data-i~='sug-kora'] {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 21px;
	height: 21px;
	border: 0.5px solid var(--color-neutral-200);
	border-radius: 3px;
	background: white;
}
[data-i~='sug-kora'][data-i~='lit'] {
	box-shadow: 0 0 20px 0 color-mix(in oklab, var(--color-orange-400) 45%, transparent);
}
[data-i~='sug-pill'] {
	padding: 4px 10px;
	border-radius: 99px;
	background: color-mix(in oklab, var(--color-green-100) 50%, transparent);
	font-weight: 500;
	font-size: 10px;
	line-height: 12px;
	color: var(--color-green-700);
}
[data-i~='sug-status'] {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 4.5px 6.5px 4.5px 5.5px;
	border: 0.5px solid var(--color-green-500);
	border-radius: 4px;
	background: color-mix(in oklab, var(--color-green-100) 50%, transparent);
	font-weight: 500;
	font-size: 10px;
	line-height: 12px;
	text-transform: uppercase;
	color: var(--color-green-700);
}
[data-i~='sug-status'] [data-i~='sug-tick'] {
	font-size: 11.074px;
	line-height: 11.074px;
}
/* Kora's suggestion: glass over the table, at the row she doubts. */
[data-i~='card'][data-i~='sug-pop'] {
	top: 280px;
	left: 240px;
	width: 294px;
	border: 0.5px solid var(--color-neutral-300);
	outline: none;
	border-radius: 6px;
	background: linear-gradient(to bottom, white, rgb(255 255 255 / 0.4));
	box-shadow: 0 -16px 40px 0 rgb(0 0 0 / var(--shade));
}
[data-i~='sug-pop-head'] {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 12px 16px 12.5px;
	border-bottom: 0.5px solid var(--color-neutral-200);
	background: white;
	font-weight: 600;
	font-size: 12px;
	line-height: normal;
	color: rgb(32 32 32);
}
[data-i~='sug-pop-block'] {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
	padding: 16px;
	border-bottom: 0.5px solid var(--color-neutral-100);
}
[data-i~='sug-pop-block'][data-i~='last'] {
	gap: 16px;
	border-bottom: none;
}
[data-i~='sug-field'] {
	display: flex;
	width: 100%;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}
[data-i~='sug-field'] > p:first-child {
	font-size: 11px;
	line-height: 14px;
	letter-spacing: 0.44px;
	text-transform: uppercase;
	color: var(--color-neutral-600);
}
[data-i~='sug-field'] [data-i~='sug-pill'] {
	padding: 6.8px 12px;
	font-size: 12px;
	line-height: 14.4px;
}
[data-i~='sug-select'] {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	height: 32px;
	padding: 0 12px;
	border: 1px solid var(--color-neutral-300);
	border-radius: 4px;
	background: white;
	font-size: 14px;
	line-height: 16.8px;
	letter-spacing: -0.5px;
	color: rgb(0 15 38 / 0.71);
}
[data-i~='sug-select'] > :first-child {
	flex: 1 0 0rem;
}
[data-i~='sug-select'] [data-i~='sug-caret'] {
	font-size: 16px;
}
[data-i~='sug-why'] {
	width: 100%;
	font-style: italic;
	font-size: 12px;
	line-height: 18px;
	text-transform: capitalize;
	white-space: normal;
	color: var(--color-neutral-800);
}
[data-i~='sug-why'] b {
	display: block;
	font-weight: 600;
}
/* D-0422: each line keeps its height while it is typed afresh, so the card never jumps. */
[data-i~='sug-why'] > * {
	display: block;
	min-height: 18px;
}
[data-i~='sug-acts'] {
	display: flex;
	align-items: center;
	gap: 8px;
}
[data-i~='sug-act'] {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 32px;
	padding: 0 12px;
	border: 1px solid var(--color-neutral-300);
	border-radius: 4px;
	background: white;
	font-size: 14px;
	line-height: 16.8px;
	letter-spacing: -0.5px;
	color: rgb(0 15 38 / 0.71);
}
[data-i~='sug-act'][data-i~='go'] {
	border-color: transparent;
	background: rgb(0 4 15 / 0.99);
	color: white;
}
[data-i~='sug-act'] [data-i~='sug-glyph'] {
	font-size: 16px;
}
[data-i~='sug-edge'] {
	position: absolute;
	top: 0;
	right: 0;
	width: 152px;
	height: 700px;
	background: linear-gradient(to right, transparent, var(--ground));
	pointer-events: none;
}
[data-i~='sug-fade'] {
	height: 404px;
}

/* Kickoff — the call, Kora's summary of it, and the steps it leaves (1017:8798). */
[data-i~='card'][data-i~='kick-card'] {
	/* D-0441: the call card's glass runs whole white at the head to 20% at the foot. */
	--glass: white;
	--glass-foot: rgb(255 255 255 / 0.2);
	top: 70px;
	width: 488px;
	height: 630px;
	box-shadow: 0 -16px 40px 0 rgb(0 0 0 / var(--shade));
}
[data-i~='kick-head'] {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 20px 20px 20.5px;
	background: var(--glass-band);
	border-bottom: 0.5px solid var(--color-neutral-200);
}
/* D-0442: the call's app in a white round seat with a hairline — any app's mark fits whole — as it turns
   with the case (was Zoom's camera on its own blue disc). */
[data-i~='kick-zoom'] {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: 0.5px solid var(--color-gray-200);
	border-radius: 999px;
	background: white;
}
[data-i~='kick-zoom'] img {
	width: 20px;
	height: 20px;
	object-fit: contain;
}
/* D-0447: the call's name and when, typed as the Landing Pages Figma's meeting (1485:10150) — 13px regular, the
   when 11px in capitals, faded; both tracked in, 2 apart. */
[data-i~='kick-names'] {
	display: flex;
	flex-direction: column;
	gap: 2px;
	letter-spacing: -0.3469px;
	color: var(--color-gray-950);
}
[data-i~='kick-names'] > :first-child {
	font-size: 13px;
	line-height: 20px;
}
[data-i~='kick-names'] > :last-child {
	font-size: 11px;
	line-height: 20px;
	text-transform: uppercase;
	opacity: 0.7;
}
/* D-0427: Kora's summary — her mark alone (Landing Pages Figma 694:11016), 15 above her word written as Spot
   risk's reason is (D-0422): a regular italic line, then two bold italic lines, title-cased, in the dark of
   the table's words. */
[data-i~='kick-summary'] {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 20px;
	overflow: clip;
}
[data-i~='kick-mark'] {
	display: flex;
	margin-bottom: 15px;
}
[data-i~='kick-say'] {
	width: 100%;
	font-style: italic;
	font-size: 14px;
	line-height: 22px;
	text-transform: capitalize;
	white-space: normal;
	color: var(--color-neutral-800);
}
/* D-0432: the headline on its own line; the body runs on after it in regular weight, its key words heavier.
   The summary keeps its three lines while it is typed afresh (D-0428). */
[data-i~='kick-say'] {
	min-height: 66px;
}
[data-i~='kick-say'] > :first-child {
	display: block;
}
[data-i~='kick-say'] b {
	font-weight: 600;
}
[data-i~='kick-steps'] {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding: 20px;
}
[data-i~='kick-steps'] > p {
	font-weight: 500;
	font-size: 14px;
	line-height: 24px;
	color: var(--color-neutral-700);
}
[data-i~='kick-step'] {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	width: 100%;
	padding: 12px;
	overflow: clip;
	border: 1px solid var(--color-gray-100);
	border-radius: 4px;
	background: white;
}
[data-i~='kick-step']::before {
	content: '';
	flex: none;
	width: 6px;
	height: 6px;
	margin-top: 9.5px;
	border-radius: 99px;
	background: var(--color-emerald-700);
}
[data-i~='kick-step'] > div {
	display: flex;
	flex: 1 0 0rem;
	min-width: 1px;
	flex-direction: column;
	align-items: flex-start;
}
/* D-0445: each step's title at 14px — Next steps are the point of the picture. D-0446: back to 12px, as written. */
[data-i~='kick-step'] > div > :first-child {
	font-weight: 500;
	font-size: 12px;
	line-height: 24px;
	color: rgb(32 32 32);
}
[data-i~='kick-step'] > div > :last-child {
	font-size: 12px;
	line-height: 19px;
	letter-spacing: 0.04px;
	white-space: normal;
	color: rgb(0 0 0 / 0.49);
}
[data-i~='kick-fade'] {
	height: 225px;
}

/* Teams — where each person's week goes (1017:8637): five people down the board, the middle one in
   full, those above and below fading out to either end. */
/* D-0429: a reel — every person stands in a place (`--slot`, 0 the middle at 284, 180 a place): the middle
   one whole, the next ones 50%, then 20%, then gone. D-0430: the scene's script then glides them down without
   stopping, setting each one's place and strength as it goes; this is where they stand still. */
[data-i~='team-reel'] {
	position: absolute;
	inset: 0;
}
[data-i~='team-person'] {
	position: absolute;
	top: 284px;
	left: 80px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	width: 440px;
	opacity: 0;
	translate: 0 calc(var(--slot, 0) * 180px);
}
[data-i~='team-person'][data-slot='0'] {
	opacity: 1;
}
[data-i~='team-person']:is([data-slot='-1'], [data-slot='1']) {
	opacity: 0.5;
}
[data-i~='team-person']:is([data-slot='-2'], [data-slot='2']) {
	opacity: 0.2;
}
[data-i~='team-who'] {
	display: flex;
	align-items: center;
	gap: 8px;
}
[data-i~='team-who'] [data-i~='avatar'] {
	width: 32px;
	height: 32px;
}
[data-i~='team-names'] {
	gap: 4px;
}
[data-i~='team-names'] > :first-child {
	font-weight: 500;
	font-size: 12px;
	line-height: 12px;
	color: var(--color-gray-900);
}
[data-i~='team-names'] > :last-child {
	font-size: 10px;
	line-height: 10px;
	color: var(--color-neutral-500);
}
[data-i~='team-card'] {
	display: flex;
	width: 100%;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	padding: 12px;
	border: 0.4px solid var(--color-neutral-200);
	border-radius: 6px;
	background: white;
	filter: drop-shadow(0 16px 28px rgb(0 0 0 / var(--shade)));
}
[data-i~='team-card'] > p {
	font-weight: 600;
	font-size: 14px;
	line-height: 20px;
	white-space: pre;
	color: rgb(32 32 32);
}
[data-i~='team-bar'] {
	display: flex;
	gap: 1px;
	width: 100%;
	height: 8px;
}
[data-i~='team-bar'] > span {
	border-radius: 1px;
	flex: 1 0 0rem;
}
[data-i~='team-bar'] > span:nth-child(1) {
	flex: none;
	width: calc(var(--w, 189) * 1px);
	background: var(--color-emerald-700);
}
[data-i~='team-bar'] > span:nth-child(2) {
	background: var(--color-amber-500);
}
[data-i~='team-bar'] > span:nth-child(3) {
	background: var(--color-blue-600);
}
[data-i~='team-keys'] {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-top: 4px;
}
[data-i~='team-keys'] > span {
	display: flex;
	align-items: center;
	gap: 5px;
	width: 100px;
	font-weight: 500;
	font-size: 10px;
	line-height: 16px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--color-gray-700);
}
[data-i~='team-keys'] > span::before {
	content: '';
	width: 6px;
	height: 6px;
	background: var(--color-emerald-800);
}
[data-i~='team-keys'] > span:nth-child(2)::before {
	background: var(--color-amber-500);
}
[data-i~='team-keys'] > span:nth-child(3)::before {
	background: var(--color-blue-600);
}
/* The frame fades the board out at its head as well as its foot, so only the middle person reads in
   full. */

/* Forecast — Kora, asked what will close this month (1017:8750). Kora's own question, so her mark
   heads it and her gradient names her working. */
/* D-0568: "Worked through N steps" as Landing Pages Figma 589:23415 writes it — Kora's orange into her pink, left to
   right (the pink's stop past the words' end, at 123%), at 60%; the alpha is in the gradient, so the turning blur
   still owns the words' opacity. */
[data-i~='fc-worked'] [data-i~='kora-text'] {
	/* D-0569, D-0572: as the frame — orange-600 into pink-800 (the palette's nearest, rose-800) at 123%; the line's
	   own 60% (as drawn) lightens it with the chevron. */
	background-image: linear-gradient(to right, var(--color-orange-600), var(--color-rose-800) 123%);
}
/* D-0570, D-0572: Foresight's Ask-Kora card (Focus) as Landing Pages Figma 589:23401 colours it — white running to
   clear at twice its height (so about half at its foot), a gray-100 hairline (the frame's neutral-100), a 55.5 blur, its
   shadow at 8%; its question on a solid gray-50 band (neutral-50). */
[data-i~='card'][data-i~='fc-card'][data-i~='fc-focus'] {
	--glass: white;
	/* D-0573: to clear at its foot (was 50%). */
	--glass-foot: rgb(255 255 255 / 0);
	border: 1px solid var(--color-gray-100);
	-webkit-backdrop-filter: blur(55.5px);
	backdrop-filter: blur(55.5px);
	box-shadow: 0 -12px 32px 0 rgb(0 0 0 / 0.08);
}
[data-i~='fc-focus'] [data-i~='fc-head'] {
	background: var(--color-gray-50);
}
[data-i~='card'][data-i~='fc-card'] {
	top: 64px;
	width: 472px;
	height: 636px;
	border-radius: 4px 4px 0 0;
	box-shadow: 0 -12px 32px 0 rgb(0 0 0 / var(--shade));
}
[data-i~='fc-head'] {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 20px 16.5px;
	background: var(--glass-band);
	border-bottom: 0.5px solid var(--color-neutral-100);
	font-weight: 500;
	font-size: 14px;
	line-height: 24px;
	color: black;
}
[data-i~='fc-kora'] {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 99px;
	background: white;
}
[data-i~='fc-body'] {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	padding: 20px;
}
[data-i~='fc-worked'] {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 2px 0;
	opacity: 0.6;
	font-weight: 500;
	font-size: 10px;
	line-height: 16px;
}
[data-i~='fc-worked'] [data-i~='fc-more'] {
	/* D-0571: the chevron centred on the words (it sat at the top of its line). */
	display: flex;
	align-items: center;
	height: 16px;
	font-size: 13px;
	color: var(--color-neutral-600);
}
[data-i~='fc-answer'] {
	margin-top: -4px;
	font-size: 13px;
	line-height: 20px;
	letter-spacing: -0.3469px;
	color: rgb(11 11 11);
}
[data-i~='fc-box'] {
	display: flex;
	width: 100%;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding: 12px;
	border: 1px solid var(--color-neutral-100);
	border-radius: 4px;
	background: rgb(255 255 255 / 0.8);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	color: rgb(11 11 11);
}
[data-i~='fc-box'] > [data-i~='fc-cap'] {
	opacity: 0.8;
	font-weight: 600;
	font-size: 10px;
	line-height: 16px;
}
[data-i~='fc-sum'] {
	font-weight: 600;
	font-size: 20px;
	line-height: 32px;
	letter-spacing: -0.3469px;
}
[data-i~='fc-sure'] {
	padding: 3.13px 6.261px;
	border-radius: 3.13px;
	background: color-mix(in oklab, var(--color-green-400) 18%, transparent);
	font-size: 7.35px;
	line-height: 8.82px;
	letter-spacing: -0.3913px;
	color: var(--color-green-900);
}
[data-i~='fc-split'] {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	line-height: 20px;
}
[data-i~='fc-split'] > div {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
[data-i~='fc-split'] > div > :first-child {
	opacity: 0.7;
	font-size: 11px;
	letter-spacing: -0.35px;
	text-transform: uppercase;
}
[data-i~='fc-split'] > div > :last-child {
	font-size: 13px;
	letter-spacing: -0.3469px;
}
[data-i~='fc-split'] > div:last-child > :last-child {
	text-align: right;
}
[data-i~='fc-opps'] {
	display: flex;
	width: 100%;
	flex-direction: column;
	gap: 20px;
	line-height: 20px;
	letter-spacing: -0.3469px;
}
[data-i~='fc-opp'] {
	display: flex;
	align-items: flex-start;
	gap: 6px;
}
[data-i~='fc-opp'] > div {
	display: flex;
	flex: none;
	width: 120px;
	flex-direction: column;
	font-size: 11px;
}
[data-i~='fc-opp'] > div > :first-child {
	text-transform: uppercase;
}
[data-i~='fc-opp'] > div > :last-child {
	opacity: 0.7;
	text-transform: capitalize;
}
[data-i~='fc-opp'] > p {
	flex: 1 0 0rem;
	font-weight: 600;
	font-size: 13px;
	text-align: right;
}
[data-i~='dim-80'] {
	opacity: 0.8;
}
[data-i~='dim-60'] {
	opacity: 0.6;
}
[data-i~='dim-40'] {
	opacity: 0.4;
}
[data-i~='fc-fade'] {
	height: 160px;
}

/* ── Knowledge Lake (D-0232): the feature section's Sources, ported from Landing Pages Figma 1050:11544.
   Every measure below is the frame's. */

/* Sources — what a question finds: six sources, newest first, fading down the board under a drawn fade (D-0339). */
[data-i~='src-found'] {
	position: absolute;
	top: 74.71px;
	left: 82.11px;
	font-weight: 600;
	font-size: 14px;
	line-height: 12px;
	color: rgb(32 32 32);
}
[data-i~='src-row'] {
	position: absolute;
	left: 66.5px;
	display: flex;
	align-items: flex-start;
	/* D-0340: 4 more round the card and between the logo and its words (were 16 and 12). */
	gap: 16px;
	width: 467px;
	padding: 20px;
	overflow: clip;
	border: 1px solid var(--color-gray-100);
	border-radius: 4px;
	background: white;
	box-shadow: 0 4px 10px 0 rgb(0 0 0 / var(--shade));
}
[data-i~='src-row'][data-i~='a'] {
	top: 111.57px;
}
[data-i~='src-row'][data-i~='b'] {
	top: 217.57px;
}
[data-i~='src-row'][data-i~='c'] {
	top: 323.57px;
}
[data-i~='src-row'][data-i~='d'] {
	top: 429.57px;
}
[data-i~='src-row'][data-i~='e'] {
	top: 535.57px;
}
[data-i~='src-row'][data-i~='f'] {
	top: 641.57px;
}
[data-i~='src-tile'] {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	overflow: clip;
	border: 0.438px solid var(--color-neutral-200);
	background: white;
	box-shadow: 0 0 17.5px 0 rgb(0 0 0 / var(--shade));
}
[data-i~='src-tile'] img {
	width: 16px;
	height: 16px;
	object-fit: contain;
}
[data-i~='src-tile'] [data-i~='src-wide'] {
	width: 22.905px;
}
[data-i~='src-words'] {
	display: flex;
	flex: 1 0 0rem;
	min-width: 1px;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}
[data-i~='src-words'] > :first-child {
	font-weight: 600;
	font-size: 14px;
	line-height: 12px;
	color: rgb(32 32 32);
}
[data-i~='src-words'] > :last-child {
	font-size: 13px;
	line-height: 16px;
	text-transform: capitalize;
	color: var(--color-gray-500);
}
[data-i~='src-when'] {
	flex: none;
	font-size: 12px;
	line-height: 12px;
	text-align: right;
	text-transform: uppercase;
	color: var(--color-neutral-500);
}
/* D-0339: the rows stand whole — no step of opacity down the list — and a drawn fade over their feet
   takes them into the ground, whole by four fifths of its height. */
[data-i~='src-fade'] {
	height: 380px;
	background: linear-gradient(to bottom, transparent, var(--ground) 80%);
}

/* ─── The hero's globe (D-0299) ────────────────────────────────────────────────
 * HomeHero's `globe` and `signals` (LakeGlobe.astro, after Landing Pages Figma 1050:10901): the hero
 * as a sphere of the brand's cells, drawn on the canvas, clear round the words; and the signals
 * context is made of — the frame's white cards — each popping on a cell of the globe's front as its
 * own tile, the hero's white tile with the hairline, opening into the card, riding its cell, and
 * fading. The script places each node by its tile's centre, 29.7 into the card (the frame's 1.1
 * border, 13.2 padding and half its 30.8 tile); its states are `data-s`: tile, open, out. */
/* The Context Gateway hero's graph (D-0512, GatewayGraph.astro) is the same canvas, the globe's cells
   laid flat and joined as a network; the Context Foundation hero's spiral (D-0660, SpiralField.astro) the
   same canvas again. */
[data-i~='lake-globe'],
[data-i~='gateway-graph'],
[data-i~='hero-spiral'] {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	pointer-events: none;
}
/* The cards move at the roles' pace slowed by an eighth (D-0305): every duration and delay below is a
   role's times --lake-pace; the script's timings take the same factor (PACE). */
[data-i~='lake-signals'] {
	--lake-pace: 1.125;
	position: absolute;
	inset: 0;
	display: none;
	pointer-events: none;
}
@media (min-width: 64rem) {
	[data-i~='lake-signals'] {
		display: block;
	}
}
/* A node waits unseen at its cell's size; it pops with the pop role's bounce (D-0300) and fades over a reveal. */
[data-i~='lake-node'] {
	position: absolute;
	top: -29.7px;
	left: -29.7px;
	transform-origin: 29.7px 29.7px;
	scale: 0.22;
	opacity: 0;
}
[data-i~='lake-node'][data-s='tile'],
[data-i~='lake-node'][data-s='open'] {
	scale: 1;
	opacity: 1;
	transition:
		scale calc(var(--rg-motion-pop-duration) * var(--lake-pace)) var(--rg-motion-pop-easing),
		opacity calc(var(--rg-motion-state-duration) * var(--lake-pace)) var(--rg-motion-state-easing);
}
[data-i~='lake-node'][data-s='out'] {
	scale: 1;
	opacity: 0;
	transition: opacity calc(var(--rg-motion-reveal-duration) * var(--lake-pace)) var(--rg-motion-reveal-easing);
}
/* The card opens in three beats (D-0301, D-0302): the tile pops (the node, above) and the container —
   its own box behind the tile and copy — grows from the tile's square to the card's width and height,
   both with the pop role's bounce; then the copy arrives inside it, as the kit's content does. The frame's 13.2 padding and 1.1 border
   are the card's padding, so the tile stands where it did. */
[data-i~='lake-card'] {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 13.2px;
	padding: 14.3px;
	font-family: Inter, sans-serif;
	white-space: nowrap;
	text-align: left;
}
/* D-0334: heavy glass, no drop shadow — the field shows through, frosted and a little richer, held
   by a light rim and a faint edge outside it (the kit's frosted frame, D-0146), a highlight along its top. */
[data-i~='lake-box'] {
	position: absolute;
	top: 0;
	left: 0;
	width: 59.4px;
	height: 59.4px;
	border: 1.1px solid rgb(255 255 255 / 0.8);
	outline: 0.5px solid rgb(2 6 24 / 0.08);
	border-radius: 4.4px;
	background: linear-gradient(to bottom, rgb(255 255 255 / 0.55), rgb(255 255 255 / 0.3));
	-webkit-backdrop-filter: blur(var(--blur-xl)) saturate(1.6);
	backdrop-filter: blur(var(--blur-xl)) saturate(1.6);
	box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.9);
}
/* D-0330: a meeting's node shows its two people, as the Meetings page's curve cards do — each face in
   the tile's place and size, square-cornered — so its first box holds both (14.3 + 30.8 + 4.4 + 30.8
   + 14.3). The cell sits under the first face, where a tile's would. */
[data-i~='lake-node'][data-i~='faces'] [data-i~='lake-box'] {
	width: 94.6px;
}
[data-i~='lake-faces'] {
	position: relative;
	display: flex;
	gap: 4.4px;
}
[data-i~='lake-faces'] img {
	display: block;
	width: 30.8px;
	height: 30.8px;
	border-radius: 2px;
	object-fit: cover;
	object-position: 50% 20%;
	background: var(--color-neutral-100);
	box-shadow: 0 0 19.25px 0 rgb(0 0 0 / 0.12);
}
[data-i~='lake-node'][data-s='open'] [data-i~='lake-box'],
[data-i~='lake-node'][data-s='out'] [data-i~='lake-box'] {
	width: 100%;
	height: 100%;
	transition:
		width calc(var(--rg-motion-pop-duration) * var(--lake-pace)) var(--rg-motion-pop-easing),
		height calc(var(--rg-motion-pop-duration) * var(--lake-pace)) var(--rg-motion-pop-easing);
}
[data-i~='lake-tile'],
[data-i~='lake-words'] {
	position: relative;
}
/* The copy arrives as the kit's content does (D-0295, D-0302): once the container has grown, each
   line rises a reveal's distance and fades in over the reveal, the second a double stagger after. */
[data-i~='lake-node'] [data-i~='lake-words'] > * {
	opacity: 0;
	transform: translateY(var(--rg-motion-reveal-distance));
}
[data-i~='lake-node'][data-s='open'] [data-i~='lake-words'] > *,
[data-i~='lake-node'][data-s='out'] [data-i~='lake-words'] > * {
	opacity: 1;
	transform: none;
	transition-property: opacity, transform;
	transition-duration: calc(var(--rg-motion-reveal-duration) * var(--lake-pace));
	transition-timing-function: var(--rg-motion-reveal-easing);
	transition-delay: calc(var(--rg-motion-pop-duration) * var(--lake-pace));
}
[data-i~='lake-node'][data-s='open'] [data-i~='lake-words'] > :last-child {
	transition-delay: calc((var(--rg-motion-pop-duration) * var(--lake-pace)) + calc(var(--rg-motion-reveal-stagger) * var(--lake-pace)) * 2);
}
[data-i~='lake-tile'] {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30.8px;
	height: 30.8px;
	overflow: clip;
	border: 0.481px solid var(--color-neutral-200);
	background: white;
	box-shadow: 0 0 19.25px 0 rgb(0 0 0 / 0.12);
}
[data-i~='lake-tile'] img {
	display: block;
	width: 17.6px;
	height: 17.6px;
	object-fit: contain;
}
[data-i~='lake-words'] {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	font-size: 13.2px;
	text-transform: capitalize;
}
[data-i~='lake-words'] > :first-child {
	font-weight: 600;
	line-height: 13.2px;
	color: var(--color-gray-950);
}
[data-i~='lake-words'] > :last-child {
	line-height: 15.4px;
	color: var(--color-gray-600);
}

/* ─── Kora's badge (D-0235) ────────────────────────────────────────────────────
 * KoraBadge.astro (Landing Pages Figma 1050:11362): Kora's mark in a white disc at the head of a pill
 * ringed in her orange, washed in her gradient, running off the right of the card. The frame's
 * measures, her colours from the primitives. */
[data-i~='kb-pill'] {
	position: absolute;
	top: 50%;
	left: 80px;
	display: flex;
	align-items: center;
	width: 910.554px;
	padding: 43.953px;
	translate: 0 -50%;
	border: 3.694px solid var(--color-orange-500);
	border-radius: 999px;
	background: linear-gradient(to right, color-mix(in oklab, var(--color-orange-500) 20%, transparent), transparent 68%);
	box-shadow:
		-17.995px 17.995px 17.995px 0 color-mix(in oklab, var(--color-orange-500) 8%, transparent),
		-17.995px -17.995px 17.995px 0 color-mix(in oklab, var(--color-orange-500) 6%, transparent);
	-webkit-backdrop-filter: blur(17.995px);
	backdrop-filter: blur(17.995px);
}
[data-i~='kb-disc'] {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 146.7px;
	height: 146.7px;
	border-radius: 999px;
	background: white;
	box-shadow: 0 0 24px 0 color-mix(in oklab, var(--color-orange-500) 18%, transparent);
}
@media (max-width: 40rem) {
	[data-i~='kb-pill'] {
		left: 24px;
		padding: 28px;
	}
	[data-i~='kb-disc'] {
		width: 112px;
		height: 112px;
	}
}

/* ── Dashboard (D-0588): Foresight's hero — the product's quarterly forecast dashboard, only its left part on
   the board: it runs off the right side (fade-r) and the foot (fade). A title bar and a filter row in white over
   the dashboard's gray-50; three tiles, figures at a dashboard's 20; Forecast vs. plan as the product draws it —
   a bar a week, won to today in blue-800, projected to won after it in emerald-200, a line at today, the quota
   dashed across with its black tag; the month's forecast movement under it. No type under 12. */
[data-i~='card'][data-i~='db'] {
	top: 64px;
	right: 0;
	bottom: 0;
	/* D-0601: further in from the board's left. */
	left: 64px;
	/* D-0599: the dashboard's grey, whole at the top, clear at the foot. */
	--glass: var(--color-gray-50);
	--glass-foot: transparent;
	border: 0.5px solid var(--color-gray-200);
	outline: none;
	border-radius: 8px 8px 0 0;
	box-shadow: 0 -8px 40px 0 rgb(0 0 0 / var(--shade));
	font-size: 12px;
	line-height: 16px;
	color: var(--color-gray-950);
}
/* The dashboard is 760 wide; the card ends at the board's edge, under the side fade, and cuts the rest. */
[data-i~='card'][data-i~='db'] > * {
	width: 760px;
}
[data-i~='db-bar'] {
	display: flex;
	align-items: center;
	background: white;
	border-bottom: 0.5px solid var(--color-gray-200);
}
[data-i~='db-bar'] {
	gap: 10px;
	padding: 14px 16px;
}
[data-i~='db-bar'] .icon {
	font-size: 18px;
	color: var(--color-slate-600);
}
[data-i~='db-title'] {
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
}
[data-i~='db-body'] {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 12px;
	min-height: 0;
	padding: 16px;
}
[data-i~='db-tiles'] {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}
/* A tile and a panel: white, a gray-200 hairline, 6 corners. */
[data-i~='db-tile'],
[data-i~='db-panel'] {
	display: flex;
	flex-direction: column;
	background: white;
	border: 0.5px solid var(--color-gray-200);
	border-radius: 6px;
	/* D-0593: every tile and panel 16 on all four sides. */
	padding: 16px;
}
/* D-0591: a tile breathes, as the reference's do — its title, then 32 down its figure and its note, all at the left. */
[data-i~='db-tile'] {
	align-items: flex-start;
}
/* (Over the board's paragraph reset.) The figure 32 under the title, the note 4 under it; D-0595: everything
   starts where the padding ends — no handles. */
[data-i~='db-tile'] > [data-i~='db-figure'] {
	margin-top: 32px;
}
[data-i~='db-tile'] > [data-i~='db-note'] {
	margin-top: 4px;
}
/* D-0595: a card's first and last lines trimmed to their letters, so its 16 reads as 16 on all four sides. */
:is([data-i~='db-tile'], [data-i~='db-panel']) > :is([data-i~='db-tile-head'], [data-i~='db-note'], [data-i~='db-legend']) {
	text-box: trim-both cap alphabetic;
}
[data-i~='db-tile-head'] {
	display: flex;
	align-items: center;
	align-self: stretch;
	gap: 6px;
	font-weight: 500;
}
[data-i~='db-figure'] {
	font-weight: 600;
	font-size: 20px;
	line-height: 24px;
	letter-spacing: -0.4px;
}
[data-i~='db-note'] {
	display: flex;
	align-items: center;
	gap: 2px;
	color: var(--color-slate-500);
}
[data-i~='db-note'] .icon {
	font-size: 13px;
}
[data-i~='db-up'] {
	color: var(--color-emerald-600);
}
[data-i~='db-down'] {
	color: var(--color-rose-600);
}
/* Forecast vs. plan: the axis, the field — guides, a bar a week, today — the dates under it. */
[data-i~='db-panel'] {
	gap: 14px;
}
[data-i~='db-plot'] {
	display: flex;
	gap: 10px;
	/* D-0601: 24 lower. */
	height: 156px;
	/* D-0595: room over the tallest bar for its value. */
	margin-top: 12px;
	margin-bottom: 24px;
}
[data-i~='db-axis'] {
	position: relative;
	flex: none;
	/* D-0595: the product's full figures — $12,000,000. */
	width: 76px;
}
/* D-0593: the values left-aligned, on the panel's edge — where the legend under the graph starts. */
[data-i~='db-axis'] > span {
	position: absolute;
	left: 0;
	translate: 0 50%;
	line-height: 12px;
	color: var(--color-slate-500);
}
[data-i~='db-field'] {
	position: relative;
	flex: 1 1 auto;
}
[data-i~='db-guide'] {
	position: absolute;
	left: 0;
	right: 0;
	border-top: 0.5px solid var(--color-gray-100);
}
/* D-0595: the bars keep to the part of the dashboard the board shows — clear of the side fade — so the future's
   bars are seen beside the present's; the guides run on under the fade. */
[data-i~='db-bars'] {
	position: absolute;
	/* D-0601: in a little more, the dashboard standing further right. */
	inset: 0 40% 0 0;
	display: flex;
}
[data-i~='db-week'] {
	position: relative;
	flex: 1 1 0rem;
}
[data-i~='db-col'] {
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 28px;
	min-height: 2px;
	margin-left: -14px;
	border-radius: 2px 2px 0 0;
	transform-origin: bottom;
}
/* D-0595: as the product tells them apart — won (the present) in one colour, projected to won (the future) in
   another: in ours, emerald-600 and sky-300. */
[data-i~='db-col'][data-i~='won'] {
	background: var(--color-emerald-600);
}
[data-i~='db-col'][data-i~='ahead'] {
	background: var(--color-sky-300);
}
/* Each bar's value over it, as the product prints it. */
[data-i~='db-value'] {
	position: absolute;
	bottom: calc(100% + 4px);
	left: 50%;
	translate: -50% 0;
	white-space: nowrap;
	color: var(--color-slate-600);
}
[data-i~='db-date'] {
	position: absolute;
	top: calc(100% + 8px);
	left: 50%;
	translate: -50% 0;
	color: var(--color-slate-500);
}
[data-i~='db-today'] {
	position: absolute;
	top: -6px;
	bottom: 0;
	border-left: 1px solid var(--color-slate-300);
}
[data-i~='db-legend'] {
	display: flex;
	gap: 16px;
	color: var(--color-slate-600);
}
[data-i~='db-key'] {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
[data-i~='db-key']::before {
	content: '';
	width: 8px;
	height: 8px;
	border-radius: 2px;
}
[data-i~='db-key'][data-i~='won']::before {
	background: var(--color-emerald-600);
}
[data-i~='db-key'][data-i~='ahead']::before {
	background: var(--color-sky-300);
}
/* Forecast movement MTD: a bordered table, its head on gray-50. */
[data-i~='db-table'] {
	border: 0.5px solid var(--color-gray-200);
	border-radius: 4px;
	overflow: hidden;
}
[data-i~='db-row'] {
	display: grid;
	grid-template-columns: 1.4fr 1fr 0.8fr;
	padding: 10px 14px;
	border-top: 0.5px solid var(--color-gray-100);
}
[data-i~='db-row'][data-i~='db-th'] {
	border-top: none;
	background: var(--color-gray-50);
	color: var(--color-slate-500);
}
[data-i~='db-fade'] {
	height: 200px;
}
/* On arrival, once their panel has come, the bars grow from the axis one after another; then all stands. */
[data-stage]:not([data-scenes]):not([data-on]) [data-board] [data-i~='db-col'] {
	transform: scaleY(0);
}
[data-stage]:not([data-scenes])[data-on] [data-board] [data-i~='db-col'] {
	transition: transform var(--rg-motion-draw-duration) var(--rg-motion-draw-easing);
	transition-delay: calc(var(--rg-motion-hover-duration) + var(--rg-motion-reveal-duration) * 2 + var(--n, 0) * var(--rg-motion-reveal-stagger) * 2 + var(--i, 0) * var(--rg-motion-draw-stagger));
}

/* ── Watch (D-0574, D-0576 → D-0585; D-0583: no type under 12, but the initials' 11): Foresight's hero, after the product's deal screens and laid out as the Context
   Panel's pair: behind, low left, the deal's Signals (as pair-email stands); in front, high right, the open signal's
   panel with Kora's read (as pair-sidebar stands). Tags, chips and fields in the product's hand. */
/* D-0579, D-0580, D-0585: both cards end on one line, at the board's foot, where the fade has taken them whole, both glass white 100% → 25% (D-0581);
   the list stands higher, from 190. */
[data-i~='card'][data-i~='wt-list'] {
	top: 190px;
	bottom: 0;
	left: 32px;
	width: 300px;
	--glass: white;
	--glass-foot: rgb(255 255 255 / 0.25);
	box-shadow: 12px -12px 56px 0 rgb(0 0 0 / var(--shade));
}
[data-i~='wt-deal-name'] {
	flex: none;
	font-size: 12px;
	line-height: 16px;
	color: var(--color-slate-500);
}
[data-i~='wt-signal'] {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	padding: 20px 16px;
	border-top: 0.5px solid var(--color-slate-200);
}
/* D-0586: a signal reads in two groups — its kind, then 12 below, its title with its owner and date 4 under it;
   signals stand 40 apart, a divider between. */
[data-i~='wt-signal'] > [data-i~='wt-title'] {
	margin-top: 12px;
}
[data-i~='wt-signal'] > [data-i~='wt-meta'] {
	margin-top: 4px;
}
/* D-0584: the dividers stand whole, as the head's line does — the lower rows fade 50 / 30 in their words only. */
[data-i~='wt-signal']:is([data-i~='dim-50'], [data-i~='dim-30']) {
	opacity: 1;
}
[data-i~='wt-signal'][data-i~='dim-50'] > * {
	opacity: 0.5;
}
[data-i~='wt-signal'][data-i~='dim-30'] > * {
	opacity: 0.3;
}
/* A signal's kind, as the product tags it: tinted, its icon and its words. */
[data-i~='wt-tag'] {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 8px;
	border-radius: 3px;
	font-weight: 500;
	font-size: 12px;
	line-height: 16px;
	transition: background-color var(--rg-motion-reveal-duration) var(--rg-motion-state-easing), color var(--rg-motion-reveal-duration) var(--rg-motion-state-easing);
}
[data-i~='wt-tag'] .icon {
	font-size: 13px;
}
[data-i~='wt-tag'][data-i~='wt-pos'] {
	background: var(--color-emerald-50);
	color: var(--color-emerald-700);
}
[data-i~='wt-tag'][data-i~='wt-act'] {
	background: var(--color-sky-50);
	color: var(--color-sky-700);
}
[data-i~='wt-tag'][data-i~='wt-neg'] {
	background: var(--color-rose-50);
	color: var(--color-rose-600);
}
[data-i~='wt-title'] {
	font-weight: 500;
	font-size: 12px;
	line-height: 16px;
	letter-spacing: -0.2px;
	color: var(--color-gray-950);
}
[data-i~='wt-says'] {
	font-size: 12px;
	line-height: 16px;
	color: var(--color-slate-500);
}
[data-i~='wt-meta'] {
	display: flex;
	align-items: center;
	gap: 8px;
}
[data-i~='wt-chip'] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 20px;
	padding: 0 5px;
	border-radius: 3px;
	background: var(--color-gray-100);
	font-weight: 500;
	font-size: 11px;
	line-height: 1;
	color: var(--color-slate-600);
}
[data-i~='wt-due'] {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	line-height: 16px;
	color: var(--color-slate-500);
}
[data-i~='wt-due'] .icon {
	font-size: 13px;
}
/* In the panel the due date reads as a field's value (late, still rose). */
[data-i~='wt-fields'] [data-i~='wt-due'] {
	font-size: 12px;
	line-height: 20px;
	color: var(--color-gray-950);
}
[data-i~='wt-due'][data-late],
[data-i~='wt-fields'] [data-i~='wt-due'][data-late] {
	color: var(--color-rose-600);
}
/* D-0578: the panel stands short of the foot, its glass white 80% → clear. */
[data-i~='card'][data-i~='wt-panel'] {
	top: 64px;
	bottom: 0;
	right: 28px;
	width: 360px;
	--glass: white;
	--glass-foot: rgb(255 255 255 / 0.25);
	box-shadow: -12px -12px 56px 0 rgb(0 0 0 / var(--shade));
}
/* The panel's words wrap (the board's default is one line); its head's title ends in an ellipsis before the close. */
[data-i~='wt-panel'] :is([data-i~='wt-says'], [data-i~='wt-lead'], [data-i~='wt-why']) {
	white-space: normal;
}
[data-i~='wt-panel'] > [data-i~='head'] > [data-i~='head-title'] {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
[data-i~='wt-panel'] > [data-i~='head'] .icon {
	flex: none;
	font-size: 16px;
	color: var(--color-slate-400);
}
/* D-0578: groups 20 apart — the signal, its fields, Kora's read, the actions — each tight within. */
[data-i~='wt-body'] {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: stretch;
	gap: 20px;
	width: 100%;
	min-height: 0;
	overflow: hidden;
	padding: 20px;
}
[data-i~='wt-top'] {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}
[data-i~='wt-top'] > [data-i~='wt-says'] {
	font-size: 12px;
	line-height: 18px;
}
[data-i~='wt-fields'] {
	display: grid;
	grid-template-columns: 96px 1fr;
	align-items: center;
	row-gap: 6px;
	width: 100%;
	font-size: 12px;
	line-height: 20px;
	color: var(--color-gray-950);
}
[data-i~='wt-fields'] > :nth-child(odd) {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--color-slate-500);
}
[data-i~='wt-fields'] .icon {
	font-size: 14px;
	color: var(--color-slate-400);
}
/* D-0580: the owner's chip, its words centred in it — 4 above and below. */
[data-i~='wt-owner'] {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	line-height: 16px;
	border: 0.5px solid var(--color-gray-200);
	border-radius: 3px;
	background: white;
}
/* Kora's read: her mark and "Kora reads" in capitals, her lead in the first person, and her three points. */
[data-i~='wt-reads'] {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
	padding: 16px;
	border: 0.5px solid var(--color-gray-100);
	border-radius: 4px;
	background: rgb(255 255 255 / 0.8);
}
[data-i~='wt-reads-head'] {
	display: flex;
	align-items: center;
	gap: 6px;
	font-weight: 500;
	font-size: 12px;
	line-height: 16px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--color-slate-500);
}
[data-i~='wt-lead'] {
	font-weight: 500;
	font-size: 12px;
	line-height: 18px;
	color: var(--color-gray-950);
}
[data-i~='wt-why'] {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	padding: 0 0 0 14px;
	list-style: disc;
	font-size: 12px;
	line-height: 18px;
	color: var(--color-slate-600);
}
[data-i~='wt-why'] li::marker {
	color: var(--color-slate-300);
}
[data-i~='wt-why'] b {
	font-weight: 500;
	color: var(--color-gray-950);
}
[data-i~='wt-btn'] {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 5px;
	height: 28px;
	padding: 0 8px;
	border: 0.5px solid var(--color-gray-200);
	border-radius: 4px;
	background: white;
	font-weight: 500;
	font-size: 12px;
	line-height: 1;
	color: var(--color-gray-950);
}
[data-i~='wt-btn'] .icon {
	font-size: 14px;
}
/* D-0582: the bar's two buttons share its width. */
[data-i~='wt-bar'] > [data-i~='wt-btn'] {
	flex: 1 1 0rem;
	justify-content: center;
}
[data-i~='wt-btn'][data-i~='primary'] {
	border-color: transparent;
	background: var(--color-emerald-700);
	color: white;
}

/* D-0580: the signal's history, as the product lists it — a label, then each event's mark and words, a rule
   between the marks; it runs on under the bar. */
[data-i~='wt-history'] {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-top: 16px;
	border-top: 0.5px solid var(--color-gray-100);
}
[data-i~='wt-history-head'] {
	display: flex;
	align-items: center;
	gap: 6px;
	font-weight: 500;
	font-size: 12px;
	line-height: 16px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--color-slate-500);
}
[data-i~='wt-history-head'] .icon {
	font-size: 14px;
}
[data-i~='wt-event'] {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 500;
	font-size: 12px;
	line-height: 16px;
	color: var(--color-gray-950);
}
[data-i~='wt-event-mark'] {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 4px;
	background: var(--color-emerald-50);
	color: var(--color-emerald-700);
}
[data-i~='wt-event-mark'] .icon {
	font-size: 14px;
}
/* D-0580, D-0582, D-0583, D-0585, D-0587: the panel's bar — a square-cornered frame of its own, the panel's width (right 28, 360), 72 above the
   board's foot; laid after the fade so the fade leaves it whole while the panel fades under it. */
[data-i~='wt-bar'] {
	position: absolute;
	right: 28px;
	bottom: 72px;
	display: flex;
	align-items: center;
	gap: 8px;
	width: 360px;
	padding: 8px;
	border: 0.5px solid var(--color-gray-200);
	background: white;
	box-shadow: 0 8px 24px 0 rgb(0 0 0 / var(--shade));
}
[data-i~='wt-fade'] {
	height: 200px;
}

/* ── Foresight (D-0236): the hero's Outlook (drawn), and the feature section's Opportunity, Health
   (drawn) and Focus, ported from Landing Pages Figma 1053:13772 and 1053:13546. Every measure below is
   the frame's, or drawn in its hand. Shared first: an account's initials on a tinted square, its name
   in capitals, and the grey button that takes the next step (1053:13563). */
[data-i~='fo-name'] {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	font-size: 10px;
	line-height: 16px;
	text-transform: uppercase;
	color: rgb(11 11 11 / 0.8);
}
[data-i~='fo-mono'] {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border: 0.5px solid;
	font-weight: 500;
	font-size: 9.143px;
	line-height: 15.238px;
	text-transform: none;
}
[data-i~='fo-mono'][data-i~='sky'] {
	border-color: var(--color-sky-100);
	background: var(--color-sky-50);
	color: var(--color-sky-600);
}
[data-i~='fo-mono'][data-i~='orange'] {
	border-color: var(--color-orange-100);
	background: var(--color-orange-50);
	color: var(--color-orange-500);
}
/* The frame's third is pink; the palette's nearest is rose. */
[data-i~='fo-mono'][data-i~='rose'] {
	border-color: var(--color-rose-100);
	background: var(--color-rose-50);
	color: var(--color-rose-600);
}
[data-i~='fo-act'] {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	height: 24px;
	padding: 0 8px;
	background: var(--color-gray-100);
	font-weight: 500;
	font-size: 12px;
	line-height: 14.4px;
	letter-spacing: -0.5px;
	color: var(--color-gray-950);
}
[data-i~='fo-act'] .icon {
	font-size: 16px;
}

/* Opportunity — one record, Kora's word on why it slips, and its summary (1053:13772). It runs off
   the foot and off the right, into the ground. */
[data-i~='card'][data-i~='op-card'] {
	top: 101px;
	left: 93px;
	width: 507px;
	height: 630px;
	box-shadow:
		0 -16px 40px 0 rgb(0 0 0 / var(--shade)),
		-4px 0 40px 0 rgb(0 0 0 / var(--shade));
}
[data-i~='op-card'] > [data-i~='head'] {
	border-bottom-color: var(--color-gray-200);
}
[data-i~='op-top'] {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	padding: 20px 20px 20.5px;
	border-bottom: 0.5px solid var(--color-gray-200);
}
[data-i~='op-name'] {
	display: flex;
	align-items: center;
	gap: 16px;
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
}
[data-i~='op-mono'] {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: var(--color-sky-50);
	font-weight: 500;
	font-size: 9.6px;
	line-height: 16px;
	color: var(--color-sky-600);
}
/* D-0541: the Opportunity card's glass runs from white to 25%. */
[data-i~='card'][data-i~='op-card'] {
	--glass: white;
	--glass-foot: rgb(255 255 255 / 0.25);
}
/* D-0540: the initials' tint turns with the account — sky, emerald, amber. */
[data-i~='op-mono'][data-tone='emerald'] {
	background: var(--color-emerald-50);
	color: var(--color-emerald-700);
}
[data-i~='op-mono'][data-tone='amber'] {
	background: var(--color-amber-50);
	color: var(--color-amber-700);
}
[data-i~='op-loss'] {
	display: inline-flex;
	align-items: center;
	gap: 5.571px;
	padding: 5.571px 9.286px 5.571px 7.429px;
	border-radius: 3.505px;
	background: color-mix(in oklab, var(--color-rose-50) 80%, transparent);
	-webkit-backdrop-filter: blur(17.523px);
	backdrop-filter: blur(17.523px);
	font-size: 11.143px;
	line-height: 1.2;
	letter-spacing: 0.4643px;
	text-transform: uppercase;
	color: var(--color-rose-700);
}
[data-i~='op-loss'] .icon {
	font-size: 14.857px;
	/* D-0542: the status's icon filled. */
	font-variation-settings: 'FILL' 1;
}
/* D-0563, D-0564: the status catches the eye once — a streak of its own colour runs round its border and fades, as
   Kora's pill shines (D-0147), but once round — as the card arrives and at each turn. */
@property --op-turn {
	syntax: '<angle>';
	inherits: false;
	initial-value: 0deg;
}
[data-i~='op-loss'] {
	position: relative;
	--op-trace: var(--color-rose-300);
}
[data-i~='op-loss'][data-tone='risk'] {
	--op-trace: var(--color-amber-300);
}
[data-i~='op-loss'][data-tone='win'] {
	--op-trace: var(--color-emerald-300);
}
[data-i~='op-loss']::after {
	content: '';
	position: absolute;
	inset: -1.5px;
	padding: 1.5px;
	border-radius: 5px;
	/* D-0565: the streak in a lighter shade of the status's colour (300). */
	background: conic-gradient(from var(--op-turn), transparent 0 55%, color-mix(in oklab, var(--op-trace) 40%, transparent) 75%, var(--op-trace) 92%, transparent 100%);
	-webkit-mask: linear-gradient(black 0 0) content-box, linear-gradient(black 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(black 0 0) content-box, linear-gradient(black 0 0);
	mask-composite: exclude;
	opacity: 0;
	pointer-events: none;
}
@keyframes op-trace-a {
	0% {
		--op-turn: 0deg;
		opacity: 0;
	}
	15%,
	80% {
		opacity: 1;
	}
	100% {
		--op-turn: 360deg;
		opacity: 0;
	}
}
@keyframes op-trace-b {
	0% {
		--op-turn: 0deg;
		opacity: 0;
	}
	15%,
	80% {
		opacity: 1;
	}
	100% {
		--op-turn: 360deg;
		opacity: 0;
	}
}
@media (prefers-reduced-motion: no-preference) {
	[data-i~='op-loss'][data-glint='a']::after {
		animation: op-trace-a calc(var(--rg-motion-draw-duration) * 2) linear 1;
	}
	[data-i~='op-loss'][data-glint='b']::after {
		animation: op-trace-b calc(var(--rg-motion-draw-duration) * 2) linear 1;
	}
}
/* D-0542: each case's status in its own colour — a loss in rose (as drawn), a risk in amber, a win in emerald. */
[data-i~='op-loss'][data-tone='risk'] {
	background: color-mix(in oklab, var(--color-amber-50) 80%, transparent);
	color: var(--color-amber-700);
}
[data-i~='op-loss'][data-tone='win'] {
	background: color-mix(in oklab, var(--color-emerald-50) 80%, transparent);
	color: var(--color-emerald-700);
}
[data-i~='op-kora'] {
	display: flex;
	width: 467px;
	flex-direction: column;
	gap: 12px;
	padding: 14px;
	border: 1px solid var(--color-gray-100);
	border-radius: 2px;
	background: white;
}
[data-i~='op-kora-head'] {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 500;
	font-size: 13px;
	line-height: 16px;
}
[data-i~='op-why'] {
	font-size: 13px;
	line-height: 20px;
	white-space: normal;
	color: var(--color-gray-950);
}
[data-i~='op-why'] b {
	font-weight: 600;
}
[data-i~='op-body'] {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 20px;
}
[data-i~='op-body'] [data-i~='tab'] {
	font-size: 14px;
	line-height: 17.835px;
}
[data-i~='op-part'] {
	display: flex;
	flex-direction: column;
	gap: 16px;
	font-weight: 500;
	font-size: 12px;
	line-height: 19px;
	letter-spacing: 0.04px;
	white-space: normal;
	color: var(--color-gray-900);
}
[data-i~='op-part'] > p + p + p {
	margin-top: 3px;
}
[data-i~='op-part-head'] {
	font-weight: 600;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 0;
	color: rgb(32 32 32);
}
[data-i~='op-edge'] {
	position: absolute;
	top: 0;
	right: 0;
	width: 62.752px;
	height: 700px;
	background: linear-gradient(to right, transparent, var(--ground));
	pointer-events: none;
}
[data-i~='op-fade'] {
	bottom: -24px;
	height: 385px;
}

/* Focus — Kora, asked which clients to focus on (1053:13546). Her card, head and answer are Forecast's;
   here, the accounts under it. */
[data-i~='fo-answer'] b {
	font-weight: 500;
}
[data-i~='fo-answer'] {
	white-space: normal;
}
[data-i~='fo-acct'] {
	display: flex;
	width: 100%;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	padding: 16px;
	border: 1px solid var(--color-gray-100);
	border-radius: 4px;
	background: rgb(255 255 255 / 0.8);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
}
[data-i~='fo-says'] {
	margin-bottom: -4px;
	height: 40px;
	font-style: italic;
	font-size: 13px;
	line-height: 20px;
	letter-spacing: -0.3469px;
	white-space: normal;
	color: var(--color-gray-500);
}
[data-i~='fo-fig'] {
	color: var(--color-gray-950);
}

/* Health — the week's relationships, sorted by what they need (drawn in Focus's hand): a count for
   each kind, then one relationship of each, with its three signals and its next step. */
[data-i~='card'][data-i~='rh-card'] {
	top: 64px;
	width: 472px;
	height: 636px;
	border-radius: 4px 4px 0 0;
	box-shadow: 0 -12px 32px 0 rgb(0 0 0 / var(--shade));
}
[data-i~='rh-week'] {
	flex: none;
	font-size: 12px;
	line-height: 20px;
	color: var(--color-slate-500);
}
[data-i~='rh-sum'] {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	padding: 16px 20px;
	border-bottom: 0.5px solid var(--color-gray-100);
}
[data-i~='rh-count'] {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 10px 12px;
	border: 1px solid var(--color-gray-100);
	border-radius: 4px;
	background: rgb(255 255 255 / 0.8);
}
[data-i~='rh-count'] > :first-child {
	font-weight: 600;
	font-size: 20px;
	line-height: 28px;
	letter-spacing: -0.3469px;
	color: rgb(11 11 11);
}
[data-i~='rh-count'] > :last-child {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	line-height: 16px;
	color: var(--color-gray-500);
}
[data-i~='rh-dot'] {
	width: 6px;
	height: 6px;
	/* D-0567: a square, as the brand's cells (was round). */
	border-radius: 0;
	background: currentColor;
}
[data-i~='act'] [data-i~='rh-dot'] {
	color: var(--color-rose-500);
}
[data-i~='watch'] [data-i~='rh-dot'] {
	color: var(--color-amber-500);
}
[data-i~='calm'] [data-i~='rh-dot'] {
	color: var(--color-emerald-500);
}
[data-i~='rh-list'] {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 20px;
}
[data-i~='rh-rel'] {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	padding: 16px;
	border: 1px solid var(--color-gray-100);
	border-radius: 4px;
	background: rgb(255 255 255 / 0.8);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
}
[data-i~='rh-rel'] > [data-i~='fo-name'] {
	width: 100%;
}
[data-i~='rh-state'] {
	margin-left: auto;
	padding: 2px 8px;
	border-radius: 3.505px;
	font-weight: 500;
	font-size: 10px;
	line-height: 16px;
	letter-spacing: 0.4px;
}
[data-i~='rh-state'][data-i~='act'] {
	background: color-mix(in oklab, var(--color-rose-50) 80%, transparent);
	color: var(--color-rose-700);
}
[data-i~='rh-state'][data-i~='watch'] {
	background: color-mix(in oklab, var(--color-amber-50) 80%, transparent);
	color: var(--color-amber-700);
}
[data-i~='rh-state'][data-i~='calm'] {
	background: color-mix(in oklab, var(--color-emerald-50) 80%, transparent);
	color: var(--color-emerald-700);
}
[data-i~='rh-signals'] {
	display: grid;
	width: 100%;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}
[data-i~='rh-signals'] > div > :first-child {
	opacity: 0.7;
	font-size: 11px;
	line-height: 16px;
	letter-spacing: -0.35px;
	text-transform: uppercase;
	color: rgb(11 11 11);
}
[data-i~='rh-signals'] > div > :last-child {
	display: flex;
	align-items: center;
	gap: 4px;
	font-weight: 600;
	font-size: 13px;
	line-height: 20px;
	letter-spacing: -0.3469px;
}
[data-i~='rh-signals'] .icon {
	font-size: 16px;
}
[data-i~='rh-down'] {
	color: var(--color-rose-700);
}
[data-i~='rh-up'] {
	color: var(--color-emerald-700);
}
[data-i~='rh-fade'] {
	height: 300px;
}
/* D-0540, D-0547: a relationship as Landing Pages Figma 1522:10336 draws it — white at 80% over a 20 blur, a gray-100
   hairline, 16 in and 16 apart. Its head: the initials, the name at 14 bold (near-black at 80%), and its state — a filled
   icon and the words at 10 medium in capitals, tracked 0.46, on its tint at 80%. Its signals three across, each 100
   wide: the name at 10 medium in capitals, tracked 1, gray-700; under it 6 apart the trend and the figure at 14
   semibold. Its foot, under a dashed gray-100 hairline 8 above: "Next step:" and the step at 12 medium, and the grey
   arrow button (gray-100, 24 tall, 8 in) at the far end. */
[data-i~='rh-rel'] {
	gap: 16px;
}
[data-i~='rh-rel'] > [data-i~='fo-name'] {
	text-transform: none;
	font-weight: 700;
	/* D-0566: 12 (was 14). */
	font-size: 12px;
	line-height: 16px;
	letter-spacing: 0;
	color: rgb(11 11 11 / 0.8);
}
[data-i~='rh-rel'] [data-i~='rh-state'] {
	display: inline-flex;
	align-items: center;
	gap: 5.571px;
	/* D-0566: hugging its words — 4 above and below, 8 at the sides. */
	width: fit-content;
	height: auto;
	padding: 4px 8px;
	-webkit-backdrop-filter: blur(17.523px);
	backdrop-filter: blur(17.523px);
	font-weight: 500;
	font-size: 10px;
	line-height: 1.2;
	letter-spacing: 0.4643px;
	text-transform: uppercase;
}
[data-i~='rh-state'] .icon {
	font-size: 12px;
	font-variation-settings: 'FILL' 1;
}
[data-i~='rh-signals'] {
	display: flex;
	justify-content: space-between;
	/* D-0548: 8 more above the signals, as the frame now has it. */
	padding-top: 8px;
}
[data-i~='rh-signals'] > div {
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 100px;
}
[data-i~='rh-signals'] > div > :first-child {
	opacity: 1;
	font-weight: 500;
	font-size: 10px;
	line-height: 16px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--color-gray-700);
}
[data-i~='rh-signals'] > div > :last-child {
	font-size: 14px;
	line-height: 20px;
	letter-spacing: 0;
}
[data-i~='rh-signals'] .icon {
	font-size: 14.857px;
}
[data-i~='rh-next'] {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding-top: 8px;
	/* D-0552: a solid gray-200 hairline over the next step (was dashed gray-100). */
	border-top: 0.5px solid var(--color-gray-200);
	font-weight: 500;
	font-size: 12px;
	line-height: 14.4px;
	letter-spacing: -0.5px;
	color: var(--color-gray-950);
}
[data-i~='rh-next'] > p {
	display: flex;
	gap: 6px;
}
[data-i~='rh-go'] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 24px;
	padding: 0 8px;
	background: var(--color-gray-100);
}
[data-i~='rh-go'] .icon {
	font-size: 16px;
}

/* Outlook — the hero's two halves (drawn): what is happening this week, and what to do next, the
   second card over the foot of the first. */
[data-i~='card'][data-i~='ol-card'] {
	width: 400px;
	border-radius: 4px;
	box-shadow: 0 12px 32px 0 rgb(0 0 0 / var(--shade));
}
[data-i~='ol-card'][data-i~='now'] {
	top: 64px;
	left: 32px;
}
[data-i~='ol-card'][data-i~='next'] {
	top: 322px;
	left: 168px;
}
[data-i~='ol-row'],
[data-i~='ol-step'] {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 20px;
	border-bottom: 1px solid var(--color-slate-100);
}
[data-i~='ol-row']:last-child,
[data-i~='ol-step']:last-child {
	border-bottom: 0;
}
[data-i~='ol-mark'] {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: 0.902px solid var(--color-slate-200);
	background: white;
	font-size: 18px;
	color: var(--color-blue-600);
}
[data-i~='ol-meta'] {
	width: 100%;
	font-size: 11px;
	line-height: 16px;
	color: var(--color-slate-500);
}
[data-i~='ol-size'] {
	flex: none;
	font-weight: 600;
	font-size: 13px;
	line-height: 20px;
	letter-spacing: -0.3469px;
	color: rgb(11 11 11);
}
[data-i~='ol-num'] {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 99px;
	background: var(--color-slate-100);
	font-weight: 600;
	font-size: 12px;
	line-height: 16px;
	color: rgb(28 32 36);
}
[data-i~='ol-go'] {
	flex: none;
	font-size: 16px;
	color: var(--color-slate-500);
}
[data-i~='ol-fade'] {
	height: 160px;
}

/* ── Profile (D-0362): one account's profile in the Revenue Grid sidebar — Context's panel (362 wide,
   standing at the right, running off the foot) in the Outlook scene's hand: the account at its head
   with its health, the people on it, what changed and what to do next, each row the Outlook rows'. */
[data-i~='card'][data-i~='prof-side'] {
	top: 24px;
	right: 32px;
	width: 362px;
	padding-bottom: 24px;
	box-shadow: -12px 12px 56px 0 rgb(0 0 0 / var(--shade));
}
[data-i~='prof-account'] {
	gap: 12px;
	padding: 16px 20px;
}
[data-i~='prof-mark'] {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 4px;
	background: linear-gradient(to bottom right, var(--color-sky-100), var(--color-emerald-100));
	font-weight: 600;
	font-size: 12px;
	line-height: 16px;
	letter-spacing: 0.3px;
	color: var(--color-emerald-800);
}
[data-i~='prof-name'] {
	font-weight: 600;
	font-size: 14px;
	line-height: 20px;
	color: rgb(28 32 36);
}
[data-i~='prof-kind'] {
	font-size: 11px;
	line-height: 16px;
	color: var(--color-slate-500);
}
/* The health, as the Context sidebar's "Email is saved" band: the state in bold, then why. */
[data-i~='prof-health'] {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 10px 12px;
	border-radius: 2px;
	background: rgb(248 250 248);
	font-size: 12px;
	line-height: 16px;
	color: var(--color-slate-600);
}
[data-i~='prof-health'] b {
	font-weight: 600;
	color: rgb(28 32 36);
}
[data-i~='prof-label'] {
	padding: 12px 20px 4px;
	font-weight: 500;
	font-size: 11px;
	line-height: 14px;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: var(--color-slate-400);
}
[data-i~='prof-row'] {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 20px;
	border-bottom: 1px solid var(--color-slate-100);
}
[data-i~='prof-row'] [data-i~='entry-title'],
[data-i~='prof-row'] [data-i~='ol-meta'] {
	overflow: hidden;
	text-overflow: ellipsis;
}
[data-i~='prof-row'] [data-i~='entry-title'] {
	font-size: 13px;
	line-height: 18px;
}
[data-i~='prof-face'] {
	width: 32px;
	height: 32px;
	border-radius: 4px;
}
[data-i~='prof-touch'] {
	flex: none;
	font-size: 11px;
	line-height: 16px;
	color: var(--color-slate-500);
}
[data-i~='prof-side'] [data-i~='ol-mark'] {
	width: 28px;
	height: 28px;
	border-radius: 4px;
	font-size: 16px;
}
[data-i~='prof-side'] [data-i~='pill'] {
	padding: 4px 10px;
	font-size: 11px;
	line-height: 14px;
}
/* Where a step is pushed: the tool's logo on a white tile. */
[data-i~='prof-to'] {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border: 0.5px solid var(--color-slate-200);
	border-radius: 4px;
	background: white;
}
[data-i~='prof-to'] img {
	width: 16px;
	height: 16px;
	object-fit: contain;
}
[data-i~='prof-fade'] {
	height: 180px;
}

/* ── Kora AI (D-0246, D-0247): the hero's ask, and the Recover and Proceed scenes, ported from Landing
   Pages Figma 1093:14083, 1093:14209 and 1093:14338 in the hand of the Forecast scene. Every measure
   below is the frame's (the Recover card at 488 of the board, the frame's 554 at 0.88). */

/* The hero's ask (1093:14085, D-0251): her mark, a suggestion and the arrow that sends it, on a glass
   pill that glows warm — the frame's measures: 8.8 round, 8.8 between her mark and the words, 52 to the
   arrow; the words dark at the start and grey by the end; the arrow disc peach fading to the subtle
   ground, a white hairline, a soft drop shadow, and the arrow in Kora's gradient. */
[data-i~='hero-ask'] {
	display: inline-flex;
	align-items: center;
	gap: 52px;
	padding: 9px;
	border: 1px solid var(--color-neutral-100);
	border-radius: 999px;
	background: linear-gradient(to right, rgb(255 255 255 / 0.6) 50%, rgb(255 255 255 / 0.2));
	-webkit-backdrop-filter: blur(32px);
	backdrop-filter: blur(32px);
	box-shadow: 0 29px 83px 0 var(--color-orange-200);
	font-family: Inter, sans-serif;
	font-size: 18px;
	line-height: 31px;
	letter-spacing: -0.55px;
	white-space: nowrap;
}
/* Her mark on a disc like the arrow's, white (D-0252). */
[data-i~='hero-ask-kora'] {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-right: -43px;
	border: 1px solid white;
	border-radius: 999px;
	background: linear-gradient(to bottom, white, var(--color-slate-50));
	box-shadow: 0 13px 75px 0 rgb(0 0 0 / 0.25);
}
/* The words start where the line starts and grow to the right as they are typed (D-0250), each
   letter out of a blur; the line runs from the strong text colour to the muted. */
/* D-0273: the words run from gray-800 at the start to gray-500 at the end letter by letter — each
   letter's colour mixed by where it stands (`--p`, 0–100), never a background clipped to text: a
   clipped gradient over letters that blur and move left a stale glyph painted over the next ask. */
[data-i~='hero-ask-words'] {
	text-align: left;
	white-space: pre;
	color: var(--color-gray-800);
}
[data-i~='hero-ask-words'] > span {
	display: inline-block;
	color: color-mix(in oklab, var(--color-gray-800), var(--color-gray-500) calc(var(--p, 0) * 1%));
	transition-property: opacity, filter, translate;
	transition-duration: var(--rg-motion-enter-duration);
	transition-timing-function: var(--rg-motion-enter-easing);
}
[data-i~='hero-ask-words'] > span[data-out] {
	opacity: 0;
	filter: blur(var(--blur-xs));
	translate: 0 var(--rg-motion-enter-distance);
}
[data-i~='hero-ask-go'] {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid white;
	border-radius: 999px;
	background: linear-gradient(to bottom, var(--color-orange-200), var(--color-slate-50));
	box-shadow: 0 13px 75px 0 rgb(0 0 0 / 0.25);
	font-size: 20px;
}
/* The arrow pressed before each ask is sent (D-0258): down to the pill's send scale in the state
   role's time, and back — a press the eye can see, where the press role's 2% could not be. */
[data-i~='hero-ask-go'] {
	--send-scale: 0.86;
	transition: scale var(--rg-motion-state-duration) var(--rg-motion-state-easing), translate var(--rg-motion-state-duration) var(--rg-motion-state-easing), filter var(--rg-motion-state-duration) var(--rg-motion-state-easing);
}
[data-i~='hero-ask-go'][data-press] {
	scale: var(--send-scale);
	translate: 0 1px;
	filter: brightness(0.92);
}
[data-i~='hero-ask-go'] .icon {
	background-image: var(--rg-kora-gradient);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
}
@media (max-width: 40rem) {
	[data-i~='hero-ask'] {
		gap: 16px;
		font-size: 15px;
	}
	[data-i~='hero-ask-kora'] {
		margin-right: -8px;
	}
}

/* The Context Gateway's ask (D-0519, after attio.com/platform/mcp): the same glass pill in the brand's
   tone, its shadows subtle — a faint emerald lift under the pill, a hairline lift under its discs. The
   left disc holds the asking tool's logo, each blur-changing into the next as the words go (the kit's
   blur-change, D-0133). The arrow takes the asking tool's colours from its logo (D-0520) — the disc
   fading from a pale tint, the arrow in a gradient of two of the logo's steps — and blends from one tool's
   to the next over a reveal, through registered properties so the gradients themselves can move. */
@property --ask-tint {
	syntax: '<color>';
	inherits: true;
	initial-value: transparent;
}
@property --ask-from {
	syntax: '<color>';
	inherits: true;
	initial-value: transparent;
}
@property --ask-to {
	syntax: '<color>';
	inherits: true;
	initial-value: transparent;
}
[data-i~='hero-ask'][data-i~='brand'] {
	--ask-tint: var(--color-emerald-100);
	--ask-from: var(--color-emerald-600);
	--ask-to: var(--color-sky-500);
	box-shadow: 0 8px 24px 0 color-mix(in oklab, var(--color-emerald-500) 8%, transparent);
	transition-property: --ask-tint, --ask-from, --ask-to;
	transition-duration: var(--rg-motion-reveal-duration);
	transition-timing-function: var(--rg-motion-reveal-easing);
}
[data-i~='hero-ask'][data-tone='claude'] {
	--ask-tint: var(--color-orange-100);
	--ask-from: var(--color-orange-500);
	--ask-to: var(--color-orange-700);
}
[data-i~='hero-ask'][data-tone='chatgpt'] {
	--ask-tint: var(--color-gray-200);
	--ask-from: var(--color-gray-700);
	--ask-to: var(--color-gray-950);
}
[data-i~='hero-ask'][data-tone='gemini'] {
	--ask-tint: var(--color-blue-100);
	--ask-from: var(--color-blue-500);
	--ask-to: var(--color-purple-500);
}
/* D-0533: Kora's — her gradient's two ends over the peach of her own pill. */
[data-i~='hero-ask'][data-tone='kora'] {
	--ask-tint: var(--color-orange-200);
	--ask-from: var(--color-orange-500);
	--ask-to: var(--color-purple-400);
}
[data-i~='hero-ask'][data-tone='copilot'] {
	--ask-tint: var(--color-sky-100);
	--ask-from: var(--color-sky-500);
	--ask-to: var(--color-rose-500);
}
[data-i~='hero-ask-client'] {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin-right: -43px;
	border: 1px solid white;
	border-radius: 999px;
	background: linear-gradient(to bottom, white, var(--color-slate-50));
	box-shadow: 0 2px 8px 0 rgb(0 0 0 / 0.08);
}
/* Each asker's mark — a logo, or Kora's own mark (D-0533) — stacked in the disc, the asking one shown. */
[data-i~='hero-ask-client'] > * {
	grid-area: 1 / 1;
	display: grid;
	place-items: center;
	opacity: 0;
	filter: blur(var(--blur-xs));
	transition-property: opacity, filter;
	transition-duration: var(--rg-motion-reveal-duration);
	transition-timing-function: var(--rg-motion-reveal-easing);
}
[data-i~='hero-ask-client'] > [data-on] {
	opacity: 1;
	filter: none;
}
[data-i~='hero-ask-client'] > img {
	width: 22px;
	height: 22px;
	object-fit: contain;
}
/* D-0522: the pill is as long as the heading's first line (set by HomeHero's script); the words fill
   it, so the arrow stands at its end. */
[data-i~='hero-ask'][data-i~='brand'] [data-i~='hero-ask-words'] {
	flex: 1;
}
/* D-0521: the Gateway's arrow is smaller — 36, its arrow 16 — and casts no shadow. */
[data-i~='hero-ask'][data-i~='brand'] [data-i~='hero-ask-go'] {
	width: 36px;
	height: 36px;
	background: linear-gradient(to bottom, var(--ask-tint), var(--color-slate-50));
	box-shadow: none;
	font-size: 16px;
}
[data-i~='hero-ask'][data-i~='brand'] [data-i~='hero-ask-go'] .icon {
	background-image: linear-gradient(to bottom, var(--ask-from), var(--ask-to));
}
@media (max-width: 40rem) {
	[data-i~='hero-ask-client'] {
		margin-right: -8px;
	}
}

/* Recover — Kora, asked how to recover a stalled deal (1093:14209): the kit's Kora widget (fc-*), with
   the source chip, the account's lines and its signals of its own. */
[data-i~='rv-from'] {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: -4px;
	padding: 4px 12px 4px 6px;
	border: 1px solid var(--color-neutral-100);
	border-radius: 4px;
	background: rgb(255 255 255 / 0.8);
	font-size: 11px;
	line-height: 16px;
	letter-spacing: -0.3469px;
	color: rgb(11 11 11);
}
[data-i~='rv-from'] > span:first-child {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	border-radius: 3px;
	background: var(--color-neutral-50);
}
[data-i~='rv-from'] img {
	width: 11.4px;
	height: 8px;
}
[data-i~='rv-account'] {
	margin-top: -4px;
	font-weight: 600;
	font-size: 13px;
	line-height: 20px;
	letter-spacing: -0.3469px;
}
[data-i~='rv-state'] {
	margin-top: -8px;
	font-size: 13px;
	line-height: 20px;
	letter-spacing: -0.3469px;
}
[data-i~='rv-signals'] {
	display: flex;
	width: 100%;
	flex-direction: column;
	gap: 8px;
}
[data-i~='rv-signals'] > p {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	font-size: 11px;
	line-height: 16px;
	letter-spacing: -0.3469px;
}
[data-i~='rv-signals'] img {
	width: 12px;
	height: 12px;
	margin-top: 2px;
}
[data-i~='rv-next'] {
	font-size: 13px;
	line-height: 20px;
	letter-spacing: -0.3469px;
}
/* D-0253: on the lifted ground (D-0251) the window's glass is whiter and blurs more — 88% white, 80% at the
   foot, over the 3xl blur (the kit's 55 / 25 over 2xl) — so her colours show through only softly, as the frame draws it. */
[data-i~='card'][data-i~='rv-card'] {
	--glass: rgb(255 255 255 / 0.88);
	--glass-foot: rgb(255 255 255 / 0.8);
	--glass-blur: var(--blur-3xl);
}
/* Her answer and the step run to the card's width here, as the frame draws them. */
[data-i~='rv-card'] [data-i~='fc-answer'],
[data-i~='rv-card'] [data-i~='rv-next'] {
	white-space: normal;
}

/* Proceed — her answer, faded behind the choice she offers (1093:14338): the kit's Kora card twice —
   her window at three tenths, the choice whole over it. */
[data-i~='card'][data-i~='pr-side'] {
	top: 24px;
	width: 424px;
	height: 609px;
	box-shadow: none;
}
[data-i~='pr-side'] > [data-i~='fc-body'] {
	opacity: 0.3;
}
[data-i~='pr-side'] [data-i~='fc-answer'] {
	white-space: normal;
}
[data-i~='card'][data-i~='pr-card'] {
	top: 244px;
	width: 526px;
	height: auto;
	border-radius: 4px;
	box-shadow: 0 23px 41px 0 rgb(0 0 0 / var(--shade));
}
[data-i~='pr-card'] > [data-i~='fc-head'] > p {
	flex: 1 0 0rem;
	min-width: 1px;
}
[data-i~='pr-hint'] {
	flex: none;
	font-weight: 400;
	font-size: 11px;
	line-height: 16px;
	color: var(--color-neutral-500);
}
[data-i~='pr-option'] {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	width: 100%;
	padding: 14px 20px;
	border-top: 0.5px solid var(--color-neutral-100);
	color: rgb(11 11 11);
}
[data-i~='pr-num'] {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	margin-top: 1px;
	border-radius: 6px;
	background: var(--color-neutral-100);
	font-weight: 600;
	font-size: 13px;
	color: var(--color-neutral-600);
}
[data-i~='pr-words'] {
	display: flex;
	flex: 1 0 0rem;
	flex-direction: column;
	gap: 2px;
	min-width: 1px;
}
[data-i~='pr-words'] > span:first-child {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: -0.3469px;
}
[data-i~='pr-words'] > span:last-child {
	font-size: 11px;
	line-height: 16px;
	letter-spacing: -0.3469px;
	opacity: 0.7;
}
[data-i~='pr-pill'] {
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--color-emerald-50);
	font-weight: 600;
	font-size: 11px;
	line-height: 16px;
	color: var(--color-emerald-800);
}
[data-i~='pr-option'] .icon {
	flex: none;
	margin-top: 2px;
	font-size: 18px;
	color: var(--color-neutral-500);
}
[data-i~='pr-fade'] {
	height: 160px;
}

/* Kora's badge, dark (D-0245): the same pill on a dark panel with the frame's grid texture. */
[data-i~='kb'][data-i~='dark'] {
	background: linear-gradient(to bottom, var(--rg-color-bg-inverse), black);
}
[data-i~='kb'][data-i~='dark'] > img {
	opacity: 0.22;
}
[data-i~='kb'][data-i~='dark'] [data-i~='kb-pill'] {
	background: linear-gradient(to right, color-mix(in oklab, var(--color-orange-500) 20%, transparent), transparent 50%);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
}

/* ── Vignettes (D-0259): a small piece of the kit's UI in a card's panel — a board 360 × 256, the
   kit's card cropped by the panel, its parts arriving as a scene's do once the panel is in view.
   On the dark panel the glass is nearly white, so the piece reads as the product does. */
[data-vignette] [data-board] {
	--glass: rgb(255 255 255 / 0.94);
	--glass-foot: rgb(255 255 255 / 0.86);
}
[data-i~='card'][data-i~='vg-card'] {
	top: 40px;
	left: 36px;
	width: 352px;
	gap: 0;
	padding: 12px;
	box-shadow: 0 16px 40px 0 rgb(0 0 0 / 0.35);
}
[data-i~='vg-card'] [data-i~='rv-next'] {
	white-space: normal;
}
[data-i~='vg-card'] > [data-i~='fc-box'] {
	border: 0;
	padding: 0;
	background: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}
[data-i~='vg-card'] > [data-i~='pr-option'] {
	margin: 12px -12px -12px;
	width: calc(100% + 24px);
}
/* The sources' caption and rows (1168:5467, D-0261): the count in capitals, and dark glass rows 364
   wide at 31 in — 56, 122 and 188 down — each a logo on a white tile and the name. Kept for the
   Act vignette's rows (D-0265). */
[data-i~='vg-count'] {
	position: absolute;
	top: 31px;
	left: 31px;
	font-weight: 500;
	font-size: 13px;
	line-height: 16px;
	text-transform: uppercase;
	color: var(--color-gray-100);
}
[data-i~='vg-row'] {
	position: absolute;
	left: 31px;
	display: flex;
	align-items: center;
	gap: 14px;
	width: 364px;
	padding: 14px;
	border: 0.5px solid var(--color-gray-800);
	border-radius: 4px;
	background: linear-gradient(to bottom, rgb(21 24 25 / 0.64), rgb(27 30 30 / 0));
	-webkit-backdrop-filter: blur(var(--blur-2xl));
	backdrop-filter: blur(var(--blur-2xl));
	box-shadow: 0 19px 78px 0 rgb(0 0 0 / 0.5);
	font-size: 15px;
	line-height: 20px;
	color: white;
}
[data-i~='vg-row-1'] {
	top: 56px;
}
[data-i~='vg-row-2'] {
	top: 122px;
	opacity: 0.8;
}
[data-i~='vg-row-3'] {
	top: 188px;
	opacity: 0.5;
}
[data-vignette]:not([data-on]) [data-i~='vg-row'] {
	opacity: 0;
}
/* Act, as the frame draws it (1168:5956, D-0265): the same rows, four of them 58 apart from 56 down,
   each a box to tick at 10 and the step at Inter 12/16 — whole, four fifths, half, a fifth. They start
   26 in and run 400 wide, off the panel's right, as the owner asked (D-0273). */
[data-i~='vg-step'] {
	left: 26px;
	width: 400px;
	gap: 10px;
	font-size: 14px;
}
[data-i~='vg-count'] {
	left: calc(50% - 154px);
}
[data-i~='vg-step-1'] {
	top: 56px;
}
[data-i~='vg-step-2'] {
	top: 114px;
	opacity: 0.8;
}
[data-i~='vg-step-3'] {
	top: 172px;
	opacity: 0.5;
}
[data-i~='vg-step-4'] {
	top: 230px;
	opacity: 0.2;
}
[data-i~='vg-box'] {
	flex: none;
	width: 10px;
	height: 10px;
	border: 0.667px solid rgb(229 231 235 / 0.7);
	border-radius: 0.833px;
	box-shadow: 0 0 6.25px 0 rgb(0 0 0 / 0.12);
}
[data-i~='vg-tile'] {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border: 0.375px solid var(--color-neutral-200);
	border-radius: 0.75px;
	background: white;
	box-shadow: 0 0 15px 0 rgb(0 0 0 / 0.12);
}
[data-i~='vg-tile'] img {
	width: 15px;
	height: 15px;
	object-fit: contain;
}
/* Stack, for the home page's Context Foundation (D-0622): compact cards in the Act rows' glass
   (D-0265), 68 tall — a 32 logo tile, padding 14 × 16, the title and its line 5 apart — dealt as
   Raycast's extension cards are. The front at 40 down (D-0634) and 24 in; each place behind 14 further in and
   lower by a little less each time — 35, 33, 31 — so only its line shows under the card in front. All run 360 wide, off the
   panel's right. Further back, a card's glass stays whole — it must hide the title behind it — while
   what it holds fades and softens (1, 0.6, 0.36, 0.18; 0, 0.75, 1.5, 2.5 blur) and its hairline goes.
   A fifth waits at the back, unseen. Places are `data-slot`; the leaving card is `out`. */
[data-i~='vs-deck'] {
	position: absolute;
	inset: 0;
}
[data-i~='vs-card'] {
	--x: 0px;
	--y: 0px;
	--fade: 1;
	--soft: 0px;
	--edge: 100%;
	position: absolute;
	top: 40px;
	left: 24px;
	z-index: var(--z);
	display: flex;
	align-items: center;
	gap: 14px;
	width: 360px;
	padding: 14px 16px;
	border: 0.5px solid color-mix(in oklab, var(--color-gray-800) var(--edge), transparent);
	border-radius: 4px;
	background: linear-gradient(to bottom, rgb(21 24 25 / 0.64), rgb(27 30 30 / 0));
	-webkit-backdrop-filter: blur(var(--blur-2xl));
	backdrop-filter: blur(var(--blur-2xl));
	box-shadow: 0 19px 78px 0 rgb(0 0 0 / 0.5);
	white-space: nowrap;
	translate: var(--x) var(--y);
	transition-property: opacity, transform, translate, border-color;
	transition-duration: var(--rg-motion-reveal-duration);
	transition-timing-function: var(--rg-motion-reveal-easing);
	transition-delay: var(--wait, calc(var(--n, 0) * var(--rg-motion-reveal-stagger) * 2));
}
[data-i~='vs-card'] > * {
	opacity: var(--fade);
	filter: blur(var(--soft));
	transition-property: opacity, filter;
	transition-duration: inherit;
	transition-timing-function: inherit;
	transition-delay: inherit;
}
[data-i~='vs-card'][data-slot='0'] {
	--z: 5;
}
[data-i~='vs-card'][data-slot='1'] {
	--z: 4;
	--x: 14px;
	--y: 35px;
	--fade: 0.6;
	--soft: 0.75px;
	--edge: 70%;
}
[data-i~='vs-card'][data-slot='2'] {
	--z: 3;
	--x: 28px;
	--y: 68px;
	--fade: 0.36;
	--soft: 1.5px;
	--edge: 45%;
}
[data-i~='vs-card'][data-slot='3'] {
	--z: 2;
	--x: 42px;
	--y: 99px;
	--fade: 0.18;
	--soft: 2.5px;
	--edge: 25%;
}
[data-i~='vs-card'][data-slot='4'] {
	--z: 1;
	--x: 56px;
	--y: 128px;
	--fade: 0;
	--soft: 3.5px;
	--edge: 0%;
	opacity: 0;
}
/* Leaving: on top, in the exit role's time, lifting its distance as it goes. */
[data-i~='vs-card'][data-slot='out'] {
	--z: 6;
	--y: calc(-1 * var(--rg-motion-exit-distance));
	opacity: 0;
	transition-duration: var(--rg-motion-exit-duration);
	transition-timing-function: var(--rg-motion-exit-easing);
}
/* Going round to wait: taken at once (D-0298). */
[data-i~='vs-card'][data-s='wait'],
[data-i~='vs-card'][data-s='wait'] > * {
	transition: none;
}
/* Arriving, with the panel: the reveal role, oldest first (`--n`). */
[data-vignette]:not([data-on]) [data-i~='vs-card'] {
	opacity: 0;
	transform: translateY(var(--rg-motion-reveal-distance));
}
[data-i~='vs-mark'] {
	width: 32px;
	height: 32px;
	border-radius: 4px;
}
[data-i~='vs-mark'] img {
	width: 18px;
	height: 18px;
}
[data-i~='vs-text'] {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}
[data-i~='vs-title'] {
	font-weight: 500;
	font-size: 14px;
	line-height: 18px;
	color: white;
}
[data-i~='vs-line'] {
	font-size: 12px;
	line-height: 16px;
	color: var(--color-gray-400);
}
/* The hero's stack, for the Context Foundation page (D-0667): the Stack's deck (above) in the kit's light
   glass, centred over the heading and whole. The same card — a 32 white logo tile, padding 14 × 16, the
   title and its line 5 apart, 68 tall — 360 wide (the column's width on a phone), white glass with a
   light rim, a faint edge outside it and a soft drawn shadow. Three seen: the front, whole, and behind it
   two places each 14 lower and 6% narrower (scaled from the foot, so 14 of each shows under the one in
   front), each card fainter and softer the further back (D-0668: 0.8 and 0.5 blur, then 0.5 and 1.25
   blur), its contents more so (0.6, 0.36; 0.75, 1.5 blur). The rest wait out of sight in a fourth place.
   Places are `data-slot`; the leaving card is `out`; a card not yet arrived is `away` (data-s), a
   reveal's distance low and unseen. */
[data-i~='hs-deck'] {
	position: relative;
	width: 360px;
	max-width: 100%;
	height: 96px;
}
[data-i~='hs-card'] {
	--y: 0px;
	--s: 1;
	--card: 1;
	--haze: 0px;
	--fade: 1;
	--soft: 0px;
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: var(--z);
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	border: 1px solid rgb(255 255 255 / 0.9);
	outline: 0.5px solid rgb(2 6 24 / 0.08);
	border-radius: 4px;
	background: linear-gradient(to bottom, rgb(255 255 255 / 0.96), rgb(255 255 255 / 0.88));
	-webkit-backdrop-filter: blur(var(--blur-xl)) saturate(1.6);
	backdrop-filter: blur(var(--blur-xl)) saturate(1.6);
	box-shadow: 0 12px 32px -12px rgb(2 6 24 / 0.14), inset 0 1px 0 0 white;
	font-family: Inter, sans-serif;
	text-align: left;
	white-space: nowrap;
	opacity: var(--card);
	filter: blur(var(--haze));
	translate: 0 var(--y);
	scale: var(--s);
	transform-origin: 50% 100%;
	transition-property: opacity, filter, translate, scale;
	transition-duration: var(--rg-motion-reveal-duration);
	transition-timing-function: var(--rg-motion-reveal-easing);
	transition-delay: var(--wait, 0s);
}
[data-i~='hs-card'] > * {
	opacity: var(--fade);
	filter: blur(var(--soft));
	transition-property: opacity, filter;
	transition-duration: inherit;
	transition-timing-function: inherit;
	transition-delay: inherit;
}
[data-i~='hs-card'][data-slot='0'] {
	--z: 4;
}
[data-i~='hs-card'][data-slot='1'] {
	--z: 3;
	--y: 14px;
	--s: 0.94;
	--card: 0.8;
	--haze: 0.5px;
	--fade: 0.6;
	--soft: 0.75px;
}
[data-i~='hs-card'][data-slot='2'] {
	--z: 2;
	--y: 28px;
	--s: 0.88;
	--card: 0.5;
	--haze: 1.25px;
	--fade: 0.36;
	--soft: 1.5px;
}
[data-i~='hs-card'][data-slot='3'] {
	--z: 1;
	--y: 42px;
	--s: 0.82;
	--fade: 0;
	--soft: 2.5px;
	opacity: 0;
}
/* Leaving: on top, in the exit role's time, lifting its distance as it goes. */
[data-i~='hs-card'][data-slot='out'] {
	--z: 5;
	--y: calc(-1 * var(--rg-motion-exit-distance));
	opacity: 0;
	transition-duration: var(--rg-motion-exit-duration);
	transition-timing-function: var(--rg-motion-exit-easing);
}
/* Not yet arrived (D-0671): unseen in its own place, a little small, taken at once; it pops up from there
   in the pop role's time and bounce (`pop`) when the script lets it go — one card after another. */
[data-i~='hs-card'][data-s='away'] {
	opacity: 0;
	scale: calc(var(--s) * 0.9);
	transition: none;
}
[data-i~='hs-card'][data-s='pop'] {
	transition-duration: var(--rg-motion-pop-duration);
	transition-timing-function: var(--rg-motion-pop-easing);
}
/* Going round to wait: taken at once (D-0298). */
[data-i~='hs-card'][data-s='wait'],
[data-i~='hs-card'][data-s='wait'] > * {
	transition: none;
}
[data-i~='hs-mark'] {
	width: 32px;
	height: 32px;
	border-radius: 4px;
}
[data-i~='hs-mark'] img {
	width: 18px;
	height: 18px;
}
[data-i~='hs-text'] {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}
[data-i~='hs-title'] {
	font-weight: 500;
	font-size: 14px;
	line-height: 18px;
	color: var(--color-gray-950);
}
[data-i~='hs-line'] {
	overflow: hidden;
	font-size: 12px;
	line-height: 16px;
	text-overflow: ellipsis;
	color: var(--color-gray-600);
}
/* Call, for the home page's Context Applications (D-0623 → D-0631): a meeting's next steps, with no
   card round them — a column 308 wide, centred as the Answer vignette's column floats (D-0344), its
   top at 40, level with the Stack's front card beside it (D-0634). A compact head, side by side: the two faces
   at 24, overlapping 5, the call at 14 medium 10 beside them. Then, 12 under it, the steps — the point
   of it — as the Act rows (D-0265), a box to tick and the step at 13, in cards padded as the Stack's
   are (D-0622): 14 × 16, the same glass, 45 tall, 12 apart, whole, 0.7, 0.4, 0.2. Each card starts on
   the column's edge, under the faces, and reaches 60 past the column's right — out past the panel's
   right edge, as the Stack's cards run — and the list runs on past the foot. */
[data-i~='vc-col'] {
	position: absolute;
	top: 40px;
	left: 26px;
	display: flex;
	flex-direction: column;
	width: 308px;
	white-space: nowrap;
}
[data-i~='vc-head'] {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-bottom: 12px;
}
[data-i~='vc-faces'] {
	display: flex;
	flex: none;
}
[data-i~='vc-faces'] img {
	width: 24px;
	height: 24px;
	border: 1.5px solid var(--color-gray-950);
	border-radius: 99px;
	object-fit: cover;
}
[data-i~='vc-faces'] img + img {
	margin-left: -5px;
}
[data-i~='vc-title'] {
	font-weight: 500;
	font-size: 14px;
	line-height: 18px;
	color: white;
}
[data-i~='vc-step'] {
	display: flex;
	flex: none;
	align-items: center;
	gap: 10px;
	margin: 0 -60px 12px 0;
	padding: 14px 16px;
	border: 0.5px solid var(--color-gray-800);
	border-radius: 4px;
	background: linear-gradient(to bottom, rgb(21 24 25 / 0.64), rgb(27 30 30 / 0));
	-webkit-backdrop-filter: blur(var(--blur-2xl));
	backdrop-filter: blur(var(--blur-2xl));
	box-shadow: 0 19px 78px 0 rgb(0 0 0 / 0.5);
	font-size: 13px;
	line-height: 16px;
	color: white;
}
[data-i~='vc-step-2'] {
	opacity: 0.7;
}
[data-i~='vc-step-3'] {
	opacity: 0.4;
}
[data-i~='vc-step-4'] {
	opacity: 0.2;
}
/* Ask, for the home page's Kora AI (D-0633): Raycast's lifted command, in our glass. Behind, the
   answer: the Stack's card (D-0622), 32 down (D-0634) and 44 in, 360 wide and off the panel's right, 300 tall
   and fading out 165 to 230 below its top (masked on itself, never on an ancestor of glass), its words 16 in
   and 290 wide, starting 20 under the ask. In front, the ask pops 18 out of the answer's left edge, 12
   below its top: the Stack card's padding (14 × 16), Kora's mark at 28 on the glass itself (57 tall in
   all), the question at 14 medium, its glass a breath lighter and its hairline a step brighter
   so it stands in front. The answer: one line at 13/18 gray-300, heading what follows — 18 above the
   first to-do's words, a little less than the 24 between to-dos (6 of padding, as the board's
   paragraphs carry no margin, and the row's own 12); to-dos at 13, 41 tall, hairlines only between
   them — a 14 box 12 from the task; a done box filling emerald, its tick popping, the task
   struck through in gray-500; or bars — the name and score at 12, a 6 track whose fill, in Kora's
   colours, grows over the draw role once its row has come. Parts arrive as Respond's (D-0534). */
[data-i~='vq-answer'] {
	position: absolute;
	top: 32px;
	left: 44px;
	width: 360px;
	height: 300px;
	padding: 89px 16px 0;
	border: 0.5px solid var(--color-gray-800);
	border-radius: 4px;
	background: linear-gradient(to bottom, rgb(21 24 25 / 0.64), rgb(27 30 30 / 0));
	-webkit-backdrop-filter: blur(var(--blur-2xl));
	backdrop-filter: blur(var(--blur-2xl));
	box-shadow: 0 19px 78px 0 rgb(0 0 0 / 0.5);
	-webkit-mask-image: linear-gradient(to bottom, black 165px, transparent 230px);
	mask-image: linear-gradient(to bottom, black 165px, transparent 230px);
	white-space: nowrap;
}
[data-i~='vq-case'] {
	display: none;
	flex-direction: column;
	width: 290px;
}
[data-i~='vq-case'][data-s] {
	display: flex;
}
[data-i~='vq-case'] [data-k] {
	opacity: 0;
	translate: 0 var(--rg-motion-reveal-distance);
	transition-property: opacity, translate, filter;
	transition-duration: var(--rg-motion-reveal-duration);
	transition-timing-function: var(--rg-motion-reveal-easing);
}
[data-i~='vq-case'][data-s='on'] [data-k] {
	opacity: 1;
	translate: 0 0;
}
[data-i~='vq-case'][data-s='on'] [data-k='1'] { transition-delay: calc(var(--rg-motion-reveal-stagger) * 2); }
[data-i~='vq-case'][data-s='on'] [data-k='2'] { transition-delay: calc(var(--rg-motion-reveal-stagger) * 4); }
[data-i~='vq-case'][data-s='on'] [data-k='3'] { transition-delay: calc(var(--rg-motion-reveal-stagger) * 6); }
[data-i~='vq-case'][data-s='on'] [data-k='4'] { transition-delay: calc(var(--rg-motion-reveal-stagger) * 8); }
[data-i~='vq-case'][data-s='out'] [data-k] {
	opacity: 0;
	translate: 0 0;
	filter: blur(var(--blur-xs));
	transition-delay: 0s;
}
[data-i~='vq-lead'] {
	overflow: hidden;
	padding-bottom: 6px;
	font-size: 13px;
	line-height: 18px;
	text-overflow: ellipsis;
	color: var(--color-gray-300);
}
[data-i~='vq-todo'] {
	display: grid;
	grid-template-columns: 14px 1fr;
	align-items: center;
	gap: 12px;
	padding: 12px 0;
	border-top: 0.5px solid var(--color-gray-800);
	font-size: 13px;
	line-height: 16px;
	color: white;
}
[data-i~='vq-lead'] + [data-i~='vq-todo'] {
	border-top: 0;
}
[data-i~='vq-task'] {
	overflow: hidden;
	text-overflow: ellipsis;
}
[data-i~='vq-box'] {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 14px;
	height: 14px;
	border: 1px solid var(--color-gray-500);
	border-radius: 3px;
	font-size: 11px;
	color: white;
}
[data-i~='vq-done'] [data-i~='vq-box'] {
	border-color: var(--color-emerald-500);
	background: var(--color-emerald-500);
	scale: 0.4;
	transition: scale var(--rg-motion-pop-duration) var(--rg-motion-pop-easing);
}
[data-i~='vq-case'][data-s='on'] [data-i~='vq-done'] [data-i~='vq-box'] {
	scale: 1;
	transition-delay: calc(var(--rg-motion-reveal-stagger) * 2 + var(--rg-motion-reveal-duration));
}
[data-i~='vq-done'] [data-i~='vq-task'] {
	color: var(--color-gray-500);
	text-decoration: line-through;
}
[data-i~='vq-bar'] {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 9px 0;
}
[data-i~='vq-bar-head'] {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 12px;
	line-height: 16px;
	color: var(--color-gray-300);
}
[data-i~='vq-score'] {
	font-weight: 500;
	color: white;
}
[data-i~='vq-track'] {
	height: 6px;
	overflow: clip;
	border-radius: 3px;
	background: rgb(255 255 255 / 0.08);
}
[data-i~='vq-fill'] {
	width: 0;
	height: 6px;
	border-radius: 3px;
	background: linear-gradient(to right, var(--color-orange-500), var(--color-kora-blend), var(--color-purple-400));
	transition: width var(--rg-motion-draw-duration) var(--rg-motion-draw-easing);
}
[data-i~='vq-case'][data-s='on'] [data-i~='vq-fill'] {
	width: calc(var(--w) * 1%);
	transition-delay: calc(var(--k) * var(--rg-motion-reveal-stagger) * 2 + var(--rg-motion-reveal-duration) * 0.5);
}
/* A quarter's figures (D-0636): four tiles, two by two, 8 apart — a label at 11 gray-400, the figure at
   16 medium white, its change at 11 in emerald with its trend; each a hairline box a breath lighter. */
[data-i~='vq-tiles'] {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	padding-top: 12px;
}
[data-i~='vq-tile'] {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 10px 12px;
	border: 0.5px solid var(--color-gray-800);
	border-radius: 4px;
	background: rgb(255 255 255 / 0.03);
}
[data-i~='vq-tile-label'] {
	font-size: 11px;
	line-height: 14px;
	color: var(--color-gray-400);
}
[data-i~='vq-tile-value'] {
	font-weight: 500;
	font-size: 16px;
	line-height: 20px;
	color: white;
}
[data-i~='vq-delta'] {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 11px;
	line-height: 14px;
	color: var(--color-emerald-300);
}
[data-i~='vq-delta'] .icon {
	font-size: 12px;
}
/* A drafted email (D-0636): a hairline box a breath lighter — who it's to (a face at 18), the subject at
   13 medium white, the body at 12/17 gray-400 running on into the fade. */
[data-i~='vq-mail'] {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 12px;
	padding: 12px;
	border: 0.5px solid var(--color-gray-800);
	border-radius: 4px;
	background: rgb(255 255 255 / 0.03);
}
[data-i~='vq-mail-to'] {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	line-height: 18px;
	color: white;
}
[data-i~='vq-mail-to'] img {
	width: 18px;
	height: 18px;
	border-radius: 99px;
	object-fit: cover;
}
[data-i~='vq-mail-cap'] {
	margin-right: 2px;
	color: var(--color-gray-500);
}
[data-i~='vq-mail-subject'] {
	font-weight: 500;
	font-size: 13px;
	line-height: 16px;
	color: white;
}
[data-i~='vq-mail-body'] {
	font-size: 12px;
	line-height: 17px;
	color: var(--color-gray-400);
	white-space: normal;
}
[data-i~='vq-ask'] {
	position: absolute;
	top: 44px;
	left: 26px;
	display: flex;
	align-items: center;
	gap: 14px;
	width: 360px;
	padding: 14px 16px;
	border: 0.5px solid var(--color-gray-700);
	border-radius: 4px;
	background: linear-gradient(to bottom, rgb(40 43 45 / 0.8), rgb(27 30 30 / 0.6));
	-webkit-backdrop-filter: blur(var(--blur-2xl));
	backdrop-filter: blur(var(--blur-2xl));
	box-shadow: 0 19px 78px 0 rgb(0 0 0 / 0.5);
	white-space: nowrap;
}
[data-i~='vq-mark'] {
	display: flex;
	flex: none;
}
[data-i~='vq-text'] {
	min-height: 18px;
	font-weight: 500;
	font-size: 14px;
	line-height: 18px;
	color: white;
	transition-property: opacity, filter;
	transition-duration: var(--rg-motion-reveal-duration);
	transition-timing-function: var(--rg-motion-state-easing);
}
[data-i~='vq-text'][data-out] {
	opacity: 0;
	filter: blur(var(--blur-sm));
}
/* The ask pops as each question comes: held a little small, then let go on the pop role (Respond's). */
[data-vignette] [data-i~='vq-ask'][data-part] {
	transition-property: opacity, transform, scale;
	transition-duration: var(--rg-motion-reveal-duration), var(--rg-motion-reveal-duration), var(--rg-motion-pop-duration);
	transition-timing-function: var(--rg-motion-reveal-easing), var(--rg-motion-reveal-easing), var(--rg-motion-pop-easing);
	transition-delay: calc(var(--n, 0) * var(--rg-motion-reveal-stagger) * 2), calc(var(--n, 0) * var(--rg-motion-reveal-stagger) * 2), 0s;
}
[data-vignette] [data-i~='vq-ask'][data-part][data-pop] {
	scale: 0.96;
	transition-duration: 0s;
}
/* The home page's end-to-end cards (D-0343, D-0344): three pieces of the product in miniature, each in
   the Kora AI cards' dark glass (Trace, Context: D-0264, D-0266) and each held differently in its panel —
   Capture hangs from the top, Focus rises from the foot, Kora's Answer floats in the middle. */
[data-i~='vg-col'] {
	position: absolute;
	left: 50%;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
	width: 308px;
	padding: 14px 12px 12px;
	translate: -50% 0;
	border: 0.5px solid var(--color-gray-800);
	-webkit-backdrop-filter: blur(var(--blur-2xl));
	backdrop-filter: blur(var(--blur-2xl));
	box-shadow: 0 19px 78px 0 rgb(0 0 0 / 0.5);
	white-space: normal;
}
[data-i~='vg-col'][data-i~='hang'] {
	top: -1px;
	border-radius: 0 0 4px 4px;
	background: linear-gradient(to bottom, rgb(27 30 30 / 0), rgb(21 24 25 / 0.64));
}
[data-i~='vg-col'][data-i~='rise'] {
	bottom: -1px;
	padding-bottom: 14px;
	border-radius: 4px 4px 0 0;
	background: linear-gradient(to bottom, rgb(255 255 255 / 0.05), rgb(255 255 255 / 0.02));
}
[data-i~='vg-col'][data-i~='float'] {
	top: 26px;
	border-radius: 4px;
	background: linear-gradient(to bottom, rgb(255 255 255 / 0.06), rgb(255 255 255 / 0.02));
}
/* The shared parts: a caption in capitals, a pane a shade lighter, a label over a value, a tag. */
[data-i~='vg-cap'] {
	display: flex;
	align-items: center;
	gap: 6px;
	font-weight: 500;
	font-size: 12px;
	line-height: 16px;
	text-transform: uppercase;
	color: var(--color-gray-100);
}
[data-i~='vg-pane'] {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 10px;
	border-radius: 3px;
	background: rgb(255 255 255 / 0.04);
}
[data-i~='vg-label'] {
	display: flex;
	align-items: center;
	gap: 6px;
	font-weight: 500;
	font-size: 10px;
	line-height: 12px;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	color: var(--color-gray-500);
}
[data-i~='vg-tag'] {
	flex: none;
	margin-left: auto;
	padding: 2px 6px;
	border-radius: 3px;
	background: rgb(16 185 129 / 0.16);
	font-weight: 500;
	font-size: 11px;
	line-height: 14px;
	color: var(--color-emerald-300);
}
[data-i~='vg-tag'][data-i~='risk'] {
	background: rgb(244 63 94 / 0.16);
	color: var(--color-rose-300);
}

/* Capture: the meeting caught, what it took, and the two places it went. */
[data-i~='vf-done'] {
	display: flex;
	font-size: 14px;
	color: var(--color-emerald-400);
}
[data-i~='vf-line'] {
	display: flex;
	align-items: center;
	gap: 10px;
}
[data-i~='vf-title'] {
	flex: 1 0 0rem;
	min-width: 0;
	font-weight: 500;
	font-size: 13px;
	line-height: 16px;
	color: var(--color-gray-100);
}
[data-i~='vf-time'] {
	flex: none;
	font-size: 11px;
	line-height: 14px;
	color: var(--color-gray-500);
}
[data-i~='vf-fields'] {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	padding-top: 10px;
	border-top: 0.5px solid rgb(255 255 255 / 0.08);
}
[data-i~='vf-fields'] > p {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 12px;
	line-height: 16px;
	color: var(--color-gray-300);
}
[data-i~='vf-to'] {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px;
}
[data-i~='vf-dest'] {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 7px 8px;
	border-radius: 2px;
	background: rgb(255 255 255 / 0.05);
	font-weight: 500;
	font-size: 12px;
	line-height: 16px;
	color: white;
}
[data-i~='vf-sf'] {
	width: 18px;
	height: 12px;
	object-fit: contain;
}
[data-i~='vf-ok'] {
	display: flex;
	margin-left: auto;
	font-size: 12px;
	color: var(--color-emerald-400);
}

/* Focus: the account, the fall in its engagement, and Kora's next best action. */
[data-i~='va-top'] {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
[data-i~='va-count'] {
	font-size: 11px;
	line-height: 14px;
	color: var(--color-gray-500);
}
[data-i~='va-acct'] {
	display: flex;
	align-items: center;
	gap: 10px;
}
[data-i~='va-mono'] {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 3px;
	background: rgb(16 185 129 / 0.16);
	font-weight: 600;
	font-size: 11px;
	color: var(--color-emerald-300);
}
[data-i~='va-who'] {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
[data-i~='va-who'] > :first-child {
	font-weight: 500;
	font-size: 13px;
	line-height: 16px;
	color: var(--color-gray-100);
}
[data-i~='va-who'] > :last-child {
	font-size: 11px;
	line-height: 14px;
	color: var(--color-gray-500);
}
[data-i~='va-signal'] {
	display: flex;
	align-items: center;
	gap: 12px;
}
[data-i~='va-spark'] {
	flex: none;
	width: 96px;
	height: 24px;
	overflow: visible;
}
[data-i~='va-trace'] {
	fill: none;
	stroke: var(--color-rose-400);
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}
[data-i~='va-dot'] {
	fill: var(--color-rose-400);
}
[data-i~='va-says'] {
	font-size: 12px;
	line-height: 16px;
	color: var(--color-gray-400);
}
[data-i~='va-says'] b {
	font-weight: 600;
	color: var(--color-rose-300);
}
[data-i~='va-next'] {
	color: var(--color-gray-300);
}
[data-i~='va-do'] {
	font-weight: 500;
	font-size: 13px;
	line-height: 16px;
	color: var(--color-gray-100);
}

/* Kora's Answer: her name, the answer and its reason, the sources, and the bar to ask. */
[data-i~='vk-head'] {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 500;
	font-size: 13px;
	line-height: 16px;
	color: var(--color-gray-100);
}
[data-i~='vk-answer'] {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
[data-i~='vk-lead'] {
	font-weight: 500;
	font-size: 14px;
	line-height: 18px;
	color: white;
}
[data-i~='vk-why'] {
	font-size: 12px;
	line-height: 17px;
	color: var(--color-gray-400);
}
[data-i~='vg-col'] [data-i~='vg-sources'] {
	align-self: flex-start;
}
[data-i~='vk-ask'] {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 4px;
	padding: 6px 6px 6px 12px;
	border: 0.5px solid rgb(255 255 255 / 0.12);
	border-radius: 999px;
	background: rgb(255 255 255 / 0.04);
	font-size: 12px;
	line-height: 16px;
	color: var(--color-gray-500);
}
[data-i~='vk-send'] {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 999px;
	background: white;
	font-size: 14px;
	color: var(--color-gray-950);
}

/* Trace, as the frame draws it (1168:6016, D-0266): the chat — a dark glass column 308 wide and 224
   tall rising from the panel's foot at its middle; the ask in its bubble on the right, her mark, the
   pill of three sources on their discs, and her answer at a fifth behind it. */
[data-i~='vg-chat'] {
	position: absolute;
	bottom: -1px;
	left: 50%;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 16px;
	width: 308px;
	height: 224px;
	padding: 16px 14px 14px;
	translate: -50% 0;
	overflow: clip;
	border: 0.5px solid var(--color-gray-800);
	border-radius: 4px 4px 0 0;
	/* D-0269: the frame's dark glass vanished on the dark panel; a breath of white makes the column show. */
	background: linear-gradient(to bottom, rgb(255 255 255 / 0.05), rgb(255 255 255 / 0.02));
	-webkit-backdrop-filter: blur(var(--blur-2xl));
	backdrop-filter: blur(var(--blur-2xl));
	box-shadow: 0 19px 78px 0 rgb(0 0 0 / 0.5);
	white-space: normal;
}
[data-i~='vg-ask'] {
	padding: 6px 8px;
	border-radius: 8px;
	background: rgb(255 255 255 / 0.03);
	font-size: 12px;
	line-height: 16px;
	color: var(--color-gray-300);
}
[data-i~='vg-reply'] {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	width: 100%;
}
[data-i~='vg-reply-kora'] {
	display: flex;
	width: 16px;
	height: 16px;
}
[data-i~='vg-found'] {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	width: 100%;
}
[data-i~='vg-sources'] {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 8px 4px 4px;
	border-radius: 999px;
	background: rgb(255 255 255 / 0.05);
	font-weight: 500;
	font-size: 12px;
	line-height: 16px;
	text-transform: uppercase;
	color: var(--color-gray-100);
}
[data-i~='vg-discs'] {
	display: flex;
	align-items: center;
}
[data-i~='vg-disc'] {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	border-radius: 999px;
	background: white;
	box-shadow: -0.889px 0 7.111px 0 rgb(0 0 0 / 0.04);
}
[data-i~='vg-disc']:not(:last-child) {
	margin-right: -5px;
}
[data-i~='vg-disc'] img {
	width: 9px;
	height: 9px;
	object-fit: contain;
}
[data-i~='vg-answer'] {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
	opacity: 0.2;
	font-size: 13px;
	line-height: 18px;
	color: var(--color-gray-400);
}

/* Context, as the frame draws it (1168:5726, D-0264): the draft Kora wrote, a dark glass column 308
   wide hanging from the panel's top at its middle — her mark and the ask in capitals, the draft in
   its box (the subject, then the lines), and Edit beside Send Now. */
[data-i~='vg-mail'] {
	position: absolute;
	top: -1px;
	left: 50%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	width: 308px;
	padding: 14px 12px 12px;
	translate: -50% 0;
	border: 0.5px solid var(--color-gray-800);
	border-radius: 0 0 4px 4px;
	background: linear-gradient(to bottom, rgb(27 30 30 / 0), rgb(21 24 25 / 0.64));
	-webkit-backdrop-filter: blur(var(--blur-2xl));
	backdrop-filter: blur(var(--blur-2xl));
	box-shadow: 0 19px 78px 0 rgb(0 0 0 / 0.5);
	white-space: normal;
}
[data-i~='vg-mail-head'] {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-bottom: 4px;
	font-weight: 500;
	font-size: 13px;
	line-height: 16px;
	text-transform: uppercase;
	color: var(--color-gray-100);
}
[data-i~='vg-mail-box'] {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
	padding: 12px;
	border-radius: 3px;
	background: rgb(255 255 255 / 0.03);
	font-size: 13px;
	line-height: 16px;
}
[data-i~='vg-mail-subject'] {
	font-weight: 500;
	color: var(--color-gray-300);
}
[data-i~='vg-mail-body'] {
	display: flex;
	flex-direction: column;
	gap: 8px;
	color: var(--color-gray-400);
	font-size: 12px;
}
[data-i~='vg-mail-actions'] {
	display: flex;
	gap: 4px;
	width: 100%;
}
[data-i~='vg-btn'] {
	display: flex;
	flex: 1 0 0rem;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 1px;
	padding: 7px;
	border-radius: 2px;
	background: rgb(255 255 255 / 0.05);
	font-weight: 500;
	font-size: 13px;
	line-height: 16px;
	color: white;
}
[data-i~='vg-btn'] .icon {
	font-size: 10px;
}
[data-i~='vg-btn-send'] {
	background: white;
	color: var(--color-gray-950);
}
[data-vignette] [data-part] {
	transition-property: opacity, transform;
	transition-duration: var(--rg-motion-reveal-duration);
	transition-timing-function: var(--rg-motion-reveal-easing);
	transition-delay: calc(var(--n, 0) * var(--rg-motion-reveal-stagger) * 2);
}
[data-vignette]:not([data-on]) [data-part] {
	opacity: 0;
	transform: translateY(var(--rg-motion-reveal-distance));
}

/* ── The applications' marks (D-0276), and Foresight's four Kora marks (D-0620): inline SVGs whose
   parts appear once in view — the plate first, then the figure in the reveal role's time, two
   staggers apart. `enter-left` / `enter-right` are a figure's pieces arriving from either side. */
[data-art] {
	display: block;
	width: 100px;
	height: 100px;
}
[data-art] svg {
	display: block;
	width: 100px;
	height: 100px;
}
[data-art][data-size='80'],
[data-art][data-size='80'] svg {
	width: 80px;
	height: 80px;
}
/* D-0717: a package's mark builds a little slower than the other artworks — its parts at 1.25 the reveal
   role's time and delays (the rules sit after the shared ones below, so they win). */
/* D-0711, D-0759: a package's mark — 80 on its Pricing card (the art tile's size, above), 40 over its column in the
   feature grid. */
[data-art][data-size='40'],
[data-art][data-size='40'] svg {
	width: 40px;
	height: 40px;
}
[data-art='revenue-iq'] svg {
	width: 81px;
	height: 72px;
	margin: 14px auto 0;
}
[data-art] [data-part] {
	transition-property: opacity, transform;
	transition-duration: var(--rg-motion-reveal-duration);
	transition-timing-function: var(--rg-motion-reveal-easing);
	transform-box: fill-box;
	transform-origin: center;
}
[data-art] [data-part='base'] {
	transition-delay: 0s;
}
[data-art] [data-part='tile'] {
	transition-delay: calc(var(--rg-motion-reveal-stagger) * 2);
}
[data-art] [data-part='bars'],
[data-art] [data-part='person-left'],
[data-art] [data-part='person-right'],
[data-art] [data-part='drop'],
[data-art] [data-part='rise'],
[data-art] [data-part='enter-left'] {
	transition-delay: calc(var(--rg-motion-reveal-stagger) * 4);
}
[data-art] [data-part='person-right'],
[data-art] [data-part='enter-right'] {
	transition-delay: calc(var(--rg-motion-reveal-stagger) * 6);
}
[data-art] [data-part='bars'] {
	transform-origin: bottom;
}
[data-art]:not([data-on]) [data-part] {
	opacity: 0;
}
[data-art]:not([data-on]) [data-part='bars'] {
	transform: scaleY(0);
}
/* D-0723: the travel is 12 on screen — scaled by the artwork's units per pixel (`--art-u`, set by <AppArt>), as
   an SVG's lengths are its own units. */
[data-art]:not([data-on]) [data-part='person-left'],
[data-art]:not([data-on]) [data-part='enter-left'] {
	transform: translateX(calc(-12px * var(--art-u, 1)));
}
[data-art]:not([data-on]) [data-part='person-right'],
[data-art]:not([data-on]) [data-part='enter-right'] {
	transform: translateX(calc(12px * var(--art-u, 1)));
}
[data-art]:not([data-on]) [data-part='drop'] {
	transform: translateY(calc(-12px * var(--art-u, 1)));
}
/* D-0654: a figure that points up — the security band's upload arrow — rises into place. */
[data-art]:not([data-on]) [data-part='rise'] {
	transform: translateY(calc(12px * var(--art-u, 1)));
}
/* D-0717: the package marks (plan-*) build at 1.25 the time and delays of the rest. */
[data-art^='plan-'] [data-part] {
	transition-duration: calc(var(--rg-motion-reveal-duration) * 1.25);
}
[data-art^='plan-'] [data-part='tile'] {
	transition-delay: calc(var(--rg-motion-reveal-stagger) * 2.5);
}
[data-art^='plan-'] [data-part='person-left'],
[data-art^='plan-'] [data-part='drop'],
[data-art^='plan-'] [data-part='rise'] {
	transition-delay: calc(var(--rg-motion-reveal-stagger) * 5);
}
[data-art^='plan-'] [data-part='person-right'],
[data-art^='plan-'] [data-part='enter-right'] {
	transition-delay: calc(var(--rg-motion-reveal-stagger) * 7.5);
}

/* ── The glyph tile's square (D-0280): on a Growth lever step it pops out of its corner — grown from
   nothing at the corner point, along both edges at once — the first time the stage turns to the
   step (`data-on`), in the reveal role's time, and stands thereafter. Elsewhere, and under reduced
   motion, it simply stands. */
@media (prefers-reduced-motion: no-preference) {
	[data-steps] [data-c='corner'] {
		transition-property: opacity, scale;
		transition-duration: var(--rg-motion-reveal-duration);
		transition-timing-function: var(--rg-motion-reveal-easing);
		transition-delay: calc(var(--rg-motion-reveal-stagger) * 2);
	}
	[data-steps] [data-c='corner'][data-corner='tl'] {
		transform-origin: top left;
	}
	[data-steps] [data-c='corner'][data-corner='tr'] {
		transform-origin: top right;
	}
	[data-steps] [data-c='corner'][data-corner='br'] {
		transform-origin: bottom right;
	}
	[data-steps] [data-c='corner'][data-corner='bl'] {
		transform-origin: bottom left;
	}
	[data-steps] [data-c='corner']:not([data-on]) {
		opacity: 0;
		scale: 0;
	}
}

/* D-0750: the Pricing plan cards' corner squares — hidden at rest, and under the hand each pops out of its corner
   (grown from nothing at the corner point, along both edges at once), on the reveal role's time, and goes back as
   the hand leaves. Under reduced motion they simply appear and go. */
[data-c='plan-corner'] {
	opacity: 0;
	scale: 0;
}
[data-c='plan-corner'][data-corner='tl'] {
	transform-origin: top left;
}
[data-c='plan-corner'][data-corner='tr'] {
	transform-origin: top right;
}
[data-c='plan-corner'][data-corner='br'] {
	transform-origin: bottom right;
}
[data-c='plan-corner'][data-corner='bl'] {
	transform-origin: bottom left;
}
[data-plan-card]:hover [data-c='plan-corner'] {
	opacity: 1;
	scale: 1;
}
@media (prefers-reduced-motion: no-preference) {
	[data-c='plan-corner'] {
		transition-property: opacity, scale;
		transition-duration: var(--rg-motion-reveal-duration);
		transition-timing-function: var(--rg-motion-reveal-easing);
	}
}

/* ── Board (D-0451, D-0452): CRM Sync's Product core — the pipeline board the records land on, as
   Landing Pages Figma 1495:5893 draws it: a glass pane of three stage columns on the subtle ground,
   the first fading out to the left (D-0452: in from the frame's 162, so it shows; D-0453: 140, so the
   pane's right rim stands 26 inside the board and the third stage is whole), each headed by the
   brand's square and the stage's name. The frame leaves the cards empty; here each is an opportunity
   as CRM Sync writes it — it lands bare, each field reading Enriching… with Kora's shimmer passing
   along it, and the fields come into focus one by one. The pane runs off the foot and the left, and
   only those sides are faded by a drawn fade (D-0241); on the right the ground thins out on its own
   (GROUNDS.board's wash). */
[data-i~='bd-pane'] {
	position: absolute;
	top: 40px;
	left: -140px;
	display: flex;
	align-items: flex-start;
	gap: 8px;
	width: 722px;
	height: 670px;
	padding: 8px;
	border: 1.841px solid white;
	/* D-0510: nothing lines the right side — no rim there, and the last stage no green edge. */
	border-right: 0;
	background: linear-gradient(to bottom, rgb(255 255 255 / 0.04) 52.121%, rgb(255 255 255 / 0.4) 100.77%);
	-webkit-backdrop-filter: blur(29.463px);
	backdrop-filter: blur(29.463px);
}
/* A stage: 230 wide, its glass clearing toward its foot. D-0510: no edge down either side — the
   frame's green right edge showed as a line at the left of the next stage. */
[data-i~='bd-col'] {
	display: flex;
	flex: none;
	flex-direction: column;
	align-items: stretch;
	width: 230px;
	height: 654px;
	padding: 8px;
	overflow: clip;
	border-radius: 4px;
	background: linear-gradient(to bottom, rgb(255 255 255 / 0.3), rgb(255 255 255 / 0) 95.26%);
}
/* Its head: the brand's 8 square and the stage's name in the display face, 13 on 19.5. */
[data-i~='bd-head'] {
	display: flex;
	flex: none;
	align-items: center;
	gap: 8px;
	height: 28px;
	margin-bottom: 8px;
	padding: 0 4px 4px;
	font-family: 'Zalando Sans', sans-serif;
	font-size: 13px;
	line-height: 19.5px;
	color: var(--color-gray-800);
}
[data-i~='bd-head']::before {
	content: '';
	flex: none;
	width: 8px;
	height: 8px;
	background: var(--rg-brand-gradient);
}
/* A record's row, its gap inside it. D-0508: a row never opens or closes — a record moves only by
   transform: the newest slides in from above, the ones under it slide down by its height (the script
   holds them up by a transform, `data-jump` taking it at once, then lets them go). */
[data-i~='bd-entry'] {
	transition: transform var(--rg-motion-reveal-duration) var(--rg-motion-reveal-easing);
}
[data-i~='bd-entry'][data-jump] {
	transition: none;
}
[data-i~='bd-inner'] {
	padding-bottom: 8px;
}
/* The card: the frame's glass — white clearing to 60% at its foot, blurred 19.6 — at our corners. */
[data-i~='bd-card'] {
	border-radius: 4px;
	background: linear-gradient(to bottom, white, rgb(255 255 255 / 0.6));
	-webkit-backdrop-filter: blur(19.633px);
	backdrop-filter: blur(19.633px);
}
/* What it holds, in a column; the older a record, the dimmer what it holds — whole, half, a third
   (the kit's 100 / 50 / 30) — the dim on the contents, not the glass, so the glass keeps its ground. */
[data-i~='bd-in'] {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 12px;
	padding: 16px;
	transition: opacity var(--rg-motion-reveal-duration) var(--rg-motion-state-easing);
}
[data-i~='bd-col'] > [data-i~='bd-entry']:nth-child(3) [data-i~='bd-in'] {
	opacity: 0.5;
}
[data-i~='bd-col'] > [data-i~='bd-entry']:nth-child(n + 4) [data-i~='bd-in'] {
	opacity: 0.3;
}
[data-i~='bd-names'] {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
[data-i~='bd-title'] {
	overflow: hidden;
	text-overflow: ellipsis;
	font-weight: 500;
	font-size: 13px;
	line-height: 18px;
	color: var(--color-gray-950);
}
[data-i~='bd-sub'] {
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 12px;
	line-height: 16px;
	color: var(--color-slate-500);
}
[data-i~='bd-when'] {
	transition-property: opacity, filter;
	transition-duration: var(--rg-motion-reveal-duration);
	transition-timing-function: var(--rg-motion-state-easing);
}
[data-i~='bd-when'][data-out] {
	opacity: 0;
	filter: blur(var(--blur-sm));
}
/* The fields: an icon of the vocabulary and the value — or, until the value has come in, the word
   Enriching… in the quiet colour with Kora's shimmer passing along it (D-0452: the Kora gradient
   shimmer of the headings, D-0041, in her colours, sweeping over and over while she works — the one
   thing that moves on a record, as her ring is on a status, D-0147). The value comes into focus as the
   word goes (D-0133). */
[data-i~='bd-fields'] {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
[data-i~='bd-field'] {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 20px;
	font-size: 12px;
	line-height: 16px;
	color: var(--color-gray-800);
}
[data-i~='bd-ic'] {
	flex: none;
	font-size: 14px;
	line-height: 14px;
	color: var(--color-slate-400);
}
[data-i~='bd-slot'] {
	display: grid;
	flex: 1 0 0rem;
	align-items: center;
	min-width: 0;
}
[data-i~='bd-slot'] > * {
	grid-area: 1 / 1;
}
[data-i~='bd-value'],
[data-i~='bd-wait'] {
	transition-property: opacity, filter;
	transition-duration: var(--rg-motion-reveal-duration);
	transition-timing-function: var(--rg-motion-state-easing);
}
[data-i~='bd-value'] {
	overflow: hidden;
	text-overflow: ellipsis;
}
[data-i~='bd-wait'] {
	justify-self: start;
	background-image: linear-gradient(90deg, var(--color-slate-400) 38%, var(--rg-kora-mark-spark) 44%, var(--rg-kora-mark-glow) 50%, var(--rg-kora-mark-base) 56%, var(--color-slate-400) 62%);
	background-size: 250% 100%;
	background-position: 100% 0;
	background-repeat: no-repeat;
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
}
[data-i~='bd-field']:not([data-fill]) [data-i~='bd-wait'] {
	animation: bd-enrich var(--rg-motion-highlight-duration) var(--rg-motion-highlight-easing) infinite;
}
@keyframes bd-enrich {
	from {
		background-position: 100% 0;
	}
	to {
		background-position: 0% 0;
	}
}
[data-i~='bd-field']:not([data-fill]) [data-i~='bd-value'] {
	opacity: 0;
	filter: blur(var(--blur-sm));
}
[data-i~='bd-field'][data-fill] [data-i~='bd-wait'] {
	opacity: 0;
	filter: blur(var(--blur-sm));
}
@media (prefers-reduced-motion: reduce) {
	[data-i~='bd-wait'] {
		animation: none;
	}
}
/* The foot: where the record came from — the sources' marks — and how long ago. */
[data-i~='bd-foot'] {
	display: flex;
	align-items: center;
	gap: 6px;
	padding-top: 10px;
	border-top: 1px solid var(--color-gray-100);
}
[data-i~='bd-foot'] img {
	width: 14px;
	height: 14px;
	object-fit: contain;
}
[data-i~='bd-when'] {
	margin-left: auto;
	font-size: 11px;
	line-height: 14px;
	color: var(--color-slate-400);
}

/* The arrival (D-0508, in place of D-0451's): the waiting state holds no transition (D-0298), so it is
   taken at once — the card unseen, a reveal's distance above its place; then it slides in whole over
   the reveal, as the records under it slide down (the row above). Nothing inside it staggers. The
   script then fills the fields. */
[data-i~='bd-entry'][data-s='wait'] * {
	transition: none;
}
[data-i~='bd-entry'][data-s='wait'] [data-i~='bd-card'] {
	opacity: 0;
	transform: translateY(calc(var(--rg-motion-reveal-distance) * -1));
}
[data-i~='bd-entry'][data-s='on'] [data-i~='bd-card'] {
	transition-property: opacity, transform;
	transition-duration: var(--rg-motion-reveal-duration);
	transition-timing-function: var(--rg-motion-reveal-easing);
}
/* The frame's fades: 60 at the top; at the left 120 (D-0453: shallower than the kit's 160, so the cut
   stage's 90 reads as a faded column, not nothing); and at the foot, deeper than the frame's 200
   (D-0452): 360, whole ground by 70% of it, so the second record fades out through its length and the
   third is gone — fewer records in view. No fade on the right: nothing runs off it. */
[data-i~='bd-fade'] {
	height: 360px;
	background: linear-gradient(to bottom, transparent, var(--ground) 70%);
}
[data-i~='bd-top'] {
	height: 60px;
}
[data-i~='bd-left'] {
	width: 120px;
}
/* D-0455: the board does not arrive — the pane, its stages and the fades stand from the first frame
   (as the Feed's fades do, D-0449, D-0454); only the records push in, each row opening as a landing
   does, the oldest first, so each pushes the ones before it down; then the board runs. */
:is([data-stage]:not([data-scenes]) [data-board], [data-scenes] [data-scene]) :is([data-i~='bd-pane'], [data-i~='bd-col'], [data-i~='bd-left'], [data-i~='bd-top'], [data-i~='bd-fade'])[data-part] {
	transition: none;
	opacity: 1;
	transform: none;
}

/* ── Graph (D-0501): the MCP page's Product core — the context an MCP server serves as a knowledge
   graph on a sphere: the globe's cells (D-0299) on the board, a hub at the centre and a dotted spoke
   to each node, turning; one-line cards popping on the nodes. The drawing is the scene's canvas; here
   are the cards, in the globe's hand (D-0301, D-0334) cut to one line: the tile and the words side by
   side, the box growing from the tile's square to the card's width. The script places each node by its
   tile's centre, 24 into the card (10 of padding and half the 28 tile); its states are `data-s`:
   tile, open, out. The field does not arrive — it stands, and its cells arrive by their own clock. */
[data-i~='gr-field'] {
	position: absolute;
	inset: 0;
}
:is([data-stage]:not([data-scenes]) [data-board], [data-scenes] [data-scene]) [data-i~='gr-field'][data-part] {
	transition: none;
	opacity: 1;
	transform: none;
}
[data-i~='gr-canvas'] {
	position: absolute;
	inset: 0;
	width: 600px;
	height: 700px;
}
/* The cards move at the roles' pace slowed by an eighth (D-0305): every duration and delay below is a
   role's time × --gr-pace; the script's timings take the same factor. */
[data-i~='gr-nodes'] {
	--gr-pace: 1.125;
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	pointer-events: none;
}
/* A node waits unseen at its cell's size; it pops with the pop role's bounce (D-0300) and fades over a reveal. */
[data-i~='gr-node'] {
	position: absolute;
	top: -24px;
	left: -24px;
	transform-origin: 24px 24px;
	scale: 0.22;
	opacity: 0;
}
[data-i~='gr-node'][data-s='tile'],
[data-i~='gr-node'][data-s='open'] {
	scale: 1;
	opacity: 1;
	transition:
		scale calc(var(--rg-motion-pop-duration) * var(--gr-pace)) var(--rg-motion-pop-easing),
		opacity calc(var(--rg-motion-state-duration) * var(--gr-pace)) var(--rg-motion-state-easing);
}
[data-i~='gr-node'][data-s='out'] {
	scale: 1;
	opacity: 0;
	transition: opacity calc(var(--rg-motion-reveal-duration) * var(--gr-pace)) var(--rg-motion-reveal-easing);
}
[data-i~='gr-card'] {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px 10px 10px;
	font-family: Inter, sans-serif;
	white-space: nowrap;
	text-align: left;
}
/* The box: the globe's heavy glass (D-0334) — a light rim, a faint edge, a highlight along its top —
   at the kit's 4 corners; it grows from the tile's 48 square to the card with the pop role's bounce. */
[data-i~='gr-box'] {
	position: absolute;
	top: 0;
	left: 0;
	width: 48px;
	height: 48px;
	border: 1px solid rgb(255 255 255 / 0.8);
	outline: 0.5px solid rgb(2 6 24 / 0.08);
	border-radius: 4px;
	background: linear-gradient(to bottom, rgb(255 255 255 / 0.55), rgb(255 255 255 / 0.3));
	-webkit-backdrop-filter: blur(var(--blur-xl)) saturate(1.6);
	backdrop-filter: blur(var(--blur-xl)) saturate(1.6);
	box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.9);
}
/* A meeting's node shows its two people (D-0330), each in the tile's place and size, so its first box
   holds both (10 + 28 + 4 + 28 + 10). The cell sits under the first face, where a tile's would. */
[data-i~='gr-node'][data-i~='faces'] [data-i~='gr-box'] {
	width: 80px;
}
[data-i~='gr-node'][data-s='open'] [data-i~='gr-box'],
[data-i~='gr-node'][data-s='out'] [data-i~='gr-box'] {
	width: 100%;
	transition: width calc(var(--rg-motion-pop-duration) * var(--gr-pace)) var(--rg-motion-pop-easing);
}
[data-i~='gr-tile'],
[data-i~='gr-faces'],
[data-i~='gr-words'] {
	position: relative;
}
/* The tile: the Stream's mark (D-0332) — 28 square, white, a hairline, the logo at 16. */
[data-i~='gr-tile'] {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	overflow: clip;
	border: 0.5px solid var(--color-slate-200);
	border-radius: 4px;
	background: white;
	box-shadow: 0 2px 8px 0 rgb(0 0 0 / var(--shade));
}
[data-i~='gr-tile'] img {
	display: block;
	width: 16px;
	height: 16px;
	object-fit: contain;
}
[data-i~='gr-faces'] {
	display: flex;
	flex: none;
	gap: 4px;
}
[data-i~='gr-faces'] img {
	display: block;
	width: 28px;
	height: 28px;
	border-radius: 2px;
	object-fit: cover;
	object-position: 50% 20%;
	background: var(--color-neutral-100);
	box-shadow: 0 2px 8px 0 rgb(0 0 0 / var(--shade));
}
/* The words arrive as the kit's content does (D-0295, D-0302): once the box has grown, the line rises
   a reveal's distance and fades in over the reveal. */
[data-i~='gr-words'] {
	font-weight: 500;
	font-size: 13px;
	line-height: 18px;
	color: var(--color-gray-950);
	opacity: 0;
	transform: translateY(var(--rg-motion-reveal-distance));
}
[data-i~='gr-node'][data-s='open'] [data-i~='gr-words'],
[data-i~='gr-node'][data-s='out'] [data-i~='gr-words'] {
	opacity: 1;
	transform: none;
	transition-property: opacity, transform;
	transition-duration: calc(var(--rg-motion-reveal-duration) * var(--gr-pace));
	transition-timing-function: var(--rg-motion-reveal-easing);
	transition-delay: calc(var(--rg-motion-pop-duration) * var(--gr-pace));
}

/* ── The forecast graph (D-0538, D-0539, D-0544, D-0589): Foresight's pipeline — actual to today, Kora's forecast to
   the quarter's close. No card: the graph stands on the section across its width, as Revenue IQ's bars do, its left end
   fading out under the words and its right end out at the edge, faint dashed guides behind it; the plot an SVG at
   1400 × 492. D-0589: it streams — the script redraws it every frame, so nothing here transitions its shape. */
[data-c~='fc-plot'] {
	position: relative;
	/* D-0600: the words' right edge — the container's content edge plus the measure. */
	--fc-copy-end: calc(max(0px, (100vw - var(--container-page)) / 2) + var(--rg-layout-gutter) + var(--container-measure));
	/* D-0556: how far each pill stands from its dot — the same for today's and the forecast's. */
	--fc-off: 28px;
}
[data-c~='fc-svg'] {
	/* D-0598: over the grid, which is set in HTML behind it. */
	position: relative;
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
	/* D-0589: gone under the words, whole from past their measure. D-0597: whole to the right edge, where the
	   y-axis stands. */
	-webkit-mask-image: linear-gradient(to right, transparent 22%, black 52%);
	mask-image: linear-gradient(to right, transparent 22%, black 52%);
}
/* D-0597: the axes' words, 12 in the muted slate: the dates under the baseline, fading under the words as the
   graph does; the values at the right end, each just over its guide. */
[data-c~='fc-x'] {
	position: absolute;
	inset: 0;
	pointer-events: none;
	font-family: Inter, sans-serif;
	font-size: 12px;
	line-height: 16px;
	letter-spacing: 0;
	color: var(--color-slate-400);
	font-variant-numeric: tabular-nums;
}
/* D-0598: the dates fade in from under the words and out again just before the y-axis's line. */
[data-c~='fc-x'] {
	-webkit-mask-image: linear-gradient(to right, transparent 22%, black 52%, black calc(100% - var(--rg-layout-gutter) - 88px), transparent calc(100% - var(--rg-layout-gutter) - 52px));
	mask-image: linear-gradient(to right, transparent 22%, black 52%, black calc(100% - var(--rg-layout-gutter) - 88px), transparent calc(100% - var(--rg-layout-gutter) - 52px));
}
[data-c~='fc-date'] {
	position: absolute;
	translate: -50% 8px;
	white-space: nowrap;
}
/* D-0618: no values on the y-axis. */
/* D-0598, D-0599: the grid — the guides (faint 6/6 dashes, as the bars' grid, D-0435, D-0546) and the baseline — set
   from the right edge: they end a gutter and the values' width (48) in, where the values begin; no axis line. The
   grid fades under the words as the graph does. */
[data-c~='fc-grid'] {
	position: absolute;
	inset: 0;
	pointer-events: none;
	--fc-axis-at: calc(var(--rg-layout-gutter) + 48px);
	-webkit-mask-image: linear-gradient(to right, transparent 22%, black 52%);
	mask-image: linear-gradient(to right, transparent 22%, black 52%);
}
[data-c~='fc-guide'],
[data-c~='fc-base'] {
	position: absolute;
	left: 0;
	right: var(--fc-axis-at);
}
[data-c~='fc-guide'] {
	height: 1px;
	background: repeating-linear-gradient(to right, var(--color-slate-200) 0 6px, transparent 6px 12px);
	/* D-0600: where a guide runs behind the words it is faint (30%), coming up to full over 48 past their
	   measure (--fc-copy-end). */
	-webkit-mask-image: linear-gradient(to right, rgb(0 0 0 / 0.3) var(--fc-copy-end), black calc(var(--fc-copy-end) + 48px));
	mask-image: linear-gradient(to right, rgb(0 0 0 / 0.3) var(--fc-copy-end), black calc(var(--fc-copy-end) + 48px));
}
[data-c~='fc-base'] {
	top: var(--fc-foot);
	/* D-0606: the guides' own slate-200. */
	border-top: 1px solid var(--color-slate-200);
}
/* D-0553: one hue across the graph — emerald-500 at its start to sky-500 at its end — for the line and the forecast's
   dashes alike, and for the wash under them (the wash masked to fade to nothing at the foot): so past and forecast
   blend as one graph. The forecast's wash is the same hue, lighter. */
[data-c~='fc-hue-from'] {
	stop-color: var(--color-emerald-500);
}
[data-c~='fc-hue-to'] {
	stop-color: var(--color-sky-500);
}
[data-c~='fc-fade-top'] {
	stop-color: white;
	stop-opacity: 1;
}
[data-c~='fc-fade-foot'] {
	stop-color: white;
	stop-opacity: 0;
}
[data-c~='fc-line'] {
	fill: none;
	stroke: url(#fc-hue);
	/* D-0544: thinner. */
	stroke-width: 1.75;
	stroke-linecap: round;
}
[data-c~='fc-area'] {
	fill: url(#fc-hue);
	fill-opacity: 0.28;
	mask: url(#fc-wash);
}
/* D-0554: the forecast's close — a hollow dot in the line's blue. */
[data-c~='fc-end'] {
	fill: white;
	stroke: var(--color-sky-500);
	stroke-width: 1.5;
}
[data-c~='fc-ahead'] {
	fill: none;
	stroke: url(#fc-hue);
	stroke-width: 1.5;
	stroke-dasharray: 6 5;
	stroke-linecap: round;
}
[data-c~='fc-now'] line {
	/* D-0544: lighter. */
	stroke: var(--color-slate-300);
	stroke-width: 1;
}
/* D-0544: the dot filled; a ring ripples out of it, again and again, fading as it grows. */
[data-c~='fc-dot'] {
	fill: var(--color-sky-600);
	stroke: white;
	stroke-width: 1.5;
}
/* D-0544: the pills — small, white, a hairline: today's beside its dot, to the right; the forecast's at the
   line's end, under it (the gap to target stands above). A muted word and the figure. */
[data-c~='fc-pill'] {
	position: absolute;
	white-space: nowrap;
	font-family: Inter, sans-serif;
	letter-spacing: 0;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 10px;
	border: 0.5px solid var(--color-slate-200);
	border-radius: 999px;
	background: white;
	box-shadow: 0 4px 12px 0 rgb(0 0 0 / 0.06);
	font-size: 11px;
	line-height: 16px;
}
[data-c~='fc-pill'] b {
	font-weight: 600;
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	color: var(--color-gray-950);
}
[data-c~='fc-pill-label'] {
	color: var(--color-slate-500);
}

/* D-0555: today's pill stands above its dot, starting at it, high enough that the rising forecast passes under it. */
/* D-0610: today's pill above its dot (D-0609 reverted), ending at it — as the forecast's ends at its close. */
[data-c~='fc-pill'][data-c~='now'] {
	translate: calc(-100% + 8px) calc(-100% - var(--fc-off));
}
/* D-0589: below xl the graph is smaller and the two pills would meet — today's drops under its dot. D-0597: and
   ends at it, over the wash, clear of the y-axis's values at the right; the forecast's ends short of its close. */
@media (width < 80rem) {
	/* D-0610: ending just short of its dot, as the forecast's does here — under it, the two dots too near here for
	   both pills above. */
	/* D-0613: today's above its dot, the forecast's (now below it) under its close — each ending just short of its
	   dot. (Prefixed so they hold over the rules for every width below.) */
	[data-forecast] [data-c~='fc-pill'][data-c~='now'] {
		translate: calc(-100% - 8px) calc(-100% - var(--fc-off));
	}
	[data-forecast] [data-c~='fc-pill'][data-c~='ahead'] {
		translate: calc(-100% - 8px) 16px;
	}
}
/* D-0554, D-0555, D-0557: the forecast's pill stands above its close, ending at the dot, clear of the line. */
[data-c~='fc-pill'][data-c~='ahead'] {
	/* D-0557: above its dot, as today's is, ending at it. */
	/* D-0559: nearer its dot (16) than today's pill (28): today's ring makes its own read nearer. */
	/* D-0589: one line, as today's — Kora's mark, the words, the figure. D-0613: under its close, the forecast now
	   below today. */
	translate: calc(-100% + 8px) 16px;
}
[data-c~='fc-ripple'] {
	fill: none;
	stroke: var(--color-sky-500);
	stroke-width: 1.5;
	opacity: 0;
	transform-box: fill-box;
	transform-origin: center;
}
@keyframes fc-ripple {
	from {
		scale: 1;
		opacity: 0.7;
	}
	to {
		scale: 3.2;
		opacity: 0;
	}
}
@media (prefers-reduced-motion: no-preference) {
	[data-forecast][data-s] [data-c~='fc-ripple'] {
		animation: fc-ripple calc(var(--rg-motion-highlight-loop) / 2) var(--rg-motion-state-easing) infinite;
	}
}
/* D-0612: the arrival, one eased, overlapping sequence once the graph is seen (`data-s`), ~2.5s, while the wave
   already flows: the grid and axes fade in; the line draws in from the left (0–1.4s); today's rule and dot from
   1s; the forecast draws on (1.2–2.2s); both pills from 2s — each on the reveal role's ease-out, not linear. */
[data-forecast] :is([data-c~='fc-past'], [data-c~='fc-future']) {
	clip-path: inset(0 100% 0 0);
}
[data-forecast] :is([data-c~='fc-now'], [data-c~='fc-x'], [data-c~='fc-grid'], [data-c~='fc-pill']) {
	opacity: 0;
}
[data-forecast][data-s] :is([data-c~='fc-past'], [data-c~='fc-future']) {
	clip-path: inset(0);
}
[data-forecast][data-s] :is([data-c~='fc-now'], [data-c~='fc-x'], [data-c~='fc-grid'], [data-c~='fc-pill']) {
	opacity: 1;
}
[data-forecast][data-s] :is([data-c~='fc-x'], [data-c~='fc-grid']) {
	transition: opacity var(--rg-motion-reveal-duration) var(--rg-motion-reveal-easing);
}
[data-forecast][data-s] [data-c~='fc-past'] {
	transition: clip-path calc(var(--rg-motion-draw-duration) * 1.75) var(--rg-motion-reveal-easing);
}
[data-forecast][data-s] [data-c~='fc-now'] {
	transition: opacity var(--rg-motion-reveal-duration) var(--rg-motion-reveal-easing) calc(var(--rg-motion-draw-duration) * 1.25);
}
[data-forecast][data-s] [data-c~='fc-future'] {
	transition: clip-path calc(var(--rg-motion-draw-duration) * 1.25) var(--rg-motion-reveal-easing) calc(var(--rg-motion-draw-duration) * 1.5);
}
[data-forecast][data-s] [data-c~='fc-pill'] {
	transition: opacity var(--rg-motion-reveal-duration) var(--rg-motion-reveal-easing) calc(var(--rg-motion-draw-duration) * 2.5);
}