/*
 * boatcoop-site/static/styles.css
 * "turquoise-glass" — mobile-first glassmorphism over a fixed deep-water
 * gradient. Semantic classes only (prefix bc-). Every colour, space, size
 * and typography value routes through tokens-boatcoop.css; structural
 * constants (1px hairlines, breakpoints, blur radii already tokenised)
 * are the only literals.
 *
 * Research-informed choices (see mission report for sources):
 *  - backdrop-filter blur kept at --glass-blur (12px, inside the 8-14px
 *    band) — higher values are exponentially costlier and visibly drop
 *    frames on mobile GPUs.
 *  - -webkit-backdrop-filter is always paired with backdrop-filter; the
 *    -webkit- variant is written with the same literal token value
 *    (Safari's prefixed implementation does not resolve custom
 *    properties reliably pre-Safari 18).
 *  - a @supports fallback drops to an opaque-ish surface colour (no blur)
 *    for engines without backdrop-filter, so text never sits directly on
 *    a low-contrast see-through panel.
 *  - backdrop-filter is never itself animated (expensive); only opacity/
 *    transform are animated, and only on the fish silhouettes, which are
 *    decorative and excluded from layout (position: absolute, no
 *    overflow:hidden ancestor for the glass panels above them).
 */

/* ---- Reset & base ------------------------------------------------------- */

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

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--space-4xl) + var(--space-lg));
}

body {
	margin: 0;
	min-height: 100vh;
	font-family: var(--font-sans);
	font-size: var(--font-size-md);
	line-height: var(--line-height);
	color: var(--ink);
	background: var(--water-deep);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

a {
	color: var(--accent);
	text-decoration: none;
}

a:hover {
	color: var(--accent-hover);
	text-decoration: underline;
}

:focus-visible {
	outline: 2px solid var(--border-focus);
	outline-offset: 2px;
}

/* ---- Water backdrop ------------------------------------------------------
 * Fixed, full-viewport gradient behind everything, DEEP and SATURATED from
 * the very first pixel (revision 2026-07-02: the previous preset opened on
 * a near-white stop, reading as flat pale blue on the first screen).
 * `position: fixed` means it never scrolls away and never needs to be as
 * tall as the page. */

.bc-water {
	position: fixed;
	inset: 0;
	z-index: var(--z-water);
	background: linear-gradient(
		180deg,
		var(--water-top) 0%,
		var(--water-mid) 38%,
		var(--water-deep) 68%,
		var(--water-abyss) 100%
	);
	overflow: hidden;
}

/* Compact radial surface-light halo — stands in for a "sunlit surface"
 * without ever paling the whole first screen; a spot of light, not a
 * layer. */
.bc-water::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(38% 26% at 22% -4%, rgba(255, 255, 255, 0.30), transparent 62%),
		radial-gradient(30% 20% at 78% 2%, rgba(255, 255, 255, 0.16), transparent 60%);
	pointer-events: none;
}

/* ---- Caustics --------------------------------------------------------
 * Rippling shafts of light descending from the surface — three overlaid
 * conic/linear gradients, very slowly rotated/panned. This is the texture
 * that gives the glass panels' backdrop-filter something to bend: without
 * it, blur on a flat gradient is invisible by construction. */

.bc-caustics {
	position: absolute;
	inset: -10% -20%;
	z-index: var(--z-caustics);
	opacity: 0.5;
	mix-blend-mode: screen;
	background:
		repeating-linear-gradient(
			100deg,
			rgba(180, 255, 248, 0.10) 0px,
			rgba(180, 255, 248, 0.10) 2px,
			transparent 14px,
			transparent 60px
		),
		repeating-linear-gradient(
			70deg,
			rgba(180, 255, 248, 0.08) 0px,
			rgba(180, 255, 248, 0.08) 3px,
			transparent 18px,
			transparent 70px
		);
	animation: bc-caustics-drift 34s ease-in-out infinite alternate;
	pointer-events: none;
	will-change: transform;
}

@keyframes bc-caustics-drift {
	from { transform: translate(0, 0) rotate(0deg); }
	to   { transform: translate(-3%, 2%) rotate(1.5deg); }
}

