/*
 * سبک ابزارک‌های با عیار. همه‌ی رنگ‌ها و اندازه‌ها توکن‌های پوسته‌اند (themes/baayar/assets/css/tokens.css)
 * که خودشان از «رنگ‌های سراسری» Elementor می‌خوانند.
 *
 * هر ابزارک دو حالت رنگ دارد: روی زمینه‌ی روشن (پیش‌فرض) و درون بخش تیره (.bya-on-stage، پابرگ). فقط
 * ویژگی‌های منطقی؛ تنها استثنا جای نقطه روی تصویر است که مختصات فیزیکی خود تصویر است.
 *
 * زبان بصری مشترک (docs/design-system.md):
 * - «ظرف نشان‌دار» آیکن (bya-ico): مربع گرد با حلقه‌ی دوخطی، مثل مهر عیار، و یک شمش طلایی کوچک روی لبه.
 * - «پایه‌ی نمونه» (bya-mount): هر نمای سامانه روی یک پایه‌ی هشت‌پیکسلی با خط مویی، نه سایه‌ی سنگین.
 * - گوشه‌ها از یک خانواده (۸، ۱۲، ۱۶، ۲۲)؛ حرکت فقط transform و opacity.
 */

.bya-editor-note {
	margin: 0;
	padding: 12px 16px;
	border: 1px dashed #c9c0b1;
	border-radius: 8px;
	background: #fbfaf6;
	color: #6b6253;
	font-size: 13px;
	line-height: 1.8;
}

.bya-icon {
	display: block;
	flex: none;
}

.bya-icon--mirror {
	transform: scaleX(-1);
}

/* ================================================================ ظرف آیکن */

.bya-ico {
	--bya-ico-size: 46px;
	position: relative;
	display: inline-grid;
	place-items: center;
	flex: none;
	inline-size: var(--bya-ico-size);
	block-size: var(--bya-ico-size);
	border-radius: 14px;
	color: var(--bya-pine);
	background: linear-gradient(155deg, var(--bya-surface) 15%, var(--bya-pine-wash));
	box-shadow:
		inset 0 0 0 1px color-mix(in oklab, var(--bya-pine) 20%, transparent),
		inset 0 0 0 4px color-mix(in oklab, var(--bya-surface) 70%, transparent),
		inset 0 0 0 5px color-mix(in oklab, var(--bya-pine) 9%, transparent),
		0 1px 2px rgb(48 36 16 / 0.06);
	transition:
		box-shadow var(--bya-duration-mid) var(--bya-ease),
		background-color var(--bya-duration-mid) var(--bya-ease);
}

/* شمش کوچک طلایی روی لبه‌ی بالای ظرف — همان ذوزنقه‌ی نشان برند */
.bya-ico::after {
	content: "";
	position: absolute;
	inset-block-start: -3px;
	inset-inline-end: 10px;
	inline-size: 11px;
	block-size: 6px;
	background: linear-gradient(160deg, var(--bya-gold-light), var(--bya-gold) 60%, var(--bya-gold-deep));
	clip-path: polygon(22% 0, 78% 0, 100% 100%, 0 100%);
	transition: transform var(--bya-duration-mid) var(--bya-ease);
}

.bya-ico .bya-icon {
	inline-size: 21px;
	block-size: 21px;
	transition: translate var(--bya-duration-mid) var(--bya-ease);
}

.bya-on-stage .bya-ico,
.bya-bento__item--pine .bya-ico {
	color: var(--bya-mint);
	background: linear-gradient(155deg, color-mix(in oklab, var(--bya-stage-ink) 10%, transparent), color-mix(in oklab, var(--bya-stage-ink) 3%, transparent));
	box-shadow:
		inset 0 0 0 1px var(--bya-stage-line-strong),
		inset 0 0 0 5px color-mix(in oklab, var(--bya-stage-ink) 6%, transparent);
}

/* کارتی که نشانگر رویش است: آیکن کمی بالا می‌رود و شمش جا می‌افتد */
:is(.bya-index__item, .bya-bento__item):hover .bya-ico .bya-icon {
	translate: 0 -2px;
}

:is(.bya-index__item, .bya-bento__item):hover .bya-ico::after {
	transform: translateY(1px);
}

@media (prefers-reduced-motion: reduce) {
	.bya-ico .bya-icon,
	.bya-ico::after {
		transition: none;
	}
}

/* ================================================================ نشان */

.bya-brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--bya-ink);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
}

a.bya-brand.bya-brand {
	color: var(--bya-ink);
	transition: color var(--bya-duration-mid) var(--bya-ease);
}

.bya-site-header[data-tone="dark"] a.bya-brand.bya-brand,
.bya-site-footer a.bya-brand.bya-brand,
.bya-on-stage a.bya-brand.bya-brand {
	color: var(--bya-stage-ink);
}

.bya-brand__mark {
	display: grid;
	place-items: center;
	inline-size: 38px;
	block-size: 38px;
	border-radius: 11px;
	color: #fff;
	background-image: linear-gradient(160deg, var(--bya-pine-bright), var(--bya-pine) 55%, var(--bya-pine-deep));
	box-shadow:
		inset 0 1px 0 rgb(255 255 255 / 0.4),
		0 8px 22px -10px color-mix(in oklab, var(--bya-pine) 85%, transparent);
}

.bya-brand__mark-svg {
	inline-size: 21px;
	block-size: 21px;
}

.bya-brand__accent {
	color: var(--bya-pine);
}

.bya-site-header[data-tone="dark"] .bya-brand__accent,
.bya-site-footer .bya-brand__accent,
.bya-on-stage .bya-brand__accent {
	background-image: linear-gradient(90deg, var(--bya-mint), var(--bya-pine-bright));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

.bya-brand--lg {
	gap: 14px;
	font-size: 1.75rem;
}

.bya-brand--lg .bya-brand__mark {
	inline-size: 50px;
	block-size: 50px;
	border-radius: 14px;
}

.bya-brand--lg .bya-brand__mark-svg {
	inline-size: 27px;
	block-size: 27px;
}

/* ================================================================ ناوبری */

.bya-nav__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bya-nav__list a {
	text-decoration: none;
}

.bya-nav--bar .bya-nav__list a {
	position: relative;
	display: block;
	padding: 8px 14px;
	border-radius: 10px;
	color: var(--bya-ink-2);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.6;
	transition:
		color var(--bya-duration-fast) linear,
		background-color var(--bya-duration-fast) linear;
}

.bya-nav--bar .bya-nav__list a:hover {
	color: var(--bya-ink);
	background-color: color-mix(in oklab, var(--bya-ink) 5%, transparent);
}

.bya-site-header[data-tone="dark"] .bya-nav--bar .bya-nav__list a {
	color: var(--bya-stage-ink-2);
}

.bya-site-header[data-tone="dark"] .bya-nav--bar .bya-nav__list a:hover {
	color: var(--bya-stage-ink);
	background-color: var(--bya-stage-glass);
}

/* بخشی که در دید است (site.js، data-current) — یک خط کوتاه طلایی زیر پیوند */
.bya-nav--bar .bya-nav__list a::after {
	content: "";
	position: absolute;
	inset-inline: 14px;
	inset-block-end: 3px;
	block-size: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--bya-gold-light), var(--bya-gold));
	transform: scaleX(0);
	transition: transform var(--bya-duration-mid) var(--bya-ease);
}

/* همان خط برای برگه‌ی جاری (aria-current="page" را خود وردپرس می‌گذارد) */
.bya-nav--bar .bya-nav__list a[data-current="true"]::after,
.bya-nav--bar .bya-nav__list a[aria-current="page"]::after {
	transform: scaleX(1);
}

.bya-nav--bar .bya-nav__list a[data-current="true"],
.bya-nav--bar .bya-nav__list a[aria-current="page"] {
	color: var(--bya-ink);
}


/* منوی گوشی: برگه‌ی جاری کاجی */
.bya-nav__panel .bya-nav__list a[aria-current="page"] {
	color: var(--bya-pine);
}


.bya-site-header[data-tone="dark"] .bya-nav--bar .bya-nav__list a[data-current="true"] {
	color: var(--bya-stage-ink);
}

.bya-nav__toggle {
	display: none;
}

.bya-nav__cta {
	display: none;
}

@media (min-width: 1025px) {
	.bya-nav__panel,
	.bya-nav--bar .bya-nav__list {
		display: flex;
		align-items: center;
		gap: 2px;
	}
}

@media (max-width: 1024px) {
	.bya-nav--bar[data-ready] .bya-nav__toggle {
		display: grid;
		place-items: center;
		inline-size: 44px;
		block-size: 44px;
		padding: 0;
		border: 1px solid var(--bya-border-strong);
		border-radius: 12px;
		background: transparent;
		color: var(--bya-ink);
		cursor: pointer;
		transition:
			border-color var(--bya-duration-mid) var(--bya-ease),
			color var(--bya-duration-mid) var(--bya-ease);
	}

	.bya-site-header[data-tone="dark"] .bya-nav--bar[data-ready] .bya-nav__toggle {
		border-color: var(--bya-stage-line-strong);
		color: var(--bya-stage-ink);
	}

	.bya-nav__toggle-close,
	.bya-nav__toggle[aria-expanded="true"] .bya-nav__toggle-open {
		display: none;
	}

	.bya-nav__toggle[aria-expanded="true"] .bya-nav__toggle-close {
		display: block;
	}

	/* بی JS پنل باز نمی‌شود؛ همه‌ی پیوندهای منو در پابرگ هم هستند. */
	.bya-nav__panel {
		display: none;
		position: fixed;
		inset-inline: 0;
		inset-block-start: calc(var(--bya-header-height) + var(--wp-admin--admin-bar--height, 0px));
		block-size: calc(100dvh - var(--bya-header-height) - var(--wp-admin--admin-bar--height, 0px));
		padding: 8px var(--bya-gutter) calc(32px + env(safe-area-inset-bottom));
		overflow-y: auto;
		overscroll-behavior: contain;
		background-color: var(--bya-ivory);
		border-block-start: 1px solid var(--bya-border);
	}

	.bya-nav[data-bya-nav-open="true"] .bya-nav__panel {
		display: flex;
		flex-direction: column;
		gap: 28px;
		animation: bya-panel-in 280ms var(--bya-ease) both;
	}

	.bya-nav--bar .bya-nav__list li + li {
		border-block-start: 1px solid var(--bya-border);
	}

	.bya-nav--bar .bya-nav__list a,
	.bya-site-header[data-tone="dark"] .bya-nav--bar .bya-nav__list a {
		padding: 18px 4px;
		border-radius: 0;
		color: var(--bya-ink);
		font-size: 1.0625rem;
		font-weight: 600;
	}

	.bya-nav--bar .bya-nav__list a::after {
		display: none;
	}

	.bya-nav--bar .bya-nav__list a:hover {
		background: none;
		color: var(--bya-pine);
	}

	.bya-nav__cta {
		display: block;
	}

	.bya-nav__cta-link {
		display: flex;
		align-items: center;
		justify-content: center;
		min-block-size: 54px;
		border-radius: var(--bya-radius-s);
		background-color: var(--bya-pine);
		color: #fff;
		font-weight: 600;
		text-decoration: none;
	}
}

@keyframes bya-panel-in {
	from {
		opacity: 0;
		transform: translate3d(0, -8px, 0);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bya-nav[data-bya-nav-open="true"] .bya-nav__panel {
		animation: none;
	}
}

.bya-nav--list .bya-nav__list {
	display: grid;
	gap: 10px;
}

/* فهرست بلند پابرگ در دو ستون، تا پابرگ کوتاه بماند (کلاس روی ابزارک ناوبری) */
.bya-footer-nav--2col .bya-nav--list .bya-nav__list {
	grid-template-columns: repeat(2, max-content);
	column-gap: clamp(24px, 3vw, 44px);
}

.bya-nav--list .bya-nav__list a {
	color: var(--bya-ink-2);
	font-size: 0.875rem;
	line-height: 1.6;
	transition: color var(--bya-duration-fast) linear;
}

.bya-site-footer .bya-nav--list .bya-nav__list a,
.bya-on-stage .bya-nav--list .bya-nav__list a {
	color: var(--bya-stage-ink-2);
}

.bya-nav--list .bya-nav__list a:hover {
	color: var(--bya-pine);
}

.bya-site-footer .bya-nav--list .bya-nav__list a:hover,
.bya-on-stage .bya-nav--list .bya-nav__list a:hover {
	color: var(--bya-stage-ink);
}

/* ================================================================ قاب و پایه‌ی نماها */

/*
 * پایه‌ی نمونه: هر نمای بزرگ سامانه روی یک پایه‌ی هشت‌پیکسلی گرم با خط مویی و سایه‌ی کم. تصویر خودش
 * گوشه‌ی کوچک‌تر و یک خط مویی دارد؛ تصویر هرگز کش نمی‌آید (پهنا ۱۰۰٪، بلندی خودکار).
 */
.bya-mount {
	position: relative;
	margin: 0;
	padding: 8px;
	border-radius: var(--bya-radius-l);
	background: linear-gradient(180deg, var(--bya-surface), var(--bya-surface-muted));
	box-shadow:
		inset 0 0 0 1px var(--bya-border),
		var(--bya-shadow-m);
}

.bya-mount img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	border-radius: 14px;
	box-shadow: 0 0 0 1px color-mix(in oklab, var(--bya-ink) 7%, transparent);
}

