/* ------------------------------------------------------------
   3. ORD-PAGE SCOPED RESET — nothing leaks out / in
   ------------------------------------------------------------ */
.ord-page {
	--bg: #241046;
	--muted: #5b4a78;
	--paper: #ffffff;
	--mist: #f8f5ff;
	--violet: #6d28d9;
	--violet-deep: #4c1d95;
	--mint: #ffd21e;
	--mint-deep: #6d28d9;
	--amber: #ffd21e;
	--coral: #ff5d5d;
	--sky: #8b5cf6;
	--lime: #ffe066;
	--ink: #241046;

	box-sizing: border-box;
	position: relative;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--ord-font-body);
	font-size: 1rem;
	line-height: 1.65;
	overflow: clip;
	-webkit-font-smoothing: antialiased;
}

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

.ord-page img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* `:where()` = ZERO specificity, so these are gentle defaults that every
   component class (`.ord-hero-title`, `.ord-btn--mint`, etc.) can override.
   Using `.ord-page h1`/`.ord-page a` here would make the reset (0,1,1) beat
   every component (0,1,0) and force ink onto dark sections — invisible text. */
:where(.ord-page) a {
	color: inherit;
	text-decoration: none;
}

:where(.ord-page) ul {
	list-style: none;
}

:where(.ord-page) button {
	font-family: inherit;
	cursor: pointer;
}

:where(.ord-page) h1,
:where(.ord-page) h2,
:where(.ord-page) h3,
:where(.ord-page) h4,
:where(.ord-page) h5,
:where(.ord-page) h6 {
	font-family: var(--ord-font-heading);
	color: var(--ink);
	line-height: 1.12;
	letter-spacing: -0.02em;
}

:where(.ord-page) strong {
	font-weight: 700;
}