/* ---- Suspended particles ----------------------------------------------
 * Small dots of light drifting slowly upward, like sediment/plankton catching
 * the caustic light. Positions/timings vary per index so the field never
 * looks mechanically repeated. */

.bc-particles {
	position: absolute;
	inset: 0;
	z-index: var(--z-particles);
	pointer-events: none;
}

.bc-particle {
	position: absolute;
	width: 3px;
	height: 3px;
	border-radius: var(--radius-pill);
	background: rgba(216, 250, 246, 0.55);
	opacity: 0.5;
	filter: blur(0.2px);
	animation: bc-particle-rise 26s linear infinite;
	will-change: transform, opacity;
}

.bc-particle--alt {
	width: 2px;
	height: 2px;
	background: rgba(216, 250, 246, 0.35);
}

.bc-particle--1  { left: 6%;  top: 92%; animation-duration: 24s; animation-delay: 0s; }
.bc-particle--2  { left: 14%; top: 88%; animation-duration: 31s; animation-delay: -4s; }
.bc-particle--3  { left: 22%; top: 96%; animation-duration: 22s; animation-delay: -9s; }
.bc-particle--4  { left: 30%; top: 84%; animation-duration: 29s; animation-delay: -2s; }
.bc-particle--5  { left: 38%; top: 90%; animation-duration: 26s; animation-delay: -12s; }
.bc-particle--6  { left: 46%; top: 94%; animation-duration: 33s; animation-delay: -6s; }
.bc-particle--7  { left: 54%; top: 86%; animation-duration: 21s; animation-delay: -16s; }
.bc-particle--8  { left: 62%; top: 98%; animation-duration: 28s; animation-delay: -1s; }
.bc-particle--9  { left: 70%; top: 82%; animation-duration: 25s; animation-delay: -10s; }
.bc-particle--10 { left: 78%; top: 92%; animation-duration: 32s; animation-delay: -5s; }
.bc-particle--11 { left: 85%; top: 88%; animation-duration: 23s; animation-delay: -14s; }
.bc-particle--12 { left: 92%; top: 96%; animation-duration: 30s; animation-delay: -8s; }
.bc-particle--13 { left: 10%; top: 60%; animation-duration: 27s; animation-delay: -18s; }
.bc-particle--14 { left: 66%; top: 55%; animation-duration: 24s; animation-delay: -20s; }

@keyframes bc-particle-rise {
	from { transform: translateY(0) translateX(0); opacity: 0; }
	10%  { opacity: 0.6; }
	90%  { opacity: 0.4; }
	to   { transform: translateY(-100vh) translateX(6px); opacity: 0; }
}

/* ---- Fish banks --------------------------------------------------------
 * Three depth bands, deliberately different in size/opacity/speed so the
 * scene reads as parallax rather than a flat repeat: far (small, dim,
 * slow), mid (mid size, mid opacity), near (larger, brighter, faster —
 * closer to the glass, some of it directly under a panel's blur
 * footprint). Pure CSS keyframe drift + gentle bob; svg fill is a light
 * tone so it reads against every stop of the gradient. Never JS. */

