@charset "UTF-8";

/* =====================================================================
   STAN SYSTEM  (js/stan-system.js draws it; see the notes there)
   The four visuals on stan.html: audit, fluid, layers, evolve.

   Theme: the panel is "theme-media" (light #F0F0F0 / dark #141414, Stan's
   own surface). The drafting is drawn in Stan's live-site greys
   (#C4C4C4 / #575757 light, #333333 / #8C8C8C dark); the Stan artwork
   itself (#070707 pages, #0072FB) never changes with the theme.
   Lengths inside the SVG are world units; strokes are 1px on screen.
   ===================================================================== */

.ssys {
	--ss-paper: #FFFFFF;
	--ss-hair: #C4C4C4;
	--ss-ink: #575757;
	--ss-text: #070707;
	--ss-edge: #E9E9E9;
	--ss-blue: #0072FB;
	--ss-ease: cubic-bezier(.65, 0, .35, 1);
	position: relative;
	overflow: hidden;
}

html[data-theme="dark"] .ssys {
	--ss-paper: #070707;
	--ss-hair: #333333;
	--ss-ink: #8C8C8C;
	--ss-text: #FFFFFF;
	--ss-edge: #262626;
}

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

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

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

.ssys__svg,
.ssys__draft {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}

.ssys__svg { z-index: 0; }
.ssys__html { position: absolute; left: 0; top: 0; transform-origin: 0 0; z-index: 1; }
.ssys__draft { z-index: 2; pointer-events: none; overflow: hidden; }

.ssys__world { transition: opacity 0.6s ease; }
.ssys--cut .ssys__world { opacity: 0; }

/* ---------- line work: 1px on screen at any zoom ---------- */
.ssys .ss-hair,
.ssys .ss-ink,
.ssys .ss-dash,
.ssys .ss-dashf,
.ssys .ss-paper,
.ssys .ss-edge,
.ssys .ss-grid,
.ssys .ss-struct,
.ssys .ss-scan,
.ssys .ss-head,
.ssys .ss-notch,
.ssys .ss-swatch,
.ssys .ss-trace,
.ssys .ss-pagefill {
	vector-effect: non-scaling-stroke;
	stroke-width: 1;
}

