.credit-hero{
	display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:48px;
	background:var(--ui-gray);border-radius:32px;padding:64px 56px;margin-top:8px;
}
.credit-hero__stamp{display:inline-flex;align-items:center;margin-bottom:26px}
.credit-hero__stamp-pill{
	display:inline-flex;align-items:center;height:52px;padding:0 28px 0 24px;
	background:var(--surface);border:3px solid #1a6b2e;border-radius:999px;
	color:#0d0f10;font-size:23px;font-weight:700;line-height:1;white-space:nowrap;
	letter-spacing:-0.01em;
}
.credit-hero__stamp-icon{
	display:flex;align-items:center;justify-content:center;flex-shrink:0;
	width:34px;height:34px;margin-left:-18px;border-radius:10px;
	background:#8fe000;
}
.credit-hero__stamp-icon svg{width:18px;height:18px}
.credit-hero__title{
	margin:0 0 20px;font-size:44px;line-height:1.18;font-weight:600;
	letter-spacing:-0.02em;color:var(--ink);
}
.credit-hero__lead{
	margin:0;max-width:680px;font-size:21px;line-height:1.45;font-weight:400;color:var(--ink-soft);
}
.credit-hero__visual{
	position:relative;display:flex;align-items:center;justify-content:center;min-height:420px;
}
.credit-hero__visual::before{
	content:"";position:absolute;width:78%;aspect-ratio:1;border-radius:50%;
	background:radial-gradient(circle,rgba(255,255,255,.82) 0%,rgba(255,255,255,.42) 48%,rgba(255,255,255,0) 72%);
}
.credit-hero__visual img{
	position:relative;z-index:1;display:block;width:100%;height:auto;max-height:500px;object-fit:contain;
	filter:drop-shadow(0 18px 22px rgba(25,30,35,.13));
}
.credit-hero__visual-placeholder{
	display:flex;align-items:center;justify-content:center;text-align:center;
	width:100%;height:100%;min-height:380px;border:1.5px dashed var(--ui-border);border-radius:24px;
	color:var(--muted);font-size:14px;line-height:20px;padding:24px;
}

/* Кредитный раздел использует отдельный, не основной зелёный акцент —
   приглушённый сливовый/фиолетовый, только внутри этой карточки. */
.credit-card{
	--credit-accent:#6c5dbf;
	--credit-accent-dark:#584da3;
	--credit-track:#e7e5ee;
	margin-top:8px;background:var(--surface);border:1px solid var(--border);
	border-radius:28px;padding:40px 44px 44px;
}
.credit-card__title{margin:0 0 32px;font-size:26px;line-height:1.25;font-weight:700;color:var(--ink)}
.credit-card__body{display:grid;grid-template-columns:1fr auto 1fr;gap:40px;align-items:start}
.credit-card__calc{display:flex;flex-direction:column;gap:28px;min-width:0}
.credit-card__divider{width:1px;align-self:stretch;background:var(--border)}
.credit-card__apply{min-width:0}

.credit-slider-field{display:flex;flex-direction:column;gap:10px}
.credit-slider-field__label{font-size:14px;color:var(--ink-soft)}
.credit-slider-field__value-row{display:flex;align-items:center;gap:8px}
.credit-slider-field__value{font-size:24px;line-height:1.2;font-weight:700;color:var(--ink)}
.credit-edit-button{
	display:flex;align-items:center;justify-content:center;flex-shrink:0;
	width:26px;height:26px;padding:0;border:0;background:transparent;color:var(--muted);cursor:pointer;
}
.credit-edit-button svg{width:16px;height:16px}
.credit-edit-button:hover{color:var(--credit-accent)}
.credit-slider-field__value-row input[type=number]{
	width:180px;height:34px;border:1px solid var(--credit-accent);border-radius:8px;
	background:var(--surface);color:var(--ink);font:inherit;font-size:22px;font-weight:700;padding:0 10px;
}

/* Тонкий слайдер: неактивный светло-серый трек, залитая часть и бегунок —
   акцентным цветом. Заливка идёт через --fill, который выставляет credit.js. */
.credit-slider{
	appearance:none;-webkit-appearance:none;width:100%;height:4px;border-radius:999px;
	background:linear-gradient(to right,var(--credit-accent) 0%,var(--credit-accent) var(--fill,50%),var(--credit-track) var(--fill,50%),var(--credit-track) 100%);
	outline:none;cursor:pointer;
}
.credit-slider::-webkit-slider-thumb{
	appearance:none;-webkit-appearance:none;width:18px;height:18px;border-radius:50%;
	background:var(--credit-accent);border:0;box-shadow:0 1px 3px rgba(20,20,30,.25);
}
.credit-slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--credit-accent);border:0;box-shadow:0 1px 3px rgba(20,20,30,.25)}
.credit-slider::-moz-range-track{height:4px;border-radius:999px;background:var(--credit-track)}
.credit-slider::-moz-range-progress{height:4px;border-radius:999px;background:var(--credit-accent)}

.credit-stats{display:flex;align-items:center;gap:24px;padding-top:6px}
.credit-stats__item{display:flex;flex-direction:column;gap:6px}
.credit-stats__item span{font-size:14px;color:var(--ink-soft)}
.credit-stats__item strong{font-size:18px;font-weight:700;color:var(--ink)}
.credit-stats__divider{width:1px;height:34px;background:var(--border)}

