/* =====================================================================
   NotyLab front page.
   Generated from notylab-home by port-to-plugin.py.

   Every colour, radius and typeface here resolves through a UnicaSuite
   custom property, so the page follows the theme's Typography & Colour
   settings — including a visitor's own accent choice — without
   redefining any of them.
   ===================================================================== */

/* Reset, scoped. The theme has its own; this only re-establishes what the
   page's components assume, and only inside the page. */
.uc-home *,
.uc-home *::before,
.uc-home *::after {
	box-sizing: border-box;
}

.uc-home img,
.uc-home svg {
	display: block;
	max-width: 100%;
}

.uc-home button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

.uc-home input {
	font: inherit;
	color: inherit;
}

.uc-home a {
	color: inherit;
	text-decoration: none;
}

.uc-home h1,
.uc-home h2,
.uc-home h3,
.uc-home h4,
.uc-home p,
.uc-home figure,
.uc-home blockquote {
	margin: 0;
}

.uc-home ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.uc-home :focus-visible {
	outline: 2px solid var(--brand, currentColor);
	outline-offset: 3px;
	border-radius: var(--radius-sm, 2px);
}

/* =====================================================================
   NotyLab home — foundation layer
   Tokens, band tones, typography, and the shared component vocabulary.

   The one idea that holds this file together: sections do not know about
   themes. Every section is a "band" with one of two tones — deep or paper —
   and the band declares the local semantic variables (--bg, --fg, --line,
   --card, --d-teal …) that every component inside it reads. Switching theme
   therefore rewrites sixteen tokens and nothing else, and the dark/light
   scroll rhythm the brief asks for survives in both themes.
   ===================================================================== */
