/* ═══════════════════════════════════════════════════════════════════════════
 * THERUM CASE STUDY — v0.1
 *
 * Single case study layout. Header is the dynamic island (no main nav).
 * Sections: Hero · Metadata · 7 numbered sections · (next handled by island)
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── a11y baseline (case-study scope) ────────────────────────────────────────
   Default focus-visible ring on every focusable element inside .bamleon-cs.
   Sites with no global focus style fail WCAG 2.4.7. This catches links,
   buttons, anything tabindex'd, anchor jumps, etc. */
.bamleon-cs a:focus-visible,
.bamleon-cs button:focus-visible,
.bamleon-cs [tabindex]:focus-visible,
.bamleon-cs input:focus-visible,
.bamleon-cs textarea:focus-visible,
.bamleon-cs select:focus-visible {
	outline: 2px solid var(--bamleon-accent, #5B8DBE);
	outline-offset: 3px;
	border-radius: var(--bamleon-radius-sm);
}
/* Honor user's prefers-reduced-motion across the case study. Animations and
   transitions get neutralized; transforms still allowed for keyboard focus. */
@media (prefers-reduced-motion: reduce) {
	.bamleon-cs *,
	.bamleon-cs *::before,
	.bamleon-cs *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

.bamleon-cs {
	background: var(--bamleon-bg);
	color: var(--bamleon-text);
	font-family: var(--bamleon-font-display);
	--bamleon-cs-container: 100%;
	--bamleon-cs-gutter:    clamp(40px, 15vw, 400px);
	--bamleon-cs-measure:   75ch;
}

/* Catch-all — strip every drop/box shadow off images, iframes, picture, video,
 * and the media containers that wrap them. Per design direction: clean,
 * shadow-free media. */
.bamleon-cs img,
.bamleon-cs picture,
.bamleon-cs video,
.bamleon-cs iframe,
.bamleon-cs .bamleon-cs__media,
.bamleon-cs .bamleon-cs__media-grid,
.bamleon-cs .bamleon-cs__media--iframe,
.bamleon-cs .bamleon-cs__iframe,
.bamleon-cs .bamleon-cs__wireframe img,
.bamleon-cs .bamleon-cs__wireframe-full img,
.bamleon-cs .bamleon-cs__demo-iframe,
.bamleon-cs .bamleon-cs__style-preview {
	box-shadow: none !important;
	filter: none !important;
}

/* Article wrapper — full-bleed; sections decide their own internal measure.
   Bumped from a 1440px container to a fluid 100% so impact sections (hero,
   architecture diagram, version timeline, dashboard iframes) can reach the
   viewport edges. Body-copy sections still constrain readable text width via
   `--bamleon-cs-measure` (75ch) — applied at the section-body level, not the
   article level — so prose stays comfortable while imagery goes wide. */
.bamleon-cs__article {
	min-height: 100vh;
	max-width: var(--bamleon-cs-container);
	margin: 0 auto;
	padding: 0 var(--bamleon-cs-gutter);
	/* overflow visible — overflow:hidden was clipping wide media + iframes */
	overflow: visible;
	text-align: left;
}

/* ═══════════════════════════════════════════════════════════════════════
 * GLOBAL TEXT-ALIGN GUARD — Therum OS standard: every case study reads
 * left-aligned. The ONLY exception is image/figure captions. Anything
 * that needs centering inside a case study must opt in via a caption-*
 * class. This rule is the wall — it overrides any centering inherited
 * from Bricks Advanced Themer, brxe-heading defaults, or stray inline-flex
 * + parent text-align: center combos.
 * ═══════════════════════════════════════════════════════════════════════ */
.bamleon-cs,
.bamleon-cs *,
.bamleon-cs__article,
.bamleon-cs__article *,
.bamleon-cs__article h1,
.bamleon-cs__article h2,
.bamleon-cs__article h3,
.bamleon-cs__article h4,
.bamleon-cs__article h5,
.bamleon-cs__article h6,
.bamleon-cs__article p,
.bamleon-cs__article span,
.bamleon-cs__article div,
.bamleon-cs__article li,
.bamleon-cs__article .brxe-heading,
.bamleon-cs__article .brxe-text-basic,
.bamleon-cs__article .brxe-text {
	text-align: left;
}
/* Exception whitelist: only captions + truly opted-in centered surfaces
   may center their text. Add any new caption-like class here, NOT to the
   element via inline CSS. */
.bamleon-cs__article figcaption,
.bamleon-cs__article .bamleon-cs__plate-label,
.bamleon-cs__article .bamleon-cs__media-caption,
.bamleon-cs__article .bamleon-cs__wireframe figcaption,
.bamleon-cs__article .bamleon-cs__browser-label,
.bamleon-cs__article .bamleon-cs__phone-label,
.bamleon-cs__article .bamleon-cs__device-caption,
.bamleon-cs__article .bamleon-cs__pagemock-foot,
.bamleon-cs__article .bamleon-cs__demo-cta,
.bamleon-cs__article .bamleon-cs__coda,
.bamleon-cs__article .bamleon-cs__module-foot,
.bamleon-cs__article [data-allow-center] {
	text-align: center;
}
.bamleon-cs__article img,
.bamleon-cs__article picture,
.bamleon-cs__article video {
	max-width: 100%;
	height: auto;
}
.bamleon-cs__article iframe {
	max-width: 100%;
}
.bamleon-cs .bamleon-cs__media,
.bamleon-cs .bamleon-cs__media-grid,
.bamleon-cs .bamleon-cs__media--iframe {
	overflow: visible;
}

/* Bleed escape hatch — for media that should break out to the viewport edges
   (hero image, occasional impact shot). Keeps everything else in the container. */
.bamleon-cs__bleed {
	margin-left:  calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	width: 100vw;
	max-width: none;
	border-radius: 0;
}


/* ═══════════════════════════════════════════════════════════════════════
 * BRICKS ELEMENT-TYPE OVERRIDES
 *
 * Bricks' frontend-layer.min.css sets:
 *   .brxe-section { align-items: center; display: flex; flex-direction: column }
 *   .brxe-block   { align-items: flex-start; display: flex; flex-direction: column }
 *
 * These defaults center section children and constrain block children to
 * content width. Compound selectors (0-2-0) beat the single-class Bricks
 * rules (0-1-0) regardless of load order — same pattern used by
 * .bamleon-home.brxe-section and .bamleon-page.brxe-section elsewhere.
 * ═══════════════════════════════════════════════════════════════════════ */
.bamleon-cs__article.brxe-block {
	display: var(--bamleon-cs-article-display, block);
	width: 100%;
}
.bamleon-cs__top.brxe-block {
	display: var(--bamleon-cs-top-display, block);
	width: 100vw;
	max-width: 100vw;
}
.bamleon-cs__hero.brxe-section,
.bamleon-cs__section.brxe-section,
.bamleon-cs__overview.brxe-section {
	display: flex;
	flex-direction: column;
	align-items: var(--bamleon-cs-section-align, stretch);
	text-align: var(--bamleon-cs-hero-text-align, left);
	margin-left: var(--bamleon-cs-hero-margin, 0);
	margin-right: var(--bamleon-cs-hero-margin, 0);
}

/* ── Hero ───────────────────────────────────────────────────────────────── */
/* Vertical rhythm tuned to match the homepage hero (140px top, 80px bottom)
   while giving the case-study kicker room to settle below the floating island
   header — hence the slightly larger top padding. */
.bamleon-cs__hero {
	padding: 180px 0 100px;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	text-align: left;
	gap: 32px;
}
.bamleon-cs__hero .bamleon-cs__hero-kicker,
.bamleon-cs__hero .bamleon-cs__hero-title,
.bamleon-cs__hero .bamleon-cs__hero-tagline { text-align: left; }
.bamleon-cs__hero .bamleon-cs__hero-cta { align-self: flex-start; }

/* Hero-as-login-screen: the case study opens with the OS's first surface
 * — the login UI — instead of a typographic title slab. The kicker/title/
 * tagline/CTA are hidden in place (kept in postmeta so the change is
 * reversible) and the iframe-media block carries the headline weight. */
/* Hero anatomy (project standard): kicker → title → hero image → rest.
   Tagline elements removed from data; rule no longer needed.
   Therum-specific: CTA hidden because the iframe-media carries hero weight. */
.bamleon-cs__hero--therum > .bamleon-cs__hero-cta { display: none !important; }
.bamleon-cs__hero--therum { padding-bottom: 0; gap: 64px; }
.bamleon-cs__hero--therum > .bamleon-cs__hero-kicker { margin-bottom: 8px; }
.bamleon-cs__hero-media--therum {
	/* !important wins against the base `.bamleon-cs__hero-media { margin: 0 0 56px }`
	   shorthand that appears later in the source and resets margin-top to 0. */
	margin-top: 96px !important;
	aspect-ratio: 16 / 9;
	min-height: 560px;
	max-height: 80vh;
	border-radius: 18px;
	overflow: hidden;
	background: transparent !important;
	box-shadow:
		0 2px 6px rgba(20, 20, 30, 0.06),
		0 30px 60px -20px rgba(20, 20, 30, 0.22);
	/* Override the page's auto-applied parallax so the dashboard sits still
	   instead of drifting on scroll. */
	transform: none !important;
	will-change: auto !important;
}
.bamleon-cs__hero-media--therum .bamleon-cs__iframe--hero {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
	transform: none !important;
	object-fit: contain;
	object-position: top left;
}
/* Hero iframe — same scale-to-fit treatment as the compare slider's
   "after" pane. Renders the live experience demo at native 1920×900 and
   scales down to the container width via container-query units. Stays
   1:1 with whatever the demo shows, no stale screenshot to maintain.

   The container's aspect-ratio MUST match the iframe's native dimensions
   exactly (1920:900) — otherwise the box is taller than the scaled
   iframe paints and the remainder shows the parent's dark bleed bg.
   `min-height` and `max-height` from the .--therum sibling class are
   cleared here for the same reason. */
.bamleon-cs__hero-media--iframe {
	container-type: inline-size;
	position: relative;
	aspect-ratio: 1920 / 900 !important;
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	overflow: hidden;
	/* Hard clip — overflow:hidden + border-radius alone doesn't reliably contain
	   a transform-scaled iframe; sub-pixel rounding leaks the iframe's content
	   past the corner. clip-path enforces it. Radius inherited from the parent
	   .--therum modifier (18px); match it here. */
	clip-path: inset(0 round 18px);
	isolation: isolate;
	background: #ffffff;
}
.bamleon-cs__hero-iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 1920px;
	height: 900px;
	border: 0;
	background: #ffffff;
	transform-origin: 0 0;
	/* scale set by JS (scaleFixedIframe) — scale(calc(100cqw/1920)) is invalid CSS: cqw is a length, scale() needs a number */
	pointer-events: none;
}
.bamleon-cs__hero-kicker {
	font-family: var(--bamleon-font-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bamleon-text-3);
	display: flex;
	align-items: center;
	gap: 14px;
}
.bamleon-cs__hero-kicker::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	background: var(--bamleon-accent);
	border-radius: 50%;
}
/* Section H2s — scroll-margin keeps them clear of the floating island
   header when navigated to via #section-XX anchor or programmatic scroll. */
.bamleon-cs__section-title,
[data-section-num] {
	scroll-margin-top: 110px;
}

.bamleon-cs__hero-title {
	font-family: var(--bamleon-font-display);
	font-size: clamp(64px, 10vw, 168px);
	font-weight: 500;
	line-height: 0.95;
	letter-spacing: -0.04em;
	color: var(--bamleon-text);
	margin: 0;
}
.bamleon-cs__hero-tagline {
	font-family: var(--bamleon-font-display);
	font-size: clamp(20px, 2vw, 32px);
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: var(--bamleon-tracking-normal);
	color: var(--bamleon-text-2);
	margin: 0;
	max-width: 70ch;
}
.bamleon-cs__hero-cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 22px;
	border: 1px solid var(--bamleon-border);
	border-radius: var(--bamleon-radius-pill);
	color: var(--bamleon-text);
	text-decoration: none;
	font-family: var(--bamleon-font-display);
	font-size: 14px;
	font-weight: 500;
	max-width: max-content;
	transition: background 200ms var(--bamleon-ease-out),
	            border-color 200ms var(--bamleon-ease-out);
}
.bamleon-cs__hero-cta:hover { background: var(--bamleon-text); color: var(--bamleon-bg); border-color: var(--bamleon-text); }


/* ── Hero image — bleeds full-width by default for impact ──────────────── */
.bamleon-cs__hero-media {
	margin: 0 0 56px;
	aspect-ratio: 16 / 9;
	background: linear-gradient(135deg, var(--bamleon-surface), var(--bamleon-surface-2));
	border: 1px solid var(--bamleon-border);
	display: block;
	overflow: hidden;
	color: var(--bamleon-text-3);
	font-family: var(--bamleon-font-mono);
	font-size: var(--bamleon-text-sm);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	overflow: hidden;
}
/* Hero image gets the bleed treatment by default */
.bamleon-cs__hero-media.bamleon-cs__bleed {
	border-left: 0;
	border-right: 0;
}
/* The image inside fills the entire hero frame edge-to-edge.
   Anchored to top so website-screenshot heroes preserve the page header /
   logo / nav (the most identity-bearing zone). Bottom of the scroll gets
   cropped instead — usually just more body content. */
.bamleon-cs__hero-media > img,
.bamleon-cs__hero-media > picture,
.bamleon-cs__hero-media > video {
	width: 100%;
	height: auto;
	display: block;
	object-fit: contain;
	object-position: center top;
}

/* --fill variant: image renders at natural aspect, no cropping.
   Used when the hero image IS the deliverable (email, poster) rather
   than an ambient photograph. Container drops aspect-ratio so it
   wraps the image at full width × natural height. */
.bamleon-cs__hero-media--fill {
	aspect-ratio: auto !important;
	max-height: none !important;
	overflow: visible !important;
	background: none !important;
}
.bamleon-cs__hero-media--fill > img,
.bamleon-cs__hero-media--fill > img.brxe-image,
.bamleon-cs__hero-media--fill > .brxe-image,
.bamleon-cs__hero-media--fill > .brxe-image > img,
.bamleon-cs__hero-media--fill > picture > img,
.bamleon-cs__hero-media--fill img {
	width: 100% !important;
	height: auto !important;
	max-height: none !important;
	object-fit: contain !important;
	object-position: center top !important;
	display: block !important;
}


/* ── Metadata block ─────────────────────────────────────────────────────── */
/* Premium-tier meta strip:
   - Vertical rules between items (echoes homepage numbers row rhythm)
   - Accent dot before each label (echoes hero-kicker dot)
   - Display value sized large enough to read as a primary fact, not a caption
   - Hairline rules top + bottom frame the strip cleanly */
/* Meta strip — identical to homepage's "What I'm building" stage:
   full-bleed dark band (100vw breakout), radial gradient bg, blurred
   spotlights via ::before/::after, build-card grid inside with the
   cursor-tracked glowing border. */
.bamleon-cs__meta {
	position: relative;
	left: 50%;
	right: 50%;
	margin: 56px -50vw 96px;
	width: 100vw;
	max-width: 100vw;
	padding: 80px clamp(24px, 5vw, 80px);
	background: radial-gradient(ellipse at 50% 0%, #1f1f24 0%, #161618 55%, #121214 100%);
	color: var(--bamleon-text);
	overflow: hidden;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	box-sizing: border-box;

	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}
/* Two blurred radial spotlights — top-right + bottom-left, same as
   the homepage's about-stage. Absolutely positioned so they stay out
   of the grid flow. */
.bamleon-cs__meta::before {
	content: "";
	position: absolute;
	top: -120px;
	right: -80px;
	width: 480px;
	height: 480px;
	background: radial-gradient(circle, rgba(91, 141, 190, 0.10) 0%, transparent 70%);
	filter: blur(60px);
	pointer-events: none;
	z-index: 0;
}
.bamleon-cs__meta::after {
	content: "";
	position: absolute;
	bottom: -160px;
	left: -120px;
	width: 520px;
	height: 520px;
	background: radial-gradient(circle, rgba(74, 142, 255, 0.10) 0%, transparent 70%);
	filter: blur(60px);
	pointer-events: none;
	z-index: 0;
}
.bamleon-cs__meta > .bamleon-cs__meta-item {
	position: relative;
	z-index: 1;
}
.bamleon-cs__meta-item {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 28px;
	border-radius: 22px;
	background: linear-gradient(180deg, #161618 0%, #0c0c0e 100%);
	color: var(--bamleon-text);
	overflow: hidden;
	isolation: isolate;
	min-height: 160px;
}
/* Glowing border ring — same mask-composite pattern as bamleon-build-card */
.bamleon-cs__meta-item::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1.5px;
	background: radial-gradient(220px circle at var(--gx, -200px) var(--gy, -200px),
		rgba(91, 141, 190, 0.85) 0%,
		rgba(255, 122, 179, 0.55) 25%,
		rgba(74, 142, 255, 0.45) 50%,
		rgba(255, 255, 255, 0.06) 80%);
	-webkit-mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
	z-index: 1;
}
.bamleon-cs__meta-item > * { position: relative; z-index: 2; }

.bamleon-cs__meta-label {
	font-family: var(--bamleon-font-mono);
	font-size: var(--bamleon-text-xs);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(245, 245, 245, 0.55);
	display: flex;
	align-items: center;
	gap: 10px;
}
.bamleon-cs__meta-label::before {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	background: var(--bamleon-accent);
	border-radius: 50%;
	flex-shrink: 0;
}
.bamleon-cs__meta-value {
	font-family: var(--bamleon-font-display);
	font-size: clamp(20px, 1.6vw, 24px);
	font-weight: 500;
	letter-spacing: var(--bamleon-tracking-normal);
	color: #ffffff;
	line-height: 1.25;
}

@media (max-width: 900px) {
	.bamleon-cs__meta {
		grid-template-columns: repeat(2, 1fr);
		margin: 48px 0 64px;
	}
}
@media (max-width: 560px) {
	.bamleon-cs__meta {
		grid-template-columns: 1fr;
	}
}


/* ── Premise list — numbered "reasons / brief / principles" block ──────
   Used in case study Section 01 (or wherever a numbered brief reads better
   as a designed list than plain prose). Each row: large mono numeral on the
   left, copy on the right, hairline between rows. */
.bamleon-cs__premise-list {
	list-style: none;
	margin: 40px 0;
	padding: 0;
	border-top: 1px solid var(--bamleon-border);
}
.bamleon-cs__premise-list li {
	display: grid;
	grid-template-columns: 96px 1fr;
	gap: 32px;
	padding: 28px 0;
	border-bottom: 1px solid var(--bamleon-border);
	align-items: baseline;
}
.bamleon-cs__premise-num {
	font-family: var(--bamleon-font-mono);
	font-size: 32px;
	font-weight: 500;
	letter-spacing: var(--bamleon-tracking-normal);
	color: var(--bamleon-accent);
	line-height: 1;
}
.bamleon-cs__premise-body {
	font-family: var(--bamleon-font-body);
	font-size: 18px;
	line-height: var(--bamleon-leading-base);
	color: var(--bamleon-text-2);
}
.bamleon-cs__premise-body strong {
	font-family: var(--bamleon-font-display);
	font-weight: 600;
	color: var(--bamleon-text);
	margin-right: 8px;
}

@media (max-width: 700px) {
	.bamleon-cs__premise-list li {
		grid-template-columns: 1fr;
		gap: 12px;
		padding: 24px 0;
	}
	.bamleon-cs__premise-num {
		font-size: 24px;
	}
}


/* ── Wireframe Explorer (Sidemoney Section 02) ──────────────────────────
   Tab-driven 3-up filmstrip. Six radios → six labels (tabs) → one 6-slide
   track inside an overflow:hidden stage. The :checked sibling selector
   shifts the track via translateX and lifts the active slide's opacity to
   1; flanking slides hold at 0.32 so the active is unmistakably in focus.

   Track positions across 6 states (4 distinct):
     home    (idx 0)  ─ track at 0,   home    active at LEFT
     about   (idx 1)  ─ track at 0,   about   active at CENTER
     contact (idx 2)  ─ track at -1,  contact active at CENTER
     shop    (idx 3)  ─ track at -2,  shop    active at CENTER
     pdp     (idx 4)  ─ track at -3,  pdp     active at CENTER
     srp     (idx 5)  ─ track at -3,  srp     active at RIGHT             */

.bamleon-cs__wf-explorer {
	--wf-gap: 24px;
	margin: 40px 0 64px;
	/* Full-bleed edge to edge — applies to every case study with the wireframe
	   or live-site explorer component. Therum-OS visual standard. */
	width: 100vw;
	max-width: 100vw;
	margin-left:  calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
.bamleon-cs__wf-tablist {
	padding: 0 var(--bamleon-cs-gutter);
	max-width: 1400px;
	margin-left: auto;
	margin-right: auto;
}
.bamleon-cs__wf-slide figcaption {
	padding: 0 var(--bamleon-cs-gutter);
	max-width: 1400px;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
}
/* Radio inputs removed — tabs are now <button> elements driven by JS.
   .is-active class on the tab + data-active-index on the explorer
   control both tab highlighting and track position. */

/* Tablist — clean row of 6 numbered labels. Active tab gets the accent
   underline directly under it; no full-width grey divider beneath the row. */
.bamleon-cs__wf-tablist {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 0;
	margin-bottom: 48px;
}
.bamleon-cs__wf-tab {
	/* Button reset — tabs are now <button> elements */
	appearance: none;
	background: none;
	border: none;
	font: inherit;
	text-align: left;
	/* Layout */
	position: relative;
	display: flex;
	align-items: baseline;
	gap: 12px;
	padding: 20px 4px;
	cursor: pointer;
	color: var(--bamleon-text-3);
	transition: color 200ms var(--bamleon-ease-out);
	user-select: none;
}
.bamleon-cs__wf-tab::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background: var(--bamleon-accent);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 320ms var(--bamleon-ease-out);
}
.bamleon-cs__wf-tab:hover { color: var(--bamleon-text-2); }
.bamleon-cs__wf-tab-num {
	font-family: var(--bamleon-font-mono);
	font-size: var(--bamleon-text-xs);
	font-weight: 500;
	letter-spacing: 0.18em;
	color: inherit;
}
.bamleon-cs__wf-tab-name {
	font-family: var(--bamleon-font-display);
	font-size: var(--bamleon-text-base);
	font-weight: 500;
	letter-spacing: var(--bamleon-tracking-normal);
}

/* Stage — viewport for the filmstrip. container-type: inline-size so
   100cqw inside resolves to the stage's own width regardless of where
   the calc is used (slide flex-basis OR track translate). */
.bamleon-cs__wf-stage {
	position: relative;
	overflow: hidden;
	container-type: inline-size;
	/* Horizontal padding keeps the slide frame aligned with the article gutter
	   instead of bleeding to the absolute viewport edge. */
	padding: 0 var(--bamleon-cs-gutter);
	box-sizing: border-box;
}
.bamleon-cs__wf-track {
	display: flex;
	gap: var(--wf-gap);
	transition: transform 600ms cubic-bezier(.32, .72, 0, 1);
	transform: translateX(0);
	will-change: transform;
}
.bamleon-cs__wf-slide {
	flex: 0 0 100cqw;
	margin: 0;
	padding: 0;
}
/* Frame uses the wireframe/page image as a BACKGROUND (not an inner <img>).
   background-position transition is the most reliable hover-pan technique —
   no fighting Bricks's img cascade, no transform/overflow ambiguity. Image
   sits at top by default. On hover, background-position slides to bottom
   over 7-10s. Mouse-out springs back to top in 600ms. */
.bamleon-cs__wf-frame {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	background-color: var(--bamleon-paper);
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-position: top center;
	border: 1px solid var(--bamleon-border);
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(15, 15, 18, 0.04),
	            0 16px 40px -16px rgba(15, 15, 18, 0.18);
	position: relative;
	transition: background-position 600ms ease-out;
}
/* Wireframe explorer hover-pan — slow enough to read top→bottom naturally. */
.bamleon-cs__wf-slide:hover .bamleon-cs__wf-frame {
	background-position: bottom center;
	transition: background-position 14s linear;
}
/* Contact wireframe stays put — content is mostly above the fold. */
.bamleon-cs__wf-slide[data-key="contact"]:hover .bamleon-cs__wf-frame {
	background-position: top center;
}

/* Live-site explorer uses the SAME behavior as the wireframe explorer:
   full-width background, top by default, scroll to bottom on hover. */
/* Hide any inner img — we only keep it for accessibility/SEO if present.
   The visual is handled entirely by the frame's background-image. */
.bamleon-cs__wf-frame img {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	pointer-events: none;
}
.bamleon-cs__wf-slide figcaption {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-top: 18px;
	font-family: var(--bamleon-font-display);
	font-size: 15px;
	font-weight: 500;
	color: var(--bamleon-text-2);
}
.bamleon-cs__wf-slide-num {
	font-family: var(--bamleon-font-mono);
	font-size: var(--bamleon-text-xs);
	font-weight: 500;
	letter-spacing: 0.16em;
	color: var(--bamleon-text-3);
}

/* ─── Active state via .is-active class (JS-driven) ─────────────────── */

/* Track shifts — data-active-index on the explorer drives transform.
   Each step = 100cqw (one full stage width) + gap. JS sets the attr;
   CSS reads it. Six positions. */
.bamleon-cs__wf-explorer[data-active-index="0"] .bamleon-cs__wf-track { transform: translateX(0); }
.bamleon-cs__wf-explorer[data-active-index="1"] .bamleon-cs__wf-track { transform: translateX(calc(-1 * (100cqw + var(--wf-gap)))); }
.bamleon-cs__wf-explorer[data-active-index="2"] .bamleon-cs__wf-track { transform: translateX(calc(-2 * (100cqw + var(--wf-gap)))); }
.bamleon-cs__wf-explorer[data-active-index="3"] .bamleon-cs__wf-track { transform: translateX(calc(-3 * (100cqw + var(--wf-gap)))); }
.bamleon-cs__wf-explorer[data-active-index="4"] .bamleon-cs__wf-track { transform: translateX(calc(-4 * (100cqw + var(--wf-gap)))); }
.bamleon-cs__wf-explorer[data-active-index="5"] .bamleon-cs__wf-track { transform: translateX(calc(-5 * (100cqw + var(--wf-gap)))); }

/* Active tab — accent underline scales in, label color goes to ink. */
.bamleon-cs__wf-tab.is-active {
	color: var(--bamleon-text);
}
.bamleon-cs__wf-tab.is-active::after {
	transform: scaleX(1);
}
.bamleon-cs__wf-tab.is-active .bamleon-cs__wf-tab-num {
	color: var(--bamleon-accent);
}

/* Keyboard focus ring on tab buttons */
.bamleon-cs__wf-tab:focus-visible {
	outline: 2px solid var(--bamleon-accent);
	outline-offset: -2px;
}

/* Responsive — tabs wrap on smaller screens; slide-track math is unchanged
   (still 1-up via 100cqw so every breakpoint uses the same translations). */
@media (max-width: 900px) {
	.bamleon-cs__wf-tablist {
		grid-template-columns: repeat(3, 1fr);
	}
}
@media (max-width: 600px) {
	.bamleon-cs__wf-tablist {
		grid-template-columns: repeat(2, 1fr);
	}
	.bamleon-cs__wf-tab { padding: 14px 16px; }
	.bamleon-cs__wf-tab-name { font-size: 14px; }
}


/* ── Digital brand tile (Sidemoney Section 02) ─────────────────────────
   A website-card showing sidemoney.co inside browser chrome. The screen
   crops the top of a long-scroll capture; on hover the screen scrolls
   top→bottom→top like the wireframes do. Meta strip beneath. */
.bamleon-cs__digital-brand {
	display: block;
	margin: 40px 0 80px;
	color: inherit;
	text-decoration: none;
	border-radius: 14px;
	overflow: hidden;
	background: var(--bamleon-surface);
	border: 1px solid var(--bamleon-border);
	box-shadow: 0 1px 2px rgba(15, 15, 18, 0.04),
	            0 28px 64px -28px rgba(15, 15, 18, 0.28);
	transition: transform 320ms var(--bamleon-ease-out),
	            box-shadow 320ms var(--bamleon-ease-out);
}
.bamleon-cs__digital-brand:hover {
	transform: translateY(-3px);
	box-shadow: 0 1px 2px rgba(15, 15, 18, 0.04),
	            0 36px 72px -28px rgba(15, 15, 18, 0.36);
}

.bamleon-cs__digital-brand-window {
	background: var(--bamleon-surface-2);
}
.bamleon-cs__digital-brand-bar {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px 18px;
	background: #232328;
	border-bottom: 1px solid rgba(255,255,255,0.06);
}
.bamleon-cs__digital-brand-dots {
	display: inline-flex;
	gap: 7px;
}
.bamleon-cs__digital-brand-dots span {
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: rgba(255,255,255,0.16);
}
.bamleon-cs__digital-brand-dots span:first-child { background: #ff5f57; }
.bamleon-cs__digital-brand-dots span:nth-child(2) { background: #febc2e; }
.bamleon-cs__digital-brand-dots span:nth-child(3) { background: #28c840; }
.bamleon-cs__digital-brand-url {
	flex: 1;
	text-align: center;
	font-family: var(--bamleon-font-mono);
	font-size: 12px;
	color: rgba(255,255,255,0.6);
	letter-spacing: var(--bamleon-tracking-wide);
}
.bamleon-cs__digital-brand-screen {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--bamleon-surface-2);
}
.bamleon-cs__digital-brand-screen img {
	display: block;
	width: 100%;
	height: auto;
	max-height: none;
	will-change: transform;
}
.bamleon-cs__digital-brand:hover .bamleon-cs__digital-brand-screen img {
	animation: bamleon-wf-scroll 22s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
	.bamleon-cs__digital-brand:hover .bamleon-cs__digital-brand-screen img {
		animation: none;
	}
}

.bamleon-cs__digital-brand-meta {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	padding: 28px 32px;
}
.bamleon-cs__digital-brand-meta-left {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.bamleon-cs__digital-brand-kicker {
	font-family: var(--bamleon-font-mono);
	font-size: var(--bamleon-text-xs);
	font-weight: 500;
	letter-spacing: 0.18em;
	color: var(--bamleon-text-3);
}
.bamleon-cs__digital-brand-name {
	font-family: var(--bamleon-font-display);
	font-size: clamp(24px, 2.4vw, 32px);
	font-weight: 500;
	letter-spacing: -0.02em;
	color: var(--bamleon-text);
}
.bamleon-cs__digital-brand-tags {
	font-family: var(--bamleon-font-display);
	font-size: 14px;
	color: var(--bamleon-text-2);
}
.bamleon-cs__digital-brand-cta {
	font-family: var(--bamleon-font-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--bamleon-text);
	white-space: nowrap;
	transition: color 200ms var(--bamleon-ease-out);
}
.bamleon-cs__digital-brand:hover .bamleon-cs__digital-brand-cta {
	color: var(--bamleon-accent);
}

@media (max-width: 700px) {
	.bamleon-cs__digital-brand-meta {
		flex-direction: column;
		align-items: flex-start;
		padding: 24px;
	}
}


/* ── User journeys — relume-style with page-icon representations ───────
   Each card: numbered head, title, short description, and a horizontal
   flow of mini page-icon cards (header bar + content blocks + footer bar
   inside a phone-frame outline) connected by chevron arrows. */
/* Journeys grid: 2×2 cards, full-bleed edge-to-edge — Therum OS standard. */
.bamleon-cs__journeys {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	margin: 32px 0 64px;
	width: 100vw;
	max-width: 100vw;
	margin-left:  calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: 0 var(--bamleon-cs-gutter);
	box-sizing: border-box;
}
@media (max-width: 900px) {
	.bamleon-cs__journeys { grid-template-columns: 1fr; }
}
.bamleon-cs__journey {
	padding: 36px 40px;
	border: 1px solid var(--bamleon-border);
	border-radius: 14px;
	background: var(--bamleon-surface);
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.bamleon-cs__journey-head {
	display: flex;
	align-items: baseline;
	gap: 16px;
}
.bamleon-cs__journey-num {
	font-family: var(--bamleon-font-mono);
	font-size: 24px;
	font-weight: 500;
	color: var(--bamleon-accent);
	letter-spacing: var(--bamleon-tracking-normal);
	line-height: 1;
}
.bamleon-cs__journey-label {
	font-family: var(--bamleon-font-display);
	font-size: 24px;
	font-weight: 600;
	color: var(--bamleon-text);
	letter-spacing: -0.02em;
}
.bamleon-cs__journey-desc {
	font-family: var(--bamleon-font-body);
	font-size: 15px;
	line-height: 1.55;
	color: var(--bamleon-text-2);
	margin: 0;
	max-width: 70ch;
}
.bamleon-cs__journey-flow {
	list-style: none;
	padding: 0;
	margin: 8px 0 0;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 6px;
	overflow: visible;
}
.bamleon-cs__journey-step {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 8px 4px;
	background: var(--bamleon-surface-2);
	border: 1px solid var(--bamleon-border);
	border-radius: var(--bamleon-radius-md);
	color: var(--bamleon-text);
	transition: background 200ms var(--bamleon-ease-out),
	            transform 200ms var(--bamleon-ease-out);
}
.bamleon-cs__journey-step:hover {
	background: var(--bamleon-bg);
	transform: translateY(-2px);
}
.bamleon-cs__journey-icon {
	display: inline-flex;
	width: 28px;
	height: 36px;
	color: var(--bamleon-text);
}
.bamleon-cs__journey-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}
.bamleon-cs__journey-step-name {
	font-family: var(--bamleon-font-mono);
	font-size: 8px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bamleon-text-2);
	text-align: center;
	line-height: var(--bamleon-leading-snug);
}
.bamleon-cs__journey-arrow {
	flex: 0 0 10px;
	display: flex;
	align-items: center;
	width: 10px;
	height: 16px;
	color: var(--bamleon-text-3);
	position: relative;
}
.bamleon-cs__journey-arrow::before {
	content: "";
	position: absolute;
	left: 0;
	right: 4px;
	top: 50%;
	height: 1px;
	background: var(--bamleon-border);
}
.bamleon-cs__journey-arrow::after {
	content: "";
	position: absolute;
	right: 0;
	top: 50%;
	width: 0;
	height: 0;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	border-left: 6px solid var(--bamleon-border);
	transform: translateY(-50%);
}

@media (max-width: 900px) {
	.bamleon-cs__journey {
		padding: 28px 24px;
	}
	.bamleon-cs__journey-step {
		min-width: 84px;
		padding: 12px 10px;
	}
	.bamleon-cs__journey-icon {
		width: 42px;
		height: 52px;
	}
}


/* ── Numbered section — fills the article container, no separate max-width.
   Body text gets its own measure (max-width: 65ch) for readability.
   Padding tuned to match homepage section rhythm (60-100px verticals). */
/* Simple block layout. Section-num renders small mono above the title;
   title flows normally; body + diagrams + grids all flow block-style.
   Grid was breaking layout — reverted. */
.bamleon-cs__section {
	padding: 80px 0;
	display: block;
}
.bamleon-cs__section-num {
	font-family: var(--bamleon-font-mono);
	font-size: var(--bamleon-text-sm);
	font-weight: 500;
	letter-spacing: 0.06em;
	color: var(--bamleon-text-3);
	display: block;
	margin: 0 0 20px;
	padding: 0;
	line-height: 1;
}
.bamleon-cs__section-title {
	font-family: var(--bamleon-font-display);
	font-size: clamp(36px, 5vw, 72px);
	font-weight: 500;
	letter-spacing: var(--bamleon-tracking-tight);
	line-height: 1;
	color: var(--bamleon-text);
	margin: 0 0 48px;
	max-width: none;
	scroll-margin-top: 120px;
	text-align: left;
}
/* Force left-alignment on the section frame so nothing inside floats center */
.bamleon-cs__section {
	text-align: left !important;
}
.bamleon-cs__section > *,
.bamleon-cs__section-num,
.bamleon-cs__section-body,
.bamleon-cs__section-body > *,
.bamleon-cs__row-kicker {
	text-align: left !important;
}
.bamleon-cs__section-body,
.bamleon-cs__section-body > *,
.bamleon-cs__section-body p,
.bamleon-cs__section-body ul,
.bamleon-cs__section-body ol,
.bamleon-cs__section-body li,
.bamleon-cs__section-body .brxe-heading,
.bamleon-cs__section-body .brxe-block {
	max-width: none !important;
	width: auto !important;
}
.bamleon-cs__section-body {
	font-family: var(--bamleon-font-body);
	font-size: 18px;
	line-height: 1.7;
	color: var(--bamleon-text-2);
	display: block !important;
}
.bamleon-cs__section-body p { margin: 0 0 24px !important; display: block !important; }
.bamleon-cs__section-body p:last-child { margin-bottom: 0 !important; }

/* Bricks splits prose paragraphs into <span class="brxe-heading"> +
 * <a class="brxe-block"> + <span> tokens. The .brxe-block default display
 * is `block`, which forces inline links onto their own line and shatters
 * paragraph flow. Force every text-level child of a <p> to render inline. */
.bamleon-cs__section-body p a,
.bamleon-cs__section-body p span,
.bamleon-cs__section-body p strong,
.bamleon-cs__section-body p em,
.bamleon-cs__section-body p code,
.bamleon-cs__section-body p .brxe-heading,
.bamleon-cs__section-body p .brxe-block,
.bamleon-cs__section-body li a,
.bamleon-cs__section-body li span,
.bamleon-cs__section-body li strong,
.bamleon-cs__section-body li em,
.bamleon-cs__section-body li .brxe-heading,
.bamleon-cs__section-body li .brxe-block {
	display: inline !important;
}

/* Adjacent section-body after a media block gets a top gap so prose
   never sits flush against a plate, flipbook, explorer, or carousel. */
.bamleon-cs__plate + .bamleon-cs__section-body,
.bamleon-cs__flipbook + .bamleon-cs__section-body,
.bamleon-cs__email-explorer + .bamleon-cs__section-body,
.bamleon-cs__media + .bamleon-cs__section-body,
.bamleon-cs__media-grid + .bamleon-cs__section-body,
.bamleon-cs__carousel + .bamleon-cs__section-body {
	margin-top: 56px;
}

/* ── Image containers ───────────────────────────────────────────────────── */
.bamleon-cs__media {
	margin: 48px 0;
	border-radius: var(--bamleon-radius-lg);
	background: var(--bamleon-surface-2);
	border: 1px solid var(--bamleon-border);
	display: grid;
	place-items: center;
	color: var(--bamleon-text-3);
	font-family: var(--bamleon-font-mono);
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	overflow: hidden;
	min-height: 320px;
}
.bamleon-cs__media--full { aspect-ratio: 16 / 9; }
.bamleon-cs__media--square { aspect-ratio: 1 / 1; }

.bamleon-cs__media-grid {
	display: grid;
	gap: 16px;
	margin: 48px 0;
	align-items: start;
}
.bamleon-cs__media-grid--1 { grid-template-columns: 1fr; }
.bamleon-cs__media-grid--2 { grid-template-columns: repeat(2, 1fr); }
/* Proportional 2-col: wider landscape + narrower portrait. Heights roughly
 * equalize at ~5:2 ratio (71/29). Use for mixed landscape+portrait pairs. */
.bamleon-cs__media-grid--2-wide { grid-template-columns: 5fr 2fr; }
.bamleon-cs__media-grid--3 { grid-template-columns: repeat(3, 1fr); }

/* Any img inside a media cell fills the cell at cover. Prevents alt-text
 * fallback rendering as uppercase mono inside the placeholder chrome. */
.bamleon-cs__media-grid .bamleon-cs__media > img,
.bamleon-cs__media-grid .bamleon-cs__media > picture > img,
.bamleon-cs__media-grid .bamleon-cs__media > video {
	width: 100%;
	height: auto;
	display: block;
	object-fit: contain;
	object-position: center;
}

/* ── PLATE (chrome-free image tile) ──────────────────────────────────────
 * No browser frame — just the image at its full natural height with a
 * small label below. Used for Ford's components + ford.com page surfaces.
 * KEY: plate has NO height constraint (height: auto !important); image
 * inside renders at its true intrinsic aspect, no cropping. */
.bamleon-cs__plate {
	display: block;
	margin: 48px 0 0;
	padding: 0;
	background: var(--bamleon-surface);
	border: 1px solid var(--bamleon-border);
	border-radius: 10px;
	overflow: hidden;
	/* Hard clip — plates host long screenshots that hover-translate; without
	   clip-path the bottom-of-image content can sub-pixel leak past the
	   rounded corner. */
	clip-path: inset(0 round 10px);
	isolation: isolate;
	text-decoration: none;
	color: inherit;
	transition: transform 220ms var(--bamleon-ease-out), border-color 220ms ease;
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	box-sizing: border-box;
}
.bamleon-cs__plate:hover {
	transform: translateY(-2px);
	border-color: var(--bamleon-text-3);
}

/* Therum OS standard mockup window: full-width container that vertically
   slow-scrolls on hover to reveal the bottom of tall screenshots.
   Aspect-ratio is only enforced when the image is genuinely TALLER than wide
   (otherwise we get an empty cropped band for wide wireframes). The JS helper
   sets --scroll-distance per image; tall ones overflow + transform on hover. */
.bamleon-cs__plate-window,
.bamleon-cs__plate-media,
.bamleon-cs__plate:not(:has(.bamleon-cs__plate-window, .bamleon-cs__plate-media)) {
	display: block;
	position: relative;
	width: 100%;
	max-height: none;
	overflow: visible;
	background: var(--bamleon-surface);
}
.bamleon-cs__plate-window > img,
.bamleon-cs__plate-media > img,
.bamleon-cs__plate > img {
	display: block;
	width: 100%;
	height: auto;
	max-height: none !important;
	object-fit: unset;
	transform: translateY(0);
	transition: transform 600ms ease-out;
	will-change: transform;
}
.bamleon-cs__plate-window:hover > img,
.bamleon-cs__plate-media:hover > img,
.bamleon-cs__plate:hover > img {
	transform: translateY(var(--scroll-distance, 0px));
	transition: transform 7s linear;
}

/* Variants that should keep natural height (no aspect-ratio crop):
   - .bamleon-cs__plate--fit  → opt-out, image is short enough to display whole
   - .plate-window--empty    → wireframe placeholders (Kingsland) */
.bamleon-cs__plate--fit .bamleon-cs__plate-window,
.bamleon-cs__plate--fit .bamleon-cs__plate-media,
.bamleon-cs__plate-window--empty,
.bamleon-cs__plate--fit {
	aspect-ratio: auto;
}
.bamleon-cs__plate--fit img {
	transform: none !important;
}

/* ── Inline figures (wireframes, screenshots) ──────────────────────────── */
.bamleon-cs__figure {
	margin: 32px 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.bamleon-cs__figure img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	border: 1px solid var(--bamleon-border);
	border-radius: var(--bamleon-radius-lg);
	background: var(--bamleon-surface);
}
.bamleon-cs__figure-caption {
	font-family: var(--bamleon-font-mono);
	font-size: 12px;
	letter-spacing: var(--bamleon-tracking-wide);
	color: var(--bamleon-text-3);
	line-height: 1.5;
	padding: 0 8px;
}

/* ── Image placeholder — shot-list lives in the data for future production.
   Hidden on the live site so readers don't see "Image needed" markers.
   Restore for editing by adding class .show-placeholders to the page body,
   or by removing this display:none. ── */
.bamleon-cs__placeholder { display: none !important; }

/* Filled placeholder (Ford · 3 critical directional SVGs).
   Overrides the global hide. Renders the image at full width with the
   existing placeholder text (kicker · title · filename · caption) collapsed
   into a thin mono caption strip below. */
.bamleon-cs__placeholder--filled {
	display: flex !important;
	flex-direction: column;
	gap: 14px;
	margin: 32px 0;
	padding: 0;
	background: transparent;
	border: none;
	min-height: 0;
	text-align: left;
}
.bamleon-cs__placeholder--filled .bamleon-cs__placeholder-img img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--bamleon-radius-md);
	background: #1a1a1a;
}
.bamleon-cs__placeholder--filled .bamleon-cs__placeholder-kicker {
	display: inline-block;
	font-family: var(--bamleon-font-mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bamleon-text-3);
	margin: 4px 0 0;
}
.bamleon-cs__placeholder--filled .bamleon-cs__placeholder-title {
	font-family: var(--bamleon-font-body);
	font-size: var(--bamleon-text-sm);
	font-weight: 400;
	line-height: 1.55;
	color: var(--bamleon-text-2);
	max-width: 78ch;
	margin: 0;
}
.bamleon-cs__placeholder--filled .bamleon-cs__placeholder-filename {
	display: inline-block;
	font-family: var(--bamleon-font-mono);
	font-size: 10px;
	letter-spacing: 0.02em;
	color: var(--bamleon-text-3);
	background: rgba(0, 0, 0, 0.04);
	padding: 3px 8px;
	border-radius: 3px;
	margin: 0;
	align-self: flex-start;
}
.bamleon-cs__placeholder--filled .bamleon-cs__placeholder-caption {
	font-family: var(--bamleon-font-body);
	font-size: var(--bamleon-text-sm);
	color: var(--bamleon-text-3);
	font-style: italic;
	margin: 0;
}

body.show-placeholders .bamleon-cs__placeholder {
	display: flex !important;
	flex-direction: column !important;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 64px 32px;
	background: var(--bamleon-surface);
	border: 2px dashed var(--bamleon-border-2);
	border-radius: var(--bamleon-radius-lg);
	color: var(--bamleon-text-2);
	min-height: 320px;
	text-align: center;
	margin: 16px 0;
}
.bamleon-cs__placeholder--wide   { min-height: 240px; }
.bamleon-cs__placeholder--tall   { min-height: 480px; }
.bamleon-cs__placeholder--motion { min-height: 280px; }
.bamleon-cs__placeholder-kicker {
	font-family: var(--bamleon-font-mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bamleon-accent);
	margin: 0;
}
.bamleon-cs__placeholder-title {
	font-family: var(--bamleon-font-display);
	font-size: clamp(16px, 1.4vw, 20px);
	font-weight: 500;
	color: var(--bamleon-text);
	margin: 0;
	max-width: 56ch;
	line-height: 1.35;
}
.bamleon-cs__placeholder-filename {
	font-family: var(--bamleon-font-mono);
	font-size: var(--bamleon-text-xs);
	color: var(--bamleon-text-3);
	background: rgba(0, 0, 0, 0.04);
	padding: 4px 10px;
	border-radius: var(--bamleon-radius-sm);
	margin: 0;
	letter-spacing: 0.02em;
}
.bamleon-cs__placeholder-caption {
	font-family: var(--bamleon-font-body);
	font-size: var(--bamleon-text-sm);
	color: var(--bamleon-text-3);
	font-style: italic;
	margin: 0;
	max-width: 48ch;
}
.bamleon-cs__placeholder-grid {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin: 16px 0;
}
@media (max-width: 800px) {
	.bamleon-cs__placeholder-grid { grid-template-columns: 1fr; }
}
.bamleon-cs__placeholder-pair {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin: 16px 0;
}
@media (max-width: 800px) {
	.bamleon-cs__placeholder-pair { grid-template-columns: 1fr; }
}

/* v2.1 placeholder upgrades — inner stage + structured caption ----------- */
.bamleon-cs__placeholder { margin: 32px 0; }
.bamleon-cs__placeholder--grid { min-height: 320px; }
.bamleon-cs__placeholder-stage {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	width: 100%;
	min-height: 220px;
	padding: 32px;
	background: linear-gradient(135deg, rgba(0,0,0,0.02), rgba(0,0,0,0.04));
	border-radius: var(--bamleon-radius-md);
}
.bamleon-cs__placeholder-icon {
	font-size: 32px;
	line-height: 1;
	color: var(--bamleon-text-3);
	opacity: 0.65;
}
.bamleon-cs__placeholder-caption {
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-style: normal;
	max-width: 64ch;
	margin: 16px auto 0;
	text-align: center;
}
.bamleon-cs__placeholder-desc {
	font-family: var(--bamleon-font-body);
	font-size: var(--bamleon-text-sm);
	color: var(--bamleon-text-2);
	line-height: 1.5;
}
.bamleon-cs__placeholder-cap {
	font-family: var(--bamleon-font-display);
	font-size: 14px;
	font-style: italic;
	color: var(--bamleon-text-2);
	margin-top: 4px;
}

/* Decision grid (Section 04 The Call) ------------------------------------ */
.bamleon-cs__decision-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin: 32px 0;
}
@media (max-width: 800px) { .bamleon-cs__decision-grid { grid-template-columns: 1fr; } }
.bamleon-cs__decision-tile {
	position: relative;
	padding: 28px 24px;
	border-radius: 14px;
	background: var(--bamleon-surface);
	border: 1px solid var(--bamleon-border);
	display: flex;
	flex-direction: column;
	gap: 8px;
	transition: transform 220ms ease, box-shadow 220ms ease, opacity 220ms ease;
}
.bamleon-cs__decision-tile--killed {
	opacity: 0.5;
	filter: grayscale(0.4);
}
.bamleon-cs__decision-tile--killed:hover { opacity: 0.75; }
.bamleon-cs__decision-tile--shipped {
	background: linear-gradient(135deg, #ffffff, #f7faff);
	border-color: rgba(54, 114, 255, 0.35);
	box-shadow:
		0 2px 6px rgba(20, 20, 30, 0.05),
		0 18px 36px -14px rgba(54, 114, 255, 0.25),
		inset 0 1px 0 rgba(255,255,255,0.9);
}
.bamleon-cs__decision-tile-kicker {
	font-family: var(--bamleon-font-mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bamleon-text-3);
}
.bamleon-cs__decision-tile-name {
	font-family: var(--bamleon-font-display);
	font-size: clamp(20px, 1.6vw, 24px);
	font-weight: 600;
	letter-spacing: -0.015em;
	color: var(--bamleon-text);
}
.bamleon-cs__decision-tile-cost {
	font-family: var(--bamleon-font-body);
	font-size: var(--bamleon-text-sm);
	color: var(--bamleon-text-2);
	line-height: 1.45;
}
.bamleon-cs__decision-tile-status {
	margin-top: 8px;
	font-family: var(--bamleon-font-mono);
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 700;
}
.bamleon-cs__decision-tile--killed  .bamleon-cs__decision-tile-status { color: var(--bamleon-text-3); }
.bamleon-cs__decision-tile--shipped .bamleon-cs__decision-tile-status { color: #3672ff; }

/* Tables — thesis stack, roadmap, performance ---------------------------- */
.bamleon-cs__stack-table,
.bamleon-cs__roadmap-table {
	width: 100%;
	margin: 32px 0;
	border-collapse: collapse;
	font-family: var(--bamleon-font-body);
	font-size: 15px;
	color: var(--bamleon-text);
}
.bamleon-cs__stack-table th,
.bamleon-cs__roadmap-table th {
	text-align: left;
	padding: 14px 16px;
	font-family: var(--bamleon-font-mono);
	font-size: var(--bamleon-text-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bamleon-text-3);
	font-weight: 600;
	border-bottom: 1px solid var(--bamleon-border);
}
.bamleon-cs__stack-table td,
.bamleon-cs__roadmap-table td {
	padding: 18px 16px;
	border-bottom: 1px solid var(--bamleon-border);
	vertical-align: top;
	line-height: 1.55;
}
.bamleon-cs__stack-table tr:last-child td,
.bamleon-cs__roadmap-table tr:last-child td { border-bottom: 0; }
.bamleon-cs__stack-table td:first-child,
.bamleon-cs__roadmap-table td:first-child {
	white-space: nowrap;
	font-weight: 600;
}

/* Rationale bulleted list (S04 + S06) ------------------------------------ */
.bamleon-cs__rationale-list {
	list-style: none;
	padding: 0;
	margin: 24px 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.bamleon-cs__rationale-list li {
	padding: 18px 22px;
	background: var(--bamleon-surface);
	border: 1px solid var(--bamleon-border);
	border-left: 3px solid var(--bamleon-accent);
	border-radius: 0 10px 10px 0;
	line-height: 1.55;
	font-size: 15px;
	color: var(--bamleon-text-2);
}
.bamleon-cs__rationale-list li strong {
	color: var(--bamleon-text);
	font-weight: 600;
}

/* Section 09 Why-blocks -------------------------------------------------- */
.bamleon-cs__why-block {
	margin: 32px 0;
	padding: 0;
}
.bamleon-cs__why-block .bamleon-cs__subsection-head {
	font-family: var(--bamleon-font-mono);
	font-size: var(--bamleon-text-xs);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bamleon-text-3);
	margin: 0 0 12px;
}
.bamleon-cs__why-block p {
	font-size: 17px;
	line-height: 1.7;
	color: var(--bamleon-text-2);
	margin: 0 0 16px;
}
.bamleon-cs__why-block p:last-child { margin-bottom: 0; }
.bamleon-cs__why-block--demo { margin-top: 48px; }
.bamleon-cs__plate-label {
	display: block;
	padding: 12px 14px 14px;
	font-family: var(--bamleon-font-mono);
	font-size: var(--bamleon-text-xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bamleon-text-2);
	border-top: 1px solid var(--bamleon-border);
	background: var(--bamleon-surface);
}

/* When a media-grid contains plates, switch from CSS grid (which stretches
 * all row items to the tallest height — and our overflow:hidden then crops
 * the rest) to FLEX with flex-start alignment. Each tile is its natural
 * image height, ragged-bottom rows. */
.bamleon-cs__media-grid:has(> .bamleon-cs__plate),
.bamleon-cs__media-grid:has(> a.bamleon-cs__plate),
.bamleon-cs__media-grid:has(> figure.bamleon-cs__plate) {
	display: flex !important;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 14px;
	grid-template-columns: none !important;
	grid-auto-rows: auto !important;
}
.bamleon-cs__media-grid--3:has(> .bamleon-cs__plate) > .bamleon-cs__plate {
	flex: 0 0 calc((100% - 28px) / 3);
	max-width: calc((100% - 28px) / 3);
}
.bamleon-cs__media-grid--4:has(> .bamleon-cs__plate) > .bamleon-cs__plate {
	flex: 0 0 calc((100% - 42px) / 4);
	max-width: calc((100% - 42px) / 4);
}
.bamleon-cs__media-grid--2:has(> .bamleon-cs__plate) > .bamleon-cs__plate {
	flex: 0 0 calc((100% - 14px) / 2);
	max-width: calc((100% - 14px) / 2);
}
@media (max-width: 1100px) {
	.bamleon-cs__media-grid--4:has(> .bamleon-cs__plate) > .bamleon-cs__plate,
	.bamleon-cs__media-grid--3:has(> .bamleon-cs__plate) > .bamleon-cs__plate {
		flex: 0 0 calc((100% - 14px) / 2);
		max-width: calc((100% - 14px) / 2);
	}
}
@media (max-width: 600px) {
	.bamleon-cs__media-grid--4:has(> .bamleon-cs__plate) > .bamleon-cs__plate,
	.bamleon-cs__media-grid--3:has(> .bamleon-cs__plate) > .bamleon-cs__plate,
	.bamleon-cs__media-grid--2:has(> .bamleon-cs__plate) > .bamleon-cs__plate {
		flex: 0 0 100%;
		max-width: 100%;
	}
}

/* ── PLATE — SCROLL VARIANT ──────────────────────────────────────────────
 * Uniform tile size with hover-scroll. Each tile is a 4:3 window into a
 * tall webpage screenshot. Default state shows the top of the page; hover
 * scrolls the image upward over 7 seconds to reveal the bottom; mouseout
 * snaps back. Same pattern as the Jaywalk wireframes.
 *
 * High-specificity + !important ensures these rules win over Bricks's
 * .brxe-block { display: flex } and .brxe-image defaults that compete
 * at the same (0,1,0) specificity. The JS scroll helper sets
 * --scroll-distance per-container for pixel-precise travel; the CSS
 * fallback (-40%) kicks in when JS hasn't measured yet. */
.bamleon-cs__plate--scroll {
	height: auto !important;
}
.bamleon-cs__plate--scroll > .bamleon-cs__plate-window {
	display: block !important;
	position: relative !important;
	width: 100% !important;
	aspect-ratio: 4 / 3 !important;
	overflow: hidden !important;
}
/* Image inside scroll plate: full-width, natural-height, hover-scrolls. */
.bamleon-cs__plate--scroll > .bamleon-cs__plate-window > img,
.bamleon-cs__plate--scroll > .bamleon-cs__plate-window > img.brxe-image {
	display: block !important;
	width: 100% !important;
	height: auto !important;
	max-height: none !important;
	object-fit: unset !important;
	transform: translateY(0);
	transition: transform 600ms ease-out;
	will-change: transform;
}
/* Hover: use JS-set --scroll-distance if available, else fall back to
   -40% which reveals more of a typical full-page screenshot. */
.bamleon-cs__plate--scroll > .bamleon-cs__plate-window:hover > img,
.bamleon-cs__plate--scroll > .bamleon-cs__plate-window:hover > img.brxe-image {
	transform: translateY(var(--scroll-distance, -40%)) !important;
	transition: transform 13s linear !important;
}

/* ── BRAND GRID (Style System) ────────────────────────────────────────────
 * True masonry via CSS columns: each tile takes its natural height, no
 * forced row alignment. Handles mixed aspect ratios (landscape + portrait)
 * without dead space. Used for Jaywalk's Kingsland brand showcase. */
.bamleon-cs__media-grid--brand {
	display: block;
	columns: 2;
	column-gap: 6px;
	margin: 32px 0;
}
.bamleon-cs__brand-tile {
	margin: 0 0 6px;
	background: var(--bamleon-surface-2);
	border: 1px solid rgba(255,255,255,0.04);
	border-radius: 4px;
	overflow: hidden;
	display: block;
	break-inside: avoid;
}
.bamleon-light .bamleon-cs__brand-tile { border-color: rgba(0,0,0,0.06); }
.bamleon-cs__brand-tile:last-child { margin-bottom: 0; }
.bamleon-cs__brand-tile img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
}
/* Brand tiles also appear inside regular media grids (--3 product shots).
 * In a grid context, override the column-break + margin-bottom rules so
 * the grid gap handles spacing. */
.bamleon-cs__media-grid:not(.bamleon-cs__media-grid--brand) .bamleon-cs__brand-tile {
	margin-bottom: 0;
	break-inside: auto;
}
@media (max-width: 700px) {
	.bamleon-cs__media-grid--brand { columns: 1; }
}
.bamleon-cs__media-grid--4 { grid-template-columns: repeat(4, 1fr); gap: 14px; }


/* ── Category motion — 5-frame crossfade demo (Sidemoney Section 02) ───
   A single full-width tile that cycles through 5 lifestyle shots on a
   15s loop. Each frame is an absolutely-positioned <img> sharing the
   same @keyframes; staggered animation-delay (-3s steps) puts each
   image at a different phase, so the stack runs as a perpetual
   crossfade. Pauses on hover; respects prefers-reduced-motion. */
.bamleon-cs__cat-motion {
	margin: 32px 0 64px;
}
.bamleon-cs__cat-motion-stack {
	position: relative;
	width: 100%;
	aspect-ratio: 21 / 9;
	border-radius: var(--bamleon-radius-lg);
	overflow: hidden;
	background: var(--bamleon-surface-2);
	border: 1px solid var(--bamleon-border);
}
@keyframes bamleon-cat-cycle {
	0%   { opacity: 0; }
	7%   { opacity: 1; }
	20%  { opacity: 1; }
	27%  { opacity: 0; }
	100% { opacity: 0; }
}
.bamleon-cs__cat-motion-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	opacity: 0;
	animation: bamleon-cat-cycle 15s ease-in-out infinite;
}
.bamleon-cs__cat-motion-img:nth-of-type(1) { animation-delay: 0s; }
.bamleon-cs__cat-motion-img:nth-of-type(2) { animation-delay: -3s; }
.bamleon-cs__cat-motion-img:nth-of-type(3) { animation-delay: -6s; }
.bamleon-cs__cat-motion-img:nth-of-type(4) { animation-delay: -9s; }
.bamleon-cs__cat-motion-img:nth-of-type(5) { animation-delay: -12s; }
.bamleon-cs__cat-motion-stack:hover .bamleon-cs__cat-motion-img {
	animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
	.bamleon-cs__cat-motion-img {
		animation: none;
	}
	.bamleon-cs__cat-motion-img:first-of-type {
		opacity: 1;
	}
}
.bamleon-cs__cat-motion-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 48px 56px;
	background: linear-gradient(to top, rgba(15,15,18,0.6) 0%, rgba(15,15,18,0.1) 55%, rgba(15,15,18,0) 100%);
	color: #f5f1e8;
	z-index: 2;
	pointer-events: none;
}
.bamleon-cs__cat-motion-kicker {
	font-family: var(--bamleon-font-mono);
	font-size: 12px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	opacity: 0.88;
	margin-bottom: 14px;
}
.bamleon-cs__cat-motion-title {
	font-family: var(--bamleon-font-display);
	font-size: clamp(42px, 5vw, 72px);
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1;
	margin-bottom: 22px;
}
.bamleon-cs__cat-motion-cta {
	font-family: var(--bamleon-font-mono);
	font-size: 12px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	font-weight: 600;
}
.bamleon-cs__cat-motion-dots {
	position: absolute;
	right: 32px;
	top: 32px;
	display: flex;
	gap: 8px;
	z-index: 3;
}
.bamleon-cs__cat-motion-dots span {
	display: block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(245, 241, 232, 0.35);
	animation: bamleon-cat-dot 15s ease-in-out infinite;
}
@keyframes bamleon-cat-dot {
	0%, 27%, 100% { background: rgba(245, 241, 232, 0.35); transform: scale(1); }
	10%, 20%      { background: rgba(245, 241, 232, 1);    transform: scale(1.15); }
}
.bamleon-cs__cat-motion-dots span:nth-child(1) { animation-delay: 0s; }
.bamleon-cs__cat-motion-dots span:nth-child(2) { animation-delay: -3s; }
.bamleon-cs__cat-motion-dots span:nth-child(3) { animation-delay: -6s; }
.bamleon-cs__cat-motion-dots span:nth-child(4) { animation-delay: -9s; }
.bamleon-cs__cat-motion-dots span:nth-child(5) { animation-delay: -12s; }
.bamleon-cs__cat-motion-stack:hover .bamleon-cs__cat-motion-dots span {
	animation-play-state: paused;
}

.bamleon-cs__cat-motion-spec {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-top: 24px;
	padding: 24px 0 0;
	border-top: 1px solid var(--bamleon-border);
}
.bamleon-cs__cat-motion-spec-item {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.bamleon-cs__cat-motion-spec-label {
	font-family: var(--bamleon-font-mono);
	font-size: var(--bamleon-text-xs);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--bamleon-text-3);
}
.bamleon-cs__cat-motion-spec-value {
	font-family: var(--bamleon-font-display);
	font-size: var(--bamleon-text-base);
	font-weight: 500;
	color: var(--bamleon-text);
	letter-spacing: var(--bamleon-tracking-normal);
}
@media (max-width: 800px) {
	.bamleon-cs__cat-motion-stack {
		aspect-ratio: 4 / 3;
	}
	.bamleon-cs__cat-motion-overlay {
		padding: 32px 28px;
	}
	.bamleon-cs__cat-motion-spec {
		grid-template-columns: 1fr;
		gap: 16px;
	}
}


.bamleon-cs__media-grid--5 { grid-template-columns: repeat(5, 1fr); gap: 14px; }
@media (max-width: 1100px) {
	.bamleon-cs__media-grid--5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
	.bamleon-cs__media-grid--5 { grid-template-columns: repeat(2, 1fr); }
}


/* ── Live category tiles — 5 portrait 9:16 frames with Ken Burns motion ──
   Mirrors sidemoney.co's category presentation: each tile is a single
   editorial photograph with overlay copy. Imagery moves via slow zoom +
   pan loop (14s) — staggered animation-delay per tile so they don't sync.
   Pauses on hover; honors prefers-reduced-motion. */
.bamleon-cs__cat-tiles {
	display: grid !important;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	width: 100%;
	gap: 14px;
	margin: 32px 0 64px;
}
.bamleon-cs__cat-tiles > * { min-width: 0; }
.bamleon-cs__cat-tile {
	position: relative;
	display: block !important;
	width: 100%;
	min-width: 0;
	aspect-ratio: 9 / 16;
	min-height: 320px;
	overflow: hidden;
	border-radius: 10px;
	background: var(--bamleon-surface-2);
	border: 1px solid var(--bamleon-border);
	color: inherit;
	text-decoration: none;
	box-shadow: 0 1px 2px rgba(15,15,18,0.04),
	            0 18px 40px -18px rgba(15,15,18,0.22);
	transition: transform 320ms var(--bamleon-ease-out),
	            box-shadow 320ms var(--bamleon-ease-out);
}
.bamleon-cs__cat-tile:hover {
	transform: translateY(-3px);
	box-shadow: 0 1px 2px rgba(15,15,18,0.04),
	            0 24px 56px -20px rgba(15,15,18,0.32);
}
.bamleon-cs__cat-tile-frame {
	position: absolute;
	inset: 0;
	display: block;
	overflow: hidden;
}
/* Smooth Ken Burns zoom + pan on each tile image. Each tile gets a
   staggered delay so tiles don't animate in sync. Pauses on hover;
   respects prefers-reduced-motion. */
.bamleon-cs__cat-tile-frame img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	animation: catTileKenBurns 14s ease-in-out infinite alternate;
}
.bamleon-cs__cat-tile:nth-child(1) .bamleon-cs__cat-tile-frame img { animation-delay: 0s; }
.bamleon-cs__cat-tile:nth-child(2) .bamleon-cs__cat-tile-frame img { animation-delay: -2.8s; }
.bamleon-cs__cat-tile:nth-child(3) .bamleon-cs__cat-tile-frame img { animation-delay: -5.6s; }
.bamleon-cs__cat-tile:nth-child(4) .bamleon-cs__cat-tile-frame img { animation-delay: -8.4s; }
.bamleon-cs__cat-tile:nth-child(5) .bamleon-cs__cat-tile-frame img { animation-delay: -11.2s; }
.bamleon-cs__cat-tile:hover .bamleon-cs__cat-tile-frame img {
	animation-play-state: paused;
}
@keyframes catTileKenBurns {
	0%   { transform: scale(1)    translate(0, 0); }
	100% { transform: scale(1.08) translate(-1%, -2%); }
}
@media (prefers-reduced-motion: reduce) {
	.bamleon-cs__cat-tile-frame img { animation: none; }
}
.bamleon-cs__cat-tile-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 24px 22px;
	background: linear-gradient(to top, rgba(15,15,18,0.65) 0%, rgba(15,15,18,0.1) 50%, rgba(15,15,18,0) 100%);
	color: #f5f1e8;
	z-index: 2;
	pointer-events: none;
}
.bamleon-cs__cat-tile-kicker {
	font-family: var(--bamleon-font-mono);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	opacity: 0.85;
	margin-bottom: 10px;
}
.bamleon-cs__cat-tile-title {
	font-family: var(--bamleon-font-display);
	font-size: clamp(20px, 1.6vw, 26px);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: var(--bamleon-leading-tight);
	margin-bottom: 12px;
}
.bamleon-cs__cat-tile-cta {
	font-family: var(--bamleon-font-mono);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}
@media (max-width: 1100px) {
	.bamleon-cs__cat-tiles { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
	.bamleon-cs__cat-tiles { grid-template-columns: repeat(2, 1fr); }
}

/* ── Sidemoney · row kicker (WIREFRAMES / LIVE labels in section 03) ──── */
.bamleon-cs__row-kicker {
	font-family: var(--bamleon-font-mono);
	font-size: 10px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--bamleon-text-3);
	margin: 40px 0 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--bamleon-border);
}
.bamleon-cs__row-kicker--live {
	margin-top: 56px;
	color: var(--bamleon-text-2);
}

/* Wireframe plate variant — no scroll-on-hover (SVGs are full content) */
.bamleon-cs__plate--wf .bamleon-cs__plate-window {
	background: var(--bamleon-paper);
}
.bamleon-cs__plate--wf .bamleon-cs__plate-window img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* ── Sidemoney · The Call (decision matrix) ──────────────────────────── */
.bamleon-cs__section--call .bamleon-cs__decision-img,
.bamleon-cs__section--call .bamleon-cs__decision-img img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--bamleon-radius-md);
	margin: 32px 0;
	background: #1a1a1a;
}

/* ── Sidemoney · The System (design board) ───────────────────────────── */
.bamleon-cs__section--system .bamleon-cs__system-img,
.bamleon-cs__section--system .bamleon-cs__system-img img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--bamleon-radius-md);
	margin: 32px 0;
	background: #1a1a1a;
}

/* ── Shared: The Call section decision-matrix image + system map + process artifact ── */
.bamleon-cs__section--call .bamleon-cs__decision-img,
.bamleon-cs__section--call .bamleon-cs__decision-img img,
.bamleon-cs__system-map-img,
.bamleon-cs__system-map-img img,
.bamleon-cs__process-img,
.bamleon-cs__process-img img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--bamleon-radius-md);
	margin: 24px 0;
	background: transparent;
}
.bamleon-cs__system-map-img {
	background: #f6f6f6;
	border: 1px solid var(--bamleon-border);
}
.bamleon-cs__section--call .bamleon-cs__decision-img,
.bamleon-cs__process-img {
	background: #1a1a1a;
}

/* ── Sidemoney · Page by Page · funnel slider ─────────────────────────────
   Five plates in a row showing home → category → product → cart → checkout.
   Each plate is a 9:16 portrait window with the full-page screenshot inside.
   Hovering scrolls the tall image from top to bottom over 6s. */
.bamleon-cs__funnel-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 16px;
	margin: 40px 0 16px;
}
.bamleon-cs__plate--funnel {
	display: flex;
	flex-direction: column;
	gap: 12px;
	cursor: default;
}
.bamleon-cs__plate--funnel .bamleon-cs__plate-window {
	aspect-ratio: 9 / 16;
	overflow: hidden;
	background: #f6f6f6;
	border: 1px solid var(--bamleon-border);
	border-radius: 6px;
}
.bamleon-cs__plate--funnel .bamleon-cs__plate-window img {
	display: block;
	width: 100%;
	height: auto;
	max-height: none;
	transition: transform 0.45s cubic-bezier(.32,.72,0,1);
}
/* Override the global plate--scroll math for these specifically tall pages
   (2880×8400 native — 1:2.92 ratio). -40% of image height aligns the bottom
   of the image with the bottom of the 9:16 container at hover end. */
.bamleon-cs__plate--funnel.bamleon-cs__plate--scroll:hover .bamleon-cs__plate-window img {
	transform: translateY(-40%);
	transition: transform 12s linear;
}
/* LGC full landing page is very tall — slow the hover-scroll so the whole
   page is actually readable on the way down (overrides the global 7s). */
.bamleon-cs__article--lgc .bamleon-cs__plate--scroll > .bamleon-cs__plate-window:hover > img,
.bamleon-cs__article--lgc .bamleon-cs__plate--scroll > .bamleon-cs__plate-window:hover > img.brxe-image {
	transition: transform 16s linear !important;
}
.bamleon-cs__plate-cap--funnel {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 0;
	border: none;
	margin: 0;
}
.bamleon-cs__plate-cap-label {
	font-family: var(--bamleon-font-display, var(--bamleon-font-sans));
	font-size: 14px;
	font-weight: 600;
	letter-spacing: var(--bamleon-tracking-normal);
	color: var(--bamleon-text);
}
.bamleon-cs__plate-cap-note {
	font-family: var(--bamleon-font-mono);
	font-size: 10px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bamleon-text-3);
}
@media (max-width: 1100px) {
	.bamleon-cs__funnel-grid { grid-template-columns: repeat(3, 1fr); }
	.bamleon-cs__plate--funnel:nth-child(4),
	.bamleon-cs__plate--funnel:nth-child(5) { grid-column: span 1; }
}
@media (max-width: 700px) {
	.bamleon-cs__funnel-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}
@media (max-width: 480px) {
	.bamleon-cs__funnel-grid { grid-template-columns: 1fr; }
}

/* ── Phone modifier — 9:16 plate windows inside any media-grid ─────────────
   Sidemoney section 02 category cards. Used wherever a row of portrait
   phone-style screen captures sits inside a media-grid. */
.bamleon-cs__media-grid--phone .bamleon-cs__plate-window,
.bamleon-cs__media-grid--phone .bamleon-cs__plate-window--empty,
.bamleon-cs__media-grid--phone .bamleon-cs__plate-window--filled {
	aspect-ratio: 9 / 16 !important;
}
.bamleon-cs__media-grid--phone .bamleon-cs__plate-window img,
.bamleon-cs__media-grid--phone .bamleon-cs__plate-window video {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}
@media (max-width: 900px) {
	.bamleon-cs__media-grid--phone { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 520px) {
	.bamleon-cs__media-grid--phone { grid-template-columns: 1fr !important; }
}


/* ── Placeholder block — reserved slot for in-progress content ─────────
   Dashed border + pulsing accent kicker + chip row of items. Marks a
   section that's intentionally pending rather than missing. */
.bamleon-cs__placeholder {
	margin: 32px 0 48px;
	padding: 56px 48px;
	border: 1.5px dashed var(--bamleon-border);
	border-radius: 14px;
	background: var(--bamleon-surface);
	display: flex;
	flex-direction: column;
	gap: 14px;
	align-items: flex-start;
}
.bamleon-cs__placeholder-kicker {
	font-family: var(--bamleon-font-mono);
	font-size: var(--bamleon-text-xs);
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--bamleon-accent);
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
.bamleon-cs__placeholder-kicker::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--bamleon-accent);
	animation: bamleon-placeholder-pulse 1.8s ease-in-out infinite;
}
@keyframes bamleon-placeholder-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: 0.4; transform: scale(0.75); }
}
.bamleon-cs__placeholder-title {
	font-family: var(--bamleon-font-display);
	font-size: clamp(36px, 4vw, 56px);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1;
	margin: 4px 0 8px;
	color: var(--bamleon-text);
}
.bamleon-cs__placeholder-desc {
	font-family: var(--bamleon-font-body);
	font-size: var(--bamleon-text-base);
	line-height: 1.55;
	color: var(--bamleon-text-2);
	max-width: 60ch;
	margin: 0 0 12px;
}
.bamleon-cs__placeholder-items {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 8px;
}
.bamleon-cs__placeholder-items span {
	display: inline-flex;
	align-items: center;
	padding: 8px 14px;
	font-family: var(--bamleon-font-mono);
	font-size: var(--bamleon-text-xs);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--bamleon-text-2);
	background: var(--bamleon-surface-2);
	border: 1px solid var(--bamleon-border);
	border-radius: var(--bamleon-radius-pill);
}
@media (max-width: 700px) {
	.bamleon-cs__placeholder { padding: 36px 28px; }
}


.bamleon-cs__media-grid .bamleon-cs__media {
	margin: 0;
	min-height: 240px;
	aspect-ratio: 4 / 3;
}

/* ── Browser-window tile ─────────────────────────────────────────────────
 * Used inside multi-up grids to make page mockups read as actual websites.
 * Faux browser chrome on top (traffic lights + URL bar), web-ratio frame
 * underneath. The img/svg fills the frame and crops from the top so each
 * tile shows above-the-fold at consistent proportions. */
.bamleon-cs__browser-tile {
	display: flex;
	flex-direction: column;
	background: #1a1a1a;
	border: 1px solid var(--bamleon-border);
	border-radius: var(--bamleon-radius-md);
	overflow: hidden;
	/* Hard clip — hover-pan transforms on the inner SVG/img can sub-pixel
	   leak past the rounded card corner. Defense-in-depth. */
	clip-path: inset(0 round var(--bamleon-radius-md, 10px));
	isolation: isolate;
	aspect-ratio: 16 / 10;
	min-height: 0;
	position: relative;
	transition: transform 220ms var(--bamleon-ease-out), border-color 220ms ease;
}
/* Page-screenshot variant — fits its image natively. Width set by parent;
 * height is whatever the image is. Equal widths in a row, ragged-bottom. */
.bamleon-cs__browser-tile--page {
	aspect-ratio: auto;
	height: auto;
	align-self: flex-start;
	text-decoration: none;
	color: inherit;
}
.bamleon-cs__browser-tile--page .bamleon-cs__browser-canvas {
	flex: none;
	background: #f5f0e8;
	height: auto;
}
.bamleon-cs__browser-tile--page .bamleon-cs__browser-canvas img {
	width: 100%;
	height: auto;
	object-fit: contain;
	object-position: top center;
	display: block;
}

/* Hero browser-tile — full-width stacked above the 4-up grid in section 05.
 * Animated GIF fills the canvas at its natural aspect. */
.bamleon-cs__browser-tile--hero {
	aspect-ratio: auto;
	height: auto;
	margin: 24px 0;
}
.bamleon-cs__browser-tile--hero .bamleon-cs__browser-canvas {
	flex: none;
	background: #080808;
	height: auto;
}
.bamleon-cs__browser-tile--hero .bamleon-cs__browser-canvas img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: contain;
}

/* CSS-only lightbox: hidden by default, revealed when its #id is targeted.
 * Click the dark background or the × to close (link to a non-target hash).
 * !important on display because Bricks's .brxe-block { display: block }
 * loads later in the cascade at the same specificity and would otherwise
 * leave every lightbox stacked on top of the page. */
.bamleon-cs__lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: rgba(8, 8, 10, 0.94);
	display: none !important;
	overflow: hidden;
	padding: 56px 32px 80px;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}
.bamleon-cs__lightbox:target {
	display: flex !important;
	align-items: center;
	justify-content: center;
}
.bamleon-cs__lightbox-bg {
	position: absolute;
	inset: 0;
	z-index: 1;
	cursor: zoom-out;
}
/* Default lightbox image: viewport-fitted, no scroll. */
.bamleon-cs__lightbox img {
	position: relative;
	z-index: 2;
	display: block;
	margin: 0 auto;
	max-width: min(1200px, 100%);
	max-height: calc(100vh - 136px);
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 6px;
	box-shadow: 0 24px 80px rgba(0,0,0,0.5);
}
/* ── --scroll variant retained for markup compatibility, but behaves like
 * the default: image is viewport-fitted, lightbox itself never scrolls.
 * Per project rule: lightboxes never scroll. Full-bleed screenshots are
 * scaled down with object-fit:contain instead of overflowing. */
.bamleon-cs__lightbox--scroll:target {
	display: flex !important;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.bamleon-cs__lightbox--scroll .bamleon-cs__lightbox-bg {
	position: absolute;
}
.bamleon-cs__lightbox--scroll img {
	max-width: min(1200px, 100%);
	max-height: calc(100vh - 136px);
	width: auto;
	height: auto;
	object-fit: contain;
}
/* Close button — pinned top-right, solid white pill with × icon + "Close"
 * label. Designed to be the first thing the eye lands on against the
 * dimmed overlay. The original markup is <a>&times;</a>; we hide that raw
 * × via font-size:0 on the link, then render both the styled × circle and
 * the "Close" word via pseudo-elements. Old markup keeps working. */
.bamleon-cs__lightbox-close {
	position: fixed;
	top: 24px;
	right: 32px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-width: 56px;
	height: 48px;
	padding: 0 18px 0 14px;
	border-radius: 999px;
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	color: #0a0a0a;
	text-decoration: none;
	font-family: var(--bamleon-font-mono, "JetBrains Mono", monospace);
	font-size: 0; /* hides the raw &times; from the link's text node */
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: 1;
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4),
	            0 0 0 1px rgba(255, 255, 255, 0.06);
	transition: background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.bamleon-cs__lightbox-close::before {
	content: "\00d7";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #0a0a0a;
	color: #ffffff;
	font-family: var(--bamleon-font-display, system-ui, sans-serif);
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
}
.bamleon-cs__lightbox-close::after {
	content: "Close";
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
}
.bamleon-cs__lightbox-close:hover {
	background: var(--bamleon-accent, #5B8DBE);
	color: #ffffff;
	transform: scale(1.04);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}
.bamleon-cs__lightbox-close:hover::before {
	background: #ffffff;
	color: #0a0a0a;
}
.bamleon-cs__lightbox-close:focus-visible {
	outline: 3px solid var(--bamleon-accent, #5B8DBE);
	outline-offset: 3px;
}
.bamleon-cs__browser-tile:hover {
	transform: translateY(-2px);
	border-color: var(--bamleon-text-3);
}
.bamleon-cs__browser-bar {
	flex-shrink: 0;
	height: 22px;
	background: #232323;
	border-bottom: 1px solid #0e0e0e;
	display: flex;
	align-items: center;
	padding: 0 10px;
	gap: 5px;
}
.bamleon-cs__browser-bar .dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	display: inline-block;
	background: #4a4a4a;
}
.bamleon-cs__browser-bar .dot:nth-child(1) { background: #ed6a5e; }
.bamleon-cs__browser-bar .dot:nth-child(2) { background: #f4bf4f; }
.bamleon-cs__browser-bar .dot:nth-child(3) { background: #61c454; }
.bamleon-cs__browser-bar .url {
	flex: 1;
	margin-left: 10px;
	background: #1a1a1a;
	border-radius: var(--bamleon-radius-sm);
	padding: 2px 8px;
	font-family: var(--bamleon-font-mono);
	font-size: 9px;
	color: #9a9a9a;
	letter-spacing: 0.02em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.bamleon-cs__browser-canvas {
	flex: 1;
	min-height: 0;
	width: 100%;
	overflow: hidden;
	position: relative;
	background: #f5f0e8;
}
.bamleon-cs__browser-canvas img,
.bamleon-cs__browser-canvas svg {
	width: 100%;
	height: auto;
	display: block;
}

/* ── Wireframe tiles: hover-scroll the wire vertically to show the full
 * page anatomy. Scoped to .bamleon-cs__media-grid--3 (where the wires
 * live) so the page tiles below aren't affected. The SVG is 600x1100
 * (1.833 W:H) inside a 16:10 tile (1.6 W:H), so it overflows ~66% on
 * the Y axis — hover translates it up to reveal the bottom over 6s,
 * snaps back on mouse-leave. */
.bamleon-cs__media-grid--3 .bamleon-cs__browser-canvas svg {
	transition: transform 0.45s cubic-bezier(.32,.72,0,1);
}
.bamleon-cs__media-grid--3 .bamleon-cs__browser-tile:hover .bamleon-cs__browser-canvas svg {
	transform: translateY(-66%);
	transition: transform 12s linear;
}
/* Tile labels sit BELOW the browser frame, not overlaid on the image.
 * The browser-tile flex column already places this as the third child
 * (bar → canvas → label). */
.bamleon-cs__browser-label {
	display: block;
	margin-top: 10px;
	padding: 0;
	background: transparent;
	color: var(--bamleon-text-3);
	font-family: var(--bamleon-font-mono);
	font-size: var(--bamleon-text-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: center;
}
.bamleon-cs__media-grid--5 .bamleon-cs__media,
.bamleon-cs__media-grid--4 .bamleon-cs__media { display: contents; }

/* 4-up + 5-up Pages grids use flex (not grid) so each browser-tile takes
 * its image's natural height. Equal widths, ragged-bottom heights. */
.bamleon-cs__media-grid--5,
.bamleon-cs__media-grid--4 {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 14px;
	grid-template-columns: none;
}
.bamleon-cs__media-grid--5 > .bamleon-cs__browser-tile,
.bamleon-cs__media-grid--5 .bamleon-cs__media > .bamleon-cs__browser-tile {
	flex: 1 1 0;
	min-width: 0;
}
.bamleon-cs__media-grid--4 > .bamleon-cs__browser-tile,
.bamleon-cs__media-grid--4 .bamleon-cs__media > .bamleon-cs__browser-tile {
	flex: 1 1 0;
	min-width: 0;
}
@media (max-width: 1100px) {
	.bamleon-cs__media-grid--5 > .bamleon-cs__browser-tile,
	.bamleon-cs__media-grid--5 .bamleon-cs__media > .bamleon-cs__browser-tile {
		flex: 1 1 calc(33.333% - 14px);
	}
	.bamleon-cs__media-grid--4 > .bamleon-cs__browser-tile,
	.bamleon-cs__media-grid--4 .bamleon-cs__media > .bamleon-cs__browser-tile {
		flex: 1 1 calc(50% - 14px);
	}
}
@media (max-width: 600px) {
	.bamleon-cs__media-grid--5 > .bamleon-cs__browser-tile,
	.bamleon-cs__media-grid--5 .bamleon-cs__media > .bamleon-cs__browser-tile,
	.bamleon-cs__media-grid--4 > .bamleon-cs__browser-tile,
	.bamleon-cs__media-grid--4 .bamleon-cs__media > .bamleon-cs__browser-tile {
		flex: 1 1 calc(50% - 14px);
	}
}

/* ── Live admin-demo iframe + caption pair ─────────────────────────────────
 * Caption sits BELOW the frame (not overlaid) so the screenshot stays clean.
 * Wrapper is a self-contained block — explicitly opts OUT of the
 * .bamleon-cs__media-grid .bamleon-cs__media min-height + aspect-ratio rules
 * (which were forcing a 4/3 box around iframes and leaving huge whitespace). */
.bamleon-cs__media-grid .bamleon-cs__media.bamleon-cs__media--iframe,
.bamleon-cs__media.bamleon-cs__media--iframe {
	position: relative;
	display: block !important;
	background: transparent;
	aspect-ratio: auto !important;
	box-shadow: none;
	border: 0;
	margin: 0;
	min-height: 0 !important;
	padding: 0;
	overflow: visible;
	text-transform: none;
	font-family: inherit;
	color: inherit;
	letter-spacing: 0;
	place-items: stretch;
}
.bamleon-cs__media--iframe .bamleon-cs__iframe {
	width: 100%;
	height: 720px;
	border: 0;
	display: block;
	background: #fafafa;
	box-shadow: none;
	border-radius: var(--bamleon-radius-lg);
	aspect-ratio: auto;
}
.bamleon-cs__media--iframe.bamleon-cs__media--tall .bamleon-cs__iframe { height: 820px; }
.bamleon-cs__media--iframe.bamleon-cs__media--tall .bamleon-cs__iframe { aspect-ratio: 16 / 9; }
.bamleon-cs__media-caption {
	display: block;
	margin: 24px auto 0;
	padding: 0;
	background: transparent;
	font-family: var(--bamleon-font-display);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.55;
	letter-spacing: 0;
	text-transform: none;
	color: var(--bamleon-text-2);
	width: 100%;
	max-width: none;
	text-align: center;
}
.bamleon-cs__media-caption strong {
	font-weight: 600;
	color: var(--bamleon-text);
}
.bamleon-cs__media-caption em {
	font-style: italic;
	color: var(--bamleon-text);
}

/* ── Therum-specific hero media — embed a live 1.8.0 dashboard iframe so the
 * hero IS the product, not a screenshot of it. Falls back to the SVG if JS
 * is off / iframe is sandboxed. */
.bamleon-cs__hero-media--therum {
	background: #0a0a0e;
	position: relative;
	overflow: hidden;
	border-radius: var(--bamleon-radius-lg);
}
.bamleon-cs__hero-media--therum:not(.bamleon-cs__hero-media--iframe)::before { content: ""; display: block; aspect-ratio: 16 / 9; }
.bamleon-cs__iframe--hero {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* ── Bullet list inside section body ────────────────────────────────────── */
.bamleon-cs__list {
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.bamleon-cs__list li {
	position: relative;
	padding-left: 22px;
	font-size: clamp(15px, 1.2vw, 17px);
	line-height: 1.55;
	color: var(--bamleon-text-2);
}
.bamleon-cs__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.7em;
	width: 8px;
	height: 1px;
	background: var(--bamleon-accent);
}
.bamleon-cs__list li strong { color: var(--bamleon-text); font-weight: 500; }

/* ── Output list (Section 04 — 26 mu-plugins shipped) ───────────────────── */
.bamleon-cs__output-list {
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: 1fr;
	border-top: 1px solid var(--bamleon-border);
}
.bamleon-cs__output-list li {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: 32px;
	padding: 16px 0;
	border-bottom: 1px solid var(--bamleon-border);
	font-size: clamp(13px, 1vw, 15px);
	line-height: 1.5;
	transition: background 200ms var(--bamleon-ease-out), padding-left 200ms var(--bamleon-ease-out);
}
.bamleon-cs__output-list li:hover { background: rgba(91, 141, 190, 0.04); padding-left: 12px; }
.bamleon-cs__output-name {
	font-family: var(--bamleon-font-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--bamleon-text);
}
.bamleon-cs__output-desc { color: var(--bamleon-text-2); }

/* ═══════════════════════════════════════════════════════════════════════════
 *  24 MODULES — APPLE-GRADE BENTO (Section 11)
 *
 *  Asymmetric 6-col grid. Six tile variants by content TYPE (not just size):
 *    --feature  3×3  big display-type module name + giant LOC, surface bg
 *    --accent   2×2  solid cat-color block, white text, color anchor
 *    --standard 2×2  surface tile, name + 1-line + LOC chip
 *    --strip    2×1  horizontal compact: name | LOC, dense
 *    --name     1×1  micro stamp, name only + tiny LOC
 *    --stat     2×2  pure mega-number breakout (no module, no chrome)
 *    --quote    6×1  italic pulled-quote banner, no chrome
 *  ═══════════════════════════════════════════════════════════════════════ */

/* ── Stat strip above the bento (intro stats) ───────────────────────────── */
.bamleon-cs__module-stats {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 0;
	margin: 48px 0 32px;
	border-top: 1px solid var(--bamleon-border);
	border-bottom: 1px solid var(--bamleon-border);
}
.bamleon-cs__module-stat {
	padding: 28px 24px;
	border-right: 1px solid var(--bamleon-border);
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.bamleon-cs__module-stat:last-child { border-right: 0; }
.bamleon-cs__module-stat-num {
	font-family: var(--bamleon-font-display);
	font-size: clamp(32px, 4vw, 56px);
	font-weight: 600;
	letter-spacing: -0.04em;
	line-height: 1;
	color: var(--bamleon-text);
}
.bamleon-cs__module-stat-num em {
	font-style: normal;
	font-size: 0.5em;
	font-weight: 500;
	color: var(--bamleon-text-3);
	margin-left: 2px;
	letter-spacing: var(--bamleon-tracking-wide);
	text-transform: uppercase;
}
.bamleon-cs__module-stat-label {
	font-family: var(--bamleon-font-mono);
	font-size: var(--bamleon-text-xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bamleon-text-3);
}

/* ═══ Architecture stack diagram — section header visual ════════════════
   Four-layer stack (L4 → L1) showing Composition / Admin & UX / Data /
   Compatibility. Each layer = 80px num column + 3-column body row that
   lays out name + tech + modules on one line, full article width. */
.bamleon-cs__archstack {
	display: grid !important;
	grid-template-columns: 1fr !important;
	gap: 1px;
	margin: 32px 0 48px;
	background: var(--bamleon-border);
	border: 1px solid var(--bamleon-border);
	border-radius: 14px;
	overflow: hidden;
	width: 100% !important;
	max-width: none !important;
	box-sizing: border-box;
}
.bamleon-cs__archstack-layer {
	display: grid !important;
	grid-template-columns: 80px 1fr !important;
	background: var(--bamleon-surface);
	padding: 22px 28px;
	gap: 24px;
	align-items: center;
	width: 100%;
	box-sizing: border-box;
	transition: background 200ms ease;
}
.bamleon-cs__archstack-layer:hover { background: var(--bamleon-surface-2); }
.bamleon-cs__archstack-num {
	font-family: var(--bamleon-font-mono);
	font-size: var(--bamleon-text-xl);
	font-weight: 700;
	letter-spacing: -0.04em;
	color: var(--bamleon-accent);
	line-height: 1;
}
.bamleon-cs__archstack-body {
	display: grid !important;
	grid-template-columns: 220px minmax(0, 1fr) minmax(0, 2fr) !important;
	gap: 24px;
	align-items: baseline;
	width: 100%;
}
.bamleon-cs__archstack-name {
	font-family: var(--bamleon-font-display);
	font-size: 18px;
	font-weight: 600;
	letter-spacing: var(--bamleon-tracking-normal);
	color: var(--bamleon-text);
}
.bamleon-cs__archstack-tech {
	font-family: var(--bamleon-font-mono);
	font-size: 12px;
	color: var(--bamleon-text-3);
	letter-spacing: var(--bamleon-tracking-wide);
}
.bamleon-cs__archstack-modules {
	font-family: var(--bamleon-font-display);
	font-size: var(--bamleon-text-sm);
	color: var(--bamleon-text-2);
	line-height: 1.5;
}
.bamleon-cs__archstack-modules strong { color: var(--bamleon-text); font-weight: 600; }

/* ═══ Filter chips ════════════════════════════════════════════════════════ */
/* Properly hide the radio inputs — opacity:0 alone left the native circle
 * outline visible as a stray dot floating left of the "ALL" pill. */
.bamleon-cs__module-filter-radio {
	position: absolute !important;
	opacity: 0 !important;
	pointer-events: none !important;
	width: 0 !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	left: -9999px !important;
	clip: rect(0,0,0,0) !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
}
.bamleon-cs__module-filter-list {
	margin: 0 0 24px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.bamleon-cs__module-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	font-family: var(--bamleon-font-mono);
	font-size: var(--bamleon-text-xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bamleon-text-3);
	background: var(--bamleon-surface);
	border: 1px solid var(--bamleon-border);
	border-radius: var(--bamleon-radius-pill);
	cursor: pointer;
	transition: all 180ms ease;
	user-select: none;
}
.bamleon-cs__module-chip:hover { color: var(--bamleon-text); border-color: var(--cat, var(--bamleon-accent)); }
.bamleon-cs__module-chip .dot {
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--cat, var(--bamleon-accent));
}
.bamleon-cs__module-chip span:not(.dot) {
	font-size: 10px;
	color: var(--bamleon-text-3);
	background: var(--bamleon-surface-2);
	padding: 2px 6px;
	border-radius: var(--bamleon-radius-pill);
	font-weight: 500;
}
.bamleon-cs__module-chip[data-active="1"] {
	background: var(--cat, var(--bamleon-text)) !important;
	color: #fff !important;
	border-color: transparent !important;
}
.bamleon-cs__module-chip[data-active="1"][data-filter-key="all"] {
	background: var(--bamleon-text) !important;
	color: var(--bamleon-bg) !important;
}
.bamleon-cs__module-chip[data-active="1"] span:not(.dot) {
	background: rgba(255,255,255,0.2) !important;
	color: #fff !important;
}

/* ═══ THE BENTO ═══════════════════════════════════════════════════════════
 * 6-col asymmetric grid. Dense pack so smaller tiles fill the gaps. Base
 * row height of 130px; tiles span rows/cols by variant.
 * ═══════════════════════════════════════════════════════════════════════ */
/* 4-col bento. Feature spans full width (4 cols), stats/accents/standards
 * are 2 cols (half-width), names are 1 col (4 per row). No orphan columns.
 * Bricks's .brxe-block { display: block } loads later — chain class beats
 * its (0,1,0) and !important locks it in. */
.bamleon-cs__modules-grid.bamleon-cs__modules-grid--bento {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-rows: minmax(140px, auto);
	grid-auto-flow: dense;
	align-items: stretch;
	gap: 24px;
	margin: 32px 0 48px;
	padding: 8px;
}
.bamleon-cs__modules-grid.bamleon-cs__modules-grid--bento > .bamleon-cs__module-card { align-self: stretch; }

/* ── Base tile ──────────────────────────────────────────────────────────── */
.bamleon-cs__module-card.bamleon-cs__module-card {
	position: relative;
	display: flex !important;
	flex-direction: column;
	justify-content: center;
	gap: 14px;
	padding: 32px;
	min-height: 220px;
	background:
		radial-gradient(circle at 100% 0%, rgba(255,255,255,0.85), transparent 60%),
		linear-gradient(180deg, #ffffff 0%, #f4f4f6 100%);
	border: 1px solid rgba(0,0,0,0.06);
	border-radius: 22px;
	box-shadow:
		0 1px 2px rgba(20, 20, 30, 0.04),
		0 8px 24px -8px rgba(20, 20, 30, 0.08),
		inset 0 1px 0 rgba(255,255,255,0.9);
	transition:
		transform 320ms cubic-bezier(.32,.72,0,1),
		box-shadow 320ms cubic-bezier(.32,.72,0,1),
		border-color 200ms ease;
	overflow: hidden;
	cursor: default;
}
.bamleon-cs__module-card:hover {
	transform: translateY(-4px);
	box-shadow:
		0 2px 4px rgba(20, 20, 30, 0.06),
		0 24px 48px -12px rgba(20, 20, 30, 0.18),
		inset 0 1px 0 rgba(255,255,255,1);
	border-color: rgba(0,0,0,0.1);
}
/* Universal corner light source — soft highlight on every card,
 * gives subtle dimension even without imagery. */
.bamleon-cs__module-card::after {
	content: "";
	position: absolute;
	top: -40%;
	right: -40%;
	width: 80%;
	height: 80%;
	background: radial-gradient(circle, rgba(255,255,255,0.7), transparent 60%);
	pointer-events: none;
	z-index: 0;
}
.bamleon-cs__module-card > * { position: relative; z-index: 1; }
.bamleon-cs__module-card:hover {
	transform: translateY(-2px);
	border-color: var(--cat, var(--bamleon-text-3));
}

/* Module name — mono uppercase kicker with ◆ accent-color dot prefix.
 * Apple/dark-bento "+ STATS" / "+ TIMELINE" stamp pattern. ───────────── */
.bamleon-cs__module-name {
	font-family: var(--bamleon-font-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cat, var(--bamleon-text-3));
	line-height: 1.3;
	display: inline-flex;
	align-items: center;
	gap: 7px;
}
.bamleon-cs__module-name::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 2px;
	background: var(--cat, var(--bamleon-text-3));
	transform: rotate(45deg);
	flex-shrink: 0;
}

/* Description — small caption text, 2-line cap. Each card stays a poster
 * but with a real label-pair like Apple's 48MP / Main camera. */
.bamleon-cs__module-desc {
	font-family: var(--bamleon-font-display);
	font-size: var(--bamleon-text-sm);
	font-weight: 400;
	line-height: 1.45;
	color: var(--bamleon-text-2);
	letter-spacing: 0;
	text-transform: none;
	margin: 0;
	-webkit-line-clamp: 2;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.bamleon-cs__module-desc code {
	font-family: var(--bamleon-font-mono);
	font-size: var(--bamleon-text-xs);
	background: var(--bamleon-surface-2);
	padding: 1px 5px;
	border-radius: 3px;
	color: var(--bamleon-text);
}

/* LOC — small mono pill anchored at the bottom of the card.
 * Title is the hero; LOC is the data label, Apple-style. */
.bamleon-cs__module-loc {
	font-family: var(--bamleon-font-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cat, var(--bamleon-text-3));
	background: rgba(255,255,255,0.7);
	border: 1px solid rgba(0,0,0,0.06);
	padding: 5px 10px;
	border-radius: var(--bamleon-radius-pill);
	margin: 0;
	align-self: flex-start;
	line-height: 1;
	backdrop-filter: blur(8px);
}

/* ── FEATURE — 4×2 (full-width hero in a 4-col grid) ──────────────────── */
.bamleon-cs__module-card.bamleon-cs__module-card--feature {
	grid-column: span 4;
	grid-row: span 2;
	padding: 32px;
	background:
		radial-gradient(ellipse at 100% 0%, rgba(91,141,190,0.08), transparent 50%),
		radial-gradient(ellipse at 0% 100%, rgba(167,139,250,0.06), transparent 55%),
		linear-gradient(180deg, #ffffff 0%, #fafafc 100%);
	border: 1px solid rgba(0,0,0,0.06);
	display: grid !important;
	grid-template-columns: 1fr auto;
	grid-template-rows: auto 1fr auto;
	column-gap: 40px;
	row-gap: 18px;
	min-height: 320px;
	box-shadow:
		0 2px 4px rgba(20, 20, 30, 0.04),
		0 16px 40px -16px rgba(20, 20, 30, 0.12),
		inset 0 1px 0 rgba(255,255,255,1);
}
.bamleon-cs__module-card--feature .bamleon-cs__module-name { grid-column: 1; grid-row: 1; }
.bamleon-cs__feature-display { grid-column: 1; grid-row: 2; align-self: start; }
.bamleon-cs__module-card--feature .bamleon-cs__module-desc { grid-column: 1; grid-row: 3; }
.bamleon-cs__feature-foot { grid-column: 2; grid-row: 1 / 4; align-self: stretch; flex-direction: column; justify-content: space-between; align-items: flex-end; padding-top: 0; border-top: 0; border-left: 1px solid var(--bamleon-border); padding-left: 32px; min-width: 200px; text-align: right; }
.bamleon-cs__feature-loc { flex-direction: column; align-items: flex-end; gap: 4px; }
.bamleon-cs__module-card--feature .bamleon-cs__module-name {
	font-family: var(--bamleon-font-mono);
	font-size: var(--bamleon-text-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cat, var(--bamleon-text-3));
	font-weight: 700;
	margin: 0;
}
/* Feature cards: pill status chip in the top-right corner — "MODULE" tag
 * mirrors the dark-bento "This week ▾" pattern. */
.bamleon-cs__module-card--feature::before {
	content: "MODULE · v1.8";
	position: absolute;
	top: 22px;
	right: 28px;
	font-family: var(--bamleon-font-mono);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bamleon-text-3);
	background: var(--bamleon-surface-2, rgba(0,0,0,0.04));
	padding: 5px 10px;
	border-radius: var(--bamleon-radius-pill);
	z-index: 1;
}
.bamleon-cs__feature-display {
	font-family: var(--bamleon-font-display);
	font-size: clamp(36px, 4vw, 56px);
	font-weight: 700;
	letter-spacing: -0.035em;
	line-height: 1.02;
	color: var(--bamleon-text);
	margin: 0;
	max-width: 22ch;
}
.bamleon-cs__module-card--feature .bamleon-cs__module-desc {
	display: block;
	font-size: 14px;
	line-height: 1.5;
	color: var(--bamleon-text-2);
	max-width: none;
	flex: none;
}
.bamleon-cs__feature-foot {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	border-top: 1px solid var(--bamleon-border);
	padding-top: 16px;
	margin-top: auto;
}
.bamleon-cs__feature-loc {
	display: flex;
	align-items: baseline;
	gap: 8px;
}
.bamleon-cs__feature-loc-num {
	font-family: var(--bamleon-font-display);
	font-size: clamp(40px, 4.2vw, 56px);
	font-weight: 700;
	letter-spacing: -0.04em;
	line-height: 1;
	color: var(--bamleon-text);
}
.bamleon-cs__feature-loc-unit {
	font-family: var(--bamleon-font-mono);
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bamleon-text-3);
}
.bamleon-cs__feature-cat {
	font-family: var(--bamleon-font-mono);
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cat, var(--bamleon-text-3));
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.bamleon-cs__feature-cat::before {
	content: "";
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--cat, var(--bamleon-text-3));
}
.bamleon-cs__module-card--feature:hover {
	transform: translateY(-3px);
	border-color: var(--cat, var(--bamleon-text));
}

/* ── ACCENT — saturated gradient, inner glow, deep accent text.
 * Apple/HYPE4 colored card treatment. ──────────────────────────────── */
.bamleon-cs__module-card.bamleon-cs__module-card--accent {
	grid-column: span 2;
	grid-row: span 2;
	padding: 32px;
	background:
		radial-gradient(circle at 80% -20%, rgba(255,255,255,0.7), transparent 50%),
		radial-gradient(circle at 0% 100%, var(--cat-glow, rgba(255,255,255,0.5)), transparent 60%),
		linear-gradient(155deg, var(--cat-soft-2, #f0f9ff) 0%, var(--cat-soft, #e0f2fe) 100%);
	border: 1px solid var(--cat-edge, rgba(0,0,0,0.05));
	color: var(--bamleon-text);
	display: flex !important;
	flex-direction: column;
	justify-content: center;
	gap: 14px;
	box-shadow:
		0 1px 2px rgba(20, 20, 30, 0.04),
		0 12px 32px -12px var(--cat-shadow, rgba(20, 20, 30, 0.12)),
		inset 0 1px 0 rgba(255,255,255,0.8);
}
.bamleon-cs__module-card--accent::after {
	background: radial-gradient(circle, rgba(255,255,255,0.6), transparent 65%);
}
.bamleon-cs__module-card--accent[data-cat="chrome"]     { --cat-soft: #c5e4f5; --cat-soft-2: #e8f5fc; --cat-deep: #0e7490; --cat-glow: rgba(8,145,178,0.18); --cat-shadow: rgba(8,145,178,0.25); --cat-edge: rgba(8,145,178,0.12); }
.bamleon-cs__module-card--accent[data-cat="design"]     { --cat-soft: #d9c8fd; --cat-soft-2: #ede5fb; --cat-deep: #5b21b6; --cat-glow: rgba(124,58,237,0.18); --cat-shadow: rgba(124,58,237,0.28); --cat-edge: rgba(124,58,237,0.12); }
.bamleon-cs__module-card--accent[data-cat="auth"]       { --cat-soft: #fbcaca; --cat-soft-2: #fde2e2; --cat-deep: #b91c1c; --cat-glow: rgba(239,68,68,0.18); --cat-shadow: rgba(239,68,68,0.25); --cat-edge: rgba(239,68,68,0.14); }
.bamleon-cs__module-card--accent[data-cat="foundation"] { --cat-soft: #b9d2fb; --cat-soft-2: #dbe7fb; --cat-deep: #1e40af; --cat-glow: rgba(37,99,235,0.18); --cat-shadow: rgba(37,99,235,0.25); --cat-edge: rgba(37,99,235,0.12); }
.bamleon-cs__module-card--accent[data-cat="perf"]       { --cat-soft: #fce4a3; --cat-soft-2: #fdf3cf; --cat-deep: #92400e; --cat-glow: rgba(245,158,11,0.2); --cat-shadow: rgba(245,158,11,0.28); --cat-edge: rgba(245,158,11,0.14); }
.bamleon-cs__module-card--accent[data-cat="content"]    { --cat-soft: #afecd0; --cat-soft-2: #d6f4e6; --cat-deep: #065f46; --cat-glow: rgba(16,185,129,0.18); --cat-shadow: rgba(16,185,129,0.25); --cat-edge: rgba(16,185,129,0.12); }
.bamleon-cs__module-card--accent .bamleon-cs__module-name {
	color: var(--cat-deep, var(--cat));
	font-family: var(--bamleon-font-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.bamleon-cs__module-card--accent .bamleon-cs__module-display {
	font-family: var(--bamleon-font-display);
	font-size: clamp(32px, 3.6vw, 48px);
	font-weight: 700;
	letter-spacing: -0.035em;
	line-height: 0.98;
	color: var(--cat-deep, var(--cat));
	margin: 0;
	max-width: 14ch;
}
.bamleon-cs__module-card--accent .bamleon-cs__module-desc {
	display: none;
}
.bamleon-cs__module-card--accent .bamleon-cs__module-loc {
	display: none;
}
.bamleon-cs__module-card--accent:hover {
	transform: translateY(-2px);
	filter: brightness(0.98);
}

/* ── STANDARD — 2×2, surface tile ─────────────────────────────────────── */
.bamleon-cs__module-card.bamleon-cs__module-card--standard {
	grid-column: span 2;
	grid-row: span 2;
}
/* STANDARD — module-name is the hero title. Description is small caption.
 * LOC is a tiny pill at the bottom. Apple-style label-pair poster. */
.bamleon-cs__module-card--standard .bamleon-cs__module-name {
	font-family: var(--bamleon-font-display);
	font-size: clamp(26px, 2.8vw, 36px);
	font-weight: 700;
	letter-spacing: var(--bamleon-tracking-tight);
	line-height: var(--bamleon-leading-tight);
	color: var(--bamleon-text);
	text-transform: none;
	max-width: 14ch;
}
.bamleon-cs__module-card--standard .bamleon-cs__module-name::before { display: none; }
.bamleon-cs__module-card--standard .bamleon-cs__module-desc {
	font-size: 12px;
	color: var(--bamleon-text-2);
	margin-top: 4px;
}

/* ── STRIP — 2×1, compact horizontal: name | LOC ──────────────────────── */
.bamleon-cs__module-card.bamleon-cs__module-card--strip {
	grid-column: span 2;
	grid-row: span 1;
	display: grid !important;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 16px;
	padding: 16px 20px;
}
.bamleon-cs__module-card--strip .bamleon-cs__module-name {
	font-size: 12px;
}
.bamleon-cs__module-card--strip .bamleon-cs__module-desc {
	display: none;
}
.bamleon-cs__module-card--strip .bamleon-cs__module-loc {
	margin-top: 0;
	align-self: center;
	font-size: var(--bamleon-text-xs);
	font-weight: 700;
	background: var(--cat, var(--bamleon-accent));
	color: #fff;
	border-color: transparent;
	padding: 4px 10px;
}

/* ── NAME — 1×1, micro stamp, name centered, tiny LOC ─────────────────── */
.bamleon-cs__module-card.bamleon-cs__module-card--name {
	grid-column: span 1;
	grid-row: span 1;
	padding: 14px 12px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 6px;
	text-align: center;
}
.bamleon-cs__module-card--name .bamleon-cs__module-name {
	font-size: 10px;
	letter-spacing: 0;
	line-height: var(--bamleon-leading-snug);
	word-break: break-word;
}
.bamleon-cs__module-card--name .bamleon-cs__module-desc { display: none; }
.bamleon-cs__module-card--name .bamleon-cs__module-loc {
	font-size: var(--bamleon-text-xs);
	font-weight: 700;
	color: var(--cat, var(--bamleon-accent));
	background: transparent;
	border: 0;
	padding: 0;
	margin: 0;
	align-self: center;
	font-family: var(--bamleon-font-display);
	letter-spacing: -0.02em;
	text-transform: none;
}

/* ── STAT — 2×2, big mega-number breakout with gradient depth. ──────── */
.bamleon-cs__module-card.bamleon-cs__module-card--stat {
	grid-column: span 2;
	grid-row: span 2;
	padding: 32px;
	background:
		radial-gradient(circle at 100% 100%, rgba(91,141,190,0.06), transparent 60%),
		linear-gradient(135deg, #ffffff 0%, #f5f5f7 100%);
	border: 1px solid rgba(0,0,0,0.06);
	display: flex !important;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 14px;
	box-shadow:
		0 1px 2px rgba(20, 20, 30, 0.04),
		0 12px 32px -12px rgba(20, 20, 30, 0.1),
		inset 0 1px 0 rgba(255,255,255,1);
}
.bamleon-cs__module-card--stat .bamleon-cs__stat-num {
	font-family: var(--bamleon-font-display);
	font-size: clamp(56px, 6.4vw, 92px);
	font-weight: 700;
	letter-spacing: -0.05em;
	line-height: 0.95;
	color: #0a0a0a;
}
.bamleon-cs__module-card--stat .bamleon-cs__stat-label,
.bamleon-cs__module-card--stat .bamleon-cs__stat-kicker {
	color: #1f1f24;
}
/* Stat kicker — small identity stamp at the top of every stat card,
 * matches the ◆-dot kicker pattern used by --feature and --accent. */
.bamleon-cs__stat-kicker {
	font-family: var(--bamleon-font-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bamleon-text-3);
	line-height: 1.3;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0;
}
.bamleon-cs__stat-kicker::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 2px;
	background: var(--bamleon-accent, #5B8DBE);
	transform: rotate(45deg);
	flex-shrink: 0;
}
.bamleon-cs__module-card--stat-dark .bamleon-cs__stat-kicker {
	color: rgba(255,255,255,0.7);
}
.bamleon-cs__module-card--stat-dark .bamleon-cs__stat-kicker::before {
	background: rgba(255,255,255,0.6);
}
.bamleon-cs__module-card--stat .bamleon-cs__stat-num em {
	font-style: normal;
	font-size: 0.45em;
	font-weight: 500;
	color: var(--bamleon-text-3);
	margin-left: 4px;
	letter-spacing: 0.02em;
}
.bamleon-cs__module-card--stat .bamleon-cs__stat-label {
	font-family: var(--bamleon-font-display);
	font-size: var(--bamleon-text-sm);
	font-weight: 500;
	letter-spacing: -0.005em;
	text-transform: none;
	color: var(--bamleon-text-2);
	max-width: 28ch;
	line-height: 1.45;
}
.bamleon-cs__module-card--stat:hover { transform: none; border-color: var(--bamleon-text-3); }

/* ── STAT DARK variant — deep gradient, white text. Double-class
 * specificity beats the base card's white-gradient background. ─────── */
.bamleon-cs__module-card.bamleon-cs__module-card--stat-dark {
	background:
		radial-gradient(circle at 70% 30%, rgba(91,141,190,0.18), transparent 55%),
		radial-gradient(circle at 20% 90%, rgba(91,141,190,0.08), transparent 60%),
		linear-gradient(155deg, #1f1f24 0%, #0a0a0c 100%) !important;
	border: 1px solid var(--bamleon-border);
	color: #ffffff;
	box-shadow:
		0 1px 2px rgba(0,0,0,0.3),
		0 16px 40px -12px rgba(0,0,0,0.4),
		inset 0 1px 0 rgba(255,255,255,0.08);
}
.bamleon-cs__module-card--stat-dark::after {
	background: radial-gradient(circle, rgba(91,141,190,0.12), transparent 60%) !important;
}
.bamleon-cs__module-card--stat-dark .bamleon-cs__stat-num,
.bamleon-cs__module-card.bamleon-cs__module-card--stat-dark .bamleon-cs__stat-num { color: #ffffff !important; }
.bamleon-cs__module-card--stat-dark .bamleon-cs__stat-num em,
.bamleon-cs__module-card.bamleon-cs__module-card--stat-dark .bamleon-cs__stat-num em { color: rgba(255,255,255,0.55) !important; }
.bamleon-cs__module-card--stat-dark .bamleon-cs__stat-label,
.bamleon-cs__module-card.bamleon-cs__module-card--stat-dark .bamleon-cs__stat-label { color: rgba(255,255,255,0.85) !important; }
.bamleon-cs__module-card--stat-dark .bamleon-cs__stat-kicker,
.bamleon-cs__module-card.bamleon-cs__module-card--stat-dark .bamleon-cs__stat-kicker { color: rgba(255,255,255,0.7) !important; }
.bamleon-cs__module-card--stat-dark:hover {
	box-shadow:
		0 2px 4px rgba(0,0,0,0.35),
		0 28px 56px -16px rgba(0,0,0,0.5),
		inset 0 1px 0 rgba(255,255,255,0.12);
}

/* ── IMG — image fills the top portion, clean white label band below.
 * The "IMAGE" treatment. No dark overlay. Apple/iPadOS-style. ─────── */
.bamleon-cs__module-card.bamleon-cs__module-card--img {
	grid-column: span 2;
	grid-row: span 2;
	padding: 0;
	background: var(--bamleon-surface);
	border: 1px solid var(--bamleon-border);
	display: flex !important;
	flex-direction: column;
	overflow: hidden;
	gap: 0;
	color: var(--bamleon-text);
}
.bamleon-cs__module-card--img::before {
	content: "";
	flex: 1;
	min-height: 64%;
	background-color: var(--bamleon-surface-2, #f4f4f4);
	background-image: var(--card-img, none);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	background-origin: content-box;
	padding: 16px;
	box-sizing: border-box;
}
/* Image cards keep the same 2×2 footprint as every other bento poster
 * so row heights stay equal. Image fits via background-size: contain. */
.bamleon-cs__module-card--img .bamleon-cs__module-name,
.bamleon-cs__module-card--img .bamleon-cs__img-kicker {
	display: block;
	width: 100%;
	padding: 18px 32px 4px;
	border-top: 1px solid var(--bamleon-border);
	font-family: var(--bamleon-font-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cat, var(--bamleon-text-3));
	background: var(--bamleon-surface);
	margin: 0;
}
/* Kill the ◆-dot kicker on img cards (it floats over the border-top
 * and breaks the label band). */
.bamleon-cs__module-card--img .bamleon-cs__module-name::before,
.bamleon-cs__module-card--img .bamleon-cs__img-kicker::before {
	display: none;
}
/* Kill the base card's top-right radial highlight on img cards — it was
 * washing out the wireframe image. Image stays clean edge-to-edge. */
.bamleon-cs__module-card--img::after {
	display: none;
}
.bamleon-cs__module-card--img .bamleon-cs__module-desc,
.bamleon-cs__module-card--img .bamleon-cs__img-title {
	padding: 0 32px 18px;
	font-family: var(--bamleon-font-display);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: var(--bamleon-tracking-normal);
	line-height: 1.3;
	color: var(--bamleon-text);
	background: var(--bamleon-surface);
	margin: 0;
	flex: none;
	-webkit-line-clamp: 2;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.bamleon-cs__module-card--img .bamleon-cs__module-loc,
.bamleon-cs__module-card--img .bamleon-cs__img-caption {
	display: none;
}
.bamleon-cs__module-card--img:hover {
	transform: translateY(-2px);
	border-color: var(--bamleon-text-3);
}

/* ── Per-card image bindings — each card gets a unique wireframe ──────── */
#brxe-d08a56  { --card-img: url('/wp-content/uploads/bamleon/wireframe-sidebar.svg'); }
#brxe-d2a94c  { --card-img: url('/wp-content/uploads/bamleon/wireframe-cards.svg'); }
#brxe-4f2887  { --card-img: url('/wp-content/uploads/bamleon/wireframe-search.svg'); }
#brxe-to_mc_b { --card-img: url('/wp-content/uploads/bamleon/wireframe-kebab.svg'); }

/* ─── The full manifest (S07) — orphan modules as compact pills.
 * Sits at the bottom of section 07 below the curated bento. Overrides
 * the full card chrome so each module reads as a single inline pill. */
.bamleon-cs__manifest {
	margin: 32px 0 16px;
	padding: 28px 32px 24px;
	background: var(--bamleon-surface-2, #f4f4f6);
	border: 1px solid rgba(0,0,0,0.04);
	border-radius: 18px;
}

/* ── Today block: 16 mu-plugins currently on disk + consolidation notes.
   Sits below the original-24 manifest so both stories are visible. */
.bamleon-cs__module-today {
	margin: 28px 0 8px;
	padding: 28px 32px 24px;
	background: var(--bamleon-surface);
	border: 1px solid var(--bamleon-border);
	border-radius: 18px;
}
.bamleon-cs__module-today-head {
	font-family: var(--bamleon-font-mono);
	font-size: var(--bamleon-text-xs);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bamleon-text-3);
	margin: 0 0 6px;
}
.bamleon-cs__module-today-lead {
	font-size: 14px;
	line-height: 1.55;
	color: var(--bamleon-text-2);
	margin: 0 0 18px;
	max-width: 75ch;
}
.bamleon-cs__module-today-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 6px 24px;
}
.bamleon-cs__module-today-row {
	display: grid;
	grid-template-columns: minmax(180px, max-content) 1fr;
	gap: 12px;
	padding: 8px 0;
	border-bottom: 1px solid var(--bamleon-border);
	align-items: baseline;
}
.bamleon-cs__module-today-row:last-child,
.bamleon-cs__module-today-row:nth-last-child(2) { border-bottom: 0; }
.bamleon-cs__module-today-name {
	font-family: var(--bamleon-font-mono);
	font-size: var(--bamleon-text-sm);
	font-weight: 600;
	color: var(--bamleon-text);
	white-space: nowrap;
}
.bamleon-cs__module-today-note {
	font-size: var(--bamleon-text-sm);
	line-height: 1.45;
	color: var(--bamleon-text-2);
}
@media (max-width: 880px) {
	.bamleon-cs__module-today-list { grid-template-columns: 1fr; }
	.bamleon-cs__module-today-row { grid-template-columns: 1fr; gap: 2px; }
	.bamleon-cs__module-today-row:nth-last-child(2) { border-bottom: 1px solid var(--bamleon-border); }
}
.bamleon-cs__manifest-head {
	font-family: var(--bamleon-font-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bamleon-text-3);
	margin: 0 0 14px;
}
.bamleon-cs__manifest-rail {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.bamleon-cs__manifest .bamleon-cs__module-card {
	/* Reset all the poster chrome */
	grid-column: auto !important;
	grid-row: auto !important;
	min-height: 0 !important;
	padding: 7px 12px !important;
	display: inline-flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 10px !important;
	background: #ffffff !important;
	border: 1px solid rgba(0,0,0,0.08) !important;
	border-radius: var(--bamleon-radius-pill) !important;
	box-shadow: none !important;
	width: auto !important;
	flex: 0 0 auto !important;
	color: var(--bamleon-text) !important;
}
.bamleon-cs__manifest .bamleon-cs__module-card::after,
.bamleon-cs__manifest .bamleon-cs__module-card::before {
	display: none !important;
}
.bamleon-cs__manifest .bamleon-cs__module-card:hover {
	transform: none !important;
	border-color: var(--cat, var(--bamleon-text-3)) !important;
	box-shadow: none !important;
}
.bamleon-cs__manifest .bamleon-cs__module-name {
	font-family: var(--bamleon-font-mono) !important;
	font-size: var(--bamleon-text-xs) !important;
	font-weight: 600 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: var(--bamleon-text) !important;
	line-height: 1 !important;
	max-width: none !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 7px !important;
}
.bamleon-cs__manifest .bamleon-cs__module-name::before {
	display: inline-block !important;
	content: "" !important;
	width: 5px !important;
	height: 5px !important;
	border-radius: 50% !important;
	background: var(--cat, var(--bamleon-text-3)) !important;
	transform: none !important;
	flex-shrink: 0 !important;
}
.bamleon-cs__manifest .bamleon-cs__module-desc,
.bamleon-cs__manifest .bamleon-cs__module-display,
.bamleon-cs__manifest .bamleon-cs__stat-num,
.bamleon-cs__manifest .bamleon-cs__stat-label,
.bamleon-cs__manifest .bamleon-cs__mono-kicker,
.bamleon-cs__manifest .bamleon-cs__mono-display,
.bamleon-cs__manifest .bamleon-cs__mono-label,
.bamleon-cs__manifest .bamleon-cs__img-kicker,
.bamleon-cs__manifest .bamleon-cs__img-title,
.bamleon-cs__manifest .bamleon-cs__img-caption {
	display: none !important;
}
.bamleon-cs__manifest .bamleon-cs__module-loc {
	font-family: var(--bamleon-font-mono) !important;
	font-size: 10px !important;
	font-weight: 500 !important;
	color: var(--bamleon-text-3) !important;
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	backdrop-filter: none !important;
	align-self: center !important;
	line-height: 1 !important;
}
/* For cards that have NO name/loc (placeholder kebab img to_mc_b) — hide entirely */
.bamleon-cs__manifest .bamleon-cs__module-card--img,
.bamleon-cs__manifest .bamleon-cs__module-card--img-dark,
.bamleon-cs__manifest .bamleon-cs__module-card--mono {
	display: none !important;
}

/* ─── Theme catalog (S05) — visual redesign: dark hero + tinted group cards
 * with their own gradient signature + accent rule. ───────────────────── */
.bamleon-cs__catalog {
	margin: 64px 0 48px;
	padding: 48px 40px;
	background: linear-gradient(180deg, #fafafa 0%, #f4f4f6 100%);
	border-radius: 22px;
	border: 1px solid rgba(0,0,0,0.05);
}
.bamleon-cs__catalog-head {
	font-family: var(--bamleon-font-display);
	font-size: clamp(28px, 3vw, 40px);
	font-weight: 700;
	letter-spacing: var(--bamleon-tracking-tight);
	color: var(--bamleon-text);
	margin: 0 0 12px;
	line-height: 1;
}
.bamleon-cs__catalog-lead {
	font-family: var(--bamleon-font-display);
	font-size: 15px;
	color: var(--bamleon-text-2);
	line-height: 1.55;
	margin: 0 0 36px;
	max-width: none;
}
.bamleon-cs__catalog-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}
@media (max-width: 900px) {
	.bamleon-cs__catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.bamleon-cs__catalog-grid { grid-template-columns: 1fr; }
}

/* Catalog group card — fully driven by the theme palette tokens that the
   dropdown sets on this element via [data-active-theme]. */
.bamleon-cs__catalog-group {
	position: relative;
	padding: 28px 26px 26px;
	border: 1px solid var(--border, rgba(0,0,0,0.06));
	border-radius: 18px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	overflow: hidden;
	background: var(--bg, var(--bamleon-bg));
	color: var(--text, var(--bamleon-text));
	box-shadow:
		0 1px 2px rgba(0,0,0,0.04),
		0 8px 24px -10px rgba(0,0,0,0.12);
	transition: background 320ms cubic-bezier(.32,.72,0,1),
	            color 320ms cubic-bezier(.32,.72,0,1),
	            border-color 320ms cubic-bezier(.32,.72,0,1),
	            transform 320ms cubic-bezier(.32,.72,0,1),
	            box-shadow 320ms cubic-bezier(.32,.72,0,1);
}
.bamleon-cs__catalog-group:hover {
	transform: translateY(-2px);
	box-shadow:
		0 2px 4px rgba(0,0,0,0.06),
		0 16px 36px -12px rgba(0,0,0,0.18);
}
/* The card's content elements inherit the active palette */
.bamleon-cs__catalog-group-title {
	color: var(--text, var(--bamleon-text));
	font-family: var(--theme-font, var(--bamleon-font-display));
}
.bamleon-cs__catalog-group-intro {
	color: var(--text-2, var(--bamleon-text-2));
	font-family: var(--theme-font, var(--bamleon-font-body));
}
/* Theme chips — each theme name is its own interactive token.
 * Hover one → parent card repaints in that theme's actual palette. */
.bamleon-cs__catalog-group-body {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 4px 6px !important;
	white-space: normal !important;
	overflow: visible !important;
	overflow-wrap: normal !important;
	word-break: normal !important;
	text-overflow: clip !important;
	-webkit-line-clamp: unset !important;
	max-height: none !important;
	min-width: 0 !important;
}

/* ── Theme catalog picker (2-col: list ⟷ live preview) ──────────────────
   Single block replaces the old 6-group tile grid. Left = scrollable list
   of all 61 themes. Right = one preview tile that re-skins to the selected
   theme using its real --bg/--sf/--sf2/--bd/--tx/--tx2/--ac + --f.
   Tokens come from mu-plugins/assets/bamleon-theme-palettes.css. */
.bamleon-cs__catalog-grid--picker {
	display: block !important;
	grid-template-columns: none !important;
}
.bamleon-cs__theme-picker {
	display: grid;
	grid-template-columns: minmax(280px, 360px) 1fr;
	grid-template-rows: auto 1fr;
	gap: 16px 32px;
	background: var(--bamleon-surface);
	border: 1px solid var(--bamleon-border);
	border-radius: 16px;
	padding: 20px;
	min-height: 520px;
}
/* Light/Dark mode toggle — spans both columns at the top of the picker. */
.bamleon-cs__theme-picker-mode {
	grid-column: 1 / -1;
	display: inline-flex;
	gap: 4px;
	padding: 4px;
	background: var(--bamleon-surface-2, #f0f0f0);
	border: 1px solid var(--bamleon-border);
	border-radius: var(--bamleon-radius-pill);
	justify-self: end;
	align-self: center;
	width: fit-content;
}
.bamleon-cs__theme-picker-mode-btn,
.brxe-heading.bamleon-cs__theme-picker-mode-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	flex: 0 0 auto;
	font-family: var(--bamleon-font-mono);
	font-size: var(--bamleon-text-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 7px 16px;
	border: 0;
	border-radius: var(--bamleon-radius-pill);
	background: transparent;
	color: var(--bamleon-text-2);
	cursor: pointer;
	line-height: 1;
	transition: background 160ms ease, color 160ms ease;
}
.bamleon-cs__theme-picker-mode-btn:hover { color: var(--bamleon-text); }
.bamleon-cs__theme-picker-mode-btn.is-active {
	background: var(--bamleon-text);
	color: var(--bamleon-bg);
}
.bamleon-cs__theme-picker-mode-btn:focus-visible {
	outline: 2px solid var(--bamleon-accent);
	outline-offset: 2px;
}
.bamleon-cs__theme-picker-list {
	max-height: 600px;
	overflow-y: auto;
	padding-right: 8px;
	border-right: 1px solid var(--bamleon-border);
}
.bamleon-cs__theme-picker-list::-webkit-scrollbar { width: 6px; }
.bamleon-cs__theme-picker-list::-webkit-scrollbar-thumb {
	background: var(--bamleon-border-2);
	border-radius: 3px;
}
.bamleon-cs__theme-picker-listing,
.bamleon-cs__theme-picker-sublist {
	list-style: none;
	margin: 0;
	padding: 0;
}
.bamleon-cs__theme-picker-group-label {
	font-family: var(--bamleon-font-mono);
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bamleon-text-3);
	padding: 16px 8px 6px;
	border-top: 1px solid var(--bamleon-border);
}
.bamleon-cs__theme-picker-group-label:first-child {
	border-top: 0;
	padding-top: 0;
}
.bamleon-cs__theme-picker-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	padding: 10px 12px;
	border: 1px solid transparent;
	background: transparent;
	color: var(--bamleon-text-2);
	border-radius: var(--bamleon-radius-md);
	cursor: pointer;
	font-family: var(--bamleon-font-display);
	font-size: 14px;
	font-weight: 500;
	text-align: left;
	transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.bamleon-cs__theme-picker-item:hover {
	background: var(--bamleon-surface-2);
	color: var(--bamleon-text);
}
.bamleon-cs__theme-picker-item.is-active {
	background: var(--bamleon-surface-2);
	color: var(--bamleon-text);
	border-color: var(--bamleon-border-2);
}
.bamleon-cs__theme-picker-item.is-pending {
	color: var(--bamleon-text-3);
	font-style: italic;
}
.bamleon-cs__theme-picker-item:focus-visible {
	outline: 2px solid var(--bamleon-accent);
	outline-offset: 2px;
}
.bamleon-cs__theme-picker-name { flex: 1; }
.bamleon-cs__theme-picker-tag {
	font-family: var(--bamleon-font-mono);
	font-size: 9px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bamleon-text-3);
	background: rgba(127, 127, 127, 0.12);
	padding: 2px 6px;
	border-radius: 3px;
}

/* Right side: live preview tile that re-skins via inline style on .bamleon-cs__theme-picker-preview */
.bamleon-cs__theme-picker-preview {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 32px;
	border-radius: var(--bamleon-radius-lg);
	background: var(--tp-bg, #0a0a0c);
	color: var(--tp-tx, #f7f7fa);
	border: 1px solid var(--tp-bd, var(--bamleon-border));
	font-family: var(--tp-f, 'Inter', -apple-system, sans-serif);
	min-height: 460px;
	transition: background 200ms ease, color 200ms ease, border-color 200ms ease, font-family 0ms;
}
.bamleon-cs__theme-picker-preview-head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--tp-bd, rgba(255,255,255,0.08));
}
.bamleon-cs__theme-picker-preview-dot {
	width: 12px; height: 12px; border-radius: var(--bamleon-radius-pill);
	background: var(--tp-ac, currentColor);
	flex-shrink: 0;
}
.bamleon-cs__theme-picker-preview-name {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	letter-spacing: var(--bamleon-tracking-normal);
	color: inherit;
}
.bamleon-cs__theme-picker-preview-slug {
	margin-left: auto;
	font-family: var(--bamleon-font-mono);
	font-size: var(--bamleon-text-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tp-tx2, currentColor);
	opacity: 0.7;
}
.bamleon-cs__theme-picker-preview-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.bamleon-cs__theme-picker-preview-kicker {
	margin: 0;
	font-family: var(--bamleon-font-mono);
	font-size: var(--bamleon-text-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tp-ac, currentColor);
}
.bamleon-cs__theme-picker-preview-h {
	margin: 0;
	font-size: clamp(36px, 4vw, 56px);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1;
	color: inherit;
}
.bamleon-cs__theme-picker-preview-p {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--tp-tx2, currentColor);
	max-width: 60ch;
}
.bamleon-cs__theme-picker-preview-buttons {
	display: flex;
	gap: 10px;
	margin-top: 8px;
}
.bamleon-cs__theme-picker-preview-btn {
	padding: 10px 18px;
	border-radius: var(--bamleon-radius-md);
	font-family: inherit;
	font-size: var(--bamleon-text-sm);
	font-weight: 600;
	letter-spacing: -0.005em;
	cursor: default;
	border: 1px solid var(--tp-bd, rgba(255,255,255,0.12));
	transition: background 160ms ease;
}
.bamleon-cs__theme-picker-preview-btn--primary {
	background: var(--tp-ac, #3672ff);
	color: var(--tp-bg, #0a0a0c);
	border-color: var(--tp-ac, #3672ff);
}
.bamleon-cs__theme-picker-preview-btn--ghost {
	background: transparent;
	color: inherit;
}
.bamleon-cs__theme-picker-preview-foot {
	display: flex;
	gap: 6px;
	padding-top: 16px;
	border-top: 1px solid var(--tp-bd, rgba(255,255,255,0.08));
}
.bamleon-cs__theme-picker-preview-swatch {
	width: 22px; height: 22px;
	border-radius: var(--bamleon-radius-sm);
	border: 1px solid var(--tp-bd, rgba(255,255,255,0.10));
}

/* Pending state — the preview pane when an unbuilt theme is selected. */
.bamleon-cs__theme-picker-preview.is-pending {
	background: var(--bamleon-surface);
	color: var(--bamleon-text-3);
	border-style: dashed;
}
.bamleon-cs__theme-picker-preview.is-pending .bamleon-cs__theme-picker-preview-h {
	font-size: var(--bamleon-text-xl);
	color: var(--bamleon-text-2);
}
.bamleon-cs__theme-picker-preview.is-pending .bamleon-cs__theme-picker-preview-buttons,
.bamleon-cs__theme-picker-preview.is-pending .bamleon-cs__theme-picker-preview-foot { display: none; }

@media (max-width: 880px) {
	.bamleon-cs__theme-picker { grid-template-columns: 1fr; }
	.bamleon-cs__theme-picker-list {
		max-height: 280px;
		border-right: 0;
		border-bottom: 1px solid var(--bamleon-border);
		padding-right: 0;
		padding-bottom: 16px;
	}
}

/* ── Theme catalog tiles ─────────────────────────────────────────────────
   Each tile = real bg / surface / text / accent + the theme's own font.
   Tokens sourced from mu-plugins/assets/bamleon-theme-palettes.css. Six
   names in the case-study narrative don't exist in the palette (Glass
   variants, Gradient Aurora, Blurred Frost) — those render in `.is-pending`
   neutral state, no fabricated specs. */
.bamleon-cs__theme-tiles {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 14px;
	width: 100%;
}
.bamleon-cs__theme-tile {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 14px;
	border: 1px solid var(--bamleon-border);
	border-radius: 10px;
	background: var(--bamleon-surface);
	color: var(--bamleon-text);
	min-height: 132px;
	transition: transform 200ms ease, box-shadow 200ms ease;
}
.bamleon-cs__theme-tile:hover { transform: translateY(-2px); }
.bamleon-cs__theme-tile-header {
	display: flex; align-items: center; gap: 8px;
	font-size: 12px; font-weight: 600;
	letter-spacing: -0.005em;
}
.bamleon-cs__theme-tile-dot {
	width: 10px; height: 10px; border-radius: var(--bamleon-radius-pill);
	background: currentColor;
	flex-shrink: 0;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15);
}
.bamleon-cs__theme-tile-name { color: inherit; }
.bamleon-cs__theme-tile-preview { flex: 1; line-height: 1.25; }
.bamleon-cs__theme-tile-h { font-size: 18px; font-weight: 600; letter-spacing: var(--bamleon-tracking-normal); }
.bamleon-cs__theme-tile-b { font-size: var(--bamleon-text-xs); opacity: 0.78; margin-top: 4px; }
.bamleon-cs__theme-tile-foot {
	display: flex; gap: 4px; align-items: center;
	padding-top: 8px;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.bamleon-cs__theme-tile-swatch {
	width: 14px; height: 14px; border-radius: 3px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	flex-shrink: 0;
}
.bamleon-cs__theme-tile.is-pending {
	background: var(--bamleon-surface-2, #1d1d22);
	color: var(--bamleon-text-3, #888);
	border-style: dashed;
}
.bamleon-cs__theme-tile.is-pending .bamleon-cs__theme-tile-dot { background: var(--bamleon-text-3, #888); box-shadow: none; }
.bamleon-cs__theme-tile-pending-tag {
	font-family: var(--bamleon-font-mono, ui-monospace, monospace);
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bamleon-text-3, #888);
	padding: 2px 6px;
	border-radius: 3px;
	background: rgba(255, 255, 255, 0.04);
}
/* a11y: keyboard focus visible on the (semantically interactive-looking)
   article. Tiles are not buttons but giving them focus styling preserves
   visibility if they're ever made keyboard-navigable later. */
.bamleon-cs__theme-tile:focus-visible {
	outline: 2px solid var(--bamleon-accent, currentColor);
	outline-offset: 2px;
}
@media (max-width: 720px) {
	.bamleon-cs__theme-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.th-chip {
	display: inline-block;
	padding: 2px 6px;
	margin: 2px 0;
	border-radius: var(--bamleon-radius-sm);
	cursor: pointer;
	white-space: nowrap;          /* keep "RX-78" together */
	word-break: keep-all;
	transition: background 180ms ease, color 180ms ease, transform 180ms ease;
	color: inherit;
}
.th-chip:hover { transform: translateY(-1px); }
.th-chip-sep {
	color: var(--bamleon-text-3);
	margin: 0 2px;
	opacity: 0.5;
	display: inline-block;
}
/* Override section-body's overflow-clipping rules for the catalog body
 * so the chip list always wraps and is never truncated. */
.bamleon-cs__section-body .bamleon-cs__catalog-group-body,
.bamleon-cs__catalog-group .bamleon-cs__catalog-group-body {
	overflow: visible !important;
	max-height: none !important;
	-webkit-line-clamp: unset !important;
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 4px 6px !important;
	-webkit-box-orient: unset !important;
	min-width: 0 !important;
}
/* Cards themselves stop hiding overflow now — chip list determines height */
.bamleon-cs__catalog-group {
	overflow: visible !important;
}

/* When ANY chip inside a group is hovered, the parent card transitions
 * its background + text colors. The specific palette per chip lives in
 * the per-theme rules below. */
.bamleon-cs__catalog-group {
	transition: background 280ms cubic-bezier(.32,.72,0,1),
		color 280ms cubic-bezier(.32,.72,0,1),
		box-shadow 320ms cubic-bezier(.32,.72,0,1),
		transform 320ms cubic-bezier(.32,.72,0,1);
}
.bamleon-cs__catalog-group:has(.th-chip:hover) {
	box-shadow: 0 4px 8px rgba(20,20,30,0.08), 0 32px 64px -16px rgba(20,20,30,0.25);
}
.bamleon-cs__catalog-group:has(.th-chip:hover) .bamleon-cs__catalog-group-title,
.bamleon-cs__catalog-group:has(.th-chip:hover) .bamleon-cs__catalog-group-intro,
.bamleon-cs__catalog-group:has(.th-chip:hover) .bamleon-cs__catalog-group-body {
	color: inherit;
}
.bamleon-cs__catalog-group:has(.th-chip:hover) .bamleon-cs__catalog-group-body {
	border-top-color: currentColor !important;
	opacity: 1;
}
.bamleon-cs__catalog-group:has(.th-chip:hover) .th-chip-sep { color: currentColor; opacity: 0.3; }

/* ═══ Catalog hover state — sourced from dashboard-interactive.html ═══════
 * On chip hover the group card adopts the exact CSS-variable token set the
 * Therum OS dashboard uses for that theme, plus the dashboard's signature
 * treatments (Tron grid, Cyberpunk gradient, ASCII prompt borders, etc.)
 * adapted to the catalog surface. ASCII / Tron / Brutal etc. lose their
 * default radius. Regenerate via /tmp/gen_catalog_from_dashboard.php. */

/* Default token shim — keeps the catalog cards looking right when no chip
 * is hovered (uses the same names the dashboard sets per theme). */
.bamleon-cs__catalog-group {
	--bg: #fafafa;
	--surface: #ffffff;
	--surface-2: #f4f4f6;
	--border: rgba(0,0,0,0.06);
	--border-2: rgba(0,0,0,0.12);
	--text: #0a0a0a;
	--text-2: #475569;
	--text-3: #94a3b8;
	--accent: #2563eb;
}
.bamleon-cs__catalog-group:has(.th-chip:hover) {
	background: var(--bg) !important;
	color: var(--text) !important;
	border-color: var(--border) !important;
	transition: background 240ms ease, color 240ms ease, border-color 240ms ease, box-shadow 240ms ease;
}
.bamleon-cs__catalog-group:has(.th-chip:hover) .bamleon-cs__catalog-group-title { color: var(--text-3) !important; }
.bamleon-cs__catalog-group:has(.th-chip:hover) .bamleon-cs__catalog-group-intro { color: var(--text) !important; }
.bamleon-cs__catalog-group:has(.th-chip:hover) .bamleon-cs__catalog-group-body { color: var(--text-2) !important; border-top-color: var(--border) !important; }
.bamleon-cs__catalog-group:has(.th-chip:hover) .th-chip { color: var(--text-2); }
.bamleon-cs__catalog-group:has(.th-chip:hover) .th-chip-sep { color: var(--text-3); }

/* — Per-theme token sets (auto-generated) — */
.bamleon-cs__catalog-group:has(.th-chip--studio:hover), .bamleon-cs__catalog-group[data-active-theme="studio"] { --bg:#0f0f0f;--surface:#1a1a1a;--surface-2:#222222;--border:#2a2a2a;--border-2:#3a3a3a;--text:#ffffff;--text-2:#bbbbbb;--text-3:#969696;--accent:#3b82f6; }
.th-chip--studio:hover { background: var(--accent); color: var(--bg); }
.bamleon-cs__catalog-group:has(.th-chip--studio-pro:hover), .bamleon-cs__catalog-group[data-active-theme="studio-pro"] { --bg:#0e0f14;--surface:#161821;--surface-2:#1e2030;--border:#2a2d3f;--border-2:#06b6d4;--text:#e6e8ee;--text-2:#a8adbf;--text-3:#7a809b;--accent:#06b6d4; }
.th-chip--studio-pro:hover { background: var(--accent); color: var(--bg); }
.bamleon-cs__catalog-group:has(.th-chip--editorial:hover), .bamleon-cs__catalog-group[data-active-theme="editorial"] { --bg:#f8f6f1;--surface:#fdfcf7;--surface-2:#f0ede5;--border:#e0dccf;--border-2:#c8c2b0;--text:#1a1612;--text-2:#5c5448;--text-3:#8a8170; }
.th-chip--editorial:hover { background: var(--accent); color: var(--bg); }
.bamleon-cs__catalog-group:has(.th-chip--mono:hover), .bamleon-cs__catalog-group[data-active-theme="mono"] { --bg:#000000;--surface:#0a0a0a;--surface-2:#141414;--border:#2a2a2a;--border-2:#3a3a3a;--text:#ffffff;--text-2:#b0b0b0;--text-3:#909090; }
.th-chip--mono:hover { background: var(--accent); color: var(--bg); }
.bamleon-cs__catalog-group:has(.th-chip--paper:hover), .bamleon-cs__catalog-group[data-active-theme="paper"] { --bg:#fafaf7;--surface:#ffffff;--surface-2:#f4f3ee;--border:#e7e5dd;--border-2:#1c1917;--text:#1c1917;--text-2:#44403c;--text-3:#78716c;--accent:#1c1917; }
.th-chip--paper:hover { background: var(--accent); color: var(--bg); }
.bamleon-cs__catalog-group:has(.th-chip--calm:hover), .bamleon-cs__catalog-group[data-active-theme="calm"] { --bg:#f7f9f6;--surface:#ffffff;--surface-2:#eef2ec;--border:#d8e2d4;--border-2:#b6c4af;--text:#1f2a1b;--text-2:#4d5a47;--text-3:#7a8772; }
.th-chip--calm:hover { background: var(--accent); color: var(--bg); }
.bamleon-cs__catalog-group:has(.th-chip--studio-light:hover), .bamleon-cs__catalog-group[data-active-theme="studio-light"] { --bg:#0a0a14;--surface:#13131f;--surface-2:#1c1c2c;--border:#2a2a3a;--border-2:#3a3a4a;--text:#f0f0fa;--text-2:#a8a8c0;--text-3:#7878a0;--accent:#a78bfa; }
.th-chip--studio-light:hover { background: var(--accent); color: var(--bg); }
.bamleon-cs__catalog-group:has(.th-chip--bamleon-os-dark:hover), .bamleon-cs__catalog-group[data-active-theme="bamleon-os-dark"] { --bg:#0a0a0c;--surface:#141418;--surface-2:#1d1d22;--border:#2a2a30;--border-2:#3672ff;--text:#f7f7fa;--text-2:#b8b8c0;--text-3:#8a8a94;--accent:#3672ff; }
.th-chip--bamleon-os-dark:hover { background: var(--accent); color: var(--bg); }
.bamleon-cs__catalog-group:has(.th-chip--aerial:hover), .bamleon-cs__catalog-group[data-active-theme="aerial"] { --bg:#f0f4f8;--surface:#ffffff;--surface-2:#e6edf5;--border:#c8d4e3;--border-2:#06b6d4;--text:#0c1e3d;--text-2:#3d5478;--text-3:#7a8aa3; }
.th-chip--aerial:hover { background: var(--accent); color: var(--bg); }
.bamleon-cs__catalog-group:has(.th-chip--calibarn:hover), .bamleon-cs__catalog-group[data-active-theme="calibarn"] { --bg:#faf9f3;--surface:#ffffff;--surface-2:#f5f1e3;--border:#e0d8b8;--border-2:#d4af37;--text:#1a1a2e;--text-2:#4a5168;--text-3:#8a90a3; }
.th-chip--calibarn:hover { background: var(--accent); color: var(--bg); }
.bamleon-cs__catalog-group:has(.th-chip--epyon:hover), .bamleon-cs__catalog-group[data-active-theme="epyon"] { --bg:#050000;--surface:#0d0303;--surface-2:#1a0606;--border:#2a0808;--border-2:#b91c1c;--text:#fef2f2;--text-2:#fca5a5;--text-3:#c08686; }
.th-chip--epyon:hover { background: var(--accent); color: var(--bg); }
.bamleon-cs__catalog-group:has(.th-chip--exia:hover), .bamleon-cs__catalog-group[data-active-theme="exia"] { --bg:#020815;--surface:#061222;--surface-2:#0c1a30;--border:#142440;--border-2:#00e5ff;--text:#f0fbff;--text-2:#80d8e8;--text-3:#6dadbb; }
.th-chip--exia:hover { background: var(--accent); color: var(--bg); }
.bamleon-cs__catalog-group:has(.th-chip--hi-nu:hover), .bamleon-cs__catalog-group[data-active-theme="hi-nu"] { --bg:#faf8ff;--surface:#ffffff;--surface-2:#f3edfe;--border:#e6dafd;--border-2:#a78bfa;--text:#1a0a2e;--text-2:#5b3a8a;--text-3:#8a6fb5;--accent:#7c3aed; }
.th-chip--hi-nu:hover { background: var(--accent); color: var(--bg); }
.bamleon-cs__catalog-group:has(.th-chip--kshatriya:hover), .bamleon-cs__catalog-group[data-active-theme="kshatriya"] { --bg:#0d100b;--surface:#171a13;--surface-2:#21261a;--border:#363b2a;--border-2:#84a35e;--text:#f8fae4;--text-2:#c0c890;--text-3:#9ba373;--accent:#84a35e; }
.th-chip--kshatriya:hover { background: var(--accent); color: var(--bg); }
.bamleon-cs__catalog-group:has(.th-chip--nu:hover), .bamleon-cs__catalog-group[data-active-theme="nu"] { --bg:#fafafa;--surface:#ffffff;--surface-2:#f4f4f5;--border:#e4e4e7;--border-2:#a1a1aa;--text:#0a0a0a;--text-2:#404040;--text-3:#737373;--accent:#0f172a; }
.th-chip--nu:hover { background: var(--accent); color: var(--bg); }
.bamleon-cs__catalog-group:has(.th-chip--penelope:hover), .bamleon-cs__catalog-group[data-active-theme="penelope"] { --bg:#f5f5f4;--surface:#ffffff;--surface-2:#e7e5e4;--border:#d6d3d1;--border-2:#65a30d;--text:#1c1917;--text-2:#44403c;--text-3:#78716c;--accent:#65a30d; }
.th-chip--penelope:hover { background: var(--accent); color: var(--bg); }
.bamleon-cs__catalog-group:has(.th-chip--reborns:hover), .bamleon-cs__catalog-group[data-active-theme="reborns"] { --bg:#1a0408;--surface:#2a0d12;--surface-2:#3a1820;--border:#5a2530;--border-2:#eab308;--text:#fff5e0;--text-2:#e8c5a0;--text-3:#b89878;--accent:#eab308; }
.th-chip--reborns:hover { background: var(--accent); color: var(--bg); }
.bamleon-cs__catalog-group:has(.th-chip--rx-78:hover), .bamleon-cs__catalog-group[data-active-theme="rx-78"] { --bg:#f4f5f7;--surface:#ffffff;--surface-2:#eef0f3;--border:#d8dce3;--border-2:#fb2f38;--text:#1a1a2e;--text-2:#4a5168;--text-3:#8a90a3; }
.th-chip--rx-78:hover { background: var(--accent); color: var(--bg); }
.bamleon-cs__catalog-group:has(.th-chip--sazabi:hover), .bamleon-cs__catalog-group[data-active-theme="sazabi"] { --bg:#0a0506;--surface:#1a0a0c;--surface-2:#2a1014;--border:#3a1a1f;--border-2:#d4af37;--text:#fff5e6;--text-2:#d4b896;--text-3:#a89484; }
.th-chip--sazabi:hover { background: var(--accent); color: var(--bg); }
.bamleon-cs__catalog-group:has(.th-chip--sinanju:hover), .bamleon-cs__catalog-group[data-active-theme="sinanju"] { --bg:#0a0204;--surface:#1a0608;--surface-2:#2a0a0c;--border:#3a1014;--border-2:#f4c542;--text:#fff5e8;--text-2:#ffd8b8;--text-3:#aa7858; }
.th-chip--sinanju:hover { background: var(--accent); color: var(--bg); }
.bamleon-cs__catalog-group:has(.th-chip--tallgeese:hover), .bamleon-cs__catalog-group[data-active-theme="tallgeese"] { --bg:#fafafa;--surface:#ffffff;--surface-2:#f0f0f0;--border:#d4d4d4;--border-2:#0a0a0a;--text:#0a0a0a;--text-2:#404040;--text-3:#707070;--accent:#dc2626; }
.th-chip--tallgeese:hover { background: var(--accent); color: var(--bg); }
.bamleon-cs__catalog-group:has(.th-chip--unicorn:hover), .bamleon-cs__catalog-group[data-active-theme="unicorn"] { --bg:#050000;--surface:#0d0408;--surface-2:#1a0810;--border:#2a1018;--border-2:#ff2d55;--text:#fff5f7;--text-2:#ffd4dc;--text-3:#a8808e; }
.th-chip--unicorn:hover { background: var(--accent); color: var(--bg); }
.bamleon-cs__catalog-group:has(.th-chip--vidar:hover), .bamleon-cs__catalog-group[data-active-theme="vidar"] { --bg:#080a14;--surface:#0f1322;--surface-2:#181d33;--border:#2c3252;--border-2:#3b3b8c;--text:#f0f2ff;--text-2:#b8bdd8;--text-3:#8c92b3;--accent:#7c3aed; }
.th-chip--vidar:hover { background: var(--accent); color: var(--bg); }
.bamleon-cs__catalog-group:has(.th-chip--xi:hover), .bamleon-cs__catalog-group[data-active-theme="xi"] { --bg:#fafafa;--surface:#ffffff;--surface-2:#f4f4f5;--border:#e4e4e7;--border-2:#15803d;--text:#0a0a0a;--text-2:#404040;--text-3:#737373;--accent:#15803d; }
.th-chip--xi:hover { background: var(--accent); color: var(--bg); }
.bamleon-cs__catalog-group:has(.th-chip--macos:hover), .bamleon-cs__catalog-group[data-active-theme="macos"] { --bg:#f5f5f7;--surface:#ffffff;--surface-2:#ebebed;--border:#d2d2d7;--border-2:#0a84ff;--text:#1d1d1f;--text-2:#515154;--text-3:#86868b;--accent:#0a84ff; }
.th-chip--macos:hover { background: var(--accent); color: var(--bg); }
.bamleon-cs__catalog-group:has(.th-chip--windows-11:hover), .bamleon-cs__catalog-group[data-active-theme="windows-11"] { --bg:#202020;--surface:#2b2b2b;--surface-2:#373737;--border:#454545;--border-2:#0078d4;--text:#ffffff;--text-2:#c8c8c8;--text-3:#969696;--accent:#0078d4; }
.th-chip--windows-11:hover { background: var(--accent); color: var(--bg); }
.bamleon-cs__catalog-group:has(.th-chip--tesla:hover), .bamleon-cs__catalog-group[data-active-theme="tesla"] { --bg:#0a0a0a;--surface:#161616;--surface-2:#222222;--border:#333333;--border-2:#e82127;--text:#ffffff;--text-2:#a0a0a0;--text-3:#707070;--accent:#e82127; }
.th-chip--tesla:hover { background: var(--accent); color: var(--bg); }
.bamleon-cs__catalog-group:has(.th-chip--linear:hover), .bamleon-cs__catalog-group[data-active-theme="linear"] { --bg:#0c0c0f;--surface:#1a1a1f;--surface-2:#26262d;--border:#36363f;--border-2:#5e6ad2;--text:#f7f8f8;--text-2:#b4bcd0;--text-3:#8a91a8;--accent:#5e6ad2; }
.th-chip--linear:hover { background: var(--accent); color: var(--bg); }
.bamleon-cs__catalog-group:has(.th-chip--vercel:hover), .bamleon-cs__catalog-group[data-active-theme="vercel"] { --bg:#000000;--surface:#0a0a0a;--surface-2:#171717;--border:#262626;--border-2:#ffffff;--text:#ffffff;--text-2:#a3a3a3;--text-3:#737373;--accent:#ffffff; }
.th-chip--vercel:hover { background: var(--accent); color: var(--bg); }
.bamleon-cs__catalog-group:has(.th-chip--notion:hover), .bamleon-cs__catalog-group[data-active-theme="notion"] { --bg:#fbfaf6;--surface:#ffffff;--surface-2:#f1f0eb;--border:#e0dfd8;--border-2:#37352f;--text:#37352f;--text-2:#5a5a55;--text-3:#787774;--accent:#37352f; }
.th-chip--notion:hover { background: var(--accent); color: var(--bg); }
.bamleon-cs__catalog-group:has(.th-chip--spotify:hover), .bamleon-cs__catalog-group[data-active-theme="spotify"] { --bg:#121212;--surface:#181818;--surface-2:#282828;--border:#404040;--border-2:#1db954;--text:#ffffff;--text-2:#b3b3b3;--text-3:#727272;--accent:#1db954; }
.th-chip--spotify:hover { background: var(--accent); color: var(--bg); }
.bamleon-cs__catalog-group:has(.th-chip--ascii:hover), .bamleon-cs__catalog-group[data-active-theme="ascii"] { --bg:#000000;--surface:#050505;--surface-2:#0a0a0a;--border:#1a3a1a;--border-2:#00ff41;--text:#00ff41;--text-2:#33cc33;--text-3:#198a19;--accent:#00ff41; }
.th-chip--ascii:hover { background: var(--accent); color: var(--bg); }
.bamleon-cs__catalog-group:has(.th-chip--marker:hover), .bamleon-cs__catalog-group[data-active-theme="marker"] { --bg:#fffbe6;--surface:#ffffff;--surface-2:#fef9c3;--border:#fde68a;--border-2:#ec4899;--text:#1f1f1f;--text-2:#525252;--text-3:#737373;--accent:#ec4899; }
.th-chip--marker:hover { background: var(--accent); color: var(--bg); }
.bamleon-cs__catalog-group:has(.th-chip--crayon:hover), .bamleon-cs__catalog-group[data-active-theme="crayon"] { --bg:#fef3c7;--surface:#ffffff;--surface-2:#fde68a;--border:#fcd34d;--border-2:#f97316;--text:#7c2d12;--text-2:#9a3412;--text-3:#c2410c;--accent:#f97316; }
.th-chip--crayon:hover { background: var(--accent); color: var(--bg); }
.bamleon-cs__catalog-group:has(.th-chip--newspaper:hover), .bamleon-cs__catalog-group[data-active-theme="newspaper"] { --bg:#f4f1e8;--surface:#fffdf6;--surface-2:#ebe8de;--border:#d8d3c4;--border-2:#1c1c1c;--text:#1c1c1c;--text-2:#3a3a36;--text-3:#6a6660;--accent:#1c1c1c; }
.th-chip--newspaper:hover { background: var(--accent); color: var(--bg); }
.bamleon-cs__catalog-group:has(.th-chip--holographic:hover), .bamleon-cs__catalog-group[data-active-theme="holographic"] { --bg:#1a0d2e;--surface:#2a1a44;--surface-2:#3d2a5e;--border:#5a3d80;--border-2:#a78bfa;--text:#fdf4ff;--text-2:#e9d5ff;--text-3:#c4b5fd;--accent:#a78bfa; }
.th-chip--holographic:hover { background: var(--accent); color: var(--bg); }
.bamleon-cs__catalog-group:has(.th-chip--tron:hover), .bamleon-cs__catalog-group[data-active-theme="tron"] { --bg:#000510;--surface:#001020;--surface-2:#001830;--border:#003050;--border-2:#00d4ff;--text:#e0f7ff;--text-2:#80d8ff;--text-3:#4a90b8; }
.th-chip--tron:hover { background: var(--accent); color: var(--bg); }
.bamleon-cs__catalog-group:has(.th-chip--cyberpunk:hover), .bamleon-cs__catalog-group[data-active-theme="cyberpunk"] { --bg:#0a0014;--surface:#150a24;--surface-2:#1f1230;--border:#3a1f4a;--border-2:#ff00aa;--text:#ffffff;--text-2:#e0a0d4;--text-3:#a87a98; }
.th-chip--cyberpunk:hover { background: var(--accent); color: var(--bg); }
.bamleon-cs__catalog-group:has(.th-chip--vaporwave:hover), .bamleon-cs__catalog-group[data-active-theme="vaporwave"] { --bg:#1a0033;--surface:#2a0a4a;--surface-2:#3a1a5a;--border:#ff71ce;--border-2:#b967ff;--text:#ffffff;--text-2:#ffb6e1;--text-3:#b380c4; }
.th-chip--vaporwave:hover { background: var(--accent); color: var(--bg); }
.bamleon-cs__catalog-group:has(.th-chip--velvet:hover), .bamleon-cs__catalog-group[data-active-theme="velvet"] { --bg:#0a0628;--surface:#1a0f4a;--surface-2:#251966;--border:#3a2c8a;--border-2:#a78bfa;--text:#f4f0ff;--text-2:#c4b5fd;--text-3:#9d8de0;--accent:#a78bfa; }
.th-chip--velvet:hover { background: var(--accent); color: var(--bg); }

/* ── Hover rules for the remaining 18 themes — chip-fill + group recolor.
   Colors pulled directly from each theme's palette in bamleon-design.php. ── */

/* Core daily-drivers extras */
.bamleon-cs__catalog-group:has(.th-chip--carbon:hover), .bamleon-cs__catalog-group[data-active-theme="carbon"] { --bg:#161616;--surface:#262626;--surface-2:#393939;--border:#525252;--border-2:#0f62fe;--text:#f4f4f4;--text-2:#c6c6c6;--text-3:#a8a8a8;--accent:#0f62fe; }
.th-chip--carbon:hover { background: var(--accent); color: var(--bg); }
.bamleon-cs__catalog-group:has(.th-chip--graphite:hover), .bamleon-cs__catalog-group[data-active-theme="graphite"] { --bg:#1a1a1f;--surface:#26262d;--surface-2:#36363f;--border:#454545;--border-2:#a78bfa;--text:#f5f5f7;--text-2:#a3a3a3;--text-3:#737373;--accent:#a78bfa; }
.th-chip--graphite:hover { background: var(--accent); color: var(--bg); }
.bamleon-cs__catalog-group:has(.th-chip--midnight:hover), .bamleon-cs__catalog-group[data-active-theme="midnight"] { --bg:#020617;--surface:#0f172a;--surface-2:#1e293b;--border:#334155;--border-2:#5eead4;--text:#e2e8f0;--text-2:#94a3b8;--text-3:#64748b;--accent:#5eead4; }
.th-chip--midnight:hover { background: var(--accent); color: var(--bg); }
.bamleon-cs__catalog-group:has(.th-chip--aurora:hover), .bamleon-cs__catalog-group[data-active-theme="aurora"] { --bg:#0e0e10;--surface:#1c1c1f;--surface-2:#2c2c2e;--border:#3a3a3a;--border-2:#0a84ff;--text:#f5f5f7;--text-2:#a3a3a3;--text-3:#737373;--accent:#0a84ff; }
.th-chip--aurora:hover { background: var(--accent); color: var(--bg); }
.bamleon-cs__catalog-group:has(.th-chip--glass:hover), .bamleon-cs__catalog-group[data-active-theme="glass"] { --bg:#0e0f14;--surface:#161821;--surface-2:#1e2030;--border:#2a2d3f;--border-2:#06b6d4;--text:#e6e8ee;--text-2:#a8adbf;--text-3:#7a809b;--accent:#06b6d4; }
.th-chip--glass:hover { background: var(--accent); color: var(--bg); }
.bamleon-cs__catalog-group:has(.th-chip--wireframe:hover), .bamleon-cs__catalog-group[data-active-theme="wireframe"] { --bg:#ffffff;--surface:#fafafa;--surface-2:#f0f0f0;--border:#0a0a0a;--border-2:#00ff41;--text:#0a0a0a;--text-2:#525252;--text-3:#737373;--accent:#00ff41; }
.th-chip--wireframe:hover { background: var(--accent); color: var(--bg); }
.bamleon-cs__catalog-group:has(.th-chip--facenote:hover), .bamleon-cs__catalog-group[data-active-theme="facenote"] { --bg:#fdfcf7;--surface:#ffffff;--surface-2:#f5f1e3;--border:#e7e5dd;--border-2:#38e8e2;--text:#1c1917;--text-2:#44403c;--text-3:#78716c;--accent:#38e8e2; }
.th-chip--facenote:hover { background: var(--accent); color: var(--bg); }

/* Mecha extras */
.bamleon-cs__catalog-group:has(.th-chip--big-o:hover), .bamleon-cs__catalog-group[data-active-theme="big-o"] { --bg:#0d0d10;--surface:#171717;--surface-2:#242424;--border:#3a3a3a;--border-2:#fbbf24;--text:#fef9c3;--text-2:#fde68a;--text-3:#fcd34d;--accent:#fbbf24; }
.th-chip--big-o:hover { background: var(--accent); color: var(--bg); }
.bamleon-cs__catalog-group:has(.th-chip--big-o-final:hover), .bamleon-cs__catalog-group[data-active-theme="big-o-final"] { --bg:#0a0a0a;--surface:#141414;--surface-2:#1c1c1c;--border:#2a2a2a;--border-2:#dc2626;--text:#fef2f2;--text-2:#fca5a5;--text-3:#f87171;--accent:#dc2626; }
.th-chip--big-o-final:hover { background: var(--accent); color: var(--bg); }

/* Familiar extras */
.bamleon-cs__catalog-group:has(.th-chip--apple-music:hover), .bamleon-cs__catalog-group[data-active-theme="apple-music"] { --bg:#000000;--surface:#1c1c1e;--surface-2:#2c2c2e;--border:#3a3a3c;--border-2:#fa233b;--text:#ffffff;--text-2:#ebebf5;--text-3:#8e8e93;--accent:#fa233b; }
.th-chip--apple-music:hover { background: var(--accent); color: var(--bg); }
.bamleon-cs__catalog-group:has(.th-chip--lucid:hover), .bamleon-cs__catalog-group[data-active-theme="lucid"] { --bg:#0a0a0c;--surface:#13131f;--surface-2:#1d1d22;--border:#2a2a30;--border-2:#00d4ff;--text:#f7f7fa;--text-2:#a8a8c0;--text-3:#6a6a78;--accent:#00d4ff; }
.th-chip--lucid:hover { background: var(--accent); color: var(--bg); }
.bamleon-cs__catalog-group:has(.th-chip--xfinity:hover), .bamleon-cs__catalog-group[data-active-theme="xfinity"] { --bg:#0e0e0e;--surface:#181818;--surface-2:#242424;--border:#363636;--border-2:#a855f7;--text:#fafafa;--text-2:#a1a1aa;--text-3:#71717a;--accent:#a855f7; }
.th-chip--xfinity:hover { background: var(--accent); color: var(--bg); }

/* Glass + gradient variants */
.bamleon-cs__catalog-group:has(.th-chip--glass-light:hover), .bamleon-cs__catalog-group[data-active-theme="glass-light"] { --bg:#f5f5f7;--surface:#ffffff;--surface-2:#ededed;--border:#d2d2d7;--border-2:#0a84ff;--text:#1d1d1f;--text-2:#515154;--text-3:#86868b;--accent:#0a84ff; }
.th-chip--glass-light:hover { background: var(--accent); color: var(--bg); }
.bamleon-cs__catalog-group:has(.th-chip--glass-dark:hover), .bamleon-cs__catalog-group[data-active-theme="glass-dark"] { --bg:#0a0a0a;--surface:#161616;--surface-2:#242424;--border:#363636;--border-2:#a3e635;--text:#fafafa;--text-2:#a3a3a3;--text-3:#737373;--accent:#a3e635; }
.th-chip--glass-dark:hover { background: var(--accent); color: var(--bg); }
.bamleon-cs__catalog-group:has(.th-chip--glass-colored:hover), .bamleon-cs__catalog-group[data-active-theme="glass-colored"] { --bg:#1a0a2e;--surface:#2a1862;--surface-2:#3a2c8a;--border:#4a3a8a;--border-2:#f5389a;--text:#fdf4ff;--text-2:#e9d5ff;--text-3:#c4b5fd;--accent:#f5389a; }
.th-chip--glass-colored:hover { background: var(--accent); color: var(--bg); }
.bamleon-cs__catalog-group:has(.th-chip--glass-spatial:hover), .bamleon-cs__catalog-group[data-active-theme="glass-spatial"] { --bg:#06080e;--surface:#0f1322;--surface-2:#181d33;--border:#2c3252;--border-2:#7878a0;--text:#f7faff;--text-2:#b9d2fb;--text-3:#7a8aa3;--accent:#7878a0; }
.th-chip--glass-spatial:hover { background: var(--accent); color: var(--bg); }
.bamleon-cs__catalog-group:has(.th-chip--gradient-aurora:hover), .bamleon-cs__catalog-group[data-active-theme="gradient-aurora"] { --bg:#0a1628;--surface:#0c1e3d;--surface-2:#0e2c52;--border:#1e3a8a;--border-2:#22d3ee;--text:#e6edf5;--text-2:#94a3b8;--text-3:#64748b;--accent:#22d3ee; }
.th-chip--gradient-aurora:hover { background: var(--accent); color: var(--bg); }
.bamleon-cs__catalog-group:has(.th-chip--blurred-frost:hover), .bamleon-cs__catalog-group[data-active-theme="blurred-frost"] { --bg:#fafafc;--surface:#ffffff;--surface-2:#f0f0fa;--border:#dbe7fb;--border-2:#e879f9;--text:#1d1d22;--text-2:#4a5168;--text-3:#7a8aa3;--accent:#e879f9; }
.th-chip--blurred-frost:hover { background: var(--accent); color: var(--bg); }

/* THREE PALETTES WERE MISSING — adding now. Without these the dropdown
   does NOTHING when the user picks brutal/neon/slate. */
.bamleon-cs__catalog-group[data-active-theme="brutal"] { --bg:#ffffff;--surface:#fafafa;--surface-2:#f0f0f0;--border:#000000;--border-2:#000000;--text:#000000;--text-2:#404040;--text-3:#737373;--accent:#000000; }
.bamleon-cs__catalog-group[data-active-theme="neon"] { --bg:#0a0a0a;--surface:#141414;--surface-2:#1c1c1c;--border:#2a2a2a;--border-2:#ec4899;--text:#ffffff;--text-2:#d4d4d4;--text-3:#a3a3a3;--accent:#ec4899; }
.bamleon-cs__catalog-group[data-active-theme="slate"] { --bg:#f8fafc;--surface:#f1f5f9;--surface-2:#e2e8f0;--border:#cbd5e1;--border-2:#3b82f6;--text:#0f172a;--text-2:#475569;--text-3:#64748b;--accent:#3b82f6; }

/* ── Per-theme font assignments. --theme-font is applied to the card title
   + intro + dropdown so the user sees the theme's font alongside its palette.
   Sourced from each theme's 'font' field in bamleon-design.php. ── */
.bamleon-cs__catalog-group[data-active-theme="studio"],
.bamleon-cs__catalog-group[data-active-theme="slate"],
.bamleon-cs__catalog-group[data-active-theme="windows-11"],
.bamleon-cs__catalog-group[data-active-theme="tesla"],
.bamleon-cs__catalog-group[data-active-theme="linear"],
.bamleon-cs__catalog-group[data-active-theme="spotify"],
.bamleon-cs__catalog-group[data-active-theme="lucid"],
.bamleon-cs__catalog-group[data-active-theme="xfinity"],
.bamleon-cs__catalog-group[data-active-theme="velvet"],
.bamleon-cs__catalog-group[data-active-theme="glass-light"],
.bamleon-cs__catalog-group[data-active-theme="glass-dark"] { --theme-font: 'Inter', sans-serif; }

.bamleon-cs__catalog-group[data-active-theme="studio-pro"],
.bamleon-cs__catalog-group[data-active-theme="mono"],
.bamleon-cs__catalog-group[data-active-theme="wireframe"],
.bamleon-cs__catalog-group[data-active-theme="exia"],
.bamleon-cs__catalog-group[data-active-theme="vercel"],
.bamleon-cs__catalog-group[data-active-theme="ascii"],
.bamleon-cs__catalog-group[data-active-theme="cyberpunk"] { --theme-font: 'JetBrains Mono', ui-monospace, monospace; }

.bamleon-cs__catalog-group[data-active-theme="editorial"],
.bamleon-cs__catalog-group[data-active-theme="paper"],
.bamleon-cs__catalog-group[data-active-theme="newspaper"],
.bamleon-cs__catalog-group[data-active-theme="notion"],
.bamleon-cs__catalog-group[data-active-theme="calibarn"],
.bamleon-cs__catalog-group[data-active-theme="studio-light"] { --theme-font: 'Crimson Pro', Georgia, serif; }

.bamleon-cs__catalog-group[data-active-theme="calm"],
.bamleon-cs__catalog-group[data-active-theme="aerial"],
.bamleon-cs__catalog-group[data-active-theme="penelope"],
.bamleon-cs__catalog-group[data-active-theme="xi"],
.bamleon-cs__catalog-group[data-active-theme="blurred-frost"] { --theme-font: 'DM Sans', sans-serif; }

.bamleon-cs__catalog-group[data-active-theme="brutal"],
.bamleon-cs__catalog-group[data-active-theme="tallgeese"] { --theme-font: 'Archivo', sans-serif; }

.bamleon-cs__catalog-group[data-active-theme="neon"],
.bamleon-cs__catalog-group[data-active-theme="holographic"] { --theme-font: 'Bebas Neue', sans-serif; }

.bamleon-cs__catalog-group[data-active-theme="carbon"] { --theme-font: 'IBM Plex Sans', sans-serif; }

.bamleon-cs__catalog-group[data-active-theme="graphite"],
.bamleon-cs__catalog-group[data-active-theme="aurora"],
.bamleon-cs__catalog-group[data-active-theme="glass"],
.bamleon-cs__catalog-group[data-active-theme="glass-spatial"],
.bamleon-cs__catalog-group[data-active-theme="macos"],
.bamleon-cs__catalog-group[data-active-theme="apple-music"] { --theme-font: -apple-system, BlinkMacSystemFont, 'SF Pro', system-ui, sans-serif; }

.bamleon-cs__catalog-group[data-active-theme="midnight"],
.bamleon-cs__catalog-group[data-active-theme="facenote"],
.bamleon-cs__catalog-group[data-active-theme="nu"],
.bamleon-cs__catalog-group[data-active-theme="hi-nu"],
.bamleon-cs__catalog-group[data-active-theme="vidar"],
.bamleon-cs__catalog-group[data-active-theme="bamleon-os-dark"],
.bamleon-cs__catalog-group[data-active-theme="glass-colored"],
.bamleon-cs__catalog-group[data-active-theme="gradient-aurora"] { --theme-font: 'Space Grotesk', sans-serif; }

.bamleon-cs__catalog-group[data-active-theme="rx-78"],
.bamleon-cs__catalog-group[data-active-theme="unicorn"] { --theme-font: 'Audiowide', cursive; }

.bamleon-cs__catalog-group[data-active-theme="epyon"],
.bamleon-cs__catalog-group[data-active-theme="kshatriya"],
.bamleon-cs__catalog-group[data-active-theme="reborns"],
.bamleon-cs__catalog-group[data-active-theme="tron"] { --theme-font: 'Orbitron', sans-serif; }

.bamleon-cs__catalog-group[data-active-theme="sazabi"],
.bamleon-cs__catalog-group[data-active-theme="sinanju"],
.bamleon-cs__catalog-group[data-active-theme="big-o"],
.bamleon-cs__catalog-group[data-active-theme="big-o-final"] { --theme-font: 'Playfair Display', Georgia, serif; }

.bamleon-cs__catalog-group[data-active-theme="marker"],
.bamleon-cs__catalog-group[data-active-theme="crayon"] { --theme-font: 'Caveat', cursive; }

.bamleon-cs__catalog-group[data-active-theme="vaporwave"] { --theme-font: 'VT323', monospace; }

/* Universal fallback — guarantees any future chip without a specific rule
   still gets a hover. Falls back to the Hi-Nu accent if no theme palette set. */
.th-chip:hover {
	background: var(--accent, var(--bamleon-accent));
	color: var(--bg, var(--bamleon-bg));
	border-color: var(--accent, var(--bamleon-accent));
}

/* ── Theme dropdown selector ──────────────────────────────────────────────
   Replaces chip lists. One dropdown per group, fixed min-width prevents
   reflow. On change, JS sets data-active-theme on the parent group →
   triggers the palette + font recolor rules above. */
.bamleon-cs__theme-dropdown-wrap {
	position: relative;
	display: block;
	width: 100%;
	max-width: 100%;
}
.bamleon-cs__theme-dropdown {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	background: var(--surface, rgba(255, 255, 255, 0.06));
	color: var(--text, var(--bamleon-text));
	border: 1px solid var(--border-2, var(--bamleon-border));
	border-radius: var(--bamleon-radius-pill);
	padding: 12px 44px 12px 18px;
	font-family: var(--theme-font, var(--bamleon-font-display));
	font-size: var(--bamleon-text-base);
	font-weight: 500;
	letter-spacing: -0.005em;
	line-height: 1.3;
	cursor: pointer;
	transition: background 200ms var(--bamleon-ease-out),
	            border-color 200ms var(--bamleon-ease-out),
	            color 200ms var(--bamleon-ease-out);
}
.bamleon-cs__theme-dropdown:hover {
	border-color: var(--accent, var(--bamleon-accent));
}
/* Strong visible focus ring for keyboard users (a11y) */
.bamleon-cs__theme-dropdown:focus-visible {
	outline: 2px solid var(--accent, var(--bamleon-accent));
	outline-offset: 2px;
	border-color: var(--accent, var(--bamleon-accent));
}
.bamleon-cs__theme-dropdown-chev {
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 14px;
	color: var(--text-2, var(--bamleon-text-2));
	pointer-events: none;
	font-family: var(--theme-font, var(--bamleon-font-display));
	transition: color 200ms var(--bamleon-ease-out);
}
.bamleon-cs__theme-dropdown-wrap:hover .bamleon-cs__theme-dropdown-chev,
.bamleon-cs__theme-dropdown:focus-visible + .bamleon-cs__theme-dropdown-chev {
	color: var(--accent, var(--bamleon-accent));
}
.bamleon-cs__theme-dropdown option {
	/* options render in OS chrome; force readable colors in case the
	   theme's bg/text don't have enough contrast with browser defaults */
	background: var(--bg, #fff);
	color: var(--text, #0a0a0a);
	font-weight: 400;
	padding: 8px 12px;
}
/* Screen-reader-only visible label */
.bamleon-cs__theme-dropdown-label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* — Theme signature treatments — adapted to the catalog card surface. — */

/* Tron — neon cyan grid background + zero-radius hard edges. */
.bamleon-cs__catalog-group:has(.th-chip--tron:hover), .bamleon-cs__catalog-group[data-active-theme="tron"] {
	background-image:
		linear-gradient(rgba(0,212,255,0.06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(0,212,255,0.06) 1px, transparent 1px),
		linear-gradient(180deg, var(--bg) 0%, var(--bg) 100%) !important;
	background-size: 32px 32px, 32px 32px, 100% 100% !important;
	border-radius: 0 !important;
	box-shadow: 0 0 0 1px var(--accent), 0 0 30px -8px rgba(0,212,255,0.5) !important;
}

/* Cyberpunk — diagonal pink-purple gradient, hard edges, yellow drop. */
.bamleon-cs__catalog-group:has(.th-chip--cyberpunk:hover), .bamleon-cs__catalog-group[data-active-theme="cyberpunk"] {
	background: linear-gradient(135deg, #150a24, #1f1230) !important;
	border-radius: 0 !important;
	box-shadow: 4px 4px 0 #fbff00, 0 0 0 1px var(--accent) !important;
}

/* ASCII — JetBrains Mono everywhere, green-on-black with green border,
 * zero radius. */
.bamleon-cs__catalog-group:has(.th-chip--ascii:hover), .bamleon-cs__catalog-group[data-active-theme="ascii"] {
	font-family: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, Menlo, monospace !important;
	border: 1px solid var(--accent) !important;
	border-radius: 0 !important;
	box-shadow: 0 0 24px -6px rgba(0,255,65,0.5) !important;
}
.bamleon-cs__catalog-group:has(.th-chip--ascii:hover), .bamleon-cs__catalog-group[data-active-theme="ascii"] .bamleon-cs__catalog-group-title::before { content: "─── "; opacity: 0.45; }
.bamleon-cs__catalog-group:has(.th-chip--ascii:hover), .bamleon-cs__catalog-group[data-active-theme="ascii"] .bamleon-cs__catalog-group-title::after  { content: " ───"; opacity: 0.45; }

/* Crayon — hand-drawn vibe: 3px orange border, yellow shadow offset, larger
 * cursive body. */
.bamleon-cs__catalog-group:has(.th-chip--crayon:hover), .bamleon-cs__catalog-group[data-active-theme="crayon"] {
	font-family: 'Caveat', 'Patrick Hand', cursive !important;
	font-size: 17px;
	border: 3px solid #f97316 !important;
	border-radius: 18px !important;
	box-shadow: 6px 6px 0 #fbbf24 !important;
}

/* Newspaper — serif everywhere, sharp edges, hairline border. */
.bamleon-cs__catalog-group:has(.th-chip--newspaper:hover), .bamleon-cs__catalog-group[data-active-theme="newspaper"] {
	font-family: 'Playfair Display', 'Iowan Old Style', Georgia, serif !important;
	border: 1px solid var(--text) !important;
	border-radius: 2px !important;
	box-shadow: none !important;
}
.bamleon-cs__catalog-group:has(.th-chip--newspaper:hover), .bamleon-cs__catalog-group[data-active-theme="newspaper"] .bamleon-cs__catalog-group-title {
	font-family: 'JetBrains Mono', monospace !important;
	letter-spacing: 0.14em !important;
}

/* Marker — handwritten body, slight rotation, no shadow. */
.bamleon-cs__catalog-group:has(.th-chip--marker:hover), .bamleon-cs__catalog-group[data-active-theme="marker"] {
	font-family: 'Permanent Marker', 'Caveat', 'Comic Sans MS', cursive !important;
	transform: rotate(-0.4deg);
	box-shadow: none !important;
}

/* Holographic — iridescent gradient bg. */
.bamleon-cs__catalog-group:has(.th-chip--holographic:hover), .bamleon-cs__catalog-group[data-active-theme="holographic"] {
	background: linear-gradient(135deg, #ff80b5 0%, #9089fc 50%, #80ffea 100%) !important;
	border-radius: 18px !important;
	box-shadow: 0 0 0 1px rgba(255,255,255,0.5), 0 8px 32px -6px rgba(183,148,244,0.55) !important;
}

/* Vaporwave — pixel font + bigger size + purple gradient. */
.bamleon-cs__catalog-group:has(.th-chip--vaporwave:hover), .bamleon-cs__catalog-group[data-active-theme="vaporwave"] {
	font-family: 'VT323', 'VCR OSD Mono', ui-monospace, monospace !important;
	font-size: 1.05em;
	letter-spacing: 0.02em;
	background: linear-gradient(135deg, #1a0033, #4a0e6e) !important;
}

/* Velvet — rich serif italic. */
.bamleon-cs__catalog-group:has(.th-chip--velvet:hover), .bamleon-cs__catalog-group[data-active-theme="velvet"] {
	font-family: 'Iowan Old Style', 'Charter', Georgia, serif !important;
	background: radial-gradient(ellipse at center, #2a1862, #0a0628) !important;
}
.bamleon-cs__catalog-group:has(.th-chip--velvet:hover), .bamleon-cs__catalog-group[data-active-theme="velvet"] .bamleon-cs__catalog-group-intro { font-style: italic; font-weight: 500; }

/* Editorial — soft cream surface, no border, left-rule callout. */
.bamleon-cs__catalog-group:has(.th-chip--editorial:hover), .bamleon-cs__catalog-group[data-active-theme="editorial"] {
	font-family: 'Iowan Old Style', 'Charter', 'Source Serif Pro', Georgia, serif !important;
	background: #fdfcf7 !important;
	border: 0 !important;
	border-left: 3px solid var(--text) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

/* Paper — warm cream + serif. */
.bamleon-cs__catalog-group:has(.th-chip--paper:hover), .bamleon-cs__catalog-group[data-active-theme="paper"] {
	font-family: 'Iowan Old Style', 'Charter', Georgia, serif !important;
}

/* Mono — JetBrains everywhere, sharp edges. */
.bamleon-cs__catalog-group:has(.th-chip--mono:hover), .bamleon-cs__catalog-group[data-active-theme="mono"] {
	font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace !important;
	border-radius: var(--bamleon-radius-sm) !important;
}

/* Cockpit (Gundam) themes that use Orbitron headings. */
.bamleon-cs__catalog-group:has(.th-chip--calibarn:hover), .bamleon-cs__catalog-group[data-active-theme="calibarn"] .bamleon-cs__catalog-group-title,
.bamleon-cs__catalog-group:has(.th-chip--calibarn:hover), .bamleon-cs__catalog-group[data-active-theme="calibarn"] .bamleon-cs__catalog-group-intro,
.bamleon-cs__catalog-group:has(.th-chip--epyon:hover), .bamleon-cs__catalog-group[data-active-theme="epyon"] .bamleon-cs__catalog-group-title,
.bamleon-cs__catalog-group:has(.th-chip--epyon:hover), .bamleon-cs__catalog-group[data-active-theme="epyon"] .bamleon-cs__catalog-group-intro,
.bamleon-cs__catalog-group:has(.th-chip--sazabi:hover), .bamleon-cs__catalog-group[data-active-theme="sazabi"] .bamleon-cs__catalog-group-title,
.bamleon-cs__catalog-group:has(.th-chip--sazabi:hover), .bamleon-cs__catalog-group[data-active-theme="sazabi"] .bamleon-cs__catalog-group-intro,
.bamleon-cs__catalog-group:has(.th-chip--sinanju:hover), .bamleon-cs__catalog-group[data-active-theme="sinanju"] .bamleon-cs__catalog-group-title,
.bamleon-cs__catalog-group:has(.th-chip--sinanju:hover), .bamleon-cs__catalog-group[data-active-theme="sinanju"] .bamleon-cs__catalog-group-intro,
.bamleon-cs__catalog-group:has(.th-chip--reborns:hover), .bamleon-cs__catalog-group[data-active-theme="reborns"] .bamleon-cs__catalog-group-title,
.bamleon-cs__catalog-group:has(.th-chip--reborns:hover), .bamleon-cs__catalog-group[data-active-theme="reborns"] .bamleon-cs__catalog-group-intro,
.bamleon-cs__catalog-group:has(.th-chip--vidar:hover), .bamleon-cs__catalog-group[data-active-theme="vidar"] .bamleon-cs__catalog-group-title,
.bamleon-cs__catalog-group:has(.th-chip--vidar:hover), .bamleon-cs__catalog-group[data-active-theme="vidar"] .bamleon-cs__catalog-group-intro {
	font-family: 'Orbitron', 'Eurostile', 'Inter', sans-serif !important;
	letter-spacing: var(--bamleon-tracking-wide);
	text-transform: uppercase;
}

/* Glow accents on the dark cockpit themes for depth. */
.bamleon-cs__catalog-group:has(.th-chip--epyon:hover), .bamleon-cs__catalog-group[data-active-theme="epyon"]   { box-shadow: 0 0 0 1px var(--accent), 0 0 24px -6px rgba(192,132,252,0.45) !important; }
.bamleon-cs__catalog-group:has(.th-chip--sinanju:hover), .bamleon-cs__catalog-group[data-active-theme="sinanju"] { box-shadow: 0 0 0 1px var(--accent), 0 0 28px -6px rgba(248,113,113,0.5) !important; }
.bamleon-cs__catalog-group:has(.th-chip--sazabi:hover), .bamleon-cs__catalog-group[data-active-theme="sazabi"]  { box-shadow: 0 0 0 1px var(--accent), 0 0 24px -6px rgba(220,38,38,0.45) !important; }
.bamleon-cs__catalog-group::before { content: none; }
.bamleon-cs__catalog-group-title {
	font-family: var(--bamleon-font-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin: 4px 0 0;
}
/* High-level intro: what this theme group represents. Larger, leading. */
.bamleon-cs__catalog-group-intro {
	font-family: var(--bamleon-font-display);
	font-size: var(--bamleon-text-base);
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: var(--bamleon-tracking-normal);
	color: var(--bamleon-text);
	margin: 4px 0 0;
}
/* Theme list: small mono, secondary, separated by dot */
.bamleon-cs__catalog-group-body {
	font-family: var(--bamleon-font-mono);
	font-size: var(--bamleon-text-xs);
	font-weight: 500;
	line-height: 1.7;
	letter-spacing: var(--bamleon-tracking-wide);
	color: var(--bamleon-text-2);
	margin: 8px 0 0;
	padding-top: 12px;
	border-top: 1px solid rgba(0,0,0,0.08);
}
/* Card 1 (Core) is now light like the others — dark text reads on white */
/* All 5 catalog cards are now equal-width light cards. The top accent bar
 * still color-codes each group, but the card itself stays clean so the
 * per-theme hover repaint reads against a neutral baseline. */
.bamleon-cs__catalog-group:nth-child(1) { background: #ffffff; }
.bamleon-cs__catalog-group:nth-child(1)::before { background: linear-gradient(90deg, #5B8DBE 0%, #a78bfa 25%, #ef4444 50%, #f59e0b 75%, #10b981 100%); }
.bamleon-cs__catalog-group:nth-child(1) .bamleon-cs__catalog-group-title { color: #475569; }

.bamleon-cs__catalog-group:nth-child(2) { background: #ffffff; }
.bamleon-cs__catalog-group:nth-child(2)::before { background: #1e40af; }
.bamleon-cs__catalog-group:nth-child(2) .bamleon-cs__catalog-group-title { color: #1e40af; }

.bamleon-cs__catalog-group:nth-child(3) { background: #ffffff; }
.bamleon-cs__catalog-group:nth-child(3)::before { background: #475569; }
.bamleon-cs__catalog-group:nth-child(3) .bamleon-cs__catalog-group-title { color: #334155; }

.bamleon-cs__catalog-group:nth-child(4) { background: #ffffff; }
.bamleon-cs__catalog-group:nth-child(4)::before { background: #047857; }
.bamleon-cs__catalog-group:nth-child(4) .bamleon-cs__catalog-group-title { color: #065f46; }

.bamleon-cs__catalog-group:nth-child(5) { background: #ffffff; }
.bamleon-cs__catalog-group:nth-child(5)::before { background: #b91c1c; }
.bamleon-cs__catalog-group:nth-child(5) .bamleon-cs__catalog-group-title { color: #b91c1c; }

/* ── Per-group hover-image visuals — thematic background that conveys
 * each catalog group's mood when the card is hovered. ─────────────── */
/* Core daily-drivers — Studio Light + Therum OS Dark side-by-side feel */
.bamleon-cs__catalog-group:nth-child(1) {
	--group-hover:
		linear-gradient(90deg, #f6f6f6 0% 49%, transparent 49% 51%, #0a0a0c 51% 100%),
		linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.1) 100%);
}
/* Sixteen Gundams — cockpit display, anime cell-shading bands */
.bamleon-cs__catalog-group:nth-child(2) {
	--group-hover:
		repeating-linear-gradient(135deg, transparent 0 24px, rgba(255,255,255,0.04) 24px 25px),
		radial-gradient(ellipse at 25% 30%, rgba(250,204,21,0.5), transparent 40%),
		radial-gradient(ellipse at 75% 65%, rgba(239,68,68,0.55), transparent 40%),
		linear-gradient(135deg, #0c1d52 0%, #1e3a8a 55%, #312e81 100%);
}
/* Kinda-Familiar — dark macOS Sequoia-style window with traffic-light dots,
 * dark background so white text reads on hover. */
.bamleon-cs__catalog-group:nth-child(3) {
	--group-hover:
		radial-gradient(circle at 28px 28px, #ff5f56 4px, transparent 5px),
		radial-gradient(circle at 48px 28px, #ffbd2e 4px, transparent 5px),
		radial-gradient(circle at 68px 28px, #27c93f 4px, transparent 5px),
		linear-gradient(180deg, rgba(255,255,255,0.04) 0 56px, transparent 56px),
		linear-gradient(160deg, #1c1c1e 0%, #2c2c2e 60%, #1c1c1e 100%);
}
/* Wildcards — ASCII/holographic iridescent */
.bamleon-cs__catalog-group:nth-child(4) {
	--group-hover:
		repeating-linear-gradient(0deg, transparent 0 14px, rgba(255,255,255,0.04) 14px 15px),
		repeating-linear-gradient(90deg, transparent 0 14px, rgba(255,255,255,0.04) 14px 15px),
		linear-gradient(120deg, #10b981 0%, #06b6d4 35%, #8b5cf6 70%, #f59e0b 100%);
}
/* Brand drops — Tron grid + Cyberpunk neon */
.bamleon-cs__catalog-group:nth-child(5) {
	--group-hover:
		repeating-linear-gradient(0deg, transparent 0 32px, rgba(6,182,212,0.18) 32px 33px),
		repeating-linear-gradient(90deg, transparent 0 32px, rgba(217,70,239,0.18) 32px 33px),
		radial-gradient(circle at 20% 30%, rgba(6,182,212,0.65), transparent 45%),
		radial-gradient(circle at 80% 70%, rgba(217,70,239,0.6), transparent 45%),
		linear-gradient(135deg, #020617 0%, #1a0a1a 100%);
}
/* Core daily-drivers already has a dark gradient — keep its title light */
.bamleon-cs__catalog-group:nth-child(1):hover .bamleon-cs__catalog-group-title {
	color: rgba(255,255,255,0.9) !important;
}
@media (max-width: 900px) {
	.bamleon-cs__catalog { padding: 28px 20px; }
	.bamleon-cs__catalog-grid { grid-template-columns: 1fr; }
	.bamleon-cs__catalog-group:nth-child(1) { grid-column: auto; }
}

/* ─── Subsection heads + leads (used in S07, S09) ─────────────────────── */
.bamleon-cs__subsection-head {
	font-family: var(--bamleon-font-display);
	font-size: clamp(22px, 2.2vw, 30px);
	font-weight: 700;
	letter-spacing: -0.025em;
	color: var(--bamleon-text);
	margin: 56px 0 14px;
	padding-top: 24px;
	border-top: 1px solid var(--bamleon-border);
}
.bamleon-cs__subsection-head:first-child { margin-top: 32px; }
.bamleon-cs__subsection-lead {
	font-family: var(--bamleon-font-display);
	font-size: 15px;
	line-height: 1.55;
	color: var(--bamleon-text-2);
	max-width: none;
	margin: 0 0 24px;
}

/* ─── Performance Posture (S07) — redesign: 3 distinct cards stacked,
 * each with its own gradient/accent for visual rhythm. Hero number
 * left, title + description right, full-width on desktop. ────────── */
.bamleon-cs__perf-posture {
	margin: 48px 0 56px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.bamleon-cs__perf-posture .bamleon-cs__diagram--stack {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 0;
	margin: 0;
	background: none;
	border: 0;
}
.bamleon-cs__perf-posture .bamleon-cs__stack-layer {
	display: grid;
	grid-template-columns: 140px 1fr;
	gap: 36px;
	width: 100%;
	max-width: 100%;
	align-items: center;
	padding: 32px 40px;
	margin: 0;
	border-radius: 18px;
	border: 1px solid rgba(0,0,0,0.06);
	box-shadow:
		0 1px 2px rgba(20,20,30,0.04),
		0 12px 28px -12px rgba(20,20,30,0.08),
		inset 0 1px 0 rgba(255,255,255,0.95);
	transition: transform 280ms cubic-bezier(.32,.72,0,1), box-shadow 280ms cubic-bezier(.32,.72,0,1);
	position: relative;
	overflow: hidden;
}
.bamleon-cs__perf-posture .bamleon-cs__stack-layer:hover {
	transform: translateX(4px);
}
/* Bright accent bar on left edge of each layer */
.bamleon-cs__perf-posture .bamleon-cs__stack-layer::before {
	content: "";
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 4px;
}
/* (01) wp-config defenses — cool blue (deepest defense, runs first) */
.bamleon-cs__perf-posture .bamleon-cs__stack-layer:nth-child(1) {
	background: linear-gradient(155deg, #ffffff 0%, #f0f6fc 100%);
}
.bamleon-cs__perf-posture .bamleon-cs__stack-layer:nth-child(1)::before { background: #1e40af; }
.bamleon-cs__perf-posture .bamleon-cs__stack-layer:nth-child(1) .bamleon-cs__stack-num { color: #1e40af; }
/* (02) Asset gate — warm amber (runtime layer) */
.bamleon-cs__perf-posture .bamleon-cs__stack-layer:nth-child(2) {
	background: linear-gradient(155deg, #ffffff 0%, #fef8ec 100%);
}
.bamleon-cs__perf-posture .bamleon-cs__stack-layer:nth-child(2)::before { background: #b45309; }
.bamleon-cs__perf-posture .bamleon-cs__stack-layer:nth-child(2) .bamleon-cs__stack-num { color: #b45309; }
/* (03) Cache stack — saturated emerald (outermost defense) */
.bamleon-cs__perf-posture .bamleon-cs__stack-layer:nth-child(3) {
	background: linear-gradient(155deg, #ffffff 0%, #ecfdf3 100%);
}
.bamleon-cs__perf-posture .bamleon-cs__stack-layer:nth-child(3)::before { background: #047857; }
.bamleon-cs__perf-posture .bamleon-cs__stack-layer:nth-child(3) .bamleon-cs__stack-num { color: #047857; }
/* Big hero number, left column */
.bamleon-cs__stack-num {
	font-family: var(--bamleon-font-display);
	font-size: clamp(64px, 6.4vw, 96px);
	font-weight: 700;
	letter-spacing: -0.05em;
	line-height: 0.95;
}
/* Right column: title + description stacked */
.bamleon-cs__perf-posture .bamleon-cs__stack-body {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.bamleon-cs__perf-posture .bamleon-cs__stack-tech {
	font-family: var(--bamleon-font-display);
	font-size: clamp(22px, 2.2vw, 28px);
	font-weight: 700;
	letter-spacing: -0.025em;
	color: var(--bamleon-text);
	text-transform: none;
	line-height: 1.1;
	margin: 0;
}
.bamleon-cs__stack-desc {
	font-family: var(--bamleon-font-display);
	font-size: 14px;
	font-weight: 400;
	line-height: var(--bamleon-leading-base);
	color: var(--bamleon-text-2);
	margin: 0;
	max-width: none;
}
.bamleon-cs__perf-posture .bamleon-cs__stack-desc code {
	font-family: var(--bamleon-font-mono);
	font-size: 12px;
	background: rgba(0,0,0,0.06);
	padding: 2px 6px;
	border-radius: var(--bamleon-radius-sm);
	color: var(--bamleon-text);
}
@media (max-width: 768px) {
	.bamleon-cs__perf-posture .bamleon-cs__stack-layer {
		grid-template-columns: 1fr;
		gap: 12px;
		padding: 28px 24px;
	}
}

/* ─── One Focused Week timeline (S07) — uses existing iteration grid ──── */
.bamleon-cs__one-week { margin: 32px 0 48px; }
.bamleon-cs__one-week .bamleon-cs__iterations {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}
@media (max-width: 1024px) {
	.bamleon-cs__one-week .bamleon-cs__iterations { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.bamleon-cs__one-week .bamleon-cs__iterations { grid-template-columns: 1fr; }
}

/* ─── Style System (side-by-side, no radio tabs) ──────────────────────── */
.bamleon-cs__style-system {
	margin: 48px 0 32px;
	padding: 32px;
	background: var(--bamleon-surface);
	border: 1px solid var(--bamleon-border);
	border-radius: 16px;
}
.bamleon-cs__style-heading {
	font-family: var(--bamleon-font-display);
	font-size: clamp(24px, 2.4vw, 32px);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.1;
	color: var(--bamleon-text);
	margin: 0 0 12px;
}
.bamleon-cs__style-lead {
	font-size: var(--bamleon-text-base);
	color: var(--bamleon-text-2);
	line-height: 1.55;
	margin: 0 0 32px;
	max-width: 70ch;
}
.bamleon-cs__style-panels {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}
.bamleon-cs__style-system .bamleon-cs__style-panel {
	display: block !important;
	padding: 24px;
	border-radius: var(--bamleon-radius-lg);
	border: 1px solid var(--bamleon-border);
}
.bamleon-cs__style-system .bamleon-cs__style-panel--studio {
	background: #ffffff;
	color: #0f172a;
}
.bamleon-cs__style-system .bamleon-cs__style-panel--therum {
	background: #0a0a0c;
	color: #f7f7fa;
	border-color: #2a2a30;
}
.bamleon-cs__style-system .bamleon-cs__style-tab-meta {
	font-family: var(--bamleon-font-mono);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	display: block;
	margin-bottom: 12px;
	/* Explicit colors per panel context — replaces opacity:0.75 which
	   reduced contrast unpredictably. WCAG AA needs ≥4.5:1 for normal text. */
}
/* Studio Light panel (#ffffff bg): #4b5563 on #ffffff = 7.6:1 (passes AA + AAA) */
.bamleon-cs__style-system .bamleon-cs__style-panel--studio .bamleon-cs__style-tab-meta { color: #4b5563; }
/* Therum OS Dark panel (#0a0a0c bg): #a1a1aa on #0a0a0c = 8.7:1 (passes AA + AAA) */
.bamleon-cs__style-system .bamleon-cs__style-panel--therum .bamleon-cs__style-tab-meta { color: #a1a1aa; }
.bamleon-cs__style-system .bamleon-cs__style-tab-name {
	font-family: var(--bamleon-font-display);
	font-size: clamp(28px, 2.8vw, 40px);
	font-weight: 700;
	letter-spacing: -0.025em;
	margin: 0 0 28px;
	line-height: 1;
}
.bamleon-cs__style-system .bamleon-cs__style-tokens {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin: 0;
}
@media (max-width: 480px) {
	.bamleon-cs__style-system .bamleon-cs__style-tokens { grid-template-columns: 1fr; }
}
.bamleon-cs__style-system .bamleon-cs__style-panel--therum .bamleon-cs__style-token code,
.bamleon-cs__style-system .bamleon-cs__style-panel--therum .bamleon-cs__style-token span {
	color: #f7f7fa;
}
.bamleon-cs__style-system .bamleon-cs__style-panel--therum .bamleon-cs__style-token {
	border-color: #2a2a30;
}
@media (max-width: 720px) {
	.bamleon-cs__style-panels { grid-template-columns: 1fr; }
	.bamleon-cs__style-system { padding: 20px; }
}

/* ── BIG-NUM — standard surface, oversized LOC number anchors the card.
 * Trades the small LOC chip for a display-sized count. Text-size variety. */
.bamleon-cs__module-card.bamleon-cs__module-card--big-num {
	grid-column: span 2;
	grid-row: span 2;
	display: flex !important;
	flex-direction: column;
	gap: 8px;
	padding: 22px 24px 20px;
}
.bamleon-cs__module-card--big-num .bamleon-cs__module-name {
	font-family: var(--bamleon-font-display);
	font-size: clamp(26px, 2.8vw, 36px);
	letter-spacing: var(--bamleon-tracking-tight);
	text-transform: none;
	color: var(--bamleon-text);
	font-weight: 700;
	line-height: var(--bamleon-leading-tight);
	max-width: 14ch;
}
.bamleon-cs__module-card--big-num .bamleon-cs__module-name::before { display: none; }
.bamleon-cs__module-card--big-num .bamleon-cs__module-desc { display: block; font-size: 12px; }
.bamleon-cs__module-card--big-num .bamleon-cs__module-desc {
	font-size: 12px;
	line-height: 1.5;
	color: var(--bamleon-text-3);
	flex: none;
	max-width: 28ch;
}
.bamleon-cs__module-card--big-num .bamleon-cs__module-loc {
	font-family: var(--bamleon-font-display);
	font-size: clamp(44px, 5vw, 64px);
	font-weight: 700;
	letter-spacing: -0.04em;
	line-height: 0.95;
	color: var(--bamleon-text);
	background: transparent;
	border: 0;
	padding: 0;
	margin-top: auto;
	text-transform: none;
	align-self: flex-start;
}
.bamleon-cs__module-card--big-num:hover { transform: translateY(-2px); border-color: var(--cat, var(--bamleon-text-3)); }

/* ── QUIET — subdued treatment. Sits on a softer surface, tighter
 * type. Punctuation between louder neighbors. ──────────────────────────── */
.bamleon-cs__module-card.bamleon-cs__module-card--quiet {
	grid-column: span 2;
	grid-row: span 2;
	background: var(--bamleon-surface-2, #f4f4f4);
	border-color: transparent;
}
.bamleon-cs__module-card--quiet .bamleon-cs__module-name {
	font-family: var(--bamleon-font-display);
	font-size: clamp(24px, 2.6vw, 32px);
	letter-spacing: -0.025em;
	text-transform: none;
	font-weight: 600;
	color: var(--bamleon-text);
	line-height: 1.08;
	max-width: 14ch;
}
.bamleon-cs__module-card--quiet .bamleon-cs__module-name::before { display: none; }
.bamleon-cs__module-card--quiet .bamleon-cs__module-desc { display: block; font-size: 12px; }
.bamleon-cs__module-card--quiet .bamleon-cs__module-desc {
	font-size: 12px;
	color: var(--bamleon-text-2);
	line-height: 1.55;
}
.bamleon-cs__module-card--quiet .bamleon-cs__module-loc {
	font-size: 9px;
	opacity: 0.65;
	border-color: var(--bamleon-border);
}

/* ── data-cat fallback colors so every card with data-cat has its accent
 * variable resolved, even without inline styles. ───────────────────────── */
.bamleon-cs__module-card[data-cat="chrome"]      { --cat: #0891b2; }
.bamleon-cs__module-card[data-cat="design"]      { --cat: #a78bfa; }
.bamleon-cs__module-card[data-cat="auth"]        { --cat: #ef4444; }
.bamleon-cs__module-card[data-cat="foundation"]  { --cat: #2563eb; }
.bamleon-cs__module-card[data-cat="perf"]        { --cat: #f59e0b; }
.bamleon-cs__module-card[data-cat="content"]     { --cat: #10b981; }

/* ── MONO — 2×2 black-and-white typographic stamp card. Diagonal hatch
 * texture under a soft gradient. The "B&W" treatment that earns its
 * weight in the bento. ──────────────────────────────────────────────── */
.bamleon-cs__module-card.bamleon-cs__module-card--mono {
	grid-column: span 2;
	grid-row: span 2;
	padding: 32px;
	background:
		radial-gradient(circle at 80% 20%, rgba(0,0,0,0.04), transparent 50%),
		linear-gradient(160deg, #fafafa 0%, #ededed 100%);
	border: 1px solid rgba(0,0,0,0.12);
	color: var(--bamleon-text);
	display: flex !important;
	flex-direction: column;
	justify-content: center;
	gap: 12px;
	overflow: hidden;
	box-shadow:
		0 1px 2px rgba(20, 20, 30, 0.04),
		0 12px 32px -12px rgba(20, 20, 30, 0.12),
		inset 0 1px 0 rgba(255,255,255,1);
}
.bamleon-cs__module-card--mono::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		repeating-linear-gradient(45deg, transparent 0 8px, rgba(0,0,0,0.04) 8px 9px);
	pointer-events: none;
	z-index: 0;
}
.bamleon-cs__module-card--mono > * { position: relative; z-index: 1; }
.bamleon-cs__module-card--mono .bamleon-cs__mono-kicker {
	font-family: var(--bamleon-font-mono);
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bamleon-text);
	margin: 0;
}
.bamleon-cs__module-card--mono .bamleon-cs__mono-display {
	font-family: var(--bamleon-font-display);
	font-size: clamp(64px, 7.2vw, 104px);
	font-weight: 700;
	letter-spacing: -0.05em;
	line-height: 0.92;
	color: var(--bamleon-text);
	margin: 0;
}
.bamleon-cs__module-card--mono .bamleon-cs__mono-display em {
	font-style: normal;
	font-family: var(--bamleon-font-mono);
	font-size: 0.36em;
	font-weight: 500;
	letter-spacing: 0;
	color: var(--bamleon-text-2);
	margin-left: 6px;
	display: inline-block;
}
.bamleon-cs__module-card--mono .bamleon-cs__mono-label {
	font-family: var(--bamleon-font-mono);
	font-size: var(--bamleon-text-xs);
	letter-spacing: 0.06em;
	color: var(--bamleon-text-2);
	max-width: 32ch;
	line-height: 1.5;
	margin: 0;
}
.bamleon-cs__module-card--mono:hover { transform: translateY(-2px); border-color: var(--bamleon-text); }

/* ── WIDE-NAME — 2×1, twin-width name strip. Pairs cleanly with --name
 * cards to round out the bottom name row to a full 4-column tile. ──────── */
.bamleon-cs__module-card.bamleon-cs__module-card--wide-name {
	grid-column: span 2;
	grid-row: span 1;
	padding: 14px 18px;
	display: grid !important;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 14px;
	text-align: left;
}
.bamleon-cs__module-card--wide-name .bamleon-cs__module-name {
	font-family: var(--bamleon-font-mono);
	font-size: 12px;
	font-weight: 600;
	color: var(--bamleon-text);
	letter-spacing: 0;
	line-height: var(--bamleon-leading-snug);
}
.bamleon-cs__module-card--wide-name .bamleon-cs__module-desc { display: none; }
.bamleon-cs__module-card--wide-name .bamleon-cs__module-loc {
	font-size: var(--bamleon-text-base);
	font-weight: 700;
	color: var(--cat, var(--bamleon-accent));
	background: transparent;
	border: 0;
	padding: 0;
	margin: 0;
	font-family: var(--bamleon-font-display);
	letter-spacing: -0.02em;
	text-transform: none;
	align-self: center;
}

/* ── QUOTE — 4×1 full-width banner. Acts as the grid's bottom closer. ──── */
.bamleon-cs__module-card.bamleon-cs__module-card--quote {
	grid-column: 1 / -1;
	grid-row: span 2;
	background: var(--bamleon-surface);
	border: 1px solid var(--bamleon-border);
	border-radius: 14px;
	padding: 32px;
	display: grid !important;
	grid-template-columns: auto 1fr;
	gap: 24px;
	align-items: center;
}
.bamleon-cs__module-card--quote .bamleon-cs__quote-mark {
	font-family: ui-sans-serif, system-ui;
	font-size: 40px;
	font-weight: 400;
	font-style: normal;
	color: #0a0a0a;
	line-height: 1;
	transform: rotate(-12deg);
	display: block;
}
.bamleon-cs__module-card--quote .bamleon-cs__quote-text {
	font-family: var(--bamleon-font-display);
	font-size: clamp(18px, 2.2vw, 28px);
	font-weight: 400;
	font-style: italic;
	letter-spacing: var(--bamleon-tracking-normal);
	line-height: 1.35;
	color: var(--bamleon-text);
	margin: 0;
	max-width: 60ch;
}
.bamleon-cs__module-card--quote:hover { transform: none; border-color: var(--bamleon-text-3); }

/* ── VERSION milestone card — 2×1 (half-width, single row). Used in the
   modules-grid--bento BAND 2 to tell the changelog arc visually: each card
   anchors one major version with its date + headline + body. Border-left
   tinted by --cat (per-version accent) so the row reads as a timeline of
   colored markers. The current version gets a richer accent ring. */
.bamleon-cs__module-card.bamleon-cs__module-card--version {
	grid-column: span 2;
	grid-row: span 1;
	padding: 24px 28px;
	background:
		radial-gradient(circle at 0% 0%, rgba(255,255,255,0.6), transparent 60%),
		linear-gradient(180deg, #ffffff 0%, #fbfbfd 100%);
	border: 1px solid rgba(0,0,0,0.06);
	border-left: 3px solid var(--cat, var(--bamleon-accent));
	display: flex !important;
	flex-direction: column;
	justify-content: center;
	gap: 8px;
	min-height: 0;
	box-shadow:
		0 1px 2px rgba(20, 20, 30, 0.03),
		0 8px 22px -12px rgba(20, 20, 30, 0.08);
	transition: transform 220ms cubic-bezier(.32,.72,0,1),
	            border-color 200ms ease,
	            box-shadow 220ms ease;
}
.bamleon-cs__module-card--version:hover {
	transform: translateY(-2px);
	box-shadow:
		0 2px 4px rgba(20, 20, 30, 0.06),
		0 16px 36px -12px rgba(20, 20, 30, 0.16);
}
.bamleon-cs__module-card--version .bamleon-cs__module-name {
	font-family: var(--bamleon-font-mono);
	font-size: var(--bamleon-text-xs);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cat, var(--bamleon-text-3));
	line-height: var(--bamleon-leading-snug);
}
.bamleon-cs__module-card--version .bamleon-cs__module-headline {
	font-family: var(--bamleon-font-display);
	font-size: clamp(18px, 1.6vw, 22px);
	font-weight: 600;
	letter-spacing: -0.015em;
	line-height: var(--bamleon-leading-snug);
	color: #0a0a0a;
}
.bamleon-cs__module-card--version .bamleon-cs__module-desc {
	font-family: var(--bamleon-font-body);
	font-size: var(--bamleon-text-sm);
	line-height: 1.55;
	color: rgba(10, 10, 10, 0.72);
	margin: 0 !important;
}
.bamleon-cs__module-card--version .bamleon-cs__module-desc code {
	font-family: var(--bamleon-font-mono);
	font-size: 11.5px;
	background: rgba(0, 0, 0, 0.04);
	color: #0a0a0a;
	padding: 1px 5px;
	border-radius: var(--bamleon-radius-sm);
}
/* Current-version variant — dark inverted card so v1.8.8 reads as "you
   are here" against the lighter milestone cards. */
.bamleon-cs__module-card--version.bamleon-cs__module-card--current {
	background:
		radial-gradient(ellipse at 100% 0%, rgba(91,141,190,0.18), transparent 55%),
		linear-gradient(180deg, #0f0f12 0%, #1a1a1f 100%);
	border-color: rgba(255, 255, 255, 0.10);
	border-left: 3px solid var(--cat, var(--bamleon-accent));
}
.bamleon-cs__module-card--current .bamleon-cs__module-name {
	color: rgba(255, 255, 255, 0.62);
}
.bamleon-cs__module-card--current .bamleon-cs__module-headline {
	color: #ffffff;
}
.bamleon-cs__module-card--current .bamleon-cs__module-desc {
	color: rgba(255, 255, 255, 0.78);
}
.bamleon-cs__module-card--current .bamleon-cs__module-desc code {
	background: rgba(255, 255, 255, 0.10);
	color: #ffffff;
}
@media (max-width: 900px) {
	.bamleon-cs__module-card.bamleon-cs__module-card--version { grid-column: span 4; }
}

/* ── FEATURE PILL — 1×1 (quarter-width, single row). Used in the bento
   for the row of selling-point pills under the lede. Tighter than the
   2×1 version cards: a small kicker + a confident headline + a 2-line
   body. Border-left tinted by --cat so the row of pills reads as a
   color-coded feature set. */
.bamleon-cs__module-card.bamleon-cs__module-card--feat-pill {
	grid-column: span 1;
	grid-row: span 1;
	padding: 18px 20px;
	background:
		radial-gradient(circle at 0% 0%, rgba(255,255,255,0.6), transparent 60%),
		linear-gradient(180deg, #ffffff 0%, #fbfbfd 100%);
	border: 1px solid rgba(0,0,0,0.06);
	border-left: 3px solid var(--cat, var(--bamleon-accent));
	display: flex !important;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
	min-height: 160px;
	box-shadow:
		0 1px 2px rgba(20, 20, 30, 0.03),
		0 6px 16px -10px rgba(20, 20, 30, 0.08);
	transition: transform 220ms cubic-bezier(.32,.72,0,1),
	            box-shadow 220ms ease;
}
.bamleon-cs__module-card--feat-pill:hover {
	transform: translateY(-2px);
	box-shadow:
		0 2px 4px rgba(20, 20, 30, 0.06),
		0 14px 28px -10px rgba(20, 20, 30, 0.14);
}
.bamleon-cs__feat-pill-kicker {
	font-family: var(--bamleon-font-mono);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cat, var(--bamleon-text-3));
	line-height: var(--bamleon-leading-snug);
}
.bamleon-cs__feat-pill-title {
	font-family: var(--bamleon-font-display);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: var(--bamleon-tracking-normal);
	line-height: 1.25;
	color: #0a0a0a;
}
.bamleon-cs__feat-pill-desc {
	font-family: var(--bamleon-font-body);
	font-size: 12.5px;
	line-height: 1.5;
	color: rgba(10, 10, 10, 0.68);
	margin: 0 !important;
}
.bamleon-cs__feat-pill-desc code {
	font-family: var(--bamleon-font-mono);
	font-size: var(--bamleon-text-xs);
	background: rgba(0, 0, 0, 0.05);
	color: #0a0a0a;
	padding: 1px 4px;
	border-radius: 3px;
}
@media (max-width: 900px) {
	.bamleon-cs__module-card.bamleon-cs__module-card--feat-pill { grid-column: span 2; }
}
@media (max-width: 560px) {
	.bamleon-cs__module-card.bamleon-cs__module-card--feat-pill { grid-column: span 4; }
}

/* ── Filter dimming — only affects module-cards (with data-cat). Breakouts
 * (stats, quote) lack data-cat and stay visible. ─────────────────────── */
.bamleon-cs__modules-grid--bento .bamleon-cs__module-card[data-cat] {
	transition: opacity 240ms ease, filter 240ms ease,
		transform 240ms cubic-bezier(.32,.72,0,1),
		border-color 200ms ease, background 240ms ease;
}
.bamleon-cs__modules-grid--bento[data-filter="foundation"] .bamleon-cs__module-card[data-cat]:not([data-cat="foundation"]),
.bamleon-cs__modules-grid--bento[data-filter="chrome"]     .bamleon-cs__module-card[data-cat]:not([data-cat="chrome"]),
.bamleon-cs__modules-grid--bento[data-filter="content"]    .bamleon-cs__module-card[data-cat]:not([data-cat="content"]),
.bamleon-cs__modules-grid--bento[data-filter="design"]     .bamleon-cs__module-card[data-cat]:not([data-cat="design"]),
.bamleon-cs__modules-grid--bento[data-filter="perf"]       .bamleon-cs__module-card[data-cat]:not([data-cat="perf"]),
.bamleon-cs__modules-grid--bento[data-filter="auth"]       .bamleon-cs__module-card[data-cat]:not([data-cat="auth"]) {
	opacity: 0.12 !important;
	filter: grayscale(0.8) !important;
	pointer-events: none !important;
}

/* ── Foot italic note ──────────────────────────────────────────────────── */
.bamleon-cs__module-foot {
	margin: 32px auto 0;
	font-family: var(--bamleon-font-display);
	font-size: 14px;
	font-style: italic;
	color: var(--bamleon-text-2);
	max-width: 92ch;
	text-align: center;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ═══ Entry animation — staggered rise ════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
	.bamleon-cs__modules-grid--bento .bamleon-cs__module-card {
		transform: translateY(12px);
		animation: th-mod-rise 600ms cubic-bezier(.32,.72,0,1) forwards;
	}
	.bamleon-cs__modules-grid--bento .bamleon-cs__module-card:nth-child(1)  { animation-delay: 20ms; }
	.bamleon-cs__modules-grid--bento .bamleon-cs__module-card:nth-child(2)  { animation-delay: 40ms; }
	.bamleon-cs__modules-grid--bento .bamleon-cs__module-card:nth-child(3)  { animation-delay: 60ms; }
	.bamleon-cs__modules-grid--bento .bamleon-cs__module-card:nth-child(4)  { animation-delay: 80ms; }
	.bamleon-cs__modules-grid--bento .bamleon-cs__module-card:nth-child(5)  { animation-delay: 100ms; }
	.bamleon-cs__modules-grid--bento .bamleon-cs__module-card:nth-child(6)  { animation-delay: 120ms; }
	.bamleon-cs__modules-grid--bento .bamleon-cs__module-card:nth-child(7)  { animation-delay: 140ms; }
	.bamleon-cs__modules-grid--bento .bamleon-cs__module-card:nth-child(8)  { animation-delay: 160ms; }
	.bamleon-cs__modules-grid--bento .bamleon-cs__module-card:nth-child(9)  { animation-delay: 180ms; }
	.bamleon-cs__modules-grid--bento .bamleon-cs__module-card:nth-child(10) { animation-delay: 200ms; }
	.bamleon-cs__modules-grid--bento .bamleon-cs__module-card:nth-child(n+11) { animation-delay: 220ms; }
	@keyframes th-mod-rise {
		from { transform: translateY(12px); }
		to   { transform: translateY(0); }
	}
}

/* Stat-strip numbers always visible — no JS-dependent opacity:0 default,
 * since the IntersectionObserver fade-in left them invisible whenever
 * JS failed to fire. */

/* ═══ Responsive collapse ══════════════════════════════════════════════════ */
@media (max-width: 900px) {
	.bamleon-cs__archstack-body { grid-template-columns: 1fr; gap: 4px; }
	.bamleon-cs__archstack-layer { grid-template-columns: 60px 1fr; padding: 16px 20px; }
	.bamleon-cs__archstack-num { font-size: 22px; }
}

@media (max-width: 1100px) {
	.bamleon-cs__module-stats { grid-template-columns: repeat(3, 1fr); }
	.bamleon-cs__module-stat:nth-child(3) { border-right: 0; }
	.bamleon-cs__modules-grid--bento { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 130px; }
	.bamleon-cs__module-card.bamleon-cs__module-card--feature {
		grid-column: span 4;
		grid-row: span 3;
		grid-template-columns: 1fr;
		grid-template-rows: auto auto 1fr auto;
	}
	.bamleon-cs__module-card.bamleon-cs__module-card--feature .bamleon-cs__module-name,
	.bamleon-cs__module-card.bamleon-cs__module-card--feature .bamleon-cs__feature-display,
	.bamleon-cs__module-card.bamleon-cs__module-card--feature .bamleon-cs__module-desc,
	.bamleon-cs__module-card.bamleon-cs__module-card--feature .bamleon-cs__feature-foot {
		grid-column: 1; grid-row: auto;
	}
	.bamleon-cs__module-card.bamleon-cs__module-card--feature .bamleon-cs__feature-foot {
		flex-direction: row;
		align-items: baseline;
		justify-content: space-between;
		text-align: left;
		border-left: 0;
		border-top: 1px solid var(--bamleon-border);
		padding-left: 0;
		padding-top: 14px;
		min-width: 0;
	}
	.bamleon-cs__module-card.bamleon-cs__module-card--feature .bamleon-cs__feature-loc {
		flex-direction: row;
		align-items: baseline;
	}
	.bamleon-cs__module-card.bamleon-cs__module-card--accent { grid-column: span 2; grid-row: span 2; }
	.bamleon-cs__module-card.bamleon-cs__module-card--standard { grid-column: span 2; grid-row: span 2; }
	.bamleon-cs__module-card.bamleon-cs__module-card--stat { grid-column: span 2; grid-row: span 2; }
	.bamleon-cs__module-card.bamleon-cs__module-card--quote { grid-column: span 4; }
}
@media (max-width: 700px) {
	.bamleon-cs__module-stats { grid-template-columns: repeat(2, 1fr); }
	.bamleon-cs__module-stat:nth-child(2) { border-right: 0; }
	.bamleon-cs__modules-grid--bento { grid-template-columns: 1fr; grid-auto-rows: auto; }
	.bamleon-cs__modules-grid--bento .bamleon-cs__module-card {
		grid-column: span 1 !important;
		grid-row: auto !important;
		min-height: 120px;
	}
	.bamleon-cs__module-card.bamleon-cs__module-card--feature { min-height: 280px; }
	.bamleon-cs__module-card.bamleon-cs__module-card--quote { min-height: auto; }
	.bamleon-cs__feature-display { font-size: var(--bamleon-text-xl); }
}

/* ── Pullquote (Section 06 — design philosophy) ─────────────────────────── */
.bamleon-cs__pullquote {
	font-family: var(--bamleon-font-display);
	font-size: clamp(28px, 3.4vw, 48px);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--bamleon-text);
	margin: 32px 0 48px;
	padding-left: 24px;
	border-left: 2px solid var(--bamleon-accent);
}

/* Stack the output list + iframe rows on tablet/mobile */
@media (max-width: 768px) {
	.bamleon-cs__output-list li { grid-template-columns: 1fr; gap: 4px; padding: 14px 0; }
	.bamleon-cs__output-list li:hover { padding-left: 4px; }
	.bamleon-cs__media--iframe { aspect-ratio: 4 / 3; }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * THERUM OS CASE STUDY — extended layout (full-width, rich sections)
 * Adds research strip, stack diagram, iteration cards, style grid, perf grid,
 * version timeline, roadmap, soft pullquote variant. All tied to existing
 * tokens so they read as the same system, not a separate stylesheet.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* Pullquote — soft variant for industry observations (not the headline ones) */
.bamleon-cs__pullquote--soft {
	border-left: 0;
	padding-left: 0;
	font-size: clamp(20px, 2.4vw, 30px);
	font-style: italic;
	color: var(--bamleon-text-2);
	margin: 32px 0 0;
}

/* Section body spans the full article width — same as the imagery, the data
 * strips, the diagrams. Keeps the visual rhythm consistent: every block of
 * content reads to the same edges. (Earlier draft constrained text to 75ch
 * for "readability" but that visually disconnected text from imagery — the
 * full-width treatment matches Apple/W+K layout language better.) */
/* (Earlier max-width rules removed — full-width handled at the top.) */

/* ── Research strip (Section 02) ───────────────────────────────────────── */
.bamleon-cs__research {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
	margin: 24px 0 48px;
	padding: 48px 0;
	border-bottom: 1px solid var(--bamleon-border);
}
.bamleon-cs__research-stat { display: flex; flex-direction: column; gap: 12px; }
.bamleon-cs__research-num {
	font-family: var(--bamleon-font-display);
	font-size: clamp(40px, 4.8vw, 72px);
	font-weight: 500;
	letter-spacing: var(--bamleon-tracking-tight);
	line-height: 1;
	color: var(--bamleon-text);
}
.bamleon-cs__research-num em {
	font-style: normal;
	color: var(--bamleon-accent);
	font-size: 0.55em;
	margin-left: 2px;
}
.bamleon-cs__research-label {
	font-family: var(--bamleon-font-mono);
	font-size: var(--bamleon-text-xs);
	letter-spacing: 0.02em;
	color: var(--bamleon-text-3);
	line-height: 1.45;
}

/* ── Stack diagram (Section 03) ────────────────────────────────────────── */
.bamleon-cs__diagram {
	margin: 64px 0;
	padding: 64px 0;
	background: linear-gradient(180deg, rgba(91, 141, 190,0.06) 0%, rgba(147,51,234,0.04) 100%);
	border-top: 1px solid var(--bamleon-border);
	border-bottom: 1px solid var(--bamleon-border);
}
/* Stack architecture diagram — single unified block, row dividers, accent bars */
.bamleon-cs__diagram--stack {
	display: flex !important;
	flex-direction: column !important;
	gap: 0 !important;
	align-items: stretch !important;
	max-width: 900px;
	width: 100%;
	margin: 48px auto 0;
	padding: 0; /* override .bamleon-cs__diagram's padding: 64px 0 */
	border: 1px solid var(--bamleon-border);
	border-radius: 14px;
	overflow: hidden;
	background: var(--bamleon-surface);
	box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.bamleon-cs__stack-layer {
	display: grid !important;
	grid-template-columns: 140px 1fr 1.4fr !important;
	gap: 0 32px;
	align-items: start;
	width: 100% !important;
	padding: 20px 28px 20px 36px !important;
	background: transparent !important;
	border: none !important;
	border-bottom: 1px solid var(--bamleon-border) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	box-sizing: border-box;
	position: relative;
	transition: background 200ms ease;
}
.bamleon-cs__stack-layer:last-child { border-bottom: none !important; }
.bamleon-cs__stack-layer:hover {
	transform: none !important;
	background: rgba(0,0,0,0.015) !important;
}
/* Left accent bar — full-height, 4px, one colour per layer */
.bamleon-cs__stack-layer::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
}
.bamleon-cs__stack-layer[data-layer="1"]::before { background: #3672ff; }
.bamleon-cs__stack-layer[data-layer="2"]::before { background: #7c3aed; }
.bamleon-cs__stack-layer[data-layer="3"]::before { background: #059669; }
.bamleon-cs__stack-layer[data-layer="4"]::before { background: #d97706; }
.bamleon-cs__stack-name {
	font-family: var(--bamleon-font-mono);
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bamleon-text-3);
	padding-top: 4px;
}
.bamleon-cs__stack-tech {
	font-family: var(--bamleon-font-display);
	font-size: clamp(16px, 1.6vw, 22px);
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--bamleon-text);
	white-space: nowrap;
	padding-top: 2px;
}
.bamleon-cs__stack-note {
	font-size: var(--bamleon-text-sm);
	line-height: 1.55;
	color: var(--bamleon-text-2);
	max-width: none;
	padding-top: 3px;
}

/* ── Wireframe row (Section 04, above iteration cards) ─────────────────────
 * Three line-art SVGs showing the actual design progression of the dashboard.
 * Light backdrop so the wireframes (drawn on #fafafa) sit naturally; subtle
 * shadow to lift them off the page; captions below in mono kicker style. */
.bamleon-cs__wireframes {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin: 48px 0;
}
.bamleon-cs__wireframe {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.bamleon-cs__wireframe img {
	width: 100%;
	height: auto;
	display: block;
	background: #fafafa;
	border-radius: var(--bamleon-radius-lg);
	box-shadow: none;
}
.bamleon-cs__wireframe figcaption {
	font-family: var(--bamleon-font-mono);
	font-size: 12px;
	letter-spacing: var(--bamleon-tracking-wide);
	color: var(--bamleon-text-3);
	text-align: center;
	width: 100%;
	max-width: none;
	margin: 16px auto 0;
	white-space: normal;
	word-break: break-word;
}

@media (max-width: 1100px) {
	.bamleon-cs__wireframes { grid-template-columns: 1fr; }
}

/* ── Full-width module exploration wireframes (Section 04b) ─────────────
 * Each is a wide multi-state sheet (1440x720). Display full-bleed-ish so
 * the multi-up reads at intended scale; caption underneath with mono
 * kicker style and a one-line italic rationale. */
.bamleon-cs__wireframe-full {
	margin: 64px 0 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.bamleon-cs__wireframe-full img {
	width: 100%;
	height: auto;
	display: block;
	background: #fafafa;
	border-radius: 14px;
	box-shadow: none;
}
/* Wireframe captions removed at user request — each SVG already carries
 * its own internal posture/state labelling. */
#brxe-to_wf_cards_cap,
#brxe-to_wf_sidebar_cap,
#brxe-to_wf_search_cap,
#brxe-to_wf_kebab_cap,
#brxe-to_wf_cards > figcaption,
#brxe-to_wf_sidebar > figcaption,
#brxe-to_wf_search > figcaption,
#brxe-to_wf_kebab > figcaption { display: none !important; }

/* Caption reads as a single inline metadata line under the image —
 * label · count · note — not three stacked headings that look like
 * a section lead. Centering is enforced here; the section left-align
 * guard does not reach inside wireframe-full figcaptions. */
.bamleon-cs__section .bamleon-cs__wireframe-full figcaption,
.bamleon-cs__wireframe-full figcaption {
	font-family: var(--bamleon-font-mono);
	font-size: 12px;
	letter-spacing: var(--bamleon-tracking-wide);
	color: var(--bamleon-text-3);
	line-height: 1.5;
	width: 100%;
	max-width: none;
	margin: 10px auto 0;
	padding: 10px 16px 0;
	text-align: center !important;
	white-space: normal;
	display: block;
	word-break: break-word;
}
.bamleon-cs__wireframe-full figcaption > span,
.bamleon-cs__wireframe-full figcaption .brxe-heading {
	display: block;
	width: 100%;
}
.bamleon-cs__wireframe-full figcaption strong {
	display: inline;
	margin: 0 6px 0 0;
	color: var(--bamleon-text);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: var(--bamleon-text-xs);
}
.bamleon-cs__wireframe-full figcaption em {
	display: inline;
	margin: 0 0 0 4px;
	font-family: var(--bamleon-font-mono);
	font-style: italic;
	color: var(--bamleon-text-2);
	font-size: 12px;
	letter-spacing: 0.02em;
	text-transform: none;
}

/* ── Paired wireframe + live demo ─────────────────────────────────────────
   Each chrome surface (search, sidebar, cards, themes, kebab) shows the
   hand-drawn wireframe with all design states on the left, and a live
   functioning iframe of the actual shipped surface on the right. The
   wireframe is the design intent across states; the iframe is the working
   surface you can poke at right now. */
/* Paired wireframe + live demo — tabbed at 1920x1080 (16:9).
   Default view: Wireframe still. Click "Demo" tab → iframe replaces image
   in the same frame. Before/after slider can't reconcile a still SVG with
   an interactive iframe, so we tab between them instead. */
.bamleon-cs__wireframe-full--paired {
	display: block;
	position: relative;
}
/* `width: fit-content !important` — the section-body cascade applies
   `width: auto !important` to every direct child, which would otherwise
   stretch this pill bar to the full content column. !important is the
   only way to win that fight without rewriting the section-body rule.
   Flex container + auto margins → centered, content-sized. */
.bamleon-cs__section-body .bamleon-cs__wf-tabs,
.bamleon-cs__wireframe-full--paired > .bamleon-cs__wf-tabs,
.bamleon-cs__wf-tabs {
	display: flex !important;
	justify-content: center;
	gap: 6px;
	padding: 6px;
	background: var(--bamleon-surface);
	border: 1px solid var(--bamleon-border);
	border-radius: var(--bamleon-radius-pill);
	margin: 0 auto 28px !important;
	width: fit-content !important;
	max-width: fit-content !important;
}
/* Override Bricks heading default (display:block, width:100%) so the
   pills size to their content inside the centered tab group. */
.bamleon-cs__wf-tab,
.brxe-heading.bamleon-cs__wf-tab {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	flex: 0 0 auto;
	font-family: var(--bamleon-font-mono);
	font-size: var(--bamleon-text-sm);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 12px 28px;
	border-radius: var(--bamleon-radius-pill);
	border: 0;
	background: transparent;
	color: var(--bamleon-text-2);
	cursor: pointer;
	transition: background 160ms ease, color 160ms ease;
	line-height: 1;
}
.bamleon-cs__wf-tab:hover { color: var(--bamleon-text); }
.bamleon-cs__wf-tab.is-active {
	background: var(--bamleon-text);
	color: var(--bamleon-bg);
}
/* Kill the underline pseudo from the legacy 6-tab system — pill bar shows
   active state via background, not an underline. */
.bamleon-cs__wf-tab::after,
.bamleon-cs__wf-tab.is-active::after,
.brxe-heading.bamleon-cs__wf-tab::after {
	content: none !important;
	display: none !important;
}
.bamleon-cs__wf-tab:focus-visible {
	outline: 2px solid var(--bamleon-accent, currentColor);
	outline-offset: 2px;
}
/* Wireframe render — SVGs are served as external <img> files so each
   renders at its natural viewBox dimensions (no forced aspect-ratio,
   no letterboxing). Image fills the frame edge-to-edge. */
.bamleon-cs__wireframe-full--paired img.bamleon-cs__wf-svg,
.bamleon-cs__wireframe-full--paired svg.bamleon-cs__wf-svg,
.bamleon-cs__wireframe-full--paired .brxe-image {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	border: 1px solid var(--bamleon-border);
	border-radius: 14px;
	background: #ffffff;
}
.bamleon-cs__wireframe-full--paired .bamleon-cs__wf-live { display: none !important; }
/* Demo mode — hide wireframe content (inline SVG, img fallback, brxe-code
   wrapper), show iframe container. The SEARCH wireframe uses an <img> not
   an inline svg, so img must be covered here too. */
.bamleon-cs__wireframe-full--paired.is-showing-demo svg.bamleon-cs__wf-svg,
.bamleon-cs__wireframe-full--paired.is-showing-demo > .brxe-code,
.bamleon-cs__wireframe-full--paired.is-showing-demo > img,
.bamleon-cs__wireframe-full--paired.is-showing-demo .brxe-image {
	display: none !important;
}
.bamleon-cs__wireframe-full--paired.is-showing-demo .bamleon-cs__wf-live {
	display: flex !important;
	flex-direction: column;
	gap: 10px;
}
.bamleon-cs__wf-live-label {
	font-family: var(--bamleon-font-mono);
	font-size: var(--bamleon-text-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bamleon-text-3);
}
/* Wireframe live demo — render the iframe at its native 1920×1080 design
   resolution, then scale it down to fit the 16:9 container. No internal
   scrollbars because the iframe's viewport IS 1920×1080; everything the
   demo was designed at lives inside that frame. The wf-live wrapper clips
   any overflow. JS computes the exact scale from offsetWidth and sets it
   as an inline transform on each tab switch + window resize. */
.bamleon-cs__wireframe-full--paired .bamleon-cs__wf-live {
	position: relative;
	width: 100%;
	aspect-ratio: 1920 / 1080;
	overflow: hidden;
	/* Hard clip — `overflow: hidden` + border-radius doesn't reliably contain
	   a transform-scaled absolutely-positioned iframe in Safari/Chrome. The
	   fractional scale (offsetWidth/1920) leaves a sub-pixel edge that exposes
	   the iframe's dark sidebar past the bottom-right corner. clip-path with
	   `round 14px` enforces the rounded clip on the painted surface. */
	clip-path: inset(0 round 14px);
	isolation: isolate;
	border: 1px solid var(--bamleon-border);
	border-radius: 14px;
	background: var(--bamleon-surface);
	box-shadow: 0 2px 14px rgba(0, 0, 0, 0.04);
}
.bamleon-cs__wf-iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 1920px;
	height: 1080px;
	border: 0;
	background: transparent;
	box-shadow: none;
	display: block;
	transform-origin: 0 0;
	/* transform injected by JS (applyScale) — avoids invalid cqw/scale() */
}
/* Hide the live label inside the scaled wrapper — it can't sit on top of
   the iframe at any sensible size; the figcaption below the figure already
   names the surface. */
.bamleon-cs__wireframe-full--paired .bamleon-cs__wf-live-label { display: none; }
@media (max-width: 980px) {
	.bamleon-cs__wf-tab { padding: 10px 20px; font-size: 12px; }
}

/* ── Iterations (Section 04) ───────────────────────────────────────────── */
.bamleon-cs__iterations {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin: 48px 0;
}
.bamleon-cs__iteration {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 32px;
	background: var(--bamleon-surface);
	border: 1px solid var(--bamleon-border);
	border-radius: 14px;
	transition: transform 350ms var(--bamleon-ease-out), border-color 350ms var(--bamleon-ease-out), background 350ms var(--bamleon-ease-out);
}
.bamleon-cs__iteration:hover {
	transform: translateY(-4px);
	border-color: var(--bamleon-accent);
	background: rgba(91, 141, 190, 0.04);
}
.bamleon-cs__iteration-stage {
	font-family: var(--bamleon-font-mono);
	font-size: var(--bamleon-text-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bamleon-accent);
}
.bamleon-cs__iteration-title {
	font-family: var(--bamleon-font-display);
	font-size: clamp(22px, 2.2vw, 30px);
	font-weight: 500;
	letter-spacing: -0.02em;
	margin: 0;
	color: var(--bamleon-text);
}
.bamleon-cs__iteration-desc { font-size: 15px; line-height: var(--bamleon-leading-base); color: var(--bamleon-text-2); margin: 0; }
.bamleon-cs__iteration-learn {
	margin: 12px 0 0;
	padding-top: 18px;
	border-top: 1px dashed var(--bamleon-border);
	font-size: var(--bamleon-text-sm);
	line-height: var(--bamleon-leading-base);
	color: var(--bamleon-text-3);
}
.bamleon-cs__iteration-learn span {
	display: block;
	font-family: var(--bamleon-font-mono);
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bamleon-accent);
	margin-bottom: 6px;
}

/* ── Style grid (Section 05) ───────────────────────────────────────────── */
.bamleon-cs__section--style { background: linear-gradient(180deg, rgba(255,255,255,0.02) 0%, transparent 100%); }
.bamleon-cs__style-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0;
	margin: 48px 0;
	border-top: 1px solid var(--bamleon-border);
	border-bottom: 1px solid var(--bamleon-border);
}
.bamleon-cs__style-cell {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 48px;
	border-right: 1px solid var(--bamleon-border);
	border-bottom: 1px solid var(--bamleon-border);
}
.bamleon-cs__style-cell:nth-child(2n) { border-right: 0; }
.bamleon-cs__style-cell:nth-last-child(-n+2) { border-bottom: 0; }
.bamleon-cs__style-label {
	font-family: var(--bamleon-font-mono);
	font-size: var(--bamleon-text-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bamleon-text-3);
}
.bamleon-cs__swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.bamleon-cs__swatch {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 88px;
	height: 88px;
	border-radius: var(--bamleon-radius-lg);
	font-family: var(--bamleon-font-mono);
	font-size: var(--bamleon-text-xs);
	letter-spacing: 0.02em;
	border: 1px solid var(--bamleon-border);
}
.bamleon-cs__type-display {
	font-family: var(--bamleon-font-display);
	font-size: clamp(48px, 6vw, 96px);
	font-weight: 600;
	letter-spacing: -0.04em;
	line-height: 1;
	color: var(--bamleon-text);
}
.bamleon-cs__type-meta { font-size: var(--bamleon-text-sm); color: var(--bamleon-text-2); line-height: 1.55; }
.bamleon-cs__motion-curve {
	font-family: var(--bamleon-font-mono);
	font-size: 18px;
	color: var(--bamleon-text);
	padding: 8px 12px;
	background: var(--bamleon-surface-2);
	border-radius: 6px;
	max-width: max-content;
}

/* ═══════════════════════════════════════════════════════════════════════════
 *  STYLE-SYSTEM TABS (Section 05) — CSS-only radio-driven tabbed view
 *  Two real shipped themes (Studio Light, Therum OS Dark) shown side-by-side
 *  via a tab switcher. Each panel renders a full mini-preview, the six
 *  theme tokens, and a meta-grid (type / density / signature).
 *  ═══════════════════════════════════════════════════════════════════════ */
.bamleon-cs__style-tabs {
	margin: 48px 0 24px;
	position: relative;
}
/* Radio inputs removed — tabs are now <button> elements driven by JS. */

/* Tablist — minimal inline tabs with underline-on-active. */
.bamleon-cs__style-tablist {
	display: flex;
	gap: 0;
	border-bottom: 1px solid var(--bamleon-border, #2a2a30);
	margin-bottom: 24px;
}
.bamleon-cs__style-tab {
	/* Button reset */
	appearance: none;
	background: none;
	border: none;
	font: inherit;
	text-align: left;
	/* Layout */
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	padding: 10px 0;
	margin-right: 28px;
	cursor: pointer;
	transition: color 0.18s ease;
	color: var(--bamleon-text-3, #6a6a78);
	user-select: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
}
.bamleon-cs__style-tab:hover { color: var(--bamleon-text-2, #b8b8c0); }
.bamleon-cs__style-tab-name {
	font-family: var(--bamleon-font-display);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: -0.005em;
	color: inherit;
	line-height: var(--bamleon-leading-snug);
}
.bamleon-cs__style-tab-meta {
	font-family: var(--bamleon-font-mono);
	font-size: 10px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bamleon-text-3, #6a6a78);
	opacity: 0.7;
}
/* Active state — .is-active class driven by JS */
.bamleon-cs__style-tab.is-active {
	color: var(--bamleon-text, #f7f7fa);
	border-bottom-color: var(--bamleon-accent, #3672ff);
}
.bamleon-cs__style-tab.is-active .bamleon-cs__style-tab-meta {
	opacity: 1;
	color: var(--bamleon-accent, #3672ff);
}
.bamleon-cs__style-tab:focus-visible {
	outline: 2px solid var(--bamleon-accent);
	outline-offset: -2px;
}

/* Panels — hidden by default, revealed via .is-active-panel class */
.bamleon-cs__style-panel { display: none; padding: 48px; }
.bamleon-cs__style-panel.is-active-panel { display: block; }

/* Mini-preview pane — actual rendering of each theme's chrome  */
.bamleon-cs__style-preview {
	display: grid;
	grid-template-columns: 200px 1fr;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: none;
	margin-bottom: 32px;
	min-height: 300px;
}
.bamleon-cs__style-preview--studio {
	background: #f6f6f6;
	color: #0f172a;
	border: 1px solid #e5e7eb;
}
.bamleon-cs__style-preview--therum {
	background: #0a0a0c;
	color: #f7f7fa;
	border: 1px solid #2a2a30;
}
.bamleon-cs__style-preview-sb {
	padding: 24px 16px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.bamleon-cs__style-preview--studio .bamleon-cs__style-preview-sb {
	background: #ffffff;
	border-right: 1px solid #e5e7eb;
}
.bamleon-cs__style-preview--therum .bamleon-cs__style-preview-sb {
	background: #0d0d10;
	border-right: 1px solid #1d1d22;
}
.bamleon-cs__style-preview-logo {
	width: 36px; height: 36px;
	display: grid; place-items: center;
	border-radius: var(--bamleon-radius-md);
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 18px;
	font-weight: 700;
	color: #fff;
}
.bamleon-cs__style-preview--studio .bamleon-cs__style-preview-logo { background: #2563eb; }
.bamleon-cs__style-preview--therum .bamleon-cs__style-preview-logo { background: #3672ff; }
.bamleon-cs__style-preview-nav {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.bamleon-cs__style-preview-nav span {
	display: block;
	padding: 8px 12px;
	border-radius: 6px;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: var(--bamleon-text-sm);
	color: inherit;
	opacity: 0.7;
}
.bamleon-cs__style-preview--studio .bamleon-cs__style-preview-nav span.active { background: rgba(37,99,235,0.1); color: #2563eb; opacity: 1; font-weight: 600; }
.bamleon-cs__style-preview--therum .bamleon-cs__style-preview-nav span.active { background: rgba(54,114,255,0.18); color: #3672ff; opacity: 1; font-weight: 600; }
.bamleon-cs__style-preview-main {
	padding: 32px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.bamleon-cs__style-preview-kicker {
	font-family: 'JetBrains Mono', monospace;
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0.6;
}
.bamleon-cs__style-preview--studio .bamleon-cs__style-preview-title {
	font-family: 'Inter Tight', 'Inter', system-ui, sans-serif;
	font-size: 30px;
	font-weight: 700;
	letter-spacing: -0.04em;
	margin: 0;
	color: #0f172a;
}
.bamleon-cs__style-preview--therum .bamleon-cs__style-preview-title {
	font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
	font-size: 30px;
	font-weight: 600;
	letter-spacing: -0.02em;
	margin: 0;
	color: #f7f7fa;
}
.bamleon-cs__style-preview-sub {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 14px;
	margin: 0 0 8px;
	opacity: 0.65;
}
.bamleon-cs__style-preview-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin-top: 16px;
}
.bamleon-cs__style-preview-card {
	padding: 16px;
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.bamleon-cs__style-preview--studio .bamleon-cs__style-preview-card { background: #ffffff; border: 1px solid #e5e7eb; box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
.bamleon-cs__style-preview--therum .bamleon-cs__style-preview-card { background: #141418; border: 1px solid #2a2a30; box-shadow: 0 4px 16px rgba(0,0,0,0.4); }
.bamleon-cs__style-preview-card span {
	font-family: 'JetBrains Mono', monospace;
	font-size: 9px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0.6;
}
.bamleon-cs__style-preview-card strong {
	font-family: 'JetBrains Mono', monospace;
	font-size: 24px;
	font-weight: 600;
}
.bamleon-cs__style-preview--studio .bamleon-cs__style-preview-card strong { color: #2563eb; }
.bamleon-cs__style-preview--therum .bamleon-cs__style-preview-card strong { color: #3672ff; }

/* Token swatches row */
.bamleon-cs__style-tokens {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 16px;
	margin-bottom: 32px;
}
/* Token tile reads its bg/border from the panel context, not the outer
   page (--bamleon-bg). Was pulling the page-level dark bg into the white
   Studio panel, creating a contrast cliff. currentColor + per-panel
   overrides keeps it consistent inside either panel. */
.bamleon-cs__style-token {
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: flex-start;
	padding: 14px;
	border-radius: 10px;
	background: transparent;
	border: 1px solid currentColor;
	border-color: rgba(127, 127, 127, 0.18);
}
/* Studio (white panel): subtle off-white tile bg + slate border, code/hex both readable */
.bamleon-cs__style-panel--studio .bamleon-cs__style-token {
	background: #fafafa;
	border-color: #e5e7eb;
}
.bamleon-cs__style-panel--studio .bamleon-cs__style-token code { color: #0f172a; }  /* 18.5:1 on #fafafa */
.bamleon-cs__style-panel--studio .bamleon-cs__style-token span { color: #475569; }  /* 7.4:1  on #fafafa */
/* Therum OS Dark panel: dark tile bg + bright code + softer hex */
.bamleon-cs__style-panel--therum .bamleon-cs__style-token {
	background: #141418;
	border-color: #2a2a30;
}
.bamleon-cs__style-panel--therum .bamleon-cs__style-token code { color: #f7f7fa; }  /* 17.2:1 on #141418 */
.bamleon-cs__style-panel--therum .bamleon-cs__style-token span { color: #a1a1aa; }  /* 7.1:1 on #141418 */

.bamleon-cs__style-token-swatch {
	display: block !important;
	width: 100%;
	height: 64px;
	border-radius: 6px;
	box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
}
.bamleon-cs__style-token code {
	display: block;
	font-family: var(--bamleon-font-mono);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.02em;
	margin: 0;
}
.bamleon-cs__style-token span {
	display: block;
	font-family: var(--bamleon-font-mono);
	font-size: var(--bamleon-text-sm);
}
/* Keyboard-focusable elements anywhere in this section get a clear ring. */
.bamleon-cs__style-system :focus-visible {
	outline: 2px solid var(--bamleon-accent, #3672ff);
	outline-offset: 2px;
	border-radius: var(--bamleon-radius-sm);
}

/* Meta grid below tokens — type / density / signature */
.bamleon-cs__style-meta-grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 32px;
	padding-top: 24px;
	border-top: 1px solid var(--bamleon-border);
}
.bamleon-cs__style-meta-cell {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.bamleon-cs__style-footnote {
	font-family: var(--bamleon-font-display);
	font-size: var(--bamleon-text-base);
	color: var(--bamleon-text-2);
	font-style: italic;
	margin: 40px 0 0;
	padding: 24px 0 0;
	border-top: 1px solid var(--bamleon-border, rgba(0,0,0,0.08));
	text-wrap: pretty;
}

@media (max-width: 900px) {
	.bamleon-cs__style-preview { grid-template-columns: 1fr; min-height: auto; }
	.bamleon-cs__style-preview-sb { flex-direction: row; }
	.bamleon-cs__style-tokens { grid-template-columns: repeat(3, 1fr); }
	.bamleon-cs__style-meta-grid { grid-template-columns: 1fr; gap: 20px; }
	.bamleon-cs__style-tablist { grid-template-columns: 1fr; }
	.bamleon-cs__style-tab { border-right: 0; border-bottom: 1px solid var(--bamleon-border); }
	.bamleon-cs__style-panel { padding: 24px; }
}

/* ── Performance grid (Section 09) ─────────────────────────────────────── */
.bamleon-cs__perf-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin: 48px 0 32px;
}
.bamleon-cs__perf-cell {
	padding: 36px;
	background: var(--bamleon-surface);
	border: 1px solid var(--bamleon-border);
	border-radius: 14px;
}
.bamleon-cs__perf-num {
	font-family: var(--bamleon-font-mono);
	font-size: var(--bamleon-text-xs);
	letter-spacing: 0.08em;
	color: var(--bamleon-accent);
}
.bamleon-cs__perf-title {
	font-family: var(--bamleon-font-display);
	font-size: clamp(20px, 1.8vw, 24px);
	font-weight: 500;
	letter-spacing: var(--bamleon-tracking-normal);
	margin: 12px 0 16px;
	color: var(--bamleon-text);
}
.bamleon-cs__perf-cell p { font-size: 14px; line-height: var(--bamleon-leading-base); color: var(--bamleon-text-2); margin: 0; }

/* ── Version timeline (Section 10) ─────────────────────────────────────── */
.bamleon-cs__timeline {
	list-style: none;
	margin: 48px 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	counter-reset: tl;
}
.bamleon-cs__timeline-item {
	position: relative;
	padding: 28px;
	background: var(--bamleon-surface);
	border: 1px solid var(--bamleon-border);
	border-radius: 14px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	transition: transform 250ms var(--bamleon-ease-out), border-color 250ms var(--bamleon-ease-out);
}
.bamleon-cs__timeline-item:hover { transform: translateY(-3px); border-color: var(--bamleon-accent); }
.bamleon-cs__timeline-item.is-current {
	background: linear-gradient(135deg, rgba(91, 141, 190,0.10) 0%, rgba(147,51,234,0.06) 100%);
	border-color: var(--bamleon-accent);
}
.bamleon-cs__timeline-version {
	font-family: var(--bamleon-font-mono);
	font-size: 12px;
	letter-spacing: var(--bamleon-tracking-wide);
	color: var(--bamleon-accent);
}
.bamleon-cs__timeline-name {
	font-family: var(--bamleon-font-display);
	font-size: clamp(18px, 1.6vw, 22px);
	font-weight: 500;
	letter-spacing: var(--bamleon-tracking-normal);
	color: var(--bamleon-text);
}
.bamleon-cs__timeline-desc { font-size: var(--bamleon-text-sm); line-height: 1.55; color: var(--bamleon-text-2); margin: 0; }

/* ── Roadmap (Section 13) ──────────────────────────────────────────────── */
.bamleon-cs__roadmap {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin: 48px 0;
}
.bamleon-cs__roadmap-stage {
	padding: 36px;
	background: linear-gradient(135deg, rgba(91, 141, 190,0.06) 0%, rgba(147,51,234,0.03) 100%);
	border: 1px solid var(--bamleon-border-2);
	border-radius: 14px;
}
.bamleon-cs__roadmap-tag {
	display: inline-block;
	padding: 4px 10px;
	font-family: var(--bamleon-font-mono);
	font-size: var(--bamleon-text-xs);
	letter-spacing: 0.06em;
	color: var(--bamleon-accent);
	background: rgba(91, 141, 190, 0.10);
	border-radius: var(--bamleon-radius-pill);
	margin-bottom: 16px;
}
.bamleon-cs__roadmap-title {
	font-family: var(--bamleon-font-display);
	font-size: clamp(20px, 2vw, 26px);
	font-weight: 500;
	letter-spacing: -0.02em;
	color: var(--bamleon-text);
	margin: 0 0 12px;
}
.bamleon-cs__roadmap-stage p { font-size: 14px; line-height: var(--bamleon-leading-base); color: var(--bamleon-text-2); margin: 0; }

/* ── Live demo (Section 15) ────────────────────────────────────────────────
 * Closing beat. Full-bleed iframe of admin-demo.html — visitor can actually
 * use the dashboard from inside the case study. Heavy shadow + dark backdrop
 * so the (light-mode) demo lifts off the page like a real product surface. */
.bamleon-cs__section--demo { padding-bottom: 24px; }
.bamleon-cs__demo-frame {
	position: relative;
	margin: 24px calc(50% - 50vw) 0;
	padding: 0;
	width: 100vw;
	max-width: none;
	background: transparent;
	border: 0;
	border-radius: 0;
}
/* Browser-chromed demo: faux Safari/Chrome window around the live iframe.
 * Bar sits flush on top, iframe joins seamlessly under it, single rounded
 * card around the whole thing. */
.bamleon-cs__demo-frame--browser {
	background: #1a1a1a;
	border: 1px solid var(--bamleon-border);
	border-radius: 16px;
	overflow: hidden;
	/* Hard clip — defense-in-depth so the embedded admin iframe (Section 11)
	   can never leak past the rounded card corner regardless of viewport
	   transform math. Matches the 16px radius above. */
	clip-path: inset(0 round 16px);
	isolation: isolate;
	display: flex;
	flex-direction: column;
}
/* Demo bar — taller, toggles centered, URL tucked left, dots hidden.
 * Distinct from the case-study browser-tile bars (those keep the dots). */
.bamleon-cs__browser-bar--demo {
	height: 48px;
	padding: 0 16px;
	background: #1e1e1e;
	border-bottom: 1px solid rgba(255,255,255,0.06);
	position: relative;
	justify-content: center;
}
.bamleon-cs__browser-bar--demo .dot { display: none; }
.bamleon-cs__browser-bar--demo .url {
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	flex: 0 0 auto;
	margin-left: 0;
	font-size: 11px;
	padding: 4px 12px;
	background: rgba(255,255,255,0.05);
	border: 1px solid rgba(255,255,255,0.06);
	border-radius: 8px;
	color: var(--bamleon-text-3);
}
.bamleon-light .bamleon-cs__browser-bar--demo { background: #f0f0f2; border-bottom-color: rgba(0,0,0,0.06); }
.bamleon-light .bamleon-cs__browser-bar--demo .url { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.06); color: var(--bamleon-text-3); }
.bamleon-cs__demo-frame--browser .bamleon-cs__demo-iframe {
	border-radius: 0;
	background: #fff;
}
.bamleon-cs__demo-iframe {
	display: block;
	width: 100%;
	margin: 0 auto;
	height: 95vh;
	min-height: 800px;
	border: 0;
	border-radius: 16px;
	background: #fafafa;
	box-shadow: none;
}
.bamleon-cs__demo-cta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	padding: 32px var(--bamleon-cs-gutter) 56px;
	text-align: center;
}
.bamleon-cs__demo-caption {
	font-family: var(--bamleon-font-mono);
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bamleon-text-3);
}

/* ── Demo responsive viewport toggle ──────────────────────────────────── */
/* Icon + text switcher, centered in the demo bar. Outer frame stays
 * full-width; inner .bamleon-cs__demo-viewport controls iframe width.
 * Icons via CSS mask-image so they inherit currentColor automatically. */
.bamleon-cs__demo-toggles {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: rgba(255,255,255,0.07);
	border-radius: 10px;
	padding: 4px;
}
.bamleon-cs__demo-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	font-family: var(--bamleon-font-mono);
	font-size: 11px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.35);
	border-radius: 8px;
	cursor: pointer;
	transition: color 150ms ease, background 150ms ease;
	user-select: none;
	line-height: 1;
	white-space: nowrap;
}
.bamleon-cs__demo-toggle::before {
	content: '';
	display: block;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	background: currentColor;
	-webkit-mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
}
/* Icon: desktop — monitor + stand */
.bamleon-cs__demo-toggle[data-vp="desktop"]::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='20' height='14' rx='2'/%3E%3Cpath d='M8 21h8M12 17v4'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='20' height='14' rx='2'/%3E%3Cpath d='M8 21h8M12 17v4'/%3E%3C/svg%3E");
}
/* Icon: tablet */
.bamleon-cs__demo-toggle[data-vp="tablet"]::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='2' width='16' height='20' rx='2'/%3E%3Cpath d='M12 18h.01'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='2' width='16' height='20' rx='2'/%3E%3Cpath d='M12 18h.01'/%3E%3C/svg%3E");
}
/* Icon: mobile — narrower phone */
.bamleon-cs__demo-toggle[data-vp="mobile"]::before {
	width: 14px;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='2' width='14' height='20' rx='2'/%3E%3Cpath d='M12 18h.01'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='2' width='14' height='20' rx='2'/%3E%3Cpath d='M12 18h.01'/%3E%3C/svg%3E");
}
.bamleon-cs__demo-toggle:hover { color: rgba(255,255,255,0.6); }
.bamleon-cs__demo-toggle.is-active {
	color: #fff;
	background: rgba(255,255,255,0.12);
}
.bamleon-light .bamleon-cs__demo-toggle { color: rgba(0,0,0,0.3); }
.bamleon-light .bamleon-cs__demo-toggle:hover { color: rgba(0,0,0,0.55); }
.bamleon-light .bamleon-cs__demo-toggle.is-active {
	color: var(--bamleon-text);
	background: rgba(0,0,0,0.08);
}
.bamleon-light .bamleon-cs__demo-toggles { background: rgba(0,0,0,0.04); }

/* Viewport container — lives inside .bamleon-cs__demo-frame--browser,
 * centers itself with auto margins in the flex column. */
.bamleon-cs__demo-viewport {
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	transition: width 450ms cubic-bezier(0.4, 0, 0.2, 1),
	            max-width 450ms cubic-bezier(0.4, 0, 0.2, 1);
}
.bamleon-cs__demo-viewport .bamleon-cs__demo-iframe {
	transition: border-radius 450ms cubic-bezier(0.4, 0, 0.2, 1);
}
.bamleon-cs__demo-viewport[data-vp="tablet"] {
	width: 768px;
}
.bamleon-cs__demo-viewport[data-vp="mobile"] {
	width: 390px;
}
/* Subtle edge when viewport is narrower — floating-in-dark feel. */
.bamleon-cs__demo-viewport[data-vp="tablet"] .bamleon-cs__demo-iframe,
.bamleon-cs__demo-viewport[data-vp="mobile"] .bamleon-cs__demo-iframe {
	box-shadow: 0 0 0 1px rgba(255,255,255,0.04);
}
.bamleon-cs__demo-frame--responsive {
	background: #111;
}
.bamleon-light .bamleon-cs__demo-frame--responsive { background: #e8e8ec; }

@media (max-width: 560px) {
	.bamleon-cs__demo-toggles { gap: 2px; padding: 3px; }
	.bamleon-cs__demo-toggle { padding: 5px 10px; font-size: 10px; gap: 5px; }
	.bamleon-cs__demo-toggle::before { width: 14px; height: 14px; }
	/* Hide label text on tiny screens — icon only */
	.bamleon-cs__browser-bar--demo .url { display: none; }
}

/* Closing handoff — quiet next-step links beneath the coda. */
.bamleon-cs__next-steps {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 16px;
	padding: 0 var(--bamleon-cs-gutter) 96px;
	font-family: var(--bamleon-font-mono);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.bamleon-cs__next-link {
	color: var(--bamleon-text-2);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color 160ms ease, border-color 160ms ease;
	padding-bottom: 2px;
}
.bamleon-cs__next-link:hover,
.bamleon-cs__next-link:focus-visible {
	color: var(--bamleon-text);
	border-bottom-color: var(--bamleon-text);
}
.bamleon-cs__next-sep {
	color: var(--bamleon-text-3);
	opacity: 0.5;
}
@media (max-width: 768px) {
	.bamleon-cs__next-steps { padding: 0 24px 72px; }
}

/* Closing coda — premium-tier reframe after the live demo.
   Three sentences, centered, hairline rule above. The page ends here. */
.bamleon-cs__coda {
	max-width: 880px;
	margin: 16px auto 0;
	padding: 64px var(--bamleon-cs-gutter) 32px;
	text-align: center;
	font-family: var(--bamleon-font-display, var(--bamleon-font-sans));
	font-size: clamp(22px, 2.4vw, 32px);
	line-height: 1.25;
	letter-spacing: var(--bamleon-tracking-normal);
	color: var(--bamleon-text);
	position: relative;
}
.bamleon-cs__coda::before {
	content: "";
	display: block;
	width: 56px;
	height: 1px;
	background: var(--bamleon-border);
	margin: 0 auto 40px;
}

@media (max-width: 768px) {
	.bamleon-cs__demo-iframe { height: 70vh; width: 96%; }
	.bamleon-cs__demo-frame { padding: 40px 0; }
	.bamleon-cs__coda { padding: 48px 24px 72px; font-size: var(--bamleon-text-lg); }
}

/* Mobile collapse for the new grids */
@media (max-width: 1100px) {
	.bamleon-cs__research,
	.bamleon-cs__timeline { grid-template-columns: repeat(2, 1fr); }
	.bamleon-cs__iterations,
	.bamleon-cs__perf-grid,
	.bamleon-cs__roadmap { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
	.bamleon-cs__research { grid-template-columns: 1fr; gap: 24px; }
	.bamleon-cs__timeline { grid-template-columns: 1fr; }
	.bamleon-cs__style-grid { grid-template-columns: 1fr; }
	.bamleon-cs__style-cell { border-right: 0; padding: 32px; }
	.bamleon-cs__style-cell:nth-child(2n) { border-right: 0; }
	.bamleon-cs__style-cell:nth-last-child(-n+2) { border-bottom: 1px solid var(--bamleon-border); }
	.bamleon-cs__style-cell:last-child { border-bottom: 0; }
	.bamleon-cs__stack-layer { grid-template-columns: 1fr; gap: 8px; padding: 24px; }
}


/* ── Metric strip ───────────────────────────────────────────────────────── */
.bamleon-cs__metrics {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
	padding: 60px 0;
	margin: 48px 0;
	/* Single bottom rule — the row-kicker above already carries a
	   border-bottom, so border-top here created a visual double-rule. */
	border-top: 0;
	border-bottom: 1px solid var(--bamleon-border);
}
.bamleon-cs__metric {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.bamleon-cs__metric-value {
	font-family: var(--bamleon-font-display);
	font-size: clamp(40px, 4.4vw, 64px);
	font-weight: 500;
	letter-spacing: var(--bamleon-tracking-tight);
	line-height: 1;
	color: var(--bamleon-text);
}
.bamleon-cs__metric-value em {
	color: var(--bamleon-accent);
	font-style: normal;
}
.bamleon-cs__metric-label {
	font-family: var(--bamleon-font-mono);
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bamleon-text-3);
}


/* ── Press list ─────────────────────────────────────────────────────────── */
.bamleon-cs__press {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--bamleon-border);
}
.bamleon-cs__press-item {
	display: grid;
	grid-template-columns: 100px 1fr auto auto;
	grid-template-areas:
		"date title pub arrow"
		".    title pub arrow";
	column-gap: 24px;
	row-gap: 2px;
	padding: 20px 0;
	border-bottom: 1px solid var(--bamleon-border);
	align-items: center;
	text-decoration: none;
	color: inherit;
	transition: background 200ms var(--bamleon-ease-out);
}
.bamleon-cs__press-date  { grid-area: date;  align-self: center; }
.bamleon-cs__press-title { grid-area: title; align-self: center; }
.bamleon-cs__press-pub   { grid-area: pub;   align-self: center; justify-self: end;
	font-family: var(--bamleon-font-mono);
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bamleon-text-3);
	font-weight: 400;
}
.bamleon-cs__press-arrow { grid-area: arrow; align-self: center; }
.bamleon-cs__press-item:hover { background: rgba(255,255,255,0.02); margin: 0 -16px; padding: 20px 16px; }
.bamleon-light .bamleon-cs__press-item:hover { background: rgba(0,0,0,0.02); }
.bamleon-cs__press-date {
	font-family: var(--bamleon-font-mono);
	font-size: 12px;
	letter-spacing: 0.06em;
	color: var(--bamleon-text-3);
	text-transform: uppercase;
}
.bamleon-cs__press-pub {
	font-family: var(--bamleon-font-display);
	font-size: 17px;
	font-weight: 500;
	color: var(--bamleon-text);
}
.bamleon-cs__press-title {
	font-family: var(--bamleon-font-body);
	font-size: 14px;
	color: var(--bamleon-text-2);
	line-height: 1.4;
}
.bamleon-cs__press-arrow {
	color: var(--bamleon-text-3);
	transition: color 200ms var(--bamleon-ease-out), transform 250ms var(--bamleon-ease-out);
}
.bamleon-cs__press-item:hover .bamleon-cs__press-arrow {
	color: var(--bamleon-text);
	transform: translateX(4px);
}

/* ── Press list — outlet / status / desc variant (Bricks-built bamleon-os) ─ */
/* Layout: outlet big in left, desc tight underneath, status pill on right */
.bamleon-cs__press-list {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin: 32px 0 0;
	border: 1px solid var(--bamleon-border);
	border-radius: 18px;
	overflow: hidden;
	background: rgba(255,255,255,0.02);
}
.bamleon-light .bamleon-cs__press-list { background: #fff; box-shadow: 0 1px 2px rgba(20,20,30,0.04), 0 8px 24px -8px rgba(20,20,30,0.07); }

.bamleon-cs__press-list .bamleon-cs__press-item {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"outlet status"
		"desc   status";
	column-gap: 24px;
	row-gap: 4px;
	padding: 22px 28px;
	border-bottom: 1px solid var(--bamleon-border);
	align-items: center;
	background: transparent;
	transition: background 140ms ease;
}
.bamleon-cs__press-list .bamleon-cs__press-item:last-child { border-bottom: none; }
.bamleon-cs__press-list .bamleon-cs__press-item:hover { background: rgba(255,255,255,0.03); margin: 0; padding: 22px 28px; }
.bamleon-light .bamleon-cs__press-list .bamleon-cs__press-item:hover { background: #f9f9fb; }

.bamleon-cs__press-outlet {
	grid-area: outlet;
	font-family: var(--bamleon-font-display);
	font-size: 17px;
	font-weight: 500;
	letter-spacing: var(--bamleon-tracking-normal);
	color: var(--bamleon-text);
	line-height: 1.25;
	align-self: end;
}
.bamleon-cs__press-status {
	grid-area: status;
	justify-self: end;
	font-family: var(--bamleon-font-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bamleon-text-3);
	background: rgba(255,255,255,0.05);
	padding: 4px 10px;
	border-radius: var(--bamleon-radius-pill);
	white-space: nowrap;
	align-self: center;
}
.bamleon-light .bamleon-cs__press-status { background: rgba(0,0,0,0.04); }
.bamleon-cs__press-desc {
	grid-area: desc;
	margin: 0;
	font-family: var(--bamleon-font-body);
	font-size: var(--bamleon-text-sm);
	color: var(--bamleon-text-2);
	line-height: 1.45;
	align-self: start;
}

@media (max-width: 560px) {
	.bamleon-cs__press-list .bamleon-cs__press-item {
		grid-template-columns: 1fr;
		grid-template-areas:
			"outlet"
			"desc"
			"status";
		row-gap: 6px;
		padding: 20px;
	}
	.bamleon-cs__press-status { justify-self: start; }
}


/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
	.bamleon-cs { --bamleon-cs-gutter: 40px; }
	.bamleon-cs__hero { padding: 140px 0 60px; }
	.bamleon-cs__hero-media { margin: 0 0 60px; }
	.bamleon-cs__meta { grid-template-columns: repeat(2, 1fr); padding: 30px 0 60px; gap: 24px; }
	.bamleon-cs__section { padding: 64px 0; }
	.bamleon-cs__media-grid--3 { grid-template-columns: repeat(2, 1fr); }
	.bamleon-cs__metrics { grid-template-columns: repeat(2, 1fr); }
	.bamleon-cs__press-item {
		grid-template-columns: 80px 1fr auto;
		grid-template-areas:
			"date title arrow"
			".    pub   arrow";
		row-gap: 2px;
	}
	.bamleon-cs__press-pub { justify-self: start; }
}

@media (max-width: 640px) {
	.bamleon-cs { --bamleon-cs-gutter: 20px; }
	.bamleon-cs__hero { padding: 120px 0 40px; }
	.bamleon-cs__hero-media { margin: 0 0 40px; }
	.bamleon-cs__meta { grid-template-columns: 1fr; padding: 24px 0 40px; }
	.bamleon-cs__section { padding: 48px 0; }
	.bamleon-cs__media-grid--2,
	.bamleon-cs__media-grid--3 { grid-template-columns: 1fr; }
	.bamleon-cs__metrics { grid-template-columns: 1fr; gap: 24px; padding: 40px 0; }
	.bamleon-cs__press-item {
		grid-template-columns: 1fr auto;
		grid-template-areas:
			"date  arrow"
			"title arrow"
			"pub   arrow";
		row-gap: 2px;
	}
	.bamleon-cs__press-pub { justify-self: start; }
}

/* ─── LGC iteration pairs (Process & Iteration, section 04) ───────────── */

.bamleon-cs__iter-pair {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 32px;
	margin: 48px 0 0;
	width: 100%;
}

.bamleon-cs__iter-cell {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.bamleon-cs__iter-cell .bamleon-cs__iteration-stage {
	display: inline-block;
	font-family: var(--bamleon-cs-mono, "JetBrains Mono", monospace);
	font-size: var(--bamleon-text-xs);
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #6b7280;
	margin: 0;
}

.bamleon-cs__iter-cell .bamleon-cs__iteration-title {
	font-size: 22px;
	line-height: var(--bamleon-leading-snug);
	font-weight: 500;
	letter-spacing: var(--bamleon-tracking-normal);
	margin: 0 0 6px;
	color: #111;
}

/* Empty placeholder plate (no Figma export yet) */
.bamleon-cs__plate--empty,
.bamleon-cs__plate-window--empty,
.bamleon-cs__browser-canvas--empty {
	background-color: #f7f1e3;
	background-image:
		repeating-linear-gradient(
			135deg,
			rgba(20, 20, 20, 0.04) 0,
			rgba(20, 20, 20, 0.04) 1px,
			transparent 1px,
			transparent 14px
		);
}

.bamleon-cs__plate--empty {
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: transparent;
	background-image: none;
	cursor: default;
}

.bamleon-cs__plate-window--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 10px;
	border: 1.5px dashed rgba(20, 20, 20, 0.25);
	aspect-ratio: 4 / 3;
	width: 100%;
	border-radius: var(--bamleon-radius-sm);
	transition: border-color 160ms ease, background-color 160ms ease;
}

.bamleon-cs__plate--empty:hover .bamleon-cs__plate-window--empty {
	border-color: rgba(20, 20, 20, 0.5);
	background-color: #f4ead0;
}

.bamleon-cs__plate-empty-tag {
	font-family: var(--bamleon-cs-mono, "JetBrains Mono", monospace);
	font-size: var(--bamleon-text-xs);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #6b7280;
	padding: 6px 10px;
	border: 1px solid rgba(20, 20, 20, 0.18);
	background: rgba(255, 255, 255, 0.6);
	border-radius: 2px;
}

/* ── Kingsland · In Production grid (Section 05) ───────────────────────
   2x2 card grid showing live Kingsland case study pages.
   Each card: thumbnail (16:10 retina WebP) + project name + pattern note
   + external link to the live case study on kingslandny.com. */
.bamleon-cs__section--production .bamleon-cs__production-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 32px;
	margin-top: 48px;
}
.bamleon-cs__production-card {
	display: flex;
	flex-direction: column;
	gap: 0;
	background: var(--bamleon-surface);
	border: 1px solid var(--bamleon-border);
	border-radius: var(--bamleon-radius-lg);
	overflow: hidden;
	transition: transform 240ms cubic-bezier(.32,.72,0,1), box-shadow 240ms cubic-bezier(.32,.72,0,1);
}
.bamleon-cs__production-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.07);
}
.bamleon-cs__production-img,
.bamleon-cs__production-card .bamleon-cs__production-img img,
.bamleon-cs__production-card > .brxe-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: contain;
	object-position: top center;
	border-bottom: 1px solid var(--bamleon-border);
	background: #f6f6f6;
}
.bamleon-cs__production-meta {
	padding: 18px 22px 24px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.bamleon-cs__production-name {
	font-family: var(--bamleon-font-display, var(--bamleon-font-sans));
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--bamleon-text);
	margin: 0;
	line-height: var(--bamleon-leading-snug);
}
.bamleon-cs__production-pattern {
	font-family: var(--bamleon-font-mono);
	font-size: var(--bamleon-text-xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bamleon-text-3);
	margin: 2px 0 12px;
	line-height: 1.55;
}
.bamleon-cs__production-link,
.bamleon-cs__production-link a {
	font-family: var(--bamleon-font-mono);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bamleon-text-2);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color 160ms ease, border-color 160ms ease;
	align-self: flex-start;
	padding-bottom: 2px;
}
.bamleon-cs__production-link:hover,
.bamleon-cs__production-link:focus-visible,
.bamleon-cs__production-link a:hover,
.bamleon-cs__production-link a:focus-visible {
	color: var(--bamleon-text);
	border-bottom-color: var(--bamleon-text);
}
@media (max-width: 900px) {
	.bamleon-cs__section--production .bamleon-cs__production-grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}

/* ── Kingsland hero media — the system at a glance SVG ───────────────────
   Sits below the hero copy block. Renders the full-width 1280x720 system
   overview (4 layouts above, 8 modules below, dotted connectors between). */
.bamleon-cs__hero-media--kingsland {
	margin-top: 56px;
	width: 100%;
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
}
.bamleon-cs__hero-media--kingsland img {
	display: block;
	width: 100%;
	height: auto;
	background: #f6f6f6;
	border: 1px solid var(--bamleon-border);
	border-radius: 6px;
}

/* ── Jaywalk · §04 wireframe SVGs inside browser-canvas ────────────────── */
.bamleon-cs__browser-canvas .bamleon-cs__wf-img,
.bamleon-cs__browser-canvas .bamleon-cs__wf-img img {
	display: block;
	width: 100%;
	height: auto;
	background: transparent;
	object-fit: contain;
}

/* ── LGC iteration plates · filled with directional placeholder SVGs ──── */
.bamleon-cs__plate-window--filled .bamleon-cs__plate-empty-tag,
.bamleon-cs__plate-window--filled .bamleon-cs__plate-empty-path,
.bamleon-cs__browser-canvas--filled .bamleon-cs__plate-empty-tag,
.bamleon-cs__browser-canvas--filled .bamleon-cs__plate-empty-path {
	display: none !important;
}
.bamleon-cs__plate-window--filled,
.bamleon-cs__browser-canvas--filled {
	border: 1px solid var(--bamleon-border);
	background: #f6f6f6;
	background-image: none;
	padding: 0;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	border-radius: var(--bamleon-radius-sm);
}
.bamleon-cs__iter-img,
.bamleon-cs__iter-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: transparent;
}

/* ── Filled plate (Kingsland wireframes) ──────────────────────────────────
   When a plate has the --filled modifier, its child wireframe SVG fills the
   box and the empty-state corner labels (tag + path) collapse so the SVG
   reads as the canonical artifact. */
.bamleon-cs__plate-window--filled {
	display: block;
	border: 1px solid var(--bamleon-border);
	background-color: #f6f6f6;
	background-image: none;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--bamleon-radius-sm);
	padding: 0;
}
.bamleon-cs__plate-window--filled .bamleon-cs__plate-empty-tag,
.bamleon-cs__plate-window--filled .bamleon-cs__plate-empty-path {
	display: none !important;
}
.bamleon-cs__plate-window--filled .bamleon-cs__plate-svg,
.bamleon-cs__plate-window--filled .bamleon-cs__plate-svg img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: transparent;
}

.bamleon-cs__plate-empty-path {
	font-family: var(--bamleon-cs-mono, "JetBrains Mono", monospace);
	font-size: 10px;
	letter-spacing: var(--bamleon-tracking-wide);
	color: #8a8378;
	white-space: nowrap;
}

/* Thumbnails strip below the hero plate inside an iteration cell */
.bamleon-cs__iter-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 4px;
}

.bamleon-cs__iter-thumb {
	flex: 0 0 calc(25% - 6px);
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border: 1px solid rgba(20, 20, 20, 0.08);
	border-radius: 2px;
	background: #fff;
	transition: border-color 160ms ease, transform 160ms ease;
}

.bamleon-cs__iter-thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.bamleon-cs__iter-thumb:hover {
	border-color: rgba(20, 20, 20, 0.4);
	transform: translateY(-1px);
}

/* "What changed & why" narrative blocks between iteration pairs.
   Stacked layout — label row sits above, prose runs full container width below. */
.bamleon-cs__iter-changed {
	margin: 36px 0 56px;
	padding: 28px 0 0;
	border-top: 1px solid rgba(20, 20, 20, 0.12);
	display: block;
}

.bamleon-cs__iter-changed-head {
	display: flex;
	align-items: baseline;
	gap: 16px;
	margin: 0 0 18px;
	flex-wrap: wrap;
}

.bamleon-cs__iter-changed-arrow {
	font-family: var(--bamleon-cs-mono, "JetBrains Mono", monospace);
	font-size: var(--bamleon-text-sm);
	font-weight: 500;
	letter-spacing: 0.06em;
	color: #111;
}

.bamleon-cs__iter-changed-label {
	font-family: var(--bamleon-cs-mono, "JetBrains Mono", monospace);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #8a8378;
}

.bamleon-cs__iter-changed p {
	font-size: 17px;
	line-height: 1.55;
	margin: 0 0 14px;
	color: #1a1a1a;
}

.bamleon-cs__iter-changed p:last-child { margin-bottom: 0; }

.bamleon-cs__iter-changed--final { margin-bottom: 0; }

/* Final stage — wraps the browser-window tile */
.bamleon-cs__iter-final-stage {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 24px 0 0;
}

.bamleon-cs__iter-final-stage .bamleon-cs__iteration-stage {
	font-family: var(--bamleon-cs-mono, "JetBrains Mono", monospace);
	font-size: var(--bamleon-text-xs);
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #6b7280;
}

.bamleon-cs__iter-final-stage .bamleon-cs__iteration-title {
	font-size: 26px;
	line-height: var(--bamleon-leading-snug);
	font-weight: 500;
	letter-spacing: var(--bamleon-tracking-normal);
	margin: 0 0 8px;
	color: #111;
}

/* Browser-tile scroll variant (final hero — hover scrolls full-page render) */
.bamleon-cs__browser-tile--scroll .bamleon-cs__browser-canvas {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	position: relative;
}

.bamleon-cs__browser-tile--scroll .bamleon-cs__browser-canvas img {
	width: 100%;
	height: auto;
	display: block;
	transition: transform 4.5s ease-in-out;
	transform-origin: top center;
	transform: translateY(0);
}

.bamleon-cs__browser-tile--scroll:hover .bamleon-cs__browser-canvas img {
	transform: translateY(calc(-100% + 56.25vw / 2));
	transform: translateY(calc(-1 * (100% - 100%)));
	/* Fallback for browsers that compute height of contained img against
	   container — animate to bottom by translating up by image overflow. */
	transform: translateY(-65%);
}

.bamleon-cs__browser-canvas--empty {
	aspect-ratio: 16 / 9;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 12px;
	border: 1.5px dashed rgba(20, 20, 20, 0.25);
}

/* ─── Section 07 closer ───────────────────────────────────────────────── */

.bamleon-cs__section--closer .bamleon-cs__pullquote {
	font-size: var(--bamleon-text-xl);
	line-height: 1.25;
	margin: 0 0 48px;
}

.bamleon-cs__closer-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	margin: 0 0 48px;
	padding: 32px 0;
	border-top: 1px solid rgba(20, 20, 20, 0.12);
	border-bottom: 1px solid rgba(20, 20, 20, 0.12);
}

.bamleon-cs__closer-item {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.bamleon-cs__closer-num {
	font-family: var(--bamleon-cs-display, "Halyard Display", sans-serif);
	font-size: 56px;
	line-height: 1;
	font-weight: 500;
	letter-spacing: -0.02em;
	color: #111;
}

.bamleon-cs__closer-num em {
	font-style: normal;
	font-size: 22px;
	font-weight: 400;
	color: #6b7280;
	margin-left: 2px;
}

.bamleon-cs__closer-label {
	font-family: var(--bamleon-cs-mono, "JetBrains Mono", monospace);
	font-size: var(--bamleon-text-xs);
	font-weight: 500;
	letter-spacing: 0.06em;
	color: #4a4a4a;
	line-height: 1.5;
}

.bamleon-cs__closer-cta {
	margin-top: 48px;
}

/* ─── Iteration responsive ───────────────────────────────────────────── */

@media (max-width: 1024px) {
	.bamleon-cs__closer-grid { grid-template-columns: repeat(2, 1fr); }
	.bamleon-cs__closer-num { font-size: 44px; }
}

@media (max-width: 640px) {
	.bamleon-cs__iter-pair { grid-template-columns: 1fr; gap: 24px; }
	.bamleon-cs__iter-changed { padding-top: 20px; margin: 24px 0 40px; }
	.bamleon-cs__iter-changed p { font-size: var(--bamleon-text-base); }
	.bamleon-cs__closer-grid { grid-template-columns: 1fr; gap: 20px; padding: 24px 0; }
	.bamleon-cs__section--closer .bamleon-cs__pullquote { font-size: 22px; }
	.bamleon-cs__iter-final-stage .bamleon-cs__iteration-title { font-size: 22px; }
	.bamleon-cs__iter-thumb { flex-basis: calc(33.333% - 6px); }
}

/* ─── DailyPay per-brand block (existing page + 3-up redesign captures) ── */

.bamleon-cs__brand-block {
	margin: 64px 0 0;
	padding: 0;
}

.bamleon-cs__brand-block-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 24px;
	margin: 0 0 24px;
	padding: 0 0 18px;
	border-bottom: 1px solid rgba(20, 20, 20, 0.12);
	flex-wrap: wrap;
}

.bamleon-cs__brand-block-name {
	font-family: var(--bamleon-cs-display, "Halyard Display", sans-serif);
	font-size: 32px;
	line-height: 1.1;
	font-weight: 500;
	letter-spacing: -0.02em;
	color: #111;
	margin: 0;
}

.bamleon-cs__brand-block-tag {
	font-family: var(--bamleon-cs-mono, "JetBrains Mono", monospace);
	font-size: var(--bamleon-text-xs);
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #6b7280;
}

.bamleon-cs__brand-block-body {
	margin: 0 0 28px;
	font-size: 17px;
	line-height: 1.55;
	color: #1a1a1a;
}

.bamleon-cs__brand-block-body p { margin: 0 0 14px; }
.bamleon-cs__brand-block-body p:last-child { margin-bottom: 0; }

/* 3-up grid for each brand: [OG | Redesign 1 | Redesign 2].
   Tag chip sits on the plate label to mark Existing vs Redesign. */
.bamleon-cs__brand-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	margin: 0;
}

.bamleon-cs__brand-grid .bamleon-cs__plate { margin: 0; }

.bamleon-cs__plate-tag {
	display: inline-block;
	padding: 3px 8px;
	margin-right: 8px;
	font-family: var(--bamleon-cs-mono, "JetBrains Mono", monospace);
	font-size: 9px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	border-radius: 2px;
	vertical-align: middle;
}

.bamleon-cs__plate-tag--og {
	background: rgba(20, 20, 20, 0.06);
	color: #4a4a4a;
	border: 1px solid rgba(20, 20, 20, 0.14);
}

.bamleon-cs__plate-tag--new {
	background: #111;
	color: #f7f1e3;
	border: 1px solid #111;
}

/* 2x2 browser-tile grid (Section 05 partner summary) */
.bamleon-cs__media-grid--2x2 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}

.bamleon-cs__media-grid--2x2 > .bamleon-cs__browser-tile {
	margin: 0;
	max-width: none;
	flex: none;
}

@media (max-width: 768px) {
	.bamleon-cs__media-grid--2x2 { grid-template-columns: 1fr; gap: 18px; }
}

@media (max-width: 1024px) {
	.bamleon-cs__brand-block-name { font-size: 26px; }
}

@media (max-width: 640px) {
	.bamleon-cs__brand-block { margin-top: 40px; }
	.bamleon-cs__brand-block-head { flex-direction: column; gap: 6px; align-items: flex-start; }
	.bamleon-cs__brand-block-name { font-size: 22px; }
	.bamleon-cs__brand-grid { grid-template-columns: 1fr; gap: 12px; }
}

/* ─── Email viewer — single phone + tab switcher ────────────────────── */

.bamleon-cs__email-viewer {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 48px 0 0;
	padding: 48px 0;
	gap: 32px;
}

/* Tab strip */
.bamleon-cs__email-tabs {
	display: flex;
	gap: 0;
	background: var(--bamleon-surface);
	border: 1px solid var(--bamleon-border);
	border-radius: 999px;
	padding: 4px;
}
.bamleon-cs__email-tab {
	all: unset;
	font-family: var(--bamleon-font-mono);
	font-size: var(--bamleon-text-xs);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bamleon-text-3);
	padding: 10px 24px;
	border-radius: 999px;
	cursor: pointer;
	transition: background 180ms ease, color 180ms ease;
	white-space: nowrap;
}
.bamleon-cs__email-tab:hover {
	color: var(--bamleon-text);
}
.bamleon-cs__email-tab.is-active {
	background: var(--bamleon-text);
	color: var(--bamleon-bg);
}

/* Phone device */
.bamleon-cs__email-device {
	display: flex;
	justify-content: center;
	width: 100%;
}
.bamleon-cs__email-device .bamleon-cs__phone-frame {
	width: 100%;
	max-width: 320px;
	aspect-ratio: 9 / 19.5;
}

/* Slides inside the phone screen */
.bamleon-cs__email-slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	display: block;
	opacity: 0;
	transition: opacity 350ms ease, transform 0s;
	transform: translateY(0);
	pointer-events: none;
}
.bamleon-cs__email-slide.is-active {
	opacity: 1;
	position: relative;
	pointer-events: auto;
}

/* Hover-scroll: speed adapts to natural image height via JS --scroll-y */
.bamleon-cs__email-device:hover .bamleon-cs__email-slide.is-active {
	transform: translateY(var(--scroll-y, -60%));
	transition: opacity 350ms ease,
	            transform var(--scroll-dur, 6s) linear;
}

@media (max-width: 640px) {
	.bamleon-cs__email-device .bamleon-cs__phone-frame { max-width: 260px; }
	.bamleon-cs__email-tab { padding: 8px 16px; font-size: 10px; }
}

/* ─── Across Devices — phone frame + laptop browser frame side by side ── */

.bamleon-cs__device-pair {
	display: grid;
	grid-template-columns: minmax(220px, 280px) 1fr;
	gap: 32px;
	align-items: end;
	margin: 32px 0 0;
}

/* Phone frame: rounded slab with bezel + dynamic island, scrollable inside */
.bamleon-cs__phone-frame {
	position: relative;
	width: 100%;
	max-width: 280px;
	aspect-ratio: 9 / 19.5;
	background: var(--bamleon-bg);
	border-radius: 38px;
	padding: 12px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.4);
	overflow: hidden;
	display: block;
	cursor: pointer;
	margin: 0 auto;
}

.bamleon-cs__phone-frame::before {
	content: "";
	position: absolute;
	top: 22px;
	left: 50%;
	transform: translateX(-50%);
	width: 92px;
	height: 26px;
	background: #050505;
	border-radius: 13px;
	z-index: 2;
	pointer-events: none;
}

.bamleon-cs__phone-screen {
	position: relative;
	width: 100%;
	height: 100%;
	background: #fff;
	border-radius: 26px;
	overflow: hidden;
}

.bamleon-cs__phone-screen img {
	width: 100%;
	height: auto;
	display: block;
	transition: transform 5s ease-in-out;
	transform: translateY(0);
}

.bamleon-cs__phone-frame:hover .bamleon-cs__phone-screen img {
	transform: translateY(-72%);
}

.bamleon-cs__phone-label,
.bamleon-cs__device-pair .bamleon-cs__browser-label {
	display: block;
	margin-top: 12px;
	font-family: var(--bamleon-cs-mono, "JetBrains Mono", monospace);
	font-size: var(--bamleon-text-xs);
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #6b7280;
	text-align: center;
}

/* Laptop frame: browser-tile dressed as a laptop with a screen-bottom bezel */
.bamleon-cs__device-pair .bamleon-cs__browser-tile {
	margin: 0;
	width: 100%;
}

.bamleon-cs__device-pair .bamleon-cs__browser-tile--scroll {
	cursor: pointer;
}

.bamleon-cs__device-pair .bamleon-cs__browser-canvas {
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: #fff;
}

.bamleon-cs__device-pair .bamleon-cs__browser-canvas img {
	width: 100%;
	height: auto;
	display: block;
	transition: transform 11s ease-in-out;
	transform: translateY(0);
}

.bamleon-cs__device-pair .bamleon-cs__browser-tile--scroll:hover .bamleon-cs__browser-canvas img {
	transform: translateY(-72%);
}

@media (max-width: 900px) {
	.bamleon-cs__device-pair { grid-template-columns: 1fr; gap: 24px; align-items: center; }
	.bamleon-cs__phone-frame { max-width: 220px; }
}

/* ─── Full-bleed concept plate (shared: Electrolux concepts, Sidemoney site/stack rows) ─── */

.bamleon-cs__plate--full {
	display: block;
	width: 100%;
	margin: 0;
}

.bamleon-cs__plate--full .bamleon-cs__plate-window {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--bamleon-radius-sm);
	background: #0a1628;
}

.bamleon-cs__plate--full .bamleon-cs__plate-window img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	display: block;
	transition: transform 0.6s ease;
}

.bamleon-cs__plate--full:hover .bamleon-cs__plate-window img {
	transform: scale(1.015);
}

.bamleon-cs__plate--full .bamleon-cs__plate-label {
	margin-top: 14px;
	display: block;
	font-family: var(--bamleon-cs-mono, "JetBrains Mono", monospace);
	font-size: var(--bamleon-text-xs);
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #6b7280;
}

.bamleon-cs__concept {
	margin: 56px 0 0;
	padding: 0;
}

.bamleon-cs__concept:first-of-type { margin-top: 32px; }

.bamleon-cs__concept-head {
	display: grid;
	grid-template-columns: 64px 1fr;
	gap: 18px;
	align-items: baseline;
	margin: 0 0 22px;
	padding: 0 0 18px;
	border-bottom: 1px solid rgba(20, 20, 20, 0.12);
}

.bamleon-cs__concept-num {
	font-family: var(--bamleon-cs-display, "Halyard Display", sans-serif);
	font-size: 44px;
	line-height: 1;
	font-weight: 500;
	letter-spacing: -0.02em;
	color: #111;
}

.bamleon-cs__concept-title-block {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.bamleon-cs__concept-title {
	font-family: var(--bamleon-cs-display, "Halyard Display", sans-serif);
	font-size: var(--bamleon-text-xl);
	line-height: 1.15;
	font-weight: 500;
	letter-spacing: var(--bamleon-tracking-normal);
	color: #111;
	margin: 0;
}

.bamleon-cs__concept-tag {
	font-family: var(--bamleon-cs-mono, "JetBrains Mono", monospace);
	font-size: var(--bamleon-text-xs);
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #6b7280;
}

.bamleon-cs__concept-body {
	margin: 22px 0 0;
	max-width: none;
}

.bamleon-cs__concept-body p {
	font-size: 17px;
	line-height: var(--bamleon-leading-base);
	margin: 0 0 14px;
	color: #1a1a1a;
}

.bamleon-cs__concept-body p:last-child { margin-bottom: 0; }

@media (max-width: 640px) {
	.bamleon-cs__concept { margin-top: 40px; }
	.bamleon-cs__concept-head { grid-template-columns: 48px 1fr; gap: 12px; padding-bottom: 14px; margin-bottom: 16px; }
	.bamleon-cs__concept-num { font-size: 32px; }
	.bamleon-cs__concept-title { font-size: 22px; }
}

/* ─── Timberland: System → Theme side-by-side rows ────────────────────── */

.bamleon-cs__sxs-row {
	margin: 48px 0 0;
}

.bamleon-cs__sxs-row:first-of-type { margin-top: 32px; }

.bamleon-cs__sxs-row-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin: 0 0 18px;
	padding: 0 0 12px;
	border-bottom: 1px solid rgba(20, 20, 20, 0.12);
	flex-wrap: wrap;
}

.bamleon-cs__sxs-row-name {
	font-family: var(--bamleon-cs-display, "Halyard Display", sans-serif);
	font-size: 22px;
	line-height: var(--bamleon-leading-snug);
	font-weight: 500;
	letter-spacing: var(--bamleon-tracking-normal);
	color: #111;
	margin: 0;
}

.bamleon-cs__sxs-row-tag {
	font-family: var(--bamleon-cs-mono, "JetBrains Mono", monospace);
	font-size: var(--bamleon-text-xs);
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #6b7280;
}

.bamleon-cs__sxs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
	align-items: start;
}

.bamleon-cs__sxs-cell {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
}

.bamleon-cs__sxs-cell-label {
	font-family: var(--bamleon-cs-mono, "JetBrains Mono", monospace);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #8a8378;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.bamleon-cs__sxs-cell-tag {
	display: inline-block;
	padding: 2px 8px;
	font-family: var(--bamleon-cs-mono, "JetBrains Mono", monospace);
	font-size: 9px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	border-radius: 2px;
}

.bamleon-cs__sxs-cell-tag--wire {
	background: rgba(20, 20, 20, 0.06);
	color: #4a4a4a;
	border: 1px solid rgba(20, 20, 20, 0.14);
}

.bamleon-cs__sxs-cell-tag--themed {
	background: #c75c1f;
	color: #fff;
	border: 1px solid #c75c1f;
}

/* Plates inside sxs cells: show the full composition at natural aspect.
   No hover-scroll — the page templates are already showing 3 breakpoints
   in one frame; they're meant to be read whole, not scrolled. */
.bamleon-cs__sxs .bamleon-cs__plate { margin: 0; }

.bamleon-cs__sxs .bamleon-cs__plate-window {
	aspect-ratio: auto;
	background: #2a2a2a;
	display: block;
	overflow: hidden;
}

.bamleon-cs__sxs .bamleon-cs__plate-window img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: contain;
	transform: none !important;
	transition: opacity 200ms ease;
}

.bamleon-cs__sxs .bamleon-cs__plate:hover .bamleon-cs__plate-window img {
	opacity: 0.92;
}

@media (max-width: 768px) {
	.bamleon-cs__sxs { grid-template-columns: 1fr; gap: 12px; }
	.bamleon-cs__sxs-row { margin-top: 36px; }
}

/* Figma hook strip — placeholder slots for explorable links the user adds later */
.bamleon-cs__figma-hook {
	margin: 56px 0 0;
	padding: 24px;
	border: 1.5px dashed rgba(20, 20, 20, 0.18);
	border-radius: var(--bamleon-radius-sm);
	background: rgba(20, 20, 20, 0.02);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}

.bamleon-cs__figma-hook-text {
	font-family: var(--bamleon-cs-mono, "JetBrains Mono", monospace);
	font-size: 12px;
	letter-spacing: 0.06em;
	color: #6b7280;
	margin: 0;
}

/* ─── Plate that fits its image at natural aspect (no forced frame) ──── */
.bamleon-cs__plate--fit .bamleon-cs__plate-window {
	aspect-ratio: auto;
	overflow: visible;
	background: transparent;
}
.bamleon-cs__plate--fit .bamleon-cs__plate-window img {
	width: 100%;
	height: auto;
	display: block;
	transform: none !important;
	transition: opacity 200ms ease;
}
.bamleon-cs__plate--fit:hover .bamleon-cs__plate-window img {
	opacity: 0.95;
}

/* ─── Asset-suite contact sheet (Charter "all assets at the end") ─────── */
.bamleon-cs__suite {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin: 32px 0 0;
}
.bamleon-cs__suite .bamleon-cs__plate { margin: 0; }
.bamleon-cs__suite .bamleon-cs__plate-window {
	overflow: hidden;
	background: none;
}
.bamleon-cs__suite .bamleon-cs__plate-window img {
	width: 100%;
	height: auto;
	object-fit: contain;
	display: block;
	transform: none !important;
	transition: opacity 200ms ease;
}
/* Labels intentionally inherit the standard .bamleon-cs__plate-label
   styling — keeps the contact-sheet captions consistent with every
   other deliverable block. */
.bamleon-cs__suite .bamleon-cs__plate:hover .bamleon-cs__plate-window img {
	opacity: 0.92;
}
@media (max-width: 700px) {
	.bamleon-cs__suite { grid-template-columns: repeat(2, 1fr); }
}

/* ─── Horizontal scroll-snap carousel — for galleries that compress
   many items into a single visual row. Used for SiriusXM deck slides,
   tile-art examples, and any other "many small artifacts" section. ── */
.bamleon-cs__carousel {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	overflow-y: visible;
	scroll-snap-type: x mandatory;
	/* Full-bleed: span the full viewport width regardless of parent column.
	   Scroll-padding equals the article gutter so the first slide aligns with
	   the section title/copy, not the raw viewport edge. */
	width: 100vw;
	max-width: 100vw;
	margin: 24px calc(50% - 50vw) 24px;
	padding: 4px var(--bamleon-cs-gutter, 40px) 16px;
	scroll-padding: 0 var(--bamleon-cs-gutter, 40px);
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: rgba(20, 20, 20, 0.3) transparent;
}

.bamleon-cs__carousel::-webkit-scrollbar { height: 6px; }
.bamleon-cs__carousel::-webkit-scrollbar-track { background: transparent; }
.bamleon-cs__carousel::-webkit-scrollbar-thumb {
	background: rgba(20, 20, 20, 0.25);
	border-radius: 3px;
}

.bamleon-cs__carousel-item {
	flex: 0 0 auto;
	scroll-snap-align: start;
	width: 60%;
	max-width: 560px;
	margin: 0;
	overflow: visible !important; /* plate base sets overflow:hidden; carousel images must show full height */
}
.bamleon-cs__carousel-item.bamleon-cs__plate {
	overflow: visible !important;
	height: auto !important;
}

.bamleon-cs__carousel-item--16x9 {
	aspect-ratio: 16 / 9;
}

.bamleon-cs__carousel-item .bamleon-cs__plate-window {
	aspect-ratio: auto;
	overflow: visible;
	background: var(--bamleon-bg);
}

.bamleon-cs__carousel-item .bamleon-cs__plate-window img {
	width: 100%;
	height: auto;
	object-fit: contain;
	display: block;
	transform: none !important;
}

.bamleon-cs__carousel-item:hover .bamleon-cs__plate-window img {
	opacity: 0.95;
}

/* Square carousel variant — for tile-art galleries (album-cover style) */
.bamleon-cs__carousel--square .bamleon-cs__carousel-item {
	width: 32%;
	max-width: 280px;
}

.bamleon-cs__carousel--square .bamleon-cs__carousel-item .bamleon-cs__plate-window {
	aspect-ratio: 1 / 1;
}

/* Tile grid — square album-art-style contact sheet (matches the therum.studio
   layout for SiriusXM tile-art examples). 4-up desktop, 3-up tablet, 2-up mobile. */
.bamleon-cs__tile-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	margin: 24px 0 0;
}
.bamleon-cs__tile-grid .bamleon-cs__plate { margin: 0; }
.bamleon-cs__tile-grid .bamleon-cs__plate-window {
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--bamleon-bg);
}
.bamleon-cs__tile-grid .bamleon-cs__plate-window img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	transform: none !important;
	transition: opacity 200ms ease;
}
.bamleon-cs__tile-grid .bamleon-cs__plate:hover .bamleon-cs__plate-window img {
	opacity: 0.92;
}
.bamleon-cs__tile-grid .bamleon-cs__plate-label {
	margin-top: 6px;
	font-family: var(--bamleon-cs-mono, "JetBrains Mono", monospace);
	font-size: 9px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #8a8378;
}
@media (max-width: 900px) {
	.bamleon-cs__tile-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
	.bamleon-cs__tile-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

@media (max-width: 900px) {
	.bamleon-cs__carousel-item { width: 80%; }
	.bamleon-cs__carousel--square .bamleon-cs__carousel-item { width: 50%; }
}

@media (max-width: 640px) {
	.bamleon-cs__carousel-item { width: 90%; }
	.bamleon-cs__carousel--square .bamleon-cs__carousel-item { width: 70%; }
}

.bamleon-cs__carousel-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin: 56px 0 0;
	padding: 0 0 14px;
	border-bottom: 1px solid rgba(20, 20, 20, 0.12);
	flex-wrap: wrap;
}

.bamleon-cs__carousel-name {
	font-family: var(--bamleon-cs-display, "Halyard Display", sans-serif);
	font-size: 22px;
	line-height: var(--bamleon-leading-snug);
	font-weight: 500;
	letter-spacing: var(--bamleon-tracking-normal);
	color: #111;
	margin: 0;
}

.bamleon-cs__carousel-meta {
	font-family: var(--bamleon-cs-mono, "JetBrains Mono", monospace);
	font-size: var(--bamleon-text-xs);
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #6b7280;
}

.bamleon-cs__figma-hook-cta {
	font-family: var(--bamleon-cs-mono, "JetBrains Mono", monospace);
	font-size: var(--bamleon-text-xs);
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	padding: 10px 16px;
	border: 1px solid rgba(20, 20, 20, 0.4);
	border-radius: 2px;
	color: #111;
	text-decoration: none;
	background: #fff;
	cursor: not-allowed;
	opacity: 0.55;
}

/* ─── Kingsland: layout cards (4) + module library grid ──────────────── */

.bamleon-cs__layout-card {
	display: flex;
	flex-direction: column;
	gap: 14px;
	position: relative;
}

.bamleon-cs__layout-num {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	padding: 4px 10px;
	font-family: var(--bamleon-cs-mono, "JetBrains Mono", monospace);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.18em;
	background: #111;
	color: #f7f1e3;
	border-radius: 0 0 2px 0;
}

.bamleon-cs__layout-card .bamleon-cs__plate-window {
	aspect-ratio: 4 / 3;
}

.bamleon-cs__layout-meta {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.bamleon-cs__layout-title {
	font-family: var(--bamleon-cs-display, "Halyard Display", sans-serif);
	font-size: 22px;
	line-height: var(--bamleon-leading-snug);
	font-weight: 500;
	letter-spacing: var(--bamleon-tracking-normal);
	color: #111;
	margin: 0;
}

.bamleon-cs__layout-desc {
	font-size: 14px;
	line-height: 1.55;
	color: #4a4a4a;
	margin: 0;
}

/* Module library — denser grid of small cards */
.bamleon-cs__module-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
	margin: 32px 0 0;
}

.bamleon-cs__module-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.bamleon-cs__module-card .bamleon-cs__plate-window {
	aspect-ratio: 1 / 1;
	background: #f7f1e3;
}

.bamleon-cs__module-name {
	font-family: var(--bamleon-cs-display, "Halyard Display", sans-serif);
	font-size: var(--bamleon-text-base);
	font-weight: 500;
	color: #111;
	margin-top: 2px;
}

.bamleon-cs__module-desc {
	font-family: var(--bamleon-cs-mono, "JetBrains Mono", monospace);
	font-size: 10px;
	line-height: 1.45;
	letter-spacing: var(--bamleon-tracking-wide);
	color: #6b7280;
}

@media (max-width: 900px) {
	.bamleon-cs__module-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
	.bamleon-cs__module-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.bamleon-cs__layout-title { font-size: 18px; }
}

/* ─── Unified tab styling — Therum OS Wireframe/Demo pill toggle is the bar.
   All tab strips across case studies (Comcast tenure tabs, Comcast device
   viewport tabs, SiriusXM/JPM style tabs, Charter engagement tabs) collapse
   to a single visual contract:
     - rounded pill container with hairline border
     - inactive tabs: transparent bg, muted text
     - active tab: dark fill, inverted text
     - centered, content-sized (not full-width)
*/
.bamleon-cs__tabs { margin: 32px 0 0; }

.bamleon-cs__tab-strip,
.bamleon-cs__device-tablist,
.bamleon-cs__style-tablist {
	display: flex !important;
	justify-content: flex-start;
	gap: 6px;
	padding: 6px !important;
	margin: 0 auto 28px !important;
	background: var(--bamleon-surface) !important;
	border: 1px solid var(--bamleon-border) !important;
	border-radius: var(--bamleon-radius-pill) !important;
	width: fit-content !important;
	max-width: fit-content !important;
	position: relative;
	text-align: left;
}
.bamleon-cs__tab-indicator { display: none; }

.bamleon-cs__tab,
.bamleon-cs__device-tab,
.bamleon-cs__style-tab {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto !important;
	width: auto !important;
	gap: 6px;
	padding: 12px 28px !important;
	margin: 0 !important;
	font-family: var(--bamleon-font-mono) !important;
	font-size: var(--bamleon-text-sm) !important;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bamleon-text-2);
	text-decoration: none !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: var(--bamleon-radius-pill) !important;
	cursor: pointer;
	user-select: none;
	line-height: 1;
	transition: background 160ms ease, color 160ms ease;
	scroll-margin-top: 80px;
}
.bamleon-cs__tab::after,
.bamleon-cs__device-tab::after,
.bamleon-cs__style-tab::after { content: none !important; }

/* Inner spans — keep one primary label per pill, hide secondary text.
   - Comcast tenure tab: keep .tab-year (kicker only — "Tenure 01 · 2017")
   - Comcast device tab: keep .device-tab-kicker ("VIEWPORT 01 · 1440PX"),
     hide .device-tab-name ("Desktop view") — kicker carries the info
   - SiriusXM/JPM style tab: keep .style-tab-name ("Studio"), hide
     .style-tab-meta ("Light · operator default") — name carries the info
*/
.bamleon-cs__tab-year,
.bamleon-cs__device-tab-kicker,
.bamleon-cs__style-tab-name {
	display: inline !important;
	font-family: inherit !important;
	font-size: inherit !important;
	font-weight: inherit !important;
	letter-spacing: inherit !important;
	text-transform: inherit !important;
	color: inherit !important;
	margin: 0 !important;
	padding: 0 !important;
}
.bamleon-cs__device-tab-name,
.bamleon-cs__style-tab-meta {
	display: none !important;
}

.bamleon-cs__tab:hover,
.bamleon-cs__device-tab:hover,
.bamleon-cs__style-tab:hover {
	color: var(--bamleon-text) !important;
	background: transparent !important;
}

/* ─── Next Tabs — Morphing Nav pill styling ────────────────────────────
   The sliding pill indicator (.bc-morphing-menu__morphing-div) replaces
   the old .is-active background fill. Morphing Nav JS calculates the
   pill position from the active item's bounding rect and animates it
   on tab change — giving a smooth sliding-pill transition for free.  */

/* Tab strip — inherit the pill-bar look */
.bc-core-tabs .bc-morphing-menu {
	display: flex !important;
	justify-content: flex-start;
	gap: 6px;
	padding: 6px !important;
	margin: 0 auto 28px !important;
	background: var(--bamleon-surface) !important;
	border: 1px solid var(--bamleon-border) !important;
	border-radius: var(--bamleon-radius-pill) !important;
	width: fit-content !important;
}

/* Tab items — pill typography + layout */
.bc-core-tabs .bc-morphing-menu__item {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto !important;
	width: auto !important;
	gap: 6px;
	padding: 12px 28px !important;
	margin: 0 !important;
	font-family: var(--bamleon-font-mono) !important;
	font-size: var(--bamleon-text-sm) !important;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bamleon-text-2);
	text-decoration: none !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: var(--bamleon-radius-pill) !important;
	cursor: pointer;
	user-select: none;
	line-height: 1;
	scroll-margin-top: 80px;
}
.bc-core-tabs .bc-morphing-menu__item:hover { color: var(--bamleon-text); }

/* Active item text — white-on-dark (morphing pill provides the dark bg) */
.bc-core-tabs .bc-morphing-menu__item--active {
	color: var(--bamleon-bg) !important;
	transition: color var(--transition-duration, 0.3s);
}

/* Morphing pill — the sliding dark indicator behind the active tab */
.bc-core-tabs .bc-morphing-menu__morphing-div {
	background: var(--bamleon-text) !important;
	border-radius: var(--bamleon-radius-pill) !important;
}
.bc-core-tabs .demo-morph-bg-target {
	border-radius: var(--bamleon-radius-pill) !important;
}

/* Inner spans inside morphing items — same rules as the old tabs */
.bc-core-tabs .bamleon-cs__tab-year,
.bc-core-tabs .bamleon-cs__device-tab-kicker,
.bc-core-tabs .bamleon-cs__style-tab-name {
	display: inline !important;
	font-family: inherit !important;
	font-size: inherit !important;
	font-weight: inherit !important;
	letter-spacing: inherit !important;
	text-transform: inherit !important;
	color: inherit !important;
	margin: 0 !important;
	padding: 0 !important;
}
.bc-core-tabs .bamleon-cs__device-tab-name,
.bc-core-tabs .bamleon-cs__style-tab-meta {
	display: none !important;
}

/* Remove the ::after pseudo-element on morphing items (old underline indicator) */
.bc-core-tabs .bc-morphing-menu__item::after { content: none !important; }

/* ─── Device morph — Therum OS demo-bar style ────────────────────────────
   Full-width light-gray bar with centered morphing-pill toggles, device
   icons via CSS mask-image.  Replaces the old centered pill-bar for
   every case-study device-morph instance.                                */

/* ── Bar — full-width, light bg, bottom border ── */
.bc-core-tabs.bamleon-cs__device-morph > .bc-morphing-menu.bamleon-cs__device-tablist {
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	background: #f0f0f2 !important;
	border: 0 !important;
	border-bottom: 1px solid rgba(0,0,0,0.06) !important;
	border-radius: 12px 12px 0 0 !important;
	padding: 0 16px !important;
	margin: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	height: 48px;
	gap: 4px !important;
	box-sizing: border-box;
}

/* ── Inner toggle pill group ── */
.bc-core-tabs.bamleon-cs__device-morph .bc-morphing-menu__morphing-div {
	background: rgba(0,0,0,0.08) !important;
	border-radius: 8px !important;
}

/* ── Tab items — small mono text + icon ── */
.bc-core-tabs.bamleon-cs__device-morph .bc-morphing-menu__item.bamleon-cs__device-tab {
	color: rgba(0,0,0,0.3) !important;
	padding: 6px 14px !important;
	font-family: var(--bamleon-font-mono) !important;
	font-size: 11px !important;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	border-radius: 8px !important;
	gap: 6px !important;
	line-height: 1;
	transition: color 150ms ease, background 150ms ease;
}
.bc-core-tabs.bamleon-cs__device-morph .bc-morphing-menu__item.bamleon-cs__device-tab:hover {
	color: rgba(0,0,0,0.55) !important;
	background: transparent !important;
}
.bc-core-tabs.bamleon-cs__device-morph .bc-morphing-menu__item.bamleon-cs__device-tab.bc-morphing-menu__item--active {
	color: var(--bamleon-text) !important;
}

/* ── Device icons via CSS mask-image (inherit currentColor) ── */
.bc-core-tabs.bamleon-cs__device-morph .bamleon-cs__device-tab::before {
	content: '';
	display: block;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	background: currentColor;
	-webkit-mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
}
.bc-core-tabs.bamleon-cs__device-morph .bamleon-cs__device-tab[data-vp="desktop"]::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='20' height='14' rx='2'/%3E%3Cpath d='M8 21h8M12 17v4'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='20' height='14' rx='2'/%3E%3Cpath d='M8 21h8M12 17v4'/%3E%3C/svg%3E");
}
.bc-core-tabs.bamleon-cs__device-morph .bamleon-cs__device-tab[data-vp="tablet"]::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='2' width='16' height='20' rx='2'/%3E%3Cpath d='M12 18h.01'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='2' width='16' height='20' rx='2'/%3E%3Cpath d='M12 18h.01'/%3E%3C/svg%3E");
}
.bc-core-tabs.bamleon-cs__device-morph .bamleon-cs__device-tab[data-vp="mobile"]::before {
	width: 14px;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='2' width='14' height='20' rx='2'/%3E%3Cpath d='M12 18h.01'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='2' width='14' height='20' rx='2'/%3E%3Cpath d='M12 18h.01'/%3E%3C/svg%3E");
}

/* ── Device stage — flush with bar, rounded bottom, full width ── */
.bc-core-tabs.bamleon-cs__device-morph > .bc-core-tabs__tab-content {
	border: 1px solid rgba(0,0,0,0.06);
	border-top: 0;
	border-radius: 0 0 12px 12px;
	overflow: hidden;
	background: #fff;
	width: 100%;
}
.bc-core-tabs.bamleon-cs__device-morph > .bc-core-tabs__tab-content img {
	display: block;
	width: 100%;
	height: auto;
}

/* ── Mobile panel constrained to phone width ── */
.bamleon-cs__device--mobile {
	max-width: 375px;
	margin: 0 auto;
}
/* ── Tablet panel constrained to realistic width ── */
.bamleon-cs__device--tablet {
	max-width: 768px;
	margin: 0 auto;
}

/* ── Demo-bar device morph: neutralize old dark-chrome device rules ────
   The dark-chrome device rules (further down) add padding, dark bg, and
   phone-bezel styling to .bamleon-cs__device--mobile etc. Inside the
   demo-bar context those must be suppressed — the bar IS the chrome.   */
.bc-core-tabs.bamleon-cs__device-morph .bamleon-cs__device--mobile,
.bc-core-tabs.bamleon-cs__device-morph .bamleon-cs__device--tablet {
	padding: 0 !important;
	background: transparent !important;
	border-radius: 0 !important;
}
.bc-core-tabs.bamleon-cs__device-morph .bamleon-cs__device--mobile::before {
	display: none !important;
}

/* Width constraints per device — must beat the old dark-chrome
   width:100%/max-width:100% rules that appear later in this file.   */
.bc-core-tabs.bamleon-cs__device-morph .bamleon-cs__device--desktop {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 auto !important;
}
.bc-core-tabs.bamleon-cs__device-morph .bamleon-cs__device--tablet {
	width: 100% !important;
	max-width: 768px !important;
	margin: 0 auto !important;
}
.bc-core-tabs.bamleon-cs__device-morph .bamleon-cs__device--mobile {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 auto !important;
}

/* ── Page auto-scroll keyframe ────────────────────────────────────────
   Slow, continuous scroll through the entire captured page, then back
   to the top, looping forever — so the whole page is visible without
   any hover. cqh resolves against the scroll container (each has
   container-type: size), so the travel auto-matches the viewport
   height regardless of device width. Pauses on hover for reading.    */
@keyframes bamleon-cs-page-scroll {
	0%, 3%    { transform: translateY(0); }
	48%, 52%  { transform: translateY(var(--scroll-dist, 0px)); }
	97%, 100% { transform: translateY(0); }
}

/* Demo-bar desktop screen: 16:9 viewport, auto-scroll */
.bc-core-tabs.bamleon-cs__device-morph .bamleon-cs__device--desktop .bamleon-cs__device-screen {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #fff;
	border: 0 !important;
	border-radius: 0 !important;
}

/* Demo-bar tablet screen: 4:3 viewport */
.bc-core-tabs.bamleon-cs__device-morph .bamleon-cs__device--tablet .bamleon-cs__device-screen {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #fff;
	border: 0 !important;
	border-radius: 0 !important;
}

/* Demo-bar mobile screen: 9:16 phone frame, centered with bezel */
.bc-core-tabs.bamleon-cs__device-morph .bamleon-cs__device--mobile .bamleon-cs__device-screen {
	position: relative;
	width: 100%;
	max-width: 300px;
	margin: 28px auto;
	aspect-ratio: 9 / 16;
	overflow: hidden;
	background: #fff;
	border: 10px solid #1a1a1a !important;
	border-radius: 44px !important;
	box-shadow: 0 24px 60px rgba(0,0,0,0.28);
}

/* Auto-scroll the captured page through every demo-bar device-screen */
.bc-core-tabs.bamleon-cs__device-morph .bamleon-cs__device-screen img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	max-height: none;
	will-change: transform;
	animation: bamleon-cs-page-scroll 36s ease-in-out infinite;
}
.bc-core-tabs.bamleon-cs__device-morph .bamleon-cs__device-screen:hover img {
	animation-play-state: paused;
}

/* ─── Deck explorer — demo-bar style ─────────────────────────────────────
   Same bar pattern as device morph, applied to the direction-tab nav
   inside deck explorers (Comcast plan builder, etc.). No device icons. */

.bc-core-tabs.bamleon-cs__deck-explorer > .bc-morphing-menu.bamleon-cs__deck-tablist {
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	background: #f0f0f2 !important;
	border: 0 !important;
	border-bottom: 1px solid rgba(0,0,0,0.06) !important;
	border-radius: 12px 12px 0 0 !important;
	padding: 0 16px !important;
	margin: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	height: 48px;
	gap: 2px !important;
	box-sizing: border-box;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.bc-core-tabs.bamleon-cs__deck-explorer > .bc-morphing-menu.bamleon-cs__deck-tablist::-webkit-scrollbar {
	display: none;
}
.bc-core-tabs.bamleon-cs__deck-explorer .bc-morphing-menu__morphing-div {
	background: rgba(0,0,0,0.08) !important;
	border-radius: 8px !important;
}
.bc-core-tabs.bamleon-cs__deck-explorer .bc-morphing-menu__item.bamleon-cs__deck-tab {
	color: rgba(0,0,0,0.3) !important;
	padding: 6px 14px !important;
	font-family: var(--bamleon-font-mono) !important;
	font-size: 10px !important;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-radius: 8px !important;
	gap: 6px !important;
	line-height: 1;
	white-space: nowrap;
	transition: color 150ms ease;
}
.bc-core-tabs.bamleon-cs__deck-explorer .bc-morphing-menu__item.bamleon-cs__deck-tab:hover {
	color: rgba(0,0,0,0.55) !important;
	background: transparent !important;
}
.bc-core-tabs.bamleon-cs__deck-explorer .bc-morphing-menu__item.bamleon-cs__deck-tab.bc-morphing-menu__item--active {
	color: var(--bamleon-text) !important;
}

/* ─── Next Tabs — panel overrides ──────────────────────────────────────
   Devices and style-panels use display:none by default. Inside Next Tabs
   panels, show/hide is handled by data-show/data-hide, so the device/panel
   must always be display:block when its parent panel is visible.         */

.bc-core-tabs__tab-content .bamleon-cs__device {
	display: block !important;
}
.bc-core-tabs__tab-content .bamleon-cs__style-panel {
	display: block !important;
}

/* WF explorer slides — inside Next Tabs panels each slide is standalone
   (not part of a flex track), so kill the filmstrip flex-basis and let
   the figure fill its panel naturally. */
.bc-core-tabs__tab-content.bamleon-cs__wf-panel .bamleon-cs__wf-slide {
	flex: none;
	width: 100%;
}
/* The stage/track wrappers are stripped by the post-processor, but if
   any residual container-query sizing leaks through, neutralise it. */
.bc-core-tabs__tab-content.bamleon-cs__wf-panel {
	padding: 0 var(--bamleon-cs-gutter);
	box-sizing: border-box;
}

/* Email explorer — one phone, three tabs (JP Morgan Chase).
   Phone styling lives on the SLIDE, not the panel. The panel is a
   full-width invisible container the plugin crossfades normally.
   Because every panel's phone is identical + centered, the crossfade
   dissolves only the image while the frame appears to persist. */
.bamleon-cs__email-explorer {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	margin-bottom: 24px;
}

/* Panel — full-width wrapper; plugin crossfade happens here */
.bc-core-tabs__tab-content.bamleon-cs__email-panel {
	display: flex;
	justify-content: center;
	width: 100%;
	padding: 32px 0 0;
	box-sizing: border-box;
}

/* The slide IS the phone — bezel, corners, dynamic island, screen */
.bc-core-tabs__tab-content.bamleon-cs__email-panel .bamleon-cs__email-slide,
.brxe-block.bamleon-cs__email-slide {
	position: relative;
	width: 280px;
	flex-shrink: 0;
	aspect-ratio: 9 / 19.5;
	background: var(--bamleon-bg);
	border-radius: 38px;
	padding: 12px;
	border: 2px solid rgba(255, 255, 255, 0.12);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(0, 0, 0, 0.5);
	overflow: hidden !important;
	margin: 0;
	box-sizing: border-box;
	container-type: size;
}

/* Dynamic island notch */
.bc-core-tabs__tab-content.bamleon-cs__email-panel .bamleon-cs__email-slide::before {
	content: "";
	position: absolute;
	top: 22px;
	left: 50%;
	transform: translateX(-50%);
	width: 92px;
	height: 26px;
	background: #050505;
	border-radius: 13px;
	z-index: 2;
	pointer-events: none;
}

/* Email image — fills phone width, natural height, GPU-scroll on hover.
   calc(-100% + 100cqh) = -(imageHeight - screenHeight), so the scroll
   stops exactly when the email's bottom edge hits the screen's bottom. */
.bc-core-tabs__tab-content.bamleon-cs__email-panel .bamleon-cs__email-slide img {
	width: 100%;
	height: auto;
	display: block;
	will-change: transform;
	transition: transform 6s cubic-bezier(.25, 0, .35, 1);
	transform: translateY(0);
}
.bc-core-tabs__tab-content.bamleon-cs__email-panel:hover .bamleon-cs__email-slide img {
	transform: translateY(calc(-100% + 100cqh));
}

@media (max-width: 600px) {
	.bc-core-tabs__tab-content.bamleon-cs__email-panel .bamleon-cs__email-slide { width: 220px; border-radius: 30px; padding: 10px; }
	.bc-core-tabs__tab-content.bamleon-cs__email-panel .bamleon-cs__email-slide::before { width: 72px; height: 22px; top: 18px; }
}

/* ─── Flipbook — Real3D-style page-turn for print pieces ─────────────────
   CSS 3D page-turn animation. The leaf rotates from the LEFT spine like a
   real book page. Under-page sits beneath, revealed as the leaf lifts.
   Fold-shadow simulates the crease light/shadow during the turn. */
.bamleon-cs__flipbook {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	gap: 0;
	margin: 48px 0 0;
}

/* Stage — perspective container + book shadow */
.bamleon-cs__flipbook-stage {
	position: relative;
	width: 100%;
	max-width: 960px;
	aspect-ratio: 3486 / 1308;
	perspective: 2200px;
	border-radius: 6px;
	box-shadow: 0 30px 80px -10px rgba(0, 0, 0, 0.35),
	            0 0 0 1px rgba(255, 255, 255, 0.04);
	cursor: pointer;
}

/* Under page — always visible beneath the leaf */
.bamleon-cs__flipbook-under {
	position: absolute;
	inset: 0;
	margin: 0;
	border-radius: 6px;
	overflow: hidden;
	z-index: 1;
}
.bamleon-cs__flipbook-under img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* The leaf — holds front (recto) and back (verso) faces.
   Pivots around the LEFT edge to simulate a book page turn. */
.bamleon-cs__flipbook-leaf {
	position: absolute;
	inset: 0;
	z-index: 3;
	transform-origin: left center;
	transform-style: preserve-3d;
	transition: transform 1.1s cubic-bezier(.645, .045, .355, 1);
}
.bamleon-cs__flipbook-leaf.is-flipped {
	transform: rotateY(-180deg);
}

/* Each face of the leaf */
.bamleon-cs__flipbook-face {
	position: absolute;
	inset: 0;
	margin: 0;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	border-radius: 6px;
	overflow: hidden;
}
.bamleon-cs__flipbook-face img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.bamleon-cs__flipbook-face--verso {
	transform: rotateY(180deg);
}

/* Page-edge shadow on the recto (right edge feels lifted) */
.bamleon-cs__flipbook-face--recto::after {
	content: "";
	position: absolute;
	top: 0; right: 0; bottom: 0;
	width: 60px;
	background: linear-gradient(to left, rgba(0,0,0,0.06), transparent);
	pointer-events: none;
}

/* Fold-shadow — the dark crease that appears at the spine during a flip.
   Fades in as the leaf lifts, sits on the under-page surface. */
.bamleon-cs__flipbook-fold-shadow {
	position: absolute;
	top: 0; bottom: 0; left: 0;
	width: 80px;
	background: linear-gradient(to right, rgba(0,0,0,0.25), transparent);
	z-index: 2;
	opacity: 0;
	pointer-events: none;
	transition: opacity 1.1s cubic-bezier(.645, .045, .355, 1);
}
.bamleon-cs__flipbook-leaf.is-flipped ~ .bamleon-cs__flipbook-fold-shadow {
	opacity: 1;
}

/* Navigation arrows — overlay on left/right edges */
.bamleon-cs__flipbook-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	width: 44px;
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid var(--bamleon-border);
	border-radius: var(--bamleon-radius-md);
	color: rgba(255, 255, 255, 0.85);
	font-size: var(--bamleon-text-xl);
	line-height: 1;
	cursor: pointer;
	opacity: 0;
	transition: opacity 250ms ease, background 200ms ease;
}
.bamleon-cs__flipbook-stage:hover .bamleon-cs__flipbook-arrow { opacity: 1; }
.bamleon-cs__flipbook-arrow:hover { background: rgba(0, 0, 0, 0.7); }
.bamleon-cs__flipbook-arrow[disabled] { opacity: 0 !important; pointer-events: none; }
.bamleon-cs__flipbook-arrow--prev { left: 12px; }
.bamleon-cs__flipbook-arrow--next { right: 12px; }

/* Toolbar — page counter below the book */
.bamleon-cs__flipbook-toolbar {
	display: flex;
	justify-content: center;
	padding: 16px 0 0;
	margin-bottom: 48px;
}
.bamleon-cs__flipbook-pagenum {
	font-family: var(--bamleon-font-mono, "JetBrains Mono", monospace);
	font-size: var(--bamleon-text-xs);
	font-weight: 500;
	letter-spacing: 0.06em;
	color: rgba(255, 255, 255, 0.35);
}

/* Light mode */
.bamleon-light .bamleon-cs__flipbook-stage {
	box-shadow: 0 30px 80px -10px rgba(0, 0, 0, 0.15),
	            0 0 0 1px rgba(0, 0, 0, 0.06);
}
.bamleon-light .bamleon-cs__flipbook-arrow {
	background: rgba(255, 255, 255, 0.7);
	border-color: rgba(0, 0, 0, 0.08);
	color: rgba(0, 0, 0, 0.7);
}
.bamleon-light .bamleon-cs__flipbook-arrow:hover { background: rgba(255, 255, 255, 0.9); }
.bamleon-light .bamleon-cs__flipbook-pagenum { color: rgba(0, 0, 0, 0.35); }
.bamleon-light .bamleon-cs__flipbook-face--recto::after {
	background: linear-gradient(to left, rgba(0,0,0,0.04), transparent);
}
.bamleon-light .bamleon-cs__flipbook-fold-shadow {
	background: linear-gradient(to right, rgba(0,0,0,0.12), transparent);
}

@media (max-width: 600px) {
	.bamleon-cs__flipbook-stage { border-radius: var(--bamleon-radius-sm); }
	.bamleon-cs__flipbook-face { border-radius: var(--bamleon-radius-sm); }
	.bamleon-cs__flipbook-under { border-radius: var(--bamleon-radius-sm); }
	.bamleon-cs__flipbook-arrow { width: 36px; height: 52px; font-size: 22px; border-radius: 6px; }
	.bamleon-cs__flipbook-arrow--prev { left: 6px; }
	.bamleon-cs__flipbook-arrow--next { right: 6px; }
}

/* Touch devices — arrows always visible */
@media (hover: none) {
	.bamleon-cs__flipbook-arrow { opacity: 0.8; }
}

/* Legacy .is-active fallbacks — kept for any non-Next-Tabs instances */
.bamleon-cs__tab.is-active {
	background: var(--bamleon-text) !important;
	color: var(--bamleon-bg) !important;
}
.bamleon-cs__device-tab.is-active {
	background: var(--bamleon-text) !important;
	color: var(--bamleon-bg) !important;
}
.bamleon-cs__style-tab.is-active {
	background: var(--bamleon-text) !important;
	color: var(--bamleon-bg) !important;
}

.bamleon-cs__tab-panel {
	scroll-margin-top: 80px;
	transition: opacity 380ms cubic-bezier(.4, 0, .25, 1),
	            transform 420ms cubic-bezier(.4, 0, .25, 1);
}
.bamleon-cs__tab-panel[hidden] {
	display: none !important;
}
/* New panel fade — applied for one animation cycle when JS activates a tab.
   Slides up 8px while opacity ramps from 0 → 1. */
.bamleon-cs__tab-panel.is-fading-in {
	animation: bamleon-tab-fade-in 460ms cubic-bezier(.4, 0, .25, 1) both;
}
@keyframes bamleon-tab-fade-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
	.bamleon-cs__tab-panel,
	.bamleon-cs__tab-panel.is-fading-in,
	.bamleon-cs__tab-indicator { transition: none !important; animation: none !important; }
}

/* ─── Comcast — device morphing component ─────────────────────────────────
   Used inside the 2017 panel of the Comcast case study. Three radio inputs
   drive a tab-strip that swaps the visible device frame (desktop / tablet
   / mobile) and triggers the hover-scroll image inside.
   Tab styling intentionally mirrors .bamleon-cs__tab-strip (the 2017 / 2025
   tabs) so the visual reads as the same component family. */
.bamleon-cs__device-morph {
	display: block;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	margin: 24px 0;
	width: 100%;
}
/* Radios removed — device tabs are now <button> with JS-driven .is-active.
   Active fill handled by .bamleon-cs__device-tab.is-active rule above. */
.bamleon-cs__device-stage {
	display: flex;
	justify-content: stretch;
	align-items: flex-start;
	padding: 0;
	width: 100%;
}
.bamleon-cs__device {
	display: none;
	position: relative;
	width: 100%;
}
.bamleon-cs__device-morph[data-active-device="desk"] .bamleon-cs__device--desktop,
.bamleon-cs__device-morph[data-active-device="tab"]  .bamleon-cs__device--tablet,
.bamleon-cs__device-morph[data-active-device="mob"]  .bamleon-cs__device--mobile {
	display: block;
}
.bamleon-cs__device--desktop { width: 100%; max-width: 100%; }
.bamleon-cs__device-chrome {
	background: #1a1a1a;
	border-radius: 12px 12px 0 0;
	padding: 12px 14px;
	display: flex;
	gap: 6px;
	align-items: center;
}
.bamleon-cs__device-dot { width: 10px; height: 10px; border-radius: 50%; background: #555; flex: 0 0 auto; }
.bamleon-cs__device-url {
	margin-left: auto; margin-right: auto;
	font-family: var(--bamleon-cs-mono, "JetBrains Mono", monospace);
	font-size: var(--bamleon-text-xs); color: #888;
	background: #2a2a2a; padding: 4px 14px; border-radius: var(--bamleon-radius-pill);
}
.bamleon-cs__device--desktop .bamleon-cs__device-screen {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	overflow: hidden;
	/* Hard clip — hover-translate can sub-pixel leak past the rounded corner. */
	clip-path: inset(0 round 0 0 12px 12px);
	isolation: isolate;
	background: #fff;
	border: 1px solid #1a1a1a;
	border-top: 0;
	border-radius: 0 0 12px 12px;
}
/* Vertical scroll inside device screen — same contract as .plate-window. */
.bamleon-cs__device-screen > img {
	display: block;
	width: 100%;
	height: auto;
	transform: translateY(0);
	transition: transform 600ms ease-out;
	will-change: transform;
}
.bamleon-cs__device-screen:hover > img {
	transform: translateY(var(--scroll-distance, 0px));
	transition: transform 14s linear;
}
.bamleon-cs__device--tablet {
	width: 100%; max-width: 100%;
	padding: 18px; background: #1a1a1a; border-radius: 22px;
}
.bamleon-cs__device--tablet .bamleon-cs__device-screen {
	position: relative;
	width: 100%; height: 520px;
	overflow: hidden;
	background: #fff; border-radius: var(--bamleon-radius-md);
}
.bamleon-cs__device--mobile {
	width: 100%; max-width: 100%;
	padding: 14px; background: #1a1a1a; border-radius: 28px;
}
.bamleon-cs__device--mobile::before {
	content: ""; display: block;
	width: 60px; height: 5px; background: #2a2a2a;
	border-radius: 3px; margin: 0 auto 10px;
}
.bamleon-cs__device--mobile .bamleon-cs__device-screen {
	position: relative;
	width: 100%; height: 520px;
	overflow: hidden;
	background: #fff; border-radius: 18px;
}
.bamleon-cs__device-screen img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	max-height: none;
	transition: transform 0.45s cubic-bezier(.32,.72,0,1);
	will-change: transform;
}
.bamleon-cs__device:hover .bamleon-cs__device-screen img {
	transform: translateY(calc(-100% + 520px));
	transition: transform 6s linear;
}
.bamleon-cs__device-caption {
	text-align: center; margin: 16px 0 0;
	font-family: var(--bamleon-cs-mono, "JetBrains Mono", monospace);
	font-size: 10px; letter-spacing: 0.1em;
	text-transform: uppercase; color: var(--bamleon-text-3, #888);
}

/* Page-mock — laptop frame for HBO / X1 / Quad Play / Best Value headers.
   Hover anywhere on the frame triggers a 6-second translateY that reveals
   the bottom of the captured page. */
.bamleon-cs__pagemock { margin: 24px 0; }
.bamleon-cs__pagemock-frame {
	max-width: 980px;
	margin: 0 auto;
}
.bamleon-cs__pagemock-chrome {
	background: #1a1a1a;
	border-radius: 12px 12px 0 0;
	padding: 12px 14px;
	display: flex; gap: 6px; align-items: center;
}
.bamleon-cs__pagemock-dot { width: 10px; height: 10px; border-radius: 50%; background: #555; flex: 0 0 auto; }
.bamleon-cs__pagemock-url {
	margin-left: auto; margin-right: auto;
	font-family: var(--bamleon-cs-mono, "JetBrains Mono", monospace);
	font-size: var(--bamleon-text-xs); color: #888;
	background: #2a2a2a; padding: 4px 14px; border-radius: var(--bamleon-radius-pill);
}
.bamleon-cs__pagemock-screen {
	position: relative;
	height: 560px;
	overflow: hidden;
	background: #fff;
	border: 1px solid #1a1a1a;
	border-top: 0;
	border-radius: 0 0 12px 12px;
}
.bamleon-cs__pagemock-screen img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	max-height: none;
	will-change: transform;
	animation: bamleon-cs-page-scroll 36s ease-in-out infinite;
}
.bamleon-cs__pagemock:hover .bamleon-cs__pagemock-screen img {
	animation-play-state: paused;
}
.bamleon-cs__pagemock-foot {
	text-align: center; margin: 16px 0 0;
	font-family: var(--bamleon-cs-mono, "JetBrains Mono", monospace);
	font-size: 10px; letter-spacing: 0.1em;
	text-transform: uppercase; color: var(--bamleon-text-3, #888);
}

/* Charter web-header mocks: headers are short landscape banners — show full
   in the browser frame (fit, no fixed-height scroll). Also reset the frame
   max-width so two sit side-by-side in the 2-col grid. */
.bamleon-cs__article--charter .bamleon-cs__pagemock-frame {
	max-width: 100%;
}
.bamleon-cs__article--charter .bamleon-cs__pagemock-screen {
	height: auto;
}
.bamleon-cs__article--charter .bamleon-cs__pagemock-screen img {
	animation: none;
	height: auto;
}

/* Subsection header used inside the X1 / Quad Play / Best Value blocks */
.bamleon-cs__subsection { margin: 56px 0 0; }
.bamleon-cs__subsection-head {
	display: flex;
	align-items: baseline;
	gap: 14px;
	padding-bottom: 12px;
	margin-bottom: 16px;
	border-bottom: 1px solid var(--bamleon-border, #e5e5e5);
}
.bamleon-cs__subsection-num {
	font-family: var(--bamleon-cs-mono, "JetBrains Mono", monospace);
	font-size: var(--bamleon-text-xs); font-weight: 700;
	letter-spacing: 0.14em;
	color: var(--bamleon-text-3, #888);
}
.bamleon-cs__subsection-name {
	font-family: var(--bamleon-cs-display, "Halyard Display", "Inter Tight", sans-serif);
	font-size: 22px; font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--bamleon-text, #111);
}
@media (max-width: 980px) {
	.bamleon-cs__device--desktop { width: 100%; }
	.bamleon-cs__device--desktop .bamleon-cs__device-screen { height: 420px; }
	.bamleon-cs__device:hover .bamleon-cs__device-screen img { transform: translateY(calc(-100% + 420px)); }
	.bamleon-cs__pagemock-screen { height: 460px; }
}

/* Engagement panel internal layout */
.bamleon-cs__engagement-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 24px;
	margin: 0 0 32px;
	padding: 0 0 20px;
	border-bottom: 1px solid rgba(20, 20, 20, 0.12);
	flex-wrap: wrap;
}

.bamleon-cs__engagement-name {
	font-family: var(--bamleon-cs-display, "Halyard Display", sans-serif);
	font-size: var(--bamleon-text-xl);
	line-height: 1.15;
	font-weight: 500;
	letter-spacing: var(--bamleon-tracking-normal);
	color: #111;
	margin: 0;
}

.bamleon-cs__engagement-meta {
	font-family: var(--bamleon-cs-mono, "JetBrains Mono", monospace);
	font-size: var(--bamleon-text-xs);
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #6b7280;
}

.bamleon-cs__deliverable-block {
	margin: 40px 0 0;
}

.bamleon-cs__deliverable-block-head {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin: 0 0 18px;
}

.bamleon-cs__deliverable-block-num {
	font-family: var(--bamleon-cs-mono, "JetBrains Mono", monospace);
	font-size: var(--bamleon-text-xs);
	font-weight: 500;
	letter-spacing: 0.18em;
	color: #8a8378;
	min-width: 40px;
}

.bamleon-cs__deliverable-block-name {
	font-family: var(--bamleon-cs-display, "Halyard Display", sans-serif);
	font-size: var(--bamleon-text-lg);
	line-height: var(--bamleon-leading-snug);
	font-weight: 500;
	letter-spacing: var(--bamleon-tracking-normal);
	color: #111;
	margin: 0;
}

@media (max-width: 640px) {
	.bamleon-cs__tab { font-size: 14px; padding: 14px 12px; }
	.bamleon-cs__engagement-name { font-size: 22px; }
}


/* ════════════ NUCLEAR OVERRIDE: force all case-study content visible.
 * Kills every JS-dependent opacity:0 / translateY-hidden default state.
 * If JS reveal animations fail (IntersectionObserver, custom scripts),
 * content still renders. ════════════════════════════════════════════════ */
.bamleon-cs,
.bamleon-cs *,
.bamleon-cs__article,
.bamleon-cs__article *,
.bamleon-cs__section,
.bamleon-cs__section * {
	opacity: 1 !important;
	visibility: visible !important;
}
.bamleon-cs__section,
.bamleon-cs__section .bamleon-cs__pullquote,
.bamleon-cs__section .bamleon-cs__research-num,
.bamleon-cs__section .bamleon-cs__module-stat-num,
.bamleon-cs__section .bamleon-cs__module-card,
.bamleon-cs__section .bamleon-cs__wireframe-full,
.bamleon-cs__section .bamleon-cs__wireframe,
.bamleon-cs__section .bamleon-cs__catalog-group,
.bamleon-cs__section .bamleon-cs__style-panel,
.bamleon-cs__section .bamleon-cs__stack-layer,
.bamleon-cs__section .bamleon-cs__iteration,
.bamleon-cs__section figure,
.bamleon-cs__section figcaption,
.bamleon-cs__section p,
.bamleon-cs__section h1,
.bamleon-cs__section h2,
.bamleon-cs__section h3,
.bamleon-cs__section h4,
.bamleon-cs__section img {
	transform: none !important;
	animation: none !important;
	transition-property: background-color, color, border-color, box-shadow !important;
}

/* v2.1: Live Demo section folded into Section 09 The Why */
.bamleon-cs__section--folded { display: none !important; }

/* ─────────────────────────────────────────────────────────────────────
   v2.2 · Brand-header + Quick-info pattern (Sidemoney prototype)
   Replaces the old hero/meta strip layout with:
     1. Dark full-bleed brand header (kicker + huge title + meta chips)
     2. Hero image (unchanged)
     3. Simple/Detailed view toggle
     4. Quick-info style-tile grid (4 tiles, always visible)
     5. .bamleon-cs__view-detail wraps everything below; hidden in simple mode
   ──────────────────────────────────────────────────────────────────── */

/* View-mode radio inputs — hidden but kept in flow as sibling anchors */
.bamleon-cs__view-radio {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
	margin: 0;
	padding: 0;
	border: 0;
}

/* ── Brand header — full-bleed dark band */
.bamleon-cs__brand-header {
	position: relative;
	background: radial-gradient(ellipse at 50% 0%, #1f1f24 0%, #161618 55%, #121214 100%);
	color: var(--bamleon-text);
	padding: 88px clamp(24px, 5vw, 80px) 104px;
	overflow: hidden;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	margin-top: 0;
	margin-bottom: 0;
}
.bamleon-cs__brand-header::before {
	content: "";
	position: absolute;
	top: -120px;
	right: -80px;
	width: 520px;
	height: 520px;
	background: radial-gradient(circle, rgba(91, 141, 190, 0.12) 0%, transparent 70%);
	filter: blur(60px);
	pointer-events: none;
	z-index: 0;
}
.bamleon-cs__brand-header::after {
	content: "";
	position: absolute;
	bottom: -160px;
	left: -120px;
	width: 560px;
	height: 560px;
	background: radial-gradient(circle, rgba(230, 192, 104, 0.08) 0%, transparent 70%);
	filter: blur(60px);
	pointer-events: none;
	z-index: 0;
}
.bamleon-cs__brand-header-inner {
	position: relative;
	z-index: 1;
	max-width: var(--bamleon-cs-container, 1400px);
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 48px;
}
.bamleon-cs__brand-header-top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 32px;
	flex-wrap: wrap;
}
.bamleon-cs__brand-header-kicker {
	font-family: var(--bamleon-font-mono);
	font-size: var(--bamleon-text-xs);
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(245, 245, 245, 0.6);
}
.bamleon-cs__brand-header-chips {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.bamleon-cs__brand-header-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 14px;
	border-radius: var(--bamleon-radius-pill);
	border: 1px solid rgba(255, 255, 255, 0.14);
	background: rgba(255, 255, 255, 0.02);
	font-family: var(--bamleon-font-mono);
	font-size: 10.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(245, 245, 245, 0.85);
	white-space: nowrap;
}
.bamleon-cs__brand-header-chip em {
	font-style: normal;
	color: rgba(245, 245, 245, 0.5);
}
.bamleon-cs__brand-header-title {
	font-family: var(--bamleon-font-display);
	font-size: clamp(72px, 11vw, 192px);
	font-weight: 500;
	letter-spacing: -0.04em;
	line-height: 0.95;
	color: #ffffff;
	margin: 0;
}
.bamleon-cs__brand-header-bottom {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 48px;
	flex-wrap: wrap;
}
.bamleon-cs__brand-header-lede {
	max-width: 640px;
	font-family: var(--bamleon-font-body);
	font-size: var(--bamleon-text-base);
	line-height: var(--bamleon-leading-base);
	color: rgba(245, 245, 245, 0.72);
	margin: 0;
}
.bamleon-cs__brand-header-scroll {
	font-family: var(--bamleon-font-mono);
	font-size: var(--bamleon-text-xs);
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(245, 245, 245, 0.55);
	text-decoration: none;
	transition: color 200ms ease-out;
	white-space: nowrap;
	align-self: flex-end;
}
.bamleon-cs__brand-header-scroll:hover {
	color: #ffffff;
}

/* Hero portrait inside the dark band — sits below the title block,
   inset with side padding so the dark band shows around it. */
.bamleon-cs__brand-header-media {
	position: relative;
	z-index: 1;
	max-width: var(--bamleon-cs-container, 1400px);
	margin: 64px auto 0;
	padding: 0 clamp(24px, 5vw, 80px);
	box-sizing: border-box;
}
.bamleon-cs__brand-header-media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 18px;
	box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.6);
}

/* Overview block — Overview kicker + sub-title + body inside the dark band.
   Spans the same inner width as the title/lede above (1400px container,
   24-80px padding). Left-aligned. No internal max-width caps. */
.bamleon-cs__brand-header-overview {
	position: relative;
	z-index: 1;
	max-width: var(--bamleon-cs-container, 1400px);
	margin: 72px auto 0;
	padding: 0 clamp(24px, 5vw, 80px);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 20px;
	text-align: left;
}
.bamleon-cs__brand-header-overview-kicker {
	font-family: var(--bamleon-font-mono);
	font-size: var(--bamleon-text-xs);
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(245, 245, 245, 0.55);
}
.bamleon-cs__brand-header-overview-title {
	font-family: var(--bamleon-font-display);
	font-size: clamp(32px, 4.2vw, 52px);
	font-weight: 500;
	letter-spacing: -0.025em;
	line-height: var(--bamleon-leading-tight);
	color: #ffffff;
	margin: 0;
}
.bamleon-cs__brand-header-overview-body {
	font-family: var(--bamleon-font-body);
	font-size: 17px;
	line-height: var(--bamleon-leading-base);
	color: rgba(245, 245, 245, 0.72);
	margin: 0;
}

/* ── View toggle — refined segmented control with sliding indicator.
   Sits between the quick-info bento and the detailed sections. */
.bamleon-cs__view-toggle {
	position: relative;
	display: flex;
	width: max-content;
	margin: 56px auto 56px;
	padding: 6px;
	gap: 0;
	background: var(--bamleon-paper, #f5f1e8);
	border-radius: 18px;
	border: 1px solid var(--bamleon-border);
	box-shadow: 0 1px 2px rgba(15, 15, 18, 0.04),
	            0 8px 24px -16px rgba(15, 15, 18, 0.12);
	isolation: isolate;
}
/* Sliding indicator behind the active button */
.bamleon-cs__view-toggle::before {
	content: "";
	position: absolute;
	top: 6px;
	bottom: 6px;
	left: 6px;
	width: calc(50% - 6px);
	background: var(--bamleon-text);
	border-radius: var(--bamleon-radius-lg);
	transition: transform 360ms cubic-bezier(0.22, 0.61, 0.36, 1);
	z-index: 0;
}
/* Move indicator to the right half when Detailed is checked */
.bamleon-cs__view-radio#sm-view-detailed:checked ~ .bamleon-cs__view-toggle::before {
	transform: translateX(100%);
}
.bamleon-cs__view-toggle-btn {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 14px 24px;
	min-width: 200px;
	border-radius: var(--bamleon-radius-lg);
	cursor: pointer;
	user-select: none;
	transition: color 280ms ease-out;
	color: var(--bamleon-text-2);
}
.bamleon-cs__view-toggle-btn:hover {
	color: var(--bamleon-text);
}
.bamleon-cs__view-toggle-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: var(--bamleon-radius-md);
	background: rgba(15, 15, 18, 0.05);
	color: var(--bamleon-text-2);
	transition: background 280ms ease-out, color 280ms ease-out;
	flex-shrink: 0;
}
.bamleon-cs__view-toggle-text {
	display: inline-flex;
	flex-direction: column;
	gap: 2px;
	text-align: left;
}
.bamleon-cs__view-toggle-label {
	font-family: var(--bamleon-font-display);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: var(--bamleon-tracking-normal);
	line-height: 1.1;
	color: inherit;
}
.bamleon-cs__view-toggle-hint {
	font-family: var(--bamleon-font-mono);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--bamleon-text-3);
	line-height: 1.1;
}
/* Active button: text + icon flip to paper-on-ink */
.bamleon-cs__view-radio#sm-view-simple:checked ~ .bamleon-cs__view-toggle .bamleon-cs__view-toggle-btn[for="sm-view-simple"],
.bamleon-cs__view-radio#sm-view-detailed:checked ~ .bamleon-cs__view-toggle .bamleon-cs__view-toggle-btn[for="sm-view-detailed"] {
	color: #f5f1e8;
}
.bamleon-cs__view-radio#sm-view-simple:checked ~ .bamleon-cs__view-toggle .bamleon-cs__view-toggle-btn[for="sm-view-simple"] .bamleon-cs__view-toggle-icon,
.bamleon-cs__view-radio#sm-view-detailed:checked ~ .bamleon-cs__view-toggle .bamleon-cs__view-toggle-btn[for="sm-view-detailed"] .bamleon-cs__view-toggle-icon {
	background: rgba(245, 241, 232, 0.12);
	color: #f5f1e8;
}
.bamleon-cs__view-radio#sm-view-simple:checked ~ .bamleon-cs__view-toggle .bamleon-cs__view-toggle-btn[for="sm-view-simple"] .bamleon-cs__view-toggle-hint,
.bamleon-cs__view-radio#sm-view-detailed:checked ~ .bamleon-cs__view-toggle .bamleon-cs__view-toggle-btn[for="sm-view-detailed"] .bamleon-cs__view-toggle-hint {
	color: rgba(245, 241, 232, 0.55);
}
/* Hide detail content in simple mode */
.bamleon-cs__view-radio#sm-view-simple:checked ~ .bamleon-cs__view-detail {
	display: none;
}

@media (max-width: 560px) {
	.bamleon-cs__view-toggle-btn {
		min-width: 0;
		padding: 12px 18px;
	}
	.bamleon-cs__view-toggle-text {
		display: none;
	}
}

/* ── Quick-info section */
.bamleon-cs__quick-info {
	display: flex;
	flex-direction: column;
	gap: 56px;
	padding: 0 0 120px;
}
.bamleon-cs__quick-info-head {
	max-width: 760px;
}
.bamleon-cs__quick-info-kicker {
	font-family: var(--bamleon-font-mono);
	font-size: var(--bamleon-text-xs);
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--bamleon-text-3);
	display: inline-block;
	margin-bottom: 24px;
}
.bamleon-cs__quick-info-title {
	font-family: var(--bamleon-font-display);
	font-size: clamp(36px, 5vw, 56px);
	font-weight: 500;
	letter-spacing: -0.025em;
	line-height: var(--bamleon-leading-tight);
	color: var(--bamleon-text);
	margin: 0 0 24px;
}
.bamleon-cs__quick-info-body {
	font-family: var(--bamleon-font-body);
	font-size: 18px;
	line-height: 1.55;
	color: var(--bamleon-text-2);
	margin: 0;
}

.bamleon-cs__quick-info-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: minmax(280px, 1fr);
	gap: 16px;
}
@media (max-width: 900px) {
	.bamleon-cs__quick-info-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 560px) {
	.bamleon-cs__quick-info-grid {
		grid-template-columns: 1fr;
	}
}

/* ── Color swatch tile ─────────────────────────────────────────────── */
.bamleon-cs__quick-tile--color {
	background: var(--bamleon-paper, #f5f1e8);
	aspect-ratio: auto;
}
.bamleon-cs__quick-tile-color-grid {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(3, 1fr);
	gap: 0;
	z-index: 0;
}
.bamleon-cs__quick-tile-swatch {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 14px;
	font-family: var(--bamleon-font-mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	gap: 2px;
	line-height: 1.1;
}
.bamleon-cs__quick-tile-swatch em {
	font-style: normal;
	font-weight: 600;
	font-size: var(--bamleon-text-xs);
}
.bamleon-cs__quick-tile-swatch i {
	font-style: normal;
	opacity: 0.7;
	font-size: 9.5px;
}
.bamleon-cs__quick-tile--color .bamleon-cs__quick-tile-meta {
	background: rgba(245, 241, 232, 0.85);
	backdrop-filter: blur(6px);
}

/* ── Type sample tile ──────────────────────────────────────────────── */
.bamleon-cs__quick-tile--type {
	background: var(--bamleon-paper, #f5f1e8);
	aspect-ratio: auto;
}
.bamleon-cs__quick-tile-type-stack {
	position: absolute;
	inset: 0;
	padding: 24px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
	color: var(--bamleon-text);
	z-index: 0;
}
.bamleon-cs__quick-tile-type-display {
	font-family: var(--bamleon-font-display);
	font-size: clamp(28px, 3.4vw, 42px);
	font-weight: 500;
	letter-spacing: -0.025em;
	line-height: 1;
}
.bamleon-cs__quick-tile-type-headline {
	font-family: var(--bamleon-font-display);
	font-size: clamp(20px, 2.4vw, 28px);
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1;
}
.bamleon-cs__quick-tile-type-body {
	font-family: var(--bamleon-font-body);
	font-size: 14px;
	color: var(--bamleon-text-2);
	margin-top: 4px;
}
.bamleon-cs__quick-tile-type-mono {
	font-family: var(--bamleon-font-mono);
	font-size: 9px;
	letter-spacing: 0.2em;
	color: var(--bamleon-text-3);
	margin-top: 4px;
}
.bamleon-cs__quick-tile--type .bamleon-cs__quick-tile-meta {
	background: rgba(245, 241, 232, 0.85);
	backdrop-filter: blur(6px);
}

/* Light-on-paper meta variant for the color + type tiles */
.bamleon-cs__quick-tile-meta--light .bamleon-cs__quick-tile-kicker {
	color: var(--bamleon-text-3);
}
.bamleon-cs__quick-tile-meta--light .bamleon-cs__quick-tile-label {
	color: var(--bamleon-text);
}

/* System tile ink background */
.bamleon-cs__quick-tile-media--ink {
	background: #0f0f12;
}

/* ── Text tiles (WHO / WHY / WHEN / HOW) — bento entries that answer
   the case study's W/H questions without an image. */
.bamleon-cs__quick-tile--text {
	aspect-ratio: auto;
	min-height: 260px;
	overflow: hidden;
	display: block;
}
.bamleon-cs__quick-tile-text {
	position: absolute;
	inset: 0;
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	z-index: 1;
	justify-content: flex-start;
}
.bamleon-cs__quick-tile--paper {
	background: var(--bamleon-paper, #f5f1e8);
	color: var(--bamleon-text);
}
.bamleon-cs__quick-tile--ink {
	background: #0f0f12;
	color: #f5f1e8;
}
.bamleon-cs__quick-tile--paper .bamleon-cs__quick-tile-kicker,
.bamleon-cs__quick-tile--ink .bamleon-cs__quick-tile-kicker {
	font-family: var(--bamleon-font-mono);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--bamleon-text-3);
	margin-bottom: 4px;
}
.bamleon-cs__quick-tile--ink .bamleon-cs__quick-tile-kicker {
	color: rgba(245, 241, 232, 0.55);
}
.bamleon-cs__quick-tile-headline {
	font-family: var(--bamleon-font-display);
	font-size: clamp(24px, 2.6vw, 32px);
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: var(--bamleon-leading-tight);
	color: var(--bamleon-text);
}
.bamleon-cs__quick-tile-headline--light {
	color: #ffffff;
}
.bamleon-cs__quick-tile-sub {
	font-family: var(--bamleon-font-mono);
	font-size: var(--bamleon-text-xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bamleon-text-3);
	line-height: 1.4;
}
.bamleon-cs__quick-tile--ink .bamleon-cs__quick-tile-sub {
	color: rgba(245, 241, 232, 0.55);
}
.bamleon-cs__quick-tile-body {
	font-family: var(--bamleon-font-body);
	font-size: 14px;
	line-height: 1.55;
	color: var(--bamleon-text-2);
	margin-top: auto;
}
.bamleon-cs__quick-tile-body--light {
	color: rgba(245, 241, 232, 0.72);
}
.bamleon-cs__quick-tile-quote {
	font-family: var(--bamleon-font-display);
	font-size: clamp(22px, 2.4vw, 28px);
	font-weight: 500;
	letter-spacing: -0.015em;
	line-height: 1.15;
	color: #ffffff;
	font-style: italic;
}
.bamleon-cs__quick-tile-timeline {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.bamleon-cs__quick-tile-timeline li {
	display: grid;
	grid-template-columns: 64px 1fr;
	gap: 12px;
	align-items: baseline;
	font-family: var(--bamleon-font-body);
	font-size: var(--bamleon-text-sm);
	line-height: 1.4;
	color: var(--bamleon-text);
	padding: 4px 0;
	border-top: 1px solid rgba(15, 15, 18, 0.08);
}
.bamleon-cs__quick-tile-timeline li:first-child {
	border-top: 0;
}
.bamleon-cs__quick-tile-timeline li em {
	font-style: normal;
	font-family: var(--bamleon-font-mono);
	font-size: var(--bamleon-text-xs);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bamleon-text-3);
}
.bamleon-cs__quick-tile-stack-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.bamleon-cs__quick-tile-stack-list li {
	font-family: var(--bamleon-font-body);
	font-size: var(--bamleon-text-sm);
	line-height: 1.4;
	color: rgba(245, 241, 232, 0.82);
	padding: 6px 0;
	border-top: 1px solid rgba(245, 241, 232, 0.08);
}
.bamleon-cs__quick-tile-stack-list li:first-child {
	border-top: 0;
}

/* Generic bullet list used by OUTCOMES + STACK tiles. Inherits color from
   the tile's --paper or --ink variant. */
.bamleon-cs__quick-tile-bullets {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}
.bamleon-cs__quick-tile-bullets li {
	font-family: var(--bamleon-font-body);
	font-size: var(--bamleon-text-sm);
	line-height: 1.45;
	padding: 8px 0;
	border-top: 1px solid currentColor;
	border-color: rgba(15, 15, 18, 0.08);
	color: var(--bamleon-text-2);
}
.bamleon-cs__quick-tile-bullets li:first-child {
	border-top: 0;
	padding-top: 0;
}
.bamleon-cs__quick-tile--ink .bamleon-cs__quick-tile-bullets li {
	border-color: rgba(245, 241, 232, 0.1);
	color: rgba(245, 241, 232, 0.82);
}

/* Light sub variant for the role tile on ink */
.bamleon-cs__quick-tile-sub--light {
	color: rgba(245, 241, 232, 0.55) !important;
}

/* Discipline chips (skills demonstrated) */
.bamleon-cs__quick-tile-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 4px;
}
.bamleon-cs__quick-tile-chip {
	display: inline-flex;
	align-items: center;
	padding: 6px 12px;
	border-radius: var(--bamleon-radius-pill);
	border: 1px solid var(--bamleon-border);
	background: rgba(15, 15, 18, 0.02);
	font-family: var(--bamleon-font-mono);
	font-size: 10.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bamleon-text);
	white-space: nowrap;
}
.bamleon-cs__quick-tile--ink .bamleon-cs__quick-tile-chip {
	border-color: rgba(245, 241, 232, 0.18);
	background: rgba(245, 241, 232, 0.04);
	color: rgba(245, 241, 232, 0.9);
}

/* Each quick-tile = image cell with overlay caption + cursor glow */
.bamleon-cs__quick-tile {
	position: relative;
	display: block;
	border-radius: 22px;
	overflow: hidden;
	background: #111;
	aspect-ratio: 16 / 11;
	text-decoration: none;
	color: inherit;
	isolation: isolate;
	transition: transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.bamleon-cs__quick-tile:hover {
	transform: translateY(-3px);
}
.bamleon-cs__quick-tile-media {
	position: absolute;
	inset: 0;
	overflow: hidden;
	z-index: 0;
}
.bamleon-cs__quick-tile-media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: top center;
	display: block;
	transition: transform 1200ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.bamleon-cs__quick-tile:hover .bamleon-cs__quick-tile-media img {
	transform: scale(1.04);
}
/* "Contain" variant for SVG style boards (don't crop) */
.bamleon-cs__quick-tile-media--contain {
	background: var(--bamleon-paper);
}
.bamleon-cs__quick-tile-media--contain img {
	object-fit: contain;
	object-position: center;
	padding: 24px;
	box-sizing: border-box;
}
/* Cursor-tracked glow ring on hover */
.bamleon-cs__quick-tile::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1.5px;
	background: radial-gradient(280px circle at var(--gx, -200px) var(--gy, -200px),
		rgba(91, 141, 190, 0.85) 0%,
		rgba(255, 122, 179, 0.55) 25%,
		rgba(74, 142, 255, 0.45) 50%,
		rgba(255, 255, 255, 0.08) 80%);
	-webkit-mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
	z-index: 3;
}
/* Caption overlay at bottom */
.bamleon-cs__quick-tile-meta {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 24px;
	background: linear-gradient(180deg, transparent 0%, rgba(15, 15, 18, 0.78) 100%);
	display: flex;
	flex-direction: column;
	gap: 6px;
	z-index: 2;
}
.bamleon-cs__quick-tile-kicker {
	font-family: var(--bamleon-font-mono);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.7);
}
.bamleon-cs__quick-tile-label {
	font-family: var(--bamleon-font-display);
	font-size: var(--bamleon-text-base);
	font-weight: 500;
	letter-spacing: var(--bamleon-tracking-normal);
	line-height: 1.3;
	color: #ffffff;
}

/* CTA at the very bottom of the case study page (after detail wrapper) */
.bamleon-cs__page-cta {
	display: flex;
	justify-content: center;
	padding: 80px 0 120px;
}

@media (max-width: 900px) {
	.bamleon-cs__brand-header {
		padding: 64px clamp(20px, 5vw, 48px) 80px;
	}
	.bamleon-cs__brand-header-top,
	.bamleon-cs__brand-header-bottom {
		flex-direction: column;
		align-items: flex-start;
	}
	.bamleon-cs__brand-header-inner {
		gap: 32px;
	}
}
@media (max-width: 700px) {
	.bamleon-cs__quick-info-grid {
		grid-template-columns: 1fr;
	}
}


/* ═══════════════════════════════════════════════════════════════════════════
 * READING MODE — Simple vs Detailed
 *
 * Default = detailed (everything visible). When .bamleon-cs has
 * data-cs-mode="simple", the detailed body sections are hidden so the page
 * collapses to: forced-dark hero zone → overview bento → page CTA.
 * Toggle UI lives in .bamleon-cs-modes (floating pill, right side).
 * ═══════════════════════════════════════════════════════════════════════ */
/* Simple mode hides all body sections including the live demo.
   Detailed mode (default) shows everything. */
.bamleon-cs[data-cs-mode="simple"] .bamleon-cs__section,
.bamleon-cs[data-cs-mode="simple"] .bamleon-cs__demo-frame,
.bamleon-cs[data-cs-mode="simple"] .bamleon-cs__demo-cta {
	display: none !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
 * .bamleon-cs__top — FORCED-DARK HEADER ZONE
 *
 * Wraps the hero + bleed image at the top of any case study. Always dark,
 * regardless of body theme. The rest of the case study body respects the
 * site-wide theme toggle (.bamleon-light on <body>).
 *
 * Local token override = every child element automatically paints dark
 * (titles, kicker, CTA, borders) without per-element selectors.
 * ═══════════════════════════════════════════════════════════════════════ */
.bamleon-cs__top {
	/* Local dark token set — children inherit. Reads from AT so the dark
	   zone palette is one settings change, not a CSS hunt. */
	--bamleon-bg:        var(--bamleon-cs-top-bg);
	--bamleon-surface:   #141417;
	--bamleon-surface-2: #1a1a1d;
	--bamleon-surface-3: #222226;
	--bamleon-text:      var(--bamleon-cs-top-text);  /* 19.0:1 on bg ✓ AAA */
	--bamleon-text-2:    rgba(250, 250, 250, 0.82);  /* 15.6:1 ✓ AAA */
	--bamleon-text-3:    rgba(250, 250, 250, 0.62);  /* 11.8:1 ✓ AAA */
	--bamleon-border:    rgba(255, 255, 255, 0.10);
	--bamleon-border-2:  rgba(255, 255, 255, 0.18);

	/* AT project tokens — flip for dark zone so they don't paint dark-on-dark */
	--jpmc-ink:         #fafafa;
	--jpmc-surface:     #141417;
	--jpmc-surface-2:   #1a1a1d;
	--jpmc-border-cool: rgba(255, 255, 255, 0.10);
	--jpmc-text-muted:  rgba(250, 250, 250, 0.62);

	/* SXM project tokens — same flip for SiriusXM case study dark zone */
	--sxm-ink:          #fafafa;
	--sxm-surface:      #141417;
	--sxm-surface-2:    #1a1a1d;
	--sxm-border-cool:  rgba(255, 255, 255, 0.10);
	--sxm-text-muted:   rgba(250, 250, 250, 0.62);

	background: var(--bamleon-bg);
	color: var(--bamleon-text);
	/* Full-bleed: pin to viewport edges regardless of parent width / padding.
	   `width: 100vw` + `margin-left: calc(50% - 50vw)` is robust against
	   parent gutter, transforms, and overflow contexts in a way the bare
	   `margin: 0 calc(50% - 50vw)` formula isn't. */
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	margin-bottom: 96px;
	padding: 0;
	position: relative;
	overflow: clip;
	overflow-clip-margin: 0px;
}
/* When .bamleon-cs__top contains a --fill hero, let the image breathe
   vertically. Bricks' .brxe-block forces flex-column + align-items:
   flex-start which can prevent children from stretching. Override here. */
.bamleon-cs__top:has(.bamleon-cs__hero-media--fill) {
	align-items: stretch !important;
}
/* Restore the article gutter inside the inner so the hero text aligns with
   the rest of the case study container. */
.bamleon-cs__top-inner {
	padding: 0 var(--bamleon-cs-gutter);
}
/* Dark-zone color guard — hero title always tracks the forced-dark
   token set. Prevents per-project ink tokens (--sxm-ink, etc.) from
   painting dark-on-dark when a case-study override wins specificity.
   Kicker left unguarded so per-project accents (e.g. --sxm-accent) work. */
.bamleon-cs__top .bamleon-cs__hero-title  { color: var(--bamleon-cs-top-text) !important; }
.bamleon-cs__top .bamleon-cs__hero-tagline { color: var(--bamleon-cs-top-text) !important; opacity: 0.82; }

/* Inside the forced-dark zone the hero gets a tighter bottom — the media
   carries the visual break instead of bottom padding. */
.bamleon-cs__top .bamleon-cs__hero {
	padding: 180px 0 80px;
}
/* Media slot — full width within the already-bled wrapper. No extra bleed
   needed (parent is already full-bleed); just stretch the image edge-to-edge. */
.bamleon-cs__top-media {
	margin: 0;
	width: 100%;
	aspect-ratio: 16 / 9;
	max-height: 80vh;
	overflow: hidden;
	background: var(--bamleon-surface);
}
/* Existing case studies use .bamleon-cs__hero-media.bamleon-cs__bleed for the
   bleed image. When that markup lives INSIDE .bamleon-cs__top:
     - the bleed escape (calc(50%-50vw) margins) becomes double (parent + child)
     - the legacy 56px margin-bottom sits inside the dark wrapper, painting
       a strip of the wrapper's dark background below the image. That was
       the "subtle black bar" showing up on every retrofitted case study.
   Reset ALL margins to zero so the media fills the already-bled parent
   with no surrounding dark padding. */
.bamleon-cs__top .bamleon-cs__hero-media,
.bamleon-cs__top .bamleon-cs__hero-media.bamleon-cs__bleed {
	margin: 0 !important;
	width: 100%;
	max-width: 100%;
	border-radius: 0;
	border: 0;
}
/* --fill inside the dark top zone: let the image breathe at natural height.
   Container drops every possible constraint: aspect-ratio, max-height,
   overflow, background (gradient placeholder), border. Image renders at
   natural width × auto height — zero crop. */
.bamleon-cs__top .bamleon-cs__hero-media--fill {
	aspect-ratio: auto !important;
	max-height: none !important;
	overflow: visible !important;
	background: none !important;
	border: 0 !important;
	align-self: stretch !important;
	width: 100% !important;
}
/* Target EVERY img inside --fill: direct child, Bricks .brxe-image class,
   or img nested inside a .brxe-image wrapper. Covers all rendering paths. */
.bamleon-cs__top .bamleon-cs__hero-media--fill > img,
.bamleon-cs__top .bamleon-cs__hero-media--fill > img.brxe-image,
.bamleon-cs__top .bamleon-cs__hero-media--fill > .brxe-image,
.bamleon-cs__top .bamleon-cs__hero-media--fill > .brxe-image > img,
.bamleon-cs__top .bamleon-cs__hero-media--fill img {
	width: 100% !important;
	height: auto !important;
	max-height: none !important;
	object-fit: contain !important;
	object-position: center top !important;
	display: block !important;
}
.bamleon-cs__top-media > img,
.bamleon-cs__top-media > picture,
.bamleon-cs__top-media > video {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain;
	object-position: center top;
}
.bamleon-cs__article--sidemoney .bamleon-cs__top-media {
	aspect-ratio: auto;
	max-height: none;
	overflow: visible;
}
.bamleon-cs__article--sidemoney .bamleon-cs__top-media > img {
	height: auto;
	object-fit: contain;
}

@media (max-width: 900px) {
	.bamleon-cs__top { margin-bottom: 64px; }
	.bamleon-cs__top .bamleon-cs__hero { padding: 140px 0 60px; }
}
@media (max-width: 560px) {
	.bamleon-cs__top { margin-bottom: 48px; }
	.bamleon-cs__top .bamleon-cs__hero { padding: 120px 0 48px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
 * .bamleon-cs__overview — STANDARD CASE-STUDY BENTO
 *
 * Asymmetric 4-col grid: feature (2×2), stat (1×1), status (1×1),
 * role (2×1), stack list (2×2), outcomes list (2×2), disciplines chips (4×1).
 *
 * Theme-aware: cards pull from --bamleon-surface / --bamleon-text so they
 * flip with the body theme. Token-driven for portability across case studies.
 * Accessibility: solid surfaces (no gradient text), label/value contrast ≥ AA,
 * semantic <article> / <dl> / <ol> for screen readers, focus-visible rings
 * inherited from the .bamleon-cs scope.
 * ═══════════════════════════════════════════════════════════════════════ */
.bamleon-cs__overview {
	display: flex;
	flex-direction: column;
	gap: 40px;
	padding: 16px 0 96px;
}
/* Overview head removed globally — bento-only per Therum OS standard.
   Kicker + intro title hidden across all case studies; the bento cards
   carry the at-a-glance brief on their own. */
.bamleon-cs__overview-head {
	display: none !important;
}
.bamleon-cs__overview-kicker {
	font-family: var(--bamleon-font-mono);
	font-size: var(--bamleon-text-xs);
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--bamleon-text-3);
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
.bamleon-cs__overview-kicker::before {
	content: "";
	width: 8px;
	height: 8px;
	background: var(--bamleon-accent);
	border-radius: 50%;
	flex-shrink: 0;
}
.bamleon-cs__overview-title {
	font-family: var(--bamleon-font-display);
	font-size: clamp(28px, 3.4vw, 44px);
	font-weight: 500;
	line-height: 1.12;
	letter-spacing: -0.02em;
	color: var(--bamleon-text);
	margin: 0;
}

/* ── Grid ─────────────────────────────────────────────────────────────── */
.bamleon-cs__overview-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-rows: minmax(160px, auto);
	grid-auto-flow: dense;
	gap: 16px;
}

/* ── Base card ────────────────────────────────────────────────────────── */
.bamleon-cs__ov-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 28px;
	border-radius: var(--bamleon-radius-xl);
	background: var(--bamleon-surface);
	border: 1px solid var(--bamleon-border);
	color: var(--bamleon-text);
	overflow: hidden;
	isolation: isolate;
}
.bamleon-cs__ov-card > * {
	position: relative;
	z-index: 1;
}

/* ── Card tag (top-row kicker: "01 · Project") ────────────────────────── */
.bamleon-cs__ov-tag {
	font-family: var(--bamleon-font-mono);
	font-size: var(--bamleon-text-xs);
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--bamleon-text-3);
	display: inline-flex;
	align-items: baseline;
	gap: 10px;
}
.bamleon-cs__ov-tag em {
	font-style: normal;
	color: var(--bamleon-accent);
	font-weight: 700;
}

/* ── Card headline (display type for feature + role) ──────────────────── */
.bamleon-cs__ov-headline {
	font-family: var(--bamleon-font-display);
	font-size: clamp(24px, 2.4vw, 32px);
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--bamleon-text);
	margin: 0;
}

/* ── Lede / body copy ─────────────────────────────────────────────────── */
.bamleon-cs__ov-lede,
.bamleon-cs__ov-body {
	font-family: var(--bamleon-font-body);
	font-size: var(--bamleon-text-base);
	line-height: 1.55;
	color: var(--bamleon-text-2);
	margin: 0;
}

/* ── Inline link inside the feature card ──────────────────────────────── */
.bamleon-cs__ov-link {
	margin-top: auto;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border: 1px solid var(--bamleon-border-2);
	border-radius: var(--bamleon-radius-pill, 999px);
	font-family: var(--bamleon-font-display);
	font-size: 14px;
	font-weight: 500;
	color: var(--bamleon-text);
	text-decoration: none;
	transition: background 200ms var(--bamleon-ease-out, ease),
	            border-color 200ms var(--bamleon-ease-out, ease),
	            color 200ms var(--bamleon-ease-out, ease);
}
.bamleon-cs__ov-link:hover {
	background: var(--bamleon-text);
	color: var(--bamleon-bg);
	border-color: var(--bamleon-text);
}

/* ── Feature card (2x2) ───────────────────────────────────────────────── */
.bamleon-cs__ov-card--feature {
	grid-column: span 2;
	grid-row: span 2;
	padding: 36px;
	gap: 18px;
	background:
		radial-gradient(120% 100% at 0% 0%, rgba(91, 141, 190, 0.06), transparent 60%),
		var(--bamleon-surface);
}

/* ── Stat card (1x1) — big numeric ─────────────────────────────────────── */
.bamleon-cs__ov-card--stat {
	justify-content: space-between;
}
/* The stat slot now carries a sentence-length build-window summary, not
   a single number — shrink to body-display sizing so it actually fits
   inside the card without making the row tall. The original mega-number
   sizing (40-56px) is preserved for any card that uses --stat with a
   short numeric value via a single-word/digits selector. */
.bamleon-cs__ov-stat {
	font-family: var(--bamleon-font-display);
	font-size: clamp(15px, 1.4vw, 18px);
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: var(--bamleon-tracking-normal);
	color: var(--bamleon-text);
}
.bamleon-cs__ov-stat i {
	font-style: normal;
	color: var(--bamleon-accent);
	margin-left: 4px;
}
.bamleon-cs__ov-foot {
	font-family: var(--bamleon-font-mono);
	font-size: var(--bamleon-text-xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bamleon-text-3);
}

/* ── Status card (1x1) — live pill ─────────────────────────────────────── */
.bamleon-cs__ov-card--status {
	justify-content: space-between;
}
.bamleon-cs__ov-status-pill {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px;
	border-radius: var(--bamleon-radius-pill);
	background: rgba(72, 187, 120, 0.12);
	border: 1px solid rgba(72, 187, 120, 0.32);
	color: #2f855a;                       /* 5.1:1 on light surface ✓ AA */
	font-family: var(--bamleon-font-mono);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	align-self: flex-start;
}
.bamleon-light .bamleon-cs__ov-status-pill { color: #276749; }  /* darker green on light */
:not(.bamleon-light) .bamleon-cs__ov-status-pill { color: #68d391; }  /* brighter on dark */
.bamleon-cs__ov-status-pill i {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #48bb78;
	box-shadow: 0 0 0 3px rgba(72, 187, 120, 0.18);
	flex-shrink: 0;
	animation: bamleon-cs-ov-pulse 2.2s ease-in-out infinite;
}
@keyframes bamleon-cs-ov-pulse {
	0%, 100% { box-shadow: 0 0 0 3px rgba(72, 187, 120, 0.18); }
	50%      { box-shadow: 0 0 0 6px rgba(72, 187, 120, 0.04); }
}
@media (prefers-reduced-motion: reduce) {
	.bamleon-cs__ov-status-pill i { animation: none; }
}

/* ── Role / Stack card (2x1) ──────────────────────────────────────────
   Compact variant: the headline carries a one-line stack list, not a
   marketing display title. Smaller type + tighter row anchoring so the
   card sits flatter against the row without filling vertical space. */
.bamleon-cs__ov-card--role {
	grid-column: span 2;
	justify-content: center;
	padding-top: 20px;
	padding-bottom: 20px;
}
.bamleon-cs__ov-card--role .bamleon-cs__ov-headline {
	font-size: clamp(14px, 1.25vw, 17px);
	font-weight: 500;
	line-height: 1.45;
	letter-spacing: -0.005em;
	margin: 0;
}

/* ── List card (2x2) — Stack + Outcomes ───────────────────────────────── */
.bamleon-cs__ov-card--list {
	grid-column: span 2;
	grid-row: span 2;
}

/* Definition-list (Stack) — labeled rows */
.bamleon-cs__ov-defs {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
}
.bamleon-cs__ov-def {
	display: grid;
	grid-template-columns: 90px 1fr;
	gap: 18px;
	padding: 12px 0;
	border-top: 1px solid var(--bamleon-border);
	align-items: baseline;
}
.bamleon-cs__ov-def:first-child { border-top: 0; padding-top: 4px; }
.bamleon-cs__ov-def dt {
	font-family: var(--bamleon-font-mono);
	font-size: var(--bamleon-text-xs);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bamleon-text-3);
	margin: 0;
}
.bamleon-cs__ov-def dd {
	font-family: var(--bamleon-font-body);
	font-size: 15px;
	line-height: 1.45;
	color: var(--bamleon-text);
	margin: 0;
}

/* Numbered list (Outcomes) */
.bamleon-cs__ov-nums {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: ov-num;
	display: flex;
	flex-direction: column;
}
.bamleon-cs__ov-nums li {
	counter-increment: ov-num;
	display: grid;
	grid-template-columns: 40px 1fr;
	gap: 14px;
	padding: 12px 0;
	border-top: 1px solid var(--bamleon-border);
	align-items: baseline;
}
.bamleon-cs__ov-nums li:first-child { border-top: 0; padding-top: 4px; }
.bamleon-cs__ov-nums li::before {
	content: counter(ov-num, decimal-leading-zero);
	font-family: var(--bamleon-font-mono);
	font-size: var(--bamleon-text-xs);
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--bamleon-accent);
	line-height: 1.45;
}
.bamleon-cs__ov-nums li > span {
	font-family: var(--bamleon-font-body);
	font-size: 15px;
	line-height: 1.5;
	color: var(--bamleon-text);
}

/* ── Chips card (2x1) — two sit side-by-side; tag stacked above chips ───── */
.bamleon-cs__ov-card--chips {
	grid-column: span 2;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	padding: 24px 28px;
}
.bamleon-cs__ov-card--chips .bamleon-cs__ov-tag {
	flex-shrink: 0;
}
.bamleon-cs__ov-chips {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.bamleon-cs__ov-chips li {
	display: inline-flex;
	align-items: center;
	padding: 8px 14px;
	border-radius: var(--bamleon-radius-pill);
	background: var(--bamleon-surface-2);
	border: 1px solid var(--bamleon-border);
	font-family: var(--bamleon-font-display);
	font-size: var(--bamleon-text-sm);
	font-weight: 500;
	color: var(--bamleon-text);
	white-space: nowrap;
}

/* ── Responsive: 3 → 2 → 1 col ────────────────────────────────────────── */
@media (max-width: 1100px) {
	.bamleon-cs__overview-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.bamleon-cs__ov-card--feature,
	.bamleon-cs__ov-card--role,
	.bamleon-cs__ov-card--list,
	.bamleon-cs__ov-card--chips {
		grid-column: span 2;
	}
	.bamleon-cs__ov-card--feature,
	.bamleon-cs__ov-card--list {
		grid-row: span 1;
	}
	.bamleon-cs__ov-card--chips {
		flex-direction: column;
		align-items: flex-start;
	}
}
@media (max-width: 640px) {
	.bamleon-cs__overview-grid {
		grid-template-columns: 1fr;
	}
	.bamleon-cs__ov-card,
	.bamleon-cs__ov-card--feature,
	.bamleon-cs__ov-card--role,
	.bamleon-cs__ov-card--list,
	.bamleon-cs__ov-card--chips {
		grid-column: span 1;
	}
	.bamleon-cs__ov-card { padding: 24px; }
	.bamleon-cs__ov-card--feature { padding: 28px; }
	.bamleon-cs__ov-def {
		grid-template-columns: 80px 1fr;
		gap: 12px;
	}
}


/* ═══════════════════════════════════════════════════════════════════════════
 * .bamleon-cs__strata — ARCHITECTURE STRATA
 *
 * Numbered foundation-up layer list (01 → 04, foundation → composition).
 * Reads as a construction sequence rather than a vague block stack: each
 * tier shows its build number, friendly L#, name, purpose, and tech pills.
 * Theme-aware via the .bamleon-cs token scope.
 * ═══════════════════════════════════════════════════════════════════════ */
.bamleon-cs__strata {
	list-style: none;
	margin: 32px 0 64px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	counter-reset: strata;
}
.bamleon-cs__strata-layer {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 36px 40px;
	border: 1px solid var(--bamleon-border);
	border-radius: 14px;
	background: var(--bamleon-surface);
	position: relative;
	width: 100%;
}

/* Numeral block — big display 01..04 with a small L# annotation. */
.bamleon-cs__strata-num {
	display: flex;
	align-items: baseline;
	gap: 10px;
	color: var(--bamleon-text);
}
.bamleon-cs__strata-num > span {
	font-family: var(--bamleon-font-display);
	font-size: clamp(40px, 4.4vw, 64px);
	font-weight: 500;
	letter-spacing: -0.04em;
	line-height: 0.9;
	color: var(--bamleon-text);
}
.bamleon-cs__strata-num > em {
	font-style: normal;
	font-family: var(--bamleon-font-mono);
	font-size: var(--bamleon-text-xs);
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--bamleon-accent);
}

.bamleon-cs__strata-body {
	display: flex;
	flex-direction: column;
	gap: 14px;
	width: 100%;
	min-width: 0;
}
.bamleon-cs__strata-tier {
	font-family: var(--bamleon-font-mono);
	font-size: var(--bamleon-text-xs);
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--bamleon-text-3);
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
.bamleon-cs__strata-tier::before {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	background: var(--bamleon-accent);
	border-radius: 50%;
}
.bamleon-cs__strata-name {
	font-family: var(--bamleon-font-display);
	font-size: clamp(22px, 2.4vw, 30px);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--bamleon-text);
	margin: 0;
}
.bamleon-cs__strata-why {
	font-family: var(--bamleon-font-body);
	font-size: var(--bamleon-text-base);
	line-height: 1.55;
	color: var(--bamleon-text-2);
	margin: 0;
}
.bamleon-cs__strata-tech {
	list-style: none;
	margin: 6px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.bamleon-cs__strata-tech li {
	display: inline-flex;
	align-items: center;
	padding: 6px 12px;
	border-radius: var(--bamleon-radius-pill);
	background: var(--bamleon-surface-2);
	border: 1px solid var(--bamleon-border);
	font-family: var(--bamleon-font-mono);
	font-size: var(--bamleon-text-xs);
	font-weight: 500;
	letter-spacing: 0.06em;
	color: var(--bamleon-text-2);
	white-space: nowrap;
}

@media (max-width: 900px) {
	.bamleon-cs__strata {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.bamleon-cs__strata-layer {
		padding: 28px 24px;
		gap: 14px;
	}
	.bamleon-cs__strata-num > span { font-size: clamp(40px, 10vw, 56px); }
}


/* ═══════════════════════════════════════════════════════════════════════════
 * .bamleon-cs__metrics — BY-THE-NUMBERS SPEC STRIP
 *
 * Premium spec-row pattern (Apple/Stripe). Six metrics in a wrapping grid,
 * hairline dividers between, oversized display numerals carrying the
 * primary weight. One feature variant spans 2 cols for visual emphasis.
 * Theme-aware; no surfaces, just rules and type — so the metrics read as
 * weights, not boxes.
 * ═══════════════════════════════════════════════════════════════════════ */
.bamleon-cs__metrics {
	display: grid;
	/* Fixed 3-col at desktop for uniform placement of 6 metrics (3×2).
	   Falls to 2-col / 1-col at breakpoints below. */
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: minmax(200px, auto);
	gap: 0;
	margin: 24px 0 48px;
	/* Single bottom rule only — the row-kicker above already carries a
	   border-bottom, so border-top here created a visual double-rule. */
	border-bottom: 1px solid var(--bamleon-border);
}
/* Each metric gets a left rule; reset for first item in each row (handled
   visually by the wrap — the leftmost item in any row has its rule clipped
   by being at the edge of the grid). */
.bamleon-cs__metric {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 36px 28px;
	position: relative;
	border-left: 1px solid var(--bamleon-border);
}
/* No left rule on the first column items (per row). The dense grid means
   we can't rely on :nth-child; we strip with a derived selector instead.
   Items in column 1 of a 4-col grid: positions 1, 5, 9, ... — use a CSS
   custom property approach via grid-column-start where possible. Fallback:
   border-left fades visually for items at the edge via overflow. */
.bamleon-cs__metric:first-child { border-left: 0; }

/* Feature metric — spans 2 cols, sits at the visual center of the strip. */
.bamleon-cs__metric--feature {
	grid-column: span 2;
	background:
		radial-gradient(120% 100% at 0% 0%, rgba(91, 141, 190, 0.05), transparent 60%);
}
.bamleon-cs__metric--feature .bamleon-cs__metric-num {
	font-size: clamp(72px, 10vw, 140px);
}

/* Numeral — the visual weight of the section. */
.bamleon-cs__metric-num {
	font-family: var(--bamleon-font-display);
	font-size: clamp(56px, 7vw, 104px);
	font-weight: 500;
	line-height: 0.88;
	letter-spacing: -0.04em;
	color: var(--bamleon-text);
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
}
.bamleon-cs__metric-num i,
.bamleon-cs__metric-num em {
	font-style: normal;
	font-family: var(--bamleon-font-display);
	font-size: 0.42em;
	font-weight: 500;
	color: var(--bamleon-accent);
	letter-spacing: 0;
	margin-left: 2px;
}

/* Label — mono caps, primary descriptor. */
.bamleon-cs__metric-label {
	font-family: var(--bamleon-font-mono);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bamleon-text);
	line-height: 1.35;
	max-width: 28ch;
}

/* Foot — body context, smaller weight. Pushed to bottom so labels align. */
.bamleon-cs__metric-foot {
	font-family: var(--bamleon-font-body);
	font-size: var(--bamleon-text-sm);
	line-height: 1.5;
	color: var(--bamleon-text-3);
	margin-top: auto;
	max-width: 32ch;
}

@media (max-width: 1100px) {
	.bamleon-cs__metrics {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.bamleon-cs__metric--feature {
		grid-column: span 3;
	}
	/* Reset left rules on the first item in each visible row (cols 1, 4, 7…
	   under a 3-col grid) — approximated via nth-child. */
	.bamleon-cs__metric:nth-child(3n+1) { border-left: 0; }
}
@media (max-width: 700px) {
	.bamleon-cs__metrics {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.bamleon-cs__metric--feature { grid-column: span 2; }
	.bamleon-cs__metric { padding: 28px 20px; }
	.bamleon-cs__metric:nth-child(odd) { border-left: 0; }
	.bamleon-cs__metric:nth-child(3n+1) { border-left: 1px solid var(--bamleon-border); }
	.bamleon-cs__metric:nth-child(2n+1) { border-left: 0; }
}
@media (max-width: 480px) {
	.bamleon-cs__metrics {
		grid-template-columns: 1fr;
	}
	.bamleon-cs__metric,
	.bamleon-cs__metric--feature {
		grid-column: span 1;
		border-left: 0;
		border-top: 1px solid var(--bamleon-border);
	}
	.bamleon-cs__metric:first-child { border-top: 0; }
}


/* ═══════════════════════════════════════════════════════════════════════════
 * .bamleon-cs__sysboard — DIGITAL DESIGN + BRAND SYSTEM BOARD
 *
 * A real HTML/CSS depiction of a brand's design system instead of a flat SVG
 * placeholder. Eight panels in an asymmetric 12-col grid: Logo · Palette ·
 * Motion · Type scale · Spacing · Grid · Components · Voice.
 *
 * Brand tokens are SCOPED to the board (Sidemoney palette by default; future
 * case studies can override via .bamleon-cs__sysboard[data-sysboard="<slug>"]).
 * Theme-independent on purpose — the board documents the brand's own system,
 * not the case study chrome around it.
 * ═══════════════════════════════════════════════════════════════════════ */
.bamleon-cs__sysboard {
	/* Sidemoney brand tokens (scoped inside this block). Currency-rooted
	   palette per the brand narrative doc: Federal Reserve aesthetics,
	   banknote engraving, gold-foil accents. */
	--sb-ink:     #0f0f12;
	--sb-paper:   #f5f1e8;
	--sb-surface: #ece6d3;
	--sb-edge:    #d8d1bc;
	--sb-green:   #1f4d2b;          /* currency green — Federal Reserve note */
	--sb-tan:     #c4a37a;          /* banknote tan */
	--sb-gold:    #d4a14a;          /* gold-foil accent */
	--sb-muted:   #7a7a80;
	--sb-meta:    #5a5a60;
	--sb-board:   #161618;

	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	grid-auto-rows: minmax(110px, auto);
	gap: 12px;
	margin: 32px 0 48px;
	padding: 18px;
	background: var(--sb-board);
	border-radius: 24px;
	color: var(--sb-paper);
	overflow: hidden;
	box-shadow:
		0 2px 6px rgba(0, 0, 0, 0.18),
		0 30px 60px -20px rgba(0, 0, 0, 0.45);
}

/* ── Panel base ───────────────────────────────────────────────────────── */
.bamleon-cs__sysboard-panel {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 22px;
	border-radius: 16px;
	background: var(--sb-paper);
	color: var(--sb-ink);
	position: relative;
	overflow: hidden;
	min-height: 0;
}
.bamleon-cs__sysboard-tag {
	font-family: var(--bamleon-font-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--sb-muted);
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
}
.bamleon-cs__sysboard-tag em {
	font-style: normal;
	color: var(--sb-green);
	font-weight: 700;
}
.bamleon-cs__sysboard-foot {
	font-family: var(--bamleon-font-mono);
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sb-muted);
	margin-top: auto;
}

/* ── Grid placement ───────────────────────────────────────────────────── */
.bamleon-cs__sysboard-panel--logo       { grid-column: span 4; grid-row: span 2; }
.bamleon-cs__sysboard-panel--colors     { grid-column: span 5; grid-row: span 2; }
.bamleon-cs__sysboard-panel--motion     { grid-column: span 3; grid-row: span 2; }
.bamleon-cs__sysboard-panel--type       { grid-column: span 7; grid-row: span 3; }
.bamleon-cs__sysboard-panel--spacing    { grid-column: span 5; grid-row: span 2; }
.bamleon-cs__sysboard-panel--grid       { grid-column: span 5; grid-row: span 1; }
.bamleon-cs__sysboard-panel--components { grid-column: span 8; grid-row: span 2; }
.bamleon-cs__sysboard-panel--voice      { grid-column: span 4; grid-row: span 2; }

/* ── 01 LOGO LOCKUP ───────────────────────────────────────────────────── */
.bamleon-cs__sysboard-panel--logo {
	background: var(--sb-ink);
	color: var(--sb-paper);
	justify-content: center;
}
.bamleon-cs__sysboard-panel--logo .bamleon-cs__sysboard-tag { color: rgba(245, 241, 232, 0.5); }
.bamleon-cs__sysboard-panel--logo .bamleon-cs__sysboard-tag em { color: var(--sb-gold); }
.bamleon-cs__sysboard-panel--logo .bamleon-cs__sysboard-foot { color: rgba(245, 241, 232, 0.45); }
.bamleon-cs__sysboard-logo {
	display: inline-flex;
	align-items: baseline;
	gap: 12px;
	color: var(--sb-paper);
	margin: 16px 0;
}
.bamleon-cs__sysboard-logo-mark {
	font-family: var(--bamleon-font-display);
	font-size: clamp(56px, 6vw, 88px);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--sb-gold);
}
.bamleon-cs__sysboard-logo-word {
	font-family: var(--bamleon-font-display);
	font-size: clamp(32px, 3.6vw, 48px);
	font-weight: 500;
	letter-spacing: -0.025em;
	line-height: 1;
	color: var(--sb-paper);
}

/* ── 02 COLOR PALETTE ─────────────────────────────────────────────────── */
.bamleon-cs__sysboard-swatches {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	flex: 1;
}
.bamleon-cs__sysboard-swatches li {
	background: var(--swatch);
	color: inherit;
	border-radius: 10px;
	padding: 12px 14px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 2px;
	min-height: 84px;
	border: 1px solid rgba(0, 0, 0, 0.08);
	overflow: hidden;
}
.bamleon-cs__sysboard-swatches li em {
	font-style: normal;
	font-family: var(--bamleon-font-display);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: var(--bamleon-tracking-normal);
}
.bamleon-cs__sysboard-swatches li span {
	font-family: var(--bamleon-font-mono);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.12em;
	opacity: 0.86;
}
.bamleon-cs__sysboard-swatches li i {
	font-style: normal;
	font-family: var(--bamleon-font-mono);
	font-size: 9px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.66;
	margin-top: 3px;
}

/* ── 03 MOTION ────────────────────────────────────────────────────────── */
.bamleon-cs__sysboard-panel--motion {
	background: var(--sb-surface);
}
.bamleon-cs__sysboard-curve {
	flex: 0 0 auto;
	height: 88px;
	color: var(--sb-green);
	margin: 4px 0 8px;
}
.bamleon-cs__sysboard-curve svg {
	width: 100%;
	height: 100%;
	display: block;
}
.bamleon-cs__sysboard-motion-defs {
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.bamleon-cs__sysboard-motion-defs > div {
	display: grid;
	grid-template-columns: 50px 1fr;
	gap: 10px;
	padding: 4px 0;
	border-top: 1px solid rgba(15, 15, 18, 0.08);
}
.bamleon-cs__sysboard-motion-defs > div:first-child { border-top: 0; padding-top: 0; }
.bamleon-cs__sysboard-motion-defs dt {
	font-family: var(--bamleon-font-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sb-muted);
	margin: 0;
}
.bamleon-cs__sysboard-motion-defs dd {
	font-family: var(--bamleon-font-mono);
	font-size: var(--bamleon-text-xs);
	color: var(--sb-ink);
	margin: 0;
}

/* ── 04 TYPE SCALE ────────────────────────────────────────────────────── */
.bamleon-cs__sysboard-typestack {
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
}
.bamleon-cs__sysboard-typerow {
	display: grid;
	grid-template-columns: 1fr 220px;
	align-items: baseline;
	gap: 18px;
	padding: 10px 0;
	border-top: 1px solid rgba(15, 15, 18, 0.08);
	min-width: 0;
}
.bamleon-cs__sysboard-typerow:first-child { border-top: 0; padding-top: 4px; }
.bamleon-cs__sysboard-typerow em {
	font-style: normal;
	font-family: var(--bamleon-font-mono);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sb-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.bamleon-cs__sysboard-typesample {
	color: var(--sb-ink);
	font-family: var(--bamleon-font-display);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.bamleon-cs__sysboard-typesample--display  { font-size: clamp(48px, 6vw, 72px); font-weight: 500; letter-spacing: -0.04em; line-height: 0.92; }
.bamleon-cs__sysboard-typesample--headline { font-size: clamp(28px, 3.2vw, 40px); font-weight: 500; letter-spacing: -0.025em; line-height: var(--bamleon-leading-tight); }
.bamleon-cs__sysboard-typesample--subhead  { font-size: clamp(20px, 2.4vw, 26px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; }
.bamleon-cs__sysboard-typesample--body     { font-family: var(--bamleon-font-body); font-size: 14px; line-height: 1.55; color: var(--sb-meta); white-space: normal; }
.bamleon-cs__sysboard-typesample--mono     { font-family: var(--bamleon-font-mono); font-size: var(--bamleon-text-xs); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sb-muted); }

/* ── 05 SPACING SCALE ─────────────────────────────────────────────────── */
.bamleon-cs__sysboard-panel--spacing { background: var(--sb-paper); }
.bamleon-cs__sysboard-spacing {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: 10px;
	align-items: end;
	flex: 1;
	padding-top: 8px;
}
.bamleon-cs__sysboard-spacing li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	min-width: 0;
}
.bamleon-cs__sysboard-bar {
	display: block;
	width: 100%;
	height: var(--bar);
	background: var(--sb-ink);
	border-radius: 3px;
	flex-shrink: 0;
}
.bamleon-cs__sysboard-spacing li em {
	font-style: normal;
	font-family: var(--bamleon-font-mono);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--sb-muted);
}

/* ── 06 GRID OVERLAY ──────────────────────────────────────────────────── */
.bamleon-cs__sysboard-panel--grid { background: var(--sb-surface); }
.bamleon-cs__sysboard-grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 4px;
	flex: 1;
	min-height: 56px;
	padding: 6px 0;
}
.bamleon-cs__sysboard-grid > span {
	display: block;
	background: rgba(31, 77, 43, 0.22);
	border: 1px solid rgba(31, 77, 43, 0.38);
	border-radius: 2px;
	min-height: 56px;
}

/* ── 07 COMPONENTS ────────────────────────────────────────────────────── */
.bamleon-cs__sysboard-components {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	flex: 1;
	padding-top: 4px;
}
.bamleon-cs__sysboard-btn {
	display: inline-flex;
	align-items: center;
	padding: 10px 18px;
	border-radius: var(--bamleon-radius-pill);
	font-family: var(--bamleon-font-display);
	font-size: var(--bamleon-text-sm);
	font-weight: 500;
	letter-spacing: -0.005em;
	line-height: 1;
	white-space: nowrap;
	border: 1px solid transparent;
}
.bamleon-cs__sysboard-btn--primary {
	background: var(--sb-ink);
	color: var(--sb-paper);
	border-color: var(--sb-ink);
}
.bamleon-cs__sysboard-btn--ghost {
	background: transparent;
	color: var(--sb-ink);
	border-color: var(--sb-ink);
}
.bamleon-cs__sysboard-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: var(--bamleon-radius-pill);
	font-family: var(--bamleon-font-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.bamleon-cs__sysboard-pill--instock {
	background: rgba(31, 77, 43, 0.14);
	color: var(--sb-green);
}
.bamleon-cs__sysboard-pill--instock i {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--sb-green);
	display: inline-block;
}
.bamleon-cs__sysboard-pill--sale {
	background: var(--sb-gold);
	color: var(--sb-ink);
}
.bamleon-cs__sysboard-chip {
	display: inline-flex;
	align-items: center;
	padding: 6px 12px;
	border-radius: 6px;
	background: var(--sb-surface);
	border: 1px solid var(--sb-edge);
	font-family: var(--bamleon-font-mono);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sb-ink);
}
.bamleon-cs__sysboard-input {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	min-width: 200px;
	background: var(--sb-surface);
	border: 1px solid var(--sb-edge);
	border-radius: 10px;
	color: var(--sb-muted);
	font-family: var(--bamleon-font-body);
	font-size: var(--bamleon-text-sm);
}
.bamleon-cs__sysboard-input svg {
	width: 14px;
	height: 14px;
	flex: 0 0 auto;
}
.bamleon-cs__sysboard-prodcard {
	display: grid;
	grid-template-columns: 56px 1fr auto;
	gap: 12px;
	align-items: center;
	padding: 8px;
	background: var(--sb-surface);
	border: 1px solid var(--sb-edge);
	border-radius: var(--bamleon-radius-lg);
	min-width: 240px;
}
.bamleon-cs__sysboard-prodcard-img {
	width: 56px;
	height: 56px;
	border-radius: var(--bamleon-radius-md);
	background:
		linear-gradient(135deg, var(--sb-green) 0%, var(--sb-green) 50%, var(--sb-gold) 50%, var(--sb-gold) 100%);
}
.bamleon-cs__sysboard-prodcard-name {
	font-family: var(--bamleon-font-display);
	font-size: var(--bamleon-text-sm);
	font-weight: 500;
	color: var(--sb-ink);
}
.bamleon-cs__sysboard-prodcard-price {
	font-family: var(--bamleon-font-mono);
	font-size: 12px;
	font-weight: 700;
	color: var(--sb-green);
	letter-spacing: var(--bamleon-tracking-wide);
}

/* ── 08 VOICE ─────────────────────────────────────────────────────────── */
.bamleon-cs__sysboard-panel--voice {
	background: var(--sb-ink);
	color: var(--sb-paper);
	justify-content: center;
}
.bamleon-cs__sysboard-panel--voice .bamleon-cs__sysboard-tag { color: rgba(245, 241, 232, 0.5); }
.bamleon-cs__sysboard-panel--voice .bamleon-cs__sysboard-tag em { color: var(--sb-gold); }
.bamleon-cs__sysboard-voice {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.bamleon-cs__sysboard-voice li {
	font-family: var(--bamleon-font-display);
	font-size: clamp(15px, 1.4vw, 18px);
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: var(--bamleon-tracking-normal);
	color: var(--sb-paper);
	display: flex;
	align-items: baseline;
	gap: 10px;
}
.bamleon-cs__sysboard-voice li em {
	font-style: normal;
	font-family: var(--bamleon-font-mono);
	font-size: 12px;
	font-weight: 700;
	color: var(--sb-gold);
	flex-shrink: 0;
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
	.bamleon-cs__sysboard {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
	.bamleon-cs__sysboard-panel--logo       { grid-column: span 3; grid-row: span 2; }
	.bamleon-cs__sysboard-panel--colors     { grid-column: span 3; grid-row: span 2; }
	.bamleon-cs__sysboard-panel--motion     { grid-column: span 3; grid-row: span 2; }
	.bamleon-cs__sysboard-panel--type       { grid-column: span 6; grid-row: span 2; }
	.bamleon-cs__sysboard-panel--spacing    { grid-column: span 3; grid-row: span 1; }
	.bamleon-cs__sysboard-panel--grid       { grid-column: span 6; grid-row: span 1; }
	.bamleon-cs__sysboard-panel--components { grid-column: span 6; grid-row: span 1; }
	.bamleon-cs__sysboard-panel--voice      { grid-column: span 3; grid-row: span 1; }
	.bamleon-cs__sysboard-typerow {
		grid-template-columns: 1fr 160px;
	}
}
@media (max-width: 720px) {
	.bamleon-cs__sysboard {
		grid-template-columns: 1fr;
		padding: 12px;
	}
	.bamleon-cs__sysboard-panel,
	.bamleon-cs__sysboard-panel--logo,
	.bamleon-cs__sysboard-panel--colors,
	.bamleon-cs__sysboard-panel--motion,
	.bamleon-cs__sysboard-panel--type,
	.bamleon-cs__sysboard-panel--spacing,
	.bamleon-cs__sysboard-panel--grid,
	.bamleon-cs__sysboard-panel--components,
	.bamleon-cs__sysboard-panel--voice {
		grid-column: span 1;
		grid-row: auto;
	}
	.bamleon-cs__sysboard-swatches {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.bamleon-cs__sysboard-typerow {
		grid-template-columns: 1fr;
		gap: 6px;
	}
	.bamleon-cs__sysboard-typerow em { font-size: 9px; }
	.bamleon-cs__sysboard-spacing {
		grid-template-columns: repeat(4, 1fr);
	}
	.bamleon-cs__sysboard-grid > span { min-height: 40px; }
}


/* ── Comcast — tenures grid (was inline <style> in heredoc, moved here) ─ */
.bamleon-cs__tenures {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	margin: 32px 0 24px;
}
.bamleon-cs__tenure {
	padding: 32px;
	background:
		radial-gradient(circle at 100% 0%, rgba(255,255,255,0.85), transparent 60%),
		linear-gradient(180deg, #ffffff 0%, #f4f4f6 100%);
	border: 1px solid rgba(0,0,0,0.06);
	border-radius: 22px;
}
.bamleon-cs__tenure-head {
	display: flex;
	align-items: baseline;
	gap: 14px;
	padding-bottom: 14px;
	margin-bottom: 20px;
	border-bottom: 1px solid rgba(0,0,0,0.06);
}
.bamleon-cs__tenure-year {
	font-family: var(--bamleon-font-display);
	font-size: 38px;
	font-weight: 700;
	letter-spacing: -0.04em;
	color: var(--bamleon-text);
	line-height: 1;
}
.bamleon-cs__tenure-year em {
	font-style: normal;
	color: var(--cat, var(--bamleon-text-3));
	font-weight: 500;
}
.bamleon-cs__tenure-role {
	font-family: var(--bamleon-font-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cat, var(--bamleon-text-3));
}
.bamleon-cs__tenure-rows {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.bamleon-cs__tenure-row {
	display: grid;
	grid-template-columns: 110px 1fr;
	gap: 14px;
	align-items: baseline;
}
.bamleon-cs__tenure-row-label {
	font-family: var(--bamleon-font-mono);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bamleon-text-3);
	padding-top: 2px;
}
.bamleon-cs__tenure-row-value {
	font-family: var(--bamleon-font-display);
	font-size: var(--bamleon-text-sm);
	line-height: 1.5;
	color: var(--bamleon-text-2);
}
.bamleon-cs__tenure-row-value strong {
	color: var(--bamleon-text);
	font-weight: 600;
}
@media (max-width: 900px) {
	.bamleon-cs__tenures { grid-template-columns: 1fr; }
}
/* Tenure card CTA (footer bar) — reusable across case studies */
.bamleon-cs__tenure-foot {
	margin-top: 24px;
	padding-top: 16px;
	border-top: 1px solid rgba(0,0,0,0.06);
}
.bamleon-cs__tenure-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-family: var(--bamleon-font-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cat, var(--bamleon-text-3));
	text-decoration: none;
	transition: color 0.25s var(--bamleon-ease-out);
}
.bamleon-cs__tenure-cta:hover { color: var(--cat, var(--bamleon-text)); }
.bamleon-cs__tenure-cta-arrow {
	font-size: 16px;
	font-weight: 400;
	transition: transform 0.3s var(--bamleon-ease-out);
}
.bamleon-cs__tenure-cta:hover .bamleon-cs__tenure-cta-arrow { transform: translate(3px, -3px); }
/* Charter: hide the era tab nav — engagement cards are the trigger */
.bamleon-cs__article--charter .bamleon-cs__tabs > .bamleon-cs__tab-strip { display: none !important; }

/* ── Wire / Production email toggle — 4-up, both states reuse plate--scroll ── */
.bamleon-cs__email-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	margin: 8px 0 0;
}
@media (max-width: 1100px) { .bamleon-cs__email-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .bamleon-cs__email-grid { grid-template-columns: 1fr; } }
.bamleon-cs__email-pair { display: flex; flex-direction: column; gap: 10px; }
.bamleon-cs__email-toggle {
	display: inline-flex;
	align-self: center;
	gap: 2px;
	padding: 3px;
	background: #f0f0f2;
	border-radius: var(--bamleon-radius-pill, 999px);
}
.bamleon-cs__email-toggle button {
	border: 0;
	background: transparent;
	cursor: pointer;
	font-family: var(--bamleon-cs-mono, "JetBrains Mono", monospace);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bamleon-text-3, #888);
	padding: 6px 12px;
	border-radius: var(--bamleon-radius-pill, 999px);
	transition: background 0.2s ease, color 0.2s ease;
}
.bamleon-cs__email-toggle button.is-active { background: #1a1a1a; color: #fff; }
/* Default shows the wire; toggled shows production.
   Specificity + !important must beat .plate--scroll's `img{display:block!important}`. */
.bamleon-cs__email-pair .bamleon-cs__plate--scroll .bamleon-cs__plate-window > img.bamleon-cs__em-prod { display: none !important; }
.bamleon-cs__email-pair.is-prod .bamleon-cs__plate--scroll .bamleon-cs__plate-window > img.bamleon-cs__em-wire { display: none !important; }
.bamleon-cs__email-pair.is-prod .bamleon-cs__plate--scroll .bamleon-cs__plate-window > img.bamleon-cs__em-prod { display: block !important; }

/* ═══════════════════════════════════════════════════════════════════════
 * THERUM OS · mu-plugin stack (modulestack)
 * Section 09. Four groups (A/B/C/D) each with a header + grid of plugin
 * pill chips. Each pill: bold name on top, small description below.
 * ═══════════════════════════════════════════════════════════════════════ */
.bamleon-cs__modulestack {
	display: flex;
	flex-direction: column;
	gap: 32px;
	margin: 32px 0 48px;
	width: 100%;
}
.bamleon-cs__modulestack-head {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 8px;
}
.bamleon-cs__modulestack-title {
	font-family: var(--bamleon-font-display);
	font-size: clamp(22px, 2.2vw, 32px);
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--bamleon-text);
	margin: 0;
}
.bamleon-cs__modulestack-meta {
	font-family: var(--bamleon-font-mono);
	font-size: var(--bamleon-text-xs);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--bamleon-text-3);
}
/* 2×2 group layout — Shell · Platform / Data · Frontend. Each quadrant
   is ONE card containing the group head + its plugins as compact rows
   (no per-pill borders/cards). Collapses to single column under 900px. */
.bamleon-cs__modulestack-groups {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}
@media (max-width: 900px) {
	.bamleon-cs__modulestack-groups { grid-template-columns: 1fr; }
}
/* Each group = ONE card. Quadrant tag + group name sit at the top inside
   the card; rows below name the modules without each row being a card. */
.bamleon-cs__modulestack-group {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	padding: 24px 28px 20px;
	background: var(--bamleon-surface);
	border: 1px solid var(--bamleon-border);
	border-top: 3px solid var(--cat, var(--bamleon-accent));
	border-radius: 14px;
}
.bamleon-cs__modulestack-groups .bamleon-cs__modulestack-grouphead {
	margin-bottom: 14px;
}
/* Plugins inside the group card render as flat 1-col rows, NOT
   individual cards. Removes the per-pill border, background, padding,
   and radius — just the name + description on a thin divider. */
.bamleon-cs__modulestack-groups .bamleon-cs__modulestack-grid {
	display: flex !important;
	flex-direction: column;
	gap: 0;
}
.bamleon-cs__modulestack-groups .bamleon-cs__modulepill {
	display: grid !important;
	grid-template-columns: minmax(140px, max-content) 1fr;
	column-gap: 18px;
	align-items: baseline;
	padding: 10px 0;
	background: transparent;
	border: 0;
	border-top: 1px solid var(--bamleon-border);
	border-radius: 0;
	transform: none !important;
	transition: background 160ms ease;
}
.bamleon-cs__modulestack-groups .bamleon-cs__modulepill:first-child { border-top: 0; }
.bamleon-cs__modulestack-groups .bamleon-cs__modulepill:hover {
	background: rgba(255, 255, 255, 0.02);
	transform: none !important;
}
.bamleon-cs__modulestack-groups .bamleon-cs__modulepill-name {
	font-family: var(--bamleon-font-mono);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: var(--bamleon-tracking-normal);
	color: var(--bamleon-text);
	white-space: nowrap;
}
.bamleon-cs__modulestack-groups .bamleon-cs__modulepill-desc {
	font-family: var(--bamleon-font-body);
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--bamleon-text-2);
}
@media (max-width: 560px) {
	.bamleon-cs__modulestack-groups .bamleon-cs__modulepill {
		grid-template-columns: 1fr;
		gap: 2px;
		padding: 12px 0;
	}
}
.bamleon-cs__modulestack-grouphead {
	display: flex;
	align-items: baseline;
	gap: 14px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--bamleon-border);
}
.bamleon-cs__modulestack-grouptag {
	font-family: var(--bamleon-font-mono);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: var(--bamleon-tracking-wide);
	color: var(--cat, var(--bamleon-accent));
	flex-shrink: 0;
}
.bamleon-cs__modulestack-groupname {
	font-family: var(--bamleon-font-display);
	font-size: var(--bamleon-text-base);
	font-weight: 600;
	color: var(--bamleon-text);
}
.bamleon-cs__modulestack-groupname em {
	font-style: normal;
	font-weight: 400;
	color: var(--bamleon-text-3);
}
.bamleon-cs__modulestack-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 10px;
}
.bamleon-cs__modulepill {
	display: flex !important;
	flex-direction: column !important;
	gap: 4px;
	padding: 14px 16px;
	background: var(--bamleon-surface);
	border: 1px solid var(--bamleon-border);
	border-left: 3px solid var(--cat, var(--bamleon-accent));
	border-radius: var(--bamleon-radius-md);
	transition: background 200ms ease, transform 200ms ease;
}
.bamleon-cs__modulepill:hover {
	background: var(--bamleon-surface-2);
	transform: translateY(-1px);
}
.bamleon-cs__modulepill-name {
	font-family: var(--bamleon-font-mono);
	font-size: var(--bamleon-text-sm);
	font-weight: 600;
	letter-spacing: var(--bamleon-tracking-normal);
	color: var(--bamleon-text);
}
.bamleon-cs__modulepill-desc {
	font-family: var(--bamleon-font-body);
	font-size: 12px;
	line-height: 1.45;
	color: var(--bamleon-text-2);
}

/* ─── Press list visibility hardening — ensure grid children paint ──── */
.bamleon-cs__press-list,
.bamleon-cs__press-list .bamleon-cs__press-item,
.bamleon-cs__press-outlet,
.bamleon-cs__press-status,
.bamleon-cs__press-desc {
	visibility: visible !important;
	opacity: 1 !important;
}
.bamleon-cs__press-list { display: block !important; }
.bamleon-cs__press-list .bamleon-cs__press-item {
	display: grid !important;
	min-height: 60px;
}
.bamleon-cs__press-outlet,
.bamleon-cs__press-status,
.bamleon-cs__press-desc {
	display: block !important;
}

/* ─── Demo iframe — ensure visible + full height ───────────────────── */
.bamleon-cs__demo-frame {
	display: block !important;
	width: 100vw !important;
	max-width: none !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: 0 !important;
	min-height: 600px;
}
.bamleon-cs__demo-iframe {
	display: block !important;
	width: 100% !important;
	min-height: 600px;
	border: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
 * THERUM OS · The 18 Modules — bento breakdown (4 groups: Shell/Platform/
 * Infrastructure/Frontend). Group cards span 2-col rows as headers; module
 * cards sit on the standard 4-col grid. Stat-dark card spans full width
 * at the bottom as the proof-of-work footer.
 * ═══════════════════════════════════════════════════════════════════════ */
.bamleon-cs__modules-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	margin: 32px 0 48px;
	width: 100%;
}
.bamleon-cs__module-card {
	padding: 18px 20px;
	background: var(--bamleon-surface);
	border: 1px solid var(--bamleon-border);
	border-left: 3px solid var(--cat, var(--bamleon-accent));
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	transition: background 200ms ease, transform 200ms ease;
}
.bamleon-cs__module-card:hover {
	background: var(--bamleon-surface-2);
	transform: translateY(-1px);
}
.bamleon-cs__module-card--group {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: 56px 1fr auto;
	gap: 16px;
	align-items: baseline;
	padding: 18px 24px;
	background: linear-gradient(180deg, transparent, var(--cat, var(--bamleon-accent)) 200%) , var(--bamleon-surface);
	border-left: 3px solid var(--cat, var(--bamleon-accent));
	border-top: none;
	margin-top: 16px;
}
.bamleon-cs__module-card--group:first-child { margin-top: 0; }
.bamleon-cs__module-grouptag {
	font-family: var(--bamleon-font-mono);
	font-size: var(--bamleon-text-xl);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--cat, var(--bamleon-accent));
	line-height: 1;
}
.bamleon-cs__module-groupname {
	font-family: var(--bamleon-font-display);
	font-size: 22px;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--bamleon-text);
}
.bamleon-cs__module-groupmeta {
	font-family: var(--bamleon-font-mono);
	font-size: var(--bamleon-text-xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bamleon-text-3);
}
.bamleon-cs__module-name {
	font-family: var(--bamleon-font-mono);
	font-size: var(--bamleon-text-sm);
	font-weight: 600;
	letter-spacing: var(--bamleon-tracking-normal);
	color: var(--bamleon-text);
}
.bamleon-cs__module-desc {
	font-family: var(--bamleon-font-body);
	font-size: 12px;
	line-height: 1.5;
	color: var(--bamleon-text-2);
	margin: 0;
}
.bamleon-cs__module-card--stat-dark {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: 24px;
	align-items: center;
	padding: 28px 32px;
	background: var(--bamleon-text);
	color: var(--bamleon-bg);
	border: 0;
	border-radius: var(--bamleon-radius-lg);
	margin-top: 16px;
}
.bamleon-cs__module-card--stat-dark .bamleon-cs__stat-num {
	font-family: var(--bamleon-font-display);
	font-size: var(--bamleon-text-3xl);
	font-weight: 600;
	letter-spacing: -0.04em;
	line-height: 1;
	color: inherit;
}
.bamleon-cs__module-card--stat-dark .bamleon-cs__stat-label {
	font-family: var(--bamleon-font-body);
	font-size: var(--bamleon-text-sm);
	line-height: 1.5;
	color: rgba(255,255,255,0.78);
}

@media (max-width: 900px) {
	.bamleon-cs__modules-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
	.bamleon-cs__modules-grid { grid-template-columns: 1fr; }
	.bamleon-cs__module-card--stat-dark { grid-template-columns: 1fr; gap: 12px; }
}


/* ════════════════════════════════════════════════════════════════════
 * Therum OS · modulestack — formerly inline <style> in case study body
 * (May-20 modulestack inline-style move).  Moved here so the Bricks tree
 * no longer carries a code element just to hold CSS.
 * ════════════════════════════════════════════════════════════════════ */
/* Container is now a transparent layout shell — the 4 quadrant cards
   carry their own backgrounds. No outer rounded card wrapping the whole
   thing; the heading reads as a section sub-head, not a panel title. */
.bamleon-cs__modulestack {
          margin: 32px 0 12px;
          padding: 0;
          background: none;
          border: 0;
          border-radius: 0;
          box-shadow: none;
        }
        .bamleon-cs__modulestack-head {
          display: flex;
          justify-content: space-between;
          align-items: baseline;
          margin: 0 0 20px;
          padding: 0 0 14px;
          border-bottom: 1px solid var(--bamleon-border);
        }
        .bamleon-cs__modulestack-title {
          font-family: var(--bamleon-font-mono);
          font-size: var(--bamleon-text-xs);
          font-weight: 700;
          letter-spacing: 0.12em;
          text-transform: uppercase;
          color: var(--bamleon-text);
          margin: 0;
        }
        .bamleon-cs__modulestack-meta {
          font-family: var(--bamleon-font-mono);
          font-size: 10px;
          letter-spacing: 0.08em;
          text-transform: uppercase;
          color: var(--bamleon-text-3);
        }
        .bamleon-cs__modulestack-groups {
          display: flex;
          flex-direction: column;
          gap: 22px;
        }
        .bamleon-cs__modulestack-group {
          display: flex;
          flex-direction: column;
          gap: 10px;
        }
        .bamleon-cs__modulestack-grouphead {
          display: flex;
          align-items: baseline;
          gap: 10px;
          padding: 0 2px 4px;
        }
        .bamleon-cs__modulestack-grouptag {
          font-family: var(--bamleon-font-mono);
          font-size: 9px;
          font-weight: 700;
          letter-spacing: 0.14em;
          text-transform: uppercase;
          color: var(--cat, var(--bamleon-text-3));
          background: color-mix(in srgb, var(--cat, #000) 12%, transparent);
          padding: 3px 8px;
          border-radius: var(--bamleon-radius-pill);
        }
        .bamleon-cs__modulestack-groupname {
          font-family: var(--bamleon-font-display);
          font-size: var(--bamleon-text-sm);
          font-weight: 600;
          color: var(--bamleon-text);
          letter-spacing: var(--bamleon-tracking-normal);
        }
        .bamleon-cs__modulestack-groupname em {
          font-style: normal;
          color: var(--cat, var(--bamleon-text-3));
          font-weight: 500;
        }
        .bamleon-cs__modulestack-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 8px;
        }
        @media (max-width: 920px) {
          .bamleon-cs__modulestack-grid {
            grid-template-columns: repeat(2, 1fr);
          }
        }
        @media (max-width: 520px) {
          .bamleon-cs__modulestack-grid {
            grid-template-columns: 1fr;
          }
        }
        .bamleon-cs__modulepill {
          position: relative;
          display: flex;
          flex-direction: column;
          gap: 3px;
          padding: 10px 14px 10px 16px;
          background: rgba(255,255,255,0.7);
          border: 1px solid rgba(0,0,0,0.06);
          border-left: 2px solid color-mix(in srgb, var(--cat, #000) 55%, transparent);
          border-radius: 10px;
          transition: background 160ms ease, border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
        }
        .bamleon-cs__modulepill:hover {
          background: #ffffff;
          border-color: rgba(0,0,0,0.12);
          border-left-color: var(--cat, rgba(0,0,0,0.4));
          transform: translateY(-1px);
          box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--cat, #000) 22%, transparent);
        }
        .bamleon-cs__modulepill-name {
          display: inline-flex;
          align-items: center;
          gap: 7px;
          font-family: var(--bamleon-font-mono);
          font-size: var(--bamleon-text-xs);
          font-weight: 700;
          letter-spacing: 0.02em;
          color: var(--bamleon-text);
          line-height: var(--bamleon-leading-snug);
        }
        .bamleon-cs__modulepill-name::before {
          content: "";
          width: 6px;
          height: 6px;
          border-radius: 2px;
          background: var(--cat, var(--bamleon-text-3));
          transform: rotate(45deg);
          flex-shrink: 0;
        }
        .bamleon-cs__modulepill-desc {
          font-family: var(--bamleon-font-display);
          font-size: var(--bamleon-text-xs);
          font-weight: 400;
          color: var(--bamleon-text-2);
          line-height: 1.35;
        }
/* ═══════════════════════════════════════════════════════════════════════
 * Therum OS · Changelog timeline (under "One Focused Week")
 * Horizontal dark track, dots, version above + label below — mirrors the
 * about-page career map visual. Full-bleed to article gutter edges.
 * ═══════════════════════════════════════════════════════════════════════ */
.bamleon-cs__changelog-track {
	position: relative;
	margin: 56px 0 32px;
	padding: 96px var(--bamleon-cs-gutter, 40px) 56px;
	background: #ffffff;
	color: #0a0a0a;
	width: 100vw;
	max-width: 100vw;
	margin-left:  calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	border-top: 1px solid rgba(0,0,0,0.08);
	border-bottom: 1px solid rgba(0,0,0,0.08);
	overflow: visible;
}
.bamleon-cs__changelog-line {
	position: absolute;
	left: var(--bamleon-cs-gutter, 40px);
	right: var(--bamleon-cs-gutter, 40px);
	top: 50%;
	height: 1px;
	background: rgba(0,0,0,0.14);
	pointer-events: none;
}
.bamleon-cs__changelog-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-auto-columns: 1fr;
	grid-auto-flow: column;
	gap: 0;
	position: relative;
	z-index: 1;
	width: 100%;
}
.bamleon-cs__changelog-stop {
	display: grid;
	grid-template-rows: 1fr auto 1fr;
	row-gap: 10px;
	align-items: center;
	justify-items: center;
	text-align: center;
	padding: 0 8px;
}
.bamleon-cs__changelog-stop .bamleon-cs__changelog-dot,
.bamleon-cs__changelog-stop .bamleon-cs__changelog-icon {
	grid-row: 2;
}
.bamleon-cs__changelog-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--bamleon-bg);
	box-shadow: 0 0 0 4px #ffffff;
	transition: transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1),
	            box-shadow 220ms ease-out;
}
.bamleon-cs__changelog-stop.is-current .bamleon-cs__changelog-dot {
	background: var(--bamleon-accent, #5B8DBE);
	box-shadow: 0 0 0 4px #ffffff, 0 0 0 7px rgba(91,141,190,0.25);
}
/* Dot grows on stop hover/focus — same motion vocabulary as the home-page
   cards (cubic-bezier ease-out, ~220ms). Cursor-pointer signals the dot
   is interactive; the tooltip handles the actual content reveal. */
.bamleon-cs__changelog-stop { cursor: pointer; }
.bamleon-cs__changelog-stop:hover .bamleon-cs__changelog-dot,
.bamleon-cs__changelog-stop:focus-visible .bamleon-cs__changelog-dot {
	transform: scale(2);
	box-shadow: 0 0 0 4px #ffffff, 0 0 0 8px rgba(10,10,10,0.10);
}
.bamleon-cs__changelog-stop.is-current:hover .bamleon-cs__changelog-dot,
.bamleon-cs__changelog-stop.is-current:focus-visible .bamleon-cs__changelog-dot {
	box-shadow: 0 0 0 4px #ffffff, 0 0 0 9px rgba(91,141,190,0.30);
}

/* ── Hover tooltip — home-page-card aesthetic ──────────────────────────
   Hidden at rest. Reveals above the dot on hover/focus. Stop gets
   position:relative so the tooltip anchors to the stop's center.
   Pointer-events stay off so the tooltip can't trap the cursor.

   Why the `!important`s + extra-specific selectors: the global section
   visibility guard `.bamleon-cs__section * { opacity:1 !important; visibility:
   visible !important }` would otherwise force EVERY tooltip visible at
   once. We pin the default state at the deeper selector + match its
   !important to win the cascade. */
.bamleon-cs__changelog-stop { position: relative; }
.bamleon-cs__section .bamleon-cs__changelog-stop .bamleon-cs__changelog-tip,
.bamleon-cs__changelog-stop .bamleon-cs__changelog-tip {
	position: absolute;
	bottom: calc(100% + 18px);
	left: 50%;
	transform: translate(-50%, 6px);
	width: 280px;
	max-width: 280px;
	padding: 18px 20px 20px;
	background: var(--bamleon-bg);
	color: var(--bamleon-text);
	border: 1px solid var(--bamleon-border);
	border-radius: 14px;
	box-shadow:
		0 1px 2px rgba(0, 0, 0, 0.20),
		0 12px 28px -8px rgba(0, 0, 0, 0.35),
		0 30px 60px -16px rgba(0, 0, 0, 0.45);
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none;
	z-index: 50;
	display: flex;
	flex-direction: column;
	gap: 8px;
	text-align: left;
	transition: opacity 220ms ease-out, transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s linear 220ms;
}
/* Tooltip arrow — small notch pointing at the dot below */
.bamleon-cs__changelog-tip::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 7px solid transparent;
	border-top-color: #0a0a0a;
	pointer-events: none;
}
/* Hover/focus reveal — must also use !important to override the hidden
   !important above (which exists because the global section-visibility
   guard would otherwise force tooltips visible). */
.bamleon-cs__section .bamleon-cs__changelog-stop:hover .bamleon-cs__changelog-tip,
.bamleon-cs__section .bamleon-cs__changelog-stop:focus-visible .bamleon-cs__changelog-tip,
.bamleon-cs__changelog-stop:hover .bamleon-cs__changelog-tip,
.bamleon-cs__changelog-stop:focus-visible .bamleon-cs__changelog-tip {
	opacity: 1 !important;
	visibility: visible !important;
	transform: translate(-50%, 0);
	transition-delay: 0s;
}
.bamleon-cs__changelog-tip-kicker {
	font-family: var(--bamleon-font-mono);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(245, 245, 245, 0.55);
	line-height: var(--bamleon-leading-snug);
}
.bamleon-cs__changelog-tip-title {
	font-family: var(--bamleon-font-display);
	font-size: var(--bamleon-text-base);
	font-weight: 600;
	letter-spacing: -0.015em;
	color: #ffffff;
	line-height: 1.25;
}
.bamleon-cs__changelog-tip p {
	font-family: var(--bamleon-font-body);
	font-size: 12.5px;
	line-height: 1.55;
	color: rgba(245, 245, 245, 0.82);
	margin: 0 !important;
}
.bamleon-cs__changelog-tip code {
	font-family: var(--bamleon-font-mono);
	font-size: 11.5px;
	background: rgba(245, 245, 245, 0.08);
	color: var(--bamleon-text);
	padding: 1px 5px;
	border-radius: var(--bamleon-radius-sm);
}
/* Edge anchoring — first stop, push tooltip rightward so it doesn't clip
   off the left edge of the page. Last stop, anchor it leftward. */
.bamleon-cs__changelog-list .bamleon-cs__changelog-stop:first-child .bamleon-cs__changelog-tip {
	left: 0;
	transform: translate(0, 6px);
}
.bamleon-cs__changelog-list .bamleon-cs__changelog-stop:first-child:hover .bamleon-cs__changelog-tip,
.bamleon-cs__changelog-list .bamleon-cs__changelog-stop:first-child:focus-visible .bamleon-cs__changelog-tip {
	transform: translate(0, 0);
}
.bamleon-cs__changelog-list .bamleon-cs__changelog-stop:first-child .bamleon-cs__changelog-tip::after {
	left: 14px;
	transform: none;
}
.bamleon-cs__changelog-list .bamleon-cs__changelog-stop:last-child .bamleon-cs__changelog-tip {
	left: auto;
	right: 0;
	transform: translate(0, 6px);
}
.bamleon-cs__changelog-list .bamleon-cs__changelog-stop:last-child:hover .bamleon-cs__changelog-tip,
.bamleon-cs__changelog-list .bamleon-cs__changelog-stop:last-child:focus-visible .bamleon-cs__changelog-tip {
	transform: translate(0, 0);
}
.bamleon-cs__changelog-list .bamleon-cs__changelog-stop:last-child .bamleon-cs__changelog-tip::after {
	left: auto;
	right: 14px;
	transform: none;
}
/* Mobile (single-column timeline) — tooltips render inline below the stop
   instead of floating, since the timeline becomes a vertical list. */
@media (max-width: 900px) {
	.bamleon-cs__changelog-tip {
		position: static;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: none;
		width: 100%;
		max-width: none;
		margin-top: 12px;
		grid-column: 1 / -1;
		grid-row: auto;
	}
	.bamleon-cs__changelog-tip::after { display: none; }
	.bamleon-cs__changelog-stop { cursor: default; }
	.bamleon-cs__changelog-stop:hover .bamleon-cs__changelog-dot,
	.bamleon-cs__changelog-stop:focus-visible .bamleon-cs__changelog-dot {
		transform: none;
	}
}
.bamleon-cs__changelog-icon {
	font-family: ui-sans-serif, system-ui;
	font-size: 18px;
	color: #0a0a0a;
	transform: rotate(-12deg);
	line-height: 1;
}
.bamleon-cs__changelog-version {
	grid-row: 1;
	font-family: var(--bamleon-font-mono);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: var(--bamleon-tracking-normal);
	color: #0a0a0a;
	align-self: end;
	margin-bottom: 2px;
}
.bamleon-cs__changelog-label {
	grid-row: 3;
	font-family: var(--bamleon-font-mono);
	font-size: 9px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(10,10,10,0.62);
	align-self: start;
	line-height: 1.4;
	max-width: 18ch;
}

@media (max-width: 900px) {
	.bamleon-cs__changelog-list { grid-auto-flow: row; grid-auto-rows: auto; grid-auto-columns: unset; gap: 20px; }
	.bamleon-cs__changelog-line { display: none; }
	.bamleon-cs__changelog-stop { grid-template-rows: auto; grid-template-columns: 80px 12px 1fr; row-gap: 0; column-gap: 12px; padding: 0; text-align: left; }
	.bamleon-cs__changelog-version { grid-row: 1; grid-column: 1; align-self: center; margin: 0; }
	.bamleon-cs__changelog-dot, .bamleon-cs__changelog-icon { grid-row: 1; grid-column: 2; }
	.bamleon-cs__changelog-label { grid-row: 1; grid-column: 3; align-self: center; max-width: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
 * Force the by-the-numbers metrics row to fill the article width.
 * Previously the auto-fit grid + minmax was leaving big margins at small
 * column counts. Width 100% + minmax(0,1fr) makes the row stretch edge to
 * edge inside the article gutter.
 * ═══════════════════════════════════════════════════════════════════════ */
.bamleon-cs__metrics {
	width: 100% !important;
	max-width: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════
 * Therum OS · Before/After comparison slider — stock wp-admin vs Therum OS
 * Two background-image layers stacked, clip-path on the "after" reveals it
 * based on --pos (0–100). Range input on top drives --pos via JS.
 * ═══════════════════════════════════════════════════════════════════════ */
.bamleon-cs__compare {
	--pos: 50%;
	margin: 40px 0 24px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;       /* respects article gutter */
	max-width: 100%;
}
.bamleon-cs__compare-frame {
	position: relative;
	width: 100%;
	/* 1920×900 — tightened from 16:9 because the Therum dashboard iframe
	   content fills ~900px (cards + activity + site-health row), and the
	   WP-admin SVG's bottom ~180px is just footer copyright. Both sides
	   render with no dead vertical space inside the slider. */
	aspect-ratio: 1920 / 900;
	overflow: hidden;
	background: var(--bamleon-paper);
	border: 1px solid var(--bamleon-border);
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba(20,20,30,0.06), 0 30px 60px -24px rgba(20,20,30,0.18);
	isolation: isolate;
}
.bamleon-cs__compare-foot {
	padding: 0;
}
.bamleon-cs__compare-img {
	position: absolute;
	inset: 0;
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	background-color: var(--bamleon-paper);
}
.bamleon-cs__compare-img--before { z-index: 1; }
.bamleon-cs__compare-img--after {
	z-index: 2;
	clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}
/* When the "after" pane is an iframe (live demo, 1:1 with the actual
   experience), render it at native 1920×1080 inside its 16:9 wrapper,
   then scale-to-fit via a container query unit. The clip-path on the
   parent still controls the reveal, so dragging the slider exposes
   the live iframe progressively. Pointer-events off so the slider
   handle/input stays draggable across the iframe surface. */
.bamleon-cs__compare-img--iframe {
	container-type: inline-size;
	overflow: hidden;
	/* Hard clip — same defense as the hero/wf-live wrappers. The compare
	   slider sits inside a rounded card; sub-pixel iframe scale leaks dark
	   content past the corner without an explicit clip-path. */
	clip-path: inset(0 round var(--bamleon-radius-lg, 14px));
	isolation: isolate;
	background: #ffffff;
}
.bamleon-cs__compare-iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 1920px;
	height: 900px;
	border: 0;
	background: #ffffff;
	transform-origin: 0 0;
	/* scale set by JS (scaleFixedIframe) — same invalid-CSS reason as .bamleon-cs__hero-iframe */
	pointer-events: none;
}
.bamleon-cs__compare-label {
	position: absolute;
	bottom: 16px;
	padding: 10px 14px;
	background: rgba(15, 15, 18, 0.86);
	color: var(--bamleon-text);
	border-radius: var(--bamleon-radius-md);
	font-family: var(--bamleon-font-mono);
	font-size: var(--bamleon-text-xs);
	letter-spacing: 0.06em;
	display: flex;
	flex-direction: column;
	gap: 4px;
	max-width: 320px;
	z-index: 4;
	pointer-events: none;
	backdrop-filter: blur(8px);
}
.bamleon-cs__compare-label strong {
	font-family: var(--bamleon-font-display);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: var(--bamleon-tracking-normal);
	text-transform: none;
}
.bamleon-cs__compare-label em {
	font-style: normal;
	color: rgba(250,250,250,0.7);
	font-size: 10px;
	letter-spacing: var(--bamleon-tracking-wide);
}
.bamleon-cs__compare-label--before { left: 16px; }
.bamleon-cs__compare-label--after  { right: 16px; }
.bamleon-cs__compare-handle {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--pos);
	width: 2px;
	background: rgba(255,255,255,0.85);
	box-shadow: 0 0 0 1px rgba(15,15,18,0.4), 0 2px 14px rgba(15,15,18,0.35);
	transform: translateX(-50%);
	z-index: 3;
	pointer-events: none;
}
.bamleon-cs__compare-handle::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 44px;
	height: 44px;
	transform: translate(-50%, -50%);
	background: #fafafa;
	border-radius: 50%;
	box-shadow: 0 0 0 1px rgba(15,15,18,0.4), 0 4px 18px rgba(15,15,18,0.45);
}
.bamleon-cs__compare-handle-arrows {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-family: var(--bamleon-font-mono);
	font-size: 12px;
	font-weight: 600;
	color: #0a0a0a;
	letter-spacing: var(--bamleon-tracking-wide);
	z-index: 1;
}
.bamleon-cs__compare-input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	opacity: 0;
	cursor: ew-resize;
	z-index: 5;
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
}
.bamleon-cs__compare-input::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 60px;
	height: 100%;
	background: transparent;
	cursor: ew-resize;
}
.bamleon-cs__compare-input::-moz-range-thumb {
	width: 60px;
	height: 100%;
	background: transparent;
	border: 0;
	cursor: ew-resize;
}
.bamleon-cs__compare-foot {
	font-family: var(--bamleon-font-mono);
	font-size: var(--bamleon-text-xs);
	letter-spacing: 0.06em;
	color: var(--bamleon-text-3);
	text-align: center;
}
.bamleon-cs__compare-foot em { font-style: italic; }

@media (max-width: 700px) {
	.bamleon-cs__compare-label { font-size: 9px; padding: 8px 10px; max-width: 200px; }
	.bamleon-cs__compare-label strong { font-size: var(--bamleon-text-xs); }
	.bamleon-cs__compare-handle::before { width: 36px; height: 36px; }
}

.bamleon-cs__specs-grid {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	padding: 0 clamp(2rem, 5vw, 6rem);
	box-sizing: border-box;
	gap: clamp(1rem, 2vw, 2rem);
}
.bamleon-cs__specs-grid > .bamleon-cs__plate {
	aspect-ratio: auto;
	overflow: visible;
}
.bamleon-cs__specs-grid > .bamleon-cs__plate img {
	height: auto;
	object-fit: contain;
}
@media (max-width: 700px) {
	.bamleon-cs__specs-grid { grid-template-columns: 1fr; }
}

.bamleon-cs__media-grid--16x9 .bamleon-cs__plate {
	aspect-ratio: 16 / 9;
	overflow: hidden;
}
.bamleon-cs__media-grid--16x9 .bamleon-cs__plate img,
.bamleon-cs__media-grid--16x9 .bamleon-cs__plate .brxe-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.bamleon-cs__media-grid--16x9 .bamleon-cs__plate .brxe-image {
	width: 100%;
	height: 100%;
}

/* ═══════════════════════════════════════════════════════════════════════
 * Endurance email phone — one device holds the whole send set. Dynamic
 * island carries prev/next; hover the screen to scroll the full email.
 * ═══════════════════════════════════════════════════════════════════════ */
.bamleon-cs__emailphone {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 28px;
	margin: 48px 0;
}
.bamleon-cs__emailphone-frame {
	position: relative;
	flex: 0 0 auto;
	width: 340px;
	max-width: 100%;
	aspect-ratio: 9 / 19.5;
	background: #0a0a0a;
	border-radius: 52px;
	padding: 12px;
	box-sizing: border-box;
	box-shadow: 0 30px 70px rgba(0,0,0,0.28);
}
.bamleon-cs__emailphone-screen {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: 40px;
	background: #fff;
	container-type: size;
	/* Hard clip so a tall email can never poke past the phone's rounded
	   bottom corners (the frame itself is overflow:visible for its shadow). */
	-webkit-mask-image: -webkit-radial-gradient(white, black);
	isolation: isolate;
}
/* High specificity (+ .brxe-image) so these beat the global Bricks image
   transition that was overriding the scroll transform. */
.bamleon-cs__emailphone-screen .bamleon-cs__emailphone-img,
.bamleon-cs__emailphone-screen img.brxe-image.bamleon-cs__emailphone-img {
	display: block;
	width: 100%;
	height: auto;
	transform: translateY(0);
	transition: transform 600ms ease-out !important;
	will-change: transform;
}
.bamleon-cs__emailphone-screen:hover .bamleon-cs__emailphone-img,
.bamleon-cs__emailphone-screen:hover img.brxe-image.bamleon-cs__emailphone-img {
	transform: translateY(calc(-100% + 100cqh));
	transition: transform 7s linear !important;
}
/* Dynamic island — sits over the top of the screen, holds the controls */
.bamleon-cs__emailphone-island {
	position: absolute;
	top: 22px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 8px;
	height: 38px;
	padding: 0 8px;
	background: #0a0a0a;
	border-radius: 999px;
	box-shadow: 0 2px 12px rgba(0,0,0,0.45);
}
.bamleon-cs__emailphone-prev,
.bamleon-cs__emailphone-next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255,255,255,0.12);
	color: #fff;
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background 180ms ease;
}
.bamleon-cs__emailphone-prev:hover,
.bamleon-cs__emailphone-next:hover { background: rgba(255,255,255,0.28); }
.bamleon-cs__emailphone-counter {
	font-family: var(--bamleon-cs-mono, "JetBrains Mono", monospace);
	font-size: 11px;
	letter-spacing: 0.06em;
	color: #fff;
	min-width: 48px;
	text-align: center;
}
.bamleon-cs__emailphone-label {
	font-family: var(--bamleon-cs-mono, "JetBrains Mono", monospace);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bamleon-text-3, #888);
	margin-top: 8px;
	position: relative;
	z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
	.bamleon-cs__emailphone-screen:hover .bamleon-cs__emailphone-img { transition: transform 0.3s ease; }
}

/* ─── Timberland square compare variant (1:1 page-template screenshots) ── */
.bamleon-cs__article--timberland .bamleon-cs__compare-frame {
	aspect-ratio: 1 / 1;
}
.bamleon-cs__article--timberland .bamleon-cs__compare-img {
	background-size: cover;
	background-position: top center;
}
.bamleon-cs__article--timberland .bamleon-cs__compare { margin-bottom: 48px; }