.bya-on-stage .bya-mount {
	background: linear-gradient(180deg, rgb(255 255 255 / 0.1), rgb(255 255 255 / 0.04));
	box-shadow:
		inset 0 0 0 1px rgb(255 255 255 / 0.13),
		var(--bya-shadow-dark);
}

/* نوار بالای پنجره: سه نقطه‌ی خنثی، فقط برای این‌که نما «پنجره» خوانده شود */
.bya-mount__bar {
	display: flex;
	gap: 6px;
	padding: 3px 8px 10px;
}

.bya-mount__bar span {
	inline-size: 8px;
	block-size: 8px;
	border-radius: 50%;
	background-color: color-mix(in oklab, var(--bya-stage-ink) 26%, transparent);
}

.bya-frame {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: var(--bya-radius);
	background-color: var(--bya-surface);
}

.bya-frame img {
	display: block;
	inline-size: 100%;
	block-size: auto;
}

/* برش شناور کارت روی صحنه: حلقه‌ی شیشه‌ای و سایه‌ی عمیق */
.bya-frame--card {
	border-radius: 16px;
	box-shadow:
		0 0 0 1px rgb(255 255 255 / 0.55),
		0 0 0 7px rgb(255 255 255 / 0.1),
		0 34px 64px -26px rgb(0 0 0 / 0.65);
}

/* قاب گوشی: فقط لبه‌ی گرد و تیره؛ بی بریدگی، بی دکمه‌ی ساختگی */
.bya-frame--phone {
	padding: 6px;
	border-radius: 34px;
	background: linear-gradient(160deg, #2c3b35, #0c1512 55%, #17221e);
	box-shadow:
		inset 0 0 0 1px rgb(255 255 255 / 0.16),
		0 0 0 1px rgb(0 0 0 / 0.3),
		0 34px 64px -26px rgb(0 0 0 / 0.6);
}

.bya-frame--phone img {
	border-radius: 28px;
}

/* تصویر ابزارک «تصویر» خود Elementor در بخش‌های روشن: کلاس bya-shot روی ابزارک */
.bya-shot img {
	border-radius: var(--bya-radius);
	box-shadow: 0 0 0 1px color-mix(in oklab, var(--bya-ink) 8%, transparent), var(--bya-shadow-m);
}

.bya-shot .widget-image-caption,
.bya-shot figcaption {
	margin-block-start: 16px;
	color: var(--bya-ink-3);
	font-size: var(--bya-text-small);
	text-align: center;
}

/* ================================================================ صحنه‌ی محصول (بخش اول) */

.bya-stage {
	position: relative;
	inline-size: 100%;
}

.bya-stage--bleed {
	margin-block-end: calc(-1 * var(--bya-overlap));
}

.bya-stage__halo {
	position: absolute;
	inset-block: -12% 18%;
	inset-inline: 8%;
	z-index: 0;
	background: radial-gradient(closest-side, color-mix(in oklab, var(--bya-pine-bright) 42%, transparent), transparent);
	opacity: 0.7;
	pointer-events: none;
}

.bya-stage__main {
	position: relative;
	z-index: 1;
	inline-size: 82%;
	margin: 0 auto;
}

.bya-mount--stage {
	padding: 8px;
	border-radius: 24px;
	box-shadow:
		inset 0 0 0 1px rgb(255 255 255 / 0.16),
		0 2px 0 0 rgb(255 255 255 / 0.05) inset,
		0 60px 120px -50px rgb(3 18 13 / 0.7),
		0 24px 48px -30px rgb(3 18 13 / 0.45);
}

.bya-mount--stage img {
	border-radius: 15px;
}

.bya-stage__layer {
	position: absolute;
	z-index: 2;
	inline-size: var(--bya-layer-w, 30%);
	margin: 0;
	translate: calc(var(--bya-px, 0) * var(--bya-depth, 1) * 1px) calc(var(--bya-py, 0) * var(--bya-depth, 1) * 1px);
	transition: translate 600ms var(--bya-ease);
}

.bya-stage__layer--top-start {
	inset-block-start: 12%;
	inset-inline-start: 0;
}

.bya-stage__layer--top-end {
	inset-block-start: 14%;
	inset-inline-end: 0;
}

.bya-stage__layer--middle-start {
	inset-block-start: 42%;
	inset-inline-start: 0;
}

.bya-stage__layer--middle-end {
	inset-block-start: 48%;
	inset-inline-end: 1%;
}

.bya-stage__layer--bottom-start {
	inset-block-end: -5%;
	inset-inline-start: 3%;
}

.bya-stage__layer--bottom-end {
	inset-block-end: 4%;
	inset-inline-end: 2%;
}

.bya-stage__caption {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-block-end: 12px;
	padding: 5px 12px;
	border: 1px solid var(--bya-stage-line-strong);
	border-radius: var(--bya-radius-pill);
	background-color: color-mix(in oklab, var(--bya-stage) 80%, transparent);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: var(--bya-stage-ink);
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1.6;
	white-space: nowrap;
}

.bya-stage__caption::before {
	content: "";
	inline-size: 6px;
	block-size: 6px;
	border-radius: 50%;
	background-color: var(--bya-gold-light);
	box-shadow: 0 0 0 3px color-mix(in oklab, var(--bya-gold-light) 22%, transparent);
}

@media (max-width: 1199px) {
	.bya-stage__main {
		inline-size: 88%;
	}

	.bya-stage__caption {
		display: none;
	}
}

/*
 * گوشی: گوشی خود سامانه کانون صحنه است. نمای رایانه پشت آن بالا می‌ماند، گوشی وسط و جلو، و کارت نرخ روز
 * کنار بالا. صحنه پایینش به اندازه‌ی گوشی جا باز می‌کند (درصد پایین = نسبتی از پهنا).
 */
@media (max-width: 767px) {
	.bya-stage {
		padding-block-end: 70%;
	}

	.bya-stage__main {
		inline-size: 100%;
	}

	.bya-mount--stage {
		padding: 5px;
		border-radius: 16px;
	}

	.bya-mount--stage img {
		border-radius: 11px;
	}

	.bya-mount__bar {
		padding: 1px 4px 6px;
		gap: 4px;
	}

	.bya-mount__bar span {
		inline-size: 6px;
		block-size: 6px;
	}

	.bya-stage__layer {
		inline-size: calc(var(--bya-layer-w, 30%) * 1.7);
	}

	.bya-stage__layer--bottom-start {
		inset-block-end: 0;
		inset-inline-start: 50%;
		inline-size: 54%;
		transform: translateX(50%);
	}

	.bya-stage__layer--top-end,
	.bya-stage__layer--top-start {
		inset-block-start: 21%;
		inset-inline-end: 0;
		inset-inline-start: auto;
		inline-size: 42%;
	}

	.bya-stage__layer--middle-start,
	.bya-stage__layer--middle-end,
	.bya-stage__layer--bottom-end {
		display: none;
	}

	.bya-frame--card {
		border-radius: 11px;
		box-shadow:
			0 0 0 1px rgb(255 255 255 / 0.55),
			0 0 0 4px rgb(255 255 255 / 0.1),
			0 20px 40px -18px rgb(0 0 0 / 0.6);
	}

	.bya-frame--phone {
		padding: 5px;
		border-radius: 28px;
	}

	.bya-frame--phone img {
		border-radius: 23px;
	}
}

/* ورود — فقط CSS. تصویر اصلی هرگز شفاف نمی‌شود (LCP). */
.bya-motion .bya-stage__main {
	animation: bya-settle 1400ms var(--bya-ease-out) both;
}

.bya-motion .bya-stage__layer > * {
	animation: bya-rise 1000ms var(--bya-ease-out) both;
	animation-delay: calc(500ms + var(--bya-i, 0) * 160ms);
}

@keyframes bya-settle {
	from {
		transform: translate3d(0, 36px, 0) scale(0.975);
	}

	to {
		transform: none;
	}
}

@keyframes bya-rise {
	from {
		opacity: 0;
		transform: translate3d(0, 24px, 0);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.elementor-editor-active .bya-stage__main,
.elementor-editor-active .bya-stage__layer > * {
	animation: none;
}

/* ================================================================ آمار */

/*
 * یک نوار سفید با چهار خانه‌ی هم‌شکل، مثل کارت‌های شاخص داشبورد خود سامانه: آیکن در ظرف نشان‌دار، عدد،
 * برچسب. خط جداکننده‌ی میان خانه‌ها مویی است و به لبه‌ها نمی‌رسد. توضیح کوتاه (اختیاری) یا برای همه هست یا
 * برای هیچ‌کدام.
 */
.bya-stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
	border-radius: var(--bya-radius-l);
	background-color: var(--bya-surface);
	box-shadow:
		0 0 0 1px color-mix(in oklab, var(--bya-border) 85%, transparent),
		var(--bya-shadow-s);
}

.bya-stats__item {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: clamp(20px, 2.2vw, 30px) clamp(18px, 2.4vw, 34px);
}

.bya-stats__item + .bya-stats__item::before {
	content: "";
	position: absolute;
	inset-block: 24%;
	inset-inline-start: 0;
	inline-size: 1px;
	background: linear-gradient(180deg, transparent, var(--bya-border-strong) 25% 75%, transparent);
}

.bya-stats__body {
	min-inline-size: 0;
}

.bya-stats p {
	margin: 0;
}

.bya-stats__value {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--bya-ink);
	font-size: var(--bya-text-stat);
	font-weight: 700;
	line-height: 1.25;
	white-space: nowrap;
}

.bya-stats__figure {
	display: inline-flex;
}

.bya-stats__prefix {
	color: var(--bya-gold);
}

.bya-stats__unit {
	margin-block-start: 0.3em;
	color: var(--bya-ink-3);
	font-size: 0.42em;
	font-weight: 600;
}

.bya-stats__label {
	margin-block-start: 2px !important;
	color: var(--bya-ink-3);
	font-size: var(--bya-text-small);
	font-weight: 500;
	line-height: 1.6;
}

.bya-stats__note {
	margin-block-start: 4px !important;
	color: var(--bya-ink-3);
	font-size: var(--bya-text-micro);
	line-height: 1.7;
}

.bya-on-stage .bya-stats {
	background-color: var(--bya-stage-glass);
	box-shadow: inset 0 0 0 1px var(--bya-stage-line-strong);
}

.bya-on-stage .bya-stats__item + .bya-stats__item::before {
	background: linear-gradient(180deg, transparent, var(--bya-stage-line-strong) 25% 75%, transparent);
}

.bya-on-stage .bya-stats__value {
	color: var(--bya-stage-ink);
}

.bya-on-stage .bya-stats__prefix {
	color: var(--bya-gold-light);
}

.bya-on-stage :is(.bya-stats__unit, .bya-stats__label, .bya-stats__note) {
	color: var(--bya-stage-ink-2);
}

/* تبلت و گوشی: دو در دو، با خط افقی میان دو ردیف */
@media (max-width: 1024px) {
	.bya-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.bya-stats__item:nth-child(odd)::before {
		display: none;
	}

	.bya-stats__item:nth-child(n + 3)::after {
		content: "";
		position: absolute;
		inset-block-start: 0;
		inset-inline: 10%;
		block-size: 1px;
		background: linear-gradient(90deg, transparent, var(--bya-border-strong) 25% 75%, transparent);
	}

	.bya-stats__item:nth-child(n + 3)::before {
		inset-block: 24% 24%;
	}
}

@media (max-width: 767px) {
	.bya-stats__item {
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 12px;
		padding: 18px 16px;
	}


	.bya-stats .bya-ico {
		--bya-ico-size: 38px;
		border-radius: 12px;
	}

	.bya-stats .bya-ico .bya-icon {
		inline-size: 18px;
		block-size: 18px;
	}

	.bya-stats__label {
		font-size: var(--bya-text-micro);
	}
}

/* ================================================================ فهرست و کارت‌ها */

.bya-index {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bya-index p {
	margin: 0;
}

.bya-index__item {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-content: start;
	gap: 14px;
}

.bya-index__num {
	color: var(--bya-gold-deep);
	font-size: var(--bya-text-small);
	font-weight: 600;
	line-height: 1.6;
}

.bya-index__tag {
	margin-block-end: 6px !important;
	color: var(--bya-pine);
	font-size: 0.8125rem;
	font-weight: 600;
}

.bya-index__title {
	margin: 0 0 6px;
	color: var(--bya-ink);
	font-size: var(--bya-text-title);
	line-height: 1.6;
}

.bya-index__title a {
	color: inherit;
	text-decoration: none;
}

.bya-index__title a:hover {
	color: var(--bya-pine);
}

.bya-index__text {
	color: var(--bya-ink-3);
	font-size: var(--bya-text-card);
	line-height: 1.85;
}

/* نشان کوچک زیر متن: خط مویی طلایی، بی زمینه‌ی پررنگ */
.bya-index__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-block-start: 16px !important;
	padding: 4px 12px;
	border: 1px solid color-mix(in oklab, var(--bya-gold) 32%, transparent);
	border-radius: var(--bya-radius-pill);
	background-color: color-mix(in oklab, var(--bya-gold-soft) 70%, transparent);
	color: var(--bya-gold-deep);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.7;
}

/* ---- دفتر: دو ستون، هر ردیف با خط بالای خودش */
.bya-index--ledger {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: clamp(32px, 6vw, 96px);
}

.bya-index--ledger .bya-index__item {
	grid-template-columns: auto minmax(0, 1fr);
	padding-block: 26px;
	border-block-start: 1px solid var(--bya-border);
}

/* ---- ستون‌ها: کنار هم، جدا با خط عمودی */
.bya-index--columns {
	display: grid;
	grid-template-columns: repeat(var(--bya-cols, 4), minmax(0, 1fr));
	row-gap: 40px;
}

.bya-index--columns .bya-index__item {
	gap: 18px;
	padding-inline: clamp(18px, 2.4vw, 32px);
	border-inline-start: 1px solid var(--bya-border);
}

.bya-index--columns.bya-index--cols-2 .bya-index__item:nth-child(2n + 1),
.bya-index--columns.bya-index--cols-3 .bya-index__item:nth-child(3n + 1),
.bya-index--columns.bya-index--cols-4 .bya-index__item:nth-child(4n + 1) {
	padding-inline-start: 0;
	border-inline-start: 0;
}

/* ---- کارت‌ها */
.bya-index--cards {
	display: grid;
	grid-template-columns: repeat(var(--bya-cols, 4), minmax(0, 1fr));
	gap: clamp(14px, 1.6vw, 22px);
}

.bya-index--cards .bya-index__item {
	gap: 18px;
	padding: clamp(20px, 2vw, 26px);
	border-radius: var(--bya-radius-l);
	transition:
		transform var(--bya-duration-mid) var(--bya-ease),
		box-shadow var(--bya-duration-mid) var(--bya-ease),
		background-color var(--bya-duration-mid) var(--bya-ease);
}

.bya-index--border .bya-index__item {
	box-shadow: inset 0 0 0 1px var(--bya-border-strong);
}

.bya-index--border .bya-index__item:hover {
	background-color: var(--bya-surface);
	box-shadow: inset 0 0 0 1px var(--bya-border), var(--bya-shadow-s);
	transform: translateY(-2px);
}

.bya-index--surface .bya-index__item {
	background-color: var(--bya-surface);
	box-shadow: 0 0 0 1px color-mix(in oklab, var(--bya-border) 70%, transparent), var(--bya-shadow-xs);
}

.bya-index--surface .bya-index__item:hover {
	box-shadow: 0 0 0 1px var(--bya-border), var(--bya-shadow-m);
	transform: translateY(-3px);
}

.bya-index--tint .bya-index__item {
	background-color: var(--bya-mint-pale);
	box-shadow: inset 0 0 0 1px var(--bya-sage-line);
}

.bya-index--bare .bya-index__item {
	padding: 0;
}

.bya-index--cards .bya-index__num {
	position: absolute;
	inset-block-start: clamp(20px, 2vw, 26px);
	inset-inline-end: clamp(20px, 2vw, 26px);
	color: color-mix(in oklab, var(--bya-gold-deep) 70%, transparent);
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
	.bya-index--cards .bya-index__item {
		transition: none;
	}

	.bya-index--cards .bya-index__item:hover {
		transform: none;
	}
}

/* ---- فهرست آیکن‌دار: آیکن کنار متن، بی قاب */
.bya-index--list {
	display: grid;
	grid-template-columns: repeat(var(--bya-cols, 1), minmax(0, 1fr));
	gap: 28px clamp(24px, 3vw, 44px);
}

.bya-index--list .bya-index__item--icon {
	grid-template-columns: auto minmax(0, 1fr);
	gap: 18px;
}

.bya-index--list .bya-ico {
	--bya-ico-size: 42px;
}

.bya-index--list .bya-index__title {
	margin-block-end: 4px;
	font-size: var(--bya-text-title);
}

/* ---- برچسب‌ها: یک ردیف قرص کوتاه آیکن‌دار */
.bya-index--chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.bya-index--chips .bya-index__item {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	/* آیکن گرد هم‌مرکز با قرص (فاصله‌ی آغاز = فاصله‌ی بالا)، و نوشته با فاصله‌ی برابرِ حاشیه‌ی پایان */
	padding-block: 6px;
	padding-inline: 6px 16px;
	border-radius: var(--bya-radius-pill);
	background-color: color-mix(in oklab, var(--bya-surface) 70%, transparent);
	box-shadow: inset 0 0 0 1px var(--bya-border-strong);
}

.bya-index--chips .bya-ico {
	--bya-ico-size: 30px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--bya-pine) 18%, transparent);
}