/* ── Tokens ─────────────────────────────────────────────────────────── */
:root {
	color-scheme: light;

	/* Grounds come from the theme, so the front page reads as the same
	   product as the dashboard, the docs and the archives. The paper tone
	   inherits UnicaSuite's live surface tokens — which means it follows the
	   theme in light AND dark without a second definition here. The fallbacks
	   only apply when this file runs standalone, outside WordPress.

	   The ink tone has no counterpart in the theme (the theme never goes
	   darker than its own dark bg), so it is pinned to that same neutral
	   family: #1E1E1E and one darker step, with the theme's dark border and
	   secondary-text values. Ink must stay dark in BOTH themes, so it cannot
	   read --color-bg. */
	--deep-bg: #16181a;
	--deep-bg-2: #1e1e1e;
	--deep-fg: #ffffff;
	--deep-fg-dim: #9d9d9d;
	--deep-line: #3e3e42;
	--deep-line-soft: #2d2d2d;
	--deep-card: rgba(255, 255, 255, 0.045);

	--paper-bg: var(--color-bg, #f8fafc);
	--paper-bg-2: var(--color-bg-alt, #f1f5f9);
	--paper-fg: var(--color-heading, #0f172a);
	--paper-fg-dim: var(--color-text-secondary, #475569);
	--paper-line: var(--color-border, #e2e8f0);
	--paper-line-soft: var(--color-border-light, #f1f5f9);
	--paper-card: var(--color-surface, #ffffff);

	/* Data hues. Two sets: one that holds on paper, one that holds on ink.
	   Bands pick the right set, so a component never chooses. */
	--teal-on-paper: #0e7c74;
	--indigo-on-paper: #4a54d6;
	--amber-on-paper: #a96400;
	--magenta-on-paper: #b81c77;
	--green-on-paper: #12864a;

	--teal-on-deep: #2bc4b4;
	--indigo-on-deep: #8891ff;
	--amber-on-deep: #f5a524;
	--magenta-on-deep: #ff5cb1;
	--green-on-deep: #3dd07a;

	/* Brand accent. The theme lets the owner pick a preset or an exact hex,
	   and a visitor can override it in their dashboard, so this page has to
	   answer to it. It drives atmosphere and interaction only — never the five
	   data hues below, which are a legend and must mean the same thing on
	   every install. Defaults equal the indigo pair, so an unset accent looks
	   exactly like the design as drawn. */
	/* The darker accent step on paper: the plain --color-primary lands at only
	   3.8:1 behind a light button label with the teal preset, the hover step at
	   5.5:1. Same hue, same family, legible. */
	--brand-on-paper: var(--color-primary-hover, #0e7490);
	--brand-on-deep: var(--color-primary-light, #22d3ee);
	--brand-hover: var(--color-primary-hover, #0e7490);
	/* The canvas layers need the accent as a raw triplet, exactly as the
	   theme publishes it. Standalone, the fallback is the teal preset — the
	   scheme the live site runs. */
	--fx-rgb: var(--color-primary-rgb, 34, 211, 238);

	/* The figure canvas stays printed-paper white in both themes — a real
	   journal figure does. */
	--canvas: #fafaf8;
	--canvas-fg: #14181c;
	--canvas-line: rgba(20, 24, 28, 0.14);
	--print-teal: #0e7c74;
	--print-indigo: #4a54d6;
	--print-amber: #a96400;
	--print-magenta: #b81c77;
	--print-green: #12864a;

	/* Type. The theme owns the typeface — it ships Inter and IRANSansX and
	   picks between them by document direction, so the front page must not
	   introduce a third. The fallbacks only apply standalone. */
	--f-sans: var(--font-sans, Inter, system-ui, -apple-system, "Segoe UI", sans-serif);
	--f-mono: var(--font-mono, "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace);
	--f-serif: var(--font-sans, "Inter", system-ui, sans-serif);

	--t-display: clamp(2.6rem, 6.4vw, 4.75rem);
	--t-h1: clamp(2.1rem, 4.4vw, 3.5rem);
	--t-h2: clamp(1.6rem, 2.7vw, 2.35rem);
	--t-h3: clamp(1.1rem, 1.5vw, 1.3rem);
	--t-lead: clamp(1.05rem, 1.35vw, 1.3rem);
	--t-body: 1.0625rem;
	--t-small: 0.9375rem;
	--t-micro: 0.8125rem;
	--t-mono: 0.75rem;

	/* Space */
	--s1: 0.25rem;
	--s2: 0.5rem;
	--s3: 0.75rem;
	--s4: 1rem;
	--s5: 1.5rem;
	--s6: 2rem;
	--s7: 3rem;
	--s8: 4rem;
	--s9: 6rem;

	--gutter: clamp(1.25rem, 4vw, 3rem);
	--band-y: clamp(4.25rem, 8vw, 7.5rem);
	--max: 1200px;

	/* Form. These mirror the theme's --radius-* contract, so its "Corner
	   rounding" setting (sharp 0 / default 1 / soft 1.6) reshapes this page
	   too — the theme's inline :root block simply overrides the five below. */
	--radius-sm: 0.25rem;
	--radius-md: 0.5rem;
	--radius-lg: 0.75rem;
	--radius-xl: 1rem;
	--radius-2xl: 1.5rem;

	--r-frame: var(--radius-md);
	--r-card: var(--radius-lg);
	--r-shell: var(--radius-xl);
	--r-pill: 999px;
	--hair: 1px;

	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--dur: 320ms;
	--header-h: 68px;
}

/* Dark theme. Only the sixteen ground tokens and the data sets move; the
   "paper" tone becomes an elevated slate so the band rhythm still alternates.
   Never define a component colour in here. */
.uc-home @media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		color-scheme: dark;

		/* Ink drops a step below the theme's dark bg so the alternating band
		   rhythm survives; paper simply becomes the theme's dark surface. */
		--deep-bg: #101112;
		--deep-bg-2: #16181a;

		--paper-bg: var(--color-bg, #1e1e1e);
		--paper-bg-2: var(--color-bg-alt, #252526);
		--paper-fg: var(--color-heading, #ffffff);
		--paper-fg-dim: var(--color-text-secondary, #9d9d9d);
		--paper-line: var(--color-border, #3e3e42);
		--paper-line-soft: var(--color-border-light, #2d2d2d);
		--paper-card: var(--color-surface, #252526);

		--teal-on-paper: var(--teal-on-deep);
		--indigo-on-paper: var(--indigo-on-deep);
		--amber-on-paper: var(--amber-on-deep);
		--magenta-on-paper: var(--magenta-on-deep);
		--green-on-paper: var(--green-on-deep);
	--brand-on-paper: var(--brand-on-deep);
		--brand-on-paper: var(--brand-on-deep);
	}
}

:root[data-theme="dark"] {
	color-scheme: dark;

	/* Ink drops a step below the theme's dark bg so the alternating band
	   rhythm survives; paper simply becomes the theme's dark surface. */
	--deep-bg: #101112;
	--deep-bg-2: #16181a;

	--paper-bg: var(--color-bg, #1e1e1e);
	--paper-bg-2: var(--color-bg-alt, #252526);
	--paper-fg: var(--color-heading, #ffffff);
	--paper-fg-dim: var(--color-text-secondary, #9d9d9d);
	--paper-line: var(--color-border, #3e3e42);
	--paper-line-soft: var(--color-border-light, #2d2d2d);
	--paper-card: var(--color-surface, #252526);

	--teal-on-paper: var(--teal-on-deep);
	--indigo-on-paper: var(--indigo-on-deep);
	--amber-on-paper: var(--amber-on-deep);
	--magenta-on-paper: var(--magenta-on-deep);
	--green-on-paper: var(--green-on-deep);
	--brand-on-paper: var(--brand-on-deep);
}

/* ── Reset-ish ──────────────────────────────────────────────────────── */
.uc-home *::before,
.uc-home *::after {
	box-sizing: border-box;
}

.uc-home :focus-visible {
	outline: 2px solid var(--brand, #4a54d6);
	outline-offset: 3px;
	border-radius: var(--radius-sm);
}

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

.uc-home .defs {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

/* ── Bands: the two tones ───────────────────────────────────────────── */
.uc-home .band {
	position: relative;
	padding-block: var(--band-y);
	background: var(--bg);
	color: var(--fg);
}

.uc-home .band--deep {
	--bg: var(--deep-bg);
	--bg-2: var(--deep-bg-2);
	--fg: var(--deep-fg);
	--fg-dim: var(--deep-fg-dim);
	--line: var(--deep-line);
	--line-soft: var(--deep-line-soft);
	--card: var(--deep-card);
	--card-solid: var(--deep-bg-2);
	--d-teal: var(--teal-on-deep);
	--d-indigo: var(--indigo-on-deep);
	--d-amber: var(--amber-on-deep);
	--d-magenta: var(--magenta-on-deep);
	--d-green: var(--green-on-deep);
	--brand: var(--brand-on-deep);
	--shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.9);
	/* Light falls from the top of every ink band, so four dark sections do
	   not read as one flat field. */
	background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.024), rgba(255, 255, 255, 0) 42%);
}

.uc-home .band--paper {
	--bg: var(--paper-bg);
	--bg-2: var(--paper-bg-2);
	--fg: var(--paper-fg);
	--fg-dim: var(--paper-fg-dim);
	--line: var(--paper-line);
	--line-soft: var(--paper-line-soft);
	--card: var(--paper-card);
	--card-solid: var(--paper-card);
	--d-teal: var(--teal-on-paper);
	--d-indigo: var(--indigo-on-paper);
	--d-amber: var(--amber-on-paper);
	--d-magenta: var(--magenta-on-paper);
	--d-green: var(--green-on-paper);
	--brand: var(--brand-on-paper);
	--shadow: 0 20px 50px -28px rgba(16, 21, 26, 0.3);
}

/* Two consecutive paper bands would flatten the rhythm; the alt variant
   drops half a step so the seam stays visible. */
.uc-home .band--paper-alt {
	--bg: var(--paper-bg-2);
	--bg-2: var(--paper-bg);
}

.uc-home .band--tight {
	padding-block: clamp(2.5rem, 4vw, 3.75rem);
}

.uc-home .band + .band--paper::before,
.uc-home .band + .band--deep::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: var(--hair);
	background: var(--line-soft);
}

.uc-home .wrap {
	width: min(var(--max), 100% - var(--gutter) * 2);
	margin-inline: auto;
}

.uc-home .wrap--narrow {
	width: min(760px, 100% - var(--gutter) * 2);
}

/* ── Type ───────────────────────────────────────────────────────────── */
.uc-home .display,
.uc-home .h1,
.uc-home .h2,
.uc-home .h3 {
	font-family: var(--f-sans);
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

.uc-home .display {
	font-size: var(--t-display);
	font-weight: 800;
}

.uc-home .h1 {
	font-size: var(--t-h1);
	line-height: 1.05;
}

.uc-home .h2 {
	font-size: var(--t-h2);
	line-height: 1.08;
	letter-spacing: -0.025em;
}

.uc-home .h3 {
	font-size: var(--t-h3);
	line-height: 1.25;
	letter-spacing: -0.015em;
}

.uc-home .lead {
	max-width: 34ch;
	font-size: var(--t-lead);
	line-height: 1.5;
	color: var(--fg-dim);
	text-wrap: pretty;
}

.uc-home .lead--wide {
	max-width: 56ch;
}

.uc-home .copy {
	max-width: 62ch;
	color: var(--fg-dim);
	text-wrap: pretty;
}

.uc-home .eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-family: var(--f-mono);
	font-size: var(--t-mono);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--fg-dim);
}

.uc-home .eyebrow::before {
	content: "";
	width: 18px;
	height: 2px;
	border-radius: 1px;
	background: var(--brand);
}

/* The pull-quote leans on weight and an italic rather than a third typeface,
   so the page needs no webfont the theme does not already load. */
.uc-home .pull {
	font-family: var(--f-serif);
	font-style: italic;
	font-size: clamp(1.5rem, 3.2vw, 2.4rem);
	font-weight: 300;
	line-height: 1.22;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.uc-home .mono {
	font-family: var(--f-mono);
	font-size: var(--t-mono);
	letter-spacing: 0.04em;
	font-variant-numeric: tabular-nums;
}

.uc-home .num {
	font-family: var(--f-mono);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
}

/* Section heads share one rhythm so nothing has to be re-spaced by hand. */
.uc-home .head {
	display: flex;
	flex-direction: column;
	gap: var(--s4);
	margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.uc-home .head--split {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: var(--s5) var(--s7);
	align-items: end;
}

@media (max-width: 860px) {
.uc-home .head--split {
		grid-template-columns: 1fr;
		align-items: start;
	}
}

/* ── Buttons ────────────────────────────────────────────────────────── */
.uc-home .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 46px;
	padding: 0.7rem 1.15rem;
	border-radius: var(--r-frame);
	font-size: var(--t-small);
	font-weight: 600;
	letter-spacing: -0.005em;
	white-space: nowrap;
	transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
		border-color var(--dur) var(--ease), transform 140ms var(--ease);
}

/* The primary action wears the theme's accent, so it matches every other
   primary button on the site. The label takes the band's own ground, which
   lands correctly by construction: an ink band pairs the accent's light
   variant with dark text, a paper band pairs the dark variant with light
   text — for all six presets and any custom hex. */
.uc-home .btn--primary {
	background: var(--brand);
	color: var(--bg);
	border: var(--hair) solid var(--brand);
}

.uc-home .btn--primary:hover {
	background: color-mix(in srgb, var(--brand) 86%, var(--fg));
	border-color: color-mix(in srgb, var(--brand) 86%, var(--fg));
}

.uc-home .btn--ghost {
	background: transparent;
	color: var(--fg);
	border: var(--hair) solid var(--line);
}

.uc-home .btn--ghost:hover {
	border-color: var(--fg);
	background: color-mix(in srgb, var(--fg) 5%, transparent);
}

.uc-home .btn:active {
	transform: translateY(1px);
}

.uc-home .btn--sm {
	min-height: 38px;
	padding: 0.4rem 0.8rem;
	font-size: var(--t-micro);
}

.uc-home .arrow {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-size: var(--t-small);
	font-weight: 600;
	color: var(--fg);
	border-bottom: var(--hair) solid var(--line);
	padding-bottom: 2px;
	transition: border-color var(--dur) var(--ease), gap var(--dur) var(--ease);
}

.uc-home .arrow::after {
	content: "→";
	font-family: var(--f-mono);
	transition: transform var(--dur) var(--ease);
}

.uc-home .arrow:hover {
	border-color: var(--fg);
}

.uc-home .arrow:hover::after {
	transform: translateX(3px);
}

.uc-home .actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s3);
	align-items: center;
}

/* ── Chips, tags, readouts ──────────────────────────────────────────── */
.uc-home .chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.28rem 0.65rem;
	border: var(--hair) solid var(--line);
	border-radius: var(--r-pill);
	font-family: var(--f-mono);
	font-size: var(--t-mono);
	letter-spacing: 0.04em;
	color: var(--fg-dim);
	background: transparent;
}

.uc-home .chip__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
	flex: none;
}

.uc-home .chip--teal {
	color: var(--d-teal);
	border-color: color-mix(in srgb, var(--d-teal) 40%, transparent);
}

.uc-home .chip--amber {
	color: var(--d-amber);
	border-color: color-mix(in srgb, var(--d-amber) 40%, transparent);
}

.uc-home .chip--magenta {
	color: var(--d-magenta);
	border-color: color-mix(in srgb, var(--d-magenta) 40%, transparent);
}

.uc-home .chip--indigo {
	color: var(--d-indigo);
	border-color: color-mix(in srgb, var(--d-indigo) 40%, transparent);
}

.uc-home .chip--green {
	color: var(--d-green);
	border-color: color-mix(in srgb, var(--d-green) 40%, transparent);
}

.uc-home .chiprow {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s2);
}

.uc-home .trust-line {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 0.9rem;
	font-family: var(--f-mono);
	font-size: var(--t-mono);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--fg-dim);
}

.uc-home .trust-line span {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
}

.uc-home .trust-line span + span::before {
	content: "";
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.6;
}

/* A readout is the product's own voice: mono label, mono value, one hue. */
.uc-home .readout {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}

.uc-home .readout__label {
	font-family: var(--f-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--fg-dim);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.uc-home .readout__value {
	font-family: var(--f-mono);
	font-size: clamp(1.05rem, 1.9vw, 1.4rem);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
	color: var(--fg);
}

.uc-home .readout__value em {
	font-style: normal;
	font-size: 0.7em;
	color: var(--fg-dim);
	margin-inline-start: 0.15em;
}

.uc-home .readout--amber .readout__value {
	color: var(--d-amber);
}

.uc-home .readout--magenta .readout__value {
	color: var(--d-magenta);
}

.uc-home .readout--teal .readout__value {
	color: var(--d-teal);
}

.uc-home .readout--indigo .readout__value {
	color: var(--d-indigo);
}

.uc-home .readouts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--s4) var(--s5);
}

/* ── The figure frame ───────────────────────────────────────────────── */
/* Every product mock is presented as a figure: hairline frame, mono caption
   bar, numbered plate. It is the page's structural signature. */
.uc-home .fig {
	display: flex;
	flex-direction: column;
	background: var(--card-solid);
	border: var(--hair) solid var(--line);
	border-radius: var(--r-frame);
	overflow: hidden;
	box-shadow: var(--shadow);
}

.uc-home .fig__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s4);
	padding: 0.5rem 0.75rem;
	border-bottom: var(--hair) solid var(--line);
	background: color-mix(in srgb, var(--fg) 4%, transparent);
	font-family: var(--f-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fg-dim);
}

.uc-home .fig__bar strong {
	font-weight: 500;
	color: var(--fg);
}

.uc-home .fig__plate {
	flex: none;
	color: var(--fg-dim);
	opacity: 0.75;
}

.uc-home .fig__body {
	position: relative;
	flex: 1;
	min-height: 0;
}

.uc-home .fig__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s2) var(--s4);
	padding: 0.6rem 0.75rem;
	border-top: var(--hair) solid var(--line);
	font-family: var(--f-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.06em;
	color: var(--fg-dim);
}

/* Caption text under a figure, always visible — never hover-only. */
.uc-home .caption {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem;
	margin-top: var(--s3);
	font-family: var(--f-mono);
	font-size: var(--t-mono);
	letter-spacing: 0.03em;
	color: var(--fg-dim);
}

.uc-home .caption b {
	font-weight: 500;
	color: var(--fg);
}

/* Micrograph surface: generated texture, never a stock photo. */
/* Any slot that holds a generated micrograph also accepts a real one: the
   theme fills data-src, and this makes the <img> behave like the SVG did. */
.uc-home img.micro {
	object-fit: cover;
	object-position: center;
}

.uc-home .micro {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	background: #0b0d0f;
}

.uc-home .scalebar {
	position: absolute;
	inset-inline-start: 12px;
	inset-block-end: 10px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	font-family: var(--f-mono);
	font-size: 0.625rem;
	letter-spacing: 0.06em;
	color: #f2f5f7;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
	pointer-events: none;
}

.uc-home .scalebar::before {
	content: "";
	width: 58px;
	height: 4px;
	border: 1px solid rgba(255, 255, 255, 0.85);
	border-top: 0;
	background: linear-gradient(#f2f5f7, #f2f5f7) no-repeat center / 100% 2px;
}

.uc-home .overlay-tag {
	position: absolute;
	inset-block-start: 10px;
	inset-inline-start: 12px;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.2rem 0.5rem;
	background: rgba(6, 9, 12, 0.72);
	backdrop-filter: blur(4px);
	border-radius: var(--radius-sm);
	font-family: var(--f-mono);
	font-size: 0.625rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #eaf0f3;
	pointer-events: none;
}

/* ── Reveal on scroll ───────────────────────────────────────────────── */
.uc-home .rise {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 620ms var(--ease), transform 620ms var(--ease);
}

.uc-home .rise.is-in {
	opacity: 1;
	transform: none;
}

.uc-home .rise[data-delay="1"] {
	transition-delay: 80ms;
}

.uc-home .rise[data-delay="2"] {
	transition-delay: 160ms;
}

.uc-home .rise[data-delay="3"] {
	transition-delay: 240ms;
}

@media (prefers-reduced-motion: reduce) {
.uc-home *::before,
.uc-home *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}

.uc-home .rise {
		opacity: 1;
		transform: none;
	}
}

/* =====================================================================
   NotyLab home — section layer
   One block per band, in page order. Every mock is built from generated
   texture, SVG and type: no photography, no stock imagery.
   ===================================================================== */
/* ── 02 Hero ────────────────────────────────────────────────────────── */
.uc-home .hero {
	padding-top: calc(var(--header-h) + clamp(2.5rem, 6vw, 5rem));
	padding-bottom: clamp(3rem, 6vw, 5.5rem);
	overflow: hidden;
	isolation: isolate;
}

/* ── Hero composition ───────────────────────────────────────────────── */
/* One centred column with a deliberate rhythm, then a long pause before the
   product window so the two never touch. */
.uc-home .hero__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0;
}

.uc-home .hero__title {
	margin-top: clamp(1rem, 2vw, 1.5rem);
	max-width: 22ch;
}

/* The three words wrap on their own: one line where there is room, two or
   three where there is not. Forcing a stack wasted a wide viewport. */
.uc-home .hero__title span,
.uc-home .hero__title em {
	display: inline-block;
	font-style: normal;
}

/* Only the last word carries the accent, and it uses the site's own accent
   so the hero never disagrees with the buttons under it. */
.uc-home .hero__title em {
	background: linear-gradient(96deg, var(--d-teal) 0%, var(--brand-on-deep) 92%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

.uc-home .hero__sub {
	margin-top: clamp(1.15rem, 2vw, 1.6rem);
	max-width: 58ch;
	font-size: var(--t-lead);
	line-height: 1.55;
	color: var(--fg-dim);
	text-wrap: pretty;
}

.uc-home .hero__actions {
	justify-content: center;
	margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

.uc-home .hero__head .trust-line {
	margin-top: clamp(1rem, 1.6vw, 1.35rem);
	justify-content: center;
}

/* The pause that stops the window from sitting on the copy. */
.uc-home .hero__stage {
	margin-top: clamp(3.5rem, 7vw, 6.5rem);
}

@media (max-width: 700px) {
.uc-home .hero__title {
		max-width: 16ch;
	}

.uc-home .hero__stage {
		margin-top: clamp(2.5rem, 8vw, 3.5rem);
	}
}

/* ── Hero effects, ported from the theme's showcase hero so the two pages read
   as one site: accent radials over the ground, two blurred auroras, a 46px
   hairline grid, then the curve and dust canvases. */
.uc-home .hero {
	background-image: radial-gradient(1100px 520px at 82% -120px, rgba(var(--fx-rgb), 0.16), transparent 60%),
		radial-gradient(900px 600px at -10% 8%, rgba(var(--fx-rgb), 0.08), transparent 55%);
}

.uc-home .hero__fx {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
}

.uc-home .hero__aurora {
	position: absolute;
	border-radius: 50%;
	filter: blur(70px);
	opacity: 0.8;
}

.uc-home .hero__aurora--a {
	width: 46vw;
	height: 46vw;
	max-width: 620px;
	max-height: 620px;
	top: -14%;
	inset-inline-end: -8%;
	background: radial-gradient(circle, rgba(var(--fx-rgb), 0.3), transparent 68%);
}

.uc-home .hero__aurora--b {
	width: 38vw;
	height: 38vw;
	max-width: 520px;
	max-height: 520px;
	bottom: -20%;
	inset-inline-start: -10%;
	background: radial-gradient(circle, rgba(var(--fx-rgb), 0.18), transparent 70%);
}

.uc-home .hero__field {
	position: absolute;
	inset: -2px;
	background-image: linear-gradient(to right, var(--deep-line-soft) 1px, transparent 1px),
		linear-gradient(to bottom, var(--deep-line-soft) 1px, transparent 1px);
	background-size: 46px 46px;
	mask-image: radial-gradient(900px 520px at 70% 30%, #000, transparent 78%);
	opacity: 0.7;
}

/* The page's own subject, kept far under the accent layers: enough to give
   the ground a material, not enough to compete with the trails. */
.uc-home .hero__spec {
	position: absolute;
	inset: -8%;
	opacity: 0.07;
	filter: blur(1.5px);
	mask-image: radial-gradient(56% 54% at 50% 32%, transparent 14%, #000 80%);
}

.uc-home .hero__spec svg {
	width: 50%;
	height: 50%;
	transform: scale(2);
	transform-origin: 0 0;
}

.uc-home .hero__curves,
.uc-home .hero__dust {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* One light from above, and a darker floor for the product window to sit on. */
.uc-home .hero__bloom {
	position: absolute;
	inset: 0;
	background: radial-gradient(104% 60% at 50% -14%, rgba(255, 255, 255, 0.05), transparent 56%),
		linear-gradient(180deg, transparent 52%, rgba(0, 0, 0, 0.45));
}

/* ── The product window ─────────────────────────────────────────────── */
/* Redrawn from the real NotyLab UI: a light workspace, a labelled tool
   rail, step pills across the top, and a live results panel. It keeps its
   own palette in both site themes, because it is a depiction of the
   software rather than a piece of this page's chrome — the same reason the
   figure canvas stays printed-paper white. */
.uc-home .app {
	--ui-bg: #ffffff;
	--ui-bg-2: #f3f6f7;
	--ui-bg-3: #e9eef0;
	--ui-line: rgba(15, 32, 43, 0.13);
	--ui-line-soft: rgba(15, 32, 43, 0.07);
	--ui-fg: #14202a;
	--ui-fg-dim: #5c6d7a;
	--ui-accent: #0f766e;
	--ui-accent-soft: #e3f2ef;
	--ui-on-accent: #ffffff;
	--ui-live: #16a34a;
	--ui-warn: #b45309;
	--ui-warn-soft: #fdf3e3;

	/* A flex column, not a grid with a 1fr row: minmax(0,1fr) let the body
	   collapse below the canvas own min-height. */
	display: flex;
	flex-direction: column;
	background: var(--ui-bg);
	color: var(--ui-fg);
	border: var(--hair) solid rgba(255, 255, 255, 0.14);
	border-radius: var(--r-shell);
	overflow: hidden;
	box-shadow: 0 70px 130px -55px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(0, 0, 0, 0.35);
	font-size: 0.75rem;
	line-height: 1.35;
}

/* The app ships a dark theme too, so the depiction follows the visitor's
   choice rather than forcing a bright slab onto a dark page. Only these
   tokens move; every rule above is written against them. */
.uc-home @media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .app {
		--ui-bg: #121a1f;
		--ui-bg-2: #0d1418;
		--ui-bg-3: #080d10;
		--ui-line: rgba(255, 255, 255, 0.12);
		--ui-line-soft: rgba(255, 255, 255, 0.06);
		--ui-fg: #e7edf0;
		--ui-fg-dim: #94a4ae;
		--ui-accent: #10a89a;
		--ui-accent-soft: rgba(16, 168, 154, 0.18);
		--ui-on-accent: #04211e;
		--ui-live: #34d399;
		--ui-warn: #fbbf24;
		--ui-warn-soft: rgba(251, 191, 36, 0.12);
		border-color: rgba(255, 255, 255, 0.16);
		box-shadow: 0 70px 130px -55px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.08);
	}
}

:root[data-theme="dark"] .app {
	--ui-bg: #121a1f;
	--ui-bg-2: #0d1418;
	--ui-bg-3: #080d10;
	--ui-line: rgba(255, 255, 255, 0.12);
	--ui-line-soft: rgba(255, 255, 255, 0.06);
	--ui-fg: #e7edf0;
	--ui-fg-dim: #94a4ae;
	--ui-accent: #10a89a;
	--ui-accent-soft: rgba(16, 168, 154, 0.18);
	--ui-on-accent: #04211e;
	--ui-live: #34d399;
	--ui-warn: #fbbf24;
	--ui-warn-soft: rgba(251, 191, 36, 0.12);
	border-color: rgba(255, 255, 255, 0.16);
	box-shadow: 0 70px 130px -55px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Per-slot crop, so four tiles can show four different fields of one image. */
.uc-home img.micro {
	object-position: var(--fit, center);
}

/* ── Top bar ────────────────────────────────────────────────────────── */
.uc-home .ui-bar {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.5rem 0.7rem;
	border-bottom: var(--hair) solid var(--ui-line);
	background: var(--ui-bg);
}

.uc-home .ui-back {
	display: flex;
	gap: 0.45rem;
	color: var(--ui-fg-dim);
	flex: none;
}

.uc-home .ui-back svg {
	width: 15px;
	height: 15px;
}

.uc-home .ui-id {
	display: grid;
	flex: none;
	line-height: 1.15;
}

.uc-home .ui-id b {
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.uc-home .ui-id em {
	font-style: normal;
	font-family: var(--f-mono);
	font-size: 0.5625rem;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--ui-fg-dim);
}

.uc-home .ui-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	flex: none;
	padding: 0.15rem 0.5rem;
	border-radius: var(--r-pill);
	border: var(--hair) solid var(--ui-line);
	font-family: var(--f-mono);
	font-size: 0.5625rem;
	letter-spacing: 0.06em;
	color: var(--ui-fg-dim);
	white-space: nowrap;
}

.uc-home .ui-pill--good {
	color: var(--ui-live);
	border-color: color-mix(in srgb, var(--ui-live) 34%, transparent);
	background: color-mix(in srgb, var(--ui-live) 8%, transparent);
}

.uc-home .ui-dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: currentColor;
	flex: none;
}

/* The workflow, stated in the chrome: the page's whole thesis, visible in
   the product itself. */
.uc-home .ui-steps {
	display: flex;
	justify-content: center;
	flex: 1;
	min-width: 0;
}

.uc-home .ui-stepset {
	align-items: center;
	gap: 0.3rem;
	padding: 0.15rem;
	border: var(--hair) solid var(--ui-line);
	border-radius: var(--r-pill);
	background: var(--ui-bg-2);
}

.uc-home .ui-side .setgroup[data-on="true"],
.uc-home .ui-status .setgroup[data-on="true"] {
	display: grid;
}

.uc-home .ui-steps .setgroup[data-on="true"] {
	display: flex;
}

.uc-home .ui-step {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.2rem 0.5rem;
	border-radius: var(--r-pill);
	font-size: 0.625rem;
	font-weight: 500;
	color: var(--ui-fg-dim);
	white-space: nowrap;
}

.uc-home .ui-step::before {
	content: "";
	width: 12px;
	height: 12px;
	flex: none;
	border-radius: 50%;
	border: 1.2px solid currentColor;
	opacity: 0.55;
}

.uc-home .ui-step[data-done="true"] {
	color: var(--ui-accent);
}

.uc-home .ui-step[data-done="true"]::before {
	opacity: 1;
	border-color: var(--ui-accent);
	background: var(--ui-accent);
	/* the tick */
	background-image: linear-gradient(45deg, transparent 46%, #fff 46%, #fff 56%, transparent 56%),
		linear-gradient(-45deg, transparent 62%, #fff 62%, #fff 72%, transparent 72%);
}

.uc-home .ui-step[data-now="true"] {
	color: var(--ui-fg);
	background: var(--ui-bg);
	box-shadow: 0 1px 2px rgba(15, 32, 43, 0.12);
}

.uc-home .ui-step[data-now="true"]::before {
	opacity: 1;
	border-color: var(--ui-accent);
	border-width: 2px;
}

.uc-home .ui-project {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	flex: none;
	padding: 0.22rem 0.5rem;
	border: var(--hair) solid var(--ui-line);
	border-radius: var(--r-frame);
	font-size: 0.625rem;
	color: var(--ui-fg-dim);
}

.uc-home .ui-project::after {
	content: "";
	width: 4px;
	height: 4px;
	border-inline-end: 1.3px solid currentColor;
	border-block-end: 1.3px solid currentColor;
	transform: rotate(45deg) translateY(-1px);
}

.uc-home .ui-icons {
	display: flex;
	gap: 0.4rem;
	flex: none;
	color: var(--ui-fg-dim);
}

.uc-home .ui-icons svg {
	width: 13px;
	height: 13px;
}

.uc-home .ui-badge {
	position: relative;
}

.uc-home .ui-badge::after {
	content: "";
	position: absolute;
	top: -2px;
	inset-inline-end: -2px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #dc2626;
}

/* ── Body ───────────────────────────────────────────────────────────── */
.uc-home .ui-body {
	display: grid;
	grid-template-columns: 62px minmax(0, 1fr) 232px;
	background: var(--ui-bg-2);
}

.uc-home .ui-rail {
	display: grid;
	align-content: start;
	gap: 1px;
	padding: 0.45rem 0.3rem;
	border-inline-end: var(--hair) solid var(--ui-line);
	background: var(--ui-bg);
}

.uc-home .ui-railgroup {
	margin: 0.5rem 0 0.15rem;
	font-family: var(--f-mono);
	font-size: 0.5rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ui-fg-dim);
	text-align: center;
}

.uc-home .ui-railgroup:first-child {
	margin-top: 0;
}

.uc-home .ui-tools {
	display: flex;
	justify-content: center;
	gap: 2px;
}

.uc-home .ui-tool {
	display: grid;
	place-items: center;
	width: 25px;
	height: 25px;
	border-radius: var(--radius-sm);
	color: var(--ui-fg-dim);
}

.uc-home .ui-tool svg {
	width: 13px;
	height: 13px;
}

.uc-home .ui-tool[data-on="true"] {
	background: var(--ui-accent);
	color: var(--ui-on-accent);
}

.uc-home .app__main {
	position: relative;
	min-height: clamp(250px, 38vw, 400px);
	background: var(--ui-bg-3);
	overflow: hidden;
}

/* Floating canvas controls, as in the app. */
.uc-home .ui-float {
	position: absolute;
	z-index: 3;
	inset-block-start: 8px;
	inset-inline-end: 8px;
	display: flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.2rem 0.35rem;
	border-radius: var(--r-pill);
	background: rgba(255, 255, 255, 0.94);
	border: var(--hair) solid var(--ui-line);
	box-shadow: 0 2px 8px rgba(15, 32, 43, 0.12);
	color: var(--ui-fg-dim);
	font-family: var(--f-mono);
	font-size: 0.5625rem;
}

.uc-home .ui-float svg {
	width: 12px;
	height: 12px;
}

/* ── Results panel ──────────────────────────────────────────────────── */
.uc-home .ui-side {
	display: grid;
	align-content: start;
	gap: 0.45rem;
	padding: 0.5rem;
	border-inline-start: var(--hair) solid var(--ui-line);
	background: var(--ui-bg);
	overflow: hidden;
}

.uc-home .ui-sidehead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-family: var(--f-mono);
	font-size: 0.5625rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ui-fg-dim);
}

.uc-home .ui-sidehead b {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-weight: 500;
	color: var(--ui-live);
}

.uc-home .ui-card {
	display: grid;
	gap: 0.4rem;
	padding: 0.5rem;
	border: var(--hair) solid var(--ui-line);
	border-radius: var(--r-frame);
	background: var(--ui-bg);
}

.uc-home .ui-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.4rem;
	font-family: var(--f-mono);
	font-size: 0.5rem;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--ui-fg-dim);
}

.uc-home .ui-card__count {
	display: inline-grid;
	place-items: center;
	min-width: 14px;
	height: 14px;
	padding: 0 3px;
	border-radius: var(--r-pill);
	background: var(--ui-accent-soft);
	color: var(--ui-accent);
	font-size: 0.5rem;
}

/* The hero number, exactly the shape the app gives a headline result. */
.uc-home .ui-result {
	background: var(--ui-bg-2);
}

.uc-home .ui-result__num {
	font-family: var(--f-mono);
	font-size: 1.35rem;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.03em;
	color: var(--ui-fg);
	line-height: 1;
}

.uc-home .ui-result__num em {
	font-style: normal;
	font-size: 0.55em;
	color: var(--ui-fg-dim);
	margin-inline-start: 0.15em;
}

.uc-home .ui-result__label {
	font-size: 0.625rem;
	color: var(--ui-fg-dim);
}

.uc-home .ui-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.2rem;
}

.uc-home .ui-chip {
	padding: 0.1rem 0.35rem;
	border: var(--hair) solid var(--ui-line);
	border-radius: var(--r-pill);
	font-family: var(--f-mono);
	font-size: 0.5rem;
	letter-spacing: 0.04em;
	color: var(--ui-fg-dim);
	white-space: nowrap;
}

.uc-home .ui-row {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.625rem;
}

.uc-home .ui-row + .ui-row {
	padding-top: 0.35rem;
	border-top: var(--hair) solid var(--ui-line-soft);
}

.uc-home .ui-swatch {
	width: 9px;
	height: 9px;
	flex: none;
	border-radius: 2px;
}

.uc-home .ui-row__name {
	display: grid;
	min-width: 0;
	line-height: 1.25;
}

.uc-home .ui-row__name b {
	font-weight: 600;
}

.uc-home .ui-row__name span {
	font-family: var(--f-mono);
	font-size: 0.5rem;
	color: var(--ui-fg-dim);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.uc-home .ui-row__val {
	margin-inline-start: auto;
	font-family: var(--f-mono);
	font-size: 0.625rem;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.uc-home .ui-seg {
	display: flex;
	padding: 1.5px;
	border-radius: var(--r-frame);
	background: var(--ui-bg-3);
	font-size: 0.5625rem;
}

.uc-home .ui-seg span {
	flex: 1;
	text-align: center;
	padding: 0.15rem 0.3rem;
	border-radius: calc(var(--r-frame) - 1px);
	color: var(--ui-fg-dim);
}

.uc-home .ui-seg span[data-on="true"] {
	background: var(--ui-accent);
	color: var(--ui-on-accent);
}

.uc-home .ui-bar-split {
	display: flex;
	height: 4px;
	border-radius: 2px;
	overflow: hidden;
	background: var(--ui-bg-3);
}

.uc-home .ui-bar-split i {
	display: block;
	height: 100%;
}

.uc-home .ui-legend {
	display: flex;
	justify-content: space-between;
	font-family: var(--f-mono);
	font-size: 0.5rem;
	color: var(--ui-fg-dim);
}

.uc-home .ui-slider {
	display: grid;
	gap: 0.2rem;
}

.uc-home .ui-slider__row {
	display: flex;
	justify-content: space-between;
	font-size: 0.5625rem;
	color: var(--ui-fg-dim);
}

.uc-home .ui-slider__row b {
	font-family: var(--f-mono);
	color: var(--ui-fg);
	font-weight: 500;
}

.uc-home .ui-slider__track {
	position: relative;
	height: 3px;
	border-radius: 2px;
	background: var(--ui-bg-3);
}

.uc-home .ui-slider__track i {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	border-radius: 2px;
	background: var(--ui-accent);
}

.uc-home .ui-slider__track i::after {
	content: "";
	position: absolute;
	inset-inline-end: -5px;
	top: 50%;
	width: 10px;
	height: 10px;
	transform: translateY(-50%);
	border-radius: 50%;
	background: #fff;
	border: 1.5px solid var(--ui-accent);
}

.uc-home .ui-note {
	display: flex;
	align-items: flex-start;
	gap: 0.3rem;
	padding: 0.35rem 0.45rem;
	border-radius: var(--r-frame);
	background: var(--ui-warn-soft);
	color: var(--ui-warn);
	font-size: 0.5625rem;
}

.uc-home .ui-presets {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.25rem;
}

.uc-home .ui-preset {
	display: grid;
	gap: 2px;
	padding: 0.25rem 0.2rem;
	border: var(--hair) solid var(--ui-line);
	border-radius: var(--radius-sm);
	font-family: var(--f-mono);
	font-size: 0.4375rem;
	color: var(--ui-fg-dim);
	text-align: center;
}

.uc-home .ui-preset[data-on="true"] {
	border-color: var(--ui-accent);
	background: var(--ui-accent-soft);
	color: var(--ui-accent);
}

.uc-home .ui-preset i {
	display: flex;
	gap: 1px;
	height: 9px;
}

.uc-home .ui-preset i b {
	flex: 1;
	background: currentColor;
	opacity: 0.35;
	border-radius: 1px;
}

.uc-home .ui-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.3rem;
	margin-top: 0.15rem;
	padding: 0.4rem;
	border-radius: var(--r-frame);
	background: var(--ui-accent);
	color: var(--ui-on-accent);
	font-size: 0.6875rem;
	font-weight: 600;
}

/* ── Status bar ─────────────────────────────────────────────────────── */
.uc-home .ui-status {
	display: flex;
	align-items: center;
	padding: 0.35rem 0.6rem;
	border-top: var(--hair) solid var(--ui-line);
	background: var(--ui-bg);
	font-family: var(--f-mono);
	font-size: 0.5625rem;
	letter-spacing: 0.03em;
	color: var(--ui-fg-dim);
}

.uc-home .ui-status .setgroup[data-on="true"] {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.3rem 0.75rem;
	width: 100%;
}

.uc-home .ui-status b {
	font-weight: 500;
	color: var(--ui-fg);
}

.uc-home .ui-status .ui-pill {
	margin-inline-start: auto;
}

/* ── Narrow ─────────────────────────────────────────────────────────── */
.uc-home @media (max-width: 1000px) {
	.ui-body {
		grid-template-columns: 52px minmax(0, 1fr) 200px;
	}
}

/* On a phone the canvas and one number survive; the rail, the step pills
   and every secondary card are desktop furniture. */
.uc-home @media (max-width: 820px) {
	.ui-body {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: minmax(0, 1fr) auto;
	}

	.ui-rail,
	.ui-steps,
	.ui-project,
	.ui-icons {
		display: none;
	}

	.ui-side {
		border-inline-start: 0;
		border-top: var(--hair) solid var(--ui-line);
	}

	.ui-side .setgroup[data-on="true"] {
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
		align-items: stretch;
	}

	.ui-side .ui-card:not(.ui-result),
	.ui-side .ui-sidehead,
	.ui-side .ui-cta {
		display: none;
	}
}

@media (max-width: 560px) {
.uc-home .ui-status .setgroup[data-on="true"] > *:nth-child(n + 4) {
		display: none;
	}
}

/* Stage machinery: four states cross-fading in one viewport. */
.uc-home .stages {
	position: absolute;
	inset: 0;
}

.uc-home .stage {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 520ms var(--ease), visibility 520ms;
}

.uc-home .stage[data-on="true"] {
	opacity: 1;
	visibility: visible;
}

.uc-home .stage__layer {
	position: absolute;
	inset: 0;
}

.uc-home .stagebar {
	display: flex;
	align-items: center;
	gap: var(--s3);
	margin-top: var(--s4);
	justify-content: center;
}

.uc-home .stagedot {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.35rem 0.6rem;
	border-radius: var(--r-pill);
	border: var(--hair) solid transparent;
	font-family: var(--f-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fg-dim);
	transition: color 200ms var(--ease), border-color 200ms var(--ease);
}

.uc-home .stagedot::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.45;
}

.uc-home .stagedot[aria-selected="true"] {
	color: var(--fg);
	border-color: var(--line);
}

.uc-home .stagedot[aria-selected="true"]::before {
	opacity: 1;
	background: var(--d-teal);
}

/* Mask reveal, peak draw, count-up: all keyed to the live stage. */
.uc-home .reveal-mask {
	clip-path: inset(0 100% 0 0);
}

.uc-home .stage[data-on="true"] .reveal-mask {
	animation: wipe 1100ms var(--ease) 260ms forwards;
}

@keyframes wipe {
	to {
		clip-path: inset(0 0 0 0);
	}
}

.uc-home .draw {
	stroke-dasharray: var(--len, 1200);
	stroke-dashoffset: var(--len, 1200);
}

.uc-home .stage[data-on="true"] .draw,
.uc-home .is-in .draw {
	animation: draw 1400ms var(--ease) forwards;
}

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

.uc-home .pop {
	opacity: 0;
	transform: translateY(6px);
}

.uc-home .stage[data-on="true"] .pop,
.uc-home .is-in .pop {
	animation: pop 420ms var(--ease) forwards;
}

.uc-home .pop[data-d="1"] {
	animation-delay: 520ms;
}

.uc-home .pop[data-d="2"] {
	animation-delay: 700ms;
}

.uc-home .pop[data-d="3"] {
	animation-delay: 880ms;
}

.uc-home .pop[data-d="4"] {
	animation-delay: 1060ms;
}

@keyframes pop {
	to {
		opacity: 1;
		transform: none;
	}
}

/* Stage 3 — result selection */
.uc-home .picks {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
	gap: 0.75rem;
	padding: 0.85rem;
}

.uc-home .picklist {
	display: grid;
	align-content: start;
	gap: 0.35rem;
}

.uc-home .pick {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.45rem 0.55rem;
	border: var(--hair) solid var(--line);
	border-radius: var(--r-frame);
	font-family: var(--f-mono);
	font-size: 0.6875rem;
	color: var(--fg-dim);
	background: color-mix(in srgb, var(--fg) 3%, transparent);
}

.uc-home .pick[data-sel="true"] {
	border-color: color-mix(in srgb, var(--d-indigo) 60%, transparent);
	background: color-mix(in srgb, var(--d-indigo) 14%, transparent);
	color: var(--fg);
}

.uc-home .pick__box {
	width: 11px;
	height: 11px;
	flex: none;
	border: 1.5px solid currentColor;
	border-radius: var(--radius-sm);
	opacity: 0.6;
}

.uc-home .pick[data-sel="true"] .pick__box {
	background: var(--d-indigo);
	border-color: var(--d-indigo);
	opacity: 1;
}

.uc-home .pick b {
	margin-inline-start: auto;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	color: var(--fg);
}

.uc-home .pickchart {
	border: var(--hair) solid var(--line);
	border-radius: var(--r-frame);
	background: color-mix(in srgb, var(--fg) 3%, transparent);
	padding: 0.5rem;
	min-width: 0;
}

/* ── 03 Choose your path (bento) ────────────────────────────────────── */
.uc-home .bento {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--s4);
}

.uc-home .tile {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--s4);
	padding: var(--s5);
	background: var(--card);
	border: var(--hair) solid var(--line);
	border-radius: var(--r-card);
	overflow: hidden;
	transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.uc-home .tile:hover {
	border-color: color-mix(in srgb, var(--fg) 34%, transparent);
	transform: translateY(-2px);
}

.uc-home .tile__num {
	font-family: var(--f-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	color: var(--fg-dim);
}

.uc-home .tile__title {
	font-size: clamp(1.15rem, 1.5vw, 1.4rem);
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.1;
}

.uc-home .tile__meta {
	font-family: var(--f-mono);
	font-size: var(--t-mono);
	letter-spacing: 0.04em;
	color: var(--fg-dim);
}

/* Tied to a ratio rather than a fixed height, so the frame keeps pace with
   the card width and the artwork inside it is never cropped off-balance. The
   cap lands the 7-column cards on ~3.5:1 and the 5-column cards on 2.67:1 —
   the two ratios the mocks are drawn at. */
.uc-home .tile__art {
	position: relative;
	aspect-ratio: 16 / 6;
	max-height: 190px;
	min-height: 128px;
	margin-top: var(--s4);
	margin-inline: calc(var(--s5) * -1);
	margin-bottom: calc(var(--s5) * -1);
	border-top: var(--hair) solid var(--line);
	background: var(--bg-2);
	overflow: hidden;
}

/* Pushed to the bottom of the text block, but only as wide as its own label —
   a rule stretching the full card reads as a mistake. */
.uc-home .tile__cta {
	margin-top: auto;
	align-self: start;
}

.uc-home .tile--image {
	grid-column: 1 / 8;
}

.uc-home .tile--data {
	grid-column: 8 / 13;
}

.uc-home .tile--compare {
	grid-column: 1 / 6;
}

.uc-home .tile--figure {
	grid-column: 6 / 13;
}

@media (max-width: 900px) {
.uc-home .tile--image,
.uc-home .tile--data,
.uc-home .tile--compare,
.uc-home .tile--figure {
		grid-column: auto / span 6;
	}
}

@media (max-width: 560px) {
.uc-home .tile--image,
.uc-home .tile--data,
.uc-home .tile--compare,
.uc-home .tile--figure {
		grid-column: 1 / -1;
	}
}

/* ── 04 Standards ribbon ────────────────────────────────────────────── */
.uc-home .ribbon {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s4) var(--s6);
}

.uc-home .ribbon__label {
	font-size: var(--t-small);
	font-weight: 600;
	letter-spacing: -0.01em;
}

.uc-home .ribbon__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s2);
	margin-inline-start: auto;
}

.uc-home .ribbon__list a:hover {
	color: var(--fg);
	border-color: color-mix(in srgb, var(--fg) 34%, transparent);
}

/* ── 05 Analyze ─────────────────────────────────────────────────────── */
.uc-home .analyze {
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: start;
}

@media (max-width: 1040px) {
.uc-home .analyze {
		grid-template-columns: 1fr;
	}
}

.uc-home .subject {
	display: flex;
	flex-direction: column;
	gap: var(--s4);
}

/* Outcome first, tool name second — the visitor does not know what
   NotyPhase is yet. */
.uc-home .subject__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.6rem var(--s4);
}

.uc-home .subject__tool {
	font-family: var(--f-mono);
	font-size: var(--t-mono);
	letter-spacing: 0.08em;
	color: var(--fg-dim);
	border: var(--hair) solid var(--line);
	border-radius: var(--r-pill);
	padding: 0.15rem 0.55rem;
}

/* Before / after: draggable, but also two buttons and a keyboard slider. */
.uc-home .ba {
	position: relative;
	aspect-ratio: 16 / 10;
	background: #08090b;
	overflow: hidden;
	touch-action: pan-y;
}

.uc-home .ba__layer {
	position: absolute;
	inset: 0;
}

.uc-home .ba__layer--after {
	clip-path: inset(0 0 0 var(--pos, 50%));
}

.uc-home .ba__range {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: ew-resize;
	appearance: none;
	-webkit-appearance: none;
	background: none;
}

.uc-home .ba__range::-webkit-slider-thumb {
	appearance: none;
	-webkit-appearance: none;
	width: 44px;
	height: 100%;
}

.uc-home .ba__range:focus-visible + .ba__handle {
	box-shadow: 0 0 0 2px var(--d-indigo);
}

.uc-home .ba__handle {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--pos, 50%);
	width: 2px;
	background: rgba(255, 255, 255, 0.9);
	pointer-events: none;
	transition: box-shadow 160ms var(--ease);
}

.uc-home .ba__grip {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(10, 14, 18, 0.72);
	border: 1.5px solid rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(3px);
	display: grid;
	place-items: center;
	color: #fff;
	font-family: var(--f-mono);
	font-size: 0.7rem;
	letter-spacing: -0.05em;
}

.uc-home .ba__side {
	position: absolute;
	inset-block-start: 10px;
	display: inline-flex;
	gap: 0.35rem;
	padding: 0.2rem 0.5rem;
	border-radius: var(--radius-sm);
	background: rgba(6, 9, 12, 0.72);
	font-family: var(--f-mono);
	font-size: 0.625rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #eaf0f3;
	pointer-events: none;
}

.uc-home .ba__side--raw {
	inset-inline-start: 12px;
}

.uc-home .ba__side--out {
	inset-inline-end: 12px;
}

/* A measurement label pinned over the image: fixed size whatever the frame
   does, and real text rather than pixels. */
.uc-home .ba__pin {
	position: absolute;
	inset-block-start: var(--y, 42%);
	inset-inline-start: var(--x);
	transform: translate(6px, -50%);
	font-family: var(--f-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.02em;
	font-variant-numeric: tabular-nums;
	color: #f5a524;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95), 0 0 2px rgba(0, 0, 0, 0.9);
	white-space: nowrap;
	pointer-events: none;
}

.uc-home .ba__pin em {
	font-style: normal;
	opacity: 0.75;
}

.uc-home .seg {
	display: inline-flex;
	padding: 2px;
	border: var(--hair) solid var(--line);
	border-radius: var(--r-pill);
	background: color-mix(in srgb, var(--fg) 4%, transparent);
}

.uc-home .seg__btn {
	padding: 0.3rem 0.7rem;
	border-radius: var(--r-pill);
	font-family: var(--f-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fg-dim);
	transition: background-color 200ms var(--ease), color 200ms var(--ease);
}

.uc-home .seg__btn[aria-pressed="true"] {
	background: var(--fg);
	color: var(--bg);
}

.uc-home .plot {
	display: block;
	width: 100%;
	height: auto;
	background: transparent;
}

.uc-home .plotwrap {
	position: relative;
	padding: var(--s4);
	background: var(--bg-2);
}

.uc-home .replay {
	margin-inline-start: auto;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.25rem 0.55rem;
	border: var(--hair) solid var(--line);
	border-radius: var(--r-pill);
	background: var(--bg);
	font-family: var(--f-mono);
	font-size: 0.625rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fg-dim);
}

.uc-home .replay:hover {
	color: var(--fg);
	border-color: var(--fg);
}

/* ── 06 Compare ─────────────────────────────────────────────────────── */
.uc-home .compare {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: clamp(1.5rem, 3vw, 2.75rem);
	align-items: start;
}

@media (max-width: 1040px) {
.uc-home .compare {
		grid-template-columns: 1fr;
	}
}

.uc-home .specimens {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--s3);
}

.uc-home .specimen {
	position: relative;
	border: var(--hair) solid var(--line);
	border-radius: var(--r-frame);
	overflow: hidden;
	background: #08090b;
	transition: border-color 200ms var(--ease);
}

.uc-home .specimen[data-sel="true"] {
	border-color: var(--d-indigo);
	box-shadow: 0 0 0 1px var(--d-indigo);
}

.uc-home .specimen__art {
	position: relative;
	aspect-ratio: 4 / 3;
}

.uc-home .specimen__foot {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.4rem 0.5rem;
	background: var(--bg-2);
	border-top: var(--hair) solid var(--line);
	font-family: var(--f-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.04em;
	color: var(--fg-dim);
}

.uc-home .specimen__foot b {
	font-weight: 500;
	color: var(--fg);
	font-variant-numeric: tabular-nums;
}

.uc-home .results {
	display: grid;
	gap: var(--s4);
	padding: var(--s5);
	background: var(--card);
	border: var(--hair) solid var(--line);
	border-radius: var(--r-card);
}

.uc-home .results__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--s3);
}

.uc-home .results__metric {
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.uc-home .results__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
	gap: var(--s5);
	align-items: start;
}

@media (max-width: 760px) {
.uc-home .results__grid {
		grid-template-columns: 1fr;
	}
}

.uc-home .dtable {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--f-mono);
	font-size: var(--t-mono);
	font-variant-numeric: tabular-nums;
}

.uc-home .dtable caption {
	text-align: start;
	padding-bottom: 0.4rem;
	font-size: 0.625rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--fg-dim);
}

