/* walkthrough.css — the interactive Singularity walkthrough (/walkthrough/).
 * Separate file on purpose (same reasoning as docs.css): phase2.css is shared
 * ground and concurrent sessions have clobbered it before. Everything here is
 * namespaced .p2-walk and leans on the app.min.css / phase2.css tokens.
 * Reuses the .p2-connections__* SVG classes from phase2.css for the figure so
 * the live graph is visually identical to the sanctioned static component. */

/* Full-page app: the sticky site header (59px, beige, hairline underline) stays
 * as the way back into the site; everything under it is the tool. The page
 * itself never scrolls: the chat scrolls internally and the architecture
 * canvas pans/zooms. */
html:has(body.page-walkthrough) { overflow: hidden; height: 100%; }

body.page-walkthrough {
	overflow: hidden;
	background: var(--global--color-dark);
	/* exact viewport split: header takes its natural height, the app takes the
	   rest. No calc against an assumed header height, so no leftover scroll.
	   !important because the theme pins body height elsewhere. */
	height: 100vh !important;
	height: 100dvh !important;
	display: flex;
	flex-direction: column;
	overscroll-behavior: none;
}

body.page-walkthrough main { flex: 1 1 auto; min-height: 0; }

/* the header joins the app: solid dark ground, same markup/links/spacing as
 * every other page, hairline flipped to the light palette */
body.page-walkthrough .site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--global--color-dark);
	border-bottom: 1px solid var(--global--color-light-10);
}

.p2-walkmain {
	height: 100%;
	padding: 14px;
	box-sizing: border-box;
}

.p2-walk {
	background-color: var(--global--color-dark);
	border-radius: var(--global--border-radius-md);
	color: var(--global--color-light);
	padding: var(--grid--gutter);
	display: grid;
	grid-template-columns: minmax(340px, 5fr) 7fr;
	gap: var(--grid--gutter);
	height: 100%;
	min-height: 0;
	box-sizing: border-box;
}

/* ---- left: the guide ---- */
.p2-walk__chat {
	display: flex;
	flex-direction: column;
	background: var(--global--color-light-5);
	border: 1px solid var(--global--color-light-10);
	border-radius: var(--global--border-radius-md);
	/* fills the app column; the message list scrolls INSIDE the panel */
	height: 100%;
	min-height: 0;
	overflow: hidden;
}

.p2-walk__chathead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 18px;
	border-bottom: 1px solid var(--global--color-light-10);
}

/* Fix 6 (2026-09-29): the H1 was styled as an 11px mono-caps toolbar label, so it read as a
   status chip, not a heading. Moved onto the site's real heading tokens (sans, display weight,
   no transform) so it reads as an H1; kept modest (xl, not a page-hero size) since this is a
   compact app toolbar, not a marketing hero. */
.p2-walk__chattitle {
	font-family: var(--global--font-family-sans);
	font-size: var(--global--font-size-xl);
	line-height: var(--global--line-height-xl);
	letter-spacing: var(--global--letter-spacing-tight);
	font-weight: var(--global--font-weight-display);
	text-transform: none;
	color: var(--global--color-light);
	margin: 0;
}

/* brand-name guard: mode40 must always render lowercase, even inside an all-caps label */
.p2-walk__no-caps {
	text-transform: none;
}

.p2-walk__status {
	font-family: var(--global--font-family-mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--global--color-light-60);
	white-space: nowrap;
}

.p2-walk__status::before {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	margin-right: 7px;
	background: var(--global--color-light-20);
}

.p2-walk__status.is-on::before { background: var(--global--color-teal); }
.p2-walk__status.is-off::before { background: var(--global--color-red); }

/* Fix 9 / walkthrough (2026-09-28): chattitle is now a real <h1> (was a <span>, so the page had no
   heading at all); this groups it with an explicit way out, since the report found the sticky site
   header alone did not read as an exit on a dark, tool-like page. */
.p2-walk__chathead-right {
	display: flex;
	align-items: center;
	gap: 14px;
}
.p2-walk__exit {
	font-family: var(--global--font-family-mono);
	font-size: var(--global--font-size-xs);
	letter-spacing: var(--global--letter-spacing-wide);
	text-transform: uppercase;
	color: var(--global--color-light-60);
	text-decoration: none;
	white-space: nowrap;
}
.p2-walk__exit:hover,
.p2-walk__exit:focus-visible {
	color: var(--global--color-light);
}

.p2-walk__scroll {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	scroll-behavior: smooth;
}

.p2-walk__msg {
	max-width: 92%;
	padding: 12px 15px;
	border-radius: 10px;
	font-size: 15.5px;
	line-height: 1.5;
	animation: p2-walk-in 0.28s ease both;
	white-space: pre-line;
}

.p2-walk__msg--guide {
	align-self: flex-start;
	background: var(--global--color-light-10);
	color: var(--global--color-light);
	border-bottom-left-radius: 3px;
}

.p2-walk__msg--user {
	align-self: flex-end;
	background: var(--global--color-teal-dark-40);
	border: 1px solid var(--global--color-teal-40);
	color: var(--global--color-light);
	border-bottom-right-radius: 3px;
}

.p2-walk__msg--note {
	align-self: flex-start;
	background: none;
	padding: 0 2px;
	font-family: var(--global--font-family-mono);
	font-size: 11.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--global--color-light-60);
}

@keyframes p2-walk-in {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: none; }
}

