:root {
	/* ── Brand Mode: Parent-Facing (guideline §03) ── */
	--gm-color-bg: #F0F0F2;           /* Clinical White */
	--gm-color-surface: #FFFFFF;       /* High White — cards, panels */
	--gm-color-ink: #08080A;           /* Mission Black — primary text */
	--gm-color-steel: #A8B4C0;         /* Steel Gray — specs, data, captions */
	--gm-color-brand-accent: #EA5E5B;  /* Grosmimi Red — CTAs, brand signal */
	--gm-color-brand-accent-strong: #d95350;
	--gm-color-brand-on-accent: #FFFFFF;
	--gm-color-line: rgba(8, 8, 10, 0.12);
	--gm-color-overlay-strong: rgba(8, 8, 10, 0.92);
	--gm-color-overlay-mid: rgba(8, 8, 10, 0.7);
	--gm-color-overlay-light: rgba(8, 8, 10, 0.15);
	--gm-color-steel-faint: rgba(168, 180, 192, 0.25);
	--gm-color-white: #FFFFFF;
	--gm-color-line-hover: rgba(8, 8, 10, 0.22);
	--gm-color-navy: #0C1626;

	/* ── Overlays & Tints ── */
	--gm-overlay-heavy: rgba(8, 8, 10, 0.92);
	--gm-overlay-medium: rgba(8, 8, 10, 0.70);
	--gm-overlay-light: rgba(8, 8, 10, 0.15);
	--gm-overlay-faint: rgba(8, 8, 10, 0.06);
	--gm-accent-tint-hover: color-mix(in srgb, var(--gm-color-brand-accent) 8%, transparent);

	/* ── Dark Section Tokens (on ink/navy backgrounds) ── */
	--gm-dark-card-bg: rgba(255, 255, 255, 0.06);
	--gm-dark-card-border: rgba(255, 255, 255, 0.10);
	--gm-dark-text: var(--gm-color-white);
	--gm-dark-text-muted: rgba(255, 255, 255, 0.65);
	--gm-dark-text-faint: rgba(255, 255, 255, 0.40);
	--gm-dark-divider: rgba(255, 255, 255, 0.10);

	/* ── Shadows (hover/dropdown/modal only) ── */
	--gm-shadow-subtle: 0 1px 3px rgba(8, 8, 10, 0.06);
	--gm-shadow-medium: 0 4px 12px rgba(8, 8, 10, 0.08);
	--gm-shadow-strong: 0 8px 24px rgba(8, 8, 10, 0.12);

	/* ── Product Mode: Baby-Facing (guideline §03) ── */
	--gm-color-blue: #3B82F6;          /* Saturated Blue — 6mo+ longest gaze */
	--gm-color-yellow: #FFD700;        /* Signal Yellow — 2-4mo, use sparingly */

	/* ── Derived from guideline palette ── */
	--gm-color-muted: var(--gm-color-steel);  /* secondary text = Steel Gray */
	--gm-color-panel: var(--gm-color-bg);     /* panels = Clinical White */
	/* ── Typography (guideline §03) ── */
	--gm-font-title: "Space Grotesk", "Avenir Next", sans-serif;      /* Headlines 10% */
	--gm-font-description: "Manrope", "Avenir Next", sans-serif;      /* Body 90% */
	--gm-font-data: "JetBrains Mono", "Courier New", monospace;       /* Specs, citations, data */
	/* Text type mapping — titles unified to Manrope, Space Grotesk only for hero display */
	--gm-font-type-title: var(--gm-font-description);
	--gm-font-type-subtitle: var(--gm-font-description);
	--gm-font-type-body: var(--gm-font-description);
	--gm-font-type-caption: var(--gm-font-description);
	--gm-font-type-menu: var(--gm-font-description);
	--gm-font-type-button: var(--gm-font-description);
	--gm-font-type-data: var(--gm-font-data);
	/* Backward-compatible aliases */
	--gm-font-display: var(--gm-font-title);
	--gm-font-body: var(--gm-font-type-body);
	/* Legacy aliases (used in components.css, pages.css) */
	--font-display: var(--gm-font-type-title);
	--font-body: var(--gm-font-type-body);
	--font-mono: var(--gm-font-type-data);
	--gm-fs-hero: clamp(2.2rem, 6vw, 5rem);
	--gm-fs-display: clamp(2.4rem, 4vw, 4.2rem);
	--gm-fs-h1: clamp(2.5rem, 4vw, 4.75rem);
	--gm-fs-h2: clamp(2rem, 3vw, 3.35rem);
	--gm-fs-h3: clamp(1.2rem, 1.8vw, 1.7rem);
	--gm-fs-body-lg: 1.12rem;
	--gm-fs-body: 0.9rem;
	--gm-fs-caption: 0.76rem;
	--gm-fs-menu: 0.86rem;
	--gm-fw-light: 300;
	--gm-fw-medium: 500;
	--gm-fw-semibold: 600;
	--gm-fw-bold: 700;
	--gm-lh-tight: 0.95;
	--gm-lh-heading: 1;
	--gm-lh-body: 1.65;
	--gm-ls-tight: -0.055em;
	--gm-ls-heading: -0.04em;
	--gm-ls-body: -0.025em;
	--gm-ls-wide: 0.12em;
	--gm-radius-sm: 10px;
	--gm-radius-md: 24px;
	--gm-radius-lg: 40px;
	--gm-radius-pill: 999px;
	--gm-radius-card: 1rem;
	--gm-radius-home: 1rem;
	--gm-shell: min(1480px, calc(100vw - 4rem));
	--gm-section-space: 0px;
	--gm-transition: 220ms ease;
}

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

