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

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--mq-bg);
	color: var(--mq-text);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }

h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 0.5em;
}

h1 { font-size: clamp(2rem, 4vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: 1.25rem; }

p { margin: 0 0 1em; }

a { color: var(--mq-accent-bright); }

.mq-container {
	max-width: var(--mq-max-width);
	margin: 0 auto;
	padding: 0 20px;
}

.mq-section { padding: 64px 0; }

/* Light-surface variant, used inside product/blog body copy */
.mq-prose {
	background: var(--mq-surface-light);
	color: #1f2937;
	border-radius: var(--mq-radius);
	padding: 32px;
}
.mq-prose a { color: var(--mq-accent); }