.uc-home .dtable th,
.uc-home .dtable td {
	padding: 0.42rem 0.3rem;
	border-bottom: var(--hair) solid var(--line-soft);
	text-align: end;
	white-space: nowrap;
}

.uc-home .dtable th:first-child,
.uc-home .dtable td:first-child {
	text-align: start;
}

.uc-home .dtable thead th {
	font-weight: 500;
	color: var(--fg-dim);
	border-bottom-color: var(--line);
	text-transform: uppercase;
	font-size: 0.625rem;
	letter-spacing: 0.08em;
}

.uc-home .dtable tbody tr[data-sel="true"] td {
	color: var(--fg);
	background: color-mix(in srgb, var(--d-indigo) 12%, transparent);
}

.uc-home .dtable tbody td {
	color: var(--fg-dim);
}

.uc-home .dtable tbody td:nth-child(2) {
	color: var(--fg);
}

.uc-home .delta--down {
	color: var(--d-green);
}

.uc-home .delta--up {
	color: var(--d-amber);
}

.uc-home .footnote {
	font-family: var(--f-mono);
	font-size: 0.625rem;
	letter-spacing: 0.04em;
	color: var(--fg-dim);
	opacity: 0.85;
}

.uc-home .compare__quote {
	display: grid;
	gap: var(--s5);
	margin-top: clamp(2.5rem, 5vw, 4rem);
	padding-top: clamp(2rem, 4vw, 3rem);
	border-top: var(--hair) solid var(--line);
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
}