.bya-index--chips .bya-ico::after {
	display: none;
}

.bya-index--chips .bya-ico .bya-icon {
	inline-size: 16px;
	block-size: 16px;
}

.bya-index--chips .bya-index__title {
	margin: 0;
	color: var(--bya-ink);
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.6;
}

.bya-on-stage .bya-index--chips .bya-index__item {
	background-color: var(--bya-stage-glass);
	box-shadow: inset 0 0 0 1px var(--bya-stage-line-strong);
}

.bya-on-stage .bya-index--chips .bya-ico {
	box-shadow: none;
}

@media (max-width: 767px) {
	.bya-index--chips {
		gap: 8px;
	}

	.bya-index--chips .bya-index__item {
		gap: 7px;
		padding-block: 4px;
		padding-inline: 4px 12px;
	}

	.bya-index--chips .bya-ico {
		--bya-ico-size: 24px;
	}

	.bya-index--chips .bya-ico .bya-icon {
		inline-size: 14px;
		block-size: 14px;
	}

	.bya-index--chips .bya-index__title {
		font-size: 0.8125rem;
	}
}

/* ---- فشرده */
.bya-index--compact .bya-index__item {
	padding-block: 16px;
	border-block-start: 1px solid var(--bya-border);
}

/* ---- روی بخش تیره */
.bya-on-stage .bya-index__item {
	border-color: var(--bya-stage-line);
}

.bya-on-stage .bya-index__num {
	color: var(--bya-gold-light);
}

.bya-on-stage .bya-index__title {
	color: var(--bya-stage-ink);
}

.bya-on-stage .bya-index__text {
	color: var(--bya-stage-ink-2);
}

.bya-on-stage .bya-index__tag {
	color: var(--bya-mint);
}

.bya-on-stage .bya-index--border .bya-index__item {
	box-shadow: inset 0 0 0 1px var(--bya-stage-line-strong);
}

.bya-on-stage .bya-index--border .bya-index__item:hover,
.bya-on-stage .bya-index--surface .bya-index__item {
	background-color: var(--bya-stage-glass);
	box-shadow: inset 0 0 0 1px var(--bya-stage-line-strong);
}

@media (max-width: 1024px) {
	.bya-index--columns,
	.bya-index--cards {
		grid-template-columns: repeat(min(2, var(--bya-cols, 2)), minmax(0, 1fr));
	}

	.bya-index--columns .bya-index__item:nth-child(n) {
		padding-inline-start: clamp(18px, 2.4vw, 32px);
		border-inline-start: 1px solid var(--bya-border);
	}

	.bya-index--columns .bya-index__item:nth-child(odd) {
		padding-inline-start: 0;
		border-inline-start: 0;
	}

	.bya-index--list {
		grid-template-columns: repeat(min(2, var(--bya-cols, 1)), minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.bya-index--ledger,
	.bya-index--columns,
	.bya-index--cards,
	.bya-index--list {
		grid-template-columns: minmax(0, 1fr);
	}

	.bya-index--columns {
		row-gap: 0;
	}

	.bya-index--columns .bya-index__item:nth-child(n) {
		gap: 10px;
		padding-block: 24px;
		padding-inline: 0;
		border-inline-start: 0;
		border-block-start: 1px solid var(--bya-border);
	}

	.bya-on-stage .bya-index--columns .bya-index__item:nth-child(n) {
		border-block-start-color: var(--bya-stage-line);
	}

	.bya-index--ledger .bya-index__item {
		padding-block: 22px;
	}

	.bya-index--cards .bya-index__item {
		gap: 18px;
	}

	/* کارت‌های کوتاه دوستونه (مثل چهار جنس) در گوشی هم دو ستون می‌مانند، فشرده‌تر */
	.bya-index--cards.bya-index--cols-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.bya-index--cards.bya-index--cols-2 .bya-index__item {
		gap: 12px;
		padding: 16px 14px;
		border-radius: var(--bya-radius);
	}

	.bya-index--cards.bya-index--cols-2 .bya-ico {
		--bya-ico-size: 40px;
		border-radius: 12px;
	}

	.bya-index--cards.bya-index--cols-2 .bya-index__title {
		margin-block-end: 4px;
		font-size: 1rem;
	}

	.bya-index--cards.bya-index--cols-2 .bya-index__text {
		font-size: 0.875rem;
		line-height: 1.8;
	}
}

/* ================================================================ شبکه‌ی امکانات (bento) */

.bya-bento {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-rows: minmax(230px, auto);
	grid-auto-flow: dense;
	gap: clamp(14px, 1.5vw, 20px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.bya-bento__item {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: clamp(20px, 2vw, 26px);
	overflow: hidden;
	isolation: isolate;
	border-radius: var(--bya-radius-l);
	transition:
		transform var(--bya-duration-mid) var(--bya-ease),
		box-shadow var(--bya-duration-mid) var(--bya-ease),
		background-color var(--bya-duration-mid) var(--bya-ease);
}

.bya-bento__item--wide {
	grid-column: span 2;
}

.bya-bento__item--tall {
	grid-row: span 2;
}

.bya-bento__item--large {
	grid-column: span 2;
	grid-row: span 2;
}

.bya-bento__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}

.bya-bento__body {
	display: grid;
	gap: 8px;
}

.bya-bento__item p {
	margin: 0;
}

.bya-bento__title {
	margin: 0;
	color: var(--bya-ink);
	font-size: var(--bya-text-title);
	line-height: 1.6;
}

.bya-bento__item--large .bya-bento__title,
.bya-bento__item--tall .bya-bento__title {
	font-size: clamp(1.1875rem, 1.1rem + 0.35vw, 1.4375rem);
	line-height: 1.5;
}

.bya-bento__text {
	color: var(--bya-ink-3);
	font-size: var(--bya-text-card);
	line-height: 1.85;
}

.bya-bento__item--large .bya-bento__text,
.bya-bento__item--tall .bya-bento__text {
	font-size: 1rem;
	max-inline-size: 30rem;
}

/* عدد بزرگ کنار آیکن */
.bya-bento__stat {
	display: grid;
	justify-items: end;
	gap: 2px;
	text-align: end;
}

.bya-bento__stat-num {
	color: var(--bya-ink);
	font-size: clamp(2rem, 1.7rem + 1.1vw, 2.75rem);
	font-weight: 700;
	line-height: 1;
}

.bya-bento__stat-label {
	color: var(--bya-ink-3);
	font-size: 0.8125rem;
	font-weight: 500;
}

.bya-bento__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
}

.bya-bento__chips li {
	padding: 3px 11px;
	border-radius: var(--bya-radius-pill);
	box-shadow: inset 0 0 0 1px var(--bya-border-strong);
	color: var(--bya-ink-2);
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1.8;
}

/* کارت با برش سامانه: برش از لبه‌ی پایان و پایین کارت بیرون می‌زند و لبه‌ی کارت آن را می‌بُرد */
.bya-bento__media {
	--bya-pad: clamp(20px, 2vw, 26px);
	position: relative;
	margin-block: auto calc(-1 * var(--bya-pad));
	margin-inline: var(--bya-pad) calc(-1 * var(--bya-pad));
	padding-block-start: 8px;
	padding-inline-start: 8px;
	border-block-start: 1px solid var(--bya-border);
	border-inline-start: 1px solid var(--bya-border);
	border-start-start-radius: 18px;
	background: linear-gradient(180deg, var(--bya-surface), var(--bya-surface-muted));
	box-shadow: var(--bya-shadow-m);
}

.bya-bento__media img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	border-start-start-radius: 11px;
	box-shadow: 0 0 0 1px color-mix(in oklab, var(--bya-ink) 7%, transparent);
	transition: transform 900ms var(--bya-ease);
	transform-origin: top;
}

.bya-bento__item--media:hover .bya-bento__media img {
	transform: scale(1.012);
}

/* ظاهرها */
.bya-bento__item--border {
	box-shadow: inset 0 0 0 1px var(--bya-border-strong);
}

.bya-bento__item--border:hover {
	background-color: var(--bya-surface);
	box-shadow: inset 0 0 0 1px var(--bya-border), var(--bya-shadow-s);
	transform: translateY(-2px);
}

.bya-bento__item--surface {
	background-color: var(--bya-surface);
	box-shadow: 0 0 0 1px color-mix(in oklab, var(--bya-border) 70%, transparent), var(--bya-shadow-xs);
}

.bya-bento__item--surface:hover {
	box-shadow: 0 0 0 1px var(--bya-border), var(--bya-shadow-m);
	transform: translateY(-2px);
}

.bya-bento__item--tint {
	background-color: var(--bya-mint-pale);
	background-image: radial-gradient(90% 70% at 100% 0%, color-mix(in oklab, var(--bya-surface) 75%, transparent), transparent 70%);
	box-shadow: inset 0 0 0 1px var(--bya-sage-line);
}

.bya-bento__item--cream {
	background-color: var(--bya-cream);
	box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--bya-border-strong) 70%, transparent);
}