/* typing indicator */
.p2-walk__typing { display: inline-block; }
.p2-walk__typing span {
	display: inline-block;
	width: 5px;
	height: 5px;
	margin: 0 2px;
	border-radius: 50%;
	background: var(--global--color-light-60);
	animation: p2-walk-blink 1.1s infinite;
}
.p2-walk__typing span:nth-child(2) { animation-delay: 0.18s; }
.p2-walk__typing span:nth-child(3) { animation-delay: 0.36s; }
@keyframes p2-walk-blink { 0%, 70%, 100% { opacity: 0.25; } 35% { opacity: 1; } }

/* choice chips */
.p2-walk__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-self: flex-start;
	max-width: 96%;
	animation: p2-walk-in 0.28s ease both;
}

.p2-walk__chip {
	appearance: none;
	background: none;
	border: 1px solid var(--global--color-light-20);
	border-radius: 999px;
	color: var(--global--color-light);
	font-family: var(--global--font-family-sans);
	font-size: 14px;
	line-height: 1;
	padding: 9px 14px;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
	/* the theme uppercases buttons; these read as conversation, not chrome */
	text-transform: none;
	letter-spacing: normal;
}

.p2-walk__chip:hover { border-color: var(--global--color-teal-60); }

.p2-walk__chip.is-picked {
	background: var(--global--color-teal-dark-40);
	border-color: var(--global--color-teal);
}

/* module info bubble + tooltip */
.p2-walk__info {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	margin-left: 8px;
	border: 1px solid var(--global--color-light-20);
	border-radius: 50%;
	font-family: var(--global--font-family-mono);
	font-size: 10px;
	font-style: normal;
	color: var(--global--color-light-60);
	cursor: help;
	vertical-align: middle;
}

.p2-walk__info:hover { border-color: var(--global--color-teal); color: var(--global--color-teal); }

.p2-walk__tip {
	position: fixed;
	z-index: 60;
	width: 260px;
	background: var(--global--color-dark);
	border: 1px solid var(--global--color-light-20);
	border-radius: 10px;
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
	padding: 13px 15px;
	animation: p2-walk-fadein 0.15s ease both;
}

.p2-walk__tipname {
	margin: 0 0 5px;
	font-size: 14px;
	font-weight: 500;
	color: var(--global--color-light);
}

.p2-walk__tiptext {
	margin: 0 0 9px;
	font-size: 13px;
	line-height: 1.45;
	color: var(--global--color-light-60);
}

.p2-walk__tip a {
	font-size: 12.5px;
	color: var(--global--color-teal);
	text-decoration: none;
}

.p2-walk__tip a:hover { text-decoration: underline; }

.p2-walk__chip--done {
	border-color: var(--global--color-teal);
	color: var(--global--color-teal);
}

/* input row */
.p2-walk__inputrow {
	display: flex;
	gap: 10px;
	padding: 14px 18px;
	border-top: 1px solid var(--global--color-light-10);
}

.p2-walk__input {
	flex: 1 1 auto;
	background: var(--global--color-light-5);
	border: 1px solid var(--global--color-light-20);
	border-radius: 8px;
	color: var(--global--color-light);
	font-family: var(--global--font-family-sans);
	font-size: 15px;
	padding: 11px 14px;
	outline: none;
}

.p2-walk__input::placeholder { color: var(--global--color-light-60); }
.p2-walk__input:focus { border-color: var(--global--color-teal-60); }
.p2-walk__input:disabled { opacity: 0.45; }

.p2-walk__send {
	appearance: none;
	border: 1px solid var(--global--color-teal);
	background: var(--global--color-teal-dark-40);
	color: var(--global--color-light);
	border-radius: 8px;
	font-family: var(--global--font-family-sans);
	font-size: 15px;
	padding: 0 18px;
	cursor: pointer;
}

.p2-walk__send:disabled { opacity: 0.45; cursor: default; }

/* ---- right: the pan/zoom architecture stage ---- */
.p2-walk__stagewrap {
	position: relative;
	overflow: hidden;
	height: 100%;
	min-height: 0;
	border-radius: var(--global--border-radius-md);
	border: 1px solid var(--global--color-light-10);
	cursor: grab;
	touch-action: none;
}

.p2-walk__stagewrap.is-panning { cursor: grabbing; }

.p2-walk__viz {
	position: absolute;
	top: 0;
	left: 0;
	width: 900px;
	transform-origin: 0 0;
	/* no will-change: it rasterizes this layer at one scale and zooming in
	   upscales the bitmap, which blurs every line and label */
	display: flex;
	flex-direction: column;
	gap: var(--grid--gutter);
	padding: 18px;
	box-sizing: border-box;
}

.p2-walk__zoomctl {
	position: absolute;
	right: 14px;
	bottom: 14px;
	z-index: 5;
	display: flex;
	gap: 6px;
}

.p2-walk__zoomctl button {
	appearance: none;
	background: var(--global--color-light-5);
	border: 1px solid var(--global--color-light-20);
	border-radius: 8px;
	color: var(--global--color-light);
	font-family: var(--global--font-family-mono);
	font-size: 14px;
	min-width: 34px;
	height: 34px;
	padding: 0 10px;
	cursor: pointer;
}

.p2-walk__zoomctl button:hover { border-color: var(--global--color-teal-60); }

.p2-walk__caption {
	color: var(--global--color-light-60);
	font-family: var(--global--font-family-mono);
	font-size: var(--global--font-size-xs);
	line-height: var(--global--line-height-xs);
	letter-spacing: var(--global--letter-spacing-wide);
	text-transform: uppercase;
	margin: 0;
}

