/**
 * LMS Platform: homepage banner (.hx), rebuilt 2026-07-28.
 *
 * Loaded after theme.css, so the few base rules this overrides win by load
 * order rather than by specificity tricks. Everything is namespaced `hx` so it
 * cannot leak into the rest of the site, and so the older `.hero` / `.mock*`
 * rules still in theme.css are simply unused rather than fought with.
 *
 * THE BRIEF: the previous banner read as machine made. It was centred, its
 * headline was filled with a gradient, it sat on a blurred aurora blob, and
 * every accent on it was the same indigo to violet ramp. Each of those is
 * defensible alone; together they are the most reproduced hero on the web.
 *
 * WHAT CHANGED, and why, so this does not drift back:
 *
 *   1. ASYMMETRIC. Type left, product right, both hung off a visible rule.
 *      Centred everything is what a layout looks like when nobody decided what
 *      mattered most.
 *   2. INK, NOT GRADIENT. The headline is solid `--text` at a large size with
 *      tight tracking. The accent phrase is MARKED with a band behind the
 *      baseline rather than filled, so the type keeps full contrast and the
 *      colour becomes a deliberate gesture instead of a texture.
 *   3. THE PALETTE COMES FROM THE PRODUCT. `--hx-accent` is the lead app's own
 *      catalog colour, and each index entry carries its own `--i`. That is what
 *      answers "very same colours": the banner is coloured by the catalog, so
 *      it changes as the product does and no two accents match by default.
 *   4. RULES, NOT GLOW. Hairlines and a fine grid give the section something to
 *      sit on. A blurred cloud cannot do that, which is why it always ends up
 *      reading as filler.
 *
 * Colour still only ever comes from the design tokens plus catalog hexes that
 * were VALIDATED in the template, so the Customizer's --brand override and the
 * dark theme both keep working.
 */

/* ══ Shell ══ */
.hx {
	/* Falls back to the brand only when the catalog has no colour for the lead
	   app, so the section is never uncoloured. */
	--hx-accent: var(--brand);
	--hx-ink: var(--text);

	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: clamp(30px, 4.4vw, 62px) 0 clamp(26px, 3.4vw, 46px);
}

.hx__container { position: relative; z-index: 1; }

/* ══ Paper ══ */
.hx__paper {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

/* A fine ruled grid, masked out towards the edges so it never draws a hard box
   around the section. */
.hx__rules {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to right, color-mix(in srgb, var(--text) 6%, transparent) 1px, transparent 1px),
		linear-gradient(to bottom, color-mix(in srgb, var(--text) 6%, transparent) 1px, transparent 1px);
	background-size: 64px 64px;
	mask-image: radial-gradient(115% 85% at 50% 0%, #000 35%, transparent 78%);
	-webkit-mask-image: radial-gradient(115% 85% at 50% 0%, #000 35%, transparent 78%);
}

/* One quiet wash in the lead app's colour, behind the product. Low enough that
   the headline is always the loudest thing on screen. */
.hx__wash {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(680px circle at 88% 4%, color-mix(in srgb, var(--hx-accent) 15%, transparent), transparent 62%),
		radial-gradient(520px circle at 4% 96%, color-mix(in srgb, var(--hx-accent) 8%, transparent), transparent 60%);
}

/* ══ Layout ══
   The type column is very slightly wider: the words do the selling, the
   screenshot corroborates them. */
.hx__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
	gap: clamp(26px, 3.6vw, 54px);
	align-items: center;
}

/* ══ Flag ══
   A ruled label, not a rounded pill. The pill is the shape every template uses
   here, and it reads as a badge rather than as news. */
.hx__flag {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 18px;
	padding-bottom: 9px;
	border-bottom: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
	font-size: 0.82rem;
	color: var(--text-2);
	transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
a.hx__flag:hover {
	color: var(--text);
	border-bottom-color: var(--hx-accent);
}

.hx__flag strong {
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--hx-accent);
}

/* ══ Headline ══
   Solid ink, large, tight. `text-wrap: balance` stops the last line orphaning a
   single word, which is most of what makes big type look unconsidered. */
.hx__title {
	margin: 0 0 18px;
	font-size: clamp(2.15rem, 1.1rem + 3.5vw, 3.6rem);
	line-height: 1.04;
	letter-spacing: -0.038em;
	font-weight: 800;
	color: var(--hx-ink);
	text-wrap: balance;
}

/* The accent phrase is MARKED, not filled: a band sits behind the words at the
   baseline, the way a highlighter would, so the text keeps full contrast. */
.hx__mark {
	display: inline;
	color: inherit;
	background-image: linear-gradient(
		to top,
		color-mix(in srgb, var(--hx-accent) 30%, transparent) 0,
		color-mix(in srgb, var(--hx-accent) 30%, transparent) 0.26em,
		transparent 0.26em
	);
	background-repeat: no-repeat;
	padding-inline: 0.04em;
}

.hx__sub {
	margin: 0 0 26px;
	max-width: 46ch;
	font-size: clamp(0.98rem, 0.93rem + 0.3vw, 1.1rem);
	line-height: 1.62;
	color: var(--text-2);
}

/* ══ Actions ══
   The primary action is INK, not the brand gradient. The gradient already
   carries the accent everywhere else on the page, and a near-black button on a
   pale ground is the highest contrast target available, which is what a primary
   action should be. */
.hx__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 22px;
	margin-bottom: 14px;
}