@media (max-width: 760px) {
.uc-home .compare__quote {
		grid-template-columns: 1fr;
		align-items: start;
	}
}

/* ── 07 Workflow + recipe ───────────────────────────────────────────── */
.uc-home .path {
	position: relative;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--s4);
	padding-top: var(--s6);
}

.uc-home .path__rail {
	position: absolute;
	inset-inline: 0;
	top: 14px;
	height: 2px;
	background: var(--line);
}

.uc-home .path__rail i {
	display: block;
	height: 100%;
	width: var(--fill, 0%);
	background: linear-gradient(90deg, var(--d-teal), var(--brand));
	transition: width 900ms var(--ease);
}

.uc-home .step {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
}

.uc-home .step__dot {
	position: relative;
	width: 30px;
	height: 30px;
	margin-top: -30px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--bg);
	border: var(--hair) solid var(--line);
	font-family: var(--f-mono);
	font-size: 0.625rem;
	color: var(--fg-dim);
	transition: border-color 400ms var(--ease), color 400ms var(--ease);
}

.uc-home .step.is-on .step__dot {
	border-color: var(--d-teal);
	color: var(--fg);
}

.uc-home .step__title {
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.uc-home .step__sub {
	font-family: var(--f-mono);
	font-size: var(--t-mono);
	letter-spacing: 0.03em;
	color: var(--fg-dim);
}

.uc-home .step__art {
	margin-top: auto;
	padding-top: var(--s3);
	aspect-ratio: 5 / 3;
	border: var(--hair) solid var(--line);
	border-radius: var(--r-frame);
	background: var(--bg-2);
	overflow: hidden;
}

@media (max-width: 900px) {
.uc-home .path {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--s5);
		padding-top: 0;
	}

.uc-home .path__rail {
		display: none;
	}

.uc-home .step__dot {
		margin-top: 0;
	}
}