.bc-fishbank {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.bc-fish {
	position: absolute;
	z-index: var(--z-fish);
	fill: #eafcfa;
	will-change: transform;
	pointer-events: none;
}

/* Far bank: small, dim, slow — reads as depth cue in the background. */
.bc-fishbank--far .bc-fish { filter: blur(0.6px); opacity: 0.14; }
.bc-fish--f1 { top: 10%; width: 28px; animation: bc-drift-right 70s linear infinite; }
.bc-fish--f2 { top: 22%; width: 22px; animation: bc-drift-left 64s linear infinite; animation-delay: -12s; }
.bc-fish--f3 { top: 58%; width: 30px; animation: bc-drift-right 76s linear infinite; animation-delay: -30s; }
.bc-fish--f4 { top: 74%; width: 20px; animation: bc-drift-left 58s linear infinite; animation-delay: -18s; }

/* Mid bank: medium size/opacity/speed. */
.bc-fishbank--mid .bc-fish { filter: blur(0.3px); opacity: 0.22; }
.bc-fish--m1 { top: 34%; width: 52px; animation: bc-drift-right 48s linear infinite; animation-delay: -6s; }
.bc-fish--m2 { top: 50%; width: 44px; animation: bc-drift-left 42s linear infinite; animation-delay: -20s; }
.bc-fish--m3 { top: 86%; width: 56px; animation: bc-drift-right 54s linear infinite; animation-delay: -26s; }

/* Near bank: larger, brighter, faster — closest to the glass, meant to
 * pass directly under a panel's blur footprint at some point of its
 * drift. */
.bc-fishbank--near .bc-fish { opacity: 0.32; }
.bc-fish--n1 { top: 16%; width: 92px; animation: bc-drift-left 36s linear infinite; animation-delay: -8s; }
.bc-fish--n2 { top: 66%; width: 84px; animation: bc-drift-right 40s linear infinite; animation-delay: -22s; }

@keyframes bc-drift-right {
	from { transform: translateX(-15vw) translateY(0); }
	50%  { transform: translateX(55vw) translateY(-10px); }
	to   { transform: translateX(120vw) translateY(0); }
}

@keyframes bc-drift-left {
	from { transform: translateX(120vw) translateY(0) scaleX(-1); }
	50%  { transform: translateX(50vw) translateY(8px) scaleX(-1); }
	to   { transform: translateX(-15vw) translateY(0) scaleX(-1); }
}

@media (prefers-reduced-motion: reduce) {
	.bc-fish,
	.bc-caustics,
	.bc-particle {
		animation: none;
	}
}

/* ---- Glass material -----------------------------------------------------
 * Revision 2026-07-02: dark/translucent glass is now the DEFAULT (the water
 * behind every panel is dark from the first pixel), with a lit specular
 * edge on top (a linear-gradient pseudo-element standing in for a reflected
 * highlight — border-image cannot be combined with border-radius + a plain
 * border reliably across engines, so the highlight is a 1px overlay instead)
 * plus a faint inner glow near the top and a deeper, teal-tinted shadow
 * (never a flat grey shadow, which would read muddy against the abyss).
 * `.bc-glass--light` is kept for the rare bright-surface exception (none
 * shipped currently); `.bc-glass--deep` is kept as an alias so already-
 * tagged panels (hero/join/footer) keep working unchanged. */

.bc-glass {
	position: relative;
	background: var(--glass-bg-deep);
	-webkit-backdrop-filter: saturate(160%) blur(12px);
	backdrop-filter: saturate(var(--glass-saturate)) blur(var(--glass-blur));
	border: 1px solid var(--glass-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md), var(--shadow-glow);
	color: var(--ink);
	isolation: isolate;
}

/* Specular highlight: a thin light-to-transparent streak along the top
 * edge, the detail that makes a panel read as "glass" rather than "tinted
 * box". Sits above the panel's own background, below its content. */
.bc-glass::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(
		165deg,
		var(--glass-specular) 0%,
		rgba(255, 255, 255, 0.06) 22%,
		transparent 45%
	);
	-webkit-mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
	z-index: 1;
}

/* Faint inner glow, top of panel — the light picking up the glass edge. */
.bc-glass::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(180deg, var(--glass-glow) 0%, transparent 40%);
	pointer-events: none;
	z-index: 1;
}

.bc-glass > * {
	position: relative;
	z-index: 2;
}

.bc-glass--light {
	background: var(--glass-bg-light);
	border-color: rgba(11, 46, 51, 0.16);
	color: var(--ink-inverse);
}

.bc-glass--deep {
	/* Alias: same as the (now dark-by-default) .bc-glass. Kept so the
	 * hero/join/footer panels that already carry this class keep working
	 * unchanged. */
	background: var(--glass-bg-deep);
	border-color: var(--glass-border-deep);
	color: var(--ink-on-water);
}

/* Engines without backdrop-filter get a near-opaque panel instead of a
 * washed-out see-through one, so contrast never degrades silently. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.bc-glass {
		background: #06232c;
	}
	.bc-glass--light {
		background: #eef9f8;
	}
}

/* ---- Layout primitives -------------------------------------------------- */

.bc-container {
	position: relative;
	z-index: var(--z-content);
	width: 100%;
	max-width: var(--container-max);
	margin: 0 auto;
	padding-left: var(--space-lg);
	padding-right: var(--space-lg);
}