.p2-walk__frame { overflow-x: auto; }
.p2-walk__frame svg { display: block; width: 100%; min-width: 620px; height: auto; }

/* newly added figure elements ease in; everything else is phase2.css classes */
.p2-walk__fade { animation: p2-walk-fadein 0.5s ease both; }
@keyframes p2-walk-fadein { from { opacity: 0; } to { opacity: 1; } }

/* placeholder rows before systems are chosen */
.p2-connections__node--ghost {
	fill: none;
	stroke: var(--global--color-light-10);
	stroke-dasharray: 4 6;
}

/* proof cards under the figure */
.p2-walk__proofs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.p2-walk__proof {
	background: var(--global--color-light-5);
	border: 1px solid var(--global--color-light-10);
	border-radius: var(--global--border-radius-md);
	padding: 16px 18px;
	animation: p2-walk-fadein 0.5s ease both;
}

.p2-walk__proof-kicker {
	margin: 0 0 6px;
	font-family: var(--global--font-family-mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--global--color-teal);
}

.p2-walk__proof-text {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.45;
	color: var(--global--color-light);
}

/* CTA bubble at the end of the flow */
.p2-walk__cta {
	align-self: flex-start;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	animation: p2-walk-in 0.28s ease both;
}

/* ---- the architecture board (top-down ontology shape) ---- */
.p2-arch__label {
	margin: 0 0 10px;
	font-family: var(--global--font-family-mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--global--color-light-60);
	text-align: center;
}

.p2-arch__cards {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}

.p2-arch__cards--out { align-items: stretch; }

.p2-arch__rail {
	display: block;
	width: 100%;
	height: 84px;
}

.p2-arch__core {
	background: var(--global--color-light-5);
	border: 1px solid var(--global--color-teal-40);
	border-radius: var(--global--border-radius-md);
	padding: 22px 24px 18px;
}

.p2-arch__kicker {
	margin: 0 0 2px;
	font-family: var(--global--font-family-mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--global--color-teal);
	text-align: center;
}

.p2-arch__name {
	margin: 0 0 14px;
	font-size: 26px;
	font-weight: 400;
	letter-spacing: var(--global--letter-spacing-tight);
	color: var(--global--color-light);
	text-align: center;
}

.p2-arch__empty {
	margin: 0;
	font-family: var(--global--font-family-mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--global--color-light-20);
	border: 1px dashed var(--global--color-light-10);
	border-radius: var(--global--border-radius-md);
	padding: 14px;
	text-align: center;
	grid-column: 1 / -1;
}

.p2-arch__ghost {
	border-style: dashed;
	border-color: var(--global--color-light-10);
	color: var(--global--color-light-20);
	background: none;
	min-width: 120px;
	min-height: 20px;
	justify-content: center;
	font-family: var(--global--font-family-mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* problem mode: picked pains pin to the systems layer, rails fracture */
.p2-arch__probs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	margin-top: 12px;
}

.p2-arch__probs:empty { display: none; }

.p2-arch__prob {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	border: 1px solid var(--global--color-red);
	border-radius: 999px;
	padding: 6px 13px;
	font-size: 12.5px;
	color: var(--global--color-light);
	animation: p2-walk-fadein 0.4s ease both;
}

.p2-arch__prob-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--global--color-red);
	animation: p2-walk-blink 1.4s infinite;
}

.p2-arch__rail-broken {
	stroke: var(--global--color-red);
	stroke-dasharray: 3 7;
	opacity: 0.5;
}

/* multi-site groups: the same stack, times N */
.p2-arch__site {
	display: inline-flex;
	flex-direction: column;
	gap: 7px;
	background: var(--global--color-light-5);
	border: 1px solid var(--global--color-light-10);
	border-radius: var(--global--border-radius-md);
	padding: 10px 12px;
	max-width: 230px;
}

.p2-arch__site--more {
	justify-content: center;
	background: none;
	border-style: dashed;
}

.p2-arch__sitelabel {
	font-family: var(--global--font-family-mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--global--color-teal);
}

.p2-arch__site--more .p2-arch__sitelabel { color: var(--global--color-light-60); }

.p2-arch__sitechips {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}

.p2-arch__mini {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	border: 1px solid var(--global--color-light-20);
	border-radius: 999px;
	padding: 3px 9px;
	font-size: 11px;
	color: var(--global--color-light-60);
	max-width: 150px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.p2-arch__mini img {
	width: 13px;
	height: 13px;
	border-radius: 3px;
	background: var(--global--color-light);
	padding: 1px;
	flex: 0 0 auto;
}

.p2-arch__out {
	display: block;
	max-width: 280px;
	flex: 1 1 220px;
}

.p2-arch__out .p2-walk__proof-kicker,
.p2-arch__out .p2-walk__proof-text { display: block; }

.p2-arch__out .p2-walk__proof-kicker { color: var(--global--color-teal); text-transform: uppercase; font-size: 11px; letter-spacing: 0.14em; margin: 0 0 6px; }

/* ---- the contact modal ---- */
.p2-walk__overlay {
	position: fixed;
	inset: 0;
	z-index: 300;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.p2-walk__overlay-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 15, 19, 0.55);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.p2-walk__dialog {
	position: relative;
	width: min(940px, 96vw);
	max-height: 90vh;
	overflow-y: auto;
	background: var(--global--color-dark);
	border: 1px solid var(--global--color-light-20);
	border-radius: var(--global--border-radius-md);
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
	padding: 30px;
	color: var(--global--color-light);
	animation: p2-walk-in 0.25s ease both;
}

.p2-walk__dialog-close {
	position: absolute;
	top: 14px;
	right: 16px;
	appearance: none;
	background: none;
	border: 0;
	color: var(--global--color-light-60);
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}

.p2-walk__dialog-close:hover { color: var(--global--color-light); }

.p2-walk__dialog-cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 34px;
}