@media (max-width: 520px) {
.uc-home .path {
		grid-template-columns: 1fr;
	}
}

.uc-home .recipe {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: var(--s6);
	align-items: center;
	margin-top: clamp(2.5rem, 5vw, 4rem);
	padding: var(--s5);
	background: var(--card);
	border: var(--hair) solid var(--line);
	border-radius: var(--r-card);
}

@media (max-width: 800px) {
.uc-home .recipe {
		grid-template-columns: 1fr;
	}
}

.uc-home .chain {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	flex-wrap: wrap;
	font-family: var(--f-mono);
	font-size: var(--t-mono);
}

.uc-home .chain__set {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
	padding: 0.5rem;
	border: var(--hair) dashed var(--line);
	border-radius: var(--r-frame);
}

.uc-home .chain__arrow {
	color: var(--fg-dim);
}

.uc-home .chain__save {
	padding: 0.35rem 0.6rem;
	border-radius: var(--r-pill);
	background: color-mix(in srgb, var(--d-teal) 16%, transparent);
	border: var(--hair) solid color-mix(in srgb, var(--d-teal) 45%, transparent);
	color: var(--d-teal);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* ── 08 Figure builder ──────────────────────────────────────────────── */
.uc-home .builder {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: center;
}

@media (max-width: 1040px) {
.uc-home .builder {
		grid-template-columns: 1fr;
	}
}

/* The one always-light surface on the page: a figure is printed on paper. */
.uc-home .canvas {
	position: relative;
	aspect-ratio: 4 / 3.1;
	padding: 26px 22px 34px;
	background: var(--canvas);
	color: var(--canvas-fg);
	border-radius: var(--r-card);
	box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.7);
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

.uc-home .canvas__guide {
	position: absolute;
	background: var(--indigo-on-paper);
	opacity: 0;
	pointer-events: none;
}

.uc-home .canvas.is-in .canvas__guide {
	animation: guide 1400ms var(--ease) 900ms;
}

.uc-home .canvas__guide--v {
	inset-block: 12px;
	inset-inline-start: 50%;
	width: 1px;
}

.uc-home .canvas__guide--h {
	inset-inline: 12px;
	inset-block-start: 50%;
	height: 1px;
}

@keyframes guide {
	0%,
	100% {
		opacity: 0;
	}

	30%,
	70% {
		opacity: 0.55;
	}
}

.uc-home .panel {
	position: relative;
	border: 1px solid var(--canvas-line);
	border-radius: var(--radius-sm);
	background: #fff;
	overflow: hidden;
	opacity: 0;
}

.uc-home .canvas.is-in .panel {
	animation: land 640ms var(--ease) forwards;
}

.uc-home .panel:nth-of-type(1) {
	animation-delay: 120ms;
}

.uc-home .panel:nth-of-type(2) {
	animation-delay: 300ms;
}

.uc-home .panel:nth-of-type(3) {
	animation-delay: 480ms;
}

.uc-home .panel:nth-of-type(4) {
	animation-delay: 660ms;
}

@keyframes land {
	from {
		opacity: 0;
		transform: translate3d(-14px, 10px, 0) scale(0.97);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.uc-home .panel__tag {
	position: absolute;
	border-radius: 3px;
	inset-block-start: 5px;
	inset-inline-start: 6px;
	z-index: 2;
	width: 17px;
	height: 17px;
	display: grid;
	place-items: center;
	background: rgba(255, 255, 255, 0.92);
	border: 1px solid var(--canvas-line);
	font-family: var(--f-mono);
	font-size: 0.625rem;
	font-weight: 600;
	color: var(--canvas-fg);
	opacity: 0;
}

.uc-home .canvas.is-in .panel__tag {
	animation: pop 380ms var(--ease) forwards;
	animation-delay: 900ms;
}

.uc-home .panel__handle {
	position: absolute;
	width: 7px;
	height: 7px;
	background: #fff;
	border: 1px solid var(--indigo-on-paper);
	opacity: 0;
	transition: opacity 200ms var(--ease);
}

.uc-home .panel:hover .panel__handle,
.uc-home .canvas.is-in .panel--live .panel__handle {
	opacity: 1;
}

.uc-home .panel__handle[data-h="tl"] {
	inset-block-start: -4px;
	inset-inline-start: -4px;
}

.uc-home .panel__handle[data-h="tr"] {
	inset-block-start: -4px;
	inset-inline-end: -4px;
}

.uc-home .panel__handle[data-h="bl"] {
	inset-block-end: -4px;
	inset-inline-start: -4px;
}

.uc-home .panel__handle[data-h="br"] {
	inset-block-end: -4px;
	inset-inline-end: -4px;
}

.uc-home .canvas__bar {
	position: absolute;
	inset-block-end: 10px;
	inset-inline-start: 22px;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--f-mono);
	font-size: 0.625rem;
	letter-spacing: 0.06em;
	color: color-mix(in srgb, var(--canvas-fg) 62%, transparent);
}

.uc-home .canvas__bar::before {
	content: "";
	width: 46px;
	height: 3px;
	border: 1px solid var(--canvas-fg);
	border-top: 0;
}

.uc-home .canvas__export {
	position: absolute;
	inset-block-end: 10px;
	inset-inline-end: 22px;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.2rem 0.5rem;
	border-radius: var(--r-pill);
	background: color-mix(in srgb, var(--green-on-paper) 14%, transparent);
	border: 1px solid color-mix(in srgb, var(--green-on-paper) 40%, transparent);
	font-family: var(--f-mono);
	font-size: 0.625rem;
	letter-spacing: 0.06em;
	color: var(--green-on-paper);
	opacity: 0;
}

.uc-home .canvas.is-in .canvas__export {
	animation: pop 420ms var(--ease) 1500ms forwards;
}

.uc-home .builder__list {
	display: grid;
	gap: var(--s4);
	margin-top: var(--s5);
}

.uc-home .builder__item {
	display: grid;
	grid-template-columns: 18px minmax(0, 1fr);
	gap: var(--s3);
	align-items: baseline;
	font-size: var(--t-small);
	color: var(--fg-dim);
}

.uc-home .builder__item b {
	color: var(--fg);
	font-weight: 600;
}

.uc-home .builder__item i {
	font-family: var(--f-mono);
	font-style: normal;
	font-size: 0.6875rem;
	color: var(--fg);
	border: var(--hair) solid var(--line);
	width: 18px;
	height: 18px;
	display: grid;
	place-items: center;
}

/* ── 09 Flagship workflows ──────────────────────────────────────────── */
.uc-home .flows {
	display: grid;
	gap: 0;
	border-top: var(--hair) solid var(--line);
}

.uc-home .flow {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: center;
	padding-block: clamp(1.75rem, 3.5vw, 2.75rem);
	border-bottom: var(--hair) solid var(--line);
}

.uc-home .flow__art {
	position: relative;
	aspect-ratio: 16 / 9;
	border: var(--hair) solid var(--line);
	border-radius: var(--r-frame);
	overflow: hidden;
	background: #08090b;
}

.uc-home .flow:nth-child(even) .flow__art {
	order: 2;
}

.uc-home .flow__body {
	display: flex;
	flex-direction: column;
	gap: var(--s3);
	min-width: 0;
}

.uc-home .flow__title {
	font-size: clamp(1.35rem, 2.4vw, 1.9rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.06;
}

.uc-home .flow__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1rem;
	font-family: var(--f-mono);
	font-size: var(--t-mono);
	letter-spacing: 0.04em;
	color: var(--fg-dim);
}

.uc-home .flow__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s4);
	margin-top: var(--s2);
}

