/* ==========================================================================
   bb-steps v2: "How a project runs" as a scroll story.
   Left: six editable step containers (.bb-proc-step). Right: a sticky mock
   browser (.bb-pstage, from stage.html in an HTML widget) that changes to
   match the step being read. Without JS everything is visible and the stage
   shows step 1. Disable: set 'bb-steps' => false in bb_features().
   ========================================================================== */

/* ---- Layout ---------------------------------------------------------- */
.bb-proc-body {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	gap: clamp(32px, 6vw, 96px) !important;
	align-items: start !important;
}
.bb-proc-body > * { width: auto !important; max-width: none !important; }
.bb-proc-stagecol {
	position: sticky !important;
	top: max(calc(var(--bb-sticky-top, 96px) + 24px), calc(50vh - 260px));
	align-self: start;
}
.bb-proc-steps { gap: 0 !important; }

/* ---- Steps ------------------------------------------------------------ */
.bb-proc-step {
	min-height: 62vh;
	justify-content: center !important;
	gap: 10px !important;
	padding: 24px 0 24px 28px !important;
	border-left: 2px solid rgba(255, 255, 255, .12);
	transition: opacity 400ms var(--bb-ease), border-color 400ms var(--bb-ease);
}
.bb-proc-step:first-child { min-height: 48vh; }
.bb-proc-step:last-child { min-height: 54vh; }
.bb-proc.is-ready .bb-proc-step { opacity: .38; }
.bb-proc.is-ready .bb-proc-step.is-active { opacity: 1; border-left-color: #9CC9E6; }
.bb-proc-step .bb-label, .bb-proc-step .bb-label * { font-family: var(--bb-font-mono) !important; letter-spacing: .14em; }
.bb-proc-step h3 {
	font-size: clamp(34px, 4vw, 52px) !important;
	line-height: 1 !important;
	margin: 0 !important;
}
.bb-proc-step p { font-size: 18px; line-height: 1.55; max-width: 34em; }
.bb-proc-you, .bb-proc-you * { font-size: 15px !important; color: #9AA8BA !important; }
.bb-proc-you strong { color: #FFFFFF !important; font-weight: 500; }

/* ---- Stage frame -------------------------------------------------------- */
.bb-pstage { --s-accent: #1472A3; font-family: var(--bb-font-sans); }
.bb-pstage-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
}
.bb-pstage .bb-pstage-count { font: 400 22px/1 var(--bb-font-serif); color: #9AA8BA; }
.bb-pstage .bb-pstage-now { font: italic 400 44px/1 var(--bb-font-serif); color: #9CC9E6; }
.bb-pstage-dots { display: flex; gap: 6px; }
.bb-pstage-dots i {
	width: 26px;
	height: 4px;
	border-radius: 2px;
	background: rgba(255, 255, 255, .16);
	transition: background-color 400ms var(--bb-ease);
}
.bb-pstage-win {
	background: #FFFFFF;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .08);
}
.bb-pstage-bar {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 11px 14px;
	background: #EEF2F7;
	border-bottom: 1px solid #E3E8EF;
}
.bb-pstage-bar i { width: 10px; height: 10px; border-radius: 50%; background: #CBD3DD; }
.bb-pstage .bb-pstage-url {
	margin-left: 10px;
	padding: 4px 12px;
	border-radius: 999px;
	background: #FFFFFF;
	font: 500 12px/1 var(--bb-font-mono);
	color: #4A5568;
}
.bb-pstage .bb-pstage-live {
	margin-left: auto;
	padding: 4px 10px;
	border-radius: 999px;
	background: #1E7A4C;
	color: #FFFFFF;
	font: 600 11px/1 var(--bb-font-sans);
	letter-spacing: .08em;
	text-transform: uppercase;
	opacity: 0;
	transform: scale(.8);
	transition: opacity 400ms var(--bb-ease), transform 400ms var(--bb-ease);
}
.bb-pstage-view { position: relative; height: clamp(300px, 34vw, 420px); background: #FFFFFF; }

/* Each layer fills the view and crossfades in. */
.bb-pl {
	position: absolute;
	inset: 0;
	padding: clamp(18px, 2.4vw, 30px);
	opacity: 0;
	visibility: hidden;
	transform: translateY(14px);
	transition: opacity 450ms var(--bb-ease), transform 550ms var(--bb-ease), visibility 0s linear 450ms;
}
.bb-pstage[data-step="1"] .bb-pl-1,
.bb-pstage[data-step="2"] .bb-pl-2,
.bb-pstage[data-step="3"] .bb-pl-3,
.bb-pstage[data-step="4"] .bb-pl-4,
.bb-pstage[data-step="5"] .bb-pl-5,
.bb-pstage[data-step="6"] .bb-pl-6 {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity 450ms var(--bb-ease), transform 550ms var(--bb-ease), visibility 0s;
}
.bb-pstage[data-step="5"] .bb-pstage-live,
.bb-pstage[data-step="6"] .bb-pstage-live { opacity: 1; transform: none; }

/* Progress dots: fill up to the current step. */
.bb-pstage[data-step="1"] .bb-pstage-dots i:nth-child(-n+1),
.bb-pstage[data-step="2"] .bb-pstage-dots i:nth-child(-n+2),
.bb-pstage[data-step="3"] .bb-pstage-dots i:nth-child(-n+3),
.bb-pstage[data-step="4"] .bb-pstage-dots i:nth-child(-n+4),
.bb-pstage[data-step="5"] .bb-pstage-dots i:nth-child(-n+5),
.bb-pstage[data-step="6"] .bb-pstage-dots i { background: #9CC9E6; }

/* Shared text reset inside the stage (the section's on-ink color rules
   would otherwise turn everything white). */
.bb-pstage * { color: inherit; }
.bb-pstage-win { color: #0B1220; }
.bb-pstage .bb-pl p { margin: 0; color: #0B1220; }

/* 1 · Talk: chat bubbles that pop in one after another. */
.bb-pl-1 { display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.bb-pstage .bb-chat {
	max-width: 78%;
	padding: 12px 16px;
	border-radius: 18px;
	font-size: 16px;
	line-height: 1.35;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 350ms var(--bb-ease), transform 350ms var(--bb-ease);
}
.bb-pstage .bb-chat-them { align-self: flex-start; background: #EEF2F7; border-bottom-left-radius: 6px; }
.bb-pstage .bb-chat-me { align-self: flex-end; background: var(--s-accent); color: #FFFFFF; border-bottom-right-radius: 6px; }
.bb-pstage .bb-pl .bb-chat-me { color: #FFFFFF; } /* beats the dark text reset above */
.bb-pstage[data-step="1"] .bb-chat { opacity: 1; transform: none; }
.bb-pstage[data-step="1"] .bb-chat:nth-child(2) { transition-delay: 350ms; }
.bb-pstage[data-step="1"] .bb-chat:nth-child(3) { transition-delay: 900ms; }
.bb-pstage[data-step="1"] .bb-chat:nth-child(4) { transition-delay: 1350ms; }

/* 2 · Plan: a sitemap with the goal page highlighted. */
.bb-pl-2 { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 34px; }
.bb-map-home {
	position: relative;
	padding: 14px 26px;
	border: 2px solid #0B1220;
	border-radius: 12px;
	font: 400 24px/1.1 var(--bb-font-serif);
	color: #0B1220;
	text-align: center;
}
.bb-map-home small { display: block; margin-top: 4px; font: 500 11px/1.2 var(--bb-font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--s-accent); }
.bb-map-home::after { content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: 34px; background: #CBD3DD; }
.bb-map-kids { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; width: 100%; position: relative; }
.bb-map-kids::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: -14px; height: 2px; background: #CBD3DD; }
.bb-map-kids span {
	position: relative;
	padding: 12px 6px;
	border: 1px solid #E3E8EF;
	border-radius: 10px;
	background: #FBFBFD;
	font: 500 13px/1.2 var(--bb-font-sans);
	color: #2A3445;
	text-align: center;
}
.bb-map-kids span::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 2px; height: 14px; background: #CBD3DD; }
.bb-map-kids .is-goal { border-color: var(--s-accent); background: #E7F1F8; color: var(--s-accent); font-weight: 600; }

/* 3 · Design: three directions, one gets picked. */
.bb-pl-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-items: center; }
.bb-dir {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
	height: 78%;
	padding: 16px;
	border-radius: 14px;
	border: 1px solid #E3E8EF;
	transition: transform 500ms var(--bb-ease), box-shadow 500ms var(--bb-ease), opacity 500ms var(--bb-ease);
}
.bb-dir b { font-size: 34px; line-height: 1; font-weight: 400; }
.bb-dir i { display: block; height: 6px; border-radius: 3px; background: currentColor; opacity: .25; }
.bb-dir i + i { width: 70%; }
.bb-dir em { display: block; margin-top: auto; width: 60%; height: 22px; border-radius: 999px; background: currentColor; }
.bb-dir-a { background: #F6F1EA; color: #8A4B2A; }
.bb-dir-a b { font-family: Georgia, serif; }
.bb-dir-b { background: #EEF2F7; color: #1472A3; }
.bb-dir-b b { font-family: var(--bb-font-serif); font-style: italic; }
.bb-dir-c { background: #F1F3EE; color: #3F5A3A; }
.bb-dir-c b { font-family: var(--bb-font-mono); font-size: 28px; }
.bb-pstage .bb-dir-pick {
	position: absolute;
	top: -12px;
	right: 10px;
	padding: 5px 10px;
	border-radius: 999px;
	background: #0B1220;
	color: #FFFFFF;
	font: 600 11px/1 var(--bb-font-sans);
	letter-spacing: .06em;
	text-transform: uppercase;
	opacity: 0;
	transition: opacity 300ms var(--bb-ease) 700ms;
}
.bb-pstage[data-step="3"] .bb-dir-b { transform: translateY(-8px) scale(1.04); box-shadow: 0 20px 40px -20px rgba(11, 18, 32, .45); transition-delay: 600ms; }
.bb-pstage[data-step="3"] .bb-dir-a,
.bb-pstage[data-step="3"] .bb-dir-c { opacity: .55; transition-delay: 600ms; }
.bb-pstage[data-step="3"] .bb-dir-pick { opacity: 1; }

/* 4 + 5 · The mini site. Step 4 is half built, step 5 is finished. */
.bb-pl-site { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.bb-ms-nav { display: flex; align-items: center; gap: 10px; width: 100%; margin-bottom: 14px; }
.bb-pstage .bb-ms-nav b { margin-right: auto; font: 400 18px/1 var(--bb-font-serif); color: #0B1220; }
.bb-ms-nav i { width: 34px; height: 6px; border-radius: 3px; background: #E3E8EF; }
.bb-pstage .bb-ms-kick { font: 600 11px/1.2 var(--bb-font-sans) !important; letter-spacing: .14em; text-transform: uppercase; color: var(--s-accent) !important; }
.bb-pstage .bb-ms-title { font: 400 clamp(26px, 2.8vw, 38px)/1.05 var(--bb-font-serif) !important; color: #0B1220; max-width: 15ch; }
.bb-pstage .bb-ms-btn { padding: 10px 18px; border-radius: 999px; background: var(--s-accent); color: #FFFFFF; font: 600 13px/1 var(--bb-font-sans); }
.bb-ms-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; margin-top: auto; }
.bb-ms-cards i { height: 64px; border-radius: 10px; background: #EEF2F7; }
.bb-pstage .bb-ms-badge {
	position: absolute;
	right: 18px;
	top: 18px;
	padding: 5px 10px;
	border-radius: 999px;
	border: 1px dashed #4A5568;
	font: 500 11px/1 var(--bb-font-mono);
	color: #4A5568;
}
/* Half built: pieces arrive one by one. */
.bb-pl-4 .bb-ms-kick, .bb-pl-4 .bb-ms-title, .bb-pl-4 .bb-ms-btn, .bb-pl-4 .bb-ms-cards i {
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 400ms var(--bb-ease), transform 400ms var(--bb-ease);
}
.bb-pstage[data-step="4"] .bb-pl-4 .bb-ms-kick { opacity: 1; transform: none; transition-delay: 200ms; }
.bb-pstage[data-step="4"] .bb-pl-4 .bb-ms-title { opacity: 1; transform: none; transition-delay: 500ms; }
.bb-pstage[data-step="4"] .bb-pl-4 .bb-ms-btn { opacity: 1; transform: none; transition-delay: 800ms; }
.bb-pstage[data-step="4"] .bb-pl-4 .bb-ms-cards i:nth-child(1) { opacity: 1; transform: none; transition-delay: 1100ms; }
.bb-pstage[data-step="4"] .bb-pl-4 .bb-ms-cards i:nth-child(2) { opacity: 1; transform: none; transition-delay: 1300ms; }
.bb-pl-4 .bb-ms-cards i:nth-child(3) { opacity: 0 !important; } /* still on the to-do list */
.bb-ms-checks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.bb-pstage .bb-ms-checks span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 12px;
	border-radius: 999px;
	background: #E8F4EE;
	color: #1E6B44;
	font: 600 12px/1 var(--bb-font-sans);
	opacity: 0;
	transform: scale(.9);
	transition: opacity 300ms var(--bb-ease), transform 300ms var(--bb-ease);
}
.bb-ms-checks span::before { content: "✓"; }
.bb-pstage[data-step="5"] .bb-ms-checks span { opacity: 1; transform: none; }
.bb-pstage[data-step="5"] .bb-ms-checks span:nth-child(1) { transition-delay: 300ms; }
.bb-pstage[data-step="5"] .bb-ms-checks span:nth-child(2) { transition-delay: 550ms; }
.bb-pstage[data-step="5"] .bb-ms-checks span:nth-child(3) { transition-delay: 800ms; }

/* 6 · Hand off: the owner's guide and a set of keys. */
.bb-pl-6 { display: flex; align-items: center; justify-content: center; gap: 28px; background: #FBFBFD; }
.bb-keys {
	width: min(300px, 70%);
	padding: 22px;
	border-radius: 14px;
	background: #FFFFFF;
	border: 1px solid #E3E8EF;
	box-shadow: 0 24px 40px -28px rgba(11, 18, 32, .4);
	transform: rotate(-2deg);
}
.bb-pstage .bb-keys-title { font: 400 26px/1 var(--bb-font-serif); margin-bottom: 12px !important; }
.bb-pstage .bb-keys-row {
	display: flex;
	justify-content: space-between;
	padding: 9px 0;
	border-top: 1px solid #E3E8EF;
	font-size: 14px;
	color: #2A3445;
}
.bb-pstage .bb-keys-row b { color: #1E6B44; font-weight: 600; }
.bb-pstage .bb-keys-row b::before { content: "✓ "; }
.bb-keyring { position: relative; width: 70px; height: 110px; flex: none; }
.bb-keyring::before {
	content: "";
	position: absolute;
	left: 14px;
	top: 0;
	width: 40px;
	height: 40px;
	border: 5px solid #B5BFCC;
	border-radius: 50%;
}
.bb-keyring i {
	position: absolute;
	top: 34px;
	width: 16px;
	height: 66px;
	border-radius: 8px 8px 3px 3px;
	background: linear-gradient(#D7A84A, #B98A2E);
	transform-origin: 50% 0;
}
.bb-keyring i:nth-child(1) { left: 16px; transform: rotate(10deg); }
.bb-keyring i:nth-child(2) { left: 36px; transform: rotate(-14deg); background: linear-gradient(#9CC9E6, #5C93BC); }
.bb-pstage[data-step="6"] .bb-keyring { animation: bb-jingle 900ms var(--bb-ease) 400ms 1; }
@keyframes bb-jingle {
	0%, 100% { transform: rotate(0); }
	25% { transform: rotate(-10deg); }
	55% { transform: rotate(7deg); }
	80% { transform: rotate(-3deg); }
}

/* ---- Tablet and phone ------------------------------------------------- */
@media (max-width: 900px) {
	.bb-proc-body { grid-template-columns: minmax(0, 1fr); gap: 0 !important; }
	.bb-proc-stagecol {
		order: -1;
		/* Starts at the very top, under the sticky header (z-index 99), and pads
		   down past it so scrolling text never peeks through a gap. */
		top: 0;
		z-index: 2;
		padding: calc(var(--bb-header-h, 65px) + 12px) 0 16px !important;
		margin-top: -32px !important;
		background: var(--bb-ink);
	}
	.bb-pstage-top { margin-bottom: 10px; }
	.bb-pstage .bb-pstage-now { font-size: 32px; }
	.bb-pstage-dots i { width: 18px; }
	.bb-pstage-view { height: 230px; }
	.bb-pstage .bb-chat { font-size: 14px; padding: 9px 12px; }
	.bb-pl-1 { gap: 6px; }
	.bb-proc-step, .bb-proc-step:first-child, .bb-proc-step:last-child { min-height: 52vh; padding-left: 20px !important; }
	.bb-proc-step h3 { font-size: 34px !important; }
	.bb-proc-step p { font-size: 17px; }
	.bb-ms-cards i { height: 40px; }
	.bb-dir b { font-size: 24px; }
	.bb-dir { padding: 12px; }
	.bb-pl-6 { gap: 14px; }
	.bb-keyring { transform: scale(.8); }
	.bb-pstage .bb-keys-row { font-size: 13px; padding: 6px 0; }
	.bb-pstage .bb-keys-title { font-size: 21px; margin-bottom: 6px !important; }
}

/* ---- Reduced motion: states still change, without the movement. ------- */
@media (prefers-reduced-motion: reduce) {
	.bb-pstage *, .bb-proc-step { transition: none !important; animation: none !important; }
}

/* Step 3 (Design): the signature piece gets chosen alongside the direction. */
.bb-pstage .bb-dir-sig {
	grid-column: 1 / -1;
	justify-self: center;
	padding: 7px 14px;
	border-radius: 999px;
	background: #FBF1E8;
	color: #9A4524;
	font: 600 12px/1.2 var(--bb-font-mono);
	letter-spacing: .06em;
	text-transform: uppercase;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 400ms var(--bb-ease) 1100ms, transform 400ms var(--bb-ease) 1100ms;
}
.bb-pstage[data-step="3"] .bb-dir-sig { opacity: 1; transform: none; }
.bb-pl-3 .bb-dir { height: auto; min-height: 150px; }
.bb-pl-3 { align-content: center; }