/* Theme additions on top of the Next.js stylesheets: same palette, borders and fonts. */

/* Arabic pages carry <html dir="rtl">. The layout stays as on the Next.js site, where only
   <main> runs right-to-left (styles_mainAr): header, footer and the scrollbar keep LTR. */
html[dir="rtl"] {
	direction: ltr;
}

/* The Next.js stylesheet forces left-aligned block headings below 960px;
   on the Arabic pages they follow the right-to-left text instead */
@media screen and (max-width: 960px) {
	.styles_mainAr__xepzS .styles_row__item__ZuvB2 h2,
	.styles_mainAr__xepzS .styles_row__item__ZuvB2 h3 {
		text-align: right;
	}
}

/* ---- Header menu (lives in the empty middle cell of the header) ---- */
.styles_header__container__ECLsw {
	position: relative;
}
.lbd-nav {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 16px;
}
.lbd-nav__list {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(16px, 1.6vw, 40px);
}
.lbd-nav__list a {
	display: block;
	position: relative;
	padding: 8px 0;
	font-family: var(--font-unbounded);
	font-weight: 400;
	font-size: clamp(.75rem, .55rem + .3vw, .9375rem);
	text-transform: uppercase;
	white-space: nowrap;
	color: #fff;
	transition: color .2s ease-in-out;
}
.lbd-nav__list a:hover {
	color: #73e49a;
}
.lbd-nav__list a[aria-current="page"] {
	color: #1ba049;
}
.lbd-nav__list a[aria-current="page"]::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: #1ba049;
}
.lbd-burger {
	display: none;
}

@media screen and (max-width: 1199px) {
	.lbd-burger {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 5px;
		width: 44px;
		height: 44px;
		background: none;
		border: 0;
		cursor: pointer;
	}
	.lbd-burger span {
		display: block;
		width: 26px;
		height: 2px;
		background: #fff;
		transition: transform .2s ease-in-out, opacity .2s ease-in-out;
	}
	.lbd-nav--open .lbd-burger span:nth-child(1) {
		transform: translateY(7px) rotate(45deg);
	}
	.lbd-nav--open .lbd-burger span:nth-child(2) {
		opacity: 0;
	}
	.lbd-nav--open .lbd-burger span:nth-child(3) {
		transform: translateY(-7px) rotate(-45deg);
	}
	.lbd-nav__list {
		position: absolute;
		left: -2px;
		right: -2px;
		top: 100%;
		z-index: 4;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		background: rgba(27, 28, 31, .92);
		-webkit-backdrop-filter: blur(8px);
		backdrop-filter: blur(8px);
		border: 2px solid #fff;
		border-top: none;
		opacity: 0;
		pointer-events: none;
		transform: translateY(-8px);
		transition: opacity .2s ease-in-out, transform .2s ease-in-out;
	}
	.lbd-nav--open .lbd-nav__list {
		opacity: 1;
		pointer-events: all;
		transform: none;
	}
	.lbd-nav__list a {
		padding: 16px 20px;
		font-size: 14px;
		border-bottom: 1px solid rgba(255, 255, 255, .15);
	}
	.lbd-nav__list li:last-child a {
		border-bottom: none;
	}
	.lbd-nav__list a[aria-current="page"]::after {
		left: 0;
		right: auto;
		top: 0;
		bottom: 0;
		width: 3px;
		height: auto;
	}
}

/* ---- Text blocks: tables, numbered lists, pictures inside the text ---- */
.styles_markdown__UOltw ol {
	list-style: decimal;
}
/* Markers sit on the text edge (the Next.js lists hung them outside); wrapped lines align
   with the item text. padding-inline-start mirrors itself on the Arabic pages. */
.styles_markdown__UOltw ul,
.styles_markdown__UOltw ol {
	list-style-position: outside;
	padding-inline-start: 1.2em;
}
.styles_markdown__UOltw ol {
	padding-inline-start: 1.6em;
}
.lbd-table {
	width: 100%;
	overflow-x: auto;
	margin: 10px 0 20px;
}
.styles_markdown__UOltw table {
	width: 100%;
	border-collapse: collapse;
}
.styles_markdown__UOltw th,
.styles_markdown__UOltw td {
	border: 2px solid #fff;
	padding: 10px;
	text-align: start;
	vertical-align: top;
	font-size: clamp(.875rem, .85rem + .15vw, 1.0625rem);
	font-weight: 400;
	line-height: 130%;
}
.styles_markdown__UOltw th,
.styles_markdown__UOltw thead td {
	background: #052f14;
	color: #fff;
	font-weight: 700;
}
.styles_markdown__UOltw td p,
.styles_markdown__UOltw th p {
	padding-bottom: 0;
	font-size: inherit;
}
/* A subheading after text (FAQ question after the previous answer) starts a new group */
.styles_markdown__UOltw :is(p, ul, ol, .lbd-table) + :is(h3, h4) {
	margin-top: 32px;
}
.styles_markdown__UOltw h3 {
	padding-bottom: 8px;
}
@media screen and (max-width: 960px) {
	.styles_markdown__UOltw :is(p, ul, ol, .lbd-table) + :is(h3, h4) {
		margin-top: 24px;
	}
}
.styles_markdown__UOltw img {
	max-width: 100%;
	height: auto;
}
.styles_markdown__UOltw .alignleft {
	float: left;
	margin: 0 20px 10px 0;
}
.styles_markdown__UOltw .alignright {
	float: right;
	margin: 0 0 10px 20px;
}
.styles_markdown__UOltw .aligncenter {
	display: block;
	margin: 10px auto;
}
.styles_markdown__UOltw::after {
	content: "";
	display: block;
	clear: both;
}

/* A part with text and a picture: the picture keeps its own proportions under the text */
.lbd-picture-auto {
	height: auto !important;
	max-height: none !important;
	aspect-ratio: auto !important;
}
.lbd-picture-auto img {
	height: auto !important;
}

/* Blocks draw only left/right/bottom borders: on the Next.js site the H2 plate above them
   closed the top. Without the plate (or right after a download button) close it here. */
.styles_content__container___s_QM > .styles_row__B_TNa:first-child,
.lbd-block-cta + .styles_row__B_TNa {
	border-top: 2px solid #fff;
}
.styles_content__container___s_QM > .styles_banner__THWqs:first-child,
.lbd-block-cta + .styles_banner__THWqs {
	border-top: 2px solid #fff;
}

/* Download button after a block */
.lbd-block-cta {
	margin: 60px 0;
	display: flex;
	justify-content: center;
}
/* The last button closes the content, like the page-end button of the Next.js site */
.lbd-block-cta:last-child {
	margin-bottom: 0;
}

/* Кнопки первого экрана: две — в ряд одной ширины; не влезают без переноса текста (JS ставит
   --stacked) или экран до 768px — столбиком одной ширины по самой широкой.
   Порядок «APK слева, iOS справа» и на арабском. */
.lbd-hero-btns {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	gap: 20px;
	max-width: 100%;
	direction: ltr;
}
.lbd-hero-btns--stacked {
	grid-auto-flow: row;
	grid-auto-columns: auto;
	grid-template-columns: 1fr;
}
@media (max-width: 768px) {
	.lbd-hero-btns {
		grid-auto-flow: row;
		grid-auto-columns: auto;
		grid-template-columns: 1fr;
	}
}
.lbd-hero-btns > .styles_link__PkxvY {
	display: flex;
	align-items: center;
	justify-content: center;
}
html[dir=rtl] .lbd-hero-btns > .styles_link__PkxvY {
	direction: rtl;
}
@media (max-width: 500px) {
	.lbd-hero-btns {
		width: 100%;
	}
}