.bya-bento__item--tint:hover,
.bya-bento__item--cream:hover {
	transform: translateY(-2px);
	box-shadow: inset 0 0 0 1px var(--bya-sage-line), var(--bya-shadow-s);
}

.bya-bento__item--pine {
	background-color: var(--bya-stage);
	background-image:
		radial-gradient(80% 60% at 85% 0%, color-mix(in oklab, var(--bya-pine-bright) 30%, transparent), transparent 70%),
		radial-gradient(60% 40% at 0% 100%, color-mix(in oklab, var(--bya-gold) 14%, transparent), transparent 70%);
	color: var(--bya-stage-ink-2);
	color-scheme: dark;
}

.bya-bento__item--pine:hover {
	transform: translateY(-2px);
	box-shadow: 0 30px 60px -30px rgb(3 18 13 / 0.6);
}

.bya-bento__item--pine .bya-bento__title,
.bya-bento__item--pine .bya-bento__stat-num {
	color: var(--bya-stage-ink);
}

.bya-bento__item--pine .bya-bento__text,
.bya-bento__item--pine .bya-bento__stat-label {
	color: var(--bya-stage-ink-2);
}

.bya-bento__item--pine .bya-bento__chips li {
	box-shadow: inset 0 0 0 1px var(--bya-stage-line-strong);
	color: var(--bya-stage-ink);
}

.bya-bento__item--pine ::selection {
	background-color: #ecd394;
	color: #0b1f19;
	-webkit-text-fill-color: #0b1f19;
}

/* کارت بلند: متن پایین می‌نشیند و بالایش جای نفس دارد */
.bya-bento__item--tall {
	justify-content: space-between;
}

@media (prefers-reduced-motion: reduce) {
	.bya-bento__item,
	.bya-bento__media img {
		transition: none;
	}

	.bya-bento__item:hover {
		transform: none;
	}
}

@media (max-width: 1024px) {
	.bya-bento {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-rows: minmax(220px, auto);
	}

	.bya-bento__item--tall {
		grid-row: span 1;
	}
}

@media (max-width: 767px) {
	.bya-bento {
		grid-template-columns: minmax(0, 1fr);
		grid-auto-rows: auto;
	}

	.bya-bento__item--wide,
	.bya-bento__item--large {
		grid-column: span 1;
		grid-row: span 1;
	}

	/* کارت فشرده: آیکن کنار عنوان، متن زیرشان */
	.bya-bento__item {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		align-items: center;
		gap: 14px 16px;
		padding: 20px;
	}

	.bya-bento__head {
		display: contents;
	}

	.bya-bento__head .bya-ico {
		--bya-ico-size: 44px;
		grid-row: 1;
		grid-column: 1;
	}

	.bya-bento__stat {
		grid-row: 1;
		grid-column: 2;
		justify-self: end;
	}

	.bya-bento__body {
		display: contents;
	}

	.bya-bento__title {
		grid-row: 1;
		grid-column: 2;
	}

	.bya-bento__item--large .bya-bento__title,
	.bya-bento__item--tall .bya-bento__title {
		font-size: 1.125rem;
	}


	.bya-bento__item:has(.bya-bento__stat) .bya-bento__title {
		grid-row: 2;
		grid-column: 1 / -1;
	}

	.bya-bento__text,
	.bya-bento__chips,
	.bya-bento__media {
		grid-column: 1 / -1;
	}

	.bya-bento__chips {
		margin-block-start: 0;
	}

	.bya-bento__media {
		--bya-pad: 20px;
		margin-block-start: 6px;
	}
}

/* ================================================================ رایانه و گوشی‌ها */

.elementor .e-con > .elementor-widget-baayar-devices,
.elementor .e-con > .elementor-widget-baayar-product-stage,
.elementor .e-con > .elementor-widget-baayar-journey {
	inline-size: 100%;
}

.bya-devices {
	position: relative;
	display: flex;
	justify-content: center;
	inline-size: 100%;
}

.bya-devices__phones {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: clamp(16px, 3vw, 36px);
}

.bya-devices__item {
	flex: 0 1 250px;
	margin: 0;
	/* دومی کمی پایین‌تر: دو گوشی کنار هم، نه دو کارت هم‌تراز */
	transform: translateY(calc(var(--bya-i, 0) * 44px));
}

.bya-devices__caption {
	margin-block-start: 16px;
	color: var(--bya-ink-3);
	font-size: var(--bya-text-small);
	text-align: center;
}

/*
 * خوشه: نمای رایانه پشت، سمت پایان؛ دو گوشی جلو، سمت آغاز، روی لبه‌ی پایین رایانه. برچسب «هم‌زمان» میان
 * آن‌ها با یک نقطه‌ی نبض‌دار — تنها حرکت پیوسته‌ی این بخش، و با حرکت کم خاموش.
 */
.bya-devices--cluster {
	display: block;
	padding-block-end: 34%;
}

.bya-devices--cluster .bya-devices__desktop {
	inline-size: 90%;
	margin: 0;
	margin-inline-start: auto;
}

.bya-devices--cluster .bya-devices__phones {
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 0;
	inline-size: 66%;
	justify-content: flex-start;
	gap: 5%;
}

.bya-devices--cluster .bya-devices__item {
	flex: 0 0 44%;
	transform: translateY(calc(var(--bya-i, 0) * -12%));
}

.bya-devices--cluster .bya-devices__caption {
	display: none;
}

.bya-devices__sync {
	position: absolute;
	inset-block-start: 10%;
	inset-inline-start: 2%;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding-block: 7px;
	padding-inline: 14px 16px;
	border-radius: var(--bya-radius-pill);

	background-color: var(--bya-surface);
	box-shadow: 0 0 0 1px var(--bya-border), var(--bya-shadow-m);
	color: var(--bya-ink);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.6;
	white-space: nowrap;
}

.bya-devices__pulse {
	position: relative;
	inline-size: 9px;
	block-size: 9px;
	border-radius: 50%;
	background-color: var(--bya-pine-bright);
}

.bya-devices__pulse::after {
	content: "";
	position: absolute;
	inset: -5px;
	border-radius: 50%;
	border: 2px solid var(--bya-pine-bright);
	opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
	.bya-devices__pulse::after {
		animation: bya-pulse 2.4s var(--bya-ease) infinite;
	}
}

@keyframes bya-pulse {
	0% {
		opacity: 0.7;
		transform: scale(0.6);
	}

	100% {
		opacity: 0;
		transform: scale(1.6);
	}
}

@media (max-width: 767px) {
	.bya-devices__item:nth-child(n + 3) {
		display: none;
	}

	.bya-devices__item {
		transform: translateY(calc(var(--bya-i, 0) * 28px));
	}

	.bya-devices--cluster {
		padding-block-end: 46%;
	}

	.bya-devices--cluster .bya-devices__desktop {
		inline-size: 100%;
	}

	.bya-devices--cluster .bya-devices__phones {
		inline-size: 82%;
		inset-inline-start: 50%;
		transform: translateX(50%);
		justify-content: center;
	}

	.bya-devices__sync {
		inset-block-start: auto;
		inset-block-end: 103%;
		inset-inline-start: 50%;
		transform: translateX(50%);
		font-size: 0.8125rem;
	}
}

/* ================================================================ تصویر توضیح‌دار */

.bya-spots {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	gap: clamp(28px, 4.4vw, 64px);
	align-items: start;
}

.bya-spots--list-end {
	grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
}

.bya-spots--list-end .bya-spots__list {
	order: 2;
}

/*
 * فهرست: ردیف‌های هم‌قد با خط مویی میانشان، مثل ردیف‌های یک دفتر. ردیف انتخاب‌شده شماره‌ی طلایی می‌گیرد
 * (همان رنگ نقطه‌ی روشن روی تصویر) و متنش زیر عنوان باز می‌شود. در دسکتاپ فهرست کنار تصویر بلند ثابت
 * می‌ماند تا با پیمایش از دید نرود.
 */
.bya-spots__list {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
	border-block-start: 1px solid var(--bya-border);
}

.bya-spots__item {
	position: relative;
	border-block-end: 1px solid var(--bya-border);
}

.bya-spots__item::before {
	content: "";
	position: absolute;
	inset-block: -1px;
	inset-inline-start: 0;
	inline-size: 2px;
	background: linear-gradient(180deg, var(--bya-gold-light), var(--bya-gold));
	opacity: 0;
	transition: opacity var(--bya-duration-mid) var(--bya-ease);
}

.bya-spots__item[data-active="true"]::before {
	opacity: 1;
}

.bya-spots__title {
	margin: 0;
	font-size: 1rem;
	line-height: 1.6;
}

.bya-spots__trigger {
	display: flex;
	align-items: center;
	gap: 14px;
	inline-size: 100%;
	min-block-size: 54px;
	padding-block: 8px;
	padding-inline: 16px 4px;
	border: 0;
	background: none;
	color: var(--bya-ink-2);
	font: inherit;
	font-weight: 600;
	text-align: start;
	cursor: pointer;
	transition: color var(--bya-duration-fast) linear;
}

.bya-spots__item[data-preview] .bya-spots__trigger,
.bya-spots__trigger:hover {
	color: var(--bya-pine);
}

.bya-spots__item[data-active="true"] .bya-spots__trigger {
	color: var(--bya-ink);
	cursor: default;
}

.bya-spots__num {
	display: grid;
	place-items: center;
	flex: none;
	inline-size: 28px;
	block-size: 28px;
	border-radius: 50%;
	background-color: var(--bya-surface);
	box-shadow: inset 0 0 0 1px var(--bya-sage-line);
	color: var(--bya-pine);
	font-size: var(--bya-text-micro);
	font-weight: 700;
	transition:
		background-color var(--bya-duration-fast) linear,
		color var(--bya-duration-fast) linear,
		box-shadow var(--bya-duration-fast) linear;
}

/* شماره با content می‌آید تا در متن عنوان (و نتیجه‌ی جست‌وجو) «۱جمع…» نشود */
.bya-spots__num::before {
	content: attr(data-n);
}

.bya-spots__item[data-active="true"] .bya-spots__num {
	background-color: var(--bya-gold-deep);
	box-shadow: 0 0 0 4px color-mix(in oklab, var(--bya-gold) 18%, transparent);
	color: #fff;
}

/* فاصله‌ها روی خود متن است، نه روی ظرف جمع‌شونده (padding ظرف با بلندی صفر هم می‌ماند) */
.bya-spots__text {
	margin: 0;
	padding-block: 0 18px;
	padding-inline: 58px 8px;
	color: var(--bya-ink-3);
	font-size: var(--bya-text-card);
	line-height: 1.85;
}

/* با JS: فقط ردیف انتخاب‌شده باز است؛ باز و بسته شدن با grid-template-rows، بی پرش */
.bya-spots[data-ready] .bya-spots__detail {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 420ms var(--bya-ease);
}

.bya-spots[data-ready] .bya-spots__detail-inner {
	min-block-size: 0;
	overflow: hidden;
	opacity: 0;
	transition: opacity 300ms var(--bya-ease);
}

.bya-spots[data-ready] .bya-spots__item[data-active="true"] .bya-spots__detail {
	grid-template-rows: 1fr;
}

.bya-spots[data-ready] .bya-spots__item[data-active="true"] .bya-spots__detail-inner {
	opacity: 1;
	transition-delay: 100ms;
}