.bc-skiplink {
	position: absolute;
	left: var(--space-md);
	top: calc(-1 * var(--space-3xl) - var(--space-3xl));
	z-index: var(--z-overlay);
	padding: var(--space-sm) var(--space-md);
	background: var(--accent);
	color: var(--ink-on-accent);
	border-radius: var(--radius-md);
}

.bc-skiplink:focus {
	top: var(--space-md);
	color: var(--ink-on-accent);
	text-decoration: none;
}

/* ---- Header + sticky anchor nav ---------------------------------------- */

.bc-header {
	position: sticky;
	top: 0;
	z-index: var(--z-overlay);
	margin: var(--space-md) var(--space-md) 0;
	border-radius: var(--radius-lg);
}

.bc-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-lg);
	min-height: 56px;
	padding: var(--space-sm) var(--space-lg);
}

.bc-header__brand {
	display: inline-flex;
	align-items: center;
	gap: var(--space-sm);
	color: var(--ink);
	font-weight: 700;
	white-space: nowrap;
}

.bc-header__brand:hover {
	color: var(--ink);
	text-decoration: none;
}

.bc-header__mark {
	width: var(--space-md);
	height: var(--space-md);
	border-radius: var(--radius-pill);
	background: var(--accent);
	flex: 0 0 auto;
}

.bc-header__name {
	font-size: var(--font-size-sm);
	font-weight: 700;
	letter-spacing: 0.01em;
}

.bc-nav {
	min-width: 0;
	flex: 1 1 auto;
}

.bc-nav__list {
	display: flex;
	align-items: center;
	gap: var(--space-lg);
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.bc-nav__list::-webkit-scrollbar {
	display: none;
}

.bc-nav__link {
	display: inline-block;
	padding: var(--space-xs) 0;
	font-size: var(--font-size-xs);
	font-weight: 600;
	color: var(--ink-muted);
	white-space: nowrap;
}

.bc-nav__link:hover {
	color: var(--accent);
	text-decoration: none;
}

/* ---- Main + sections --------------------------------------------------- */

.bc-main {
	position: relative;
	z-index: var(--z-content);
	display: block;
}

.bc-section {
	padding-top: var(--space-3xl);
	padding-bottom: var(--space-3xl);
}

.bc-section__panel {
	padding: var(--space-xl) var(--space-lg);
}

.bc-section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-md);
	margin-bottom: var(--space-sm);
}

.bc-section__eyebrow {
	margin: 0;
	font-size: var(--font-size-xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-faint);
}

.bc-section__title {
	margin: 0 0 var(--space-lg) 0;
	font-size: var(--font-size-xl);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.bc-section__body {
	display: block;
}

/* ---- Verdict badge ------------------------------------------------------ */

.bc-verdict {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	padding: var(--space-xs) var(--space-md);
	border-radius: var(--radius-pill);
	font-size: var(--font-size-xs);
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border: 1px solid transparent;
	white-space: nowrap;
}

.bc-verdict--ecartee {
	background: var(--verdict-ecartee-bg);
	color: var(--verdict-ecartee-ink);
	border-color: rgba(122, 44, 34, 0.3);
}

.bc-verdict--retenue {
	background: var(--verdict-retenue-bg);
	color: var(--verdict-retenue-ink);
	border-color: rgba(13, 90, 72, 0.3);
}

.bc-verdict--a-discuter {
	background: var(--verdict-discuter-bg);
	color: var(--verdict-discuter-ink);
	border-color: rgba(110, 76, 12, 0.3);
}

/* ---- Prose ------------------------------------------------------------- */

.bc-prose {
	max-width: var(--measure);
}

.bc-prose p {
	margin: 0 0 var(--space-md) 0;
}

.bc-prose p:last-child {
	margin-bottom: 0;
}

.bc-prose__lede {
	font-size: var(--font-size-lg);
	font-weight: 600;
}

.bc-subhead {
	max-width: var(--measure);
	margin: var(--space-2xl) 0 var(--space-sm) 0;
	font-size: var(--font-size-md);
	font-weight: 800;
}

.bc-subhead__intro {
	max-width: var(--measure);
	margin: 0 0 var(--space-md) 0;
}

/* ---- Card stack (mobile-first: always a single column by default) ------ */

.bc-cardgrid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-md);
	margin-top: var(--space-md);
}