.p2-walk__dialog-col h3 {
	margin: 0 0 6px;
	font-size: 21px;
	font-weight: 400;
	color: var(--global--color-light);
}

.p2-walk__dialog-sub {
	margin: 0 0 16px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--global--color-light-60);
}

.p2-walk__dialog-col .p2-walk__input {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin-bottom: 10px;
}

.p2-walk__dialog-msg { resize: vertical; font-size: 13.5px; line-height: 1.5; }

.p2-walk__dialog-cap {
	margin: 14px 0 8px;
	font-family: var(--global--font-family-mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--global--color-light-60);
}

.p2-walk__dialog-note {
	margin: 12px 0 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--global--color-teal);
	min-height: 1em;
}

@media (max-width: 760px) {
	.p2-walk__dialog-cols { grid-template-columns: 1fr; }
}

.p2-walk__conn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	background: var(--global--color-light-5);
	border: 1px solid var(--global--color-light-20);
	border-radius: 999px;
	padding: 8px 16px 8px 10px;
	font-size: 14px;
	color: var(--global--color-light);
	animation: p2-walk-fadein 0.4s ease both;
}

.p2-walk__conn img {
	width: 20px;
	height: 20px;
	border-radius: 4px;
	background: var(--global--color-light);
	padding: 1px;
}

.p2-walk__stackrow { margin-top: 14px; }

.p2-walk__stacklabel {
	margin: 0 0 8px;
	font-family: var(--global--font-family-mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--global--color-teal);
}

.p2-walk__stackgrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 10px;
}

/* module card art: family behaviors (store / pipe-through / at-work) */
.p2-walk__modart { display: block; margin-bottom: 10px; }
.p2-walk__modart svg { display: block; width: 100%; height: 52px; }

.p2-walk__modart .a-line {
	fill: none;
	stroke: var(--global--color-light-20);
	stroke-width: 1.5;
	stroke-linecap: round;
}

.p2-walk__modart .a-glyph {
	fill: none;
	stroke: var(--global--color-teal);
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.p2-walk__modart .a-pipe {
	fill: none;
	stroke: var(--global--color-teal);
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-dasharray: 5 27;
	opacity: 0.7;
	animation: p2-arch-pipe 2.4s linear infinite;
}

@keyframes p2-arch-pipe { to { stroke-dashoffset: -64; } }

.p2-walk__modart .a-drop circle { fill: var(--global--color-teal-60); }
.p2-walk__modart .a-drop { animation: p2-arch-drop 2.2s ease-in infinite; }
.p2-walk__modart .a-drop--2 { animation-delay: 1.1s; }

@keyframes p2-arch-drop {
	0% { transform: translateY(0); opacity: 0; }
	25% { opacity: 1; }
	70% { transform: translateY(15px); opacity: 0.9; }
	100% { transform: translateY(19px); opacity: 0; }
}

.p2-walk__modart .a-dot { fill: var(--global--color-teal-60); animation: p2-walk-blink 1.2s infinite; }
.p2-walk__modart .a-dot--2 { animation-delay: 0.2s; }
.p2-walk__modart .a-dot--3 { animation-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
	.p2-walk__modart .a-pipe, .p2-walk__modart .a-drop, .p2-walk__modart .a-dot { animation: none; }
}

a.p2-walk__mod { text-decoration: none; display: block; transition: border-color 0.15s ease; }
a.p2-walk__mod:hover { border-color: var(--global--color-teal-60); }
a.p2-walk__mod .p2-walk__proof-kicker { color: var(--global--color-light); font-size: 12.5px; letter-spacing: 0.04em; text-transform: none; }
a.p2-walk__mod .p2-walk__proof-text { color: var(--global--color-light-60); font-size: 13.5px; }

@media (max-width: 980px) {
	/* stacked app: chat on top, stage below, both inside the same viewport */
	.p2-walk { grid-template-columns: 1fr; grid-template-rows: minmax(0, 55%) minmax(0, 45%); }
	.p2-walk__chat { min-height: 0; }
}

/* ---- expertise strip (styles appended; the earlier insert missed) ---- */
.p2-arch__expert {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 0 0 18px;
}

.p2-arch__expert svg { width: 58px; height: 22px; flex: 0 0 auto; display: block; }
.p2-arch__expert svg path,
.p2-arch__expert svg circle { fill: none; stroke: var(--global--color-teal); stroke-width: 1.4; stroke-linecap: round; }

.p2-arch__expert p {
	margin: 0;
	font-family: var(--global--font-family-mono);
	font-size: 10.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--global--color-light-60);
}

/* ---- slim site chips (sites are a layer, not containers) ---- */
.p2-arch__site--slim { padding: 8px 16px; flex-direction: row; }

/* ---- the growing sphere ---- */
#arch-fams svg { display: block; width: auto; max-width: 100%; height: auto; margin: 0 auto; }

#arch-fams .s-wireouter { fill: none; stroke: var(--global--color-light-20); }
#arch-fams .s-wire { fill: none; stroke: var(--global--color-light-10); }
#arch-fams .s-ring { fill: none; stroke: var(--global--color-light-10); stroke-dasharray: 3 7; }
#arch-fams .s-sec { fill: none; stroke: var(--global--color-teal-40); stroke-dasharray: 2 9; }

