/* ============================================================

   Self-hosted web fonts — variable woff2, latin + latin-ext,

   formerly the Google Fonts CDN. font-display: swap keeps text

   visible on first paint; unicode-range keeps latin-ext lazy.

   ============================================================ */


@font-face
{
	font-family: "Inter";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("/fonts/inter-var-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face
{
	font-family: "Inter";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("/fonts/inter-var-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face
{
	font-family: "Inter Tight";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("/fonts/inter-tight-var-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face
{
	font-family: "Inter Tight";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("/fonts/inter-tight-var-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face
{
	font-family: "JetBrains Mono";
	font-style: normal;
	font-weight: 400 500;
	font-display: swap;
	src: url("/fonts/jetbrains-mono-var-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face
{
	font-family: "JetBrains Mono";
	font-style: normal;
	font-weight: 400 500;
	font-display: swap;
	src: url("/fonts/jetbrains-mono-var-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face
{
	font-family: "Fraunces";
	font-style: italic;
	font-weight: 300 500;
	font-display: swap;
	src: url("/fonts/fraunces-italic-var-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face
{
	font-family: "Fraunces";
	font-style: italic;
	font-weight: 300 500;
	font-display: swap;
	src: url("/fonts/fraunces-italic-var-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* =====================================
 * LittleMan — site stylesheet
 * =====================================
 *
 * Single consolidated stylesheet. Every dimension and colour traces
 * to a design token defined in the :root block below. No inline
 * styles anywhere in the HTML.
 *
 * Sections, in order:
 *   1. Tokens
 *   2. Reset
 *   3. Base
 *   4. Layout
 *   5. Shared components
 *   6. Site chrome (header / footer)
 *   7. Mesh grid + animations
 *   8. Section: hero
 *   9. Section: statement band
 *  10. Section: what we build
 *  11. Section: devices showcase
 *  12. Section: beyond vibe coding
 *  13. Section: how we work
 *  14. Section: proof
 *  15. Section: work
 *  16. Section: final CTA
 *  17. Utilities
 *  18. Reduced motion
 *  19. Responsive
 * ===================================== */

/* =====================================
 * 1. Tokens
 * ===================================== */

:root
{
	/* Colour: theme-aware surfaces (defaults are dark mode) */
	--lm-bg:              #05070b;
	--lm-bg-alt:          #0c1018;
	--lm-bg-rgb:          5, 7, 11;
	--lm-fg:              rgba(255, 255, 255, 0.96);
	--lm-fg-dim:          rgba(255, 255, 255, 0.74);
	--lm-fg-muted:        rgba(255, 255, 255, 0.56);
	--lm-fg-faint:        rgba(255, 255, 255, 0.28);
	--lm-line:            rgba(255, 255, 255, 0.08);
	--lm-line-strong:     rgba(255, 255, 255, 0.20);

	/* Colour: theme-invariant device surfaces (terminal/phone/macbook/product
	   stay dark in both modes — they're rendering device screens) */
	--lm-bg-deep:         #060a10;
	--lm-bg-deeper:       #070b11;

	/* Colour: accent (brand cyan) */
	--lm-accent:          #31c5f4;
	--lm-accent-dim:      rgba(49, 197, 244, 0.26);
	--lm-accent-soft:     rgba(49, 197, 244, 0.12);
	--lm-accent-shadow:   rgba(49, 197, 244, 0.35);

	/* Colour: danger (form validation) */
	--lm-danger:          #ff5a6f;
	--lm-danger-wash:     rgba(255, 90, 111, 0.14);

	/* Colour: code highlights (used inside terminal block) */
	--lm-code-keyword:    #31c5f4;
	--lm-code-type:       #b3a4ff;
	--lm-code-fn:         #ffb26b;
	--lm-code-comment:    rgba(255, 255, 255, 0.28);

	/* Typography */
	--font-display:       "Inter Tight", "Helvetica Neue", Arial, sans-serif;
	--font-sans:          "Inter", "Helvetica Neue", Arial, sans-serif;
	--font-mono:          "JetBrains Mono", ui-monospace, monospace;
	/* Luxury editorial serif — italic accent words inside display lines
	   (loaded on the home page only; elsewhere falls back to Georgia). */
	--font-serif:         "Fraunces", Georgia, "Times New Roman", serif;

	/* Type scale */
	--fs-mono:            12px;
	--fs-mono-sm:         10px;
	--fs-body:            17px;
	--fs-body-lg:         18px;
	--fs-h1:              clamp(60px, 9.4vw, 158px);
	--fs-h2:              clamp(48px, 6.6vw, 104px);
	--fs-h2-sm:           clamp(48px, 6vw, 88px);
	--fs-h3:              clamp(44px, 5.4vw, 80px);
	--fs-h3-card:         30px;
	--fs-cta-display:     clamp(56px, 8vw, 132px);
	--fs-cross-h3:        clamp(40px, 4.4vw, 64px);
	--fs-contrast-h3:     clamp(28px, 2.6vw, 40px);

	/* Spacing */
	--gutter:             48px;
	--max:                1320px;

	/* Motion */
	--ease:               cubic-bezier(0.2, 0.7, 0.2, 1);
	--fast:               180ms;
	--medium:             320ms;
	--slow:               800ms;

	/* Radius */
	--radius-sm:          4px;
	--radius-md:          8px;
	--radius-lg:          12px;
}

/* LIGHT THEME RETIRED (2026-07-07). The site is dark-only by design —
   theme-restore.js pins data-theme="dark". The film's white studio act
   is its own LOCAL token inversion (.section--studio), not a theme. */

/* Device-screen frames re-establish dark tokens locally so their internals
   stay dark in both themes. Real screens are dark; the design treats the
   terminal, phone, MacBook, and faux product UIs as device renderings. */
.terminal,
.phone,
.macbook,
.product,
.how-step__code
{
	--lm-bg:              #05070b;
	--lm-bg-alt:          #0c1018;
	--lm-bg-rgb:          5, 7, 11;
	--lm-fg:              rgba(255, 255, 255, 0.96);
	--lm-fg-dim:          rgba(255, 255, 255, 0.74);
	--lm-fg-faint:        rgba(255, 255, 255, 0.28);
	--lm-line:            rgba(255, 255, 255, 0.08);
	--lm-line-strong:     rgba(255, 255, 255, 0.20);
}

/* =====================================
 * 2. Reset
 * ===================================== */

*,
*::before,
*::after
{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html
{
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

img,
svg,
video
{
	display: block;
	max-width: 100%;
	height: auto;
}

button
{
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	cursor: pointer;
}

a
{
	color: inherit;
	text-decoration: none;
}

/* =====================================
 * 3. Base
 * ===================================== */

body
{
	background: var(--lm-bg);
	color: var(--lm-fg);
	font-family: var(--font-sans);
	font-size: var(--fs-body);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	min-height: 100vh;
	overflow-x: hidden;
}

::selection
{
	background: var(--lm-accent);
	color: #05070b;
}

:focus-visible
{
	outline: 2px solid var(--lm-accent);
	outline-offset: 3px;
	border-radius: var(--radius-sm);
}

/* =====================================
 * 4. Layout
 * ===================================== */

.container
{
	width: 100%;
	max-width: var(--max);
	margin-inline: auto;
	position: relative;
}

.section
{
	position: relative;
	padding: 140px var(--gutter);
	overflow: hidden;
}

.section--hero
{
	/* Top padding clears the FIXED floating header pill (~74px tall
	   incl. offset) — the page runs underneath it, nothing reserves
	   space in flow. */
	padding-top: 168px;
	padding-bottom: 120px;
	min-height: 96vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.section--tight
{
	padding: 48px 0;
}

.section--alt
{
	background: var(--lm-bg-alt);
}

/* =====================================
 * 5. Shared components
 * ===================================== */

/* Mono label — used for eyebrows, captions, code labels. */
.mono
{
	font-family: var(--font-mono);
	font-size: var(--fs-mono);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--lm-fg-dim);
}

.mono--accent
{
	color: var(--lm-accent);
}

.mono--faint
{
	color: var(--lm-fg-muted, var(--lm-fg-faint));
}

.mono--sm
{
	font-size: var(--fs-mono-sm);
}

/* Status pill (e.g. "Building since 2006") */
.status-pill
{
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 8px 14px;
	border: 1px solid var(--lm-line-strong);
	border-radius: 999px;
	margin-bottom: 36px;
}

.status-pill__dot
{
	width: 6px;
	height: 6px;
	background: var(--lm-accent);
	border-radius: 999px;
	box-shadow: 0 0 10px var(--lm-accent);
}

/* Primary CTA — precise, futuristic. */
.cta
{
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 14px 22px;
	font-family: var(--font-sans);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: -0.005em;
	border-radius: var(--radius-sm);
	background: var(--lm-bg);
	color: var(--lm-fg);
	border: 1px solid transparent;
	cursor: pointer;
	transition: transform var(--medium) var(--ease),
				box-shadow var(--medium) var(--ease),
				background var(--medium) var(--ease);
	overflow: hidden;
	white-space: nowrap;
}

.cta:hover,
.cta:focus-visible
{
	transform: translateY(-1px);
}

.cta__arrow
{
	width: 14px;
	height: 10px;
}

.cta--sm
{
	padding: 10px 18px;
	font-size: 13px;
	gap: 12px;
}

.cta--lg
{
	padding: 18px 28px;
	font-size: 15px;
}

.cta--xl
{
	padding: 22px 36px;
	font-size: 17px;
}

.cta--accent
{
	background: var(--lm-accent);
	color: #05070b;
	box-shadow: 0 8px 24px rgba(49, 197, 244, 0.25);
}

.cta--accent:hover,
.cta--accent:focus-visible
{
	box-shadow: 0 0 0 4px var(--lm-accent-dim),
				0 12px 32px var(--lm-accent-shadow);
}

.cta--ghost
{
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 20px;
	color: var(--lm-fg);
	font-family: var(--font-sans);
	font-size: 14px;
	font-weight: 500;
	border-radius: var(--radius-sm);
	border: 1px solid var(--lm-line-strong);
	background: transparent;
	cursor: pointer;
	transition: border-color var(--medium) var(--ease),
				background var(--medium) var(--ease);
}

.cta--ghost:hover,
.cta--ghost:focus-visible
{
	border-color: var(--lm-accent-dim);
	background: rgba(255, 255, 255, 0.02);
}

/* Reveal animation hook — JS toggles .is-revealed when in view. */
.reveal
{
	opacity: 0;
	transform: translateY(20px);
	transition: opacity var(--slow) var(--ease),
				transform 900ms var(--ease);
	transition-delay: var(--reveal-delay, 0ms);
	will-change: opacity, transform;
}

.reveal.is-revealed
{
	opacity: 1;
	transform: translateY(0);
}

/* =====================================
 * 6. Site chrome
 * ===================================== */

/* Floating pill bar (the maintenancepartners.com.au shape): one
   rounded capsule inset from the page edges, everything inside it.
   FIXED, not sticky — a sticky bar reserves a full-width flow slot
   at the page top and the raw body background shows through as a
   black band behind the pill. Pages run underneath instead. */
.site-header
{
	position: fixed;
	top: 14px;
	left: 0;
	right: 0;
	z-index: 50;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 20px;
	width: min(1120px, calc(100% - 2 * var(--gutter)));
	margin: 0 auto;
	padding: 0 6px;
	/* The header bar itself is now TRANSPARENT: the logo sits left, the CTA
	   right, and the PILL wraps only the nav menu (see .site-header__nav) —
	   shrunk to the links. */
	background: transparent;
	transform: translateY(0);
	transition: background var(--medium) var(--ease),
				border-color var(--medium) var(--ease),
				box-shadow var(--medium) var(--ease),
				transform 320ms var(--ease);
}

/* Intent-aware hide: slides away on scroll-down, returns on scroll-up
   (JS toggles .is-hidden in installScrollState). Extra travel clears
   the pill's floating offset. */
.site-header.is-hidden
{
	transform: translateY(calc(-100% - 30px));
	pointer-events: none;
}

/* Scrolled state now emphasises the NAV pill (the header bar is transparent). */
.site-header.is-scrolled .site-header__nav
{
	background: rgba(var(--lm-bg-rgb), 0.52);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
}

/* Mobile: no capsule — the logo + Menu button float directly on the page
   (Anthony). Drops the pill background, border, blur and shadow; the Menu
   button keeps its own pill. */
@media (max-width: 900px)
{
	.site-header,
	.site-header.is-scrolled
	{
		background: transparent;
		border-color: transparent;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		border-radius: 0;
		box-shadow: none;
	}
	/* Keep the mobile mark at its smaller size (the 46px bump is desktop). */
	.site-header__brand img.is-mark { height: 36px; }
}

/* Brand logo — TRUE brand colours in both themes, no bleaching filters
   (the old brightness(0) invert(1) whitewashed the blue slashes). Two SVG
   variants swap by theme: dark = blue slashes / WHITE "little" / blue
   "man" (Anthony's "Blue White" brand file); light = the original with
   dark-grey "little". */
.site-header__brand img
{
	display: block;
	height: 36px;
	width: auto;
}

/* Single mark in the header — the three slashes alone, no wordmark. Bigger
   now that the bar is transparent and the mark stands on its own (desktop). */
.site-header__brand img.is-mark
{
	height: 46px;
	width: auto;
	filter: none;
}

/* Primary nav — quiet print. Mixed case, normal tracking, dim until
   engaged; the roll-flip hover stays (label rolls out, accent copy
   rolls in from below) but the HUD ornament — indexes, uppercase,
   glow — is gone. Feedback: the old bar read as heavy. */
/* The nav is now the PILL — shrunk to just the menu links. (Hidden on
   mobile, so this only shows on desktop, where the Menu sheet takes over.) */
.site-header__nav
{
	display: flex;
	align-items: center;
	justify-self: center;
	gap: 30px;
	padding: 11px 26px;
	background: rgba(var(--lm-bg-rgb), 0.28);
	-webkit-backdrop-filter: blur(18px);
	backdrop-filter: blur(18px);
	border: none;
	border-radius: 999px;
	transition: background var(--medium) var(--ease),
				box-shadow var(--medium) var(--ease);
}
/* Pin each element to its column EXPLICITLY. Without this, hiding the nav on
   mobile (display:none) lets grid auto-placement drop .site-header__right into
   the empty middle column — the Menu pill floated mid-right instead of flush
   right. */
.site-header__brand { grid-column: 1; justify-self: start; }
.site-header__nav   { grid-column: 2; justify-self: center; }
.site-header__right { grid-column: 3; justify-self: end; }

.site-header__nav a
{
	position: relative;
	display: inline-flex;
	padding: 4px 0;
	font-family: var(--font-sans);
	font-size: 14.5px;
	font-weight: 500;
	letter-spacing: 0.005em;
	color: var(--lm-fg-dim);
	transition: color var(--fast) var(--ease);
}

/* You-are-here: the current page's link holds full strength with an
   accent point beneath it. */
.site-header__nav a.is-here
{
	color: var(--lm-fg);
}

.site-header__nav a.is-here::after
{
	content: "";
	position: absolute;
	left: 50%;
	bottom: -4px;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--lm-accent);
	transform: translateX(-50%);
}

.nav-word
{
	position: relative;
	display: inline-block;
	overflow: hidden;
}

.nav-word > span
{
	display: block;
	transition: transform 420ms var(--ease);
}

.nav-word::after
{
	content: attr(data-text);
	content: attr(data-text) / "";
	position: absolute;
	left: 0;
	top: 100%;
	width: 100%;
	height: 100%;
	color: var(--lm-accent);
	transition: transform 420ms var(--ease);
}

.site-header__nav a:hover .nav-word > span,
.site-header__nav a:focus-visible .nav-word > span,
.site-header__nav a:hover .nav-word::after,
.site-header__nav a:focus-visible .nav-word::after
{
	transform: translateY(-100%);
}

.site-header__right
{
	display: flex;
	align-items: center;
	gap: 12px;
}

/* Header CTA — one solid pill, plain words. The old HUD bracket
   (corner ticks, light sweep, tracked caps) read as heavy. */
.cta-hud
{
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 11px 22px;
	font-family: var(--font-sans);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.005em;
	color: #04121c;
	background: var(--lm-accent);
	border: 0;
	border-radius: 999px;
	white-space: nowrap;
	transition: background var(--fast) var(--ease),
				box-shadow var(--fast) var(--ease),
				transform var(--fast) var(--ease);
}

.cta-hud__arrow
{
	width: 13px;
	height: 9px;
	transition: transform var(--medium) var(--ease);
}

.cta-hud:hover,
.cta-hud:focus-visible
{
	background: #5fd3f7;
	box-shadow: 0 4px 24px rgba(49, 197, 244, 0.35);
	transform: translateY(-1px);
}

.cta-hud:hover .cta-hud__arrow,
.cta-hud:focus-visible .cta-hud__arrow
{
	transform: translateX(3px);
}

/* Burger — mobile only. Two lines that cross when the sheet is open. */
/* Labelled menu pill — an unlabelled icon tests badly for discovery, so
   the trigger is a bordered pill with a 3-line icon and the word "Menu". */
.nav-burger
{
	display: none;               /* → inline-flex at the mobile breakpoint */
	align-items: center;
	gap: 10px;
	height: 48px;
	padding: 0 20px 0 17px;
	background: color-mix(in srgb, var(--lm-bg) 55%, transparent);
	border: 1px solid var(--lm-line-strong);
	border-radius: 999px;
	cursor: pointer;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	transition: border-color 200ms var(--ease), background 200ms var(--ease);
}

.nav-burger:hover,
.nav-burger:focus-visible { border-color: var(--lm-accent); }

.nav-burger__lines
{
	position: relative;
	width: 18px;
	height: 12px;
	flex: 0 0 auto;
}

.nav-burger__lines span
{
	position: absolute;
	left: 0;
	width: 18px;
	height: 2px;
	border-radius: 2px;
	background: var(--lm-fg);
	transition: transform 280ms var(--ease), opacity 200ms var(--ease);
}

.nav-burger__lines span:nth-child(1) { top: 0; }
.nav-burger__lines span:nth-child(2) { top: 5px; }
.nav-burger__lines span:nth-child(3) { top: 10px; }

.nav-burger__label
{
	font-family: var(--font-mono);
	font-size: 14px;
	letter-spacing: 0.06em;
	color: var(--lm-fg);
	line-height: 1;
}

.site-header.is-menu-open .nav-burger__lines span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.site-header.is-menu-open .nav-burger__lines span:nth-child(2) { opacity: 0; }
.site-header.is-menu-open .nav-burger__lines span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* Menu sheet — full-screen, big quiet links, CTA pill at the bottom.
   Appended to <body> by SiteHeader (the header's transform would
   re-root position:fixed if it lived inside the bar). */
.site-menu
{
	position: fixed;
	inset: 0;
	z-index: 49;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 40px;
	padding: 96px var(--gutter) 48px;
	background: rgba(var(--lm-bg-rgb), 0.96);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	opacity: 0;
	visibility: hidden;
	transition: opacity 280ms var(--ease), visibility 0s linear 280ms;
}

.site-menu.is-open
{
	opacity: 1;
	visibility: visible;
	transition: opacity 280ms var(--ease);
}

.site-menu__links
{
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.site-menu__links a
{
	padding: 10px 0;
	font-family: var(--font-sans);
	font-size: 30px;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--lm-fg);
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 320ms var(--ease), transform 320ms var(--ease);
}

.site-menu.is-open .site-menu__links a
{
	opacity: 1;
	transform: none;
}

.site-menu__links a.is-here
{
	color: var(--lm-accent);
}

.site-menu.is-open .site-menu__links a:nth-child(2) { transition-delay: 40ms; }
.site-menu.is-open .site-menu__links a:nth-child(3) { transition-delay: 80ms; }
.site-menu.is-open .site-menu__links a:nth-child(4) { transition-delay: 120ms; }
.site-menu.is-open .site-menu__links a:nth-child(5) { transition-delay: 160ms; }
.site-menu.is-open .site-menu__links a:nth-child(6) { transition-delay: 200ms; }

.site-menu__cta
{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 16px 24px;
	font-family: var(--font-sans);
	font-size: 16px;
	font-weight: 600;
	color: #04121c;
	background: var(--lm-accent);
	border-radius: 999px;
}

@media (prefers-reduced-motion: reduce)
{
	.site-header
	{
		transition: none;
	}

	.nav-word > span,
	.nav-word::after,
	.nav-burger__lines span,
	.site-menu,
	.site-menu__links a
	{
		transition: none;
	}

	.site-header__nav a:hover .nav-word > span,
	.site-header__nav a:focus-visible .nav-word > span
	{
		transform: none;
		color: var(--lm-accent);
	}

	.site-header__nav a:hover .nav-word::after,
	.site-header__nav a:focus-visible .nav-word::after
	{
		transform: none;
		content: none;
	}
}

.site-footer
{
	padding: 40px var(--gutter);
	background: var(--lm-bg);
	border-top: 1px solid var(--lm-line);
}

/* Footer link rows — the site map, centred. Primary pages on the first
   line, deep pages on a quieter second line. Every page keeps an
   inbound link (the deep case studies were orphans without this). */
.site-footer__nav
{
	max-width: var(--max);
	margin: 0 auto 34px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

.site-footer__nav-row
{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 28px;
}

.site-footer__nav a
{
	font-family: var(--font-sans);
	font-size: 13.5px;
	font-weight: 500;
	color: var(--lm-fg-dim);
	transition: color var(--fast) var(--ease);
}

.site-footer__nav-row--more
{
	gap: 8px 22px;
}

.site-footer__nav-row--more a
{
	font-size: 12.5px;
	font-weight: 400;
	color: var(--lm-fg-muted, var(--lm-fg-faint));
}

.site-footer__nav a:hover,
.site-footer__nav a:focus-visible
{
	color: var(--lm-fg);
}

.site-footer__inner
{
	max-width: var(--max);
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 12px;
}

.site-footer__inner .mono
{
	line-height: 1.8;
}

@media (max-width: 560px)
{
	.site-footer__inner .mono
	{
		font-size: 11px;
		letter-spacing: 0.14em;
	}
}

.site-footer__brand img
{
	height: 18px;
	width: auto;
	/* the mark is brand-blue in BOTH themes — no bleaching */
}

/* =====================================
 * FileMaker landing (/filemaker-developers/) — reuses the vibe/how
 * scaffold; only the lede paragraph and FAQ list are new shapes.
 * ===================================== */

.section-lede
{
	max-width: 720px;
	margin: 0 0 72px;
	font-size: var(--fs-body-lg);
	line-height: 1.6;
	color: var(--lm-fg-dim);
}

.fm-faq
{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 28px;
	margin-top: 64px;
}

.fm-faq__item
{
	padding: 28px 30px;
	background: var(--lm-bg-alt);
	border: 1px solid var(--lm-line);
	border-radius: 14px;
}

.fm-faq__q
{
	margin: 0 0 12px;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--lm-fg);
}

.fm-faq__q a
{
	color: inherit;
	transition: color var(--fast) var(--ease);
}

.fm-faq__q a:hover,
.fm-faq__q a:focus-visible
{
	color: var(--lm-accent);
}

.fm-faq__a
{
	margin: 0;
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--lm-fg-dim);
}

@media (max-width: 900px)
{
	.fm-faq { grid-template-columns: 1fr; }
}

/* =====================================
 * Work page (case-study.html) — the portfolio. Origin story as one
 * split band, NAT as a full-bleed photographic feature, then the
 * shelf of production systems. Feedback: the old page was "dead" —
 * text-only sections and a placeholder product window.
 * ===================================== */

/* Origin band backdrop — the commodity collage (coal, grain, corn,
   beans, ore: what the systems move) under a heavy veil, so it reads
   as texture behind the story, not competition for it. */
.work-origin
{
	position: relative;
	overflow: hidden;
}

.work-origin__bg
{
	position: absolute;
	left: 0;
	right: 0;
	top: -8%;
	height: 116%;
	width: 100%;
	object-fit: cover;
	filter: saturate(1.5) contrast(1.1) brightness(1.14);
}

.work-origin__veil
{
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(5, 7, 11, 0.94) 0%, rgba(5, 7, 11, 0.84) 52%, rgba(5, 7, 11, 0.62) 76%, rgba(5, 7, 11, 0.34) 100%),
		linear-gradient(180deg, rgba(5, 7, 11, 0.85), transparent 32%, transparent 68%, rgba(5, 7, 11, 0.85));
}

.work-origin .container
{
	position: relative;
}

.work-origin__grid
{
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: 72px;
	align-items: center;
}

.work-origin__copy
{
	max-width: 620px;
	margin: 26px 0 0;
	font-size: 17px;
	line-height: 1.65;
	color: var(--lm-fg-dim);
}

.work-origin__copy strong { color: var(--lm-fg); font-weight: 600; }

.work-origin__stats
{
	display: flex;
	flex-direction: column;
	gap: 34px;
	padding-left: 44px;
	border-left: 1px solid var(--lm-line);
}

.work-stat__v
{
	font-family: var(--font-display);
	font-size: clamp(42px, 4.5vw, 60px);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1;
	margin-bottom: 8px;
	color: var(--lm-fg);
}

/* Full-bleed photographic band — the image IS the section. */
.work-band
{
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: min(78vh, 760px);
	overflow: hidden;
}

.work-band__img
{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Bias toward the ship + silos when the band crops the sides. */
	object-position: 28% 50%;
	/* The grade, part 1 — richer, punchier than the source photo. */
	filter: saturate(1.6) contrast(1.16) brightness(1.0);
}

/* The grade, part 2 — pull the water and sky toward brand cyan and
   sink the shadows into the site's navy black. "Make it ours."
   Two layers: an overlay punch, then a soft-light cyan wash that
   survives the dark veil above it. */
.work-band__grade
{
	position: absolute;
	inset: 0;
	background: linear-gradient(145deg,
		rgba(49, 197, 244, 0.60),
		rgba(13, 142, 207, 0.32) 45%,
		rgba(6, 18, 40, 0.60));
	mix-blend-mode: overlay;
}

.work-band__grade::after
{
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 90% 70% at 62% 30%,
		rgba(49, 197, 244, 0.34),
		transparent 70%);
	mix-blend-mode: soft-light;
}

.work-band__veil
{
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(5, 7, 11, 0.28), rgba(5, 7, 11, 0.30) 40%, rgba(5, 7, 11, 0.86) 88%),
		linear-gradient(90deg, rgba(5, 7, 11, 0.45), transparent 60%);
}

.work-band__content
{
	position: relative;
	width: 100%;
	max-width: var(--max);
	margin: 0 auto;
	padding: 72px var(--gutter) 64px;
}

.work-band__title
{
	margin: 14px 0 18px;
	font-family: var(--font-display);
	font-size: clamp(38px, 5vw, 64px);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.04;
	color: #fff;
}

.work-band__copy
{
	max-width: 560px;
	margin: 0 0 26px;
	font-size: 17px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.88);
}

/* Flipped band — content on the right, subject on the left (the
   Bolt Up crew shot has the man at frame-left). */
.work-band--flip .work-band__veil
{
	background:
		linear-gradient(180deg, rgba(5, 7, 11, 0.28), rgba(5, 7, 11, 0.30) 40%, rgba(5, 7, 11, 0.86) 88%),
		linear-gradient(270deg, rgba(5, 7, 11, 0.45), transparent 60%);
}

.work-band--flip .work-band__content
{
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

.work-band--boltup .work-band__img
{
	object-position: center 42%;
}

/* The shelf backdrop — the city canyon under the tiles: looming
   behind the heading, gone by the second card row. */
.work-shelf
{
	position: relative;
	overflow: hidden;
}

.work-shelf__bg
{
	position: absolute;
	left: 0;
	right: 0;
	top: -70px;
	width: 100%;
	height: calc(62% + 140px);
	object-fit: cover;
	object-position: center 30%;
	filter: saturate(1.35) contrast(1.06) brightness(0.92);
}

/* Timelapse: three frames of the same street. Dusk falls over the
   day frame, the city lights hold, a storm rolls in and passes,
   calm night returns, then dawn. ~40s full cycle. The storm layer
   sits above the night layer, so the night frame is the base the
   storm fades over and clears back to. */
.work-shelf__bg--night
{
	opacity: 0;
	animation: shelf-nightfall 40s ease-in-out infinite;
}

.work-shelf__bg--storm
{
	opacity: 0;
	animation: shelf-storm 40s ease-in-out infinite;
}

@keyframes shelf-nightfall
{
	0%, 20%   { opacity: 0; }
	30%, 84%  { opacity: 1; }
	94%, 100% { opacity: 0; }
}

@keyframes shelf-storm
{
	0%, 42%   { opacity: 0; }
	52%, 68%  { opacity: 1; }
	80%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce)
{
	.work-shelf__bg--night,
	.work-shelf__bg--storm { animation: none; }
}

.work-shelf__veil
{
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(5, 7, 11, 0.66) 0%, rgba(5, 7, 11, 0.52) 20%, rgba(5, 7, 11, 0.86) 44%, #05070b 62%),
		linear-gradient(90deg, rgba(5, 7, 11, 0.55), transparent 40%);
}

.work-shelf .container
{
	position: relative;
}

/* The shelf — production systems as cards. */
.work-grid
{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 26px;
	margin-top: 64px;
}

/* Three doors on the Rescue page — one column per kind of wreck. */
.work-grid--doors
{
	grid-template-columns: repeat(3, 1fr);
	margin-top: 56px;
}

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

.work-card
{
	padding: 30px 32px 32px;
	background: var(--lm-bg-alt);
	border: 1px solid var(--lm-line);
	border-radius: 14px;
	transition: transform 0.35s var(--ease), border-color 0.35s var(--ease);
}

.work-card:hover
{
	transform: translateY(-4px);
	border-color: rgba(49, 197, 244, 0.45);
}

.work-card__head
{
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 16px;
}

.work-card__title
{
	margin: 0 0 10px;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--lm-fg);
}

.work-card__title a
{
	color: inherit;
	transition: color var(--fast) var(--ease);
}

.work-card__title a:hover,
.work-card__title a:focus-visible
{
	color: var(--lm-accent);
}

.work-card__dek
{
	margin: 0;
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--lm-fg-dim);
}

.work-card--wide
{
	grid-column: 1 / -1;
}

.work-card--wide .work-card__dek
{
	max-width: 860px;
}

/* Card hover — the index lights, the face warms. */
.work-card:hover .work-card__head span:last-child
{
	color: var(--lm-accent);
}

.work-card:hover
{
	background: rgba(49, 197, 244, 0.045);
}

/* Hero fly-through — the sandbox corridor, contained in the hero.
   Scrolling off the hero flies the camera through the gates. */
.work-hero
{
	position: relative;
	overflow: hidden;
	background: #01030a;
}

/* Motion cue — only injected on iOS touch devices where the fly-through
   needs a tap to unlock the gyro. Fades away once motion is granted. */
.flythrough-hint
{
	position: absolute;
	bottom: 22px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 15px;
	border: 1px solid rgba(49, 197, 244, 0.35);
	border-radius: 999px;
	background: rgba(5, 7, 11, 0.55);
	backdrop-filter: blur(6px);
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	color: rgba(255, 255, 255, 0.82);
	pointer-events: none;
	white-space: nowrap;
	animation: flythrough-hint-pulse 2.4s ease-in-out infinite;
	transition: opacity 0.5s ease;
}

.flythrough-hint__dot
{
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: var(--lm-accent);
	box-shadow: 0 0 10px var(--lm-accent);
}

.flythrough-hint.is-gone { opacity: 0; }

@keyframes flythrough-hint-pulse
{
	0%, 100% { opacity: 0.6; }
	50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce)
{
	.flythrough-hint { animation: none; }
}

.work-hero flythrough-field
{
	position: absolute;
	inset: 0;
	display: block;
	pointer-events: none;
	z-index: 0;
	/* Dialled down — the corridor is atmosphere, not competition. */
	opacity: 0.26;
	background: radial-gradient(ellipse 90% 80% at 50% 46%, rgba(49, 197, 244, 0.06) 0%, transparent 64%);
}

/* Soft dark pool behind the headline so the type owns the centre. */
.work-hero::after
{
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: radial-gradient(ellipse 66% 60% at 50% 54%, rgba(1, 3, 10, 0.82) 0%, transparent 74%);
}

.work-hero flythrough-field canvas
{
	display: block;
	width: 100%;
	height: 100%;
}

.work-hero .services-hero__inner
{
	position: relative;
	z-index: 1;
}

/* Band images breathe: slow Ken Burns drift (transform) composes with
   the data-plx scroll parallax (translate property) — different
   channels, no clobbering. Oversized so parallax never shows edges. */
.work-band__img
{
	top: -13%;
	height: 126%;
	animation: band-drift 22s ease-in-out infinite alternate;
}

@keyframes band-drift
{
	from { transform: scale(1); }
	to   { transform: scale(1.07); }
}

/* See them running — real screens fanned in perspective, each on its
   own parallax depth so the stack shears gently as you scroll. */
.work-live__grid
{
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	gap: 72px;
	align-items: center;
}

.work-live__cta
{
	margin-top: 34px;
}

.work-live__fan
{
	position: relative;
	height: 520px;
	perspective: 1400px;
}

.work-live__shot
{
	position: absolute;
	width: 78%;
	height: auto;
	border: 1px solid var(--lm-line);
	border-radius: 12px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
	transform-origin: left center;
}

.work-live__shot--a
{
	left: 0;
	top: 8%;
	transform: rotateY(-16deg) rotateZ(-1deg);
	z-index: 3;
}

.work-live__shot--b
{
	left: 14%;
	top: 30%;
	transform: rotateY(-20deg) rotateZ(0.5deg);
	z-index: 2;
	opacity: 0.85;
}

.work-live__shot--c
{
	left: 28%;
	top: 54%;
	transform: rotateY(-24deg) rotateZ(2deg);
	z-index: 1;
	opacity: 0.6;
}

/* Your move — one line, one pill. */
.work-ask
{
	text-align: center;
}

.work-ask__inner
{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 22px;
}

.work-ask__title
{
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(40px, 5.5vw, 72px);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--lm-fg);
}

@media (max-width: 900px)
{
	.work-live__grid
	{
		grid-template-columns: 1fr;
		gap: 44px;
	}

	.work-live__fan
	{
		height: 380px;
	}

	.work-live__shot { width: 88%; }
}

@media (prefers-reduced-motion: reduce)
{
	.work-band__img { animation: none; }
}

@media (max-width: 900px)
{
	.work-origin__grid
	{
		grid-template-columns: 1fr;
		gap: 44px;
	}

	.work-origin__stats
	{
		flex-direction: row;
		flex-wrap: wrap;
		gap: 28px 44px;
		padding-left: 0;
		border-left: 0;
		padding-top: 34px;
		border-top: 1px solid var(--lm-line);
	}

	.work-band { min-height: 520px; }
	.work-grid { grid-template-columns: 1fr; }
}

/* =====================================
 * 7. Mesh grid + animations
 * ===================================== */

.mesh-grid
{
	position: absolute;
	inset: 0;
	pointer-events: none;
	display: block;
	z-index: 0;
}

.mesh-grid canvas
{
	display: block;
	width: 100%;
	height: 100%;
	mask-image: radial-gradient(ellipse 85% 75% at 50% 50%, black 45%, transparent 100%);
	-webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 50%, black 45%, transparent 100%);
}

.glow-orb
{
	position: absolute;
	pointer-events: none;
	background: radial-gradient(circle, var(--lm-accent-soft) 0%, transparent 60%);
	z-index: 0;
}

.scan-line
{
	position: absolute;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--lm-accent), transparent);
	box-shadow: 0 0 20px var(--lm-accent);
	opacity: 0.6;
	pointer-events: none;
	z-index: 1;
}

@keyframes blink
{
	50% { opacity: 0; }
}

@keyframes scan-vertical
{
	0%   { transform: translateY(-60px); opacity: 0; }
	50%  { opacity: 1; }
	100% { transform: translateY(60px); opacity: 0; }
}

/* =====================================
 * 8. Section: hero
 * ===================================== */

.hero__grid
{
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 72px;
	align-items: center;
	max-width: var(--max);
	margin-inline: auto;
	width: 100%;
	position: relative;
	z-index: 2;
}

/* Home hero is single-column now — the terminal moved to /vibe-coding/, so
   the copy holds the left and the particle globe owns the open right. */
.page-home .hero__grid
{
	grid-template-columns: 1fr;
	justify-items: start;
}
.page-home .hero__grid > div
{
	max-width: 720px;
}

.hero__title
{
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--fs-h1);
	line-height: 0.9;
	letter-spacing: -0.06em;
	color: var(--lm-fg);
	margin: 0;
}

.hero__title-accent
{
	color: var(--lm-accent);
	text-shadow: 0 0 40px var(--lm-accent-dim);
}

.hero__lede
{
	font-size: var(--fs-body-lg);
	line-height: 1.55;
	color: var(--lm-fg-dim);
	margin: 36px 0 0;
	max-width: 540px;
}

.hero__ctas
{
	display: flex;
	gap: 12px;
	margin-top: 44px;
	flex-wrap: wrap;
}

.hero__orb
{
	left: 60%;
	top: 30%;
	width: 700px;
	height: 700px;
}

/* Live terminal */

.terminal
{
	background: var(--lm-bg-deep);
	border: 1px solid var(--lm-line-strong);
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6),
				0 0 0 1px var(--lm-accent-dim);
	position: relative;
}

/* Live terminal on the vibe-coding page — centred, captioned. */
.vibe__terminal
{
	max-width: 860px;
	margin: 80px auto 0;
}
.vibe__terminal-cap
{
	display: block;
	margin-bottom: 18px;
}

.terminal__bar
{
	padding: 12px 16px;
	border-bottom: 1px solid var(--lm-line);
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--lm-bg-deep);
}

.terminal__dot
{
	width: 10px;
	height: 10px;
	border-radius: 999px;
	background: var(--lm-fg-faint);
}

.terminal__dot--red    { background: #ff5f57; }
.terminal__dot--yellow { background: #febc2e; }
.terminal__dot--green  { background: #28c840; }

.terminal__path
{
	margin-left: 12px;
}

.terminal__live
{
	margin-left: auto;
	color: var(--lm-accent);
}

.terminal__body
{
	margin: 0;
	padding: 24px 22px;
	font-family: var(--font-mono);
	font-size: 13px;
	line-height: 1.7;
	color: var(--lm-fg);
	white-space: pre-wrap;
	height: 340px;
	overflow: hidden;
	box-sizing: border-box;
	mask-image: linear-gradient(to bottom, transparent 0, #000 36px, #000 100%);
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 36px, #000 100%);
}

.terminal__line-no
{
	color: var(--lm-fg-faint);
	margin-right: 16px;
	user-select: none;
}

.terminal__caret
{
	display: inline-block;
	width: 8px;
	height: 16px;
	background: var(--lm-accent);
	vertical-align: text-bottom;
	animation: blink 1s steps(2) infinite;
}

.code-keyword { color: var(--lm-code-keyword); }
.code-type    { color: var(--lm-code-type); }
.code-fn      { color: var(--lm-code-fn); }
.code-comment { color: var(--lm-code-comment); }
.code-brand   { color: var(--lm-accent); font-weight: 600; }

/* =====================================
 * 9. Section: statement band
 * (Shared by the sandbox pages — scene/gradient/terraform/etc.
 *  The homepage no longer uses it; see index.html.)
 * ===================================== */

.statement-band
{
	padding: 48px 0;
	background: var(--lm-bg);
	border-top: 1px solid var(--lm-line);
	border-bottom: 1px solid var(--lm-line);
	overflow: hidden;
	position: relative;
}

.statement-band__track
{
	display: flex;
	gap: 64px;
	white-space: nowrap;
	font-family: var(--font-display);
	font-size: clamp(34px, 4.2vw, 64px);
	font-weight: 500;
	letter-spacing: -0.035em;
	color: var(--lm-fg-dim);
	will-change: transform;
}

.statement-band__item
{
	display: flex;
	align-items: center;
	gap: 64px;
	flex-shrink: 0;
}

.statement-band__diamond
{
	color: var(--lm-accent);
}

/* =====================================
 * 10. Section: what we build
 * ===================================== */

.section-head
{
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 80px;
	flex-wrap: wrap;
	gap: 40px;
}

.section-head__copy
{
	max-width: 420px;
	font-size: 17px;
	line-height: 1.55;
	color: var(--lm-fg-dim);
	margin: 0;
}

/* Editorial serif accent — an italic luxury-serif word set inside a bold
   sans display line ("We are *software* developers."). The size pull-back
   compensates for the serif's larger optical size; the slight rightward
   drift gives the italic room to lean. */
.serif-accent
{
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 400;
	font-size: 0.94em;
	letter-spacing: -0.015em;
	padding-right: 0.06em;
}

.h-display
{
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--fs-h2);
	line-height: 0.94;
	letter-spacing: -0.045em;
	margin: 20px 0 0;
	color: var(--lm-fg);
}

.h-display .accent
{
	color: var(--lm-accent);
}

.h-display--shadow .accent
{
	text-shadow: 0 0 50px var(--lm-accent-dim);
}

.cards-grid
{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1px;
	background: var(--lm-line);
	border: 1px solid var(--lm-line);
}

.build-card
{
	position: relative;
	padding: 56px 48px;
	min-height: 340px;
	background: var(--lm-bg-alt);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	transition: background var(--medium) var(--ease);
	overflow: hidden;
	cursor: pointer;
}

.build-card__corner
{
	position: absolute;
	top: 16px;
	right: 16px;
	opacity: 0.3;
	transition: opacity var(--medium) var(--ease);
}

.build-card:hover .build-card__corner,
.build-card:focus-within .build-card__corner
{
	opacity: 1;
}

.build-card__scan
{
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--lm-accent), transparent);
	opacity: 0;
	pointer-events: none;
}

.build-card:hover .build-card__scan
{
	animation: scan-vertical 1.2s ease-in-out;
}

.build-card__head
{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.build-card__title
{
	font-family: var(--font-display);
	font-size: var(--fs-h3-card);
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1.05;
	margin: 0 0 16px;
	color: var(--lm-fg);
}

.build-card__copy
{
	font-size: 16px;
	line-height: 1.6;
	color: var(--lm-fg-dim);
	max-width: 460px;
	margin: 0;
}

/* =====================================
 * 11. Section: devices showcase
 * ===================================== */

.section--devices
{
	padding: 180px var(--gutter);
}

.devices__head
{
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 80px;
	align-items: end;
	margin-bottom: 80px;
}

.devices__head-copy
{
	font-size: 17px;
	line-height: 1.6;
	color: var(--lm-fg-dim);
	max-width: 480px;
	margin: 0;
}

.devices__stage
{
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: 80px;
	align-items: center;
	padding: 80px 0;
	min-height: 720px;
}

.devices__orb
{
	right: 5%;
	top: 10%;
	width: 620px;
	height: 620px;
}

.device-slot
{
	display: flex;
	justify-content: center;
	will-change: transform;
	transition: transform 300ms linear;
}

.platforms-grid
{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: var(--lm-line);
	border: 1px solid var(--lm-line);
	margin-top: 40px;
}

.platform-cell
{
	background: var(--lm-bg);
	padding: 24px 22px;
}

.platform-cell__value
{
	font-family: var(--font-display);
	font-size: 16px;
	font-weight: 500;
	letter-spacing: -0.01em;
	color: var(--lm-fg);
	margin-top: 8px;
	line-height: 1.4;
}

/* Phone frame */

.phone
{
	width: 260px;
	height: 540px;
	border-radius: 36px;
	background: #0a0d12;
	padding: 4px;
	position: relative;
	box-shadow: 0 40px 100px rgba(0, 0, 0, 0.55),
				0 0 0 1px rgba(255, 255, 255, 0.06);
}

.phone__screen
{
	width: 100%;
	height: 100%;
	border-radius: 32px;
	background: var(--lm-bg);
	overflow: hidden;
	position: relative;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.phone__island
{
	position: absolute;
	top: 12px;
	left: 50%;
	transform: translateX(-50%);
	width: 100px;
	height: 28px;
	border-radius: 14px;
	background: #000;
	z-index: 5;
}

.phone__status
{
	position: absolute;
	top: 18px;
	left: 22px;
	right: 22px;
	display: flex;
	justify-content: space-between;
	font-family: var(--font-mono);
	font-size: 10px;
	color: var(--lm-fg);
	z-index: 4;
}

.phone__status span:last-child
{
	opacity: 0.7;
}

.phone__app
{
	padding: 60px 18px 18px;
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.phone__eyebrow
{
	font-family: var(--font-mono);
	font-size: 9px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--lm-accent);
}

.phone__h1
{
	font-family: var(--font-display);
	font-size: 20px;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--lm-fg);
	margin-top: 4px;
}

.phone__card
{
	padding: 14px;
	border-radius: 10px;
	background: var(--lm-bg-deep);
	border: 1px solid var(--lm-line);
}

.phone__card-label
{
	font-family: var(--font-mono);
	font-size: 9px;
	color: var(--lm-fg-dim);
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.phone__big
{
	font-family: var(--font-display);
	font-size: 36px;
	font-weight: 600;
	letter-spacing: -0.03em;
	color: var(--lm-fg);
	margin-top: 4px;
}

.phone__delta
{
	font-family: var(--font-mono);
	font-size: 9px;
	color: var(--lm-accent);
	margin-top: 4px;
}

.phone__list
{
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 8px;
	list-style: none;
}

.phone__list-row
{
	padding: 10px 12px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid transparent;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.phone__list-row.is-active
{
	background: var(--lm-accent-soft);
	border-color: var(--lm-accent-dim);
}

.phone__list-row strong
{
	font-family: var(--font-sans);
	font-size: 12px;
	font-weight: 600;
	color: var(--lm-fg);
}

.phone__list-row em
{
	display: block;
	font-family: var(--font-mono);
	font-size: 9px;
	color: var(--lm-fg-dim);
	font-style: normal;
	margin-top: 2px;
}

.phone__pip
{
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: var(--lm-fg-faint);
}

.phone__list-row.is-active .phone__pip
{
	background: var(--lm-accent);
	box-shadow: 0 0 8px var(--lm-accent);
}

.phone__tabs
{
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	gap: 4px;
	padding: 10px 0 4px;
	border-top: 1px solid var(--lm-line);
}

.phone__tab
{
	font-family: var(--font-mono);
	font-size: 8px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-align: center;
	color: var(--lm-fg-faint);
}

.phone__tab.is-active
{
	color: var(--lm-accent);
}

/* MacBook frame */

.macbook
{
	width: min(680px, 100%);
	position: relative;
}

.macbook__screen
{
	width: 100%;
	height: 420px;
	border-radius: 10px 10px 2px 2px;
	background: #0a0d12;
	padding: 6px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45),
				0 0 0 1px rgba(255, 255, 255, 0.06);
	position: relative;
}

.macbook__logo
{
	position: absolute;
	top: 4px;
	left: 50%;
	transform: translateX(-50%);
	font-family: var(--font-mono);
	font-size: 7px;
	color: var(--lm-fg-faint);
	letter-spacing: 0.2em;
}

.macbook__display
{
	width: 100%;
	height: 100%;
	border-radius: 6px 6px 2px 2px;
	background: var(--lm-bg);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.macbook__titlebar
{
	padding: 8px 12px;
	border-bottom: 1px solid var(--lm-line);
	display: flex;
	align-items: center;
	gap: 6px;
	background: var(--lm-bg-deep);
}

.macbook__titlebar .terminal__dot
{
	width: 8px;
	height: 8px;
}

.macbook__title
{
	margin-left: auto;
	font-family: var(--font-mono);
	font-size: 9px;
	color: var(--lm-fg-dim);
}

.macbook__body
{
	flex: 1;
	display: grid;
	grid-template-columns: 0.7fr 1.5fr 1fr;
	gap: 1px;
	background: var(--lm-line);
}

.macbook__col
{
	background: var(--lm-bg-deeper);
	padding: 10px 12px;
}

.macbook__col--mid
{
	background: #05080d;
	position: relative;
}

.macbook__rowlist
{
	margin-top: 8px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	list-style: none;
}

.macbook__rowlist li
{
	font-family: var(--font-mono);
	font-size: 10px;
	color: var(--lm-fg);
	display: flex;
	justify-content: space-between;
}

.macbook__rowlist li.is-active span:first-child
{
	color: var(--lm-accent);
}

.macbook__rowlist li.is-accent span:last-child
{
	color: var(--lm-accent);
}

.macbook__rowlist li span:last-child
{
	opacity: 0.6;
}

.macbook__chart
{
	width: 100%;
	height: 140px;
	margin-top: 8px;
}

.macbook__kpis
{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin-top: 8px;
}

.macbook__kpi
{
	padding: 6px;
	border-radius: 4px;
	border: 1px solid var(--lm-line);
}

.macbook__kpi-value
{
	font-family: var(--font-display);
	font-size: 14px;
	color: var(--lm-fg);
	font-weight: 600;
}

.macbook__kpi--accent .macbook__kpi-value
{
	color: var(--lm-accent);
}

.macbook__base
{
	width: 104%;
	margin-left: -2%;
	height: 10px;
	background: linear-gradient(180deg, #1a1d24 0%, #0a0d12 100%);
	border-radius: 2px 2px 8px 8px;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
	position: relative;
}

.macbook__notch
{
	position: absolute;
	left: 50%;
	top: 1px;
	transform: translateX(-50%);
	width: 70px;
	height: 3px;
	border-radius: 2px;
	background: rgba(0, 0, 0, 0.4);
}

/* =====================================
 * 12. Section: beyond vibe coding
 * ===================================== */

.section--vibe
{
	padding: 160px var(--gutter);
}

.vibe__head
{
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 80px;
	align-items: end;
	margin-bottom: 96px;
}

.vibe__head-copy
{
	font-size: 17px;
	line-height: 1.6;
	color: var(--lm-fg-dim);
	max-width: 480px;
	margin: 0;
}

.contrast-grid
{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1px;
	background: var(--lm-line);
	border: 1px solid var(--lm-line);
	margin-bottom: 120px;
}

.contrast-card
{
	padding: 52px 44px;
	min-height: 360px;
	background: var(--lm-bg-alt);
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.contrast-card__head
{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.contrast-card__body
{
	margin-top: 32px;
}

.contrast-card__title
{
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--fs-contrast-h3);
	line-height: 1.1;
	letter-spacing: -0.025em;
	margin: 0 0 28px;
	color: var(--lm-fg);
}

.contrast-card.is-dim .contrast-card__title
{
	color: var(--lm-fg-dim);
}

.contrast-list
{
	list-style: none;
	padding: 0;
	margin: 0;
}

.contrast-list li
{
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: 1.55;
	color: var(--lm-fg);
	padding: 14px 0;
	border-top: 1px solid var(--lm-line);
	display: flex;
	gap: 16px;
}

.contrast-card.is-dim .contrast-list li
{
	color: var(--lm-fg-dim);
}

.contrast-list__pip
{
	flex-shrink: 0;
	margin-top: 8px;
	width: 6px;
	height: 6px;
	background: var(--lm-accent);
	box-shadow: 0 0 8px var(--lm-accent);
}

.contrast-card.is-dim .contrast-list__pip
{
	background: var(--lm-fg-faint);
	border-radius: 999px;
	box-shadow: none;
}

.cross
{
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: 80px;
	align-items: start;
	padding-top: 64px;
	border-top: 1px solid var(--lm-line);
}

.cross__title
{
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--fs-cross-h3);
	line-height: 0.98;
	letter-spacing: -0.04em;
	margin: 20px 0 24px;
	color: var(--lm-fg);
}

.cross__copy
{
	font-size: 17px;
	line-height: 1.6;
	color: var(--lm-fg-dim);
	max-width: 460px;
	margin: 0;
}

.cross__grid
{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: var(--lm-line);
	border: 1px solid var(--lm-line);
}

.cross__cell
{
	background: var(--lm-bg-alt);
	padding: 28px 24px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-height: 132px;
}

.cross__cell-value
{
	font-family: var(--font-display);
	font-size: 18px;
	font-weight: 500;
	letter-spacing: -0.015em;
	color: var(--lm-fg);
	line-height: 1.3;
}

.vibe__orb
{
	left: 10%;
	top: 20%;
	width: 520px;
	height: 520px;
}

/* =====================================
 * 13. Section: how we work
 * ===================================== */

.section--how
{
	padding: 160px var(--gutter);
}

.how__head
{
	margin-bottom: 96px;
}

.how__rail
{
	position: relative;
	padding-left: 96px;
}

.how__rail-base
{
	position: absolute;
	left: 24px;
	top: 0;
	bottom: 0;
	width: 1px;
	background: var(--lm-line);
}

.how__rail-progress
{
	position: absolute;
	left: 24px;
	top: 0;
	width: 1px;
	background: var(--lm-accent);
	box-shadow: 0 0 16px var(--lm-accent);
	transition: height 150ms linear;
	height: 0;
}

.how-step
{
	position: relative;
	padding: 32px 0 56px;
	opacity: 0.35;
	transition: opacity var(--medium) var(--ease);
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: 72px;
	align-items: start;
}

.how-step.is-active
{
	opacity: 1;
}

.how-step__pip
{
	position: absolute;
	left: -81px;
	top: 40px;
	width: 14px;
	height: 14px;
	background: var(--lm-bg-alt);
	border: 1px solid var(--lm-line-strong);
	transition: background var(--medium) var(--ease),
				border-color var(--medium) var(--ease),
				box-shadow var(--medium) var(--ease);
}

.how-step.is-active .how-step__pip
{
	background: var(--lm-accent);
	border-color: var(--lm-accent);
	box-shadow: 0 0 20px var(--lm-accent);
}

.how-step__title
{
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--fs-h3);
	line-height: 0.96;
	letter-spacing: -0.04em;
	margin: 14px 0 0;
	color: var(--lm-fg);
}

.how-step__copy
{
	font-size: 17px;
	line-height: 1.55;
	color: var(--lm-fg-dim);
	max-width: 480px;
	margin: 0;
}

.how-step__body
{
	padding-top: 36px;
}

.how-step__code
{
	margin-top: 24px;
	padding: 12px 16px;
	background: var(--lm-bg);
	border: 1px solid var(--lm-line);
	border-radius: var(--radius-sm);
	font-family: var(--font-mono);
	font-size: 13px;
	color: var(--lm-accent);
	max-width: 480px;
}

.how__footer
{
	text-align: center;
	margin-top: 80px;
}

/* =====================================
 * 14. Section: proof
 * ===================================== */

.metrics-grid
{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: var(--lm-line);
	border: 1px solid var(--lm-line);
}

.metric
{
	padding: 48px 28px;
	background: var(--lm-bg-alt);
	min-height: 260px;
}

.metric__value
{
	font-family: var(--font-display);
	font-size: var(--fs-h3);
	font-weight: 600;
	letter-spacing: -0.045em;
	line-height: 1;
	color: var(--lm-fg);
}

.metric__label
{
	display: block;
	margin-top: 20px;
}

.metric__sub
{
	font-family: var(--font-sans);
	font-size: 14px;
	color: var(--lm-fg-dim);
	margin-top: 8px;
}

.quote
{
	margin-top: 96px;
	padding: 56px 64px;
	border: 1px solid var(--lm-line);
	background: var(--lm-bg-alt);
}

.quote__text
{
	font-family: var(--font-display);
	font-size: clamp(24px, 2.6vw, 34px);
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.2;
	margin: 20px 0 0;
	color: var(--lm-fg);
	max-width: 1000px;
}

/* =====================================
 * 15. Section: work
 * ===================================== */

.work__head
{
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 72px;
	flex-wrap: wrap;
	gap: 24px;
}

.work__row
{
	display: grid;
	gap: 20px;
	margin-bottom: 20px;
}

.work__row--a { grid-template-columns: 1.4fr 1fr; }
.work__row--b { grid-template-columns: 1fr 1.4fr; }

.work-tile
{
	position: relative;
	min-height: 400px;
	padding: 32px;
	border-radius: var(--radius-md);
	overflow: hidden;
	background: var(--lm-bg);
	border: 1px solid var(--lm-line);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	transition: transform var(--medium) var(--ease),
				box-shadow var(--medium) var(--ease),
				border-color var(--medium) var(--ease);
	color: inherit;
	text-decoration: none;
}

.work-tile--tall
{
	min-height: 520px;
}

a.work-tile
{
	cursor: pointer;
}

a.work-tile:hover,
a.work-tile:focus-visible
{
	transform: translateY(-3px);
	border-color: var(--lm-accent);
	box-shadow: 0 0 0 1px var(--lm-accent-dim),
				0 20px 60px rgba(0, 0, 0, 0.6);
}

.work-tile__pending
{
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--lm-fg-faint);
}

.work-tile__head,
.work-tile__foot
{
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.work-tile__foot
{
	align-items: flex-end;
	gap: 20px;
}

.work-tile__title
{
	font-family: var(--font-display);
	font-size: 20px;
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.3;
	margin: 0;
	color: var(--lm-fg);
	max-width: 460px;
}

/* Faux product window inside work tiles */

.product
{
	flex: 1;
	margin: 28px 0;
	border-radius: var(--radius-sm);
	border: 1px solid var(--lm-line);
	background: var(--lm-bg-deep);
	position: relative;
	overflow: hidden;
}

.product__bar
{
	padding: 10px 14px;
	border-bottom: 1px solid var(--lm-line);
	display: flex;
	gap: 6px;
	align-items: center;
}

.product__bar .terminal__dot
{
	width: 6px;
	height: 6px;
}

.product__path
{
	margin-left: 10px;
	font-size: var(--fs-mono-sm);
}

.product__body
{
	padding: 18px;
	display: grid;
	grid-template-columns: 1fr 1.8fr;
	gap: 14px;
	height: calc(100% - 32px);
}

.product__rail
{
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.product__row
{
	padding: 8px 10px;
	border-radius: 3px;
	background: var(--lm-bg-alt);
	border-left: 2px solid transparent;
}

.product__row.is-active
{
	border-left-color: var(--lm-accent);
}

.product__bar-fill
{
	height: 4px;
	background: var(--lm-line-strong);
	border-radius: 1px;
}

.product__row.is-active .product__bar-fill
{
	background: var(--lm-accent);
}

.product__bar-fill-sm
{
	height: 3px;
	background: var(--lm-line);
	border-radius: 1px;
	margin-top: 5px;
}

.product__main
{
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.product__kpis
{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
}

.product__kpi
{
	padding: 10px;
	border-radius: 3px;
	border: 1px solid var(--lm-line);
	background: var(--lm-bg-alt);
}

.product__kpi-value
{
	font-family: var(--font-display);
	font-size: 20px;
	font-weight: 600;
	margin-top: 4px;
	color: var(--lm-fg);
}

.product__kpi--accent .product__kpi-value
{
	color: var(--lm-accent);
}

.product__chart
{
	flex: 1;
	border-radius: 3px;
	border: 1px solid var(--lm-line);
	background: var(--lm-bg-alt);
	padding: 10px;
	position: relative;
	min-height: 90px;
	overflow: hidden;
}

.product__chart svg
{
	width: 100%;
	height: 100%;
}

/* =====================================
 * 16. Section: final CTA
 * ===================================== */

.section--final-cta
{
	padding: 160px var(--gutter);
}

.final-cta
{
	text-align: center;
}

.final-cta__title
{
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--fs-cta-display);
	line-height: 0.92;
	letter-spacing: -0.055em;
	margin: 24px 0 0;
	color: var(--lm-fg);
}

.final-cta__title .accent
{
	color: var(--lm-accent);
	text-shadow: 0 0 50px var(--lm-accent-dim);
}

.final-cta__lede
{
	font-size: var(--fs-body-lg);
	line-height: 1.55;
	color: var(--lm-fg-dim);
	margin: 36px auto 0;
	max-width: 560px;
}

.final-cta__ctas
{
	display: flex;
	gap: 12px;
	justify-content: center;
	margin-top: 48px;
	flex-wrap: wrap;
}

.final-cta__orb
{
	left: 50%;
	top: 50%;
	width: 800px;
	height: 800px;
	transform: translate(-50%, -50%);
}

/* =====================================
 * 16b. Section: Contact form
 *
 * Composes with the final-cta block. The form, side panel, and success
 * card share a CSS grid so the same headline can sit above a real form
 * instead of a row of mailto buttons.
 * ===================================== */

.contact-grid
{
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	grid-template-areas:
		"intro intro"
		"form  side"
		"success side";
	gap: 56px 80px;
	align-items: start;
	max-width: var(--max);
	margin-inline: auto;
	text-align: left;
}

.contact-intro
{
	grid-area: intro;
	max-width: 760px;
}

.contact-intro .final-cta__title
{
	margin-top: 24px;
}

.contact-intro .final-cta__lede
{
	margin: 32px 0 0;
}

.contact-form
{
	grid-area: form;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 32px;
	padding: 40px;
	border: 1px solid var(--lm-line);
	border-radius: var(--radius-md);
	background: var(--lm-bg-alt);
}

.contact-form[hidden]
{
	display: none;
}

.contact-form-honeypot
{
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.contact-progress
{
	display: block;
	height: 3px;
	border-radius: 999px;
	background: var(--lm-line);
	overflow: hidden;
	position: relative;
}

.contact-progress::after
{
	content: "";
	display: block;
	height: 100%;
	width: var(--progress, 0%);
	background: var(--lm-accent);
	border-radius: inherit;
	transition: width var(--medium) var(--ease);
	box-shadow: 0 0 8px var(--lm-accent);
}

.contact-group
{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	padding: 0;
	border: 0;
}

.contact-field
{
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.contact-field--full
{
	grid-column: 1 / -1;
}

.contact-label
{
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--lm-fg-dim);
}

.contact-required
{
	color: var(--lm-accent);
}

.contact-input,
.contact-textarea,
.contact-select
{
	font-family: var(--font-sans);
	font-size: 15px;
	color: var(--lm-fg);
	background: var(--lm-bg);
	border: 1px solid var(--lm-line-strong);
	border-radius: var(--radius-sm);
	padding: 12px 14px;
	min-height: 44px;
	transition: border-color var(--fast) var(--ease),
				box-shadow var(--fast) var(--ease);
}

.contact-textarea
{
	resize: vertical;
	min-height: 132px;
}

.contact-input:focus,
.contact-textarea:focus,
.contact-select:focus
{
	outline: none;
	border-color: var(--lm-accent);
	box-shadow: 0 0 0 3px var(--lm-accent-soft);
}

.contact-actions
{
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
	padding-top: 24px;
	border-top: 1px solid var(--lm-line);
}

.contact-fineprint
{
	font-size: 13px;
	color: var(--lm-fg-dim);
	max-width: 52ch;
	flex: 1;
	min-width: 0;
	margin: 0;
	line-height: 1.5;
}

.contact-success
{
	grid-area: success;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 48px 40px;
	border: 1px solid var(--lm-accent-dim);
	border-radius: var(--radius-md);
	background: var(--lm-bg-alt);
}

.contact-success[hidden]
{
	display: none;
}

.contact-success:focus
{
	outline: none;
}

.contact-success__title
{
	font-family: var(--font-display);
	font-size: 28px;
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.2;
	color: var(--lm-fg);
	margin: 0;
}

.contact-success__copy
{
	font-size: 15px;
	color: var(--lm-fg-dim);
	margin: 0;
	line-height: 1.6;
}

.contact-success-actions
{
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 12px;
}

.contact-error
{
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px 24px;
	border: 1px solid var(--lm-danger);
	border-radius: var(--radius-sm);
	background: var(--lm-danger-wash);
}

.contact-error[hidden]
{
	display: none;
}

.contact-error__title
{
	font-family: var(--font-display);
	font-size: 15px;
	font-weight: 600;
	color: var(--lm-fg);
	margin: 0;
}

.contact-error__body
{
	font-size: 14px;
	color: var(--lm-fg-dim);
	margin: 0;
}

.contact-field-hint
{
	margin: 4px 0 0;
	font-size: 12px;
	color: var(--lm-danger);
	font-family: var(--font-mono);
	letter-spacing: 0.02em;
}

.contact-input[aria-invalid="true"],
.contact-select[aria-invalid="true"],
.contact-textarea[aria-invalid="true"]
{
	border-color: var(--lm-danger);
}

.contact-input[aria-invalid="true"]:focus,
.contact-select[aria-invalid="true"]:focus,
.contact-textarea[aria-invalid="true"]:focus
{
	box-shadow: 0 0 0 3px var(--lm-danger-wash);
}

.contact-side
{
	grid-area: side;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.contact-block
{
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px 24px;
	border: 1px solid var(--lm-line);
	border-radius: var(--radius-sm);
	background: var(--lm-bg-alt);
}

.contact-block__title
{
	font-family: var(--font-display);
	font-size: 18px;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--lm-fg);
	margin: 0;
}

.contact-block__note
{
	font-size: 14px;
	color: var(--lm-fg-dim);
	margin: 0;
}

.contact-link
{
	font-family: var(--font-mono);
	font-size: 13px;
	letter-spacing: 0.02em;
	color: var(--lm-accent);
	text-decoration: none;
	transition: opacity var(--fast) var(--ease);
	word-break: break-word;
}

.contact-link:hover,
.contact-link:focus-visible
{
	opacity: 0.7;
}

.cta[aria-busy="true"]
{
	opacity: 0.7;
	cursor: wait;
}

/* Visually hidden but accessible to screen readers. Used for the form
   status announcer. */
.sr-only
{
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Skip-link — keyboard-only navigation aid. */
.skip-link
{
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
	padding: 12px 16px;
	background: var(--lm-accent);
	color: #05070b;
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	border-radius: 0 0 var(--radius-sm) 0;
}

.skip-link:focus
{
	left: 0;
	outline: 2px solid var(--lm-accent);
	outline-offset: -2px;
}

/* =====================================
 * 16c. Services page
 * ===================================== */

.services-hero
{
	padding: 96px var(--gutter) 0;
}

.services-hero__inner
{
	max-width: var(--max);
	margin-inline: auto;
}

.services-hero__title
{
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(56px, 7vw, 112px);
	line-height: 0.92;
	letter-spacing: -0.05em;
	margin: 24px 0 0;
	color: var(--lm-fg);
}

.services-hero__lede
{
	font-size: var(--fs-body-lg);
	line-height: 1.55;
	color: var(--lm-fg-dim);
	margin: 40px 0 0;
	max-width: 640px;
}

/* Studio photo hero on the services page — the office is the pitch.
   Reuses the work-band image machinery (drift + grade + veil); the
   headline sits over the dark louvre wall on the photo's left. */
.services-hero--studio
{
	position: relative;
	overflow: hidden;
	padding: 190px var(--gutter) 150px;
	background: #05070b;
	--lm-fg:       rgba(255, 255, 255, 0.96);
	--lm-fg-dim:   rgba(255, 255, 255, 0.80);
	--lm-fg-faint: rgba(255, 255, 255, 0.30);
}

.services-hero--studio .work-band__img
{
	object-position: 62% 36%;
	/* The default band grade (saturate 1.6) pushes the brick orange;
	   full desaturation went cold. This sits between — warmth in the
	   timber and brick, without the orange glow. */
	filter: saturate(0.88) contrast(1.1) brightness(1.0);
}

/* Deeper veil behind the headline column — the photo's bright doorway
   sits mid-frame, so the text side needs more shade than a work band. */
.services-hero--studio .work-band__veil
{
	background:
		linear-gradient(180deg, rgba(5, 7, 11, 0.32), rgba(5, 7, 11, 0.26) 40%, rgba(5, 7, 11, 0.80) 92%),
		linear-gradient(90deg, rgba(5, 7, 11, 0.74), rgba(5, 7, 11, 0.40) 44%, rgba(5, 7, 11, 0.08) 72%);
}

.services-hero--studio .services-hero__inner
{
	position: relative;
	z-index: 1;
}

@media (max-width: 720px)
{
	.services-hero--studio
	{
		padding: 140px var(--gutter) 110px;
	}
}

.service-row
{
	display: grid;
	grid-template-columns: 140px 1fr 1fr 320px;
	gap: 48px;
	align-items: start;
	padding: 56px 0;
	border-top: 1px solid var(--lm-line);
}

.service-row__meta
{
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.service-row__title
{
	font-family: var(--font-display);
	font-size: clamp(40px, 4.4vw, 68px);
	font-weight: 600;
	letter-spacing: -0.035em;
	line-height: 0.97;
	color: var(--lm-fg);
	margin: 0;
}

.service-row__copy
{
	font-size: 17px;
	line-height: 1.55;
	color: var(--lm-fg-dim);
	margin: 0;
	max-width: 440px;
}

.service-list
{
	list-style: none;
	padding: 0;
	margin: 12px 0 0;
}

.service-list li
{
	font-size: 15px;
	padding: 12px 0;
	border-top: 1px solid var(--lm-line);
	color: var(--lm-fg);
	line-height: 1.5;
}

.service-list li:first-child
{
	border-top: 0;
	padding-top: 0;
}

/* Claris / FileMaker feature band */
.claris-band
{
	padding: 96px var(--gutter);
	border-top: 1px solid var(--lm-line);
	background: var(--lm-bg-alt);
}

.claris-band__inner
{
	max-width: var(--max);
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 80px;
	align-items: start;
}

.claris-band__head
{
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.claris-band__title
{
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(40px, 5vw, 72px);
	line-height: 0.96;
	letter-spacing: -0.045em;
	color: var(--lm-fg);
	margin: 0;
}

.claris-band__copy
{
	font-size: 17px;
	line-height: 1.6;
	color: var(--lm-fg-dim);
	margin: 0;
	max-width: 520px;
}

.claris-credits
{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}

.claris-credit
{
	padding: 24px;
	border: 1px solid var(--lm-line);
	border-radius: var(--radius-sm);
	background: var(--lm-bg);
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.claris-credit__value
{
	font-family: var(--font-display);
	font-size: 32px;
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1;
	color: var(--lm-fg);
}

.claris-credit__value--accent
{
	color: var(--lm-accent);
}

.claris-credit__label
{
	font-size: 13px;
	line-height: 1.5;
	color: var(--lm-fg-dim);
}

/* =====================================
 * 16d. Case study page
 * ===================================== */

.case-spec
{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	margin-top: 64px;
	border-top: 1px solid var(--lm-line);
	border-bottom: 1px solid var(--lm-line);
}

.case-spec__cell
{
	padding: 24px 24px;
	border-right: 1px solid var(--lm-line);
}

.case-spec__cell:last-child
{
	border-right: 0;
}

.case-spec__value
{
	font-family: var(--font-display);
	font-size: 20px;
	font-weight: 600;
	letter-spacing: -0.015em;
	margin-top: 8px;
	color: var(--lm-fg);
}

.case-brief
{
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: 96px;
	max-width: var(--max);
	margin-inline: auto;
	padding: 96px var(--gutter);
}

.case-brief__lead
{
	font-family: var(--font-display);
	font-size: clamp(22px, 2.4vw, 30px);
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.35;
	color: var(--lm-fg);
	margin: 0;
	max-width: 780px;
}

.case-brief__body
{
	font-size: 17px;
	line-height: 1.65;
	color: var(--lm-fg-dim);
	margin: 28px 0 0;
	max-width: 720px;
}

.case-outcomes
{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	border-top: 1px solid var(--lm-line);
}

.case-outcome
{
	padding: 48px 32px;
	border-right: 1px solid var(--lm-line);
	border-bottom: 1px solid var(--lm-line);
	min-height: 260px;
	background: var(--lm-bg);
}

.case-outcome:last-child
{
	border-right: 0;
}

.case-outcome__big
{
	font-family: var(--font-display);
	font-size: clamp(44px, 5.2vw, 80px);
	font-weight: 600;
	letter-spacing: -0.045em;
	line-height: 1;
	color: var(--lm-fg);
}

.case-outcome__label
{
	display: block;
	margin-top: 16px;
}

.case-outcome__copy
{
	font-size: 15px;
	line-height: 1.6;
	color: var(--lm-fg-dim);
	margin-top: 14px;
	max-width: 300px;
}

/* =====================================
 * 16e. Clients strip (homepage)
 * ===================================== */

.clients-strip
{
	padding: 96px var(--gutter);
	background: var(--lm-bg);
	border-top: 1px solid var(--lm-line);
}

.clients-strip__inner
{
	max-width: var(--max);
	margin-inline: auto;
}

.clients-strip__head
{
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: 80px;
	align-items: end;
	margin-bottom: 56px;
}

.clients-strip__copy
{
	font-size: 17px;
	line-height: 1.6;
	color: var(--lm-fg-dim);
	margin: 0;
	max-width: 520px;
}

.clients-grid
{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: var(--lm-line);
	border: 1px solid var(--lm-line);
}

.client-card
{
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 32px;
	background: var(--lm-bg-alt);
	color: inherit;
	text-decoration: none;
	transition: background var(--medium) var(--ease);
	min-height: 200px;
}

.client-card:hover,
.client-card:focus-visible
{
	background: var(--lm-bg);
}

.client-card__head
{
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.client-card__name
{
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--lm-fg);
	margin: 8px 0 0;
}

.client-card__copy
{
	font-size: 14px;
	line-height: 1.55;
	color: var(--lm-fg-dim);
	margin: 0;
}

.client-card__arrow
{
	color: var(--lm-fg-faint);
	transition: color var(--fast) var(--ease), transform var(--fast) var(--ease);
}

.client-card:hover .client-card__arrow,
.client-card:focus-visible .client-card__arrow
{
	color: var(--lm-accent);
	transform: translateX(4px);
}

/* =====================================
 * 17. Utilities
 * ===================================== */

.visually-hidden
{
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.eyebrow
{
	display: inline-block;
}

/* =====================================
 * 19. Responsive
 * ===================================== */

@media (max-width: 1080px)
{
	:root
	{
		--gutter: 32px;
	}

	.hero__grid,
	.devices__head,
	.devices__stage,
	.vibe__head,
	.cross,
	.how-step
	{
		grid-template-columns: 1fr;
		gap: 48px;
	}

	.section-head
	{
		flex-direction: column;
		align-items: flex-start;
	}

	.cards-grid,
	.contrast-grid
	{
		grid-template-columns: 1fr;
	}

	.cross__grid,
	.platforms-grid,
	.metrics-grid
	{
		grid-template-columns: repeat(2, 1fr);
	}

	.work__row--a,
	.work__row--b
	{
		grid-template-columns: 1fr;
	}

	.how__rail
	{
		padding-left: 56px;
	}

	.how-step__pip
	{
		left: -41px;
	}

	.macbook
	{
		max-width: 600px;
	}

	.macbook__screen
	{
		height: 380px;
	}

	.contact-grid
	{
		grid-template-columns: 1fr;
		grid-template-areas:
			"intro"
			"form"
			"success"
			"side";
		gap: 40px;
	}

	.contact-form
	{
		padding: 32px;
	}

	.service-row
	{
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.claris-band__inner
	{
		grid-template-columns: 1fr;
		gap: 48px;
	}

	.case-spec
	{
		grid-template-columns: repeat(2, 1fr);
	}

	.case-spec__cell:nth-child(2)
	{
		border-right: 0;
	}

	.case-brief
	{
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.case-outcomes
	{
		grid-template-columns: 1fr;
	}

	.case-outcome
	{
		border-right: 0;
	}

	.clients-strip__head,
	.clients-grid
	{
		grid-template-columns: 1fr;
	}

	.clients-grid
	{
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Compact chrome: links + bar CTA fold into the burger sheet. */
@media (max-width: 900px)
{
	.site-header__nav { display: none; }
	.site-header .cta-hud { display: none; }
	.nav-burger { display: inline-flex; }

	/* Tall mobile hero content overflows the 96vh centred flex box
	   upward, past the padding and under the fixed pill — flow from
	   the top instead. (.section.section--hero outranks the later
	   ≤640 `.section { padding: 96px … }` shorthand.) */
	.section.section--hero
	{
		padding-top: 140px;
		justify-content: flex-start;
	}
}

@media (min-width: 901px)
{
	.site-menu { display: none; }
}

@media (max-width: 640px)
{
	:root
	{
		--gutter: 20px;
	}

	.section
	{
		padding: 96px var(--gutter);
	}

	.site-header
	{
		top: 10px;
		width: calc(100% - 24px);
		padding: 7px 8px 7px 18px;
	}

	.site-header__brand img
	{
		height: 30px;
	}

	.hero__lede,
	.final-cta__lede
	{
		font-size: 16px;
	}

	.macbook
	{
		max-width: 480px;
	}

	.macbook__screen
	{
		height: 320px;
	}

	.devices__stage
	{
		padding: 32px 0;
		min-height: 0;
	}

	.cross__grid,
	.platforms-grid,
	.metrics-grid
	{
		grid-template-columns: 1fr;
	}

	.metric
	{
		min-height: 0;
		padding: 36px 24px;
	}

	.quote
	{
		padding: 32px 24px;
	}

	.build-card,
	.contrast-card
	{
		padding: 36px 28px;
	}

	.contact-form
	{
		padding: 24px;
	}

	.contact-group
	{
		grid-template-columns: 1fr;
	}

	.contact-success
	{
		padding: 32px 24px;
	}

	.case-spec
	{
		grid-template-columns: 1fr;
	}

	.case-spec__cell
	{
		border-right: 0;
		border-bottom: 1px solid var(--lm-line);
	}

	.case-spec__cell:last-child
	{
		border-bottom: 0;
	}

	.clients-grid
	{
		grid-template-columns: 1fr;
	}

	.claris-credits
	{
		grid-template-columns: 1fr;
	}
}

/* =====================================
 * 99. Sandbox pages — REMOVE IF SHELVED
 * =====================================
 *
 * Sealed experimental landing pages for the AI-architect / terraform
 * rebrand direction. Every rule is scoped under .page-terraform or
 * .page-architects so it cannot bleed into production pages. If the
 * sandbox direction doesn't land, delete this entire block.
 * ===================================== */

/* Terrain canvas — used by .page-terraform only. Sits behind everything
   else in the hero, including the mesh-grid (which it should be DOM-
   declared before, so it paints first at the same z-index). */
.page-terraform terrain-field
{
	position: absolute;
	inset: 0;
	display: block;
	pointer-events: none;
	z-index: 0;
}

.page-terraform terrain-field canvas
{
	display: block;
	width: 100%;
	height: 100%;
	mask-image:         linear-gradient(to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%);
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%);
}

/* Long sandbox headlines need a smaller display size — the production
   h1 of clamp(60px, 8.8vw, 140px) is sized for "We are software
   developers." (4 words). Both sandbox h1s are 8-10 words. */
.page-terraform .hero__title,
.page-architects .hero__title
{
	font-size: clamp(36px, 4.6vw, 72px);
	line-height: 1.05;
	letter-spacing: -0.035em;
}

/* Sandbox status pill mono text — slightly more breathing room than
   production because the pills are longer ("// terraforming since 2006"). */
.page-terraform .status-pill .mono,
.page-architects .status-pill .mono
{
	letter-spacing: 0.02em;
}

/* "What we terraform" cards (Page A) — terrain-themed corner glyph,
   slightly warmer accent edge. */
.page-terraform .build-card--territory
{
	border-color: var(--lm-accent-dim);
}

.page-terraform .build-card--territory .build-card__corner
{
	color: var(--lm-accent);
	opacity: 0.85;
}

/* "Systems we architect" cards (Page B) — flat-but-confident look,
   no extra ornamentation, just sharpened mono labels. */
.page-architects .build-card .mono--accent
{
	letter-spacing: 0.04em;
}

/* Sandbox close — both pages use a simplified final-CTA panel with no
   form; .section--final-cta from production has a contact-grid that
   assumes the form is present. Sandbox uses a single-column variant. */
.page-terraform .section--final-cta .contact-grid,
.page-architects .section--final-cta .contact-grid
{
	grid-template-columns: 1fr;
	max-width: 820px;
	margin-inline: auto;
	text-align: left;
}

.page-terraform .sandbox-cta-actions,
.page-architects .sandbox-cta-actions
{
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	margin-top: 36px;
}

.page-terraform .sandbox-cta-note,
.page-architects .sandbox-cta-note
{
	margin-top: 28px;
	color: var(--lm-fg-dim);
	font-family: var(--font-mono);
	font-size: var(--fs-mono);
	letter-spacing: 0.02em;
}

/* Sandbox "noindex" stamp — small mono marker top-right of every
   sandbox page, just for the user when they're previewing so they
   never confuse the sandbox with the live site. */
.page-terraform::before,
.page-architects::before,
.page-scene::before,
.page-gradient::before,
.page-editor::before,
.page-constellation::before,
.page-survey::before,
.page-depth::before
{
	content: "// sandbox · noindex · not live";
	position: fixed;
	top: 14px;
	right: 18px;
	z-index: 100;
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.08em;
	color: var(--lm-accent);
	background: rgba(5, 7, 11, 0.7);
	padding: 6px 10px;
	border: 1px solid var(--lm-accent-dim);
	border-radius: var(--radius-sm);
	pointer-events: none;
	text-transform: lowercase;
}

/* Shared sandbox hero title sizing for the longer headlines. */
.page-scene .hero__title,
.page-gradient .hero__title,
.page-editor .hero__title,
.page-constellation .hero__title,
.page-survey .hero__title,
.page-depth .hero__title
{
	font-size: clamp(36px, 4.6vw, 72px);
	line-height: 1.05;
	letter-spacing: -0.035em;
}

/* =====================================
 * DEPTH — CSS-3D layered parallax stage (cursor tilts, scroll dollies)
 * Real DOM layers in a preserve-3d scene; <parallax-stage> eases the tilt.
 * ===================================== */

/* The shared `body { overflow-x: hidden }` makes the body a scroll container,
   which breaks position: sticky. `clip` clips the same overflow WITHOUT
   establishing a scroll container, so the pinned camera frame works. Scoped
   to this page only. (The wide grid planes are clipped by .pstage-sticky.) */
body.page-depth { overflow-x: clip; }

/* The hero is a TALL scroll track; the camera move is scrubbed against it.
   It's always dark, so force light foreground tokens regardless of theme. */
.page-depth .section--hero.pstage-scroll
{
	position: relative;
	display: block;         /* override .section--hero flex centering, which
	                           would push the sticky child ~1080px down */
	height: 340vh;          /* scroll distance for the fly-through */
	padding: 0;
	min-height: 0;
	/* `.section { overflow: hidden }` would make this the sticky scroll
	   container (pinning the camera to the section, not the viewport).
	   clip-x suppresses horizontal scrollbar without that side effect;
	   visible-y lets the child pin to the viewport. */
	overflow-x: clip;
	overflow-y: visible;
	background:
		radial-gradient(ellipse 90% 60% at 50% 30%, rgba(49,197,244,0.12) 0%, transparent 60%),
		#01030a;
	--lm-fg:       rgba(255, 255, 255, 0.97);
	--lm-fg-dim:   rgba(255, 255, 255, 0.74);
	--lm-fg-faint: rgba(255, 255, 255, 0.30);
}

/* The camera frame: pinned viewport-sized window where perspective lives. */
.page-depth .pstage-sticky
{
	position: sticky;
	top: 0;
	height: 100vh;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	perspective: 1100px;
	perspective-origin: 50% 46%;
}

parallax-stage
{
	position: absolute;
	inset: 0;
	display: block;
	transform-style: preserve-3d;
	pointer-events: none;   /* let the section catch mousemove; links re-enable */
}

/* The single moving rig: cursor sets --rx/--ry, scroll sets --cz. */
.pstage
{
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
	transform:
		translate3d(var(--ox, 0px), var(--oy, 0px), var(--cz, 0px))
		rotateX(var(--rx, 0deg))
		rotateY(var(--ry, 0deg));
	will-change: transform;
}

/* Every layer shares the stage centre and stays in the 3D context. */
.pstage > *
{
	position: absolute;
	left: 50%;
	top: 50%;
	transform-style: preserve-3d;
}

/* --- Neon grid floor + ceiling: the dominant depth cue --- */
.pstage-grid
{
	width: 2600px;
	height: 1900px;
	margin: -950px 0 0 -1300px;
	background-image:
		repeating-linear-gradient(0deg,  transparent 0 89px, rgba(49,197,244,0.55) 89px 90px),
		repeating-linear-gradient(90deg, transparent 0 89px, rgba(49,197,244,0.32) 89px 90px);
	-webkit-mask-image: radial-gradient(ellipse 46% 58% at 50% 50%, #000 0%, transparent 70%);
	        mask-image: radial-gradient(ellipse 46% 58% at 50% 50%, #000 0%, transparent 70%);
}
.pstage-grid--floor { transform: translateY(150px)  translateZ(-120px) rotateX(82deg); }
.pstage-grid--ceil  { transform: translateY(-150px) translateZ(-120px) rotateX(-82deg); opacity: 0.55; }

/* --- Drifting star planes (cheap, crisp, dependency-free) --- */
.pstage-stars
{
	width: 2600px;
	height: 1900px;
	margin: -950px 0 0 -1300px;
	background-repeat: repeat;
	background-image:
		radial-gradient(1.6px 1.6px at 18% 24%, rgba(190,230,255,0.9), transparent 60%),
		radial-gradient(1.4px 1.4px at 62% 71%, rgba(150,210,245,0.7), transparent 60%),
		radial-gradient(1.2px 1.2px at 83% 38%, rgba(120,190,235,0.6), transparent 60%),
		radial-gradient(1.8px 1.8px at 41% 88%, rgba(210,240,255,0.8), transparent 60%);
	background-size: 360px 360px;
}
.pstage-stars--far { transform: translateZ(-780px); background-size: 300px 300px; opacity: 0.6; }
.pstage-stars--mid { transform: translateZ(-440px); opacity: 0.85; }

/* --- Floating wireframe shards: outer = depth position, <i> = spin --- */
.pshard i
{
	display: block;
	width: 96px;
	height: 96px;
	margin: -48px;
	border: 1px solid rgba(49,197,244,0.55);
	box-shadow:
		0 0 26px rgba(49,197,244,0.28),
		inset 0 0 20px rgba(49,197,244,0.14);
	transform: rotate(45deg);
	animation: pshard-spin 22s linear infinite;
}
.pshard--2 i,
.pshard--5 i { animation-duration: 30s; animation-direction: reverse; }
@keyframes pshard-spin { to { transform: rotate(405deg); } }

.pshard--1 { transform: translate3d(-430px, -170px, -200px); }
.pshard--2 { transform: translate3d( 470px, -120px, -340px) scale(0.7); }
.pshard--3 { transform: translate3d( 360px,  200px,  -90px) scale(1.25); }
.pshard--4 { transform: translate3d(-380px,  220px, -300px) scale(0.85); }
.pshard--5 { transform: translate3d(-540px,   40px,   60px) scale(0.55); }
.pshard--6 { transform: translate3d( 560px,   80px,  -40px) scale(0.95); }

/* --- Content layers: each pops forward at its own depth --- */
.pstage-content
{
	width: min(900px, 92vw);
	transform: translate(-50%, -50%) translateZ(20px);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 26px;
	opacity: var(--content-op, 1);   /* fades out as the camera flies in */
}
.pstage-content > * { transform-style: preserve-3d; }
.pstage-pill  { transform: translateZ(50px); }
.pstage-title { transform: translateZ(85px); margin: 0; }
.pstage-lede  { transform: translateZ(55px); max-width: 600px; color: var(--lm-fg-dim); font-size: 16px; line-height: 1.6; }
.pstage-ctas  { transform: translateZ(120px); pointer-events: auto; }
.pstage-ctas a { pointer-events: auto; }

/* Scroll affordance pinned to the hero (outside the tilting rig). */
.pstage-scrollcue
{
	position: absolute;
	left: 50%;
	bottom: 26px;
	transform: translateX(-50%);
	color: var(--lm-fg-faint);
	font-size: 11px;
	letter-spacing: 0.14em;
	animation: pstage-bob 2.4s ease-in-out infinite;
	pointer-events: none;
	opacity: var(--content-op, 1);   /* fades with the headline as you scroll */
}
@keyframes pstage-bob { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(6px); } }

@media (prefers-reduced-motion: reduce)
{
	.pshard i,
	.pstage-scrollcue { animation: none; }
}

/* =====================================
 * SCENE — 3D wireframe planet + orbital satellites + star field
 * ===================================== */

.page-scene scene-field
{
	position: absolute;
	inset: 0;
	display: block;
	pointer-events: none;
	z-index: 0;
}

.page-scene scene-field canvas
{
	display: block;
	width: 100%;
	height: 100%;
	mask-image:         radial-gradient(ellipse 92% 80% at 50% 55%, #000 60%, transparent 100%);
	-webkit-mask-image: radial-gradient(ellipse 92% 80% at 50% 55%, #000 60%, transparent 100%);
}

/* Scene page wants a darker hero background to make the wireframe pop. */
.page-scene .section--hero
{
	background:
		radial-gradient(ellipse 80% 60% at 50% 50%, rgba(49,197,244,0.05) 0%, transparent 60%),
		#020409;
}

/* =====================================
 * SURVEY — top-down topographic contour map + survey instrument
 * ===================================== */

.page-survey survey-field
{
	position: absolute;
	inset: 0;
	display: block;
	pointer-events: none;
	z-index: 0;
}

.page-survey survey-field canvas
{
	display: block;
	width: 100%;
	height: 100%;
	mask-image:         radial-gradient(ellipse 96% 88% at 50% 50%, #000 62%, transparent 100%);
	-webkit-mask-image: radial-gradient(ellipse 96% 88% at 50% 50%, #000 62%, transparent 100%);
}

/* Paper-dark survey sheet with a faint cyan wash so contours read cleanly. */
.page-survey .section--hero
{
	background:
		radial-gradient(ellipse 70% 55% at 50% 45%, rgba(49,197,244,0.06) 0%, transparent 62%),
		#03070c;
	overflow: hidden;
}

/* =====================================
 * GRADIENT — animated mesh + cursor spotlight
 * ===================================== */

.page-gradient .section--hero
{
	background: #03050a;
	overflow: hidden;
}

.page-gradient .gradient-mesh
{
	position: absolute;
	inset: -10%;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}

.page-gradient .gradient-blob
{
	position: absolute;
	border-radius: 50%;
	filter: blur(100px);
	opacity: 0.55;
	mix-blend-mode: screen;
	will-change: transform;
}

.page-gradient .gradient-blob--a { width: 620px; height: 620px; background: #31c5f4; top: -10%; left: -8%; animation: gradient-drift-a 22s ease-in-out infinite alternate; }
.page-gradient .gradient-blob--b { width: 480px; height: 480px; background: #7a4cff; top: 30%; right: -6%; animation: gradient-drift-b 26s ease-in-out infinite alternate; }
.page-gradient .gradient-blob--c { width: 540px; height: 540px; background: #4cc9ff; bottom: -12%; left: 24%; animation: gradient-drift-c 19s ease-in-out infinite alternate; }
.page-gradient .gradient-blob--d { width: 360px; height: 360px; background: #b07aff; top: 12%; left: 36%; animation: gradient-drift-d 28s ease-in-out infinite alternate; opacity: 0.4; }

@keyframes gradient-drift-a { from { transform: translate(0,0) scale(1); } to { transform: translate(120px, 80px) scale(1.15); } }
@keyframes gradient-drift-b { from { transform: translate(0,0) scale(0.95); } to { transform: translate(-90px, 110px) scale(1.1); } }
@keyframes gradient-drift-c { from { transform: translate(0,0) scale(1); } to { transform: translate(80px, -100px) scale(1.2); } }
@keyframes gradient-drift-d { from { transform: translate(0,0) scale(1); } to { transform: translate(140px, 60px) scale(1.05); } }

/* Cursor-following spotlight. JS sets --mx and --my as 0..1 fractions. */
.page-gradient .gradient-spotlight
{
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: radial-gradient(
		circle 360px at calc(var(--mx, 0.5) * 100%) calc(var(--my, 0.4) * 100%),
		rgba(255, 255, 255, 0.10) 0%,
		rgba(49, 197, 244, 0.06) 30%,
		transparent 65%
	);
	transition: background 80ms linear;
}

/* Subtle grain noise overlay via SVG data-uri for texture. */
.page-gradient .section--hero::after
{
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	opacity: 0.10;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='4' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6' /%3E%3C/svg%3E");
}

.page-gradient .hero__grid { position: relative; z-index: 3; }

/* =====================================
 * EDITOR — cinematic multi-pane code editor mockup
 * ===================================== */

.page-editor .hero__grid
{
	grid-template-columns: 1fr;
	gap: 36px;
}

.page-editor .hero__title
{
	font-size: clamp(32px, 3.6vw, 56px);
	max-width: 920px;
}

.page-editor .editor-shell
{
	background: #0a0e16;
	border: 1px solid var(--lm-line-strong);
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: 0 30px 80px rgba(0,0,0,0.7), 0 0 0 1px var(--lm-accent-dim);
	font-family: var(--font-mono);
	font-size: 12px;
	color: rgba(255,255,255,0.85);
	display: flex;
	flex-direction: column;
	min-height: 520px;
}

.page-editor .editor-tabs
{
	display: flex;
	gap: 0;
	background: #060a10;
	border-bottom: 1px solid var(--lm-line);
	padding: 0;
}

.page-editor .editor-tab
{
	padding: 12px 18px;
	color: rgba(255,255,255,0.4);
	border-right: 1px solid var(--lm-line);
	display: flex; align-items: center; gap: 8px;
	letter-spacing: 0.03em;
}

.page-editor .editor-tab.is-active
{
	background: #0a0e16;
	color: var(--lm-accent);
	box-shadow: inset 0 2px 0 var(--lm-accent);
}

.page-editor .editor-tab-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--lm-accent); }

.page-editor .editor-body
{
	display: grid;
	grid-template-columns: 200px 1fr 220px;
	flex: 1;
}

.page-editor .editor-sidebar
{
	background: #060a10;
	border-right: 1px solid var(--lm-line);
	padding: 16px 12px;
	overflow: hidden;
}

.page-editor .editor-sidebar-head
{
	color: rgba(255,255,255,0.4);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 10px;
	margin-bottom: 12px;
}

.page-editor .editor-file
{
	display: flex; align-items: center; gap: 8px;
	padding: 4px 6px;
	color: rgba(255,255,255,0.55);
	border-radius: 3px;
	white-space: nowrap;
}

.page-editor .editor-file.is-folder { color: rgba(255,255,255,0.7); font-weight: 500; }
.page-editor .editor-file.is-active { background: rgba(49,197,244,0.10); color: var(--lm-accent); }
.page-editor .editor-file.is-modified::after { content: "●"; color: var(--lm-accent); margin-left: auto; }
.page-editor .editor-file-indent { padding-left: 16px; }

.page-editor .editor-main
{
	background: #0a0e16;
	padding: 18px 22px;
	position: relative;
	overflow: hidden;
}

.page-editor .editor-gutter
{
	display: flex; align-items: center; gap: 12px;
	margin-bottom: 14px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--lm-line);
	color: rgba(255,255,255,0.4);
	font-size: 11px;
}

.page-editor .editor-gutter-status { color: var(--lm-accent); }
.page-editor .editor-gutter-spacer { flex: 1; }

.page-editor .editor-code
{
	margin: 0;
	font-family: var(--font-mono);
	font-size: 12px;
	line-height: 1.75;
	color: rgba(255,255,255,0.92);
	white-space: pre-wrap;
	height: 360px;
	overflow: hidden;
	mask-image:         linear-gradient(to bottom, transparent 0, #000 24px, #000 100%);
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 24px, #000 100%);
}

.page-editor .editor-rail
{
	background: #060a10;
	border-left: 1px solid var(--lm-line);
	padding: 16px 14px;
	display: flex; flex-direction: column; gap: 14px;
	overflow: hidden;
}

.page-editor .ai-pill
{
	display: inline-flex; align-items: center; gap: 6px;
	padding: 3px 8px;
	background: rgba(49,197,244,0.10);
	border: 1px solid var(--lm-accent-dim);
	border-radius: 999px;
	color: var(--lm-accent);
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	align-self: flex-start;
}

.page-editor .ai-msg
{
	background: rgba(255,255,255,0.03);
	border-left: 2px solid var(--lm-accent);
	padding: 10px 12px;
	border-radius: 0 4px 4px 0;
	color: rgba(255,255,255,0.85);
	line-height: 1.5;
	font-size: 11px;
}

.page-editor .ai-msg em { font-style: normal; color: var(--lm-accent); }

.page-editor .ai-action
{
	display: flex; gap: 8px;
	font-size: 11px;
}

.page-editor .ai-action-btn
{
	padding: 4px 10px;
	border-radius: 3px;
	background: rgba(49,197,244,0.10);
	color: var(--lm-accent);
	border: 1px solid var(--lm-accent-dim);
}

.page-editor .ai-action-btn--alt { background: transparent; color: rgba(255,255,255,0.5); border-color: var(--lm-line-strong); }

.page-editor .editor-terminal
{
	background: #050810;
	border-top: 1px solid var(--lm-line);
	padding: 12px 18px;
	min-height: 130px;
	font-size: 11px;
	line-height: 1.7;
}

.page-editor .editor-terminal-bar
{
	display: flex; align-items: center; gap: 10px;
	color: rgba(255,255,255,0.4);
	margin-bottom: 8px;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.page-editor .editor-terminal-bar-dot { width: 6px; height: 6px; background: #28c840; border-radius: 50%; box-shadow: 0 0 8px #28c840; }

.page-editor .editor-terminal-output
{
	margin: 0;
	font-family: var(--font-mono);
	white-space: pre-wrap;
	color: rgba(255,255,255,0.78);
	height: 90px;
	overflow: hidden;
	mask-image:         linear-gradient(to bottom, transparent 0, #000 12px, #000 100%);
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12px, #000 100%);
}

.page-editor .editor-status
{
	background: var(--lm-accent);
	color: #02060a;
	padding: 4px 18px;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	display: flex; gap: 14px;
	font-weight: 600;
}

.page-editor .editor-status-spacer { flex: 1; }

@media (max-width: 900px)
{
	.page-editor .editor-body { grid-template-columns: 1fr; }
	.page-editor .editor-sidebar, .page-editor .editor-rail { display: none; }
}

/* =====================================
 * CONSTELLATION — 3D node cloud with propagating pulses
 * ===================================== */

.page-constellation constellation-field
{
	position: absolute;
	inset: 0;
	display: block;
	pointer-events: none;
	z-index: 0;
}

.page-constellation constellation-field canvas,
.page-home constellation-field canvas
{
	display: block;
	width: 100%;
	height: 100%;
}

/* Defensive base — the home field is always a viewport-tall block, so even if
   the .hero-zone wrapper markup is ever missing (stale cached HTML/CSS), it
   never collapses to a tiny inline element. The .hero-zone rule below refines
   this (same box, sticky travel). */
.page-home constellation-field
{
	position: sticky;
	top: 0;
	display: block;
	width: 100%;
	height: 100vh;
	pointer-events: none;
	z-index: 0;
}

.page-constellation .section--hero { background: #02050b; }

/* Home constellation zone — wraps the hero and the
   "what we build" section (see .hero-zone in index.html) with one dark,
   continuous backdrop + light foreground tokens so every child reads in
   either theme. NOTE: no overflow:hidden here — it would turn the zone into
   the scroll container and break the sticky field below. */
.page-home .hero-zone
{
	position: relative;
	--lm-fg:       rgba(255, 255, 255, 0.96);
	--lm-fg-dim:   rgba(255, 255, 255, 0.74);
	--lm-fg-faint: rgba(255, 255, 255, 0.28);
	background:
		radial-gradient(ellipse 80% 50% at 50% 30%, rgba(49, 197, 244, 0.06) 0%, transparent 60%),
		#02050b;
}

/* The field is a single VIEWPORT-tall canvas pinned (sticky) inside the zone,
   not one giant canvas spanning all three sections — otherwise the node cloud
   centres in the tall canvas and the hero only catches a sparse fringe. The
   absolute wrapper spans the whole zone and gives the sticky canvas its
   travel, so the cloud stays dense while it scrolls behind the hero AND the
   section below. */
.page-home .hero-zone__bg
{
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.page-home .hero-zone constellation-field
{
	position: sticky;
	top: 0;
	display: block;
	width: 100%;
	height: 100vh;
	pointer-events: none;
}

/* Home hero — particle GLOBE backdrop. Swapped in for the constellation
   network as the live home field; the constellation is preserved verbatim in
   home-constellation.html (linked from the sandbox nav) as a restore point.
   Same box as the constellation field above: one viewport-tall sticky canvas
   pinned inside the zone so the globe stays dense and centred behind the hero,
   then travels with the "what we build" section beneath it. particles.js
   fades the canvas out via inline opacity once the user scrolls past. */
.page-home .hero-zone particle-field
{
	position: sticky;
	top: 0;
	display: block;
	width: 100%;
	height: 100vh;
	pointer-events: none;
	z-index: 0;
}

.page-home .hero-zone particle-field canvas
{
	display: block;
	width: 100%;
	height: 100%;
}

/* Globe size + placement are done in the RENDER (particles.js), NOT via
   canvas transforms — scaling/translating the <canvas> moves the element
   (dead strip, planet drifts) instead of the objects inside it. See
   particles.js: u_offx biases only the Earth right on desktop (fades to 0
   as it morphs to Saturn, so the planet stays centred); the fov multiplier
   shrinks the earth+Saturn ~20% on mobile while the canvas stays full-bleed. */

/* Glass panels inside the zone — the globe's Earth→Saturn morph plays out
   BEHIND the hero terminal and the "what we build" cards, so both go
   translucent-dark and let the particle field glow through (mirrors the
   sandbox's .section--how treatment). Also fixes the light-theme case: these
   panels previously followed the theme bg tokens while the zone forced light
   text — white-on-white. Scoped to the zone; elsewhere cards stay theme-bound. */
.page-home .hero-zone .terminal
{
	background: rgba(2, 6, 13, .68);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
}

.page-home .hero-zone .terminal__bar
{
	background: rgba(3, 7, 15, .55);
}

.page-home .build-card
{
	/* Near-opaque now that nothing glows behind (the cards left the
	   particle zone) — a translucent dark washed out to grey over the
	   light theme's section background. */
	background: rgba(7, 12, 22, 0.94);
	border: 1px solid rgba(49, 197, 244, .13);
}

/* Soft dark halo on the hero copy so it stays crisp wherever the globe grazes
   it (mirrors the particles sandbox). Harmless on the clean desktop column;
   load-bearing on mobile where the globe re-centres behind the text. */
.page-home .hero-zone .hero__title
{
	text-shadow: 0 2px 44px rgba(1, 4, 12, .85);
}

.page-home .hero-zone .hero__lede
{
	text-shadow: 0 1px 26px rgba(1, 4, 12, .94), 0 0 14px rgba(1, 4, 12, .88);
}

/* No hero scrim: the globe reads continuously from the hero into the beyond
   panel (Earth → planet) with nothing dimming it. Anthony had the overlay
   (and the scan-line) removed outright — the globe is the backdrop and the
   hero copy rides on its own text-shadows (above) for legibility. Don't
   reintroduce a veil here; tune the text-shadows if copy contrast is short. */

/* Inner sections go transparent so the one pinned field shows through
   continuously — no seam between the hero and the section below it. */
.page-home .hero-zone .section--hero,
.page-home .hero-zone .section--beyond
{
	background: transparent;
}

/* Act 2 — the leap. Directive copy centred over the Earth→Saturn morph. */
.page-home .section--beyond
{
	min-height: 115vh;
	display: flex;
	align-items: center;
}

.beyond__inner
{
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 18px;
}

.beyond__title
{
	text-shadow: 0 2px 44px rgba(1, 4, 12, 0.85);
}

.beyond__copy
{
	max-width: 620px;
	font-size: clamp(17px, 1.6vw, 21px);
	line-height: 1.65;
	color: var(--lm-fg-dim);
	text-shadow: 0 1px 26px rgba(1, 4, 12, 0.94), 0 0 14px rgba(1, 4, 12, 0.88);
}

/* "wild" burns with the detonation's firework palette — hues sampled from
   the particle shader's cosine palette (v_fire), each letter phase-offset
   like a particle seed. (Baton directive from external-mark.) */
.beyond-wild i
{
	font-style: inherit;
	animation: wild-fire 3.2s linear infinite;
}
.beyond-wild i:nth-child(1) { animation-delay: 0s; }
.beyond-wild i:nth-child(2) { animation-delay: -0.8s; }
.beyond-wild i:nth-child(3) { animation-delay: -1.6s; }
.beyond-wild i:nth-child(4) { animation-delay: -2.4s; }

@keyframes wild-fire
{
	0%   { color: #ff8f8f; text-shadow: 0 0 30px rgba(255, 143, 143, 0.45); }
	20%  { color: #ffd166; text-shadow: 0 0 30px rgba(255, 209, 102, 0.45); }
	40%  { color: #8dffb0; text-shadow: 0 0 30px rgba(141, 255, 176, 0.45); }
	60%  { color: #6ee7ff; text-shadow: 0 0 30px rgba(110, 231, 255, 0.5); }
	80%  { color: #c89dff; text-shadow: 0 0 30px rgba(200, 157, 255, 0.45); }
	100% { color: #ff8f8f; text-shadow: 0 0 30px rgba(255, 143, 143, 0.45); }
}

@media (prefers-reduced-motion: reduce)
{
	.beyond-wild i { animation: none; color: #6ee7ff; }
}

.beyond__cue
{
	margin-top: clamp(28px, 5vh, 56px);
	font-size: 12px;
	letter-spacing: 0.22em;
	color: rgba(49, 197, 244, 0.75);
	animation: beyond-bob 2.4s ease-in-out infinite;
}
@keyframes beyond-bob { 50% { transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .beyond__cue { animation: none; } }

/* The proof block (what we build), landed in the vibe section after the
   story — replaced the old .cross platform table. */
.build-proof { margin-top: clamp(90px, 11vw, 150px); }

/* The proof cards are an inherently dark-glass design (incl. the navy
   duotone terminal photo), built for the dark hero zone they came from —
   force dark tokens on the grid in BOTH themes. The section-head above
   stays theme-adaptive. */
.page-home .build-proof .cards-grid
{
	--lm-fg:       rgba(255, 255, 255, 0.96);
	--lm-fg-dim:   rgba(255, 255, 255, 0.74);
	--lm-fg-faint: rgba(255, 255, 255, 0.35);
	--lm-line:     rgba(49, 197, 244, 0.13);
}

/* Sandbox dropdown nav on the home page only — paired with the
   <details class="sandbox-nav"> block in index.html. Delete both
   together if the sandbox direction is shelved. */
.page-home .sandbox-nav
{
	position: fixed;
	top: 84px;
	right: 16px;
	z-index: 60;
	font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
	font-size: 13px;
}

.page-home .sandbox-nav > summary
{
	list-style: none;
	cursor: pointer;
	padding: 8px 14px;
	border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
	border-radius: 999px;
	background: color-mix(in srgb, #05070b 70%, transparent);
	color: #e6edf3;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	user-select: none;
}

.page-home .sandbox-nav > summary::-webkit-details-marker { display: none; }

.page-home .sandbox-nav > summary::after
{
	content: " \25BE";
	opacity: 0.7;
}

.page-home .sandbox-nav[open] > summary::after
{
	content: " \25B4";
}

.page-home .sandbox-nav__list
{
	list-style: none;
	margin: 6px 0 0;
	padding: 6px;
	min-width: 180px;
	border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
	border-radius: 10px;
	background: color-mix(in srgb, #05070b 88%, transparent);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

.page-home .sandbox-nav__list li { margin: 0; }

.page-home .sandbox-nav__list a
{
	display: block;
	padding: 8px 12px;
	border-radius: 6px;
	color: #e6edf3;
	text-decoration: none;
}

.page-home .sandbox-nav__list a:hover,
.page-home .sandbox-nav__list a:focus-visible
{
	background: color-mix(in srgb, #31c5f4 18%, transparent);
	color: #ffffff;
	outline: none;
}

/* =====================================
 * Field notes — long-form article / blog prose
 * Self-contained reading column for article pages (e.g.
 * ai-model-vendor-risk.html). Reuses the global design tokens.
 * ===================================== */

.article
{
	max-width: 720px;
	margin: 0 auto;
	padding: 8px 0 24px;
}

.article__meta
{
	display: flex;
	flex-wrap: wrap;
	gap: 10px 18px;
	align-items: center;
	margin-bottom: 40px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--lm-line);
}

.article__lead
{
	font-family: var(--font-display);
	font-size: clamp(20px, 2.2vw, 26px);
	line-height: 1.45;
	letter-spacing: -0.015em;
	color: var(--lm-fg);
	margin: 0 0 32px;
}

.article p
{
	font-size: var(--fs-body-lg);
	line-height: 1.7;
	color: var(--lm-fg-dim);
	margin: 0 0 24px;
}

.article h2
{
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(28px, 3.2vw, 38px);
	line-height: 1.1;
	letter-spacing: -0.03em;
	color: var(--lm-fg);
	margin: 56px 0 20px;
}

.article h3
{
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(20px, 2vw, 24px);
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--lm-fg);
	margin: 36px 0 14px;
}

.article ul
{
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}

.article li
{
	position: relative;
	padding-left: 26px;
	margin-bottom: 14px;
	font-size: var(--fs-body-lg);
	line-height: 1.65;
	color: var(--lm-fg-dim);
}

.article li::before
{
	content: "";
	position: absolute;
	left: 4px;
	top: 12px;
	width: 7px;
	height: 7px;
	transform: rotate(45deg);
	background: var(--lm-accent);
}

.article strong { color: var(--lm-fg); font-weight: 600; }

.article a
{
	color: var(--lm-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.article a:hover { text-decoration-thickness: 2px; }

.article blockquote
{
	margin: 32px 0;
	padding: 4px 0 4px 28px;
	border-left: 2px solid var(--lm-accent);
	font-family: var(--font-display);
	font-size: clamp(20px, 2.2vw, 26px);
	line-height: 1.45;
	letter-spacing: -0.015em;
	color: var(--lm-fg);
}

.article blockquote cite
{
	display: block;
	margin-top: 14px;
	font-family: var(--font-mono);
	font-size: var(--fs-mono);
	font-style: normal;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--lm-fg-muted, var(--lm-fg-faint));
}

/* Pull-out checklist — the linkable asset. */
.article-checklist
{
	margin: 40px 0;
	padding: 32px;
	border: 1px solid var(--lm-line-strong);
	border-radius: var(--radius-lg);
	background: var(--lm-bg-alt);
}

.article-checklist h3 { margin-top: 0; }

.article-checklist ol
{
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
	counter-reset: lm-check;
}

.article-checklist li
{
	position: relative;
	padding: 0 0 16px 44px;
	margin: 0;
	counter-increment: lm-check;
	color: var(--lm-fg-dim);
	font-size: var(--fs-body);
	line-height: 1.6;
}

.article-checklist li::before
{
	content: counter(lm-check);
	position: absolute;
	left: 0;
	top: 0;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	transform: none;
	background: var(--lm-accent-soft);
	color: var(--lm-accent);
	border: 1px solid var(--lm-accent-dim);
	border-radius: 999px;
	font-family: var(--font-mono);
	font-size: 12px;
}

.article-checklist li:last-child { padding-bottom: 0; }

/* =====================================
 * The Log — article hub / feed index (log.html)
 * ===================================== */

.log-feed
{
	max-width: 860px;
	margin: 0 auto;
}

.log-feed__note
{
	margin: 32px 0 0;
	padding-top: 24px;
	border-top: 1px solid var(--lm-line);
	font-family: var(--font-mono);
	font-size: var(--fs-mono);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--lm-fg-muted, var(--lm-fg-faint));
}

.log-entry
{
	display: block;
	padding: 36px 0;
	border-top: 1px solid var(--lm-line);
	text-decoration: none;
	color: inherit;
}

.log-entry:first-of-type { border-top: 0; }

.log-entry__meta
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	margin-bottom: 16px;
}

.log-entry__date
{
	font-family: var(--font-mono);
	font-size: var(--fs-mono);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--lm-fg-muted, var(--lm-fg-faint));
}

.log-entry__tag
{
	font-family: var(--font-mono);
	font-size: var(--fs-mono);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--lm-accent);
	padding: 4px 10px;
	border: 1px solid var(--lm-accent-dim);
	border-radius: 999px;
}

.log-entry__title
{
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(26px, 3vw, 38px);
	line-height: 1.1;
	letter-spacing: -0.03em;
	color: var(--lm-fg);
	margin: 0 0 14px;
	transition: color var(--fast) var(--ease);
}

.log-entry__dek
{
	font-size: var(--fs-body-lg);
	line-height: 1.6;
	color: var(--lm-fg-dim);
	margin: 0 0 16px;
	max-width: 680px;
}

.log-entry__more
{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-mono);
	font-size: var(--fs-mono);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--lm-accent);
}

.log-entry:hover .log-entry__title,
.log-entry:focus-visible .log-entry__title { color: var(--lm-accent); }

.log-entry:focus-visible { outline: 2px solid var(--lm-accent); outline-offset: 6px; }

/* Back-to-Log link at the top of an article. */
.article-back
{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 28px;
	font-family: var(--font-mono);
	font-size: var(--fs-mono);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--lm-fg-dim);
	text-decoration: none;
}

.article-back:hover,
.article-back:focus-visible { color: var(--lm-accent); outline: none; }

/* =====================================
 * NEXT-LEVEL VISUAL LAYER (2026-07-07)
 * Aurora atmosphere · floating depth assets · cinematic scenes.
 * All hand-rolled, zero dependencies. Driven by the smooth-scroll
 * engine + easing curves in site.js.
 * ===================================== */

/* ---- Aurora — dreamy atmosphere layers ----
   Slow-drifting, heavily-blurred colour fields behind section content.
   Opacity is kept low so text contrast never suffers; hues stretch the
   palette beyond the brand cyan into violet/teal for the "alive" feel. */
.aurora
{
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
}

.aurora i
{
	position: absolute;
	display: block;
	width: 58vw;
	height: 58vw;
	border-radius: 50%;
	filter: blur(80px);
	opacity: .17;
	will-change: transform;
	animation: aurora-drift 26s ease-in-out infinite alternate;
}

.aurora i:nth-child(1)
{
	background: radial-gradient(circle, #1d7fb8 0%, transparent 62%);
	top: -20%;
	left: -14%;
}

.aurora i:nth-child(2)
{
	background: radial-gradient(circle, #5c42c8 0%, transparent 62%);
	bottom: -26%;
	right: -12%;
	opacity: .13;
	animation-delay: -9s;
	animation-duration: 34s;
}

.aurora i:nth-child(3)
{
	background: radial-gradient(circle, #0e8f86 0%, transparent 62%);
	top: 28%;
	left: 40%;
	opacity: .09;
	animation-delay: -18s;
	animation-duration: 42s;
}

@keyframes aurora-drift
{
	from { transform: translate3d(0, 0, 0) scale(1); }
	to   { transform: translate3d(6vw, -4vw, 0) scale(1.16); }
}

/* ---- Floating depth assets ----
   Decorative fore/background elements. Vertical drift comes from the
   data-plx parallax engine (style.translate); the cursor drift comes from
   the [data-mplx] transform below — the two compose cleanly. Foreground
   pieces get a blur for a depth-of-field read. */
.float-asset
{
	position: absolute;
	pointer-events: none;
	user-select: none;
	z-index: 1;
	font-family: var(--font-mono);
	color: rgba(120, 200, 235, .30);
	will-change: translate, transform;
}

.float-asset--glyph { font-size: clamp(13px, 1.5vw, 21px); letter-spacing: .05em; }
.float-asset--blur  { filter: blur(2.5px); opacity: .6; }
.float-asset--dim   { opacity: .38; }

.float-asset--ring
{
	width: clamp(80px, 9vw, 130px);
	height: clamp(80px, 9vw, 130px);
	border: 1px solid rgba(49, 197, 244, .20);
	border-radius: 50%;
}

.float-asset--ring::after
{
	content: "";
	position: absolute;
	top: 7px;
	left: 50%;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgba(49, 197, 244, .55);
	box-shadow: 0 0 12px rgba(49, 197, 244, .8);
}

.float-asset--shard
{
	width: clamp(30px, 3.4vw, 48px);
	height: clamp(30px, 3.4vw, 48px);
	border: 1px solid rgba(179, 164, 255, .24);
	--float-rot: 28deg;
}

/* Cursor-drift layer. site.js sets --hx/--hy (unitless, ±1-ish) on the
   scope element on pointermove; each [data-mplx] element carries its own
   depth multiplier in --md. Long ease-out = weighty, floaty response. */
[data-mplx]
{
	transform: translate3d(calc(var(--hx, 0) * var(--md, 0) * 1px),
	                       calc(var(--hy, 0) * var(--md, 0) * 1px), 0)
	           rotate(var(--float-rot, 0deg));
	transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---- Cinematic scenes ----
   Elements with [data-scene] are scrubbed by scroll (site.js installScenes):
   opacity / translate / scale / blur driven from eased scroll progress.
   The base state below only matters before JS runs — keep content visible. */
[data-scene]
{
	will-change: transform, opacity, filter;
}

@media (prefers-reduced-motion: reduce)
{
	.aurora i { animation: none; }
	[data-mplx] { transform: none; transition: none; }
}

/* Floats are a desktop flourish — on narrow layouts they crowd the copy. */
@media (max-width: 900px)
{
	.float-asset { display: none; }
}

/* Terminal & logistics card — stylised Newcastle grain-terminal aerial
   (duotone-navy, anonymised) behind the glass. The gradient keeps the
   title/copy zones quiet; the silos and ship glow through the middle. */
.page-home .build-card--photo
{
	background:
		linear-gradient(180deg, rgba(4, 8, 16, .86) 0%, rgba(4, 8, 16, .52) 52%, rgba(4, 8, 16, .84) 100%),
		url("../img/terminal-aerial.jpg") center 62% / cover no-repeat;
	background:
		linear-gradient(180deg, rgba(4, 8, 16, .86) 0%, rgba(4, 8, 16, .52) 52%, rgba(4, 8, 16, .84) 100%),
		image-set(url("../img/terminal-aerial-1400.webp") type("image/webp"), url("../img/terminal-aerial.jpg") type("image/jpeg")) center 62% / cover no-repeat;
}

/* Devices scene — the phone's vessel list is CLIPPED so the scroll-driven
   scrub can scroll real content inside the phone (installDevices sets
   scrollTop). Extra rows in the markup exist to be revealed this way. */
.phone__list
{
	overflow: hidden;
	min-height: 0;
}

/* The focus-pull fade on the MacBook as the scrub passes "through" it. */
.device-slot { will-change: transform, opacity; }

/* =====================================
 * ACTS 4–6 — white flash + studio film stage (2026-07-07)
 * ===================================== */

/* Act 3 runway — dedicated scroll room inside the hero-zone for the
   funnel → singularity → detonation. vh-sized, so the film's scroll
   windows (anchored to the zone end) fit on EVERY viewport height —
   without it, tall screens had the collapse swallowing the whole zone
   (planet shredded from the first scroll tick). */
.page-home .hero-zone .converge-runway
{
	position: relative;
	height: 105vh;
}

/* The tail blends to the studio's white so the veil can release early
   without exposing a dark→white seam — but it must NOT exist while the
   singularity burns (a static gradient bled grey fog into the black
   collapse beats). It ignites with the detonation: opacity = --burst,
   set by particles.js, and by the time the veil lifts it is fully lit. */
.page-home .hero-zone .converge-runway::after
{
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom,
		rgba(247, 249, 252, 0) 0%,
		#f7f9fc 9%);
	opacity: var(--burst, 0);
	pointer-events: none;
}

/* No colour bleed on the black: the aurora fields fade out as the
   convergence takes the stage. */
.page-home .hero-zone .aurora
{
	transition: opacity 0.6s ease;
}
.page-home .hero-zone.is-converging .aurora { opacity: 0; }
/* Mobile white-gap note (2026-07-14): do NOT pull the studio up over
   the runway to shrink the post-flash white — the studio's white top
   rises into the viewport bottom at exactly d=1.0 (zone boundary), so
   any overlap exposes white content during the BLACK singularity
   beats. The fix that works is the DESKTOP trick, applied below. */

/* Reduced motion (any width): no film, no flash driver — the thesis
   stays a plain static block. */
@media (prefers-reduced-motion: reduce)
{
	.studio-statement { position: static; padding: 0 4vw; }
}

/* Mobile WITH motion: the thesis keeps the desktop treatment — FIXED,
   viewport-centred, opacity driven (by installFlash on mobile, since
   installDevices hands off ≤900px). The words are already centred
   behind the veil when the slam lifts, so the bang→words scroll is
   ~0.2 viewport instead of a full viewport of white (Anthony, twice).
   The dwell padding replaces the statement's flow slot and keeps the
   phone gallery from chasing the words. Starts opacity:0 so nothing
   overlays the hero before the driver's first frame. */
@media (max-width: 900px) and (prefers-reduced-motion: no-preference)
{
	.page-home .studio-statement { padding: 0 4vw; opacity: 0; }
	.page-home .devices-frame { padding-top: 56vh; }
}

/* Reduced motion ONLY: no convergence film, no flash — clean cut, no
   runway. Small screens keep the runway: the film still runs there, and
   without the vh-sized tail the veil released onto DARK content — a full
   viewport of dead black between the burst and the white studio. */
@media (prefers-reduced-motion: reduce)
{
	.page-home .hero-zone .converge-runway { height: 0; }
}

/* Act 4 — the flash, in two layers driven by installFlash:
   ::before — the detonation bloom, a radial shockwave scaling out of the
              singularity (transform + opacity via --bloom-s/--bloom-o);
   the element's own background — the solid white slam that lands right
   behind the bloom and holds until the studio owns the frame (--veil-o).
   Background-alpha, NOT element opacity: element opacity would multiply
   the bloom away while the solid layer is still clear. */
.flash-veil
{
	position: fixed;
	inset: 0;
	background: rgba(251, 252, 254, var(--veil-o, 0));
	visibility: hidden;
	pointer-events: none;
	z-index: 40;
	will-change: background-color;
}

.flash-veil::before
{
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 72vmax;
	height: 72vmax;
	margin: -36vmax 0 0 -36vmax;
	border-radius: 50%;
	background: radial-gradient(circle,
		rgba(255, 255, 255, 0.98) 0 24%,
		rgba(214, 242, 255, 0.92) 40%,
		rgba(255, 255, 255, 0) 66%);
	transform: scale(var(--bloom-s, 0));
	opacity: var(--bloom-o, 0);
	will-change: transform, opacity;
}

/* Act 5 — the studio. Full light inversion: local theme tokens flip so
   every token-driven child (headings, copy, pips, lines) reads dark-on-white. */
.section--studio
{
	position: relative;
	background: #f7f9fc;
	padding: 0;
	/* CRITICAL: the base .section sets overflow:hidden, which CAGES the
	   sticky .devices-frame (sticky can never escape an overflow-hidden
	   ancestor — see the Depth-page gotcha). The frame does its own
	   clipping; the section must stay visible. clip-x guards against
	   the scaled MacBook bleeding a horizontal scrollbar. */
	overflow-x: clip;
	overflow-y: visible;
	--lm-fg:          #0c1322;
	--lm-fg-dim:      rgba(12, 19, 34, 0.72);
	--lm-fg-muted:    rgba(12, 19, 34, 0.62);
	--lm-fg-faint:    rgba(12, 19, 34, 0.36);
	--lm-line:        rgba(12, 19, 34, 0.10);
	--lm-line-strong: rgba(12, 19, 34, 0.18);
	--lm-bg-alt:      #eef2f7;
}

.section--studio .accent,
.section--studio .mono--accent { color: #0a76ad; }

/* The platforms grid inherits the studio scope's DARK fg tokens but kept
   its dark cell background — dark-on-dark, values invisible. White cells
   on the light hairline grid restore the intended look. */

/* The pinned film reel: tall scroll runway, sticky viewport frame. */
/* 340vh: the film needs enough runway that the PHONE act (last ~28%)
   gets real scroll time — at 300vh it blew past in a flick. */
.devices-pin { position: relative; height: 340vh; }

.devices-frame
{
	position: sticky;
	top: 0;
	height: 100vh;
	/* NB: the clip lives on .devices__stage (below), NOT here. The thesis
	   rides UP out of this box during the approach (installDevices pre-pin
	   centring) so it meets the detonation's white early — a frame-level
	   overflow:hidden would scissor it off and leave a blank white screen.
	   Only the scaled console dive needs clipping, and it gets it on the
	   stage wrapper. */
	overflow: visible;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Act 4½ — the thesis on white. */
.studio-statement
{
	/* FIXED, not absolute: the thesis is centred on the viewport and NEVER
	   moves with scroll — installDevices drives only its opacity. A
	   scroll-computed transform (the old pre-pin centring) desynced from the
	   native sticky frame and jumped worse the faster you scrolled. Fixed
	   position can't jump. Sits below the flash veil (z-40); mobile overrides
	   back to static (stacked layout, no pin). */
	position: fixed;
	inset: 0;
	z-index: 6;
	pointer-events: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 0 6vw;
	will-change: opacity;
}

.studio-statement__eyebrow
{
	color: #0d8ecf;
	font-size: var(--fs-mono);
	letter-spacing: 0.16em;
	margin-bottom: 26px;
}

.studio-statement__title
{
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(46px, 6.8vw, 116px);
	line-height: 1.02;
	letter-spacing: -0.05em;
	color: #0c1322;
	margin: 0;
}

.studio-statement__title .serif-accent { color: #0d8ecf; }

.studio-statement__sub
{
	margin: 30px 0 0;
	font-family: var(--font-display);
	font-weight: 500;
	font-size: clamp(22px, 2.4vw, 38px);
	letter-spacing: -0.02em;
	color: rgba(12, 19, 34, 0.60);
}

.studio-statement__sub .serif-accent
{
	color: #0c1322;
	font-size: 1.12em;
}

/* Devices inside the frame: both device slots are stacked dead-centre;
   the dive choreography (installDevices) drives all transforms. */
.devices-frame .devices__stage
{
	position: absolute;
	inset: 0;
	display: block;
	/* Clips the console/phone dive (scales to ~3.3×) — the clip the frame
	   used to carry. The thesis is a SIBLING of this, so it stays free. */
	overflow: hidden;
}

.devices-frame .device-slot
{
	position: absolute;
	top: 50%;
	left: 50%;
	translate: -50% -50%;
	will-change: transform, opacity;
}

/* Product-shot depth on white. */
.devices-frame .phone { filter: drop-shadow(0 36px 70px rgba(12, 19, 34, 0.30)); }

/* =====================================
 * Device carousel — same shell, different worlds. Cells are STACKED
 * (grid 1/1), not a clipped track: the display's soft shadows would be
 * cut by an overflow window, so the slide is a glide + fade instead.
 * JS (installDevices) assigns .is-live and data-side="left|right";
 * without JS (or on the static small-screen/reduced-motion layout)
 * only the first cell — .is-live in the markup — is visible.
 * ===================================== */
/* Slots are display-only set pieces — never let an invisible (opacity-0
   or off-beat) device intercept clicks meant for the carousel controls. */
.devices-frame .device-slot { display: grid; justify-items: center; pointer-events: none; }

.dev-cell
{
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	will-change: transform, opacity;
	transition: transform 640ms cubic-bezier(0.66, 0, 0.22, 1),
				opacity 460ms var(--ease),
				visibility 0s 640ms;
}

.dev-cell.is-live
{
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
	transform: none;
}

.dev-cell[data-side="left"]  { transform: translateX(-54%) scale(0.94); }
.dev-cell[data-side="right"] { transform: translateX(54%) scale(0.94); }

/* Carousel voice — feedback said the old frosted pill was invisible to
   new visitors. One bottom-centre cluster:  [<]  dots + title  [>]  —
   blunt texta chevrons (single butt-cut stroke, hard mitre point) that
   draw in on arrival then breathe. Lives at the bottom so it never
   fights the act rail on the right edge. installDevices still drives
   opacity/pointer-events with the held beats. */
.dev-nav
{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 2.4vh;
	z-index: 12;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(22px, 3vw, 40px);
	opacity: 0;
	pointer-events: none;
	transition: opacity 300ms var(--ease);
}

.dev-nav.is-usable .dev-chev,
.dev-nav.is-usable .dev-plate { pointer-events: auto; }

.dev-chev
{
	flex: none;
	width: 46px;
	height: 70px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	color: #14181f;
	pointer-events: none;
}

.dev-chev--prev { order: 1; }
.dev-plate      { order: 2; }
.dev-chev--next { order: 3; }
.dev-chev--prev .chev-svg { transform: scaleX(-1); }

.chev-svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* ONE stroke, flat-cut ends, sharp mitre at the point — a blunt texta
   pulled in two quick arms with the slightest bow, not a rounded glyph. */
.chev-stroke
{
	fill: none;
	stroke: currentColor;
	stroke-width: 11;
	stroke-linecap: butt;
	stroke-linejoin: miter;
	stroke-miterlimit: 4;
	stroke-dasharray: 100;
	stroke-dashoffset: 0;
}

/* Arrival: the marker writes itself, then the whole arrow breathes.
   (Draw replays each time the beat hands the arrows back.) */
.dev-nav.is-usable .dev-chev:not(:disabled) .chev-stroke
{
	animation: chev-draw 0.5s var(--ease) backwards;
}
.dev-nav.is-usable .dev-chev:not(:disabled)
{
	animation: chev-breathe 1.7s ease-in-out 0.6s infinite;
}

@keyframes chev-draw
{
	from { stroke-dashoffset: 100; }
	to   { stroke-dashoffset: 0; }
}

@keyframes chev-breathe
{
	0%, 100% { transform: scale(1);    opacity: 0.72; }
	50%      { transform: scale(1.08); opacity: 1; }
}

.dev-chev:hover:not(:disabled) { color: #0d8ecf; }

.dev-chev:disabled
{
	opacity: 0.12;
	cursor: default;
}

/* FIXED width + reserved two-line height: the plate never resizes as
   titles change, so the chevrons hold a set position while browsing. */
.dev-plate
{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	width: min(400px, 52vw);
	min-height: 52px;
	pointer-events: none;
}

.dev-plate__dots { display: flex; gap: 8px; }

.dev-plate__dots i
{
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #14181f;
	opacity: 0.18;
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.dev-plate__dots i.on { opacity: 1; transform: scale(1.25); }

.dev-plate__title
{
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px 12px;
	font-family: var(--font-sans);
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: 0.07em;
	color: rgba(12, 19, 34, 0.78);
	text-align: center;
}

.dev-plate__title b { font-weight: 400; color: rgba(12, 19, 34, 0.42); }

/* The deck NUDGES once per act — the top card flicks sideways and
   settles: "this moves". Added by JS the first time each act's arrows
   become usable. */
.device-slot.is-nudge .dev-cell.is-live
{
	animation: deck-nudge 0.9s var(--ease) 0.55s 1;
}

@keyframes deck-nudge
{
	0%, 100% { transform: none; }
	38%      { transform: translateX(-26px); }
	70%      { transform: translateX(9px); }
}

@media (prefers-reduced-motion: reduce)
{
	.dev-nav.is-usable .dev-chev:not(:disabled),
	.dev-nav.is-usable .dev-chev:not(:disabled) .chev-stroke,
	.device-slot.is-nudge .dev-cell.is-live { animation: none; }
}

/* Parked worlds mustn't burn cycles: stop the marquee + carets. */
.dev-cell:not(.is-live) .app__ticker-track,
.dev-cell:not(.is-live) .app-ai-caret,
.dev-cell:not(.is-live) .app__live-dot { animation-play-state: paused; }

/* Static layout (small screens / reduced motion): the film's floating
   pill goes away, but each device's own in-flow pill (.dev-nav--flow,
   cloned by installDevicesMobile) carries the carousel. */
@media (max-width: 900px)
{
	.dev-nav:not(.dev-nav--flow) { display: none; }
}

@media (prefers-reduced-motion: reduce)
{
	.dev-nav:not(.dev-nav--flow) { display: none; }
	.dev-cell { transition: none; }
}

/* World accents — grain runs gold, care runs mint; the chart's main
   series, live dot and first legend chip carry the world's colour. */
.app--grain .app__line--main { stroke: #f4b731; filter: drop-shadow(0 0 6px rgba(244, 183, 49, 0.55)); }
.app--grain .app__live-dot { fill: #f4b731; filter: drop-shadow(0 0 5px rgba(244, 183, 49, 0.9)); }
.app--grain .app__legend .l-fe::before { background: #f4b731; box-shadow: 0 0 6px rgba(244, 183, 49, 0.8); }
.app--grain .app-src__bar i { background: linear-gradient(90deg, #f4b731, #ffd977); }
.app--grain .app-src__bar .is-b { background: linear-gradient(90deg, #b98a1f, #f4b731); }
.app--grain .app-src__bar .is-c { background: linear-gradient(90deg, #8a6410, #c99a2e); }

/* =====================================
 * Phone gallery — REAL LittleMan apps recreated live (reference shots
 * in /resources/Mobile). Shared `pa-` kit + per-app accents. Light apps
 * flip the screen palette with .phone--light. Boot animations run when
 * the slot gains .is-alive (phone act begins) or a cell goes .is-live
 * (arrow arrival) — without JS nothing animates and the finished state
 * shows, which is exactly what the static fallback needs.
 * ===================================== */
.phone--light .phone__screen { background: #f4f2ee; }
.phone--light .phone__status { color: #14181f; }
.phone--light .phone__h1 { color: #14181f; }
.phone--light .phone__tab { color: rgba(20, 24, 31, 0.42); }
.phone--light .phone__tab.is-active { color: #14181f; }

.phone--fire .phone__eyebrow { color: #c2410c; }
.phone--pour .phone__eyebrow { color: #cf3333; }
.phone--fuel .phone__eyebrow { color: #6366f1; }
.phone--fit  .phone__eyebrow { color: #57e0a6; }
.phone--terra .phone__eyebrow { color: #a78bfa; }
.phone--terra .phone__screen { background: #12102a; }

.phone__app .pa-k
{
	font-family: var(--font-mono);
	font-size: 8px;
	letter-spacing: 0.16em;
	color: rgba(223, 233, 244, 0.45);
}
.phone--light .pa-k { color: rgba(20, 24, 31, 0.45); }

/* Segmented control (fire register). */
.pa-seg
{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3px;
	padding: 3px;
	border-radius: 10px;
	background: rgba(20, 24, 31, 0.07);
	font-size: 10px;
	font-weight: 600;
	color: rgba(20, 24, 31, 0.5);
	text-align: center;
}
.pa-seg span { padding: 6px 4px; border-radius: 8px; }
.pa-seg b { font-weight: 600; opacity: 0.5; margin-left: 3px; }
.pa-seg .is-on { background: #fff; color: #14181f; box-shadow: 0 1px 4px rgba(20, 24, 31, 0.12); }

/* Stat tiles (fire register). */
.pa-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.pa-tile
{
	border-radius: 9px;
	padding: 8px 6px 7px;
	text-align: left;
	display: flex;
	flex-direction: column;
	gap: 1px;
}
.pa-tile b { font-family: var(--font-display); font-size: 15px; font-weight: 600; }
.pa-tile span { font-size: 8px; opacity: 0.75; }
.pa-tile--all  { background: #16191f; color: #f4f2ee; }
.pa-tile--open { background: #fbe3c0; color: #92510f; }
.pa-tile--bad  { background: #f7cfcf; color: #b32020; }
.pa-tile--ok   { background: #cdeed8; color: #17703a; }

/* Asset cards (fire register) — the scrolling list. */
.pa-assets { display: flex; flex-direction: column; gap: 6px; overflow: hidden; flex: 1; min-height: 0; }
.pa-asset
{
	background: #fff;
	border-radius: 10px;
	padding: 9px 10px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	box-shadow: 0 1px 4px rgba(20, 24, 31, 0.07);
}
.pa-asset__k { font-family: var(--font-mono); font-size: 7px; letter-spacing: 0.12em; color: rgba(20, 24, 31, 0.38); }
.pa-asset strong { font-size: 11px; font-weight: 600; color: #14181f; letter-spacing: -0.01em; }
.pa-asset em { font-style: normal; font-size: 9px; color: rgba(20, 24, 31, 0.45); }
.pa-asset__row { display: flex; gap: 5px; margin-top: 4px; }
.pa-pill
{
	font-style: normal;
	font-size: 8px;
	font-weight: 600;
	padding: 2px 7px;
	border-radius: 99px;
}
.pa-pill--ok   { background: #d9f2e1; color: #17703a; }
.pa-pill--bad  { background: #fadddd; color: #b32020; }
.pa-pill--warn { background: #fbe9c8; color: #92510f; }
.pa-pill--info { background: #d9e6fa; color: #2b5aa8; }

/* Pour QA — the red result card. */
.pa-flag
{
	background: linear-gradient(165deg, #e04343, #c92e2e);
	border-radius: 12px;
	padding: 12px;
	color: #fff;
	display: flex;
	flex-direction: column;
	gap: 3px;
	box-shadow: 0 10px 26px rgba(201, 46, 46, 0.35);
}
.pa-flag__k { font-family: var(--font-mono); font-size: 7px; letter-spacing: 0.18em; opacity: 0.8; }
.pa-flag b { font-family: var(--font-display); font-size: 26px; font-weight: 650; letter-spacing: -0.02em; }
.pa-flag em { font-style: normal; font-size: 9px; opacity: 0.85; line-height: 1.45; }
.pa-minis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 7px; }
.pa-minis i
{
	font-style: normal;
	background: rgba(255, 255, 255, 0.16);
	border-radius: 7px;
	padding: 5px 4px;
	display: flex;
	flex-direction: column;
	font-family: var(--font-mono);
	font-size: 6.5px;
	letter-spacing: 0.1em;
	opacity: 0.92;
}
.pa-minis i b { font-family: var(--font-display); font-size: 12px; letter-spacing: 0; }

/* Pour QA — flagged item + share rows. */
.pa-flagged
{
	background: #fff;
	border-left: 3px solid #cf3333;
	border-radius: 10px;
	padding: 9px 11px;
	display: flex;
	flex-direction: column;
	gap: 3px;
	box-shadow: 0 1px 4px rgba(20, 24, 31, 0.07);
}
.pa-flagged__k { font-family: var(--font-mono); font-size: 7px; letter-spacing: 0.16em; color: #cf3333; }
.pa-flagged strong { font-size: 10.5px; font-weight: 600; color: #14181f; }
.pa-flagged em { font-style: normal; font-size: 9px; line-height: 1.5; color: rgba(20, 24, 31, 0.55); }
.pa-share { display: flex; flex-direction: column; gap: 5px; }
.pa-share > div
{
	background: #fff;
	border-radius: 9px;
	padding: 8px 11px;
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-rows: auto auto;
	box-shadow: 0 1px 4px rgba(20, 24, 31, 0.06);
}
.pa-share strong { font-size: 10px; font-weight: 600; color: #14181f; }
.pa-share em { font-style: normal; font-size: 8.5px; color: rgba(20, 24, 31, 0.45); }
.pa-share span { grid-row: 1 / 3; align-self: center; color: rgba(20, 24, 31, 0.35); font-size: 13px; }

/* Buttons. */
.pa-btn
{
	margin-top: auto;
	text-align: center;
	font-size: 11px;
	font-weight: 600;
	padding: 10px;
	border-radius: 10px;
}
.pa-btn--dark { background: #16191f; color: #f4f2ee; }
.pa-btn--violet { background: #6366f1; color: #fff; box-shadow: 0 8px 22px rgba(99, 102, 241, 0.35); }

/* Fuel — budget ring. */
.pa-ringcard
{
	display: flex;
	align-items: center;
	gap: 12px;
	background: #fff;
	border-radius: 12px;
	padding: 12px;
	box-shadow: 0 1px 4px rgba(20, 24, 31, 0.07);
}
.pa-ring__track,
.pa-ring__val { fill: none; stroke-width: 7; }
.pa-ring__track { stroke: rgba(20, 24, 31, 0.08); }
.pa-ring__val
{
	stroke: #6366f1;
	stroke-linecap: round;
	stroke-dasharray: 163.4;   /* 2πr, r=26 */
	stroke-dashoffset: 47;     /* ~71% swept */
	transform: rotate(-90deg);
	transform-origin: 50% 50%;
}
.pa-ringcard__txt { display: flex; flex-direction: column; gap: 2px; }
.pa-ringcard__txt b { font-family: var(--font-display); font-size: 17px; font-weight: 650; color: #14181f; letter-spacing: -0.02em; }
.pa-ringcard__txt b i { font-style: normal; font-family: var(--font-mono); font-size: 9px; font-weight: 400; color: rgba(20, 24, 31, 0.5); }
.pa-ringcard__txt em { font-style: normal; font-family: var(--font-mono); font-size: 8.5px; color: rgba(20, 24, 31, 0.5); }

/* Fuel — weekly goal bars. */
.pa-barscard
{
	background: #fff;
	border-radius: 12px;
	padding: 11px 12px 9px;
	box-shadow: 0 1px 4px rgba(20, 24, 31, 0.07);
}
.pa-bars
{
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 7px;
	align-items: end;
	height: 74px;
	margin-top: 9px;
	position: relative;
}
.pa-bars::before
{
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 14%;
	border-top: 1.5px dashed rgba(99, 102, 241, 0.45);
}
.pa-bars i
{
	height: var(--h, 60%);
	border-radius: 4px 4px 2px 2px;
	background: linear-gradient(180deg, #c7cbf7 0%, #c7cbf7 34%, #8b5cf6 34%);
	transform-origin: bottom;
}
.pa-bars__days
{
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 7px;
	margin-top: 5px;
	font-family: var(--font-mono);
	font-size: 8px;
	text-align: center;
	color: rgba(20, 24, 31, 0.4);
}
.pa-bars__days .is-on { color: #6366f1; font-weight: 700; }

/* Fuel — stat pair. */
.pa-statrow { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.pa-statrow > div
{
	background: #fff;
	border-radius: 11px;
	padding: 10px 11px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	box-shadow: 0 1px 4px rgba(20, 24, 31, 0.07);
}
.pa-statrow b { font-family: var(--font-display); font-size: 16px; font-weight: 650; color: #14181f; letter-spacing: -0.02em; }
.pa-statrow b i { font-style: normal; font-family: var(--font-mono); font-size: 9px; font-weight: 400; color: rgba(20, 24, 31, 0.5); }
.pa-statrow em { font-style: normal; font-family: var(--font-mono); font-size: 8px; color: rgba(20, 24, 31, 0.45); }
.pa-statrow .pa-good { color: #17915a; }

/* Check-in — readiness card (dark, mint). */
.pa-ready
{
	background: linear-gradient(160deg, rgba(87, 224, 166, 0.16), rgba(87, 224, 166, 0.05));
	border: 1px solid rgba(87, 224, 166, 0.3);
	border-radius: 12px;
	padding: 12px;
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 2px 10px;
}
.pa-ready__k { font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.16em; color: #57e0a6; }
.pa-ready b
{
	grid-row: 1 / 3;
	grid-column: 2;
	font-family: var(--font-display);
	font-size: 34px;
	font-weight: 650;
	color: #eafff5;
	text-shadow: 0 0 18px rgba(87, 224, 166, 0.5);
}
.pa-ready em { font-style: normal; font-size: 9px; color: rgba(223, 233, 244, 0.6); }

/* Check-in — fields, hour chips, segments. */
.pa-field
{
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
}
.pa-field--select
{
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 10px;
	padding: 9px 12px;
}
.pa-field__v { font-size: 11px; color: var(--lm-fg); letter-spacing: 0.04em; }
.pa-hours { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.pa-hours span
{
	text-align: center;
	font-family: var(--font-mono);
	font-size: 11px;
	padding: 8px 0;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.08);
	color: rgba(223, 233, 244, 0.75);
}
.pa-hours .is-on { background: rgba(87, 224, 166, 0.16); border-color: rgba(87, 224, 166, 0.5); color: #baf5da; }
.pa-segfield { display: flex; flex-direction: column; gap: 6px; }
.pa-segbar
{
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	gap: 3px;
	padding: 3px;
	border-radius: 9px;
	background: rgba(255, 255, 255, 0.05);
	font-size: 9.5px;
	text-align: center;
	color: rgba(223, 233, 244, 0.55);
}
.pa-segbar span { padding: 6px 2px; border-radius: 7px; }
.pa-segbar .is-on { background: rgba(223, 233, 244, 0.92); color: #10141c; font-weight: 600; }

/* Terraform — steppers, colour rows, checks. */
.pa-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.pa-steps > div
{
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: 10px;
	padding: 8px 11px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.pa-step { font-size: 11px; color: rgba(223, 233, 244, 0.55); letter-spacing: 0.14em; }
.pa-step b { color: #e6ebf5; font-weight: 500; }
.pa-colors { display: flex; flex-direction: column; gap: 6px; }
.pa-color
{
	display: grid;
	grid-template-columns: auto auto 1fr;
	grid-template-rows: auto auto;
	align-items: center;
	column-gap: 8px;
	row-gap: 5px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 10px;
	padding: 8px 11px;
}
.pa-color__chip
{
	grid-row: 1 / 3;
	width: 22px;
	height: 22px;
	border-radius: 6px;
	background: var(--c);
	border: 1px solid rgba(255, 255, 255, 0.18);
}
.pa-color .mono { font-size: 10px; color: #e6ebf5; letter-spacing: 0.04em; text-transform: none; }
.pa-color em { font-style: normal; font-size: 9px; color: rgba(223, 233, 244, 0.5); justify-self: end; }
.pa-dots { grid-column: 2 / 4; display: flex; gap: 5px; }
.pa-dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--c); border: 1px solid rgba(255, 255, 255, 0.14); }
.pa-cursor
{
	display: inline-block;
	width: 6px;
	height: 10px;
	margin-left: 4px;
	vertical-align: -1px;
	background: #c0caf5;
	animation: pa-blink 1.1s steps(1) infinite;
}
@keyframes pa-blink { 50% { opacity: 0; } }
.pa-check
{
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 10.5px;
	color: rgba(230, 235, 245, 0.85);
}
.pa-check i
{
	font-style: normal;
	width: 16px;
	height: 16px;
	border-radius: 5px;
	background: #ec4899;
	color: #fff;
	font-size: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Maintenance Partners — decision screen. */
.phone--mp .phone__eyebrow { color: #c2410c; }
.pa-stepper { display: flex; align-items: center; }
.pa-stepper i
{
	flex: none;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 1.5px solid rgba(20, 24, 31, 0.16);
	background: #fff;
}
.pa-stepper i.is-on { background: #c2410c; border-color: #c2410c; box-shadow: 0 3px 10px rgba(194, 65, 12, 0.35); }
.pa-stepper span { flex: 1; height: 1.5px; background: rgba(20, 24, 31, 0.12); }
.pa-q strong { display: block; font-size: 14px; font-weight: 650; letter-spacing: -0.02em; color: #14181f; }
.pa-q em { font-style: normal; font-size: 9px; line-height: 1.5; color: rgba(20, 24, 31, 0.5); }
.pa-choice
{
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 10px;
	background: #fff;
	border: 1.5px solid rgba(20, 24, 31, 0.08);
	border-radius: 12px;
	padding: 10px 11px;
}
.pa-choice__ic
{
	font-style: normal;
	width: 26px;
	height: 26px;
	border-radius: 8px;
	background: rgba(20, 24, 31, 0.06);
	color: #4c4438;
	font-size: 13px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.pa-choice strong { display: block; font-size: 11px; font-weight: 650; color: #14181f; }
.pa-choice em { font-style: normal; font-size: 8.5px; color: rgba(20, 24, 31, 0.5); }
.pa-choice__r { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid rgba(20, 24, 31, 0.22); }
.pa-choice.is-on { background: #f8e5da; border-color: #cf7748; }
.pa-choice.is-on .pa-choice__ic { background: #c2410c; color: #fff; }
.pa-choice.is-on .pa-choice__r
{
	border-color: #c2410c;
	background: radial-gradient(circle, #c2410c 0 4px, transparent 4.5px);
}
.pa-btn--orange
{
	background: #c86a3a;
	color: #fff;
	border-radius: 99px;
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.2em;
	box-shadow: 0 8px 22px rgba(200, 106, 58, 0.35);
}

/* Coach — season review. */
.phone--coach .phone__eyebrow { color: #f4d06f; }
.pa-record
{
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
}
.pa-record .mono { font-size: 8px; letter-spacing: 0.12em; color: rgba(223, 233, 244, 0.5); }
.pa-chip
{
	font-family: var(--font-mono);
	font-size: 7.5px;
	letter-spacing: 0.16em;
	color: rgba(223, 233, 244, 0.75);
	border: 1px solid rgba(223, 233, 244, 0.28);
	border-radius: 99px;
	padding: 3px 9px;
	white-space: nowrap;
}
.pa-form { display: grid; grid-template-columns: repeat(19, 1fr); gap: 4px; }
.pa-form i { aspect-ratio: 1; border-radius: 50%; background: #454b57; }
.pa-form .w { background: #35e08f; }
.pa-form .l { background: #ef5350; }
.pa-note
{
	background: rgba(255, 255, 255, 0.045);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 10px;
	padding: 9px 11px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.pa-note em { font-style: normal; font-size: 9.5px; line-height: 1.55; color: rgba(223, 233, 244, 0.72); }
.phone--coach .pa-statrow > div { background: rgba(255, 255, 255, 0.045); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: none; }
.phone--coach .pa-statrow b { color: #f2f6fc; font-size: 12.5px; }
.phone--coach .pa-statrow em { color: rgba(223, 233, 244, 0.45); }
.pa-slots { display: flex; flex-direction: column; gap: 6px; }
.pa-slot
{
	display: grid;
	grid-template-columns: 20px 1fr 56px auto;
	align-items: center;
	gap: 8px;
}
.pa-slot__pos { font-size: 7.5px; letter-spacing: 0.06em; color: #7ab3f0; }
.pa-slot strong { font-size: 10px; font-weight: 550; color: rgba(238, 244, 252, 0.9); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pa-slot__bar { height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.pa-slot__bar i { display: block; height: 100%; width: var(--w, 50%); border-radius: 2px; transform-origin: left; }
.pa-slot__bar .is-low { background: #ef5350; }
.pa-slot__bar .is-high { background: #f4b731; }
.pa-slot > b { font-family: var(--font-mono); font-size: 9px; color: rgba(223, 233, 244, 0.7); }

/* Boot choreography — plays when the phone act begins (.is-alive on the
   slot) and replays on each arrow arrival (.is-live moves). */
@keyframes pa-pop { from { opacity: 0; transform: translateY(10px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes pa-grow { from { transform: scaleY(0.06); } to { transform: none; } }
@keyframes pa-sweep { from { stroke-dashoffset: 163.4; } to { stroke-dashoffset: 47; } }
@keyframes pa-slam { from { opacity: 0; transform: scale(0.86); } 62% { transform: scale(1.03); } to { opacity: 1; transform: none; } }

[data-devices-phone].is-alive .dev-cell.is-live .pa-tile,
[data-devices-phone].is-alive .dev-cell.is-live .pa-asset,
[data-devices-phone].is-alive .dev-cell.is-live .pa-share > div,
[data-devices-phone].is-alive .dev-cell.is-live .pa-hours span,
[data-devices-phone].is-alive .dev-cell.is-live .pa-steps > div,
[data-devices-phone].is-alive .dev-cell.is-live .pa-color,
[data-devices-phone].is-alive .dev-cell.is-live .pa-statrow > div,
[data-devices-phone].is-alive .dev-cell.is-live .pa-minis i,
[data-devices-phone].is-alive .dev-cell.is-live .pa-choice,
[data-devices-phone].is-alive .dev-cell.is-live .pa-stepper i,
[data-devices-phone].is-alive .dev-cell.is-live .pa-slot,
[data-devices-phone].is-alive .dev-cell.is-live .phone__card[style],
[data-devices-phone].is-alive .dev-cell.is-live .phone__list-row[style],
[data-devices-phone].is-alive .dev-cell.is-live .pma-pop
{
	animation: pa-pop 480ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
	animation-delay: calc(160ms + var(--i, 0) * 70ms);
}

[data-devices-phone].is-alive .dev-cell.is-live .pa-form i
{
	animation: pa-pop 360ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
	animation-delay: calc(200ms + var(--i, 0) * 28ms);
}

[data-devices-phone].is-alive .dev-cell.is-live .pa-slot__bar i
{
	animation: pa-growx 800ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
	animation-delay: calc(340ms + var(--i, 0) * 90ms);
}
@keyframes pa-growx { from { transform: scaleX(0); } to { transform: none; } }

[data-devices-phone].is-alive .dev-cell.is-live .pa-flag,
[data-devices-phone].is-alive .dev-cell.is-live .pa-ready
{
	animation: pa-slam 560ms cubic-bezier(0.2, 0.7, 0.3, 1) 120ms both;
}

[data-devices-phone].is-alive .dev-cell.is-live .pa-bars i
{
	animation: pa-grow 700ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
	animation-delay: calc(260ms + var(--i, 0) * 60ms);
}

[data-devices-phone].is-alive .dev-cell.is-live .pa-ring__val
{
	animation: pa-sweep 1100ms cubic-bezier(0.3, 0, 0.2, 1) 300ms both;
}

@media (prefers-reduced-motion: reduce)
{
	[data-devices-phone].is-alive .dev-cell.is-live .pa-tile,
	[data-devices-phone].is-alive .dev-cell.is-live .pa-asset,
	[data-devices-phone].is-alive .dev-cell.is-live .pa-share > div,
	[data-devices-phone].is-alive .dev-cell.is-live .pa-hours span,
	[data-devices-phone].is-alive .dev-cell.is-live .pa-steps > div,
	[data-devices-phone].is-alive .dev-cell.is-live .pa-color,
	[data-devices-phone].is-alive .dev-cell.is-live .pa-statrow > div,
	[data-devices-phone].is-alive .dev-cell.is-live .pa-minis i,
	[data-devices-phone].is-alive .dev-cell.is-live .pa-flag,
	[data-devices-phone].is-alive .dev-cell.is-live .pa-ready,
	[data-devices-phone].is-alive .dev-cell.is-live .pa-bars i,
	[data-devices-phone].is-alive .dev-cell.is-live .pa-ring__val,
	[data-devices-phone].is-alive .dev-cell.is-live .pa-choice,
	[data-devices-phone].is-alive .dev-cell.is-live .pa-stepper i,
	[data-devices-phone].is-alive .dev-cell.is-live .pa-slot,
	[data-devices-phone].is-alive .dev-cell.is-live .pa-form i,
	[data-devices-phone].is-alive .dev-cell.is-live .pa-slot__bar i,
	[data-devices-phone].is-alive .dev-cell.is-live .phone__card[style],
	[data-devices-phone].is-alive .dev-cell.is-live .phone__list-row[style],
	.pa-cursor
	{
		animation: none;
	}
}

.app--care .app__line--main { stroke: #57e0a6; filter: drop-shadow(0 0 6px rgba(87, 224, 166, 0.55)); }
.app--care .app__live-dot { fill: #57e0a6; filter: drop-shadow(0 0 5px rgba(87, 224, 166, 0.9)); }
.app--care .app__legend .l-fe::before { background: #57e0a6; box-shadow: 0 0 6px rgba(87, 224, 166, 0.8); }
.app--care .app-src__bar i { background: linear-gradient(90deg, #57e0a6, #9df0cd); }
.app--care .app-src__bar .is-b { background: linear-gradient(90deg, #2fa87a, #57e0a6); }
.app--care .app-src__bar .is-c { background: linear-gradient(90deg, #1e7a58, #3cc08b); }

/* =====================================
 * The desktop reveal (home film only) — a cinema-scale display that
 * MATERIALISES out of the white after the thesis. installDevices drives:
 * --dev 1→0 (the screen condenses out of a white bloom), --rx (perspective
 * settle), --asm 0→1 (panels assemble, .is-on boots the charts), then
 * --dive 0→1 (the camera pushes through the interface layers).
 * The old flat .macbook stays for other pages.
 * ===================================== */
.display-scene
{
	width: min(1040px, 84vw);
	perspective: 1600px;
	perspective-origin: 50% 28%;
}

.display
{
	position: relative;
	transform: rotateX(var(--rx, 0deg));
	will-change: transform;
}

/* Condensation bloom — the glow the screen is born from. */
.display::before
{
	content: "";
	position: absolute;
	inset: -18% -12%;
	background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0) 66%);
	opacity: var(--dev, 0);
	pointer-events: none;
	z-index: 5;
}

.display__panel
{
	position: relative;
	aspect-ratio: 16 / 9.4;
	border-radius: clamp(12px, 1.7vw, 22px);
	background: linear-gradient(160deg, #10141c, #05070d);
	overflow: hidden;
	box-shadow:
		0 0 0 1.5px rgba(150, 160, 175, 0.55),
		0 40px 90px rgba(12, 19, 34, 0.30);
	/* NO box-reflect: it forced the whole console to rasterise TWICE on
	   every scrub frame (the chart pans per frame) — the source of the
	   scroll jitter. The ground shadow carries the depth instead. */
}

/* Emerging from the veil: a LUMINOUS skin over the glass that burns off —
   radial so mid-fade reads as glow, never as a grey slab. */
.display__white
{
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 85% 90% at 50% 46%,
		#ffffff 0%,
		#f2f7fc 48%,
		#dbeaf5 100%);
	opacity: var(--dev, 0);
	pointer-events: none;
	z-index: 4;
}

/* One specular sweep across the glass as it boots. */
.display__glare
{
	position: absolute;
	inset: -20% -35%;
	background: linear-gradient(105deg,
		transparent 42%,
		rgba(255, 255, 255, 0.14) 50%,
		rgba(255, 255, 255, 0.02) 57%,
		transparent 62%);
	transform: translateX(-120%);
	pointer-events: none;
	z-index: 3;
}
.display.is-on .display__glare { animation: display-glare 1.25s 0.2s cubic-bezier(0.3, 0, 0.2, 1) both; }
@keyframes display-glare { to { transform: translateX(120%); } }

/* Soft floor anchor under the floating panel. */
.display__shadow
{
	position: absolute;
	left: 5%;
	right: 5%;
	bottom: -10%;
	height: 14%;
	border-radius: 50%;
	background: radial-gradient(ellipse at center, rgba(12, 19, 34, 0.30), transparent 68%);
	filter: blur(16px);
	z-index: -1;
}

/* Assembly opacities are written directly by installDevices (see the
   jitter note above); layers default to visible for the static fallback. */

/* --- The stand-in console app (Anthony will supply a real screenshot;
       swap the .app innards for an <img> when it lands). Layers carry
       data-depth and spread apart with --dive during the camera dive. --- */
.app
{
	position: absolute;
	inset: clamp(7px, 1vw, 13px);           /* bezel */
	border-radius: clamp(7px, 0.9vw, 12px);
	overflow: hidden;
	display: grid;
	grid-template:
		"bar  bar  bar"  clamp(22px, 4.6%, 30px)
		"rail kpis feed" auto
		"rail main feed" 1fr
		/ clamp(84px, 14%, 116px) 1fr clamp(130px, 27%, 185px);
	gap: clamp(6px, 1.2%, 10px);
	padding: 0 clamp(6px, 1.2%, 10px) clamp(6px, 1.2%, 10px);
	background:
		radial-gradient(ellipse 90% 60% at 70% -10%, rgba(49, 197, 244, 0.08), transparent 60%),
		#070b12;
	color: #dfe9f4;
	font-size: clamp(8px, 1.5vw, 11px);
	line-height: 1.3;
}

.app__bar
{
	grid-area: bar;
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 calc(-1 * clamp(6px, 1.2%, 10px));
	padding: 0 12px;
	background: rgba(255, 255, 255, 0.03);
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.app__bar-title
{
	font-family: var(--font-mono);
	font-size: 0.85em;
	color: rgba(223, 233, 244, 0.55);
	margin-right: auto;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.app__bar-title b { font-weight: 500; color: #eaf7ff; }

.app__bar-clock { font-size: 0.85em; color: rgba(223, 233, 244, 0.45); }

.app__pill
{
	font-family: var(--font-mono);
	font-size: 0.72em;
	letter-spacing: 0.08em;
	padding: 2px 7px;
	border-radius: 99px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	color: rgba(223, 233, 244, 0.6);
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.app__pill--live { border-color: rgba(49, 197, 244, 0.45); color: #31c5f4; }
.app__pill--live i
{
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #31c5f4;
	animation: app-pulse 1.6s ease-in-out infinite;
}
@keyframes app-pulse { 50% { opacity: 0.25; } }

.app__rail
{
	grid-area: rail;
	display: flex;
	flex-direction: column;
	gap: clamp(2px, 0.6vw, 7px);
	padding: 10px 4px 10px 0;
	border-right: 1px solid rgba(255, 255, 255, 0.06);
	overflow: hidden;
}

/* Nav rail — module names lifted from the old desk system. */
.app-nav
{
	font-family: var(--font-mono);
	font-size: 0.78em;
	letter-spacing: 0.04em;
	color: rgba(223, 233, 244, 0.48);
	padding: clamp(1px, 0.35vw, 4px) 8px;
	border-radius: 5px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.app-nav.is-active
{
	color: #eaf7ff;
	background: linear-gradient(90deg, rgba(49, 197, 244, 0.30), rgba(49, 197, 244, 0.06));
	box-shadow: inset 2px 0 0 #31c5f4;
}
.app-nav--push { margin-top: auto; }

.app__kpis
{
	grid-area: kpis;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: clamp(5px, 1%, 8px);
	min-width: 0;
}

.app-kpi
{
	position: relative;
	padding: 6px 8px 4px;
	border-radius: 7px;
	background: rgba(255, 255, 255, 0.035);
	border: 1px solid rgba(255, 255, 255, 0.07);
	overflow: hidden;
}

.app-kpi__k { display: block; font-size: 0.68em; letter-spacing: 0.1em; color: rgba(223, 233, 244, 0.42); }
.app-kpi__v { display: block; font-weight: 650; font-size: 1.35em; letter-spacing: -0.01em; margin-top: 1px; }
.app-kpi__v em { font-style: normal; font-size: 0.62em; color: rgba(223, 233, 244, 0.5); }
.app-kpi--pnl .app-kpi__v { color: #35e08f; }

.app-kpi__s
{
	display: block;
	font-size: 0.66em;
	letter-spacing: 0.04em;
	color: rgba(223, 233, 244, 0.4);
	margin-top: 3px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.app-ok { color: #35e08f; }
.app-warn { color: #f4b63c; }

/* =====================================
 * Desktop console worlds — REAL LittleMan products recreated live
 * (reference shots in /resources/Desktop). Shared `da-` kit inside the
 * .app shell; every world keeps the five data-depth layers so the dive
 * choreography needs no per-world code.
 * ===================================== */
.da-dn { color: #ff7a76; }

/* Label + value rows (readouts, period status). */
.da-rows { display: flex; flex-direction: column; gap: 2px; }
.da-row
{
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 8px;
	font-size: 0.74em;
	padding: 2px 0 3px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.045);
}
.da-row span { color: rgba(223, 233, 244, 0.55); }
.da-row b { font-family: var(--font-mono); font-weight: 500; color: #eaf7ff; letter-spacing: 0.02em; }
.da-row .up { color: #35e08f; }
.da-row .dn { color: #ff7a76; }
.da-rows--wide { margin-top: clamp(5px, 1%, 9px); }
.da-rows--wide .da-row { font-size: 0.8em; }

/* Horizontal value bars (account types, jobs by status). */
.da-bars
{
	margin-top: clamp(5px, 1%, 9px);
	display: flex;
	flex-direction: column;
	gap: clamp(3px, 0.6%, 6px);
}
.da-bar
{
	display: grid;
	grid-template-columns: minmax(0, 11em) 1fr auto;
	align-items: center;
	gap: 10px;
	font-size: 0.72em;
}
.da-bar > span:first-child { color: rgba(223, 233, 244, 0.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.da-bar__t { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.da-bar__t i { display: block; height: 100%; width: var(--w, 50%); border-radius: 2px; transform-origin: left; }
.da-bar__t .is-dn { background: linear-gradient(90deg, #b23230, #ff7a76); }
.da-bar__t .is-up { background: linear-gradient(90deg, #1d9f68, #35e08f); }
.da-bar__t .is-vio { background: linear-gradient(90deg, #5b4bd4, #8b7bf4); }
.da-bar__t .is-gold { background: linear-gradient(90deg, #b98a1f, #f4b731); }
.da-bar > b { font-family: var(--font-mono); font-size: 0.95em; color: #eaf7ff; }
.da-bar .dn { color: #ff7a76; }
.da-bar .up { color: #35e08f; }
.display.is-on .da-bar__t i { animation: da-growx 900ms cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: calc(0.6s + var(--i, 0) * 0.15s); }
@keyframes da-growx { from { transform: scaleX(0); } to { transform: none; } }

/* Trade Signal — directive, exposure, gate flags. */
.da-directive
{
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: clamp(6px, 1.2%, 10px) clamp(8px, 1.4%, 12px);
	border: 1px solid rgba(244, 183, 49, 0.35);
	border-left: 3px solid #f4b731;
	border-radius: 6px;
	background: rgba(244, 183, 49, 0.05);
}
.da-directive > b
{
	font-family: var(--font-mono);
	font-size: 0.66em;
	letter-spacing: 0.14em;
	padding: 3px 8px;
	border-radius: 4px;
	background: #f4b731;
	color: #171207;
}
.da-directive strong { display: block; font-size: 0.82em; font-weight: 600; color: #f5f9ff; letter-spacing: -0.01em; }
.da-directive em { font-style: normal; font-size: 0.7em; line-height: 1.5; color: rgba(223, 233, 244, 0.6); }
.da-exposure { margin-top: clamp(5px, 1%, 9px); display: flex; flex-direction: column; gap: 5px; }
.da-exposure > .mono { font-size: 0.62em; letter-spacing: 0.1em; color: rgba(223, 233, 244, 0.5); }
.da-exposure__bar { height: 7px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.da-exposure__bar i
{
	display: block;
	height: 100%;
	width: var(--w, 33%);
	border-radius: 4px;
	background: linear-gradient(90deg, #b98a1f, #f4b731);
	box-shadow: 0 0 12px rgba(244, 183, 49, 0.5);
	transform-origin: left;
}
.display.is-on .da-exposure__bar i { animation: da-growx 1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.7s both; }
.da-exposure__scale { display: flex; justify-content: space-between; font-size: 0.56em; color: rgba(223, 233, 244, 0.35); letter-spacing: 0.08em; }
.da-flags { margin-top: clamp(5px, 1%, 9px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.da-flag
{
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: 6px;
	padding: 6px 9px;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 1px 8px;
	background: rgba(255, 255, 255, 0.03);
}
.da-flag > .mono { font-size: 0.58em; letter-spacing: 0.14em; color: rgba(223, 233, 244, 0.55); }
.da-flag b { grid-row: 1 / 3; align-self: center; font-family: var(--font-mono); font-size: 0.72em; color: rgba(223, 233, 244, 0.45); }
.da-flag em { font-style: normal; font-size: 0.6em; color: rgba(223, 233, 244, 0.4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.da-flag.is-on { border-color: rgba(53, 224, 143, 0.4); background: rgba(53, 224, 143, 0.06); }
.da-flag.is-on > .mono { color: #35e08f; }
.da-flag.is-on b { color: #35e08f; }

/* Signal world accent — terminal amber. */
.app--signal .app__line--main { stroke: #f4b731; filter: drop-shadow(0 0 6px rgba(244, 183, 49, 0.55)); }
.app--signal .app__live-dot { fill: #35e08f; filter: drop-shadow(0 0 5px rgba(53, 224, 143, 0.9)); }
.app--signal .app__legend .l-fe::before { background: #f4b731; box-shadow: 0 0 6px rgba(244, 183, 49, 0.8); }

/* Growth world accent — franchise teal. */
.app--growth .app__line--main { stroke: #4fd8c4; filter: drop-shadow(0 0 6px rgba(79, 216, 196, 0.55)); }
.app--growth .app__live-dot { fill: #4fd8c4; filter: drop-shadow(0 0 5px rgba(79, 216, 196, 0.9)); }
.app--growth .app__legend .l-fe::before { background: #4fd8c4; box-shadow: 0 0 6px rgba(79, 216, 196, 0.8); }

/* Firestorm world accent — ember orange. */
.app--fire .app__line--main { stroke: #fb7a45; filter: drop-shadow(0 0 6px rgba(251, 122, 69, 0.55)); }
.app--fire .app__live-dot { fill: #fb7a45; filter: drop-shadow(0 0 5px rgba(251, 122, 69, 0.9)); }
.app--fire .app__legend .l-fe::before { background: #fb7a45; box-shadow: 0 0 6px rgba(251, 122, 69, 0.8); }
.app--fire .app__pill--live { border-color: rgba(251, 122, 69, 0.5); color: #ffb492; }
.app--fire .app__pill--live i { background: #fb7a45; box-shadow: 0 0 8px rgba(251, 122, 69, 0.9); }

/* Valkera — neon platform (violet/pink). */
.app--valkera .app__legend .l-fe::before { background: #ec4899; box-shadow: 0 0 6px rgba(236, 72, 153, 0.8); }
.da-code
{
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: clamp(6px, 1.2%, 10px) clamp(8px, 1.4%, 12px);
	border: 1px solid rgba(167, 139, 250, 0.25);
	border-radius: 6px;
	background: rgba(167, 139, 250, 0.05);
}
.da-code > div { display: grid; grid-template-columns: 6.5em 1fr; gap: 10px; font-size: 0.7em; }
.da-code span { color: rgba(223, 233, 244, 0.45); }
.da-code b { font-family: var(--font-mono); font-weight: 400; color: #cfe0ff; letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.da-code b:first-line { color: #9fd8ff; }
.da-chips { margin-top: clamp(5px, 1%, 9px); display: flex; flex-wrap: wrap; gap: 6px; }
.da-chip
{
	font-size: 0.66em;
	font-weight: 600;
	padding: 5px 12px;
	border-radius: 7px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	color: rgba(232, 238, 248, 0.85);
	background: rgba(255, 255, 255, 0.04);
}
.da-chip--hot
{
	background: #ec4899;
	border-color: #ec4899;
	color: #fff;
	box-shadow: 0 4px 16px rgba(236, 72, 153, 0.4);
}
.da-week { margin-top: clamp(5px, 1%, 9px); }
.da-week__strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 6px; }
.da-week .da-cell,
.da-grid .da-cell
{
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 6px;
	padding: 6px 8px;
	display: flex;
	flex-direction: column;
	gap: 1px;
	background: rgba(255, 255, 255, 0.03);
}
.da-cell span { font-family: var(--font-mono); font-size: 0.56em; letter-spacing: 0.12em; color: rgba(223, 233, 244, 0.45); }
.da-cell b { font-family: var(--font-mono); font-size: 0.74em; font-weight: 500; color: #e8f2ff; }
.da-week .da-cell.is-on { border-color: rgba(87, 224, 166, 0.45); background: rgba(87, 224, 166, 0.07); }
.da-week .da-cell.is-on b { color: #57e0a6; }

/* Trading (price curves) — the LIGHT classic desk. */
.da-grid { margin-top: clamp(5px, 1%, 9px); }
.da-grid__cells { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 6px; }
.app--curves { background: #eef1f5; }
.app--curves .app__bar { background: #2678b8; border-bottom-color: rgba(0, 0, 0, 0.15); }
.app--curves .app__bar-title { color: rgba(255, 255, 255, 0.85); }
.app--curves .app__bar-title b { color: #fff; }
.app--curves .app__bar-clock { color: rgba(255, 255, 255, 0.75); }
.app--curves .app__pill { border-color: rgba(255, 255, 255, 0.4); color: rgba(255, 255, 255, 0.85); }
.app--curves .app__pill--live { border-color: rgba(140, 240, 180, 0.7); color: #d8ffe8; }
.app--curves .app__rail { background: #f7f9fc; border-right-color: rgba(20, 30, 45, 0.1); }
.app--curves .app-nav { color: rgba(30, 42, 58, 0.6); }
.app--curves .app-nav.is-active { color: #fff; background: #2196f3; border-radius: 4px; }
.app--curves .app-kpi { background: #fff; border-color: rgba(20, 30, 45, 0.1); }
.app--curves .app-kpi__k { color: rgba(30, 42, 58, 0.5); }
.app--curves .app-kpi__v { color: #16283c; }
.app--curves .app-kpi__s { color: rgba(30, 42, 58, 0.45); }
.app--curves .app__main,
.app--curves .app__feed { background: #fff; border-color: rgba(20, 30, 45, 0.1); }
.app--curves .app__main-title,
.app--curves .app__feed-title,
.app--curves .app__blend-title { color: rgba(30, 42, 58, 0.55); }
.app--curves .app__main-sub { color: rgba(30, 42, 58, 0.4); }
.app--curves .app__legend i { color: rgba(30, 42, 58, 0.55); }
.app--curves .app__grid line { stroke: rgba(30, 42, 58, 0.08); }
.app--curves .app__line--main { stroke: #2678b8; filter: none; }
.app--curves .app__line--alt { stroke: rgba(214, 69, 65, 0.75); }
.app--curves .app__live-dot { fill: #2678b8; filter: none; }
.app--curves .app__legend .l-fe::before { background: #2678b8; box-shadow: none; }
.app--curves .app__legend .l-cn::before { background: #d64541; }
.app--curves .app__feed-list li { border-bottom-color: rgba(20, 30, 45, 0.07); }
.app--curves .app__feed-list b { color: #2678b8; }
.app--curves .app__feed-list span { color: rgba(30, 42, 58, 0.7); }
.app--curves .da-cell { background: #f2f6fb; border-color: rgba(20, 30, 45, 0.1); }
.app--curves .da-cell span { color: rgba(30, 42, 58, 0.5); }
.app--curves .da-cell b { color: #16283c; }
.app--curves .app__ai { background: #f2f6fb; border-color: rgba(20, 30, 45, 0.1); }
.app--curves .app__ai-title { color: rgba(30, 42, 58, 0.55); }
.app--curves .app-msg { background: #fff; color: rgba(30, 42, 58, 0.75); border-color: rgba(20, 30, 45, 0.08); }
.app--curves .app-msg b { color: #16283c; }
.app--curves .app-ai-caret { background: #2678b8; }

/* =====================================
 * Per-product chrome — each real product wears ITS OWN top bar (brand
 * tile, workspace path, search, avatar) and layout signatures, instead
 * of the film console's terminal dots. First-class, not palette swaps.
 * ===================================== */
.db-brand { display: flex; align-items: center; gap: 7px; margin-right: auto; min-width: 0; }
.db-brand__tile
{
	flex: none;
	width: 1.55em;
	height: 1.55em;
	border-radius: 5px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-mono);
	font-size: 0.6em;
	font-weight: 700;
	color: #fff;
	background: linear-gradient(150deg, #4a5568, #2b3442);
}
.db-brand__name { font-size: 0.78em; font-weight: 650; color: #f2f7ff; white-space: nowrap; letter-spacing: -0.01em; }
.db-brand__name em { font-style: normal; font-weight: 400; color: rgba(223, 233, 244, 0.4); }
.db-brand__ws
{
	font-family: var(--font-mono);
	font-size: 0.62em;
	letter-spacing: 0.08em;
	color: rgba(223, 233, 244, 0.42);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-left: 8px;
}
.db-brand__ws b { font-weight: 500; color: rgba(234, 247, 255, 0.85); }
.db-search
{
	font-family: var(--font-mono);
	font-size: 0.62em;
	letter-spacing: 0.06em;
	color: rgba(223, 233, 244, 0.4);
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: rgba(255, 255, 255, 0.04);
	border-radius: 6px;
	padding: 3px 9px;
	white-space: nowrap;
}
.db-search b { font-weight: 500; color: rgba(223, 233, 244, 0.55); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 3px; padding: 0 4px; margin-left: 6px; }
.db-avatar
{
	flex: none;
	width: 1.55em;
	height: 1.55em;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-mono);
	font-size: 0.56em;
	font-weight: 700;
	color: #0b1018;
	background: linear-gradient(150deg, #cfe0f4, #93a9c4);
}

/* Rail extras: section labels, count + review badges, org-tree items. */
.app-rail__sec
{
	font-family: var(--font-mono);
	font-size: 0.56em;
	letter-spacing: 0.18em;
	color: rgba(223, 233, 244, 0.28);
	margin: 7px 0 1px;
}
.app-nav .db-count
{
	float: right;
	font-size: 0.85em;
	color: rgba(223, 233, 244, 0.35);
}
.app-nav .db-rev
{
	float: right;
	font-size: 0.62em;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: #f4b63c;
	border: 1px solid rgba(244, 182, 60, 0.4);
	border-radius: 3px;
	padding: 0 3px;
	transform: translateY(1px);
}
.app-nav--kid { padding-left: 12px; }

/* Buttons + tags. */
.db-btn
{
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 0.66em;
	font-weight: 600;
	padding: 4px 10px;
	border-radius: 6px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	color: rgba(234, 244, 255, 0.85);
	background: rgba(255, 255, 255, 0.05);
	white-space: nowrap;
}
.db-btn--hot { background: #4fd8c4; border-color: #4fd8c4; color: #062420; }
.db-btn--fire { border-color: rgba(251, 122, 69, 0.5); color: #ffb492; background: rgba(251, 122, 69, 0.08); width: 100%; justify-content: center; margin-top: 5px; }
.db-tag
{
	font-style: normal;
	font-family: var(--font-mono);
	font-size: 0.56em;
	letter-spacing: 0.08em;
	color: #ffb492;
	border: 1px solid rgba(251, 122, 69, 0.45);
	border-radius: 999px;
	padding: 2px 7px;
	white-space: nowrap;
	align-self: center;
}

/* Growth — greeting header, KPI corner sparks, agenda actions, segbar. */
.db-greet { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.db-greet__k { font-family: var(--font-mono); font-size: 0.6em; letter-spacing: 0.16em; color: #4fd8c4; display: block; }
.db-greet__h { font-family: var(--font-display); font-size: 1.3em; font-weight: 650; letter-spacing: 0.04em; color: #f2f7ff; }
.db-greet__btns { display: flex; gap: 6px; }
.app-kpi__corner
{
	position: absolute;
	top: 7px;
	right: 8px;
	width: 34px;
	height: 12px;
}
.app-kpi__corner path { fill: none; stroke: #4fd8c4; stroke-width: 1.5; opacity: 0.75; }
.app-kpi__corner.is-dn path { stroke: #ff7a76; }
.app-kpi__corner.is-gold path { stroke: #f4b731; }
.db-act
{
	text-decoration: none;
	font-family: var(--font-mono);
	font-size: 0.78em;
	letter-spacing: 0.06em;
	color: #4fd8c4;
	border: 1px solid rgba(79, 216, 196, 0.35);
	border-radius: 4px;
	padding: 1px 6px;
	white-space: nowrap;
	align-self: center;
}
.db-seg { margin-top: clamp(5px, 1%, 9px); }
.db-seg__bar { display: flex; height: 7px; border-radius: 4px; overflow: hidden; gap: 2px; margin-top: 6px; }
.db-seg__bar i { display: block; height: 100%; flex-grow: var(--g, 1); }
.db-seg__bar .s-lead { background: #8b7bf4; }
.db-seg__bar .s-quo { background: #5aa8a0; }
.db-seg__bar .s-eng { background: #4fd8c4; }
.db-seg__bar .s-insp { background: #35b7e0; }
.db-seg__bar .s-prep { background: #7ab3f0; }
.db-seg__bar .s-iss { background: #b8cf6e; }
.db-seg__legend
{
	display: flex;
	justify-content: space-between;
	margin-top: 5px;
	font-family: var(--font-mono);
	font-size: 0.58em;
	letter-spacing: 0.06em;
	color: rgba(223, 233, 244, 0.45);
}
.db-seg__legend b { display: block; font-size: 1.5em; color: #eaf7ff; font-weight: 600; }

/* Signal — buy/sell rule columns under the directive. */
.da-rules { margin-top: clamp(5px, 1%, 9px); display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.da-rules > div
{
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 6px;
	padding: 6px 9px;
	background: rgba(255, 255, 255, 0.025);
}
.da-rules b { display: block; font-family: var(--font-mono); font-size: 0.6em; letter-spacing: 0.12em; margin-bottom: 2px; }
.da-rules .up b { color: #35e08f; }
.da-rules .dn b { color: #ff7a76; }
.da-rules em { font-style: normal; font-size: 0.64em; line-height: 1.5; color: rgba(223, 233, 244, 0.55); }

/* Curves — the derivative browser. */
.db-derivs { display: flex; flex-direction: column; }
.db-derivs__head
{
	background: #2678b8;
	color: #fff;
	font-family: var(--font-mono);
	font-size: 0.6em;
	letter-spacing: 0.14em;
	padding: 3px 9px;
	border-radius: 4px 4px 0 0;
}
.db-deriv
{
	display: grid;
	grid-template-columns: 7em 1fr auto;
	gap: 8px;
	align-items: center;
	font-size: 0.68em;
	padding: 2px 9px 3px;
	border: 1px solid rgba(20, 30, 45, 0.08);
	border-top: 0;
	background: #fff;
}
.db-deriv:nth-child(odd) { background: #f6f9fc; }
.db-deriv.is-sel { background: #d9ecfb; }
.db-deriv > span:first-child { font-family: var(--font-mono); font-size: 0.88em; color: rgba(30, 42, 58, 0.5); }
.db-deriv > span:nth-child(2) { color: #16283c; font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-deriv > i { font-style: normal; font-size: 0.8em; color: #35a860; }

/* Valkera / AccountMan light-tile variants of the brand chrome. */
.app--valkera .db-brand__tile { background: linear-gradient(150deg, #ec4899, #8b2f68); }
.app--growth .db-brand__tile { background: linear-gradient(150deg, #4fd8c4, #1f7a6d); color: #062420; }
.app--fire .db-brand__tile { background: linear-gradient(150deg, #fb7a45, #b23f14); }
.app--curves .db-brand__tile { background: linear-gradient(150deg, #4a90d9, #2678b8); }
.app--curves .db-search { border-color: rgba(20, 30, 45, 0.15); background: #fff; color: rgba(30, 42, 58, 0.5); }
.app--curves .db-search b { color: rgba(30, 42, 58, 0.55); border-color: rgba(20, 30, 45, 0.2); }
.app--curves .db-brand__name { color: #16283c; }
.app--curves .db-brand__name em { color: rgba(30, 42, 58, 0.45); }
.app--curves .db-brand__ws { color: rgba(30, 42, 58, 0.5); }
.app--curves .db-brand__ws b { color: #16283c; }
.app--curves .db-avatar { background: linear-gradient(150deg, #4a90d9, #2678b8); color: #fff; }
.app--curves .app__bar { background: #f7f9fc; border-bottom-color: rgba(20, 30, 45, 0.12); }
.app--curves .app__bar .app__pill { border-color: rgba(38, 120, 184, 0.4); color: #2678b8; }
.app--curves .app__bar .app__pill--live { border-color: rgba(35, 168, 109, 0.5); color: #1d8a56; }
.app--curves .app__bar-clock { color: rgba(30, 42, 58, 0.45); }

/* Fit AccountMan's full-precision hero number; 2-col settlement grid
   when the forward curve lives in the narrow feed column. */
.app--ledger .app-kpi__v { font-size: 1.06em; }
.app__feed .da-grid { margin-top: 0; }
.app__feed .da-grid__cells { grid-template-columns: repeat(2, 1fr); }

/* =====================================
 * Phone signature headers — each app opens the way IT opens, not with
 * the shared eyebrow/h1. (Refs in /resources/Mobile.)
 * ===================================== */
.pm-apphead { display: flex; align-items: center; gap: 9px; }
.pm-back { font-style: normal; font-size: 15px; color: #14181f; flex: none; }
.pm-apphead > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pm-apphead em { font-style: normal; font-size: 9px; color: rgba(20, 24, 31, 0.45); }
.pm-apphead strong
{
	font-family: var(--font-display);
	font-size: 15px;
	font-weight: 650;
	color: #14181f;
	letter-spacing: -0.02em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.pm-ico
{
	width: 24px;
	height: 24px;
	border-radius: 50%;
	border: 1px solid rgba(20, 24, 31, 0.15);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	color: #14181f;
	flex: none;
}
.pm-ico--accent { color: #c2410c; border-color: rgba(194, 65, 12, 0.4); }

/* Maintenance Partners — the sync toast ("Opening the cookie jar…"). */
.pm-toast
{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 3;
	background: #2b8fe8;
	color: #fff;
	font-size: 9px;
	letter-spacing: 0.08em;
	text-transform: none;
	padding: 46px 16px 7px;
}
.phone--mp .phone__status { color: #fff; }

/* Health One — greeting with streak + bell. */
.pm-greet { display: flex; align-items: center; gap: 7px; }
.pm-greet > div { flex: 1; display: flex; flex-direction: column; }
.pm-greet em { font-style: normal; font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.16em; color: rgba(223, 233, 244, 0.5); }
.pm-greet strong { font-family: var(--font-display); font-size: 19px; font-weight: 650; color: #f2f6fc; letter-spacing: -0.02em; }
.pm-chip
{
	font-family: var(--font-mono);
	font-size: 8.5px;
	color: #f4d06f;
	border: 1px solid rgba(244, 208, 111, 0.35);
	border-radius: 99px;
	padding: 3px 8px;
	background: rgba(244, 208, 111, 0.08);
	white-space: nowrap;
	flex: none;
}
.pm-bell
{
	position: relative;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-style: normal;
	flex: none;
}
.pm-bell i
{
	position: absolute;
	top: -4px;
	right: -4px;
	background: #6366f1;
	color: #fff;
	font-style: normal;
	font-size: 7.5px;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Maintenance Partners · Asset — photo-led detail screen (dark). */
.pm-apphead--dark .pm-back,
.pm-apphead--dark strong { color: #f2f6fc; }
.pm-apphead--dark .pm-ico { color: rgba(242, 246, 252, 0.8); border-color: rgba(255, 255, 255, 0.18); }
.pm-ico--warm { color: #e08856 !important; border-color: rgba(224, 136, 86, 0.45) !important; }
.phone--mpa .phone__app { gap: 9px; }
.pma-photo
{
	flex: 1 1 0;         /* the photo is the hero: it takes the free space —
	                        basis 0, or its intrinsic height evicts the tabs */
	min-height: 104px;   /* …and never collapses (fixed-height flex column) */
	border-radius: 10px;
	overflow: hidden;
	background: #23262c;
}
.pma-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.pma-pills { display: flex; justify-content: space-between; flex: none; }
.pma-id { display: flex; flex-direction: column; gap: 2px; flex: none; }
.pma-id strong { font-family: var(--font-display); font-size: 16px; font-weight: 650; color: #f2f6fc; letter-spacing: -0.02em; }
.pma-id em { font-style: normal; font-size: 9.5px; color: rgba(223, 233, 244, 0.5); }
.pma-grid
{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 6px;
	padding: 7px 0;
	flex: none;
	border-top: 1px solid rgba(255, 255, 255, 0.07);
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.pma-grid span { display: block; font-family: var(--font-mono); font-size: 7px; letter-spacing: 0.1em; color: rgba(223, 233, 244, 0.4); }
.pma-grid b { font-size: 10px; font-weight: 550; color: #eef4fc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.pma-expand { font-size: 8.5px; letter-spacing: 0.16em; color: #e08856; text-align: center; }
.pma-insp
{
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: 11px;
	background: rgba(255, 255, 255, 0.035);
	padding: 10px 11px;
	display: flex;
	flex-direction: column;
	gap: 5px;
}
.pma-insp__head { display: flex; justify-content: space-between; align-items: center; }
.pma-insp__head strong { font-size: 12.5px; font-weight: 650; color: #f2f6fc; }
.pma-insp__head i
{
	font-style: normal;
	font-family: var(--font-mono);
	font-size: 7.5px;
	letter-spacing: 0.12em;
	color: #f4d06f;
	border: 1px solid rgba(244, 208, 111, 0.35);
	border-radius: 99px;
	padding: 2px 8px;
	background: rgba(244, 208, 111, 0.08);
}
.pma-insp em { font-style: normal; font-size: 9px; color: rgba(223, 233, 244, 0.55); }
.pma-insp em b { color: #ff8d88; font-weight: 550; }
.pma-btn
{
	margin-top: 3px;
	text-align: center;
	font-family: var(--font-mono);
	font-size: 9.5px;
	letter-spacing: 0.16em;
	font-weight: 600;
	padding: 9px;
	border-radius: 9px;
	background: #e08856;
	color: #1c1208;
	box-shadow: 0 8px 22px rgba(224, 136, 86, 0.3);
}

/* Health One — the glowing barbell journey in the readiness card. */
.pa-ready__bells { grid-column: 1; margin: 4px 0 2px; }
.pa-ready__bells svg { width: 128px; height: 24px; display: block; }
.pa-ready__bells rect { fill: #96a0ff; filter: drop-shadow(0 0 6px rgba(150, 160, 255, 0.95)); }
.pa-ready__bells line { stroke: rgba(150, 160, 255, 0.6); stroke-width: 2.5; stroke-dasharray: 2 5; stroke-linecap: round; }

/* Coach — centred serif season masthead. */
.pm-season { text-align: center; display: flex; flex-direction: column; gap: 2px; }
.pm-season em { font-style: normal; font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.2em; color: rgba(223, 233, 244, 0.45); }
.pm-season strong { font-family: var(--font-serif); font-style: italic; font-size: 17px; font-weight: 550; color: #f2ead8; }
.pm-season b { font-family: var(--font-display); font-size: 26px; font-weight: 700; color: #fff; letter-spacing: -0.02em; }
.pm-season b i { font-style: normal; font-size: 12px; font-weight: 500; color: rgba(223, 233, 244, 0.5); }
.pa-record--c { justify-content: center; gap: 10px; }

/* Terraform — hamburger + hex logo masthead. */
.pm-terrahead
{
	display: flex;
	align-items: center;
	gap: 10px;
	padding-bottom: 7px;
	border-bottom: 1px solid rgba(167, 139, 250, 0.2);
}
.pm-terrahead i { font-style: normal; font-size: 13px; color: rgba(223, 233, 244, 0.6); }
.pm-terrahead span { font-size: 13px; color: #a78bfa; }
.pm-terrahead strong { color: #f2f6fc; font-weight: 650; letter-spacing: -0.01em; }

/* Health One Fuel — Overview/Library/Recipes segments. */
.pa-seg--3 { grid-template-columns: repeat(3, 1fr); }

/* AccountMan — the cashflow matrix IS the hero (it pans with the
   scrub: the .app__chart class inside the drift wrapper is enough). */
.db-matrix
{
	width: 116%;   /* the trailing months peek off-panel — there's more */
	max-width: none;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	font-family: var(--font-mono);
	overflow: hidden;
	will-change: transform;
}
.db-matrix__row
{
	display: grid;
	grid-template-columns: 10em repeat(9, 1fr);
	gap: 8px;
	align-items: baseline;
	font-size: 0.6em;
	padding: 1px 0 2px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.045);
}
.db-matrix__row span:first-child
{
	font-size: 1.02em;
	color: rgba(223, 233, 244, 0.62);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.db-matrix__row b { font-weight: 400; text-align: right; color: #8fd9b0; letter-spacing: 0.02em; }
.db-matrix__row .dn { color: #ff8d88; }
.db-matrix__row .mut { color: rgba(223, 233, 244, 0.22); }
.db-matrix__row--head { border-bottom-color: rgba(255, 255, 255, 0.12); }
.db-matrix__row--head b { color: rgba(223, 233, 244, 0.4); letter-spacing: 0.08em; }

/* Dense variant — the real cashflow surface is a wall of numbers. */
.db-matrix--dense { width: 100%; justify-content: space-between; gap: 0; }
.db-matrix--dense .db-matrix__row
{
	grid-template-columns: 11.5em repeat(9, 1fr);
	font-size: 0.53em;
	gap: 6px;
	padding: 1px 0;
}
.db-matrix--dense .db-matrix__row span:first-child { font-size: 1em; }
.db-matrix__row--other { background: rgba(255, 255, 255, 0.03); }
.db-matrix__row--other span:first-child { color: rgba(223, 233, 244, 0.85); letter-spacing: 0.1em; }

/* Growth — six tiles + the floating copilot pill. */
.app--growth .app__kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.gw-copilot
{
	position: absolute;
	right: clamp(140px, 29%, 200px);
	bottom: clamp(10px, 2%, 16px);
	z-index: 4;
	font-family: var(--font-mono);
	font-size: 0.62em;
	letter-spacing: 0.14em;
	color: #062420;
	background: linear-gradient(120deg, #7de8d8, #4fd8c4);
	border-radius: 999px;
	padding: 6px 13px;
	box-shadow: 0 8px 26px rgba(79, 216, 196, 0.45);
}
.gw-copilot b { font-weight: 600; opacity: 0.65; margin-left: 4px; }
.app__legend i:last-child:not(:first-child) { color: #4fd8c4; }

/* Firestorm — dashboard heading, chart month axis, attention panel. */
.app--fire .app__chart-drift { flex: 0 0 42%; min-height: 0; }
.fs-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 4px; }
.fs-head strong { font-family: var(--font-display); font-size: 1.15em; font-weight: 650; color: #f5f9ff; letter-spacing: -0.01em; }
.fs-head em { font-style: normal; font-size: 0.68em; color: rgba(223, 233, 244, 0.5); }
.fs-months
{
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	text-align: center;
	font-size: 0.56em;
	letter-spacing: 0.1em;
	color: rgba(223, 233, 244, 0.35);
	padding-top: 3px;
}
.fs-months b { display: block; font-weight: 500; color: rgba(223, 233, 244, 0.6); margin-top: 1px; }
.fs-attn
{
	margin-top: clamp(5px, 1%, 9px);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 8px;
	padding: 8px 11px;
	display: flex;
	flex-direction: column;
	gap: 7px;
	background: rgba(255, 255, 255, 0.02);
}
.fs-attn__head { display: flex; justify-content: space-between; align-items: center; }
.fs-attn__head i
{
	font-style: normal;
	font-family: var(--font-mono);
	font-size: 0.58em;
	letter-spacing: 0.1em;
	color: rgba(223, 233, 244, 0.55);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 999px;
	padding: 2px 8px;
}
.fs-attn__row { display: grid; grid-template-columns: auto 1fr auto; gap: 9px; align-items: center; }
.fs-attn__row > b { color: #fb7a45; font-weight: 400; font-size: 0.8em; }
.fs-attn__row strong { display: block; font-size: 0.72em; font-weight: 600; color: #eef4fc; }
.fs-attn__row em { font-style: normal; font-size: 0.62em; color: rgba(223, 233, 244, 0.45); }

/* Trade Signal — thin exposure strip pinned low; no hero chart. */
.da-strip
{
	margin-top: auto;
	display: flex;
	flex-direction: column;
	gap: 5px;
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: 6px;
	padding: 7px 10px 8px;
	background: rgba(255, 255, 255, 0.02);
}
.da-strip .mono { font-size: 0.56em; letter-spacing: 0.14em; color: rgba(223, 233, 244, 0.38); }
.da-strip svg { width: 100%; height: 30px; }
.da-strip path { fill: none; stroke: #35e08f; stroke-width: 2; filter: drop-shadow(0 0 5px rgba(53, 224, 143, 0.5)); }

/* Trading — the grid is the hero; the chart is a modest strip. */
.app--curves .app__chart-drift { flex: 0 0 30%; min-height: 0; }
.app--curves .db-derivs { flex: 1; min-height: 0; overflow: hidden; margin-top: clamp(5px, 1%, 9px); }

/* Valkera — embedded terminal fills the main column. */
.da-term
{
	margin-top: clamp(5px, 1%, 9px);
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: 6px;
	background: #0b0918;
	overflow: hidden;
}
.da-term__bar
{
	font-size: 0.56em;
	letter-spacing: 0.14em;
	color: rgba(223, 233, 244, 0.4);
	padding: 5px 10px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
	background: rgba(255, 255, 255, 0.03);
}
.da-term__body
{
	padding: 8px 10px;
	font-size: 0.64em;
	line-height: 1.75;
	letter-spacing: 0.02em;
	color: #c0caf5;
	text-transform: none;
}
.da-term__body i { font-style: normal; color: #ec4899; margin-right: 6px; }
.da-t-dim { color: rgba(192, 202, 245, 0.45); }
.da-t-ok { color: #57e0a6; }
.da-t-caret
{
	display: inline-block;
	width: 7px;
	height: 11px;
	vertical-align: -2px;
	background: #c0caf5;
	animation: pa-blink 1.1s steps(1) infinite;
}

/* =====================================
 * ZEN · interactive life — the easter egg. A real three.js piece
 * (self-hosted at /zen/) runs INSIDE the device frames via iframe.
 * The shield keeps the film's scroll until the visitor opts in
 * (.is-touch); the slot's pointer-events:none is re-enabled only here.
 * ===================================== */
.zen-frame { position: absolute; inset: 0; background: #aeaca8; }
.phone--zen .phone__screen { background: #aeaca8; }
.zen-frame iframe
{
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
	pointer-events: none;
	background: #aeaca8;
}
.dev-cell.is-touch .zen-frame iframe { pointer-events: auto; }
.zen-shield
{
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: 0 0 26px;
	background: transparent;
	border: 0;
	cursor: pointer;
	pointer-events: auto;
}
.zen-shield .mono
{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 10px;
	letter-spacing: 0.2em;
	color: #223028;
	background: rgba(255, 255, 255, 0.78);
	border: 1px solid rgba(20, 30, 25, 0.15);
	border-radius: 999px;
	padding: 8px 16px;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	box-shadow: 0 8px 26px rgba(20, 30, 25, 0.18);
	transition: transform var(--fast) var(--ease), background var(--fast) var(--ease);
}
.zen-shield:hover .mono { transform: translateY(-2px); background: rgba(255, 255, 255, 0.94); }
/* display:flex/absolute would defeat the [hidden] attribute. */
.zen-shield[hidden],
.zen-exit[hidden] { display: none; }
.zen-shield .mono i
{
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #23a86d;
	box-shadow: 0 0 10px rgba(35, 168, 109, 0.9);
	animation: zen-pulse 1.6s ease-in-out infinite;
}
@keyframes zen-pulse { 50% { opacity: 0.35; } }
.zen-exit
{
	position: absolute;
	top: 12px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 6;
	font-size: 9px;
	letter-spacing: 0.18em;
	color: #223028;
	background: rgba(255, 255, 255, 0.82);
	border: 1px solid rgba(20, 30, 25, 0.15);
	border-radius: 999px;
	padding: 7px 14px;
	cursor: pointer;
	pointer-events: auto;
}
.zen-exit:hover { background: #fff; }
.phone--zen .zen-exit { top: 52px; }
@media (prefers-reduced-motion: reduce)
{
	.zen-shield .mono i { animation: none; }
}

/* =====================================
 * PATCHWORK — every product keeps its OWN base colour. The gallery
 * must read as different software, not one theme palette-swapped:
 * iron = film blue-black · signal = pure terminal black · ledger =
 * neutral graphite · growth = teal-cast · firestorm = warm ember ·
 * curves = classic light grey · valkera = violet neon.
 * ===================================== */
.app--signal { background: linear-gradient(160deg, #0c0d0e, #060707); }
.app--signal .app__main,
.app--signal .app__feed { background: rgba(255, 255, 255, 0.016); }

.app--ledger { background: linear-gradient(160deg, #131416, #0a0b0c); }
.app--ledger .app__bar { background: rgba(255, 255, 255, 0.045); }
.app--ledger .app__main,
.app--ledger .app__feed { background: #17181b; border-color: rgba(255, 255, 255, 0.06); }
.app--ledger .app-kpi { background: #1a1b1e; }

.app--growth { background: linear-gradient(165deg, #0d1b1d, #081011); }
.app--growth .app__bar { background: rgba(79, 216, 196, 0.05); border-bottom-color: rgba(79, 216, 196, 0.12); }
.app--growth .app__main,
.app--growth .app__feed { background: rgba(79, 216, 196, 0.045); border-color: rgba(79, 216, 196, 0.1); }
.app--growth .app-kpi { background: rgba(79, 216, 196, 0.05); border-color: rgba(79, 216, 196, 0.1); }
.app--growth .app-nav.is-active { color: #4fd8c4; background: rgba(79, 216, 196, 0.1); border-radius: 6px; }

.app--valkera { background: linear-gradient(160deg, #17122e, #0c091c); }
.app--valkera .app__bar { background: rgba(167, 139, 250, 0.06); border-bottom-color: rgba(167, 139, 250, 0.14); }
.app--valkera .app__main,
.app--valkera .app__feed { background: rgba(167, 139, 250, 0.05); border-color: rgba(167, 139, 250, 0.12); }
.app--valkera .app-kpi { background: rgba(167, 139, 250, 0.06); border-color: rgba(167, 139, 250, 0.12); }
.app--valkera .app-nav.is-active { color: #d8b4fe; background: rgba(167, 139, 250, 0.12); border-radius: 6px; }

/* ---- FIRESTORM: warm ember skin (ref: brown-black, orange identity,
   sentence-case cards, $0.00 chart header, month axis). ---- */
.app--fire { background: linear-gradient(160deg, #1e1712, #140f0a); }
.app--fire .app__bar { background: rgba(255, 180, 120, 0.05); border-bottom-color: rgba(255, 180, 120, 0.1); }
.app--fire .app__rail { border-right-color: rgba(255, 180, 120, 0.08); }
.app--fire .app-nav { color: rgba(240, 225, 210, 0.55); }
.app--fire .app-nav:hover { color: #f6ede2; }
.app--fire .app-nav.is-active { color: #e8935a; background: rgba(232, 147, 90, 0.12); border-radius: 6px; }
.app--fire .app__main,
.app--fire .app__feed { background: #221b14; border-color: rgba(255, 190, 140, 0.09); }
.app--fire .app-kpi { background: #241d16; border-color: rgba(255, 190, 140, 0.1); }
.app--fire .app-kpi__k { font-family: var(--font-sans); text-transform: none; letter-spacing: 0; font-size: 0.68em; color: rgba(240, 225, 210, 0.5); }
.app--fire .app-kpi__v { color: #f6ede2; }
.app--fire .app-kpi__s { font-family: var(--font-sans); text-transform: none; letter-spacing: 0.01em; color: rgba(240, 225, 210, 0.42); }
.app--fire .app-kpi__s.fs-up { color: #7dd8a0; }
.app--fire .fs-open { color: #e8935a; }
.app--fire .app__grid line { stroke: rgba(255, 200, 150, 0.06); }
.app--fire .app__feed-title,
.app--fire .app__blend-title { color: rgba(240, 225, 210, 0.45); }
.app--fire .app__feed-list li { border-bottom-color: rgba(255, 200, 150, 0.06); }
.app--fire .app__feed-list b { color: #e8935a; }
.app--fire .app__feed-list span { color: rgba(240, 225, 210, 0.65); }
.app--fire .da-row { border-bottom-color: rgba(255, 200, 150, 0.06); }
.app--fire .da-row span { color: rgba(240, 225, 210, 0.5); }
.app--fire .da-row b { color: #f6ede2; }
.app--fire .da-row .up { color: #7dd8a0; }
.app--fire .app__ai { background: rgba(255, 190, 140, 0.05); border-color: rgba(255, 190, 140, 0.1); }
.app--fire .app-msg { background: rgba(255, 255, 255, 0.03); color: rgba(240, 225, 210, 0.7); border-color: rgba(255, 190, 140, 0.08); }
.app--fire .db-search { border-color: rgba(255, 190, 140, 0.15); background: rgba(255, 190, 140, 0.05); color: rgba(240, 225, 210, 0.4); }
.app--fire .fs-attn { background: #241d16; border-color: rgba(255, 190, 140, 0.1); }
.fs-mrr { display: flex; justify-content: space-between; align-items: flex-start; }
.fs-mrr span { display: block; font-size: 0.68em; color: rgba(240, 225, 210, 0.5); }
.fs-mrr b { display: block; font-family: var(--font-display); font-size: 1.3em; font-weight: 650; color: #f6ede2; letter-spacing: -0.01em; }
.fs-mrr i
{
	font-style: normal;
	font-family: var(--font-mono);
	font-size: 0.6em;
	color: #7dd8a0;
	border: 1px solid rgba(125, 216, 160, 0.3);
	background: rgba(125, 216, 160, 0.07);
	border-radius: 6px;
	padding: 3px 8px;
}
.fs-months b { color: rgba(240, 225, 210, 0.65); }

/* ---- TRADING CURVES: the classic Windows desk (ref: light grey app,
   black nav, steel-blue band headers, dense grid, red settle cells). ---- */
.app--curves { background: #e8e8e4; font-family: var(--font-sans); }
.app--curves .app__bar { background: #2b2e33; border-bottom: 1px solid #1e2125; }
.cv-tabs { display: flex; gap: 2px; margin-right: auto; }
.cv-tabs i
{
	font-style: normal;
	font-size: 0.66em;
	color: rgba(235, 240, 245, 0.6);
	padding: 3px 12px;
	border-radius: 4px 4px 0 0;
	background: rgba(255, 255, 255, 0.06);
}
.cv-tabs .is-on { background: #e8e8e4; color: #16283c; font-weight: 600; }
.cv-lock
{
	font-size: 0.6em;
	font-weight: 600;
	color: #baf2ce;
	border: 1px solid rgba(140, 240, 180, 0.5);
	background: rgba(60, 180, 110, 0.25);
	border-radius: 3px;
	padding: 2px 8px;
}
.cv-win { font-size: 0.62em; letter-spacing: 0.2em; color: rgba(235, 240, 245, 0.55); }
.app--curves .app__rail { background: #1b1d20; border-right: 1px solid #101214; }
.app--curves .app-nav { color: #c6cbd2; }
.app--curves .app-nav:hover { color: #fff; }
.app--curves .app-nav.is-active { color: #fff; background: #2196f3; border-radius: 3px; }
.cv-hidden { display: none; }
.app--curves .app__main,
.app--curves .app__feed
{
	background: #f4f4f1;
	border: 1px solid #c9cbc7;
	border-radius: 3px;
	gap: 0;
}
.cv-band
{
	background: linear-gradient(180deg, #2b87c8, #1f77b4);
	color: #fff;
	text-align: center;
	font-size: 0.62em;
	font-weight: 600;
	letter-spacing: 0.02em;
	padding: 3px 0;
	margin: 0 0 1px;
	flex: none;
}
.cv-band + .cv-band,
.cv-charthead,
.cv-grid + .cv-band,
.cv-price + .cv-band { margin-top: 6px; }
.cv-grid { flex: none; border: 1px solid #c9cbc7; }
.cv-row
{
	display: grid;
	grid-template-columns: 6.2em 1fr 3.2em 7.5em 1.6em;
	gap: 6px;
	align-items: center;
	font-size: 0.6em;
	padding: 1px 7px 2px;
	background: #fff;
	color: #2a3542;
	border-bottom: 1px solid #e4e6e3;
}
.cv-row:nth-child(odd) { background: #f6f8f9; }
.cv-row--head { background: #e6e8e6 !important; font-weight: 600; color: #4a5560; }
.cv-row.is-sel { background: #cfe6f8 !important; }
.cv-row i { font-style: normal; color: #5a6672; text-align: center; font-size: 0.9em; }
.cv-row > span:nth-child(4) { color: #7a8592; }
.cv-row b { font-weight: 400; font-size: 0.85em; }
.cv-charthead
{
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 0.62em;
	color: #2a3542;
	padding: 2px 2px 4px;
	flex: none;
}
.cv-charthead b { font-weight: 650; }
.cv-charthead span { display: inline-flex; align-items: center; gap: 5px; color: #5a6672; }
.cv-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.cv-dot--red { background: #d64541; }
.cv-dot--blue { background: #2678b8; }
.app--curves .app__chart-drift
{
	flex: 1 1 0;
	min-height: 0;
	background: #fff;
	border: 1px solid #d5d8db;
}
.app--curves .app__grid line { stroke: rgba(30, 42, 58, 0.1); }
.app--curves .app__line { stroke-dasharray: none; stroke-dashoffset: 0; }
.app--curves .app__line--main { stroke: #2678b8; stroke-width: 2; filter: none; }
.app--curves .app__line--alt { stroke: #d64541; stroke-width: 1.4; }
.app--curves .app__live-dot { fill: #2678b8; filter: none; opacity: 1; animation: none !important; }
.cv-axis
{
	display: flex;
	justify-content: space-between;
	font-size: 0.54em;
	color: #7a8592;
	padding-top: 2px;
	flex: none;
}
/* The settlement surface — a matrix of prices per contract month. */
.cv-matrix { flex: 1 1 0; min-height: 0; border: 1px solid #c9cbc7; overflow: hidden; display: flex; flex-direction: column; }
.cv-m
{
	flex: 1;
	display: grid;
	grid-template-columns: 3.6em 1fr 1fr 1fr 1fr 3.4em 3.6em;
	gap: 5px;
	align-items: center;
	font-size: 0.56em;
	padding: 0 7px;
	background: #fff;
	color: #2a3542;
	border-bottom: 1px solid #e7e9e6;
}
.cv-m:nth-child(odd) { background: #f6f8f9; }
.cv-m--head { background: #e6e8e6 !important; font-weight: 600; color: #4a5560; }
.cv-m--head b { background: none !important; color: inherit !important; font-weight: 600; text-align: right; padding: 0; }
.cv-m.is-sel { background: #cfe6f8 !important; }
.cv-m span { font-weight: 600; color: #3a4552; }
.cv-m b { font-weight: 400; text-align: right; }
.cv-m .cv-blue { background: #e2eefa; padding: 0 3px; border-radius: 2px; }
.cv-drow
{
	display: grid;
	grid-template-columns: 5.6em 1fr 1.4em;
	gap: 5px;
	font-size: 0.58em;
	padding: 1px 7px 2px;
	background: #fff;
	color: #2a3542;
	border-bottom: 1px solid #e4e6e3;
}
.cv-drow:nth-child(odd) { background: #f6f8f9; }
.cv-drow.is-sel { background: #cfe6f8 !important; }
.cv-drow span:first-child { color: #7a8592; }
.cv-drow b { font-weight: 400; font-size: 0.82em; text-align: center; }
.app--curves .app__chart-drift { flex: 0 0 36%; }
.cv-surface { font-family: var(--font-sans); }

.cv-price { border: 1px solid #c9cbc7; flex: none; }
.cv-prow
{
	display: grid;
	grid-template-columns: 3.6em 1fr 1fr 3.4em;
	gap: 5px;
	font-size: 0.58em;
	padding: 1px 6px 2px;
	background: #fff;
	color: #2a3542;
	border-bottom: 1px solid #e4e6e3;
}
.cv-prow:nth-child(odd) { background: #f6f8f9; }
.cv-prow--head { background: #e6e8e6 !important; font-weight: 600; color: #4a5560; }
.cv-prow.is-sel { background: #cfe6f8 !important; }
.cv-prow b { font-weight: 400; text-align: right; }
.cv-red { background: #d64541; color: #fff !important; border-radius: 2px; padding: 0 3px; }
.cv-btn
{
	flex: none;
	margin: 6px 0 0;
	font-size: 0.56em;
	font-weight: 600;
	color: #fff;
	background: #3a4148;
	border: 1px solid #272c31;
	border-radius: 3px;
	padding: 4px 8px;
	pointer-events: none;
	font-family: var(--font-sans);
}
.app--curves .app__feed-title { display: none; }
.app--curves .app__feed-mask { margin-top: 1px; border: 1px solid #c9cbc7; background: #fff; }
.app--curves .app__feed-list li { border-bottom-color: #e9ebe8; padding: 1px 7px 2px; }
.app--curves .app__feed-list b { color: #2678b8; font-weight: 400; font-size: 0.85em; }
.app--curves .app__feed-list span { color: #2a3542; font-size: 0.92em; }
.app--curves .app__feed-list .ok { background: #35a860; }

/* =====================================
 * CURVES v3 — Fortune-500 light. Same light world, modern enterprise
 * finish: white cards + soft shadows, refined section headers, blue
 * active pill, chip risk cells, tabular numerals. Overrides the
 * classic skin above (cascade: later wins).
 * ===================================== */
.app--curves { background: #f5f6f8; }
.app--curves .app__bar { background: #ffffff; border-bottom: 1px solid #e7eaef; }
.app--curves .cv-lock
{
	font-size: 0.6em;
	font-weight: 600;
	color: #167a4c;
	border: 1px solid rgba(22, 160, 100, 0.3);
	background: #eafaf1;
	border-radius: 999px;
	padding: 2px 9px;
}
.app--curves .app__rail { background: #fbfcfd; border-right: 1px solid #e7eaef; }
.app--curves .app-nav { color: #5b6675; }
.app--curves .app-nav:hover { color: #16283c; }
.app--curves .app-nav.is-active { color: #1e6fd9; background: #e8f1fd; border-radius: 7px; font-weight: 600; }
.app--curves .app__main,
.app--curves .app__feed
{
	background: #ffffff;
	border: 1px solid #e7eaef;
	border-radius: 10px;
	box-shadow: 0 1px 3px rgba(16, 24, 40, 0.05);
}
.cv-sec { display: flex; align-items: baseline; gap: 8px; padding: 1px 2px 7px; flex: none; }
.cv-sec b { font-size: 0.74em; font-weight: 650; color: #16283c; letter-spacing: -0.01em; }
.cv-sec span { font-size: 0.6em; color: #8a94a3; }
.cv-matrix { border: 1px solid #eef0f4; border-radius: 8px; }
.cv-m
{
	background: #fff;
	color: #3a4552;
	border-bottom: 1px solid #f1f3f6;
	font-variant-numeric: tabular-nums;
}
.cv-m:nth-child(odd) { background: #fbfcfd; }
.cv-m--head
{
	background: #f6f8fb !important;
	color: #77818f;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 0.5em;
}
.cv-m.is-sel { background: #ecf4fe !important; box-shadow: inset 2.5px 0 0 #1e6fd9; }
.cv-m span { color: #16283c; }
.cv-m .cv-blue { background: #eef5fd; color: #1e6fd9; border-radius: 4px; }
.app--curves .cv-red { background: #fdecea; color: #c2372f !important; border-radius: 4px; font-weight: 600; }
.cv-drow { background: #fff; color: #3a4552; border-bottom: 1px solid #f1f3f6; }
.cv-drow:nth-child(odd) { background: #fbfcfd; }
.cv-drow.is-sel { background: #ecf4fe !important; box-shadow: inset 2.5px 0 0 #1e6fd9; }
.app--curves .cv-grid { border: 1px solid #eef0f4; border-radius: 8px; overflow: hidden; }
.cv-charthead { color: #16283c; }
.cv-charthead b { color: #16283c; }
.cv-charthead span { color: #77818f; }
.app--curves .app__chart-drift
{
	background: #fff;
	border: 1px solid #eef0f4;
	border-radius: 8px;
}
.app--curves .cv-btn
{
	background: #1e6fd9;
	border: 1px solid #1a63c2;
	color: #fff;
	border-radius: 8px;
	padding: 6px 10px;
	font-size: 0.58em;
	font-weight: 600;
	box-shadow: 0 1px 2px rgba(30, 111, 217, 0.35);
}
.app--curves .app__feed-mask { border: 1px solid #eef0f4; border-radius: 8px; background: #fff; }
.app--curves .app__feed-list li { border-bottom-color: #f1f3f6; }
.app--curves .app__feed-list b { color: #1e6fd9; }
.app--curves .app__feed-list span { color: #3a4552; }
.cv-axis { color: #8a94a3; }

/* Cell pop-in for da grids/chips when the console boots. */
.display.is-on .da-cell,
.display.is-on .da-chip,
.display.is-on .da-flag
{
	animation: pa-pop 460ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
	animation-delay: calc(0.55s + var(--i, 0) * 0.07s);
}

@media (prefers-reduced-motion: reduce)
{
	.display.is-on .da-bar__t i,
	.display.is-on .da-exposure__bar i,
	.display.is-on .da-cell,
	.display.is-on .da-chip,
	.display.is-on .da-flag
	{
		animation: none;
	}
}

.app-kpi__spark
{
	display: block;
	width: 100%;
	height: 12px;
	margin-top: 2px;
}
.app-kpi__spark path
{
	fill: none;
	stroke: rgba(49, 197, 244, 0.75);
	stroke-width: 1.6;
	stroke-dasharray: 130;
	stroke-dashoffset: 130;
}
.app-kpi--pnl .app-kpi__spark path { stroke: rgba(53, 224, 143, 0.8); }
.display.is-on .app-kpi__spark path { animation: app-draw 1.1s 0.55s cubic-bezier(0.4, 0, 0.2, 1) forwards; }

.app__main
{
	grid-area: main;
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 7px 9px 8px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.028);
	border: 1px solid rgba(255, 255, 255, 0.07);
	min-height: 0;
	/* CRITICAL: nowrap children (ticker, blend rows) must not widen the
	   grid column — that pushed the comms feed clean off the panel. */
	min-width: 0;
}

.app__main-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.app__main-title { font-size: 0.8em; letter-spacing: 0.1em; color: #31c5f4; }

.app__seg { display: inline-flex; gap: 2px; }
.app__seg i
{
	font-family: var(--font-mono);
	font-style: normal;
	font-size: 0.7em;
	padding: 1px 6px;
	border-radius: 4px;
	color: rgba(223, 233, 244, 0.45);
}
.app__seg i.is-active { background: rgba(49, 197, 244, 0.16); color: #31c5f4; }

.app__main-sub
{
	font-style: normal;
	font-size: 0.85em;
	color: rgba(223, 233, 244, 0.35);
	letter-spacing: 0.02em;
}

/* Scroll-coupled camera drift — the curve pans as the film scrubs
   (installDevices drives --live 0→1 through the alive window). */
.app__chart-drift
{
	flex: 1;
	min-height: 0;
	overflow: hidden;
}
.app__chart-drift .app__chart
{
	/* 18% overhang, panned at most 17.1% of the wrapper — always covered.
	   max-width:none is LOAD-BEARING: the global `svg { max-width:100% }`
	   reset silently capped the overhang to 100%, so the pan opened a gap
	   strip on the right. The pan itself is written DIRECTLY by
	   installDevices (custom-property fan-out caused per-frame subtree
	   style recalc = scroll jitter); this is the static fallback pose. */
	width: 118%;
	max-width: none;
	height: 100%;
	transform: translateX(-7%);
	will-change: transform;
}

.app__chart { flex: 1; width: 100%; min-height: 0; }
.app__grid line { stroke: rgba(223, 233, 244, 0.07); stroke-width: 1; }

.app__line
{
	fill: none;
	stroke-width: 2;
	stroke-dasharray: 1500;
	stroke-dashoffset: 1500;
}
.app__line--main { stroke: #31c5f4; filter: drop-shadow(0 0 6px rgba(49, 197, 244, 0.55)); }
.app__line--alt  { stroke: rgba(124, 108, 244, 0.75); stroke-width: 1.4; }
.app__line--fx   { stroke: rgba(53, 224, 143, 0.85); stroke-width: 1.2; }
.display.is-on .app__line--fx { animation: app-draw 1.5s 0.75s cubic-bezier(0.4, 0, 0.2, 1) forwards; }

/* Chart legend chips. */
.app__legend { display: inline-flex; gap: 10px; }
.app__legend i
{
	font-family: var(--font-mono);
	font-style: normal;
	font-size: 0.68em;
	letter-spacing: 0.06em;
	color: rgba(223, 233, 244, 0.55);
	display: inline-flex;
	align-items: center;
	gap: 5px;
	white-space: nowrap;
}
.app__legend i::before { content: ""; width: 10px; height: 2px; border-radius: 1px; background: currentColor; }
.app__legend .l-fe::before { background: #31c5f4; box-shadow: 0 0 6px rgba(49, 197, 244, 0.8); }
.app__legend .l-cn::before { background: #7c6cf4; }
.app__legend .l-fx::before { background: #35e08f; }

.app__area { opacity: 0; transition: opacity 0.9s 0.9s ease; }
.display.is-on .app__area { opacity: 1; }
.display.is-on .app__line--main { animation: app-draw 1.5s 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
.display.is-on .app__line--alt  { animation: app-draw 1.5s 0.55s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
@keyframes app-draw { to { stroke-dashoffset: 0; } }

.app__live-dot
{
	fill: #31c5f4;
	opacity: 0;
	filter: drop-shadow(0 0 5px rgba(49, 197, 244, 0.9));
}
.display.is-on .app__live-dot { animation: app-dot 1.8s 1.9s ease-in-out infinite; }
@keyframes app-dot { 0%, 100% { opacity: 1; r: 4; } 50% { opacity: 0.45; r: 6; } }

/* Blend composition — source contracts filling the hold plan. Bars sweep
   to their share when the console boots. */
.app__blend
{
	margin-top: clamp(5px, 1%, 9px);
	display: flex;
	flex-direction: column;
	gap: clamp(3px, 0.6%, 6px);
}

.app__blend-title
{
	font-size: 0.68em;
	letter-spacing: 0.12em;
	color: rgba(223, 233, 244, 0.42);
	margin-bottom: 2px;
}

.app-src
{
	display: grid;
	grid-template-columns: 5em minmax(0, 7em) 1fr 5.2em 6.2em 5.4em;
	align-items: center;
	gap: 6px;
	font-size: 0.8em;
	min-width: 0;
}
/* The site-wide .mono tracking is far too wide at this scale — cells
   overflowed their grid columns and collided. */
.app-src .mono
{
	letter-spacing: 0.02em;
	white-space: nowrap;
	overflow: hidden;
}
.app-src__id { color: rgba(49, 197, 244, 0.8); }
.app-src__name { color: rgba(223, 233, 244, 0.78); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-src__t, .app-src__fe { color: rgba(223, 233, 244, 0.5); text-align: right; }
.app-src__px { color: #eaf7ff; text-align: right; }

.app-src__bar
{
	position: relative;
	height: 7px;
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.06);
	overflow: hidden;
}
.app-src__bar i
{
	position: absolute;
	inset: 0 auto 0 0;
	width: 0;
	border-radius: inherit;
	background: linear-gradient(90deg, rgba(49, 197, 244, 0.55), #31c5f4);
	box-shadow: 0 0 8px rgba(49, 197, 244, 0.5);
	transition: width 1.1s cubic-bezier(0.3, 0, 0.2, 1);
}
.app-src__bar i.is-b { background: linear-gradient(90deg, rgba(124, 108, 244, 0.55), #7c6cf4); box-shadow: 0 0 8px rgba(124, 108, 244, 0.5); }
.app-src__bar i.is-c { background: linear-gradient(90deg, rgba(53, 224, 143, 0.5), #35e08f); box-shadow: 0 0 8px rgba(53, 224, 143, 0.5); }
.display.is-on .app-src:nth-child(2) .app-src__bar i { width: var(--w); transition-delay: 0.7s; }
.display.is-on .app-src:nth-child(3) .app-src__bar i { width: var(--w); transition-delay: 0.9s; }
.display.is-on .app-src:nth-child(4) .app-src__bar i { width: var(--w); transition-delay: 1.1s; }

/* Market ticker — endless marquee along the bottom of the main panel. */
.app__ticker
{
	margin-top: clamp(5px, 1%, 9px);
	overflow: hidden;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	padding-top: clamp(3px, 0.6%, 6px);
	mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
	-webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
}
.app__ticker-track
{
	display: inline-flex;
	gap: 26px;
	white-space: nowrap;
	font-family: var(--font-mono);
	font-size: 0.72em;
	letter-spacing: 0.06em;
	color: rgba(223, 233, 244, 0.5);
	animation: app-tick 30s linear infinite;
}
.app__ticker-track b { font-weight: 500; }
.app__ticker-track .up { color: #35e08f; }
.app__ticker-track .dn { color: #ff7d7d; }
@keyframes app-tick { to { transform: translateX(-50%); } }

.app__feed
{
	grid-area: feed;
	display: flex;
	flex-direction: column;
	padding: 7px 0 4px 9px;
	border-left: 1px solid rgba(255, 255, 255, 0.06);
	min-height: 0;
	min-width: 0;
}

.app__feed-title { font-size: 0.7em; letter-spacing: 0.12em; color: rgba(223, 233, 244, 0.42); margin-bottom: 6px; }

/* Blend quality vs spec — iron ore assay table. */
.app__quality
{
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-bottom: 9px;
	flex: none;
}
.app-q
{
	display: grid;
	grid-template-columns: 3.4em 1fr auto 8px;
	align-items: center;
	gap: 6px;
	font-family: var(--font-mono);
	font-size: 0.74em;
	letter-spacing: 0.02em;
	padding: 1px 0 2px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.045);
}
.app-q span { color: rgba(223, 233, 244, 0.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Grain/care assay labels run longer than the ore chemistry symbols. */
.app--grain .app-q,
.app--care .app-q { grid-template-columns: 6.2em 1fr auto 8px; }
.app-q b { font-weight: 500; color: #eaf7ff; text-align: right; }
.app-q em { font-style: normal; color: rgba(223, 233, 244, 0.32); }
.app-q i { width: 5px; height: 5px; border-radius: 50%; }
.app-q i.ok { background: #35e08f; }
.app-q i.warn { background: #f4b63c; }

/* AI copilot — discussion of comparable past cargos (bottom corner). */
.app__ai
{
	margin-top: 9px;
	padding-top: 8px;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	display: flex;
	flex-direction: column;
	gap: 5px;
	flex: none;
}
.app__ai-title i
{
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: linear-gradient(135deg, #31c5f4, #c86cf4);
	display: inline-block;
	margin-right: 5px;
	animation: app-pulse 2s ease-in-out infinite;
}
.app-msg
{
	font-size: 0.74em;
	line-height: 1.45;
	color: rgba(223, 233, 244, 0.75);
	background: rgba(255, 255, 255, 0.045);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 8px 8px 8px 2px;
	padding: 5px 8px;
	max-width: 96%;
}
.app-msg b { color: #eaf7ff; font-weight: 600; }
.app-msg .up { color: #35e08f; }
.app-msg--user
{
	align-self: flex-end;
	background: rgba(49, 197, 244, 0.12);
	border-color: rgba(49, 197, 244, 0.25);
	border-radius: 8px 8px 2px 8px;
	color: #d7f2fd;
}
.app-ai-caret
{
	display: inline-block;
	width: 6px;
	height: 10px;
	margin-left: 3px;
	background: #31c5f4;
	vertical-align: -1px;
	animation: app-caret 1s steps(1) infinite;
}
@keyframes app-caret { 50% { opacity: 0; } }

.app__feed-mask
{
	flex: 1;
	overflow: hidden;
	min-height: 0;
	mask-image: linear-gradient(to bottom, transparent, #000 8%, #000 86%, transparent);
	-webkit-mask-image: linear-gradient(to bottom, transparent, #000 8%, #000 86%, transparent);
}

/* Comms feed — SCROLL-COUPLED: installDevices writes the translateY
   directly each frame (var()-driven calc caused subtree recalc jitter). */
.app__feed-list
{
	list-style: none;
	margin: 0;
	padding: 0;
	will-change: transform;
}

.app__feed-list li
{
	display: flex;
	align-items: baseline;
	gap: 6px;
	padding: 4px 8px 4px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
	font-size: 0.82em;
}
.app__feed-list b { font-family: var(--font-mono); font-weight: 500; font-size: 0.85em; color: rgba(49, 197, 244, 0.8); }
.app__feed-list span { flex: 1; color: rgba(223, 233, 244, 0.72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app__feed-list i { width: 5px; height: 5px; border-radius: 50%; flex: none; align-self: center; }
.app__feed-list i.ok   { background: #35e08f; }
.app__feed-list i.warn { background: #f4b63c; }

/* Dive parallax + assembly — installDevices writes transforms/opacities
   DIRECTLY to these layers each frame. (The earlier --dive/--asm custom
   properties fanned out through calc() rules, which invalidated style for
   the whole console subtree on every scrub frame — the scroll jitter.) */
[data-devices-book] .app > * { will-change: transform, opacity; }

/* Resolution copy under the film. */
.devices-after
{
	max-width: var(--max);
	margin-inline: auto;
	padding: clamp(90px, 12vw, 150px) var(--gutter) clamp(100px, 13vw, 160px);
}

/* Reduced motion / small screens: no pin, no dive — clean static layout. */
@media (prefers-reduced-motion: reduce), (max-width: 900px)
{
	.devices-pin { height: auto; }
	.devices-frame
	{
		position: static;
		height: auto;
		overflow: visible;
		flex-direction: column;
		gap: 48px;
		padding: 90px 5vw 40px;
	}
	.devices-frame .devices__stage { position: static; display: flex; flex-direction: column; align-items: center; gap: 56px; }
	.devices-frame .device-slot { position: static; translate: none; }

	/* Static display: flat, console on — no 3D, no boot sequence
	   (installDevices returns early so .is-on never arrives; --dev and
	   --asm defaults already show the finished screen). */
	.display-scene { perspective: none; width: min(680px, 92vw); }
	.display { transform: none; }
	.display::before,
	.display__glare,
	.display__white,
	.display__shadow { display: none; }
	.display__panel
	{
		box-shadow: 0 30px 60px rgba(12, 19, 34, 0.25);
		-webkit-box-reflect: none;
	}
	.app__area { opacity: 1; transition: none; }
	.app__line,
	.app-kpi__spark path { stroke-dashoffset: 0; }
	.app__live-dot { opacity: 1; }
	.app-src__bar i { width: var(--w); transition: none; }
	.app__ticker-track { animation: none; }
	.app__feed-list { transform: none; }

	/* Mobile carousel — each device carries its OWN voice, in flow:
	   [ < ]  dots + title  [ > ]  — the texta chevrons at thumb size. */
	.devices-frame .dev-nav--flow
	{
		position: static;
		inset: auto;
		opacity: 1 !important;
		visibility: visible !important;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 18px;
		margin: 22px auto 0;
		width: 100%;
		max-width: 92vw;
	}
	.dev-nav--flow .dev-chev,
	.dev-nav--flow .dev-plate
	{
		position: static;
		transform: none;
		pointer-events: auto;
	}
	.dev-nav--flow .dev-chev
	{
		width: 52px;
		height: 78px;
		flex: none;
	}
	.dev-nav--flow .dev-chev--prev { order: 1; }
	.dev-nav--flow .dev-plate      { order: 2; min-width: 0; }
	.dev-nav--flow .dev-chev--next { order: 3; }
	.dev-nav--flow .dev-plate__title
	{
		white-space: normal;
		text-align: center;
		flex-wrap: wrap;
		justify-content: center;
		font-size: 12px;
	}
	/* Static breathe keeps translateY out of it (no absolute centring). */
	.dev-nav--flow.is-usable .dev-chev:not(:disabled)
	{
		animation: chev-breathe-flow 1.7s ease-in-out 0.6s infinite;
	}
	@keyframes chev-breathe-flow
	{
		0%, 100% { transform: scale(1);    opacity: 0.72; }
		50%      { transform: scale(1.07); opacity: 1; }
	}

	/* The console is a MINIATURE of the real 1040px desk — the whole
	   composition zooms down (JS sets --fitz = slot width / 1040), it
	   does not reflow into a crushed column. Phones zoom up a touch. */
	.devices-frame [data-devices-book] .display-scene
	{
		width: 1040px;
		max-width: none;
		zoom: var(--fitz, 0.33);
	}
	.devices-frame [data-devices-phone] .phone { zoom: var(--fitz, 1); }

	/* Cells keep grid-stacking so the slide/fade carousel transitions
	   still play in the static layout. */
	.devices-frame .device-slot
	{
		display: grid;
		justify-items: center;
		width: 100%;
		/* Receive touch so the gallery can be SWIPED (installDevicesMobile);
		   pan-y lets vertical scroll pass straight through. */
		pointer-events: auto;
		touch-action: pan-y;
	}
	.devices-frame .device-slot .dev-cell { grid-area: 1 / 1; }

	/* Console FULL-BLEED on mobile: the book slot spans the whole viewport
	   (breaking the frame's side padding) so --fitz = 100vw/1040 and the desk
	   fills the screen edge-to-edge (Anthony: it wasn't full width). Needs
	   the stage clip off here (it's only for the desktop dive) or the wide
	   console would be scissored back to the padded width. Phone stays padded
	   — a full-bleed phone mock looks wrong. */
	.devices-frame .devices__stage { overflow: visible; }
	.devices-frame .device-slot[data-devices-book] { width: 100vw; }
}

/* Act 3 staging — while the convergence runs (--conv 0→1, set by
   particles.js), the zone's content bows out and the particle canvas rises
   above it so the vortex and the burning singularity play centre stage. */
.page-home .hero-zone.is-converging .hero-zone__bg { z-index: 4; }

.page-home .hero-zone #beyond .container
{
	opacity: calc(1 - var(--conv, 0));
}

/* =====================================
   ACT IV — THE CLOSE (home outro). The numbers, the quote, the names,
   the ask — one dark end card; the detail pages carry the rest.
   ===================================== */

.section--outro .container
{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 64px;
	text-align: center;
}

.outro__proof
{
	display: flex;
	justify-content: center;
	gap: clamp(40px, 8vw, 110px);
	flex-wrap: wrap;
}

.outro-stat
{
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: center;
}

.outro-stat__v
{
	font-family: var(--font-display);
	font-size: clamp(44px, 6vw, 72px);
	font-weight: 600;
	letter-spacing: -0.045em;
	line-height: 1;
	color: var(--lm-fg);
}

.outro__quote
{
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	max-width: 720px;
}

.outro__quote .quote__text { font-size: clamp(20px, 2.6vw, 28px); }
.outro__quote figcaption { margin-top: 18px; color: var(--lm-fg-muted, var(--lm-fg-faint)); }

.outro__clients
{
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--lm-fg-muted, var(--lm-fg-faint));
	max-width: 860px;
	line-height: 2;
}

.outro__ask
{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 22px;
}

.outro__ctas
{
	display: flex;
	align-items: center;
	gap: 28px;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 10px;
}

@media (max-width: 640px)
{
	.section--outro .container { gap: 48px; }
	.outro__proof { gap: 32px; }
	.outro__ctas { flex-direction: column; gap: 18px; }
}

/* =====================================
   ACT RAIL — the film's chapter index. Four hairline ticks on the right
   edge; labels bloom when the rail is hovered; the current act's tick is
   lit; ink flips over the light studio act (data-tone, set by JS).
   Desktop-only: below 1100px it would crowd the frame.
   ===================================== */

.act-rail
{
	position: fixed;
	right: 22px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 40;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 14px;
	transition: color 0.45s ease;
}

.act-rail[data-tone="dark"]  { color: #f2f6fc; }
.act-rail[data-tone="light"] { color: #0c1322; }

.act-rail__item
{
	display: flex;
	align-items: center;
	gap: 10px;
	background: none;
	border: 0;
	padding: 6px 0;
	cursor: pointer;
	color: inherit;
}

.act-rail__tick
{
	display: block;
	width: 18px;
	height: 2px;
	background: currentColor;
	opacity: 0.32;
	transition: width 0.3s ease, opacity 0.3s ease;
}

.act-rail__item:hover .act-rail__tick { opacity: 0.7; }
.act-rail__item.is-active .act-rail__tick { width: 32px; opacity: 1; }

.act-rail__label
{
	font-size: 10px;
	letter-spacing: 0.14em;
	white-space: nowrap;
	color: inherit;
	opacity: 0;
	transform: translateX(6px);
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.act-rail:hover .act-rail__label,
.act-rail__item:focus-visible .act-rail__label
{
	opacity: 0.85;
	transform: none;
}

@media (max-width: 1100px)
{
	.act-rail { display: none; }
}

/* JS-off fallback nav (inside <noscript>) — plain, readable, out of the way. */
.noscript-nav
{
	padding: 28px 24px;
	font-family: var(--font-mono);
	font-size: 13px;
	line-height: 2.2;
	text-align: center;
	color: var(--lm-fg-dim);
	border-top: 1px solid var(--lm-line);
}

.noscript-nav a
{
	color: var(--lm-fg);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* 404 quick links — the main destinations, one mono row under the CTAs. */
.nf-links
{
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px 20px;
	margin-top: 40px;
	font-family: var(--font-mono);
	font-size: 13px;
}

.nf-links__label
{
	color: var(--lm-fg-dim);
}

.nf-links a
{
	color: var(--lm-fg);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.nf-links a:hover
{
	color: var(--lm-accent);
}

/* The people — ledger-style team roll on Services. Names set in the display
   face; roles in the accent mono. Hairlines echo the work-shelf ledger. */
.team-roll
{
	list-style: none;
	margin: 44px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 0 40px;
	border-top: 1px solid var(--lm-line-strong);
}

.team-roll__member
{
	display: flex;
	flex-direction: column;
	gap: 7px;
	padding: 26px 0 24px;
	border-bottom: 1px solid var(--lm-line);
}

.team-roll__name
{
	font-family: var(--font-display);
	font-size: clamp(19px, 1.7vw, 24px);
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--lm-fg);
}

/* Team portraits — unified monochrome squares; monogram tiles hold the
   grid for members whose photo hasn't landed yet. */
.team-roll__photo
{
	width: 108px;
	height: 108px;
	border-radius: 10px;
	border: 1px solid var(--lm-line-strong);
	object-fit: cover;
	margin-bottom: 14px;
	filter: grayscale(1) contrast(1.04);
}

span.team-roll__photo--mono
{
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-mono);
	font-size: 22px;
	letter-spacing: 0.08em;
	color: var(--lm-fg-faint);
	background: linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
}

/* =====================================
 * LOG INDEX — plexus background + compact hero
 * ===================================== */

/* Page-wide constellation: fixed behind the content, driven by body
   mousemove (the element is pointer-events: none). */
.page-log constellation-field
{
	position: fixed;
	inset: 0;
	display: block;
	pointer-events: none;
	z-index: 0;
}

.page-log constellation-field canvas
{
	display: block;
	width: 100%;
	height: 100%;
}

.page-log main
{
	position: relative;
	z-index: 1;
}

/* Compact hero — the old 96vh hero pushed the first entry to ~1000px,
   so the page gave no clue there were articles below the fold. */
.page-log .section--hero
{
	min-height: 44vh;
	padding-bottom: 48px;
}

.page-log .section--hero + .section
{
	padding-top: 40px;
}

/* =====================================
 * NIGHT NEBULA (2026-07-14) — colourful night sky behind the Earth and
 * planet: a BAKED WebP (img/hero-nebula.webp, ~14KB) composited under
 * the particle canvas. One GPU layer, no filters, no per-frame work —
 * deliberately none of the old aurora's sins (blur + parallax caused
 * the mobile scroll lockup). Drift is a compositor-only transform; the
 * sky fades out as the convergence begins so the collapse and
 * detonation still play on true black.
 * REVERSIBLE: remove the `has-nebula` class from the .hero-zone div in
 * index.html and this whole block is inert. */
.page-home .hero-zone .hero-nebula { display: none; }

.page-home .hero-zone.has-nebula .hero-nebula
{
	display: block;
	position: sticky;
	top: 0;
	height: 100vh;
	margin-bottom: -100vh; /* the canvas after it reclaims the flow slot */
	/* 2560px + baked grain: the old 1920px q72 texture upscaled on wide
	   screens and its WebP codec blocks read as a tile/cross pattern.
	   New filenames on purpose — the old URL is cache-poisoned. */
	background: url("/img/hero-nebula-2560.webp") center / cover no-repeat #04060d;
	/* The sky DRAINS with the vortex — coupled to the film's own --conv
	   (funnel progress, set per-frame by particles.js on the zone) so the
	   colour leaves as the particles funnel in, fully dark before the
	   singularity tightens. A binary is-converging cut played too early:
	   Saturn floated on flat black while still fully formed. */
	opacity: calc(0.92 * (1 - min(var(--conv, 0) * 1.45, 1)));
	transform-origin: 50% 40%;
	animation: nebula-drift 150s ease-in-out infinite alternate;
	pointer-events: none;
}

@keyframes nebula-drift
{
	from { transform: scale(1.07) translate3d(-1.1%, -0.7%, 0); }
	to   { transform: scale(1.13) translate3d(1.1%, 0.6%, 0); }
}

@media (max-width: 900px), (prefers-reduced-motion: reduce)
{
	.page-home .hero-zone.has-nebula .hero-nebula
	{
		animation: none;
		transform: scale(1.07);
	}
}

/* Phones don't pay for the 2560px texture (274KB) — 1280px is 68KB and
   indistinguishable at that size. */
@media (max-width: 900px)
{
	.page-home .hero-zone.has-nebula .hero-nebula
	{
		background-image: url("/img/hero-nebula-1280.webp");
	}
}