@media (min-width: 640px) {
	.bc-cardgrid {
		grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	}
}

.bc-card {
	padding: var(--space-lg);
}

.bc-card--numbered {
	position: relative;
}

.bc-card__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--space-2xl);
	height: var(--space-2xl);
	margin-bottom: var(--space-sm);
	border-radius: var(--radius-pill);
	background: rgba(15, 122, 140, 0.14);
	color: var(--accent);
	font-size: var(--font-size-sm);
	font-weight: 800;
}

.bc-card__title {
	margin: 0 0 var(--space-xs) 0;
	font-size: var(--font-size-md);
	font-weight: 700;
	line-height: 1.3;
}

.bc-card__body {
	color: var(--ink-muted);
}

.bc-card__body p {
	margin: 0;
}

/* ---- Caveat callout ----------------------------------------------------- */

.bc-caveat {
	max-width: var(--measure);
	margin-top: var(--space-xl);
	padding: var(--space-md) var(--space-lg);
	border-left: 3px solid var(--info);
}

.bc-caveat__label {
	display: block;
	margin-bottom: var(--space-xs);
	font-size: var(--font-size-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--info);
	font-weight: 800;
}

.bc-caveat__body {
	color: var(--ink-muted);
}

.bc-caveat__body p {
	margin: 0;
}

/* ---- Arbitrage cards (section 7 — never an HTML table) ------------------ */

.bc-arbitrage-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	margin-top: var(--space-md);
}

.bc-arbitrage-card {
	padding: var(--space-lg);
}

.bc-arbitrage-card__question {
	margin: 0 0 var(--space-sm) 0;
	font-size: var(--font-size-sm);
	font-weight: 700;
	color: var(--ink-muted);
}

.bc-arbitrage-card__decision {
	margin: 0 0 var(--space-sm) 0;
}

.bc-arbitrage-card__why {
	margin: 0;
	color: var(--ink-muted);
	font-size: var(--font-size-sm);
}

/* ---- Hero --------------------------------------------------------------- */

.bc-hero {
	padding-top: calc(var(--space-3xl) + var(--space-lg));
	padding-bottom: var(--space-2xl);
}

.bc-hero__panel {
	padding: var(--space-2xl) var(--space-lg);
}

.bc-hero__eyebrow {
	margin: 0 0 var(--space-md) 0;
	font-size: var(--font-size-xs);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-faint);
}

.bc-hero__title {
	max-width: 22ch;
	margin: 0 0 var(--space-lg) 0;
	font-size: var(--font-size-3xl);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.015em;
}

.bc-hero__note {
	max-width: var(--measure);
	margin: 0 0 var(--space-xl) 0;
	color: var(--ink-muted);
	font-size: var(--font-size-sm);
}

.bc-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-md);
}

/* ---- Join / CTA (near the bottom of the page → deep water, light ink) --- */

.bc-join {
	padding-top: var(--space-3xl);
	padding-bottom: var(--space-4xl);
}

.bc-join__panel {
	padding: var(--space-2xl) var(--space-lg);
	text-align: left;
}

.bc-join__title {
	margin: 0 0 var(--space-md) 0;
	font-size: var(--font-size-2xl);
	font-weight: 800;
}

.bc-join__text {
	max-width: var(--measure);
	margin: 0 0 var(--space-xl) 0;
	color: var(--ink-on-water-muted);
}

/* ---- Footer ------------------------------------------------------------- */

.bc-footer {
	padding-top: var(--space-2xl);
	padding-bottom: var(--space-2xl);
}

.bc-footer__panel {
	padding: var(--space-xl) var(--space-lg);
}

.bc-footer__line {
	max-width: var(--measure);
	margin: 0 0 var(--space-lg) 0;
	font-size: var(--font-size-md);
	font-weight: 600;
}

.bc-footer__meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--space-sm);
	font-size: var(--font-size-sm);
	color: var(--ink-on-water-muted);
}

.bc-footer__contact {
	color: var(--ink-on-water);
	font-weight: 700;
}

/* ---- Buttons ------------------------------------------------------------ */

.bc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-md) var(--space-xl);
	border: 1px solid transparent;
	border-radius: var(--radius-pill);
	font-family: var(--font-sans);
	font-size: var(--font-size-sm);
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.bc-btn:hover {
	text-decoration: none;
	transform: translateY(-1px);
}