.hx__go {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 26px;
	border-radius: var(--r-full);
	background: var(--hx-ink);
	color: var(--bg);
	font-size: 0.96rem;
	font-weight: 650;
	letter-spacing: -0.01em;
	box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--text) 70%, transparent);
	transition: transform 0.18s var(--ease), box-shadow 0.2s var(--ease), background-color 0.2s var(--ease);
}
.hx__go:hover {
	color: var(--bg);
	transform: translateY(-1px);
	box-shadow: 0 16px 30px -12px color-mix(in srgb, var(--text) 78%, transparent);
}
.hx__go svg { transition: transform 0.18s var(--ease); }
.hx__go:hover svg { transform: translateX(3px); }

/* The secondary action is a ruled text link, not a second button. Two buttons
   side by side make the visitor choose; a link makes the choice obvious. */
.hx__alt {
	display: inline-flex;
	align-items: center;
	font-size: 0.94rem;
	font-weight: 620;
	color: var(--text);
	padding-bottom: 3px;
	border-bottom: 1.5px solid color-mix(in srgb, var(--text) 22%, transparent);
	transition: border-color 0.18s var(--ease), color 0.18s var(--ease);
}
.hx__alt:hover { color: var(--hx-accent); border-bottom-color: var(--hx-accent); }

.hx__note { margin: 0; font-size: 0.84rem; color: var(--text-3); }

/* ══ Figures ══
   Editor-authored proof, set on a rule as a masthead rather than floated over
   the product as glass chips. Renders only if someone wrote one. */
.hx__figures {
	display: flex;
	flex-wrap: wrap;
	margin: 26px 0 0;
	padding-top: 20px;
	border-top: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
}

.hx__figure {
	padding-right: 26px;
	margin-right: 26px;
	border-right: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
}
.hx__figure:last-child { border-right: 0; margin-right: 0; padding-right: 0; }

.hx__figure dt {
	font-size: 1.4rem;
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.1;
	color: var(--hx-ink);
}
.hx__figure dd {
	margin: 2px 0 0;
	font-size: 0.76rem;
	color: var(--text-3);
	max-width: 15ch;
}

/* ══ Product frame ══ */
.hx__stage { position: relative; }

.hx__frame {
	position: relative;
	border-radius: var(--r-lg);
	border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
	background: var(--surface);
	overflow: hidden;
	box-shadow:
		0 40px 70px -40px color-mix(in srgb, var(--text) 55%, transparent),
		0 2px 0 0 color-mix(in srgb, var(--text) 4%, transparent);
}
.hx__frame img { display: block; width: 100%; height: auto; }

.hx__chrome {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 10px 13px;
	border-bottom: 1px solid var(--border-soft);
	background: var(--bg-soft);
}
.hx__light { width: 9px; height: 9px; border-radius: 50%; background: color-mix(in srgb, var(--text) 16%, transparent); }
.hx__addr {
	margin-left: 10px;
	font-family: var(--font-mono);
	font-size: 0.68rem;
	color: var(--text-3);
}

.hx__app { display: grid; grid-template-columns: minmax(0, 128px) minmax(0, 1fr); }