#arch-fams .s-nucleus { fill: var(--global--color-teal); animation: p2-walk-blink 1.6s infinite; }

#arch-fams .s-fil { fill: none; stroke: var(--global--color-teal-20); stroke-width: 1; }
#arch-fams .s-fil--live {
	stroke: var(--global--color-teal);
	stroke-width: 1.2;
	stroke-dasharray: 4 44;
	opacity: 0.6;
	animation: p2-arch-pipe 3.2s linear infinite;
}

#arch-fams .s-node circle { stroke-width: 1.5; }
#arch-fams .s-node--foundational circle { fill: var(--global--color-teal-dark-40); stroke: var(--global--color-teal); }
#arch-fams .s-node--workflow circle { fill: var(--global--color-light-5); stroke: var(--global--color-teal-60); }
#arch-fams .s-node--agent circle { fill: var(--global--color-dark); stroke: var(--global--color-light-20); }

#arch-fams .s-glyph { fill: none; stroke: var(--global--color-light); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
#arch-fams .s-node--workflow .s-glyph,
#arch-fams .s-node--agent .s-glyph { stroke: var(--global--color-teal); }

#arch-fams a:hover .s-node circle { stroke: var(--global--color-teal); }

#arch-fams .s-label {
	fill: var(--global--color-light-60);
	font-family: var(--global--font-family-sans);
	font-size: 10.5px;
}

#arch-fams .s-ringlabel,
#arch-fams .s-seclabel,
#arch-fams .s-note {
	fill: var(--global--color-light-60);
	font-family: var(--global--font-family-mono);
	font-size: 9.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

#arch-fams .s-seclabel { fill: var(--global--color-teal-60); }

@media (prefers-reduced-motion: reduce) {
	#arch-fams .s-fil--live, #arch-fams .s-nucleus { animation: none; }
}

/* ---- the journey (4-step engagement frame) ---- */
.p2-arch__steplabel {
	display: none;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px;
	font-family: var(--global--font-family-mono);
	font-size: 10.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--global--color-light-60);
}

.p2-arch__steplabel span { color: var(--global--color-teal); }
.p2-arch__steplabel b {
	font-weight: 400;
	margin-left: auto;
	color: var(--global--color-light);
	border: 1px solid var(--global--color-light-20);
	border-radius: 999px;
	padding: 4px 12px;
}

.is-journey .p2-arch__steplabel { display: flex; }

/* step 1 becomes the strategy bucket: everything they told us, boxed */
.is-journey #arch-step1 {
	border: 1px dashed var(--global--color-light-20);
	border-radius: var(--global--border-radius-md);
	padding: 18px 20px;
}

.p2-arch__results {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 10px;
	margin-top: 16px;
}

.p2-arch__results .p2-arch__out { max-width: none; }

.p2-arch__deploy {
	display: flex;
	align-items: center;
	gap: 22px;
	padding: 6px 4px;
}

.p2-arch__deploy svg { width: 200px; height: 44px; flex: 0 0 auto; }
.p2-arch__deploy .d-m40 circle, .p2-arch__deploy .d-m40 path { fill: none; stroke: var(--global--color-teal); stroke-width: 1.6; stroke-linecap: round; }
.p2-arch__deploy .d-team circle, .p2-arch__deploy .d-team path { fill: none; stroke: var(--global--color-light-60); stroke-width: 1.6; stroke-linecap: round; }
.p2-arch__deploy .d-link { stroke: var(--global--color-teal-40); stroke-width: 1.4; stroke-dasharray: 4 6; }

.p2-arch__deploy p {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--global--color-light-60);
}

/* sphere ghost nodes: recommended, not yet picked */
#arch-fams .s-node--ghost circle, #arch-fams2 .s-node--ghost circle { fill: none; stroke: var(--global--color-teal-40); stroke-dasharray: 3 5; }
#arch-fams2 svg { display: block; width: auto; max-width: 100%; height: auto; margin: 0 auto; }
#arch-fams2 .s-wireouter { fill: none; stroke: var(--global--color-light-20); }
#arch-fams2 .s-wire { fill: none; stroke: var(--global--color-light-10); }
#arch-fams2 .s-ring { fill: none; stroke: var(--global--color-light-10); stroke-dasharray: 3 7; }
#arch-fams2 .s-sec { fill: none; stroke: var(--global--color-teal-40); stroke-dasharray: 2 9; }
#arch-fams2 .s-nucleus { fill: var(--global--color-teal); animation: p2-walk-blink 1.6s infinite; }
#arch-fams2 .s-fil { fill: none; stroke: var(--global--color-teal-20); stroke-width: 1; }
#arch-fams2 .s-fil--live { stroke: var(--global--color-teal); stroke-width: 1.2; stroke-dasharray: 4 44; opacity: 0.6; animation: p2-arch-pipe 3.2s linear infinite; }
#arch-fams2 .s-node circle { stroke-width: 1.5; }
#arch-fams2 .s-node--foundational circle { fill: var(--global--color-teal-dark-40); stroke: var(--global--color-teal); }
#arch-fams2 .s-node--workflow circle { fill: var(--global--color-light-5); stroke: var(--global--color-teal-60); }
#arch-fams2 .s-node--agent circle { fill: var(--global--color-dark); stroke: var(--global--color-light-20); }
#arch-fams2 .s-glyph { fill: none; stroke: var(--global--color-light); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
#arch-fams2 .s-node--workflow .s-glyph, #arch-fams2 .s-node--agent .s-glyph { stroke: var(--global--color-teal); }
#arch-fams2 a:hover .s-node circle { stroke: var(--global--color-teal); }
#arch-fams2 .s-label { fill: var(--global--color-light-60); font-family: var(--global--font-family-sans); font-size: 10.5px; }
#arch-fams2 .s-ringlabel, #arch-fams2 .s-seclabel, #arch-fams2 .s-note { fill: var(--global--color-light-60); font-family: var(--global--font-family-mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; }
#arch-fams2 .s-seclabel { fill: var(--global--color-teal-60); }