.ssys .ss-hair { fill: none; stroke: var(--ss-hair); }
.ssys .ss-ink { fill: none; stroke: var(--ss-ink); }
.ssys .ss-dash { fill: none; stroke: var(--ss-ink); stroke-dasharray: 4 4; }
.ssys .ss-dashf { fill: none; stroke: var(--ss-hair); stroke-dasharray: 2 4; }
.ssys .ss-paper { fill: var(--ss-paper); stroke: var(--ss-ink); }
.ssys .ss-edge { fill: var(--ss-edge); stroke: var(--ss-ink); }
.ssys .ss-pagefill { fill: #070707; stroke: var(--ss-ink); }
.ssys .ss-glass { fill-opacity: 0.62; }   /* layers: the slabs above tokens let the layer under them show through */
.ssys .ss-notch { fill: var(--ss-paper); stroke: var(--ss-ink); }
.ssys .ss-swatch { stroke: var(--ss-ink); }
.ssys .ss-grid { fill: none; stroke: #0072FB; stroke-opacity: 0.35; }
.ssys .ss-struct { fill: none; stroke: #0072FB; stroke-dasharray: 6 4; }
.ssys .ss-scan { stroke: #0072FB; }
.ssys .ss-head { fill: #0072FB; stroke: #0072FB; }
.ssys .ss-trace { fill: none; stroke: #0072FB; stroke-dasharray: 4 4; }
.ssys .ss-curve { fill: none; stroke: #0072FB; stroke-width: 3; }
.ssys .ss-fl-dot { fill: #0072FB; stroke: var(--ss-paper); stroke-width: 3; }

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

.ssys .ss-mono--s { font-size: 15px; }
.ssys .ss-mono--xl { font-size: 26px; }
.ssys .ss-mono--ink { fill: var(--ss-text); }
.ssys .ss-mono--struct { fill: #4C9BFF; }
.ssys .ss-sans { font-family: "Nunito Sans", sans-serif; font-weight: 800; }
.ssys .ss-ui { font-family: "Open Sans", sans-serif; fill: var(--ss-ink); }

/* travelling dots on the traced blue */
.ssys .ss-flow {
	fill: none;
	stroke: #0072FB;
	stroke-width: 6;
	stroke-linecap: round;
	stroke-dasharray: 0.1 30;
}

.ssys[data-p] .ss-flow { animation: ss-flow 1.4s linear infinite; }
@keyframes ss-flow { to { stroke-dashoffset: 30.1; } }

/* the layers' phone stack only shows when the band is wide */
.ssys--narrow .ss-phone-stack { display: none; }

/* ---------- phases ----------
   The script only sets data-p on the container. Each moving part (.mv)
   carries its state per phase: --t0..--t4 transform, --o0..--o4
   opacity, --d1..--d4 delay, --u1..--u4 duration; a phase without a
   value keeps the previous one. */
.ssys .mv {
	transform: var(--t0);
	opacity: var(--o0, 1);
	transition: transform var(--uu, 1.5s) var(--ss-ease) var(--dd, 0s), opacity 0.8s var(--ss-ease) var(--dd, 0s);
}

.ssys[data-p="1"] .mv { transform: var(--t1, var(--t0)); opacity: var(--o1, var(--o0, 1)); --dd: var(--d1, 0s); --uu: var(--u1, 1.5s); }
.ssys[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); }
.ssys[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); }
.ssys[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); }

.ssys[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); }

/* The camera (FIG. 01, user review 2026-11-15): its own --c0..--c5 / --cu0..--cu5, so
   the parts inside it never inherit its transform. It glides for the whole phase. */
.ssys .ss-cam { transform: var(--c0); transition: transform var(--cuu, 1.5s) cubic-bezier(.45, 0, .25, 1); }
.ssys[data-p="1"] .ss-cam { transform: var(--c1); --cuu: var(--cu1); }
.ssys[data-p="2"] .ss-cam { transform: var(--c2); --cuu: var(--cu2); }
.ssys[data-p="3"] .ss-cam { transform: var(--c3); --cuu: var(--cu3); }
.ssys[data-p="4"] .ss-cam { transform: var(--c4); --cuu: var(--cu4); }
.ssys[data-p="5"] .ss-cam { transform: var(--c5); --cuu: var(--cu5); }

/* lines that draw on in their phase (.ss-dr--N) and stay drawn after it */
.ssys .ss-dr {
	fill: none;
	stroke: var(--ss-ink);
	stroke-width: calc(1px / var(--ui-scale, 1));
	vector-effect: non-scaling-stroke;
	stroke-dasharray: 1 1;
	stroke-dashoffset: 1;
	transition: stroke-dashoffset 1.4s var(--ss-ease) var(--dl, 0s);
}
.ssys .ss-dr--thin { stroke: var(--ss-hair); transition-duration: 1.1s; }
.ssys[data-p="1"] .ss-dr--1,
.ssys[data-p="2"] .ss-dr--1, .ssys[data-p="2"] .ss-dr--2,
.ssys[data-p="3"] .ss-dr--1, .ssys[data-p="3"] .ss-dr--2,
.ssys[data-p="4"] .ss-dr--1, .ssys[data-p="4"] .ss-dr--2, .ssys[data-p="4"] .ss-dr--4,
.ssys[data-p="5"] .ss-dr--1, .ssys[data-p="5"] .ss-dr--2, .ssys[data-p="5"] .ss-dr--4, .ssys[data-p="5"] .ss-dr--5 { stroke-dashoffset: 0; }
/* the module traces step back once the library is built */
.ssys[data-p="5"] .ss-dr--4 { opacity: 0.25; transition: stroke-dashoffset 1.4s var(--ss-ease), opacity 1s var(--ss-ease); }

/* journey nodes: drafted rings, never solid */
.ssys .ss-node { fill: var(--ss-paper); stroke: var(--ss-ink); stroke-width: calc(1px / var(--ui-scale, 1)); vector-effect: non-scaling-stroke; }
.ssys .ss-inkf { fill: none; stroke: var(--ss-ink); stroke-width: calc(1px / var(--ui-scale, 1)); vector-effect: non-scaling-stroke; }

.ssys .ss-tracebox { transform-box: fill-box; transform-origin: 50% 100%; }

/* rewind at the end of a loop: no transitions */
.ssys--snap .mv,
.ssys--snap .ss-cam,
.ssys--snap .ss-dr,
.ssys--snap .ssd-note { transition: none !important; }

/* off screen / tab hidden: hold every loop */
.ssys--idle .ssys__world * { animation-play-state: paused !important; }

/* ---------- drafting overlay (screen space, as the production maps) ---------- */
.ssys__draft path {
	fill: none;
	stroke: var(--ss-ink);
	stroke-width: calc(1px / var(--ui-scale, 1));
}

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

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

/* =====================================================================
   FLUID: the resizable window. Real HTML: every size in the page below
   is clamp() on container units (cqi) and the grids are intrinsic
   (auto-fit / auto-fill), so it reflows as the window changes width
   with no media queries at all. Sizes are virtual px; the stage is
   scaled to fit, so borders use --inv to stay 1px on screen.
   ===================================================================== */
.ssr { position: relative; }

.ssr-win {
	position: absolute;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	background: var(--ss-paper);
	border: calc(1px * var(--inv, 1)) solid var(--ss-ink);
	border-radius: 12px;
	transition: border-radius 0.6s var(--ss-ease), padding 0.6s var(--ss-ease);
}

.ssr-chrome {
	position: relative;
	flex: none;
	height: 86px;
	overflow: hidden;
	border-bottom: calc(1px * var(--inv, 1)) solid var(--ss-ink);
	font: 400 12px/1 "Open Sans", sans-serif;
	color: var(--ss-ink);
	transition: height 0.6s var(--ss-ease), opacity 0.4s ease;
}

.ssr-dots { position: absolute; left: 18px; top: 14px; display: flex; gap: 6px; }
.ssr-dots i { width: 12px; height: 12px; border-radius: 50%; border: calc(1px * var(--inv, 1)) solid var(--ss-ink); box-sizing: border-box; }

.ssr-tab {
	position: absolute;
	left: 94px;
	top: 6px;
	width: 232px;
	height: 34px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 10px;
	white-space: nowrap;
	overflow: hidden;
	border: calc(1px * var(--inv, 1)) solid var(--ss-ink);
	border-bottom: 0;
	border-radius: 8px 8px 0 0;
}

.ssr-tab .ssr-logo { width: 30px; color: var(--ss-ink); margin: 0; }

.ssr-url {
	position: absolute;
	left: 96px;
	right: 54px;
	top: 48px;
	height: 30px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	padding: 0 18px;
	border: calc(1px * var(--inv, 1)) solid var(--ss-ink);
	border-radius: 15px;
	white-space: nowrap;
	overflow: hidden;
}

.ssr-view {
	position: relative;
	box-sizing: border-box;
	flex: 1;
	min-height: 0;
	overflow: hidden;
	background: #070707;
	container-type: inline-size;
	transition: border-radius 0.6s var(--ss-ease);
}

/* phone widths: the browser becomes a line-drawn phone */
.ssr-win.is-phone { border-radius: 54px; padding: 14px; }
.ssr-win.is-phone .ssr-chrome { height: 0; opacity: 0; border-bottom-width: 0; }
.ssr-win.is-phone .ssr-view { border-radius: 40px; padding-top: 34px; }

.ssr-notch {
	position: absolute;
	left: 50%;
	top: 24px;
	width: 96px;
	height: 26px;
	margin-left: -48px;
	border-radius: 13px;
	background: #070707;
	box-shadow: 0 0 0 calc(1px * var(--inv, 1)) #333333;
	opacity: 0;
	transition: opacity 0.4s ease;
	pointer-events: none;
}

.ssr-win.is-phone .ssr-notch { opacity: 1; }

/* the drag handle: a full-height strip on the right edge with a knob */
.ssr-handle {
	position: absolute;
	top: 0;
	bottom: 0;
	right: -30px;
	width: 60px;
	padding: 0;
	border: 0;
	background: none;
	cursor: ew-resize;
	touch-action: none;
}

.ssr-knob {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 52px;
	height: 52px;
	margin: -26px 0 0 -26px;
	box-sizing: border-box;
	border-radius: 50%;
	border: calc(1px * var(--inv, 1)) solid var(--ss-ink);
	background: var(--ss-paper);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.ssr-knob svg { width: 28px; height: 28px; fill: none; stroke: var(--ss-ink); stroke-width: calc(1.5px * var(--inv, 1)); }
.ssr-handle:hover .ssr-knob,
.ssr-handle:focus-visible .ssr-knob,
.ssys--drag .ssr-knob { background: #0072FB; border-color: #0072FB; }
.ssr-handle:hover .ssr-knob svg,
.ssr-handle:focus-visible .ssr-knob svg,
.ssys--drag .ssr-knob svg { stroke: #FFFFFF; }
.ssr-handle:focus-visible { outline: none; }

/* ---------- the Stan page inside (live-site tokens) ---------- */
.ssr-page { font-family: "Nunito Sans", sans-serif; color: #FFFFFF; }
.ssr-page p { margin: 0; }
.ssr-logo { display: block; aspect-ratio: 145 / 44; color: #FFFFFF; }

.ssr-nav {
	display: flex;
	align-items: center;
	gap: clamp(10px, 1.6cqi, 24px);
	padding: clamp(12px, 1.4cqi, 18px) clamp(16px, 2.6cqi, 40px);
	background: linear-gradient(#262626, #070707);
}

.ssr-nav .ssr-logo { width: clamp(58px, 6cqi, 84px); margin-right: auto; }
.ssr-login,
.ssr-pill { font-weight: 800; font-size: clamp(12px, 0.3cqi + 10px, 15px); }
.ssr-pill { background: #0072FB; border-radius: 999px; padding: 0.55em 1.3em; }

.ssr-hero {
	display: grid;
	justify-items: center;
	gap: clamp(10px, 1.3cqi, 20px);
	padding: clamp(22px, 4cqi, 60px) clamp(18px, 6cqi, 120px);
	text-align: center;
}

.ssr-logo--big { width: clamp(130px, 18cqi, 240px); }
.ssr-h1 { color: #FFFFFF; font-weight: 800; font-size: clamp(26px, 2.2cqi + 14px, 48px); line-height: 1.15; max-width: 18em; }
.ssr-sub { font-weight: 500; font-size: clamp(13px, 0.5cqi + 11px, 18px); line-height: 1.4; color: #E9E9E9; max-width: 32em; }

.ssr-form { display: flex; flex-wrap: wrap; gap: clamp(8px, 1cqi, 12px); width: min(100%, 640px); margin-top: clamp(4px, 1cqi, 12px); }
.ssr-input,
.ssr-cta { flex: 1 1 200px; box-sizing: border-box; padding: 0.85em 1.1em; font-size: clamp(13px, 0.3cqi + 11px, 16px); line-height: 1.2; }
.ssr-input { background: #E9E9E9; color: #575757; border-radius: 6px; text-align: left; font-weight: 500; }
.ssr-cta { flex-basis: 170px; background: #0072FB; border-radius: 999px; font-weight: 800; }

.ssr-rail {
	padding: clamp(18px, 3cqi, 48px) clamp(16px, 2.6cqi, 40px);
	background: linear-gradient(160deg, #0B1F4D, #070707 60%);
}

.ssr-h2 { color: #FFFFFF; font-weight: 800; font-size: clamp(18px, 1.2cqi + 12px, 30px); line-height: 1.2; max-width: 22em; margin-bottom: 0.8em !important; }

.ssr-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(clamp(88px, 9cqi, 150px), 1fr));
	grid-auto-rows: 0;
	grid-template-rows: auto;
	column-gap: clamp(6px, 0.9cqi, 12px);
	overflow: hidden;
}

.ssr-tile { position: relative; aspect-ratio: 2 / 3; border-radius: 4px; }
.ssr-tile i { position: absolute; left: 8%; top: 6%; width: 45%; height: 4%; min-height: 4px; border-radius: 3px; background: #0072FB; }

.ssr-faq { display: grid; gap: clamp(6px, 0.7cqi, 10px); padding: clamp(20px, 3cqi, 44px) clamp(16px, 16cqi - 40px, 260px); text-align: center; }
.ssr-row { display: flex; align-items: center; justify-content: space-between; background: #262626; border-radius: 4px; padding: clamp(10px, 1cqi, 14px) clamp(12px, 1.2cqi, 18px); }
.ssr-row i { display: block; height: 10px; border-radius: 5px; background: #FFFFFF; }
.ssr-row b { color: #0072FB; font-size: 20px; line-height: 1; }

/* reduced motion: one finished phase, no loops (the window still drags) */
@media (prefers-reduced-motion: reduce) {
	.ssys .mv,
	.ssys__world,
	.ssr-win,
	.ssr-chrome,
	.ssr-view { transition: none !important; }

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

/* ---------- CAD pass (user review 2026-11-15: the Stan visuals in the style of the
   Google case study): sheet furniture in the overlay (crop marks, title strip) and
   drafted rings instead of solid accent dots. ---------- */
.ssys__draft .ssd-crop,
.ssys__draft .ssd-strip rect,
.ssys__draft .ssd-strip path {
	fill: none;
	stroke: var(--ss-ink);
	stroke-width: 1;
}
.ssys__draft .ssd-strip text { letter-spacing: 0.06em; }
.ssys .ss-ring { fill: none; stroke: var(--ss-blue); stroke-width: calc(1px / var(--ui-scale, 1)); vector-effect: non-scaling-stroke; }