/* ── Rail ── */
.hx__rail {
	padding: 12px 9px;
	border-right: 1px solid var(--border-soft);
	background: color-mix(in srgb, var(--bg-soft) 70%, var(--surface));
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.hx__rail-item {
	--i: var(--text-3);
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 8px;
	border-radius: 8px;
	font-size: 0.7rem;
	font-weight: 560;
	color: var(--text-3);
	min-width: 0;
}

.hx__rail-icon {
	flex: none;
	display: grid;
	place-items: center;
	width: 21px;
	height: 21px;
	border-radius: 6px;
	color: var(--i);
	background: color-mix(in srgb, var(--i) 13%, transparent);
}
.hx__rail-icon svg { width: 13px; height: 13px; }

.hx__rail-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The selected app carries ITS OWN colour, which is what makes the rail read as
   a real switcher rather than a styled list. */
.hx__rail-item.is-on {
	color: var(--text);
	font-weight: 660;
	background: color-mix(in srgb, var(--i) 11%, transparent);
	box-shadow: inset 2px 0 0 var(--i);
}
.hx__rail-item.is-on .hx__rail-icon { color: #fff; background: var(--i); }

/* ── Work area ── */
.hx__work { padding: 14px 16px 16px; min-width: 0; }

.hx__work-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding-bottom: 10px;
	margin-bottom: 10px;
	border-bottom: 1px solid var(--border-soft);
}
.hx__work-title {
	font-size: 0.84rem;
	font-weight: 680;
	color: var(--text);
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.hx__work-count {
	flex: none;
	font-size: 0.66rem;
	font-weight: 620;
	color: var(--hx-accent);
	background: color-mix(in srgb, var(--hx-accent) 11%, transparent);
	border-radius: var(--r-full);
	padding: 2px 8px;
}

/* Modules as a numbered register. The numbers are TRUE, they are the module's
   real position in the app, unlike the grey progress bars that used to sit here
   and appeared to measure something. */
.hx__mods { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.hx__mods li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 2px;
	border-bottom: 1px solid color-mix(in srgb, var(--text) 6%, transparent);
	font-size: 0.76rem;
	color: var(--text-2);
	min-width: 0;
}
.hx__mods li:last-child { border-bottom: 0; }

.hx__mods-n {
	flex: none;
	font-family: var(--font-mono);
	font-size: 0.64rem;
	color: var(--text-3);
	letter-spacing: -0.02em;
}
.hx__mods-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.hx__mods li.is-on { color: var(--text); font-weight: 620; }
.hx__mods li.is-on .hx__mods-n { color: var(--hx-accent); }

.hx__mods-rest { margin: 10px 0 0; font-size: 0.7rem; color: var(--text-3); }

/* ══ Index strip ══
   Numbered, ruled, each number in its own app's colour. This is where the
   page's palette actually comes from, and it STATES what you get rather than
   moving past you the way a marquee does. */
.hx__index {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 26px;
	margin-top: clamp(26px, 3vw, 42px);
	padding-top: 18px;
	border-top: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
}

.hx__index-label {
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-3);
}

.hx__index-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 26px;
}

.hx__index-list li {
	--i: var(--hx-accent);
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	font-size: 0.88rem;
	font-weight: 620;
	color: var(--text);
}

.hx__index-n {
	font-family: var(--font-mono);
	font-size: 0.68rem;
	font-weight: 700;
	color: var(--i);
	letter-spacing: -0.02em;
}

/* ══ Dark ══
   Explicit [data-theme] first so the header toggle wins over the OS, then the
   OS preference for anyone who has not chosen. */
:root[data-theme='dark'] .hx__figures,
:root[data-theme='dark'] .hx__index { border-top-color: color-mix(in srgb, #fff 12%, transparent); }
:root[data-theme='dark'] .hx__wash { opacity: 0.62; }
:root[data-theme='dark'] .hx__go { background: #ffffff; color: #0b1120; box-shadow: 0 14px 30px -16px rgba(0, 0, 0, 0.9); }
:root[data-theme='dark'] .hx__go:hover { color: #0b1120; }
:root[data-theme='dark'] .hx__frame { box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.85); }
:root[data-theme='dark'] .hx__mark {
	background-image: linear-gradient(
		to top,
		color-mix(in srgb, var(--hx-accent) 44%, transparent) 0,
		color-mix(in srgb, var(--hx-accent) 44%, transparent) 0.26em,
		transparent 0.26em
	);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme='light']) .hx__figures,
	:root:not([data-theme='light']) .hx__index { border-top-color: color-mix(in srgb, #fff 12%, transparent); }
	:root:not([data-theme='light']) .hx__wash { opacity: 0.62; }
	:root:not([data-theme='light']) .hx__go { background: #ffffff; color: #0b1120; box-shadow: 0 14px 30px -16px rgba(0, 0, 0, 0.9); }
	:root:not([data-theme='light']) .hx__go:hover { color: #0b1120; }
	:root:not([data-theme='light']) .hx__frame { box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.85); }
	:root:not([data-theme='light']) .hx__mark {
		background-image: linear-gradient(
			to top,
			color-mix(in srgb, var(--hx-accent) 44%, transparent) 0,
			color-mix(in srgb, var(--hx-accent) 44%, transparent) 0.26em,
			transparent 0.26em
		);
	}
}

/* ══ Responsive ══
   Below 940px the two columns stop working: the frame's rail and work area get
   too narrow to read. Type goes full width and the product follows it. */
@media (max-width: 940px) {
	.hx__grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
	.hx__sub { max-width: none; }
	.hx__stage { order: 2; }
}

@media (max-width: 560px) {
	.hx__app { grid-template-columns: minmax(0, 1fr); }
	.hx__rail {
		flex-direction: row;
		overflow-x: auto;
		scrollbar-width: none;
		border-right: 0;
		border-bottom: 1px solid var(--border-soft);
	}
	.hx__rail::-webkit-scrollbar { display: none; }
	.hx__rail-item { flex: none; }
	.hx__rail-item.is-on { box-shadow: inset 0 -2px 0 var(--i); }

	.hx__figure { padding-right: 18px; margin-right: 18px; }
	.hx__figure dt { font-size: 1.2rem; }
	.hx__go { width: 100%; justify-content: center; }
}