.bc-btn--primary {
	background: var(--accent);
	color: var(--ink-on-accent);
	border-color: var(--accent);
}

.bc-btn--primary:hover {
	background: var(--accent-hover);
	border-color: var(--accent-hover);
	color: var(--ink-on-accent);
}

.bc-btn--secondary {
	background: var(--glass-bg-deep);
	-webkit-backdrop-filter: saturate(160%) blur(12px);
	backdrop-filter: saturate(var(--glass-saturate)) blur(var(--glass-blur));
	color: var(--ink);
	border-color: var(--glass-border);
}

.bc-btn--secondary:hover {
	color: var(--accent-hover);
	border-color: var(--border-strong);
}

/* This one button sits on the bright --surface-raised exception (per the
 * doctrine, encre sombre exception on the rare light glass) — text uses
 * --accent-on-light, not --accent, which is tuned for dark glass and would
 * fall short of AA on a white background. */
.bc-join .bc-btn--primary {
	background: var(--surface-raised);
	color: var(--accent-on-light);
	border-color: var(--surface-raised);
}

.bc-join .bc-btn--primary:hover {
	background: var(--surface-raised-hover);
	color: var(--accent-hover);
	border-color: var(--surface-raised-hover);
}

/* ---- Divider (vendored templux) ---------------------------------------- */

.bc-divider {
	border: none;
	border-top: 1px solid var(--border);
	margin: var(--space-2xl) 0;
}

/* ---- Responsive: from tablet width up, loosen the container a touch ---- */

@media (min-width: 640px) {
	.bc-container {
		padding-left: var(--space-xl);
		padding-right: var(--space-xl);
	}

	.bc-hero__title {
		font-size: var(--font-size-3xl);
	}

	.bc-join__panel {
		text-align: left;
	}
}

@media (min-width: 960px) {
	.bc-hero {
		padding-top: calc(var(--space-4xl) + var(--space-lg));
	}
}

/* ---- Hub (2026-07-02 restructure: two parcours entry point) ------------ */

.bc-hub {
	padding-top: calc(var(--space-3xl) + var(--space-lg));
	padding-bottom: var(--space-3xl);
	min-height: calc(100vh - 140px);
	display: flex;
	align-items: center;
}

.bc-hub__panel {
	padding: var(--space-2xl) var(--space-lg);
}

.bc-hub__actions {
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
	margin-top: var(--space-xl);
}

/* ---- Parcours buttons (hub) --------------------------------------------- */

.bc-parcours-btn {
	display: flex;
	align-items: center;
	gap: var(--space-lg);
	padding: var(--space-xl) var(--space-lg);
	color: var(--ink);
}

.bc-parcours-btn:hover {
	color: var(--ink);
	text-decoration: none;
	transform: translateY(-1px);
}

.bc-parcours-btn__label {
	flex: 1 1 auto;
	display: block;
	font-size: var(--font-size-lg);
	font-weight: 800;
}

.bc-parcours-btn__lede {
	display: block;
	margin-top: var(--space-xs);
	font-size: var(--font-size-sm);
	font-weight: 400;
	color: var(--ink-muted);
}

.bc-parcours-btn__arrow {
	flex: 0 0 auto;
	font-size: var(--font-size-xl);
	color: var(--ink-faint);
}

.bc-parcours-btn--accent {
	border-color: var(--accent);
	box-shadow: var(--shadow-glow);
}

.bc-parcours-btn--accent .bc-parcours-btn__label {
	color: var(--accent-hover);
}

.bc-parcours-btn--accent .bc-parcours-btn__arrow {
	color: var(--accent);
}

/* ---- Step navigation (repeated at the top of every parcours step) ------ */

.bc-stepnav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	margin-bottom: var(--space-lg);
	padding-bottom: var(--space-md);
	border-bottom: 1px solid var(--border);
	font-size: var(--font-size-xs);
}

.bc-stepnav__back {
	color: var(--ink-muted);
	font-weight: 600;
}

.bc-stepnav__progress {
	color: var(--ink-faint);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.bc-stepnav__next {
	color: var(--accent);
	font-weight: 700;
}