@media (min-width: 1025px) {
	.bya-spots__list {
		position: sticky;
		inset-block-start: calc(var(--bya-header-height) + 40px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.bya-spots[data-ready] .bya-spots__detail,
	.bya-spots[data-ready] .bya-spots__detail-inner,
	.bya-spots__item::before {
		transition: none;
	}
}

.bya-spots__figure {
	margin: 0;
}

.bya-spots__canvas {
	position: relative;
}

.bya-spots__layer {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/*
 * جای نقطه‌ها مختصات خود تصویر است و تصویر در راست‌چین برعکس نمی‌شود؛ پس این‌جا left/top فیزیکی
 * درست است (CLAUDE.md قاعده‌ی ۱۰: «فقط برای چیزهای واقعاً فیزیکی»).
 */
.bya-spots__dot {
	position: absolute;
	left: var(--x);
	top: var(--y);
	z-index: 2;
	display: grid;
	place-items: center;
	inline-size: 30px;
	block-size: 30px;
	border-radius: 50%;
	background-color: var(--bya-pine);
	color: #fff;
	font-size: var(--bya-text-micro);
	font-weight: 700;
	box-shadow:
		0 0 0 4px color-mix(in oklab, var(--bya-surface) 85%, transparent),
		0 6px 16px -4px rgb(0 0 0 / 0.35);
	translate: -50% -50%;
	transition:
		transform var(--bya-duration-fast) var(--bya-ease),
		box-shadow var(--bya-duration-fast) var(--bya-ease),
		background-color var(--bya-duration-fast) linear;
}

.bya-spots__dot[data-active="true"] {
	background-color: var(--bya-gold-deep);
	transform: scale(1.18);
	box-shadow:
		0 0 0 4px var(--bya-surface),
		0 0 0 9px color-mix(in oklab, var(--bya-gold) 28%, transparent),
		0 8px 20px -4px rgb(0 0 0 / 0.4);
}

.bya-spots__area {
	position: absolute;
	left: var(--ax);
	top: var(--ay);
	z-index: 1;
	width: var(--aw);
	height: var(--ah);
	border-radius: 12px;
	box-shadow: 0 0 0 2px var(--bya-gold);
	opacity: 0;
	transition:
		opacity 320ms var(--bya-ease),
		box-shadow 320ms var(--bya-ease);
}

/* وقتی خواننده روی فهرست است، بقیه‌ی تصویر کمی کم‌رنگ می‌شود تا ناحیه دیده شود */
.bya-spots:is(:hover, :focus-within) .bya-spots__area[data-active="true"] {
	box-shadow:
		0 0 0 2px var(--bya-gold),
		0 0 0 100vmax color-mix(in oklab, var(--bya-ink) 12%, transparent);
}

.bya-spots__canvas {
	overflow: hidden;
	border-radius: 14px;
}

.bya-spots[data-ready] .bya-spots__area[data-active="true"] {
	opacity: 1;
}

/* نقطه‌های روی تصویر هم ردیف همان شماره را باز می‌کنند (فقط با نشانگر؛ صفحه‌کلید از فهرست می‌رود) */
.bya-spots[data-ready] .bya-spots__dot {
	pointer-events: auto;
	cursor: pointer;
}


@media (max-width: 1024px) {
	.bya-spots {
		grid-template-columns: minmax(0, 1fr);
	}

	.bya-spots__figure {
		order: -1;
	}

	.bya-spots--list-end .bya-spots__list {
		order: 0;
	}
}

@media (max-width: 767px) {
	.bya-spots__dot {
		inline-size: 22px;
		block-size: 22px;
		font-size: 0.6875rem;
		box-shadow: 0 0 0 3px color-mix(in oklab, var(--bya-surface) 85%, transparent);
	}

	.bya-spots__trigger {
		padding-inline-start: 12px;
	}

	.bya-spots__text {
		padding-inline: 54px 4px;
	}
}

/* ================================================================ یک روز کاری */

/*
 * دسکتاپ با JS (data-ready، ۱۰۲۵ و بیشتر): مسیر بلند (track) و پنل ثابت (sticky) درونش. ستون آغاز قدم‌ها،
 * ستون پایان صحنه‌ی نماها. قدم فعال data-active و هر قدم data-state (past/current/next) دارد. با GSAP،
 * جابه‌جایی نماها با پیمایش هم‌گام است؛ بی آن، همین CSS آن‌ها را با transition عوض می‌کند.
 */
.bya-journey {
	--bya-panel: 100vh;
	--bya-step-scroll: 58vh;
	position: relative;
}

.bya-journey__sticky {
	position: relative;
}

.bya-journey__steps {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bya-journey__step {
	position: relative;
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	gap: 16px;
}

.bya-journey__marker {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	inline-size: 40px;
	block-size: 40px;
	border-radius: 12px;
	background-color: var(--bya-stage);
	box-shadow: inset 0 0 0 1px var(--bya-stage-line-strong);
	color: var(--bya-stage-ink-2);
	transition:
		background-color var(--bya-duration-mid) var(--bya-ease),
		box-shadow var(--bya-duration-mid) var(--bya-ease),
		color var(--bya-duration-mid) var(--bya-ease);
}

.bya-journey__marker .bya-icon {
	inline-size: 19px;
	block-size: 19px;
}

.bya-journey__step[data-active="true"] .bya-journey__marker {
	background: linear-gradient(160deg, var(--bya-pine-bright), var(--bya-pine) 60%, var(--bya-pine-deep));
	box-shadow:
		inset 0 1px 0 rgb(255 255 255 / 0.3),
		0 0 0 5px color-mix(in oklab, var(--bya-pine-bright) 18%, transparent),
		0 10px 24px -10px color-mix(in oklab, var(--bya-pine-bright) 80%, transparent);
	color: #fff;
}

.bya-journey__body {
	min-inline-size: 0;
}

.bya-journey__time {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 2px;
	color: var(--bya-gold-light);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.7;
}

.bya-journey__num {
	color: var(--bya-stage-ink-2);
	font-weight: 500;
}

.bya-journey__num::after {
	content: "";
	display: inline-block;
	inline-size: 14px;
	block-size: 1px;
	margin-inline-start: 10px;
	vertical-align: middle;
	background-color: var(--bya-stage-line-strong);
}

.bya-journey__title {
	margin: 0;
	font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
	line-height: 1.55;
}

.bya-journey__jump {
	display: flex;
	align-items: center;
	inline-size: 100%;
	min-block-size: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--bya-stage-ink);
	font: inherit;
	text-align: start;
	cursor: pointer;
	transition: color var(--bya-duration-mid) var(--bya-ease);
}

.bya-journey__detail-inner {
	padding-block-start: 10px;
}

.bya-journey__text {
	margin: 0;
	color: var(--bya-stage-ink-2);
	font-size: var(--bya-text-card);
	line-height: 1.85;
}

.bya-journey__points {
	display: grid;
	gap: 4px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.bya-journey__points li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	color: var(--bya-stage-ink);
	font-size: 0.875rem;
	line-height: 1.8;
}

.bya-journey__points .bya-icon {
	flex: none;
	inline-size: 16px;
	block-size: 16px;
	margin-block-start: 0.22em;
	color: var(--bya-mint);
}

.bya-journey__card-media,
.bya-journey__controls {
	display: none;
}


.bya-journey__controls[hidden] {
	display: none !important;
}

/* صحنه */
.bya-journey__stage {
	position: relative;
}

.bya-journey__glow {
	position: absolute;
	inset: -8% -4% 0;
	z-index: 0;
	background: radial-gradient(closest-side, color-mix(in oklab, var(--bya-pine-bright) 32%, transparent), transparent);
	pointer-events: none;
}

.bya-journey__screens {
	position: relative;
	z-index: 1;
	aspect-ratio: 1172 / 760;
}

/* با GSAP نمای تازه از پایین روی نمای قبلی می‌لغزد؛ لبه‌ی پایین صحنه آن را می‌بُرد (سایه‌ها بیرون می‌مانند) */
.bya-journey--scrub .bya-journey__screens,
.bya-journey--scrub .bya-journey__phones {
	clip-path: inset(-80px -80px 0 -80px);
}

.bya-journey__screen {
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 8px;
	border-radius: 22px;
	background: linear-gradient(180deg, rgb(255 255 255 / 0.1), rgb(255 255 255 / 0.04));
	box-shadow:
		inset 0 0 0 1px rgb(255 255 255 / 0.13),
		var(--bya-shadow-dark);
	opacity: 0;
	transform: translate3d(0, 5%, 0) scale(0.96);
	transition:
		opacity 600ms var(--bya-ease),
		transform 900ms var(--bya-ease-out);
	will-change: opacity, transform;
}

.bya-journey__screen[data-state="past"] {
	transform: translate3d(0, -3%, 0) scale(0.97);
}

.bya-journey__screen[data-active="true"] {
	opacity: 1;
	transform: none;
}

.bya-journey__screen img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	border-radius: 14px;
	object-fit: cover;
	object-position: top center;
}

.bya-journey__phones {
	position: absolute;
	z-index: 2;
	inset-block-end: -9%;
	inset-inline-start: -5%;
	inline-size: 23%;
	aspect-ratio: 780 / 1688;
}

.bya-journey__phone {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	transform: translate3d(0, 8%, 0);
	transition:
		opacity 600ms var(--bya-ease),
		transform 900ms var(--bya-ease-out);
	will-change: opacity, transform;
}

.bya-journey__phone[data-active="true"] {
	opacity: 1;
	transform: none;
}

.bya-journey__phone img {
	block-size: 100%;
	object-fit: cover;
	object-position: top center;
}

@media (min-width: 1025px) {
	.bya-journey__sticky {
		display: grid;
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		gap: clamp(48px, 5vw, 96px);
		align-items: center;
	}

	.bya-journey__steps {
		display: grid;
		gap: 26px;
	}

	/* صحنه در صفحه‌ی کوتاه کوچک‌تر می‌شود تا گوشی پایینش هم با فاصله از لبه‌ی صفحه بماند */
	.bya-journey__stage {
		justify-self: center;
		inline-size: min(100%, calc((100vh - var(--bya-header-height) - 150px) * 1.45));
		padding-block-end: 6%;
	}


	.bya-journey[data-ready] .bya-journey__track {
		block-size: calc(var(--bya-panel) + (var(--bya-steps) - 1) * var(--bya-step-scroll));
	}

	.bya-journey[data-ready] .bya-journey__sticky {
		position: sticky;
		inset-block-start: 0;
		block-size: var(--bya-panel);
		padding-block: calc(var(--bya-header-height) + 12px) 32px;
	}

	.bya-journey[data-ready] .bya-journey__rail {
		position: relative;
	}

	/*
	 * خط پیشرفت: تکه‌ای میان نشانه‌ی هر قدم و نشانه‌ی قدم بعد (نه یک خط تا ته فهرست، که از قدم آخر
	 * می‌گذشت). تکه‌ی قدم‌های گذشته رنگ می‌گیرد.
	 */
	.bya-journey[data-ready] .bya-journey__step:not(:last-child)::after {
		content: "";
		position: absolute;
		inset-block: 45px -5px;
		inset-inline-start: 19px;
		inline-size: 2px;
		background-color: var(--bya-stage-line-strong);
	}

	.bya-journey[data-ready] .bya-journey__step[data-state="past"]::after {
		background: linear-gradient(180deg, var(--bya-mint), var(--bya-pine-bright));
	}

	.bya-journey[data-ready] .bya-journey__step[data-active="true"]::after {
		background: linear-gradient(180deg, var(--bya-pine-bright), var(--bya-stage-line-strong) 60%);
	}

	.bya-journey[data-ready] .bya-journey__steps {
		gap: 0;
	}

	.bya-journey[data-ready] .bya-journey__step {
		padding-block: 5px;
	}

	/*
	 * ردیف هر قدم مثل ردیف دفتر: عنوان سمت آغاز، وقت روز کم‌رنگ ته همان خط؛ متن و نکته‌ها زیرشان.
	 * شماره‌ی قدم در دسکتاپ لازم نیست (نشانه‌ها و خط پیشرفت ترتیب را نشان می‌دهند).
	 */
	.bya-journey[data-ready] .bya-journey__body {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		column-gap: 16px;
	}

	.bya-journey[data-ready] .bya-journey__title {
		grid-row: 1;
		grid-column: 1;
	}

	.bya-journey[data-ready] .bya-journey__time {
		grid-row: 1;
		grid-column: 2;
		align-self: center;
		margin: 0;
	}

	.bya-journey[data-ready] .bya-journey__num {
		display: none;
	}

	.bya-journey[data-ready] .bya-journey__detail {
		grid-column: 1 / -1;
	}

	.bya-journey[data-ready] .bya-journey__jump {
		min-block-size: 40px;
	}

	/* فاصله‌ها روی فرزندان است، نه روی ظرف جمع‌شونده (padding ظرف با بلندی صفر هم می‌ماند) */
	.bya-journey[data-ready] .bya-journey__detail-inner {
		padding: 0;
	}

	.bya-journey[data-ready] .bya-journey__detail-inner > :last-child {
		margin-block-end: 12px;
	}


	/* قدم‌های غیرفعال جمع‌اند: فقط شماره، وقت و عنوان. متنشان در HTML هست و صفحه‌خوان آن را می‌خواند. */
	.bya-journey[data-ready] .bya-journey__detail {
		display: grid;
		grid-template-rows: 0fr;
		transition: grid-template-rows 520ms var(--bya-ease);
	}

	.bya-journey[data-ready] .bya-journey__detail-inner {
		min-block-size: 0;
		overflow: hidden;
		opacity: 0;
		transition: opacity 420ms var(--bya-ease);
	}

	.bya-journey[data-ready] .bya-journey__step[data-active="true"] .bya-journey__detail {
		grid-template-rows: 1fr;
	}

	.bya-journey[data-ready] .bya-journey__step[data-active="true"] .bya-journey__detail-inner {
		opacity: 1;
		transition-delay: 120ms;
	}

	.bya-journey[data-ready] .bya-journey__step:not([data-active="true"]) .bya-journey__jump {
		color: color-mix(in oklab, var(--bya-stage-ink) 52%, transparent);
	}

	.bya-journey[data-ready] .bya-journey__step:not([data-active="true"]) .bya-journey__jump:hover {
		color: var(--bya-stage-ink);
	}

	.bya-journey[data-ready] .bya-journey__step:not([data-active="true"]) .bya-journey__time {
		color: color-mix(in oklab, var(--bya-gold-light) 60%, transparent);
	}

	.bya-journey[data-ready] .bya-journey__title {
		font-size: 1rem;
	}

	.bya-journey[data-ready] .bya-journey__step[data-active="true"] .bya-journey__title {
		font-size: clamp(1.125rem, 1rem + 0.4vw, 1.3125rem);
	}

	/* صفحه‌ی خیلی کوتاه: نکته‌ها جا نمی‌شوند؛ متن قدم می‌ماند */
	@media (max-height: 680px) {
		.bya-journey[data-ready] .bya-journey__points {
			display: none;
		}

		.bya-journey[data-ready] .bya-journey__step {
			padding-block: 3px;
		}

		.bya-journey[data-ready] .bya-journey__step:not(:last-child)::after {
			inset-block: 43px -3px;
		}
	}


}

/*
 * تبلت و گوشی: کارت‌های افقی که با انگشت ورق می‌خورند، هر کارت با نمای گوشی همان قدم بالایش. صحنه‌ی
 * دسکتاپ پنهان است (و تصویرهایش lazy‌اند، پس بارگذاری نمی‌شوند).
 */
@media (max-width: 1024px) {
	.bya-journey__stage {
		display: none;
	}

	.bya-journey__steps {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: min(80vw, 360px);
		gap: 14px;
		margin-inline: calc(-1 * var(--bya-gutter));
		padding: 4px var(--bya-gutter) 8px;
		overflow-x: auto;
		overscroll-behavior-inline: contain;
		scroll-snap-type: inline mandatory;
		scroll-padding-inline: var(--bya-gutter);
		scrollbar-width: none;
	}

	.bya-journey__steps::-webkit-scrollbar {
		display: none;
	}

	.bya-journey__step {
		grid-template-columns: minmax(0, 1fr);
		align-content: start;
		gap: 0;
		padding: 0 20px 24px;
		overflow: hidden;
		border-radius: 22px;
		background: linear-gradient(180deg, color-mix(in oklab, var(--bya-stage-ink) 7%, transparent), color-mix(in oklab, var(--bya-stage-ink) 2%, transparent));
		box-shadow: inset 0 0 0 1px var(--bya-stage-line-strong);
		scroll-snap-align: start;
	}

	.bya-journey__marker {
		display: none;
	}

	.bya-journey__card-media {
		display: block;
		order: -1;
		block-size: 300px;
		margin: 0 -20px 20px;
		padding: 22px 20px 0;
		overflow: hidden;
		background: radial-gradient(70% 90% at 50% 100%, color-mix(in oklab, var(--bya-pine-bright) 34%, transparent), transparent 75%);
		-webkit-mask-image: linear-gradient(180deg, #000 72%, transparent);
		mask-image: linear-gradient(180deg, #000 72%, transparent);
	}

	.bya-journey__card-media .bya-frame--phone {
		inline-size: 64%;
		margin-inline: auto;
	}

	.bya-journey__body {
		display: flex;
		flex-direction: column;
	}

	.bya-journey__controls {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 16px;
		margin-block-start: 20px;
	}

	.bya-journey__count {
		margin: 0;
		min-inline-size: 4.5rem;
		color: var(--bya-stage-ink-2);
		font-size: 0.9375rem;
		text-align: center;
	}

	.bya-journey__count [data-current] {
		color: var(--bya-stage-ink);
		font-weight: 700;
	}

	.bya-journey__btn {
		display: grid;
		place-items: center;
		inline-size: 46px;
		block-size: 46px;
		padding: 0;
		border: 1px solid var(--bya-stage-line-strong);
		border-radius: 50%;
		background: transparent;
		color: var(--bya-stage-ink);
		cursor: pointer;
		transition: opacity var(--bya-duration-fast) linear, background-color var(--bya-duration-fast) linear;
	}

	.bya-journey__btn:hover:not(:disabled) {
		background-color: var(--bya-stage-glass);
	}

	.bya-journey__btn:disabled {
		opacity: 0.35;
		cursor: default;
	}

	.bya-journey__jump {
		cursor: default;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bya-journey__screen,
	.bya-journey__phone,
	.bya-journey__detail,
	.bya-journey__detail-inner,
	.bya-journey__marker {
		transition: none !important;
	}
}

/* ویرایشگر: همه‌ی قدم‌ها باز و صحنه‌ی قدم اول، بی مسیر بلند */
.elementor-editor-active .bya-journey__track {
	block-size: auto !important;
}

.elementor-editor-active .bya-journey__sticky {
	position: relative !important;
	block-size: auto !important;
}

/* ================================================================ نوار مقاله‌ها */

/* تا مقاله‌ای نیست، بخشی که این ابزارک در آن است دیده نمی‌شود (کلاس bya-rail-section روی بخش) */
.bya-rail-section:not(:has(.bya-rail)) {
	display: none;
}

.bya-rail {
	position: relative;
}

.bya-rail__controls {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-block-end: 20px;
}

.bya-rail__controls[hidden] {
	display: none;
}

.bya-rail__btn {
	display: grid;
	place-items: center;
	inline-size: 44px;
	block-size: 44px;

	padding: 0;
	border: 1px solid var(--bya-border-strong);
	border-radius: 50%;
	background-color: var(--bya-surface);
	color: var(--bya-ink);
	cursor: pointer;
	transition:
		background-color var(--bya-duration-fast) linear,
		border-color var(--bya-duration-fast) linear,
		opacity var(--bya-duration-fast) linear;
}

.bya-rail__btn:hover:not(:disabled) {
	border-color: var(--bya-ink-3);
}

.bya-rail__btn:disabled {
	opacity: 0.35;
	cursor: default;
}

.bya-rail__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(280px, calc((100% - 2 * 22px) / 3));
	gap: 22px;
	margin: 0;
	padding: 4px 4px 12px;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	scroll-snap-type: inline mandatory;
	scroll-padding-inline: 4px;
	scrollbar-width: none;
}

.bya-rail__track::-webkit-scrollbar {
	display: none;
}

.bya-rail__track:focus-visible {
	outline-offset: 6px;
}

/* کشیدن با موس (rail.js): در حین کشیدن چسبیدن به کارت خاموش است و متن انتخاب نمی‌شود */
.bya-rail__track[data-dragging] {
	scroll-snap-type: none;
	cursor: grabbing;
	user-select: none;
}

.bya-rail__track[data-dragging] * {
	cursor: grabbing;
}

.bya-rail__track img,
.bya-rail__track a {
	-webkit-user-drag: none;
}

@media (hover: hover) and (pointer: fine) {
	.bya-rail[data-ready] .bya-rail__track {
		cursor: grab;
	}
}

.bya-rail__card {
	scroll-snap-align: start;
}

.bya-rail__article {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
	block-size: 100%;
	padding: 10px 10px 22px;
	border-radius: var(--bya-radius-l);
	background-color: var(--bya-surface);
	box-shadow: 0 0 0 1px var(--bya-border), var(--bya-shadow-xs);
	transition:
		transform var(--bya-duration-mid) var(--bya-ease),
		box-shadow var(--bya-duration-mid) var(--bya-ease);
}

.bya-rail__article > :not(.bya-rail__media) {
	padding-inline: 12px;
}

.bya-rail__article:hover {
	transform: translateY(-3px);
	box-shadow: 0 0 0 1px var(--bya-border), var(--bya-shadow-m);
}

/* حلقه‌ی فوکوس فقط برای صفحه‌کلید (focus-visible)، نه با کلیک موس یا لمس */
.bya-rail__article:has(a:focus-visible) {
	outline: 2px solid var(--bya-pine);
	outline-offset: 4px;
}

.bya-rail__article a:focus {
	outline: none;
}

.bya-rail__media {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: 14px;
	background-color: var(--bya-mint-pale);
}

.bya-rail__img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	transition: transform 700ms var(--bya-ease);
}

.bya-rail__article:hover .bya-rail__img {
	transform: scale(1.03);
}

.bya-rail__placeholder {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: color-mix(in oklab, var(--bya-pine) 32%, transparent);
	background-image:
		radial-gradient(60% 70% at 50% 45%, color-mix(in oklab, var(--bya-surface) 80%, transparent), transparent 75%),
		radial-gradient(50% 60% at 100% 100%, color-mix(in oklab, var(--bya-sage) 90%, transparent), transparent 70%);

}

.bya-rail__placeholder svg {
	inline-size: 56px;
	block-size: 56px;
}

.bya-rail__sample-badge {
	position: absolute;
	inset-block-start: 12px;
	inset-inline-start: 12px;
	padding: 3px 10px;
	border-radius: var(--bya-radius-pill);
	background-color: var(--bya-ink);
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 400;
	line-height: 1.8;
}

.bya-rail__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 10px;
	margin: 6px 0 0;
	color: var(--bya-ink-3);
	font-size: var(--bya-text-micro);
	line-height: 1.6;
}

.bya-rail__meta > * + *::before {
	content: "·";
	margin-inline-end: 10px;
}

.bya-rail__cat {
	color: var(--bya-pine);
	font-weight: 600;
}

.bya-rail__title {
	margin: 0;
	font-size: var(--bya-text-title);
	line-height: 1.75;
}

.bya-rail__title a {
	color: var(--bya-ink);
	text-decoration: none;
}

/* همه‌ی کارت پیوند است، ولی فقط عنوان در ترتیب Tab و صفحه‌خوان */
.bya-rail__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--bya-radius-l);
}

