@charset "UTF-8";

/* =====================================================================
   INSPACE SYSTEM  (js/inspace-system.js draws it; see the notes there)
   The four visuals on inspace.html: team, cycle, budget, platform.

   Theme: the panel is "theme-media" in Inspace's own colours (sand
   #F4F0E9 light / navy #0C141E dark, from www.inspace.ai). The drafting
   is drawn in its warm greys; the 3D layer reads the --ix-* colours
   below (and follows the theme switch).
   ===================================================================== */

.isx {
	--ix-paper: #FFFFFF;
	--ix-hair: #D8CFC2;
	--ix-ink: #6B5D53;
	--ix-text: #0C141E;
	--ix-glass: #C9D9EE;
	--ix-ground: #E9E2D6;
	--ix-leased: #DCD4C6;
	--ix-card: #FFFFFF;
	--ix-ease: cubic-bezier(.65, 0, .35, 1);
	position: relative;
	overflow: hidden;
}

html[data-theme="dark"] .isx {
	--ix-paper: #16202C;
	--ix-hair: #2A3442;
	--ix-ink: #9EA2A7;
	--ix-text: #FFFFFF;
	--ix-glass: #2C3E58;
	--ix-ground: #1B2633;
	--ix-leased: #2E3947;
	--ix-card: #121B26;
}

/* stacked layouts: square */
html.bp-max-1024 .split-layout-media.isx,
html.bp-max-1080 .full-width-image--20-8.isx {
	aspect-ratio: 1 / 1;
}

@media (max-width: 1024px) {
	html:not(.dfui) .split-layout-media.isx { aspect-ratio: 1 / 1; }
}

@media (max-width: 1080px) {
	html:not(.dfui) .full-width-image--20-8.isx { aspect-ratio: 1 / 1; }
}

.isx__gl,
.isx__svg,
.isx__draft {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}

.isx__gl { z-index: 0; opacity: 0; transition: opacity 0.8s ease; }
.isx--3d .isx__gl { opacity: 1; }
.isx__svg { z-index: 1; }
.isx__draft { z-index: 2; pointer-events: none; overflow: hidden; }

.isx__world,
.isx__gl { transition: opacity 0.6s ease; }
.isx--cut .isx__world,
.isx--cut .isx__gl { opacity: 0; }

/* ---------- line work: 1px on screen ---------- */
.isx .ix-hair,
.isx .ix-ink,
.isx .ix-dash,
.isx .ix-dashf,
.isx .ix-card,
.isx .ix-paperless,
.isx .ix-thumb,
.isx .ix-studio,
.isx .ix-node,
.isx .ix-scan,
.isx .ix-lead,
.isx .ix-budget,
.isx .ix-leased,
.isx .ix-pin {
	vector-effect: non-scaling-stroke;
	stroke-width: 1;
}

