/* Base reset + typography */

* {
	margin: 0;
	padding: 0;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	overflow-x: hidden;
}

body {
	background: var(--tc-bg);
	color: var(--tc-ink-900);
	font-family: var(--tc-font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	/* room for the mobile bottom nav so content never sits under it */
	padding-bottom: 0;
	/* A page element wider than the viewport (long unbroken text, a fixed-
	   width block) must never be allowed to widen the document itself —
	   that would drag position:fixed children (header, .bottom-nav) off
	   to the side with it on mobile browsers instead of clipping in place. */
	overflow-x: hidden;
	max-width: 100vw;
}

body.has-bottom-nav {
	padding-bottom: calc(var(--tc-bottom-nav-height) + env(safe-area-inset-bottom, 0px));
}

img,
picture,
svg,
video {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	color: var(--tc-purple-500);
	text-decoration: none;
	transition: color var(--tc-transition-fast);
}

a:hover,
a:focus-visible {
	color: var(--tc-teal-600);
}

:focus-visible {
	outline: 2px solid var(--tc-purple-500);
	outline-offset: 2px;
	border-radius: var(--tc-radius-sm);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--tc-font-heading);
	font-weight: 700;
	line-height: 1.15;
	color: var(--tc-ink-900);
	letter-spacing: 0.01em;
}

h1 { font-size: clamp(2rem, 1.6rem + 1.6vw, 3rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 1.4rem + 1vw, 2.25rem); font-weight: 800; }
h3 { font-size: clamp(1.3rem, 1.2rem + 0.6vw, 1.6rem); font-weight: 700; }
h4 { font-size: 1.15rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tc-ink-500); }

p {
	margin: 0 0 var(--tc-space-4);
	color: var(--tc-ink-700);
}

ul, ol {
	margin: 0 0 var(--tc-space-4);
	padding-left: 1.25em;
	color: var(--tc-ink-700);
}

button, input, select, textarea {
	font-family: inherit;
	font-size: inherit;
	color: inherit;
}

button {
	cursor: pointer;
	background: none;
	border: none;
}

table {
	border-collapse: collapse;
	width: 100%;
}

hr {
	border: none;
	border-top: 1px solid var(--tc-border);
	margin: var(--tc-space-6) 0;
}

::selection {
	background: var(--tc-teal-100);
	color: var(--tc-purple-900);
}

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

.skip-link {
	position: fixed;
	top: -100px;
	left: var(--tc-space-4);
	z-index: 999;
	background: var(--tc-ink-900);
	color: var(--tc-white);
	padding: var(--tc-space-3) var(--tc-space-4);
	border-radius: var(--tc-radius-sm);
	transition: top var(--tc-transition-fast);
}

.skip-link:focus {
	top: var(--tc-space-4);
	color: var(--tc-white);
}

.container {
	width: 100%;
	max-width: var(--tc-container-max);
	margin-inline: auto;
	padding-inline: var(--tc-space-5);
}

@media (max-width: 600px) {
	.container {
		padding-inline: var(--tc-space-4);
	}
}

.container--narrow {
	max-width: 860px;
}

.visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.text-gradient {
	background: var(--tc-gradient-brand);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--tc-space-2);
	font-family: var(--tc-font-heading);
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tc-purple-500);
}