.bya-rail__article:hover .bya-rail__title a {
	color: var(--bya-pine);
}

.bya-rail__excerpt {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	color: var(--bya-ink-3);
	font-size: 0.875rem;
	line-height: 1.85;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
}

@media (max-width: 1024px) {
	.bya-rail__track {
		grid-auto-columns: minmax(260px, 46%);
	}
}

@media (max-width: 767px) {
	.bya-rail__track {
		grid-auto-columns: 84%;
		gap: 14px;
	}
}

/* ================================================================ پرسش‌ها */

/*
 * هر پرسش یک کارت سفید روی زمینه‌ی عاجی: شماره‌ی دورقمی طلایی، پرسش، و دکمه‌ی گرد باز و بسته. پرسش باز
 * سایه و خط کاجی کم‌رنگ می‌گیرد و پاسخ هم‌تراز با متن پرسش زیرش باز می‌شود.
 */
.bya-faq {
	display: grid;
	gap: 10px;
}

.bya-faq__item {
	border-radius: var(--bya-radius);
	background-color: var(--bya-surface);
	box-shadow:
		0 0 0 1px color-mix(in oklab, var(--bya-border) 90%, transparent),
		var(--bya-shadow-xs);
	transition:
		box-shadow var(--bya-duration-mid) var(--bya-ease),
		transform var(--bya-duration-mid) var(--bya-ease);
}

.bya-faq__item:hover {
	box-shadow:
		0 0 0 1px var(--bya-border-strong),
		var(--bya-shadow-s);
}

.bya-faq__item[open] {
	box-shadow:
		0 0 0 1px color-mix(in oklab, var(--bya-pine) 22%, transparent),
		var(--bya-shadow-m);
}

.bya-faq__q {
	display: flex;
	align-items: center;
	gap: 16px;
	padding-block: 16px;
	padding-inline: 22px 18px;
	list-style: none;
	cursor: pointer;
}

.bya-faq__q::-webkit-details-marker {
	display: none;
}

.bya-faq__num {
	flex: none;
	min-inline-size: 1.6em;
	color: color-mix(in oklab, var(--bya-gold-deep) 80%, transparent);
	font-size: var(--bya-text-small);
	font-weight: 700;
	line-height: 1;
	transition: color var(--bya-duration-fast) linear;
}

.bya-faq__num::before {
	content: attr(data-n);
}

.bya-faq__item[open] .bya-faq__num {
	color: var(--bya-gold);
}

.bya-faq__title {
	flex: 1;
	margin: 0;
	color: var(--bya-ink);
	font-size: var(--bya-text-title);
	font-weight: 600;
	line-height: 1.7;
	transition: color var(--bya-duration-fast) linear;
}

.bya-faq__q:hover .bya-faq__title {
	color: var(--bya-pine);
}

.bya-faq__icon {
	display: grid;
	place-items: center;
	flex: none;
	inline-size: 32px;
	block-size: 32px;
	border-radius: 50%;
	background-color: var(--bya-pine-wash);
	color: var(--bya-pine);
	transition:
		transform 320ms var(--bya-ease),
		background-color var(--bya-duration-fast) linear,
		color var(--bya-duration-fast) linear;
}

.bya-faq__icon .bya-icon {
	inline-size: 16px;
	block-size: 16px;
}

.bya-faq__q:hover .bya-faq__icon {
	background-color: color-mix(in oklab, var(--bya-pine-wash) 60%, var(--bya-mint));
}

.bya-faq__item[open] .bya-faq__icon {
	transform: rotate(45deg);
	background-color: var(--bya-pine);
	color: #fff;
}