@media (max-width: 780px) {
.uc-home .flow {
		grid-template-columns: 1fr;
	}

.uc-home .flow:nth-child(even) .flow__art {
		order: 0;
	}
}

/* ── 10 Gallery ─────────────────────────────────────────────────────── */
.uc-home .gallery {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--s4);
}

.uc-home .shot {
	display: flex;
	flex-direction: column;
	gap: var(--s3);
}

.uc-home .shot__art {
	position: relative;
	border: var(--hair) solid var(--line);
	border-radius: var(--r-frame);
	overflow: hidden;
	background: #0e1216;
	flex: 1;
}

.uc-home .shot__name {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--s3);
	font-size: var(--t-small);
	font-weight: 600;
	letter-spacing: -0.01em;
}

.uc-home .shot__name span {
	font-family: var(--f-mono);
	font-size: 0.625rem;
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fg-dim);
	white-space: nowrap;
}

.uc-home .shot--a {
	grid-column: span 3;
}

.uc-home .shot--a .shot__art {
	aspect-ratio: 16 / 10;
}

.uc-home .shot--b {
	grid-column: span 3;
}

.uc-home .shot--b .shot__art {
	aspect-ratio: 16 / 10;
}

.uc-home .shot--c,
.uc-home .shot--d,
.uc-home .shot--e,
.uc-home .shot--f {
	grid-column: span 2;
}