/* back control: revisit any earlier answer */
.p2-walk__backbtn {
	appearance: none;
	flex: 0 0 auto;
	width: 42px;
	border: 1px solid var(--global--color-light-20);
	background: none;
	border-radius: 8px;
	color: var(--global--color-light-60);
	font-size: 17px;
	cursor: pointer;
}

.p2-walk__backbtn:hover:not(:disabled) { border-color: var(--global--color-teal-60); color: var(--global--color-light); }
.p2-walk__backbtn:disabled { opacity: 0.3; cursor: default; }

/* ---- the viewer grid (blueprint ground) ---- */
.p2-walk__stagewrap {
	background-image:
		linear-gradient(rgba(251, 251, 251, 0.035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(251, 251, 251, 0.035) 1px, transparent 1px);
	background-size: 42px 42px;
}

/* ---- act 1: chaos. Scattered, tilted, not talking. ---- */
.p2-arch__chaos {
	position: relative;
	display: block;
	height: 400px;
}

.p2-arch__scatter { position: absolute; white-space: nowrap; }

.is-chaos .p2-arch__label { display: none; }

/* ---- the Singularity unboxed: just the circle on the stage ---- */
.p2-arch__core {
	background: none;
	border: none;
	padding: 0 0 6px;
}

/* ---- the labeled Singularity core ---- */
#arch-fams .s-core, #arch-fams2 .s-core {
	fill: var(--global--color-dark);
	stroke: var(--global--color-teal);
	stroke-width: 1.5;
}

#arch-fams .s-corering, #arch-fams2 .s-corering {
	fill: none;
	stroke: var(--global--color-teal-40);
	stroke-dasharray: 2 7;
}

#arch-fams .s-corethe, #arch-fams2 .s-corethe {
	fill: var(--global--color-light-60);
	font-family: var(--global--font-family-mono);
	font-size: 9.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

#arch-fams .s-corename, #arch-fams2 .s-corename {
	fill: var(--global--color-light);
	font-family: var(--global--font-family-sans);
	font-size: 21px;
	letter-spacing: -0.02em;
}

#arch-fams .s-corefor, #arch-fams2 .s-corefor {
	fill: var(--global--color-teal);
	font-family: var(--global--font-family-mono);
	font-size: 9.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* rails hold back during the reveal, then fade in over the settled layout */
.p2-arch__rail { transition: opacity 0.9s ease 0.5s; }
.is-revealing .p2-arch__rail { opacity: 0; transition: none; }

/* chaos chips are horizontal now; retire the tilt-era stubs on sites only */
.p2-arch__chaos .p2-arch__scatter { transition: none; }

/* the expert strip is a caption under the sphere now */
.p2-arch__expert { margin: 10px 0 4px; }

/* ---- sphere v3: curved labels + family-distinct nodes ---- */
#arch-fams .s-seclabel textPath, #arch-fams2 .s-seclabel textPath,
#arch-fams .s-seclabel, #arch-fams2 .s-seclabel {
	fill: var(--global--color-teal-60);
	font-family: var(--global--font-family-mono);
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

#arch-fams .s-praclabel, #arch-fams2 .s-praclabel {
	fill: var(--global--color-light-60);
	font-family: var(--global--font-family-mono);
	font-size: 10.5px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

/* workflow: the flowing dashed ring */
#arch-fams .s-flowring, #arch-fams2 .s-flowring {
	fill: none;
	stroke: var(--global--color-teal-40);
	stroke-width: 1.2;
	stroke-dasharray: 4 7;
	animation: p2-arch-ringspin 9s linear infinite;
}

@keyframes p2-arch-ringspin { to { stroke-dashoffset: -132; } }

/* agent: the employee badge */
#arch-fams .s-node--agent rect, #arch-fams2 .s-node--agent rect {
	fill: var(--global--color-dark);
	stroke: var(--global--color-light-20);
	stroke-width: 1.5;
}

#arch-fams .s-headdot, #arch-fams2 .s-headdot { fill: var(--global--color-teal); }

/* foundation reads as the solid building block */
#arch-fams .s-node--foundational circle, #arch-fams2 .s-node--foundational circle {
	fill: var(--global--color-teal-dark-40);
	stroke: var(--global--color-teal);
	stroke-width: 1.8;
}

@media (prefers-reduced-motion: reduce) {
	#arch-fams .s-flowring, #arch-fams2 .s-flowring { animation: none; }
}

/* ---- the staged reveal: mesh curves draw site by site ---- */
.s-mesh { animation: p2-walk-fadein 0.7s ease both; }
.s-mesh-1 { animation-delay: 0.45s; }
.s-mesh-2 { animation-delay: 0.9s; }
.s-mesh-3 { animation-delay: 1.35s; }
.s-mesh-4 { animation-delay: 1.8s; }
.s-mesh-5 { animation-delay: 2.25s; }