/* پاسخ هم‌تراز با متن پرسش (بعد از شماره)، با خط مویی بالایش */
.bya-faq__a {
	margin-inline: calc(22px + 1.6em + 16px) 18px;
	padding-block: 14px 20px;
	border-block-start: 1px solid var(--bya-border);
	color: var(--bya-ink-2);
	font-size: var(--bya-text-card);
	line-height: 1.95;
}

@supports selector(::details-content) {
	:root {
		interpolate-size: allow-keywords;
	}

	@media (prefers-reduced-motion: no-preference) {
		.bya-faq__item::details-content {
			block-size: 0;
			overflow: clip;
			transition:
				block-size 340ms var(--bya-ease),
				content-visibility 340ms allow-discrete;
		}

		.bya-faq__item[open]::details-content {
			block-size: auto;
		}
	}
}

/* کنار پرسش‌ها: راهنما و پشتیبانی درون سامانه، در یک کادر نعنایی (کلاس bya-faq-help روی ابزارک فهرست) */
.elementor-widget.bya-faq-help {
	margin-block-start: 12px;
}

.bya-faq-help .bya-index {
	gap: 0;
	padding-inline: 20px;
	border-radius: var(--bya-radius-l);
	background-color: var(--bya-mint-pale);
	box-shadow: inset 0 0 0 1px var(--bya-sage-line);
}

.bya-faq-help .bya-index .bya-index__item {
	gap: 14px;
	padding-block: 18px;
}

.bya-faq-help .bya-index .bya-index__item + .bya-index__item {
	border-block-start: 1px solid var(--bya-sage-line);
}

.bya-faq-help .bya-index .bya-ico {
	--bya-ico-size: 40px;
	border-radius: 12px;
}

.bya-faq-help .bya-index .bya-ico .bya-icon {
	inline-size: 19px;
	block-size: 19px;
}

.bya-faq-help .bya-index .bya-index__title {
	margin-block-end: 2px;
	font-size: 1rem;
}

.bya-faq-help .bya-index .bya-index__text {
	font-size: 0.875rem;
	line-height: 1.8;
}

@media (prefers-reduced-motion: reduce) {
	.bya-faq__item,
	.bya-faq__icon {
		transition: none;
	}
}

@media (max-width: 767px) {
	.bya-faq__q {
		gap: 12px;
		padding-block: 14px;
		padding-inline: 16px 14px;
	}

	.bya-faq__a {
		margin-inline: 16px 14px;
		padding-block: 12px 18px;
	}

	.bya-faq__title {
		font-size: 0.9375rem;
	}

	.bya-faq__icon {
		inline-size: 30px;
		block-size: 30px;
	}
}

/* ================================================================ راه‌های ارتباط */

.bya-contact {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.875rem;
	line-height: 1.6;
}

.bya-contact li {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* آیکن در دایره‌ی شیشه‌ای کوچک، هم‌خانواده‌ی ظرف آیکن روی تیره */
.bya-contact__icon {
	flex: none;
	box-sizing: content-box;
	inline-size: 15px;
	block-size: 15px;
	padding: 7px;
	border-radius: 50%;
	background-color: var(--bya-stage-glass);
	box-shadow: inset 0 0 0 1px var(--bya-stage-line-strong);
	color: var(--bya-mint);
}

.bya-contact a {
	color: inherit;
	text-decoration: none;
	transition: color var(--bya-duration-fast) linear;
}

.bya-contact a:hover {
	color: var(--bya-stage-ink);
}

/* شماره و ایمیل لاتین‌اند و چپ‌چین؛ در ستون راست‌چین هم‌تراز با آیکن کنارشان می‌مانند */
.bya-contact a[dir="ltr"] {
	unicode-bidi: isolate;
}


/* ---- راه‌های ارتباط: کارت‌ها (صفحه‌ی تماس) */
.bya-contact--cards {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr));
	gap: clamp(10px, 1.4vw, 16px);
	font-size: inherit;
}

.bya-contact .bya-contact__card {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: clamp(18px, 2vw, 22px);
	border-radius: var(--bya-radius-l);
	background-color: var(--bya-surface);
	box-shadow:
		0 0 0 1px color-mix(in oklab, var(--bya-border) 85%, transparent),
		var(--bya-shadow-xs);
	transition:
		box-shadow var(--bya-duration-mid) var(--bya-ease),
		transform var(--bya-duration-mid) var(--bya-ease);
}

.bya-contact__card:has(a):hover {
	box-shadow:
		0 0 0 1px var(--bya-border-strong),
		var(--bya-shadow-m);
	transform: translateY(-2px);
}

.bya-contact__card .bya-ico {
	--bya-ico-size: 44px;
	border-radius: 13px;
}

.bya-contact__card .bya-ico .bya-icon {
	inline-size: 20px;
	block-size: 20px;
}

.bya-contact__body {
	display: grid;
	gap: 2px;
	min-inline-size: 0;
}

.bya-contact__body p {
	margin: 0;
}

.bya-contact__label {
	color: var(--bya-ink-3);
	font-size: var(--bya-text-micro);
	font-weight: 500;
	line-height: 1.6;
}

.bya-contact__card .bya-contact__value {
	color: var(--bya-ink);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.6;
	overflow-wrap: anywhere;
}

/* همه‌ی کارت پیوند است (پیوند کشیده)، ولی فقط مقدار در ترتیب Tab */
.bya-contact__card a.bya-contact__value::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--bya-radius-l);
}

.bya-contact__card a.bya-contact__value:hover {
	color: var(--bya-pine);
}

.bya-contact__card--address .bya-contact__value {
	font-size: var(--bya-text-card);
	font-weight: 600;
}

.bya-contact__hint {
	color: var(--bya-ink-3);
	font-size: var(--bya-text-micro);
	line-height: 1.6;
}

.bya-contact__card--whatsapp .bya-ico {
	color: #128c4b;
}

/* فهرست کوچک روی زمینه‌ی روشن (کنار فرم پرسش) */
.bya-contact-inline .bya-contact {
	gap: 12px;
	color: var(--bya-ink-2);
	font-size: var(--bya-text-card);
}

.bya-contact-inline .bya-contact__icon {
	background-color: var(--bya-surface);
	box-shadow: inset 0 0 0 1px var(--bya-sage-line);
	color: var(--bya-pine);
}

.bya-contact-inline .bya-contact a {
	color: var(--bya-ink);
	font-weight: 600;
}

.bya-contact-inline .bya-contact a:hover {
	color: var(--bya-pine);
}

/* ================================================================ فرم پیام */

.bya-form-wrap {
	position: relative;
}

.bya-form {
	display: grid;
	gap: 20px;
}

.bya-form[hidden],
.bya-form__done[hidden] {
	display: none;
}

.bya-form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 16px;
}

/* سه فیلد (بی «نام مجموعه»): نام تمام‌پهنا، موبایل و ایمیل کنار هم */
.bya-form__grid--three .bya-form__field[data-field="name"] {
	grid-column: 1 / -1;
}

.bya-form__field {
	display: grid;
	gap: 7px;
	align-content: start;
}


.bya-form__label {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	color: var(--bya-ink);
	font-size: var(--bya-text-small);
	font-weight: 600;
	line-height: 1.6;
}

.bya-form__req {
	padding: 0 7px;
	border-radius: var(--bya-radius-pill);
	background-color: color-mix(in oklab, var(--bya-gold-soft) 80%, transparent);
	color: var(--bya-gold-deep);
	font-size: 0.6875rem;
	font-weight: 600;
	line-height: 1.8;
}

.bya-form__req--optional {
	background-color: transparent;
	color: var(--bya-ink-3);
	font-weight: 500;
}

.bya-form__input {
	inline-size: 100%;
	min-block-size: 48px;
	padding: 10px 14px;
	border: 1px solid var(--bya-border-strong);
	border-radius: var(--bya-radius-s);
	background-color: var(--bya-surface);
	color: var(--bya-ink);
	font-family: var(--bya-font);
	font-size: 1rem;
	line-height: 1.7;
	transition:
		border-color var(--bya-duration-fast) linear,
		box-shadow var(--bya-duration-fast) linear,
		background-color var(--bya-duration-fast) linear;
}

.bya-form__input::placeholder {
	color: color-mix(in oklab, var(--bya-ink-3) 70%, transparent);
}

.bya-form__input[dir="ltr"] {
	text-align: start;
}

/* ورودی چپ‌چین (موبایل، ایمیل) در ستون راست‌چین از سمت راست خوانده شود */
.bya-form__input[dir="ltr"]:placeholder-shown {
	text-align: end;
}

.bya-form__input:hover {
	border-color: var(--bya-ink-3);
}

.bya-form__input:focus {
	border-color: var(--bya-pine);
	box-shadow: var(--bya-focus);
	outline: none;
}

.bya-form__input--area {
	min-block-size: 140px;
	resize: vertical;
}