.uc-home .shot--c .shot__art,
.uc-home .shot--d .shot__art,
.uc-home .shot--e .shot__art,
.uc-home .shot--f .shot__art {
	aspect-ratio: 16 / 10;
}

@media (max-width: 860px) {
.uc-home .gallery {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

.uc-home .shot--a,
.uc-home .shot--b {
		grid-column: span 4;
	}

.uc-home .shot--c,
.uc-home .shot--d,
.uc-home .shot--e,
.uc-home .shot--f {
		grid-column: span 2;
	}
}

@media (max-width: 520px) {
.uc-home .gallery {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

.uc-home .shot--a,
.uc-home .shot--b {
		grid-column: span 2;
	}

.uc-home .shot--c,
.uc-home .shot--d,
.uc-home .shot--e,
.uc-home .shot--f {
		grid-column: span 1;
	}
}

/* ── 11 Trust ───────────────────────────────────────────────────────── */
.uc-home .trust {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	margin-top: clamp(2rem, 4vw, 3rem);
	border-top: var(--hair) solid var(--line);
}

.uc-home .trust__item {
	display: flex;
	flex-direction: column;
	gap: var(--s3);
	padding: var(--s6) var(--s5) 0 0;
	border-inline-end: var(--hair) solid var(--line);
}

.uc-home .trust__item:last-child {
	border-inline-end: 0;
}

.uc-home .trust__item:not(:first-child) {
	padding-inline-start: var(--s5);
}

.uc-home .trust__item h3 {
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.uc-home .trust__item p {
	color: var(--fg-dim);
	font-size: var(--t-small);
	max-width: 34ch;
}

@media (max-width: 820px) {
.uc-home .trust {
		grid-template-columns: 1fr;
	}

.uc-home .trust__item {
		padding: var(--s5) 0;
		border-inline-end: 0;
		border-bottom: var(--hair) solid var(--line);
	}

.uc-home .trust__item:not(:first-child) {
		padding-inline-start: 0;
	}

.uc-home .trust__item:last-child {
		border-bottom: 0;
	}
}

/* ── 12 Tools + learn ───────────────────────────────────────────────── */
.uc-home .finder {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: start;
}

@media (max-width: 1000px) {
.uc-home .finder {
		grid-template-columns: 1fr;
	}
}

.uc-home .search {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.6rem 0.85rem;
	background: var(--card);
	border: var(--hair) solid var(--line);
	border-radius: var(--r-frame);
	transition: border-color 200ms var(--ease);
}

.uc-home .search:focus-within {
	border-color: var(--fg);
}

.uc-home .search svg {
	width: 16px;
	height: 16px;
	flex: none;
	color: var(--fg-dim);
}

.uc-home .search input {
	flex: 1;
	min-width: 0;
	border: 0;
	background: none;
	outline: none;
	font-size: var(--t-small);
}

.uc-home .search input::placeholder {
	color: var(--fg-dim);
}

.uc-home .cats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s2);
	margin-top: var(--s4);
}

.uc-home .cat[aria-pressed="true"] {
	background: var(--fg);
	color: var(--bg);
	border-color: var(--fg);
}

.uc-home .toollist {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--s3);
	margin-top: var(--s5);
}

@media (max-width: 560px) {
.uc-home .toollist {
		grid-template-columns: 1fr;
	}
}

.uc-home .tool {
	display: grid;
	grid-template-columns: 30px minmax(0, 1fr);
	gap: 0.75rem;
	padding: 0.85rem;
	border: var(--hair) solid var(--line);
	border-radius: var(--r-frame);
	background: var(--card);
	transition: border-color 200ms var(--ease), transform 200ms var(--ease);
}

.uc-home .tool:hover {
	border-color: color-mix(in srgb, var(--fg) 34%, transparent);
	transform: translateY(-1px);
}

.uc-home .tool[hidden] {
	display: none;
}

.uc-home .tool__icon {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: var(--radius-md);
	border: var(--hair) solid var(--line);
	color: var(--d-teal);
}

.uc-home .tool__icon svg {
	width: 15px;
	height: 15px;
}

