/* "Bolshaya Peremena 4.0" — temporary front page block. Remove with the section.
   Selectors are prefixed with .bp because css.css sets `.page ul {...}` on the
   body class, which outranks a bare class selector on the steps list. */

.bp {
	position: relative;
	background: #fff;
	margin-bottom: 160px;
}

/* Ribbon artwork: one gradient instead of a bitmap. Every stripe of the design
   runs at 30 degrees to the horizontal, so the whole composition is a stack of
   bands measured *across* them — that is a single linear-gradient(150deg).
   Stops are the design's own band edges, projected onto that axis. Because a
   gradient band is infinite along its own direction, every stripe reaches both
   edges of the hero on its own, at any viewport size. */
.bp-hero {
	position: relative;
	overflow: hidden;
	padding-top: 40px;
	background: #fff;
}

.bp-decor {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* One element per stripe. --bp-band masks the stripe out of the 150deg axis
   (across the ribbons); the background then fades it along the 60deg axis (with
   them). The mask edges run parallel to the stripe itself, so it still spans the
   hero edge to edge - only its opacity changes, nothing is clipped. Numbering
   follows the design, right to left. */
.bp-decor i {
	position: absolute;
	inset: 0;
	display: block;
	-webkit-mask-image: var(--bp-band);
	mask-image: var(--bp-band);
}

.bp-decor-1 {
	--bp-band: linear-gradient(150deg, transparent 89.2%, #000 89.2%, #000 92.5%, transparent 92.5%);
	background: linear-gradient(60deg, rgba(198,36,56,0) 45%, rgba(198,36,56,1) 70%);
}

.bp-decor-2 {
	--bp-band: linear-gradient(150deg, transparent 75%, #000 75%, #000 86.9%, transparent 86.9%);
	background: #bb2034;
}

.bp-decor-3 {
	--bp-band: linear-gradient(150deg, transparent 55.3%, #000 55.3%, #000 72.7%, transparent 72.7%);
	background: linear-gradient(60deg, rgba(172,33,48,0) 60%, rgba(172,33,48,1) 75%);
}

.bp-decor-4 {
	--bp-band: linear-gradient(150deg, transparent 45.2%, #000 45.2%, #000 47.9%, transparent 47.9%);
	background: linear-gradient(60deg, rgba(232,143,156,.05) 45%, rgba(232,143,156,1) 60%, rgba(232,143,156,0) 70%);
}

.bp-decor-5 {
	--bp-band: linear-gradient(150deg, transparent 27.5%, #000 27.5%, #000 33.2%, transparent 33.2%);
	background: linear-gradient(60deg, rgba(203,36,57,1) 5%, rgba(203,36,57,0) 20%);
}

.bp-decor-6 {
	--bp-band: linear-gradient(150deg, transparent 23.5%, #000 23.5%, #000 25.6%, transparent 25.6%);
	background: linear-gradient(60deg, rgba(203,42,62,1) 10%, rgba(203,42,62,0) 25%);
}

.bp-inner {
	position: relative;
	z-index: 1;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding-bottom: 46px;
}

.bp-left {
	flex: 1;
	min-width: 0;
	padding-left: 66px;
}

.bp-kicker {
	margin-left: -66px;
	margin-top: -7px;
	color: #302f30;
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
	letter-spacing: .3em;
	text-transform: uppercase;
}

.bp-kicker span {
	display: block;
}

.bp-logo {
	display: block;
	width: 522px;
	max-width: 100%;
	height: auto;
	margin: -22px 0 0;
}

.bp-title {
	color: #1a1a1a;
	font-size: 54px;
	font-weight: bold;
	line-height: 48px;
	letter-spacing: .07em;
	text-transform: uppercase;
	margin-top: 17px;
}

.bp-title::after {
	content: '';
	display: inline-block;
	width: 126px;
	height: 2px;
	background: #c71d37;
	vertical-align: middle;
	margin-left: 19px;
	position: relative;
	top: -6px;
}

.bp-dates {
	color: #1a1a1a;
	font-size: 29px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: .05em;
	margin-top: 13px;
}

.bp-dates span {
	color: #c71d37;
}

.bp-desc {
	color: #1a1a1a;
	font-size: 25px;
	line-height: 30px;
	letter-spacing: .047em;
	margin-top: 8px;
}

.bp-side {
	position: absolute;
	top: 0;
	color: #a2a2a5;
	font-size: 13px;
	font-weight: 500;
	line-height: 19px;
	letter-spacing: .3em;
	text-transform: uppercase;
	z-index: 1;
}

.bp-side-left {
	left: -116px;
	top: 500px;
	padding: 45px 0 22px 16px;
	border-left: 1px solid #c9cacc;
}

.bp-side-left::after {
	content: '';
	position: absolute;
	left: 17px;
	bottom: 4px;
	width: 22px;
	height: 2px;
	background: #c71d37;
}

.bp-side-right {
	right: -129px;
	top: 70px;
	padding: 34px 17px 14px 0;
	border-right: 1px solid #c9cacc;
	text-align: right;
}

.bp-right {
	position: relative;
	flex: 0 0 514px;
	width: 514px;
	margin-top: 7px;
}

.bp-form {
	position: relative;
	background: #fff;
	border-radius: 8px;
	padding: 51px 45px 45px;
	box-shadow: 0 18px 55px rgba(0,0,0,.12);
}

.bp-form-title {
	color: #101010;
	font-size: 50px;
	font-weight: bold;
	line-height: 1;
	letter-spacing: .07em;
	text-transform: uppercase;
}

.bp-form-title::after {
	content: '';
	display: inline-block;
	width: 34px;
	height: 2px;
	background: #c71d37;
	vertical-align: middle;
	margin-left: 19px;
	position: relative;
	top: 0;
}

.bp-form-subtitle {
	color: #a2a3a6;
	font-size: 21px;
	line-height: 1.3;
	letter-spacing: .045em;
	margin-top: 6px;
}

.bp-field {
	margin-top: 19px;
}

.bp-form-subtitle + .bp-field {
	margin-top: 30px;
}

.bp-field input {
	width: 100%;
	height: 62px;
	border: 1px solid #e0e1e4;
	border-radius: 8px;
	background: #fff;
	padding: 0 25px;
	font-family: 'PF Din Text';
	font-size: 19px;
	color: #1a1a1a;
	outline: none;
	transition: .25s;
	-webkit-appearance: none;
}

.bp-field input::placeholder {
	color: #c9c9cb;
}

.bp-field input:focus {
	border-color: #c71d37;
	transition: .25s;
}

.bp-field-error input {
	border-color: #c71d37;
	background: #fdf5f6;
}

.bp-field-phone {
	display: flex;
	align-items: stretch;
	border: 1px solid #e0e1e4;
	border-radius: 8px;
	transition: .25s;
}

.bp-field-phone.bp-field-error {
	border-color: #c71d37;
}

.bp-phone-code {
	flex: 0 0 66px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-right: 1px solid #e0e1e4;
	color: #1a1a1a;
	font-size: 19px;
}

.bp-field-phone input {
	border: 0;
	border-radius: 0;
	height: 60px;
	padding-left: 18px;
}

.bp-field-phone input:focus {
	border: 0;
}

.bp-field-phone.bp-field-error input {
	background: #fdf5f6;
}

.bp-submit {
	position: relative;
	width: 100%;
	height: 72px;
	margin-top: 17px;
	padding: 0 33px 0 0;
	border: 0;
	border-radius: 8px;
	background: #c71d37;
	color: #fff;
	font-family: 'PF Din Text';
	font-size: 20px;
	font-weight: bold;
	letter-spacing: .08em;
	text-transform: uppercase;
	cursor: pointer;
	transition: .25s;
	-webkit-appearance: none;
}

.bp-submit::before {
	content: '';
	position: absolute;
	right: 56px;
	top: 50%;
	width: 17px;
	height: 2px;
	margin-top: -1px;
	background: #fff;
}

.bp-submit::after {
	content: '';
	position: absolute;
	right: 56px;
	top: 50%;
	width: 9px;
	height: 9px;
	margin-top: -5px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	transform: rotate(45deg);
}

.bp-submit:hover {
	background: #ab1830;
	transition: .25s;
}

.bp-submit[disabled] {
	background: #c9c9cb;
	cursor: default;
}

/* The button stays disabled until this is ticked; the markup ships it disabled
   so the gate holds before the script runs. */
.bp-consent {
	display: flex;
	align-items: flex-start;
	margin-top: 32px;
	color: #6f7175;
	font-size: 16px;
	line-height: 1.4;
	letter-spacing: .04em;
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
}

.bp-consent input {
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	margin: 1px 12px 0 0;
	border: 1px solid #e0e1e4;
	border-radius: 4px;
	background: #fff;
	cursor: pointer;
	transition: .25s;
	-webkit-appearance: none;
	appearance: none;
}

.bp-consent input:checked {
	border-color: #c71d37;
	background: #c71d37 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
}

.bp-consent input:focus-visible {
	outline: 2px solid #c71d37;
	outline-offset: 2px;
}

.bp-status {
	font-size: 16px;
	line-height: 1.4;
	margin-top: 14px;
}

.bp-status:empty {
	display: none;
}

.bp-status-error {
	color: #c71d37;
}

.bp-status-success {
	color: #5c661a;
}

/*
 * The card must not resize once the payment is through: the form keeps its
 * space through visibility instead of display, and the paid state is laid
 * over it. Absolute inset is relative to the padding box, so the heading
 * lands exactly where .bp-form-title sat, at every breakpoint and whatever
 * the wording — the message follows it in normal flow.
 */
.bp-done {
	display: none;
}

.bp-form-done .bp-form-title:not(.bp-done-title),
.bp-form-done .bp-form-subtitle:not(.bp-done-text),
.bp-form-done .bp-field,
.bp-form-done .bp-submit,
.bp-form-done .bp-consent,
.bp-form-done .bp-status {
	visibility: hidden;
}

.bp-form-done .bp-done {
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	/* Absolute offsets run from the border edge, so the card's own padding is
	   inherited to line the heading up with .bp-form-title. Inheriting keeps
	   the three breakpoint paddings in one place. */
	padding: inherit;
}

/* The heading reuses .bp-form-title, so it tracks its size at every
   breakpoint; only the trailing dash has no place here. */
.bp-done-title::after {
	display: none;
}

.bp-done-text {
	color: #5c661a;
	margin-top: 18px;
}

.bp-countdown {
	margin-top: 14px;
	color: #6f7175;
	font-size: 16px;
	letter-spacing: .02em;
}

.bp-steps {
	position: relative;
	z-index: 1;
	border-top: 1px solid #eeeff0;
	padding: 34px 0 26px;
}

.bp .bp-steps-list {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bp .bp-step {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
}

.bp .bp-steps-sep {
	flex: 0 0 1px;
	width: 1px;
	height: 74px;
	margin: 0;
	padding: 0;
	background: #eeeff0;
	list-style: none;
}

.bp-step-icon {
	flex: 0 0 84px;
	width: 84px;
	height: 84px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f5f5f5;
	border-radius: 50%;
	margin-right: 34px;
}

.bp-step-text span {
	display: block;
	color: #3a3d44;
	font-size: 23px;
	line-height: 26px;
	letter-spacing: .07em;
}

.bp-step-text b {
	display: block;
	color: #c71d37;
	font-size: 28px;
	font-weight: 500;
	line-height: 28px;
	letter-spacing: .07em;
}

.bp-step-plain .bp-step-text b {
	color: #3a3d44;
	font-size: 23px;
	line-height: 26px;
	font-weight: 400;
}

@media (max-width: 1439px) {
	.bp-side {
		display: none;
	}
}

@media (max-width: 1199px) {
	.bp {
		margin-bottom: 120px;
	}

	.bp-left {
		padding-left: 40px;
	}

	/* the logo is scaled down here but its arc still rides over the kicker, so
	   the third line goes back to the tighter setting */
	.bp-kicker {
		margin-left: -40px;
		letter-spacing: .2em;
	}

	.bp-logo {
		width: 440px;
		margin-top: -15px;
	}

	.bp-title {
		font-size: 40px;
		line-height: 40px;
	}

	.bp-title::after {
		width: 50px;
		margin-left: 18px;
		top: -4px;
	}

	.bp-dates {
		font-size: 23px;
	}

	.bp-desc {
		font-size: 19px;
		line-height: 27px;
	}

	.bp-right {
		flex: 0 0 430px;
		width: 430px;
	}

	.bp-form {
		padding: 35px;
	}

	.bp-form-title {
		font-size: 38px;
	}

	.bp-form-subtitle {
		font-size: 18px;
	}

	.bp-field input {
		height: 56px;
		font-size: 18px;
	}

	.bp-field-phone input {
		height: 54px;
	}

	.bp-submit {
		height: 66px;
		font-size: 17px;
	}

	/* Off the desktop layout the row stops spanning the whole container: the
	   three steps group in the middle and close up as the screen narrows,
	   instead of drifting apart with the dividers stranded between them.
	   Spacing sits on the dividers rather than in flex gap, which older
	   Safari ignores — there it would leave the steps touching. */
	.bp .bp-steps-list {
		justify-content: center;
	}

	.bp .bp-steps-sep {
		margin: 0 clamp(20px, 4vw, 60px);
	}

	.bp-step-icon {
		flex: 0 0 70px;
		width: 70px;
		height: 70px;
		margin-right: 22px;
	}

	.bp-step-icon svg {
		width: 30px;
		height: 32px;
	}

	.bp-step-text span,
	.bp-step-plain .bp-step-text b {
		font-size: 18px;
		line-height: 22px;
	}

	.bp-step-text b {
		font-size: 22px;
		line-height: 26px;
	}
}

@media (max-width: 991px) {
	.bp {
		padding-top: 30px;
		margin-bottom: 100px;
	}

	/* The hero is much taller here, so the same bands cover a bigger share of it
	   - they get washed out further to keep the copy on top readable. */
	.bp-decor::after {
		content: '';
		position: absolute;
		inset: 0;
		background: rgba(255,255,255,.45);
	}

	.bp-inner {
		display: block;
		padding-bottom: 45px;
	}

	/* Stacked layout: the hero column takes the same width as the form below
	   and is centred the same way, so the two blocks share a left edge. */
	.bp-left {
		width: 100%;
		max-width: 514px;
		margin: 0 auto;
		padding-left: 0;
	}

	.bp-kicker {
		margin-left: 0;
	}

	.bp-logo {
		width: 470px;
		margin: 0;
	}

	.bp-title {
		font-size: 42px;
		line-height: 42px;
	}

	.bp-right {
		flex: none;
		width: 100%;
		max-width: 514px;
		margin: 45px auto 0;
	}

	.bp-desc br {
		display: none;
	}
}

@media (max-width: 767px) {
	.bp .bp-steps-list {
		display: block;
	}

	.bp .bp-step {
		padding: 16px 0;
	}

	.bp .bp-steps-sep {
		width: 100%;
		height: 1px;
		margin: 0;
	}
}

/*
 * Between the compact row and the full stack two steps still sit side by side,
 * so only the last one drops to a second, centred row. The second divider is
 * what forces the wrap: taken full width it cannot share the first line.
 */
@media (min-width: 600px) and (max-width: 767px) {
	.bp .bp-steps-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	.bp .bp-step {
		padding: 0;
	}

	.bp .bp-steps-list .bp-steps-sep:nth-child(2) {
		flex: 0 0 1px;
		width: 1px;
		height: 74px;
		margin: 0 clamp(20px, 4vw, 60px);
	}

	.bp .bp-steps-list .bp-steps-sep:nth-child(4) {
		flex: 0 0 100%;
		width: 100%;
		height: 1px;
		margin: 26px 0;
	}
}

@media (max-width: 599px) {
	.bp {
		padding-top: 20px;
		margin-bottom: 80px;
	}

	.bp-logo {
		width: 100%;
	}

	.bp-title {
		font-size: 34px;
		line-height: 34px;
	}

	.bp-title br {
		display: none;
	}

	.bp-dates {
		font-size: 21px;
	}

	.bp-desc {
		font-size: 17px;
		line-height: 25px;
	}

	.bp-form {
		padding: 28px 20px;
	}

	.bp-form-title {
		font-size: 30px;
	}

	.bp-form-title::after {
		width: 28px;
		margin-left: 14px;
	}

	.bp-form-subtitle {
		font-size: 16px;
		margin-top: 14px;
	}

	.bp-form-subtitle + .bp-field {
		margin-top: 24px;
	}
}

@media (max-width: 450px) {
	.bp-kicker {
		font-size: 11px;
		letter-spacing: .14em;
	}

	.bp-title {
		font-size: 30px;
		line-height: 31px;
	}

	.bp-dates {
		font-size: 19px;
	}

	.bp-desc {
		font-size: 16px;
		line-height: 24px;
	}

	.bp-field input {
		height: 52px;
		font-size: 16px;
		padding: 0 18px;
	}

	.bp-field-phone input {
		height: 50px;
	}

	.bp-phone-code {
		flex: 0 0 54px;
		font-size: 16px;
	}

	.bp-submit {
		height: 58px;
		font-size: 15px;
	}

	.bp-submit::before {
		right: 26px;
		width: 18px;
	}

	.bp-submit::after {
		right: 26px;
	}

	.bp-step-icon {
		flex: 0 0 60px;
		width: 60px;
		height: 60px;
		margin-right: 18px;
	}

	.bp-step-icon svg {
		width: 26px;
		height: 27px;
	}
}