:root {
	--dd-bg: #f5f7f8;
	--dd-bg-elevated: #edf2f3;
	--dd-surface: #ffffff;
	--dd-surface-soft: #f8fbfa;
	--dd-surface-strong: #ffffff;
	--dd-ink: #0b1118;
	--dd-ink-2: #172231;
	--dd-muted: #5a6878;
	--dd-muted-2: #82909f;
	--dd-line: #d9e1e3;
	--dd-line-strong: #c1ccd0;
	--dd-brand: #007f83;
	--dd-brand-strong: #005e67;
	--dd-brand-bright: #16b8bc;
	--dd-brand-soft: #e8f7f7;
	--dd-copper: #a46a58;
	--dd-copper-strong: #77473d;
	--dd-copper-bright: #d29075;
	--dd-copper-soft: #fbede8;
	--dd-steel: #657687;
	--dd-night: #0b1118;
	--dd-night-2: #111b26;
	--dd-night-3: #192635;
	--dd-radius-xs: 6px;
	--dd-radius-sm: 8px;
	--dd-radius-md: 10px;
	--dd-shadow-xs: 0 1px 0 rgba(13, 19, 27, .04);
	--dd-shadow-sm: 0 12px 32px rgba(13, 19, 27, .07);
	--dd-shadow-md: 0 22px 58px rgba(13, 19, 27, .11);
	--dd-shadow-lg: 0 34px 96px rgba(13, 19, 27, .17);
	--dd-shell: 1180px;
	--dd-shell-wide: 1320px;
	--dd-header-height: 72px;
	--dd-font: "Beiruti", "Segoe UI", Tahoma, Arial, system-ui, sans-serif;
}

html[lang^="en"] {
	--dd-font: "Segoe UI", Tahoma, Arial, system-ui, sans-serif;
}

@font-face {
	font-family: "Beiruti";
	font-style: normal;
	font-display: swap;
	font-weight: 200 900;
	src: url("../fonts/beiruti-arabic-variable.woff2") format("woff2-variations");
	unicode-range: U+0600-06FF,U+0750-077F,U+0870-089F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF;
}

@font-face {
	font-family: "Beiruti";
	font-style: normal;
	font-display: swap;
	font-weight: 200 900;
	src: url("../fonts/beiruti-latin-variable.woff2") format("woff2-variations");
	unicode-range: U+0000-00FF,U+0100-024F,U+1E00-1EFF,U+2000-206F,U+20A0-20CF,U+2122,U+2191,U+2193,U+2212,U+2215;
}

* {
	box-sizing: border-box;
}

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

body {
	margin: 0;
	padding-top: var(--dd-header-height);
	background:
		linear-gradient(90deg, rgba(11,17,24,.022) 1px, transparent 1px),
		linear-gradient(180deg, rgba(11,17,24,.018) 1px, transparent 1px),
		linear-gradient(180deg, rgba(255,255,255,.9), transparent 420px),
		var(--dd-bg);
	background-size: 96px 96px, 96px 96px, auto;
	color: var(--dd-ink);
	font-family: var(--dd-font);
	font-size: 15.75px;
	line-height: 1.72;
	letter-spacing: 0;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

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

a {
	color: inherit;
	text-decoration: none;
	transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

p {
	margin: 0 0 1em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	color: var(--dd-ink);
	font-weight: 820;
	line-height: 1.16;
	text-wrap: balance;
}

button,
input,
select,
textarea {
	font: inherit;
	letter-spacing: 0;
}

button,
a {
	-webkit-tap-highlight-color: transparent;
}

:focus-visible {
	outline: 3px solid rgba(0, 143, 140, .24);
	outline-offset: 3px;
}

.dd-shell {
	width: min(var(--dd-shell), calc(100% - 48px));
	margin-inline: auto;
}

.dd-shell--wide {
	width: min(var(--dd-shell-wide), calc(100% - 48px));
}

.dd-skip-link {
	position: fixed;
	inset-inline-start: 16px;
	top: 12px;
	z-index: 100;
	padding: 10px 14px;
	border-radius: var(--dd-radius-sm);
	background: var(--dd-ink);
	color: #fff;
	transform: translateY(-150%);
}

.dd-skip-link:focus {
	transform: translateY(0);
}

.dd-main {
	min-height: 60vh;
	padding-block: 46px 70px;
}

.dd-pro ::selection {
	background: rgba(24, 199, 192, .22);
	color: var(--dd-ink);
}

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

@media (max-width: 640px) {
	:root {
		--dd-header-height: 67px;
	}

	body {
		font-size: 15.5px;
	}

	.dd-shell {
		width: calc(100% - 30px);
		max-width: calc(100vw - 30px);
	}

	.dd-main {
		padding-block: 34px 54px;
	}
}