.uc-home .tool__name {
	display: block;
	font-size: var(--t-small);
	font-weight: 600;
	letter-spacing: -0.01em;
}

.uc-home .tool__what {
	display: block;
	font-size: var(--t-micro);
	color: var(--fg-dim);
}

.uc-home .toolnone {
	grid-column: 1 / -1;
	padding: var(--s5);
	border: var(--hair) dashed var(--line);
	border-radius: var(--r-frame);
	font-size: var(--t-small);
	color: var(--fg-dim);
	text-align: center;
}

.uc-home .learn {
	display: grid;
	gap: var(--s3);
}

.uc-home .learn__card {
	display: grid;
	gap: 0.3rem;
	padding: var(--s4);
	border: var(--hair) solid var(--line);
	border-radius: var(--r-frame);
	background: var(--card);
	transition: border-color 200ms var(--ease);
}

.uc-home .learn__card:hover {
	border-color: color-mix(in srgb, var(--fg) 34%, transparent);
}

.uc-home .learn__card b {
	font-size: var(--t-small);
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s3);
}

.uc-home .learn__card b::after {
	content: "→";
	font-family: var(--f-mono);
	color: var(--fg-dim);
}

.uc-home .learn__card span {
	font-size: var(--t-micro);
	color: var(--fg-dim);
}

/* ── 13 Final CTA ───────────────────────────────────────────────────── */
.uc-home .final {
	text-align: center;
	padding-block: clamp(5rem, 11vw, 9rem);
}

.uc-home .final__in {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--s5);
}

.uc-home .final .display {
	max-width: 20ch;
}

.uc-home .final .actions {
	justify-content: center;
	margin-top: var(--s2);
}

/* ── Chart layer ────────────────────────────────────────────────────── */
/* Charts are SVG generated at runtime, so they read the band's own tokens
   instead of carrying baked-in colours. Text always wears an ink token; the
   hue belongs to the mark beside it. */
.uc-home .ch {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.uc-home .ch--fill {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

/* The figure panel is printed white in both themes, so its plot uses the
   print hues rather than the band's. */
.uc-home .ch--light {
	--fg: var(--canvas-fg);
	--fg-dim: #5a646c;
	--line: var(--canvas-line);
	--line-soft: rgba(20, 24, 28, 0.08);
	--d-teal: var(--print-teal);
	--d-indigo: var(--print-indigo);
	--d-amber: var(--print-amber);
	--d-magenta: var(--print-magenta);
}

.uc-home .ch-grid line {
	stroke: var(--line-soft);
	stroke-width: 1;
}

.uc-home .ch-axis {
	stroke: var(--line);
	stroke-width: 1;
}

.uc-home .ch-label {
	fill: var(--fg-dim);
	font-family: var(--f-mono);
	font-size: 9px;
	letter-spacing: 0.06em;
}

.uc-home .ch-value {
	fill: var(--fg);
	font-family: var(--f-mono);
	font-size: 10px;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}

.uc-home .ch-tag {
	font-family: var(--f-mono);
	font-size: 9px;
	letter-spacing: 0.04em;
}

.uc-home .ch-tag--amber {
	fill: var(--d-amber);
}

.uc-home .ch-tag--indigo {
	fill: var(--d-indigo);
}

.uc-home .ch-curve {
	fill: none;
	stroke: var(--d-teal);
	stroke-width: 2;
	stroke-linejoin: round;
}

.uc-home .ch-base {
	fill: none;
	stroke: var(--d-indigo);
	stroke-width: 1.5;
	stroke-dasharray: 4 4;
}

.uc-home .ch-fit {
	fill: none;
	stroke: var(--d-amber);
	stroke-width: 1.6;
}

.uc-home .ch-fwhm {
	fill: none;
	stroke: var(--d-amber);
	stroke-width: 1.4;
}

.uc-home .ch-peakmark {
	fill: var(--d-magenta);
}

.uc-home .ch-bar {
	fill: color-mix(in srgb, var(--d-teal) 52%, transparent);
}

.uc-home .ch-bar.is-sel {
	fill: var(--d-indigo);
}

.uc-home .ch-bin {
	fill: color-mix(in srgb, var(--d-teal) 36%, transparent);
}

.uc-home .ch-marker {
	stroke: var(--d-amber);
	stroke-width: 1.4;
	stroke-dasharray: 3 3;
}

/* Detection steps arrive in order: baseline, peaks, fit, width. */
.uc-home .ch-step {
	opacity: 0;
	transition: opacity 420ms var(--ease);
}

.uc-home .ch-step.is-on {
	opacity: 1;
}

/* ── Mock slots ─────────────────────────────────────────────────────── */
.uc-home [data-mock] {
	display: block;
}

/* Only mocks that stand in for a framed image fill their frame. A mock used
   as a panel widget (the histogram) has to flow like any other content. */
.uc-home .stage__layer > svg:not(.micro),
.uc-home .tile__art > svg:not(.micro),
.uc-home .shot__art > svg:not(.micro),
.uc-home .flow__art > svg:not(.micro),
.uc-home .step__art > svg:not(.micro),
.uc-home .specimen__art > svg:not(.micro),
.uc-home .panel > [data-mock] > svg:not(.micro) {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}

.uc-home .ui-card > [data-mock] {
	display: block;
	min-width: 0;
}

.uc-home .ui-card > [data-mock] > svg {
	display: block;
	width: 100%;
	height: auto;
}

.uc-home .panel > [data-mock] {
	position: absolute;
	inset: 0;
}

.uc-home .step__art {
	position: relative;
	color: var(--fg-dim);
}

/* ── Panel / strip state groups ─────────────────────────────────────── */
.uc-home .setgroup {
	display: none;
}

.uc-home .app__panel .setgroup[data-on="true"] {
	display: grid;
	gap: 0.85rem;
}

.uc-home .app__strip .setgroup[data-on="true"] {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s4) var(--s6);
	width: 100%;
}

/* ── Table extras ───────────────────────────────────────────────────── */
.uc-home .tablewrap {
	overflow-x: auto;
}

.uc-home .dtable td.is-active,
.uc-home .dtable th.is-active {
	color: var(--fg);
	background: color-mix(in srgb, var(--fg) 7%, transparent);
}

/* HTML-based canvases: the comparison view and the grid builder are text and
   tables in the real app, so they are text and tables here — crisp at any
   size, and readable by a screen reader. */
.uc-home .ui-canvas {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 0.6rem 0.7rem;
	background: var(--ui-bg);
	color: var(--ui-fg);
	overflow: hidden;
}

.uc-home .ui-canvas__head {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.uc-home .ui-canvas__head b {
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.uc-home .ui-canvas__head span {
	font-family: var(--f-mono);
	font-size: 0.5rem;
	color: var(--ui-fg-dim);
}

.uc-home .ui-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.625rem;
	font-variant-numeric: tabular-nums;
}

.uc-home .ui-table th,
.uc-home .ui-table td {
	padding: 0.22rem 0.3rem;
	text-align: end;
	border-bottom: var(--hair) solid var(--ui-line-soft);
	white-space: nowrap;
}

.uc-home .ui-table th:first-child,
.uc-home .ui-table td:first-child {
	text-align: start;
}

.uc-home .ui-table thead th {
	font-family: var(--f-mono);
	font-size: 0.5rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ui-fg-dim);
	border-bottom-color: var(--ui-line);
}

.uc-home .ui-table td {
	font-family: var(--f-mono);
	color: var(--ui-fg-dim);
}

.uc-home .ui-table td:first-child {
	font-family: var(--f-sans);
	color: var(--ui-fg);
}

.uc-home .ui-table tr.is-sel td {
	background: var(--ui-accent-soft);
	color: var(--ui-fg);
}

.uc-home .ui-down {
	color: #15803d;
}

.uc-home .ui-up {
	color: #b45309;
}

.uc-home .ui-charts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.5rem;
	margin-top: auto;
}

.uc-home .ui-charts figure {
	display: grid;
	gap: 0.2rem;
	padding: 0.35rem;
	border: var(--hair) solid var(--ui-line);
	border-radius: var(--r-frame);
	min-width: 0;
}

.uc-home .ui-charts figcaption {
	font-size: 0.5625rem;
	color: var(--ui-fg-dim);
	text-align: center;
}

.uc-home .ui-charts svg {
	width: 100%;
	height: auto;
}

/* The grid builder: five cells, a over b, then c d e. */
.uc-home .ui-canvas--grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	grid-template-rows: repeat(2, minmax(0, 1fr));
	gap: 0.35rem;
	padding: 0.6rem;
	background: var(--ui-bg-3);
}

.uc-home .ui-cell {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-sm);
	background: #10161a;
	box-shadow: 0 0 0 1px var(--ui-line);
}

.uc-home .ui-cell:nth-child(1) {
	grid-column: span 3;
}

.uc-home .ui-cell:nth-child(2) {
	grid-column: span 3;
}

.uc-home .ui-cell:nth-child(n + 3) {
	grid-column: span 2;
}

.uc-home .ui-cell.is-sel {
	box-shadow: 0 0 0 2px var(--ui-accent);
}

.uc-home .ui-cell::before {
	content: attr(data-l);
	position: absolute;
	z-index: 2;
	inset-block-start: 3px;
	inset-inline-start: 3px;
	width: 13px;
	height: 13px;
	display: grid;
	place-items: center;
	border-radius: 3px;
	background: rgba(8, 12, 15, 0.72);
	color: #fff;
	font-family: var(--f-mono);
	font-size: 0.5rem;
	font-weight: 600;
}

.uc-home .ui-cell__cap {
	position: absolute;
	z-index: 2;
	inset-inline-start: 6px;
	inset-block-end: 16px;
	font-family: var(--f-serif);
	font-size: 0.625rem;
	color: #fff;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
	pointer-events: none;
}

.uc-home .ui-cell__bar {
	position: absolute;
	z-index: 2;
	inset-inline-end: 5px;
	inset-block-end: 4px;
	padding: 1px 3px;
	background: rgba(255, 255, 255, 0.92);
	color: #14202a;
	font-family: var(--f-serif);
	font-size: 0.5rem;
	border-radius: 1px;
}

.uc-home .ui-cell__bar::after {
	content: "";
	display: block;
	height: 1px;
	background: #14202a;
}

@media (max-width: 640px) {
.uc-home .ui-charts {
		grid-template-columns: 1fr;
	}

.uc-home .ui-charts figure:nth-child(2) {
		display: none;
	}

.uc-home .ui-table tbody tr:nth-child(n + 4) {
		display: none;
	}
}