.bya-form__field.is-invalid .bya-form__input {
	border-color: #b4232c;
	background-color: color-mix(in oklab, #b4232c 3%, var(--bya-surface));
}

.bya-form__field.is-invalid .bya-form__input:focus {
	box-shadow: 0 0 0 3px color-mix(in oklab, #b4232c 22%, transparent);
}

.bya-form__hint {
	margin: 0;
	color: var(--bya-ink-3);
	font-size: var(--bya-text-micro);
	line-height: 1.7;
}

.bya-form__error {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	margin: 0;
	color: #a11d26;
	font-size: var(--bya-text-micro);
	font-weight: 500;
	line-height: 1.7;
}

.bya-form__error[hidden] {
	display: none;
}

.bya-form__error::before {
	content: "!";
	display: inline-grid;
	place-items: center;
	flex: none;
	inline-size: 16px;
	block-size: 16px;
	margin-block-start: 0.2em;
	border-radius: 50%;
	background-color: #b4232c;
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 1;
}

.bya-form__count {
	margin: -2px 0 0;
	color: var(--bya-ink-3);
	font-size: 0.75rem;
	text-align: end;
}

.bya-form__count.is-over {
	color: #a11d26;
}

/* موضوع: قرص‌های انتخاب (radio)، دسترس‌پذیر با صفحه‌کلید */
.bya-form__topics {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	border: 0;
	min-inline-size: 0;
}

.bya-form__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.bya-form__chip {
	position: relative;
	cursor: pointer;
}

.bya-form__chip input {
	position: absolute;
	inset: 0;
	opacity: 0;
	cursor: pointer;
}

.bya-form__chip span {
	display: inline-flex;
	align-items: center;
	min-block-size: 38px;
	padding: 6px 16px;
	border-radius: var(--bya-radius-pill);
	background-color: var(--bya-surface);
	box-shadow: inset 0 0 0 1px var(--bya-border-strong);
	color: var(--bya-ink-2);
	font-size: var(--bya-text-small);
	font-weight: 500;
	line-height: 1.6;
	transition:
		background-color var(--bya-duration-fast) linear,
		box-shadow var(--bya-duration-fast) linear,
		color var(--bya-duration-fast) linear;
}

.bya-form__chip:hover span {
	box-shadow: inset 0 0 0 1px var(--bya-ink-3);
}

.bya-form__chip input:checked + span {
	background-color: var(--bya-pine);
	box-shadow: none;
	color: #fff;
	font-weight: 600;
}

.bya-form__chip input:focus-visible + span {
	outline: 2px solid var(--bya-pine);
	outline-offset: 2px;
}

.bya-form__topics.is-invalid .bya-form__chip span {
	box-shadow: inset 0 0 0 1px #b4232c;
}

.bya-form__alert {
	margin: 0;
	padding: 12px 16px;
	border-radius: var(--bya-radius-s);
	background-color: color-mix(in oklab, #b4232c 7%, var(--bya-surface));
	box-shadow: inset 0 0 0 1px color-mix(in oklab, #b4232c 30%, transparent);
	color: #8f1a22;
	font-size: var(--bya-text-small);
	font-weight: 500;
}

.bya-form__alert[hidden] {
	display: none;
}

.bya-form__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 24px;
	padding-block-start: 4px;
}

.bya-form__privacy {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	flex: 1 1 18rem;
	margin: 0;
	color: var(--bya-ink-3);
	font-size: var(--bya-text-micro);
	line-height: 1.8;
}

.bya-form__privacy-icon {
	flex: none;
	inline-size: 15px;
	block-size: 15px;
	margin-block-start: 0.25em;
	color: var(--bya-pine);
}

.bya-form__privacy a {
	color: var(--bya-pine);
}

.bya-form__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-block-size: 48px;
	padding: 10px 26px;
	border: 0;
	border-radius: var(--bya-radius-s);
	background-color: var(--bya-pine);
	background-image: linear-gradient(170deg, color-mix(in oklab, var(--bya-pine) 82%, var(--bya-pine-bright)), var(--bya-pine) 55%, color-mix(in oklab, var(--bya-pine) 70%, var(--bya-pine-deep)));
	box-shadow:
		inset 0 1px 0 rgb(255 255 255 / 0.16),
		0 1px 2px rgb(6 70 58 / 0.24),
		0 14px 28px -14px color-mix(in oklab, var(--bya-pine) 85%, transparent);
	color: #fff;
	font-family: var(--bya-font);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.5;
	cursor: pointer;
	transition:
		transform var(--bya-duration-fast) var(--bya-ease),
		background-color var(--bya-duration-fast) linear;
}

.bya-form__submit:hover {
	background-color: var(--bya-pine-deep);
	background-image: none;
	transform: translateY(-1px);
}

.bya-form__submit:disabled {
	opacity: 0.7;
	cursor: progress;
	transform: none;
}

.bya-form__submit-icon {
	inline-size: 17px;
	block-size: 17px;
}

.bya-form[aria-busy="true"] .bya-form__submit-icon {
	animation: bya-send 900ms var(--bya-ease-in-out) infinite alternate;
}

@keyframes bya-send {
	to {
		transform: translateX(-4px) scaleX(-1);
	}
}

/* تله‌ی ربات: بیرون از دید و از صفحه‌خوان */
.bya-form__trap {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* پس از فرستادن */
.bya-form__done {
	display: grid;
	justify-items: center;
	gap: 10px;
	padding: clamp(32px, 5vw, 56px) clamp(20px, 4vw, 40px);
	text-align: center;
	outline: none;
}

.bya-form__done-mark {
	display: grid;
	place-items: center;
	inline-size: 64px;
	block-size: 64px;
	margin-block-end: 6px;
	border-radius: 50%;
	background: radial-gradient(circle at 30% 25%, var(--bya-pine-bright), var(--bya-pine) 70%);
	box-shadow: 0 0 0 8px color-mix(in oklab, var(--bya-pine-bright) 16%, transparent);
	color: #fff;
}

.bya-form__done-mark .bya-icon {
	inline-size: 30px;
	block-size: 30px;
	stroke-width: 2.2;
}

.bya-form__done-title {
	margin: 0;
	color: var(--bya-ink);
	font-size: 1.25rem;
	font-weight: 700;
}

.bya-form__done-text {
	max-inline-size: 28rem;
	margin: 0;
	color: var(--bya-ink-2);
	font-size: var(--bya-text-card);
	line-height: 1.9;
}

.bya-form__again {
	margin-block-start: 8px;
	padding: 8px 18px;
	border: 1px solid var(--bya-border-strong);
	border-radius: var(--bya-radius-s);
	background: var(--bya-surface);
	color: var(--bya-ink);
	font-family: var(--bya-font);
	font-size: var(--bya-text-small);
	font-weight: 600;
	cursor: pointer;
}

.bya-form__again:hover {
	border-color: var(--bya-ink-3);
}

@media (max-width: 767px) {
	.bya-form__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.bya-form__submit {
		inline-size: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bya-form[aria-busy="true"] .bya-form__submit-icon {
		animation: none;
	}
}

/* ================================================================ پرسش‌ها: دسته‌بندی و جست‌وجو */

.bya-faq--grouped {
	display: grid;
	grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
	gap: clamp(28px, 4vw, 64px);
	align-items: start;
}

.bya-faq__aside {
	position: sticky;
	inset-block-start: calc(var(--bya-header-height) + 28px);
	display: grid;
	/* بی minmax(0, …) ردیف افقی دسته‌ها در گوشی کل صفحه را پهن می‌کرد */
	grid-template-columns: minmax(0, 1fr);
	gap: 14px;
	min-inline-size: 0;
}


.bya-faq__search {
	position: relative;
}

.bya-faq__search-icon {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 14px;
	inline-size: 18px;
	block-size: 18px;
	color: var(--bya-ink-3);
	translate: 0 -50%;
	pointer-events: none;
}

.bya-faq__input {
	inline-size: 100%;
	min-block-size: 48px;
	padding-block: 10px;
	padding-inline: 42px 40px;
	border: 1px solid var(--bya-border-strong);
	border-radius: var(--bya-radius);
	background-color: var(--bya-surface);
	color: var(--bya-ink);
	font-family: var(--bya-font);
	font-size: 0.9375rem;
	box-shadow: var(--bya-shadow-xs);
	appearance: none;
}

.bya-faq__input::-webkit-search-cancel-button {
	display: none;
}

.bya-faq__input:focus {
	border-color: var(--bya-pine);
	box-shadow: var(--bya-focus);
	outline: none;
}

.bya-faq__clear {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-end: 6px;
	display: grid;
	place-items: center;
	inline-size: 34px;
	block-size: 34px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--bya-ink-3);
	translate: 0 -50%;
	cursor: pointer;
}

.bya-faq__clear:hover {
	background-color: var(--bya-cream);
	color: var(--bya-ink);
}

.bya-faq__clear[hidden] {
	display: none;
}

.bya-faq__clear .bya-icon {
	inline-size: 16px;
	block-size: 16px;
}

.bya-faq__status {
	margin: 0;
	padding-inline: 4px;
	color: var(--bya-ink-3);
	font-size: var(--bya-text-micro);
}

.bya-faq__groups ul {
	display: grid;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bya-faq__groups li[hidden] {
	display: none;
}

.bya-faq .bya-faq__group-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-block-size: 40px;
	padding-block: 6px;
	padding-inline: 14px 10px;
	border-radius: var(--bya-radius-s);
	color: var(--bya-ink-2);
	font-size: var(--bya-text-small);
	font-weight: 500;
	text-decoration: none;
	transition:
		background-color var(--bya-duration-fast) linear,
		color var(--bya-duration-fast) linear;
}

.bya-faq .bya-faq__group-link:hover {
	background-color: var(--bya-surface);
	color: var(--bya-ink);
}

.bya-faq__group-link[aria-current="true"] {
	background-color: var(--bya-surface);
	box-shadow: inset 0 0 0 1px var(--bya-border), var(--bya-shadow-xs);
	color: var(--bya-pine);
	font-weight: 600;
}

.bya-faq__group-count {
	min-inline-size: 26px;
	padding: 0 7px;
	border-radius: var(--bya-radius-pill);
	background-color: color-mix(in oklab, var(--bya-cream) 80%, transparent);
	color: var(--bya-ink-3);
	font-size: 0.75rem;
	text-align: center;
	line-height: 1.8;
}

.bya-faq__main {
	display: grid;
	gap: clamp(36px, 4vw, 52px);
	min-inline-size: 0;
}

.bya-faq__group[hidden] {
	display: none;
}

.bya-faq__group {
	scroll-margin-block-start: calc(var(--bya-header-height) + 24px);
}

.bya-faq__group-title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 16px;
	color: var(--bya-ink);
	font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem);
	font-weight: 700;
	line-height: 1.6;
}

.bya-faq__group-title::before {
	content: "";
	flex: none;
	inline-size: 12px;
	block-size: 8px;
	background: linear-gradient(160deg, var(--bya-gold-light), var(--bya-gold) 60%, var(--bya-gold-deep));
	clip-path: polygon(22% 0, 78% 0, 100% 100%, 0 100%);
}

.bya-faq__list {
	display: grid;
	gap: 10px;
}

.bya-faq__item {
	scroll-margin-block-start: calc(var(--bya-header-height) + 24px);
}

.bya-faq__item[hidden] {
	display: none;
}

.bya-faq__title mark {
	padding: 0 2px;
	border-radius: 3px;
	background-color: color-mix(in oklab, var(--bya-gold-light) 45%, transparent);
	color: inherit;
}

.bya-faq__empty {
	display: grid;
	justify-items: center;
	gap: 8px;
	padding: clamp(28px, 4vw, 48px);
	border-radius: var(--bya-radius-l);
	background-color: var(--bya-surface);
	box-shadow: 0 0 0 1px var(--bya-border);
	text-align: center;
}

.bya-faq__empty[hidden] {
	display: none;
}

.bya-faq__empty p {
	margin: 0;
}

.bya-faq__empty-title {
	color: var(--bya-ink);
	font-size: 1.0625rem;
	font-weight: 700;
}

.bya-faq__empty-text {
	color: var(--bya-ink-3);
	font-size: var(--bya-text-card);
}

@media (max-width: 1024px) {
	.bya-faq--grouped {
		grid-template-columns: minmax(0, 1fr);
	}

	.bya-faq__aside {
		position: static;
		gap: 10px;
	}


	/* دسته‌ها: یک ردیف افقی که با انگشت کشیده می‌شود */
	.bya-faq__groups ul {
		display: flex;
		gap: 6px;
		margin-inline: calc(-1 * var(--bya-gutter));
		padding-inline: var(--bya-gutter);
		overflow-x: auto;
		scrollbar-width: none;
	}

	.bya-faq__groups ul::-webkit-scrollbar {
		display: none;
	}

	.bya-faq__group-link {
		min-block-size: 36px;
		white-space: nowrap;
		background-color: var(--bya-surface);
		box-shadow: inset 0 0 0 1px var(--bya-border);
	}

	.bya-faq__status {
		display: none;
	}
}

/* ================================================================ جست‌وجوی سربرگ */

.bya-search-toggle {
	display: grid;
	place-items: center;
	inline-size: 42px;
	block-size: 42px;
	padding: 0;
	border: 0;
	border-radius: var(--bya-radius-s);
	background: none;
	color: inherit;
	cursor: pointer;
	transition: background-color var(--bya-duration-fast) linear;
}

.bya-search-toggle[hidden] {
	display: none;
}

.bya-search-toggle:hover {
	background-color: color-mix(in oklab, currentColor 8%, transparent);
}

.bya-search-toggle .bya-icon {
	inline-size: 20px;
	block-size: 20px;
}

.bya-search {
	inline-size: min(100% - 32px, 40rem);
	max-inline-size: none;
	max-block-size: calc(100dvh - 32px);
	margin-block: clamp(16px, 12vh, 120px) auto;
	margin-inline: auto;
	padding: 0;
	border: 0;
	border-radius: var(--bya-radius-l);
	background: var(--bya-surface);
	box-shadow: 0 0 0 1px var(--bya-border), 0 40px 90px -30px rgb(3 18 13 / 0.55);
	color: var(--bya-ink);
	overflow: auto;
}

.bya-search::backdrop {
	background-color: color-mix(in oklab, var(--bya-stage) 55%, transparent);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

.bya-search[open] {
	animation: bya-search-in 260ms var(--bya-ease-out);
}

@keyframes bya-search-in {
	from {
		opacity: 0;
		transform: translateY(-10px) scale(0.98);
	}
}

.bya-search__panel {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
	padding: clamp(20px, 3vw, 28px);
}

.bya-search__title {
	margin: 0;
	padding-inline-end: 44px;
	color: var(--bya-ink);
	font-size: 1rem;
	font-weight: 700;
}

.bya-search__form {
	position: relative;
	display: flex;
	gap: 8px;
}

.bya-search__icon {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 16px;
	inline-size: 20px;
	block-size: 20px;
	color: var(--bya-ink-3);
	translate: 0 -50%;
	pointer-events: none;
}

.bya-search__input {
	flex: 1;
	min-inline-size: 0;
	min-block-size: 52px;
	padding-block: 10px;
	padding-inline: 46px 14px;
	border: 1px solid var(--bya-border-strong);
	border-radius: var(--bya-radius);
	background: var(--bya-surface-muted);
	color: var(--bya-ink);
	font-family: var(--bya-font);
	font-size: 1rem;
	appearance: none;
}

.bya-search__input::-webkit-search-cancel-button,
.bya-search__input::-webkit-search-decoration {
	display: none;
	-webkit-appearance: none;
}

.bya-search__input:focus {

	border-color: var(--bya-pine);
	box-shadow: var(--bya-focus);
	outline: none;
	background: var(--bya-surface);
}

.bya-search__submit {
	flex: none;
	min-block-size: 52px;
	padding: 0 20px;
	border: 0;
	border-radius: var(--bya-radius);
	background: var(--bya-pine);
	color: #fff;
	font-family: var(--bya-font);
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
}

.bya-search__submit:hover {
	background: var(--bya-pine-deep);
}

.bya-search__label {
	margin: 0 0 8px;
	color: var(--bya-ink-3);
	font-size: var(--bya-text-micro);
	font-weight: 500;
}

.bya-search__suggest ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bya-search .bya-search__suggest a {
	display: inline-flex;
	align-items: center;
	min-block-size: 36px;
	padding: 4px 14px;
	border-radius: var(--bya-radius-pill);
	background: var(--bya-ivory);
	box-shadow: inset 0 0 0 1px var(--bya-border);
	color: var(--bya-ink-2);
	font-size: var(--bya-text-small);
	text-decoration: none;
}

.bya-search .bya-search__suggest a:hover {
	color: var(--bya-pine);
	box-shadow: inset 0 0 0 1px var(--bya-sage-line);
}

.bya-search__close {
	position: absolute;
	inset-block-start: 14px;
	inset-inline-end: 14px;
	display: grid;
	place-items: center;
	inline-size: 40px;
	block-size: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--bya-ivory);
	color: var(--bya-ink-2);
	cursor: pointer;
}

.bya-search__close:hover {
	background: var(--bya-cream);
	color: var(--bya-ink);
}

.bya-search__close .bya-icon {
	inline-size: 18px;
	block-size: 18px;
}

html.bya-search-open {
	overflow: hidden;
}

@media (max-width: 767px) {
	.bya-search {
		margin-block-start: 12px;
	}

	.bya-search__submit {
		padding: 0 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bya-search[open] {
		animation: none;
	}
}