.isx .ix-hair { fill: none; stroke: var(--ix-hair); }
.isx .ix-ink { fill: none; stroke: var(--ix-ink); }
.isx .ix-dash { fill: none; stroke: var(--ix-ink); stroke-dasharray: 4 4; }
.isx .ix-dashf { fill: none; stroke: var(--ix-hair); stroke-dasharray: 2 4; }
.isx .ix-inkdot { fill: var(--ix-ink); }
.isx .ix-card { fill: var(--ix-card); stroke: var(--ix-hair); }
.isx .ix-card--on { stroke: var(--ix-ink); }
.isx .ix-paperless { fill: none; stroke: var(--ix-ink); }
.isx .ix-thumb { fill: var(--ix-ground); stroke: var(--ix-hair); }
.isx .ix-studio { fill: var(--ix-hair); stroke: var(--ix-ink); }
.isx .ix-node { fill: var(--ix-paper); stroke: var(--ix-ink); }
.isx .ix-node--new { fill: #3B5786; stroke: #3B5786; }
.isx .ix-node--out { fill: var(--ix-paper); stroke: var(--ix-ink); stroke-dasharray: 2 2; }
.isx .ix-blue { fill: #3B5786; }
.isx .ix-pin { fill: #3B5786; stroke: #FFFFFF; }
.isx .ix-scan { stroke: #3B5786; fill: none; }
.isx .ix-lead { fill: none; stroke: #3B5786; }
.isx .ix-budget { stroke: #B3261E; fill: none; stroke-dasharray: 6 4; }
.isx .ix-leased { fill: var(--ix-leased); stroke: var(--ix-ink); }

.isx .ix-mono {
	font-family: Consolas, "Courier New", monospace;
	font-size: 20px;
	letter-spacing: 0.08em;
	fill: var(--ix-ink);
}

.isx .ix-mono--s { font-size: 16px; }
.isx .ix-mono--xs { font-size: 13px; }
.isx .ix-mono--ink { fill: var(--ix-text); }
.isx .ix-mono--blue { fill: #3B5786; }
html[data-theme="dark"] .isx .ix-mono--blue { fill: #8EA9D6; }

/* the product UI (Inspace uses Manrope; the site's Nunito Sans stands in) */
.isx .ix-ui { font-family: "Nunito Sans", sans-serif; font-size: 18px; font-weight: 500; fill: var(--ix-ink); }
.isx .ix-ui--b { font-weight: 700; fill: var(--ix-text); }
.isx .ix-ui--s { font-size: 15px; }
.isx .ix-ui--inv { font-size: 13px; font-weight: 700; fill: #FFFFFF; }
.isx .ix-ui--g { font-size: 13px; font-weight: 700; fill: #4C6A3D; }

.isx .ix-flow {
	fill: none;
	stroke: #3B5786;
	stroke-width: 5;
	stroke-linecap: round;
	stroke-dasharray: 0.1 26;
}

.isx[data-p] .ix-flow { animation: ix-flow 1.4s linear infinite; }
@keyframes ix-flow { to { stroke-dashoffset: -26.1; } }

/* ---------- phases (as css/stan-system.css), up to six ---------- */
.isx .mv {
	transform: var(--t0);
	opacity: var(--o0, 1);
	transition: transform var(--uu, 1.5s) var(--ix-ease) var(--dd, 0s), opacity 0.8s var(--ix-ease) var(--dd, 0s);
}

.isx .ix-pop { transform-box: fill-box; transform-origin: 50% 50%; }
.isx .ix-bar { transform-box: fill-box; transform-origin: 0 50%; }

.isx[data-p="1"] .mv { transform: var(--t1, var(--t0)); opacity: var(--o1, var(--o0, 1)); --dd: var(--d1, 0s); --uu: var(--u1, 1.5s); }
.isx[data-p="2"] .mv { transform: var(--t2, var(--t1, var(--t0))); opacity: var(--o2, var(--o1, var(--o0, 1))); --dd: var(--d2, 0s); --uu: var(--u2, 1.5s); }
.isx[data-p="3"] .mv { transform: var(--t3, var(--t2, var(--t1, var(--t0)))); opacity: var(--o3, var(--o2, var(--o1, var(--o0, 1)))); --dd: var(--d3, 0s); --uu: var(--u3, 1.5s); }
.isx[data-p="4"] .mv { transform: var(--t4, var(--t3, var(--t2, var(--t1, var(--t0))))); opacity: var(--o4, var(--o3, var(--o2, var(--o1, var(--o0, 1))))); --dd: var(--d4, 0s); --uu: var(--u4, 1.5s); }
.isx[data-p="5"] .mv { transform: var(--t5, var(--t4, var(--t3, var(--t2, var(--t1, var(--t0)))))); opacity: var(--o5, var(--o4, var(--o3, var(--o2, var(--o1, var(--o0, 1)))))); --dd: var(--d5, 0s); --uu: var(--u5, 1.5s); }

.isx--snap .mv,
.isx--snap .ixd-note { transition: none !important; }

.isx--idle .isx__world * { animation-play-state: paused !important; }

/* ---------- drafting overlay (screen space) ---------- */
.isx__draft path {
	fill: none;
	stroke: var(--ix-ink);
	stroke-width: calc(1px / var(--ui-scale, 1));
}

.isx__draft text {
	font-family: Consolas, "Courier New", monospace;
	font-size: calc(10.5px / var(--ui-scale, 1));
	letter-spacing: 0.08em;
	fill: var(--ix-ink);
}

.isx__draft .ixd-small { font-size: calc(8.5px / var(--ui-scale, 1)); }
.isx__draft .ixd-note { letter-spacing: 0.02em; opacity: 0; }
.isx__draft .ixd-note.is-on { opacity: 1; transition: opacity 0.9s cubic-bezier(.65, 0, .35, 1) 1s; }
.isx--cut .isx__draft .ixd-note { opacity: 0; transition: opacity 0.3s ease; }

@media (prefers-reduced-motion: reduce) {
	.isx .mv,
	.isx__world,
	.isx__gl { transition: none !important; }

	.isx__world * { animation: none !important; }
}