/**
 * Apex mobile typography overrides.
 *
 * Desktop type styles live in theme.json (the source of truth). These rules
 * apply the Figma MOBILE type scale below the 768px breakpoint — only the
 * values that differ from desktop are overridden. The `body` prefix raises
 * specificity above the theme.json element styles so order never matters.
 *
 * Reference: Figma "Apex Web Final" mobile type specimens.
 */

/* Match Figma's text rendering everywhere: grayscale antialiasing keeps type as
   light as the design. Without it, macOS browsers use heavier smoothing, so the
   same weight (e.g. the Regular 20px intro) looks bolder than the Figma. */
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

@media (max-width: 767.98px) {

	/* MOBILE – H1: 40px / 50px line-height (desktop 50px). Inter Thin. */
	body h1 {
		font-size: 2.5rem;
		line-height: 1.25;
	}

	/* MOBILE - H2: 30px / 40px line-height (desktop 37px). Inter Extra Light. */
	body h2 {
		font-size: 1.875rem;
		line-height: 1.33333;
	}

	/* MOBILE - H3: 22px / 32px line-height (desktop 24px). Inter Extra Light. */
	body h3 {
		font-size: 1.375rem;
		line-height: 1.45455;
	}

	/* MOBILE Body Copy: 14px / 22px line-height (desktop 24px). Inter Light. */
	body p {
		line-height: 1.57143;
	}

	/* MOBILE – Main Intro: 20px / 29px line-height, Inter Regular
	   (desktop Intro Body Copy is 16px / 30px, Inter Light). */
	body p.is-style-intro {
		font-size: 1.25rem;
		font-weight: 400;
		line-height: 1.45;
	}
}