html {
	scroll-behavior: smooth;
	overflow-x: clip;
}

body {
	margin: 0;
	overflow-x: clip;
	background:var(--gm-color-bg);
	color: var(--gm-color-ink);
	font-family: var(--gm-font-type-body);
	font-size: var(--gm-fs-body);
	font-weight: var(--gm-fw-medium);
	line-height: var(--gm-lh-body);
	letter-spacing: var(--gm-ls-body);
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--gm-font-type-body);
}

p,
li,
figcaption,
label,
input,
textarea,
select {
	font-family: var(--gm-font-type-body);
}

body::before {
	content: none;
}

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

a {
	color: inherit;
	text-decoration: none;
}

a:hover,
a:focus-visible {
	color: var(--gm-color-ink);
}

button,
input {
	font: inherit;
}

button {
	color: inherit;
}

button:hover:not(:disabled),
button:focus-visible:not(:disabled) {
	color: var(--gm-color-ink);
}

.gm-arrow-icon {
	display: block;
	width: 1.5rem;
	height: auto;
}

.gm-arrow-icon--left {
	transform: rotate(180deg);
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

.gm-site-shell {
	position: relative;
}

.gm-site-main {
	position: relative;
	z-index: 1;
	padding-top: calc(84px + 1.5rem);
}

@media (max-width: 989px) {
	.gm-site-main {
		padding-top: calc(56px + 0.5rem);
	}
}

.gm-shell {
	width: var(--gm-shell);
	margin: 0 auto;
}

.gm-full {
	width: 100%;
	margin: 0;
}

.gm-section,
.gm-editorial-section {
	padding: var(--gm-section-space) 0;
}

.gm-editorial-heading {
	display: flex;
	align-items: start;
	justify-content: space-between;
	gap: 1.5rem;
	margin-bottom: clamp(2rem, 3vw, 3rem);
}

.gm-editorial-heading h2,
.gm-story-block__copy h2,
.gm-shop-lookup__intro h2 {
	margin: 0;
	font-family: var(--gm-font-type-body);
	font-size: var(--gm-fs-h2);
	font-weight: var(--gm-fw-medium);
	line-height: var(--gm-lh-heading);
	letter-spacing: var(--gm-ls-heading);
}

.gm-editorial-heading__kicker,
.gm-hero-eyebrow {
	margin: 0 0 0.65rem;
	color: var(--gm-color-muted);
	font-family: var(--gm-font-type-body);
	font-size: clamp(1.2rem, 2vw, 2rem);
	font-style: italic;
	font-weight: var(--gm-fw-medium);
	line-height: 1;
	letter-spacing: -0.03em;
}

.gm-editorial-heading__link,
.gm-hero-cta,
.gm-story-block__copy a {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-family: var(--gm-font-type-button);
	font-size: var(--gm-fs-caption);
	font-weight: var(--gm-fw-semibold);
	letter-spacing: var(--gm-ls-wide);
	text-transform: uppercase;
}

.gm-editorial-heading__link::after,
.gm-hero-cta::after,
.gm-story-block__copy a::after {
	content: "\2192";
	font-size: 1em;
}

.gm-editorial-heading__link span,
.gm-hero-cta span {
	display: inline-block;
}

.gm-editorial-heading__link,
.gm-hero-cta {
	position: relative;
	padding-bottom: 0;
}

.gm-editorial-heading__link--pill {
	padding: 0.34rem 1.4rem 0.3rem;
	border: 1px solid currentColor;
	border-radius: 999px;
	line-height: 1;
	letter-spacing: 0.03em;
}

.gm-editorial-heading__link--hero-size {
	font-size: clamp(0.92rem, 0.85vw, 1.05rem);
	font-weight: var(--gm-fw-medium);
}

.gm-editorial-heading__link--pill::before,
.gm-editorial-heading__link--pill::after {
	content: none !important;
}

/* ── Responsive: from responsive.css ── */

@media (max-width: 989px) {
	:root {
		--gm-shell: min(100vw - 2rem, 100%);
		--gm-section-space: 3rem;
	}
}