/* ---- problems coming off the table as modules land ---- */
.p2-arch__prob { transition: opacity 0.6s ease, border-color 0.6s ease; }

.p2-arch__prob.is-solved {
	opacity: 0.38;
	border-color: var(--global--color-teal-40);
	text-decoration: line-through;
	text-decoration-color: var(--global--color-teal-60);
}

.p2-arch__prob-check {
	color: var(--global--color-teal);
	font-size: 13px;
	line-height: 1;
}

/* ============================================================
   V2 EXPLORATION THEME: light ground, threaded cascading fibers
   (reference: Authentica-style hero). The token inversion below
   flips the whole tool to light; everything else inherits.
   NOTE: azure #4f8ff7 + mint #39d98a are OFF-PALETTE, used to
   mimic the reference; pull back to teal-only in one line if kept.
   ============================================================ */

body.page-walkthrough-v2 {
	--global--color-dark: #f4f4f2;
	--global--color-light: #001d24;
	--global--color-light-5: rgba(0, 29, 36, 0.04);
	--global--color-light-10: rgba(0, 29, 36, 0.10);
	--global--color-light-20: rgba(0, 29, 36, 0.24);
	--global--color-light-60: rgba(0, 29, 36, 0.62);
	--global--color-teal: #00909c;
	--global--color-teal-60: rgba(0, 144, 156, 0.6);
	--global--color-teal-40: rgba(0, 144, 156, 0.4);
	--global--color-teal-20: rgba(0, 144, 156, 0.2);
	--global--color-teal-dark-40: rgba(0, 212, 222, 0.14);
	background: #f4f4f2;
}

body.page-walkthrough-v2 .site-header {
	background: #f4f4f2;
	border-bottom: 1px solid rgba(0, 29, 36, 0.1);
}

