/* Design tokens — values are copied verbatim from Claude Design files/README.md
   (Design Tokens section) and the .dc.html inline styles. Do not "round" these
   for convenience; they are the agreed source of truth. */
:root {
	--gl-black: #101214;
	--gl-black-2: #141619;
	--gl-black-3: #1a1d20;
	--gl-bg: #f4f5f2;
	--gl-text-dark: #f2f3f1;
	--gl-text-dark-2: #b9bdb9;
	--gl-text-dark-3: #9aa09a;
	--gl-text-light: #1a1d20;
	--gl-text-light-2: #6b7075;
	--gl-text-light-3: #9aa09a;
	--gl-green: #6cbb33;
	--gl-green-hover: #7ecf43;
	--gl-green-dark: #4f9424;
	--gl-border: #e2e5e0;
	--gl-border-2: #d6dad2;
	--gl-maxw: 1320px;
	--gl-header-h: 72px;
	--gl-radius-card: 8px;
	--gl-radius-btn: 4px;
	--gl-shadow-card-hover: 0 18px 40px rgba(20, 26, 18, 0.12);
	--gl-shadow-product: 0 40px 80px rgba(0, 0, 0, 0.5);
}

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

html, body {
	margin: 0;
	padding: 0;
	background: var(--gl-bg);
	font-family: 'Archivo', sans-serif;
	color: var(--gl-text-light);
}

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

a {
	color: var(--gl-green-dark);
	text-decoration: none;
}
a:hover { color: var(--gl-green); }

::selection { background: var(--gl-green); color: var(--gl-black); }

.gl-container {
	max-width: var(--gl-maxw);
	margin: 0 auto;
	padding-left: clamp(20px, 4vw, 56px);
	padding-right: clamp(20px, 4vw, 56px);
}

/* Headline voice: italic, heavy-weight, uppercase — used for every
   headline-style element across all three pages. */
.gl-h-italic {
	font-style: italic;
	font-weight: 900;
	text-transform: uppercase;
	margin: 0;
}

/* Signature "motorsport" button: 4px radius + skewX(-8deg), with inner
   content counter-skewed so the text/label reads upright. CF7 submit
   buttons (plain <input>, no wrappable child) approximate this by skewing
   the input itself — see cf7-theme.css. */
.gl-btn {
	display: inline-block;
	border-radius: var(--gl-radius-btn);
	transform: skewX(-8deg);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 14px;
	padding: 13px 24px;
	border: none;
	cursor: pointer;
	font-family: 'Archivo', sans-serif;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.gl-btn > span {
	display: inline-block;
	transform: skewX(8deg);
}
.gl-btn--primary {
	background: var(--gl-green);
	color: var(--gl-black);
}
.gl-btn--primary:hover { background: var(--gl-green-hover); color: var(--gl-black); }
.gl-btn--dark {
	background: var(--gl-black);
	color: var(--gl-green);
}
.gl-btn--dark:hover { background: #1d2126; color: var(--gl-green-hover); }

.gl-pill {
	display: inline-flex;
	align-items: center;
	font-family: 'Archivo', sans-serif;
	font-weight: 700;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 10px 18px;
	border-radius: 999px;
	border: 1px solid var(--gl-border-2);
	background: #ffffff;
	color: var(--gl-text-light);
	cursor: pointer;
	transition: all 0.2s ease;
}
.gl-pill--active {
	background: var(--gl-black-3);
	color: var(--gl-green);
	border-color: var(--gl-black-3);
}
.gl-pill--small {
	font-weight: 600;
	font-size: 12px;
	padding: 8px 14px;
	color: var(--gl-text-light-2);
}

.gl-badge {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	background: var(--gl-black-3);
	color: var(--gl-green);
	padding: 4px 9px;
	border-radius: 3px;
	white-space: nowrap;
}

.gl-kicker {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--gl-green);
}