/* Shared framing for the preview's first EntRaw-inspired design step. */
body .site-header {
	border-top: 30px solid #191919;
	background: #fff;
	box-shadow: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

body .site-footer,
body.architecture-document .site-footer,
body.on-site .site-footer {
	width: 100%;
	max-width: none;
	background: #191919;
	border-top: none;
	color: #fff;
	box-shadow: none;
}

body .site-footer h3,
body .site-footer address {
	color: #bdbdbd;
}

body .site-footer a {
	color: #fff;
}

body .site-footer .footer-linkedin svg {
	fill: currentColor;
}

body .site-footer a.contact-btn {
	background: #fff;
	color: #191919;
	box-shadow: none;
}

body .site-footer a:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 4px;
}

/* Inter Display from rsms/inter, under the bundled SIL Open Font License.
   Hosted here so reading the site makes no third-party font request. */
@font-face {
	font-family: "Inter Display";
	src: url("/fonts/inter-display/InterDisplay-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Inter Display";
	src: url("/fonts/inter-display/InterDisplay-Medium.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Inter Display";
	src: url("/fonts/inter-display/InterDisplay-SemiBold.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Inter Display";
	src: url("/fonts/inter-display/InterDisplay-Bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

body,
body.on-site {
	--font-family-primary: "Inter Display", "Inter", sans-serif;
	--color-text-primary: #191919;
	--color-text-secondary: #3d3d3d;
	--home-ink: #191919;
	--home-muted: #3d3d3d;
	font-family: var(--font-family-primary);
	font-weight: 400;
	color: #191919;
}

/* Include the more specific hero and document styles in the shared type rules. */
body h1,
body h2,
body h3,
body h4,
body .hero-shell-ai .hero-copy h1,
body .architecture-article h1,
body .architecture-article h2,
body .main :is(h1, h2, h3, h4) {
	font-family: var(--font-family-primary);
	font-weight: 500;
}

body .architecture-article {
	color: #3d3d3d;
}

body .architecture-article h1,
body .architecture-article h2 {
	color: #191919;
}

body .site-header :is(.header-link, .header-narrow-link, .header-more-menu a) {
	font-weight: 400;
	color: #191919;
}

body .site-header .header-more:has(a[aria-current]) > summary {
	color: #191919;
}

body .site-header a.link-button,
body .site-footer a.contact-btn {
	font-weight: 400;
}

body main :is(h1, h2),
body .main :is(h1, h2),
body .hero-shell-ai .hero-copy h1 {
	color: #191919;
	background: none;
	-webkit-text-fill-color: currentColor;
}

body .site-header .header-link[aria-current],
body .site-header .header-narrow-link[aria-current],
body .site-header .header-more-menu a[aria-current],
body .site-header .header-more:has(a[aria-current]) > summary {
	color: #191919;
	background: #f0f0f0;
}

/* Equal side columns keep the links centered independently of the logo and CTA. */
body .site-header .header-wrapper {
	display: grid;
	grid-template-columns: 212px minmax(0, 1fr) 212px;
	gap: 1rem;
}

body .site-header .header-nav {
	justify-content: center;
	flex-wrap: nowrap;
}

body .site-header .header-wrapper > .link-button {
	justify-self: end;
}

body .site-header a.link-button,
body .site-header a.link-button[aria-current] {
	background: #191919;
	color: #fff;
	box-shadow: none;
}

@media (max-width: 1200px) {
	body .site-header .header-standard {
		display: none;
	}

	body .site-header .header-narrow {
		display: block;
	}
}

body.on-site {
	font-family: var(--font-family-primary);
}

body.on-site .site-footer h3,
body.on-site .site-footer address {
	color: #bdbdbd;
}

body.on-site .site-footer address a {
	color: #fff;
}

body.on-site .site-footer a.contact-btn {
	background: #fff;
	color: #191919;
	box-shadow: none;
}

body.on-site h1,
body.on-site .tool-card h2 {
	font-family: var(--font-family-primary);
	font-weight: 500;
	color: #191919;
}

/* The application-backed tool forms use the same responsive type scale as
   the static website, so navigation dimensions stay consistent between pages. */
html:has(body.on-site) {
	font-size: 16px;
}
body.on-site .site-header {
	--spacing-md: 16px;
	--spacing-lg: 24px;
	line-height: 1.5;
}
@media (max-width: 1200px) {
	html:has(body.on-site) {
		font-size: 15px;
	}
}
@media (max-width: 768px) {
	html:has(body.on-site) {
		font-size: 14px;
	}
}
@media (max-width: 480px) {
	html:has(body.on-site) {
		font-size: 13px;
	}
}