body.page-walkthrough-v2 .p2-walk__stagewrap {
	background-image:
		linear-gradient(rgba(0, 29, 36, 0.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(0, 29, 36, 0.045) 1px, transparent 1px);
}

body.page-walkthrough-v2 .p2-walk__overlay-backdrop { background: rgba(244, 244, 242, 0.55); }
body.page-walkthrough-v2 .p2-walk__dialog { box-shadow: 0 24px 80px rgba(0, 29, 36, 0.18); }
body.page-walkthrough-v2 .p2-arch__conn img,
body.page-walkthrough-v2 .p2-walk__conn img { background: #fff; }
body.page-walkthrough-v2 .p2-arch__mini img { background: #fff; }

/* the threaded cascades */
.t-strand {
	fill: none;
	stroke-width: 0.8;
	stroke-linecap: round;
}

.t-c1 { stroke: #00d4de; opacity: 0.55; }
.t-c2 { stroke: #4f8ff7; opacity: 0.4; }
.t-c3 { stroke: rgba(0, 29, 36, 0.18); opacity: 0.8; }
.t-strand--broken { stroke: var(--global--color-red); opacity: 0.35; stroke-dasharray: 3 6; }

.t-tip { r: 1.8; }
.t-tip1 { fill: #00d4de; }
.t-tip2 { fill: #39d98a; }
.t-tip3 { fill: #4f8ff7; }

/* the old single-rail classes fade back so bundles carry the look */
body.page-walkthrough-v2 .p2-connections__line { stroke: rgba(0, 29, 36, 0.10); }
body.page-walkthrough-v2 .p2-connections__flow { stroke: #00d4de; opacity: 0.35; }

/* ---- V3: the middle path. Dark ground, thread bundles. ----
   (no token inversion; only the strand colors retuned for navy) */
body.page-walkthrough-v3 .t-c1 { stroke: #00d4de; opacity: 0.5; }
body.page-walkthrough-v3 .t-c2 { stroke: #5b9bff; opacity: 0.4; }
body.page-walkthrough-v3 .t-c3 { stroke: rgba(251, 251, 251, 0.16); opacity: 1; }
body.page-walkthrough-v3 .t-strand--broken { opacity: 0.45; }

/* ---- data pumping through the threads ----
   pathLength normalizes every strand to 100 units so one dash spec and one
   duration work on curves of wildly different real lengths. */
.t-pulse {
	fill: none;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-dasharray: 7 93;
	stroke-dashoffset: 100;
	animation: t-flow 2.8s linear infinite;
	opacity: 0.9;
}

@keyframes t-flow { to { stroke-dashoffset: 0; } }

.t-pulse-0 { animation-delay: 0s; }
.t-pulse-1 { animation-delay: -0.35s; }
.t-pulse-2 { animation-delay: -0.7s; }
.t-pulse-3 { animation-delay: -1.05s; }
.t-pulse-4 { animation-delay: -1.4s; }
.t-pulse-5 { animation-delay: -1.75s; }
.t-pulse-6 { animation-delay: -2.1s; }
.t-pulse-7 { animation-delay: -2.45s; }

body.page-walkthrough-v3 .t-pulse { stroke: #00d4de; }
body.page-walkthrough-v2 .t-pulse { stroke: #00b8c4; opacity: 0.8; }

/* the sphere's filaments pump too, inward toward the core */
#arch-fams .t-pulse, #arch-fams2 .t-pulse { animation-duration: 3.6s; }

@media (prefers-reduced-motion: reduce) {
	.t-pulse { animation: none; opacity: 0.35; }
}

/* ---- the practitioner beat: the alignment gets done by people ---- */
.p2-arch__prac {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin: 6px 0 2px;
	animation: p2-walk-fadein 0.7s ease both;
}

.p2-arch__prac svg { width: 190px; height: 22px; flex: 0 0 auto; }

.p2-arch__prac .pr-fig circle,
.p2-arch__prac .pr-fig path {
	fill: none;
	stroke: var(--global--color-teal);
	stroke-width: 1.8;
	stroke-linecap: round;
}

.p2-arch__prac .pr-thread {
	fill: none;
	stroke: #00d4de;
	stroke-width: 1.4;
	stroke-dasharray: 10 90;
	stroke-dashoffset: 100;
	animation: t-flow 2.2s linear infinite;
}

.p2-arch__prac .pr-thread--b { animation-delay: -1.1s; opacity: 0.6; }

.p2-arch__prac p {
	margin: 0;
	max-width: 330px;
	font-family: var(--global--font-family-mono);
	font-size: 10.5px;
	line-height: 1.6;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--global--color-light-60);
}

@media (prefers-reduced-motion: reduce) {
	.p2-arch__prac .pr-thread { animation: none; }
}

/* ---- practitioners pulling the mess into line ---- */
.p2-arch__pull {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 4;
	transition: opacity 0.8s ease;
}

.p2-arch__pull.is-releasing { opacity: 0; }
.p2-arch__pull svg { display: block; overflow: visible; }

.p2-arch__pull .pl-fig circle,
.p2-arch__pull .pl-fig path {
	fill: none;
	stroke: var(--global--color-teal);
	stroke-width: 2;
	stroke-linecap: round;
	animation: p2-walk-fadein 0.4s ease both;
}

.p2-arch__pull .pl-arm { stroke-width: 2.2; }

.p2-arch__pull .pl-tether {
	fill: none;
	stroke: #00d4de;
	stroke-width: 1.3;
	opacity: 0.8;
}

.p2-arch__pull .pl-grip { fill: #00d4de; }

/* ---- legibility pass: the threads were washing out on navy ---- */
body.page-walkthrough-v3 .t-strand { stroke-width: 1.15; }
body.page-walkthrough-v3 .t-c1 { stroke: #00d4de; opacity: 0.72; }
body.page-walkthrough-v3 .t-c2 { stroke: #5b9bff; opacity: 0.55; }
body.page-walkthrough-v3 .t-c3 { stroke: rgba(251, 251, 251, 0.26); opacity: 1; }
body.page-walkthrough-v3 .t-pulse { stroke-width: 2.1; opacity: 1; }
body.page-walkthrough-v3 .t-tip { r: 2.2; }
body.page-walkthrough-v3 .t-tip1 { fill: #00d4de; }
body.page-walkthrough-v3 .t-tip2 { fill: #7fe8ee; }
body.page-walkthrough-v3 .t-tip3 { fill: #5b9bff; }

/* the sphere's own threads read brighter too */
body.page-walkthrough-v3 #arch-fams .t-strand,
body.page-walkthrough-v3 #arch-fams2 .t-strand { stroke-width: 1.1; }

/* the incoming cascade lands on the core, so close the dead air above it */
body.page-walkthrough-v3 #arch-fams,
body.page-walkthrough-v3 #arch-fams2 { margin-top: -26px; }
body.page-walkthrough-v3 #arch-rail2 { height: 64px; }

/* ---- WordPress port (template-walkthrough.php) ---- */
/* the site footer is not part of the app; the page never scrolls */
body.page-walkthrough .site-footer { display: none; }
body.admin-bar.page-walkthrough { height: calc(100dvh - 32px) !important; }
/* the Talk to sales dialog holds the site's HubSpot contact form */
.p2-walk__dialog--form { max-width: 560px; max-height: calc(100dvh - 48px); overflow-y: auto; }
.p2-walk__dialog--form h3 { margin: 0 0 8px; }
.p2-walk__hsform { margin-top: 16px; }
.p2-walk__hsform label,
.p2-walk__hsform .hs-form-field > label,
.p2-walk__hsform legend,
.p2-walk__hsform .hs-richtext { color: var(--global--color-light-60); font-size: 14px; }
.p2-walk__hsform input[type="text"],
.p2-walk__hsform input[type="email"],
.p2-walk__hsform input[type="tel"],
.p2-walk__hsform select,
.p2-walk__hsform textarea {
	background: var(--global--color-light-5);
	border: 1px solid var(--global--color-light-20);
	border-radius: 8px;
	box-sizing: border-box;
	color: var(--global--color-light);
	font: inherit;
	padding: 10px 12px;
	width: 100%;
}
.p2-walk__hsform textarea { min-height: 180px; }
.p2-walk__hsform .hs-form-field { margin-bottom: 14px; }
.p2-walk__hsform .hs-error-msgs { color: var(--global--color-red); font-size: 13px; list-style: none; margin: 4px 0 0; padding: 0; }
.p2-walk__hsform .hs-button {
	background: var(--global--color-red);
	border: 0;
	border-radius: var(--global--border-radius-pill, 999px);
	color: #fff;
	cursor: pointer;
	font: inherit;
	font-weight: 500;
	padding: 12px 22px;
}
body.page-walkthrough-v2 .p2-walk__hsform input,
body.page-walkthrough-v2 .p2-walk__hsform select,
body.page-walkthrough-v2 .p2-walk__hsform textarea { background: #fff; border-color: rgba(0, 29, 36, 0.18); color: var(--global--color-dark); }