/* ---------- Hero ---------- */
.site-header__logo--ruta-only{width:154px;flex-basis:154px;height:auto}
.autohub-footer .autohub-footer__logo--ruta-only{flex-basis:150px;max-width:150px}
.payment-hero{
	display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:28px;
	min-height:590px;background:#0A0A0C;border-radius:32px;padding:56px;overflow:hidden;margin-top:8px;
}
.payment-hero__eyebrow{
	margin:0 0 38px;display:flex;align-items:center;flex-wrap:nowrap;gap:22px;
	color:#fff;
}
.payment-hero__brand{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:156px}
.payment-hero__brand img{display:block;width:100%;height:auto}
.payment-hero__stamp{display:inline-flex;align-items:center}
.payment-hero__stamp-pill{
	display:inline-flex;align-items:center;height:58px;padding:0 42px 0 27px;
	background:#fff;border:4px solid #1a6b2e;border-radius:999px;
	color:#0d0f10;font-size:22px;font-weight:800;line-height:1;white-space:nowrap;
	letter-spacing:-.025em;
}
.payment-hero__stamp-icon{
	display:flex;align-items:center;justify-content:center;flex-shrink:0;
	width:52px;height:52px;margin-left:-23px;border-radius:14px;background:#8fe000;
}
.payment-hero__stamp-icon svg{width:23px;height:23px;stroke-width:2.5}
.payment-hero__title{
	margin:0 0 28px;font-size:48px;line-height:1.12;font-weight:800;
	letter-spacing:-0.02em;color:#fff;
}
.payment-hero__title-main{white-space:nowrap}
.payment-hero__accent{color:#E6423F}
.payment-hero__lead{margin:0 0 34px;max-width:570px;font-size:19px;line-height:1.55;color:#B7B9C0}
.payment-hero__cta{
	display:inline-flex;align-items:center;justify-content:center;
	height:58px;padding:0 32px;border:0;border-radius:11px;
	background:#E6423F;color:#fff;font-size:17px;font-weight:600;cursor:pointer;
}
.payment-hero__cta:hover{background:#C7332F}
.payment-hero__catalog-link{display:inline-flex;align-items:center;gap:8px;margin-top:16px;color:#fff;font-size:15px;font-weight:650;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.payment-hero__catalog-link:hover{color:#f4b0ad}
.payment-hero__visual{display:flex;align-items:center;justify-content:center;min-width:0}
.payment-hero__visual img{display:block;width:min(116%,720px);max-width:none;height:auto;object-fit:contain}

/* ---------- Преимущества ---------- */
.payment-benefits{margin-top:56px;padding:64px 56px;background:#0A0A0C;border-radius:32px}
.payment-benefits__title{margin:0 0 16px;font-size:38px;line-height:1.2;font-weight:800;color:#fff}
.payment-logo{font-weight:800}
.payment-logo__hub{color:#8fe000}
.payment-benefits__sub{margin:0 0 40px;font-size:19px;color:var(--ui-muted)}
.payment-benefits__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.payment-benefits__card{
	padding:32px 28px;border:1px solid #2A2B30;border-radius:20px;background:#111114;
}
.payment-benefits__card h3{margin:0 0 14px;font-size:20px;font-weight:700;color:#fff}
.payment-benefits__card p{margin:0;font-size:16px;line-height:1.5;color:var(--ui-muted)}

/* ---------- Для себя и бизнеса ---------- */
.payment-audience{margin-top:64px}
.payment-audience__title{
	margin:0 0 40px;font-size:40px;line-height:1.2;font-weight:400;color:#151922;
}
.payment-audience__list{display:flex;flex-direction:column;gap:16px}
.payment-audience__card{
	display:flex;align-items:center;gap:32px;padding:36px 44px;
	border-radius:24px;
}
.payment-audience__card--personal{background:#EAF7EF}
.payment-audience__card--business{background:#FBEEF0}
.payment-audience__icon{flex-shrink:0;width:150px}
.payment-audience__icon svg{display:block;width:100%;height:auto}
.payment-audience__text h3{margin:0 0 10px;font-size:24px;font-weight:700;color:#151922}
.payment-audience__text p{margin:0;max-width:640px;font-size:17px;line-height:1.5;color:#5B616B}

/* ---------- Документы ---------- */
.payment-documents{margin-top:64px}
.payment-documents__title{margin:0 0 36px;font-size:38px;line-height:1.2;font-weight:800;color:#151922}
.payment-documents__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.payment-documents__card{padding:36px 32px;border-radius:22px}
.payment-documents__card--green{background:#EAFBF1}
.payment-documents__card--gray{background:var(--ui-gray)}
.payment-documents__card--purple{background:#F3EEFE}
.payment-documents__icon{width:48px;height:48px;margin-bottom:28px}
.payment-documents__card h3{margin:0 0 12px;font-size:21px;font-weight:700;color:#151922}
.payment-documents__card p{margin:0;font-size:16px;line-height:1.5;color:#5B616B}

/* ---------- Платёжный агент ---------- */
.payment-agent{margin-top:64px}
.payment-agent__title{margin:0 0 36px;font-size:38px;line-height:1.25;font-weight:400;color:#151922}
.payment-agent__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.payment-agent__card{padding:32px 28px;border-radius:20px;background:var(--ui-gray)}
.payment-agent__icon{width:44px;height:44px;margin-bottom:26px}
.payment-agent__card h3{margin:0 0 12px;font-size:19px;font-weight:700;color:#151922}
.payment-agent__card p{margin:0;font-size:16px;line-height:1.5;color:#5B616B}
.payment-agent__banner{
	margin:20px 0 0;padding:30px;border-radius:18px;background:var(--ui-gray);
	text-align:center;font-size:22px;font-weight:400;color:#151922;
}

/* ---------- Как проходит оплата ---------- */
.payment-steps{margin-top:64px}
.payment-steps__title{margin:0 0 36px;font-size:38px;line-height:1.25;font-weight:400;color:#151922}
.payment-steps__list{display:flex;flex-direction:column;gap:16px}
.payment-steps__item{
	display:flex;align-items:center;gap:24px;padding:28px 32px;
	border-radius:18px;background:var(--ui-gray);
}
.payment-steps__icon{flex-shrink:0;width:32px;height:32px}
.payment-steps__text{flex:1;min-width:0}
.payment-steps__text h3{margin:0 0 8px;font-size:20px;font-weight:700;color:#151922}
.payment-steps__text p{margin:0;font-size:16px;line-height:1.5;color:#5B616B}
.payment-steps__num{flex-shrink:0;font-size:16px;font-weight:600;color:#B9B4CE}

/* ---------- FAQ ---------- */
.payment-faq{margin-top:64px}
.payment-faq__head{
	display:flex;align-items:flex-start;justify-content:space-between;gap:24px;
	margin-bottom:36px;
}
.payment-faq__title{margin:0;font-size:46px;line-height:1.2;font-weight:400;color:#151922;max-width:640px}
.payment-faq__cta{
	flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
	width:280px;height:72px;border:0;border-radius:14px;
	background:#8D7FC2;color:#fff;font-size:18px;font-weight:500;cursor:pointer;
}
.payment-faq__cta:hover{background:#7A6BAE}
.payment-faq__columns{display:grid;grid-template-columns:1fr 1fr;gap:0 28px;align-items:start}
.payment-faq__col{display:flex;flex-direction:column;gap:16px}
.payment-faq__item{
	border:1px solid #E7E1F2;border-radius:18px;background:var(--ui-gray);overflow:hidden;
}
.payment-faq__question{
	width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
	padding:24px 28px;border:0;background:transparent;cursor:pointer;text-align:left;
	font:inherit;font-size:22px;color:#20242B;
}
.payment-faq__question:focus-visible{outline:2px solid #6E58DE;outline-offset:-2px;border-radius:18px}
.payment-faq__icon{
	position:relative;flex-shrink:0;width:20px;height:20px;
}
.payment-faq__icon::before,.payment-faq__icon::after{
	content:"";position:absolute;top:50%;left:50%;background:#6E58DE;
	transform:translate(-50%,-50%);transition:transform .15s ease;
}
.payment-faq__icon::before{width:16px;height:2px}
.payment-faq__icon::after{width:2px;height:16px}
.payment-faq__question[aria-expanded="true"] .payment-faq__icon::after{transform:translate(-50%,-50%) rotate(90deg) scale(0,1)}
.payment-faq__answer{padding:0 28px 24px}
.payment-faq__answer p{margin:0;font-size:18px;line-height:1.55;color:#5B616B}

@media (max-width:1100px){
	.payment-hero{min-height:520px;padding:44px 32px}
	.payment-hero__eyebrow{gap:14px}
	.payment-hero__brand{width:132px}
	.payment-hero__stamp-pill{height:52px;padding:0 34px 0 21px;font-size:19px}
	.payment-hero__stamp-icon{width:46px;height:46px;margin-left:-20px}
	.payment-hero__title{font-size:42px}
	.payment-benefits{padding:48px 32px}
}

@media (max-width:900px){
	.payment-hero{grid-template-columns:1fr;gap:20px;min-height:0;padding:40px 32px}
	.payment-hero__visual{order:initial}
	.payment-hero__visual img{width:min(100%,640px);max-width:640px;margin:0 auto}
	.payment-hero__title{font-size:42px}

	.payment-benefits__grid{grid-template-columns:1fr}
	.payment-benefits__title{font-size:30px}

	.payment-audience__title{font-size:30px}
	.payment-audience__card{flex-direction:column;text-align:center;padding:32px 24px}
	.payment-audience__text p{max-width:none}

	.payment-documents__title,.payment-agent__title,.payment-steps__title{font-size:28px}
	.payment-documents__grid,.payment-agent__grid{grid-template-columns:1fr}

	.payment-steps__item{
		display:grid;grid-template-columns:1fr auto;grid-template-areas:"icon num" "text text";
		row-gap:14px;column-gap:12px;align-items:start;
	}
	.payment-steps__icon{grid-area:icon}
	.payment-steps__num{grid-area:num}
	.payment-steps__text{grid-area:text}

	.payment-faq__head{flex-direction:column;align-items:stretch}
	.payment-faq__title{font-size:32px}
	.payment-faq__cta{width:100%}
	.payment-faq__columns{grid-template-columns:1fr;gap:16px}
}

@media (max-width:640px){
	.site-header__logo--ruta-only{width:128px;flex-basis:128px}
	.payment-hero{gap:24px;padding:30px 20px;border-radius:24px}
	.payment-hero__eyebrow{margin-bottom:28px;flex-wrap:wrap;gap:14px}
	.payment-hero__brand{width:128px}
	.payment-hero__stamp-pill{font-size:16px;height:46px;padding:0 28px 0 17px;border-width:3px}
	.payment-hero__stamp-icon{width:40px;height:40px;margin-left:-18px;border-radius:11px}
	.payment-hero__stamp-icon svg{width:18px;height:18px}
	.payment-hero__title{margin-bottom:20px;font-size:clamp(26px,8.2vw,32px)}
	.payment-hero__lead{margin-bottom:26px;font-size:16px;line-height:1.5}
	.payment-hero__cta{width:100%}
	.payment-hero__visual img{width:115%;max-width:460px;margin-inline:-7.5%}

	.payment-audience__icon{width:110px}

	.payment-faq__question{padding:20px 20px;font-size:19px}
	.payment-faq__answer{padding:0 20px 20px}
	.payment-faq__answer p{font-size:16px}
}