/* THE LOCKUP — ONE COPY, EVERY SURFACE, INCLUDING THE STATIC /plans PAGE.
   In public/ because a static file cannot import from src/; NextBrand links it, so
   every React surface picks it up by rendering the component. Mark 2026-09-19. */
/* The brand lockup, matched to the one on `/` (MfsLandingPage.tsx): the
   tree-of-life mark, then my·family·story·.com with "family" in brand amber.
   The mark is sized in `em` so it keeps `/`'s 2:1 ratio to the wordmark on both
   scales — the landing runs a 16px root and the flow screens a 19px one.

   ⚠️ THE BRAND AMBER IS NOT ONE COLOUR HERE, and that is measured rather than
   taste. `/` uses #C47C2C throughout, which is 5.83:1 on the near-black hero
   but only 2.79:1 on this flow's paper and 3.94:1 on the footer's ink — under
   the 4.5:1 the on-ramp holds for an older reader. So each ground gets the
   nearest passing step of the SAME hue: #D18633 on dark (4.51 on the footer,
   6.67 on the hero) and the kit's own text brass #7A5C22 on paper (5.17). The
   kit already draws this distinction — --brass is decorative, --brass-text is
   for text. */

.nx-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.42em;
	text-decoration: none;
	color: inherit;
	font-family: var(--display);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1;
}
.nx-brand img {
	width: 2em;
	height: 2em;
	object-fit: contain;
	flex: none;
}
.nx-brand .nx-word i {
	font-style: normal;
	color: var(--nx-brand-amber, #d18633);
}

/* The landing bar rides over the dark hero and then over pale sections, so the
   mark has to change with it — same swap the bar already makes for its ink. */
.nx-brand .nx-mark-paper {
	display: none;
}
.nx-landing .top[data-onpaper] .nx-brand .nx-mark-dark {
	display: none;
}
.nx-landing .top[data-onpaper] .nx-brand .nx-mark-paper {
	display: block;
}

.nx-landing .top .nx-brand {
	--nx-brand-amber: #d18633;
}
.nx-landing .top[data-onpaper] .nx-brand {
	--nx-brand-amber: #7a5c22;
}
.nx-landing .foot .nx-brand {
	--nx-brand-amber: #d18633;
}
.nx-flow .nx-brand {
	--nx-brand-amber: #7a5c22;
}

/* The footer says the company, so the lockup sits above it rather than beside. */
.foot .nx-brand {
	font-size: 1.25rem;
	margin-bottom: 0.6em;
}