.credit-info-pill{
	display:inline-flex;align-items:center;gap:6px;align-self:flex-start;margin-top:4px;
	height:38px;padding:0 16px;border:0;border-radius:999px;background:var(--surface-soft);
	color:var(--credit-accent-dark);font-size:14px;font-weight:600;cursor:pointer;
}
.credit-info-pill svg{width:15px;height:15px}
.credit-info-pill:hover{background:var(--credit-track)}

.credit-lead-form{display:flex;flex-direction:column;gap:16px}
.credit-lead-field{display:flex;flex-direction:column;gap:8px}
.credit-lead-field span{font-size:14px;font-weight:600;color:var(--ink)}
.credit-lead-field input{
	box-sizing:border-box;width:100%;height:52px;border:1px solid var(--border);border-radius:14px;
	background:var(--surface);color:var(--ink);padding:0 16px;font:inherit;font-size:15px;
}
.credit-lead-field input:focus{outline:none;border-color:var(--credit-accent)}
/* Специфичность выше, чем у .lead-form .btn[type=submit] в lead-forms.css
   (тот задаёт общий зелёный для всех форм заявок) — здесь свой акцент. */
.credit-card .credit-lead-form .btn.credit-lead-submit[type=submit]{
	background:var(--credit-accent);color:#fff;border-radius:14px;
}
.credit-card .credit-lead-form .btn.credit-lead-submit[type=submit]:hover{background:var(--credit-accent-dark)}
.credit-consent{display:flex;align-items:flex-start;gap:10px;font-size:13px;line-height:19px;color:var(--ink-soft)}
.credit-consent input{width:18px;height:18px;flex-shrink:0;margin-top:1px;accent-color:var(--credit-accent)}
.credit-consent a{color:var(--credit-accent-dark)}
.credit-card .lead-form__status{margin:0}
.credit-card .lead-form__status[data-state=success]{padding:12px;border-radius:10px;background:#eff9e3;color:#245f23}
.credit-card .lead-form__status[data-state=error]{padding:10px;border-radius:10px;background:#fff0f0;color:#a82323}

/* Блок "Как это работает?" — воздушный, без номеров/иконок/теней. */
.credit-how{margin-top:64px}
.credit-how__intro{max-width:640px;margin-bottom:36px}
.credit-how__intro h2{margin:0 0 10px;font-size:var(--font-size-h2);line-height:var(--line-height-h2);font-weight:700;color:var(--ink)}
.credit-how__intro p{margin:0;font-size:var(--font-size-body-large);line-height:var(--line-height-body-large);color:var(--ink-soft)}

.credit-how__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.credit-how__card{
	display:flex;flex-direction:column;border-radius:28px;padding:40px 36px 32px;
	min-height:340px;
}
.credit-how__card--blue{background:#eaf1fb}
.credit-how__card--green{background:#eef7e2}
.credit-how__card--peach{background:#fdece6}
.credit-how__card h3{
	margin:auto 0 0;font-size:20px;line-height:1.3;font-weight:600;color:#171819;
}
.credit-how__visual{
	flex:1;display:flex;align-items:center;justify-content:center;
	min-height:180px;margin-bottom:32px;
}

/* Карточка 1 — лист "ЗАЯВКА", без ручки, лёгкий наклон вместо тени стола. */
.credit-how__paper{
	position:relative;width:200px;padding:26px 22px;background:var(--ui-white);border-radius:10px;
	transform:rotate(-3deg);box-shadow:0 10px 24px rgba(30,40,70,.08);
}
.credit-how__paper-title{display:block;margin-bottom:18px;font-size:17px;font-weight:700;letter-spacing:.03em;color:#171819}
.credit-how__paper-line{display:block;height:2px;margin-bottom:12px;background:var(--ui-gray);border-radius:2px}
.credit-how__paper-line--short{width:60%}
.credit-how__signature{display:block;width:100px;height:auto;margin-top:6px}

/* Карточка 2 — объёмный "%" без внешних изображений. */
.credit-how__percent{
	font-size:150px;line-height:1;font-weight:800;font-family:var(--font-family);
	background:linear-gradient(155deg,#8fd94a 0%,#5fa524 65%,#4a8a1a 100%);
	-webkit-background-clip:text;background-clip:text;color:transparent;
	filter:drop-shadow(0 6px 10px rgba(60,110,20,.18));
}

.credit-how__placeholder{
	display:flex;align-items:center;justify-content:center;text-align:center;
	width:100%;height:180px;border:1.5px dashed rgba(23,24,25,.18);border-radius:20px;
	color:rgba(23,24,25,.55);font-size:14px;line-height:20px;padding:16px;
}

@media (max-width:820px){
	.credit-hero{grid-template-columns:1fr;gap:32px;padding:40px 28px;border-radius:24px;text-align:left}
	.credit-hero__title{font-size:34px}
	.credit-hero__lead{font-size:18px;max-width:none}
	.credit-hero__visual{min-height:0}
	.credit-hero__visual-placeholder{min-height:220px}
	.credit-hero__break{display:none}

	.credit-card{padding:28px 20px;border-radius:22px}
	.credit-card__body{grid-template-columns:1fr;gap:28px}
	.credit-card__divider{display:none}

	.credit-how{margin-top:44px}
	.credit-how__grid{grid-template-columns:1fr;gap:20px}
	.credit-how__card{padding:32px 26px 28px;min-height:0}
	.credit-how__percent{font-size:120px}
}

@media (max-width:480px){
	.credit-hero{padding:28px 18px}
	.credit-hero__title{font-size:28px}
	.credit-hero__lead{font-size:16px}
}

.credit-how__keys{
	display:block;width:min(100%,280px);height:220px;object-fit:contain;
	filter:drop-shadow(0 13px 15px rgba(80,45,30,.12));
}